@workbench-kit/react 0.0.2-prototype.0.1.2 → 0.0.2-prototype.0.2.2

package/src/primitives/searchable-multi-select/SearchableMultiSelect.tsx

@@ -0,0 +1,378 @@
+import './searchable-multi-select.css';
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+import { cx } from '../../utils/cx';
+import { cxCodicon } from '../../utils/codicon';
+import { Chip } from '../chip';
+import { TextInput } from '../text-input/TextInput';
+import {
+  isTriggerVisible,
+  measureOverlayPosition,
+  overlayListboxStyle,
+  resolvePortalContainer,
+  type OverlayPosition,
+} from './overlay';
+
+export interface SearchableMultiSelectOption {
+  readonly count?: number | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly label: string;
+  readonly value: string;
+}
+
+export interface SearchableMultiSelectProps {
+  readonly 'aria-label'?: string | undefined;
+  readonly className?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  /** Shown when the query matches no options. Default: "No matching options". */
+  readonly emptyMessage?: string | undefined;
+  /** Aria label for dismissible selected chips. Default: "Remove {label}". */
+  readonly getRemoveChipAriaLabel?: ((optionLabel: string) => string) | undefined;
+  readonly onValueToggle: (value: string) => void;
+  readonly options: ReadonlyArray<SearchableMultiSelectOption>;
+  /** Search input placeholder. Default: "Search". */
+  readonly searchPlaceholder?: string | undefined;
+  readonly selectedValues: readonly string[];
+}
+
+/**
+ * Searchable multi-select control: selected values as dismissible chips,
+ * a filterable combobox input, and a portaled option listbox.
+ */
+export function SearchableMultiSelect({
+  'aria-label': ariaLabel,
+  className,
+  disabled = false,
+  emptyMessage = 'No matching options',
+  getRemoveChipAriaLabel,
+  onValueToggle,
+  options,
+  searchPlaceholder = 'Search',
+  selectedValues,
+}: SearchableMultiSelectProps): ReactNode {
+  const listboxId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLInputElement>(null);
+  const listboxRef = useRef<HTMLUListElement>(null);
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [overlayPosition, setOverlayPosition] = useState<OverlayPosition | null>(null);
+
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const optionByValue = useMemo(() => {
+    const map = new Map<string, SearchableMultiSelectOption>();
+    for (const option of options) {
+      map.set(option.value, option);
+    }
+    return map;
+  }, [options]);
+
+  const selectedOptions = useMemo(() => {
+    const fromOptions = options.filter((option) => selectedSet.has(option.value));
+    const known = new Set(fromOptions.map((option) => option.value));
+    const orphans = selectedValues
+      .filter((value) => !known.has(value))
+      .map((value) => ({ label: value, value }));
+    return [...fromOptions, ...orphans];
+  }, [options, selectedSet, selectedValues]);
+
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleOptions = useMemo(() => {
+    if (!normalizedQuery) {
+      return options;
+    }
+    return options.filter((option) => option.label.toLowerCase().includes(normalizedQuery));
+  }, [normalizedQuery, options]);
+
+  const closeListbox = useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+    setOverlayPosition(null);
+  }, []);
+
+  const updateOverlayPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) {
+      return;
+    }
+
+    if (!isTriggerVisible(trigger)) {
+      closeListbox();
+      return;
+    }
+
+    const optionCount = Math.max(visibleOptions.length, 1);
+    const position = measureOverlayPosition(trigger, optionCount);
+    if (!position) {
+      closeListbox();
+      return;
+    }
+
+    setOverlayPosition(position);
+  }, [closeListbox, visibleOptions.length]);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setOverlayPosition(null);
+      return;
+    }
+
+    updateOverlayPosition();
+    window.addEventListener('resize', updateOverlayPosition);
+    window.addEventListener('scroll', updateOverlayPosition, true);
+    return () => {
+      window.removeEventListener('resize', updateOverlayPosition);
+      window.removeEventListener('scroll', updateOverlayPosition, true);
+    };
+  }, [open, updateOverlayPosition]);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+    const onPointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (rootRef.current?.contains(target)) {
+        return;
+      }
+      if (listboxRef.current?.contains(target)) {
+        return;
+      }
+      closeListbox();
+    };
+    window.addEventListener('pointerdown', onPointerDown, true);
+    return () => {
+      window.removeEventListener('pointerdown', onPointerDown, true);
+    };
+  }, [closeListbox, open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    if (visibleOptions.length === 0) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    setHighlightedIndex((current) => {
+      if (current >= 0 && current < visibleOptions.length) {
+        return current;
+      }
+      const firstEnabled = visibleOptions.findIndex((option) => !option.disabled);
+      return firstEnabled;
+    });
+  }, [open, visibleOptions]);
+
+  const toggleValue = (value: string) => {
+    if (disabled) {
+      return;
+    }
+    onValueToggle(value);
+  };
+
+  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    if (event.key === 'ArrowDown') {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setHighlightedIndex((current) => moveHighlight(visibleOptions, current, 1));
+      return;
+    }
+
+    if (event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setHighlightedIndex((current) => moveHighlight(visibleOptions, current, -1));
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      const highlighted = highlightedIndex >= 0 ? visibleOptions[highlightedIndex] : undefined;
+      if (open && highlighted && !highlighted.disabled) {
+        event.preventDefault();
+        toggleValue(highlighted.value);
+        setQuery('');
+        return;
+      }
+    }
+
+    if (event.key === 'Escape') {
+      if (open) {
+        event.preventDefault();
+        closeListbox();
+      }
+      return;
+    }
+
+    if (event.key === 'Backspace' && query.length === 0 && selectedValues.length > 0) {
+      event.preventDefault();
+      const last = selectedValues[selectedValues.length - 1];
+      if (last !== undefined) {
+        toggleValue(last);
+      }
+    }
+  };
+
+  const listbox =
+    open && overlayPosition ? (
+      <ul
+        ref={listboxRef}
+        className={cx('ui-searchable-multi-select__list', 'ui-workbench-scrollbar')}
+        id={listboxId}
+        role="listbox"
+        aria-label={ariaLabel}
+        aria-multiselectable="true"
+        data-ui-searchable-multi-select-listbox="true"
+        style={overlayListboxStyle(overlayPosition)}
+      >
+        {visibleOptions.length === 0 ? (
+          <li className="ui-searchable-multi-select__empty" role="presentation">
+            {emptyMessage}
+          </li>
+        ) : (
+          visibleOptions.map((option, index) => {
+            const selected = selectedSet.has(option.value);
+            return (
+              <li key={option.value} role="presentation">
+                <button
+                  aria-selected={selected}
+                  className="ui-searchable-multi-select__option"
+                  data-highlighted={highlightedIndex === index ? 'true' : undefined}
+                  data-selected={selected ? 'true' : undefined}
+                  data-ui-searchable-multi-select-option={option.value}
+                  disabled={disabled || option.disabled}
+                  role="option"
+                  type="button"
+                  onMouseDown={(event) => {
+                    // Keep input focus; prevent blur-before-click race.
+                    event.preventDefault();
+                  }}
+                  onMouseEnter={() => {
+                    setHighlightedIndex(index);
+                  }}
+                  onClick={() => {
+                    toggleValue(option.value);
+                    setQuery('');
+                  }}
+                >
+                  <span className="ui-searchable-multi-select__option-label">{option.label}</span>
+                  {option.count !== undefined ? (
+                    <span className="ui-searchable-multi-select__option-count">{option.count}</span>
+                  ) : null}
+                  {selected ? (
+                    <i
+                      aria-hidden="true"
+                      className={cxCodicon('check', 'ui-searchable-multi-select__option-check')}
+                    />
+                  ) : null}
+                </button>
+              </li>
+            );
+          })
+        )}
+      </ul>
+    ) : null;
+
+  return (
+    <div
+      ref={rootRef}
+      className={cx('ui-searchable-multi-select', className)}
+      data-ui-searchable-multi-select="true"
+      data-open={open ? 'true' : undefined}
+    >
+      {selectedOptions.length > 0 ? (
+        <div className="ui-searchable-multi-select__chips" role="list">
+          {selectedOptions.map((option) => {
+            const chipLabel = optionByValue.get(option.value)?.label ?? option.label;
+            return (
+              <Chip
+                key={option.value}
+                aria-label={getRemoveChipAriaLabel?.(chipLabel) ?? `Remove ${chipLabel}`}
+                className="ui-searchable-multi-select__chip"
+                data-ui-searchable-multi-select-chip={option.value}
+                disabled={disabled}
+                label={chipLabel}
+                onDismiss={
+                  disabled
+                    ? undefined
+                    : () => {
+                        toggleValue(option.value);
+                      }
+                }
+              />
+            );
+          })}
+        </div>
+      ) : null}
+      <div className="ui-searchable-multi-select__control">
+        <TextInput
+          ref={triggerRef}
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          aria-expanded={open}
+          aria-haspopup="listbox"
+          aria-label={ariaLabel}
+          className="ui-searchable-multi-select__input"
+          controlWidth="full"
+          disabled={disabled}
+          placeholder={searchPlaceholder}
+          role="combobox"
+          type="search"
+          value={query}
+          onFocus={() => {
+            if (!disabled) {
+              setOpen(true);
+            }
+          }}
+          onKeyDown={handleInputKeyDown}
+          onValueChange={(next) => {
+            setQuery(next);
+            if (!open) {
+              setOpen(true);
+            }
+          }}
+        />
+      </div>
+      {listbox ? createPortal(listbox, resolvePortalContainer(triggerRef.current)) : null}
+    </div>
+  );
+}
+
+function moveHighlight(
+  options: ReadonlyArray<SearchableMultiSelectOption>,
+  current: number,
+  delta: number,
+): number {
+  if (options.length === 0) {
+    return -1;
+  }
+  let next = current;
+  for (let step = 0; step < options.length; step += 1) {
+    next = (next + delta + options.length) % options.length;
+    if (!options[next]?.disabled) {
+      return next;
+    }
+  }
+  return current;
+}

