@workbench-kit/react 0.0.1-prototype.0 → 0.0.2-prototype.0.1.2

package/src/primitives/select/Select.tsx

@@ -0,0 +1,266 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type ComponentPropsWithRef,
+  type KeyboardEvent,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { ControlWidth } from '../TextInput';
+import { cxCodicon } from '../../utils/codicon';
+import { cx } from '../../utils/cx';
+import { getEnabledOptionIndex, parseOptions } from './options';
+import { isTriggerVisible, measureOverlayPosition, overlayListboxStyle } from './overlay';
+import type { OverlayPosition, ParsedOption } from './types';
+
+export interface SelectProps extends ComponentPropsWithRef<'select'> {
+  controlWidth?: ControlWidth;
+  onValueChange?: (value: string, event: ChangeEvent<HTMLSelectElement>) => void;
+}
+
+export function Select({
+  className,
+  controlWidth = 'default',
+  defaultValue,
+  disabled = false,
+  id,
+  onChange,
+  onValueChange,
+  value,
+  children,
+  'aria-describedby': ariaDescribedBy,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  ...nativeSelectProps
+}: SelectProps) {
+  const options = parseOptions(children);
+  const listboxId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const listboxRef = useRef<HTMLUListElement>(null);
+  const nativeSelectRef = useRef<HTMLSelectElement>(null);
+  const [open, setOpen] = useState(false);
+  const [overlayPosition, setOverlayPosition] = useState<OverlayPosition | null>(null);
+  const [uncontrolledValue, setUncontrolledValue] = useState(() =>
+    String(defaultValue ?? options.find((option) => !option.disabled)?.value ?? ''),
+  );
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+
+  const isControlled = value !== undefined;
+  const currentValue = isControlled ? String(value) : uncontrolledValue;
+  const selectedIndex = options.findIndex((option) => option.value === currentValue);
+  const selectedOption =
+    selectedIndex >= 0 ? options[selectedIndex] : options.find((option) => !option.disabled);
+
+  const commitValue = (nextValue: string) => {
+    const nativeSelect = nativeSelectRef.current;
+    if (!nativeSelect) return;
+
+    nativeSelect.value = nextValue;
+    if (!isControlled) {
+      setUncontrolledValue(nextValue);
+    }
+
+    nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
+  };
+
+  const handleNativeChange = (event: ChangeEvent<HTMLSelectElement>) => {
+    if (!isControlled) {
+      setUncontrolledValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+    onValueChange?.(event.currentTarget.value, event);
+  };
+
+  const closeListbox = useCallback(() => {
+    setOpen(false);
+    setHighlightedIndex(-1);
+  }, []);
+
+  const openListbox = (preferredIndex = selectedIndex >= 0 ? selectedIndex : 0) => {
+    if (disabled) return;
+    setOpen(true);
+    setHighlightedIndex(getEnabledOptionIndex(options, preferredIndex, 1));
+  };
+
+  const selectOption = (option: ParsedOption | undefined) => {
+    if (!option || option.disabled) return;
+    commitValue(option.value);
+    closeListbox();
+  };
+
+  const updateOverlayPosition = useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+
+    if (!isTriggerVisible(trigger)) {
+      closeListbox();
+      return;
+    }
+
+    const position = measureOverlayPosition(trigger, options.length);
+    if (!position) {
+      closeListbox();
+      return;
+    }
+
+    setOverlayPosition(position);
+  }, [closeListbox, options.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;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target as Node;
+      if (containerRef.current?.contains(target)) return;
+      if (listboxRef.current?.contains(target)) return;
+      closeListbox();
+    };
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') closeListbox();
+    };
+
+    window.addEventListener('pointerdown', handlePointerDown, true);
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('pointerdown', handlePointerDown, true);
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [closeListbox, open]);
+
+  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (disabled) return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (!open) {
+          openListbox();
+          return;
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        closeListbox();
+        return;
+      case 'Home':
+        event.preventDefault();
+        setHighlightedIndex(getEnabledOptionIndex(options, -1, 1));
+        return;
+      case 'End':
+        event.preventDefault();
+        setHighlightedIndex(getEnabledOptionIndex(options, 0, -1));
+        return;
+      default:
+        return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      selectOption(options[highlightedIndex]);
+      return;
+    }
+
+    const direction = event.key === 'ArrowDown' ? 1 : -1;
+    const baseIndex = highlightedIndex >= 0 ? highlightedIndex : Math.max(selectedIndex, 0);
+    setHighlightedIndex(getEnabledOptionIndex(options, baseIndex, direction));
+  };
+
+  const listbox =
+    open && overlayPosition ? (
+      <ul
+        ref={listboxRef}
+        className="ui-select__listbox ui-workbench-scrollbar"
+        id={listboxId}
+        role="listbox"
+        style={overlayListboxStyle(overlayPosition)}
+      >
+        {options.map((option, index) => {
+          const isSelected = option.value === currentValue;
+          const isHighlighted = index === highlightedIndex;
+
+          return (
+            <li
+              key={option.value}
+              aria-disabled={option.disabled ? 'true' : undefined}
+              aria-selected={isSelected}
+              className={cx(
+                'ui-select__option',
+                isSelected && 'ui-select__option--selected',
+                isHighlighted && 'ui-select__option--highlighted',
+              )}
+              role="option"
+              onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => selectOption(option)}
+            >
+              {option.label}
+            </li>
+          );
+        })}
+      </ul>
+    ) : null;
+
+  return (
+    <div ref={containerRef} className={cx('ui-select', className)} data-width={controlWidth}>
+      <button
+        ref={triggerRef}
+        aria-controls={listboxId}
+        aria-describedby={ariaDescribedBy}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        className="ui-select__trigger"
+        disabled={disabled}
+        id={id}
+        role="combobox"
+        type="button"
+        onClick={() => (open ? closeListbox() : openListbox())}
+        onKeyDown={handleTriggerKeyDown}
+      >
+        <span className="ui-select__value">{selectedOption?.label}</span>
+        <span aria-hidden="true" className="ui-select__chevron">
+          <i className={cxCodicon('chevron-down')} />
+        </span>
+      </button>
+
+      {listbox ? createPortal(listbox, document.body) : null}
+
+      <select
+        ref={nativeSelectRef}
+        aria-hidden="true"
+        className="ui-select__native"
+        disabled={disabled}
+        tabIndex={-1}
+        value={currentValue}
+        onChange={handleNativeChange}
+        {...nativeSelectProps}
+      >
+        {children}
+      </select>
+    </div>
+  );
+}

