@multiplatform.one/components 7.4.1 → 7.5.0

package/dist/jsx/TreeSelect/index.mjs

@@ -0,0 +1,836 @@
+import { FieldLayout, FloatingPanel, formCommonColors, InputParts, useFloatingPanel, useFormField, useViewportGtSm, panelTransition, panelViewportPadding, zIndex } from "@multiplatform.one/forms";
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CheckIcon, FileIcon, FolderIcon, FolderOpenIcon, MagnifyingGlassIcon } from "@phosphor-icons/react";
+import { FOCUS_VISIBLE_RING, ensureFocusVisibleRing, ensureKeyboardModalityTracking, keyboardFocusRingProps, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useDismiss, useInteractions, FloatingFocusManager } from "@floating-ui/react";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Text, View, XStack, YStack, isWeb } from "tamagui";
+import { useDirection } from "../hooks/useDirection.mjs";
+import { useTranslation } from "../shared/i18n.mjs";
+import { Skeleton } from "../Skeleton/index.mjs";
+import { filterForest, findNode, findNodePath, flattenVisible } from "./treeSelectModel.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+const TREE_SELECT_WIDTH_MODE = "at-least-trigger";
+function defaultNodeIcon(hasChildren, isExpanded, iconSize) {
+  if (hasChildren) {
+    return isExpanded ? /* @__PURE__ */jsx(FolderOpenIcon, {
+      size: iconSize,
+      weight: "duotone"
+    }) : /* @__PURE__ */jsx(FolderIcon, {
+      size: iconSize,
+      weight: "duotone"
+    });
+  }
+  return /* @__PURE__ */jsx(FileIcon, {
+    size: iconSize,
+    weight: "duotone"
+  });
+}
+function TreeSelectRows({
+  rows,
+  selectedId,
+  activeIndex,
+  keyboardRing,
+  treeId,
+  onCommit,
+  onToggle
+}) {
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  const nestedPx = knobProps.nestedControl.px;
+  const indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
+  const expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
+  const nodeIconSize = nestedPx <= 28 ? 14 : 18;
+  const caretSize = nestedPx <= 28 ? 12 : 14;
+  const rowPadX = knobProps.space === "small" ? 6 : knobProps.space === "large" ? 13 : 8;
+  const isRTL = useDirection() === "rtl";
+  const CollapsedCaretIcon = isRTL ? CaretLeftIcon : CaretRightIcon;
+  return /* @__PURE__ */jsx(YStack, {
+    role: "tree",
+    "data-tree": "",
+    "data-testid": "tree-select-tree",
+    "data-indent-step": String(indentStep),
+    "data-row-height": String(nestedPx),
+    "aria-activedescendant": activeIndex >= 0 ? `${treeId}-node-${activeIndex}` : void 0,
+    tabIndex: -1,
+    children: rows.map(row => {
+      const {
+        node,
+        depth,
+        hasChildren,
+        isExpanded,
+        childCount,
+        index
+      } = row;
+      const isSelected = selectedId === node.id;
+      const isActive = index === activeIndex;
+      const leadingIcon = hasChildren && isExpanded && node.iconWhenExpanded ? node.iconWhenExpanded : node.icon ?? defaultNodeIcon(hasChildren, isExpanded, nodeIconSize);
+      return /* @__PURE__ */jsxs(XStack, {
+        id: `${treeId}-node-${index}`,
+        role: "treeitem",
+        tabIndex: -1,
+        "aria-expanded": hasChildren ? isExpanded : void 0,
+        "aria-selected": isSelected,
+        "aria-level": depth + 1,
+        "data-treeselect-row": node.id,
+        "data-treeselect-index": String(index),
+        "data-depth": String(depth),
+        alignItems: "center",
+        minHeight: nestedPx,
+        paddingInlineEnd: rowPadX,
+        paddingInlineStart: rowPadX + depth * indentStep,
+        gap: "$2",
+        cursor: "pointer",
+        position: "relative",
+        backgroundColor: isSelected ? "$color2" : "transparent",
+        hoverStyle: keyboardRing ? void 0 : {
+          backgroundColor: "$color3"
+        },
+        ...(isActive && keyboardRing ? keyboardFocusRingProps : void 0),
+        onPress: e => {
+          const target = e.target;
+          if (target?.closest?.("[data-treeselect-caret]")) return;
+          onCommit(node);
+        },
+        children: [depth > 0 ? Array.from({
+          length: depth
+        }, (_, guide) => {
+          const inset = rowPadX + guide * indentStep + expandIconSize / 2;
+          return /* @__PURE__ */jsx(View, {
+            position: "absolute",
+            top: 0,
+            bottom: 0,
+            width: 1,
+            pointerEvents: "none",
+            backgroundColor: "$borderColor",
+            opacity: 0.5,
+            ...(isRTL ? {
+              right: inset
+            } : {
+              left: inset
+            })
+          }, `guide-${guide}`);
+        }) : null, hasChildren ? /* @__PURE__ */jsx(View, {
+          role: "button",
+          tabIndex: -1,
+          "data-treeselect-caret": node.id,
+          "aria-label": isExpanded ? t("Collapse {{label}}", {
+            label: node.label
+          }) : t("Expand {{label}}", {
+            label: node.label
+          }),
+          width: expandIconSize,
+          height: expandIconSize,
+          alignItems: "center",
+          justifyContent: "center",
+          rotate: isExpanded ? isRTL ? "-90deg" : "90deg" : "0deg",
+          onPress: e => {
+            e.stopPropagation?.();
+            onToggle(node);
+          },
+          children: /* @__PURE__ */jsx(CollapsedCaretIcon, {
+            size: caretSize,
+            weight: "bold"
+          })
+        }) : /* @__PURE__ */jsx(View, {
+          width: expandIconSize,
+          height: expandIconSize
+        }), /* @__PURE__ */jsx(View, {
+          width: nodeIconSize + 2,
+          height: nodeIconSize + 2,
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          children: leadingIcon
+        }), /* @__PURE__ */jsx(Text, {
+          ...knobProps.body,
+          fontSize: 13,
+          lineHeight: 24,
+          color: "$color12",
+          numberOfLines: 1,
+          flex: 1,
+          minWidth: 0,
+          children: node.label
+        }), hasChildren && childCount > 0 ? /* @__PURE__ */jsx(Text, {
+          fontFamily: "$mono",
+          fontSize: 11,
+          lineHeight: 21,
+          color: "$color8",
+          marginLeft: "auto",
+          children: childCount
+        }) : null, isSelected ? /* @__PURE__ */jsx(View, {
+          flexShrink: 0,
+          width: 14,
+          height: 14,
+          children: /* @__PURE__ */jsx(CheckIcon, {
+            size: 14,
+            weight: "bold"
+          })
+        }) : null]
+      }, node.id);
+    })
+  });
+}
+function SearchRow({
+  value,
+  placeholder,
+  inputRef,
+  onChange,
+  onKeyDown,
+  treeId,
+  activeDescendant,
+  sizeToken
+}) {
+  return /* @__PURE__ */jsx(InputParts, {
+    size: sizeToken,
+    children: /* @__PURE__ */jsxs(InputParts.Box, {
+      "data-search-row": "",
+      "data-testid": "tree-select-search",
+      borderWidth: 0,
+      borderBottomWidth: 1,
+      borderBottomColor: formCommonColors.divider,
+      borderRadius: 0,
+      elevation: void 0,
+      ...(isWeb ? {
+        className: "mp-composite-ring"
+      } : void 0),
+      children: [/* @__PURE__ */jsx(InputParts.Section, {
+        children: /* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "leading",
+          children: /* @__PURE__ */jsx(MagnifyingGlassIcon, {})
+        })
+      }), /* @__PURE__ */jsx(InputParts.Section, {
+        children: /* @__PURE__ */jsx(InputParts.Area, {
+          ref: inputRef,
+          value,
+          onChangeText: onChange,
+          placeholder,
+          onKeyDown,
+          "aria-autocomplete": "list",
+          "aria-controls": treeId,
+          "aria-activedescendant": activeDescendant,
+          "aria-expanded": true
+        })
+      })]
+    })
+  });
+}
+function EmptyFilterRow({
+  message
+}) {
+  const {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */jsx(XStack, {
+    "data-testid": "tree-select-empty",
+    alignItems: "center",
+    height: 44,
+    minHeight: 44,
+    paddingHorizontal: "$3",
+    children: /* @__PURE__ */jsx(Text, {
+      ...knobProps.body,
+      color: formCommonColors.text,
+      children: message
+    })
+  });
+}
+function Trigger({
+  display,
+  placeholder,
+  open,
+  disabled,
+  id,
+  labelled,
+  onToggle,
+  triggerRef,
+  sizeToken,
+  borderRadius
+}) {
+  const handleKey = e => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      e.preventDefault?.();
+      onToggle();
+    }
+  };
+  return /* @__PURE__ */jsx(InputParts, {
+    size: sizeToken,
+    children: /* @__PURE__ */jsxs(InputParts.Box, {
+      ref: triggerRef,
+      "data-testid": "tree-select-trigger",
+      "data-fp-trigger": "",
+      role: "combobox",
+      "aria-haspopup": "tree",
+      "aria-expanded": open,
+      "aria-label": labelled ? void 0 : placeholder,
+      id,
+      tabIndex: disabled || open ? -1 : 0,
+      disabled,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? 0.5 : 1,
+      borderRadius,
+      minHeight: 44,
+      suppressFocusRing: open,
+      ...(isWeb ? {
+        className: "mp-composite-ring",
+        onKeyDown: handleKey
+      } : void 0),
+      onPress: disabled ? void 0 : onToggle,
+      focusVisibleStyle: ensureFocusVisibleRing(FOCUS_VISIBLE_RING),
+      children: [/* @__PURE__ */jsx(InputParts.Section, {
+        children: /* @__PURE__ */jsx(Text, {
+          "data-trig-text": "",
+          flex: 1,
+          numberOfLines: 1,
+          color: display ? "$color12" : formCommonColors.muted,
+          paddingHorizontal: "$3",
+          children: display ?? placeholder
+        })
+      }), /* @__PURE__ */jsx(InputParts.Section, {
+        children: /* @__PURE__ */jsx(InputParts.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */jsx(CaretDownIcon, {
+            size: 16
+          })
+        })
+      })]
+    })
+  });
+}
+function useTreeSelectState(props) {
+  const {
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  } = props;
+  const [filter, setFilter] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [keyboardRing, setKeyboardRing] = useState(false);
+  const [expandedIds, setExpandedIds] = useState(() => {
+    const next = new Set(defaultExpandedIds ?? []);
+    if (value) {
+      const path = findNodePath(nodes, value);
+      if (path) for (const id of path) next.add(id);
+    }
+    return next;
+  });
+  const filtered = useMemo(() => filterForest(nodes, filter), [nodes, filter]);
+  const displayNodes = filtered.nodes;
+  const rows = useMemo(() => {
+    const expanded = new Set(expandedIds);
+    for (const id of filtered.expandIds) expanded.add(id);
+    return flattenVisible(displayNodes, expanded);
+  }, [displayNodes, expandedIds, filtered.expandIds]);
+  useEffect(() => {
+    if (!open) {
+      setFilter("");
+      setActiveIndex(0);
+      setKeyboardRing(false);
+      return;
+    }
+    setActiveIndex(0);
+  }, [open]);
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [filter]);
+  const toggle = useCallback(node => {
+    setExpandedIds(prev => {
+      const next = new Set(prev);
+      if (next.has(node.id)) next.delete(node.id);else next.add(node.id);
+      return next;
+    });
+  }, []);
+  return {
+    filter,
+    setFilter,
+    activeIndex,
+    setActiveIndex,
+    keyboardRing,
+    setKeyboardRing,
+    rows,
+    toggle,
+    displayNodes
+  };
+}
+function TreeSelectPanelBody({
+  rows,
+  selectedId,
+  activeIndex,
+  keyboardRing,
+  treeId,
+  emptyMessage,
+  loading,
+  onCommit,
+  onToggle
+}) {
+  if (loading && rows.length === 0) {
+    return /* @__PURE__ */jsxs(YStack, {
+      padding: "$2",
+      gap: "$2",
+      children: [/* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 32
+      }), /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 32
+      })]
+    });
+  }
+  if (rows.length === 0) return /* @__PURE__ */jsx(EmptyFilterRow, {
+    message: emptyMessage
+  });
+  return /* @__PURE__ */jsx(TreeSelectRows, {
+    rows,
+    selectedId,
+    activeIndex,
+    keyboardRing,
+    treeId,
+    onCommit,
+    onToggle
+  });
+}
+function handleTreeKeys(args) {
+  const {
+    key,
+    preventDefault,
+    rows,
+    activeIndex,
+    setActiveIndex,
+    setKeyboardRing,
+    toggle,
+    onCommit,
+    onClose
+  } = args;
+  const current = rows[activeIndex];
+  if (key === "ArrowDown") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(prev => rows.length === 0 ? 0 : (prev + 1) % rows.length);
+    return;
+  }
+  if (key === "ArrowUp") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(prev => rows.length === 0 ? 0 : (prev - 1 + rows.length) % rows.length);
+    return;
+  }
+  if (key === "Home") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(0);
+    return;
+  }
+  if (key === "End") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(Math.max(0, rows.length - 1));
+    return;
+  }
+  if (key === "ArrowRight" && current?.hasChildren) {
+    preventDefault();
+    setKeyboardRing(true);
+    if (!current.isExpanded) toggle(current.node);else if (activeIndex + 1 < rows.length) setActiveIndex(activeIndex + 1);
+    return;
+  }
+  if (key === "ArrowLeft" && current) {
+    preventDefault();
+    setKeyboardRing(true);
+    if (current.isExpanded) toggle(current.node);
+    return;
+  }
+  if (key === "Enter" && current) {
+    preventDefault();
+    onCommit(current.node);
+    return;
+  }
+  if (key === "Escape") {
+    preventDefault();
+    onClose();
+  }
+}
+function FloatingTreeSelect({
+  nodes,
+  value,
+  display,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  disabled,
+  id,
+  labelled,
+  open,
+  onOpenChange,
+  onCommit,
+  defaultExpandedIds,
+  sizeToken,
+  borderRadius,
+  loading
+}) {
+  const treeId = useId();
+  const searchRef = useRef(null);
+  const state = useTreeSelectState({
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  });
+  const repositionRef = useRef(null);
+  const overlayStyle = useRef(null);
+  const panel = useFloatingPanel({
+    open,
+    onOpenChange,
+    disabled,
+    repositionRef,
+    middleware: [],
+    useAutoUpdate: false,
+    onBeforeOpen: () => {
+      overlayStyle.current = null;
+    }
+  });
+  const reposition = useCallback(() => {
+    const dropdown = panel.refs.floating.current;
+    const trigger = panel.triggerRef.current ?? dropdown?.ownerDocument.querySelector('[data-testid="tree-select-trigger"]');
+    if (!dropdown || !trigger) return;
+    const triggerBounds = trigger.getBoundingClientRect();
+    const top = triggerBounds.top;
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${triggerBounds.left}px`;
+    dropdown.style.minWidth = `${triggerBounds.width}px`;
+    const maxAvailable = window.innerHeight - top - panelViewportPadding;
+    dropdown.style.maxHeight = `${Math.max(120, maxAvailable)}px`;
+    overlayStyle.current = {
+      top
+    };
+  }, [panel.refs.floating, panel.triggerRef]);
+  repositionRef.current = reposition;
+  useLayoutEffect(() => {
+    if (!open || !panel.mounted) return;
+    reposition();
+  }, [open, panel.mounted, reposition, state.rows.length]);
+  useEffect(() => {
+    if (open && panel.mounted) {
+      requestAnimationFrame(() => searchRef.current?.focus());
+    }
+  }, [open, panel.mounted]);
+  const dismiss = useDismiss(panel.context, {
+    outsidePressEvent: "click",
+    ancestorScroll: false
+  });
+  const {
+    getFloatingProps
+  } = useInteractions([dismiss]);
+  const commit = useCallback(node => {
+    onCommit(node);
+    onOpenChange(false);
+  }, [onCommit, onOpenChange]);
+  const onSearchKeyDown = event => {
+    handleTreeKeys({
+      key: event.key,
+      preventDefault: () => event.preventDefault(),
+      rows: state.rows,
+      activeIndex: state.activeIndex,
+      setActiveIndex: state.setActiveIndex,
+      setKeyboardRing: state.setKeyboardRing,
+      toggle: state.toggle,
+      onCommit: commit,
+      onClose: () => onOpenChange(false)
+    });
+  };
+  const activeDescendant = open && state.activeIndex >= 0 ? `${treeId}-node-${state.activeIndex}` : void 0;
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Trigger, {
+      display,
+      placeholder,
+      open,
+      disabled,
+      id,
+      labelled,
+      onToggle: () => {
+        if (!disabled) onOpenChange(!open);
+      },
+      triggerRef: panel.setReferenceRef,
+      sizeToken,
+      borderRadius
+    }), panel.mounted && /* @__PURE__ */jsx(FloatingFocusManager, {
+      context: panel.context,
+      modal: false,
+      initialFocus: -1,
+      children: /* @__PURE__ */jsxs(YStack, {
+        ...getFloatingProps({
+          ref: panel.refs.setFloating
+        }),
+        "data-testid": "tree-select-panel",
+        "data-cover": "",
+        "data-width-mode": TREE_SELECT_WIDTH_MODE,
+        "data-dismiss-class": "commit",
+        "data-fp-panel": "",
+        outlineWidth: 0,
+        pointerEvents: panel.visible ? "auto" : "none",
+        ...panel.knobProps.elevatedSurface,
+        borderRadius: panel.dropdownRadius,
+        overflow: "hidden",
+        style: {
+          position: "fixed",
+          top: overlayStyle.current?.top ?? 0,
+          left: 0,
+          zIndex: zIndex.dropdown,
+          opacity: panel.visible ? 1 : 0,
+          transform: panel.visible ? "scale(1)" : "scale(0.96)",
+          transition: panelTransition,
+          boxSizing: "border-box"
+        },
+        children: [/* @__PURE__ */jsx(SearchRow, {
+          value: state.filter,
+          placeholder: searchPlaceholder,
+          inputRef: searchRef,
+          onChange: state.setFilter,
+          onKeyDown: onSearchKeyDown,
+          treeId,
+          activeDescendant,
+          sizeToken
+        }), /* @__PURE__ */jsx(YStack, {
+          overflow: "scroll",
+          maxHeight: 320,
+          id: treeId,
+          children: /* @__PURE__ */jsx(TreeSelectPanelBody, {
+            rows: state.rows,
+            selectedId: value,
+            activeIndex: state.activeIndex,
+            keyboardRing: state.keyboardRing,
+            treeId,
+            emptyMessage,
+            loading,
+            onCommit: commit,
+            onToggle: state.toggle
+          })
+        })]
+      })
+    })]
+  });
+}
+function SheetTreeSelect({
+  nodes,
+  value,
+  display,
+  placeholder,
+  searchPlaceholder,
+  emptyMessage,
+  disabled,
+  id,
+  labelled,
+  open,
+  onOpenChange,
+  onCommit,
+  defaultExpandedIds,
+  sizeToken,
+  borderRadius,
+  loading
+}) {
+  const treeId = useId();
+  const searchRef = useRef(null);
+  const state = useTreeSelectState({
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  });
+  const triggerRef = useRef(null);
+  const commit = useCallback(node => {
+    onCommit(node);
+    onOpenChange(false);
+  }, [onCommit, onOpenChange]);
+  const onSearchKeyDown = event => {
+    handleTreeKeys({
+      key: event.key,
+      preventDefault: () => event.preventDefault(),
+      rows: state.rows,
+      activeIndex: state.activeIndex,
+      setActiveIndex: state.setActiveIndex,
+      setKeyboardRing: state.setKeyboardRing,
+      toggle: state.toggle,
+      onCommit: commit,
+      onClose: () => onOpenChange(false)
+    });
+  };
+  const activeDescendant = open && state.activeIndex >= 0 ? `${treeId}-node-${state.activeIndex}` : void 0;
+  return /* @__PURE__ */jsx(FloatingPanel, {
+    open,
+    onOpenChange,
+    sheet: true,
+    sheetFill: true,
+    contentPadding: "none",
+    disabled,
+    trigger: /* @__PURE__ */jsx(Trigger, {
+      display,
+      placeholder,
+      open,
+      disabled,
+      id,
+      labelled,
+      onToggle: () => {
+        if (!disabled) onOpenChange(true);
+      },
+      triggerRef: node => {
+        triggerRef.current = node;
+      },
+      sizeToken,
+      borderRadius
+    }),
+    header: /* @__PURE__ */jsx(SearchRow, {
+      value: state.filter,
+      placeholder: searchPlaceholder,
+      inputRef: searchRef,
+      onChange: state.setFilter,
+      onKeyDown: onSearchKeyDown,
+      treeId,
+      activeDescendant,
+      sizeToken
+    }),
+    children: /* @__PURE__ */jsx(YStack, {
+      "data-testid": "tree-select-panel",
+      "data-width-mode": TREE_SELECT_WIDTH_MODE,
+      "data-dismiss-class": "commit",
+      id: treeId,
+      children: /* @__PURE__ */jsx(TreeSelectPanelBody, {
+        rows: state.rows,
+        selectedId: value,
+        activeIndex: state.activeIndex,
+        keyboardRing: state.keyboardRing,
+        treeId,
+        emptyMessage,
+        loading,
+        onCommit: commit,
+        onToggle: state.toggle
+      })
+    })
+  });
+}
+function TreeSelect({
+  nodes,
+  value,
+  onChange,
+  label,
+  placeholder: placeholderProp,
+  searchPlaceholder: searchPlaceholderProp,
+  emptyMessage: emptyMessageProp,
+  valueLabel,
+  disabled = false,
+  readOnly = false,
+  required,
+  error,
+  helperText,
+  skeleton,
+  compact,
+  loading,
+  open: openProp,
+  onOpenChange,
+  defaultExpandedIds,
+  id: idProp,
+  ...stackProps
+}) {
+  if (isWeb) ensureKeyboardModalityTracking();
+  const {
+    t
+  } = useTranslation();
+  const {
+    knobProps,
+    id
+  } = useFormField({
+    id: idProp,
+    compact
+  });
+  const placeholder = placeholderProp ?? t("Select...");
+  const searchPlaceholder = searchPlaceholderProp ?? t("Filter...");
+  const emptyMessage = emptyMessageProp ?? t("No matching items");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const viewportGtSm = useViewportGtSm();
+  const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  const shouldUseSheet = !isWeb || !effectiveGtSm;
+  const selected = value ? findNode(nodes, value) : void 0;
+  const display = selected?.label ?? (value ? valueLabel ?? value : void 0);
+  if (skeleton) {
+    return /* @__PURE__ */jsxs(YStack, {
+      "data-testid": "tree-select",
+      ...stackProps,
+      children: [label ? /* @__PURE__ */jsx(Skeleton, {
+        variant: "text",
+        width: "30%",
+        height: 14
+      }) : null, /* @__PURE__ */jsx(Skeleton, {
+        variant: "rounded",
+        width: "100%",
+        height: 44
+      })]
+    });
+  }
+  if (readOnly) {
+    return /* @__PURE__ */jsx(YStack, {
+      "data-testid": "tree-select",
+      width: "100%",
+      ...stackProps,
+      children: /* @__PURE__ */jsx(FieldLayout, {
+        id,
+        label,
+        error,
+        helperText,
+        required,
+        knobProps,
+        disabled,
+        children: /* @__PURE__ */jsx(Text, {
+          paddingVertical: "$2",
+          paddingHorizontal: "$3",
+          ...knobProps.body,
+          children: display ?? "\u2014"
+        })
+      })
+    });
+  }
+  const shared = {
+    nodes,
+    value,
+    display,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    disabled,
+    id,
+    labelled: Boolean(label),
+    open,
+    onOpenChange: setOpen,
+    onCommit: node => onChange?.(node.id),
+    defaultExpandedIds,
+    sizeToken: String(knobProps.sizeToken),
+    borderRadius: knobProps.borderRadius.borderRadius,
+    loading
+  };
+  const core = shouldUseSheet ? /* @__PURE__ */jsx(SheetTreeSelect, {
+    ...shared
+  }) : /* @__PURE__ */jsx(FloatingTreeSelect, {
+    ...shared
+  });
+  return /* @__PURE__ */jsx(YStack, {
+    "data-testid": "tree-select",
+    width: "100%",
+    ...stackProps,
+    children: /* @__PURE__ */jsx(FieldLayout, {
+      id,
+      label,
+      error,
+      helperText,
+      required,
+      knobProps,
+      disabled,
+      children: core
+    })
+  });
+}
+export { TreeSelect };
+//# sourceMappingURL=index.mjs.map