@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Select/Listbox.tsx

@@ -0,0 +1,557 @@
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  size as floatingSize,
+  useFloating,
+} from '@floating-ui/react-dom';
+import clsx from 'clsx';
+import { useTranslation } from '../../i18n/useTranslation';
+import { emptyStateText } from './emptyStateText';
+import { useSelectContext, type SelectContextValue } from './context';
+import { mergeRefs } from '../_internal/refs';
+import { isTourHeld, overlayStack, useFloatingSurface, useInOverlay } from '../_internal/overlay';
+import type { SelectOption } from './utils-types';
+import { isCreateRow } from './utils';
+import { Empty } from './Empty';
+import { Loading } from './Loading';
+import { ErrorRow } from './Error';
+import styles from './Select.module.scss';
+
+/**
+ * Portaled listbox panel. Positioned by Floating UI relative to the
+ * trigger, dismissed on outside-click and Escape, restores active row
+ * to the current selection (or first selectable) on open.
+ *
+ * Only mounted when `ctx.open` is true — there is no exit animation
+ * because the node is unmounted. Click-to-select is wired here; the
+ * keyboard handlers live on the Trigger so the trigger keeps focus
+ * while the listbox is open (combobox / single-mode-button pattern).
+ */
+export function Listbox() {
+  const ctx = useSelectContext('Listbox');
+  const { setOpen, closeAndFocusTrigger } = ctx;
+  const t = useTranslation();
+
+  // Deferred by a tick so a listbox that OPENS already loading still
+  // announces — mounting region and text together announces nothing.
+  const [statusText, setStatusText] = useState('');
+  // Synchronous Select: emptiness is always a result. Async: only once the
+  // settled query matches the one on screen.
+  const emptyIsSettled = ctx.loadedQuery === undefined || ctx.loadedQuery === ctx.query;
+  useEffect(() => {
+    // Error included. Dropping `role="alert"` from the error row removed the
+    // one Select announcement that actually worked — `alert` is specified to
+    // announce content inserted together with its node, so it was not one of
+    // the three broken mechanisms. Without this the region reset to '' on
+    // rejection and the failure was silent.
+    // Empty included, but only once the emptiness is a RESULT. For an async
+    // Select, `loading` is false for the entire debounce window while the rows
+    // are still the previous query's — so this announced "No options." on every
+    // open before the first fetch started, and "No results for X" about a
+    // search that had not run, re-firing per keystroke because the
+    // interpolated query made each string distinct. A synchronous Select has
+    // no such window and announces immediately.
+    //
+    // "Nothing matched" is the most useful thing a Select can say — a keyboard user typing into a combobox gets no other signal that
+    // the list went empty — and it was announced by nothing: the row carries
+    // no live region and this one did not cover the state. Hard rule 10 wants
+    // chosen silence written down, and this silence was not chosen.
+    setStatusText(
+      ctx.error
+        ? t('select.loadFailed')
+        : ctx.loading && ctx.rows.length === 0
+          ? t('select.statusLoading')
+          : ctx.rows.length === 0 && emptyIsSettled
+            ? emptyStateText(t, ctx.query)
+            : '',
+    );
+    // `ctx.error` is in the deps deliberately. It happens to work without it
+    // — a rejection also flips `loading` — but that is a coincidence of the
+    // current hook, and there is no eslint in this repo to catch the day it
+    // stops being true.
+  }, [ctx.error, ctx.loading, ctx.rows.length, ctx.query, emptyIsSettled, t]);
+  const inOverlay = useInOverlay(ctx.triggerRootRef, ctx.open);
+  // #274: hosts yield Escape while we're open — our own capture/element
+  // handler closes us on the same press instead of the Modal/Drawer.
+  const floatingId = useFloatingSurface(ctx.open);
+
+  const widestRef = useRef(0);
+  const { refs, floatingStyles, isPositioned } = useFloating({
+    open: ctx.open,
+    placement: 'bottom-start',
+    // `transform: false` — emit `top` / `left` positioning instead of an
+    // inline `transform: translate(...)`. The open animation in
+    // Select.module.scss animates `transform: scale(...)` on the panel; if
+    // Floating UI also wrote `transform`, the keyframe would clobber the
+    // inline translate and the panel would visibly snap to the document
+    // origin before jumping to the trigger. Matches DropdownMenu and
+    // Popover Content.
+    transform: false,
+    middleware: [
+      offset(4),
+      flip(),
+      shift({ padding: 8 }),
+      // Publish a min width + viewport room as CSS vars; `.listbox` turns
+      // them into min/max width and max height. Width stays intrinsic so
+      // option labels only wrap when the panel would hit its cap or the
+      // viewport edge — not because the trigger is narrow. The min width
+      // ratchets to the widest the panel has been while open, so filtering
+      // or async rows don't make the right edge jump on every keystroke
+      // (the Listbox unmounts on close, which resets the ratchet).
+      floatingSize({
+        padding: 8,
+        apply({ rects, availableWidth, availableHeight, elements }) {
+          const s = elements.floating.style;
+          const minWidth = () => `${Math.max(rects.reference.width, widestRef.current)}px`;
+          s.setProperty('--select-listbox-min-width', minWidth());
+          s.setProperty('--select-listbox-available-width', `${Math.max(0, availableWidth)}px`);
+          s.setProperty('--select-listbox-available-height', `${Math.max(0, availableHeight)}px`);
+          // Written twice on purpose: the first write lets a grown trigger
+          // widen the panel before it is measured; the second locks the
+          // measured width in as the new floor.
+          widestRef.current = Math.max(widestRef.current, elements.floating.offsetWidth);
+          s.setProperty('--select-listbox-min-width', minWidth());
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    elements: { reference: ctx.triggerRootRef.current },
+  });
+
+  // Outside-click closes. Capture-phase pointerdown fires before any
+  // focused widget's handlers, matching the Popover / DropdownMenu
+  // patterns. Clicks on the trigger are excluded so its own toggle
+  // handler isn't double-fired; clicks on the panel are excluded so
+  // option clicks aren't swallowed (they also preventDefault on
+  // pointerdown — belt-and-suspenders).
+  useEffect(() => {
+    if (!ctx.open) return;
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target as Node | null;
+      if (!target) return;
+      const panel = ctx.listboxRef.current;
+      const trigger = ctx.triggerRootRef.current;
+      if (panel && panel.contains(target)) return;
+      if (trigger && trigger.contains(target)) return;
+      // #684: a tour pointing into this listbox doesn't dismiss it.
+      if (isTourHeld(target, panel, trigger)) return;
+      setOpen(false);
+    };
+    document.addEventListener('pointerdown', onPointerDown, true);
+    return () => document.removeEventListener('pointerdown', onPointerDown, true);
+  }, [ctx.open, ctx.listboxRef, ctx.triggerRootRef, setOpen]);
+
+  // Escape closes and returns focus to the trigger. Capture-phase so a
+  // future in-panel input (Phase 5/6 search input) can't stop the event
+  // before we see it.
+  useEffect(() => {
+    if (!ctx.open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        // #280: defer to a DEEPER floating surface — only the innermost closes.
+        // A Select listbox is normally innermost, so this is uniformity/safety
+        // net, not load-bearing; the real Select-in-Popover fix is the Popover
+        // deferring to us.
+        if (!overlayStack.isTopFloating(floatingId)) return;
+        e.preventDefault();
+        overlayStack.consumeEscape(e); // hosts yield even if we ran first (#274)
+        closeAndFocusTrigger();
+      }
+    };
+    document.addEventListener('keydown', onKeyDown, true);
+    return () => document.removeEventListener('keydown', onKeyDown, true);
+  }, [ctx.open, closeAndFocusTrigger, floatingId]);
+
+  // On open: pre-highlight the current selection (if any), else the
+  // first non-disabled option. Trigger's ArrowUp handler may override
+  // this via a queueMicrotask to "last selectable" — that's fine, this
+  // layout effect runs first and the microtask wins.
+  // Only fires on the `ctx.open` transition; row changes mid-open don't
+  // reset the cursor.
+  useLayoutEffect(() => {
+    if (!ctx.open) return;
+    const firstSelectedIdx = ctx.rows.findIndex(
+      (r) =>
+        r.kind === 'option' &&
+        !r.option.disabled &&
+        (ctx.multiple
+          ? (ctx.value as string[]).includes(r.option.value)
+          : ctx.value === r.option.value),
+    );
+    if (firstSelectedIdx >= 0) {
+      ctx.setActiveIndex(firstSelectedIdx);
+      return;
+    }
+    const firstSelectableIdx = ctx.rows.findIndex((r) => r.kind === 'option' && !r.option.disabled);
+    ctx.setActiveIndex(firstSelectableIdx >= 0 ? firstSelectableIdx : -1);
+    // Intentionally only depends on `ctx.open`: this effect seeds the active
+    // row on the open transition, and must NOT re-run when `ctx.rows` or
+    // `ctx.value` shift mid-open (that would yank the cursor out from under
+    // the user's keyboard / mouse navigation).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ctx.open]);
+
+  // #305: keep the active option visible inside the height-clamped panel.
+  // aria-activedescendant means DOM focus never enters the listbox, so
+  // nothing scrolls it natively — with >~8 options the active row moves
+  // below the fold and the highlight disappears. One effect here covers
+  // every setActiveIndex source (trigger keyboard, typeahead, in-panel
+  // search, open seeding). Gated on isPositioned: before Floating UI
+  // places the portaled panel it sits at the document origin, where
+  // scrollIntoView would scroll the WINDOW to the top (see the identical
+  // fix in DropdownMenu/Content.tsx, #303) — and the size clamp hasn't
+  // been applied yet anyway. `block: 'nearest'` no-ops for
+  // already-visible rows, so mouse-hover activation causes no jumps.
+  // Guarded — jsdom has no scrollIntoView.
+  useEffect(() => {
+    if (!ctx.open || !isPositioned || ctx.activeIndex < 0) return;
+    const row = ctx.rows[ctx.activeIndex];
+    if (!row || row.kind !== 'option') return;
+    document
+      .getElementById(ctx.getOptionId(row.option.value))
+      ?.scrollIntoView?.({ block: 'nearest' });
+    // ctx.rows is read fresh but intentionally not a dep: a mid-open rows
+    // identity change (async load, filtering) must not re-scroll a row the
+    // user has already scrolled away from.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ctx.open, isPositioned, ctx.activeIndex]);
+
+  return createPortal(
+    <div
+      ref={mergeRefs<HTMLDivElement>(ctx.listboxRef, refs.setFloating)}
+      data-in-overlay={inOverlay ? '' : undefined}
+      className={clsx(styles.listbox)}
+      style={floatingStyles}
+    >
+      {/* In-panel search for multi-summary-searchable mode. Single-mode
+          searchable Select keeps the search input AS the trigger
+          (ComboboxInputTrigger) since there's no second trigger to compete
+          with; multi-summary keeps a select-only combobox trigger that shows
+          the summary, so this filter is its sibling inside the panel. */}
+      {ctx.multiple && ctx.triggerDisplay === 'summary' && ctx.searchable && <InPanelSearchInput />}
+      {/* ONE live region for the whole listbox, outside the <ul>.
+          Each of the three state rows used to carry its own announcement, in
+          three different and partly invalid ways: `aria-live` on
+          `<li role="presentation">` (a global attribute, so the presentation
+          role was discarded and the row was exposed as a list item inside a
+          listbox), and `role="alert"` on another `<li>` — the same
+          required-children deviation. All three also mounted their region
+          together with its text, which most screen readers do not announce.
+          Rendered unconditionally here with the text deferred, per Hard rule
+          10. See #495. */}
+      <span role="status" aria-live="polite" className={styles.srOnly}>
+        {statusText}
+      </span>
+      <ul
+        id={ctx.listboxId}
+        role="listbox"
+        aria-multiselectable={ctx.multiple || undefined}
+        aria-labelledby={ctx.triggerId}
+        tabIndex={-1}
+        data-in-overlay={inOverlay ? '' : undefined}
+        className={styles.listboxBody}
+      >
+        {renderListboxBody(ctx, t)}
+      </ul>
+    </div>,
+    document.body,
+  );
+}
+
+/**
+ * Decide what goes in the listbox body. Three short-circuits ahead of the
+ * normal row walk:
+ *
+ * 1. Loading — async request is in flight AND we have nothing else to show.
+ *    Once a previous result is in `rows`, we keep showing it instead of
+ *    swapping to a spinner (UI doesn't flicker between every keystroke).
+ * 2. Error — the latest async request rejected. Surfaces a Retry button.
+ * 3. Empty — no rows after filtering and we're not loading or in error.
+ *
+ * Each branch consults the consumer's `renderLoading` / `renderError` /
+ * `renderEmpty` first, falling back to the bundled defaults.
+ */
+function renderListboxBody<T>(
+  ctx: SelectContextValue<T>,
+  t: ReturnType<typeof useTranslation>,
+): ReactNode {
+  const showLoading = ctx.loading && ctx.rows.length === 0;
+  const showError = !!ctx.error && !ctx.loading;
+  const showEmpty = !ctx.loading && !ctx.error && ctx.rows.length === 0;
+
+  if (showLoading) {
+    return ctx.renderLoading ? (
+      <li className={styles.stateRow} role="presentation">
+        {ctx.renderLoading()}
+      </li>
+    ) : (
+      <Loading />
+    );
+  }
+  if (showError) {
+    return ctx.renderError ? (
+      <li className={styles.stateRow} role="presentation">
+        {ctx.renderError(ctx.error as Error, ctx.retry)}
+      </li>
+    ) : (
+      <ErrorRow error={ctx.error as Error} onRetry={ctx.retry} />
+    );
+  }
+  if (showEmpty) {
+    return ctx.renderEmpty ? (
+      <li className={styles.stateRow} role="presentation">
+        {ctx.renderEmpty(ctx.query)}
+      </li>
+    ) : (
+      <Empty query={ctx.query} />
+    );
+  }
+
+  // Walk the flat rows array, wrapping each header + its following option
+  // rows in `<li role="group" aria-labelledby={headerId}>` so the listbox
+  // exposes proper grouping semantics. The flat index `i` is preserved
+  // across the wrapping — Trigger's keyboard logic computes
+  // `aria-activedescendant` from it, so option rows inside groups MUST
+  // keep the same index they would have had in the flat map.
+  const nodes: ReactNode[] = [];
+  let i = 0;
+  while (i < ctx.rows.length) {
+    const row = ctx.rows[i];
+    if (row.kind === 'header') {
+      const headerLabel = row.label;
+      const headerId = ctx.getGroupHeaderId(headerLabel);
+      const groupChildren: ReactNode[] = [];
+      // Non-focusable header row; `data-group-header` is the hook
+      // grouped-options tests query against (avoids relying on the hashed
+      // CSS-module class name).
+      groupChildren.push(
+        <li key={`h-${i}`} id={headerId} data-group-header="" className={styles.groupHeader}>
+          {headerLabel}
+        </li>,
+      );
+      let j = i + 1;
+      while (j < ctx.rows.length && ctx.rows[j].kind === 'option') {
+        const optRow = ctx.rows[j] as Extract<(typeof ctx.rows)[number], { kind: 'option' }>;
+        const selected = ctx.multiple
+          ? (ctx.value as string[]).includes(optRow.option.value)
+          : ctx.value === optRow.option.value;
+        const active = ctx.activeIndex === j;
+        groupChildren.push(renderOptionRow(optRow.option, j, selected, active, ctx, t));
+        j++;
+      }
+      nodes.push(
+        <li role="group" key={`g-${i}`} aria-labelledby={headerId}>
+          <ul role="none" className={styles.groupList}>
+            {groupChildren}
+          </ul>
+        </li>,
+      );
+      i = j;
+      continue;
+    }
+    // Ungrouped (flat) option row.
+    const optRow = row;
+    const selected = ctx.multiple
+      ? (ctx.value as string[]).includes(optRow.option.value)
+      : ctx.value === optRow.option.value;
+    const active = ctx.activeIndex === i;
+    nodes.push(renderOptionRow(optRow.option, i, selected, active, ctx, t));
+    i++;
+  }
+  return nodes;
+}
+
+/**
+ * Render one `<li role="option">` row. Extracted as a module-local helper
+ * so the listbox loop can call it from two call sites — the in-group path
+ * and the flat-options path — without duplicating the JSX.
+ *
+ * `i` is the flat index into `ctx.rows`; it MUST match the index Trigger's
+ * keyboard handlers compute against, since `aria-activedescendant` and
+ * `ctx.setActiveIndex` both key off it.
+ */
+function renderOptionRow<T>(
+  opt: SelectOption<T>,
+  i: number,
+  selected: boolean,
+  active: boolean,
+  ctx: SelectContextValue<T>,
+  // Threaded rather than hooked: these are plain functions, not components.
+  t: ReturnType<typeof useTranslation>,
+): ReactNode {
+  // Creatable "+ Create <query>" row. Rendered distinctly (italic + accent
+  // colour via `.optionCreate`) and dispatches `onCreate` plus the same
+  // single-vs-multi commit flow as a normal option click.
+  if (isCreateRow(opt)) {
+    return (
+      <li
+        key="__create__"
+        id={ctx.getOptionId(opt.value)}
+        role="option"
+        aria-selected={false}
+        className={clsx(styles.option, styles.optionCreate, active && styles.optionActive)}
+        onPointerDown={(e) => e.preventDefault()}
+        onClick={() => {
+          ctx.onCreate?.(opt.label);
+          if (ctx.multiple) {
+            const next = [...((ctx.value as string[]) ?? []), opt.value];
+            ctx.setValue(next);
+            if (ctx.searchable) ctx.setQuery('');
+          } else {
+            ctx.setValue(opt.value);
+            ctx.closeAndFocusTrigger();
+          }
+        }}
+        onMouseEnter={() => ctx.setActiveIndex(i)}
+      >
+        {t('select.createOption', { label: opt.label })}
+      </li>
+    );
+  }
+  // Consumer's `renderOption` wins over the default label rendering. The
+  // create-row branch above intentionally does NOT pass through here —
+  // "+ Create" is internal chrome the consumer doesn't know about.
+  // Default render with a description: label and description get their own
+  // ids so the option's name stays the label alone and the description is
+  // announced as its accessible description (not concatenated into the name).
+  const optionId = ctx.getOptionId(opt.value);
+  const describe = !ctx.renderOption && !!opt.description;
+  const body = ctx.renderOption ? (
+    ctx.renderOption(opt, { active, selected })
+  ) : describe ? (
+    <>
+      <span id={`${optionId}-label`}>{opt.label}</span>
+      <span id={`${optionId}-desc`} className={styles.optionDescription}>
+        {opt.description}
+      </span>
+    </>
+  ) : (
+    opt.label
+  );
+
+  return (
+    <li
+      key={opt.value}
+      id={optionId}
+      role="option"
+      aria-selected={selected}
+      aria-disabled={opt.disabled || undefined}
+      aria-labelledby={describe ? `${optionId}-label` : undefined}
+      aria-describedby={describe ? `${optionId}-desc` : undefined}
+      className={clsx(
+        styles.option,
+        active && styles.optionActive,
+        selected && styles.optionSelected,
+        opt.disabled && styles.optionDisabled,
+      )}
+      onPointerDown={(e) => {
+        // Stop the document-level outside-click pointerdown handler from
+        // closing the listbox before the click resolves. The click handler
+        // still fires and commits the selection.
+        e.preventDefault();
+      }}
+      onClick={() => {
+        if (opt.disabled) return;
+        if (ctx.multiple) {
+          ctx.toggleValue(opt.value);
+          // Multi + searchable mode (chips-input or in-panel search):
+          // clear the query so the user can immediately pick another
+          // option without manually erasing the previous filter.
+          if (ctx.searchable) ctx.setQuery('');
+        } else {
+          ctx.setValue(opt.value);
+          ctx.closeAndFocusTrigger();
+        }
+      }}
+      onMouseEnter={() => {
+        if (!opt.disabled) ctx.setActiveIndex(i);
+      }}
+    >
+      {body}
+    </li>
+  );
+}
+
+/**
+ * Search input rendered beside the listbox inside the panel for the
+ * multi-summary-searchable variant. The trigger remains a select-only
+ * combobox that shows the comma-joined selection summary; this sibling
+ * searchbox filters without becoming an invalid child of the listbox.
+ *
+ * Owns its own keyboard handling: ArrowUp/Down cycle the active option,
+ * Enter toggles selection, Escape closes and returns focus to the trigger.
+ * This duplicates a small slice of `useTriggerKeyboard.moveActive` —
+ * deliberate, since the trigger hook is button-shaped and pulling the
+ * cycle logic into a shared hook would obscure both call sites at this
+ * scale. Revisit if Phase 6's chips trigger lands a third copy.
+ */
+function InPanelSearchInput() {
+  const ctx = useSelectContext('Listbox.SearchInput');
+  const t = useTranslation();
+  const ref = useRef<HTMLInputElement>(null);
+
+  // Auto-focus on mount so the user starts typing immediately after
+  // clicking the trigger. `preventScroll` avoids the portaled panel
+  // yanking the viewport on focus.
+  useLayoutEffect(() => {
+    ref.current?.focus({ preventScroll: true });
+  }, []);
+
+  const activeRow = ctx.activeIndex >= 0 ? ctx.rows[ctx.activeIndex] : undefined;
+  const activeOptionId =
+    activeRow && activeRow.kind === 'option' ? ctx.getOptionId(activeRow.option.value) : undefined;
+
+  return (
+    <input
+      ref={ref}
+      type="text"
+      role="searchbox"
+      aria-controls={ctx.listboxId}
+      aria-activedescendant={activeOptionId}
+      aria-autocomplete="list"
+      className={styles.popoverSearch}
+      placeholder={t('select.search')}
+      autoComplete="off"
+      spellCheck={false}
+      value={ctx.query}
+      onChange={(e) => ctx.setQuery(e.target.value)}
+      onKeyDown={(e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+          e.preventDefault();
+          const delta = e.key === 'ArrowDown' ? +1 : -1;
+          const len = ctx.rows.length;
+          if (len === 0) return;
+          let i = ctx.activeIndex;
+          for (let s = 0; s < len; s++) {
+            i = (i + delta + len) % len;
+            const r = ctx.rows[i];
+            if (r.kind === 'option' && !r.option.disabled) {
+              ctx.setActiveIndex(i);
+              break;
+            }
+          }
+        } else if (e.key === 'Enter') {
+          e.preventDefault();
+          const row = ctx.rows[ctx.activeIndex];
+          if (row && row.kind === 'option' && !row.option.disabled) {
+            if (isCreateRow(row.option)) {
+              ctx.onCreate?.(row.option.label);
+              const next = [...((ctx.value as string[]) ?? []), row.option.value];
+              ctx.setValue(next);
+              ctx.setQuery('');
+            } else {
+              ctx.toggleValue(row.option.value);
+            }
+          }
+        } else if (e.key === 'Escape') {
+          e.preventDefault();
+          ctx.closeAndFocusTrigger();
+        }
+      }}
+    />
+  );
+}

package/src/components/Select/Loading.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './Select.module.scss';
+
+/**
+ * Default loading-state row, rendered inside the listbox while an async
+ * `loadOptions` request is in flight and the previous result has not yet
+ * arrived (i.e. there are no rows to show alongside it).
+ *
+ * Non-interactive `<li role="presentation">`. Unlike its Empty and Error
+ * siblings its copy is NOT `aria-hidden`: those two render the same sentence
+ * the status region announces, so hiding the visible one stops a reader
+ * meeting it twice, whereas this row's "Loading..." differs from the region's
+ * "Loading options...". Browse mode therefore reads both — different strings,
+ * not a duplicate, but the three rows do not follow one pattern and that is
+ * worth knowing before copying any of them. The
+ * announcement comes from ONE live region the Select root owns; carrying
+ * `aria-live` here mounted the region together with its text, which most
+ * screen readers do not announce. See #495, and `messages.ts` for why the
+ * conflict-resolution half of the original explanation was dropped — it was
+ * spec-arguable but is not what Chromium does inside a `role="listbox"`.
+ */
+export function Loading() {
+  const t = useTranslation();
+  return (
+    <li className={styles.stateRow} role="presentation">
+      <span className={styles.spinner} aria-hidden="true" />
+      <span>{t('select.loading')}</span>
+    </li>
+  );
+}