@apipass/design-system 8.1.0 → 8.2.0

package/dist/lib/ui/primitives/Select/MultiSelect.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("../../../vendor/clsx/dist/clsx.cjs"),s=require("react"),h=require("react-aria-components");;/* empty css             */const F=require("../../icons/IconChevronDown.cjs"),N=require("../../hooks/useOverlayPortal.cjs"),u=require("../Fieldset/Fieldset.cjs"),R=require("../ListBox/ListBox.cjs");function v(t){const{id:e}=t.props;return String(e??t.key??"")}function I(t){const{textValue:e,children:r}=t.props;return e!==void 0?e:typeof r=="string"?r:""}function m(t,e){s.Children.forEach(t,r=>{s.isValidElement(r)&&e(r)})}function M(t){const e=new Set;return m(t,r=>e.add(v(r))),e}function O(t,e){const r=new Set([...e].map(String)),o=[];return m(t,c=>{r.has(v(c))&&o.push(I(c))}),o.join(", ")}function B({className:t,label:e,description:r,errorMessage:o,placeholder:c,children:d,selectedKeys:x,onSelectionChange:j,isDisabled:S,isInvalid:y,disallowEmptySelection:q,"aria-label":g}){const C=E.clsx(t,"select-container"),b=N.useOverlayPortalContainer(),l=s.useRef(null),[T,w]=s.useState(),f=s.useCallback(()=>{l.current&&w(`${l.current.offsetWidth}px`)},[]);s.useLayoutEffect(()=>{f();const i=l.current;if(!i||typeof ResizeObserver>"u")return;const p=new ResizeObserver(f);return p.observe(i),()=>p.disconnect()},[f]);const a=O(d,x);return n.jsx("div",{className:C,children:n.jsxs(u.Field,{children:[e&&n.jsx(u.Label,{children:e}),n.jsxs(h.MenuTrigger,{children:[n.jsxs(h.Button,{ref:l,className:"select","aria-label":g,isDisabled:S,"data-invalid":y||void 0,children:[n.jsx("span",{className:"select-value","data-placeholder":a===""||void 0,title:a||void 0,children:a===""?c:a}),n.jsx(F.IconChevronDown,{"aria-hidden":"true"})]}),n.jsx(h.Popover,{className:"select-popover",style:{"--trigger-width":T},UNSTABLE_portalContainer:b,children:n.jsx(R.ListBox,{"aria-label":e??g,autoFocus:!0,selectionMode:"multiple",disallowEmptySelection:q,selectedKeys:x,onSelectionChange:i=>j(i==="all"?M(d):new Set(i)),children:d})})]}),r&&n.jsx(u.Description,{children:r}),n.jsx(u.FieldError,{children:o})]})})}exports.MultiSelectField=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),R=require("../../../vendor/clsx/dist/clsx.cjs"),i=require("react"),m=require("react-aria-components");;/* empty css             */const B=require("../../icons/IconChevronDown.cjs"),E=require("../../hooks/useOverlayPortal.cjs"),j=require("../Fieldset/Fieldset.cjs"),C=require("../ListBox/ListBox.cjs"),D=require("../Input/Input.cjs");function q(n){const{id:e}=n.props;return e??n.key??""}function F(n){const{textValue:e,children:t}=n.props;return e!==void 0?e:typeof t=="string"?t:""}function I(n,e){i.Children.forEach(n,t=>{i.isValidElement(t)&&e(t)})}function L(n){const e=new Set;return I(n,t=>e.add(q(t))),e}function M(n,e,t){return i.Children.toArray(n).filter(s=>i.isValidElement(s)&&t(F(s),e))}function O(n,e,t){const s=new Set(e.map(String)),o=l=>s.has(String(l)),c=[...n].filter(l=>!o(l)),a=t==="all"?e:[...t].filter(o);return new Set([...c,...a])}function k(n,e){const t=new Set([...e].map(String)),s=[];return I(n,o=>{t.has(String(q(o)))&&s.push(F(o))}),s.join(", ")}function A({children:n,selectedKeys:e,onSelectionChange:t,disallowEmptySelection:s,listLabel:o,searchPlaceholder:c,emptyStateText:a}){const{contains:l}=m.useFilter({sensitivity:"base"}),[v,y]=i.useState(""),f=i.useRef(null),u=M(n,v,l),p=u.map(q);function b(h){var d,g;h.key!=="ArrowDown"||u.length===0||(h.preventDefault(),(g=(d=f.current)==null?void 0:d.querySelector('[role="listbox"]'))==null||g.focus())}return r.jsxs("div",{ref:f,className:"select-search-panel",children:[r.jsx(m.TextField,{"aria-label":c,value:v,onChange:y,autoFocus:!0,children:r.jsx(D.Input,{className:"select-search-input",placeholder:c,onKeyDown:b})}),r.jsx(C.ListBox,{"aria-label":o,selectionMode:"multiple",escapeKeyBehavior:"none",disallowEmptySelection:s,selectedKeys:e,onSelectionChange:h=>t(O(e,p,h)),renderEmptyState:()=>r.jsx("span",{className:"select-empty-state",children:a}),children:u})]})}function V({className:n,label:e,description:t,errorMessage:s,placeholder:o,children:c,selectedKeys:a,onSelectionChange:l,isDisabled:v,isInvalid:y,disallowEmptySelection:f,"aria-label":u,...p}){const b=R.clsx(n,"select-container"),h=E.useOverlayPortalContainer(),d=i.useRef(null),[g,N]=i.useState(),T=i.useCallback(()=>{d.current&&N(`${d.current.offsetWidth}px`)},[]);i.useLayoutEffect(()=>{T();const x=d.current;if(!x||typeof ResizeObserver>"u")return;const w=new ResizeObserver(T);return w.observe(x),()=>w.disconnect()},[T]);const S=k(c,a);return r.jsx("div",{className:b,children:r.jsxs(j.Field,{children:[e&&r.jsx(j.Label,{children:e}),r.jsxs(m.MenuTrigger,{children:[r.jsxs(m.Button,{ref:d,className:"select","aria-label":u,isDisabled:v,"data-invalid":y||void 0,children:[r.jsx("span",{className:"select-value","data-placeholder":S===""||void 0,title:S||void 0,children:S===""?o:S}),r.jsx(B.IconChevronDown,{"aria-hidden":"true"})]}),r.jsx(m.Popover,{className:"select-popover",style:{"--trigger-width":g},UNSTABLE_portalContainer:h,children:p.isSearchable?r.jsx(A,{listLabel:e??u,selectedKeys:a,onSelectionChange:l,disallowEmptySelection:f,searchPlaceholder:p.searchPlaceholder,emptyStateText:p.emptyStateText,children:c}):r.jsx(C.ListBox,{"aria-label":e??u,autoFocus:!0,selectionMode:"multiple",escapeKeyBehavior:"none",disallowEmptySelection:f,selectedKeys:a,onSelectionChange:x=>l(x==="all"?L(c):new Set(x)),children:c})})]}),t&&r.jsx(j.Description,{children:t}),r.jsx(j.FieldError,{children:s})]})})}exports.MultiSelectField=V;
 //# sourceMappingURL=MultiSelect.cjs.map

