@bytebrand/fe-ui-core-autobahn 1.0.1 → 1.0.3

package/ui/Dropdown.tsx

@@ -1,205 +1,205 @@
-// Autobahn (auto.de redesign) — md3 single-select dropdown.
-//
-// A real, themeable replacement for the native HTML `<select>`. The browser renders
-// a native `<select>`'s option list with the OS popup, which CANNOT be styled (it
-// ignores the scoped `.md3` theme and reads as "broken"/un-md3). This component
-// reproduces the control as a button trigger (`.mselect-btn`, styled like `.mfield`)
-// plus an absolutely-positioned `.mcard`-style popover menu we fully control.
-//
-// Behaviour parity with a real select:
-//   - controlled: `value` + `options` ({value,label,disabled?}) + `onChange(value)`.
-//   - keyboard: ↓/Enter/Space open; ↑/↓ move the active option; Enter selects;
-//     Esc / Tab close (Esc refocuses the trigger); Home/End jump.
-//   - click-away (document mousedown) closes; the active option scrolls into view.
-//   - a11y: trigger `aria-haspopup=listbox` + `aria-expanded`; menu `role=listbox`;
-//     options `role=option` + `aria-selected`; `aria-activedescendant` tracks focus.
-//
-// Pure/presentational — no store/API/window beyond the click-away listener (guarded
-// for SSR). Renders correctly only inside a `<div className="md3">` subtree.
-
-import React from 'react';
-
-import Icon from './Icon';
-
-export interface DropdownOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface DropdownProps {
-  /** currently selected option value. */
-  value: string;
-  /** the selectable options, in display order. */
-  options: DropdownOption[];
-  /** fired with the chosen option's value. */
-  onChange: (value: string) => void;
-  /** shown (muted) when `value` matches no option. */
-  placeholder?: string;
-  /** leading lucide icon (kebab-case), e.g. 'arrow-up-down'. */
-  icon?: string;
-  disabled?: boolean;
-  /** full-width trigger (default true for form fields; pass false for inline controls). */
-  block?: boolean;
-  /** compact height (sort bar / inline). */
-  size?: 'sm' | 'md';
-  /** accessible label when there is no visible <label> wrapping the control. */
-  ariaLabel?: string;
-  /** extra class on the wrapper (e.g. 'srp-sort' for width rules). */
-  className?: string;
-  /** align the popover to the right edge of the trigger (default left). */
-  menuAlign?: 'left' | 'right';
-}
-
-const Dropdown: React.FunctionComponent<DropdownProps> = ({
-  value,
-  options,
-  onChange,
-  placeholder,
-  icon,
-  disabled = false,
-  block = true,
-  size = 'md',
-  ariaLabel,
-  className,
-  menuAlign = 'left',
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const [activeIndex, setActiveIndex] = React.useState(-1);
-  const rootRef = React.useRef<HTMLDivElement | null>(null);
-  const btnRef = React.useRef<HTMLButtonElement | null>(null);
-  const menuRef = React.useRef<HTMLUListElement | null>(null);
-  // stable id base for aria-activedescendant (avoids Math.random / Date.now, which are unavailable).
-  const idBase = React.useMemo(() => `mselect-${Math.round(value ? value.length : 0)}-`, [value]);
-
-  const selectedIndex = options.findIndex((o) => o.value === value);
-  const selected = selectedIndex !== -1 ? options[selectedIndex] : undefined;
-
-  // close + restore focus to the trigger.
-  const close = React.useCallback((focusTrigger: boolean) => {
-    setOpen(false);
-    setActiveIndex(-1);
-    if (focusTrigger && btnRef.current) btnRef.current.focus();
-  }, []);
-
-  const openMenu = React.useCallback(() => {
-    if (disabled) return;
-    setOpen(true);
-    // start the keyboard highlight on the current selection (or the first option).
-    setActiveIndex(selectedIndex !== -1 ? selectedIndex : 0);
-  }, [disabled, selectedIndex]);
-
-  // click-away (guarded for SSR).
-  React.useEffect(() => {
-    if (!open || typeof document === 'undefined') return undefined;
-    const onDocMouseDown = (e: MouseEvent) => {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close(false);
-    };
-    document.addEventListener('mousedown', onDocMouseDown);
-    return () => document.removeEventListener('mousedown', onDocMouseDown);
-  }, [open, close]);
-
-  // keep the active option scrolled into view while navigating by keyboard.
-  React.useEffect(() => {
-    if (!open || activeIndex < 0 || !menuRef.current) return;
-    const el = menuRef.current.children[activeIndex] as HTMLElement | undefined;
-    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
-  }, [open, activeIndex]);
-
-  const commit = (idx: number) => {
-    const opt = options[idx];
-    if (!opt || opt.disabled) return;
-    onChange(opt.value);
-    close(true);
-  };
-
-  // move the active highlight, skipping disabled options.
-  const move = (dir: 1 | -1) => {
-    if (!options.length) return;
-    let i = activeIndex;
-    for (let step = 0; step < options.length; step += 1) {
-      i = (i + dir + options.length) % options.length;
-      if (!options[i].disabled) {
-        setActiveIndex(i);
-        return;
-      }
-    }
-  };
-
-  const onTriggerKeyDown = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-    if (!open) {
-      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        openMenu();
-      }
-      return;
-    }
-    switch (e.key) {
-      case 'ArrowDown': e.preventDefault(); move(1); break;
-      case 'ArrowUp': e.preventDefault(); move(-1); break;
-      case 'Home': e.preventDefault(); setActiveIndex(options.findIndex((o) => !o.disabled)); break;
-      case 'End': e.preventDefault(); for (let i = options.length - 1; i >= 0; i -= 1) { if (!options[i].disabled) { setActiveIndex(i); break; } } break;
-      case 'Enter': case ' ': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
-      case 'Escape': e.preventDefault(); close(true); break;
-      case 'Tab': close(false); break;
-      default: break;
-    }
-  };
-
-  const wrapCls = ['mselect'];
-  if (size === 'sm') wrapCls.push('mselect--sm');
-  if (block) wrapCls.push('mselect--block');
-  if (className) wrapCls.push(className);
-
-  const label = selected ? selected.label : placeholder || '';
-
-  return (
-    <div className={wrapCls.join(' ')} ref={rootRef}>
-      <button
-        ref={btnRef}
-        type="button"
-        className="mselect-btn"
-        aria-haspopup="listbox"
-        aria-expanded={open}
-        aria-label={ariaLabel}
-        disabled={disabled}
-        onClick={() => (open ? close(false) : openMenu())}
-        onKeyDown={onTriggerKeyDown}
-      >
-        {icon && <Icon name={icon} />}
-        <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
-        <Icon name="chevron-down" cls="mselect-chev" />
-      </button>
-      {open && (
-        <ul
-          ref={menuRef}
-          className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '')}
-          role="listbox"
-          tabIndex={-1}
-          aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
-        >
-          {options.map((opt, i) => (
-            <li key={`${opt.value}_${i}`} role="presentation">
-              <button
-                id={`${idBase}${i}`}
-                type="button"
-                role="option"
-                aria-selected={opt.value === value}
-                disabled={opt.disabled}
-                className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
-                onMouseEnter={() => setActiveIndex(i)}
-                onClick={() => commit(i)}
-              >
-                <span className="mselect-opt-label">{opt.label}</span>
-                {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-
-export default Dropdown;
+// Autobahn (auto.de redesign) — md3 single-select dropdown.
+//
+// A real, themeable replacement for the native HTML `<select>`. The browser renders
+// a native `<select>`'s option list with the OS popup, which CANNOT be styled (it
+// ignores the scoped `.md3` theme and reads as "broken"/un-md3). This component
+// reproduces the control as a button trigger (`.mselect-btn`, styled like `.mfield`)
+// plus an absolutely-positioned `.mcard`-style popover menu we fully control.
+//
+// Behaviour parity with a real select:
+//   - controlled: `value` + `options` ({value,label,disabled?}) + `onChange(value)`.
+//   - keyboard: ↓/Enter/Space open; ↑/↓ move the active option; Enter selects;
+//     Esc / Tab close (Esc refocuses the trigger); Home/End jump.
+//   - click-away (document mousedown) closes; the active option scrolls into view.
+//   - a11y: trigger `aria-haspopup=listbox` + `aria-expanded`; menu `role=listbox`;
+//     options `role=option` + `aria-selected`; `aria-activedescendant` tracks focus.
+//
+// Pure/presentational — no store/API/window beyond the click-away listener (guarded
+// for SSR). Renders correctly only inside a `<div className="md3">` subtree.
+
+import React from 'react';
+
+import Icon from './Icon';
+
+export interface DropdownOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface DropdownProps {
+  /** currently selected option value. */
+  value: string;
+  /** the selectable options, in display order. */
+  options: DropdownOption[];
+  /** fired with the chosen option's value. */
+  onChange: (value: string) => void;
+  /** shown (muted) when `value` matches no option. */
+  placeholder?: string;
+  /** leading lucide icon (kebab-case), e.g. 'arrow-up-down'. */
+  icon?: string;
+  disabled?: boolean;
+  /** full-width trigger (default true for form fields; pass false for inline controls). */
+  block?: boolean;
+  /** compact height (sort bar / inline). */
+  size?: 'sm' | 'md';
+  /** accessible label when there is no visible <label> wrapping the control. */
+  ariaLabel?: string;
+  /** extra class on the wrapper (e.g. 'srp-sort' for width rules). */
+  className?: string;
+  /** align the popover to the right edge of the trigger (default left). */
+  menuAlign?: 'left' | 'right';
+}
+
+const Dropdown: React.FunctionComponent<DropdownProps> = ({
+  value,
+  options,
+  onChange,
+  placeholder,
+  icon,
+  disabled = false,
+  block = true,
+  size = 'md',
+  ariaLabel,
+  className,
+  menuAlign = 'left',
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const btnRef = React.useRef<HTMLButtonElement | null>(null);
+  const menuRef = React.useRef<HTMLUListElement | null>(null);
+  // stable id base for aria-activedescendant (avoids Math.random / Date.now, which are unavailable).
+  const idBase = React.useMemo(() => `mselect-${Math.round(value ? value.length : 0)}-`, [value]);
+
+  const selectedIndex = options.findIndex((o) => o.value === value);
+  const selected = selectedIndex !== -1 ? options[selectedIndex] : undefined;
+
+  // close + restore focus to the trigger.
+  const close = React.useCallback((focusTrigger: boolean) => {
+    setOpen(false);
+    setActiveIndex(-1);
+    if (focusTrigger && btnRef.current) btnRef.current.focus();
+  }, []);
+
+  const openMenu = React.useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    // start the keyboard highlight on the current selection (or the first option).
+    setActiveIndex(selectedIndex !== -1 ? selectedIndex : 0);
+  }, [disabled, selectedIndex]);
+
+  // click-away (guarded for SSR).
+  React.useEffect(() => {
+    if (!open || typeof document === 'undefined') return undefined;
+    const onDocMouseDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) close(false);
+    };
+    document.addEventListener('mousedown', onDocMouseDown);
+    return () => document.removeEventListener('mousedown', onDocMouseDown);
+  }, [open, close]);
+
+  // keep the active option scrolled into view while navigating by keyboard.
+  React.useEffect(() => {
+    if (!open || activeIndex < 0 || !menuRef.current) return;
+    const el = menuRef.current.children[activeIndex] as HTMLElement | undefined;
+    if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
+  }, [open, activeIndex]);
+
+  const commit = (idx: number) => {
+    const opt = options[idx];
+    if (!opt || opt.disabled) return;
+    onChange(opt.value);
+    close(true);
+  };
+
+  // move the active highlight, skipping disabled options.
+  const move = (dir: 1 | -1) => {
+    if (!options.length) return;
+    let i = activeIndex;
+    for (let step = 0; step < options.length; step += 1) {
+      i = (i + dir + options.length) % options.length;
+      if (!options[i].disabled) {
+        setActiveIndex(i);
+        return;
+      }
+    }
+  };
+
+  const onTriggerKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+    if (!open) {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        openMenu();
+      }
+      return;
+    }
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); move(1); break;
+      case 'ArrowUp': e.preventDefault(); move(-1); break;
+      case 'Home': e.preventDefault(); setActiveIndex(options.findIndex((o) => !o.disabled)); break;
+      case 'End': e.preventDefault(); for (let i = options.length - 1; i >= 0; i -= 1) { if (!options[i].disabled) { setActiveIndex(i); break; } } break;
+      case 'Enter': case ' ': e.preventDefault(); if (activeIndex >= 0) commit(activeIndex); break;
+      case 'Escape': e.preventDefault(); close(true); break;
+      case 'Tab': close(false); break;
+      default: break;
+    }
+  };
+
+  const wrapCls = ['mselect'];
+  if (size === 'sm') wrapCls.push('mselect--sm');
+  if (block) wrapCls.push('mselect--block');
+  if (className) wrapCls.push(className);
+
+  const label = selected ? selected.label : placeholder || '';
+
+  return (
+    <div className={wrapCls.join(' ')} ref={rootRef}>
+      <button
+        ref={btnRef}
+        type="button"
+        className="mselect-btn"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        disabled={disabled}
+        onClick={() => (open ? close(false) : openMenu())}
+        onKeyDown={onTriggerKeyDown}
+      >
+        {icon && <Icon name={icon} />}
+        <span className={'mselect-label' + (selected ? '' : ' mselect-label--ph')}>{label}</span>
+        <Icon name="chevron-down" cls="mselect-chev" />
+      </button>
+      {open && (
+        <ul
+          ref={menuRef}
+          className={'mselect-menu' + (menuAlign === 'right' ? ' mselect-menu--right' : '')}
+          role="listbox"
+          tabIndex={-1}
+          aria-activedescendant={activeIndex >= 0 ? `${idBase}${activeIndex}` : undefined}
+        >
+          {options.map((opt, i) => (
+            <li key={`${opt.value}_${i}`} role="presentation">
+              <button
+                id={`${idBase}${i}`}
+                type="button"
+                role="option"
+                aria-selected={opt.value === value}
+                disabled={opt.disabled}
+                className={'mselect-opt' + (i === activeIndex ? ' is-active' : '')}
+                onMouseEnter={() => setActiveIndex(i)}
+                onClick={() => commit(i)}
+              >
+                <span className="mselect-opt-label">{opt.label}</span>
+                {opt.value === value && <Icon name="check" size={16} cls="mselect-check" />}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;