@neasg/design-system 0.4.21 → 0.4.22

package/dist/filter-popover.js

@@ -7,7 +7,7 @@ import { Button } from "./button";
 import { CountBadge } from "./count-badge";
 import { cn } from "./lib/utils";
 import { Popover } from "./popover";
-import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection, PopoverMenuView, popoverMenuItemFocusClassName, } from "./popover-menu";
+import { PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuCheckboxItem, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuItem, PopoverMenuScrollArea, PopoverMenuSearch, PopoverMenuSection, PopoverMenuView, popoverMenuItemFocusClassName, } from "./popover-menu";
 import { Typography } from "./typography";
 function getText(value) {
     if (typeof value === "string" || typeof value === "number") {
@@ -72,7 +72,9 @@ function FilterPopover({ align = "start", ariaLabel, contentClassName, defaultOp
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
     };
     const resolvedTitle = (_c = title !== null && title !== void 0 ? title : directGroup === null || directGroup === void 0 ? void 0 : directGroup.label) !== null && _c !== void 0 ? _c : (!activeGroup ? triggerLabel : undefined);
-    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: handleOpenChange, open: open, side: side, surface: "menu", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, title: resolvedTitle, "aria-label": (_e = (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : getText(resolvedTitle)) !== null && _d !== void 0 ? _d : getText(triggerLabel)) !== null && _e !== void 0 ? _e : "Filters", children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [!directGroup ? (_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: cn("w-full justify-start", popoverMenuItemFocusClassName), onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) })) : null, activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_f = activeGroup.searchPlaceholder) !== null && _f !== void 0 ? _f : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_g = activeGroup.searchPlaceholder) !== null && _g !== void 0 ? _g : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuItem, { active: option.selected, "aria-label": option.ariaLabel, "aria-pressed": option.selected, disabled: option.disabled, onClick: option.onSelect, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_h = activeGroup.emptyLabel) !== null && _h !== void 0 ? _h : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [!resolvedTitle ? (_jsx(PopoverMenuGroupLabel, { children: groupListLabel })) : null, _jsx(PopoverMenuSection, { children: groups.map((group) => {
+    return (_jsxs(Popover, { align: align, contentClassName: cn("w-[360px]", contentClassName), defaultOpen: defaultOpen, modal: modal, onOpenChange: handleOpenChange, open: open, side: side, surface: "menu", tabBehavior: "close-at-boundary", trigger: trigger !== null && trigger !== void 0 ? trigger : defaultTrigger, title: resolvedTitle, "aria-label": (_e = (_d = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : getText(resolvedTitle)) !== null && _d !== void 0 ? _d : getText(triggerLabel)) !== null && _e !== void 0 ? _e : "Filters", children: [_jsx(PopoverMenuView, { className: cn("-mx-1 -mt-1 px-1 pt-1", viewClassName), direction: transitionDirection, viewKey: activeGroup ? `group-${activeGroup.id}` : "filter-groups", children: activeGroup ? (_jsxs(_Fragment, { children: [!directGroup ? (_jsx("div", { className: "-mx-1 -mt-1 border-b p-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: cn("w-full justify-start", popoverMenuItemFocusClassName), onClick: showFilterGroups, children: [_jsx(ChevronLeft, { className: "h-4 w-4" }), activeGroup.label] }) })) : null, activeGroup.searchable ? (_jsx(PopoverMenuSearch, { value: query, onChange: (event) => setQuery(event.target.value), placeholder: (_f = activeGroup.searchPlaceholder) !== null && _f !== void 0 ? _f : `Search ${getGroupLabel(activeGroup).toLowerCase()}...`, "aria-label": (_g = activeGroup.searchPlaceholder) !== null && _g !== void 0 ? _g : `Search ${getGroupLabel(activeGroup).toLowerCase()}` })) : null, _jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsx(PopoverMenuSection, { children: filteredOptions.length ? (filteredOptions.map((option) => (_jsx(PopoverMenuCheckboxItem, { "aria-label": option.ariaLabel, checked: Boolean(option.selected), disabled: option.disabled, onChange: option.onSelect
+                                        ? () => { var _a; return (_a = option.onSelect) === null || _a === void 0 ? void 0 : _a.call(option); }
+                                        : undefined, children: option.label }, option.id)))) : (_jsx(Typography, { as: "p", variant: "caption", className: "px-2 py-2", children: (_h = activeGroup.emptyLabel) !== null && _h !== void 0 ? _h : emptyLabel })) }) })] })) : (_jsx(PopoverMenuScrollArea, { maxHeight: maxHeight, children: _jsxs(PopoverMenuGroup, { children: [!resolvedTitle ? (_jsx(PopoverMenuGroupLabel, { children: groupListLabel })) : null, _jsx(PopoverMenuSection, { children: groups.map((group) => {
                                     var _a;
                                     const groupSelectedCount = getGroupSelectedCount(group);
                                     const selectionLabel = (_a = group.selectionLabel) !== null && _a !== void 0 ? _a : getFilterSelectionLabel(groupSelectedCount);

package/dist/multi-select.js

@@ -6,9 +6,11 @@ import { XIcon } from "./animated-icons/x";
 import { Badge } from "./badge";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { Checkbox } from "./checkbox";
-import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuSearch } from "./popover-menu";
 import { Typography } from "./typography";
+import { SearchHighlight } from "./use-search-highlight";
 function MultiSelect({ label, options, value, onValueChange, placeholder = "Select options", description, error, invalid = false, disabled = false, hideLabel = false, searchable = false, searchPlaceholder = "Search...", maxVisibleTags = 2, className, triggerClassName, labelClassName, descriptionClassName, errorClassName, id, }) {
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `multi-select-${generatedId}`;
@@ -20,7 +22,6 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
     const isInvalid = invalid || Boolean(error);
     const [open, setOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState("");
-    const containerRef = React.useRef(null);
     const triggerRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const listboxRef = React.useRef(null);
@@ -67,6 +68,14 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
     const removeOption = React.useCallback((optionValue) => {
         onValueChange(value.filter((v) => v !== optionValue));
     }, [value, onValueChange]);
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (disabled)
+            return;
+        if (nextOpen) {
+            openFocusTargetRef.current = searchable ? "search" : "first";
+        }
+        setOpen(nextOpen);
+    }, [disabled, searchable]);
     React.useEffect(() => {
         if (!open) {
             setSearchQuery("");
@@ -82,18 +91,6 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
         });
         return () => window.cancelAnimationFrame(frame);
     }, [focusBoundaryOption, open, searchable]);
-    React.useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setOpen(false);
-            }
-        };
-        if (open) {
-            document.addEventListener("mousedown", handleClickOutside);
-            return () => document.removeEventListener("mousedown", handleClickOutside);
-        }
-    }, [open]);
     const handleTriggerKeyDown = React.useCallback((event) => {
         if (disabled)
             return;
@@ -165,25 +162,16 @@ function MultiSelect({ label, options, value, onValueChange, placeholder = "Sele
                     var _a;
                     event.preventDefault();
                     (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: label }), _jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onClick: () => {
-                            if (!disabled) {
-                                if (open) {
-                                    setOpen(false);
-                                }
-                                else {
-                                    openWithFocus(searchable ? "search" : "first");
-                                }
-                            }
-                        }, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("relative flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 pr-8 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: [selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    removeOption(opt.value);
-                                                }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
-                                            .slice(maxVisibleTags)
-                                            .map((o) => o.label)
-                                            .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })), _jsx(ChevronDownIcon, { "aria-hidden": "true", size: 16, className: cn("pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground transition-transform duration-150", open && "rotate-180") })] }), open ? (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-overlay border bg-popover shadow-md", children: [searchable ? (_jsx("div", { className: "border-b p-1", children: _jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: searchPlaceholder, className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", onKeyDown: handleSearchKeyDown }) })) : null, _jsx("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto p-1", onKeyDown: handleListboxKeyDown, children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
-                                    const isSelected = value.includes(option.value);
-                                    return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, tabIndex: -1, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected &&
-                                            "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus:bg-primary/20 focus:text-primary"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: option.label }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: option.description })) : null] })] }, option.value));
-                                })) : (_jsx("div", { className: "px-2.5 py-1.5 text-center text-sm text-muted-foreground", children: "No options found." })) })] })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                }, children: label }), _jsxs(Popover, { open: disabled ? false : open, onOpenChange: handleOpenChange, align: "start", sideOffset: 4, collisionPadding: 16, surface: "menu", tabBehavior: "close", contentClassName: "flex max-h-[var(--radix-popover-content-available-height)] w-[var(--radix-popover-trigger-width)] min-w-[var(--radix-popover-trigger-width)] flex-col overflow-hidden", onOpenAutoFocus: (event) => event.preventDefault(), trigger: _jsxs("div", { ref: triggerRef, role: "combobox", id: selectId, tabIndex: disabled ? -1 : 0, onKeyDown: handleTriggerKeyDown, "aria-expanded": open, "aria-controls": listboxId, "aria-haspopup": "listbox", "aria-invalid": isInvalid ? "true" : undefined, "aria-disabled": disabled ? "true" : undefined, "aria-labelledby": labelId, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, className: cn("relative flex h-control w-full cursor-pointer items-center gap-1.5 overflow-hidden rounded-control border border-input bg-background px-2.5 py-1.5 pr-8 text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", isInvalid ? "border-destructive" : "border-input", disabled && "cursor-not-allowed opacity-50", triggerClassName), children: [selectedLabels.length > 0 ? (_jsxs(_Fragment, { children: [selectedLabels.slice(0, maxVisibleTags).map((opt) => (_jsxs(Badge, { variant: "secondary", className: "max-w-[10rem] shrink-0 justify-start gap-1 overflow-visible text-sm font-medium", children: [_jsx("span", { className: "min-w-0 truncate", children: opt.label }), _jsx("button", { type: "button", className: "inline-flex cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: (event) => {
+                                                event.stopPropagation();
+                                                removeOption(opt.value);
+                                            }, "aria-label": `Remove ${opt.label}`, children: _jsx(XIcon, { size: 12 }) })] }, opt.value))), selectedLabels.length > maxVisibleTags ? (_jsxs(Badge, { variant: "secondary", className: "shrink-0 text-sm font-medium", title: selectedLabels
+                                        .slice(maxVisibleTags)
+                                        .map((option) => option.label)
+                                        .join(", "), children: ["+", selectedLabels.length - maxVisibleTags] })) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: placeholder })), _jsx(ChevronDownIcon, { "aria-hidden": "true", size: 16, className: cn("pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground transition-transform duration-150", open && "rotate-180") })] }), children: [searchable ? (_jsx(PopoverMenuSearch, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), onKeyDown: handleSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none" })) : null, _jsx("div", { ref: listboxRef, id: listboxId, role: "listbox", "aria-label": typeof label === "string" ? label : "Options", "aria-multiselectable": "true", className: "max-h-64 overflow-y-auto", onKeyDown: handleListboxKeyDown, children: filteredOptions.length > 0 ? (filteredOptions.map((option) => {
+                            const isSelected = value.includes(option.value);
+                            return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, disabled: option.disabled, tabIndex: -1, onClick: () => toggleOption(option.value), className: cn("flex min-h-8 w-full cursor-pointer items-center gap-1.5 rounded-sm px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50", isSelected &&
+                                    "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus:bg-primary/20 focus:text-primary"), children: [_jsx(Checkbox, { checked: isSelected, disabled: option.disabled, tabIndex: -1, readOnly: true, "aria-hidden": "true", className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SearchHighlight, { text: option.label, query: searchQuery }), option.description ? (_jsx(Typography, { as: "span", variant: "caption", children: _jsx(SearchHighlight, { text: option.description, query: searchQuery }) })) : null] })] }, option.value));
+                        })) : (_jsx("div", { className: "px-2.5 py-1.5 text-center text-sm text-muted-foreground", children: "No options found." })) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { MultiSelect };