package/src/primitives/searchable-multi-select/index.ts

@@ -0,0 +1,9 @@
+export { SearchableMultiSelect } from './SearchableMultiSelect';
+export type {
+  SearchableMultiSelectOption,
+  SearchableMultiSelectProps,
+} from './SearchableMultiSelect';
+export {
+  SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR,
+  isSearchableMultiSelectPortalTarget,
+} from './overlay';

package/src/primitives/searchable-multi-select/overlay.ts

@@ -0,0 +1,125 @@
+import type { CSSProperties } from 'react';
+
+export type ListboxPlacement = 'bottom' | 'top';
+
+export interface OverlayPosition {
+  left: number;
+  maxHeight: number;
+  placement: ListboxPlacement;
+  triggerBottom: number;
+  triggerTop: number;
+  width: number;
+}
+
+/** Marker on the portaled listbox so host outside-click handlers can treat it as inside. */
+export const SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR = 'data-ui-searchable-multi-select-listbox';
+
+/**
+ * True when `target` is inside a portaled SearchableMultiSelect listbox.
+ * Use from overlay/popover dismiss handlers — the listbox is not a DOM descendant
+ * of the trigger or panel root.
+ */
+export function isSearchableMultiSelectPortalTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return target.closest(`[${SEARCHABLE_MULTI_SELECT_LISTBOX_ATTR}]`) !== null;
+}
+
+const LISTBOX_MAX_HEIGHT = 176; // 11rem
+const LISTBOX_OPTION_HEIGHT = 26;
+const LISTBOX_PADDING = 8;
+const VIEWPORT_PADDING = 8;
+const GAP = 2;
+
+/**
+ * Prefer a themed host so token/scrollbar inheritance stays coherent.
+ * Fall back to workbench overlays, then document.body (out-of-theme portals
+ * still get explicit listbox colors + `.ui-workbench-scrollbar`).
+ */
+export function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
+  return (
+    trigger?.closest<HTMLElement>(
+      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
+    ) ?? document.body
+  );
+}
+
+export function isTriggerVisible(trigger: HTMLElement): boolean {
+  const rect = trigger.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return false;
+  }
+  if (rect.bottom <= 0 || rect.top >= window.innerHeight) {
+    return false;
+  }
+  if (rect.right <= 0 || rect.left >= window.innerWidth) {
+    return false;
+  }
+
+  if (typeof trigger.checkVisibility === 'function') {
+    return trigger.checkVisibility({ checkOpacity: true, checkVisibilityCSS: true });
+  }
+
+  return true;
+}
+
+export function measureOverlayPosition(
+  trigger: HTMLElement,
+  optionCount: number,
+): OverlayPosition | null {
+  const rect = trigger.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+
+  const idealHeight = Math.min(
+    LISTBOX_MAX_HEIGHT,
+    Math.max(
+      LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+      optionCount * LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING,
+    ),
+  );
+  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING - GAP);
+  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING - GAP);
+  const placement: ListboxPlacement =
+    spaceBelow >= idealHeight
+      ? 'bottom'
+      : spaceAbove >= idealHeight
+        ? 'top'
+        : spaceBelow >= spaceAbove
+          ? 'bottom'
+          : 'top';
+  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
+  const maxHeight = Math.min(
+    LISTBOX_MAX_HEIGHT,
+    Math.max(LISTBOX_OPTION_HEIGHT + LISTBOX_PADDING, available),
+  );
+
+  return {
+    placement,
+    left: rect.left,
+    width: rect.width,
+    maxHeight,
+    triggerTop: rect.top,
+    triggerBottom: rect.bottom,
+  };
+}
+
+export function overlayListboxStyle(position: OverlayPosition): CSSProperties {
+  const base: CSSProperties = {
+    left: position.left,
+    width: position.width,
+    maxHeight: position.maxHeight,
+  };
+
+  if (position.placement === 'bottom') {
+    return { ...base, top: position.triggerBottom + GAP };
+  }
+
+  return {
+    ...base,
+    top: position.triggerTop - GAP,
+    transform: 'translateY(-100%)',
+  };
+}

