@solibo/solibo-ui 1.0.12 → 1.0.13

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n  itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  onSelect: (item: MenuItem) => void;\n  usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\n};\n\nconst MenuList = ({\n  itemRefs,\n  items,\n  menuAccessibleLabel,\n  onKeyDown,\n  onSelect,\n  usesMenuSemantics = false,\n}: MenuListProps) => (\n  <List\n    aria-label={menuAccessibleLabel}\n    className={styles.list}\n    onKeyDown={onKeyDown}\n    role={usesMenuSemantics ? 'menu' : undefined}\n  >\n    {items.map((item, index) => (\n      <li\n        key={item.id ?? index}\n        role={usesMenuSemantics ? 'none' : undefined}\n      >\n        <Button\n          aria-current={item.isActive ? 'true' : undefined}\n          aria-label={item.accessibleLabel}\n          className={cx(\n            styles.item,\n            item.isActive && styles.active,\n            item.isDanger && styles.danger\n          )}\n          disabled={item.disabled}\n          onClick={() => onSelect(item)}\n          ref={(node) => {\n            if (itemRefs) itemRefs.current[index] = node;\n          }}\n          role={usesMenuSemantics ? 'menuitem' : undefined}\n          variant='tertiary'\n        >\n          {item.icon && (\n            <Icon\n              fill\n              gap='right'\n              name={item.icon}\n              size='small'\n            />\n          )}\n          <span>{item.label}</span>\n        </Button>\n      </li>\n    ))}\n  </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n  return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n  close,\n  initialFocus,\n  items,\n  menuAccessibleLabel,\n  onItemSelect,\n}: MenuPanelProps) => {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const focusItem = useCallback((target: MenuFocusTarget) => {\n    const focusableItems = getFocusableItems(itemRefs.current);\n\n    if (focusableItems.length === 0) {\n      return;\n    }\n\n    if (target === 'first') {\n      focusableItems[0].focus();\n      return;\n    }\n\n    if (target === 'last') {\n      focusableItems[focusableItems.length - 1].focus();\n      return;\n    }\n\n    const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n    const nextIndex =\n      target === 'next'\n        ? (currentIndex + 1) % focusableItems.length\n        : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n    focusableItems[nextIndex].focus();\n  }, []);\n\n  useEffect(() => {\n    focusItem(initialFocus ?? 'first');\n  }, [focusItem, initialFocus]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem('next');\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      focusItem('previous');\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusItem('first');\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusItem('last');\n    }\n  };\n\n  const handleItemSelect = (item: MenuItem) => {\n    item.onSelect?.();\n    onItemSelect?.(item);\n    close();\n  };\n\n  return (\n    <MenuList\n      itemRefs={itemRefs}\n      items={items}\n      menuAccessibleLabel={menuAccessibleLabel}\n      onKeyDown={handleKeyDown}\n      onSelect={handleItemSelect}\n      usesMenuSemantics\n    />\n  );\n};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  variant = 'popover',\n}: MenuProps) => {\n  if (variant === 'simple') {\n    const handleItemSelect = (item: MenuItem) => {\n      item.onSelect?.();\n      onItemSelect?.(item);\n    };\n\n    return (\n      <MenuList\n        items={items}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={handleItemSelect}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerAriaHasPopup='menu'\n      triggerButtonContent={\n        <Icon\n          name='dots'\n          size='medium'\n        />\n      }\n    >\n      {({ close, initialFocus }) => (\n        <MenuPanel\n          close={close}\n          initialFocus={initialFocus}\n          items={items}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onItemSelect={onItemSelect}\n        />\n      )}\n    </Popover>\n  );\n};\n"],"names":["MenuList","itemRefs","items","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","isDanger","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","Boolean","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { Button } from '@/components/button';\nimport { Icon } from '@/components/icon';\nimport { type IconName } from '@/components/icon/icons';\nimport { List } from '@/components/list';\nimport { Popover, type PopoverInitialFocus, type PopoverRenderProps } from '@/components/popover';\n\nimport styles from './styles.module.css';\n\nexport type MenuItem = {\n  accessibleLabel?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  id?: string;\n  isActive?: boolean;\n  isDanger?: boolean;\n  label: React.ReactNode;\n  onSelect?: () => void;\n};\n\ntype MenuSharedProps = {\n  items: MenuItem[];\n  menuAccessibleLabel?: string;\n  onItemSelect?: (item: MenuItem) => void;\n};\n\ntype PopoverMenuProps = {\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  variant?: 'popover';\n};\n\ntype SimpleMenuProps = {\n  inline?: never;\n  triggerAccessibleLabel?: never;\n  variant: 'simple';\n};\n\nexport type MenuProps = MenuSharedProps & (PopoverMenuProps | SimpleMenuProps);\n\ntype MenuFocusTarget = 'first' | 'last' | 'next' | 'previous';\n\ntype MenuListProps = Pick<MenuSharedProps, 'items' | 'menuAccessibleLabel'> & {\n  itemRefs?: React.RefObject<Array<HTMLButtonElement | null>>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  onSelect: (item: MenuItem) => void;\n  usesMenuSemantics?: boolean;\n};\n\ntype MenuPanelProps = MenuSharedProps & {\n  close: PopoverRenderProps['close'];\n  initialFocus?: PopoverInitialFocus;\n};\n\nfunction sortDangerItemsLast(items: MenuItem[]) {\n  return [...items].sort(\n    (left, right) => Number(Boolean(left.isDanger)) - Number(Boolean(right.isDanger))\n  );\n}\n\nconst MenuList = ({\n  itemRefs,\n  items,\n  menuAccessibleLabel,\n  onKeyDown,\n  onSelect,\n  usesMenuSemantics = false,\n}: MenuListProps) => (\n  <List\n    aria-label={menuAccessibleLabel}\n    className={styles.list}\n    onKeyDown={onKeyDown}\n    role={usesMenuSemantics ? 'menu' : undefined}\n  >\n    {sortDangerItemsLast(items).map((item, index) => (\n      <li\n        key={item.id ?? index}\n        role={usesMenuSemantics ? 'none' : undefined}\n      >\n        <Button\n          aria-current={item.isActive ? 'true' : undefined}\n          aria-label={item.accessibleLabel}\n          className={cx(\n            styles.item,\n            item.isActive && styles.active,\n            item.isDanger && styles.danger\n          )}\n          disabled={item.disabled}\n          onClick={() => onSelect(item)}\n          ref={(node) => {\n            if (itemRefs) itemRefs.current[index] = node;\n          }}\n          role={usesMenuSemantics ? 'menuitem' : undefined}\n          variant='tertiary'\n        >\n          {item.icon && (\n            <Icon\n              fill\n              gap='right'\n              name={item.icon}\n              size='small'\n            />\n          )}\n          <span>{item.label}</span>\n        </Button>\n      </li>\n    ))}\n  </List>\n);\n\nfunction getFocusableItems(items: Array<HTMLButtonElement | null>) {\n  return items.filter((item): item is HTMLButtonElement => Boolean(item && !item.disabled));\n}\n\nconst MenuPanel = ({\n  close,\n  initialFocus,\n  items,\n  menuAccessibleLabel,\n  onItemSelect,\n}: MenuPanelProps) => {\n  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);\n\n  const focusItem = useCallback((target: MenuFocusTarget) => {\n    const focusableItems = getFocusableItems(itemRefs.current);\n\n    if (focusableItems.length === 0) {\n      return;\n    }\n\n    if (target === 'first') {\n      focusableItems[0].focus();\n      return;\n    }\n\n    if (target === 'last') {\n      focusableItems[focusableItems.length - 1].focus();\n      return;\n    }\n\n    const currentIndex = focusableItems.indexOf(document.activeElement as HTMLButtonElement);\n    const nextIndex =\n      target === 'next'\n        ? (currentIndex + 1) % focusableItems.length\n        : (currentIndex - 1 + focusableItems.length) % focusableItems.length;\n\n    focusableItems[nextIndex].focus();\n  }, []);\n\n  useEffect(() => {\n    focusItem(initialFocus ?? 'first');\n  }, [focusItem, initialFocus]);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      focusItem('next');\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      focusItem('previous');\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      focusItem('first');\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      focusItem('last');\n    }\n  };\n\n  const handleItemSelect = (item: MenuItem) => {\n    item.onSelect?.();\n    onItemSelect?.(item);\n    close();\n  };\n\n  return (\n    <MenuList\n      itemRefs={itemRefs}\n      items={items}\n      menuAccessibleLabel={menuAccessibleLabel}\n      onKeyDown={handleKeyDown}\n      onSelect={handleItemSelect}\n      usesMenuSemantics\n    />\n  );\n};\n\nexport const Menu = ({\n  inline = false,\n  items,\n  menuAccessibleLabel = 'Menu',\n  onItemSelect,\n  triggerAccessibleLabel = 'Open menu',\n  variant = 'popover',\n}: MenuProps) => {\n  if (variant === 'simple') {\n    const handleItemSelect = (item: MenuItem) => {\n      item.onSelect?.();\n      onItemSelect?.(item);\n    };\n\n    return (\n      <MenuList\n        items={items}\n        menuAccessibleLabel={menuAccessibleLabel}\n        onSelect={handleItemSelect}\n      />\n    );\n  }\n\n  return (\n    <Popover\n      inline={inline}\n      triggerAccessibleLabel={triggerAccessibleLabel}\n      triggerAriaHasPopup='menu'\n      triggerButtonContent={\n        <Icon\n          name='dots'\n          size='medium'\n        />\n      }\n    >\n      {({ close, initialFocus }) => (\n        <MenuPanel\n          close={close}\n          initialFocus={initialFocus}\n          items={items}\n          menuAccessibleLabel={menuAccessibleLabel}\n          onItemSelect={onItemSelect}\n        />\n      )}\n    </Popover>\n  );\n};\n"],"names":["sortDangerItemsLast","items","sort","left","right","Number","Boolean","isDanger","MenuList","itemRefs","menuAccessibleLabel","onKeyDown","onSelect","usesMenuSemantics","jsx","List","styles","list","undefined","map","item","index","jsxs","Button","isActive","accessibleLabel","cx","active","danger","disabled","node","current","icon","Icon","label","id","getFocusableItems","filter","MenuPanel","close","initialFocus","onItemSelect","useRef","focusItem","useCallback","target","focusableItems","length","focus","currentIndex","indexOf","document","activeElement","nextIndex","useEffect","handleKeyDown","event","key","preventDefault","handleItemSelect","Menu","inline","triggerAccessibleLabel","variant","Popover"],"mappings":"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"}

