@flanksource/clicky-ui 0.3.34 → 0.3.36

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, 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":["useState","useFloatingZIndex","useRef","useEscapeLayer","useLayoutEffect","useEffect","jsxs","cn","inputSizeClass","jsx","Icon","UiChevronDown","createPortal","Tree"],"mappings":"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"}
+{"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, 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  getAriaLabel?: TreeProps<T>[\"getAriaLabel\"];\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /** Reports nodes whose children should be fetched when first expanded. */\n  hasMoreChildren?: TreeProps<T>[\"hasMoreChildren\"];\n  /** Fetches a lazy node's children when it is first expanded. */\n  loadChildren?: TreeProps<T>[\"loadChildren\"];\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 when a selectable node is clicked. */\n  onSelect: (node: T) => void;\n  /** Close after a row selection. Disable when a footer explicitly commits the pending node. */\n  closeOnSelect?: boolean;\n  /** Highlights the selected 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  /** Accessible name for the closed picker trigger. */\n  triggerAriaLabel?: string;\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  getAriaLabel,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  hasMoreChildren,\n  loadChildren,\n  isSelectable,\n  onSelect,\n  closeOnSelect = true,\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  triggerAriaLabel,\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-label={triggerAriaLabel}\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                {...(getAriaLabel ? { getAriaLabel } : {})}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                {...(hasMoreChildren ? { hasMoreChildren } : {})}\n                {...(loadChildren ? { loadChildren } : {})}\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                    if (closeOnSelect) 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":["useState","useFloatingZIndex","useRef","useEscapeLayer","useLayoutEffect","useEffect","jsxs","cn","inputSizeClass","jsx","Icon","UiChevronDown","createPortal","Tree"],"mappings":"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"}

package/dist/components/TreePickerField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, Ref } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode, Ref } from 'react';
 import { TreeProps } from '../data/Tree';
 import { FormSize } from './json-schema-form-size';
 export interface TreePickerFieldProps<T> {
@@ -6,18 +6,25 @@ export interface TreePickerFieldProps<T> {
     roots: T[];
     getKey: (node: T) => string | number;
     getChildren: (node: T) => T[] | undefined;
+    getAriaLabel?: TreeProps<T>["getAriaLabel"];
     renderRow: TreeProps<T>["renderRow"];
     getSearchText?: (node: T) => string;
     defaultOpen?: (node: T, depth: number) => boolean;
+    /** Reports nodes whose children should be fetched when first expanded. */
+    hasMoreChildren?: TreeProps<T>["hasMoreChildren"];
+    /** Fetches a lazy node's children when it is first expanded. */
+    loadChildren?: TreeProps<T>["loadChildren"];
     /**
      * Decides which nodes commit a selection when clicked. A click on a
      * non-selectable node still toggles its expansion (it never closes the
      * picker). Defaults to every node selectable.
      */
     isSelectable?: (node: T) => boolean;
-    /** Fires for a selectable node, then closes the dropdown. */
+    /** Fires when a selectable node is clicked. */
     onSelect: (node: T) => void;
-    /** Highlights the committed node inside the open tree. */
+    /** Close after a row selection. Disable when a footer explicitly commits the pending node. */
+    closeOnSelect?: boolean;
+    /** Highlights the selected node inside the open tree. */
     selected?: T | null;
     /**
      * Force-opens the `selected` node's ancestors so the current value is always
@@ -48,6 +55,8 @@ export interface TreePickerFieldProps<T> {
     renderFooter?: (props: {
         close: () => void;
     }) => ReactNode;
+    /** Accessible name for the closed picker trigger. */
+    triggerAriaLabel?: string;
 }
 export interface TreePickerTriggerProps {
     open: boolean;
@@ -55,5 +64,5 @@ export interface TreePickerTriggerProps {
     triggerRef: Ref<HTMLButtonElement>;
     toggle: () => void;
 }
-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, renderFooter, }: TreePickerFieldProps<T>): import("react").JSX.Element;
+export declare function TreePickerField<T>({ roots, getKey, getChildren, getAriaLabel, renderRow, getSearchText, defaultOpen, hasMoreChildren, loadChildren, isSelectable, onSelect, closeOnSelect, selected, revealSelected, showControls, ariaLabel, empty, label, placeholder, disabled, size, className, triggerClassName, panelClassName, renderTrigger, renderFooter, triggerAriaLabel, }: TreePickerFieldProps<T>): import("react").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,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;AAaxE,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;IAC7D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC;CAC5D;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,EACb,YAAY,GACb,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BAsKzB"}
+{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"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"}

