@flanksource/clicky-ui 0.3.17 → 0.3.18

package/dist/components/TreePickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreePickerField.cjs","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    anchorRef.current?.focus();\n  });\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = anchorRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        disabled={disabled}\n        aria-haspopup=\"tree\"\n        aria-expanded={open}\n        onClick={() => setOpen((o) => !o)}\n        className={cn(\n          \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n          size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n          \"pr-8\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          triggerClassName,\n        )}\n      >\n        <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n          {label ?? placeholder}\n        </span>\n        <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n          <Icon icon={UiChevronDown} className=\"text-xs\" />\n        </span>\n      </button>\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              // Grow to fit the widest row/toolbar, but never narrower than the\n              // trigger nor wider than maxWidth — so labels show in full and the\n              // toolbar's intrinsic-width search input never forces a scrollbar.\n              minWidth: pos.width,\n              width: \"max-content\",\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEscapeLayer","useLayoutEffect","useEffect","jsxs","cn","inputSizeClass","jsx","Icon","UiChevronDown","createPortal","Tree"],"mappings":";;;;;;;;;;;AAWA,MAAM,qBAAqB;AAiCpB,SAAS,gBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA;AAAAA,IACpB;AAAA,EAAA;AAEF,QAAM,UAAUC,MAAAA,OAAuB,IAAI;AAC3C,QAAM,YAAYA,MAAAA,OAA0B,IAAI;AAChD,QAAM,WAAWA,MAAAA,OAAuB,IAAI;AAE5CC,aAAAA,eAAe,MAAM,MAAM;;AACzB,YAAQ,KAAK;AACb,oBAAU,YAAV,mBAAmB;AAAA,EACrB,CAAC;AAGDC,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AACT,aAAO,IAAI;AACX;AAAA,IACF;AACA,UAAM,SAAS,MAAM;AACnB,YAAM,SAAS,UAAU;AACzB,UAAI,CAAC,OAAQ;AACb,YAAM,OAAO,OAAO,sBAAA;AACpB,YAAM,cAAc,OAAO,aAAa,KAAK,OAAO;AACpD,YAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,IAAI,oBAAoB,WAAW,CAAC;AAC/E,aAAO,EAAE,KAAK,KAAK,SAAS,GAAG,MAAM,KAAK,MAAM,OAAO,KAAK,OAAO,SAAA,CAAU;AAAA,IAC/E;AACA,WAAA;AACA,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGTC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,gBAAgB,CAAC,MAAkB;;AACvC,YAAM,SAAS,EAAE;AACjB,UAAI,GAAC,aAAQ,YAAR,mBAAiB,SAAS,YAAW,GAAC,cAAS,YAAT,mBAAkB,SAAS,UAAS;AAC7E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,aAAa;AACpD,WAAO,MAAM,SAAS,oBAAoB,aAAa,aAAa;AAAA,EACtE,GAAG,CAAC,IAAI,CAAC;AAET,SACEC,gCAAC,SAAI,KAAK,SAAS,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACpD,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,QAChC,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA,OAAOC,mBAAAA,eAAe,IAAI,IAAI;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWF,MAAAA,GAAG,2BAA2B,SAAS,QAAQ,uBAAuB,GACpF,UAAA,SAAS,YAAA,CACZ;AAAA,UACAE,2BAAAA,IAAC,QAAA,EAAK,WAAU,4FACd,UAAAA,2BAAAA,IAACC,KAAAA,QAAK,MAAMC,cAAAA,eAAe,WAAU,UAAA,CAAU,EAAA,CACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGD,QACC,OACAC,SAAAA;AAAAA,MACEH,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,aAAU;AAAA,UACV,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,YAIV,UAAU,IAAI;AAAA,YACd,OAAO;AAAA,YACP,UAAU,IAAI;AAAA,UAAA;AAAA,UAEhB,WAAWF,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,gCACb,UAAAA,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,cACxC,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,cACrC,UAAU,CAAC,SAAS;AAClB,oBAAI,CAAC,gBAAgB,aAAa,IAAI,GAAG;AACvC,2BAAS,IAAI;AACb,0BAAQ,KAAK;AAAA,gBACf;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,IAAA;AAAA,EACX,GACJ;AAEJ;;"}
+{"version":3,"file":"TreePickerField.cjs","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Highlights the committed node inside the open tree. */\n  selected?: T | null;\n  /**\n   * Force-opens the `selected` node's ancestors so the current value is always\n   * visible when the panel opens, however deep its branch. Requires `selected`.\n   */\n  revealSelected?: boolean;\n  /** Renders the tree's expand/collapse + filter toolbar. */\n  showControls?: boolean;\n  /** Accessible name for the tree inside the panel. */\n  ariaLabel?: string;\n  /** Empty-state content when `roots` is empty. */\n  empty?: ReactNode;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n  renderTrigger?: (props: TreePickerTriggerProps) => ReactNode;\n}\n\nexport interface TreePickerTriggerProps {\n  open: boolean;\n  disabled: boolean;\n  triggerRef: Ref<HTMLButtonElement>;\n  toggle: () => void;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  selected,\n  revealSelected,\n  showControls,\n  ariaLabel,\n  empty,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n  renderTrigger,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    anchorRef.current?.focus();\n  });\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = rootRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      {renderTrigger ? (\n        renderTrigger({\n          open,\n          disabled: Boolean(disabled),\n          triggerRef: anchorRef,\n          toggle: () => {\n            if (!disabled) setOpen((current) => !current);\n          },\n        })\n      ) : (\n        <button\n          ref={anchorRef}\n          type=\"button\"\n          disabled={disabled}\n          aria-haspopup=\"tree\"\n          aria-expanded={open}\n          onClick={() => setOpen((current) => !current)}\n          className={cn(\n            \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n            size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n            \"pr-8\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            triggerClassName,\n          )}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n            {label ?? placeholder}\n          </span>\n          <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n            <Icon icon={UiChevronDown} className=\"text-xs\" />\n          </span>\n        </button>\n      )}\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              // Grow to fit the widest row/toolbar, but never narrower than the\n              // trigger nor wider than maxWidth — so labels show in full and the\n              // toolbar's intrinsic-width search input never forces a scrollbar.\n              minWidth: pos.width,\n              width: \"max-content\",\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                {...(selected !== undefined ? { selected } : {})}\n                {...(revealSelected !== undefined ? { revealSelected } : {})}\n                {...(showControls !== undefined ? { showControls } : {})}\n                {...(ariaLabel !== undefined ? { ariaLabel } : {})}\n                {...(empty !== undefined ? { empty } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEscapeLayer","useLayoutEffect","useEffect","jsxs","cn","inputSizeClass","jsx","Icon","UiChevronDown","createPortal","Tree"],"mappings":";;;;;;;;;;;AAWA,MAAM,qBAAqB;AAsDpB,SAAS,gBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AACtC,QAAM,CAAC,KAAK,MAAM,IAAIA,MAAAA;AAAAA,IACpB;AAAA,EAAA;AAEF,QAAM,UAAUC,MAAAA,OAAuB,IAAI;AAC3C,QAAM,YAAYA,MAAAA,OAA0B,IAAI;AAChD,QAAM,WAAWA,MAAAA,OAAuB,IAAI;AAE5CC,aAAAA,eAAe,MAAM,MAAM;;AACzB,YAAQ,KAAK;AACb,oBAAU,YAAV,mBAAmB;AAAA,EACrB,CAAC;AAGDC,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,MAAM;AACT,aAAO,IAAI;AACX;AAAA,IACF;AACA,UAAM,SAAS,MAAM;AACnB,YAAM,SAAS,QAAQ;AACvB,UAAI,CAAC,OAAQ;AACb,YAAM,OAAO,OAAO,sBAAA;AACpB,YAAM,cAAc,OAAO,aAAa,KAAK,OAAO;AACpD,YAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,IAAI,oBAAoB,WAAW,CAAC;AAC/E,aAAO,EAAE,KAAK,KAAK,SAAS,GAAG,MAAM,KAAK,MAAM,OAAO,KAAK,OAAO,SAAA,CAAU;AAAA,IAC/E;AACA,WAAA;AACA,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,WAAO,iBAAiB,UAAU,MAAM;AACxC,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,aAAO,oBAAoB,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAGTC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,gBAAgB,CAAC,MAAkB;;AACvC,YAAM,SAAS,EAAE;AACjB,UAAI,GAAC,aAAQ,YAAR,mBAAiB,SAAS,YAAW,GAAC,cAAS,YAAT,mBAAkB,SAAS,UAAS;AAC7E,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,aAAa;AACpD,WAAO,MAAM,SAAS,oBAAoB,aAAa,aAAa;AAAA,EACtE,GAAG,CAAC,IAAI,CAAC;AAET,SACEC,gCAAC,SAAI,KAAK,SAAS,WAAWC,MAAAA,GAAG,YAAY,SAAS,GACnD,UAAA;AAAA,IAAA,gBACC,cAAc;AAAA,MACZ;AAAA,MACA,UAAU,QAAQ,QAAQ;AAAA,MAC1B,YAAY;AAAA,MACZ,QAAQ,MAAM;AACZ,YAAI,CAAC,SAAU,SAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,MAC9C;AAAA,IAAA,CACD,IAEDD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QACf,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,QAC5C,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA,OAAOC,mBAAAA,eAAe,IAAI,IAAI;AAAA,UAC9B;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWF,MAAAA,GAAG,2BAA2B,SAAS,QAAQ,uBAAuB,GACpF,UAAA,SAAS,YAAA,CACZ;AAAA,UACAE,2BAAAA,IAAC,QAAA,EAAK,WAAU,4FACd,UAAAA,2BAAAA,IAACC,KAAAA,QAAK,MAAMC,cAAAA,eAAe,WAAU,UAAA,CAAU,EAAA,CACjD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAIH,QACC,OACAC,SAAAA;AAAAA,MACEH,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,aAAU;AAAA,UACV,OAAO;AAAA,YACL,UAAU;AAAA,YACV,KAAK,IAAI;AAAA,YACT,MAAM,IAAI;AAAA;AAAA;AAAA;AAAA,YAIV,UAAU,IAAI;AAAA,YACd,OAAO;AAAA,YACP,UAAU,IAAI;AAAA,UAAA;AAAA,UAEhB,WAAWF,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,UAAAE,2BAAAA,IAAC,OAAA,EAAI,WAAU,gCACb,UAAAA,2BAAAA;AAAAA,YAACI,KAAAA;AAAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACC,GAAI,gBAAgB,EAAE,cAAA,IAAkB,CAAA;AAAA,cACxC,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,cACpC,GAAI,aAAa,SAAY,EAAE,SAAA,IAAa,CAAA;AAAA,cAC5C,GAAI,mBAAmB,SAAY,EAAE,eAAA,IAAmB,CAAA;AAAA,cACxD,GAAI,iBAAiB,SAAY,EAAE,aAAA,IAAiB,CAAA;AAAA,cACpD,GAAI,cAAc,SAAY,EAAE,UAAA,IAAc,CAAA;AAAA,cAC9C,GAAI,UAAU,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,cACvC,UAAU,CAAC,SAAS;AAClB,oBAAI,CAAC,gBAAgB,aAAa,IAAI,GAAG;AACvC,2BAAS,IAAI;AACb,0BAAQ,KAAK;AAAA,gBACf;AAAA,cACF;AAAA,YAAA;AAAA,UAAA,EACF,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,SAAS;AAAA,IAAA;AAAA,EACX,GACJ;AAEJ;;"}

