@arbor-education/design-system.components 0.6.0 → 0.7.0

package/src/components/combobox/ComboboxListbox.tsx

@@ -0,0 +1,224 @@
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+import { ComboboxOptionRow } from './ComboboxOptionRow';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSearchType } from './types';
+
+export type ComboboxListboxProps = {
+  listboxRef: React.RefObject<HTMLUListElement | null>;
+  listboxId: string;
+  multiple: boolean;
+  ariaLabel: string | undefined;
+  showListboxLoading: boolean;
+  optionGroups: Map<string, ComboboxOption[]>;
+  optionIndexMap: Map<string, number>;
+  getOptionId: (index: number) => string;
+  highlightIndex: number;
+  setHighlightIndex: React.Dispatch<React.SetStateAction<number>>;
+  query: string;
+  searchType: ComboboxSearchType;
+  highlightStringMatches: boolean;
+  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode;
+  selectedValuesSet: Set<string>;
+  createdValuesSet: Set<string>;
+  selectOption: (value: string) => void;
+  deleteCreatedOption: (value: string, index: number) => void;
+  handleCreate: () => void;
+  showCreateRow: boolean;
+  filteredOptionsLength: number;
+  preventMouseDefault: (e: React.MouseEvent) => void;
+  renderSearchInputInListbox: boolean;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  comboboxId: string;
+  shouldShowPopover: boolean;
+  activeDescendant: string | undefined;
+  ariaDescribedBy?: string;
+  ariaInvalid?: ComboboxAriaInvalid;
+  placeholder: string;
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleInputFocus: () => void;
+  handleInputBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  registerDeleteButton: (value: string, node: HTMLButtonElement | null) => void;
+  handleDeleteButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
+};
+
+export const ComboboxListbox = (props: ComboboxListboxProps): React.JSX.Element => {
+  const {
+    listboxRef,
+    listboxId,
+    multiple,
+    ariaLabel,
+    showListboxLoading,
+    optionGroups,
+    optionIndexMap,
+    getOptionId,
+    highlightIndex,
+    setHighlightIndex,
+    query,
+    searchType,
+    highlightStringMatches,
+    renderOption,
+    selectedValuesSet,
+    createdValuesSet,
+    selectOption,
+    deleteCreatedOption,
+    handleCreate,
+    showCreateRow,
+    filteredOptionsLength,
+    preventMouseDefault,
+    renderSearchInputInListbox,
+    inputRef,
+    comboboxId,
+    shouldShowPopover,
+    activeDescendant,
+    ariaDescribedBy,
+    ariaInvalid,
+    placeholder,
+    handleInputChange,
+    handleInputFocus,
+    handleInputBlur,
+    handleKeyDown,
+    registerDeleteButton,
+    handleDeleteButtonKeyDown,
+  } = props;
+
+  const renderOptionRow = (opt: ComboboxOption, keyPrefix?: string) => {
+    const idx = optionIndexMap.get(opt.value) ?? 0;
+    return (
+      <ComboboxOptionRow
+        key={`${keyPrefix ?? 'opt'}-${opt.value}`}
+        option={opt}
+        id={getOptionId(idx)}
+        index={idx}
+        selected={selectedValuesSet.has(opt.value)}
+        highlighted={idx === highlightIndex}
+        isCreated={createdValuesSet.has(opt.value)}
+        query={query}
+        searchType={searchType}
+        highlightStringMatches={highlightStringMatches}
+        renderOption={renderOption}
+        onMouseEnter={() => setHighlightIndex(idx)}
+        onMouseDown={preventMouseDefault}
+        onClick={() => {
+          if (!opt.disabled) selectOption(opt.value);
+        }}
+        onDeleteCreated={(value) => {
+          deleteCreatedOption(value, idx);
+        }}
+        onDeleteButtonFocus={() => setHighlightIndex(idx)}
+        onDeleteButtonKeyDown={handleDeleteButtonKeyDown}
+        registerDeleteButton={registerDeleteButton}
+      />
+    );
+  };
+
+  return (
+    <ul
+      ref={listboxRef}
+      id={listboxId}
+      role="listbox"
+      aria-label={ariaLabel ? `${ariaLabel} suggestions` : 'Suggestions'}
+      aria-multiselectable={multiple || undefined}
+      aria-busy={showListboxLoading ? true : undefined}
+      className="ds-combobox__listbox"
+    >
+      {renderSearchInputInListbox && (
+        <li role="presentation" className="ds-combobox__listbox-search-row">
+          <div
+            className="ds-combobox__listbox-search-input-wrap"
+            onMouseDown={(e) => {
+              const el = inputRef.current;
+              if (!el || e.button !== 0) return;
+              if (e.target !== el && !el.contains(e.target as Node)) {
+                el.focus();
+              }
+            }}
+          >
+            <Icon name="search" size={16} />
+            <input
+              ref={inputRef}
+              id={comboboxId}
+              className="ds-combobox__input ds-combobox__input--in-listbox"
+              type="text"
+              role="combobox"
+              aria-autocomplete="list"
+              aria-expanded={shouldShowPopover}
+              aria-controls={listboxId}
+              aria-activedescendant={activeDescendant}
+              aria-busy={showListboxLoading ? true : undefined}
+              aria-describedby={ariaDescribedBy}
+              aria-invalid={ariaInvalid}
+              aria-label={ariaLabel}
+              placeholder={placeholder}
+              value={query}
+              onChange={handleInputChange}
+              onFocus={handleInputFocus}
+              onKeyDown={handleKeyDown}
+              onBlur={handleInputBlur}
+              autoComplete="off"
+            />
+          </div>
+        </li>
+      )}
+
+      {showListboxLoading
+        ? (
+            <li role="presentation" className="ds-combobox__loading-row">
+              <div
+                role="status"
+                className="ds-combobox__loading-status"
+                aria-label="Loading suggestions"
+              >
+                <span className="ds-combobox__loading-spinner" aria-hidden="true">
+                  <Icon name="loader" size={16} />
+                </span>
+              </div>
+            </li>
+          )
+        : (
+            <>
+              {Array.from(optionGroups.entries()).map(([groupName, groupOptions]) => {
+                if (groupOptions.length === 0) return null;
+
+                const groupItems = groupOptions.map(opt => renderOptionRow(opt));
+
+                if (!groupName) return groupItems;
+
+                return (
+                  <li key={groupName} role="presentation" className="ds-combobox__group">
+                    <div className="ds-combobox__group-header">{groupName}</div>
+                    <ul role="group" aria-label={groupName} className="ds-combobox__group-list">
+                      {groupItems}
+                    </ul>
+                  </li>
+                );
+              })}
+
+              {showCreateRow && (
+                <li
+                  id={getOptionId(filteredOptionsLength)}
+                  role="option"
+                  aria-selected={false}
+                  aria-label={`Create new option: ${query.trim()}`}
+                  className={classNames('ds-combobox__option ds-combobox__create-row', {
+                    'ds-combobox__option--highlighted': highlightIndex === filteredOptionsLength,
+                  })}
+                  onMouseEnter={() => setHighlightIndex(filteredOptionsLength)}
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={handleCreate}
+                >
+                  <Icon name="plus" size={16} />
+                  <span>
+                    Create &ldquo;
+                    {query.trim()}
+                    &rdquo;
+                  </span>
+                </li>
+              )}
+            </>
+          )}
+    </ul>
+  );
+};
+
+ComboboxListbox.displayName = 'Combobox.Listbox';