package/dist/components/nav/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),f=require("react"),p=require("../../icons-CR-eUx2p.cjs"),h="_nav_ebhif_3",v="_label_ebhif_9",m="_horizontal_ebhif_17",N="_sidebar_ebhif_27",g="_tabs_ebhif_73",w="_pills_ebhif_94",e={nav:h,label:v,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...n})=>o.jsx("span",{className:r.t(a,e.label),...n,"data-component":"navlabel"}),q=({animation:a,children:n,className:c,horizontal:i=!1,variant:s="default",...b})=>{const[d,l]=f.useState(!1),u={"--icon-svg":p.iconSVG("chevron")};return o.jsx("nav",{className:r.t(c,i&&e.horizontal,e.nav,x[s]),"data-animation":a,"data-open":d?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:t=>{if(s!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(t=>!t)},style:u,...b,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index12.css');const o=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),f=require("react"),p=require("../../icons-ovA21Oao.cjs"),h="_nav_ebhif_3",v="_label_ebhif_9",m="_horizontal_ebhif_17",N="_sidebar_ebhif_27",g="_tabs_ebhif_73",w="_pills_ebhif_94",e={nav:h,label:v,horizontal:m,sidebar:N,tabs:g,pills:w},x={default:e.default,pills:e.pills,sidebar:e.sidebar,tabs:e.tabs},j=({className:a,...n})=>o.jsx("span",{className:r.t(a,e.label),...n,"data-component":"navlabel"}),q=({animation:a,children:n,className:c,horizontal:i=!1,variant:s="default",...b})=>{const[d,l]=f.useState(!1),u={"--icon-svg":p.iconSVG("chevron")};return o.jsx("nav",{className:r.t(c,i&&e.horizontal,e.nav,x[s]),"data-animation":a,"data-open":d?"true":"false","data-orientation":i?"horizontal":"vertical",onBlurCapture:t=>{if(s!=="pills"||window.innerWidth>960)return;const _=t.relatedTarget;t.currentTarget.contains(_)||l(!1)},onClick:()=>{s!=="pills"||window.innerWidth>960||l(t=>!t)},style:u,...b,"data-component":"nav",children:n})};exports.Nav=q;exports.NavLabel=j;
 //# sourceMappingURL=index.cjs.map

package/dist/components/nav/index.js

@@ -1,7 +1,7 @@
 import { jsx as l } from "react/jsx-runtime";
 import { t as r } from "../../classix-DG18itHa.js";
 import { useState as _ } from "react";
-import { i as h } from "../../icons-BIi_mYLy.js";
+import { i as h } from "../../icons-Bq3diTRm.js";
 import '../../assets/index12.css';const m = "_nav_ebhif_3", u = "_label_ebhif_9", v = "_horizontal_ebhif_17", w = "_sidebar_ebhif_27", z = "_tabs_ebhif_73", N = "_pills_ebhif_94", a = {
   nav: m,
   label: u,

package/dist/components/popover/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const _=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),o=require("react"),S=require("react-dom"),I=require("../button/index.cjs"),K="_popover_1vis1_1",O="_inline_1vis1_6",N="_below_1vis1_42",H="_above_1vis1_47",W="_left_1vis1_57",M="_right_1vis1_62",U="_trigger_1vis1_67",s={popover:K,inline:O,"popover-panel":"_popover-panel_1vis1_21",below:N,above:H,"inline-panel":"_inline-panel_1vis1_52",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_1vis1_77"},X=({children:w,inline:n=!1,triggerAccessibleLabel:z,triggerAriaHasPopup:C,triggerButtonContent:b})=>{var B;const y=o.useRef(null),P=o.useRef(void 0),m=o.useRef(null),R=o.useId(),l=o.useRef(null),[t,D]=o.useState(!1),[f,x]=o.useState(!1),[d,k]=o.useState("right"),g=({initialFocus:e}={})=>{P.current=e,x(!1),k("right"),D(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var i;D(!1),e&&((i=l.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&c()},F=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),g();return}if(e.key==="ArrowDown"){e.preventDefault(),g({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),g({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var r,v;const p=i.target;(r=y.current)!=null&&r.contains(p)||(v=m.current)!=null&&v.contains(p)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const a=o.useCallback(()=>{const e=m.current,i=l.current;if(!e||!i)return;const p=e.getBoundingClientRect(),r=i.getBoundingClientRect(),v=r.top,T=window.innerHeight-r.bottom;x(p.height>T&&v>T),k(p.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":"right")},[]);o.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const q=e=>{n&&e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):g()},E={"aria-controls":t?R:void 0,"aria-expanded":t,"aria-haspopup":C,"aria-label":z,className:n?s["inline-trigger"]:s.trigger,onClick:q,onKeyDown:F},u=n?(B=l.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",f?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),h=t?_.jsx("div",{className:j.t(s["popover-panel"],s[f?"above":"below"],n&&s["inline-panel"],!n&&s[d]),"data-horizontal-placement":d,"data-placement":f?"above":"below",id:R,ref:m,style:u?{left:d==="left"?u.right:u.left,position:"fixed",top:f?u.top:u.bottom,transform:A||void 0}:void 0,children:typeof w=="function"?w({close:c,initialFocus:P.current,isOpen:t}):w}):null;return _.jsxs("div",{className:j.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:L,onClick:e=>{n&&e.preventDefault(),e.stopPropagation()},ref:y,"data-component":"popover",children:[n?_.jsx("span",{...E,ref:l,role:"button",tabIndex:0,children:b}):_.jsx(I.Button,{...E,ref:l,variant:"simple",children:b}),n&&h&&typeof document<"u"?S.createPortal(h,document.body):h]})};exports.Popover=X;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index17.css');const _=require("react/jsx-runtime"),j=require("../../classix-5H4IWnMA.cjs"),o=require("react"),S=require("react-dom"),I=require("../button/index.cjs"),K="_popover_1e3fx_1",O="_inline_1e3fx_6",N="_below_1e3fx_42",H="_above_1e3fx_47",W="_left_1e3fx_57",M="_right_1e3fx_62",U="_trigger_1e3fx_67",s={popover:K,inline:O,"popover-panel":"_popover-panel_1e3fx_21",below:N,above:H,"inline-panel":"_inline-panel_1e3fx_52",left:W,right:M,trigger:U,"inline-trigger":"_inline-trigger_1e3fx_77"},X=({children:w,inline:n=!1,triggerAccessibleLabel:z,triggerAriaHasPopup:C,triggerButtonContent:b})=>{var B;const x=o.useRef(null),y=o.useRef(void 0),m=o.useRef(null),P=o.useId(),l=o.useRef(null),[t,R]=o.useState(!1),[p,D]=o.useState(!1),[d,k]=o.useState("right"),g=({initialFocus:e}={})=>{y.current=e,D(!1),k("right"),R(!0)},c=o.useCallback(({restoreFocus:e=!0}={})=>{var i;R(!1),e&&((i=l.current)==null||i.focus())},[]),L=e=>{t&&e.key==="Escape"&&c()},F=e=>{if(!t){if(n&&(e.key==="Enter"||e.key===" ")){e.preventDefault(),g();return}if(e.key==="ArrowDown"){e.preventDefault(),g({initialFocus:"first"});return}e.key==="ArrowUp"&&(e.preventDefault(),g({initialFocus:"last"}))}};o.useEffect(()=>{if(!t)return;const e=i=>{var r,v;const f=i.target;(r=x.current)!=null&&r.contains(f)||(v=m.current)!=null&&v.contains(f)||c({restoreFocus:!1})};return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[c,t]);const a=o.useCallback(()=>{const e=m.current,i=l.current;if(!e||!i)return;const f=e.getBoundingClientRect(),r=i.getBoundingClientRect(),v=r.top,T=window.innerHeight-r.bottom;D(f.height>T&&v>T),k(f.width>window.innerWidth-r.left&&r.right>window.innerWidth-r.left?"left":"right")},[]);o.useLayoutEffect(()=>{if(t)return a(),window.addEventListener("resize",a),window.addEventListener("scroll",a,!0),()=>{window.removeEventListener("resize",a),window.removeEventListener("scroll",a,!0)}},[t,a]);const q=e=>{e.preventDefault(),e.stopPropagation(),t?c({restoreFocus:!1}):g()},E={"aria-controls":t?P:void 0,"aria-expanded":t,"aria-haspopup":C,"aria-label":z,className:n?s["inline-trigger"]:s.trigger,onClick:q,onKeyDown:F},u=n?(B=l.current)==null?void 0:B.getBoundingClientRect():void 0,A=[d==="left"?"translateX(-100%)":"",p?"translateY(calc(-100% - var(--shape-spacing-2xs)))":""].filter(Boolean).join(" "),h=t?_.jsx("div",{className:j.t(s["popover-panel"],s[p?"above":"below"],n&&s["inline-panel"],!n&&s[d]),"data-horizontal-placement":d,"data-placement":p?"above":"below",id:P,ref:m,style:u?{left:d==="left"?u.right:u.left,position:"fixed",top:p?u.top:u.bottom,transform:A||void 0}:void 0,children:typeof w=="function"?w({close:c,initialFocus:y.current,isOpen:t}):w}):null;return _.jsxs("div",{className:j.t(s.popover,n&&s.inline),"data-open":t,onKeyDown:L,onClick:e=>{e.preventDefault(),e.stopPropagation()},ref:x,"data-component":"popover",children:[n?_.jsx("span",{...E,ref:l,role:"button",tabIndex:0,children:b}):_.jsx(I.Button,{...E,ref:l,variant:"simple",children:b}),n&&h&&typeof document<"u"?S.createPortal(h,document.body):h]})};exports.Popover=X;
 //# sourceMappingURL=index.cjs.map

package/dist/components/popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (inline && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      openPopover();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (inline) event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        if (inline) event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      {inline ? (\n        <span\n          {...triggerProps}\n          ref={triggerRef}\n          role='button'\n          tabIndex={0}\n        >\n          {triggerButtonContent}\n        </span>\n      ) : (\n        <Button\n          {...triggerProps}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          variant='simple'\n        >\n          {triggerButtonContent}\n        </Button>\n      )}\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (inline && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      openPopover();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      {inline ? (\n        <span\n          {...triggerProps}\n          ref={triggerRef}\n          role='button'\n          tabIndex={0}\n        >\n          {triggerButtonContent}\n        </span>\n      ) : (\n        <Button\n          {...triggerProps}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          variant='simple'\n        >\n          {triggerButtonContent}\n        </Button>\n      )}\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}

package/dist/components/popover/index.js

@@ -3,34 +3,34 @@ import { t as T } from "../../classix-DG18itHa.js";
 import { useRef as v, useId as H, useState as b, useCallback as C, useEffect as W, useLayoutEffect as S } from "react";
 import { createPortal as U } from "react-dom";
 import { Button as X } from "../button/index.js";
-import '../../assets/index17.css';const Y = "_popover_1vis1_1", q = "_inline_1vis1_6", G = "_below_1vis1_42", J = "_above_1vis1_47", M = "_left_1vis1_57", Q = "_right_1vis1_62", V = "_trigger_1vis1_67", r = {
+import '../../assets/index17.css';const Y = "_popover_1e3fx_1", q = "_inline_1e3fx_6", G = "_below_1e3fx_42", J = "_above_1e3fx_47", M = "_left_1e3fx_57", Q = "_right_1e3fx_62", V = "_trigger_1e3fx_67", r = {
   popover: Y,
   inline: q,
-  "popover-panel": "_popover-panel_1vis1_21",
+  "popover-panel": "_popover-panel_1e3fx_21",
   below: G,
   above: J,
-  "inline-panel": "_inline-panel_1vis1_52",
+  "inline-panel": "_inline-panel_1e3fx_52",
   left: M,
   right: Q,
   trigger: V,
-  "inline-trigger": "_inline-trigger_1vis1_77"
+  "inline-trigger": "_inline-trigger_1e3fx_77"
 }, ie = ({
   children: m,
   inline: o = !1,
   triggerAccessibleLabel: F,
   triggerAriaHasPopup: A,
-  triggerButtonContent: y
+  triggerButtonContent: x
 }) => {
   var z;
-  const D = v(null), P = v(void 0), w = v(null), E = H(), a = v(null), [t, k] = b(!1), [f, B] = b(!1), [u, R] = b("right"), d = ({
+  const y = v(null), D = v(void 0), w = v(null), P = H(), a = v(null), [t, E] = b(!1), [p, k] = b(!1), [u, B] = b("right"), d = ({
     initialFocus: e
   } = {}) => {
-    P.current = e, B(!1), R("right"), k(!0);
+    D.current = e, k(!1), B("right"), E(!0);
   }, l = C(({
     restoreFocus: e = !0
   } = {}) => {
     var i;
-    k(!1), e && ((i = a.current) == null || i.focus());
+    E(!1), e && ((i = a.current) == null || i.focus());
   }, []), I = (e) => {
     t && e.key === "Escape" && l();
   }, K = (e) => {
@@ -55,8 +55,8 @@ import '../../assets/index17.css';const Y = "_popover_1vis1_1", q = "_inline_1vi
       return;
     const e = (i) => {
       var n, g;
-      const p = i.target;
-      (n = D.current) != null && n.contains(p) || (g = w.current) != null && g.contains(p) || l({
+      const f = i.target;
+      (n = y.current) != null && n.contains(f) || (g = w.current) != null && g.contains(f) || l({
         restoreFocus: !1
       });
     };
@@ -67,8 +67,8 @@ import '../../assets/index17.css';const Y = "_popover_1vis1_1", q = "_inline_1vi
   const s = C(() => {
     const e = w.current, i = a.current;
     if (!e || !i) return;
-    const p = e.getBoundingClientRect(), n = i.getBoundingClientRect(), g = n.top, L = window.innerHeight - n.bottom;
-    B(p.height > L && g > L), R(p.width > window.innerWidth - n.left && n.right > window.innerWidth - n.left ? "left" : "right");
+    const f = e.getBoundingClientRect(), n = i.getBoundingClientRect(), g = n.top, L = window.innerHeight - n.bottom;
+    k(f.height > L && g > L), B(f.width > window.innerWidth - n.left && n.right > window.innerWidth - n.left ? "left" : "right");
   }, []);
   S(() => {
     if (t)
@@ -77,31 +77,31 @@ import '../../assets/index17.css';const Y = "_popover_1vis1_1", q = "_inline_1vi
       };
   }, [t, s]);
   const j = (e) => {
-    o && e.preventDefault(), e.stopPropagation(), t ? l({
+    e.preventDefault(), e.stopPropagation(), t ? l({
       restoreFocus: !1
     }) : d();
-  }, x = {
-    "aria-controls": t ? E : void 0,
+  }, R = {
+    "aria-controls": t ? P : void 0,
     "aria-expanded": t,
     "aria-haspopup": A,
     "aria-label": F,
     className: o ? r["inline-trigger"] : r.trigger,
     onClick: j,
     onKeyDown: K
-  }, c = o ? (z = a.current) == null ? void 0 : z.getBoundingClientRect() : void 0, N = [u === "left" ? "translateX(-100%)" : "", f ? "translateY(calc(-100% - var(--shape-spacing-2xs)))" : ""].filter(Boolean).join(" "), _ = t ? /* @__PURE__ */ h("div", { className: T(r["popover-panel"], r[f ? "above" : "below"], o && r["inline-panel"], !o && r[u]), "data-horizontal-placement": u, "data-placement": f ? "above" : "below", id: E, ref: w, style: c ? {
+  }, c = o ? (z = a.current) == null ? void 0 : z.getBoundingClientRect() : void 0, N = [u === "left" ? "translateX(-100%)" : "", p ? "translateY(calc(-100% - var(--shape-spacing-2xs)))" : ""].filter(Boolean).join(" "), _ = t ? /* @__PURE__ */ h("div", { className: T(r["popover-panel"], r[p ? "above" : "below"], o && r["inline-panel"], !o && r[u]), "data-horizontal-placement": u, "data-placement": p ? "above" : "below", id: P, ref: w, style: c ? {
     left: u === "left" ? c.right : c.left,
     position: "fixed",
-    top: f ? c.top : c.bottom,
+    top: p ? c.top : c.bottom,
     transform: N || void 0
   } : void 0, children: typeof m == "function" ? m({
     close: l,
-    initialFocus: P.current,
+    initialFocus: D.current,
     isOpen: t
   }) : m }) : null;
   return /* @__PURE__ */ O("div", { className: T(r.popover, o && r.inline), "data-open": t, onKeyDown: I, onClick: (e) => {
-    o && e.preventDefault(), e.stopPropagation();
-  }, ref: D, "data-component": "popover", children: [
-    o ? /* @__PURE__ */ h("span", { ...x, ref: a, role: "button", tabIndex: 0, children: y }) : /* @__PURE__ */ h(X, { ...x, ref: a, variant: "simple", children: y }),
+    e.preventDefault(), e.stopPropagation();
+  }, ref: y, "data-component": "popover", children: [
+    o ? /* @__PURE__ */ h("span", { ...R, ref: a, role: "button", tabIndex: 0, children: x }) : /* @__PURE__ */ h(X, { ...R, ref: a, variant: "simple", children: x }),
     o && _ && typeof document < "u" ? U(_, document.body) : _
   ] });
 };

package/dist/components/popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (inline && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      openPopover();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    if (inline) event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        if (inline) event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      {inline ? (\n        <span\n          {...triggerProps}\n          ref={triggerRef}\n          role='button'\n          tabIndex={0}\n        >\n          {triggerButtonContent}\n        </span>\n      ) : (\n        <Button\n          {...triggerProps}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          variant='simple'\n        >\n          {triggerButtonContent}\n        </Button>\n      )}\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {\n  type AriaAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Button } from '@/components/button';\n\nimport styles from './styles.module.css';\n\nexport type PopoverCloseOptions = {\n  restoreFocus?: boolean;\n};\n\nexport type PopoverInitialFocus = 'first' | 'last';\n\nexport type PopoverRenderProps = {\n  close: (options?: PopoverCloseOptions) => void;\n  initialFocus?: PopoverInitialFocus;\n  isOpen: boolean;\n};\n\ntype PopoverOpenOptions = {\n  initialFocus?: PopoverInitialFocus;\n};\n\nexport type PopoverProps = {\n  children: ReactNode | ((props: PopoverRenderProps) => ReactNode);\n  inline?: boolean;\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  triggerAccessibleLabel,\n  triggerAriaHasPopup,\n  triggerButtonContent,\n}: PopoverProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const initialFocusRef = useRef<PopoverInitialFocus | undefined>(undefined);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const panelId = useId();\n  const triggerRef = useRef<HTMLButtonElement | HTMLSpanElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [opensAbove, setOpensAbove] = useState(false);\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>('right');\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement('right');\n    setIsOpen(true);\n  };\n\n  const closePopover = useCallback(({ restoreFocus = true }: PopoverCloseOptions = {}) => {\n    setIsOpen(false);\n\n    if (restoreFocus) {\n      triggerRef.current?.focus();\n    }\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (isOpen && event.key === 'Escape') {\n      closePopover();\n    }\n  };\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isOpen) {\n      return;\n    }\n\n    if (inline && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      openPopover();\n      return;\n    }\n\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'first' });\n      return;\n    }\n\n    if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      openPopover({ initialFocus: 'last' });\n    }\n  };\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const handlePointerDown = (event: MouseEvent) => {\n      const target = event.target as Node;\n      if (containerRef.current?.contains(target) || panelRef.current?.contains(target)) return;\n\n      closePopover({ restoreFocus: false });\n    };\n\n    document.addEventListener('mousedown', handlePointerDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handlePointerDown);\n    };\n  }, [closePopover, isOpen]);\n\n  const updatePosition = useCallback(() => {\n    const panel = panelRef.current;\n    const trigger = triggerRef.current;\n    if (!panel || !trigger) return;\n\n    const panelBounds = panel.getBoundingClientRect();\n    const triggerBounds = trigger.getBoundingClientRect();\n    const spaceAbove = triggerBounds.top;\n    const spaceBelow = window.innerHeight - triggerBounds.bottom;\n\n    setOpensAbove(panelBounds.height > spaceBelow && spaceAbove > spaceBelow);\n    setHorizontalPlacement(\n      panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : 'right'\n    );\n  }, []);\n\n  useLayoutEffect(() => {\n    if (!isOpen) return undefined;\n\n    updatePosition();\n    window.addEventListener('resize', updatePosition);\n    window.addEventListener('scroll', updatePosition, true);\n\n    return () => {\n      window.removeEventListener('resize', updatePosition);\n      window.removeEventListener('scroll', updatePosition, true);\n    };\n  }, [isOpen, updatePosition]);\n\n  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (isOpen) {\n      closePopover({ restoreFocus: false });\n    } else {\n      openPopover();\n    }\n  };\n\n  const triggerProps = {\n    'aria-controls': isOpen ? panelId : undefined,\n    'aria-expanded': isOpen,\n    'aria-haspopup': triggerAriaHasPopup,\n    'aria-label': triggerAccessibleLabel,\n    className: inline ? styles['inline-trigger'] : styles.trigger,\n    onClick: handleTriggerClick,\n    onKeyDown: handleTriggerKeyDown,\n  };\n\n  const triggerBounds = inline ? triggerRef.current?.getBoundingClientRect() : undefined;\n  const horizontalTransform = horizontalPlacement === 'left' ? 'translateX(-100%)' : '';\n  const verticalTransform = opensAbove ? 'translateY(calc(-100% - var(--shape-spacing-2xs)))' : '';\n  const inlineTransform = [horizontalTransform, verticalTransform].filter(Boolean).join(' ');\n  const panel = isOpen ? (\n    <div\n      className={cx(\n        styles['popover-panel'],\n        styles[opensAbove ? 'above' : 'below'],\n        inline && styles['inline-panel'],\n        !inline && styles[horizontalPlacement]\n      )}\n      data-horizontal-placement={horizontalPlacement}\n      data-placement={opensAbove ? 'above' : 'below'}\n      id={panelId}\n      ref={panelRef}\n      style={\n        triggerBounds\n          ? {\n              left: horizontalPlacement === 'left' ? triggerBounds.right : triggerBounds.left,\n              position: 'fixed',\n              top: opensAbove ? triggerBounds.top : triggerBounds.bottom,\n              transform: inlineTransform || undefined,\n            }\n          : undefined\n      }\n    >\n      {typeof children === 'function'\n        ? children({ close: closePopover, initialFocus: initialFocusRef.current, isOpen })\n        : children}\n    </div>\n  ) : null;\n\n  return (\n    <div\n      className={cx(styles.popover, inline && styles.inline)}\n      data-open={isOpen}\n      onKeyDown={handleKeyDown}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n      }}\n      ref={containerRef}\n    >\n      {inline ? (\n        <span\n          {...triggerProps}\n          ref={triggerRef}\n          role='button'\n          tabIndex={0}\n        >\n          {triggerButtonContent}\n        </span>\n      ) : (\n        <Button\n          {...triggerProps}\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          variant='simple'\n        >\n          {triggerButtonContent}\n        </Button>\n      )}\n      {inline && panel && typeof document !== 'undefined'\n        ? createPortal(panel, document.body)\n        : panel}\n    </div>\n  );\n};\n"],"names":["Popover","children","inline","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","horizontalPlacement","setHorizontalPlacement","openPopover","initialFocus","current","closePopover","useCallback","restoreFocus","focus","handleKeyDown","event","key","handleTriggerKeyDown","preventDefault","useEffect","handlePointerDown","target","contains","document","addEventListener","removeEventListener","updatePosition","panel","trigger","panelBounds","getBoundingClientRect","triggerBounds","spaceAbove","top","spaceBelow","window","innerHeight","bottom","height","width","innerWidth","left","right","useLayoutEffect","handleTriggerClick","stopPropagation","triggerProps","className","styles","onClick","onKeyDown","inlineTransform","filter","Boolean","join","jsx","cx","position","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}

