@flanksource/clicky-ui 0.3.17 → 0.3.19

package/dist/components/SecretKeySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecretKeySelector.js","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { createElement, useEffect, useMemo, useState } from \"react\";\nimport {\n  K8SSecret,\n  K8SConfigmap,\n  Helm,\n  K8SServiceaccount,\n  Vault,\n} from \"@flanksource/icons/mi\";\nimport { type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { IconMenuPicker, type IconMenuOption } from \"./icon-menu-picker\";\n\n// SecretKeySelector picks how a credential is sourced and lowers the choice into\n// a single reference string the consumer persists. It supports Kubernetes\n// Secrets and ConfigMaps (name + key), Helm release values (name + jsonpath\n// key), a service-account token (name only), a 1Password reference\n// (op://vault/item/field), and a static inline \"Value\". It is presentational:\n// it fetches nothing — the consumer supplies async `loadResources` /\n// `loadKeyPreview` (for keyed kinds) and optional `loadServiceAccounts` getters.\n\n/** Kinds that reference a named resource plus one of its keys. */\nexport type SecretKind = \"secret\" | \"configmap\" | \"helm\";\n\n/** Every source the picker can emit, including the non-keyed ones. */\nexport type SecretValueSource =\n  | SecretKind\n  | \"serviceaccount\"\n  | \"onepassword\"\n  | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: a {kind,name,key} reference into a Secret / ConfigMap /\n * Helm release, a service-account token by name, a 1Password op:// reference, or\n * a static inline literal.\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"serviceaccount\"; name: string }\n  | { kind: \"onepassword\"; ref: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap/helm-release and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named keyed kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named keyed resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Loads the service-account names (no keys) for the \"serviceaccount\" source.\n   * When omitted, that source's name field accepts freeform entry only.\n   */\n  loadServiceAccounts?: () => Promise<SecretResource[]>;\n  /**\n   * The sources offered in the picker, in order. Defaults to\n   * `[\"secret\", \"configmap\", \"value\"]` (or drops \"value\" when `allowLiteral` is\n   * false). Pass an explicit list to offer helm / serviceaccount / onepassword.\n   */\n  sources?: SecretValueSource[];\n  /**\n   * Shorthand honoured only when `sources` is not supplied: `false` drops the\n   * inline \"Value\" source, leaving Secret/ConfigMap. Ignored when `sources` is\n   * given.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen name absent from the loaded resources, or a key absent\n   * from the chosen keyed resource's keys, is flagged invalid (once the load\n   * settles). The onepassword and literal sources are never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nconst DEFAULT_SOURCES: SecretValueSource[] = [\"secret\", \"configmap\", \"value\"];\n\nconst SHRINKABLE_FIELD = \"max-w-full min-w-0 shrink\";\nconst SOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;\nconst RESOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;\nconst KEY_FIELD = `${SHRINKABLE_FIELD} basis-72 grow`;\nconst VALUE_FIELD = `${SHRINKABLE_FIELD} basis-64 grow`;\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  loadServiceAccounts,\n  sources,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const sourceList = useMemo<SecretValueSource[]>(\n    () => sources ?? (allowLiteral ? DEFAULT_SOURCES : [\"secret\", \"configmap\"]),\n    [sources, allowLiteral],\n  );\n\n  const source: SecretValueSource = value?.kind ?? sourceList[0] ?? \"secret\";\n  const isKeyed =\n    source === \"secret\" || source === \"configmap\" || source === \"helm\";\n  const isServiceAccount = source === \"serviceaccount\";\n  const isOnePassword = source === \"onepassword\";\n  const isLiteral = source === \"value\";\n  // A keyed source's refKind drives the loaders; other sources default to \"secret\".\n  const refKind: SecretKind = isKeyed ? (source as SecretKind) : \"secret\";\n\n  const selectedName =\n    value && (value.kind === \"serviceaccount\" || isRefKind(value))\n      ? value.name\n      : \"\";\n  const selectedKey = value && isRefKind(value) ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n  const opRef = value && value.kind === \"onepassword\" ? value.ref : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  // Load the name list for keyed kinds (secret/configmap/helm) and, when a\n  // loader is supplied, for the serviceaccount source. Other sources list nothing.\n  useEffect(() => {\n    const loader = isKeyed\n      ? () => loadResources(refKind)\n      : isServiceAccount && loadServiceAccounts\n        ? loadServiceAccounts\n        : null;\n    if (!loader) {\n      setResources([]);\n      return;\n    }\n    let cancelled = false;\n    setResourcesLoading(true);\n    loader()\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, loadServiceAccounts, refKind, isKeyed, isServiceAccount]);\n\n  useEffect(() => {\n    if (!isKeyed || !selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName, isKeyed]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. Only names from a listed source are checked (a\n  // serviceaccount source with no loader lists nothing, so it never flags).\n  const listsNames = isKeyed || (isServiceAccount && !!loadServiceAccounts);\n  const nameInvalid =\n    strict &&\n    listsNames &&\n    !!selectedName &&\n    !resourcesLoading &&\n    !selectedResource;\n  const keyInvalid =\n    strict &&\n    isKeyed &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  const setSource = (next: SecretValueSource) => {\n    switch (next) {\n      case \"value\":\n        return onChange({ kind: \"value\", value: \"\" });\n      case \"onepassword\":\n        return onChange({ kind: \"onepassword\", ref: \"\" });\n      case \"serviceaccount\":\n        return onChange({ kind: \"serviceaccount\", name: \"\" });\n      default:\n        return onChange({ kind: next, name: \"\", key: \"\" });\n    }\n  };\n  const setName = (name: string) => {\n    if (isServiceAccount)\n      return onChange(name ? { kind: \"serviceaccount\", name } : undefined);\n    return onChange(\n      name ? { kind: refKind, name, key: selectedKey } : undefined,\n    );\n  };\n  const setKey = (key: string) =>\n    selectedName\n      ? onChange({ kind: refKind, name: selectedName, key })\n      : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n  const setOpRef = (v: string) => onChange({ kind: \"onepassword\", ref: v });\n\n  const sourceOptions = useMemo<ComboboxOption[]>(\n    () =>\n      sourceList.map((k) => ({\n        value: k,\n        label: SOURCE_LABEL[k],\n        icon: createElement(SOURCE_ICON[k], { className: \"size-4\" }),\n      })),\n    [sourceList],\n  );\n  const sourceMenuOptions = useMemo<IconMenuOption<SecretValueSource>[]>(\n    () =>\n      sourceList.map((kind) => ({\n        value: kind,\n        label: SOURCE_LABEL[kind],\n        icon: SOURCE_ICON[kind],\n      })),\n    [sourceList],\n  );\n\n  return (\n    <div\n      data-slot=\"secret-key-selector\"\n      className={cn(\"@container w-full min-w-0\", className)}\n    >\n      <div\n        className=\"flex w-full max-w-full min-w-0 flex-nowrap items-center gap-2\"\n        data-slot=\"secret-fields\"\n      >\n        <div\n          className={cn(SOURCE_FIELD, \"@max-md:hidden\")}\n          data-slot=\"secret-source-combobox\"\n        >\n          <Combobox\n            ariaLabel=\"Secret value source\"\n            options={sourceOptions}\n            value={source}\n            onChange={(next) => setSource(next as SecretValueSource)}\n            allowCustomValue={false}\n            required\n          />\n        </div>\n        <div\n          className=\"hidden shrink-0 @max-md:!block\"\n          data-slot=\"secret-source-menu\"\n        >\n          <IconMenuPicker\n            value={source}\n            onChange={setSource}\n            options={sourceMenuOptions}\n            ariaLabel=\"Secret value source\"\n            triggerClassName=\"size-control-h rounded-md border border-input bg-background\"\n          />\n        </div>\n        {isLiteral ? (\n          <TextField\n            value={literalValue}\n            onChange={setLiteral}\n            placeholder=\"Static value…\"\n            ariaLabel=\"Static value\"\n          />\n        ) : isOnePassword ? (\n          <TextField\n            value={opRef}\n            onChange={setOpRef}\n            placeholder=\"op://vault/item/field\"\n            ariaLabel=\"1Password reference\"\n            mono\n          />\n        ) : isServiceAccount ? (\n          <div\n            className={VALUE_FIELD}\n            data-slot=\"secret-serviceaccount-field\"\n          >\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder=\"Service account…\"\n            />\n          </div>\n        ) : (\n          <div\n            className={cn(\n              \"flex flex-nowrap items-center gap-2\",\n              SHRINKABLE_FIELD,\n              \"grow\",\n            )}\n            data-slot=\"secret-reference-fields\"\n          >\n            <div\n              className={RESOURCE_FIELD}\n              data-slot=\"secret-resource-field\"\n            >\n              <Combobox\n                options={nameOptions}\n                value={selectedName}\n                onChange={setName}\n                allowCustomValue\n                loading={resourcesLoading}\n                invalid={nameInvalid}\n                placeholder={`Select ${refKind}…`}\n              />\n            </div>\n            <div className={KEY_FIELD} data-slot=\"secret-key-field\">\n              <Combobox\n                options={keyOptions}\n                value={selectedKey}\n                onChange={setKey}\n                allowCustomValue\n                loading={previewLoading}\n                invalid={keyInvalid}\n                placeholder={selectedName ? keyPlaceholder(refKind) : \"—\"}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n// TextField is the shared single-input surface for the literal and 1Password\n// sources (no resource list backs either).\nfunction TextField({\n  value,\n  onChange,\n  placeholder,\n  ariaLabel,\n  mono,\n}: {\n  value: string;\n  onChange: (v: string) => void;\n  placeholder: string;\n  ariaLabel: string;\n  mono?: boolean;\n}) {\n  return (\n    <div className={VALUE_FIELD} data-slot=\"secret-value-fields\">\n      <input\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        className={cn(\n          \"h-control-h w-full min-w-0 rounded border border-input bg-background px-control-px text-sm\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n          mono && \"font-mono\",\n        )}\n      />\n    </div>\n  );\n}\n\n// isRefKind narrows to the keyed variants that carry both a name and a key.\nfunction isRefKind(\n  v: SecretKeyValue,\n): v is { kind: SecretKind; name: string; key: string } {\n  return v.kind === \"secret\" || v.kind === \"configmap\" || v.kind === \"helm\";\n}\n\n// keyPlaceholder hints the key field: helm keys are jsonpath expressions into\n// the merged release values, the others are literal data keys.\nfunction keyPlaceholder(kind: SecretKind): string {\n  return kind === \"helm\" ? \"jsonpath…\" : \"Key…\";\n}\n\n// Each source's leading glyph. The flanksource FCs carry static metadata that\n// doesn't unify with ComponentType, so type the slot as a plain render function.\nconst SOURCE_ICON: Record<SecretValueSource, StaticIconComponent> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  helm: Helm,\n  serviceaccount: K8SServiceaccount,\n  onepassword: Vault,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  helm: \"Helm\",\n  serviceaccount: \"Service Account\",\n  onepassword: \"1Password\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nfunction buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SecretKeySelector.js","sources":["../../src/components/SecretKeySelector.tsx"],"sourcesContent":["import { createElement, useEffect, useMemo, useState } from \"react\";\nimport {\n  K8SSecret,\n  K8SConfigmap,\n  Helm,\n  K8SServiceaccount,\n  Vault,\n} from \"@flanksource/icons/mi\";\nimport { type StaticIconComponent } from \"../data/Icon\";\nimport { cn } from \"../lib/utils\";\nimport { UiEdit } from \"../icons\";\nimport { Combobox, type ComboboxOption } from \"./Combobox\";\nimport { IconMenuPicker, type IconMenuOption } from \"./icon-menu-picker\";\nimport { OnePasswordSelector } from \"./OnePasswordSelector\";\nimport type { OnePasswordLoaders } from \"./OnePasswordSelector.model\";\n\n// SecretKeySelector picks how a credential is sourced and lowers the choice into\n// a single reference string the consumer persists. It supports Kubernetes\n// Secrets and ConfigMaps (name + key), Helm release values (name + jsonpath\n// key), a service-account token (name only), a 1Password reference\n// (op://vault/item/field), and a static inline \"Value\". It is presentational:\n// it fetches nothing — the consumer supplies async `loadResources` /\n// `loadKeyPreview` (for keyed kinds) and optional `loadServiceAccounts` getters.\n\n/** Kinds that reference a named resource plus one of its keys. */\nexport type SecretKind = \"secret\" | \"configmap\" | \"helm\";\n\n/** Every source the picker can emit, including the non-keyed ones. */\nexport type SecretValueSource =\n  | SecretKind\n  | \"serviceaccount\"\n  | \"onepassword\"\n  | \"value\";\n\n/** One key's mid-masked preview. `value` is already masked by the consumer. */\nexport type KeyPreview = { key: string; value: string };\n\n/**\n * The selector's value: a {kind,name,key} reference into a Secret / ConfigMap /\n * Helm release, a service-account token by name, a 1Password op:// reference, or\n * a static inline literal.\n */\nexport type SecretKeyValue =\n  | { kind: SecretKind; name: string; key: string }\n  | { kind: \"serviceaccount\"; name: string }\n  | { kind: \"onepassword\"; ref: string }\n  | { kind: \"value\"; value: string };\n\n/** A named secret/configmap/helm-release and its data key names (values never returned). */\nexport type SecretResource = { name: string; keys?: string[] };\n\nexport type SecretKeySelectorProps = {\n  value: SecretKeyValue | undefined;\n  onChange: (next: SecretKeyValue | undefined) => void;\n  /** Loads the named keyed kind's resources (name + data key names). */\n  loadResources: (kind: SecretKind) => Promise<SecretResource[]>;\n  /** Loads mid-masked previews for the named keyed resource's keys. */\n  loadKeyPreview: (kind: SecretKind, name: string) => Promise<KeyPreview[]>;\n  /**\n   * Loads the service-account names (no keys) for the \"serviceaccount\" source.\n   * When omitted, that source's name field accepts freeform entry only.\n   */\n  loadServiceAccounts?: () => Promise<SecretResource[]>;\n  /** Loads metadata for the cascading 1Password vault, item, and field pickers. */\n  onePassword?: OnePasswordLoaders;\n  /**\n   * The sources offered in the picker, in order. Defaults to\n   * `[\"secret\", \"configmap\", \"value\"]` (or drops \"value\" when `allowLiteral` is\n   * false). Pass an explicit list to offer helm / serviceaccount / onepassword.\n   */\n  sources?: SecretValueSource[];\n  /**\n   * Shorthand honoured only when `sources` is not supplied: `false` drops the\n   * inline \"Value\" source, leaving Secret/ConfigMap. Ignored when `sources` is\n   * given.\n   */\n  allowLiteral?: boolean;\n  /**\n   * When true, a chosen name absent from the loaded resources, or a key absent\n   * from the chosen keyed resource's keys, is flagged invalid (once the load\n   * settles). The onepassword and literal sources are never strict-flagged.\n   */\n  strict?: boolean;\n  className?: string;\n};\n\nconst DEFAULT_SOURCES: SecretValueSource[] = [\"secret\", \"configmap\", \"value\"];\n\nconst SHRINKABLE_FIELD = \"max-w-full min-w-0 shrink\";\nconst SOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;\nconst RESOURCE_FIELD = `${SHRINKABLE_FIELD} basis-40 grow-0`;\nconst KEY_FIELD = `${SHRINKABLE_FIELD} basis-72 grow`;\nconst VALUE_FIELD = `${SHRINKABLE_FIELD} basis-64 grow`;\n\nexport function SecretKeySelector({\n  value,\n  onChange,\n  loadResources,\n  loadKeyPreview,\n  loadServiceAccounts,\n  onePassword,\n  sources,\n  allowLiteral = true,\n  strict = false,\n  className,\n}: SecretKeySelectorProps) {\n  const sourceList = useMemo<SecretValueSource[]>(\n    () => sources ?? (allowLiteral ? DEFAULT_SOURCES : [\"secret\", \"configmap\"]),\n    [sources, allowLiteral],\n  );\n\n  const source: SecretValueSource = value?.kind ?? sourceList[0] ?? \"secret\";\n  const isKeyed =\n    source === \"secret\" || source === \"configmap\" || source === \"helm\";\n  const isServiceAccount = source === \"serviceaccount\";\n  const isOnePassword = source === \"onepassword\";\n  const isLiteral = source === \"value\";\n  // A keyed source's refKind drives the loaders; other sources default to \"secret\".\n  const refKind: SecretKind = isKeyed ? (source as SecretKind) : \"secret\";\n\n  const selectedName =\n    value && (value.kind === \"serviceaccount\" || isRefKind(value))\n      ? value.name\n      : \"\";\n  const selectedKey = value && isRefKind(value) ? value.key : \"\";\n  const literalValue = value && value.kind === \"value\" ? value.value : \"\";\n  const opRef = value && value.kind === \"onepassword\" ? value.ref : \"\";\n\n  const [resources, setResources] = useState<SecretResource[]>([]);\n  const [resourcesLoading, setResourcesLoading] = useState(false);\n  const [previews, setPreviews] = useState<KeyPreview[]>([]);\n  const [previewLoading, setPreviewLoading] = useState(false);\n\n  // Load the name list for keyed kinds (secret/configmap/helm) and, when a\n  // loader is supplied, for the serviceaccount source. Other sources list nothing.\n  useEffect(() => {\n    const loader = isKeyed\n      ? () => loadResources(refKind)\n      : isServiceAccount && loadServiceAccounts\n        ? loadServiceAccounts\n        : null;\n    if (!loader) {\n      setResources([]);\n      return;\n    }\n    let cancelled = false;\n    setResourcesLoading(true);\n    loader()\n      .then((res) => !cancelled && setResources(res))\n      .finally(() => !cancelled && setResourcesLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadResources, loadServiceAccounts, refKind, isKeyed, isServiceAccount]);\n\n  useEffect(() => {\n    if (!isKeyed || !selectedName) {\n      setPreviews([]);\n      return;\n    }\n    let cancelled = false;\n    setPreviewLoading(true);\n    loadKeyPreview(refKind, selectedName)\n      .then((res) => !cancelled && setPreviews(res))\n      .catch(() => !cancelled && setPreviews([]))\n      .finally(() => !cancelled && setPreviewLoading(false));\n    return () => {\n      cancelled = true;\n    };\n  }, [loadKeyPreview, refKind, selectedName, isKeyed]);\n\n  const nameOptions = useMemo<ComboboxOption[]>(\n    () => resources.map((r) => ({ value: r.name, label: r.name })),\n    [resources],\n  );\n  const selectedResource = useMemo(\n    () => resources.find((r) => r.name === selectedName),\n    [resources, selectedName],\n  );\n  const keyOptions = useMemo(\n    () => buildKeyOptions(selectedResource?.keys ?? [], previews, selectedKey),\n    [selectedResource, selectedKey, previews],\n  );\n\n  // Strict validity: the name is invalid when it names no loaded resource; the\n  // key is invalid when, with a resolved resource, it isn't one of that\n  // resource's keys. Only names from a listed source are checked (a\n  // serviceaccount source with no loader lists nothing, so it never flags).\n  const listsNames = isKeyed || (isServiceAccount && !!loadServiceAccounts);\n  const nameInvalid =\n    strict &&\n    listsNames &&\n    !!selectedName &&\n    !resourcesLoading &&\n    !selectedResource;\n  const keyInvalid =\n    strict &&\n    isKeyed &&\n    !!selectedKey &&\n    !!selectedResource &&\n    !resourcesLoading &&\n    !(selectedResource.keys ?? []).includes(selectedKey);\n\n  const setSource = (next: SecretValueSource) => {\n    switch (next) {\n      case \"value\":\n        return onChange({ kind: \"value\", value: \"\" });\n      case \"onepassword\":\n        return onChange({ kind: \"onepassword\", ref: \"\" });\n      case \"serviceaccount\":\n        return onChange({ kind: \"serviceaccount\", name: \"\" });\n      default:\n        return onChange({ kind: next, name: \"\", key: \"\" });\n    }\n  };\n  const setName = (name: string) => {\n    if (isServiceAccount)\n      return onChange(name ? { kind: \"serviceaccount\", name } : undefined);\n    return onChange(\n      name ? { kind: refKind, name, key: selectedKey } : undefined,\n    );\n  };\n  const setKey = (key: string) =>\n    selectedName\n      ? onChange({ kind: refKind, name: selectedName, key })\n      : undefined;\n  const setLiteral = (v: string) => onChange({ kind: \"value\", value: v });\n  const setOpRef = (ref: string) => onChange({ kind: \"onepassword\", ref });\n\n  const sourceOptions = useMemo<ComboboxOption[]>(\n    () =>\n      sourceList.map((k) => ({\n        value: k,\n        label: SOURCE_LABEL[k],\n        icon: createElement(SOURCE_ICON[k], { className: \"size-4\" }),\n      })),\n    [sourceList],\n  );\n  const sourceMenuOptions = useMemo<IconMenuOption<SecretValueSource>[]>(\n    () =>\n      sourceList.map((kind) => ({\n        value: kind,\n        label: SOURCE_LABEL[kind],\n        icon: SOURCE_ICON[kind],\n      })),\n    [sourceList],\n  );\n\n  return (\n    <div\n      data-slot=\"secret-key-selector\"\n      className={cn(\"@container w-full min-w-0\", className)}\n    >\n      <div\n        className=\"flex w-full max-w-full min-w-0 flex-nowrap items-center gap-2\"\n        data-slot=\"secret-fields\"\n      >\n        <div\n          className={cn(SOURCE_FIELD, \"@max-md:hidden\")}\n          data-slot=\"secret-source-combobox\"\n        >\n          <Combobox\n            ariaLabel=\"Secret value source\"\n            options={sourceOptions}\n            value={source}\n            onChange={(next) => setSource(next as SecretValueSource)}\n            allowCustomValue={false}\n            required\n          />\n        </div>\n        <div\n          className=\"hidden shrink-0 @max-md:!block\"\n          data-slot=\"secret-source-menu\"\n        >\n          <IconMenuPicker\n            value={source}\n            onChange={setSource}\n            options={sourceMenuOptions}\n            ariaLabel=\"Secret value source\"\n            triggerClassName=\"size-control-h rounded-md border border-input bg-background\"\n          />\n        </div>\n        {isLiteral ? (\n          <TextField\n            value={literalValue}\n            onChange={setLiteral}\n            placeholder=\"Static value…\"\n            ariaLabel=\"Static value\"\n          />\n        ) : isOnePassword ? (\n          (() => {\n            if (!onePassword) {\n              throw new Error(\n                \"SecretKeySelector onepassword source requires onePassword loaders\",\n              );\n            }\n            return (\n              <div className={VALUE_FIELD} data-slot=\"secret-onepassword-field\">\n                <OnePasswordSelector\n                  value={opRef}\n                  onChange={setOpRef}\n                  {...onePassword}\n                  allowCustomValue\n                />\n              </div>\n            );\n          })()\n        ) : isServiceAccount ? (\n          <div\n            className={VALUE_FIELD}\n            data-slot=\"secret-serviceaccount-field\"\n          >\n            <Combobox\n              options={nameOptions}\n              value={selectedName}\n              onChange={setName}\n              allowCustomValue\n              loading={resourcesLoading}\n              invalid={nameInvalid}\n              placeholder=\"Service account…\"\n            />\n          </div>\n        ) : (\n          <div\n            className={cn(\n              \"flex flex-nowrap items-center gap-2\",\n              SHRINKABLE_FIELD,\n              \"grow\",\n            )}\n            data-slot=\"secret-reference-fields\"\n          >\n            <div\n              className={RESOURCE_FIELD}\n              data-slot=\"secret-resource-field\"\n            >\n              <Combobox\n                options={nameOptions}\n                value={selectedName}\n                onChange={setName}\n                allowCustomValue\n                loading={resourcesLoading}\n                invalid={nameInvalid}\n                placeholder={`Select ${refKind}…`}\n              />\n            </div>\n            <div className={KEY_FIELD} data-slot=\"secret-key-field\">\n              <Combobox\n                options={keyOptions}\n                value={selectedKey}\n                onChange={setKey}\n                allowCustomValue\n                loading={previewLoading}\n                invalid={keyInvalid}\n                placeholder={selectedName ? keyPlaceholder(refKind) : \"—\"}\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction TextField({\n  value,\n  onChange,\n  placeholder,\n  ariaLabel,\n}: {\n  value: string;\n  onChange: (v: string) => void;\n  placeholder: string;\n  ariaLabel: string;\n}) {\n  return (\n    <div className={VALUE_FIELD} data-slot=\"secret-value-fields\">\n      <input\n        type=\"text\"\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        className={cn(\n          \"h-control-h w-full min-w-0 rounded border border-input bg-background px-control-px text-sm\",\n          \"outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        )}\n      />\n    </div>\n  );\n}\n\n// isRefKind narrows to the keyed variants that carry both a name and a key.\nfunction isRefKind(\n  v: SecretKeyValue,\n): v is { kind: SecretKind; name: string; key: string } {\n  return v.kind === \"secret\" || v.kind === \"configmap\" || v.kind === \"helm\";\n}\n\n// keyPlaceholder hints the key field: helm keys are jsonpath expressions into\n// the merged release values, the others are literal data keys.\nfunction keyPlaceholder(kind: SecretKind): string {\n  return kind === \"helm\" ? \"jsonpath…\" : \"Key…\";\n}\n\n// Each source's leading glyph. The flanksource FCs carry static metadata that\n// doesn't unify with ComponentType, so type the slot as a plain render function.\nconst SOURCE_ICON: Record<SecretValueSource, StaticIconComponent> = {\n  secret: K8SSecret,\n  configmap: K8SConfigmap,\n  helm: Helm,\n  serviceaccount: K8SServiceaccount,\n  onepassword: Vault,\n  value: UiEdit,\n};\n\nconst SOURCE_LABEL: Record<SecretValueSource, string> = {\n  secret: \"Secret\",\n  configmap: \"ConfigMap\",\n  helm: \"Helm\",\n  serviceaccount: \"Service Account\",\n  onepassword: \"1Password\",\n  value: \"Value\",\n};\n\n// buildKeyOptions labels each key with its mid-masked preview value when one is\n// available. A selected key absent from the list is pinned so the selection\n// stays visible.\nfunction buildKeyOptions(\n  keys: string[],\n  previews: KeyPreview[],\n  selectedKey: string,\n): ComboboxOption[] {\n  const masked = new Map(previews.map((p) => [p.key, p.value]));\n  const base = keys.map((k) => ({\n    value: k,\n    label: masked.has(k) ? `${k} — ${masked.get(k)}` : k,\n  }));\n  if (selectedKey && !base.some((o) => o.value === selectedKey)) {\n    return [{ value: selectedKey, label: selectedKey }, ...base];\n  }\n  return base;\n}\n"],"names":[],"mappings":"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"}

