@plexui/ui 0.19.0 → 0.20.0

package/dist/es/components/RadioGroup/RadioGroup.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { RadioGroup as RadixRadioGroup } from "radix-ui";
 import React, { createContext, use, useId, useMemo } from "react";
-import s from "./RadioGroup.module.css";
+import s from "@plexui/styles/components/RadioGroup/RadioGroup.module.css";
 const RadioGroupContext = createContext(null);
 const useRadioGroupContext = () => {
     const context = use(RadioGroupContext);
@@ -19,19 +19,23 @@ export const RadioGroup = ({ onChange, children, className, direction = "row", d
     }), [disabled, direction]);
     return (_jsx(RadioGroupContext, { value: store, children: _jsx(RadixRadioGroup.Root, { className: clsx(s.RadioGroup, className), "data-direction": direction, onValueChange: onChange, disabled: disabled, ...restProps, children: children }) }));
 };
-const Item = ({ value, disabled: itemDisabled = false, required, children, className, block = false, orientation = "left", ...restProps }) => {
+const Item = ({ value, disabled: itemDisabled = false, required, children, description, className, block = false, orientation = "left", ...restProps }) => {
     const { disabled: groupDisabled } = useRadioGroupContext();
     const disabled = groupDisabled || itemDisabled;
     const id = useId();
     const itemId = `${value}-${id}`;
+    const descriptionId = description ? `${itemId}-description` : undefined;
+    const label = (_jsxs("label", { htmlFor: itemId, className: clsx(s.RadioLabel, className), "data-disabled": disabled ? "" : undefined, "data-block": block ? "" : undefined, "data-orientation": orientation, onMouseDown: (event) => {
+            if (!event.defaultPrevented && event.detail > 1)
+                event.preventDefault();
+        }, children: [_jsx("div", { className: s.RadioIndicatorWrapper, children: _jsx(RadixRadioGroup.Item, { id: itemId, value: value, disabled: disabled, required: required, className: s.RadioItem, "aria-describedby": descriptionId, children: _jsx(RadixRadioGroup.Indicator, { className: s.RadioIndicator }) }) }), children] }));
     return (
     // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace
     // when radio options are of varied lengths.
     // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.
-    _jsx("div", { className: clsx("flex", block && "w-full"), ...restProps, children: _jsxs("label", { htmlFor: itemId, className: clsx(s.RadioLabel, className), "data-disabled": disabled ? "" : undefined, "data-block": block ? "" : undefined, "data-orientation": orientation, onMouseDown: (event) => {
-                if (!event.defaultPrevented && event.detail > 1)
-                    event.preventDefault();
-            }, children: [_jsx("div", { className: s.RadioIndicatorWrapper, children: _jsx(RadixRadioGroup.Item, { id: itemId, value: value, disabled: disabled, required: required, className: s.RadioItem, children: _jsx(RadixRadioGroup.Indicator, { className: s.RadioIndicator }) }) }), children] }) }));
+    _jsx("div", { className: clsx("flex", block && "w-full"), ...restProps, children: description ? (
+        // The description stays outside the label, so it describes the radio instead of naming it
+        _jsxs("div", { className: s.RadioItemGroup, "data-block": block ? "" : undefined, "data-orientation": orientation, children: [label, _jsx("span", { id: descriptionId, className: s.RadioDescription, "data-disabled": disabled ? "" : undefined, children: description })] })) : (label) }));
 };
 RadioGroup.Item = Item;
 //# sourceMappingURL=RadioGroup.js.map