package/dist/lib/ui/primitives/Select/MultiSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.cjs","sources":["../../../../../src/ui/primitives/Select/MultiSelect.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Description,\n  Field,\n  FieldError,\n  Label,\n  ListBox,\n  SharedFieldProps,\n} from \"primitives\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Button as RACButton,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  type Key as RACKey,\n  type Selection as RACSelection,\n} from \"react-aria-components\";\nimport \"./select.css\";\n\nfunction itemKey(item: React.ReactElement): string {\n  const { id } = item.props as { id?: RACKey };\n  return String(id ?? item.key ?? \"\");\n}\n\nfunction itemText(item: React.ReactElement): string {\n  const { textValue, children } = item.props as {\n    textValue?: string;\n    children?: React.ReactNode;\n  };\n  if (textValue !== undefined) return textValue;\n  return typeof children === \"string\" ? children : \"\";\n}\n\nfunction forEachItem(\n  children: React.ReactNode,\n  visit: (item: React.ReactElement) => void,\n) {\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) visit(child);\n  });\n}\n\nfunction allItemKeys(children: React.ReactNode): Set<RACKey> {\n  const keys = new Set<RACKey>();\n  forEachItem(children, (item) => keys.add(itemKey(item)));\n  return keys;\n}\n\nfunction selectedItemsText(\n  children: React.ReactNode,\n  selectedKeys: Iterable<RACKey>,\n): string {\n  const selected = new Set([...selectedKeys].map(String));\n  const texts: string[] = [];\n  forEachItem(children, (item) => {\n    if (selected.has(itemKey(item))) texts.push(itemText(item));\n  });\n  return texts.join(\", \");\n}\n\nexport interface MultiSelectFieldProps extends SharedFieldProps {\n  children: React.ReactNode;\n  selectedKeys: Iterable<RACKey>;\n  onSelectionChange: (keys: Set<RACKey>) => void;\n  className?: string;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  disallowEmptySelection?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport function MultiSelectField({\n  className,\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  children,\n  selectedKeys,\n  onSelectionChange,\n  isDisabled,\n  isInvalid,\n  disallowEmptySelection,\n  \"aria-label\": ariaLabel,\n}: MultiSelectFieldProps) {\n  const classNames = clsx(className, \"select-container\");\n  const portalContainer = useOverlayPortalContainer();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<string>();\n\n  const measureTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      setTriggerWidth(`${triggerRef.current.offsetWidth}px`);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    measureTrigger();\n    const trigger = triggerRef.current;\n    if (!trigger || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measureTrigger);\n    observer.observe(trigger);\n    return () => observer.disconnect();\n  }, [measureTrigger]);\n\n  const chosenText = selectedItemsText(children, selectedKeys);\n\n  return (\n    <div className={classNames}>\n      <Field>\n        {label && <Label>{label}</Label>}\n        <RACMenuTrigger>\n          <RACButton\n            ref={triggerRef}\n            className=\"select\"\n            aria-label={ariaLabel}\n            isDisabled={isDisabled}\n            data-invalid={isInvalid || undefined}\n          >\n            <span\n              className=\"select-value\"\n              data-placeholder={chosenText === \"\" || undefined}\n              title={chosenText || undefined}\n            >\n              {chosenText === \"\" ? placeholder : chosenText}\n            </span>\n            <IconChevronDown aria-hidden=\"true\" />\n          </RACButton>\n          <RACPopover\n            className=\"select-popover\"\n            style={{ \"--trigger-width\": triggerWidth } as React.CSSProperties}\n            UNSTABLE_portalContainer={portalContainer}\n          >\n            <ListBox\n              aria-label={label ?? ariaLabel}\n              autoFocus\n              selectionMode=\"multiple\"\n              disallowEmptySelection={disallowEmptySelection}\n              selectedKeys={selectedKeys}\n              onSelectionChange={(keys: RACSelection) =>\n                onSelectionChange(\n                  keys === \"all\" ? allItemKeys(children) : new Set(keys),\n                )\n              }\n            >\n              {children}\n            </ListBox>\n          </RACPopover>\n        </RACMenuTrigger>\n        {description && <Description>{description}</Description>}\n        <FieldError>{errorMessage}</FieldError>\n      </Field>\n    </div>\n  );\n}\n"],"names":["itemKey","item","id","itemText","textValue","children","forEachItem","visit","React","child","allItemKeys","keys","selectedItemsText","selectedKeys","selected","texts","MultiSelectField","className","label","description","errorMessage","placeholder","onSelectionChange","isDisabled","isInvalid","disallowEmptySelection","ariaLabel","classNames","clsx","portalContainer","useOverlayPortalContainer","triggerRef","useRef","triggerWidth","setTriggerWidth","useState","measureTrigger","useCallback","useLayoutEffect","trigger","observer","chosenText","jsx","Field","Label","RACMenuTrigger","jsxs","RACButton","IconChevronDown","RACPopover","ListBox","Description","FieldError"],"mappings":"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"}
+{"version":3,"file":"MultiSelect.cjs","sources":["../../../../../src/ui/primitives/Select/MultiSelect.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Description,\n  Field,\n  FieldError,\n  Input,\n  Label,\n  ListBox,\n  SharedFieldProps,\n} from \"primitives\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Button as RACButton,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  TextField as RACTextField,\n  useFilter,\n  type Key as RACKey,\n  type Selection as RACSelection,\n} from \"react-aria-components\";\nimport \"./select.css\";\n\nfunction itemKey(item: React.ReactElement): RACKey {\n  const { id } = item.props as { id?: RACKey };\n  return id ?? item.key ?? \"\";\n}\n\nfunction itemText(item: React.ReactElement): string {\n  const { textValue, children } = item.props as {\n    textValue?: string;\n    children?: React.ReactNode;\n  };\n  if (textValue !== undefined) return textValue;\n  return typeof children === \"string\" ? children : \"\";\n}\n\nfunction forEachItem(\n  children: React.ReactNode,\n  visit: (item: React.ReactElement) => void,\n) {\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) visit(child);\n  });\n}\n\nfunction allItemKeys(children: React.ReactNode): Set<RACKey> {\n  const keys = new Set<RACKey>();\n  forEachItem(children, (item) => keys.add(itemKey(item)));\n  return keys;\n}\n\ntype TextMatcher = (text: string, searchText: string) => boolean;\n\nfunction matchingItems(\n  children: React.ReactNode,\n  searchText: string,\n  matches: TextMatcher,\n): React.ReactElement[] {\n  return React.Children.toArray(children).filter(\n    (child): child is React.ReactElement =>\n      React.isValidElement(child) && matches(itemText(child), searchText),\n  );\n}\n\nfunction keepHiddenSelection(\n  previousKeys: Iterable<RACKey>,\n  visibleKeys: RACKey[],\n  visibleSelection: RACSelection,\n): Set<RACKey> {\n  const visible = new Set(visibleKeys.map(String));\n  const isVisible = (key: RACKey) => visible.has(String(key));\n  const hiddenSelected = [...previousKeys].filter((key) => !isVisible(key));\n  const visibleSelected =\n    visibleSelection === \"all\"\n      ? visibleKeys\n      : [...visibleSelection].filter(isVisible);\n  return new Set([...hiddenSelected, ...visibleSelected]);\n}\n\nfunction selectedItemsText(\n  children: React.ReactNode,\n  selectedKeys: Iterable<RACKey>,\n): string {\n  const selected = new Set([...selectedKeys].map(String));\n  const texts: string[] = [];\n  forEachItem(children, (item) => {\n    if (selected.has(String(itemKey(item)))) texts.push(itemText(item));\n  });\n  return texts.join(\", \");\n}\n\ninterface MultiSelectOptionsProps {\n  children: React.ReactNode;\n  selectedKeys: Iterable<RACKey>;\n  onSelectionChange: (keys: Set<RACKey>) => void;\n  disallowEmptySelection?: boolean;\n}\n\ninterface MultiSelectFieldBaseProps\n  extends SharedFieldProps,\n    MultiSelectOptionsProps {\n  className?: string;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport interface MultiSelectSearchProps {\n  isSearchable: true;\n  searchPlaceholder: string;\n  emptyStateText: string;\n}\n\ninterface MultiSelectWithoutSearchProps {\n  isSearchable?: false;\n  searchPlaceholder?: never;\n  emptyStateText?: never;\n}\n\nexport type MultiSelectFieldProps = MultiSelectFieldBaseProps &\n  (MultiSelectSearchProps | MultiSelectWithoutSearchProps);\n\nfunction SearchableOptions({\n  children,\n  selectedKeys,\n  onSelectionChange,\n  disallowEmptySelection,\n  listLabel,\n  searchPlaceholder,\n  emptyStateText,\n}: MultiSelectOptionsProps &\n  Omit<MultiSelectSearchProps, \"isSearchable\"> & { listLabel?: string }) {\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const [searchText, setSearchText] = useState(\"\");\n  const panelRef = useRef<HTMLDivElement>(null);\n  const visibleItems = matchingItems(children, searchText, contains);\n  const visibleKeys = visibleItems.map(itemKey);\n\n  function moveFocusToList(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key !== \"ArrowDown\" || visibleItems.length === 0) return;\n    event.preventDefault();\n    panelRef.current?.querySelector<HTMLElement>('[role=\"listbox\"]')?.focus();\n  }\n\n  return (\n    <div ref={panelRef} className=\"select-search-panel\">\n      <RACTextField\n        aria-label={searchPlaceholder}\n        value={searchText}\n        onChange={setSearchText}\n        autoFocus\n      >\n        <Input\n          className=\"select-search-input\"\n          placeholder={searchPlaceholder}\n          onKeyDown={moveFocusToList}\n        />\n      </RACTextField>\n      <ListBox\n        aria-label={listLabel}\n        selectionMode=\"multiple\"\n        escapeKeyBehavior=\"none\"\n        disallowEmptySelection={disallowEmptySelection}\n        selectedKeys={selectedKeys}\n        onSelectionChange={(keys: RACSelection) =>\n          onSelectionChange(keepHiddenSelection(selectedKeys, visibleKeys, keys))\n        }\n        renderEmptyState={() => (\n          <span className=\"select-empty-state\">{emptyStateText}</span>\n        )}\n      >\n        {visibleItems}\n      </ListBox>\n    </div>\n  );\n}\n\nexport function MultiSelectField({\n  className,\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  children,\n  selectedKeys,\n  onSelectionChange,\n  isDisabled,\n  isInvalid,\n  disallowEmptySelection,\n  \"aria-label\": ariaLabel,\n  ...searchProps\n}: MultiSelectFieldProps) {\n  const classNames = clsx(className, \"select-container\");\n  const portalContainer = useOverlayPortalContainer();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<string>();\n\n  const measureTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      setTriggerWidth(`${triggerRef.current.offsetWidth}px`);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    measureTrigger();\n    const trigger = triggerRef.current;\n    if (!trigger || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measureTrigger);\n    observer.observe(trigger);\n    return () => observer.disconnect();\n  }, [measureTrigger]);\n\n  const chosenText = selectedItemsText(children, selectedKeys);\n\n  return (\n    <div className={classNames}>\n      <Field>\n        {label && <Label>{label}</Label>}\n        <RACMenuTrigger>\n          <RACButton\n            ref={triggerRef}\n            className=\"select\"\n            aria-label={ariaLabel}\n            isDisabled={isDisabled}\n            data-invalid={isInvalid || undefined}\n          >\n            <span\n              className=\"select-value\"\n              data-placeholder={chosenText === \"\" || undefined}\n              title={chosenText || undefined}\n            >\n              {chosenText === \"\" ? placeholder : chosenText}\n            </span>\n            <IconChevronDown aria-hidden=\"true\" />\n          </RACButton>\n          <RACPopover\n            className=\"select-popover\"\n            style={{ \"--trigger-width\": triggerWidth } as React.CSSProperties}\n            UNSTABLE_portalContainer={portalContainer}\n          >\n            {searchProps.isSearchable ? (\n              <SearchableOptions\n                listLabel={label ?? ariaLabel}\n                selectedKeys={selectedKeys}\n                onSelectionChange={onSelectionChange}\n                disallowEmptySelection={disallowEmptySelection}\n                searchPlaceholder={searchProps.searchPlaceholder}\n                emptyStateText={searchProps.emptyStateText}\n              >\n                {children}\n              </SearchableOptions>\n            ) : (\n              <ListBox\n                aria-label={label ?? ariaLabel}\n                autoFocus\n                selectionMode=\"multiple\"\n                escapeKeyBehavior=\"none\"\n                disallowEmptySelection={disallowEmptySelection}\n                selectedKeys={selectedKeys}\n                onSelectionChange={(keys: RACSelection) =>\n                  onSelectionChange(\n                    keys === \"all\" ? allItemKeys(children) : new Set(keys),\n                  )\n                }\n              >\n                {children}\n              </ListBox>\n            )}\n          </RACPopover>\n        </RACMenuTrigger>\n        {description && <Description>{description}</Description>}\n        <FieldError>{errorMessage}</FieldError>\n      </Field>\n    </div>\n  );\n}\n"],"names":["itemKey","item","id","itemText","textValue","children","forEachItem","visit","React","child","allItemKeys","keys","matchingItems","searchText","matches","keepHiddenSelection","previousKeys","visibleKeys","visibleSelection","visible","isVisible","key","hiddenSelected","visibleSelected","selectedItemsText","selectedKeys","selected","texts","SearchableOptions","onSelectionChange","disallowEmptySelection","listLabel","searchPlaceholder","emptyStateText","contains","useFilter","setSearchText","useState","panelRef","useRef","visibleItems","moveFocusToList","event","_b","_a","jsxs","jsx","RACTextField","Input","ListBox","MultiSelectField","className","label","description","errorMessage","placeholder","isDisabled","isInvalid","ariaLabel","searchProps","classNames","clsx","portalContainer","useOverlayPortalContainer","triggerRef","triggerWidth","setTriggerWidth","measureTrigger","useCallback","useLayoutEffect","trigger","observer","chosenText","Field","Label","RACMenuTrigger","RACButton","IconChevronDown","RACPopover","Description","FieldError"],"mappings":"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"}