package/src/primitives/select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from './Select';
+export type { SelectProps } from './Select';

package/src/primitives/select/options.ts

@@ -0,0 +1,38 @@
+import {
+  Children,
+  isValidElement,
+  type ComponentPropsWithRef,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import type { ParsedOption } from './types';
+
+function isOptionElement(child: ReactNode): child is ReactElement<ComponentPropsWithRef<'option'>> {
+  return isValidElement(child) && child.type === 'option';
+}
+
+export function parseOptions(children: ReactNode): ParsedOption[] {
+  return Children.toArray(children)
+    .filter(isOptionElement)
+    .map((child) => ({
+      value: String(child.props.value ?? ''),
+      label: child.props.children ?? child.props.value ?? '',
+      disabled: Boolean(child.props.disabled),
+    }));
+}
+
+export function getEnabledOptionIndex(
+  options: ParsedOption[],
+  startIndex: number,
+  direction: 1 | -1,
+) {
+  if (options.length === 0) return -1;
+
+  let index = startIndex;
+  for (let step = 0; step < options.length; step += 1) {
+    index = (index + direction + options.length) % options.length;
+    if (!options[index]?.disabled) return index;
+  }
+
+  return -1;
+}

package/src/primitives/select/overlay.ts

@@ -0,0 +1,63 @@
+import type { CSSProperties } from 'react';
+import type { ListboxPlacement, OverlayPosition } from './types';
+
+const LISTBOX_MAX_HEIGHT = 240;
+const LISTBOX_OPTION_HEIGHT = 28;
+const VIEWPORT_PADDING = 8;
+
+export function isTriggerVisible(trigger: HTMLElement) {
+  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, optionCount * LISTBOX_OPTION_HEIGHT + 8);
+  const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - VIEWPORT_PADDING);
+  const spaceAbove = Math.max(0, rect.top - VIEWPORT_PADDING);
+  const placement: ListboxPlacement =
+    spaceBelow >= idealHeight || spaceBelow >= spaceAbove ? 'bottom' : 'top';
+  const available = placement === 'bottom' ? spaceBelow : spaceAbove;
+  const minHeight = LISTBOX_OPTION_HEIGHT + 8;
+  const maxHeight = Math.min(LISTBOX_MAX_HEIGHT, idealHeight, Math.max(minHeight, 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 };
+  }
+
+  return {
+    ...base,
+    top: position.triggerTop,
+    transform: 'translateY(-100%)',
+  };
+}

