@mantine/core 9.0.0-alpha.3 → 9.0.0-alpha.5

package/cjs/components/TreeSelect/TreeSelect.cjs

@@ -0,0 +1,821 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var hooks = require('@mantine/hooks');
+require('../../core/utils/units-converters/rem.cjs');
+require('clsx');
+var useResolvedStylesApi = require('../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs');
+var useStyles = require('../../core/styles-api/use-styles/use-styles.cjs');
+require('../../core/MantineProvider/Mantine.context.cjs');
+require('../../core/MantineProvider/default-theme.cjs');
+require('../../core/MantineProvider/MantineProvider.cjs');
+require('../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs');
+var useProps = require('../../core/MantineProvider/use-props/use-props.cjs');
+require('../../core/MantineProvider/MantineCssVariables/MantineCssVariables.cjs');
+var extractStyleProps = require('../../core/Box/style-props/extract-style-props/extract-style-props.cjs');
+require('../../core/Box/Box.cjs');
+var factory = require('../../core/factory/factory.cjs');
+require('../../core/DirectionProvider/DirectionProvider.cjs');
+require('../Combobox/ComboboxChevron/ComboboxChevron.cjs');
+var Combobox = require('../Combobox/Combobox.cjs');
+require('../Combobox/ComboboxDropdown/ComboboxDropdown.cjs');
+require('../Combobox/ComboboxOptions/ComboboxOptions.cjs');
+require('../Combobox/ComboboxOption/ComboboxOption.cjs');
+require('../Combobox/ComboboxTarget/ComboboxTarget.cjs');
+require('../Combobox/ComboboxSearch/ComboboxSearch.cjs');
+require('../Combobox/ComboboxEmpty/ComboboxEmpty.cjs');
+require('../Combobox/ComboboxFooter/ComboboxFooter.cjs');
+require('../Combobox/ComboboxHeader/ComboboxHeader.cjs');
+require('../Combobox/ComboboxEventsTarget/ComboboxEventsTarget.cjs');
+require('../Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.cjs');
+require('../Combobox/ComboboxGroup/ComboboxGroup.cjs');
+require('../Combobox/ComboboxClearButton/ComboboxClearButton.cjs');
+require('../Combobox/ComboboxHiddenInput/ComboboxHiddenInput.cjs');
+require('../Checkbox/Checkbox.cjs');
+require('../Checkbox/CheckboxGroup/CheckboxGroup.cjs');
+require('../Checkbox/CheckboxIndicator/CheckboxIndicator.cjs');
+require('../Checkbox/CheckboxCard/CheckboxCard.cjs');
+var ScrollArea = require('../ScrollArea/ScrollArea.cjs');
+var useCombobox = require('../Combobox/use-combobox/use-combobox.cjs');
+require('../Combobox/Combobox.context.cjs');
+var InputBase = require('../InputBase/InputBase.cjs');
+var Pill = require('../Pill/Pill.cjs');
+require('../Pill/PillGroup/PillGroup.cjs');
+var PillsInput = require('../PillsInput/PillsInput.cjs');
+require('../PillsInput/PillsInputField/PillsInputField.cjs');
+require('../PillsInput/PillsInput.context.cjs');
+require('../ScrollArea/ScrollArea.context.cjs');
+var filterTreeData = require('../Tree/filter-tree-data/filter-tree-data.cjs');
+var getChildrenNodesValues = require('../Tree/get-children-nodes-values/get-children-nodes-values.cjs');
+var isNodeChecked = require('../Tree/is-node-checked/is-node-checked.cjs');
+var isNodeIndeterminate = require('../Tree/is-node-indeterminate/is-node-indeterminate.cjs');
+var useTree = require('../Tree/use-tree.cjs');
+var flattenTreeSelectData = require('./flatten-tree-select-data.cjs');
+var getCheckedValuesByStrategy = require('./get-checked-values-by-strategy.cjs');
+var TreeSelectOption = require('./TreeSelectOption.cjs');
+var TreeSelect_module = require('./TreeSelect.module.css.cjs');
+
+const defaultProps = {
+  mode: "single",
+  allowDeselect: true,
+  checkedStrategy: "child",
+  maxValues: Infinity,
+  hiddenInputValuesDivider: ",",
+  clearSearchOnChange: true,
+  openOnFocus: true,
+  size: "sm",
+  withLines: true
+};
+const clearSectionOffset = {
+  xs: 41,
+  sm: 50,
+  md: 60,
+  lg: 72,
+  xl: 89
+};
+function getAncestorsToNode(value, nodes) {
+  for (const node of nodes) {
+    if (node.value === value) {
+      return [];
+    }
+    if (Array.isArray(node.children)) {
+      const path = getAncestorsToNode(value, node.children);
+      if (path !== null) {
+        return [node.value, ...path];
+      }
+    }
+  }
+  return null;
+}
+const TreeSelect = factory.genericFactory((_props) => {
+  const props = useProps.useProps("TreeSelect", defaultProps, _props);
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    unstyled,
+    vars,
+    size,
+    data,
+    mode,
+    value,
+    defaultValue,
+    onChange,
+    checkStrictly,
+    checkedStrategy,
+    defaultExpandedValues,
+    defaultExpandAll,
+    expandedValues,
+    onExpandedChange,
+    expandOnClick,
+    searchable,
+    searchValue,
+    defaultSearchValue,
+    onSearchChange,
+    filter,
+    nothingFoundMessage,
+    allowDeselect,
+    clearable,
+    clearSectionMode,
+    clearButtonProps,
+    maxValues,
+    maxDisplayedValues,
+    maxDisplayedValuesContent,
+    onRemove,
+    onClear,
+    renderNode,
+    withLines,
+    hiddenInputProps,
+    hiddenInputValuesDivider,
+    scrollAreaProps,
+    chevronColor,
+    maxDropdownHeight,
+    dropdownOpened,
+    defaultDropdownOpened,
+    onDropdownOpen,
+    onDropdownClose,
+    comboboxProps,
+    clearSearchOnChange,
+    openOnFocus,
+    variant,
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onClick,
+    readOnly,
+    disabled,
+    radius,
+    rightSection,
+    rightSectionWidth,
+    rightSectionPointerEvents,
+    rightSectionProps,
+    leftSection,
+    leftSectionWidth,
+    leftSectionPointerEvents,
+    leftSectionProps,
+    inputContainer,
+    inputWrapperOrder,
+    withAsterisk,
+    labelProps,
+    descriptionProps,
+    errorProps,
+    wrapperProps,
+    description,
+    label,
+    error,
+    withErrorStyles,
+    name,
+    form,
+    id,
+    placeholder,
+    required,
+    mod,
+    attributes,
+    ...others
+  } = props;
+  const isMulti = mode === "multiple" || mode === "checkbox";
+  const isCheckbox = mode === "checkbox";
+  const _id = hooks.useId(id);
+  const combobox = useCombobox.useCombobox({
+    opened: dropdownOpened,
+    defaultOpened: defaultDropdownOpened,
+    onDropdownOpen: () => {
+      onDropdownOpen?.();
+      combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
+    },
+    onDropdownClose: () => {
+      onDropdownClose?.();
+      combobox.resetSelectedOption();
+    }
+  });
+  const initialExpanded = React.useMemo(() => {
+    if (defaultExpandAll) {
+      return useTree.getTreeExpandedState(data, "*");
+    }
+    if (defaultExpandedValues) {
+      return useTree.getTreeExpandedState(data, defaultExpandedValues);
+    }
+    return useTree.getTreeExpandedState(data, []);
+  }, []);
+  const expandedToRecord = React.useCallback(
+    (values) => {
+      if (!values) {
+        return void 0;
+      }
+      return useTree.getTreeExpandedState(data, values);
+    },
+    [data]
+  );
+  const [_expandedState, setExpandedState] = hooks.useUncontrolled({
+    value: expandedToRecord(expandedValues),
+    defaultValue: initialExpanded,
+    finalValue: {},
+    onChange: (val) => {
+      if (onExpandedChange) {
+        onExpandedChange(
+          Object.entries(val).filter(([, v]) => v).map(([k]) => k)
+        );
+      }
+    }
+  });
+  const toggleExpand = React.useCallback(
+    (nodeValue) => {
+      setExpandedState({ ..._expandedState, [nodeValue]: !_expandedState[nodeValue] });
+    },
+    [_expandedState]
+  );
+  const initialSearchValue = React.useMemo(() => {
+    if (mode !== "single" || !defaultValue) {
+      return "";
+    }
+    const node = getChildrenNodesValues.findTreeNode(defaultValue, data);
+    return node ? typeof node.label === "string" ? node.label : "" : "";
+  }, []);
+  const [_searchValue, setSearchValue] = hooks.useUncontrolled({
+    value: searchValue,
+    defaultValue: defaultSearchValue,
+    finalValue: initialSearchValue,
+    onChange: onSearchChange
+  });
+  const handleSearchChange = (val) => {
+    setSearchValue(val);
+    combobox.resetSelectedOption();
+  };
+  const [_value, setValue] = hooks.useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: isMulti ? [] : null,
+    onChange
+  });
+  const internalChecked = React.useMemo(() => {
+    if (!isCheckbox || !_value || !Array.isArray(_value)) {
+      return [];
+    }
+    if (checkStrictly) {
+      return _value;
+    }
+    return getCheckedValuesByStrategy.expandToLeafChecked(_value, data);
+  }, [isCheckbox, _value, data, checkStrictly]);
+  const filteredData = React.useMemo(() => {
+    if (!searchable || !_searchValue) {
+      return data;
+    }
+    if (mode === "single" && _value) {
+      const node = getChildrenNodesValues.findTreeNode(_value, data);
+      if (node && _searchValue === (typeof node.label === "string" ? node.label : "")) {
+        return data;
+      }
+    }
+    return filterTreeData.filterTreeData(data, _searchValue, filter);
+  }, [data, _searchValue, filter, searchable, mode, _value]);
+  const expandedForRender = React.useMemo(() => {
+    if (_searchValue && filteredData !== data) {
+      const expanded = { ..._expandedState };
+      const expandFilteredParents = (nodes) => {
+        for (const node of nodes) {
+          if (Array.isArray(node.children) && node.children.length > 0) {
+            expanded[node.value] = true;
+            expandFilteredParents(node.children);
+          }
+        }
+      };
+      expandFilteredParents(filteredData);
+      return expanded;
+    }
+    return _expandedState;
+  }, [filteredData, _expandedState, _searchValue, data]);
+  const flatNodes = React.useMemo(
+    () => flattenTreeSelectData.flattenTreeSelectData(filteredData, expandedForRender),
+    [filteredData, expandedForRender]
+  );
+  const flatNodesRef = React.useRef(flatNodes);
+  flatNodesRef.current = flatNodes;
+  const nodeLookup = React.useMemo(() => {
+    const lookup = {};
+    const walk = (nodes) => {
+      for (const node of nodes) {
+        lookup[node.value] = node;
+        if (Array.isArray(node.children)) {
+          walk(node.children);
+        }
+      }
+    };
+    walk(data);
+    return lookup;
+  }, [data]);
+  const getNodeLabel = (nodeValue) => {
+    const node = nodeLookup[nodeValue];
+    if (!node) {
+      return nodeValue;
+    }
+    return typeof node.label === "string" ? node.label : nodeValue;
+  };
+  const getStyles = useStyles.useStyles({
+    name: "TreeSelect",
+    classes: {},
+    props,
+    classNames,
+    styles,
+    unstyled,
+    attributes
+  });
+  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi.useResolvedStylesApi({
+    props,
+    styles,
+    classNames
+  });
+  const {
+    styleProps,
+    rest: { type, autoComplete, ...rest }
+  } = extractStyleProps.extractStyleProps(others);
+  const handleOptionSubmit = (val) => {
+    if (mode === "single") {
+      if (expandOnClick) {
+        const node = getChildrenNodesValues.findTreeNode(val, data);
+        if (node && Array.isArray(node.children) && node.children.length > 0) {
+          toggleExpand(val);
+          return;
+        }
+      }
+      const nextValue = allowDeselect && val === _value ? null : val;
+      setValue(nextValue);
+      combobox.closeDropdown();
+      if (clearSearchOnChange) {
+        handleSearchChange(nextValue ? getNodeLabel(nextValue) : "");
+      }
+    } else if (mode === "multiple") {
+      if (expandOnClick) {
+        const node = getChildrenNodesValues.findTreeNode(val, data);
+        if (node && Array.isArray(node.children) && node.children.length > 0) {
+          toggleExpand(val);
+          return;
+        }
+      }
+      if (clearSearchOnChange) {
+        setSearchValue("");
+      }
+      const arr = _value || [];
+      if (arr.includes(val)) {
+        setValue(arr.filter((v) => v !== val));
+        onRemove?.(val);
+      } else if (arr.length < (maxValues ?? Infinity)) {
+        setValue([...arr, val]);
+      }
+    } else if (mode === "checkbox") {
+      if (clearSearchOnChange) {
+        setSearchValue("");
+      }
+      const nodeChecked = checkStrictly ? internalChecked.includes(val) : isNodeChecked.isNodeChecked(val, data, internalChecked);
+      let newInternalChecked;
+      if (checkStrictly) {
+        newInternalChecked = nodeChecked ? internalChecked.filter((v) => v !== val) : [...internalChecked, val];
+      } else {
+        const childLeaves = getChildrenNodesValues.getChildrenNodesValues(val, data);
+        if (nodeChecked) {
+          newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
+        } else {
+          newInternalChecked = [.../* @__PURE__ */ new Set([...internalChecked, ...childLeaves])];
+        }
+      }
+      const newValue = getCheckedValuesByStrategy.checkedToValue(newInternalChecked, data, checkedStrategy);
+      if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) {
+        return;
+      }
+      setValue(newValue);
+      if (expandOnClick) {
+        const node = getChildrenNodesValues.findTreeNode(val, data);
+        if (node && Array.isArray(node.children) && node.children.length > 0) {
+          if (!_expandedState[val]) {
+            toggleExpand(val);
+          }
+        }
+      }
+    }
+  };
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.key === " " && !searchable && isMulti) {
+      event.preventDefault();
+      combobox.toggleDropdown();
+    }
+    if (event.key === "Backspace" && _searchValue.length === 0 && isMulti) {
+      const arr = _value || [];
+      if (arr.length > 0) {
+        const removed = arr[arr.length - 1];
+        onRemove?.(removed);
+        setValue(arr.slice(0, -1));
+      }
+    }
+    if (!combobox.dropdownOpened) {
+      return;
+    }
+    const index = combobox.getSelectedOptionIndex();
+    if (index < 0 || index >= flatNodesRef.current.length) {
+      return;
+    }
+    const currentNode = flatNodesRef.current[index];
+    if (event.key === "ArrowRight") {
+      if (currentNode.hasChildren && !currentNode.expanded) {
+        event.preventDefault();
+        toggleExpand(currentNode.node.value);
+      }
+    }
+    if (event.key === "ArrowLeft") {
+      if (currentNode.hasChildren && currentNode.expanded) {
+        event.preventDefault();
+        toggleExpand(currentNode.node.value);
+      } else if (currentNode.parent) {
+        event.preventDefault();
+        const parentIndex = flatNodesRef.current.findIndex(
+          (n) => n.node.value === currentNode.parent
+        );
+        if (parentIndex >= 0) {
+          combobox.selectOption(parentIndex);
+        }
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (mode !== "single" || !searchable) {
+      return;
+    }
+    if (value === null) {
+      handleSearchChange("");
+    } else if (typeof value === "string") {
+      handleSearchChange(getNodeLabel(value));
+    }
+  }, [value]);
+  const prevDropdownOpenedRef = React.useRef(false);
+  React.useEffect(() => {
+    if (combobox.dropdownOpened && !prevDropdownOpenedRef.current && searchable && _value) {
+      const targets = Array.isArray(_value) ? _value : [_value];
+      const newExpanded = { ..._expandedState };
+      let changed = false;
+      for (const target of targets) {
+        const ancestors = getAncestorsToNode(target, data);
+        if (ancestors) {
+          for (const a of ancestors) {
+            if (!newExpanded[a]) {
+              newExpanded[a] = true;
+              changed = true;
+            }
+          }
+        }
+      }
+      if (changed) {
+        setExpandedState(newExpanded);
+        requestAnimationFrame(() => {
+          combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
+        });
+      }
+    }
+    prevDropdownOpenedRef.current = combobox.dropdownOpened;
+  });
+  const clearButton = /* @__PURE__ */ jsxRuntime.jsx(
+    Combobox.Combobox.ClearButton,
+    {
+      ...clearButtonProps,
+      onClear: () => {
+        onClear?.();
+        setValue(isMulti ? [] : null);
+        handleSearchChange("");
+      }
+    }
+  );
+  const hasValue = isMulti ? Array.isArray(_value) && _value.length > 0 : _value != null && _value !== "";
+  const _clearable = clearable && hasValue && !disabled && !readOnly;
+  const singleDisplayLabel = React.useMemo(() => {
+    if (mode !== "single" || !_value) {
+      return "";
+    }
+    return getNodeLabel(_value);
+  }, [mode, _value, nodeLookup]);
+  const displayValues = React.useMemo(() => {
+    if (!isMulti || !Array.isArray(_value)) {
+      return [];
+    }
+    return _value;
+  }, [isMulti, _value]);
+  const pillsListStyle = _clearable && isMulti ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
+  const visiblePills = maxDisplayedValues != null ? displayValues.slice(0, maxDisplayedValues) : displayValues;
+  const overflowCount = maxDisplayedValues != null ? Math.max(0, displayValues.length - maxDisplayedValues) : 0;
+  const pills = visiblePills.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    Pill.Pill,
+    {
+      withRemoveButton: !readOnly,
+      onRemove: () => {
+        if (isCheckbox) {
+          const childLeaves = checkStrictly ? [item] : getChildrenNodesValues.getChildrenNodesValues(item, data);
+          const newInternal = internalChecked.filter((v) => !childLeaves.includes(v));
+          setValue(getCheckedValuesByStrategy.checkedToValue(newInternal, data, checkedStrategy));
+        } else {
+          setValue(_value.filter((v) => v !== item));
+        }
+        onRemove?.(item);
+      },
+      unstyled,
+      disabled,
+      ...getStyles("pill"),
+      children: getNodeLabel(item)
+    },
+    `${item}-${index}`
+  ));
+  if (overflowCount > 0) {
+    const overflowContent = typeof maxDisplayedValuesContent === "function" ? maxDisplayedValuesContent(overflowCount) : maxDisplayedValuesContent || `+${overflowCount} more`;
+    pills.push(
+      /* @__PURE__ */ jsxRuntime.jsx(Pill.Pill, { unstyled, disabled, ...getStyles("pill"), children: overflowContent }, "__overflow")
+    );
+  }
+  const isEmpty = flatNodes.length === 0;
+  const options = flatNodes.map((flatNode) => {
+    const isSelected = mode === "single" ? _value === flatNode.node.value : mode === "multiple" ? (_value || []).includes(flatNode.node.value) : false;
+    const nodeChecked = isCheckbox ? checkStrictly ? internalChecked.includes(flatNode.node.value) : isNodeChecked.isNodeChecked(flatNode.node.value, data, internalChecked) : false;
+    const nodeIndeterminate = isCheckbox && !checkStrictly ? isNodeIndeterminate.isNodeIndeterminate(flatNode.node.value, data, internalChecked) : false;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TreeSelectOption.TreeSelectOption,
+      {
+        node: flatNode.node,
+        level: flatNode.level,
+        expanded: flatNode.expanded,
+        hasChildren: flatNode.hasChildren,
+        selected: isSelected,
+        checked: nodeChecked,
+        indeterminate: nodeIndeterminate,
+        showCheckbox: isCheckbox,
+        isLastChild: flatNode.isLastChild,
+        lineGuides: flatNode.lineGuides,
+        withLines: !!withLines,
+        onToggleExpand: toggleExpand,
+        renderNode
+      },
+      flatNode.node.value
+    );
+  });
+  const dropdown = /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Dropdown, { hidden: readOnly || disabled, children: /* @__PURE__ */ jsxRuntime.jsxs(Combobox.Combobox.Options, { className: TreeSelect_module.optionsWrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollArea.ScrollArea.Autosize,
+      {
+        mah: maxDropdownHeight ?? 220,
+        type: "scroll",
+        scrollbarSize: "var(--combobox-padding)",
+        offsetScrollbars: "y",
+        ...scrollAreaProps,
+        children: options
+      }
+    ),
+    isEmpty && nothingFoundMessage && /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Empty, { children: nothingFoundMessage })
+  ] }) });
+  if (isMulti) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Combobox.Combobox,
+        {
+          store: combobox,
+          classNames: resolvedClassNames,
+          styles: resolvedStyles,
+          unstyled,
+          size,
+          readOnly,
+          __staticSelector: "TreeSelect",
+          attributes,
+          onOptionSubmit: handleOptionSubmit,
+          ...comboboxProps,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.DropdownTarget, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              PillsInput.PillsInput,
+              {
+                ...styleProps,
+                __staticSelector: "TreeSelect",
+                classNames: resolvedClassNames,
+                styles: resolvedStyles,
+                unstyled,
+                size,
+                className,
+                style,
+                variant,
+                disabled,
+                radius,
+                __defaultRightSection: /* @__PURE__ */ jsxRuntime.jsx(
+                  Combobox.Combobox.Chevron,
+                  {
+                    size,
+                    error,
+                    unstyled,
+                    color: chevronColor
+                  }
+                ),
+                __clearSection: clearButton,
+                __clearable: _clearable,
+                __clearSectionMode: clearSectionMode,
+                rightSection,
+                rightSectionPointerEvents: rightSectionPointerEvents || "none",
+                rightSectionWidth,
+                rightSectionProps,
+                leftSection,
+                leftSectionWidth,
+                leftSectionPointerEvents,
+                leftSectionProps,
+                inputContainer,
+                inputWrapperOrder,
+                withAsterisk,
+                labelProps,
+                descriptionProps,
+                errorProps,
+                wrapperProps,
+                description,
+                label,
+                error,
+                withErrorStyles,
+                __stylesApiProps: {
+                  ...props,
+                  rightSectionPointerEvents: rightSectionPointerEvents || "none",
+                  multiline: true
+                },
+                pointer: !searchable,
+                onClick: () => searchable ? combobox.openDropdown() : combobox.toggleDropdown(),
+                "data-expanded": combobox.dropdownOpened || void 0,
+                id: _id,
+                required,
+                mod,
+                attributes,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pill.Pill.Group,
+                  {
+                    attributes,
+                    disabled,
+                    unstyled,
+                    ...getStyles("pillsList", { style: pillsListStyle }),
+                    children: [
+                      pills,
+                      /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.EventsTarget, { autoComplete, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        PillsInput.PillsInput.Field,
+                        {
+                          ...rest,
+                          id: _id,
+                          placeholder,
+                          type: !searchable && !placeholder ? "hidden" : "visible",
+                          ...getStyles("inputField"),
+                          unstyled,
+                          onFocus: (event) => {
+                            onFocus?.(event);
+                            if (openOnFocus && searchable) {
+                              combobox.openDropdown();
+                            }
+                          },
+                          onBlur: (event) => {
+                            onBlur?.(event);
+                            combobox.closeDropdown();
+                            handleSearchChange("");
+                          },
+                          onKeyDown: handleKeyDown,
+                          value: _searchValue,
+                          onChange: (event) => {
+                            handleSearchChange(event.currentTarget.value);
+                            if (searchable) {
+                              combobox.openDropdown();
+                            }
+                          },
+                          disabled,
+                          readOnly: readOnly || !searchable,
+                          pointer: !searchable
+                        }
+                      ) })
+                    ]
+                  }
+                )
+              }
+            ) }),
+            dropdown
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Combobox.Combobox.HiddenInput,
+        {
+          name,
+          valuesDivider: hiddenInputValuesDivider,
+          value: _value,
+          form,
+          disabled,
+          ...hiddenInputProps
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Combobox.Combobox,
+      {
+        store: combobox,
+        __staticSelector: "TreeSelect",
+        classNames: resolvedClassNames,
+        styles: resolvedStyles,
+        unstyled,
+        readOnly,
+        size,
+        attributes,
+        onOptionSubmit: handleOptionSubmit,
+        ...comboboxProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Combobox.Combobox.Target, { targetType: searchable ? "input" : "button", autoComplete, children: /* @__PURE__ */ jsxRuntime.jsx(
+            InputBase.InputBase,
+            {
+              id: _id,
+              __defaultRightSection: /* @__PURE__ */ jsxRuntime.jsx(
+                Combobox.Combobox.Chevron,
+                {
+                  size,
+                  error,
+                  unstyled,
+                  color: chevronColor
+                }
+              ),
+              __clearSection: clearButton,
+              __clearable: _clearable,
+              __clearSectionMode: clearSectionMode,
+              rightSection,
+              rightSectionPointerEvents: rightSectionPointerEvents || "none",
+              ...rest,
+              ...styleProps,
+              size,
+              __staticSelector: "TreeSelect",
+              disabled,
+              readOnly: readOnly || !searchable,
+              value: searchable ? _searchValue : singleDisplayLabel,
+              onChange: (event) => {
+                handleSearchChange(event.currentTarget.value);
+                combobox.openDropdown();
+              },
+              onFocus: (event) => {
+                if (openOnFocus && searchable) {
+                  combobox.openDropdown();
+                }
+                onFocus?.(event);
+              },
+              onBlur: (event) => {
+                if (searchable) {
+                  combobox.closeDropdown();
+                }
+                handleSearchChange(_value ? getNodeLabel(_value) : "");
+                onBlur?.(event);
+              },
+              onClick: (event) => {
+                searchable ? combobox.openDropdown() : combobox.toggleDropdown();
+                onClick?.(event);
+              },
+              onKeyDown: handleKeyDown,
+              classNames: resolvedClassNames,
+              styles: resolvedStyles,
+              unstyled,
+              pointer: !searchable,
+              error,
+              attributes,
+              className,
+              style,
+              variant,
+              radius,
+              leftSection,
+              leftSectionWidth,
+              leftSectionPointerEvents,
+              leftSectionProps,
+              rightSectionWidth,
+              rightSectionProps,
+              inputContainer,
+              inputWrapperOrder,
+              withAsterisk,
+              labelProps,
+              descriptionProps,
+              errorProps,
+              wrapperProps,
+              description,
+              label,
+              withErrorStyles,
+              placeholder,
+              required,
+              mod
+            }
+          ) }),
+          dropdown
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Combobox.Combobox.HiddenInput,
+      {
+        value: _value,
+        name,
+        form,
+        disabled,
+        ...hiddenInputProps
+      }
+    )
+  ] });
+});
+TreeSelect.classes = { ...InputBase.InputBase.classes, ...Combobox.Combobox.classes };
+TreeSelect.displayName = "@mantine/core/TreeSelect";
+
+exports.TreeSelect = TreeSelect;
+//# sourceMappingURL=TreeSelect.cjs.map