@solibo/solibo-ui 1.0.6 → 1.0.9

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  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  position = 'left',\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 preferredHorizontalPlacement = position === 'auto' ? 'right' : position;\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>(\n    preferredHorizontalPlacement\n  );\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement(preferredHorizontalPlacement);\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      position === 'auto' &&\n        panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : preferredHorizontalPlacement\n    );\n  }, [position, preferredHorizontalPlacement]);\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='secondary'\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","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","preferredHorizontalPlacement","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","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  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  position = 'left',\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 preferredHorizontalPlacement = position === 'auto' ? 'right' : position;\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>(\n    preferredHorizontalPlacement\n  );\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement(preferredHorizontalPlacement);\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      position === 'auto' &&\n        panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : preferredHorizontalPlacement\n    );\n  }, [position, preferredHorizontalPlacement]);\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","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","preferredHorizontalPlacement","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","transform","close","jsxs","popover","Button","createPortal","body"],"mappings":"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"}

package/dist/components/popover/index.js

@@ -23,7 +23,7 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
   triggerButtonContent: P
 }) => {
   var T;
-  const D = h(null), E = h(void 0), _ = h(null), k = S(), a = h(null), [o, B] = y(!1), [u, R] = y(!1), d = f === "auto" ? "right" : f, [g, x] = y(d), v = ({
+  const D = h(null), E = h(void 0), _ = h(null), k = S(), a = h(null), [o, B] = y(!1), [u, R] = y(!1), d = f === "auto" ? "right" : f, [g, x] = y(d), m = ({
     initialFocus: e
   } = {}) => {
     E.current = e, R(!1), x(d), B(!0);
@@ -37,16 +37,16 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
   }, H = (e) => {
     if (!o) {
       if (t && (e.key === "Enter" || e.key === " ")) {
-        e.preventDefault(), v();
+        e.preventDefault(), m();
         return;
       }
       if (e.key === "ArrowDown") {
-        e.preventDefault(), v({
+        e.preventDefault(), m({
           initialFocus: "first"
         });
         return;
       }
-      e.key === "ArrowUp" && (e.preventDefault(), v({
+      e.key === "ArrowUp" && (e.preventDefault(), m({
         initialFocus: "last"
       }));
     }
@@ -55,9 +55,9 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
     if (!o)
       return;
     const e = (s) => {
-      var n, m;
+      var n, v;
       const p = s.target;
-      (n = D.current) != null && n.contains(p) || (m = _.current) != null && m.contains(p) || l({
+      (n = D.current) != null && n.contains(p) || (v = _.current) != null && v.contains(p) || l({
         restoreFocus: !1
       });
     };
@@ -68,8 +68,8 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
   const i = A(() => {
     const e = _.current, s = a.current;
     if (!e || !s) return;
-    const p = e.getBoundingClientRect(), n = s.getBoundingClientRect(), m = n.top, C = window.innerHeight - n.bottom;
-    R(p.height > C && m > C), x(f === "auto" && p.width > window.innerWidth - n.left && n.right > window.innerWidth - n.left ? "left" : d);
+    const p = e.getBoundingClientRect(), n = s.getBoundingClientRect(), v = n.top, C = window.innerHeight - n.bottom;
+    R(p.height > C && v > C), x(f === "auto" && p.width > window.innerWidth - n.left && n.right > window.innerWidth - n.left ? "left" : d);
   }, [f, d]);
   X(() => {
     if (o)
@@ -80,7 +80,7 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
   const N = (e) => {
     t && e.preventDefault(), e.stopPropagation(), o ? l({
       restoreFocus: !1
-    }) : v();
+    }) : m();
   }, L = {
     "aria-controls": o ? k : void 0,
     "aria-expanded": o,
@@ -102,7 +102,7 @@ import '../../assets/index17.css';const G = "_popover_1szho_1", J = "_inline_1sz
   return /* @__PURE__ */ W("div", { className: F(r.popover, t && r.inline), "data-open": o, onKeyDown: j, onClick: (e) => {
     t && e.preventDefault(), e.stopPropagation();
   }, ref: D, "data-component": "popover", children: [
-    t ? /* @__PURE__ */ z("span", { ...L, ref: a, role: "button", tabIndex: 0, children: P }) : /* @__PURE__ */ z(q, { ...L, ref: a, variant: "secondary", children: P }),
+    t ? /* @__PURE__ */ z("span", { ...L, ref: a, role: "button", tabIndex: 0, children: P }) : /* @__PURE__ */ z(q, { ...L, ref: a, variant: "simple", children: P }),
     t && b && typeof document < "u" ? Y(b, document.body) : b
   ] });
 };

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  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  position = 'left',\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 preferredHorizontalPlacement = position === 'auto' ? 'right' : position;\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>(\n    preferredHorizontalPlacement\n  );\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement(preferredHorizontalPlacement);\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      position === 'auto' &&\n        panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : preferredHorizontalPlacement\n    );\n  }, [position, preferredHorizontalPlacement]);\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='secondary'\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","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","preferredHorizontalPlacement","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","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  position?: 'auto' | 'left' | 'right';\n  triggerAccessibleLabel?: string;\n  triggerAriaHasPopup?: AriaAttributes['aria-haspopup'];\n  triggerButtonContent: ReactNode;\n};\n\nexport const Popover = ({\n  children,\n  inline = false,\n  position = 'left',\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 preferredHorizontalPlacement = position === 'auto' ? 'right' : position;\n  const [horizontalPlacement, setHorizontalPlacement] = useState<'left' | 'right'>(\n    preferredHorizontalPlacement\n  );\n\n  const openPopover = ({ initialFocus }: PopoverOpenOptions = {}) => {\n    initialFocusRef.current = initialFocus;\n    setOpensAbove(false);\n    setHorizontalPlacement(preferredHorizontalPlacement);\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      position === 'auto' &&\n        panelBounds.width > window.innerWidth - triggerBounds.left &&\n        triggerBounds.right > window.innerWidth - triggerBounds.left\n        ? 'left'\n        : preferredHorizontalPlacement\n    );\n  }, [position, preferredHorizontalPlacement]);\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","position","triggerAccessibleLabel","triggerAriaHasPopup","triggerButtonContent","containerRef","useRef","initialFocusRef","undefined","panelRef","panelId","useId","triggerRef","isOpen","setIsOpen","useState","opensAbove","setOpensAbove","preferredHorizontalPlacement","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","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 n=require("react/jsx-runtime"),p=require("react"),h=require("../button/index.cjs"),N=require("../checkbox/index.cjs"),M=require("../chip/index.cjs"),w=require("../controls/index.cjs"),C=require("../dialog/index.cjs"),I=require("../../index-D9Hq7ewF.cjs"),O="_search_1tuej_3",R="_controls_1tuej_15",B="_chips_1tuej_29",t={search:O,controls:R,chips:B,"dialog-content":"_dialog-content_1tuej_36","filter-groups":"_filter-groups_1tuej_45","filter-group":"_filter-group_1tuej_45"},S=({closeLabel:j="Close",filterButtonLabel:_="Filters",filterDialogTitle:m="Filters",filterGroups:c=[],onChange:b,onSelectedFiltersChange:o,removeFilterLabel:g=i=>`Remove ${i.label} filter`,resetLabel:v="Reset",searchLabel:y="Search",searchPlaceholder:f="Search",selectedFilters:l=[],value:k=""})=>{const i=p.useId(),[x,r]=p.useState(!1),q=p.useMemo(()=>new Map(c.flatMap(e=>e.options).map(e=>[e.value,e])),[c]),u=l.flatMap(e=>{const s=q.get(e);return s?[s]:[]}),d=(e,s)=>{o&&o(s?[...new Set([...l,e])]:l.filter(a=>a!==e))};return n.jsxs("div",{className:t.search,"data-component":"search",children:[n.jsxs("div",{className:t.controls,children:[n.jsx(I.Input,{"aria-label":y,icon:"search",onChange:e=>b(e.target.value),placeholder:f,type:"search",value:k}),c.length>0&&n.jsx(h.Button,{"aria-expanded":x,"aria-haspopup":"dialog",badge:u.length,icon:"funnel",onClick:()=>r(!0),variant:"tertiary",children:_})]}),u.length>0&&n.jsxs("div",{"aria-label":_,className:t.chips,children:[u.map(e=>n.jsx(M.Chip,{accessibleLabel:g(e),label:e.label,onClick:()=>d(e.value,!1),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),d(e.value,!1))},role:"button"},e.value)),n.jsx(h.Button,{onClick:()=>o==null?void 0:o([]),variant:"tertiary",children:v})]}),x&&n.jsx(C.Dialog,{"aria-labelledby":i,onKeyDown:e=>{e.key==="Escape"&&r(!1)},open:!0,setOpen:r,children:n.jsxs("div",{className:t["dialog-content"],children:[n.jsx("h2",{id:i,children:m}),n.jsx("div",{className:t["filter-groups"],children:c.map((e,s)=>n.jsxs("fieldset",{className:t["filter-group"],children:[e.label&&n.jsx("legend",{children:e.label}),e.options.map(a=>n.jsx(N.Checkbox,{checked:l.includes(a.value),label:a.label,onChange:D=>d(a.value,D.target.checked)},a.value))]},e.label??s))}),n.jsx(w.Controls,{children:n.jsx(h.Button,{onClick:()=>r(!1),children:j})})]})})]})};exports.Search=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index9.css');const n=require("react/jsx-runtime"),h=require("react"),p=require("../button/index.cjs"),M=require("../checkbox/index.cjs"),N=require("../chip/index.cjs"),C=require("../controls/index.cjs"),I=require("../dialog/index.cjs"),O=require("../header/index.cjs"),R=require("../../index-CEzqxRIu.cjs"),w="_search_14b9n_3",B="_controls_14b9n_15",S="_chips_14b9n_29",o={search:w,controls:B,chips:S,"filter-groups":"_filter-groups_14b9n_36","filter-group":"_filter-group_14b9n_36"},T=({closeLabel:b="Close",filterButtonLabel:_="Filters",filterDialogTitle:m="Filters",filterGroups:l=[],onChange:j,onSelectedFiltersChange:c,removeFilterLabel:v=r=>`Remove ${r.label} filter`,resetLabel:g="Reset",searchLabel:y="Search",searchPlaceholder:k="Search",selectedFilters:t=[],value:f=""})=>{const r=h.useId(),[x,i]=h.useState(!1),q=h.useMemo(()=>new Map(l.flatMap(e=>e.options).map(e=>[e.value,e])),[l]),u=t.flatMap(e=>{const s=q.get(e);return s?[s]:[]}),d=(e,s)=>{c&&c(s?[...new Set([...t,e])]:t.filter(a=>a!==e))};return n.jsxs("div",{className:o.search,"data-component":"search",children:[n.jsxs("div",{className:o.controls,children:[n.jsx(R.Input,{"aria-label":y,icon:"search",onChange:e=>j(e.target.value),placeholder:k,type:"search",value:f}),l.length>0&&n.jsx(p.Button,{"aria-expanded":x,"aria-haspopup":"dialog",badge:u.length,icon:"funnel",onClick:()=>i(!0),variant:"tertiary",children:_})]}),u.length>0&&n.jsxs("div",{"aria-label":_,className:o.chips,children:[u.map(e=>n.jsx(N.Chip,{accessibleLabel:v(e),label:e.label,onClick:()=>d(e.value,!1),onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),d(e.value,!1))},role:"button"},e.value)),n.jsx(p.Button,{onClick:()=>c==null?void 0:c([]),variant:"tertiary",children:g})]}),x&&n.jsx(I.Dialog,{"aria-labelledby":r,controls:n.jsx(C.Controls,{children:n.jsx(p.Button,{onClick:()=>i(!1),children:b})}),header:n.jsx(O.Header,{children:n.jsx("h2",{id:r,children:m})}),open:!0,setOpen:i,children:n.jsx("div",{className:o["filter-groups"],children:l.map((e,s)=>n.jsxs("fieldset",{className:o["filter-group"],children:[e.label&&n.jsx("legend",{children:e.label}),e.options.map(a=>n.jsx(M.Checkbox,{checked:t.includes(a.value),label:a.label,onChange:D=>d(a.value,D.target.checked)},a.value))]},e.label??s))})})]})};exports.Search=T;
 //# 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 { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  label?: string;\n  options: readonly SearchFilter[];\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\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  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.flatMap((group) => group.options).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 = (filterValue: string, isSelected: boolean) => {\n    if (!onSelectedFiltersChange) return;\n\n    onSelectedFiltersChange(\n      isSelected\n        ? [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\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          onKeyDown={(event) => {\n            if (event.key === 'Escape') setIsFilterDialogOpen(false);\n          }}\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div className={styles['dialog-content']}>\n            <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            <div className={styles['filter-groups']}>\n              {filterGroups.map((group, groupIndex) => (\n                <fieldset\n                  className={styles['filter-group']}\n                  key={group.label ?? groupIndex}\n                >\n                  {group.label && <legend>{group.label}</legend>}\n                  {group.options.map((filter) => (\n                    <Checkbox\n                      checked={selectedFilters.includes(filter.value)}\n                      key={filter.value}\n                      label={filter.label}\n                      onChange={(event) => setFilterSelected(filter.value, event.target.checked)}\n                    />\n                  ))}\n                </fieldset>\n              ))}\n            </div>\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","Set","styles","search","jsxs","controls","jsx","Input","event","target","length","Button","chips","Chip","key","preventDefault","Dialog","groupIndex","Checkbox","includes","checked","Controls"],"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 { 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  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  label?: string;\n  options: readonly SearchFilter[];\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\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  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.flatMap((group) => group.options).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 = (filterValue: string, isSelected: boolean) => {\n    if (!onSelectedFiltersChange) return;\n\n    onSelectedFiltersChange(\n      isSelected\n        ? [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\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          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 className={styles['filter-groups']}>\n            {filterGroups.map((group, groupIndex) => (\n              <fieldset\n                className={styles['filter-group']}\n                key={group.label ?? groupIndex}\n              >\n                {group.label && <legend>{group.label}</legend>}\n                {group.options.map((filter) => (\n                  <Checkbox\n                    checked={selectedFilters.includes(filter.value)}\n                    key={filter.value}\n                    label={filter.label}\n                    onChange={(event) => setFilterSelected(filter.value, event.target.checked)}\n                  />\n                ))}\n              </fieldset>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","Set","styles","search","jsxs","controls","jsx","Input","event","target","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","Checkbox","includes","checked"],"mappings":"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"}

package/dist/components/search/index.js

@@ -1,62 +1,56 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { useId as I, useState as w, useMemo as C } from "react";
-import { Button as m } from "../button/index.js";
-import { Checkbox as M } from "../checkbox/index.js";
-import { Chip as O } from "../chip/index.js";
-import { Controls as E } from "../controls/index.js";
-import { Dialog as K } from "../dialog/index.js";
-import { I as R } from "../../index-D4LZQ-JF.js";
-import '../../assets/index9.css';const B = "_search_1tuej_3", T = "_controls_1tuej_15", $ = "_chips_1tuej_29", r = {
-  search: B,
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useId as C, useState as M, useMemo as w } from "react";
+import { Button as d } from "../button/index.js";
+import { Checkbox as O } from "../checkbox/index.js";
+import { Chip as j } from "../chip/index.js";
+import { Controls as R } from "../controls/index.js";
+import { Dialog as B } from "../dialog/index.js";
+import { Header as E } from "../header/index.js";
+import { I as H } from "../../index-BHgGZxsR.js";
+import '../../assets/index9.css';const K = "_search_14b9n_3", T = "_controls_14b9n_15", $ = "_chips_14b9n_29", n = {
+  search: K,
   controls: T,
   chips: $,
-  "dialog-content": "_dialog-content_1tuej_36",
-  "filter-groups": "_filter-groups_1tuej_45",
-  "filter-group": "_filter-group_1tuej_45"
-}, S = ({
-  closeLabel: _ = "Close",
+  "filter-groups": "_filter-groups_14b9n_36",
+  "filter-group": "_filter-group_14b9n_36"
+}, V = ({
+  closeLabel: f = "Close",
   filterButtonLabel: u = "Filters",
-  filterDialogTitle: b = "Filters",
+  filterDialogTitle: v = "Filters",
   filterGroups: c = [],
-  onChange: v,
-  onSelectedFiltersChange: t,
-  removeFilterLabel: g = (s) => `Remove ${s.label} filter`,
-  resetLabel: y = "Reset",
-  searchLabel: k = "Search",
-  searchPlaceholder: j = "Search",
-  selectedFilters: i = [],
+  onChange: _,
+  onSelectedFiltersChange: o,
+  removeFilterLabel: g = (i) => `Remove ${i.label} filter`,
+  resetLabel: k = "Reset",
+  searchLabel: y = "Search",
+  searchPlaceholder: x = "Search",
+  selectedFilters: s = [],
   value: D = ""
 }) => {
-  const s = I(), [f, p] = w(!1), N = C(() => new Map(c.flatMap((e) => e.options).map((e) => [e.value, e])), [c]), h = i.flatMap((e) => {
-    const l = N.get(e);
+  const i = C(), [b, p] = M(!1), I = w(() => new Map(c.flatMap((a) => a.options).map((a) => [a.value, a])), [c]), h = s.flatMap((a) => {
+    const l = I.get(a);
     return l ? [l] : [];
-  }), d = (e, l) => {
-    t && t(l ? [.../* @__PURE__ */ new Set([...i, e])] : i.filter((o) => o !== e));
+  }), m = (a, l) => {
+    o && o(l ? [.../* @__PURE__ */ new Set([...s, a])] : s.filter((r) => r !== a));
   };
-  return /* @__PURE__ */ n("div", { className: r.search, "data-component": "search", children: [
-    /* @__PURE__ */ n("div", { className: r.controls, children: [
-      /* @__PURE__ */ a(R, { "aria-label": k, icon: "search", onChange: (e) => v(e.target.value), placeholder: j, type: "search", value: D }),
-      c.length > 0 && /* @__PURE__ */ a(m, { "aria-expanded": f, "aria-haspopup": "dialog", badge: h.length, icon: "funnel", onClick: () => p(!0), variant: "tertiary", children: u })
+  return /* @__PURE__ */ t("div", { className: n.search, "data-component": "search", children: [
+    /* @__PURE__ */ t("div", { className: n.controls, children: [
+      /* @__PURE__ */ e(H, { "aria-label": y, icon: "search", onChange: (a) => _(a.target.value), placeholder: x, type: "search", value: D }),
+      c.length > 0 && /* @__PURE__ */ e(d, { "aria-expanded": b, "aria-haspopup": "dialog", badge: h.length, icon: "funnel", onClick: () => p(!0), variant: "tertiary", children: u })
     ] }),
-    h.length > 0 && /* @__PURE__ */ n("div", { "aria-label": u, className: r.chips, children: [
-      h.map((e) => /* @__PURE__ */ a(O, { accessibleLabel: g(e), label: e.label, onClick: () => d(e.value, !1), onKeyDown: (l) => {
-        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), d(e.value, !1));
-      }, role: "button" }, e.value)),
-      /* @__PURE__ */ a(m, { onClick: () => t == null ? void 0 : t([]), variant: "tertiary", children: y })
+    h.length > 0 && /* @__PURE__ */ t("div", { "aria-label": u, className: n.chips, children: [
+      h.map((a) => /* @__PURE__ */ e(j, { accessibleLabel: g(a), label: a.label, onClick: () => m(a.value, !1), onKeyDown: (l) => {
+        (l.key === "Enter" || l.key === " ") && (l.preventDefault(), m(a.value, !1));
+      }, role: "button" }, a.value)),
+      /* @__PURE__ */ e(d, { onClick: () => o == null ? void 0 : o([]), variant: "tertiary", children: k })
     ] }),
-    f && /* @__PURE__ */ a(K, { "aria-labelledby": s, onKeyDown: (e) => {
-      e.key === "Escape" && p(!1);
-    }, open: !0, setOpen: p, children: /* @__PURE__ */ n("div", { className: r["dialog-content"], children: [
-      /* @__PURE__ */ a("h2", { id: s, children: b }),
-      /* @__PURE__ */ a("div", { className: r["filter-groups"], children: c.map((e, l) => /* @__PURE__ */ n("fieldset", { className: r["filter-group"], children: [
-        e.label && /* @__PURE__ */ a("legend", { children: e.label }),
-        e.options.map((o) => /* @__PURE__ */ a(M, { checked: i.includes(o.value), label: o.label, onChange: (x) => d(o.value, x.target.checked) }, o.value))
-      ] }, e.label ?? l)) }),
-      /* @__PURE__ */ a(E, { children: /* @__PURE__ */ a(m, { onClick: () => p(!1), children: _ }) })
-    ] }) })
+    b && /* @__PURE__ */ e(B, { "aria-labelledby": i, controls: /* @__PURE__ */ e(R, { children: /* @__PURE__ */ e(d, { onClick: () => p(!1), children: f }) }), header: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e("h2", { id: i, children: v }) }), open: !0, setOpen: p, children: /* @__PURE__ */ e("div", { className: n["filter-groups"], children: c.map((a, l) => /* @__PURE__ */ t("fieldset", { className: n["filter-group"], children: [
+      a.label && /* @__PURE__ */ e("legend", { children: a.label }),
+      a.options.map((r) => /* @__PURE__ */ e(O, { checked: s.includes(r.value), label: r.label, onChange: (N) => m(r.value, N.target.checked) }, r.value))
+    ] }, a.label ?? l)) }) })
   ] });
 };
 export {
-  S as Search
+  V as Search
 };
 //# sourceMappingURL=index.js.map

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 { Controls } from '../controls';\nimport { Dialog } from '../dialog';\nimport { Input } from '../input';\nimport styles from './styles.module.css';\n\nexport type SearchFilter = {\n  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  label?: string;\n  options: readonly SearchFilter[];\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\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  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.flatMap((group) => group.options).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 = (filterValue: string, isSelected: boolean) => {\n    if (!onSelectedFiltersChange) return;\n\n    onSelectedFiltersChange(\n      isSelected\n        ? [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\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          onKeyDown={(event) => {\n            if (event.key === 'Escape') setIsFilterDialogOpen(false);\n          }}\n          open\n          setOpen={setIsFilterDialogOpen}\n        >\n          <div className={styles['dialog-content']}>\n            <h2 id={dialogTitleId}>{filterDialogTitle}</h2>\n            <div className={styles['filter-groups']}>\n              {filterGroups.map((group, groupIndex) => (\n                <fieldset\n                  className={styles['filter-group']}\n                  key={group.label ?? groupIndex}\n                >\n                  {group.label && <legend>{group.label}</legend>}\n                  {group.options.map((filter) => (\n                    <Checkbox\n                      checked={selectedFilters.includes(filter.value)}\n                      key={filter.value}\n                      label={filter.label}\n                      onChange={(event) => setFilterSelected(filter.value, event.target.checked)}\n                    />\n                  ))}\n                </fieldset>\n              ))}\n            </div>\n            <Controls>\n              <Button onClick={() => setIsFilterDialogOpen(false)}>{closeLabel}</Button>\n            </Controls>\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","Set","styles","search","jsxs","controls","jsx","Input","event","target","length","Button","chips","Chip","key","preventDefault","Dialog","groupIndex","Checkbox","includes","checked","Controls"],"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 { 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  label: string;\n  value: string;\n};\n\nexport type SearchFilterGroup = {\n  label?: string;\n  options: readonly SearchFilter[];\n};\n\nexport type SearchProps = {\n  closeLabel?: string;\n  filterButtonLabel?: string;\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  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.flatMap((group) => group.options).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 = (filterValue: string, isSelected: boolean) => {\n    if (!onSelectedFiltersChange) return;\n\n    onSelectedFiltersChange(\n      isSelected\n        ? [...new Set([...selectedFilters, filterValue])]\n        : selectedFilters.filter((selectedFilter) => selectedFilter !== filterValue)\n    );\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          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 className={styles['filter-groups']}>\n            {filterGroups.map((group, groupIndex) => (\n              <fieldset\n                className={styles['filter-group']}\n                key={group.label ?? groupIndex}\n              >\n                {group.label && <legend>{group.label}</legend>}\n                {group.options.map((filter) => (\n                  <Checkbox\n                    checked={selectedFilters.includes(filter.value)}\n                    key={filter.value}\n                    label={filter.label}\n                    onChange={(event) => setFilterSelected(filter.value, event.target.checked)}\n                  />\n                ))}\n              </fieldset>\n            ))}\n          </div>\n        </Dialog>\n      )}\n    </div>\n  );\n};\n"],"names":["Search","closeLabel","filterButtonLabel","filterDialogTitle","filterGroups","onChange","onSelectedFiltersChange","removeFilterLabel","filter","label","resetLabel","searchLabel","searchPlaceholder","selectedFilters","value","dialogTitleId","useId","isFilterDialogOpen","setIsFilterDialogOpen","useState","filtersByValue","useMemo","Map","flatMap","group","options","map","activeFilters","selectedFilter","get","setFilterSelected","filterValue","isSelected","Set","styles","search","jsxs","controls","jsx","Input","event","target","length","Button","chips","Chip","key","preventDefault","Dialog","Controls","Header","groupIndex","Checkbox","includes","checked"],"mappings":"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"}

package/dist/components/select/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-BoBeAmLe.cjs");const e=require("../../index-Ct0mJ-KK.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Select=e.Select;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-Dx0NQYLH.cjs");const e=require("../../index-BPIK2dxs.cjs");require("../../use-touched-D_TJ8wDc.cjs");exports.Select=e.Select;
 //# sourceMappingURL=index.cjs.map

package/dist/components/select/index.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../classix-DG18itHa.js";
-import "../../icons-Dhj9mAkR.js";
-import { S as e } from "../../index-uQRsVtP-.js";
+import "../../icons-BFgf_lJN.js";
+import { S as e } from "../../index-C_YiNpZP.js";
 import "../../use-touched-DXIJVVzz.js";
 export {
   e as Select

package/dist/components/sortable/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const H=require("react/jsx-runtime"),O=require("../../classix-5H4IWnMA.cjs"),c=require("react"),G=require("../list/index.cjs"),J="_sortable_12gha_1",K="_dragging_12gha_13",Q="_dropping_12gha_28",tt="_columns_12gha_42",et="_pseudo_12gha_51",f={sortable:J,dragging:K,dropping:Q,columns:tt,pseudo:et,"target-above":"_target-above_12gha_66","target-below":"_target-below_12gha_67"},X=c.createContext(null);function nt(){return c.useContext(X)}function rt({children:M,className:$,columns:E=1,isRearranging:x=!1,onChangeOrder:k,...A}){const B=Number.isFinite(E)?Math.max(1,Math.floor(E)):1,S=c.useMemo(()=>c.Children.toArray(M),[M]),u=c.useRef(-1),R=c.useMemo(()=>typeof window<"u"&&(navigator.maxTouchPoints>0||window.matchMedia("(pointer: coarse)").matches),[]),i=c.useRef(!1),D=c.useRef(null),v=c.useRef(null),b=c.useRef(null),T=c.useRef(!1),_=c.useRef(null),d=c.useRef(null),[w,F]=c.useState({height:0,width:0}),[h,g]=c.useState(null),[z,q]=c.useState(null),L={...A.style,"--height":`calc(${w.height}px - var(--scale-16))`,"--width":B>1?`calc(${w.width}px - var(--scale-16))`:`${w.width}px`},V=o=>{k(o.map((t,s)=>({id:String(c.isValidElement(t)?t.props["data-id"]??`idx-${s}`:`idx-${s}`),weight:o.length-1-s})))},y=(o,t)=>{if(t<0||t>=S.length||o===t)return;const s=S.slice(),[e]=s.splice(o,1);s.splice(t,0,e),q(t),V(s)},m=()=>{v.current!==null&&(clearTimeout(v.current),v.current=null)},C=()=>{d.current!==null&&(cancelAnimationFrame(d.current),d.current=null)},W=o=>{let t=(o==null?void 0:o.parentElement)??null;for(;t;){const{overflowY:s}=window.getComputedStyle(t);if(/(auto|scroll|overlay)/.test(s)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return document.scrollingElement instanceof HTMLElement?document.scrollingElement:null},P=()=>{m(),C(),_.current=null,i.current=!1,D.current=null,b.current=null,T.current=!1,u.current=-1,g(null)},U=o=>o instanceof Element&&!!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'),Y=(o,t)=>{var N;const s=(N=document.elementFromPoint(o,t))==null?void 0:N.closest("[data-sortable-index]");if(!s)return;const e=Number(s.dataset.sortableIndex),n=u.current;if(!Number.isInteger(e)||n<0||e===n)return;const r=s.getBoundingClientRect(),a=e===n+1?w.height:r.height,l=t>r.top+a/2?e+1:e,I=l>n?l-1:l;D.current=I,g(I)},Z=o=>{const t=W(o);if(!t)return;const s=72,e=18,n=()=>{if(!i.current){d.current=null;return}const r=_.current;if(!r){d.current=requestAnimationFrame(n);return}const a=t===document.scrollingElement?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect();let p=0;if(r.y<a.top+s){const l=Math.max(0,r.y-a.top);p=-e*(1-l/s)}else if(r.y>a.bottom-s){const l=Math.max(0,a.bottom-r.y);p=e*(1-l/s)}p!==0&&(t.scrollBy({top:p,behavior:"auto"}),Y(r.x,r.y)),d.current=requestAnimationFrame(n)};C(),d.current=requestAnimationFrame(n)},j=()=>{u.current=-1,g(null)};return c.useEffect(()=>{x||q(null)},[x]),c.useEffect(()=>()=>{m(),C()},[]),c.useEffect(()=>{const o=t=>{i.current&&t.preventDefault()};return window.addEventListener("touchmove",o,{passive:!1}),()=>{m(),window.removeEventListener("touchmove",o)}},[]),H.jsx(G.List,{className:O.t($,f.sortable,B>1&&f.columns),columns:E,ordered:!0,style:L,...A,"data-component":"sortable",children:S.map((o,t)=>{const s=c.isValidElement(o)?o.key:null;return H.jsx("li",{"data-sortable-index":t,onClickCapture:e=>{T.current&&(e.preventDefault(),e.stopPropagation(),T.current=!1)},className:O.t(h!==null&&h>t-10&&h<t+10&&f.pseudo,h===t&&u.current<t&&f["target-below"],h===t&&u.current>t&&f["target-above"],u.current===t&&f.dragging,z===t&&x&&f.dropping),onContextMenu:e=>{(i.current||v.current!==null)&&e.preventDefault()},onTouchStart:e=>{if(x||U(e.target))return;const n=e.touches[0];if(!n)return;const r=e.currentTarget;b.current={index:t,x:n.clientX,y:n.clientY},m(),v.current=setTimeout(()=>{u.current=t,i.current=!0,D.current=t,T.current=!0,F({height:r.offsetHeight,width:r.offsetWidth}),g(t),_.current={x:n.clientX,y:n.clientY},Z(r)},350)},onTouchMove:e=>{const n=e.touches[0];if(n){if(_.current={x:n.clientX,y:n.clientY},!i.current){const r=b.current;if(!r)return;Math.hypot(n.clientX-r.x,n.clientY-r.y)>8&&(m(),b.current=null);return}Y(n.clientX,n.clientY)}},onTouchEnd:e=>{if(m(),!i.current){b.current=null;return}e.preventDefault();const n=u.current,r=D.current;n>=0&&r!==null&&n!==r&&y(n,r),P()},onTouchCancel:()=>P(),draggable:!x&&!R,onDragEnd:()=>j(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const n=u.current;if(n<0||n===t)return;const r=e.currentTarget.getBoundingClientRect(),a=t===n+1?w.height:r.height,l=e.clientY>r.top+a/2?t+1:t,I=l>n?l-1:l;g(I)},onDragStart:e=>{if(R){e.preventDefault();return}u.current=t,F({height:e.currentTarget.offsetHeight,width:e.currentTarget.offsetWidth}),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move",g(t)},onDrop:e=>{e.preventDefault();const n=u.current,r=h;n<0||r===null||n===r||(y(n,r),j())},"data-component":"sortable",children:H.jsx(X.Provider,{value:{canMoveDown:t<S.length-1,canMoveUp:t>0,index:t,moveDown:()=>y(t,t+1),moveUp:()=>y(t,t-1)},children:o})},s??t)})})}exports.Sortable=rt;exports.useOptionalSortableItem=nt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index8.css');const q=require("react/jsx-runtime"),X=require("../../classix-5H4IWnMA.cjs"),s=require("react"),Z=require("../list/index.cjs"),G="_sortable_iw0r0_1",J="_dragging_iw0r0_13",K="_columns_iw0r0_38",Q="_pseudo_iw0r0_47",b={sortable:G,dragging:J,columns:K,pseudo:Q,"target-above":"_target-above_iw0r0_62","target-below":"_target-below_iw0r0_63"},k=s.createContext(null);function tt(){return s.useContext(k)}const h=a=>Number.parseFloat(a)||0,et=a=>{const w=a.firstElementChild,i=a.getBoundingClientRect();if(w){const y=w.getBoundingClientRect();return{borderRadius:window.getComputedStyle(w).borderRadius,height:y.height,width:y.width,wrapperHeight:i.height}}const u=window.getComputedStyle(a),A=h(u.borderLeftWidth)+h(u.borderRightWidth)+h(u.paddingLeft)+h(u.paddingRight),T=h(u.borderBottomWidth)+h(u.borderTopWidth)+h(u.paddingBottom)+h(u.paddingTop);return{borderRadius:u.borderRadius,height:Math.max(0,i.height-T),width:Math.max(0,i.width-A),wrapperHeight:i.height}};function nt({children:a,className:w,columns:i=1,isRearranging:u=!1,onChangeOrder:A,...T}){const y=Number.isFinite(i)?Math.max(1,Math.floor(i)):1,R=s.useMemo(()=>s.Children.toArray(a),[a]),l=s.useRef(-1),L=s.useMemo(()=>typeof window<"u"&&(navigator.maxTouchPoints>0||window.matchMedia("(pointer: coarse)").matches),[]),p=s.useRef(!1),_=s.useRef(null),v=s.useRef(null),x=s.useRef(null),I=s.useRef(0),C=s.useRef(null),g=s.useRef(null),E=s.useRef(o=>o.preventDefault()).current,[M,O]=s.useState({borderRadius:"0px",height:0,width:0,wrapperHeight:0}),[m,S]=s.useState(null),W={...T.style,"--sortable-placeholder-height":`${M.height}px`,"--sortable-placeholder-radius":M.borderRadius,"--sortable-placeholder-width":`${M.width}px`},H=(o,t)=>{if(t<0||t>=R.length||o===t)return;const c=R.slice(),[e]=c.splice(o,1);c.splice(t,0,e),A(c.map((n,r)=>({id:String(s.isValidElement(n)?n.props["data-id"]??`idx-${r}`:`idx-${r}`),weight:c.length-1-r})))},D=()=>{v.current!==null&&(clearTimeout(v.current),v.current=null)},B=()=>{g.current!==null&&(cancelAnimationFrame(g.current),g.current=null)},$=o=>{let t=(o==null?void 0:o.parentElement)??null;for(;t;){const{overflowY:c}=window.getComputedStyle(t);if(/(auto|scroll|overlay)/.test(c)&&t.scrollHeight>t.clientHeight)return t;t=t.parentElement}return document.scrollingElement instanceof HTMLElement?document.scrollingElement:null},P=(o=!1)=>{D(),B(),window.removeEventListener("touchmove",E),C.current=null,p.current=!1,_.current=null,x.current=null,I.current=o?Date.now()+500:0,l.current=-1,S(null)},N=(o,t)=>{l.current=o,O(et(t)),S(o)},U=o=>o instanceof Element&&!!o.closest('button, a, input, textarea, select, option, [role="button"], [contenteditable="true"]'),Y=(o,t,c)=>{const e=l.current;if(!Number.isInteger(t)||e<0||t===e)return null;const n=o.getBoundingClientRect(),r=t===e+1?M.wrapperHeight:n.height,d=c>n.top+r/2?t+1:t;return d>e?d-1:d},j=(o,t)=>{var n;const c=(n=document.elementFromPoint(o,t))==null?void 0:n.closest("[data-sortable-index]");if(!c)return;const e=Y(c,Number(c.dataset.sortableIndex),t);e!==null&&(_.current=e,S(e))},V=o=>{const t=$(o);if(!t)return;const c=72,e=18,n=()=>{if(!p.current){g.current=null;return}const r=C.current;if(!r){g.current=requestAnimationFrame(n);return}const f=t===document.scrollingElement?{top:0,bottom:window.innerHeight}:t.getBoundingClientRect();let d=0;if(r.y<f.top+c){const F=Math.max(0,r.y-f.top);d=-e*(1-F/c)}else if(r.y>f.bottom-c){const F=Math.max(0,f.bottom-r.y);d=e*(1-F/c)}d!==0&&(t.scrollBy({top:d,behavior:"auto"}),j(r.x,r.y)),g.current=requestAnimationFrame(n)};B(),g.current=requestAnimationFrame(n)},z=()=>{l.current=-1,S(null)};return s.useEffect(()=>()=>{D(),B(),window.removeEventListener("touchmove",E)},[E]),q.jsx(Z.List,{className:X.t(w,b.sortable,y>1&&b.columns),columns:i,ordered:!0,style:W,...T,"data-component":"sortable",children:R.map((o,t)=>{const c=s.isValidElement(o)?o.key:null;return q.jsx("li",{"data-sortable-index":t,onClickCapture:e=>{I.current<=Date.now()||(e.preventDefault(),e.stopPropagation(),I.current=0)},className:X.t(m!==null&&m>t-10&&m<t+10&&b.pseudo,m===t&&l.current<t&&b["target-below"],m===t&&l.current>t&&b["target-above"],l.current===t&&b.dragging),onContextMenu:e=>{(p.current||v.current!==null)&&e.preventDefault()},onTouchStart:e=>{if(u||U(e.target))return;I.current=0;const n=e.touches[0];if(!n)return;const r=e.currentTarget;x.current={x:n.clientX,y:n.clientY},D(),v.current=setTimeout(()=>{N(t,r),p.current=!0,_.current=t,C.current={x:n.clientX,y:n.clientY},window.addEventListener("touchmove",E,{passive:!1}),V(r)},350)},onTouchMove:e=>{const n=e.touches[0];if(n){if(C.current={x:n.clientX,y:n.clientY},!p.current){const r=x.current;if(!r)return;Math.hypot(n.clientX-r.x,n.clientY-r.y)>8&&(D(),x.current=null);return}j(n.clientX,n.clientY)}},onTouchEnd:e=>{if(D(),!p.current){x.current=null;return}e.preventDefault();const n=l.current,r=_.current;n>=0&&r!==null&&n!==r&&H(n,r),P(!0)},onTouchCancel:()=>P(),draggable:!u&&!L,onDragEnd:()=>z(),onDragOver:e=>{e.preventDefault(),e.dataTransfer.dropEffect="move";const n=Y(e.currentTarget,t,e.clientY);n!==null&&S(n)},onDragStart:e=>{if(L){e.preventDefault();return}N(t,e.currentTarget),e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move"},onDrop:e=>{e.preventDefault();const n=l.current,r=m;n<0||r===null||n===r||(H(n,r),z())},"data-component":"sortable",children:q.jsx(k.Provider,{value:{canMoveDown:t<R.length-1,canMoveUp:t>0,index:t,moveDown:()=>H(t,t+1),moveUp:()=>H(t,t-1)},children:o})},c??t)})})}exports.Sortable=nt;exports.useOptionalSortableItem=tt;
 //# sourceMappingURL=index.cjs.map