package/dist/components/search/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const l=require("react/jsx-runtime"),_=require("react"),m=require("../button/index.cjs"),S=require("../checkbox/index.cjs"),B=require("../chip/index.cjs"),I=require("../collapsible/index.cjs"),T=require("../controls/index.cjs"),E=require("../dialog/index.cjs"),H=require("../header/index.cjs"),K=require("../../index-CWD8Jp0A.cjs"),P="_search_bp8f4_3",z="_controls_bp8f4_15",A="_chips_bp8f4_29",J="_radio_bp8f4_84",n={search:P,controls:z,chips:A,"filter-dialog":"_filter-dialog_bp8f4_36","filter-groups":"_filter-groups_bp8f4_41","filter-group":"_filter-group_bp8f4_41","filter-option":"_filter-option_bp8f4_66","option-copy":"_option-copy_bp8f4_72",radio:J,"collapsible-options":"_collapsible-options_bp8f4_111"},L=({closeLabel:k="Close",filterButtonLabel:x="Filters",filterDialogColumns:N=1,filterDialogTitle:q="Filters",filterGroups:d=[],onChange:$,onSelectedFiltersChange:c,removeFilterLabel:M=i=>`Remove ${i.label} filter`,resetLabel:C="Reset",searchLabel:D="Search",searchPlaceholder:O="Search",selectedFilters:t=[],value:w=""})=>{const i=_.useId(),[j,p]=_.useState(!1),R=_.useMemo(()=>new Map(d.flatMap(e=>{var s;return[...e.options,...((s=e.collapsible)==null?void 0:s.options)??[]]}).map(e=>[e.value,e])),[d]),b=t.flatMap(e=>{const s=R.get(e);return s?[s]:[]}),r=(e,s,a)=>{var y;if(!c)return;const h=new Set([...(a==null?void 0:a.options.map(o=>o.value))??[],...((y=a==null?void 0:a.collapsible)==null?void 0:y.options.map(o=>o.value))??[]]),u=t.filter(o=>!h.has(o));if(s&&(a==null?void 0:a.defaultValue)===e){c(u);return}c(s?(a==null?void 0:a.control)==="radio"||(a==null?void 0:a.selectionMode)==="single"?[...u,e]:[...new Set([...t,e])]:t.filter(o=>o!==e))},v=(e,s)=>{var a;return t.includes(e)||s.defaultValue===e&&![...s.options,...((a=s.collapsible)==null?void 0:a.options)??[]].some(h=>t.includes(h.value))},f=(e,s)=>l.jsx("div",{className:n["filter-option"],"data-component":"renderfilter",children:s.control==="radio"?l.jsxs("label",{className:n.radio,children:[l.jsx("input",{checked:v(e.value,s),name:`${i}-filter-${s.label??"group"}`,onChange:a=>r(e.value,a.target.checked,s),type:"radio"}),l.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&l.jsx("sub",{children:e.description})]})]}):l.jsx(S.Checkbox,{checked:v(e.value,s),label:l.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&l.jsx("sub",{children:e.description})]}),onChange:a=>r(e.value,a.target.checked,s)})},e.value);return l.jsxs("div",{className:n.search,"data-component":"search",children:[l.jsxs("div",{className:n.controls,children:[l.jsx(K.Input,{"aria-label":D,icon:"search",onChange:e=>$(e.target.value),placeholder:O,type:"search",value:w}),d.length>0&&l.jsx(m.Button,{"aria-expanded":j,"aria-haspopup":"dialog",badge:b.length,icon:"funnel",onClick:()=>p(!0),variant:"tertiary",children:x})]}),b.length>0&&l.jsxs("div",{"aria-label":x,className:n.chips,children:[b.map(e=>l.jsx(B.Chip,{accessibleLabel:M(e),label:e.label,onClick:()=>r(e.value,!1),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),r(e.value,!1))},role:"button"},e.value)),l.jsx(m.Button,{onClick:()=>c==null?void 0:c([]),variant:"tertiary",children:C})]}),j&&l.jsx(E.Dialog,{"aria-labelledby":i,className:n["filter-dialog"],controls:l.jsx(T.Controls,{children:l.jsx(m.Button,{onClick:()=>p(!1),children:k})}),header:l.jsx(H.Header,{children:l.jsx("h2",{id:i,children:q})}),open:!0,setOpen:p,children:l.jsx("div",{className:n["filter-groups"],"data-columns":N,children:d.map((e,s)=>l.jsxs("section",{"aria-labelledby":e.label?`${i}-${s}`:void 0,className:n["filter-group"],"data-column-span":e.columnSpan??1,role:e.control==="radio"?"radiogroup":"group",children:[e.label&&l.jsx("h3",{id:`${i}-${s}`,children:e.label}),e.options.map(a=>f(a,e)),e.collapsible&&l.jsx(I.Collapsible,{summary:e.collapsible.label,children:l.jsx("div",{className:n["collapsible-options"],children:e.collapsible.options.map(a=>f(a,e))})})]},e.label??s))})})]})};exports.Search=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const l=require("react/jsx-runtime"),_=require("react"),m=require("../button/index.cjs"),S=require("../checkbox/index.cjs"),B=require("../chip/index.cjs"),I=require("../collapsible/index.cjs"),T=require("../controls/index.cjs"),E=require("../dialog/index.cjs"),H=require("../header/index.cjs"),K=require("../../index-BcY9DZZ8.cjs"),P="_search_bp8f4_3",z="_controls_bp8f4_15",A="_chips_bp8f4_29",J="_radio_bp8f4_84",n={search:P,controls:z,chips:A,"filter-dialog":"_filter-dialog_bp8f4_36","filter-groups":"_filter-groups_bp8f4_41","filter-group":"_filter-group_bp8f4_41","filter-option":"_filter-option_bp8f4_66","option-copy":"_option-copy_bp8f4_72",radio:J,"collapsible-options":"_collapsible-options_bp8f4_111"},L=({closeLabel:k="Close",filterButtonLabel:x="Filters",filterDialogColumns:N=1,filterDialogTitle:q="Filters",filterGroups:d=[],onChange:$,onSelectedFiltersChange:c,removeFilterLabel:D=i=>`Remove ${i.label} filter`,resetLabel:M="Reset",searchLabel:O="Search",searchPlaceholder:w="Search",selectedFilters:t=[],value:C=""})=>{const i=_.useId(),[j,p]=_.useState(!1),R=_.useMemo(()=>new Map(d.flatMap(e=>{var s;return[...e.options,...((s=e.collapsible)==null?void 0:s.options)??[]]}).map(e=>[e.value,e])),[d]),b=t.flatMap(e=>{const s=R.get(e);return s?[s]:[]}),r=(e,s,a)=>{var y;if(!c)return;const h=new Set([...(a==null?void 0:a.options.map(o=>o.value))??[],...((y=a==null?void 0:a.collapsible)==null?void 0:y.options.map(o=>o.value))??[]]),u=t.filter(o=>!h.has(o));if(s&&(a==null?void 0:a.defaultValue)===e){c(u);return}c(s?(a==null?void 0:a.control)==="radio"||(a==null?void 0:a.selectionMode)==="single"?[...u,e]:[...new Set([...t,e])]:t.filter(o=>o!==e))},v=(e,s)=>{var a;return t.includes(e)||s.defaultValue===e&&![...s.options,...((a=s.collapsible)==null?void 0:a.options)??[]].some(h=>t.includes(h.value))},f=(e,s)=>l.jsx("div",{className:n["filter-option"],"data-component":"renderfilter",children:s.control==="radio"?l.jsxs("label",{className:n.radio,children:[l.jsx("input",{checked:v(e.value,s),name:`${i}-filter-${s.label??"group"}`,onChange:a=>r(e.value,a.target.checked,s),type:"radio"}),l.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&l.jsx("sub",{children:e.description})]})]}):l.jsx(S.Checkbox,{checked:v(e.value,s),label:l.jsxs("span",{className:n["option-copy"],children:[e.label,e.description&&l.jsx("sub",{children:e.description})]}),onChange:a=>r(e.value,a.target.checked,s)})},e.value);return l.jsxs("div",{className:n.search,"data-component":"search",children:[l.jsxs("div",{className:n.controls,children:[l.jsx(K.Input,{"aria-label":O,icon:"search",onChange:e=>$(e.target.value),placeholder:w,type:"search",value:C}),d.length>0&&l.jsx(m.Button,{"aria-expanded":j,"aria-haspopup":"dialog",badge:b.length,icon:"funnel",onClick:()=>p(!0),variant:"tertiary",children:x})]}),b.length>0&&l.jsxs("div",{"aria-label":x,className:n.chips,children:[b.map(e=>l.jsx(B.Chip,{accessibleLabel:D(e),label:e.label,onDelete:()=>r(e.value,!1),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),r(e.value,!1))},role:"button"},e.value)),l.jsx(m.Button,{onClick:()=>c==null?void 0:c([]),variant:"tertiary",children:M})]}),j&&l.jsx(E.Dialog,{"aria-labelledby":i,className:n["filter-dialog"],controls:l.jsx(T.Controls,{children:l.jsx(m.Button,{onClick:()=>p(!1),children:k})}),header:l.jsx(H.Header,{children:l.jsx("h2",{id:i,children:q})}),open:!0,setOpen:p,children:l.jsx("div",{className:n["filter-groups"],"data-columns":N,children:d.map((e,s)=>l.jsxs("section",{"aria-labelledby":e.label?`${i}-${s}`:void 0,className:n["filter-group"],"data-column-span":e.columnSpan??1,role:e.control==="radio"?"radiogroup":"group",children:[e.label&&l.jsx("h3",{id:`${i}-${s}`,children:e.label}),e.options.map(a=>f(a,e)),e.collapsible&&l.jsx(I.Collapsible,{summary:e.collapsible.label,children:l.jsx("div",{className:n["collapsible-options"],children:e.collapsible.options.map(a=>f(a,e))})})]},e.label??s))})})]})};exports.Search=L;
 //# sourceMappingURL=index.cjs.map

