@zyncat/ui 0.8.0

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

@@ -0,0 +1,100 @@
+'use client';
+
+import { useLayoutEffect, useRef, type ReactNode, type RefObject } from 'react';
+import type { Layer } from '../../../../engine';
+import { Presence } from '../../../../motion/presence';
+import { useMotion, type MotionSpecs } from '../../../../motion/use-motion';
+import { UIMotion, type MotionTransition } from '../../../../tokens/motion-tokens';
+import { resolveMotionTiming } from '../../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../../motion/timing';
+import { OverlayPortal, useOverlayEntry, useOutsidePress } from '../../../internal/overlay/layer';
+import { useAnchorPosition } from '../../../internal/overlay/position';
+
+const SELECT_MENU_TIMING = {
+  open: { duration: 'base', ease: 'entrance' },
+  close: { duration: 'base', ease: 'exit' },
+} as const;
+
+function selectMenuLayers(animation: DisableableAnimation | undefined, dir: 'open' | 'close'): Layer[] {
+  const t = resolveMotionTiming(animation, SELECT_MENU_TIMING)[dir];
+  const fade = (d: MotionTransition) => ({ duration: d.duration === 0 ? 0 : UIMotion.dur.fast, ease: d.ease });
+  return dir === 'open'
+    ? [
+        { y: [-6, 0], scale: [0.96, 1], timing: t },
+        { opacity: [0, 1], timing: fade(t) },
+      ]
+    : [
+        { y: [-6], scale: [0.96], timing: t },
+        { opacity: [0], timing: fade(t) },
+      ];
+}
+
+export interface SelectMenuProps {
+  open: boolean;
+  menuId: string;
+  requestClose: () => void;
+  triggerRef: RefObject<HTMLButtonElement | null>;
+  multiple?: boolean;
+  /** Open/close timing - motion tokens only, or `null` to disable. */
+  animation?: DisableableAnimation;
+  children?: ReactNode;
+}
+
+function MenuSurface({
+  menuId,
+  requestClose,
+  triggerRef,
+  multiple,
+  animate,
+  exit,
+  children,
+}: Omit<SelectMenuProps, 'open' | 'animation'> & MotionSpecs) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const entry = useOverlayEntry({ nodeRef: menuRef, dismissible: true, requestClose });
+  useMotion(menuRef, { animate, exit });
+  useLayoutEffect(() => {
+    const apply = () => {
+      const t = triggerRef.current;
+      if (t && menuRef.current) menuRef.current.style.minWidth = t.getBoundingClientRect().width + 'px';
+    };
+    apply();
+    window.addEventListener('resize', apply);
+    return () => window.removeEventListener('resize', apply);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  useAnchorPosition({ side: 'bottom', align: 'start', arrow: false, triggerRef, panelRef: menuRef });
+  useOutsidePress({ entry, refs: [menuRef, triggerRef], enabled: true, onPress: requestClose });
+
+  return (
+    <div
+      ref={menuRef}
+      className="select__menu"
+      id={menuId}
+      role="presentation"
+      data-multiple={multiple ? 'true' : undefined}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SelectMenu({ open, menuId, requestClose, triggerRef, multiple, animation, children }: SelectMenuProps) {
+  return (
+    <OverlayPortal>
+      <Presence>
+        {open && (
+          <MenuSurface
+            key="menu"
+            animate={selectMenuLayers(animation, 'open')}
+            exit={selectMenuLayers(animation, 'close')}
+            menuId={menuId}
+            requestClose={requestClose}
+            triggerRef={triggerRef}
+            multiple={multiple}
+          >
+            {children}
+          </MenuSurface>
+        )}
+      </Presence>
+    </OverlayPortal>
+  );
+}

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

@@ -0,0 +1,154 @@
+'use client';
+
+import { Fragment, useMemo, type ReactNode } from 'react';
+import { Icon } from '../../../internal/icon/Icon';
+import { IconSlot } from '../../../internal/icon/IconSlot';
+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;
+  loading: boolean;
+  searchable: boolean;
+  searchPlaceholder?: string;
+  ariaLabel?: string;
+  multiple?: boolean;
+  /** 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);
+
+function LoadingRows() {
+  return (
+    <div className="select__loading" aria-busy="true" aria-live="polite">
+      {[0, 1, 2].map((i) => (
+        <div className="select__skeleton" key={i}>
+          <span className="select__skeleton-dot" data-pulse></span>
+          <span className="select__skeleton-bar" data-pulse></span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyRow({ query }: { query: string }) {
+  return <div className="select__empty">{query ? 'No matches for "' + query + '"' : 'No options available'}</div>;
+}
+
+export function ListboxPanel({
+  lb,
+  loading,
+  searchable,
+  searchPlaceholder,
+  ariaLabel,
+  multiple,
+  animation,
+  size = 'md',
+  check = defaultCheck,
+}: ListboxPanelProps) {
+  const navIndex = useMemo(() => new Map(lb.navItems.map((o, i) => [o.value, i] as const)), [lb.navItems]);
+  return (
+    <SelectMenu
+      open={lb.open}
+      menuId={lb.menuId}
+      requestClose={lb.requestClose}
+      triggerRef={lb.triggerRef}
+      multiple={multiple}
+      animation={animation}
+    >
+      {searchable && !loading && (
+        <div className="select__search">
+          <Icon name="magnifying-glass" size="sm" />
+          <input
+            ref={lb.searchRef}
+            className="select__search-input"
+            type="text"
+            value={lb.query}
+            placeholder={searchPlaceholder}
+            aria-label={searchPlaceholder}
+            aria-controls={lb.listId}
+            aria-activedescendant={lb.adId}
+            onChange={(e) => lb.setQuery(e.target.value)}
+            onKeyDown={lb.onMenuKeyDown}
+          />
+        </div>
+      )}
+
+      <div
+        className="select__list"
+        ref={lb.listRef}
+        id={lb.listId}
+        role="listbox"
+        aria-multiselectable={multiple || undefined}
+        tabIndex={-1}
+        aria-label={ariaLabel}
+        onKeyDown={searchable ? undefined : lb.onMenuKeyDown}
+      >
+        <GlidePill className="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.options.map((opt) => {
+                  const i = navIndex.get(opt.value) ?? -1;
+                  const visible = i !== -1;
+                  const isSel = lb.isSelected(opt.value);
+                  const row = (
+                    <div
+                      key={opt.value}
+                      id={visible ? lb.optId(opt.value) : undefined}
+                      data-idx={visible ? i : undefined}
+                      className="select__option"
+                      role="option"
+                      aria-selected={isSel}
+                      aria-hidden={!visible || undefined}
+                      aria-disabled={opt.disabled || undefined}
+                      data-selected={isSel ? 'true' : undefined}
+                      data-active={visible && i === lb.activeIdx ? 'true' : undefined}
+                      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>
+                  );
+                  return searchable ? (
+                    <Collapse key={opt.value} open={visible} fade>
+                      {row}
+                    </Collapse>
+                  ) : (
+                    row
+                  );
+                })}
+              </div>
+            ))}
+            {lb.navItems.length === 0 && <EmptyRow query={lb.query} />}
+          </Fragment>
+        )}
+      </div>
+    </SelectMenu>
+  );
+}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { Icon } from '../../../internal/icon/Icon';
+import { IconSlot } from '../../../internal/icon/IconSlot';
+import type { ListboxState } from './use-listbox';
+import { Button, ButtonProps } from '../../../primitives/button/Button';
+
+export interface SelectTriggerProps extends ButtonProps {
+  lb: ListboxState;
+  invalid?: boolean;
+  ariaLabel?: string;
+  leading?: ReactNode;
+  text?: ReactNode;
+  isPlaceholder?: boolean;
+  count?: number;
+}
+
+export function SelectTrigger({
+  lb,
+  invalid,
+  ariaLabel,
+  leading,
+  text,
+  isPlaceholder,
+  count,
+  htmlProps,
+  ...rest
+}: SelectTriggerProps) {
+  const { triggerRef, baseId, open, adId, show, requestClose } = lb;
+  return (
+    <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,
+      }}
+      onClick={() => (open ? requestClose() : show())}
+      iconRight={
+        <span className="select__caret">
+          <Icon name="caret-down" size="sm" />
+        </span>
+      }
+      iconLeft={
+        leading && (
+          <span className="select__leading">
+            <IconSlot size="sm">{leading}</IconSlot>
+          </span>
+        )
+      }
+      {...rest}
+    >
+      <span className="select__value" data-placeholder={isPlaceholder ? 'true' : undefined}>
+        {text}
+      </span>
+      {count != null && count > 0 && <span className="select__count">+{count}</span>}
+    </Button>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+
+export interface SelectOption {
+  /** The stored value - what `onChange` returns and `value` matches; must be unique. */
+  value: string;
+  /** Primary row text, and the trigger label once selected; also matched by `searchable`. */
+  label: ReactNode;
+  /** Optional secondary line under the label; also matched by `searchable`. */
+  description?: string;
+  /** Your own icon node shown before the label. */
+  icon?: ReactNode;
+  /** Not selectable - skipped by keyboard nav and typeahead, and marked `aria-disabled`. @default false */
+  disabled?: boolean;
+}
+export interface SelectGroup {
+  /** Section heading rendered above the options; omit for an unlabeled group. */
+  label?: string;
+  /** The options in this section. */
+  options: SelectOption[];
+}
+
+export interface NormalizedGroup {
+  label: string | null | undefined;
+  options: 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 matches = (o: SelectOption, q: string) =>
+  !q || (o.label + ' ' + (o.description || '')).toLowerCase().includes(q.toLowerCase());

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

@@ -0,0 +1,182 @@
+'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';
+
+export interface UseListboxArgs {
+  options: SelectOption[] | SelectGroup[];
+  disabled: boolean;
+  loading: boolean;
+  searchable: boolean;
+  id?: string;
+  idPrefix: string;
+  isSelected: (value: string) => boolean;
+  onCommit: (opt: SelectOption) => void;
+  closeOnCommit: boolean;
+}
+
+export type ListboxState = ReturnType<typeof useListbox>;
+
+export function useListbox({
+  options,
+  disabled,
+  loading,
+  searchable,
+  id,
+  idPrefix,
+  isSelected,
+  onCommit,
+  closeOnCommit,
+}: UseListboxArgs) {
+  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 triggerRef = useRef<HTMLButtonElement>(null),
+    listRef = useRef<HTMLDivElement>(null),
+    searchRef = useRef<HTMLInputElement>(null);
+  const autoId = useId();
+  const baseId = id || idPrefix + autoId;
+  const menuId = baseId + '-menu';
+  const listId = baseId + '-list';
+  const glide = useGlide(listRef);
+
+  const { groups, flat } = useMemo(() => normalize(options), [options]);
+  const navItems = useMemo(() => flat.filter((o) => matches(o, query)), [flat, query]);
+
+  const show = () => {
+    if (!disabled && !loading) setOpen(true);
+  };
+  const requestClose = () => setOpen(false);
+  const returnFocus = () => triggerRef.current && triggerRef.current.focus();
+
+  function commit(opt: SelectOption) {
+    if (!opt || opt.disabled) return;
+    onCommit(opt);
+    if (closeOnCommit) {
+      requestClose();
+      returnFocus();
+    }
+  }
+
+  useEffect(() => {
+    if (!open) setQuery('');
+  }, [open]);
+
+  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);
+    const ref = searchable ? searchRef : listRef;
+    setTimeout(() => {
+      if (ref.current) ref.current.focus();
+    }, 0);
+  }, [open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    const list = listRef.current;
+    if (!open || activeIdx < 0 || !list) return;
+    const el = list.querySelector('[data-idx="' + activeIdx + '"]') as HTMLElement | null;
+    if (!el) return;
+    if (el.offsetTop < list.scrollTop) list.scrollTop = el.offsetTop;
+    else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight)
+      list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight;
+  }, [activeIdx, open]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    const el = open && activeIdx >= 0 && list && list.querySelector<HTMLElement>('[data-idx="' + activeIdx + '"]');
+    if (el) glide.enter(el);
+    else glide.leave();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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);
+    }
+  }
+  function edgeActive(toEnd: boolean) {
+    const order = [...navItems.keys()];
+    if (toEnd) order.reverse();
+    for (const i of order) if (!navItems[i].disabled) return 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));
+    if (i >= 0) setActiveIdx(i);
+  }
+
+  function onMenuKeyDown(e: KeyboardEvent) {
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        requestClose();
+        returnFocus();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case 'Home':
+        e.preventDefault();
+        edgeActive(false);
+        break;
+      case 'End':
+        e.preventDefault();
+        edgeActive(true);
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (activeIdx >= 0) commit(navItems[activeIdx]);
+        break;
+      case 'Tab':
+        requestClose();
+        break;
+      default:
+        if (!searchable && e.key.length === 1 && !e.metaKey && !e.ctrlKey) typeAhead(e.key);
+    }
+  }
+
+  const optId = (value: string) => baseId + '-opt-' + encodeURIComponent(value);
+  const active = activeIdx >= 0 ? navItems[activeIdx] : undefined;
+  const adId = open && active ? optId(active.value) : undefined;
+
+  return {
+    open,
+    query,
+    setQuery,
+    triggerRef,
+    listRef,
+    searchRef,
+    baseId,
+    menuId,
+    listId,
+    optId,
+    adId,
+    groups,
+    flat,
+    navItems,
+    glide,
+    isSelected,
+    show,
+    requestClose,
+    commit,
+    activeIdx,
+    setActiveIdx,
+    onMenuKeyDown,
+  };
+}