Add SearchDropdown component with searchable selection functionality

packages/ui/src/components/search-dropdown/private/types.ts

@@ -0,0 +1,3 @@
+import { INVALID_ID } from '../../../utilities/private/constants.js'
+
+export type Id = typeof INVALID_ID | string

packages/ui/src/components/search-dropdown/private/update-menu-element-layout.ts

@@ -0,0 +1,147 @@
+import {
+  INVALID_ID,
+  ITEM_ID_DATA_ATTRIBUTE_NAME,
+  VIEWPORT_MARGIN
+} from '../../../utilities/private/constants.js'
+import { Id } from './types.js'
+
+export function updateMenuElementLayout(
+  rootElement: HTMLDivElement,
+  menuElement: HTMLDivElement,
+  selectedId: Id
+) {
+  const rootElementBoundingClientRect = rootElement.getBoundingClientRect()
+  const rootWidth = rootElement.offsetWidth
+  const rootHeight = rootElement.offsetHeight
+  const rootLeft = rootElementBoundingClientRect.left
+  const rootTop = rootElementBoundingClientRect.top
+
+  menuElement.style.minWidth = `${rootWidth}px`
+
+  const menuElementMaxWidth = window.innerWidth - 2 * VIEWPORT_MARGIN
+  menuElement.style.maxWidth = `${menuElementMaxWidth}px`
+
+  const menuElementMaxHeight = window.innerHeight - 2 * VIEWPORT_MARGIN
+  menuElement.style.maxHeight = `${menuElementMaxHeight}px`
+
+  const menuWidth = menuElement.offsetWidth
+  const menuHeight = menuElement.offsetHeight
+  const menuScrollHeight = menuElement.scrollHeight
+  const menuPaddingTop = parseInt(
+    window.getComputedStyle(menuElement).paddingTop,
+    10
+  )
+  const labelElement = getSelectedLabelElement(menuElement, selectedId)
+
+  const left = computeLeft({
+    menuWidth,
+    rootLeft
+  })
+  menuElement.style.left = `${left}px`
+
+  const top = computeTop({
+    menuHeight,
+    rootTop,
+    selectedTop: labelElement.offsetTop
+  })
+  menuElement.style.top = `${top}px`
+
+  const isScrollable = menuScrollHeight > menuHeight
+  if (!isScrollable) {
+    return
+  }
+  menuElement.scrollTop = computeScrollTop({
+    menuHeight,
+    menuPaddingTop,
+    menuScrollHeight,
+    rootHeight,
+    rootTop,
+    selectedTop: labelElement.offsetTop
+  })
+}
+
+function getSelectedLabelElement(
+  menuElement: HTMLDivElement,
+  selectedId: Id
+): HTMLLabelElement {
+  const inputElement = menuElement.querySelector<HTMLInputElement>(
+    selectedId === INVALID_ID
+      ? `[${ITEM_ID_DATA_ATTRIBUTE_NAME}]`
+      : `[${ITEM_ID_DATA_ATTRIBUTE_NAME}='${selectedId}']`
+  )
+  if (inputElement === null) {
+    throw new Error('`inputElement` is `null`')
+  }
+  const labelElement = inputElement.parentElement
+  if (labelElement === null) {
+    throw new Error('`labelElement` is `null`')
+  }
+  return labelElement as HTMLLabelElement
+}
+
+function computeLeft(options: { menuWidth: number; rootLeft: number }): number {
+  const { menuWidth, rootLeft } = options
+  if (rootLeft <= VIEWPORT_MARGIN) {
+    return VIEWPORT_MARGIN
+  }
+  const viewportWidth = window.innerWidth
+  if (rootLeft + menuWidth > viewportWidth - VIEWPORT_MARGIN) {
+    return viewportWidth - VIEWPORT_MARGIN - menuWidth
+  }
+  return rootLeft
+}
+
+function computeTop(options: {
+  menuHeight: number
+  rootTop: number
+  selectedTop: number
+}): number {
+  const { menuHeight, rootTop, selectedTop } = options
+  const viewportHeight = window.innerHeight
+  if (
+    rootTop <= VIEWPORT_MARGIN ||
+    menuHeight === viewportHeight - 2 * VIEWPORT_MARGIN
+  ) {
+    return VIEWPORT_MARGIN
+  }
+  // Position the selected element at `rootTop`
+  const top = rootTop - selectedTop
+  const minimumTop = VIEWPORT_MARGIN
+  const maximumTop = viewportHeight - VIEWPORT_MARGIN - menuHeight
+  return restrictToRange(top, minimumTop, maximumTop)
+}
+
+function computeScrollTop(options: {
+  menuHeight: number
+  menuPaddingTop: number
+  menuScrollHeight: number
+  rootHeight: number
+  rootTop: number
+  selectedTop: number
+}): number {
+  const {
+    menuHeight,
+    menuPaddingTop,
+    menuScrollHeight,
+    rootHeight,
+    rootTop,
+    selectedTop
+  } = options
+  const restrictedRootTop = restrictToRange(
+    rootTop,
+    VIEWPORT_MARGIN,
+    window.innerHeight - VIEWPORT_MARGIN - rootHeight + menuPaddingTop / 2
+  )
+  const scrollTop = selectedTop - (restrictedRootTop - VIEWPORT_MARGIN)
+  const minimumScrollTop = 0
+  const maximumScrollTop = menuScrollHeight - menuHeight
+  return restrictToRange(scrollTop, minimumScrollTop, maximumScrollTop)
+}
+
+function restrictToRange(
+  value: number,
+  minimum: number,
+  maximum: number
+): number {
+  return Math.min(Math.max(value, minimum), maximum)
+}

