@flanksource/clicky-ui 0.3.33 → 0.3.35

package/dist/components/RangeSlider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.cjs","sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(clampNumber(next, min, max));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"names":["cn","jsxs","jsx"],"mappings":";;;;AAoBA,MAAM,iBACJ;AAEK,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAqB;AACnB,QAAM,CAAC,OAAO,KAAK,IAAI,oBAAoB,OAAO,KAAK,GAAG;AAE1D,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,YAAY,aAAa,SAAS,GACnD,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAEFE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWF,MAAAA;AAAAA,YACT;AAAA,YACA;AAAA,UAAA;AAAA,UAEF,OAAO;AAAA,YACL,MAAM,GAAG,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,YACxC,OAAO,GAAG,MAAM,eAAe,OAAO,KAAK,GAAG,CAAC;AAAA,UAAA;AAAA,QACjD;AAAA,MAAA;AAAA,MAEFE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,WAAWF,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,UACzE,OAAO,EAAE,QAAQ,SAAS,MAAM,KAAK,GAAA;AAAA,UACrC,UAAU,CAAC,UAAU;AACnB,kBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,qBAAS,CAAC,KAAK,IAAI,WAAW,KAAK,GAAG,KAAK,CAAC;AAAA,UAC9C;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFE,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAY;AAAA,UACZ;AAAA,UACA;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,WAAWF,MAAAA,GAAG,qBAAqB,gBAAgB,sBAAsB;AAAA,UACzE,UAAU,CAAC,UAAU;AACnB,kBAAM,YAAY,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,KAAK,GAAG;AAClE,qBAAS,CAAC,OAAO,KAAK,IAAI,WAAW,KAAK,CAAC,CAAC;AAAA,UAC9C;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,IACC,WACCC,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAW,QAAQ,eAAe,YAAY,CAAC;AAAA,UAC/C;AAAA,UACA,KAAK;AAAA,UACL;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,SAAS,SAAS,CAAC,MAAM,KAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAE5CA,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAW,QAAQ,eAAe,YAAY,CAAC;AAAA,UAC/C,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,OAAO;AAAA,UACP,UAAU,CAAC,SAAS,SAAS,CAAC,OAAO,IAAI,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5C,EAAA,CACF,IACE;AAAA,EAAA,GACN;AAEJ;AAEA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACED,2BAAAA,KAAC,SAAA,EAAM,WAAU,8FACf,UAAA;AAAA,IAAAC,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,IACbA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAY;AAAA,QACZ,WAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,UAAU,CAAC,UAAU;AACnB,cAAI,MAAM,cAAc,UAAU,GAAI;AACtC,gBAAM,OAAO,OAAO,MAAM,cAAc,KAAK;AAC7C,cAAI,CAAC,OAAO,SAAS,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,0BAA0B;AAClF,mBAAS,YAAY,MAAM,KAAK,GAAG,CAAC;AAAA,QACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,sBACJ;AAEF,SAAS,oBAAoB,OAAyB,KAAa,KAA+B;AAChG,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,QAAM,QAAQ,YAAY,KAAK,IAAI,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG;AAChE,SAAO,CAAC,OAAO,KAAK;AACtB;AAEA,SAAS,YAAY,OAAe,KAAa,KAAa;AAC5D,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;AAC3C;AAEA,SAAS,eAAe,OAAe,KAAa,KAAa;AAC/D,MAAI,OAAO,IAAK,QAAO;AACvB,UAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,SAAS,eAAe,OAAuB;AAC7C,SAAO,MAAM,OAAO,CAAC,EAAE,gBAAgB,MAAM,MAAM,CAAC;AACtD;;"}
+{"version":3,"file":"RangeSlider.cjs","sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.\n * Mirrors what the range inputs enforce, so typed entry cannot produce a value\n * the thumbs could never reach.\n */\nfunction snapToStep(\n  value: number,\n  { base, step, min, max }: { base: number; step: number; min: number; max: number },\n): number {\n  if (!(step > 0)) return clampNumber(value, min, max);\n  const aligned = base + Math.round((value - base) / step) * step;\n  if (aligned < min) {\n    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);\n  }\n  if (aligned > max) {\n    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);\n  }\n  return aligned;\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"names":["cn","jsxs","jsx"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAKF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,YAA8B,EAC9B,YAA8B,EAC9B,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EAAE,sBAAsB,GACvC,EAAE,gBAAgB,+BA0ElB"}
+{"version":3,"file":"RangeSlider.d.ts","sourceRoot":"","sources":["../../src/components/RangeSlider.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,gBAAgB,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC;AAKF,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,GAAG,EACH,KAAK,EACL,QAAQ,EACR,IAAQ,EACR,YAA8B,EAC9B,YAA8B,EAC9B,QAAgB,EAChB,SAAS,EACT,cAAc,EACd,cAAc,EACd,cAAc,EAAE,sBAAsB,GACvC,EAAE,gBAAgB,+BA4ElB"}

package/dist/components/RangeSlider.js

@@ -83,6 +83,7 @@ function RangeSlider({
           min,
           max: upper,
           step,
+          stepBase: min,
           value: lower,
           onChange: (next) => onChange([next, upper])
         }
@@ -95,6 +96,7 @@ function RangeSlider({
           min: lower,
           max,
           step,
+          stepBase: min,
           value: upper,
           onChange: (next) => onChange([lower, next])
         }
@@ -108,6 +110,7 @@ function EditableBound({
   min,
   max,
   step,
+  stepBase,
   value,
   onChange
 }) {
@@ -127,7 +130,7 @@ function EditableBound({
           if (event.currentTarget.value === "") return;
           const next = Number(event.currentTarget.value);
           if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);
-          onChange(clampNumber(next, min, max));
+          onChange(snapToStep(next, { base: stepBase, step, min, max }));
         }
       }
     )
@@ -142,6 +145,17 @@ function normalizeRangeValue(value, min, max) {
 function clampNumber(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+function snapToStep(value, { base, step, min, max }) {
+  if (!(step > 0)) return clampNumber(value, min, max);
+  const aligned = base + Math.round((value - base) / step) * step;
+  if (aligned < min) {
+    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);
+  }
+  if (aligned > max) {
+    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);
+  }
+  return aligned;
+}
 function valueToPercent(value, min, max) {
   if (max <= min) return 0;
   return (value - min) / (max - min) * 100;

package/dist/components/RangeSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider.js","sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(clampNumber(next, min, max));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"RangeSlider.js","sources":["../../src/components/RangeSlider.tsx"],"sourcesContent":["import { cn } from \"../lib/utils\";\n\nexport type RangeSliderValue = [number, number];\n\nexport type RangeSliderProps = {\n  min: number;\n  max: number;\n  value: RangeSliderValue;\n  onChange: (value: RangeSliderValue) => void;\n  step?: number;\n  ariaLabelMin?: string;\n  ariaLabelMax?: string;\n  /** Shows number fields below the track for exact keyboard entry. */\n  editable?: boolean;\n  className?: string;\n  trackClassName?: string;\n  rangeClassName?: string;\n  thumbClassName?: string;\n};\n\nconst thumbClassName =\n  \"[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-background/80 [&::-webkit-slider-thumb]:bg-muted-foreground [&::-webkit-slider-thumb]:shadow-sm [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-background/80 [&::-moz-range-thumb]:bg-muted-foreground [&::-moz-range-thumb]:shadow-sm\";\n\nexport function RangeSlider({\n  min,\n  max,\n  value,\n  onChange,\n  step = 1,\n  ariaLabelMin = \"Minimum value\",\n  ariaLabelMax = \"Maximum value\",\n  editable = false,\n  className,\n  trackClassName,\n  rangeClassName,\n  thumbClassName: thumbOverrideClassName,\n}: RangeSliderProps) {\n  const [lower, upper] = normalizeRangeValue(value, min, max);\n\n  return (\n    <div className={cn(editable && \"space-y-2\", className)}>\n      <div className=\"relative h-6\">\n        <div\n          className={cn(\n            \"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-border\",\n            trackClassName,\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-primary/70\",\n            rangeClassName,\n          )}\n          style={{\n            left: `${valueToPercent(lower, min, max)}%`,\n            right: `${100 - valueToPercent(upper, min, max)}%`,\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMin}\n          min={min}\n          max={max}\n          step={step}\n          value={lower}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          style={{ zIndex: lower >= max ? 30 : 20 }}\n          onChange={(event) => {\n            const nextLower = clampNumber(Number(event.target.value), min, max);\n            onChange([Math.min(nextLower, upper), upper]);\n          }}\n        />\n        <input\n          type=\"range\"\n          aria-label={ariaLabelMax}\n          min={min}\n          max={max}\n          step={step}\n          value={upper}\n          className={cn(baseSliderClassName, thumbClassName, thumbOverrideClassName)}\n          onChange={(event) => {\n            const nextUpper = clampNumber(Number(event.target.value), min, max);\n            onChange([lower, Math.max(nextUpper, lower)]);\n          }}\n        />\n      </div>\n      {editable ? (\n        <div className=\"grid grid-cols-2 gap-2\">\n          <EditableBound\n            label=\"Min\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMin)}`}\n            min={min}\n            max={upper}\n            step={step}\n            stepBase={min}\n            value={lower}\n            onChange={(next) => onChange([next, upper])}\n          />\n          <EditableBound\n            label=\"Max\"\n            ariaLabel={`Edit ${lowercaseFirst(ariaLabelMax)}`}\n            min={lower}\n            max={max}\n            step={step}\n            stepBase={min}\n            value={upper}\n            onChange={(next) => onChange([lower, next])}\n          />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nfunction EditableBound({\n  label,\n  ariaLabel,\n  min,\n  max,\n  step,\n  stepBase,\n  value,\n  onChange,\n}: {\n  label: string;\n  ariaLabel: string;\n  min: number;\n  max: number;\n  step: number;\n  /** Origin the `step` grid is measured from — the slider's own `min`. */\n  stepBase: number;\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <label className=\"grid grid-cols-[auto_minmax(0,1fr)] items-center gap-1.5 text-[11px] text-muted-foreground\">\n      <span>{label}</span>\n      <input\n        aria-label={ariaLabel}\n        className=\"h-7 min-w-0 rounded-md border border-input bg-background px-2 text-right font-mono text-xs tabular-nums text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        max={max}\n        min={min}\n        step={step}\n        type=\"number\"\n        value={value}\n        onChange={(event) => {\n          if (event.currentTarget.value === \"\") return;\n          const next = Number(event.currentTarget.value);\n          if (!Number.isFinite(next)) throw new Error(`${ariaLabel} must be a finite number`);\n          onChange(snapToStep(next, { base: stepBase, step, min, max }));\n        }}\n      />\n    </label>\n  );\n}\n\nconst baseSliderClassName =\n  \"pointer-events-none absolute inset-0 h-6 w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:h-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent\";\n\nfunction normalizeRangeValue(value: RangeSliderValue, min: number, max: number): RangeSliderValue {\n  const lower = clampNumber(Math.min(value[0], value[1]), min, max);\n  const upper = clampNumber(Math.max(value[0], value[1]), min, max);\n  return [lower, upper];\n}\n\nfunction clampNumber(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Nearest `step`-aligned value measured from `base`, kept inside `[min, max]`.\n * Mirrors what the range inputs enforce, so typed entry cannot produce a value\n * the thumbs could never reach.\n */\nfunction snapToStep(\n  value: number,\n  { base, step, min, max }: { base: number; step: number; min: number; max: number },\n): number {\n  if (!(step > 0)) return clampNumber(value, min, max);\n  const aligned = base + Math.round((value - base) / step) * step;\n  if (aligned < min) {\n    return clampNumber(base + Math.ceil((min - base) / step) * step, min, max);\n  }\n  if (aligned > max) {\n    return clampNumber(base + Math.floor((max - base) / step) * step, min, max);\n  }\n  return aligned;\n}\n\nfunction valueToPercent(value: number, min: number, max: number) {\n  if (max <= min) return 0;\n  return ((value - min) / (max - min)) * 100;\n}\n\nfunction lowercaseFirst(value: string): string {\n  return value.charAt(0).toLowerCase() + value.slice(1);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/SearchInput.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { InputFieldInputProps } from './InputField';
 export type SearchInputProps = Omit<InputFieldInputProps, "onChange" | "prefix" | "type" | "value"> & {
     /** Controlled query value. */

package/dist/components/SegmentedControl.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from '../data/Icon';
 export type SegmentedSize = "sm" | "md" | "lg";
 export type SegmentedOption<T extends string = string> = {

package/dist/components/SplitButton.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { ButtonProps } from './button';
 import { StaticIconComponent } from '../data/Icon';
 import { DropdownMenuItem } from '../overlay/DropdownMenu';

package/dist/components/Switch.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 export type SwitchProps = {
     /** Current on/off state. */
     checked: boolean;

package/dist/components/TreePickerField.cjs

@@ -17,11 +17,15 @@ function TreePickerField({
   roots,
   getKey,
   getChildren,
+  getAriaLabel,
   renderRow,
   getSearchText,
   defaultOpen,
+  hasMoreChildren,
+  loadChildren,
   isSelectable,
   onSelect,
+  closeOnSelect = true,
   selected,
   revealSelected,
   showControls,
@@ -35,7 +39,8 @@ function TreePickerField({
   triggerClassName,
   panelClassName,
   renderTrigger,
-  renderFooter
+  renderFooter,
+  triggerAriaLabel
 }) {
   const [open, setOpen] = react.useState(false);
   const floatingZ = modalStack.useFloatingZIndex();
@@ -106,6 +111,7 @@ function TreePickerField({
         ref: anchorRef,
         type: "button",
         disabled,
+        "aria-label": triggerAriaLabel,
         "aria-haspopup": "tree",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -161,8 +167,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 } : {},
@@ -171,7 +180,7 @@ function TreePickerField({
                 onSelect: (node) => {
                   if (!isSelectable || isSelectable(node)) {
                     onSelect(node);
-                    setOpen(false);
+                    if (closeOnSelect) setOpen(false);
                   }
                 }
               }

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;