package/dist/components/TreePickerField.js

@@ -15,11 +15,15 @@ function TreePickerField({
   roots,
   getKey,
   getChildren,
+  getAriaLabel,
   renderRow,
   getSearchText,
   defaultOpen,
+  hasMoreChildren,
+  loadChildren,
   isSelectable,
   onSelect,
+  closeOnSelect = true,
   selected,
   revealSelected,
   showControls,
@@ -33,7 +37,8 @@ function TreePickerField({
   triggerClassName,
   panelClassName,
   renderTrigger,
-  renderFooter
+  renderFooter,
+  triggerAriaLabel
 }) {
   const [open, setOpen] = useState(false);
   const floatingZ = useFloatingZIndex();
@@ -104,6 +109,7 @@ function TreePickerField({
         ref: anchorRef,
         type: "button",
         disabled,
+        "aria-label": triggerAriaLabel,
         "aria-haspopup": "tree",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -159,8 +165,11 @@ function TreePickerField({
                 getKey,
                 getChildren,
                 renderRow,
+                ...getAriaLabel ? { getAriaLabel } : {},
                 ...getSearchText ? { getSearchText } : {},
                 ...defaultOpen ? { defaultOpen } : {},
+                ...hasMoreChildren ? { hasMoreChildren } : {},
+                ...loadChildren ? { loadChildren } : {},
                 ...selected !== void 0 ? { selected } : {},
                 ...revealSelected !== void 0 ? { revealSelected } : {},
                 ...showControls !== void 0 ? { showControls } : {},
@@ -169,7 +178,7 @@ function TreePickerField({
                 onSelect: (node) => {
                   if (!isSelectable || isSelectable(node)) {
                     onSelect(node);
-                    setOpen(false);
+                    if (closeOnSelect) setOpen(false);
                   }
                 }
               }

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, 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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"}
+{"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  getAriaLabel?: TreeProps<T>[\"getAriaLabel\"];\n  renderRow: TreeProps<T>[\"renderRow\"];\n  getSearchText?: (node: T) => string;\n  defaultOpen?: (node: T, depth: number) => boolean;\n  /** Reports nodes whose children should be fetched when first expanded. */\n  hasMoreChildren?: TreeProps<T>[\"hasMoreChildren\"];\n  /** Fetches a lazy node's children when it is first expanded. */\n  loadChildren?: TreeProps<T>[\"loadChildren\"];\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 when a selectable node is clicked. */\n  onSelect: (node: T) => void;\n  /** Close after a row selection. Disable when a footer explicitly commits the pending node. */\n  closeOnSelect?: boolean;\n  /** Highlights the selected 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  /** Accessible name for the closed picker trigger. */\n  triggerAriaLabel?: string;\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  getAriaLabel,\n  renderRow,\n  getSearchText,\n  defaultOpen,\n  hasMoreChildren,\n  loadChildren,\n  isSelectable,\n  onSelect,\n  closeOnSelect = true,\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  triggerAriaLabel,\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-label={triggerAriaLabel}\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                {...(getAriaLabel ? { getAriaLabel } : {})}\n                {...(getSearchText ? { getSearchText } : {})}\n                {...(defaultOpen ? { defaultOpen } : {})}\n                {...(hasMoreChildren ? { hasMoreChildren } : {})}\n                {...(loadChildren ? { loadChildren } : {})}\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                    if (closeOnSelect) 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/UnitStepControls.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export declare function UnitStepControls({ label, suffix, decrease, increase, schemaReadOnly, onChange, }: {
     label: string;
     suffix: ReactNode;

package/dist/components/button.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { buttonVariants } from './button-variants';
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants> & {
     /** Render the button styles onto the child element via Radix Slot. */
@@ -9,7 +9,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & VariantProps
     /** Label to render while loading; defaults to the normal children. */
     loadingLabel?: ReactNode;
 };
-export declare const Button: import('../../../../node_modules/@types/react/index.d.ts').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
     variant?: "link" | "default" | "outline" | "destructive" | "secondary" | "ghost" | null | undefined;
     size?: "sm" | "lg" | "icon" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
@@ -19,5 +19,5 @@ export declare const Button: import('../../../../node_modules/@types/react/index
     loading?: boolean;
     /** Label to render while loading; defaults to the normal children. */
     loadingLabel?: ReactNode;
-} & import('../../../../node_modules/@types/react/index.d.ts').RefAttributes<HTMLButtonElement>>;
+} & import('react').RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=button.d.ts.map

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

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { KeyboardEvent, ReactNode } from 'react';
 import { LabelIconSpec } from '../data/Icon';
 import { FormSize } from './json-schema-form-size';
 export type ComboboxOption = {

package/dist/components/density-switcher.d.ts

@@ -6,5 +6,5 @@ export type DensitySwitcherProps = {
     /** Classes applied to the popup menu. */
     menuClassName?: string;
 };
-export declare const DensitySwitcher: import('../../../../node_modules/@types/react/index.d.ts').ForwardRefExoticComponent<DensitySwitcherProps & import('../../../../node_modules/@types/react/index.d.ts').RefAttributes<HTMLDivElement>>;
+export declare const DensitySwitcher: import('react').ForwardRefExoticComponent<DensitySwitcherProps & import('react').RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=density-switcher.d.ts.map

package/dist/components/filter-bar-context.d.ts

@@ -1,5 +1,5 @@
 export declare const FILTER_INPUT_DEBOUNCE_MS = 500;
-export declare const FilterBarContext: import('../../../../node_modules/@types/react/index.d.ts').Context<{
+export declare const FilterBarContext: import('react').Context<{
     autoSubmit: boolean;
 }>;
 //# sourceMappingURL=filter-bar-context.d.ts.map

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

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { FilterMode } from '../data/FilterPill';
 import { LabelIconSpec } from '../data/Icon';
 import { MultiSelectOption } from './MultiSelect';
@@ -6,7 +6,7 @@ export type FilterBarMultiFilterMode = Extract<FilterMode, "include" | "exclude"
 export declare function mergeMultiSelectOptions(head: MultiSelectOption[], extra: MultiSelectOption[]): MultiSelectOption[];
 export declare function multiSelectOptionText(option: MultiSelectOption): string;
 export declare function summarizeMultiFilter(label: string, value: Record<string, FilterBarMultiFilterMode>): string;
-export declare function useDebouncedMultiDraft(value: Record<string, FilterBarMultiFilterMode>, onChange: (value: Record<string, FilterBarMultiFilterMode>) => void): readonly [Record<string, FilterBarMultiFilterMode>, import('../../../../node_modules/@types/react/index.d.ts').Dispatch<import('../../../../node_modules/@types/react/index.d.ts').SetStateAction<Record<string, FilterBarMultiFilterMode>>>];
+export declare function useDebouncedMultiDraft(value: Record<string, FilterBarMultiFilterMode>, onChange: (value: Record<string, FilterBarMultiFilterMode>) => void): readonly [Record<string, FilterBarMultiFilterMode>, import('react').Dispatch<import('react').SetStateAction<Record<string, FilterBarMultiFilterMode>>>];
 export declare function updateMultiFilterValue(current: Record<string, FilterBarMultiFilterMode>, optionValue: string, nextMode: FilterMode): Record<string, FilterBarMultiFilterMode>;
 export declare function nextFilterMode(mode: FilterMode): FilterMode;
 export declare function sizedIcon(icon: LabelIconSpec | undefined, px: number): LabelIconSpec | undefined;

package/dist/components/form-lookup-context.d.ts

@@ -1,5 +1,5 @@
 import { LookupDescriptor, LookupFetcher } from './json-schema-form-types';
-export declare const FormLookupContext: import('../../../../node_modules/@types/react/index.d.ts').Context<LookupFetcher | undefined>;
+export declare const FormLookupContext: import('react').Context<LookupFetcher | undefined>;
 export declare function useLookupFetcher(): LookupFetcher | undefined;
 export declare function resolveLookupScope(descriptor: LookupDescriptor, rootValue: Record<string, unknown> | undefined): Record<string, string>;
 //# sourceMappingURL=form-lookup-context.d.ts.map

package/dist/components/icon-menu-picker.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactElement, ReactNode } from 'react';
 import { StaticIconComponent } from '../data/Icon';
 export type IconMenuOption<T extends string> = {
     value: T;

package/dist/components/json-schema-form-accordion-array.cjs

@@ -6,6 +6,8 @@ const jsonSchemaFormErrors = require("./json-schema-form-errors.cjs");
 const jsonSchemaFormItemRow = require("./json-schema-form-item-row.cjs");
 const jsonSchemaFormItemSummary = require("./json-schema-form-item-summary.cjs");
 const jsonSchemaFormUtils = require("./json-schema-form-utils.cjs");
+const utils = require("../lib/utils.cjs");
+const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 function AccordionArray({
   field,
   ctx,
@@ -25,6 +27,45 @@ function AccordionArray({
     var _a;
     return ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index })) ?? jsonSchemaFormItemSummary.itemSummaryFor({ item, index, spec, itemSchema });
   }
+  function renderSummary({
+    item,
+    index,
+    open
+  }) {
+    const summary = summaryFor(item, index);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemGlyph, { glyph: summary.glyph }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemBadge, { badge: summary.badge }),
+      summary.flagged && /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.RequiredMark, {}),
+      summary.summary && /* @__PURE__ */ jsxRuntime.jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
+      !open && /* @__PURE__ */ jsxRuntime.jsx(
+        jsonSchemaFormItemRow.ItemErrorMark,
+        {
+          count: jsonSchemaFormErrors.errorCountUnderInstancePath(
+            ctx.errors,
+            jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, index)
+          )
+        }
+      )
+    ] });
+  }
+  if (ctx.presentation)
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: items.length === 0 ? jsonSchemaFormItemSummary.noItemsLabel(spec) : jsonSchemaFormItemSummary.itemCountLabel(spec, items.length) }),
+      items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: utils.cn(
+            "flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40",
+            jsonSchemaFormSize.controlMinHeightClass[ctx.size]
+          ),
+          children: renderSummary({ item, index, open: false })
+        },
+        index
+      )),
+      items.length === 0 && emptyCopy && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: emptyCopy })
+    ] });
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionList.AccordionList,
     {
@@ -38,29 +79,11 @@ function AccordionArray({
       itemLabel: ({ item, index }) => summaryFor(item, index).title,
       allowReorder: jsonSchemaFormItemSummary.itemActionsAllow(spec, "reorder"),
       allowDuplicate: jsonSchemaFormItemSummary.itemActionsAllow(spec, "duplicate"),
-      allowRemove: jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove"),
-      onCreate: () => jsonSchemaFormUtils.seedFromSchema(itemSchema),
+      allowRemove: jsonSchemaFormItemSummary.itemActionsAllow(spec, "remove") && jsonSchemaFormUtils.canRemoveItem(field, items.length),
+      ...jsonSchemaFormUtils.canAddItem(field, items.length) ? { onCreate: () => jsonSchemaFormUtils.seedFromSchema(itemSchema) } : {},
       addLabel: jsonSchemaFormItemSummary.addItemLabel(spec),
       ...emptyCopy ? { addDescription: emptyCopy } : {},
-      renderHeader: ({ item, index, open }) => {
-        const summary = summaryFor(item, index);
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemGlyph, { glyph: summary.glyph }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
-          /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.ItemBadge, { badge: summary.badge }),
-          summary.flagged && /* @__PURE__ */ jsxRuntime.jsx(jsonSchemaFormItemRow.RequiredMark, {}),
-          summary.summary && /* @__PURE__ */ jsxRuntime.jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
-          !open && /* @__PURE__ */ jsxRuntime.jsx(
-            jsonSchemaFormItemRow.ItemErrorMark,
-            {
-              count: jsonSchemaFormErrors.errorCountUnderInstancePath(
-                ctx.errors,
-                jsonSchemaFormErrors.appendInstancePath(ctx.instancePath, index)
-              )
-            }
-          )
-        ] });
-      },
+      renderHeader: renderSummary,
       renderBody: ({ item, index, onChange }) => {
         var _a;
         return (

package/dist/components/json-schema-form-accordion-array.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-accordion-array.cjs","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport { appendInstancePath, errorCountUnderInstancePath } from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport { fieldInputId, seedFromSchema } from \"./json-schema-form-utils\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return field.itemSummary?.({ item, index }) ?? itemSummaryFor({ item, index, spec, itemSchema });\n  }\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length)}\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) => fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)}\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\")}\n      onCreate={() => seedFromSchema(itemSchema)}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={({ item, index, open }) => {\n        const summary = summaryFor(item, index);\n        return (\n          <>\n            <ItemGlyph glyph={summary.glyph} />\n            <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n            <ItemBadge badge={summary.badge} />\n            {summary.flagged && <RequiredMark />}\n            {summary.summary && (\n              <code className=\"truncate font-mono text-xs text-muted-foreground\">\n                {summary.summary}\n              </code>\n            )}\n            {!open && (\n              <ItemErrorMark\n                count={errorCountUnderInstancePath(\n                  ctx.errors,\n                  appendInstancePath(ctx.instancePath, index),\n                )}\n              />\n            )}\n          </>\n        );\n      }}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","itemSummaryFor","jsx","AccordionList","noItemsLabel","itemCountLabel","fieldInputId","appendInstancePath","itemActionsAllow","seedFromSchema","addItemLabel","jsxs","Fragment","ItemGlyph","ItemBadge","RequiredMark","ItemErrorMark","errorCountUnderInstancePath"],"mappings":"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"}
+{"version":3,"file":"json-schema-form-accordion-array.cjs","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"sourcesContent":["import { AccordionList } from \"./AccordionList\";\nimport {\n  appendInstancePath,\n  errorCountUnderInstancePath,\n} from \"./json-schema-form-errors\";\nimport {\n  ItemBadge,\n  ItemErrorMark,\n  ItemGlyph,\n  RequiredMark,\n} from \"./json-schema-form-item-row\";\nimport {\n  addItemLabel,\n  emptyItemsCopy,\n  itemActionsAllow,\n  itemCountLabel,\n  itemSummaryFor,\n  noItemsLabel,\n  resolveItemSpec,\n} from \"./json-schema-form-item-summary\";\nimport {\n  canAddItem,\n  canRemoveItem,\n  fieldInputId,\n  seedFromSchema,\n} from \"./json-schema-form-utils\";\nimport { cn } from \"../lib/utils\";\nimport { controlMinHeightClass } from \"./json-schema-form-size\";\nimport type { FieldControl, RenderContext } from \"./json-schema-form-types\";\n\n// AccordionArray is the JsonSchemaForm adapter over AccordionList: it turns\n// `x-item` into row content and the schema's item into a recursive sub-form, and\n// owns nothing structural. Everything about the interaction — one row open at a\n// time, roving focus, the add row that doubles as the empty state — lives in\n// AccordionList, which knows nothing about JSON Schema.\nexport function AccordionArray({\n  field,\n  ctx,\n  readOnly,\n}: {\n  field: FieldControl;\n  ctx: RenderContext;\n  readOnly: boolean;\n}) {\n  const items = Array.isArray(field.value) ? field.value : [];\n  const itemSchema = field.itemSchema ?? { type: \"object\" };\n  const spec = field.itemSpec ?? resolveItemSpec(field.schema, itemSchema);\n  const emptyCopy = emptyItemsCopy(spec, field.schema);\n  // The array's help mode governs its whole subtree. Without this the fields\n  // inside an expanded row keep the form-level default, so an accordion that\n  // resolved to \"hover\" would still stack a two-line paragraph under every\n  // control — the exact height the summary rows exist to reclaim.\n  const childCtx: RenderContext = {\n    ...ctx,\n    readOnly,\n    depth: ctx.depth + 1,\n    ...(field.helpDisplay\n      ? { layout: { ...ctx.layout, help: field.helpDisplay } }\n      : {}),\n  };\n\n  function summaryFor(item: unknown, index: number) {\n    return (\n      field.itemSummary?.({ item, index }) ??\n      itemSummaryFor({ item, index, spec, itemSchema })\n    );\n  }\n\n  function renderSummary({\n    item,\n    index,\n    open,\n  }: {\n    item: unknown;\n    index: number;\n    open: boolean;\n  }) {\n    const summary = summaryFor(item, index);\n    return (\n      <>\n        <ItemGlyph glyph={summary.glyph} />\n        <span className=\"shrink-0 text-sm font-medium\">{summary.title}</span>\n        <ItemBadge badge={summary.badge} />\n        {summary.flagged && <RequiredMark />}\n        {summary.summary && (\n          <code className=\"truncate font-mono text-xs text-muted-foreground\">\n            {summary.summary}\n          </code>\n        )}\n        {!open && (\n          <ItemErrorMark\n            count={errorCountUnderInstancePath(\n              ctx.errors,\n              appendInstancePath(ctx.instancePath, index),\n            )}\n          />\n        )}\n      </>\n    );\n  }\n\n  if (ctx.presentation)\n    return (\n      <div className=\"min-w-0 space-y-1\">\n        <div className=\"text-xs text-muted-foreground\">\n          {items.length === 0\n            ? noItemsLabel(spec)\n            : itemCountLabel(spec, items.length)}\n        </div>\n        {items.map((item, index) => (\n          <div\n            key={index}\n            className={cn(\n              \"flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40\",\n              controlMinHeightClass[ctx.size],\n            )}\n          >\n            {renderSummary({ item, index, open: false })}\n          </div>\n        ))}\n        {items.length === 0 && emptyCopy && (\n          <p className=\"text-xs text-muted-foreground\">{emptyCopy}</p>\n        )}\n      </div>\n    );\n\n  return (\n    <AccordionList<unknown>\n      items={items}\n      onChange={(next) => field.onChange(next)}\n      summary={\n        items.length === 0\n          ? noItemsLabel(spec)\n          : itemCountLabel(spec, items.length)\n      }\n      size={ctx.size}\n      readOnly={readOnly}\n      itemId={(index) =>\n        fieldInputId(appendInstancePath(ctx.instancePath, index), ctx.idPrefix)\n      }\n      // The panel's controls are the form's own inputs; anything else focusable\n      // inside an item (a help disclosure, a remove button on a nested array)\n      // would otherwise win the caret on add.\n      focusSelector=\"[data-jsf-input]\"\n      itemLabel={({ item, index }) => summaryFor(item, index).title}\n      allowReorder={itemActionsAllow(spec, \"reorder\")}\n      allowDuplicate={itemActionsAllow(spec, \"duplicate\")}\n      allowRemove={itemActionsAllow(spec, \"remove\") && canRemoveItem(field, items.length)}\n      // AccordionList shows its add row only when it is given something to\n      // create, so withholding onCreate at maxItems is how the bound reaches it.\n      {...(canAddItem(field, items.length)\n        ? { onCreate: () => seedFromSchema(itemSchema) }\n        : {})}\n      addLabel={addItemLabel(spec)}\n      {...(emptyCopy ? { addDescription: emptyCopy } : {})}\n      renderHeader={renderSummary}\n      renderBody={({ item, index, onChange }) =>\n        // Recurse through the shared pipeline so consumer pre/post extensions\n        // still apply to the item and its properties.\n        ctx.render.renderFieldNodes(\n          {\n            key: `${field.key}[${index}]`,\n            prop: itemSchema,\n            required: false,\n            value: item,\n            onChange,\n            instancePath: appendInstancePath(ctx.instancePath, index),\n          },\n          childCtx,\n        )?.value ?? null\n      }\n    />\n  );\n}\n"],"names":["resolveItemSpec","emptyItemsCopy","itemSummaryFor","jsxs","Fragment","jsx","ItemGlyph","ItemBadge","RequiredMark","ItemErrorMark","errorCountUnderInstancePath","appendInstancePath","noItemsLabel","itemCountLabel","cn","controlMinHeightClass","AccordionList","fieldInputId","itemActionsAllow","canRemoveItem","canAddItem","seedFromSchema","addItemLabel"],"mappings":"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"}