package/src/components/combobox/ComboboxOptionRow.tsx

@@ -0,0 +1,128 @@
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+import { memo } from 'react';
+import { highlightLabel } from './highlightLabel';
+import type { ComboboxOption, ComboboxSearchType } from './types';
+
+type ComboboxOptionRowProps = {
+  option: ComboboxOption;
+  id: string;
+  index: number;
+  selected: boolean;
+  highlighted: boolean;
+  isCreated: boolean;
+  query: string;
+  searchType: ComboboxSearchType;
+  highlightStringMatches: boolean;
+  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode;
+  onMouseEnter: () => void;
+  onMouseDown: (e: React.MouseEvent) => void;
+  onClick: () => void;
+  onDeleteCreated: (value: string) => void;
+  onDeleteButtonFocus: () => void;
+  onDeleteButtonKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => void;
+  registerDeleteButton: (value: string, node: HTMLButtonElement | null) => void;
+};
+
+export const ComboboxOptionRow = memo(({
+  option,
+  id,
+  index,
+  selected,
+  highlighted,
+  isCreated,
+  query,
+  searchType,
+  highlightStringMatches,
+  renderOption,
+  onMouseEnter,
+  onMouseDown,
+  onClick,
+  onDeleteCreated,
+  onDeleteButtonFocus,
+  onDeleteButtonKeyDown,
+  registerDeleteButton,
+}: ComboboxOptionRowProps): React.JSX.Element => {
+  const optionContent = renderOption
+    ? renderOption(option, selected)
+    : (
+        <>
+          {option.iconName && <Icon name={option.iconName} size={16} />}
+          <span className="ds-combobox__option-label">
+            {highlightLabel({ label: option.label, query, searchType, highlightStringMatches })}
+          </span>
+          {selected && (
+            <span className="ds-combobox__option-check">
+              <Icon name="check" size={16} />
+            </span>
+          )}
+        </>
+      );
+
+  if (!isCreated) {
+    return (
+      <li
+        id={id}
+        role="option"
+        aria-selected={selected}
+        aria-disabled={option.disabled || undefined}
+        className={classNames('ds-combobox__option-row', {
+          'ds-combobox__option-row--highlighted': highlighted,
+          'ds-combobox__option-row--selected': selected,
+          'ds-combobox__option-row--disabled': option.disabled,
+        })}
+        onMouseEnter={onMouseEnter}
+      >
+        <div
+          className="ds-combobox__option"
+          onMouseDown={onMouseDown}
+          onClick={onClick}
+        >
+          {optionContent}
+        </div>
+      </li>
+    );
+  }
+
+  return (
+    <li
+      role="presentation"
+      className={classNames('ds-combobox__option-row', {
+        'ds-combobox__option-row--highlighted': highlighted,
+        'ds-combobox__option-row--selected': selected,
+        'ds-combobox__option-row--disabled': option.disabled,
+      })}
+      onMouseEnter={onMouseEnter}
+    >
+      <div
+        id={id}
+        role="option"
+        aria-selected={selected}
+        aria-disabled={option.disabled || undefined}
+        className="ds-combobox__option"
+        onMouseDown={onMouseDown}
+        onClick={onClick}
+      >
+        {optionContent}
+      </div>
+      <button
+        ref={node => registerDeleteButton(option.value, node)}
+        type="button"
+        className="ds-combobox__option-delete"
+        title={`Delete ${option.label}`}
+        aria-label={`Delete ${option.label}`}
+        onFocus={onDeleteButtonFocus}
+        onKeyDown={e => onDeleteButtonKeyDown(e, index)}
+        onClick={(e) => {
+          e.stopPropagation();
+          onDeleteCreated(option.value);
+        }}
+        tabIndex={highlighted ? 0 : -1}
+      >
+        <Icon name="trash" size={16} />
+      </button>
+    </li>
+  );
+});
+
+ComboboxOptionRow.displayName = 'ComboboxOptionRow';