package/dist/components/TreePickerField.cjs

@@ -10,6 +10,9 @@ const modalStack = require("../overlay/modalStack.cjs");
 const jsonSchemaFormSize = require("./json-schema-form-size.cjs");
 const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
 const PANEL_MAX_WIDTH_PX = 480;
+const PANEL_MAX_HEIGHT_PX = 480;
+const PANEL_MIN_HEIGHT_PX = 200;
+const VIEWPORT_MARGIN_PX = 8;
 function TreePickerField({
   roots,
   getKey,
@@ -19,18 +22,24 @@ function TreePickerField({
   defaultOpen,
   isSelectable,
   onSelect,
+  selected,
+  revealSelected,
+  showControls,
+  ariaLabel,
+  empty,
   label,
   placeholder = "Select…",
   disabled,
   size,
   className,
   triggerClassName,
-  panelClassName
+  panelClassName,
+  renderTrigger,
+  renderFooter
 }) {
   const [open, setOpen] = react.useState(false);
-  const [pos, setPos] = react.useState(
-    null
-  );
+  const floatingZ = modalStack.useFloatingZIndex();
+  const [pos, setPos] = react.useState(null);
   const rootRef = react.useRef(null);
   const anchorRef = react.useRef(null);
   const panelRef = react.useRef(null);
@@ -45,12 +54,23 @@ function TreePickerField({
       return;
     }
     const update = () => {
-      const anchor = anchorRef.current;
+      const anchor = rootRef.current;
       if (!anchor) return;
       const rect = anchor.getBoundingClientRect();
-      const viewportCap = window.innerWidth - rect.left - 8;
+      const viewportCap = window.innerWidth - rect.left - VIEWPORT_MARGIN_PX;
       const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));
-      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });
+      const below = window.innerHeight - rect.bottom - VIEWPORT_MARGIN_PX - 4;
+      const above = rect.top - VIEWPORT_MARGIN_PX - 4;
+      const flip = below < PANEL_MIN_HEIGHT_PX && above > below;
+      const available = Math.max(flip ? above : below, PANEL_MIN_HEIGHT_PX);
+      const maxHeight = Math.min(PANEL_MAX_HEIGHT_PX, available);
+      setPos({
+        top: flip ? Math.max(VIEWPORT_MARGIN_PX, rect.top - 4 - maxHeight) : rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+        maxWidth,
+        maxHeight
+      });
     };
     update();
     window.addEventListener("scroll", update, true);