package/dist/popover-focus.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+type PopoverTabBehavior = "contain" | "close" | "close-at-boundary";
+interface UsePopoverTabExitOptions<TTrigger extends HTMLElement, TContent extends HTMLElement> {
+    behavior: PopoverTabBehavior;
+    triggerRef: React.RefObject<TTrigger>;
+    contentRef: React.RefObject<TContent>;
+    onExit: () => void;
+}
+declare function usePopoverTabExit<TTrigger extends HTMLElement, TContent extends HTMLElement>({ behavior, triggerRef, contentRef, onExit, }: UsePopoverTabExitOptions<TTrigger, TContent>): {
+    handleCloseAutoFocus: (event: Event) => void;
+    handleTabKeyDown: (event: React.KeyboardEvent<HTMLElement>) => boolean;
+};
+export { usePopoverTabExit };
+export type { PopoverTabBehavior };

package/dist/popover-focus.js

@@ -0,0 +1,64 @@
+"use client";
+import * as React from "react";
+const tabbableSelector = 'a[href], button:not(:disabled), input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])';
+function usePopoverTabExit({ behavior, triggerRef, contentRef, onExit, }) {
+    const tabExitPendingRef = React.useRef(false);
+    const focusFrameRef = React.useRef(null);
+    React.useEffect(() => () => {
+        if (focusFrameRef.current !== null) {
+            window.cancelAnimationFrame(focusFrameRef.current);
+        }
+    }, []);
+    const handleTabKeyDown = React.useCallback((event) => {
+        if (behavior === "contain" ||
+            event.defaultPrevented ||
+            event.key !== "Tab") {
+            return false;
+        }
+        const trigger = triggerRef.current;
+        const content = contentRef.current;
+        if (!trigger) {
+            return false;
+        }
+        if (behavior === "close-at-boundary" && content) {
+            const contentControls = Array.from(content.querySelectorAll(tabbableSelector)).filter((candidate) => !candidate.closest('[hidden], [aria-hidden="true"], [inert]'));
+            const boundaryControl = event.shiftKey
+                ? contentControls[0]
+                : contentControls[contentControls.length - 1];
+            if (document.activeElement !== boundaryControl) {
+                return false;
+            }
+        }
+        const candidates = Array.from(document.querySelectorAll(tabbableSelector)).filter((candidate) => {
+            const hiddenAncestor = candidate.closest('[hidden], [aria-hidden="true"], [inert]');
+            const isHidden = hiddenAncestor &&
+                !hiddenAncestor.hasAttribute("data-aria-hidden");
+            return (!candidate.hasAttribute("data-radix-focus-guard") &&
+                !isHidden &&
+                (candidate === trigger ||
+                    (!trigger.contains(candidate) && !(content === null || content === void 0 ? void 0 : content.contains(candidate)))));
+        });
+        const triggerIndex = candidates.indexOf(trigger);
+        const target = triggerIndex >= 0
+            ? candidates[triggerIndex + (event.shiftKey ? -1 : 1)]
+            : undefined;
+        event.preventDefault();
+        event.stopPropagation();
+        tabExitPendingRef.current = true;
+        onExit();
+        focusFrameRef.current = window.requestAnimationFrame(() => {
+            (target !== null && target !== void 0 ? target : trigger).focus({ preventScroll: true });
+            focusFrameRef.current = null;
+        });
+        return true;
+    }, [behavior, contentRef, onExit, triggerRef]);
+    const handleCloseAutoFocus = React.useCallback((event) => {
+        if (!tabExitPendingRef.current) {
+            return;
+        }
+        event.preventDefault();
+        tabExitPendingRef.current = false;
+    }, []);
+    return { handleCloseAutoFocus, handleTabKeyDown };
+}
+export { usePopoverTabExit };