package/dist/es/components/RadioGroup/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\"\nimport React, { createContext, use, useId, useMemo } from \"react\"\nimport s from \"./RadioGroup.module.css\"\n\ntype Direction = \"col\" | \"row\"\n\ntype RadioGroupContextValue = {\n  disabled: boolean\n  direction: Direction\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nconst useRadioGroupContext = () => {\n  const context = use(RadioGroupContext)\n\n  if (!context) {\n    throw new Error(\"RadioGroup components must be wrapped in <RadioGroup />\")\n  }\n\n  return context\n}\n\nexport type RadioGroupProps<T extends string> = {\n  \"defaultValue\"?: T\n  \"value\"?: T\n  \"name\"?: string\n  \"onChange\"?: (value: T) => void\n  /** Accessible label for the radio options */\n  \"aria-label\"?: string\n  /** Determines the layout direction of the radio items\n   * @default row\n   */\n  \"direction\"?: Direction\n  /** Controls whether the entire radio group is disabled */\n  \"disabled\"?: boolean\n  /** Class applied to the radio group container */\n  \"className\"?: string\n  \"children\": React.ReactNode\n  \"required\"?: boolean\n}\n\nexport const RadioGroup = <T extends string>({\n  onChange,\n  children,\n  className,\n  direction = \"row\",\n  disabled = false,\n  ...restProps\n}: RadioGroupProps<T>) => {\n  const store = useMemo<RadioGroupContextValue>(\n    () => ({\n      disabled,\n      direction,\n    }),\n    [disabled, direction],\n  )\n\n  return (\n    <RadioGroupContext value={store}>\n      <RadixRadioGroup.Root\n        className={clsx(s.RadioGroup, className)}\n        data-direction={direction}\n        onValueChange={onChange}\n        disabled={disabled}\n        {...restProps}\n      >\n        {children}\n      </RadixRadioGroup.Root>\n    </RadioGroupContext>\n  )\n}\n\nexport type RadioGroupItemProps<T extends string> = {\n  value: T\n  /** Determines if a given radio item is disabled */\n  disabled?: boolean\n  required?: boolean\n  block?: boolean\n  className?: string\n  /**\n   * The orientation of the radio indicator relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n  children: React.ReactNode\n}\n\nconst Item = <T extends string>({\n  value,\n  disabled: itemDisabled = false,\n  required,\n  children,\n  className,\n  block = false,\n  orientation = \"left\",\n  ...restProps\n}: RadioGroupItemProps<T>) => {\n  const { disabled: groupDisabled } = useRadioGroupContext()\n  const disabled = groupDisabled || itemDisabled\n\n  const id = useId()\n  const itemId = `${value}-${id}`\n\n  return (\n    // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace\n    // when radio options are of varied lengths.\n    // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.\n    <div className={clsx(\"flex\", block && \"w-full\")} {...restProps}>\n      <label\n        htmlFor={itemId}\n        className={clsx(s.RadioLabel, className)}\n        data-disabled={disabled ? \"\" : undefined}\n        data-block={block ? \"\" : undefined}\n        data-orientation={orientation}\n        onMouseDown={(event) => {\n          if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n        }}\n      >\n        <div className={s.RadioIndicatorWrapper}>\n          <RadixRadioGroup.Item\n            id={itemId}\n            value={value}\n            disabled={disabled}\n            required={required}\n            className={s.RadioItem}\n          >\n            <RadixRadioGroup.Indicator className={s.RadioIndicator} />\n          </RadixRadioGroup.Item>\n        </div>\n        {children}\n      </label>\n    </div>\n  )\n}\n\nRadioGroup.Item = Item\n"]}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { RadioGroup as RadixRadioGroup } from \"radix-ui\"\nimport React, { createContext, use, useId, useMemo } from \"react\"\nimport s from \"@plexui/styles/components/RadioGroup/RadioGroup.module.css\"\n\ntype Direction = \"col\" | \"row\"\n\ntype RadioGroupContextValue = {\n  disabled: boolean\n  direction: Direction\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nconst useRadioGroupContext = () => {\n  const context = use(RadioGroupContext)\n\n  if (!context) {\n    throw new Error(\"RadioGroup components must be wrapped in <RadioGroup />\")\n  }\n\n  return context\n}\n\nexport type RadioGroupProps<T extends string> = {\n  \"defaultValue\"?: T\n  \"value\"?: T\n  \"name\"?: string\n  \"onChange\"?: (value: T) => void\n  /** Accessible label for the radio options */\n  \"aria-label\"?: string\n  /** Determines the layout direction of the radio items\n   * @default row\n   */\n  \"direction\"?: Direction\n  /** Controls whether the entire radio group is disabled */\n  \"disabled\"?: boolean\n  /** Class applied to the radio group container */\n  \"className\"?: string\n  \"children\": React.ReactNode\n  \"required\"?: boolean\n}\n\nexport const RadioGroup = <T extends string>({\n  onChange,\n  children,\n  className,\n  direction = \"row\",\n  disabled = false,\n  ...restProps\n}: RadioGroupProps<T>) => {\n  const store = useMemo<RadioGroupContextValue>(\n    () => ({\n      disabled,\n      direction,\n    }),\n    [disabled, direction],\n  )\n\n  return (\n    <RadioGroupContext value={store}>\n      <RadixRadioGroup.Root\n        className={clsx(s.RadioGroup, className)}\n        data-direction={direction}\n        onValueChange={onChange}\n        disabled={disabled}\n        {...restProps}\n      >\n        {children}\n      </RadixRadioGroup.Root>\n    </RadioGroupContext>\n  )\n}\n\nexport type RadioGroupItemProps<T extends string> = {\n  value: T\n  /** Determines if a given radio item is disabled */\n  disabled?: boolean\n  required?: boolean\n  block?: boolean\n  className?: string\n  /**\n   * The orientation of the radio indicator relative to the label.\n   *\n   * @default \"left\"\n   */\n  orientation?: \"left\" | \"right\"\n  children: React.ReactNode\n  /** Optional second line below the option's label. Linked via `aria-describedby`. */\n  description?: React.ReactNode\n}\n\nconst Item = <T extends string>({\n  value,\n  disabled: itemDisabled = false,\n  required,\n  children,\n  description,\n  className,\n  block = false,\n  orientation = \"left\",\n  ...restProps\n}: RadioGroupItemProps<T>) => {\n  const { disabled: groupDisabled } = useRadioGroupContext()\n  const disabled = groupDisabled || itemDisabled\n\n  const id = useId()\n  const itemId = `${value}-${id}`\n  const descriptionId = description ? `${itemId}-description` : undefined\n\n  const label = (\n    <label\n      htmlFor={itemId}\n      className={clsx(s.RadioLabel, className)}\n      data-disabled={disabled ? \"\" : undefined}\n      data-block={block ? \"\" : undefined}\n      data-orientation={orientation}\n      onMouseDown={(event) => {\n        if (!event.defaultPrevented && event.detail > 1) event.preventDefault()\n      }}\n    >\n      <div className={s.RadioIndicatorWrapper}>\n        <RadixRadioGroup.Item\n          id={itemId}\n          value={value}\n          disabled={disabled}\n          required={required}\n          className={s.RadioItem}\n          aria-describedby={descriptionId}\n        >\n          <RadixRadioGroup.Indicator className={s.RadioIndicator} />\n        </RadixRadioGroup.Item>\n      </div>\n      {children}\n    </label>\n  )\n\n  return (\n    // Providing an extra wrapper enables `label` to be inline-flex, avoiding clickable whitespace\n    // when radio options are of varied lengths.\n    // NOTE: Important that this is `flex` to prevent the `inline-flex` label from extra, unintentional whitespace.\n    <div className={clsx(\"flex\", block && \"w-full\")} {...restProps}>\n      {description ? (\n        // The description stays outside the label, so it describes the radio instead of naming it\n        <div className={s.RadioItemGroup} data-block={block ? \"\" : undefined} data-orientation={orientation}>\n          {label}\n          <span id={descriptionId} className={s.RadioDescription} data-disabled={disabled ? \"\" : undefined}>\n            {description}\n          </span>\n        </div>\n      ) : (\n        label\n      )}\n    </div>\n  )\n}\n\nRadioGroup.Item = Item\n"]}

