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

package/esm/components/TreeSelect/TreeSelect.mjs

@@ -0,0 +1,819 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useCallback, useRef, useEffect } from 'react';
+import { useId, useUncontrolled } from '@mantine/hooks';
+import '../../core/utils/units-converters/rem.mjs';
+import 'clsx';
+import { useResolvedStylesApi } from '../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs';
+import { useStyles } from '../../core/styles-api/use-styles/use-styles.mjs';
+import '../../core/MantineProvider/Mantine.context.mjs';
+import '../../core/MantineProvider/default-theme.mjs';
+import '../../core/MantineProvider/MantineProvider.mjs';
+import '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
+import { useProps } from '../../core/MantineProvider/use-props/use-props.mjs';
+import '../../core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs';
+import { extractStyleProps } from '../../core/Box/style-props/extract-style-props/extract-style-props.mjs';
+import '../../core/Box/Box.mjs';
+import { genericFactory } from '../../core/factory/factory.mjs';
+import '../../core/DirectionProvider/DirectionProvider.mjs';
+import '../Combobox/ComboboxChevron/ComboboxChevron.mjs';
+import { Combobox } from '../Combobox/Combobox.mjs';
+import '../Combobox/ComboboxDropdown/ComboboxDropdown.mjs';
+import '../Combobox/ComboboxOptions/ComboboxOptions.mjs';
+import '../Combobox/ComboboxOption/ComboboxOption.mjs';
+import '../Combobox/ComboboxTarget/ComboboxTarget.mjs';
+import '../Combobox/ComboboxSearch/ComboboxSearch.mjs';
+import '../Combobox/ComboboxEmpty/ComboboxEmpty.mjs';
+import '../Combobox/ComboboxFooter/ComboboxFooter.mjs';
+import '../Combobox/ComboboxHeader/ComboboxHeader.mjs';
+import '../Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs';
+import '../Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.mjs';
+import '../Combobox/ComboboxGroup/ComboboxGroup.mjs';
+import '../Combobox/ComboboxClearButton/ComboboxClearButton.mjs';
+import '../Combobox/ComboboxHiddenInput/ComboboxHiddenInput.mjs';
+import '../Checkbox/Checkbox.mjs';
+import '../Checkbox/CheckboxGroup/CheckboxGroup.mjs';
+import '../Checkbox/CheckboxIndicator/CheckboxIndicator.mjs';
+import '../Checkbox/CheckboxCard/CheckboxCard.mjs';
+import { ScrollArea } from '../ScrollArea/ScrollArea.mjs';
+import { useCombobox } from '../Combobox/use-combobox/use-combobox.mjs';
+import '../Combobox/Combobox.context.mjs';
+import { InputBase } from '../InputBase/InputBase.mjs';
+import { Pill } from '../Pill/Pill.mjs';
+import '../Pill/PillGroup/PillGroup.mjs';
+import { PillsInput } from '../PillsInput/PillsInput.mjs';
+import '../PillsInput/PillsInputField/PillsInputField.mjs';
+import '../PillsInput/PillsInput.context.mjs';
+import '../ScrollArea/ScrollArea.context.mjs';
+import { filterTreeData } from '../Tree/filter-tree-data/filter-tree-data.mjs';
+import { findTreeNode, getChildrenNodesValues } from '../Tree/get-children-nodes-values/get-children-nodes-values.mjs';
+import { isNodeChecked } from '../Tree/is-node-checked/is-node-checked.mjs';
+import { isNodeIndeterminate } from '../Tree/is-node-indeterminate/is-node-indeterminate.mjs';
+import { getTreeExpandedState } from '../Tree/use-tree.mjs';
+import { flattenTreeSelectData } from './flatten-tree-select-data.mjs';
+import { expandToLeafChecked, checkedToValue } from './get-checked-values-by-strategy.mjs';
+import { TreeSelectOption } from './TreeSelectOption.mjs';
+import classes from './TreeSelect.module.css.mjs';
+
+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 = genericFactory((_props) => {
+  const props = 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 = useId(id);
+  const combobox = useCombobox({
+    opened: dropdownOpened,
+    defaultOpened: defaultDropdownOpened,
+    onDropdownOpen: () => {
+      onDropdownOpen?.();
+      combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
+    },
+    onDropdownClose: () => {
+      onDropdownClose?.();
+      combobox.resetSelectedOption();
+    }
+  });
+  const initialExpanded = useMemo(() => {
+    if (defaultExpandAll) {
+      return getTreeExpandedState(data, "*");
+    }
+    if (defaultExpandedValues) {
+      return getTreeExpandedState(data, defaultExpandedValues);
+    }
+    return getTreeExpandedState(data, []);
+  }, []);
+  const expandedToRecord = useCallback(
+    (values) => {
+      if (!values) {
+        return void 0;
+      }
+      return getTreeExpandedState(data, values);
+    },
+    [data]
+  );
+  const [_expandedState, setExpandedState] = useUncontrolled({
+    value: expandedToRecord(expandedValues),
+    defaultValue: initialExpanded,
+    finalValue: {},
+    onChange: (val) => {
+      if (onExpandedChange) {
+        onExpandedChange(
+          Object.entries(val).filter(([, v]) => v).map(([k]) => k)
+        );
+      }
+    }
+  });
+  const toggleExpand = useCallback(
+    (nodeValue) => {
+      setExpandedState({ ..._expandedState, [nodeValue]: !_expandedState[nodeValue] });
+    },
+    [_expandedState]
+  );
+  const initialSearchValue = useMemo(() => {
+    if (mode !== "single" || !defaultValue) {
+      return "";
+    }
+    const node = findTreeNode(defaultValue, data);
+    return node ? typeof node.label === "string" ? node.label : "" : "";
+  }, []);
+  const [_searchValue, setSearchValue] = useUncontrolled({
+    value: searchValue,
+    defaultValue: defaultSearchValue,
+    finalValue: initialSearchValue,
+    onChange: onSearchChange
+  });
+  const handleSearchChange = (val) => {
+    setSearchValue(val);
+    combobox.resetSelectedOption();
+  };
+  const [_value, setValue] = useUncontrolled({
+    value,
+    defaultValue,
+    finalValue: isMulti ? [] : null,
+    onChange
+  });
+  const internalChecked = useMemo(() => {
+    if (!isCheckbox || !_value || !Array.isArray(_value)) {
+      return [];
+    }
+    if (checkStrictly) {
+      return _value;
+    }
+    return expandToLeafChecked(_value, data);
+  }, [isCheckbox, _value, data, checkStrictly]);
+  const filteredData = useMemo(() => {
+    if (!searchable || !_searchValue) {
+      return data;
+    }
+    if (mode === "single" && _value) {
+      const node = findTreeNode(_value, data);
+      if (node && _searchValue === (typeof node.label === "string" ? node.label : "")) {
+        return data;
+      }
+    }
+    return filterTreeData(data, _searchValue, filter);
+  }, [data, _searchValue, filter, searchable, mode, _value]);
+  const expandedForRender = 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 = useMemo(
+    () => flattenTreeSelectData(filteredData, expandedForRender),
+    [filteredData, expandedForRender]
+  );
+  const flatNodesRef = useRef(flatNodes);
+  flatNodesRef.current = flatNodes;
+  const nodeLookup = 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({
+    name: "TreeSelect",
+    classes: {},
+    props,
+    classNames,
+    styles,
+    unstyled,
+    attributes
+  });
+  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
+    props,
+    styles,
+    classNames
+  });
+  const {
+    styleProps,
+    rest: { type, autoComplete, ...rest }
+  } = extractStyleProps(others);
+  const handleOptionSubmit = (val) => {
+    if (mode === "single") {
+      if (expandOnClick) {
+        const node = 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 = 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(val, data, internalChecked);
+      let newInternalChecked;
+      if (checkStrictly) {
+        newInternalChecked = nodeChecked ? internalChecked.filter((v) => v !== val) : [...internalChecked, val];
+      } else {
+        const childLeaves = getChildrenNodesValues(val, data);
+        if (nodeChecked) {
+          newInternalChecked = internalChecked.filter((v) => !childLeaves.includes(v));
+        } else {
+          newInternalChecked = [.../* @__PURE__ */ new Set([...internalChecked, ...childLeaves])];
+        }
+      }
+      const newValue = checkedToValue(newInternalChecked, data, checkedStrategy);
+      if (!nodeChecked && newValue.length > (maxValues ?? Infinity)) {
+        return;
+      }
+      setValue(newValue);
+      if (expandOnClick) {
+        const node = 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);
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    if (mode !== "single" || !searchable) {
+      return;
+    }
+    if (value === null) {
+      handleSearchChange("");
+    } else if (typeof value === "string") {
+      handleSearchChange(getNodeLabel(value));
+    }
+  }, [value]);
+  const prevDropdownOpenedRef = useRef(false);
+  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__ */ jsx(
+    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 = useMemo(() => {
+    if (mode !== "single" || !_value) {
+      return "";
+    }
+    return getNodeLabel(_value);
+  }, [mode, _value, nodeLookup]);
+  const displayValues = 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__ */ jsx(
+    Pill,
+    {
+      withRemoveButton: !readOnly,
+      onRemove: () => {
+        if (isCheckbox) {
+          const childLeaves = checkStrictly ? [item] : getChildrenNodesValues(item, data);
+          const newInternal = internalChecked.filter((v) => !childLeaves.includes(v));
+          setValue(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__ */ jsx(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(flatNode.node.value, data, internalChecked) : false;
+    const nodeIndeterminate = isCheckbox && !checkStrictly ? isNodeIndeterminate(flatNode.node.value, data, internalChecked) : false;
+    return /* @__PURE__ */ jsx(
+      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__ */ jsx(Combobox.Dropdown, { hidden: readOnly || disabled, children: /* @__PURE__ */ jsxs(Combobox.Options, { className: classes.optionsWrapper, children: [
+    /* @__PURE__ */ jsx(
+      ScrollArea.Autosize,
+      {
+        mah: maxDropdownHeight ?? 220,
+        type: "scroll",
+        scrollbarSize: "var(--combobox-padding)",
+        offsetScrollbars: "y",
+        ...scrollAreaProps,
+        children: options
+      }
+    ),
+    isEmpty && nothingFoundMessage && /* @__PURE__ */ jsx(Combobox.Empty, { children: nothingFoundMessage })
+  ] }) });
+  if (isMulti) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          store: combobox,
+          classNames: resolvedClassNames,
+          styles: resolvedStyles,
+          unstyled,
+          size,
+          readOnly,
+          __staticSelector: "TreeSelect",
+          attributes,
+          onOptionSubmit: handleOptionSubmit,
+          ...comboboxProps,
+          children: [
+            /* @__PURE__ */ jsx(Combobox.DropdownTarget, { children: /* @__PURE__ */ jsx(
+              PillsInput,
+              {
+                ...styleProps,
+                __staticSelector: "TreeSelect",
+                classNames: resolvedClassNames,
+                styles: resolvedStyles,
+                unstyled,
+                size,
+                className,
+                style,
+                variant,
+                disabled,
+                radius,
+                __defaultRightSection: /* @__PURE__ */ jsx(
+                  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__ */ jsxs(
+                  Pill.Group,
+                  {
+                    attributes,
+                    disabled,
+                    unstyled,
+                    ...getStyles("pillsList", { style: pillsListStyle }),
+                    children: [
+                      pills,
+                      /* @__PURE__ */ jsx(Combobox.EventsTarget, { autoComplete, children: /* @__PURE__ */ jsx(
+                        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__ */ jsx(
+        Combobox.HiddenInput,
+        {
+          name,
+          valuesDivider: hiddenInputValuesDivider,
+          value: _value,
+          form,
+          disabled,
+          ...hiddenInputProps
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Combobox,
+      {
+        store: combobox,
+        __staticSelector: "TreeSelect",
+        classNames: resolvedClassNames,
+        styles: resolvedStyles,
+        unstyled,
+        readOnly,
+        size,
+        attributes,
+        onOptionSubmit: handleOptionSubmit,
+        ...comboboxProps,
+        children: [
+          /* @__PURE__ */ jsx(Combobox.Target, { targetType: searchable ? "input" : "button", autoComplete, children: /* @__PURE__ */ jsx(
+            InputBase,
+            {
+              id: _id,
+              __defaultRightSection: /* @__PURE__ */ jsx(
+                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__ */ jsx(
+      Combobox.HiddenInput,
+      {
+        value: _value,
+        name,
+        form,
+        disabled,
+        ...hiddenInputProps
+      }
+    )
+  ] });
+});
+TreeSelect.classes = { ...InputBase.classes, ...Combobox.classes };
+TreeSelect.displayName = "@mantine/core/TreeSelect";
+
+export { TreeSelect };
+//# sourceMappingURL=TreeSelect.mjs.map