package/src/components/combobox/ComboboxTrigger.tsx

@@ -0,0 +1,134 @@
+import classNames from 'classnames';
+import { Icon } from 'Components/icon/Icon';
+import { Tag } from 'Components/tag/Tag';
+import { Popover } from 'radix-ui';
+import type { ComboboxAriaInvalid, ComboboxOption } from './types';
+
+export type ComboboxTriggerProps = {
+  'inputRef': React.RefObject<HTMLInputElement | null>;
+  'triggerRef': React.RefObject<HTMLDivElement | null>;
+  'comboboxId': string;
+  'listboxId': string;
+  'isOpen': boolean;
+  'hasError': boolean;
+  'disabled': boolean;
+  'placeholder': string;
+  'query': string;
+  'shouldShowPopover': boolean;
+  'showListboxLoading': boolean;
+  'activeDescendant': string | undefined;
+  'aria-describedby'?: string;
+  'aria-invalid'?: ComboboxAriaInvalid;
+  'aria-label'?: string;
+  'showDropdownTrigger': boolean;
+  'selectedChips': ComboboxOption[];
+  'selectedChipValuesSet': Set<string>;
+  'focusedChipIndex': number | null;
+  'resolveTagLabel': (opt: ComboboxOption) => string;
+  'removeValue': (value: string) => void;
+  'handleTriggerClick': () => void;
+  'handleInputChange': (e: React.ChangeEvent<HTMLInputElement>) => void;
+  'handleInputFocus': () => void;
+  'handleInputBlur': (e: React.FocusEvent<HTMLInputElement>) => void;
+  'handleKeyDown': (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  'handleChevronClick': (e: React.MouseEvent) => void;
+};
+
+export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element => {
+  const {
+    inputRef,
+    triggerRef,
+    comboboxId,
+    listboxId,
+    isOpen,
+    hasError,
+    disabled,
+    placeholder,
+    query,
+    shouldShowPopover,
+    showListboxLoading,
+    activeDescendant,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    'aria-label': ariaLabel,
+    showDropdownTrigger,
+    selectedChips,
+    selectedChipValuesSet,
+    focusedChipIndex,
+    resolveTagLabel,
+    removeValue,
+    handleTriggerClick,
+    handleInputChange,
+    handleInputFocus,
+    handleInputBlur,
+    handleKeyDown,
+    handleChevronClick,
+  } = props;
+
+  return (
+    <Popover.Anchor asChild>
+      <div
+        ref={triggerRef}
+        className={classNames('ds-combobox__trigger', {
+          'ds-combobox__trigger--open': isOpen,
+          'ds-combobox__trigger--error': hasError,
+          'ds-combobox__trigger--disabled': disabled,
+        })}
+        onClick={handleTriggerClick}
+      >
+        <div className="ds-combobox__chips-and-input">
+          {selectedChips.map((opt, chipIdx) => (
+            <Tag
+              key={opt.value}
+              color="neutral"
+              selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
+              slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
+              onRemove={disabled ? undefined : () => removeValue(opt.value)}
+              removeLabel={`Remove ${resolveTagLabel(opt)}`}
+              removeButtonTabIndex={-1}
+            >
+              {resolveTagLabel(opt)}
+            </Tag>
+          ))}
+          <input
+            ref={inputRef}
+            id={comboboxId}
+            className="ds-combobox__input"
+            type="text"
+            role="combobox"
+            aria-autocomplete="list"
+            aria-expanded={shouldShowPopover}
+            aria-controls={listboxId}
+            aria-activedescendant={activeDescendant}
+            aria-busy={showListboxLoading ? true : undefined}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={ariaInvalid}
+            aria-label={ariaLabel}
+            placeholder={selectedChips.length === 0 ? placeholder : undefined}
+            value={query}
+            onChange={handleInputChange}
+            onFocus={handleInputFocus}
+            onKeyDown={handleKeyDown}
+            onBlur={handleInputBlur}
+            disabled={disabled}
+            autoComplete="off"
+          />
+        </div>
+        {showDropdownTrigger && (
+          <button
+            type="button"
+            className="ds-combobox__chevron"
+            tabIndex={-1}
+            aria-label="Open suggestions"
+            onClick={handleChevronClick}
+            disabled={disabled}
+          >
+            <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} size={16} />
+          </button>
+        )}
+      </div>
+    </Popover.Anchor>
+  );
+};
+
+ComboboxTrigger.displayName = 'Combobox.Trigger';