package/dist/popover-menu.js

@@ -27,7 +27,7 @@ function PopoverMenuItem({ className, children, active, type = "button", ...prop
 function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
     return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", popoverMenuItemFocusWithinClassName, checked &&
             "bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary focus-within:bg-primary/20 focus-within:text-primary", disabled &&
-            "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, checked: checked, disabled: disabled, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : !onChange, onChange: onChange, className: "mt-0.5" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: description })) : null] })] }));
+            "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, "data-slot": "popover-menu-item", checked: checked, disabled: disabled, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : !onChange, onChange: onChange, className: "mt-0.5" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: description })) : null] })] }));
 }
 function PopoverMenuDivider({ className, ...props }) {
     return _jsx("div", { className: cn("-mx-1 my-1 h-px bg-border", className), ...props });
@@ -49,7 +49,7 @@ function PopoverMenuGroupLabel({ className, children, ...props }) {
 }
 const PopoverMenuSearch = React.forwardRef(({ "aria-label": ariaLabel, className, containerClassName, label, placeholder, ...props }, ref) => {
     var _a, _b;
-    return (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-2 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(Input, { ref: ref, "data-popover-menu-search": "true", label: (_b = (_a = label !== null && label !== void 0 ? label : ariaLabel) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : "Search", hideLabel: true, className: "gap-0", inputClassName: className, "aria-label": ariaLabel, placeholder: placeholder, ...props }) }));
+    return (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-1 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(Input, { ref: ref, "data-popover-menu-search": "true", label: (_b = (_a = label !== null && label !== void 0 ? label : ariaLabel) !== null && _a !== void 0 ? _a : placeholder) !== null && _b !== void 0 ? _b : "Search", hideLabel: true, className: "gap-0", inputClassName: className, "aria-label": ariaLabel, placeholder: placeholder, ...props }) }));
 });
 PopoverMenuSearch.displayName = "PopoverMenuSearch";
 function PopoverMenuScrollArea({ className, children, maxHeight = "max-h-64", ...props }) {
@@ -62,6 +62,8 @@ function PopoverMenuView({ children, className, direction = "forward", viewKey =
         key: viewKey,
         children,
     });
+    const activeViewElementRef = React.useRef(null);
+    const previousViewKeyRef = React.useRef(viewKey);
     const exitTimeoutRef = React.useRef(null);
     if (Object.is(viewKey, activeViewKey)) {
         activeViewRef.current = { key: viewKey, children };
@@ -99,12 +101,32 @@ function PopoverMenuView({ children, className, direction = "forward", viewKey =
             }
         };
     }, [direction, viewKey]);