package/dist/components/TreePickerField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { TreeProps } from '../data/Tree';
 import { FormSize } from './json-schema-form-size';
 export interface TreePickerFieldProps<T> {
@@ -17,6 +17,19 @@ export interface TreePickerFieldProps<T> {
     isSelectable?: (node: T) => boolean;
     /** Fires for a selectable node, then closes the dropdown. */
     onSelect: (node: T) => void;
+    /** Highlights the committed node inside the open tree. */
+    selected?: T | null;
+    /**
+     * Force-opens the `selected` node's ancestors so the current value is always
+     * visible when the panel opens, however deep its branch. Requires `selected`.
+     */
+    revealSelected?: boolean;
+    /** Renders the tree's expand/collapse + filter toolbar. */
+    showControls?: boolean;
+    /** Accessible name for the tree inside the panel. */
+    ariaLabel?: string;
+    /** Empty-state content when `roots` is empty. */
+    empty?: ReactNode;
     /** Current-selection display in the trigger; falls back to `placeholder`. */
     label?: ReactNode;
     placeholder?: string;
@@ -25,6 +38,13 @@ export interface TreePickerFieldProps<T> {
     className?: string;
     triggerClassName?: string;
     panelClassName?: string;
+    renderTrigger?: (props: TreePickerTriggerProps) => ReactNode;
+}
+export interface TreePickerTriggerProps {
+    open: boolean;
+    disabled: boolean;
+    triggerRef: Ref<HTMLButtonElement>;
+    toggle: () => void;
 }
-export declare function TreePickerField<T>({ roots, getKey, getChildren, renderRow, getSearchText, defaultOpen, isSelectable, onSelect, label, placeholder, disabled, size, className, triggerClassName, panelClassName, }: TreePickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TreePickerField<T>({ roots, getKey, getChildren, renderRow, getSearchText, defaultOpen, isSelectable, onSelect, selected, revealSelected, showControls, ariaLabel, empty, label, placeholder, disabled, size, className, triggerClassName, panelClassName, renderTrigger, }: TreePickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TreePickerField.d.ts.map

package/dist/components/TreePickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMxE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,wCAAwC;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,WAAuB,EACvB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAuHzB"}
+{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMxE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,wCAAwC;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,SAAS,CAAC;CAC9D;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB;AAOD,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAuB,EACvB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,GACd,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAuIzB"}

package/dist/components/TreePickerField.js

@@ -17,13 +17,19 @@ function TreePickerField({
   defaultOpen,
   isSelectable,
   onSelect,
+  selected,
+  revealSelected,
+  showControls,
+  ariaLabel,
+  empty,
   label,
   placeholder = "Select…",
   disabled,
   size,
   className,
   triggerClassName,
-  panelClassName
+  panelClassName,
+  renderTrigger
 }) {
   const [open, setOpen] = useState(false);
   const [pos, setPos] = useState(
@@ -43,7 +49,7 @@ function TreePickerField({
       return;
     }
     const update = () => {
-      const anchor = anchorRef.current;
+      const anchor = rootRef.current;
       if (!anchor) return;
       const rect = anchor.getBoundingClientRect();
       const viewportCap = window.innerWidth - rect.left - 8;
@@ -71,7 +77,14 @@ function TreePickerField({
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, [open]);
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(
+    renderTrigger ? renderTrigger({
+      open,
+      disabled: Boolean(disabled),
+      triggerRef: anchorRef,
+      toggle: () => {
+        if (!disabled) setOpen((current) => !current);
+      }
+    }) : /* @__PURE__ */ jsxs(
       "button",
       {
         ref: anchorRef,
@@ -79,7 +92,7 @@ function TreePickerField({
         disabled,
         "aria-haspopup": "tree",
         "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
+        onClick: () => setOpen((current) => !current),
         className: cn(
           "relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground",
           size ? inputSizeClass[size] : "h-control-h px-control-px text-sm",
@@ -124,6 +137,11 @@ function TreePickerField({
               renderRow,
               ...getSearchText ? { getSearchText } : {},
               ...defaultOpen ? { defaultOpen } : {},
+              ...selected !== void 0 ? { selected } : {},
+              ...revealSelected !== void 0 ? { revealSelected } : {},
+              ...showControls !== void 0 ? { showControls } : {},
+              ...ariaLabel !== void 0 ? { ariaLabel } : {},
+              ...empty !== void 0 ? { empty } : {},
               onSelect: (node) => {
                 if (!isSelectable || isSelectable(node)) {
                   onSelect(node);

package/dist/components/TreePickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreePickerField.js","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    anchorRef.current?.focus();\n  });\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = anchorRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      <button\n        ref={anchorRef}\n        type=\"button\"\n        disabled={disabled}\n        aria-haspopup=\"tree\"\n        aria-expanded={open}\n        onClick={() => setOpen((o) => !o)}\n        className={cn(\n          \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n          size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n          \"pr-8\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n          \"disabled:cursor-not-allowed disabled:opacity-50\",\n          triggerClassName,\n        )}\n      >\n        <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n          {label ?? placeholder}\n        </span>\n        <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n          <Icon icon={UiChevronDown} className=\"text-xs\" />\n        </span>\n      </button>\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              // Grow to fit the widest row/toolbar, but never narrower than the\n              // trigger nor wider than maxWidth — so labels show in full and the\n              // toolbar's intrinsic-width search input never forces a scrollbar.\n              minWidth: pos.width,\n              width: \"max-content\",\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreePickerField.js","sources":["../../src/components/TreePickerField.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { Tree, type TreeProps } from \"../data/Tree\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { inputSizeClass, type FormSize } from \"./json-schema-form-size\";\n\n// Upper bound the open panel grows to so wide trees show full labels before\n// truncating; the panel is never narrower than the trigger.\nconst PANEL_MAX_WIDTH_PX = 480;\n\nexport interface TreePickerFieldProps<T> {\n  /** Root nodes of the tree to browse. */\n  roots: T[];\n  getKey: (node: T) => string | number;\n  getChildren: (node: T) => T[] | undefined;\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /**\n   * Decides which nodes commit a selection when clicked. A click on a\n   * non-selectable node still toggles its expansion (it never closes the\n   * picker). Defaults to every node selectable.\n   */\n  isSelectable?: (node: T) => boolean;\n  /** Fires for a selectable node, then closes the dropdown. */\n  onSelect: (node: T) => void;\n  /** Highlights the committed node inside the open tree. */\n  selected?: T | null;\n  /**\n   * Force-opens the `selected` node's ancestors so the current value is always\n   * visible when the panel opens, however deep its branch. Requires `selected`.\n   */\n  revealSelected?: boolean;\n  /** Renders the tree's expand/collapse + filter toolbar. */\n  showControls?: boolean;\n  /** Accessible name for the tree inside the panel. */\n  ariaLabel?: string;\n  /** Empty-state content when `roots` is empty. */\n  empty?: ReactNode;\n  /** Current-selection display in the trigger; falls back to `placeholder`. */\n  label?: ReactNode;\n  placeholder?: string;\n  disabled?: boolean;\n  size?: FormSize;\n  className?: string;\n  triggerClassName?: string;\n  panelClassName?: string;\n  renderTrigger?: (props: TreePickerTriggerProps) => ReactNode;\n}\n\nexport interface TreePickerTriggerProps {\n  open: boolean;\n  disabled: boolean;\n  triggerRef: Ref<HTMLButtonElement>;\n  toggle: () => void;\n}\n\n// TreePickerField is a form-field-styled trigger (matching Combobox's closed\n// input) that opens a portal-anchored dropdown holding a Tree. The dropdown is\n// positioned with fixed coordinates measured from the trigger so it escapes any\n// overflow-hidden / scroll ancestor (e.g. a modal body). A click on a selectable\n// node commits and closes; a non-selectable node only toggles expansion.\nexport function TreePickerField<T>({\n  roots,\n  getKey,\n  getChildren,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  isSelectable,\n  onSelect,\n  selected,\n  revealSelected,\n  showControls,\n  ariaLabel,\n  empty,\n  label,\n  placeholder = \"Select…\",\n  disabled,\n  size,\n  className,\n  triggerClassName,\n  panelClassName,\n  renderTrigger,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<{ top: number; left: number; width: number; maxWidth: number } | null>(\n    null,\n  );\n  const rootRef = useRef<HTMLDivElement>(null);\n  const anchorRef = useRef<HTMLButtonElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n\n  useEscapeLayer(open, () => {\n    setOpen(false);\n    anchorRef.current?.focus();\n  });\n\n  // Position the portaled panel from the trigger rect, repositioning while open.\n  useLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const update = () => {\n      const anchor = rootRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const viewportCap = window.innerWidth - rect.left - 8;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open]);\n\n  // Dismiss on an outside pointer-down (the trigger and panel are exempt).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener(\"mousedown\", onPointerDown);\n    return () => document.removeEventListener(\"mousedown\", onPointerDown);\n  }, [open]);\n\n  return (\n    <div ref={rootRef} className={cn(\"relative\", className)}>\n      {renderTrigger ? (\n        renderTrigger({\n          open,\n          disabled: Boolean(disabled),\n          triggerRef: anchorRef,\n          toggle: () => {\n            if (!disabled) setOpen((current) => !current);\n          },\n        })\n      ) : (\n        <button\n          ref={anchorRef}\n          type=\"button\"\n          disabled={disabled}\n          aria-haspopup=\"tree\"\n          aria-expanded={open}\n          onClick={() => setOpen((current) => !current)}\n          className={cn(\n            \"relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground\",\n            size ? inputSizeClass[size] : \"h-control-h px-control-px text-sm\",\n            \"pr-8\",\n            \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            triggerClassName,\n          )}\n        >\n          <span className={cn(\"min-w-0 flex-1 truncate\", label == null && \"text-muted-foreground\")}>\n            {label ?? placeholder}\n          </span>\n          <span className=\"pointer-events-none absolute right-0 flex h-full items-center px-2 text-muted-foreground\">\n            <Icon icon={UiChevronDown} className=\"text-xs\" />\n          </span>\n        </button>\n      )}\n\n      {open &&\n        pos &&\n        createPortal(\n          <div\n            ref={panelRef}\n            data-slot=\"tree-picker-popup\"\n            style={{\n              position: \"fixed\",\n              top: pos.top,\n              left: pos.left,\n              // Grow to fit the widest row/toolbar, but never narrower than the\n              // trigger nor wider than maxWidth — so labels show in full and the\n              // toolbar's intrinsic-width search input never forces a scrollbar.\n              minWidth: pos.width,\n              width: \"max-content\",\n              maxWidth: pos.maxWidth,\n            }}\n            className={cn(\n              \"z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md\",\n              panelClassName,\n            )}\n          >\n            <div className=\"min-h-0 flex-1 overflow-auto\">\n              <Tree<T>\n                roots={roots}\n                getKey={getKey}\n                getChildren={getChildren}\n                renderRow={renderRow}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                {...(selected !== undefined ? { selected } : {})}\n                {...(revealSelected !== undefined ? { revealSelected } : {})}\n                {...(showControls !== undefined ? { showControls } : {})}\n                {...(ariaLabel !== undefined ? { ariaLabel } : {})}\n                {...(empty !== undefined ? { empty } : {})}\n                onSelect={(node) => {\n                  if (!isSelectable || isSelectable(node)) {\n                    onSelect(node);\n                    setOpen(false);\n                  }\n                }}\n              />\n            </div>\n          </div>,\n          document.body,\n        )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/TriStateToggle.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const triState = require("./tri-state.cjs");
+const UiCheck = require("../icons/components/UiCheck.cjs");
+const UiClose = require("../icons/components/UiClose.cjs");
+const UiRemove = require("../icons/components/UiRemove.cjs");
+const DEFAULT_LABELS = {
+  unset: "Any",
+  on: "Yes",
+  off: "No"
+};
+function TriStateToggle({
+  value,
+  onChange,
+  label,
+  labels,
+  id,
+  size = "sm",
+  disabled,
+  className
+}) {
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const state = value === void 0 ? "unset" : value ? "on" : "off";
+  const glyph = state === "on" ? UiCheck.UiCheck : state === "off" ? UiClose.UiClose : UiRemove.UiRemove;
+  const tone = state === "on" ? "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400" : state === "off" ? "border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-400" : "border-input bg-muted/30 text-muted-foreground";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      ...id !== void 0 ? { id } : {},
+      role: "checkbox",
+      "aria-checked": value === void 0 ? "mixed" : value,
+      "aria-label": label,
+      title: `${label}: ${text[state]}. Click to cycle.`,
+      disabled,
+      onClick: () => onChange(triState.nextTriState(value)),
+      className: utils.cn(
+        "inline-flex shrink-0 items-center justify-center rounded-md border transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        size === "sm" ? "h-6 w-6" : "h-8 w-8",
+        tone,
+        disabled ? "opacity-60" : "hover:brightness-95",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: glyph, className: size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4" })
+    }
+  );
+}
+exports.TriStateToggle = TriStateToggle;
+//# sourceMappingURL=TriStateToggle.cjs.map

package/dist/components/TriStateToggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriStateToggle.cjs","sources":["../../src/components/TriStateToggle.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiRemove } from \"../icons\";\nimport { nextTriState, type TriState } from \"./tri-state\";\n\n// A yes/no value that can also be unset — the shape a nullable boolean field or\n// a boolean filter actually has. One button cycles the three states so it costs\n// a single control in a table row or filter bar, where a pair of radios or a\n// dropdown would not fit.\n\nexport type { TriState };\n\nexport type TriStateLabels = {\n  /** Label for the unset state. Defaults to \"Any\". */\n  unset?: string;\n  /** Label for the true state. Defaults to \"Yes\". */\n  on?: string;\n  /** Label for the false state. Defaults to \"No\". */\n  off?: string;\n};\n\nexport type TriStateToggleProps = {\n  /** Controlled value: true, false, or undefined for unset. */\n  value: TriState;\n  /** Receives the next state in the unset → on → off → unset cycle. */\n  onChange: (value: TriState) => void;\n  /** Accessible name — the field this toggle stands for. */\n  label: string;\n  /** Per-state wording used in the tooltip and accessible description. */\n  labels?: TriStateLabels;\n  /** DOM id of the toggle button, so an external `<label htmlFor>` can target it. */\n  id?: string;\n  size?: \"sm\" | \"md\";\n  disabled?: boolean;\n  className?: string;\n};\n\nconst DEFAULT_LABELS: Required<TriStateLabels> = {\n  unset: \"Any\",\n  on: \"Yes\",\n  off: \"No\",\n};\n\nexport function TriStateToggle({\n  value,\n  onChange,\n  label,\n  labels,\n  id,\n  size = \"sm\",\n  disabled,\n  className,\n}: TriStateToggleProps) {\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const state = value === undefined ? \"unset\" : value ? \"on\" : \"off\";\n  const glyph = state === \"on\" ? UiCheck : state === \"off\" ? UiClose : UiRemove;\n  const tone =\n    state === \"on\"\n      ? \"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400\"\n      : state === \"off\"\n        ? \"border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-400\"\n        : \"border-input bg-muted/30 text-muted-foreground\";\n\n  return (\n    <button\n      type=\"button\"\n      {...(id !== undefined ? { id } : {})}\n      // A tri-state checkbox is the ARIA shape for on/off/unset; \"mixed\" is the\n      // unset state, so screen readers announce it instead of a bare button.\n      role=\"checkbox\"\n      aria-checked={value === undefined ? \"mixed\" : value}\n      aria-label={label}\n      title={`${label}: ${text[state]}. Click to cycle.`}\n      disabled={disabled}\n      onClick={() => onChange(nextTriState(value))}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-md border transition-colors\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        size === \"sm\" ? \"h-6 w-6\" : \"h-8 w-8\",\n        tone,\n        disabled ? \"opacity-60\" : \"hover:brightness-95\",\n        className,\n      )}\n    >\n      <Icon icon={glyph} className={size === \"sm\" ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n    </button>\n  );\n}\n"],"names":["UiCheck","UiClose","UiRemove","jsx","nextTriState","cn","Icon"],"mappings":";;;;;;;;;AAqCA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,OAAO,EAAE,GAAG,gBAAgB,GAAG,OAAA;AACrC,QAAM,QAAQ,UAAU,SAAY,UAAU,QAAQ,OAAO;AAC7D,QAAM,QAAQ,UAAU,OAAOA,QAAAA,UAAU,UAAU,QAAQC,QAAAA,UAAUC,SAAAA;AACrE,QAAM,OACJ,UAAU,OACN,2EACA,UAAU,QACR,mEACA;AAER,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,OAAO,SAAY,EAAE,GAAA,IAAO,CAAA;AAAA,MAGjC,MAAK;AAAA,MACL,gBAAc,UAAU,SAAY,UAAU;AAAA,MAC9C,cAAY;AAAA,MACZ,OAAO,GAAG,KAAK,KAAK,KAAK,KAAK,CAAC;AAAA,MAC/B;AAAA,MACA,SAAS,MAAM,SAASC,SAAAA,aAAa,KAAK,CAAC;AAAA,MAC3C,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS,OAAO,YAAY;AAAA,QAC5B;AAAA,QACA,WAAW,eAAe;AAAA,QAC1B;AAAA,MAAA;AAAA,MAGF,UAAAF,2BAAAA,IAACG,aAAK,MAAM,OAAO,WAAW,SAAS,OAAO,gBAAgB,UAAA,CAAW;AAAA,IAAA;AAAA,EAAA;AAG/E;;"}

package/dist/components/TriStateToggle.d.ts

@@ -0,0 +1,27 @@
+import { TriState } from './tri-state';
+export type { TriState };
+export type TriStateLabels = {
+    /** Label for the unset state. Defaults to "Any". */
+    unset?: string;
+    /** Label for the true state. Defaults to "Yes". */
+    on?: string;
+    /** Label for the false state. Defaults to "No". */
+    off?: string;
+};
+export type TriStateToggleProps = {
+    /** Controlled value: true, false, or undefined for unset. */
+    value: TriState;
+    /** Receives the next state in the unset → on → off → unset cycle. */
+    onChange: (value: TriState) => void;
+    /** Accessible name — the field this toggle stands for. */
+    label: string;
+    /** Per-state wording used in the tooltip and accessible description. */
+    labels?: TriStateLabels;
+    /** DOM id of the toggle button, so an external `<label htmlFor>` can target it. */
+    id?: string;
+    size?: "sm" | "md";
+    disabled?: boolean;
+    className?: string;
+};
+export declare function TriStateToggle({ value, onChange, label, labels, id, size, disabled, className, }: TriStateToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TriStateToggle.d.ts.map

package/dist/components/TriStateToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriStateToggle.d.ts","sourceRoot":"","sources":["../../src/components/TriStateToggle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AAO1D,YAAY,EAAE,QAAQ,EAAE,CAAC;AAEzB,MAAM,MAAM,cAAc,GAAG;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,6DAA6D;IAC7D,KAAK,EAAE,QAAQ,CAAC;IAChB,qEAAqE;IACrE,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,CAAC,EAAE,cAAc,CAAC;IACxB,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAQF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,EAAE,EACF,IAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,mBAAmB,2CAmCrB"}

package/dist/components/TriStateToggle.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { nextTriState } from "./tri-state.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiClose } from "../icons/components/UiClose.js";
+import { UiRemove } from "../icons/components/UiRemove.js";
+const DEFAULT_LABELS = {
+  unset: "Any",
+  on: "Yes",
+  off: "No"
+};
+function TriStateToggle({
+  value,
+  onChange,
+  label,
+  labels,
+  id,
+  size = "sm",
+  disabled,
+  className
+}) {
+  const text = { ...DEFAULT_LABELS, ...labels };
+  const state = value === void 0 ? "unset" : value ? "on" : "off";
+  const glyph = state === "on" ? UiCheck : state === "off" ? UiClose : UiRemove;
+  const tone = state === "on" ? "border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400" : state === "off" ? "border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-400" : "border-input bg-muted/30 text-muted-foreground";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...id !== void 0 ? { id } : {},
+      role: "checkbox",
+      "aria-checked": value === void 0 ? "mixed" : value,
+      "aria-label": label,
+      title: `${label}: ${text[state]}. Click to cycle.`,
+      disabled,
+      onClick: () => onChange(nextTriState(value)),
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center rounded-md border transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        size === "sm" ? "h-6 w-6" : "h-8 w-8",
+        tone,
+        disabled ? "opacity-60" : "hover:brightness-95",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(Icon, { icon: glyph, className: size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4" })
+    }
+  );
+}
+export {
+  TriStateToggle
+};
+//# sourceMappingURL=TriStateToggle.js.map

package/dist/components/TriStateToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriStateToggle.js","sources":["../../src/components/TriStateToggle.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { UiCheck, UiClose, UiRemove } from \"../icons\";\nimport { nextTriState, type TriState } from \"./tri-state\";\n\n// A yes/no value that can also be unset — the shape a nullable boolean field or\n// a boolean filter actually has. One button cycles the three states so it costs\n// a single control in a table row or filter bar, where a pair of radios or a\n// dropdown would not fit.\n\nexport type { TriState };\n\nexport type TriStateLabels = {\n  /** Label for the unset state. Defaults to \"Any\". */\n  unset?: string;\n  /** Label for the true state. Defaults to \"Yes\". */\n  on?: string;\n  /** Label for the false state. Defaults to \"No\". */\n  off?: string;\n};\n\nexport type TriStateToggleProps = {\n  /** Controlled value: true, false, or undefined for unset. */\n  value: TriState;\n  /** Receives the next state in the unset → on → off → unset cycle. */\n  onChange: (value: TriState) => void;\n  /** Accessible name — the field this toggle stands for. */\n  label: string;\n  /** Per-state wording used in the tooltip and accessible description. */\n  labels?: TriStateLabels;\n  /** DOM id of the toggle button, so an external `<label htmlFor>` can target it. */\n  id?: string;\n  size?: \"sm\" | \"md\";\n  disabled?: boolean;\n  className?: string;\n};\n\nconst DEFAULT_LABELS: Required<TriStateLabels> = {\n  unset: \"Any\",\n  on: \"Yes\",\n  off: \"No\",\n};\n\nexport function TriStateToggle({\n  value,\n  onChange,\n  label,\n  labels,\n  id,\n  size = \"sm\",\n  disabled,\n  className,\n}: TriStateToggleProps) {\n  const text = { ...DEFAULT_LABELS, ...labels };\n  const state = value === undefined ? \"unset\" : value ? \"on\" : \"off\";\n  const glyph = state === \"on\" ? UiCheck : state === \"off\" ? UiClose : UiRemove;\n  const tone =\n    state === \"on\"\n      ? \"border-green-500/50 bg-green-500/10 text-green-700 dark:text-green-400\"\n      : state === \"off\"\n        ? \"border-red-500/50 bg-red-500/10 text-red-700 dark:text-red-400\"\n        : \"border-input bg-muted/30 text-muted-foreground\";\n\n  return (\n    <button\n      type=\"button\"\n      {...(id !== undefined ? { id } : {})}\n      // A tri-state checkbox is the ARIA shape for on/off/unset; \"mixed\" is the\n      // unset state, so screen readers announce it instead of a bare button.\n      role=\"checkbox\"\n      aria-checked={value === undefined ? \"mixed\" : value}\n      aria-label={label}\n      title={`${label}: ${text[state]}. Click to cycle.`}\n      disabled={disabled}\n      onClick={() => onChange(nextTriState(value))}\n      className={cn(\n        \"inline-flex shrink-0 items-center justify-center rounded-md border transition-colors\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        size === \"sm\" ? \"h-6 w-6\" : \"h-8 w-8\",\n        tone,\n        disabled ? \"opacity-60\" : \"hover:brightness-95\",\n        className,\n      )}\n    >\n      <Icon icon={glyph} className={size === \"sm\" ? \"h-3.5 w-3.5\" : \"h-4 w-4\"} />\n    </button>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAqCA,MAAM,iBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,OAAO,EAAE,GAAG,gBAAgB,GAAG,OAAA;AACrC,QAAM,QAAQ,UAAU,SAAY,UAAU,QAAQ,OAAO;AAC7D,QAAM,QAAQ,UAAU,OAAO,UAAU,UAAU,QAAQ,UAAU;AACrE,QAAM,OACJ,UAAU,OACN,2EACA,UAAU,QACR,mEACA;AAER,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACJ,GAAI,OAAO,SAAY,EAAE,GAAA,IAAO,CAAA;AAAA,MAGjC,MAAK;AAAA,MACL,gBAAc,UAAU,SAAY,UAAU;AAAA,MAC9C,cAAY;AAAA,MACZ,OAAO,GAAG,KAAK,KAAK,KAAK,KAAK,CAAC;AAAA,MAC/B;AAAA,MACA,SAAS,MAAM,SAAS,aAAa,KAAK,CAAC;AAAA,MAC3C,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS,OAAO,YAAY;AAAA,QAC5B;AAAA,QACA,WAAW,eAAe;AAAA,QAC1B;AAAA,MAAA;AAAA,MAGF,UAAA,oBAAC,QAAK,MAAM,OAAO,WAAW,SAAS,OAAO,gBAAgB,UAAA,CAAW;AAAA,IAAA;AAAA,EAAA;AAG/E;"}

package/dist/components/combobox-types.d.ts

@@ -5,7 +5,9 @@ export type ComboboxOption = {
     value: string;
     /** Full label used for searching and in the open option menu. */
     label: string;
-    /** Optional compact label used only while this option is selected and closed. */
+    /** Secondary text rendered below the label and included in local filtering. */
+    description?: string;
+    /** Optional compact label used in the closed selection or a selected tag. */
     selectedLabel?: string;
     disabled?: boolean;
     /** Leading glyph for the option: a runtime icon name or a rendered node. */
@@ -42,6 +44,17 @@ type ComboboxBaseProps = {
      * means (e.g. a value absent from the options in a strict picker).
      */
     invalid?: boolean;
+    /**
+     * Sets aria-required on the input. Separate from `required`, which governs
+     * whether the value can be cleared; a consumer announcing a mandatory field
+     * to assistive technology need not also remove the clear button.
+     */
+    ariaRequired?: boolean;
+    /**
+     * Id of the element describing the control (typically its validation
+     * message), wired through as aria-describedby.
+     */
+    describedBy?: string;
     /**
      * When false, the value is restricted to the provided options — typed text
      * that does not match an option is discarded instead of committed. Defaults
@@ -92,6 +105,8 @@ export type ComboboxSingleProps = ComboboxBaseProps & {
 export type ComboboxMultiProps = ComboboxBaseProps & {
     multiple: true;
     tristate?: false;
+    /** Renders selected values as wrapping removable pills instead of a summary. */
+    variant?: "default" | "tags";
     value: string[];
     onChange: (value: string[]) => void;
 };

package/dist/components/combobox-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox-types.d.ts","sourceRoot":"","sources":["../../src/components/combobox-types.ts"],"names":[],"mappings":"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"}

package/dist/components/combobox-utils.cjs

@@ -14,8 +14,34 @@ function withSelectedComboboxOptions(options, selectedValues) {
   const pinned = selectedValues.filter((value) => !present.has(value)).map((value) => ({ value, label: value }));
   return pinned.length === 0 ? options : [...pinned, ...options];
 }
+function multipleComboboxLabel(options, selectedValues) {
+  const labels = selectedValues.map((value) => {
+    const option = options.find((entry) => entry.value === value);
+    return (option == null ? void 0 : option.selectedLabel) ?? (option == null ? void 0 : option.label) ?? value;
+  });
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels.length} selected`;
+}
+function createComboboxCustomEntry(options) {
+  const {
+    allowCustomValue,
+    query,
+    multiple,
+    tristate,
+    onNew,
+    choices,
+    selectedValues
+  } = options;
+  if (!allowCustomValue || !query || selectedValues.includes(query) || !tristate && !multiple && !onNew || choices.some((option) => option.value === query)) {
+    return null;
+  }
+  if (onNew) return onNew(query);
+  return { value: query, label: `Add "${query}"` };
+}
 exports.COMBOBOX_MENU_MAX_HEIGHT_PX = COMBOBOX_MENU_MAX_HEIGHT_PX;
 exports.COMBOBOX_MENU_MAX_WIDTH_PX = COMBOBOX_MENU_MAX_WIDTH_PX;
 exports.comboboxLabelPadding = comboboxLabelPadding;
+exports.createComboboxCustomEntry = createComboboxCustomEntry;
+exports.multipleComboboxLabel = multipleComboboxLabel;
 exports.withSelectedComboboxOptions = withSelectedComboboxOptions;
 //# sourceMappingURL=combobox-utils.cjs.map

package/dist/components/combobox-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.cjs","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n"],"names":[],"mappings":";;AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;;;;;"}
+{"version":3,"file":"combobox-utils.cjs","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":";;AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;;;;;;;"}

package/dist/components/combobox-utils.d.ts

@@ -12,4 +12,14 @@ export type ComboboxMenuPosition = {
 };
 export declare function comboboxLabelPadding(label: ReactNode, measuredWidth: number): CSSProperties;
 export declare function withSelectedComboboxOptions(options: ComboboxOption[], selectedValues: string[]): ComboboxOption[];
+export declare function multipleComboboxLabel(options: ComboboxOption[], selectedValues: string[]): string;
+export declare function createComboboxCustomEntry(options: {
+    allowCustomValue: boolean;
+    query: string;
+    multiple: boolean;
+    tristate: boolean;
+    onNew: ((value: string) => ComboboxOption | null) | undefined;
+    choices: ComboboxOption[];
+    selectedValues: string[];
+}): ComboboxOption | null;
 //# sourceMappingURL=combobox-utils.d.ts.map

package/dist/components/combobox-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.d.ts","sourceRoot":"","sources":["../../src/components/combobox-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACpB,aAAa,CAMf;AAED,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,cAAc,EAAE,CAMlB"}
+{"version":3,"file":"combobox-utils.d.ts","sourceRoot":"","sources":["../../src/components/combobox-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,eAAO,MAAM,2BAA2B,MAAM,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,MAAM,GACpB,aAAa,CAMf;AAED,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,cAAc,EAAE,CAMlB;AAED,wBAAgB,qBAAqB,CACnC,OAAO,EAAE,cAAc,EAAE,EACzB,cAAc,EAAE,MAAM,EAAE,GACvB,MAAM,CAOR;AAED,wBAAgB,yBAAyB,CAAC,OAAO,EAAE;IACjD,gBAAgB,EAAE,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAC9D,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,cAAc,EAAE,MAAM,EAAE,CAAC;CAC1B,GAAG,cAAc,GAAG,IAAI,CAqBxB"}

package/dist/components/combobox-utils.js

@@ -12,10 +12,36 @@ function withSelectedComboboxOptions(options, selectedValues) {
   const pinned = selectedValues.filter((value) => !present.has(value)).map((value) => ({ value, label: value }));
   return pinned.length === 0 ? options : [...pinned, ...options];
 }
+function multipleComboboxLabel(options, selectedValues) {
+  const labels = selectedValues.map((value) => {
+    const option = options.find((entry) => entry.value === value);
+    return (option == null ? void 0 : option.selectedLabel) ?? (option == null ? void 0 : option.label) ?? value;
+  });
+  if (labels.length <= 2) return labels.join(", ");
+  return `${labels.length} selected`;
+}
+function createComboboxCustomEntry(options) {
+  const {
+    allowCustomValue,
+    query,
+    multiple,
+    tristate,
+    onNew,
+    choices,
+    selectedValues
+  } = options;
+  if (!allowCustomValue || !query || selectedValues.includes(query) || !tristate && !multiple && !onNew || choices.some((option) => option.value === query)) {
+    return null;
+  }
+  if (onNew) return onNew(query);
+  return { value: query, label: `Add "${query}"` };
+}
 export {
   COMBOBOX_MENU_MAX_HEIGHT_PX,
   COMBOBOX_MENU_MAX_WIDTH_PX,
   comboboxLabelPadding,
+  createComboboxCustomEntry,
+  multipleComboboxLabel,
   withSelectedComboboxOptions
 };
 //# sourceMappingURL=combobox-utils.js.map

package/dist/components/combobox-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-utils.js","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n"],"names":[],"mappings":"AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;"}
+{"version":3,"file":"combobox-utils.js","sources":["../../src/components/combobox-utils.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport type { ComboboxOption } from \"./combobox-types\";\n\nexport const COMBOBOX_MENU_MAX_WIDTH_PX = 400;\nexport const COMBOBOX_MENU_MAX_HEIGHT_PX = 256;\n\nexport type ComboboxMenuPosition = {\n  top?: number;\n  bottom?: number;\n  left: number;\n  width: number;\n  maxWidth: number;\n  maxHeight: number;\n};\n\nexport function comboboxLabelPadding(\n  label: ReactNode,\n  measuredWidth: number,\n): CSSProperties {\n  if (measuredWidth > 0) {\n    return { paddingLeft: `calc(${measuredWidth}px + 0.75rem)` };\n  }\n  if (typeof label !== \"string\") return { paddingLeft: \"1.75rem\" };\n  return { paddingLeft: `${Math.min(label.length * 0.48 + 0.75, 7)}rem` };\n}\n\nexport function withSelectedComboboxOptions(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): ComboboxOption[] {\n  const present = new Set(options.map((option) => option.value));\n  const pinned = selectedValues\n    .filter((value) => !present.has(value))\n    .map((value) => ({ value, label: value }));\n  return pinned.length === 0 ? options : [...pinned, ...options];\n}\n\nexport function multipleComboboxLabel(\n  options: ComboboxOption[],\n  selectedValues: string[],\n): string {\n  const labels = selectedValues.map((value) => {\n    const option = options.find((entry) => entry.value === value);\n    return option?.selectedLabel ?? option?.label ?? value;\n  });\n  if (labels.length <= 2) return labels.join(\", \");\n  return `${labels.length} selected`;\n}\n\nexport function createComboboxCustomEntry(options: {\n  allowCustomValue: boolean;\n  query: string;\n  multiple: boolean;\n  tristate: boolean;\n  onNew: ((value: string) => ComboboxOption | null) | undefined;\n  choices: ComboboxOption[];\n  selectedValues: string[];\n}): ComboboxOption | null {\n  const {\n    allowCustomValue,\n    query,\n    multiple,\n    tristate,\n    onNew,\n    choices,\n    selectedValues,\n  } = options;\n  if (\n    !allowCustomValue ||\n    !query ||\n    selectedValues.includes(query) ||\n    (!tristate && !multiple && !onNew) ||\n    choices.some((option) => option.value === query)\n  ) {\n    return null;\n  }\n  if (onNew) return onNew(query);\n  return { value: query, label: `Add \"${query}\"` };\n}\n"],"names":[],"mappings":"AAGO,MAAM,6BAA6B;AACnC,MAAM,8BAA8B;AAWpC,SAAS,qBACd,OACA,eACe;AACf,MAAI,gBAAgB,GAAG;AACrB,WAAO,EAAE,aAAa,QAAQ,aAAa,gBAAA;AAAA,EAC7C;AACA,MAAI,OAAO,UAAU,SAAU,QAAO,EAAE,aAAa,UAAA;AACrD,SAAO,EAAE,aAAa,GAAG,KAAK,IAAI,MAAM,SAAS,OAAO,MAAM,CAAC,CAAC,MAAA;AAClE;AAEO,SAAS,4BACd,SACA,gBACkB;AAClB,QAAM,UAAU,IAAI,IAAI,QAAQ,IAAI,CAAC,WAAW,OAAO,KAAK,CAAC;AAC7D,QAAM,SAAS,eACZ,OAAO,CAAC,UAAU,CAAC,QAAQ,IAAI,KAAK,CAAC,EACrC,IAAI,CAAC,WAAW,EAAE,OAAO,OAAO,QAAQ;AAC3C,SAAO,OAAO,WAAW,IAAI,UAAU,CAAC,GAAG,QAAQ,GAAG,OAAO;AAC/D;AAEO,SAAS,sBACd,SACA,gBACQ;AACR,QAAM,SAAS,eAAe,IAAI,CAAC,UAAU;AAC3C,UAAM,SAAS,QAAQ,KAAK,CAAC,UAAU,MAAM,UAAU,KAAK;AAC5D,YAAO,iCAAQ,mBAAiB,iCAAQ,UAAS;AAAA,EACnD,CAAC;AACD,MAAI,OAAO,UAAU,EAAG,QAAO,OAAO,KAAK,IAAI;AAC/C,SAAO,GAAG,OAAO,MAAM;AACzB;AAEO,SAAS,0BAA0B,SAQhB;AACxB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AACJ,MACE,CAAC,oBACD,CAAC,SACD,eAAe,SAAS,KAAK,KAC5B,CAAC,YAAY,CAAC,YAAY,CAAC,SAC5B,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK,GAC/C;AACA,WAAO;AAAA,EACT;AACA,MAAI,MAAO,QAAO,MAAM,KAAK;AAC7B,SAAO,EAAE,OAAO,OAAO,OAAO,QAAQ,KAAK,IAAA;AAC7C;"}

package/dist/components/filter-bar-utils.cjs

@@ -21,6 +21,10 @@ function clearFilterBarFilter(filter) {
     filter.onChange(false);
     return;
   }
+  if (filter.kind === "tristate") {
+    filter.onChange(void 0);
+    return;
+  }
   filter.onChange({});
 }
 function isFilterBarFilterActive(filter) {
@@ -34,6 +38,7 @@ function isFilterBarFilterActive(filter) {
     return String(filter.value.min ?? "").trim() !== "" || String(filter.value.max ?? "").trim() !== "";
   }
   if (filter.kind === "boolean") return filter.value;
+  if (filter.kind === "tristate") return filter.value !== void 0;
   return Object.keys(filter.value).length > 0;
 }
 exports.applyFilterExtensions = applyFilterExtensions;

package/dist/components/filter-bar-utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-utils.cjs","sources":["../../src/components/filter-bar-utils.ts"],"sourcesContent":["import type { FilterBarFilter } from \"./FilterBar\";\n\n// FilterExtension decorates a resolved filter before it renders — the FilterBar\n// analogue of JsonSchemaForm's PreExtension. Consumers compose these in array\n// order (each sees the prior's output) to stamp domain-specific touches such as\n// an entity `icon` keyed on the filter's name, keeping FilterBar domain-agnostic.\nexport type FilterExtension = (filter: FilterBarFilter) => FilterBarFilter;\n\n// applyFilterExtensions runs a filter through the composed extension stack.\nexport function applyFilterExtensions(\n  filter: FilterBarFilter,\n  extensions: FilterExtension[] | undefined,\n): FilterBarFilter {\n  if (!extensions || extensions.length === 0) return filter;\n  return extensions.reduce((current, ext) => ext(current), filter);\n}\n\nexport function clearFilterBarFilter(filter: FilterBarFilter) {\n  if (filter.kind === \"text\" || filter.kind === \"lookup\" || filter.kind === \"enum\") {\n    filter.onChange(\"\");\n    return;\n  }\n\n  if (filter.kind === \"lookup-multi\" || filter.kind === \"select-multi\") {\n    filter.onChange([]);\n    return;\n  }\n\n  if (filter.kind === \"number\") {\n    filter.onChange({});\n    return;\n  }\n\n  if (filter.kind === \"boolean\") {\n    filter.onChange(false);\n    return;\n  }\n\n  filter.onChange({});\n}\n\nexport function isFilterBarFilterActive(filter: FilterBarFilter) {\n  if (filter.kind === \"text\" || filter.kind === \"lookup\" || filter.kind === \"enum\") {\n    return String(filter.value ?? \"\").trim() !== \"\";\n  }\n  if (filter.kind === \"lookup-multi\" || filter.kind === \"select-multi\") {\n    return filter.value.length > 0;\n  }\n  if (filter.kind === \"number\") {\n    return (\n      String(filter.value.min ?? \"\").trim() !== \"\" || String(filter.value.max ?? \"\").trim() !== \"\"\n    );\n  }\n  if (filter.kind === \"boolean\") return filter.value;\n  return Object.keys(filter.value).length > 0;\n}\n"],"names":[],"mappings":";;AASO,SAAS,sBACd,QACA,YACiB;AACjB,MAAI,CAAC,cAAc,WAAW,WAAW,EAAG,QAAO;AACnD,SAAO,WAAW,OAAO,CAAC,SAAS,QAAQ,IAAI,OAAO,GAAG,MAAM;AACjE;AAEO,SAAS,qBAAqB,QAAyB;AAC5D,MAAI,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ;AAChF,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,kBAAkB,OAAO,SAAS,gBAAgB;AACpE,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,WAAW;AAC7B,WAAO,SAAS,KAAK;AACrB;AAAA,EACF;AAEA,SAAO,SAAS,EAAE;AACpB;AAEO,SAAS,wBAAwB,QAAyB;AAC/D,MAAI,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ;AAChF,WAAO,OAAO,OAAO,SAAS,EAAE,EAAE,WAAW;AAAA,EAC/C;AACA,MAAI,OAAO,SAAS,kBAAkB,OAAO,SAAS,gBAAgB;AACpE,WAAO,OAAO,MAAM,SAAS;AAAA,EAC/B;AACA,MAAI,OAAO,SAAS,UAAU;AAC5B,WACE,OAAO,OAAO,MAAM,OAAO,EAAE,EAAE,KAAA,MAAW,MAAM,OAAO,OAAO,MAAM,OAAO,EAAE,EAAE,WAAW;AAAA,EAE9F;AACA,MAAI,OAAO,SAAS,UAAW,QAAO,OAAO;AAC7C,SAAO,OAAO,KAAK,OAAO,KAAK,EAAE,SAAS;AAC5C;;;;"}
+{"version":3,"file":"filter-bar-utils.cjs","sources":["../../src/components/filter-bar-utils.ts"],"sourcesContent":["import type { FilterBarFilter } from \"./FilterBar\";\n\n// FilterExtension decorates a resolved filter before it renders — the FilterBar\n// analogue of JsonSchemaForm's PreExtension. Consumers compose these in array\n// order (each sees the prior's output) to stamp domain-specific touches such as\n// an entity `icon` keyed on the filter's name, keeping FilterBar domain-agnostic.\nexport type FilterExtension = (filter: FilterBarFilter) => FilterBarFilter;\n\n// applyFilterExtensions runs a filter through the composed extension stack.\nexport function applyFilterExtensions(\n  filter: FilterBarFilter,\n  extensions: FilterExtension[] | undefined,\n): FilterBarFilter {\n  if (!extensions || extensions.length === 0) return filter;\n  return extensions.reduce((current, ext) => ext(current), filter);\n}\n\nexport function clearFilterBarFilter(filter: FilterBarFilter) {\n  if (filter.kind === \"text\" || filter.kind === \"lookup\" || filter.kind === \"enum\") {\n    filter.onChange(\"\");\n    return;\n  }\n\n  if (filter.kind === \"lookup-multi\" || filter.kind === \"select-multi\") {\n    filter.onChange([]);\n    return;\n  }\n\n  if (filter.kind === \"number\") {\n    filter.onChange({});\n    return;\n  }\n\n  if (filter.kind === \"boolean\") {\n    filter.onChange(false);\n    return;\n  }\n\n  if (filter.kind === \"tristate\") {\n    filter.onChange(undefined);\n    return;\n  }\n\n  filter.onChange({});\n}\n\nexport function isFilterBarFilterActive(filter: FilterBarFilter) {\n  if (filter.kind === \"text\" || filter.kind === \"lookup\" || filter.kind === \"enum\") {\n    return String(filter.value ?? \"\").trim() !== \"\";\n  }\n  if (filter.kind === \"lookup-multi\" || filter.kind === \"select-multi\") {\n    return filter.value.length > 0;\n  }\n  if (filter.kind === \"number\") {\n    return (\n      String(filter.value.min ?? \"\").trim() !== \"\" || String(filter.value.max ?? \"\").trim() !== \"\"\n    );\n  }\n  if (filter.kind === \"boolean\") return filter.value;\n  // Unset is \"no filter\"; both true and false narrow the result set.\n  if (filter.kind === \"tristate\") return filter.value !== undefined;\n  return Object.keys(filter.value).length > 0;\n}\n"],"names":[],"mappings":";;AASO,SAAS,sBACd,QACA,YACiB;AACjB,MAAI,CAAC,cAAc,WAAW,WAAW,EAAG,QAAO;AACnD,SAAO,WAAW,OAAO,CAAC,SAAS,QAAQ,IAAI,OAAO,GAAG,MAAM;AACjE;AAEO,SAAS,qBAAqB,QAAyB;AAC5D,MAAI,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ;AAChF,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,kBAAkB,OAAO,SAAS,gBAAgB;AACpE,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,SAAS,EAAE;AAClB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,WAAW;AAC7B,WAAO,SAAS,KAAK;AACrB;AAAA,EACF;AAEA,MAAI,OAAO,SAAS,YAAY;AAC9B,WAAO,SAAS,MAAS;AACzB;AAAA,EACF;AAEA,SAAO,SAAS,EAAE;AACpB;AAEO,SAAS,wBAAwB,QAAyB;AAC/D,MAAI,OAAO,SAAS,UAAU,OAAO,SAAS,YAAY,OAAO,SAAS,QAAQ;AAChF,WAAO,OAAO,OAAO,SAAS,EAAE,EAAE,WAAW;AAAA,EAC/C;AACA,MAAI,OAAO,SAAS,kBAAkB,OAAO,SAAS,gBAAgB;AACpE,WAAO,OAAO,MAAM,SAAS;AAAA,EAC/B;AACA,MAAI,OAAO,SAAS,UAAU;AAC5B,WACE,OAAO,OAAO,MAAM,OAAO,EAAE,EAAE,KAAA,MAAW,MAAM,OAAO,OAAO,MAAM,OAAO,EAAE,EAAE,WAAW;AAAA,EAE9F;AACA,MAAI,OAAO,SAAS,UAAW,QAAO,OAAO;AAE7C,MAAI,OAAO,SAAS,WAAY,QAAO,OAAO,UAAU;AACxD,SAAO,OAAO,KAAK,OAAO,KAAK,EAAE,SAAS;AAC5C;;;;"}

package/dist/components/filter-bar-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-utils.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,eAAe,KAAK,eAAe,CAAC;AAG3E,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,GACxC,eAAe,CAGjB;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,eAAe,QAsB3D;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,WAc9D"}
+{"version":3,"file":"filter-bar-utils.d.ts","sourceRoot":"","sources":["../../src/components/filter-bar-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,eAAe,GAAG,CAAC,MAAM,EAAE,eAAe,KAAK,eAAe,CAAC;AAG3E,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,eAAe,EACvB,UAAU,EAAE,eAAe,EAAE,GAAG,SAAS,GACxC,eAAe,CAGjB;AAED,wBAAgB,oBAAoB,CAAC,MAAM,EAAE,eAAe,QA2B3D;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,WAgB9D"}