package/src/components/combobox/buildListboxDisplayOptions.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from 'vitest';
+import type { ComboboxOption } from './types';
+import { buildOptionGroups } from './buildListboxDisplayOptions';
+
+describe('buildOptionGroups', () => {
+  test('groups by group field', () => {
+    const grouped: ComboboxOption[] = [
+      { value: '1', label: 'One', group: 'G1' },
+      { value: '2', label: 'Two', group: 'G2' },
+    ];
+    const m = buildOptionGroups(grouped);
+    expect(m.get('G1')).toEqual([grouped[0]]);
+    expect(m.get('G2')).toEqual([grouped[1]]);
+  });
+
+  test('keeps ungrouped options under the empty-string key', () => {
+    const grouped: ComboboxOption[] = [
+      { value: '1', label: 'One' },
+      { value: '2', label: 'Two' },
+    ];
+    const m = buildOptionGroups(grouped);
+    expect(m.get('')).toEqual(grouped);
+  });
+});

package/src/components/combobox/buildListboxDisplayOptions.ts

@@ -0,0 +1,12 @@
+import type { ComboboxOption } from './types';
+
+export function buildOptionGroups(options: ComboboxOption[]): Map<string, ComboboxOption[]> {
+  const map = new Map<string, ComboboxOption[]>();
+  for (const opt of options) {
+    const key = opt.group ?? '';
+    const list = map.get(key);
+    if (list) list.push(opt);
+    else map.set(key, [opt]);
+  }
+  return map;
+}