+    useIsomorphicLayoutEffect(() => {
+        var _a;
+        if (Object.is(previousViewKeyRef.current, viewKey)) {
+            return;
+        }
+        previousViewKeyRef.current = viewKey;
+        const firstControl = (_a = activeViewElementRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('button:not(:disabled), input:not(:disabled):not([type="hidden"]), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])');
+        firstControl === null || firstControl === void 0 ? void 0 : firstControl.focus({ preventScroll: true });
+    }, [viewKey]);
     const activeDirection = exitingView === null || exitingView === void 0 ? void 0 : exitingView.direction;
     const shouldAnimateActive = Boolean(activeDirection);
-    return (_jsxs("div", { className: cn("grid min-w-0 overflow-hidden", className), ...props, children: [exitingView ? (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none col-start-1 row-start-1 min-w-0", exitingView.direction !== "none" &&
+    const setExitingViewElement = React.useCallback((element) => {
+        if (!element) {
+            return;
+        }
+        element.inert = true;
+        element
+            .querySelectorAll('a[href], button, input, select, textarea, [contenteditable="true"], [tabindex]')
+            .forEach((control) => {
+            control.tabIndex = -1;
+        });
+    }, []);
+    return (_jsxs("div", { className: cn("grid min-w-0 overflow-hidden", className), ...props, children: [exitingView ? (_jsx("div", { ref: setExitingViewElement, "aria-hidden": "true", inert: "", "data-popover-menu-view": "exiting", className: cn("pointer-events-none col-start-1 row-start-1 min-w-0", exitingView.direction !== "none" &&
                     "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:duration-300 motion-reduce:animate-none", exitingView.direction === "forward" &&
                     "motion-safe:slide-out-to-left-full", exitingView.direction === "backward" &&
-                    "motion-safe:slide-out-to-right-full"), children: exitingView.children }, `leaving-${exitingView.key}`)) : null, _jsx("div", { className: cn("col-start-1 row-start-1 min-w-0", shouldAnimateActive &&
+                    "motion-safe:slide-out-to-right-full"), children: exitingView.children }, `leaving-${exitingView.key}`)) : null, _jsx("div", { ref: activeViewElementRef, "data-popover-menu-view": "active", className: cn("col-start-1 row-start-1 min-w-0", shouldAnimateActive &&
                     "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300 motion-reduce:animate-none", activeDirection === "forward" &&
                     "motion-safe:slide-in-from-right-full", activeDirection === "backward" &&
                     "motion-safe:slide-in-from-left-full"), children: children }, viewKey)] }));

package/dist/popover.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { type PopoverTabBehavior } from "./popover-focus";
 import { type TooltipProps } from "./tooltip";
 import { Typography } from "./typography";
 type PopoverRootProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>;
@@ -10,13 +11,15 @@ export interface PopoverProps extends Pick<PopoverRootProps, "defaultOpen" | "mo
     /** Visible popover heading. Also labels the popover for assistive technology. */
     title?: React.ReactNode;
     surface?: "panel" | "menu";
+    /** Controls whether Tab stays within the popover or closes it and continues in the page Tab order. */
+    tabBehavior?: PopoverTabBehavior;
     contentClassName?: string;
     triggerTooltip?: React.ReactNode;
     triggerTooltipSide?: TooltipProps["side"];
     triggerTooltipSideOffset?: TooltipProps["sideOffset"];
     triggerTooltipClassName?: TooltipProps["contentClassName"];
 }
-declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface, tabBehavior, contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align, sideOffset, ...contentProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverTitleProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
 }
 declare function PopoverTitle({ className, children, ...props }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;

package/dist/popover.js

@@ -3,13 +3,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
 import { PopoverContent, PopoverRoot, PopoverTrigger, } from "./popover-primitive";
+import { usePopoverTabExit, } from "./popover-focus";
 import { Tooltip } from "./tooltip";
 import { Typography } from "./typography";
-function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface = "panel", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
+function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, title, surface = "panel", tabBehavior = "contain", contentClassName, triggerTooltip, triggerTooltipSide, triggerTooltipSideOffset, triggerTooltipClassName, align = "center", sideOffset = 4, ...contentProps }) {
     const generatedTitleId = React.useId();
     const titleId = title ? `popover-title-${generatedTitleId}` : undefined;
-    const triggerElement = _jsx(PopoverTrigger, { asChild: true, children: trigger });
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen !== null && defaultOpen !== void 0 ? defaultOpen : false);
+    const isControlled = open !== undefined;
+    const currentOpen = isControlled ? open : internalOpen;
+    const triggerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    const setOpen = React.useCallback((nextOpen) => {
+        if (!isControlled) {
+            setInternalOpen(nextOpen);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [isControlled, onOpenChange]);
+    const { handleCloseAutoFocus, handleTabKeyDown } = usePopoverTabExit({
+        behavior: tabBehavior,
+        triggerRef,
+        contentRef,
+        onExit: () => setOpen(false),
+    });
+    const triggerElement = (_jsx(PopoverTrigger, { ref: triggerRef, asChild: true, children: trigger }));
     const contentOnKeyDown = contentProps.onKeyDown;
+    const contentOnKeyDownCapture = contentProps.onKeyDownCapture;
+    const contentOnCloseAutoFocus = contentProps.onCloseAutoFocus;
     const handleContentKeyDown = React.useCallback((event) => {
         contentOnKeyDown === null || contentOnKeyDown === void 0 ? void 0 : contentOnKeyDown(event);
         if (event.defaultPrevented ||
@@ -51,7 +71,15 @@ function Popover({ defaultOpen, modal, onOpenChange, open, trigger, children, ti
         event.preventDefault();
         focusTarget.focus({ preventScroll: true });
     }, [contentOnKeyDown]);
-    return (_jsxs(PopoverRoot, { defaultOpen: defaultOpen, modal: modal, onOpenChange: onOpenChange, open: open, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, onKeyDown: handleContentKeyDown, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
+    const handleContentKeyDownCapture = React.useCallback((event) => {
+        contentOnKeyDownCapture === null || contentOnKeyDownCapture === void 0 ? void 0 : contentOnKeyDownCapture(event);
+        handleTabKeyDown(event);
+    }, [contentOnKeyDownCapture, handleTabKeyDown]);
+    const handleContentCloseAutoFocus = React.useCallback((event) => {
+        contentOnCloseAutoFocus === null || contentOnCloseAutoFocus === void 0 ? void 0 : contentOnCloseAutoFocus(event);
+        handleCloseAutoFocus(event);
+    }, [contentOnCloseAutoFocus, handleCloseAutoFocus]);
+    return (_jsxs(PopoverRoot, { modal: modal, onOpenChange: setOpen, open: currentOpen, children: [triggerTooltip ? (_jsx(Tooltip, { content: triggerTooltip, side: triggerTooltipSide, sideOffset: triggerTooltipSideOffset, contentClassName: triggerTooltipClassName, children: triggerElement })) : (triggerElement), _jsxs(PopoverContent, { ref: contentRef, align: align, sideOffset: sideOffset, "aria-labelledby": titleId !== null && titleId !== void 0 ? titleId : contentProps["aria-labelledby"], className: cn(surface === "menu" && "overflow-hidden p-1", contentClassName), ...contentProps, onCloseAutoFocus: handleContentCloseAutoFocus, onKeyDown: handleContentKeyDown, onKeyDownCapture: handleContentKeyDownCapture, children: [title ? (_jsx(PopoverTitle, { id: titleId, className: cn(surface === "menu"
                             ? "px-2 py-1.5"
                             : "-mx-4 -mt-4 mb-4 border-b px-4 py-3"), children: title })) : null, children] })] }));
 }

package/dist/select.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Field, FieldDescription, FieldError, FieldLabel } from "./field";
 import { InputControl } from "./input-control";
 import { cn } from "./lib/utils";
+import { usePopoverTabExit } from "./popover-focus";
 import { SearchHighlight } from "./use-search-highlight";
 import { SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectSeparator, SelectTrigger, SelectValue, } from "./select-primitive";
 function groupOptions(options) {
@@ -42,6 +43,7 @@ function renderHighlightedLabel(label, query) {
 function Select({ label, options, placeholder = "Select an option", description, error, invalid = false, hideLabel = false, searchable = false, searchPlaceholder = "Search options...", searchEmptyMessage = "No options found.", searchInputAriaLabel = "Search options", className, triggerClassName, contentClassName, labelClassName, descriptionClassName, errorClassName, id, disabled, open, onOpenChange, ...props }) {
     const generatedId = React.useId();
     const selectId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const triggerRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
@@ -63,6 +65,22 @@ function Select({ label, options, placeholder = "Select an option", description,
         : options;
     const optionGroups = groupOptions(filteredOptions);
     const hasVisibleOptions = filteredOptions.length > 0;
+    const handleOpenChange = React.useCallback((nextOpen) => {
+        if (open === undefined) {
+            setUncontrolledOpen(nextOpen);
+        }
+        if (!nextOpen) {
+            setSearchQuery("");
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+    }, [onOpenChange, open]);
+    const closeForTab = React.useCallback(() => handleOpenChange(false), [handleOpenChange]);
+    const { handleCloseAutoFocus, handleTabKeyDown } = usePopoverTabExit({
+        behavior: "close",
+        triggerRef,
+        contentRef,
+        onExit: closeForTab,
+    });
     const focusSearchInput = React.useCallback(() => {
         const input = searchInputRef.current;
         if (!input || document.activeElement === input) {
@@ -82,6 +100,9 @@ function Select({ label, options, placeholder = "Select an option", description,
         option === null || option === void 0 ? void 0 : option.focus({ preventScroll: true });
     }, [getEnabledOptionElements]);
     const handleContentKeyDownCapture = React.useCallback((event) => {
+        if (handleTabKeyDown(event)) {
+            return;
+        }
         if (event.key !== "ArrowUp") {
             return;
         }
@@ -94,7 +115,12 @@ function Select({ label, options, placeholder = "Select an option", description,
         if (searchable) {
             focusSearchInput();
         }
-    }, [focusSearchInput, getEnabledOptionElements, searchable]);
+    }, [
+        focusSearchInput,
+        getEnabledOptionElements,
+        handleTabKeyDown,
+        searchable,
+    ]);
     React.useEffect(() => {
         if (!isOpen) {
             setSearchQuery("");
@@ -127,16 +153,7 @@ function Select({ label, options, placeholder = "Select an option", description,
         searchable,
         searchQuery,
     ]);
-    const handleOpenChange = React.useCallback((nextOpen) => {
-        if (open === undefined) {
-            setUncontrolledOpen(nextOpen);
-        }
-        if (!nextOpen) {
-            setSearchQuery("");
-        }
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
-    }, [onOpenChange, open]);
-    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SelectRoot, { disabled: disabled, open: open, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { id: selectId, className: triggerClassName, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { ref: contentRef, className: contentClassName, onKeyDownCapture: handleContentKeyDownCapture, header: searchable ? (_jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": searchInputAriaLabel, autoComplete: "off", className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", onKeyDown: (event) => {
+    return (_jsxs(Field, { className: className, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: selectId, className: cn(hideLabel && "sr-only", labelClassName), children: label }), _jsxs(SelectRoot, { disabled: disabled, open: isOpen, onOpenChange: handleOpenChange, ...props, children: [_jsx(SelectTrigger, { ref: triggerRef, id: selectId, className: triggerClassName, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { ref: contentRef, className: contentClassName, onCloseAutoFocus: handleCloseAutoFocus, onKeyDownCapture: handleContentKeyDownCapture, header: searchable ? (_jsx(InputControl, { ref: searchInputRef, value: searchQuery, onChange: (event) => setSearchQuery(event.target.value), placeholder: searchPlaceholder, "aria-label": searchInputAriaLabel, autoComplete: "off", className: "h-control border-0 bg-transparent px-2 py-0 text-sm shadow-none", onKeyDown: (event) => {
                                 if (event.key === "ArrowDown" ||
                                     event.key === "ArrowUp") {
                                     event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",