package/dist/es/components/RadioGroup/index.js

@@ -1,2 +1,2 @@
-export { RadioGroup } from "./RadioGroup";
+export { RadioGroup } from "./RadioGroup.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/SegmentedControl/index.js

@@ -1,2 +1,2 @@
-export { Tabs as SegmentedControl } from "../Tabs";
+export { Tabs as SegmentedControl } from "../Tabs/index.js";
 //# sourceMappingURL=index.js.map

package/dist/es/components/Select/Select.js

@@ -3,15 +3,15 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import clsx from "clsx";
 import { Popover } from "radix-ui";
 import React, { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
-import { useEscCloseStack } from "../../hooks/useEscCloseStack";
-import { useLatestValue } from "../../hooks/useLatestValue";
-import { preventDefaultHandler, toCssVariables, waitForAnimationFrame } from "../../lib/helpers";
-import { Check, Info, Search } from "../Icon";
-import { Input } from "../Input";
-import { SelectControl } from "../SelectControl";
-import { Tooltip } from "../Tooltip";
-import { TransitionGroup } from "../Transition";
-import s from "./Select.module.css";
+import { useEscCloseStack } from "../../hooks/useEscCloseStack.js";
+import { useLatestValue } from "../../hooks/useLatestValue.js";
+import { preventDefaultHandler, toCssVariables, waitForAnimationFrame } from "../../lib/helpers.js";
+import { Check, Info, Search } from "../Icon/index.js";
+import { Input } from "../Input/index.js";
+import { SelectControl } from "../SelectControl/index.js";
+import { Tooltip } from "../Tooltip/index.js";
+import { TransitionGroup } from "../Transition/index.js";
+import s from "@plexui/styles/components/Select/Select.module.css";
 const SelectContext = createContext(null);
 const useSelectContext = () => {
     const context = use(SelectContext);
@@ -34,7 +34,7 @@ const DefaultMultiTriggerView = ({ values, selectedAll, }) => {
     return _jsx(_Fragment, { children: displayValue });
 };
 export const Select = (props) => {
-    const { id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, required, value, name, multiple, variant = "outline", size = "md", dropdownIconType = "dropdown", loading = false, clearable = false, disabled = false, placeholder = "Select...", loadingPlaceholder = "Loading...", pill = false, listWidth, options, actions: propActions = [], side = "bottom", avoidCollisions = true, onChange, optionClassName, OptionView = DefaultOptionView, TriggerStartIcon, triggerClassName, opticallyAlign, TriggerView: TriggerViewFromProps, searchPlaceholder = "", searchAriaLabel = "Search options", searchPredicate = defaultSearchPredicate, searchEmptyMessage = "No results found.", listMaxWidth = "auto", trigger, checkPosition = 'start', } = props;
+    const { id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, required, value, name, multiple, variant = "outline", size = "md", dropdownIconType = "dropdown", loading = false, clearable = false, disabled = false, placeholder = "Select...", loadingPlaceholder = "Loading...", pill = false, listWidth, options, actions: propActions = [], side = "bottom", avoidCollisions = true, onChange, optionClassName, OptionView = DefaultOptionView, TriggerStartIcon, triggerClassName, opticallyAlign, TriggerView: TriggerViewFromProps, searchPlaceholder = "", searchAriaLabel = "Search options", searchSize, searchPredicate = defaultSearchPredicate, searchEmptyMessage = "No results found.", listMaxWidth = "auto", trigger, checkPosition = 'start', } = props;
     // Block default is dynamic, based on `variant`
     const block = props.block ?? variant !== "ghost";
     // Align default is dynamic, based on `block`
@@ -136,6 +136,7 @@ export const Select = (props) => {
         listMaxWidth,
         searchPlaceholder,
         searchAriaLabel,
+        searchSize,
         searchEmptyMessage,
         TriggerStartIcon,
         triggerClassName,
@@ -180,6 +181,7 @@ export const Select = (props) => {
         listMaxWidth,
         searchPlaceholder,
         searchAriaLabel,
+        searchSize,
         searchEmptyMessage,
         TriggerStartIcon,
         triggerClassName,
@@ -236,7 +238,7 @@ export const SelectTrigger = (props) => {
         const key = evt.key;
         // If not a command, check for typeahead
         // NOTE: Typeahead not supported in multi-select
-        if (!multiple && isValidTypeaheadChar(key)) {
+        if (!multiple && isTypeaheadKey(evt)) {
             const currentTypeaheadValue = typeahead(key);
             // Stop other listeners from reacting
             evt.stopPropagation();
@@ -253,39 +255,47 @@ export const SelectTrigger = (props) => {
         // Ensure open state is closed
         onOpenChange?.(false);
     };
-    return (_jsxs(SelectControl, { id: triggerId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${triggerId}-value` : undefined, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className: triggerClassName, selected: !isPlaceholder, variant: variant, pill: pill, block: block, size: size, disabled: disabled, loading: loading, StartIcon: TriggerStartIcon, opticallyAlign: opticallyAlign, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, onInteract: onOpenChange, onKeyDown: handleKeyDown, ...restProps, children: [ariaLabelledBy ? (_jsx("span", { id: `${triggerId}-value`, children: multiple ? _jsx(TriggerView, { ...multipleTriggerViewProps }) : _jsx(TriggerView, { ...selectedItem }) })) : multiple ? _jsx(TriggerView, { ...multipleTriggerViewProps }) : _jsx(TriggerView, { ...selectedItem }), (name || id) && (_jsx("input", { id: id, name: name, value: firstValue, tabIndex: -1, onFocus: () => {
-                    document.getElementById(triggerId)?.focus();
-                }, 
-                // keep react from complaining - don't make this readOnly because that
-                // prevents the value from being required
-                onChange: () => { }, required: required, className: "sr-only w-full h-0 left-0 bottom-0 pointer-events-none", "aria-hidden": "true" }))] }));
+    return (_jsxs(SelectControl, { id: triggerId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy ? `${ariaLabelledBy} ${triggerId}-value` : undefined, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className: triggerClassName, selected: !isPlaceholder, variant: variant, pill: pill, block: block, size: size, disabled: disabled, loading: loading, StartIcon: TriggerStartIcon, opticallyAlign: opticallyAlign, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, onInteract: onOpenChange, onKeyDown: handleKeyDown, ...restProps, children: [ariaLabelledBy ? (_jsx("span", { id: `${triggerId}-value`, children: multiple ? _jsx(TriggerView, { ...multipleTriggerViewProps }) : _jsx(TriggerView, { ...selectedItem }) })) : multiple ? _jsx(TriggerView, { ...multipleTriggerViewProps }) : _jsx(TriggerView, { ...selectedItem }), (name || id) &&
+                // One input per selected value, so a form submits every value of a
+                // multi-select; an empty one keeps `id` and `required` working
+                (multiple && value.length ? value : [firstValue ?? ""]).map((formValue, index) => (_jsx("input", { id: index === 0 ? id : undefined, name: name, value: formValue, 
+                    // A disabled select is neither validated nor submitted
+                    disabled: disabled, tabIndex: -1, onFocus: () => {
+                        document.getElementById(triggerId)?.focus();
+                    }, 
+                    // keep react from complaining - don't make this readOnly because that
+                    // prevents the value from being required
+                    onChange: () => { }, required: required, className: s.FormInput, "aria-hidden": "true" }, index)))] }));
 };
 // ============================================================
 // Custom Select
 // ============================================================
 const CustomSelect = () => {
-    const { triggerId, loading, side, align, alignOffset, avoidCollisions, listWidth, listMinWidth, listMaxWidth, trigger, } = useSelectContext();
+    const { loading, side, align, alignOffset, avoidCollisions, listWidth, listMinWidth, listMaxWidth, trigger, } = useSelectContext();
     const [open, setOpen] = useState(false);
     const selectContentRef = useRef(null);
+    // The trigger element, the default one or a custom `trigger` (which has no `triggerId`)
+    const popoverTriggerRef = useRef(null);
     const handleOpenChange = (maybeNextState) => {
         // Toggle the current state when called without a specific state
         const nextState = maybeNextState === undefined ? !open : maybeNextState;
         setOpen(nextState);
         // When we're closing, manage focus back to trigger manually
         if (!nextState) {
+            // Read this now: with animations disabled the menu unmounts before the
+            // timeout below runs, so selectContentRef is already null by then
+            const focusWasInMenu = !!selectContentRef.current?.contains(document.activeElement);
             // Wait until the next tick to determine if another element has become focused
             setTimeout(() => {
-                // This should never happen because TransitionGroup should keep the select content in the DOM long
-                // enough for this callback to run. However, in the event that the ref is null, not focusing is safer.
-                if (!selectContentRef.current) {
-                    return;
-                }
                 const activeElement = document.activeElement;
-                // Don't restore focus to the trigger if focus has moved outside of the select menu
-                if (activeElement && !selectContentRef.current.contains(activeElement)) {
-                    return;
+                const menu = selectContentRef.current;
+                const focusInMenu = !!menu && !!activeElement && menu.contains(activeElement);
+                // Focus dropped with the closing menu lands on <body>: it was lost, not moved
+                const focusLost = !activeElement || activeElement === document.body;
+                // Focus that moved to another element outside the menu stays there
+                if (focusInMenu || (focusWasInMenu && focusLost)) {
+                    popoverTriggerRef.current?.focus();
                 }
-                document.getElementById(triggerId)?.focus();
             });
         }
     };
@@ -298,7 +308,7 @@ const CustomSelect = () => {
                 return;
             }
             handleOpenChange(nextState);
-        }, modal: false, children: [_jsx(Popover.Trigger, { asChild: true, children: trigger ? trigger({ open, onToggle: () => setOpen((current) => !current) }) : _jsx(SelectTrigger, { onOpenChange: handleOpenChange }) }), _jsx(Popover.Portal, { forceMount: true, children: _jsx(TransitionGroup, { className: s.Menu, enterDuration: 350, exitDuration: 200, disableAnimations: true, children: open && (_jsx(Popover.Content, { ref: selectContentRef, forceMount: true, className: s.MenuList, side: side, sideOffset: 5, align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: { bottom: 30, top: 30 }, 
+        }, modal: false, children: [_jsx(Popover.Trigger, { asChild: true, ref: popoverTriggerRef, children: trigger ? trigger({ open, onToggle: () => setOpen((current) => !current) }) : _jsx(SelectTrigger, { onOpenChange: handleOpenChange }) }), _jsx(Popover.Portal, { forceMount: true, children: _jsx(TransitionGroup, { className: s.Menu, enterDuration: 350, exitDuration: 200, disableAnimations: true, children: open && (_jsx(Popover.Content, { ref: selectContentRef, forceMount: true, className: s.MenuList, side: side, sideOffset: 5, align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: { bottom: 30, top: 30 }, 
                         // Prevent Radix auto focus so we can handle our own from within <CustomSelectMenu />
                         onOpenAutoFocus: preventDefaultHandler, 
                         // Radix waits until the animation completes before directing focus, which is janky.
@@ -440,7 +450,7 @@ const CustomSelectMenu = ({ onOpenChange }) => {
                 break;
         }
         // If not a command, check for typeahead
-        if (isValidTypeaheadChar(key)) {
+        if (isTypeaheadKey(evt)) {
             // Skip typeahead logic when we're focused in the search input
             if (isFocusedInSearch) {
                 return;
@@ -486,8 +496,9 @@ const CustomSelectMenu = ({ onOpenChange }) => {
             // Scroll the selected item into view, and its bottom edge.
             currentOption?.scrollIntoView({ block: "center" });
         });
-        // Send initial focus to the menu container or search input, to capture key events
-        const autoFocusTarget = searchInputRef.current || menuRef.current;
+        // Send initial focus to the search input, or the list without one (the
+        // menu container when there are no options), to capture key events
+        const autoFocusTarget = searchInputRef.current || listRef.current || menuRef.current;
         autoFocusTarget?.focus({ preventScroll: true });
         // Required for <StrictMode>, because we need to unset this token
         // when the hooks are re-run. It's an imperative effect that we need to manage.
@@ -516,15 +527,33 @@ const CustomSelectMenu = ({ onOpenChange }) => {
         if (maybeFirstOption)
             setHighlightedValue(maybeFirstOption.value);
     }, [filteredOptions]);
-    return (_jsx(CustomSelectMenuContext, { value: store, children: _jsxs("div", { id: listId, className: s.MenuInner, onKeyDown: handleKeyDown, ref: menuRef, tabIndex: 0, children: [searchable && _jsx(CustomSelectSearch, { value: searchTerm, onChange: setSearchTerm }), _jsx(CustomSelectList, { filteredOptions: filteredOptions }), _jsx(CustomSelectActions, {})] }) }));
+    // The focused element (the search input, or the list without one) points
+    // assistive tech at the highlighted option, when that option is rendered
+    useLayoutEffect(() => {
+        const target = searchInputRef.current || listRef.current;
+        if (!target || !menuRef.current) {
+            return;
+        }
+        const highlightedOption = highlightedValue ? findOptionByValue(highlightedValue, menuRef.current) : null;
+        if (highlightedOption?.id) {
+            target.setAttribute("aria-activedescendant", highlightedOption.id);
+        }
+        else {
+            target.removeAttribute("aria-activedescendant");
+        }
+    }, [highlightedValue, filteredOptions]);
+    return (_jsx(CustomSelectMenuContext, { value: store, children: _jsxs("div", { className: s.MenuInner, onKeyDown: handleKeyDown, ref: menuRef, 
+            // Without search, the list takes focus (and the tab stop); the container
+            // stays focusable so a click on it keeps the keys here
+            tabIndex: !searchable && filteredOptions.length ? -1 : 0, children: [searchable && (_jsx(CustomSelectSearch, { value: searchTerm, onChange: setSearchTerm, hasResults: !!filteredOptions.length })), _jsx(CustomSelectList, { filteredOptions: filteredOptions }), _jsx(CustomSelectActions, {})] }) }));
 };
-const CustomSelectSearch = ({ value, onChange }) => {
-    const { searchPlaceholder, searchAriaLabel } = useSelectContext();
+const CustomSelectSearch = ({ value, onChange, hasResults }) => {
+    const { searchPlaceholder, searchAriaLabel, searchSize } = useSelectContext();
     const { listId, searchInputRef } = useCustomSelectMenuContext();
     const handleChange = (evt) => {
         onChange(evt.target.value);
     };
-    return (_jsx("div", { className: s.Search, children: _jsx(Input, { startAdornment: _jsx(Search, { width: 16, height: 16, className: "fill-secondary", fill: "var(--color-text-secondary)" }), ref: searchInputRef, value: value, placeholder: searchPlaceholder, "aria-label": searchAriaLabel, onChange: handleChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-controls": listId, "aria-expanded": true }) }));
+    return (_jsx("div", { className: s.Search, children: _jsx(Input, { startAdornment: _jsx(Search, { width: 16, height: 16, className: "fill-secondary", fill: "var(--color-text-secondary)" }), ref: searchInputRef, size: searchSize, value: value, placeholder: searchPlaceholder, "aria-label": searchAriaLabel, onChange: handleChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-controls": hasResults ? listId : undefined, "aria-expanded": true }) }));
 };
 const isOptionGroup = (mixedOption) => {
     return "options" in mixedOption;
@@ -534,8 +563,8 @@ const isOptionGroupArray = (arr) => {
 };
 const HARD_OPTIONS_LIMIT = 300;
 const CustomSelectList = ({ filteredOptions, }) => {
-    const { searchEmptyMessage } = useSelectContext();
-    const { listRef } = useCustomSelectMenuContext();
+    const { searchEmptyMessage, multiple, searchable, triggerId, trigger, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = useSelectContext();
+    const { listId, listRef } = useCustomSelectMenuContext();
     if (!filteredOptions.length) {
         return typeof searchEmptyMessage === "string" ? (_jsx("p", { className: s.SearchEmpty, "data-text-only": true, children: searchEmptyMessage })) : (_jsx("div", { className: s.SearchEmpty, children: searchEmptyMessage }));
     }
@@ -547,7 +576,9 @@ const CustomSelectList = ({ filteredOptions, }) => {
         : filteredOptions
             .slice(0, HARD_OPTIONS_LIMIT)
             .map((option) => _jsx(CustomSelectOption, { ...option }, option.value));
-    return (_jsxs("div", { className: s.OptionsList, ref: listRef, children: [options, hasHardLimit && (_jsx(CustomSelectHardLimit, { numHidden: filteredOptions.length - HARD_OPTIONS_LIMIT }))] }));
+    return (_jsxs("div", { id: listId, className: s.OptionsList, ref: listRef, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel || trigger ? undefined : triggerId), "aria-multiselectable": multiple || undefined, 
+        // Without search, the list is the focused element
+        tabIndex: searchable ? undefined : 0, children: [options, hasHardLimit && (_jsx(CustomSelectHardLimit, { numHidden: filteredOptions.length - HARD_OPTIONS_LIMIT }))] }));
 };
 const DEFAULT_OPTIONS_LIMIT = {
     limit: 100,
@@ -555,6 +586,7 @@ const DEFAULT_OPTIONS_LIMIT = {
 };
 const CustomSelectGroup = ({ label, options, optionsLimit = DEFAULT_OPTIONS_LIMIT, }) => {
     const groupId = useId();
+    const headingId = useId();
     const { searchTerm, setHighlightedValue } = useCustomSelectMenuContext();
     const [limitExpanded, setLimitExpanded] = useState(false);
     const hasExpandableLimit = optionsLimit.limit < options.length && !searchTerm && !limitExpanded;
@@ -573,15 +605,18 @@ const CustomSelectGroup = ({ label, options, optionsLimit = DEFAULT_OPTIONS_LIMI
         setHighlightedValue(options[optionsLimit.limit].value);
     };
     return (
-    // NOTE: Important for crawling that groups are flat
-    _jsxs(_Fragment, { children: [_jsx("div", { className: s.OptionGroupHeading, children: label }), maybeLimitedOptions.map((limitedOptions) => (_jsx(CustomSelectOption, { ...limitedOptions }, limitedOptions.value))), hasExpandableLimit && (_jsx(CustomSelectExpandableLimit, { value: `group-limit-${groupId}`, label: optionsLimit.label, onPointerUp: handleLimitExpanded })), hasHardLimit && _jsx(CustomSelectHardLimit, { numHidden: options.length - HARD_OPTIONS_LIMIT })] }));
+    // A group named by its heading. NOTE: The arrow keys walk every option in
+    // document order (findNextOption), so they cross from group to group.
+    _jsxs("div", { role: "group", "aria-labelledby": headingId, className: s.OptionGroup, children: [_jsx("div", { id: headingId, className: s.OptionGroupHeading, children: label }), maybeLimitedOptions.map((limitedOptions) => (_jsx(CustomSelectOption, { ...limitedOptions }, limitedOptions.value))), hasExpandableLimit && (_jsx(CustomSelectExpandableLimit, { value: `group-limit-${groupId}`, label: optionsLimit.label, onPointerUp: handleLimitExpanded })), hasHardLimit && _jsx(CustomSelectHardLimit, { numHidden: options.length - HARD_OPTIONS_LIMIT })] }));
 };
 const CustomSelectHardLimit = ({ numHidden }) => {
     const { checkPosition } = useSelectContext();
     return (_jsxs("div", { className: s.OptionHardLimitHeading, children: [checkPosition === 'start' && _jsx("div", { className: s.OptionIndicatorSlot }), `…and ${numHidden.toLocaleString()} more options. Use search to refine results further.`] }));
 };
 const CustomSelectExpandableLimit = ({ value, label, onPointerUp, }) => {
+    const { checkPosition } = useSelectContext();
     const { highlightedValue, setHighlightedValue } = useCustomSelectMenuContext();
+    const optionId = useId();
     const isHighlighted = value === highlightedValue;
     const handlePointerMove = () => {
         if (isHighlighted) {
@@ -599,13 +634,17 @@ const CustomSelectExpandableLimit = ({ value, label, onPointerUp, }) => {
     // This component acts a LOT like an Option, but has enough bespoke behavior
     // that it cannot literally be one. We copy the important parts of Option for
     // keyboard navigation, UX, etc.
-    return (_jsx("div", { className: clsx(s.Option, s.OptionsLimit), "data-option-id": value, "data-highlight": isHighlighted ? "" : undefined, role: "option", "aria-selected": isHighlighted, onPointerUp: onPointerUp, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, children: _jsxs("div", { className: clsx(s.PressableInner, s.OptionInner), children: [_jsx("div", { className: s.OptionIndicatorSlot }), label] }) }));
+    return (_jsx("div", { id: optionId, className: clsx(s.Option, s.OptionsLimit), "data-option-id": value, "data-highlight": isHighlighted ? "" : undefined, 
+        // Not selectable: no aria-selected
+        role: "option", onPointerUp: onPointerUp, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, children: _jsxs("div", { className: clsx(s.PressableInner, s.OptionInner), children: [checkPosition === 'start' && _jsx("div", { className: s.OptionIndicatorSlot }), label] }) }));
 };
 const INTERNAL_DOM_SELECTION_DATA_ATTR = "data-option-id";
 const CustomSelectOption = (option) => {
     const { optionClassName, OptionView, value: propsValue, multiple, onSelectRef, checkPosition, } = useSelectContext();
     const { openingValue, requestCloseRef, highlightedValue, setHighlightedValue } = useCustomSelectMenuContext();
     const { value, disabled, tooltip } = option;
+    // Referenced by the list's aria-activedescendant while highlighted
+    const optionId = useId();
     // NOTE: SingleSelect mode keeps the opening value instead of the live `propsValue`
     // to avoid selecting the item as the select closes.
     const isSelected = multiple ? propsValue.includes(value) : value === openingValue;
@@ -635,7 +674,7 @@ const CustomSelectOption = (option) => {
             return currentHighlightedValue !== value ? currentHighlightedValue : "";
         });
     };
-    return (_jsx("div", { className: clsx(s.Option, optionClassName), "data-highlight": isHighlighted ? "" : undefined, role: "option", "aria-selected": isHighlighted, "data-selected": isSelected ? "" : undefined, [INTERNAL_DOM_SELECTION_DATA_ATTR]: value, 
+    return (_jsx("div", { id: optionId, className: clsx(s.Option, optionClassName), "data-highlight": isHighlighted ? "" : undefined, role: "option", "aria-selected": isSelected, "data-selected": isSelected ? "" : undefined, [INTERNAL_DOM_SELECTION_DATA_ATTR]: value, 
         // Allow options to behave like a native select, when you can open and select an item in a single click
         onPointerUp: disabled ? undefined : handlePointerUp, 
         // Pointer move allows us to prevent contention from keyboard presses and a still mouse
@@ -764,32 +803,31 @@ const getOptionsByValues = (options, values) => {
     return found;
 };
 const MAX_DOM_CRAWLS = 40;
-const findOptionByValue = (currentValue, container) => container.querySelector(`[data-option-id="${currentValue}"]`);
+const findOptionByValue = (currentValue, container) => container.querySelector(`[data-option-id="${CSS.escape(currentValue)}"]`);
 const isValidOptionNode = (node) => node.matches("[data-option-id]:not([data-disabled])");
-const findNextOption = (currentValue, container) => {
+// Steps from the current option to the nearest enabled one, one option row at a
+// time in document order: across groups (siblings would stop at a group's
+// edge), skipping disabled rows, at most MAX_DOM_CRAWLS rows away
+const findAdjacentOption = (currentValue, container, step) => {
     const currentOption = findOptionByValue(currentValue, container);
-    let nextNode = currentOption?.nextElementSibling;
-    let maxSteps = 0;
-    while (nextNode && maxSteps < MAX_DOM_CRAWLS) {
-        if (isValidOptionNode(nextNode)) {
-            return nextNode;
-        }
-        nextNode = nextNode.nextElementSibling;
-        maxSteps += 1;
+    const rows = Array.from(container.querySelectorAll("[data-option-id]"));
+    let index = currentOption ? rows.indexOf(currentOption) : -1;
+    if (index === -1) {
+        return undefined;
     }
-};
-const findPreviousOption = (currentValue, container) => {
-    const currentOption = findOptionByValue(currentValue, container);
-    let nextNode = currentOption?.previousElementSibling;
-    let maxSteps = 0;
-    while (nextNode && maxSteps < MAX_DOM_CRAWLS) {
+    for (let maxSteps = 0; maxSteps < MAX_DOM_CRAWLS; maxSteps += 1) {
+        index += step;
+        const nextNode = rows[index];
+        if (!nextNode) {
+            return undefined;
+        }
         if (isValidOptionNode(nextNode)) {
             return nextNode;
         }
-        nextNode = nextNode.previousElementSibling;
-        maxSteps += 1;
     }
 };
+const findNextOption = (currentValue, container) => findAdjacentOption(currentValue, container, 1);
+const findPreviousOption = (currentValue, container) => findAdjacentOption(currentValue, container, -1);
 const createTypeahead = () => {
     let currentValue = "";
     let timeoutId;
@@ -814,13 +852,14 @@ const createTypeahead = () => {
     };
 };
 const isValidTypeaheadChar = (char) => /^[a-zA-Z0-9]$/.test(char);
+// A shortcut (Ctrl+C, Cmd+A, Alt+letter) or a key another handler took is not typeahead
+const isTypeaheadKey = (evt) => isValidTypeaheadChar(evt.key) && !evt.ctrlKey && !evt.metaKey && !evt.altKey && !evt.defaultPrevented;
 const getTypeaheadOption = (options, typeaheadValue, currentHighlightValue) => {
     // Ensure options actually exist
     if (!options.length) {
         return undefined;
     }
     let matchBeforeHighlight;
-    let matchAfterHighlight;
     // If we' aren't provided a highlighted value, start from the top (e.g., act like it's found)
     let foundHighlightedValue = !currentHighlightValue;
     const optionValidAndMatches = ({ disabled, label, value }) => {
@@ -837,9 +876,8 @@ const getTypeaheadOption = (options, typeaheadValue, currentHighlightValue) => {
             for (const option of opt.options) {
                 if (optionValidAndMatches(option)) {
                     if (foundHighlightedValue) {
-                        matchAfterHighlight = option;
-                        // We're done after we've found an after match
-                        break;
+                        // We're done after we've found an after match, in any group
+                        return option;
                     }
                     else {
                         // Keep the first found "before" match
@@ -851,9 +889,8 @@ const getTypeaheadOption = (options, typeaheadValue, currentHighlightValue) => {
         else {
             if (optionValidAndMatches(opt)) {
                 if (foundHighlightedValue) {
-                    matchAfterHighlight = opt;
                     // We're done after we've found an after match
-                    break;
+                    return opt;
                 }
                 else {
                     // Keep the first found "before" match
@@ -862,6 +899,6 @@ const getTypeaheadOption = (options, typeaheadValue, currentHighlightValue) => {
             }
         }
     }
-    return matchAfterHighlight || matchBeforeHighlight;
+    return matchBeforeHighlight;
 };
 //# sourceMappingURL=Select.js.map