packages/ui/src/components/search-dropdown/search-dropdown.module.css

@@ -0,0 +1,147 @@
+.searchDropdown {
+  position: relative;
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  outline: none;
+}
+
+.searchDropdown:focus {
+  outline: none;
+}
+
+.disabled,
+.disabled * {
+  cursor: not-allowed;
+}
+
+.inputContainer {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.input {
+  display: block;
+  width: 100%;
+  height: var(--space-32);
+  padding: var(--space-0) var(--space-32);
+  border-radius: var(--border-radius-6);
+  background-color: var(--figma-color-bg-secondary);
+  color: var(--figma-color-text);
+  cursor: text;
+}
+.disabled .input {
+  color: var(--figma-color-text-disabled);
+  cursor: not-allowed;
+}
+.input::placeholder {
+  color: var(--figma-color-text-tertiary);
+}
+
+.searchIcon {
+  position: absolute;
+  top: var(--space-4);
+  left: var(--space-4);
+  color: var(--figma-color-icon-secondary);
+  pointer-events: none; /* so that clicking the icon focuses the textbox */
+}
+.disabled .searchIcon {
+  color: var(--figma-color-icon-disabled);
+}
+.input:focus ~ .searchIcon {
+  color: var(--figma-color-icon);
+}
+
+.icon {
+  position: absolute;
+  top: 50%;
+  left: var(--space-3);
+  color: var(--figma-color-icon-secondary);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.clearButton {
+  position: absolute;
+  top: var(--space-0);
+  right: var(--space-0);
+  width: var(--space-32);
+  height: var(--space-32);
+  padding: calc(var(--space-4) - var(--border-width-1));
+  color: var(--figma-color-icon-secondary);
+}
+.searchTextbox:not(.disabled) .clearButton:hover,
+.searchTextbox:not(.disabled) .clearButton:focus-visible {
+  color: var(--figma-color-icon);
+}
+.disabled .clearButton {
+  color: var(--figma-color-icon-disabled);
+}
+
+.clearButtonBox {
+  display: block;
+  border: var(--border-width-1) solid transparent;
+  border-radius: var(--border-radius-4);
+}
+.searchTextbox:not(.disabled) .clearButton:focus-visible .clearButtonBox {
+  border-color: var(--figma-color-border-selected);
+}
+.clearButtonBox svg {
+  display: block;
+}
+
+.chevronIcon {
+  position: absolute;
+  right: 0;
+  display: flex;
+  width: var(--space-32);
+  height: var(--space-32);
+  align-items: center;
+  justify-content: center;
+}
+
+.valueDisplay {
+  display: none;
+}
+
+/* Position the menu in the document body */
+:global(.menu-container) {
+  position: fixed;
+  z-index: var(--z-index-1);
+  width: 100%;
+  padding: var(--space-4) var(--space-4);
+}
+
+.searchContainer {
+  position: sticky;
+  z-index: var(--z-index-3);
+  top: 0;
+  width: 100%;
+  padding: var(--space-8) var(--space-8);
+  border-bottom: var(--border-width-1) solid var(--figma-color-border);
+  background-color: var(--figma-color-bg);
+}
+
+.searchInputWrapper {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.searchInput {
+  width: 100%;
+  height: var(--space-32);
+  padding: var(--space-0) var(--space-8) var(--space-0) var(--space-32);
+  border: var(--border-width-1) solid var(--figma-color-border);
+  background-color: var(--figma-color-bg);
+  color: var(--figma-color-text);
+  font-size: var(--font-size-12);
+}
+
+.searchInput:focus {
+  border-color: var(--figma-color-border-selected);
+  outline: 0;
+}