package/dist/components/json-schema-form-accordion-array.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-schema-form-accordion-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAO5E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkFA"}
+{"version":3,"file":"json-schema-form-accordion-array.d.ts","sourceRoot":"","sources":["../../src/components/json-schema-form-accordion-array.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAO5E,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,GAAG,EACH,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,YAAY,CAAC;IACpB,GAAG,EAAE,aAAa,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB,+BAkIA"}

package/dist/components/json-schema-form-accordion-array.js

@@ -1,9 +1,11 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { AccordionList } from "./AccordionList.js";
 import { appendInstancePath, errorCountUnderInstancePath } from "./json-schema-form-errors.js";
 import { ItemGlyph, ItemBadge, RequiredMark, ItemErrorMark } from "./json-schema-form-item-row.js";
-import { resolveItemSpec, emptyItemsCopy, addItemLabel, itemActionsAllow, noItemsLabel, itemCountLabel, itemSummaryFor } from "./json-schema-form-item-summary.js";
-import { seedFromSchema, fieldInputId } from "./json-schema-form-utils.js";
+import { resolveItemSpec, emptyItemsCopy, noItemsLabel, itemCountLabel, addItemLabel, itemActionsAllow, itemSummaryFor } from "./json-schema-form-item-summary.js";
+import { canAddItem, seedFromSchema, canRemoveItem, fieldInputId } from "./json-schema-form-utils.js";
+import { cn } from "../lib/utils.js";
+import { controlMinHeightClass } from "./json-schema-form-size.js";
 function AccordionArray({
   field,
   ctx,
@@ -23,6 +25,45 @@ function AccordionArray({
     var _a;
     return ((_a = field.itemSummary) == null ? void 0 : _a.call(field, { item, index })) ?? itemSummaryFor({ item, index, spec, itemSchema });
   }
+  function renderSummary({
+    item,
+    index,
+    open
+  }) {
+    const summary = summaryFor(item, index);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ItemGlyph, { glyph: summary.glyph }),
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
+      /* @__PURE__ */ jsx(ItemBadge, { badge: summary.badge }),
+      summary.flagged && /* @__PURE__ */ jsx(RequiredMark, {}),
+      summary.summary && /* @__PURE__ */ jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
+      !open && /* @__PURE__ */ jsx(
+        ItemErrorMark,
+        {
+          count: errorCountUnderInstancePath(
+            ctx.errors,
+            appendInstancePath(ctx.instancePath, index)
+          )
+        }
+      )
+    ] });
+  }
+  if (ctx.presentation)
+    return /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: items.length === 0 ? noItemsLabel(spec) : itemCountLabel(spec, items.length) }),
+      items.map((item, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 flex-wrap items-center gap-2 rounded px-2 py-1 even:bg-muted/40",
+            controlMinHeightClass[ctx.size]
+          ),
+          children: renderSummary({ item, index, open: false })
+        },
+        index
+      )),
+      items.length === 0 && emptyCopy && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: emptyCopy })
+    ] });
   return /* @__PURE__ */ jsx(
     AccordionList,
     {
@@ -36,29 +77,11 @@ function AccordionArray({
       itemLabel: ({ item, index }) => summaryFor(item, index).title,
       allowReorder: itemActionsAllow(spec, "reorder"),
       allowDuplicate: itemActionsAllow(spec, "duplicate"),
-      allowRemove: itemActionsAllow(spec, "remove"),
-      onCreate: () => seedFromSchema(itemSchema),
+      allowRemove: itemActionsAllow(spec, "remove") && canRemoveItem(field, items.length),
+      ...canAddItem(field, items.length) ? { onCreate: () => seedFromSchema(itemSchema) } : {},
       addLabel: addItemLabel(spec),
       ...emptyCopy ? { addDescription: emptyCopy } : {},
-      renderHeader: ({ item, index, open }) => {
-        const summary = summaryFor(item, index);
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(ItemGlyph, { glyph: summary.glyph }),
-          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium", children: summary.title }),
-          /* @__PURE__ */ jsx(ItemBadge, { badge: summary.badge }),
-          summary.flagged && /* @__PURE__ */ jsx(RequiredMark, {}),
-          summary.summary && /* @__PURE__ */ jsx("code", { className: "truncate font-mono text-xs text-muted-foreground", children: summary.summary }),
-          !open && /* @__PURE__ */ jsx(
-            ItemErrorMark,
-            {
-              count: errorCountUnderInstancePath(
-                ctx.errors,
-                appendInstancePath(ctx.instancePath, index)
-              )
-            }
-          )
-        ] });
-      },
+      renderHeader: renderSummary,
       renderBody: ({ item, index, onChange }) => {
         var _a;
         return (