@multiplatform.one/components 7.4.0 → 7.5.0

package/dist/esm/TreeSelect/index.native.js

@@ -0,0 +1,913 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.native.js";
+import { useTranslation } from "../shared/i18n.native.js";
+import { Skeleton } from "../Skeleton/index.native.js";
+import { filterForest, findNode, findNodePath, flattenVisible } from "./treeSelectModel.native.js";
+var 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(param) {
+  var {
+    rows,
+    selectedId,
+    activeIndex,
+    keyboardRing,
+    treeId,
+    onCommit,
+    onToggle
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var nestedPx = knobProps.nestedControl.px;
+  var indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
+  var expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
+  var nodeIconSize = nestedPx <= 28 ? 14 : 18;
+  var caretSize = nestedPx <= 28 ? 12 : 14;
+  var rowPadX = knobProps.space === "small" ? 6 : knobProps.space === "large" ? 13 : 8;
+  var isRTL = useDirection() === "rtl";
+  var 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(function (row) {
+      var _node_icon;
+      var {
+        node,
+        depth,
+        hasChildren,
+        isExpanded,
+        childCount,
+        index
+      } = row;
+      var isSelected = selectedId === node.id;
+      var isActive = index === activeIndex;
+      var leadingIcon = hasChildren && isExpanded && node.iconWhenExpanded ? node.iconWhenExpanded : (_node_icon = node.icon) !== null && _node_icon !== void 0 ? _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: function onPress(e) {
+          var _target_closest;
+          var target = e.target;
+          if (target === null || target === void 0 ? void 0 : (_target_closest = target.closest) === null || _target_closest === void 0 ? void 0 : _target_closest.call(target, "[data-treeselect-caret]")) return;
+          onCommit(node);
+        },
+        children: [depth > 0 ? Array.from({
+          length: depth
+        }, function (_, guide) {
+          var 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: function onPress(e) {
+            var _e_stopPropagation;
+            (_e_stopPropagation = e.stopPropagation) === null || _e_stopPropagation === void 0 ? void 0 : _e_stopPropagation.call(e);
+            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(param) {
+  var {
+    value,
+    placeholder,
+    inputRef,
+    onChange,
+    onKeyDown,
+    treeId,
+    activeDescendant,
+    sizeToken
+  } = param;
+  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(param) {
+  var {
+    message
+  } = param;
+  var {
+    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(param) {
+  var {
+    display,
+    placeholder,
+    open,
+    disabled,
+    id,
+    labelled,
+    onToggle,
+    triggerRef,
+    sizeToken,
+    borderRadius
+  } = param;
+  var handleKey = function handleKey2(e) {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      var _e_preventDefault;
+      (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+      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 !== null && display !== void 0 ? display : placeholder
+        })
+      }), /* @__PURE__ */_jsx(InputParts.Section, {
+        children: /* @__PURE__ */_jsx(InputParts.Icon, {
+          adornment: "trailing",
+          children: /* @__PURE__ */_jsx(CaretDownIcon, {
+            size: 16
+          })
+        })
+      })]
+    })
+  });
+}
+function useTreeSelectState(props) {
+  var {
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  } = props;
+  var [filter, setFilter] = useState("");
+  var [activeIndex, setActiveIndex] = useState(0);
+  var [keyboardRing, setKeyboardRing] = useState(false);
+  var [expandedIds, setExpandedIds] = useState(function () {
+    var next = new Set(defaultExpandedIds !== null && defaultExpandedIds !== void 0 ? defaultExpandedIds : []);
+    if (value) {
+      var path = findNodePath(nodes, value);
+      var _iteratorNormalCompletion = true,
+        _didIteratorError = false,
+        _iteratorError = void 0;
+      if (path) try {
+        for (var _iterator = path[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+          var id = _step.value;
+          next.add(id);
+        }
+      } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion && _iterator.return != null) {
+            _iterator.return();
+          }
+        } finally {
+          if (_didIteratorError) {
+            throw _iteratorError;
+          }
+        }
+      }
+    }
+    return next;
+  });
+  var filtered = useMemo(function () {
+    return filterForest(nodes, filter);
+  }, [nodes, filter]);
+  var displayNodes = filtered.nodes;
+  var rows = useMemo(function () {
+    var expanded = new Set(expandedIds);
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = filtered.expandIds[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var id = _step.value;
+        expanded.add(id);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    return flattenVisible(displayNodes, expanded);
+  }, [displayNodes, expandedIds, filtered.expandIds]);
+  useEffect(function () {
+    if (!open) {
+      setFilter("");
+      setActiveIndex(0);
+      setKeyboardRing(false);
+      return;
+    }
+    setActiveIndex(0);
+  }, [open]);
+  useEffect(function () {
+    setActiveIndex(0);
+  }, [filter]);
+  var toggle = useCallback(function (node) {
+    setExpandedIds(function (prev) {
+      var 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(param) {
+  var {
+    rows,
+    selectedId,
+    activeIndex,
+    keyboardRing,
+    treeId,
+    emptyMessage,
+    loading,
+    onCommit,
+    onToggle
+  } = param;
+  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) {
+  var {
+    key,
+    preventDefault,
+    rows,
+    activeIndex,
+    setActiveIndex,
+    setKeyboardRing,
+    toggle,
+    onCommit,
+    onClose
+  } = args;
+  var current = rows[activeIndex];
+  if (key === "ArrowDown") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(function (prev) {
+      return rows.length === 0 ? 0 : (prev + 1) % rows.length;
+    });
+    return;
+  }
+  if (key === "ArrowUp") {
+    preventDefault();
+    setKeyboardRing(true);
+    setActiveIndex(function (prev) {
+      return 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 === null || current === void 0 ? void 0 : 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(param) {
+  var {
+    nodes,
+    value,
+    display,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    disabled,
+    id,
+    labelled,
+    open,
+    onOpenChange,
+    onCommit,
+    defaultExpandedIds,
+    sizeToken,
+    borderRadius,
+    loading
+  } = param;
+  var _ref;
+  var _overlayStyle_current;
+  var treeId = useId();
+  var searchRef = useRef(null);
+  var state = useTreeSelectState({
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  });
+  var repositionRef = useRef(null);
+  var overlayStyle = useRef(null);
+  var panel = useFloatingPanel({
+    open,
+    onOpenChange,
+    disabled,
+    repositionRef,
+    middleware: [],
+    useAutoUpdate: false,
+    onBeforeOpen: function onBeforeOpen() {
+      overlayStyle.current = null;
+    }
+  });
+  var reposition = useCallback(function () {
+    var _panel_triggerRef_current;
+    var dropdown = panel.refs.floating.current;
+    var trigger = (_panel_triggerRef_current = panel.triggerRef.current) !== null && _panel_triggerRef_current !== void 0 ? _panel_triggerRef_current : dropdown === null || dropdown === void 0 ? void 0 : dropdown.ownerDocument.querySelector('[data-testid="tree-select-trigger"]');
+    if (!dropdown || !trigger) return;
+    var triggerBounds = trigger.getBoundingClientRect();
+    var top = triggerBounds.top;
+    dropdown.style.top = `${top}px`;
+    dropdown.style.left = `${triggerBounds.left}px`;
+    dropdown.style.minWidth = `${triggerBounds.width}px`;
+    var 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(function () {
+    if (!open || !panel.mounted) return;
+    reposition();
+  }, [open, panel.mounted, reposition, state.rows.length]);
+  useEffect(function () {
+    if (open && panel.mounted) {
+      requestAnimationFrame(function () {
+        var _searchRef_current;
+        return (_searchRef_current = searchRef.current) === null || _searchRef_current === void 0 ? void 0 : _searchRef_current.focus();
+      });
+    }
+  }, [open, panel.mounted]);
+  var dismiss = useDismiss(panel.context, {
+    outsidePressEvent: "click",
+    ancestorScroll: false
+  });
+  var {
+    getFloatingProps
+  } = useInteractions([dismiss]);
+  var commit = useCallback(function (node) {
+    onCommit(node);
+    onOpenChange(false);
+  }, [onCommit, onOpenChange]);
+  var onSearchKeyDown = function onSearchKeyDown2(event) {
+    handleTreeKeys({
+      key: event.key,
+      preventDefault: function preventDefault() {
+        return event.preventDefault();
+      },
+      rows: state.rows,
+      activeIndex: state.activeIndex,
+      setActiveIndex: state.setActiveIndex,
+      setKeyboardRing: state.setKeyboardRing,
+      toggle: state.toggle,
+      onCommit: commit,
+      onClose: function onClose() {
+        return onOpenChange(false);
+      }
+    });
+  };
+  var 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: function 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: (_ref = (_overlayStyle_current = overlayStyle.current) === null || _overlayStyle_current === void 0 ? void 0 : _overlayStyle_current.top) !== null && _ref !== void 0 ? _ref : 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(param) {
+  var {
+    nodes,
+    value,
+    display,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    disabled,
+    id,
+    labelled,
+    open,
+    onOpenChange,
+    onCommit,
+    defaultExpandedIds,
+    sizeToken,
+    borderRadius,
+    loading
+  } = param;
+  var treeId = useId();
+  var searchRef = useRef(null);
+  var state = useTreeSelectState({
+    nodes,
+    value,
+    open,
+    defaultExpandedIds
+  });
+  var triggerRef = useRef(null);
+  var commit = useCallback(function (node) {
+    onCommit(node);
+    onOpenChange(false);
+  }, [onCommit, onOpenChange]);
+  var onSearchKeyDown = function onSearchKeyDown2(event) {
+    handleTreeKeys({
+      key: event.key,
+      preventDefault: function preventDefault() {
+        return event.preventDefault();
+      },
+      rows: state.rows,
+      activeIndex: state.activeIndex,
+      setActiveIndex: state.setActiveIndex,
+      setKeyboardRing: state.setKeyboardRing,
+      toggle: state.toggle,
+      onCommit: commit,
+      onClose: function onClose() {
+        return onOpenChange(false);
+      }
+    });
+  };
+  var 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: function onToggle() {
+        if (!disabled) onOpenChange(true);
+      },
+      triggerRef: function triggerRef1(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(param) {
+  var {
+    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
+  } = param;
+  var _ref;
+  if (isWeb) ensureKeyboardModalityTracking();
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps,
+    id
+  } = useFormField({
+    id: idProp,
+    compact
+  });
+  var placeholder = placeholderProp !== null && placeholderProp !== void 0 ? placeholderProp : t("Select...");
+  var searchPlaceholder = searchPlaceholderProp !== null && searchPlaceholderProp !== void 0 ? searchPlaceholderProp : t("Filter...");
+  var emptyMessage = emptyMessageProp !== null && emptyMessageProp !== void 0 ? emptyMessageProp : t("No matching items");
+  var [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  var open = openProp !== null && openProp !== void 0 ? openProp : uncontrolledOpen;
+  var setOpen = onOpenChange !== null && onOpenChange !== void 0 ? onOpenChange : setUncontrolledOpen;
+  var viewportGtSm = useViewportGtSm();
+  var effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
+  var shouldUseSheet = !isWeb || !effectiveGtSm;
+  var selected = value ? findNode(nodes, value) : void 0;
+  var display = (_ref = selected === null || selected === void 0 ? void 0 : selected.label) !== null && _ref !== void 0 ? _ref : value ? valueLabel !== null && valueLabel !== void 0 ? 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 !== null && display !== void 0 ? display : "\u2014"
+        })
+      })
+    });
+  }
+  var shared = {
+    nodes,
+    value,
+    display,
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    disabled,
+    id,
+    labelled: Boolean(label),
+    open,
+    onOpenChange: setOpen,
+    onCommit: function onCommit(node) {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(node.id);
+    },
+    defaultExpandedIds,
+    sizeToken: String(knobProps.sizeToken),
+    borderRadius: knobProps.borderRadius.borderRadius,
+    loading
+  };
+  var 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.native.js.map