package/src/primitives/select/select.app.css

@@ -0,0 +1,9 @@
+:root {
+  --ui-select-width-default: 320px;
+  --ui-select-width-wide: 420px;
+  --ui-select-trigger-height: 28px;
+  --ui-select-trigger-radius: var(--radius-sm);
+  --ui-select-option-height: 28px;
+  --ui-select-option-padding: 5px 10px;
+  --ui-select-option-radius: calc(var(--radius-sm) - 2px);
+}

package/src/primitives/select/select.css

@@ -0,0 +1,140 @@
+.ui-select {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  min-width: 0;
+  vertical-align: top;
+}
+
+.ui-select[data-width='default'] {
+  width: var(--ui-select-width-default, 180px);
+}
+
+.ui-select[data-width='wide'] {
+  width: var(--ui-select-width-wide, 260px);
+}
+
+.ui-select[data-width='full'] {
+  width: 100%;
+}
+
+.ui-select__trigger {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--ui-select-trigger-height, 26px);
+  min-width: 0;
+  padding: 0 28px 0 8px;
+  color: var(--vscode-input-foreground, var(--color-text));
+  background: var(--vscode-input-background, var(--color-surface));
+  border: 1px solid var(--vscode-input-border, var(--color-border));
+  border-radius: var(--ui-select-trigger-radius, 0);
+  outline: none;
+  font: inherit;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.ui-select__trigger:disabled {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-select__chevron {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.ui-select__chevron .codicon {
+  font-size: 14px;
+}
+
+.ui-select__listbox {
+  position: fixed;
+  z-index: 10000;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px;
+  list-style: none;
+  color: var(--vscode-menu-foreground, var(--color-text));
+  background: var(--vscode-menu-background, var(--color-surface));
+  border: 1px solid var(--vscode-menu-border, var(--color-border));
+  border-radius: var(--radius-sm, 0);
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.ui-select__option {
+  min-height: var(--ui-select-option-height, 26px);
+  padding: var(--ui-select-option-padding, 4px 10px);
+  border-radius: var(--ui-select-option-radius, 0);
+  font-size: var(--font-size-sm);
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.ui-select__option[aria-disabled='true'] {
+  color: var(--color-text-subtle);
+  cursor: default;
+}
+
+.ui-select__option:hover,
+.ui-select__option--highlighted {
+  color: var(--vscode-menu-selectionForeground, var(--color-text));
+  background: var(--vscode-menu-selectionBackground, var(--color-surface-hover));
+}
+
+.ui-select__option--selected {
+  color: var(--vscode-list-activeSelectionForeground, var(--color-text));
+  background: var(--vscode-list-activeSelectionBackground, var(--color-surface-hover));
+  font-weight: 600;
+}
+
+.ui-select__native {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  appearance: none;
+  -webkit-appearance: none;
+}
+
+.ui-select__trigger:focus {
+  border-color: var(--vscode-focusBorder, var(--color-accent, var(--color-focus-border)));
+}
+
+.ui-select__trigger:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}
+
+.ui-select__option:focus-visible {
+  outline: 1px solid var(--vscode-focusBorder, var(--color-focus-border));
+  outline-offset: -1px;
+}

package/src/primitives/select/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export interface ParsedOption {
+  value: string;
+  label: ReactNode;
+  disabled?: boolean;
+}
+
+export type ListboxPlacement = 'bottom' | 'top';
+
+export interface OverlayPosition {
+  left: number;
+  maxHeight: number;
+  placement: ListboxPlacement;
+  triggerBottom: number;
+  triggerTop: number;
+  width: number;
+}