@crisp-ui-kit/crisp 0.36.0 → 0.38.0

package/dist/esm/components/menu/menu.recipe.js

@@ -3,8 +3,9 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // A dropdown menu — same popover surface used for ⋯ / sort / filter
 // menus (measured from listboxes): radius 12, 4px padding, a layered
 // soft shadow, over 32px items (radius 8, icon + label + optional shortcut /
-// check). The content is rendered inside this relative root so it keeps these
-// nested styles while escaping the trigger's own box.
+// check). The content portals to document.body (#339) so no ancestor's
+// transform/backdrop-filter can capture its position: fixed box; z-index 70
+// keeps it above Dialog/Drawer's 60/61.
 const config = defineRecipe({
     name: "menu",
     base: `
@@ -12,7 +13,7 @@ const config = defineRecipe({
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
     & .crisp-menu-content {
-      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};

package/dist/esm/components/multiselect/multiselect.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { formValueStyle, placeFloating, useFormReset } from "../../core/index.js";
+import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useFormReset, } from "../../core/index.js";
 import { useListboxKeyboard } from "../select/index.js";
 import { multiselectRecipe } from "./multiselect.recipe.js";
 const TONES = [
@@ -33,7 +33,7 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field) and the
     // active option is named by `aria-activedescendant`. `data-highlighted` is a
     // styling hook only -- a screen reader cannot see it.
@@ -46,6 +46,9 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
     const rootRef = React.useRef(null);
+    // The listbox portals to document.body (#339), so it's no longer a
+    // descendant of rootRef -- outside-click detection needs this ref too.
+    const listboxRef = React.useRef(null);
     // `form.reset()` restores native controls; a button + listbox holds its value
     // in React, so it has to listen (#245). Controlled multiselects are left
     // alone.
@@ -119,30 +122,44 @@ id, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…
         // Tab is already moving focus out; `close` would drag it back to the trigger
         dismiss: () => setOpen(false),
     });
+    // Registers the (now-portaled) listbox on the shared floating-layer stack
+    // (#339) so this doesn't get closed out from under itself when nested
+    // inside another floating layer -- see Select's matching comment.
+    React.useEffect(() => {
+        if (!open || !listboxRef.current)
+            return;
+        return registerFloatingLayer(listboxRef.current);
+    }, [open]);
     React.useEffect(() => {
         if (!open)
             return;
         const onDown = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                setOpen(false);
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (listboxRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, listboxRef.current))
+                return;
+            setOpen(false);
         };
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [name &&
-                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ invalid, className }), ...rest, children: [name &&
+                (value.length > 0 ? value : required ? [""] : []).map((v) => (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: v, required: required, tabIndex: -1, "aria-hidden": "true", onChange: () => { } }, v))), _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
-                                    setQuery(e.target.value);
-                                    setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
-                        const sel = selectedSet.has(opt.value);
-                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
-                    }))] }))] }));
+                }, children: [_jsx("span", { className: "crisp-multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "crisp-multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "crisp-multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                                        setQuery(e.target.value);
+                                        setHighlight(0);
+                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-multiselect-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                            const sel = selectedSet.has(opt.value);
+                            return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "crisp-multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "crisp-multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        }))] }) }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

package/dist/esm/components/multiselect/multiselect.recipe.js

@@ -3,8 +3,9 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // A multi-select / tag editor — measured from a cell tag picker: an
 // outlined trigger showing the selected values as coloured chips, opening a
 // popover with a search field over rows of "[coloured chip] … [checkbox]" that
-// toggle on click. The popover keeps these nested styles by rendering inside
-// this relative root.
+// toggle on click. The popover portals to document.body (#339) so no
+// ancestor's transform/backdrop-filter can capture its position: fixed box;
+// z-index 70 keeps it above Dialog/Drawer's 60/61.
 const config = defineRecipe({
     name: "multiselect",
     base: `
@@ -27,7 +28,7 @@ const config = defineRecipe({
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); }
 
     & .crisp-multiselect-listbox {
-      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 300px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
@@ -58,8 +59,19 @@ const config = defineRecipe({
     & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
     & .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // Same ring Select's `invalid` draws — see that recipe's comment.
+        invalid: {
+            true: `
+        & .crisp-multiselect-trigger,
+        & .crisp-multiselect-trigger:hover,
+        & .crisp-multiselect-trigger[data-open],
+        & .crisp-multiselect-trigger:focus-visible { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }
+      `,
+            false: ``,
+        },
+    },
+    defaultVariants: { invalid: false },
     compoundVariants: [],
 });
 export const multiselectRecipe = Object.assign(resolveRecipe(config), {

package/dist/esm/components/popover/popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { placeFloating } from "../../core/index.js";
+import { FloatingPortal, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, } from "../../core/index.js";
 import { popoverRecipe } from "./popover.recipe.js";
 /**
  * A generic anchored popover — the Menu/Select surface holding arbitrary
@@ -19,6 +19,9 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
     const open = openProp ?? internalOpen;
     const rootRef = React.useRef(null);
     const triggerRef = React.useRef(null);
+    // The content portals to document.body (#339), so it's no longer a
+    // descendant of rootRef -- outside-click detection needs this ref too.
+    const contentRef = React.useRef(null);
     const [pos, setPos] = React.useState({});
     const [up, setUp] = React.useState(false);
     const setOpen = React.useCallback((next) => {
@@ -46,12 +49,26 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
         if (open)
             place();
     }, [open]);
+    // Registers the (now-portaled) content on the shared floating-layer stack
+    // (#339) so this doesn't get closed out from under itself when it holds
+    // another floating layer -- see core/floating-stack.ts.
+    React.useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        return registerFloatingLayer(contentRef.current);
+    }, [open]);
     React.useEffect(() => {
         if (!open)
             return;
         const onDown = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                setOpen(false);
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (contentRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, contentRef.current))
+                return;
+            setOpen(false);
         };
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
@@ -69,11 +86,11 @@ export function Popover({ trigger, children, align = "start", open: openProp, de
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx("div", { className: "crisp-popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
-                    if (e.key === "Escape") {
-                        e.preventDefault();
-                        setOpen(false);
-                    }
-                }, children: children }))] }));
+    return (_jsxs("div", { ref: rootRef, className: popoverRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { children: _jsx("div", { ref: contentRef, className: "crisp-popover-content", role: "dialog", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: (e) => {
+                        if (e.key === "Escape") {
+                            e.preventDefault();
+                            setOpen(false);
+                        }
+                    }, children: children }) }))] }));
 }
 Popover.displayName = "Popover";

package/dist/esm/components/popover/popover.recipe.js

@@ -2,12 +2,14 @@ import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
 // A generic anchored popover — the same measured surface as Menu / Select
 // (radius 12, 4px padding, layered soft shadow, inset border), but holding
-// arbitrary content. Rendered inside a display:contents root and lifted out of
-// flow with position:fixed, so its styles survive while it floats.
+// arbitrary content. The content portals to document.body (#339) so no
+// ancestor's transform/backdrop-filter can capture its position: fixed box;
+// z-index 70 keeps it above Dialog/Drawer's 60/61. The display:contents root
+// is what's left in place, so a consumer's own styling of it survives.
 const config = defineRecipe({
     name: "popover",
     base: `display: contents; font-family: ${c.font.sans};
-    & .crisp-popover-content { position: fixed; z-index: 60; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+    & .crisp-popover-content { position: fixed; z-index: 70; box-sizing: border-box; min-width: 200px; max-width: min(360px, 92vw); padding: ${c.space["1"]}; border-radius: ${c.radius.xl}; background: ${c.bgPopover}; color: ${c.fgPrimary}; box-shadow: ${e.floating}; opacity: 1; transform: none; transition: opacity 0.08s ease, transform 0.08s ease; transform-origin: top left; @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
     & .crisp-popover-content[data-align="end"] { transform-origin: top right; }
     & .crisp-popover-content[data-up] { transform-origin: bottom left; }`,
     variants: {},

package/dist/esm/components/select/select.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, Search } from "lucide-react";
 import * as React from "react";
-import { formValueStyle, placeFloating, useFormReset } from "../../core/index.js";
+import { FloatingPortal, formValueStyle, isInsideLaterFloatingLayer, placeFloating, registerFloatingLayer, useFormReset, } from "../../core/index.js";
 import { useListboxKeyboard } from "./listbox-keyboard.js";
 import { selectRecipe } from "./select.recipe.js";
 function optionText(o) {
@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -33,6 +33,10 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
     const [highlight, setHighlight] = React.useState(0);
     const [query, setQuery] = React.useState("");
     const rootRef = React.useRef(null);
+    // The listbox portals to document.body (#339), so it's no longer a
+    // descendant of rootRef -- outside-click detection needs this ref too, or
+    // every click inside the listbox reads as "outside" and closes it.
+    const listboxRef = React.useRef(null);
     // `form.reset()` restores native controls; a button + listbox holds its value
     // in React, so it has to listen (#245). Controlled selects are left alone.
     useFormReset(rootRef, () => {
@@ -110,25 +114,42 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
         if (!searchable)
             onNavKeys(e);
     };
+    // Registers the (now-portaled) listbox on the shared floating-layer stack
+    // (#339) so a Select nested inside another floating layer (a Menu's sort
+    // popover, e.g.) doesn't get closed out from under itself: once both
+    // portal independently to document.body they're DOM siblings, not
+    // ancestor/descendant, so the outer layer's own outside-click check can no
+    // longer see "inside me" by DOM containment alone.
+    React.useEffect(() => {
+        if (!open || !listboxRef.current)
+            return;
+        return registerFloatingLayer(listboxRef.current);
+    }, [open]);
     React.useEffect(() => {
         if (!open)
             return;
         const onDown = (e) => {
-            if (!rootRef.current?.contains(e.target))
-                setOpen(false);
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (listboxRef.current?.contains(target))
+                return;
+            if (isInsideLaterFloatingLayer(target, listboxRef.current))
+                return;
+            setOpen(false);
         };
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, invalid, className }), ...rest, children: [name && (selected || required) && (_jsx("input", { className: "crisp-formvalue", style: formValueStyle, name: name, value: selected ?? "", required: required, tabIndex: -1, "aria-hidden": "true", 
                 // controlled by the listbox above; `readOnly` would bar it from
                 // validation, which is the only reason this input is not hidden
-                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
-                                    setQuery(e.target.value);
-                                    setHighlight(0);
-                                }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
-                        const isSel = opt.value === selected;
-                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
-                    }))] }))] }));
+                onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
+                                        setQuery(e.target.value);
+                                        setHighlight(0);
+                                    }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
+                            const isSel = opt.value === selected;
+                            return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "crisp-select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "crisp-select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        }))] }) }))] }));
 }
 Select.displayName = "Select";

package/dist/esm/components/select/select.recipe.js

@@ -4,8 +4,10 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // (radius 9, value + a 16px chevron) over a listbox — radius 12, 4px padding, a
 // layered soft shadow — of 32px options (radius 8, 6/8 padding) that show a
 // check on the selected one and highlight on hover / keyboard. The listbox is
-// portaled into this root (which is position:relative) so it escapes overflow
-// while keeping these nested styles.
+// portaled to document.body (#339) so no ancestor's transform/backdrop-filter
+// (Dialog's own measured surface sets both) can capture its position: fixed
+// box; z-index 70 keeps it above Dialog/Drawer's z-index 60/61 layers, since
+// it's no longer nested inside whichever one opened it.
 const config = defineRecipe({
     name: "select",
     base: `
@@ -28,7 +30,7 @@ const config = defineRecipe({
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); }
 
     & .crisp-select-listbox {
-      position: fixed; z-index: 60; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
+      position: fixed; z-index: 70; box-sizing: border-box; display: flex; flex-direction: column; gap: ${c.space.px};
       max-height: 280px; overflow-y: auto; padding: ${c.space["1"]};
       border-radius: ${c.radius.xl}; background: ${c.bgPopover};
       box-shadow: ${e.floating};
@@ -68,8 +70,21 @@ const config = defineRecipe({
             full: `width: 100%;`,
             auto: `width: auto;`,
         },
+        // Same ring Input's `invalid` draws, adapted to Select's box-shadow-ring
+        // trigger (a real <button>, so it needs no ::after overlay the way
+        // Input/Textarea do). Outranks hover/open/focus, same reasoning as
+        // Input: a field being corrected stays visibly wrong while it is.
+        invalid: {
+            true: `
+        & .crisp-select-trigger,
+        & .crisp-select-trigger:hover,
+        & .crisp-select-trigger[data-open],
+        & .crisp-select-trigger:focus-visible { box-shadow: inset 0 0 0 1px ${c.bgDanger}; }
+      `,
+            false: ``,
+        },
     },
-    defaultVariants: { variant: "default", width: "full" },
+    defaultVariants: { variant: "default", width: "full", invalid: false },
     compoundVariants: [],
 });
 export const selectRecipe = Object.assign(resolveRecipe(config), { config });

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,13 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
 import * as React from "react";
-import { useFocusAfterRemoval } from "../../core/index.js";
+import { isInsideLaterFloatingLayer, useFocusAfterRemoval } from "../../core/index.js";
+import { MenuCheckboxItem } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
 const OP_LABELS = {
     contains: "contains",
     is: "is",
     isnot: "is not",
+    isanyof: "is any of",
     empty: "is empty",
     notempty: "is not empty",
 };
@@ -18,7 +20,16 @@ const OP_ORDER = [
     "empty",
     "notempty",
 ];
+// "isanyof" is appended only for a column that supplies `values` — there is
+// nothing to check off otherwise.
+const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
 const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const opNeedsValues = (op) => op === "isanyof";
+// "Department is any of IT, Finance" past two values becomes "… +N": the
+// chip is one line, and a field can have far more than two facet values.
+const isAnyOfSummary = (values) => values.length <= 2
+    ? values.join(", ")
+    : `${values.slice(0, 2).join(", ")} +${values.length - 2}`;
 const isEmptyValue = (v) => v == null || v === "" || (Array.isArray(v) && v.length === 0);
 const asText = (v) => {
     if (isEmptyValue(v))
@@ -44,7 +55,8 @@ const asText = (v) => {
  * display string, so a grouped-thousands "$1,200" still matches "1200".
  */
 export function applyFilters(rows, filters, get = (row, key) => row[key]) {
-    const active = filters.filter((f) => !opNeedsValue(f.op) || f.value.trim() !== "");
+    const active = filters.filter((f) => (!opNeedsValue(f.op) || f.value.trim() !== "") &&
+        (!opNeedsValues(f.op) || (f.values?.length ?? 0) > 0));
     if (!active.length)
         return rows;
     return rows.filter((row) => active.every((f) => {
@@ -54,6 +66,8 @@ export function applyFilters(rows, filters, get = (row, key) => row[key]) {
         if (f.op === "notempty")
             return !isEmptyValue(raw);
         const t = asText(raw).toLowerCase();
+        if (f.op === "isanyof")
+            return (f.values ?? []).some((v) => v.toLowerCase() === t);
         const v = f.value.trim().toLowerCase();
         if (f.op === "contains")
             return t.includes(v);
@@ -115,6 +129,8 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
+    // filters the "isanyof" checkbox list, same lifetime as filterQuery above
+    const [anyOfQuery, setAnyOfQuery] = React.useState("");
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -122,8 +138,15 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
             return;
         const onDown = (e) => {
             const t = e.target;
-            if (!t.closest(".crisp-tabletoolbar-menu, [data-menu-trigger]"))
-                setOpenMenu(null);
+            if (t.closest(".crisp-tabletoolbar-menu, [data-menu-trigger]"))
+                return;
+            // #339: a Select opened from inside this popover (the sort row's
+            // direction control) now portals to document.body, so it's no longer
+            // inside .crisp-tabletoolbar-menu by DOM containment -- check the
+            // shared floating-layer stack too.
+            if (isInsideLaterFloatingLayer(t, null))
+                return;
+            setOpenMenu(null);
         };
         const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
         document.addEventListener("mousedown", onDown);
@@ -213,9 +236,30 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                     .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
                     const col = columns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
-                    const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
-                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                    const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
+                        (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
+                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
-                                        autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
+                                        autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
+                                                // biome-ignore lint/a11y/noAutofocus: focus the search field
+                                                autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                                .filter((v) => v
+                                                .toLowerCase()
+                                                .includes(anyOfQuery.trim().toLowerCase()))
+                                                .map((v) => {
+                                                const checked = (cond.values ?? []).includes(v);
+                                                return (_jsx(MenuCheckboxItem, { checked: checked, onCheckedChange: (next) => {
+                                                        const set = new Set(cond.values ?? []);
+                                                        if (next)
+                                                            set.add(v);
+                                                        else
+                                                            set.delete(v);
+                                                        // the column's own order, not click order —
+                                                        // what the chip summary reads out
+                                                        patchFilter(cond.id, {
+                                                            values: col.values?.filter((x) => set.has(x)),
+                                                        });
+                                                    }, children: v }, v));
+                                            })] }))] }))] }, cond.id));
                 }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }

