@flanksource/clicky-ui 0.3.17 → 0.3.19

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, useFloatingZIndex } 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// Tallest the panel gets when the viewport allows it.\nconst PANEL_MAX_HEIGHT_PX = 480;\n// Below this there is not enough room to be worth opening downward, so the panel\n// flips above the trigger instead.\nconst PANEL_MIN_HEIGHT_PX = 200;\n// Breathing room kept between the panel and the viewport edge.\nconst VIEWPORT_MARGIN_PX = 8;\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   * Sticky row pinned below the tree inside the open panel — an escape hatch\n   * from a dropdown that has run out of room (a fuller browser, a \"create new\")\n   * rather than another node. It is handed `close` because acting on it almost\n   * always means leaving the dropdown behind.\n   */\n  renderFooter?: (props: { close: () => void }) => 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  renderFooter,\n}: TreePickerFieldProps<T>) {\n  const [open, setOpen] = useState(false);\n  const floatingZ = useFloatingZIndex();\n  const [pos, setPos] = useState<\n    { top: number; left: number; width: number; maxWidth: number; maxHeight: number } | null\n  >(null);\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 - VIEWPORT_MARGIN_PX;\n      const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));\n      // Fit the panel to the room the trigger actually has, and flip it above\n      // when there is more room up there. Without this the panel keeps its full\n      // height wherever the trigger sits, so a trigger low on the page pushes\n      // the panel's bottom past the viewport — taking the sticky footer, and\n      // any escape hatch pinned to it, out of reach entirely.\n      const below = window.innerHeight - rect.bottom - VIEWPORT_MARGIN_PX - 4;\n      const above = rect.top - VIEWPORT_MARGIN_PX - 4;\n      const flip = below < PANEL_MIN_HEIGHT_PX && above > below;\n      const available = Math.max(flip ? above : below, PANEL_MIN_HEIGHT_PX);\n      const maxHeight = Math.min(PANEL_MAX_HEIGHT_PX, available);\n      setPos({\n        top: flip ? Math.max(VIEWPORT_MARGIN_PX, rect.top - 4 - maxHeight) : rect.bottom + 4,\n        left: rect.left,\n        width: rect.width,\n        maxWidth,\n        maxHeight,\n      });\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              // Computed rather than constant: the popup has to clear whatever\n              // modal is open, and a modal sits at zIndex.modal (10000). A\n              // hardcoded z-50 renders the tree behind any dialog it is opened\n              // in — see ../overlay/zIndex.\n              zIndex: floatingZ,\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              maxHeight: pos.maxHeight,\n            }}\n            className={cn(\n              // Height comes from the measured maxHeight above, not a viewport\n              // fraction: 60vh is the same number wherever the trigger sits, and\n              // a trigger low on the page needs a shorter panel, not an equal one.\n              \"flex 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            {renderFooter && (\n              <div className=\"shrink-0 border-t border-border bg-popover\">\n                {renderFooter({ close: () => setOpen(false) })}\n              </div>\n            )}\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,18 @@ 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;
+    /**
+     * Node pinned to the right edge of the option row — a rendered preview of
+     * what the choice produces, a count, a badge. Keeps the row single-line, so
+     * prefer it over `description` when the secondary content is a value rather
+     * than a sentence. Not searchable (use `label`, `description` or `title` for
+     * anything that must match a query), and ignored in tristate mode, whose row
+     * is a full-width pill.
+     */
+    trailing?: ReactNode;
+    /** 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 +53,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 +114,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,9 +21,20 @@ function clearFilterBarFilter(filter) {
     filter.onChange(false);
     return;
   }
+  if (filter.kind === "tristate") {
+    filter.onChange(void 0);
+    return;
+  }
+  if (filter.kind === "date-range") {
+    filter.onApply("", "");
+    return;
+  }
   filter.onChange({});
 }
 function isFilterBarFilterActive(filter) {
+  if (filter.kind === "date-range") {
+    return String(filter.from ?? "").trim() !== "" || String(filter.to ?? "").trim() !== "";
+  }
   if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
     return String(filter.value ?? "").trim() !== "";
   }
@@ -34,6 +45,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  if (filter.kind === \"date-range\") {\n    filter.onApply(\"\", \"\");\n    return;\n  }\n\n  filter.onChange({});\n}\n\nexport function isFilterBarFilterActive(filter: FilterBarFilter) {\n  if (filter.kind === \"date-range\") {\n    return String(filter.from ?? \"\").trim() !== \"\" || String(filter.to ?? \"\").trim() !== \"\";\n  }\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,MAAI,OAAO,SAAS,cAAc;AAChC,WAAO,QAAQ,IAAI,EAAE;AACrB;AAAA,EACF;AAEA,SAAO,SAAS,EAAE;AACpB;AAEO,SAAS,wBAAwB,QAAyB;AAC/D,MAAI,OAAO,SAAS,cAAc;AAChC,WAAO,OAAO,OAAO,QAAQ,EAAE,EAAE,KAAA,MAAW,MAAM,OAAO,OAAO,MAAM,EAAE,EAAE,WAAW;AAAA,EACvF;AACA,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,QAgC3D;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,eAAe,WAmB9D"}

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

@@ -19,9 +19,20 @@ function clearFilterBarFilter(filter) {
     filter.onChange(false);
     return;
   }
+  if (filter.kind === "tristate") {
+    filter.onChange(void 0);
+    return;
+  }
+  if (filter.kind === "date-range") {
+    filter.onApply("", "");
+    return;
+  }
   filter.onChange({});
 }
 function isFilterBarFilterActive(filter) {
+  if (filter.kind === "date-range") {
+    return String(filter.from ?? "").trim() !== "" || String(filter.to ?? "").trim() !== "";
+  }
   if (filter.kind === "text" || filter.kind === "lookup" || filter.kind === "enum") {
     return String(filter.value ?? "").trim() !== "";
   }
@@ -32,6 +43,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;
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"filter-bar-utils.js","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.js","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  if (filter.kind === \"date-range\") {\n    filter.onApply(\"\", \"\");\n    return;\n  }\n\n  filter.onChange({});\n}\n\nexport function isFilterBarFilterActive(filter: FilterBarFilter) {\n  if (filter.kind === \"date-range\") {\n    return String(filter.from ?? \"\").trim() !== \"\" || String(filter.to ?? \"\").trim() !== \"\";\n  }\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,MAAI,OAAO,SAAS,cAAc;AAChC,WAAO,QAAQ,IAAI,EAAE;AACrB;AAAA,EACF;AAEA,SAAO,SAAS,EAAE;AACpB;AAEO,SAAS,wBAAwB,QAAyB;AAC/D,MAAI,OAAO,SAAS,cAAc;AAChC,WAAO,OAAO,OAAO,QAAQ,EAAE,EAAE,KAAA,MAAW,MAAM,OAAO,OAAO,MAAM,EAAE,EAAE,WAAW;AAAA,EACvF;AACA,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/jotai-bindings-core.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"jotai-bindings-core.cjs","sources":["../../src/components/jotai-bindings-core.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useReducer } from \"react\";\nimport { useStore, type WritableAtom } from \"jotai\";\nimport type {\n  FilterBarBooleanFilter,\n  FilterBarEnumFilter,\n  FilterBarFilter,\n  FilterBarLookupFilter,\n  FilterBarLookupMultiFilter,\n  FilterBarMultiFilter,\n  FilterBarNestedMultiFilter,\n  FilterBarNumberFilter,\n  FilterBarProps,\n  FilterBarRangeProps,\n  FilterBarSearchProps,\n  FilterBarSelectMultiFilter,\n  FilterBarTextFilter,\n} from \"./FilterBar\";\nimport type { JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nexport type JotaiWritableAtom<Value> = WritableAtom<Value, [Value], unknown>;\nexport type JotaiJsonSchemaFormAtom = JotaiWritableAtom<Record<string, unknown>>;\n\nexport type JotaiJsonSchemaFormProps = Omit<JsonSchemaFormProps, \"value\" | \"onChange\"> & {\n  atom: JotaiJsonSchemaFormAtom;\n  onChange?: JsonSchemaFormProps[\"onChange\"];\n};\n\nexport type JotaiFilterBarSearchProps = Omit<FilterBarSearchProps, \"value\" | \"onChange\"> & {\n  atom: JotaiWritableAtom<string>;\n  onChange?: FilterBarSearchProps[\"onChange\"];\n};\n\nexport type JotaiFilterBarRangeValue = {\n  from?: string;\n  to?: string;\n};\n\nexport type JotaiFilterBarRangeProps = Omit<FilterBarRangeProps, \"from\" | \"to\" | \"onApply\"> & {\n  atom: JotaiWritableAtom<JotaiFilterBarRangeValue>;\n  onApply?: FilterBarRangeProps[\"onApply\"];\n};\n\ntype AtomizedFilter<TFilter extends FilterBarFilter> = Omit<TFilter, \"value\" | \"onChange\"> & {\n  atom: JotaiWritableAtom<TFilter[\"value\"]>;\n  onChange?: TFilter[\"onChange\"];\n};\n\nexport type JotaiFilterBarTextFilter = AtomizedFilter<FilterBarTextFilter>;\nexport type JotaiFilterBarLookupFilter = AtomizedFilter<FilterBarLookupFilter>;\nexport type JotaiFilterBarLookupMultiFilter = AtomizedFilter<FilterBarLookupMultiFilter>;\nexport type JotaiFilterBarMultiFilter = AtomizedFilter<FilterBarMultiFilter>;\nexport type JotaiFilterBarNestedMultiFilter = AtomizedFilter<FilterBarNestedMultiFilter>;\nexport type JotaiFilterBarSelectMultiFilter = AtomizedFilter<FilterBarSelectMultiFilter>;\nexport type JotaiFilterBarNumberFilter = AtomizedFilter<FilterBarNumberFilter>;\nexport type JotaiFilterBarEnumFilter = AtomizedFilter<FilterBarEnumFilter>;\nexport type JotaiFilterBarBooleanFilter = AtomizedFilter<FilterBarBooleanFilter>;\n\nexport type JotaiFilterBarFilter =\n  | JotaiFilterBarTextFilter\n  | JotaiFilterBarLookupFilter\n  | JotaiFilterBarLookupMultiFilter\n  | JotaiFilterBarMultiFilter\n  | JotaiFilterBarNestedMultiFilter\n  | JotaiFilterBarSelectMultiFilter\n  | JotaiFilterBarNumberFilter\n  | JotaiFilterBarEnumFilter\n  | JotaiFilterBarBooleanFilter;\n\nexport type JotaiFilterBarProps = Omit<\n  FilterBarProps,\n  \"search\" | \"filters\" | \"timeRange\" | \"dateRange\"\n> & {\n  search?: JotaiFilterBarSearchProps;\n  filters?: JotaiFilterBarFilter[];\n  timeRange?: JotaiFilterBarRangeProps;\n  dateRange?: JotaiFilterBarRangeProps;\n};\n\ntype AnyJotaiAtom = JotaiWritableAtom<unknown>;\n\nfunction useAtomSubscriptions(atoms: AnyJotaiAtom[]) {\n  const store = useStore();\n  const [, forceRender] = useReducer((count: number) => count + 1, 0);\n  const uniqueAtoms = useMemo(() => Array.from(new Set(atoms)), [atoms]);\n\n  useEffect(() => {\n    if (uniqueAtoms.length === 0) return undefined;\n    const unsubscribers = uniqueAtoms.map((atom) => store.sub(atom, forceRender));\n    return () => {\n      unsubscribers.forEach((unsubscribe) => unsubscribe());\n    };\n  }, [store, uniqueAtoms]);\n}\n\nfunction useAtomValueSetter<Value>(atom: JotaiWritableAtom<Value>) {\n  const store = useStore();\n  const value = store.get(atom);\n  const setValue = useCallback(\n    (next: Value) => {\n      store.set(atom, next);\n    },\n    [atom, store],\n  );\n  return [value, setValue] as const;\n}\n\nexport function useJotaiJsonSchemaFormProps(\n  atom: JotaiJsonSchemaFormAtom,\n  onChange?: JsonSchemaFormProps[\"onChange\"],\n): Pick<JsonSchemaFormProps, \"value\" | \"onChange\"> {\n  const atoms = useMemo(() => [atom as AnyJotaiAtom], [atom]);\n  useAtomSubscriptions(atoms);\n  const [value, setValue] = useAtomValueSetter(atom);\n\n  return useMemo(\n    () => ({\n      value,\n      onChange: (next: Record<string, unknown>) => {\n        setValue(next);\n        onChange?.(next);\n      },\n    }),\n    [onChange, setValue, value],\n  );\n}\n\nfunction useJotaiFilterBarAtoms({\n  search,\n  filters,\n  timeRange,\n  dateRange,\n}: {\n  search?: JotaiFilterBarSearchProps | undefined;\n  filters?: JotaiFilterBarFilter[] | undefined;\n  timeRange?: JotaiFilterBarRangeProps | undefined;\n  dateRange?: JotaiFilterBarRangeProps | undefined;\n}) {\n  const atoms = useMemo(() => {\n    const next: AnyJotaiAtom[] = [];\n    if (search) next.push(search.atom as AnyJotaiAtom);\n    filters?.forEach((filter) => next.push(filter.atom as AnyJotaiAtom));\n    if (timeRange) next.push(timeRange.atom as AnyJotaiAtom);\n    if (dateRange) next.push(dateRange.atom as AnyJotaiAtom);\n    return next;\n  }, [dateRange, filters, search, timeRange]);\n  useAtomSubscriptions(atoms);\n}\n\nfunction useJotaiSearch(search: JotaiFilterBarSearchProps | undefined): FilterBarSearchProps | undefined {\n  const store = useStore();\n  if (!search) return undefined;\n  const { atom, onChange, ...rest } = search;\n  return {\n    ...rest,\n    value: store.get(atom),\n    onChange: (next: string) => {\n      store.set(atom, next);\n      onChange?.(next);\n    },\n  };\n}\n\nfunction useJotaiRange(range: JotaiFilterBarRangeProps | undefined): FilterBarRangeProps | undefined {\n  const store = useStore();\n  if (!range) return undefined;\n  const { atom, onApply, ...rest } = range;\n  const value = store.get(atom);\n  return {\n    ...rest,\n    ...(value.from !== undefined ? { from: value.from } : {}),\n    ...(value.to !== undefined ? { to: value.to } : {}),\n    onApply: (from: string, to: string) => {\n      store.set(atom, { from, to });\n      onApply?.(from, to);\n    },\n  };\n}\n\nfunction useJotaiFilters(filters: JotaiFilterBarFilter[] | undefined): FilterBarFilter[] | undefined {\n  const store = useStore();\n  if (!filters) return undefined;\n  return filters.map((filter) => bindJotaiFilter(store, filter));\n}\n\nfunction bindJotaiFilter(store: ReturnType<typeof useStore>, filter: JotaiFilterBarFilter): FilterBarFilter {\n  switch (filter.kind) {\n    case \"text\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"lookup\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"lookup-multi\":\n    case \"select-multi\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string[]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      } as FilterBarFilter;\n    }\n    case \"multi\":\n    case \"nested-multi\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: FilterBarMultiFilter[\"value\"]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      } as FilterBarFilter;\n    }\n    case \"number\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: FilterBarNumberFilter[\"value\"]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"enum\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"boolean\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: boolean) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n  }\n}\n\nexport function useJotaiFilterBarProps({\n  search,\n  filters,\n  timeRange,\n  dateRange,\n  ...props\n}: JotaiFilterBarProps): FilterBarProps {\n  useJotaiFilterBarAtoms({ search, filters, timeRange, dateRange });\n  const controlledSearch = useJotaiSearch(search);\n  const controlledFilters = useJotaiFilters(filters);\n  const controlledTimeRange = useJotaiRange(timeRange);\n  const controlledDateRange = useJotaiRange(dateRange);\n\n  return {\n    ...props,\n    ...(controlledSearch ? { search: controlledSearch } : {}),\n    ...(controlledFilters ? { filters: controlledFilters } : {}),\n    ...(controlledTimeRange ? { timeRange: controlledTimeRange } : {}),\n    ...(controlledDateRange ? { dateRange: controlledDateRange } : {}),\n  };\n}\n"],"names":["useStore","useReducer","useMemo","useEffect","useCallback"],"mappings":"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"}
+{"version":3,"file":"jotai-bindings-core.cjs","sources":["../../src/components/jotai-bindings-core.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useReducer } from \"react\";\nimport { useStore, type WritableAtom } from \"jotai\";\nimport type {\n  FilterBarBooleanFilter,\n  FilterBarEnumFilter,\n  FilterBarFilter,\n  FilterBarLookupFilter,\n  FilterBarLookupMultiFilter,\n  FilterBarMultiFilter,\n  FilterBarNestedMultiFilter,\n  FilterBarNumberFilter,\n  FilterBarProps,\n  FilterBarRangeProps,\n  FilterBarSearchProps,\n  FilterBarSelectMultiFilter,\n  FilterBarTextFilter,\n} from \"./FilterBar\";\nimport type { JsonSchemaFormProps } from \"./json-schema-form-types\";\n\nexport type JotaiWritableAtom<Value> = WritableAtom<Value, [Value], unknown>;\nexport type JotaiJsonSchemaFormAtom = JotaiWritableAtom<Record<string, unknown>>;\n\nexport type JotaiJsonSchemaFormProps = Omit<JsonSchemaFormProps, \"value\" | \"onChange\"> & {\n  atom: JotaiJsonSchemaFormAtom;\n  onChange?: JsonSchemaFormProps[\"onChange\"];\n};\n\nexport type JotaiFilterBarSearchProps = Omit<FilterBarSearchProps, \"value\" | \"onChange\"> & {\n  atom: JotaiWritableAtom<string>;\n  onChange?: FilterBarSearchProps[\"onChange\"];\n};\n\nexport type JotaiFilterBarRangeValue = {\n  from?: string;\n  to?: string;\n};\n\nexport type JotaiFilterBarRangeProps = Omit<FilterBarRangeProps, \"from\" | \"to\" | \"onApply\"> & {\n  atom: JotaiWritableAtom<JotaiFilterBarRangeValue>;\n  onApply?: FilterBarRangeProps[\"onApply\"];\n};\n\n// Only a filter that holds a value can be backed by an atom. A date range\n// carries two edges it applies together, and is bound through\n// JotaiFilterBarRangeProps instead.\ntype ValuedFilterBarFilter = Extract<FilterBarFilter, { value: unknown }>;\n\ntype AtomizedFilter<TFilter extends ValuedFilterBarFilter> = Omit<TFilter, \"value\" | \"onChange\"> & {\n  atom: JotaiWritableAtom<TFilter[\"value\"]>;\n  onChange?: TFilter[\"onChange\"];\n};\n\nexport type JotaiFilterBarTextFilter = AtomizedFilter<FilterBarTextFilter>;\nexport type JotaiFilterBarLookupFilter = AtomizedFilter<FilterBarLookupFilter>;\nexport type JotaiFilterBarLookupMultiFilter = AtomizedFilter<FilterBarLookupMultiFilter>;\nexport type JotaiFilterBarMultiFilter = AtomizedFilter<FilterBarMultiFilter>;\nexport type JotaiFilterBarNestedMultiFilter = AtomizedFilter<FilterBarNestedMultiFilter>;\nexport type JotaiFilterBarSelectMultiFilter = AtomizedFilter<FilterBarSelectMultiFilter>;\nexport type JotaiFilterBarNumberFilter = AtomizedFilter<FilterBarNumberFilter>;\nexport type JotaiFilterBarEnumFilter = AtomizedFilter<FilterBarEnumFilter>;\nexport type JotaiFilterBarBooleanFilter = AtomizedFilter<FilterBarBooleanFilter>;\n\nexport type JotaiFilterBarFilter =\n  | JotaiFilterBarTextFilter\n  | JotaiFilterBarLookupFilter\n  | JotaiFilterBarLookupMultiFilter\n  | JotaiFilterBarMultiFilter\n  | JotaiFilterBarNestedMultiFilter\n  | JotaiFilterBarSelectMultiFilter\n  | JotaiFilterBarNumberFilter\n  | JotaiFilterBarEnumFilter\n  | JotaiFilterBarBooleanFilter;\n\nexport type JotaiFilterBarProps = Omit<\n  FilterBarProps,\n  \"search\" | \"filters\" | \"timeRange\" | \"dateRange\"\n> & {\n  search?: JotaiFilterBarSearchProps;\n  filters?: JotaiFilterBarFilter[];\n  timeRange?: JotaiFilterBarRangeProps;\n  dateRange?: JotaiFilterBarRangeProps;\n};\n\ntype AnyJotaiAtom = JotaiWritableAtom<unknown>;\n\nfunction useAtomSubscriptions(atoms: AnyJotaiAtom[]) {\n  const store = useStore();\n  const [, forceRender] = useReducer((count: number) => count + 1, 0);\n  const uniqueAtoms = useMemo(() => Array.from(new Set(atoms)), [atoms]);\n\n  useEffect(() => {\n    if (uniqueAtoms.length === 0) return undefined;\n    const unsubscribers = uniqueAtoms.map((atom) => store.sub(atom, forceRender));\n    return () => {\n      unsubscribers.forEach((unsubscribe) => unsubscribe());\n    };\n  }, [store, uniqueAtoms]);\n}\n\nfunction useAtomValueSetter<Value>(atom: JotaiWritableAtom<Value>) {\n  const store = useStore();\n  const value = store.get(atom);\n  const setValue = useCallback(\n    (next: Value) => {\n      store.set(atom, next);\n    },\n    [atom, store],\n  );\n  return [value, setValue] as const;\n}\n\nexport function useJotaiJsonSchemaFormProps(\n  atom: JotaiJsonSchemaFormAtom,\n  onChange?: JsonSchemaFormProps[\"onChange\"],\n): Pick<JsonSchemaFormProps, \"value\" | \"onChange\"> {\n  const atoms = useMemo(() => [atom as AnyJotaiAtom], [atom]);\n  useAtomSubscriptions(atoms);\n  const [value, setValue] = useAtomValueSetter(atom);\n\n  return useMemo(\n    () => ({\n      value,\n      onChange: (next: Record<string, unknown>) => {\n        setValue(next);\n        onChange?.(next);\n      },\n    }),\n    [onChange, setValue, value],\n  );\n}\n\nfunction useJotaiFilterBarAtoms({\n  search,\n  filters,\n  timeRange,\n  dateRange,\n}: {\n  search?: JotaiFilterBarSearchProps | undefined;\n  filters?: JotaiFilterBarFilter[] | undefined;\n  timeRange?: JotaiFilterBarRangeProps | undefined;\n  dateRange?: JotaiFilterBarRangeProps | undefined;\n}) {\n  const atoms = useMemo(() => {\n    const next: AnyJotaiAtom[] = [];\n    if (search) next.push(search.atom as AnyJotaiAtom);\n    filters?.forEach((filter) => next.push(filter.atom as AnyJotaiAtom));\n    if (timeRange) next.push(timeRange.atom as AnyJotaiAtom);\n    if (dateRange) next.push(dateRange.atom as AnyJotaiAtom);\n    return next;\n  }, [dateRange, filters, search, timeRange]);\n  useAtomSubscriptions(atoms);\n}\n\nfunction useJotaiSearch(search: JotaiFilterBarSearchProps | undefined): FilterBarSearchProps | undefined {\n  const store = useStore();\n  if (!search) return undefined;\n  const { atom, onChange, ...rest } = search;\n  return {\n    ...rest,\n    value: store.get(atom),\n    onChange: (next: string) => {\n      store.set(atom, next);\n      onChange?.(next);\n    },\n  };\n}\n\nfunction useJotaiRange(range: JotaiFilterBarRangeProps | undefined): FilterBarRangeProps | undefined {\n  const store = useStore();\n  if (!range) return undefined;\n  const { atom, onApply, ...rest } = range;\n  const value = store.get(atom);\n  return {\n    ...rest,\n    ...(value.from !== undefined ? { from: value.from } : {}),\n    ...(value.to !== undefined ? { to: value.to } : {}),\n    onApply: (from: string, to: string) => {\n      store.set(atom, { from, to });\n      onApply?.(from, to);\n    },\n  };\n}\n\nfunction useJotaiFilters(filters: JotaiFilterBarFilter[] | undefined): FilterBarFilter[] | undefined {\n  const store = useStore();\n  if (!filters) return undefined;\n  return filters.map((filter) => bindJotaiFilter(store, filter));\n}\n\nfunction bindJotaiFilter(store: ReturnType<typeof useStore>, filter: JotaiFilterBarFilter): FilterBarFilter {\n  switch (filter.kind) {\n    case \"text\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"lookup\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"lookup-multi\":\n    case \"select-multi\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string[]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      } as FilterBarFilter;\n    }\n    case \"multi\":\n    case \"nested-multi\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: FilterBarMultiFilter[\"value\"]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      } as FilterBarFilter;\n    }\n    case \"number\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: FilterBarNumberFilter[\"value\"]) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"enum\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: string) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n    case \"boolean\": {\n      const { atom, onChange, ...rest } = filter;\n      return {\n        ...rest,\n        value: store.get(atom),\n        onChange: (next: boolean) => {\n          store.set(atom, next);\n          onChange?.(next);\n        },\n      };\n    }\n  }\n}\n\nexport function useJotaiFilterBarProps({\n  search,\n  filters,\n  timeRange,\n  dateRange,\n  ...props\n}: JotaiFilterBarProps): FilterBarProps {\n  useJotaiFilterBarAtoms({ search, filters, timeRange, dateRange });\n  const controlledSearch = useJotaiSearch(search);\n  const controlledFilters = useJotaiFilters(filters);\n  const controlledTimeRange = useJotaiRange(timeRange);\n  const controlledDateRange = useJotaiRange(dateRange);\n\n  return {\n    ...props,\n    ...(controlledSearch ? { search: controlledSearch } : {}),\n    ...(controlledFilters ? { filters: controlledFilters } : {}),\n    ...(controlledTimeRange ? { timeRange: controlledTimeRange } : {}),\n    ...(controlledDateRange ? { dateRange: controlledDateRange } : {}),\n  };\n}\n"],"names":["useStore","useReducer","useMemo","useEffect","useCallback"],"mappings":"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"}

package/dist/components/jotai-bindings-core.d.ts

@@ -19,7 +19,10 @@ export type JotaiFilterBarRangeProps = Omit<FilterBarRangeProps, "from" | "to" |
     atom: JotaiWritableAtom<JotaiFilterBarRangeValue>;
     onApply?: FilterBarRangeProps["onApply"];
 };
-type AtomizedFilter<TFilter extends FilterBarFilter> = Omit<TFilter, "value" | "onChange"> & {
+type ValuedFilterBarFilter = Extract<FilterBarFilter, {
+    value: unknown;
+}>;
+type AtomizedFilter<TFilter extends ValuedFilterBarFilter> = Omit<TFilter, "value" | "onChange"> & {
     atom: JotaiWritableAtom<TFilter["value"]>;
     onChange?: TFilter["onChange"];
 };