@zyncat/ui 0.10.0 → 0.12.0

package/src/components/composites/select/core/panel.tsx

@@ -1,14 +1,17 @@
 'use client';
 
+import '../../../internal/menu/menu-surface.css';
+
 import { Fragment, useMemo, type ReactNode } from 'react';
+
+import { GlidePill } from '../../../../motion/glide';
+import type { DisableableAnimation } from '../../../../motion/timing';
 import { Icon } from '../../../internal/icon/Icon';
-import { IconSlot } from '../../../internal/icon/IconSlot';
+import { MenuRow } from '../../../internal/menu/menu-row';
+import { activationProps, type ActivateOn } from '../../../internal/utils/activation';
 import { Collapse } from '../../../primitives/collapse/Collapse';
-import { GlidePill } from '../../../../motion/glide';
 import { SelectMenu } from './menu';
 import type { ListboxState } from './use-listbox';
-import type { DisableableAnimation } from '../../../../motion/timing';
-import type { ButtonProps } from '../../../primitives/button/Button';
 
 export interface ListboxPanelProps {
   lb: ListboxState;
@@ -17,10 +20,10 @@ export interface ListboxPanelProps {
   searchPlaceholder?: string;
   ariaLabel?: string;
   multiple?: boolean;
+  activateOn?: ActivateOn;
   /** Menu open/close timing - motion tokens only, or `null` to disable. */
   animation?: DisableableAnimation;
   check?: (selected: boolean) => ReactNode;
-  size?: ButtonProps['size'];
 }
 
 const defaultCheck = (selected: boolean) => (selected ? <Icon key="on" name="check" size="sm" weight="bold" /> : null);
@@ -49,8 +52,8 @@ export function ListboxPanel({
   searchPlaceholder,
   ariaLabel,
   multiple,
+  activateOn,
   animation,
-  size = 'md',
   check = defaultCheck,
 }: ListboxPanelProps) {
   const navIndex = useMemo(() => new Map(lb.navItems.map((o, i) => [o.value, i] as const)), [lb.navItems]);
@@ -82,31 +85,32 @@ export function ListboxPanel({
       )}
 
       <div
-        className="select__list"
+        className="menu-scroller select__list"
         ref={lb.listRef}
         id={lb.listId}
         role="listbox"
         aria-multiselectable={multiple || undefined}
         tabIndex={-1}
         aria-label={ariaLabel}
+        aria-activedescendant={searchable ? undefined : lb.adId}
         onKeyDown={searchable ? undefined : lb.onMenuKeyDown}
       >
-        <GlidePill className="select__glide" glide={lb.glide} />
+        <GlidePill className="menu-glide select__glide" glide={lb.glide} />
         {loading ? (
           <LoadingRows />
         ) : (
           <Fragment>
             {lb.groups.map((g, gi) => (
               <div className="select__group" role="group" aria-label={g.label || undefined} key={gi}>
-                {g.label && g.options.some((o) => navIndex.has(o.value)) && (
-                  <div className="select__group-label">{g.label}</div>
+                {g.label && g.items.some((o) => navIndex.has(o.value)) && (
+                  <div className="menu-group-label select__group-label">{g.label}</div>
                 )}
-                {g.options.map((opt) => {
+                {g.items.map((opt) => {
                   const i = navIndex.get(opt.value) ?? -1;
                   const visible = i !== -1;
                   const isSel = lb.isSelected(opt.value);
                   const row = (
-                    <div
+                    <MenuRow
                       key={opt.value}
                       id={visible ? lb.optId(opt.value) : undefined}
                       data-idx={visible ? i : undefined}
@@ -120,20 +124,15 @@ export function ListboxPanel({
                       data-disabled={opt.disabled ? 'true' : undefined}
                       onMouseEnter={() => visible && !opt.disabled && lb.setActiveIdx(i)}
                       onMouseDown={(e) => e.preventDefault()}
-                      onClick={() => visible && lb.commit(opt)}
-                      data-size={size}
-                    >
-                      {opt.icon && (
-                        <span className="select__option-icon">
-                          <IconSlot size="sm">{opt.icon}</IconSlot>
-                        </span>
-                      )}
-                      <span className="select__option-text">
-                        <span className="select__option-label">{opt.label}</span>
-                        {opt.description && <span className="select__option-desc">{opt.description}</span>}
-                      </span>
-                      {check(isSel) ? <span className="select__option-check">{check(isSel)}</span> : null}
-                    </div>
+                      {...activationProps<HTMLDivElement>(() => visible && lb.commit(opt), {
+                        on: activateOn,
+                        holdFocus: true,
+                      })}
+                      icon={opt.icon}
+                      label={opt.label}
+                      description={opt.description}
+                      trailing={check(isSel) ? <span className="select__option-check">{check(isSel)}</span> : null}
+                    />
                   );
                   return searchable ? (
                     <Collapse key={opt.value} open={visible} fade>

package/src/components/composites/select/core/trigger.tsx

@@ -1,12 +1,17 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+
+import type { DataAttributes } from '../../../../dom-props';
 import { Icon } from '../../../internal/icon/Icon';
 import { IconSlot } from '../../../internal/icon/IconSlot';
+import { activationProps, type ActivateOn } from '../../../internal/utils/activation';
+import { cx } from '../../../internal/utils/cx';
 import type { ListboxState } from './use-listbox';
-import { Button, ButtonProps } from '../../../primitives/button/Button';
 
-export interface SelectTriggerProps extends ButtonProps {
+export type SelectTriggerHtmlProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> & DataAttributes;
+
+export interface SelectTriggerProps extends SelectTriggerHtmlProps {
   lb: ListboxState;
   invalid?: boolean;
   ariaLabel?: string;
@@ -14,6 +19,7 @@ export interface SelectTriggerProps extends ButtonProps {
   text?: ReactNode;
   isPlaceholder?: boolean;
   count?: number;
+  activateOn?: ActivateOn;
 }
 
 export function SelectTrigger({
@@ -24,33 +30,39 @@ export function SelectTrigger({
   text,
   isPlaceholder,
   count,
-  htmlProps,
+  className,
+  activateOn,
+  onClick,
+  onPointerDown,
+  onKeyDown,
   ...rest
 }: SelectTriggerProps) {
   const { triggerRef, baseId, open, adId, show, requestClose } = lb;
   return (
-    <Button
+    <button
       type="button"
       ref={triggerRef}
-      variant="ghost"
-      htmlProps={{
-        id: baseId + '-trigger',
-        role: 'combobox',
-        'aria-haspopup': 'listbox',
-        'aria-expanded': open,
-        'aria-controls': baseId + '-list',
-        'aria-activedescendant': adId,
-        'aria-label': ariaLabel,
-        'aria-invalid': invalid || undefined,
-        onKeyDown: (e) => {
-          if (!open && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-            e.preventDefault();
-            show();
-          }
-        },
-        ...htmlProps,
+      id={baseId + '-trigger'}
+      className={cx('select__trigger', className)}
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded={open}
+      aria-controls={baseId + '-list'}
+      aria-activedescendant={adId}
+      aria-label={ariaLabel}
+      aria-invalid={invalid || undefined}
+      onKeyDown={(e) => {
+        onKeyDown?.(e);
+        if (!open && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+          e.preventDefault();
+          show();
+        }
       }}
-      onClick={() => (open ? requestClose() : show())}
+      {...activationProps<HTMLButtonElement>(() => (open ? requestClose() : show()), {
+        on: activateOn,
+        onPointerDown,
+        onClick,
+      })}
       {...rest}
     >
       {leading && (
@@ -65,6 +77,6 @@ export function SelectTrigger({
       <span className="select__caret">
         <Icon name="caret-down" size="sm" />
       </span>
-    </Button>
+    </button>
   );
 }

package/src/components/composites/select/core/types.ts

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react';
 
+import { normalizeCollection, type NormalizedGroup as CollectionGroup } from '../../../internal/collection/collection';
+
 export interface SelectOption {
   /** The stored value - what `onChange` returns and `value` matches; must be unique. */
   value: string;
@@ -11,6 +13,8 @@ export interface SelectOption {
   icon?: ReactNode;
   /** Not selectable - skipped by keyboard nav and typeahead, and marked `aria-disabled`. @default false */
   disabled?: boolean;
+  /** Text used for `searchable` filtering and typeahead. Required when `label` is not a string. */
+  searchText?: string;
 }
 export interface SelectGroup {
   /** Section heading rendered above the options; omit for an unlabeled group. */
@@ -19,21 +23,19 @@ export interface SelectGroup {
   options: SelectOption[];
 }
 
-export interface NormalizedGroup {
-  label: string | null | undefined;
-  options: SelectOption[];
-}
+export type NormalizedGroup = CollectionGroup<SelectOption>;
 
-export function normalize(options: SelectOption[] | SelectGroup[]): {
-  groups: NormalizedGroup[];
-  flat: SelectOption[];
-} {
-  const grouped = options.length > 0 && options[0] && Array.isArray((options[0] as SelectGroup).options);
-  const groups: NormalizedGroup[] = grouped
-    ? (options as SelectGroup[]).map((g) => ({ label: g.label, options: g.options || [] }))
-    : [{ label: null, options: options as SelectOption[] }];
-  return { groups, flat: groups.flatMap((g) => g.options) };
-}
+export const normalize = (
+  options: SelectOption[] | SelectGroup[],
+): { groups: NormalizedGroup[]; flat: SelectOption[] } =>
+  normalizeCollection<SelectOption, SelectGroup>(options, {
+    isGroup: (entry): entry is SelectGroup => Array.isArray((entry as SelectGroup).options),
+    itemsOf: (group) => group.options,
+    labelOf: (group) => group.label,
+  });
+
+export const optionText = (o: SelectOption): string =>
+  o.searchText ?? (typeof o.label === 'string' ? o.label : o.value);
 
 export const matches = (o: SelectOption, q: string) =>
-  !q || (o.label + ' ' + (o.description || '')).toLowerCase().includes(q.toLowerCase());
+  !q || (optionText(o) + ' ' + (o.description || '')).toLowerCase().includes(q.toLowerCase());

package/src/components/composites/select/core/use-listbox.ts

@@ -1,8 +1,11 @@
 'use client';
 
 import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+
 import { useGlide } from '../../../../motion/glide';
-import { normalize, matches, type SelectOption, type SelectGroup } from './types';
+import { edgeEnabled, matchPrefix, stepEnabled } from '../../../internal/collection/collection';
+import { useTypeahead } from '../../../internal/hooks/use-typeahead';
+import { matches, normalize, optionText, type SelectGroup, type SelectOption } from './types';
 
 export interface UseListboxArgs {
   options: SelectOption[] | SelectGroup[];
@@ -32,7 +35,7 @@ export function useListbox({
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [activeIdx, setActiveIdx] = useState(-1);
-  const typeahead = useRef<{ buf: string; t: ReturnType<typeof setTimeout> | number }>({ buf: '', t: 0 });
+  const typeahead = useTypeahead();
 
   const triggerRef = useRef<HTMLButtonElement>(null),
     listRef = useRef<HTMLDivElement>(null),
@@ -68,12 +71,13 @@ export function useListbox({
   useEffect(() => {
     if (!open) return;
     const sel = navItems.findIndex((o) => isSelected(o.value) && !o.disabled);
-    const first = navItems.findIndex((o) => !o.disabled);
-    setActiveIdx(sel >= 0 ? sel : first);
+    setActiveIdx(sel >= 0 ? sel : edgeEnabled(navItems, false));
+  }, [open, query]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (!open) return;
     const ref = searchable ? searchRef : listRef;
-    setTimeout(() => {
-      if (ref.current) ref.current.focus();
-    }, 0);
+    if (ref.current) ref.current.focus();
   }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
@@ -95,24 +99,15 @@ export function useListbox({
   }, [open, activeIdx, query]);
 
   function moveActive(dir: number) {
-    if (!navItems.length) return;
-    let i = activeIdx;
-    for (let s = 0; s < navItems.length; s++) {
-      i = (i + dir + navItems.length) % navItems.length;
-      if (!navItems[i].disabled) return setActiveIdx(i);
-    }
+    const i = stepEnabled(navItems, activeIdx, dir);
+    if (i >= 0) setActiveIdx(i);
   }
   function edgeActive(toEnd: boolean) {
-    const order = [...navItems.keys()];
-    if (toEnd) order.reverse();
-    for (const i of order) if (!navItems[i].disabled) return setActiveIdx(i);
+    const i = edgeEnabled(navItems, toEnd);
+    if (i >= 0) setActiveIdx(i);
   }
   function typeAhead(ch: string) {
-    const ta = typeahead.current;
-    clearTimeout(ta.t);
-    ta.buf += ch.toLowerCase();
-    ta.t = setTimeout(() => (ta.buf = ''), 600);
-    const i = navItems.findIndex((o) => !o.disabled && o.value.toLowerCase().startsWith(ta.buf));
+    const i = matchPrefix(navItems, optionText, typeahead.push(ch));
     if (i >= 0) setActiveIdx(i);
   }
 
@@ -146,6 +141,12 @@ export function useListbox({
       case 'Tab':
         requestClose();
         break;
+      case ' ':
+        if (searchable) break;
+        e.preventDefault();
+        if (typeahead.buffered()) typeAhead(e.key);
+        else if (activeIdx >= 0) commit(navItems[activeIdx]);
+        break;
       default:
         if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey) typeAhead(e.key);
     }