package/dist/esm/core/floating-portal.js

@@ -0,0 +1,25 @@
+import { createPortal } from "react-dom";
+/**
+ * Portals a floating layer (a `position: fixed` listbox/menu/popover
+ * content) to `document.body` — exactly what Tooltip already did with a
+ * bare `createPortal` call, pulled out so `Select`, `MultiSelect`, `Menu`,
+ * `Popover` and `ContextMenu` share the one implementation (#339).
+ *
+ * Needed because a `position: fixed` box resolves against the nearest
+ * ancestor that establishes a containing block for it — not necessarily the
+ * viewport. `transform` (even the identity `scale(1)`), `filter` and
+ * `backdrop-filter` all qualify, and `Dialog`'s own measured surface sets
+ * both a resting `transform: scale(1)` (so its `@starting-style` entrance
+ * has something to animate from) and `backdrop-filter: blur(15px)` (Attio's
+ * frosted-glass modal). A floating layer opened from a trigger inside a
+ * `Dialog` was rendering offset by the dialog's own box instead of anchored
+ * to its trigger.
+ *
+ * Every caller renders this conditionally on its own `open` state, which
+ * starts `false` and is driven only by client interaction — never a prop a
+ * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
+ * touches `document` during SSR, the same safety Tooltip already had.
+ */
+export function FloatingPortal({ children, }) {
+    return createPortal(children, document.body);
+}