package/dist/lib/ui/primitives/Select/MultiSelect.js

@@ -1,113 +1,183 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { clsx as N } from "../../../vendor/clsx/dist/clsx.js";
-import h, { useRef as R, useState as F, useCallback as I, useLayoutEffect as j } from "react";
-import { MenuTrigger as B, Button as L, Popover as M } from "react-aria-components";
+import { jsx as n, jsxs as S } from "react/jsx-runtime";
+import { clsx as D } from "../../../vendor/clsx/dist/clsx.js";
+import x, { useRef as N, useState as F, useCallback as k, useLayoutEffect as L } from "react";
+import { MenuTrigger as M, Button as O, Popover as V, useFilter as j, TextField as A } from "react-aria-components";
 /* empty css           */
-import { IconChevronDown as O } from "../../icons/IconChevronDown.js";
-import { useOverlayPortalContainer as W } from "../../hooks/useOverlayPortal.js";
-import { Field as k, Label as z, Description as D, FieldError as P } from "../Fieldset/Fieldset.js";
-import { ListBox as V } from "../ListBox/ListBox.js";
-function g(t) {
-  const { id: e } = t.props;
-  return String(e ?? t.key ?? "");
+import { IconChevronDown as W } from "../../icons/IconChevronDown.js";
+import { useOverlayPortalContainer as z } from "../../hooks/useOverlayPortal.js";
+import { Field as K, Label as q, Description as H, FieldError as P } from "../Fieldset/Fieldset.js";
+import { ListBox as E } from "../ListBox/ListBox.js";
+import { Input as U } from "../Input/Input.js";
+function w(r) {
+  const { id: e } = r.props;
+  return e ?? r.key ?? "";
 }
-function A(t) {
-  const { textValue: e, children: r } = t.props;
-  return e !== void 0 ? e : typeof r == "string" ? r : "";
+function I(r) {
+  const { textValue: e, children: t } = r.props;
+  return e !== void 0 ? e : typeof t == "string" ? t : "";
 }
-function v(t, e) {
-  h.Children.forEach(t, (r) => {
-    h.isValidElement(r) && e(r);
+function R(r, e) {
+  x.Children.forEach(r, (t) => {
+    x.isValidElement(t) && e(t);
   });
 }
-function K(t) {
+function _(r) {
   const e = /* @__PURE__ */ new Set();
-  return v(t, (r) => e.add(g(r))), e;
+  return R(r, (t) => e.add(w(t))), e;
 }
-function U(t, e) {
-  const r = new Set([...e].map(String)), i = [];
-  return v(t, (s) => {
-    r.has(g(s)) && i.push(A(s));
+function $(r, e, t) {
+  return x.Children.toArray(r).filter(
+    (i) => x.isValidElement(i) && t(I(i), e)
+  );
+}
+function G(r, e, t) {
+  const i = new Set(e.map(String)), o = (c) => i.has(String(c)), s = [...r].filter((c) => !o(c)), a = t === "all" ? e : [...t].filter(o);
+  return /* @__PURE__ */ new Set([...s, ...a]);
+}
+function J(r, e) {
+  const t = new Set([...e].map(String)), i = [];
+  return R(r, (o) => {
+    t.has(String(w(o))) && i.push(I(o));
   }), i.join(", ");
 }
-function Z({
-  className: t,
+function Q({
+  children: r,
+  selectedKeys: e,
+  onSelectionChange: t,
+  disallowEmptySelection: i,
+  listLabel: o,
+  searchPlaceholder: s,
+  emptyStateText: a
+}) {
+  const { contains: c } = j({ sensitivity: "base" }), [h, y] = F(""), m = N(null), l = $(r, h, c), f = l.map(w);
+  function b(d) {
+    var u, g;
+    d.key !== "ArrowDown" || l.length === 0 || (d.preventDefault(), (g = (u = m.current) == null ? void 0 : u.querySelector('[role="listbox"]')) == null || g.focus());
+  }
+  return /* @__PURE__ */ S("div", { ref: m, className: "select-search-panel", children: [
+    /* @__PURE__ */ n(
+      A,
+      {
+        "aria-label": s,
+        value: h,
+        onChange: y,
+        autoFocus: !0,
+        children: /* @__PURE__ */ n(
+          U,
+          {
+            className: "select-search-input",
+            placeholder: s,
+            onKeyDown: b
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ n(
+      E,
+      {
+        "aria-label": o,
+        selectionMode: "multiple",
+        escapeKeyBehavior: "none",
+        disallowEmptySelection: i,
+        selectedKeys: e,
+        onSelectionChange: (d) => t(G(e, f, d)),
+        renderEmptyState: () => /* @__PURE__ */ n("span", { className: "select-empty-state", children: a }),
+        children: l
+      }
+    )
+  ] });
+}
+function ce({
+  className: r,
   label: e,
-  description: r,
+  description: t,
   errorMessage: i,
-  placeholder: s,
-  children: a,
-  selectedKeys: f,
-  onSelectionChange: x,
-  isDisabled: S,
+  placeholder: o,
+  children: s,
+  selectedKeys: a,
+  onSelectionChange: c,
+  isDisabled: h,
   isInvalid: y,
-  disallowEmptySelection: C,
-  "aria-label": m
+  disallowEmptySelection: m,
+  "aria-label": l,
+  ...f
 }) {
-  const T = N(t, "select-container"), b = W(), c = R(null), [w, E] = F(), u = I(() => {
-    c.current && E(`${c.current.offsetWidth}px`);
+  const b = D(r, "select-container"), d = z(), u = N(null), [g, B] = F(), T = k(() => {
+    u.current && B(`${u.current.offsetWidth}px`);
   }, []);
-  j(() => {
-    u();
-    const o = c.current;
-    if (!o || typeof ResizeObserver > "u") return;
-    const p = new ResizeObserver(u);
-    return p.observe(o), () => p.disconnect();
-  }, [u]);
-  const l = U(a, f);
-  return /* @__PURE__ */ n("div", { className: T, children: /* @__PURE__ */ d(k, { children: [
-    e && /* @__PURE__ */ n(z, { children: e }),
-    /* @__PURE__ */ d(B, { children: [
-      /* @__PURE__ */ d(
-        L,
+  L(() => {
+    T();
+    const p = u.current;
+    if (!p || typeof ResizeObserver > "u") return;
+    const C = new ResizeObserver(T);
+    return C.observe(p), () => C.disconnect();
+  }, [T]);
+  const v = J(s, a);
+  return /* @__PURE__ */ n("div", { className: b, children: /* @__PURE__ */ S(K, { children: [
+    e && /* @__PURE__ */ n(q, { children: e }),
+    /* @__PURE__ */ S(M, { children: [
+      /* @__PURE__ */ S(
+        O,
         {
-          ref: c,
+          ref: u,
           className: "select",
-          "aria-label": m,
-          isDisabled: S,
+          "aria-label": l,
+          isDisabled: h,
           "data-invalid": y || void 0,
           children: [
             /* @__PURE__ */ n(
               "span",
               {
                 className: "select-value",
-                "data-placeholder": l === "" || void 0,
-                title: l || void 0,
-                children: l === "" ? s : l
+                "data-placeholder": v === "" || void 0,
+                title: v || void 0,
+                children: v === "" ? o : v
               }
             ),
-            /* @__PURE__ */ n(O, { "aria-hidden": "true" })
+            /* @__PURE__ */ n(W, { "aria-hidden": "true" })
           ]
         }
       ),
       /* @__PURE__ */ n(
-        M,
+        V,
         {
           className: "select-popover",
-          style: { "--trigger-width": w },
-          UNSTABLE_portalContainer: b,
-          children: /* @__PURE__ */ n(
-            V,
+          style: { "--trigger-width": g },
+          UNSTABLE_portalContainer: d,
+          children: f.isSearchable ? /* @__PURE__ */ n(
+            Q,
+            {
+              listLabel: e ?? l,
+              selectedKeys: a,
+              onSelectionChange: c,
+              disallowEmptySelection: m,
+              searchPlaceholder: f.searchPlaceholder,
+              emptyStateText: f.emptyStateText,
+              children: s
+            }
+          ) : /* @__PURE__ */ n(
+            E,
             {
-              "aria-label": e ?? m,
+              "aria-label": e ?? l,
               autoFocus: !0,
               selectionMode: "multiple",
-              disallowEmptySelection: C,
-              selectedKeys: f,
-              onSelectionChange: (o) => x(
-                o === "all" ? K(a) : new Set(o)
+              escapeKeyBehavior: "none",
+              disallowEmptySelection: m,
+              selectedKeys: a,
+              onSelectionChange: (p) => c(
+                p === "all" ? _(s) : new Set(p)
               ),
-              children: a
+              children: s
             }
           )
         }
       )
     ] }),
-    r && /* @__PURE__ */ n(D, { children: r }),
+    t && /* @__PURE__ */ n(H, { children: t }),
     /* @__PURE__ */ n(P, { children: i })
   ] }) });
 }
 export {
-  Z as MultiSelectField
+  ce as MultiSelectField
 };
 //# sourceMappingURL=MultiSelect.js.map

package/dist/lib/ui/primitives/Select/MultiSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.js","sources":["../../../../../src/ui/primitives/Select/MultiSelect.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Description,\n  Field,\n  FieldError,\n  Label,\n  ListBox,\n  SharedFieldProps,\n} from \"primitives\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Button as RACButton,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  type Key as RACKey,\n  type Selection as RACSelection,\n} from \"react-aria-components\";\nimport \"./select.css\";\n\nfunction itemKey(item: React.ReactElement): string {\n  const { id } = item.props as { id?: RACKey };\n  return String(id ?? item.key ?? \"\");\n}\n\nfunction itemText(item: React.ReactElement): string {\n  const { textValue, children } = item.props as {\n    textValue?: string;\n    children?: React.ReactNode;\n  };\n  if (textValue !== undefined) return textValue;\n  return typeof children === \"string\" ? children : \"\";\n}\n\nfunction forEachItem(\n  children: React.ReactNode,\n  visit: (item: React.ReactElement) => void,\n) {\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) visit(child);\n  });\n}\n\nfunction allItemKeys(children: React.ReactNode): Set<RACKey> {\n  const keys = new Set<RACKey>();\n  forEachItem(children, (item) => keys.add(itemKey(item)));\n  return keys;\n}\n\nfunction selectedItemsText(\n  children: React.ReactNode,\n  selectedKeys: Iterable<RACKey>,\n): string {\n  const selected = new Set([...selectedKeys].map(String));\n  const texts: string[] = [];\n  forEachItem(children, (item) => {\n    if (selected.has(itemKey(item))) texts.push(itemText(item));\n  });\n  return texts.join(\", \");\n}\n\nexport interface MultiSelectFieldProps extends SharedFieldProps {\n  children: React.ReactNode;\n  selectedKeys: Iterable<RACKey>;\n  onSelectionChange: (keys: Set<RACKey>) => void;\n  className?: string;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  disallowEmptySelection?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport function MultiSelectField({\n  className,\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  children,\n  selectedKeys,\n  onSelectionChange,\n  isDisabled,\n  isInvalid,\n  disallowEmptySelection,\n  \"aria-label\": ariaLabel,\n}: MultiSelectFieldProps) {\n  const classNames = clsx(className, \"select-container\");\n  const portalContainer = useOverlayPortalContainer();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<string>();\n\n  const measureTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      setTriggerWidth(`${triggerRef.current.offsetWidth}px`);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    measureTrigger();\n    const trigger = triggerRef.current;\n    if (!trigger || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measureTrigger);\n    observer.observe(trigger);\n    return () => observer.disconnect();\n  }, [measureTrigger]);\n\n  const chosenText = selectedItemsText(children, selectedKeys);\n\n  return (\n    <div className={classNames}>\n      <Field>\n        {label && <Label>{label}</Label>}\n        <RACMenuTrigger>\n          <RACButton\n            ref={triggerRef}\n            className=\"select\"\n            aria-label={ariaLabel}\n            isDisabled={isDisabled}\n            data-invalid={isInvalid || undefined}\n          >\n            <span\n              className=\"select-value\"\n              data-placeholder={chosenText === \"\" || undefined}\n              title={chosenText || undefined}\n            >\n              {chosenText === \"\" ? placeholder : chosenText}\n            </span>\n            <IconChevronDown aria-hidden=\"true\" />\n          </RACButton>\n          <RACPopover\n            className=\"select-popover\"\n            style={{ \"--trigger-width\": triggerWidth } as React.CSSProperties}\n            UNSTABLE_portalContainer={portalContainer}\n          >\n            <ListBox\n              aria-label={label ?? ariaLabel}\n              autoFocus\n              selectionMode=\"multiple\"\n              disallowEmptySelection={disallowEmptySelection}\n              selectedKeys={selectedKeys}\n              onSelectionChange={(keys: RACSelection) =>\n                onSelectionChange(\n                  keys === \"all\" ? allItemKeys(children) : new Set(keys),\n                )\n              }\n            >\n              {children}\n            </ListBox>\n          </RACPopover>\n        </RACMenuTrigger>\n        {description && <Description>{description}</Description>}\n        <FieldError>{errorMessage}</FieldError>\n      </Field>\n    </div>\n  );\n}\n"],"names":["itemKey","item","id","itemText","textValue","children","forEachItem","visit","React","child","allItemKeys","keys","selectedItemsText","selectedKeys","selected","texts","MultiSelectField","className","label","description","errorMessage","placeholder","onSelectionChange","isDisabled","isInvalid","disallowEmptySelection","ariaLabel","classNames","clsx","portalContainer","useOverlayPortalContainer","triggerRef","useRef","triggerWidth","setTriggerWidth","useState","measureTrigger","useCallback","useLayoutEffect","trigger","observer","chosenText","jsx","Field","Label","RACMenuTrigger","jsxs","RACButton","IconChevronDown","RACPopover","ListBox","Description","FieldError"],"mappings":";;;;;;;;;AAqBA,SAASA,EAAQC,GAAkC;AACjD,QAAM,EAAE,IAAAC,MAAOD,EAAK;AACpB,SAAO,OAAOC,KAAMD,EAAK,OAAO,EAAE;AACpC;AAEA,SAASE,EAASF,GAAkC;AAClD,QAAM,EAAE,WAAAG,GAAW,UAAAC,EAAA,IAAaJ,EAAK;AAIrC,SAAIG,MAAc,SAAkBA,IAC7B,OAAOC,KAAa,WAAWA,IAAW;AACnD;AAEA,SAASC,EACPD,GACAE,GACA;AACA,EAAAC,EAAM,SAAS,QAAQH,GAAU,CAACI,MAAU;AAC1C,IAAID,EAAM,eAAeC,CAAK,OAASA,CAAK;AAAA,EAC9C,CAAC;AACH;AAEA,SAASC,EAAYL,GAAwC;AAC3D,QAAMM,wBAAW,IAAA;AACjB,SAAAL,EAAYD,GAAU,CAACJ,MAASU,EAAK,IAAIX,EAAQC,CAAI,CAAC,CAAC,GAChDU;AACT;AAEA,SAASC,EACPP,GACAQ,GACQ;AACR,QAAMC,IAAW,IAAI,IAAI,CAAC,GAAGD,CAAY,EAAE,IAAI,MAAM,CAAC,GAChDE,IAAkB,CAAA;AACxB,SAAAT,EAAYD,GAAU,CAACJ,MAAS;AAC9B,IAAIa,EAAS,IAAId,EAAQC,CAAI,CAAC,KAAGc,EAAM,KAAKZ,EAASF,CAAI,CAAC;AAAA,EAC5D,CAAC,GACMc,EAAM,KAAK,IAAI;AACxB;AAaO,SAASC,EAAiB;AAAA,EAC/B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAhB;AAAA,EACA,cAAAQ;AAAA,EACA,mBAAAS;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,cAAcC;AAChB,GAA0B;AACxB,QAAMC,IAAaC,EAAKX,GAAW,kBAAkB,GAC/CY,IAAkBC,EAAA,GAClBC,IAAaC,EAA0B,IAAI,GAC3C,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAiBC,EAAY,MAAM;AACvC,IAAIN,EAAW,WACbG,EAAgB,GAAGH,EAAW,QAAQ,WAAW,IAAI;AAAA,EAEzD,GAAG,CAAA,CAAE;AAEL,EAAAO,EAAgB,MAAM;AACpB,IAAAF,EAAA;AACA,UAAMG,IAAUR,EAAW;AAC3B,QAAI,CAACQ,KAAW,OAAO,iBAAmB,IAAa;AACvD,UAAMC,IAAW,IAAI,eAAeJ,CAAc;AAClD,WAAAI,EAAS,QAAQD,CAAO,GACjB,MAAMC,EAAS,WAAA;AAAA,EACxB,GAAG,CAACJ,CAAc,CAAC;AAEnB,QAAMK,IAAa7B,EAAkBP,GAAUQ,CAAY;AAE3D,SACE,gBAAA6B,EAAC,OAAA,EAAI,WAAWf,GACd,4BAACgB,GAAA,EACE,UAAA;AAAA,IAAAzB,KAAS,gBAAAwB,EAACE,KAAO,UAAA1B,EAAA,CAAM;AAAA,sBACvB2B,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,KAAKhB;AAAA,UACL,WAAU;AAAA,UACV,cAAYL;AAAA,UACZ,YAAAH;AAAA,UACA,gBAAcC,KAAa;AAAA,UAE3B,UAAA;AAAA,YAAA,gBAAAkB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,oBAAkBD,MAAe,MAAM;AAAA,gBACvC,OAAOA,KAAc;AAAA,gBAEpB,UAAAA,MAAe,KAAKpB,IAAcoB;AAAA,cAAA;AAAA,YAAA;AAAA,YAErC,gBAAAC,EAACM,GAAA,EAAgB,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtC,gBAAAN;AAAA,QAACO;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,mBAAmBhB,EAAA;AAAA,UAC5B,0BAA0BJ;AAAA,UAE1B,UAAA,gBAAAa;AAAA,YAACQ;AAAA,YAAA;AAAA,cACC,cAAYhC,KAASQ;AAAA,cACrB,WAAS;AAAA,cACT,eAAc;AAAA,cACd,wBAAAD;AAAA,cACA,cAAAZ;AAAA,cACA,mBAAmB,CAACF,MAClBW;AAAA,gBACEX,MAAS,QAAQD,EAAYL,CAAQ,IAAI,IAAI,IAAIM,CAAI;AAAA,cAAA;AAAA,cAIxD,UAAAN;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF,GACF;AAAA,IACCc,KAAe,gBAAAuB,EAACS,GAAA,EAAa,UAAAhC,EAAA,CAAY;AAAA,IAC1C,gBAAAuB,EAACU,KAAY,UAAAhC,EAAA,CAAa;AAAA,EAAA,EAAA,CAC5B,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"MultiSelect.js","sources":["../../../../../src/ui/primitives/Select/MultiSelect.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n  Description,\n  Field,\n  FieldError,\n  Input,\n  Label,\n  ListBox,\n  SharedFieldProps,\n} from \"primitives\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n  Button as RACButton,\n  MenuTrigger as RACMenuTrigger,\n  Popover as RACPopover,\n  TextField as RACTextField,\n  useFilter,\n  type Key as RACKey,\n  type Selection as RACSelection,\n} from \"react-aria-components\";\nimport \"./select.css\";\n\nfunction itemKey(item: React.ReactElement): RACKey {\n  const { id } = item.props as { id?: RACKey };\n  return id ?? item.key ?? \"\";\n}\n\nfunction itemText(item: React.ReactElement): string {\n  const { textValue, children } = item.props as {\n    textValue?: string;\n    children?: React.ReactNode;\n  };\n  if (textValue !== undefined) return textValue;\n  return typeof children === \"string\" ? children : \"\";\n}\n\nfunction forEachItem(\n  children: React.ReactNode,\n  visit: (item: React.ReactElement) => void,\n) {\n  React.Children.forEach(children, (child) => {\n    if (React.isValidElement(child)) visit(child);\n  });\n}\n\nfunction allItemKeys(children: React.ReactNode): Set<RACKey> {\n  const keys = new Set<RACKey>();\n  forEachItem(children, (item) => keys.add(itemKey(item)));\n  return keys;\n}\n\ntype TextMatcher = (text: string, searchText: string) => boolean;\n\nfunction matchingItems(\n  children: React.ReactNode,\n  searchText: string,\n  matches: TextMatcher,\n): React.ReactElement[] {\n  return React.Children.toArray(children).filter(\n    (child): child is React.ReactElement =>\n      React.isValidElement(child) && matches(itemText(child), searchText),\n  );\n}\n\nfunction keepHiddenSelection(\n  previousKeys: Iterable<RACKey>,\n  visibleKeys: RACKey[],\n  visibleSelection: RACSelection,\n): Set<RACKey> {\n  const visible = new Set(visibleKeys.map(String));\n  const isVisible = (key: RACKey) => visible.has(String(key));\n  const hiddenSelected = [...previousKeys].filter((key) => !isVisible(key));\n  const visibleSelected =\n    visibleSelection === \"all\"\n      ? visibleKeys\n      : [...visibleSelection].filter(isVisible);\n  return new Set([...hiddenSelected, ...visibleSelected]);\n}\n\nfunction selectedItemsText(\n  children: React.ReactNode,\n  selectedKeys: Iterable<RACKey>,\n): string {\n  const selected = new Set([...selectedKeys].map(String));\n  const texts: string[] = [];\n  forEachItem(children, (item) => {\n    if (selected.has(String(itemKey(item)))) texts.push(itemText(item));\n  });\n  return texts.join(\", \");\n}\n\ninterface MultiSelectOptionsProps {\n  children: React.ReactNode;\n  selectedKeys: Iterable<RACKey>;\n  onSelectionChange: (keys: Set<RACKey>) => void;\n  disallowEmptySelection?: boolean;\n}\n\ninterface MultiSelectFieldBaseProps\n  extends SharedFieldProps,\n    MultiSelectOptionsProps {\n  className?: string;\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  \"aria-label\"?: string;\n}\n\nexport interface MultiSelectSearchProps {\n  isSearchable: true;\n  searchPlaceholder: string;\n  emptyStateText: string;\n}\n\ninterface MultiSelectWithoutSearchProps {\n  isSearchable?: false;\n  searchPlaceholder?: never;\n  emptyStateText?: never;\n}\n\nexport type MultiSelectFieldProps = MultiSelectFieldBaseProps &\n  (MultiSelectSearchProps | MultiSelectWithoutSearchProps);\n\nfunction SearchableOptions({\n  children,\n  selectedKeys,\n  onSelectionChange,\n  disallowEmptySelection,\n  listLabel,\n  searchPlaceholder,\n  emptyStateText,\n}: MultiSelectOptionsProps &\n  Omit<MultiSelectSearchProps, \"isSearchable\"> & { listLabel?: string }) {\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const [searchText, setSearchText] = useState(\"\");\n  const panelRef = useRef<HTMLDivElement>(null);\n  const visibleItems = matchingItems(children, searchText, contains);\n  const visibleKeys = visibleItems.map(itemKey);\n\n  function moveFocusToList(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (event.key !== \"ArrowDown\" || visibleItems.length === 0) return;\n    event.preventDefault();\n    panelRef.current?.querySelector<HTMLElement>('[role=\"listbox\"]')?.focus();\n  }\n\n  return (\n    <div ref={panelRef} className=\"select-search-panel\">\n      <RACTextField\n        aria-label={searchPlaceholder}\n        value={searchText}\n        onChange={setSearchText}\n        autoFocus\n      >\n        <Input\n          className=\"select-search-input\"\n          placeholder={searchPlaceholder}\n          onKeyDown={moveFocusToList}\n        />\n      </RACTextField>\n      <ListBox\n        aria-label={listLabel}\n        selectionMode=\"multiple\"\n        escapeKeyBehavior=\"none\"\n        disallowEmptySelection={disallowEmptySelection}\n        selectedKeys={selectedKeys}\n        onSelectionChange={(keys: RACSelection) =>\n          onSelectionChange(keepHiddenSelection(selectedKeys, visibleKeys, keys))\n        }\n        renderEmptyState={() => (\n          <span className=\"select-empty-state\">{emptyStateText}</span>\n        )}\n      >\n        {visibleItems}\n      </ListBox>\n    </div>\n  );\n}\n\nexport function MultiSelectField({\n  className,\n  label,\n  description,\n  errorMessage,\n  placeholder,\n  children,\n  selectedKeys,\n  onSelectionChange,\n  isDisabled,\n  isInvalid,\n  disallowEmptySelection,\n  \"aria-label\": ariaLabel,\n  ...searchProps\n}: MultiSelectFieldProps) {\n  const classNames = clsx(className, \"select-container\");\n  const portalContainer = useOverlayPortalContainer();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [triggerWidth, setTriggerWidth] = useState<string>();\n\n  const measureTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      setTriggerWidth(`${triggerRef.current.offsetWidth}px`);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    measureTrigger();\n    const trigger = triggerRef.current;\n    if (!trigger || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(measureTrigger);\n    observer.observe(trigger);\n    return () => observer.disconnect();\n  }, [measureTrigger]);\n\n  const chosenText = selectedItemsText(children, selectedKeys);\n\n  return (\n    <div className={classNames}>\n      <Field>\n        {label && <Label>{label}</Label>}\n        <RACMenuTrigger>\n          <RACButton\n            ref={triggerRef}\n            className=\"select\"\n            aria-label={ariaLabel}\n            isDisabled={isDisabled}\n            data-invalid={isInvalid || undefined}\n          >\n            <span\n              className=\"select-value\"\n              data-placeholder={chosenText === \"\" || undefined}\n              title={chosenText || undefined}\n            >\n              {chosenText === \"\" ? placeholder : chosenText}\n            </span>\n            <IconChevronDown aria-hidden=\"true\" />\n          </RACButton>\n          <RACPopover\n            className=\"select-popover\"\n            style={{ \"--trigger-width\": triggerWidth } as React.CSSProperties}\n            UNSTABLE_portalContainer={portalContainer}\n          >\n            {searchProps.isSearchable ? (\n              <SearchableOptions\n                listLabel={label ?? ariaLabel}\n                selectedKeys={selectedKeys}\n                onSelectionChange={onSelectionChange}\n                disallowEmptySelection={disallowEmptySelection}\n                searchPlaceholder={searchProps.searchPlaceholder}\n                emptyStateText={searchProps.emptyStateText}\n              >\n                {children}\n              </SearchableOptions>\n            ) : (\n              <ListBox\n                aria-label={label ?? ariaLabel}\n                autoFocus\n                selectionMode=\"multiple\"\n                escapeKeyBehavior=\"none\"\n                disallowEmptySelection={disallowEmptySelection}\n                selectedKeys={selectedKeys}\n                onSelectionChange={(keys: RACSelection) =>\n                  onSelectionChange(\n                    keys === \"all\" ? allItemKeys(children) : new Set(keys),\n                  )\n                }\n              >\n                {children}\n              </ListBox>\n            )}\n          </RACPopover>\n        </RACMenuTrigger>\n        {description && <Description>{description}</Description>}\n        <FieldError>{errorMessage}</FieldError>\n      </Field>\n    </div>\n  );\n}\n"],"names":["itemKey","item","id","itemText","textValue","children","forEachItem","visit","React","child","allItemKeys","keys","matchingItems","searchText","matches","keepHiddenSelection","previousKeys","visibleKeys","visibleSelection","visible","isVisible","key","hiddenSelected","visibleSelected","selectedItemsText","selectedKeys","selected","texts","SearchableOptions","onSelectionChange","disallowEmptySelection","listLabel","searchPlaceholder","emptyStateText","contains","useFilter","setSearchText","useState","panelRef","useRef","visibleItems","moveFocusToList","event","_b","_a","jsxs","jsx","RACTextField","Input","ListBox","MultiSelectField","className","label","description","errorMessage","placeholder","isDisabled","isInvalid","ariaLabel","searchProps","classNames","clsx","portalContainer","useOverlayPortalContainer","triggerRef","triggerWidth","setTriggerWidth","measureTrigger","useCallback","useLayoutEffect","trigger","observer","chosenText","Field","Label","RACMenuTrigger","RACButton","IconChevronDown","RACPopover","Description","FieldError"],"mappings":"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"}

package/dist/types/ui/primitives/Select/MultiSelect.d.ts

@@ -2,14 +2,28 @@ import { SharedFieldProps } from "primitives";
 import React from "react";
 import { type Key as RACKey } from "react-aria-components";
 import "./select.css";
-export interface MultiSelectFieldProps extends SharedFieldProps {
+interface MultiSelectOptionsProps {
     children: React.ReactNode;
     selectedKeys: Iterable<RACKey>;
     onSelectionChange: (keys: Set<RACKey>) => void;
+    disallowEmptySelection?: boolean;
+}
+interface MultiSelectFieldBaseProps extends SharedFieldProps, MultiSelectOptionsProps {
     className?: string;
     isDisabled?: boolean;
     isInvalid?: boolean;
-    disallowEmptySelection?: boolean;
     "aria-label"?: string;
 }
-export declare function MultiSelectField({ className, label, description, errorMessage, placeholder, children, selectedKeys, onSelectionChange, isDisabled, isInvalid, disallowEmptySelection, "aria-label": ariaLabel, }: MultiSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export interface MultiSelectSearchProps {
+    isSearchable: true;
+    searchPlaceholder: string;
+    emptyStateText: string;
+}
+interface MultiSelectWithoutSearchProps {
+    isSearchable?: false;
+    searchPlaceholder?: never;
+    emptyStateText?: never;
+}
+export type MultiSelectFieldProps = MultiSelectFieldBaseProps & (MultiSelectSearchProps | MultiSelectWithoutSearchProps);
+export declare function MultiSelectField({ className, label, description, errorMessage, placeholder, children, selectedKeys, onSelectionChange, isDisabled, isInvalid, disallowEmptySelection, "aria-label": ariaLabel, ...searchProps }: MultiSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apipass/design-system",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "type": "module",
   "description": "APIPass React Design System",
   "sideEffects": [
@@ -135,6 +135,9 @@
     "@storybook/addon-mcp": "^0.5.0",
     "@storybook/react": "^10.3.4",
     "@storybook/react-vite": "^10.3.4",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@types/react-grid-layout": "^1.3.6",
@@ -146,6 +149,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "eslint-plugin-storybook": "^10.3.4",
+    "jsdom": "^26.1.0",
     "postcss": "8.5.6",
     "prettier-plugin-organize-imports": "^3.2.4",
     "react": "^18.2.0",