@@ -73,7 +93,14 @@ function TreePickerField({
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, [open]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rootRef, className: utils.cn("relative", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    renderTrigger ? renderTrigger({
+      open,
+      disabled: Boolean(disabled),
+      triggerRef: anchorRef,
+      toggle: () => {
+        if (!disabled) setOpen((current) => !current);
+      }
+    }) : /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         ref: anchorRef,
@@ -81,7 +108,7 @@ function TreePickerField({
         disabled,
         "aria-haspopup": "tree",
         "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
+        onClick: () => setOpen((current) => !current),
         className: utils.cn(
           "relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground",
           size ? jsonSchemaFormSize.inputSizeClass[size] : "h-control-h px-control-px text-sm",
@@ -97,7 +124,7 @@ function TreePickerField({
       }
     ),
     open && pos && reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           ref: panelRef,
@@ -106,34 +133,51 @@ function TreePickerField({
             position: "fixed",
             top: pos.top,
             left: pos.left,
+            // Computed rather than constant: the popup has to clear whatever
+            // modal is open, and a modal sits at zIndex.modal (10000). A
+            // hardcoded z-50 renders the tree behind any dialog it is opened
+            // in — see ../overlay/zIndex.
+            zIndex: floatingZ,
             // Grow to fit the widest row/toolbar, but never narrower than the
             // trigger nor wider than maxWidth — so labels show in full and the
             // toolbar's intrinsic-width search input never forces a scrollbar.
             minWidth: pos.width,
             width: "max-content",
-            maxWidth: pos.maxWidth
+            maxWidth: pos.maxWidth,
+            maxHeight: pos.maxHeight
           },
           className: utils.cn(
-            "z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
+            // Height comes from the measured maxHeight above, not a viewport
+            // fraction: 60vh is the same number wherever the trigger sits, and
+            // a trigger low on the page needs a shorter panel, not an equal one.
+            "flex flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
             panelClassName
           ),
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Tree.Tree,
-            {
-              roots,
-              getKey,
-              getChildren,
-              renderRow,
-              ...getSearchText ? { getSearchText } : {},
-              ...defaultOpen ? { defaultOpen } : {},
-              onSelect: (node) => {
-                if (!isSelectable || isSelectable(node)) {
-                  onSelect(node);
-                  setOpen(false);
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Tree.Tree,
+              {
+                roots,
+                getKey,
+                getChildren,
+                renderRow,
+                ...getSearchText ? { getSearchText } : {},
+                ...defaultOpen ? { defaultOpen } : {},
+                ...selected !== void 0 ? { selected } : {},
+                ...revealSelected !== void 0 ? { revealSelected } : {},
+                ...showControls !== void 0 ? { showControls } : {},
+                ...ariaLabel !== void 0 ? { ariaLabel } : {},
+                ...empty !== void 0 ? { empty } : {},
+                onSelect: (node) => {
+                  if (!isSelectable || isSelectable(node)) {
+                    onSelect(node);
+                    setOpen(false);
+                  }
                 }
               }
-            }
-          ) })
+            ) }),
+            renderFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-t border-border bg-popover", children: renderFooter({ close: () => setOpen(false) }) })
+          ]
         }
       ),
       document.body