package/dist/esm/core/floating-stack.js

@@ -0,0 +1,50 @@
+/**
+ * Tracks every currently-open `FloatingPortal` layer, in open order, so a
+ * layer's outside-click check can tell "outside me" from "inside a layer I
+ * spawned" (#339).
+ *
+ * Portaling `Select`/`MultiSelect`/`Menu`/`Popover`/`ContextMenu` to
+ * `document.body` fixed their own mis-positioning inside a `Dialog`, but it
+ * broke a composition each of them supports: one of these opened INSIDE
+ * another (TableToolbar's sort popover is a `Menu` holding a per-row
+ * `Select`). Before portaling, the inner layer was a DOM descendant of the
+ * outer one, so the outer's `rootRef.contains(target)` check saw a click
+ * inside the inner layer as "inside". Once both portal independently to
+ * `document.body`, they become DOM SIBLINGS — nested in the React tree, not
+ * the DOM tree — so that same check reads the inner layer's own pointerdown
+ * as "outside", and the outer layer closes itself, unmounting the inner one
+ * mid-interaction.
+ *
+ * The fix: each layer registers its content node here on open (removed on
+ * close/unmount), and a layer's outside-click check also accepts a target
+ * inside any layer registered AFTER it — i.e. any layer that could only have
+ * opened from inside it.
+ */
+const stack = [];
+/** Call when a layer opens; call the returned cleanup when it closes. */
+export function registerFloatingLayer(el) {
+    stack.push(el);
+    return () => {
+        const i = stack.indexOf(el);
+        if (i >= 0)
+            stack.splice(i, 1);
+    };
+}
+/**
+ * True when `target` sits inside a layer that was registered strictly after
+ * `self` — a layer that could only have been spawned from inside `self`,
+ * directly or through further nesting.
+ *
+ * Pass `null` for `self` when the caller is a hand-rolled dropdown that
+ * doesn't register itself on this stack (RecordsTable's and TableToolbar's
+ * own popovers, e.g.) — every registered layer then counts, which is the
+ * right query for "was this click inside some floating child I opened".
+ */
+export function isInsideLaterFloatingLayer(target, self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    for (let i = selfIndex + 1; i < stack.length; i++) {
+        if (stack[i]?.contains(target))
+            return true;
+    }
+    return false;
+}

package/dist/esm/core/index.js

@@ -3,6 +3,8 @@ export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
+export { FloatingPortal } from "./floating-portal.js";
+export { isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";