package/dist/components/search/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='search'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onClick={() => setFilterSelected(filter.value, false)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  setFilterSelected(filter.value, false);\n                }\n              }}\n              role='button'\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='search'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onDelete={() => setFilterSelected(filter.value, false)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  setFilterSelected(filter.value, false);\n                }\n              }}\n              role='button'\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}

package/dist/components/search/index.js

@@ -7,7 +7,7 @@ import { Collapsible as T } from "../collapsible/index.js";
 import { Controls as q } from "../controls/index.js";
 import { Dialog as z } from "../dialog/index.js";
 import { Header as A } from "../header/index.js";
-import { I as J } from "../../index-yIe5PqD1.js";
+import { I as J } from "../../index-ClZkChEh.js";
 import '../../assets/index9.css';const L = "_search_bp8f4_3", P = "_controls_bp8f4_15", Q = "_chips_bp8f4_29", U = "_radio_bp8f4_84", o = {
   search: L,
   controls: P,
@@ -20,12 +20,12 @@ import '../../assets/index9.css';const L = "_search_bp8f4_3", P = "_controls_bp8
   radio: U,
   "collapsible-options": "_collapsible-options_bp8f4_111"
 }, ea = ({
-  closeLabel: C = "Close",
+  closeLabel: D = "Close",
   filterButtonLabel: _ = "Filters",
-  filterDialogColumns: D = 1,
-  filterDialogTitle: M = "Filters",
+  filterDialogColumns: M = 1,
+  filterDialogTitle: w = "Filters",
   filterGroups: d = [],
-  onChange: w,
+  onChange: C,
   onSelectedFiltersChange: t,
   removeFilterLabel: O = (n) => `Remove ${n.label} filter`,
   resetLabel: x = "Reset",
@@ -43,16 +43,16 @@ import '../../assets/index9.css';const L = "_search_bp8f4_3", P = "_controls_bp8
   }), p = (a, l, e) => {
     var $;
     if (!t) return;
-    const b = /* @__PURE__ */ new Set([...(e == null ? void 0 : e.options.map((s) => s.value)) ?? [], ...(($ = e == null ? void 0 : e.collapsible) == null ? void 0 : $.options.map((s) => s.value)) ?? []]), N = r.filter((s) => !b.has(s));
+    const b = /* @__PURE__ */ new Set([...(e == null ? void 0 : e.options.map((s) => s.value)) ?? [], ...(($ = e == null ? void 0 : e.collapsible) == null ? void 0 : $.options.map((s) => s.value)) ?? []]), k = r.filter((s) => !b.has(s));
     if (l && (e == null ? void 0 : e.defaultValue) === a) {
-      t(N);
+      t(k);
       return;
     }
-    t(l ? (e == null ? void 0 : e.control) === "radio" || (e == null ? void 0 : e.selectionMode) === "single" ? [...N, a] : [.../* @__PURE__ */ new Set([...r, a])] : r.filter((s) => s !== a));
+    t(l ? (e == null ? void 0 : e.control) === "radio" || (e == null ? void 0 : e.selectionMode) === "single" ? [...k, a] : [.../* @__PURE__ */ new Set([...r, a])] : r.filter((s) => s !== a));
   }, y = (a, l) => {
     var e;
     return r.includes(a) || l.defaultValue === a && ![...l.options, ...((e = l.collapsible) == null ? void 0 : e.options) ?? []].some((b) => r.includes(b.value));
-  }, k = (a, l) => /* @__PURE__ */ i("div", { className: o["filter-option"], "data-component": "renderfilter", children: l.control === "radio" ? /* @__PURE__ */ c("label", { className: o.radio, children: [
+  }, N = (a, l) => /* @__PURE__ */ i("div", { className: o["filter-option"], "data-component": "renderfilter", children: l.control === "radio" ? /* @__PURE__ */ c("label", { className: o.radio, children: [
     /* @__PURE__ */ i("input", { checked: y(a.value, l), name: `${n}-filter-${l.label ?? "group"}`, onChange: (e) => p(a.value, e.target.checked, l), type: "radio" }),
     /* @__PURE__ */ c("span", { className: o["option-copy"], children: [
       a.label,
@@ -64,19 +64,19 @@ import '../../assets/index9.css';const L = "_search_bp8f4_3", P = "_controls_bp8
   ] }), onChange: (e) => p(a.value, e.target.checked, l) }) }, a.value);
   return /* @__PURE__ */ c("div", { className: o.search, "data-component": "search", children: [
     /* @__PURE__ */ c("div", { className: o.controls, children: [
-      /* @__PURE__ */ i(J, { "aria-label": I, icon: "search", onChange: (a) => w(a.target.value), placeholder: j, type: "search", value: u }),
+      /* @__PURE__ */ i(J, { "aria-label": I, icon: "search", onChange: (a) => C(a.target.value), placeholder: j, type: "search", value: u }),
       d.length > 0 && /* @__PURE__ */ i(f, { "aria-expanded": v, "aria-haspopup": "dialog", badge: h.length, icon: "funnel", onClick: () => m(!0), variant: "tertiary", children: _ })
     ] }),
     h.length > 0 && /* @__PURE__ */ c("div", { "aria-label": _, className: o.chips, children: [
-      h.map((a) => /* @__PURE__ */ i(S, { accessibleLabel: O(a), label: a.label, onClick: () => p(a.value, !1), onKeyDown: (l) => {
+      h.map((a) => /* @__PURE__ */ i(S, { accessibleLabel: O(a), label: a.label, onDelete: () => p(a.value, !1), onKeyDown: (l) => {
         (l.key === "Enter" || l.key === " ") && (l.preventDefault(), p(a.value, !1));
       }, role: "button" }, a.value)),
       /* @__PURE__ */ i(f, { onClick: () => t == null ? void 0 : t([]), variant: "tertiary", children: x })
     ] }),
-    v && /* @__PURE__ */ i(z, { "aria-labelledby": n, className: o["filter-dialog"], controls: /* @__PURE__ */ i(q, { children: /* @__PURE__ */ i(f, { onClick: () => m(!1), children: C }) }), header: /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i("h2", { id: n, children: M }) }), open: !0, setOpen: m, children: /* @__PURE__ */ i("div", { className: o["filter-groups"], "data-columns": D, children: d.map((a, l) => /* @__PURE__ */ c("section", { "aria-labelledby": a.label ? `${n}-${l}` : void 0, className: o["filter-group"], "data-column-span": a.columnSpan ?? 1, role: a.control === "radio" ? "radiogroup" : "group", children: [
+    v && /* @__PURE__ */ i(z, { "aria-labelledby": n, className: o["filter-dialog"], controls: /* @__PURE__ */ i(q, { children: /* @__PURE__ */ i(f, { onClick: () => m(!1), children: D }) }), header: /* @__PURE__ */ i(A, { children: /* @__PURE__ */ i("h2", { id: n, children: w }) }), open: !0, setOpen: m, children: /* @__PURE__ */ i("div", { className: o["filter-groups"], "data-columns": M, children: d.map((a, l) => /* @__PURE__ */ c("section", { "aria-labelledby": a.label ? `${n}-${l}` : void 0, className: o["filter-group"], "data-column-span": a.columnSpan ?? 1, role: a.control === "radio" ? "radiogroup" : "group", children: [
       a.label && /* @__PURE__ */ i("h3", { id: `${n}-${l}`, children: a.label }),
-      a.options.map((e) => k(e, a)),
-      a.collapsible && /* @__PURE__ */ i(T, { summary: a.collapsible.label, children: /* @__PURE__ */ i("div", { className: o["collapsible-options"], children: a.collapsible.options.map((e) => k(e, a)) }) })
+      a.options.map((e) => N(e, a)),
+      a.collapsible && /* @__PURE__ */ i(T, { summary: a.collapsible.label, children: /* @__PURE__ */ i("div", { className: o["collapsible-options"], children: a.collapsible.options.map((e) => N(e, a)) }) })
     ] }, a.label ?? l)) }) })
   ] });
 };

package/dist/components/search/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='search'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onClick={() => setFilterSelected(filter.value, false)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  setFilterSelected(filter.value, false);\n                }\n              }}\n              role='button'\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/search/index.tsx"],"sourcesContent":["import { useId, useMemo, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Checkbox } from '../checkbox';\nimport { Chip } from '../chip';\nimport { Collapsible } from '../collapsible';\nimport { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Header } from '../header';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  description?: string;\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  collapsible?: {\n    label: string;\n    options: readonly SearchFilter[];\n  };\n  columnSpan?: 1 | 2;\n  control?: 'checkbox' | 'radio';\n  defaultValue?: string;\n  label?: string;\n  options: readonly SearchFilter[];\n  selectionMode?: 'multiple' | 'single';\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\n  filterDialogColumns?: 1 | 2;\n  filterDialogTitle?: string;\n  filterGroups?: readonly SearchFilterGroup[];\n  onChange: (value: string) => void;\n  onSelectedFiltersChange?: (selectedFilters: string[]) => void;\n  removeFilterLabel?: (filter: SearchFilter) => string;\n  resetLabel?: string;\n  searchLabel?: string;\n  searchPlaceholder?: string;\n  selectedFilters?: readonly string[];\n  value?: string;\n};\n\nexport const Search = ({\n  closeLabel = 'Close',\n  filterButtonLabel = 'Filters',\n  filterDialogColumns = 1,\n  filterDialogTitle = 'Filters',\n  filterGroups = [],\n  onChange,\n  onSelectedFiltersChange,\n  removeFilterLabel = (filter) => `Remove ${filter.label} filter`,\n  resetLabel = 'Reset',\n  searchLabel = 'Search',\n  searchPlaceholder = 'Search',\n  selectedFilters = [],\n  value = '',\n}: SearchProps) => {\n  const dialogTitleId = useId();\n  const [isFilterDialogOpen, setIsFilterDialogOpen] = useState(false);\n  const filtersByValue = useMemo(\n    () =>\n      new Map(\n        filterGroups\n          .flatMap((group) => [...group.options, ...(group.collapsible?.options ?? [])])\n          .map((filter) => [filter.value, filter])\n      ),\n    [filterGroups]\n  );\n  const activeFilters = selectedFilters.flatMap((selectedFilter) => {\n    const filter = filtersByValue.get(selectedFilter);\n\n    return filter ? [filter] : [];\n  });\n\n  const setFilterSelected = (\n    filterValue: string,\n    isSelected: boolean,\n    group?: SearchFilterGroup\n  ) => {\n    if (!onSelectedFiltersChange) return;\n\n    const groupValues = new Set([\n      ...(group?.options.map((filter) => filter.value) ?? []),\n      ...(group?.collapsible?.options.map((filter) => filter.value) ?? []),\n    ]);\n    const filtersOutsideGroup = selectedFilters.filter(\n      (selectedFilter) => !groupValues.has(selectedFilter)\n    );\n\n    if (isSelected && group?.defaultValue === filterValue) {\n      onSelectedFiltersChange(filtersOutsideGroup);\n      return;\n    }\n\n    onSelectedFiltersChange(\n      isSelected\n        ? group?.control === 'radio' || group?.selectionMode === 'single'\n          ? [...filtersOutsideGroup, filterValue]\n          : [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\n  };\n\n  const isFilterSelected = (filterValue: string, group: SearchFilterGroup) =>\n    selectedFilters.includes(filterValue) ||\n    (group.defaultValue === filterValue &&\n      ![...group.options, ...(group.collapsible?.options ?? [])].some((filter) =>\n        selectedFilters.includes(filter.value)\n      ));\n\n  const renderFilter = (filter: SearchFilter, group: SearchFilterGroup) => (\n    <div\n      className={styles['filter-option']}\n      key={filter.value}\n    >\n      {group.control === 'radio' ? (\n        <label className={styles.radio}>\n          <input\n            checked={isFilterSelected(filter.value, group)}\n            name={`${dialogTitleId}-filter-${group.label ?? 'group'}`}\n            onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n            type='radio'\n          />\n          <span className={styles['option-copy']}>\n            {filter.label}\n            {filter.description && <sub>{filter.description}</sub>}\n          </span>\n        </label>\n      ) : (\n        <Checkbox\n          checked={isFilterSelected(filter.value, group)}\n          label={\n            <span className={styles['option-copy']}>\n              {filter.label}\n              {filter.description && <sub>{filter.description}</sub>}\n            </span>\n          }\n          onChange={(event) => setFilterSelected(filter.value, event.target.checked, group)}\n        />\n      )}\n    </div>\n  );\n\n  return (\n    <div\n      className={styles.search}\n      data-component='search'\n    >\n      <div className={styles.controls}>\n        <Input\n          aria-label={searchLabel}\n          icon='search'\n          onChange={(event) => onChange(event.target.value)}\n          placeholder={searchPlaceholder}\n          type='search'\n          value={value}\n        />\n        {filterGroups.length > 0 && (\n          <Button\n            aria-expanded={isFilterDialogOpen}\n            aria-haspopup='dialog'\n            badge={activeFilters.length}\n            icon='funnel'\n            onClick={() => setIsFilterDialogOpen(true)}\n            variant='tertiary'\n          >\n            {filterButtonLabel}\n          </Button>\n        )}\n      </div>\n      {activeFilters.length > 0 && (\n        <div\n          aria-label={filterButtonLabel}\n          className={styles.chips}\n        >\n          {activeFilters.map((filter) => (\n            <Chip\n              accessibleLabel={removeFilterLabel(filter)}\n              key={filter.value}\n              label={filter.label}\n              onDelete={() => setFilterSelected(filter.value, false)}\n              onKeyDown={(event) => {\n                if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  setFilterSelected(filter.value, false);\n                }\n              }}\n              role='button'\n            />\n          ))}\n          <Button\n            onClick={() => onSelectedFiltersChange?.([])}\n            variant='tertiary'\n          >\n            {resetLabel}\n          </Button>\n        </div>\n      )}\n      {isFilterDialogOpen && (\n        <Dialog\n          aria-labelledby={dialogTitleId}\n          className={styles['filter-dialog']}\n          controls={\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          }\n          header={\n            <Header>\n              <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            </Header>\n          }\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div\n            className={styles['filter-groups']}\n            data-columns={filterDialogColumns}\n          >\n            {filterGroups.map((group, groupIndex) => (\n              <section\n                aria-labelledby={group.label ? `${dialogTitleId}-${groupIndex}` : undefined}\n                className={styles['filter-group']}\n                data-column-span={group.columnSpan ?? 1}\n                key={group.label ?? groupIndex}\n                role={group.control === 'radio' ? 'radiogroup' : 'group'}\n              >\n                {group.label && <h3 id={`${dialogTitleId}-${groupIndex}`}>{group.label}</h3>}\n                {group.options.map((filter) => renderFilter(filter, group))}\n                {group.collapsible && (\n                  <Collapsible summary={group.collapsible.label}>\n                    <div className={styles['collapsible-options']}>\n                      {group.collapsible.options.map((filter) => renderFilter(filter, group))}\n                    </div>\n                  </Collapsible>\n                )}\n              </section>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogColumns","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","collapsible","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","groupValues","Set","filtersOutsideGroup","has","defaultValue","control","selectionMode","isFilterSelected","includes","some","renderFilter","jsx","styles","radio","event","target","checked","jsxs","description","Checkbox","search","controls","Input","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","undefined","columnSpan","Collapsible"],"mappings":"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"}