package/dist/components/TreePickerField.cjs.map

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

package/dist/components/TreePickerField.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, Ref } from 'react';
 import { TreeProps } from '../data/Tree';
 import { FormSize } from './json-schema-form-size';
 export interface TreePickerFieldProps<T> {
@@ -17,6 +17,19 @@ export interface TreePickerFieldProps<T> {
     isSelectable?: (node: T) => boolean;
     /** Fires for a selectable node, then closes the dropdown. */
     onSelect: (node: T) => void;
+    /** Highlights the committed node inside the open tree. */
+    selected?: T | null;
+    /**
+     * Force-opens the `selected` node's ancestors so the current value is always
+     * visible when the panel opens, however deep its branch. Requires `selected`.
+     */
+    revealSelected?: boolean;
+    /** Renders the tree's expand/collapse + filter toolbar. */
+    showControls?: boolean;
+    /** Accessible name for the tree inside the panel. */
+    ariaLabel?: string;
+    /** Empty-state content when `roots` is empty. */
+    empty?: ReactNode;
     /** Current-selection display in the trigger; falls back to `placeholder`. */
     label?: ReactNode;
     placeholder?: string;
@@ -25,6 +38,22 @@ export interface TreePickerFieldProps<T> {
     className?: string;
     triggerClassName?: string;
     panelClassName?: string;
+    renderTrigger?: (props: TreePickerTriggerProps) => ReactNode;
+    /**
+     * Sticky row pinned below the tree inside the open panel — an escape hatch
+     * from a dropdown that has run out of room (a fuller browser, a "create new")
+     * rather than another node. It is handed `close` because acting on it almost
+     * always means leaving the dropdown behind.
+     */
+    renderFooter?: (props: {
+        close: () => void;
+    }) => ReactNode;
+}
+export interface TreePickerTriggerProps {
+    open: boolean;
+    disabled: boolean;
+    triggerRef: Ref<HTMLButtonElement>;
+    toggle: () => void;
 }
-export declare function TreePickerField<T>({ roots, getKey, getChildren, renderRow, getSearchText, defaultOpen, isSelectable, onSelect, label, placeholder, disabled, size, className, triggerClassName, panelClassName, }: TreePickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TreePickerField<T>({ roots, getKey, getChildren, renderRow, getSearchText, defaultOpen, isSelectable, onSelect, selected, revealSelected, showControls, ariaLabel, empty, label, placeholder, disabled, size, className, triggerClassName, panelClassName, renderTrigger, renderFooter, }: TreePickerFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TreePickerField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAMxE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,wCAAwC;IACxC,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,CAAC;IACrC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC;IAC1C,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACpC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC,6DAA6D;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAOD,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,aAAa,EACb,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,WAAuB,EACvB,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,cAAc,GACf,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAuHzB"}
+{"version":3,"file":"TreePickerField.d.ts","sourceRoot":"","sources":["../../src/components/TreePickerField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAK/F,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,yBAAyB,CAAC;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,2CAsKzB"}

package/dist/components/TreePickerField.js

@@ -4,10 +4,13 @@ import { createPortal } from "react-dom";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Tree } from "../data/Tree.js";
-import { useEscapeLayer } from "../overlay/modalStack.js";
+import { useFloatingZIndex, useEscapeLayer } from "../overlay/modalStack.js";
 import { inputSizeClass } from "./json-schema-form-size.js";
 import { UiChevronDown } from "../icons/components/UiChevronDown.js";
 const PANEL_MAX_WIDTH_PX = 480;
+const PANEL_MAX_HEIGHT_PX = 480;
+const PANEL_MIN_HEIGHT_PX = 200;
+const VIEWPORT_MARGIN_PX = 8;
 function TreePickerField({
   roots,
   getKey,
@@ -17,18 +20,24 @@ function TreePickerField({
   defaultOpen,
   isSelectable,
   onSelect,
+  selected,
+  revealSelected,
+  showControls,
+  ariaLabel,
+  empty,
   label,
   placeholder = "Select…",
   disabled,
   size,
   className,
   triggerClassName,
-  panelClassName
+  panelClassName,
+  renderTrigger,
+  renderFooter
 }) {
   const [open, setOpen] = useState(false);
-  const [pos, setPos] = useState(
-    null
-  );
+  const floatingZ = useFloatingZIndex();
+  const [pos, setPos] = useState(null);
   const rootRef = useRef(null);
   const anchorRef = useRef(null);
   const panelRef = useRef(null);
@@ -43,12 +52,23 @@ function TreePickerField({
       return;
     }
     const update = () => {
-      const anchor = anchorRef.current;
+      const anchor = rootRef.current;
       if (!anchor) return;
       const rect = anchor.getBoundingClientRect();
-      const viewportCap = window.innerWidth - rect.left - 8;
+      const viewportCap = window.innerWidth - rect.left - VIEWPORT_MARGIN_PX;
       const maxWidth = Math.max(rect.width, Math.min(PANEL_MAX_WIDTH_PX, viewportCap));
-      setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width, maxWidth });
+      const below = window.innerHeight - rect.bottom - VIEWPORT_MARGIN_PX - 4;
+      const above = rect.top - VIEWPORT_MARGIN_PX - 4;
+      const flip = below < PANEL_MIN_HEIGHT_PX && above > below;
+      const available = Math.max(flip ? above : below, PANEL_MIN_HEIGHT_PX);
+      const maxHeight = Math.min(PANEL_MAX_HEIGHT_PX, available);
+      setPos({
+        top: flip ? Math.max(VIEWPORT_MARGIN_PX, rect.top - 4 - maxHeight) : rect.bottom + 4,
+        left: rect.left,
+        width: rect.width,
+        maxWidth,
+        maxHeight
+      });
     };
     update();
     window.addEventListener("scroll", update, true);
@@ -71,7 +91,14 @@ function TreePickerField({
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, [open]);
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(
+    renderTrigger ? renderTrigger({
+      open,
+      disabled: Boolean(disabled),
+      triggerRef: anchorRef,
+      toggle: () => {
+        if (!disabled) setOpen((current) => !current);
+      }
+    }) : /* @__PURE__ */ jsxs(
       "button",
       {
         ref: anchorRef,
@@ -79,7 +106,7 @@ function TreePickerField({
         disabled,
         "aria-haspopup": "tree",
         "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
+        onClick: () => setOpen((current) => !current),
         className: cn(
           "relative flex w-full items-center rounded-md border border-input bg-background text-left text-foreground",
           size ? inputSizeClass[size] : "h-control-h px-control-px text-sm",
@@ -95,7 +122,7 @@ function TreePickerField({
       }
     ),
     open && pos && createPortal(
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "div",
         {
           ref: panelRef,
@@ -104,34 +131,51 @@ function TreePickerField({
             position: "fixed",
             top: pos.top,
             left: pos.left,
+            // Computed rather than constant: the popup has to clear whatever
+            // modal is open, and a modal sits at zIndex.modal (10000). A
+            // hardcoded z-50 renders the tree behind any dialog it is opened
+            // in — see ../overlay/zIndex.
+            zIndex: floatingZ,
             // Grow to fit the widest row/toolbar, but never narrower than the
             // trigger nor wider than maxWidth — so labels show in full and the
             // toolbar's intrinsic-width search input never forces a scrollbar.
             minWidth: pos.width,
             width: "max-content",
-            maxWidth: pos.maxWidth
+            maxWidth: pos.maxWidth,
+            maxHeight: pos.maxHeight
           },
           className: cn(
-            "z-50 flex max-h-[60vh] flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
+            // Height comes from the measured maxHeight above, not a viewport
+            // fraction: 60vh is the same number wherever the trigger sits, and
+            // a trigger low on the page needs a shorter panel, not an equal one.
+            "flex flex-col overflow-hidden rounded-md border border-border bg-popover shadow-md",
             panelClassName
           ),
-          children: /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
-            Tree,
-            {
-              roots,
-              getKey,
-              getChildren,
-              renderRow,
-              ...getSearchText ? { getSearchText } : {},
-              ...defaultOpen ? { defaultOpen } : {},
-              onSelect: (node) => {
-                if (!isSelectable || isSelectable(node)) {
-                  onSelect(node);
-                  setOpen(false);
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(
+              Tree,
+              {
+                roots,
+                getKey,
+                getChildren,
+                renderRow,
+                ...getSearchText ? { getSearchText } : {},
+                ...defaultOpen ? { defaultOpen } : {},
+                ...selected !== void 0 ? { selected } : {},
+                ...revealSelected !== void 0 ? { revealSelected } : {},
+                ...showControls !== void 0 ? { showControls } : {},
+                ...ariaLabel !== void 0 ? { ariaLabel } : {},
+                ...empty !== void 0 ? { empty } : {},
+                onSelect: (node) => {
+                  if (!isSelectable || isSelectable(node)) {
+                    onSelect(node);
+                    setOpen(false);
+                  }
                 }
               }
-            }
-          ) })
+            ) }),
+            renderFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border bg-popover", children: renderFooter({ close: () => setOpen(false) }) })
+          ]
         }
       ),
       document.body