package/src/primitives/searchable-multi-select/searchable-multi-select.css

@@ -0,0 +1,129 @@
+.ui-searchable-multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  min-width: 0;
+  position: relative;
+}
+
+.ui-searchable-multi-select__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.ui-searchable-multi-select__chip {
+  max-width: 100%;
+}
+
+.ui-searchable-multi-select__control {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  position: relative;
+}
+
+.ui-searchable-multi-select__input {
+  --ui-input-height: 1.625rem;
+  font-size: var(--shell-font-size-meta, 0.75rem);
+}
+
+.ui-searchable-multi-select__list {
+  position: fixed;
+  z-index: 10050;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: 0;
+  padding: 0.25rem;
+  /* Opt in when portaled into a pointer-events:none host. */
+  pointer-events: auto;
+  overflow: auto;
+  border: 1px solid
+    var(--vscode-widget-border, var(--color-border-subtle, var(--color-border, #454545)));
+  border-radius: var(--shell-radius-control, 4px);
+  /*
+   * Portaled to body / overlays — do not rely on `color: inherit` from the
+   * document (often black on dark dropdown surfaces outside [data-theme]).
+   */
+  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: var(
+    --vscode-dropdown-background,
+    var(--color-surface, var(--vscode-editor-background, #1e1e1e))
+  );
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
+  list-style: none;
+}
+
+.ui-searchable-multi-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--shell-spacing-inline-sm, 8px);
+  min-height: 1.625rem;
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border: 0;
+  border-radius: var(--shell-radius-control, 4px);
+  color: var(--vscode-foreground, var(--color-text-primary, var(--color-text, #cccccc)));
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  width: 100%;
+}
+
+.ui-searchable-multi-select__option:hover,
+.ui-searchable-multi-select__option[data-highlighted='true'] {
+  background: var(
+    --color-list-hover,
+    var(--vscode-list-hoverBackground, rgba(255, 255, 255, 0.06))
+  );
+}
+
+.ui-searchable-multi-select__option[data-selected='true'] {
+  background: var(
+    --vscode-list-activeSelectionBackground,
+    var(--color-list-active, rgba(0, 127, 212, 0.28))
+  );
+}
+
+.ui-searchable-multi-select__option:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ui-searchable-multi-select__option-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  line-height: 1.25;
+}
+
+.ui-searchable-multi-select__option-count {
+  flex: 0 0 auto;
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.6875rem);
+  font-variant-numeric: tabular-nums;
+}
+
+.ui-searchable-multi-select__option-check {
+  flex: 0 0 auto;
+  width: 0.875rem;
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text, #cccccc));
+  font-size: 0.75rem;
+}
+
+.ui-searchable-multi-select__empty {
+  margin: 0;
+  padding: 0.5rem;
+  color: var(--color-text-muted, var(--vscode-descriptionForeground, #9d9d9d));
+  font-size: var(--shell-font-size-meta, 0.75rem);
+  line-height: 1.35;
+}

package/src/primitives/select/Select.tsx

@@ -1,3 +1,5 @@
+import './select.css';
+import './select.app.css';
 import {
   useCallback,
   useEffect,
@@ -10,7 +12,7 @@ import {
   type KeyboardEvent,
 } from 'react';
 import { createPortal } from 'react-dom';
-import type { ControlWidth } from '../TextInput';
+import type { ControlWidth } from '../text-input/TextInput';
 import { cxCodicon } from '../../utils/codicon';
 import { cx } from '../../utils/cx';
 import { getEnabledOptionIndex, parseOptions } from './options';
@@ -22,6 +24,19 @@ export interface SelectProps extends ComponentPropsWithRef<'select'> {
   onValueChange?: (value: string, event: ChangeEvent<HTMLSelectElement>) => void;
 }
 
+/**
+ * Portaling straight to `document.body` escapes the workbench root (`[data-theme-preset]`),
+ * which re-declares theme tokens locally and shadows whatever a contributed theme overrides
+ * on `document.documentElement`. Prefer themed hosts / overlay roots when present.
+ */
+function resolvePortalContainer(trigger: HTMLElement | null): HTMLElement {
+  return (
+    trigger?.closest<HTMLElement>(
+      '[data-theme-preset], [data-theme], .ui-workbench-host-root, .ide-workbench-overlays',
+    ) ?? document.body
+  );
+}
+
 export function Select({
   className,
   controlWidth = 'default',
@@ -216,7 +231,10 @@ export function Select({
               onMouseDown={(event) => event.preventDefault()}
               onClick={() => selectOption(option)}
             >
-              {option.label}
+              <span className="ui-select__option-check" aria-hidden="true">
+                {isSelected ? <i className={cxCodicon('check')} /> : null}
+              </span>
+              <span className="ui-select__option-label">{option.label}</span>
             </li>
           );
         })}
@@ -247,7 +265,7 @@ export function Select({
         </span>
       </button>
 
-      {listbox ? createPortal(listbox, document.body) : null}
+      {listbox ? createPortal(listbox, resolvePortalContainer(triggerRef.current)) : null}
 
       <select
         ref={nativeSelectRef}