@astronox/core 0.1.0

package/src/patterns/Combobox/Combobox.astro

@@ -0,0 +1,462 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import type {
+  ComboboxOption,
+  ComboboxSelectionMode,
+  ComboboxSize,
+} from './contracts';
+import Tag from '../../components/data-display/Tag/Tag.astro';
+import TextInput from '../../components/forms/TextInput/TextInput.astro';
+import ArrowDownIcon from '../../components/icons/ArrowDownIcon.astro';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type SharedProps = Omit<HTMLAttributes<'div'>, 'id'> & {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  size?: ComboboxSize;
+  tone?: Tone;
+  width?: 'auto' | 'fill';
+};
+
+type OptionsProps = SharedProps & {
+  mode?: 'options';
+  options: readonly ComboboxOption[];
+  clearable?: boolean;
+  closeOnSelect?: boolean;
+  emptyLabel: string;
+  placeholder: string;
+  removeLabel: string;
+  searchPlaceholder: string;
+  selectionMode?: ComboboxSelectionMode;
+  value?: string | readonly string[];
+};
+
+type NumberProps = SharedProps & {
+  mode: 'number';
+  min: number;
+  max: number;
+  step?: number;
+  value: number;
+  decrementLabel: string;
+  incrementLabel: string;
+};
+
+type Props = OptionsProps | NumberProps;
+
+function getNativeAttributes(
+  props: Props,
+  ownedKeys: readonly string[],
+): HTMLAttributes<'div'> {
+  const nativeAttributes = { ...props } as Record<string, unknown>;
+  for (const key of ownedKeys) delete nativeAttributes[key];
+
+  return nativeAttributes as HTMLAttributes<'div'>;
+}
+
+const props: Props = Astro.props;
+const mode = props.mode ?? 'options';
+const disabled = props.disabled ?? false;
+const size = props.size ?? (mode === 'number' ? 'sm' : undefined);
+const width = props.width ?? 'auto';
+const resolvedTone = props.tone ?? props['data-tone'];
+const listboxId = `${props.id}-listbox`;
+
+let attrs: HTMLAttributes<'div'>;
+let options: readonly ComboboxOption[];
+let selectedValues: string[];
+let clearable = false;
+let closeOnSelect = true;
+let emptyLabel = '';
+let placeholder = '';
+let removeLabel = '';
+let searchPlaceholder = '';
+let selectionMode: ComboboxSelectionMode = 'single';
+let numberValue: number | undefined;
+let min: number | undefined;
+let max: number | undefined;
+let step: number | undefined;
+let decrementLabel = '';
+let incrementLabel = '';
+
+if (mode === 'number') {
+  const numberProps = props as NumberProps;
+  const requestedDecrementLabel = numberProps.decrementLabel;
+  const requestedIncrementLabel = numberProps.incrementLabel;
+  const requestedMin = numberProps.min;
+  const requestedMax = numberProps.max;
+  const requestedStep = numberProps.step ?? 1;
+  const requestedValue = numberProps.value;
+
+  if (
+    !Number.isInteger(requestedMin) ||
+    !Number.isInteger(requestedMax) ||
+    requestedMin > requestedMax
+  ) {
+    throw new RangeError('Combobox number bounds must be ordered integers');
+  }
+  if (!Number.isFinite(requestedValue)) {
+    throw new RangeError('Combobox number value must be finite');
+  }
+  if (
+    !Number.isInteger(requestedStep) ||
+    requestedStep < 1 ||
+    (requestedMax - requestedMin) % requestedStep !== 0
+  ) {
+    throw new RangeError(
+      'Combobox number step must be a positive integer that divides the range',
+    );
+  }
+
+  const normalizedValue = Math.min(
+    requestedMax,
+    Math.max(
+      requestedMin,
+      requestedMin +
+        Math.round((requestedValue - requestedMin) / requestedStep) *
+          requestedStep,
+    ),
+  );
+
+  attrs = getNativeAttributes(numberProps, [
+    'class',
+    'data-tone',
+    'decrementLabel',
+    'disabled',
+    'id',
+    'incrementLabel',
+    'label',
+    'max',
+    'min',
+    'mode',
+    'size',
+    'step',
+    'tone',
+    'value',
+    'width',
+  ]);
+  min = requestedMin;
+  max = requestedMax;
+  step = requestedStep;
+  numberValue = normalizedValue;
+  decrementLabel = requestedDecrementLabel;
+  incrementLabel = requestedIncrementLabel;
+  options = Array.from(
+    {
+      length: Math.floor((requestedMax - requestedMin) / requestedStep) + 1,
+    },
+    (_, index): ComboboxOption => {
+      const value = requestedMin + index * requestedStep;
+      return { value: String(value), label: String(value) };
+    },
+  );
+  selectedValues = [String(normalizedValue)];
+} else {
+  const optionsProps = props as OptionsProps;
+  const requestedClearable = optionsProps.clearable ?? true;
+  const requestedCloseOnSelect = optionsProps.closeOnSelect;
+  const requestedEmptyLabel = optionsProps.emptyLabel;
+  const requestedOptions = optionsProps.options;
+  const requestedPlaceholder = optionsProps.placeholder;
+  const requestedRemoveLabel = optionsProps.removeLabel;
+  const requestedSearchPlaceholder = optionsProps.searchPlaceholder;
+  const requestedSelectionMode = optionsProps.selectionMode ?? 'single';
+  const requestedValues = Array.isArray(optionsProps.value)
+    ? optionsProps.value
+    : typeof optionsProps.value === 'string'
+      ? [optionsProps.value]
+      : [];
+  const optionValues = new Set(
+    requestedOptions
+      .filter((option) => !option.disabled)
+      .map((option) => option.value),
+  );
+
+  attrs = getNativeAttributes(optionsProps, [
+    'class',
+    'data-tone',
+    'clearable',
+    'closeOnSelect',
+    'disabled',
+    'emptyLabel',
+    'id',
+    'label',
+    'mode',
+    'options',
+    'placeholder',
+    'removeLabel',
+    'searchPlaceholder',
+    'selectionMode',
+    'size',
+    'tone',
+    'value',
+    'width',
+  ]);
+  clearable = requestedClearable;
+  closeOnSelect = requestedCloseOnSelect ?? requestedSelectionMode === 'single';
+  emptyLabel = requestedEmptyLabel;
+  options = requestedOptions;
+  placeholder = requestedPlaceholder;
+  removeLabel = requestedRemoveLabel;
+  searchPlaceholder = requestedSearchPlaceholder;
+  selectionMode = requestedSelectionMode;
+  selectedValues = [
+    ...new Set(requestedValues.filter((item) => optionValues.has(item))),
+  ];
+  if (selectionMode === 'single') selectedValues.splice(1);
+}
+
+const selectedValueSet = new Set(selectedValues);
+const selectedOptions = selectedValues
+  .map((selectedValue) =>
+    options.find((option) => option.value === selectedValue),
+  )
+  .filter((option): option is ComboboxOption => option !== undefined);
+const className = props.class;
+const searchId = `${props.id}-search`;
+---
+
+<div
+  {...attrs}
+  class:list={['combobox', className]}
+  data-pattern="combobox"
+  data-combobox
+  data-combobox-mode={mode}
+  data-combobox-size={size}
+  data-combobox-width={width}
+  data-combobox-clearable={mode === 'options' && clearable ? 'true' : 'false'}
+  data-combobox-close-on-select={closeOnSelect ? 'true' : 'false'}
+  data-combobox-selection-mode={selectionMode}
+  data-combobox-number-min={min}
+  data-combobox-number-max={max}
+  data-combobox-number-step={step}
+  data-disabled={disabled ? true : undefined}
+  data-tone={resolvedTone}
+>
+  <span class="combobox__sizer" aria-hidden="true">
+    {
+      (mode === 'number'
+        ? options.map((option) => option.label)
+        : [placeholder, ...options.map((option) => option.label)]
+      ).map((item) => <span class="combobox__sizer-label">{item}</span>)
+    }
+  </span>
+
+  {
+    mode === 'number' ? (
+      <div class="combobox__control" data-combobox-control>
+        <button
+          class="combobox__step"
+          type="button"
+          aria-label={decrementLabel}
+          disabled={disabled || numberValue === min}
+          data-combobox-number-step="decrement"
+        >
+          <span aria-hidden="true">−</span>
+        </button>
+        <input
+          class="combobox__number-input"
+          id={props.id}
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label={props.label}
+          disabled={disabled}
+          value={numberValue}
+          data-combobox-number-input
+        />
+        <button
+          class="combobox__step"
+          type="button"
+          aria-label={incrementLabel}
+          disabled={disabled || numberValue === max}
+          data-combobox-number-step="increment"
+        >
+          <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    ) : (
+      <div class="combobox__control" data-combobox-control>
+        <span class="combobox__values" data-combobox-values>
+          {selectedOptions.map((option) => (
+            <Tag
+              leading={
+                option.icon
+                  ? { icon: option.icon, iconTone: option.iconTone }
+                  : option.media
+                    ? { media: option.media }
+                    : undefined
+              }
+              label={option.label}
+              removable={clearable && !disabled}
+              removeLabel={`${removeLabel} ${option.label}`}
+              size="sm"
+              data-combobox-tag={option.value}
+            />
+          ))}
+          <span
+            class="combobox__placeholder"
+            data-combobox-placeholder
+            hidden={selectedOptions.length > 0}
+          >
+            {placeholder}
+          </span>
+        </span>
+
+        <button
+          class="combobox__trigger"
+          id={props.id}
+          type="button"
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-label={props.label}
+          disabled={disabled}
+          data-combobox-trigger
+        >
+          <span class="combobox__trigger-icon" aria-hidden="true">
+            <ArrowDownIcon />
+          </span>
+        </button>
+      </div>
+    )
+  }
+
+  <div class="combobox__panel" popover="manual" hidden data-combobox-panel>
+    {
+      mode === 'options' ? (
+        <div class="combobox__search">
+          <TextInput
+            id={searchId}
+            type="search"
+            framing="embedded"
+            autocomplete="off"
+            placeholder={searchPlaceholder}
+            aria-label={searchPlaceholder}
+            aria-controls={listboxId}
+            disabled={disabled}
+            data-combobox-search
+          />
+        </div>
+      ) : null
+    }
+
+    <div
+      class="combobox__options"
+      id={listboxId}
+      role="listbox"
+      aria-label={props.label}
+      aria-multiselectable={mode === 'options' && selectionMode === 'multiple'
+        ? 'true'
+        : undefined}
+      data-combobox-options
+    >
+      {
+        options.map((option, index) => {
+          const OptionIcon = option.icon;
+
+          return (
+            <button
+              class="combobox__option"
+              id={`${props.id}-option-${index}`}
+              type="button"
+              role="option"
+              tabindex="-1"
+              aria-disabled={option.disabled ? 'true' : undefined}
+              aria-selected={
+                selectedValueSet.has(option.value) ? 'true' : 'false'
+              }
+              disabled={option.disabled}
+              data-combobox-option={option.value}
+              data-combobox-search-text={
+                mode === 'options'
+                  ? [
+                      option.label,
+                      option.description ?? '',
+                      ...(option.keywords ?? []),
+                    ].join(' ')
+                  : undefined
+              }
+              data-interaction-accent="start"
+            >
+              {OptionIcon ? (
+                <OptionIcon
+                  class="combobox__option-icon"
+                  data-tone={option.iconTone}
+                />
+              ) : option.media ? (
+                <Media
+                  class="combobox__option-media"
+                  media={option.media}
+                  fit="contain"
+                  size="intrinsic"
+                />
+              ) : null}
+              <span class="combobox__option-content">
+                <span class="combobox__option-label">{option.label}</span>
+                {option.description ? (
+                  <span class="combobox__option-description">
+                    {option.description}
+                  </span>
+                ) : null}
+              </span>
+            </button>
+          );
+        })
+      }
+      {
+        mode === 'options' ? (
+          <p
+            class="combobox__empty"
+            role="status"
+            data-combobox-empty
+            hidden={options.length > 0}
+          >
+            {emptyLabel}
+          </p>
+        ) : null
+      }
+    </div>
+  </div>
+
+  {
+    mode === 'options'
+      ? options.map((option) => (
+          <template data-combobox-tag-template={option.value}>
+            <Tag
+              leading={
+                option.icon
+                  ? { icon: option.icon, iconTone: option.iconTone }
+                  : option.media
+                    ? { media: option.media }
+                    : undefined
+              }
+              label={option.label}
+              removable={clearable && !disabled}
+              removeLabel={`${removeLabel} ${option.label}`}
+              size="sm"
+              data-combobox-tag={option.value}
+            />
+          </template>
+        ))
+      : null
+  }
+</div>
+
+<script>
+  import { initCombobox } from './comboboxController';
+
+  for (const root of document.querySelectorAll('[data-combobox]')) {
+    if (root instanceof HTMLElement) {
+      initCombobox(root);
+    }
+  }
+</script>