@allxsmith/bestax-bulma 5.61.0 → 5.62.0

package/dist/index.cjs

@@ -10937,6 +10937,30 @@ function RevealImpl(revealProps) {
 const Reveal = RevealImpl;
 Reveal.displayName = 'Reveal';
 
+// INTERNAL: deliberately not exported from src/index.ts.
+/**
+ * A value the caller holds, or one this hook holds when the caller doesn't:
+ * the `x` / `defaultX` pair of a component's props. The caller holds it
+ * whenever `controlled` isn't `undefined`, so `null` is a held value. The
+ * setter changes only the value held here, so a held one changes when the
+ * caller passes the new value, and it reports nothing: the component calls
+ * its own `onXChange`.
+ *
+ * @function useControlled
+ * @param controlled - The caller's value, or `undefined` to hold one here.
+ * @param initial - The value held here to begin with.
+ * @returns The current value, and the setter for the one held here.
+ */
+function useControlled(controlled, initial) {
+    const [own, setOwn] = React.useState(initial);
+    const isControlled = controlled !== undefined;
+    const set = (next) => {
+        if (!isControlled)
+            setOwn(next);
+    };
+    return [isControlled ? controlled : own, set];
+}
+
 // INTERNAL: deliberately not exported from src/index.ts.
 /** The keys and clicks of both checkbox modes, which differ only in what a check reaches. */
 const CHECKBOX_ACTIONS = {
@@ -11010,6 +11034,14 @@ function pathOf(element, { values }) {
     }
     return path;
 }
+/**
+ * The values of the items a tree hides while they stay in it, as TreeSelect's
+ * search hides the items that don't match. A hidden item renders as one under
+ * a closed parent does: nothing on the page, and in a `checkbox` tree it and
+ * its children still register, so a check still reaches them. Internal, for
+ * the components that put a TreeView inside them.
+ */
+const TreeViewHiddenContext = React.createContext(new Set());
 /**
  * Every known item's check state, by the rules in #1096:
  *
@@ -11085,16 +11117,6 @@ function toggledList(records, list, value) {
         ...list.filter(item => !records.has(item)),
     ];
 }
-/** A value the caller holds, or one this hook holds when the caller doesn't. */
-function useControlled(controlled, initial) {
-    const [own, setOwn] = React.useState(initial);
-    const isControlled = controlled !== undefined;
-    const set = (next) => {
-        if (!isControlled)
-            setOwn(next);
-    };
-    return [isControlled ? controlled : own, set];
-}
 /**
  * The list with `value` added at the end, or, when it's `present`, with
  * every copy of it taken out. Everything else stays as it was, in its order.
@@ -11362,12 +11384,15 @@ function useTreeView(options) {
                     press(item, actions.space);
                 break;
             case '*': {
+                // The siblings on the page: not the ones a component around the
+                // tree hides, which stay registered.
                 const closed = [];
                 registry.records.forEach((record, value) => {
                     if (record.parent === item.parent &&
                         record.isParent &&
                         !record.disabled &&
-                        !expanded.includes(value)) {
+                        !expanded.includes(value) &&
+                        registry.elements.has(value)) {
                         closed.push(value);
                     }
                 });
@@ -11844,7 +11869,7 @@ const sayLoaded = (name) => `${name} loaded`;
 const TOP = { path: [], hidden: false };
 const BranchContext = React.createContext(TOP);
 /** The box's input lets the row's click toggle it, so a change on its own does nothing. */
-const ignoreChange = () => { };
+const ignoreChange$1 = () => { };
 /** Whether an `icon` was given something to render. */
 const isGiven$1 = (node) => node !== undefined &&
     node !== null &&
@@ -11952,6 +11977,10 @@ const TreeViewRoot = React.forwardRef(function TreeView({ children, selectionMod
 const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon, children, hasChildren = false, isLoading = false, loadError, onRetry, disabled = false, className, onClick, onKeyDown, onFocus, onBlur, ...props }, ref) {
     const tree = React.useContext(TreeViewContext);
     const branch = React.useContext(BranchContext);
+    // Hidden by a component around the tree, such as TreeSelect's search,
+    // it renders as an item under a closed parent does.
+    const hiddenItems = React.useContext(TreeViewHiddenContext);
+    const hiddenHere = branch.hidden || hiddenItems.has(value);
     // Also the item's key in the live region.
     const labelId = React.useId();
     const hasItems = React.Children.toArray(children).length > 0;
@@ -11959,7 +11988,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     const open = isParent && !!tree?.isOpen(value);
     const parent = branch.path[branch.path.length - 1] ?? null;
     // The row at the end of its group, while it's open and on the page.
-    const shown = open && !branch.hidden;
+    const shown = open && !hiddenHere;
     const status = !shown
         ? null
         : isLoading
@@ -12024,8 +12053,8 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     const toggleRef = React.useRef(null);
     const childBranch = React.useMemo(() => ({
         path: [...branch.path, value],
-        hidden: branch.hidden || !open,
-    }), [branch, value, open]);
+        hidden: hiddenHere || !open,
+    }), [branch, value, hiddenHere, open]);
     const { selected, checked } = tree?.stateOf(value, branch.path, disabled) ?? {};
     const rowClass = usePrefixedClassNames('tree-view-row', {
         'is-selected': selected,
@@ -12034,10 +12063,10 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
     if (!tree)
         return null;
     // While it's open the children render in its group. In a `checkbox` tree
-    // they render while it's closed too, drawing nothing, so a check knows
-    // what's under it.
-    const items = (open || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
-    if (branch.hidden)
+    // they render while it's closed or hidden too, drawing nothing, so a
+    // check knows what's under it.
+    const items = (shown || tree.rendersClosed) && (jsxRuntime.jsx(BranchContext.Provider, { value: childBranch, children: children }));
+    if (hiddenHere)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: items });
     const info = { value, parent, disabled, isParent, open };
     // A position the caller gives wins, for a set the page holds only part of.
@@ -12073,7 +12102,7 @@ const TreeViewItem = React.forwardRef(function TreeViewItem({ value, label, icon
                             if (!(event.target instanceof HTMLInputElement)) {
                                 event.preventDefault();
                             }
-                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange }) })), isGiven$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
+                        }, children: jsxRuntime.jsx(Checkbox, { tabIndex: -1, checked: checked === true, indeterminate: checked === 'mixed', disabled: disabled, onChange: ignoreChange$1 }) })), isGiven$1(icon) && (jsxRuntime.jsx("span", { className: iconClass, "aria-hidden": "true", children: typeof icon === 'string' ? jsxRuntime.jsx(Icon, { name: icon }) : icon })), jsxRuntime.jsx("span", { className: labelClass, id: labelId, ref: labelRef, children: label })] }), open && (hasItems || status) ? (jsxRuntime.jsxs("ul", { className: groupClass, role: "group", children: [items, status && (jsxRuntime.jsx(StatusRow, { kind: status, parent: value, level: branch.path.length + 2, message: loadError, onRetry: onRetry, labelRef: statusLabelRef }))] })) : (items)] }));
 });
 TreeViewItem.displayName = 'TreeView.Item';
 /**
@@ -12342,7 +12371,7 @@ ScrollArea.displayName = 'ScrollArea';
 // INTERNAL: deliberately not exported from src/index.ts.
 /** An IME is composing, so the key belongs to it (`keyCode` 229 is Safari's word for it). */
 const isComposing$2 = (event) => event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
-const sameValues = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
+const sameValues$1 = (a, b) => a.length === b.length && a.every((value, i) => value === b[i]);
 /**
  * The keys, the open state, the highlight and the ARIA of an editable
  * combobox whose list the app renders and filters (#1083). DOM focus stays
@@ -12444,7 +12473,7 @@ function useComboboxEngine({ open: controlledOpen, defaultOpen, onOpenChange, on
         }
         const options = shownOptions();
         const values = options.map(option => option.value);
-        const changed = !sameValues(values, shownValuesRef.current);
+        const changed = !sameValues$1(values, shownValuesRef.current);
         shownValuesRef.current = values;
         setListShown(values.length > 0);
         const landing = landingRef.current ?? (opened ? 'open' : null);
@@ -18862,6 +18891,25 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
 });
 Autocomplete.displayName = 'Autocomplete';
 
+const everyValue = () => true;
+/**
+ * The values of a field holding several, as Bulma tags under it, each with a
+ * `Delete` that takes its value off. Nothing while there are none.
+ */
+function ValueTags({ values, ids, labelFor, disabled, ariaCloseLabel, onRemove, removable = everyValue, }) {
+    if (values.length === 0)
+        return null;
+    return (jsxRuntime.jsx(Tags, { mt: "2", children: values.map((value, index) => (jsxRuntime.jsxs(Tag, { children: [jsxRuntime.jsx("span", { id: ids[index], children: labelFor(value) }), !disabled && removable(value) && (jsxRuntime.jsx(Delete, { size: "small", ariaLabel: ariaCloseLabel || `Remove ${labelFor(value)}`, "aria-describedby": ariaCloseLabel ? ids[index] : undefined, onClick: () => onRemove(value) }))] }, value))) }));
+}
+/** The ids `ValueTags` gives its labels, built from one id of the field's. */
+const tagIds = (base, values) => values.map((_, index) => `${base}-${index}`);
+/** A hidden input for each value, so a form posts them under `name`. */
+function HiddenValues({ name, values, form, disabled, }) {
+    if (!name)
+        return null;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: values.map(value => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: value, form: form, disabled: disabled }, value))) }));
+}
+
 const validComboboxSizes = ['small', 'medium', 'large'];
 // What the status region announces: the `Combobox.Empty` content, as the one
 // item it's handed while that content is on screen because of the user's
@@ -19254,7 +19302,7 @@ ComboboxEmpty.displayName = 'ComboboxEmpty';
 const toItem = (entry) => typeof entry === 'string' ? { value: entry, label: entry } : entry;
 const labelOf = (item) => item.label ?? item.value;
 /** One value or several, as a list: one value is a list of none or one. */
-const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+const asList$1 = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
 /**
  * The Combobox given `data`. It renders the parts itself, filters the items
  * by label as the user types, and keeps the value, so a pick goes through
@@ -19286,9 +19334,9 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
         return item ? labelOf(item) : picked;
     };
     const controlled = value !== undefined;
-    const [ownValue, setOwnValue] = React.useState(() => asList(defaultValue));
+    const [ownValue, setOwnValue] = React.useState(() => asList$1(defaultValue));
     const matchText = useLocaleMatcher();
-    const picked = controlled ? asList(value) : ownValue;
+    const picked = controlled ? asList$1(value) : ownValue;
     const change = (next) => {
         if (!controlled)
             setOwnValue(next);
@@ -19340,7 +19388,7 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
     };
     // The picks, for the field's description, since its text is the search.
     const tagsId = React.useId();
-    const tagIds = picked.map((_, index) => `${tagsId}-${index}`);
+    const ids = tagIds(tagsId, picked);
     // Each group where `data` first names it, and the items with none
     // together where the first of them is.
     const sections = new Map();
@@ -19354,14 +19402,11 @@ const ComboboxFromData = React.forwardRef((props, ref) => {
             if (!next)
                 settle();
             onOpenChange?.(next);
-        }, below: multiple
-            ? picked.length > 0 && (jsxRuntime.jsx(Tags, { mt: "2", children: picked.map((v, index) => (jsxRuntime.jsxs(Tag, { children: [jsxRuntime.jsx("span", { id: tagIds[index], children: labelFor(v) }), !disabled && (jsxRuntime.jsx(Delete, { size: "small", ariaLabel: ariaCloseLabel || `Remove ${labelFor(v)}`, "aria-describedby": ariaCloseLabel ? tagIds[index] : undefined, onClick: () => remove(v) }))] }, v))) }))
-            : undefined, children: [jsxRuntime.jsx(ComboboxInput, { ...named, ref: inputRef, id: id, disabled: disabled, 
+        }, below: multiple ? (jsxRuntime.jsx(ValueTags, { values: picked, ids: ids, labelFor: labelFor, disabled: disabled, ariaCloseLabel: ariaCloseLabel, onRemove: remove })) : undefined, children: [jsxRuntime.jsx(ComboboxInput, { ...named, ref: inputRef, id: id, disabled: disabled, 
                 // The browser's check reads the field's text, and only a pick
                 // fills it for good, so it's required until there is one.
-                required: required && picked.length === 0, "aria-required": required || undefined, form: form, "aria-describedby": multiple && picked.length > 0 ? tagIds.join(' ') : undefined, placeholder: placeholder, value: query ??
-                    (multiple || picked.length === 0 ? '' : labelFor(picked[0])), onChange: event => setQuery(event.target.value), onBlur: settle }), inline ? list : jsxRuntime.jsx(ComboboxMenu, { children: list }), name &&
-                (multiple ? picked : [picked[0] ?? '']).map(v => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: v, form: form, disabled: disabled }, v)))] }));
+                required: required && picked.length === 0, "aria-required": required || undefined, form: form, "aria-describedby": multiple && picked.length > 0 ? ids.join(' ') : undefined, placeholder: placeholder, value: query ??
+                    (multiple || picked.length === 0 ? '' : labelFor(picked[0])), onChange: event => setQuery(event.target.value), onBlur: settle }), inline ? list : jsxRuntime.jsx(ComboboxMenu, { children: list }), jsxRuntime.jsx(HiddenValues, { name: name, values: multiple ? picked : [picked[0] ?? ''], form: form, disabled: disabled })] }));
 });
 ComboboxFromData.displayName = 'ComboboxFromData';
 /**
@@ -19434,138 +19479,1033 @@ const Combobox = withSubComponents(ComboboxRoot, {
     Empty: ComboboxEmpty,
 }, 'Combobox');
 
-// An IME that's composing owns every key: Enter confirms what it composed,
-// the arrows move through its candidates, and Escape cancels it. Safari can
-// say so with `keyCode` 229 rather than `isComposing` (#1102).
-const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+// INTERNAL: deliberately not exported from src/index.ts. Walking the nodes a
+// TreeSelect takes as `data`, so a picker can name, check and search a tree
+// while it isn't on the page.
+/**
+ * Every node by its value, in the order the tree reads from top to bottom.
+ * Values are meant to be unique, and the first node with a value wins.
+ */
+function indexTree(data) {
+    const index = new Map();
+    const walk = (nodes, path) => {
+        for (const node of nodes) {
+            if (!index.has(node.value))
+                index.set(node.value, { node, path });
+            if (node.children)
+                walk(node.children, [...path, node.value]);
+        }
+    };
+    walk(data, []);
+    return index;
+}
+/** What a node is called: its `label`, or its `value` when that's empty. */
+const nodeLabel = (node) => node.label || node.value;
+/** The nodes under a node, none when it has no `children`. */
+const childNodes = (node) => node.children ?? [];
+/** Whether a node is a parent: it has children, or `hasChildren` says it will. */
+const isParentNode = (node) => childNodes(node).length > 0 || !!node.hasChildren;
+/**
+ * The records TreeView's check rules read, built from the nodes rather than
+ * from the items on the page, so the checked list can be worked out while
+ * the tree isn't there.
+ */
+function checkRecords(index) {
+    const records = new Map();
+    index.forEach(({ node, path }, value) => records.set(value, {
+        parent: path[path.length - 1] ?? null,
+        disabled: !!node.disabled,
+        isParent: isParentNode(node),
+    }));
+    return records;
+}
 /**
- * The `Taginput` component provides a tag/chip input field for managing multiple tags.
- *
- * @function
- * @param {TaginputProps} props - Props for the Taginput component.
- * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
- * @returns {JSX.Element} The rendered taginput component.
- *
- * @example
- * // Basic usage
- * <Taginput
- *   placeholder="Add a tag..."
- *   onChange={(tags) => console.log(tags)}
- * />
- *
- * @example
- * // With autocomplete
- * <Taginput
- *   data={['React', 'Vue', 'Angular', 'Svelte']}
- *   allowNew={false}
- *   placeholder="Select frameworks..."
- * />
- */
-const Taginput = React.forwardRef(({ 
-// Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
-    const disabled = useFieldsetDisabled(disabledProp);
-    const insideField = useInsideField();
-    const insideControl = useInsideControl();
-    const ownField = rendersOwnField('Taginput', {
-        insideField,
-        insideControl,
-        label,
-        message,
-        horizontal,
-        fieldClassName,
-    });
-    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
-    const { classPrefix } = useConfig();
-    const defaultIconLibrary = useIconLibrary();
-    const formatNumber = useScopedNumberFormat();
-    const matchText = useLocaleMatcher();
-    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
-    const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
-    const containerRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
-    const [internalTags, setInternalTags] = React.useState(defaultValue);
-    const [inputValue, setInputValue] = React.useState('');
-    const [isActive, setIsActive] = React.useState(false);
-    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-    const baseId = React.useId();
-    const listboxId = `${baseId}-listbox`;
-    const counterId = `${baseId}-counter`;
-    // With `data` the input offers suggestions, so it's a combobox, even
-    // while none match. Without it there's never a list, so it stays a plain
-    // text field.
-    const hasSuggestions = dataProp !== undefined;
-    const data = dataProp ?? [];
-    // Use controlled or internal tags
-    const tags = controlledValue !== undefined ? controlledValue : internalTags;
-    const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
-    // The suggestion list points `aria-labelledby` at the label that names
-    // the input, so with suggestions it needs that label's id.
-    const { controlId, fieldLabelProps, labelled, labelId: listLabelId, } = useAutoLabelId({
-        label,
-        id,
-        labelProps,
-        rendersLabel: ownField,
-        needsLabelId: hasSuggestions,
+ * The checked list a `checkedStrategy` reports for the items `listed` checks
+ * by TreeView's rules, in the tree's order. `all` is every checked item;
+ * `child` the checked items with no enabled item under them; `parent` the
+ * checked items whose parent isn't. A disabled item is checked by its own
+ * value only, so a checked one is in every list. Values no node has are
+ * kept, at the end. Passed back in, each list checks the same items.
+ */
+function checkedByStrategy(records, listed, strategy) {
+    const { states, ends } = readChecks(records, new Set(listed));
+    const isEnd = new Set(ends);
+    const on = (value) => value !== null && states.get(value) === true;
+    const kept = [];
+    records.forEach(({ parent, disabled }, value) => {
+        if (!on(value))
+            return;
+        if (strategy === 'all' ||
+            disabled ||
+            (strategy === 'child' ? isEnd.has(value) : !on(parent))) {
+            kept.push(value);
+        }
     });
-    // Get display value from tag
-    const getDisplayValue = (tag) => {
-        if (typeof tag === 'string')
-            return tag;
-        const fieldValue = tag[field];
-        if (typeof fieldValue === 'string')
-            return fieldValue;
-        return tag.value || '';
+    const unknown = new Set(listed.filter(value => !records.has(value)));
+    return [...kept, ...unknown];
+}
+/**
+ * What a search shows of a tree: the nodes that match, the nodes above them,
+ * so the results stay a tree, and the nodes under them, so a matching branch
+ * can still be opened.
+ */
+function searchTree(data, matches) {
+    const hidden = new Set();
+    const open = [];
+    // Whether the nodes, or any node under them, match. `above` is the path
+    // down to them.
+    const walk = (nodes, underMatch, above) => {
+        let found = false;
+        for (const node of nodes) {
+            const path = [...above, node];
+            const self = matches(node, path);
+            const below = walk(childNodes(node), underMatch || self, path);
+            if (below)
+                open.push(node.value);
+            if (!underMatch && !self && !below)
+                hidden.add(node.value);
+            found = found || self || below;
+        }
+        return found;
     };
-    // Filter autocomplete data
-    const filteredData = data.filter(item => {
-        const displayValue = item.toLowerCase();
-        const matchesInput = matchText
-            ? matchText(item, inputValue)
-            : displayValue.includes(inputValue.toLowerCase());
-        const notAlreadyAdded = allowDuplicates ||
-            !tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue);
-        const hasInput = inputValue || (openOnFocus && isActive);
-        return matchesInput && notAlreadyAdded && hasInput;
+    return { hidden, open, found: walk(data, false, []) };
+}
+
+const isBrowser = typeof window !== 'undefined';
+const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, matchWidth = false, followContent = false, }) => {
+    const panelRef = React.useRef(null);
+    const resolveContainer = usePortalContainer();
+    // Read as the trap turns on, once the panel's content has rendered.
+    const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
+        ? undefined
+        : {
+            get current() {
+                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
+            },
+        }, [initialFocusSelector]);
+    const resolved = useAnchoredPosition(anchorRef, panelRef, {
+        active: isOpen,
+        position,
+        fixed: appendToBody,
+        // The gap comes from `--bulma-picker-popover-offset` as a margin, in place
+        // or portaled, so the coordinates leave it out and `auto` reads it off
+        // the panel.
+        offset: 0,
+        styledGap: marginGap,
+        matchWidth,
+        followContent,
     });
-    // At the tag limit the list stays closed, since it could only offer tags
-    // past the limit (#1087).
-    const listOpen = isActive && !isMaxReached && filteredData.length > 0;
-    // keepFirst: auto-highlight first item when dropdown opens
+    // Read when a press lands outside or a key arrives, so both listeners stay
+    // put while `onClose` changes identity, as an inline one does on every
+    // render of the field.
+    const onCloseRef = useLatestRef(onClose);
     React.useEffect(() => {
-        if (keepFirst && isActive && filteredData.length > 0) {
-            setHighlightedIndex(0);
-        }
-    }, [keepFirst, isActive, filteredData.length]);
-    // Update tags
-    const updateTags = React.useCallback((newTags) => {
-        if (controlledValue === undefined) {
-            setInternalTags(newTags);
+        if (!isOpen || !closeOnClickOutside || !isBrowser)
+            return undefined;
+        // Listen on `pointerdown` (rather than `mousedown`) so touch starts
+        // outside the popover dismiss it on mobile — including swipe-from-outside
+        // gestures, where the synthetic mouse event would otherwise lag a few
+        // hundred ms behind the actual touch.
+        const handler = (e) => {
+            const path = e.composedPath();
+            if (panelRef.current && path.includes(panelRef.current))
+                return;
+            if (anchorRef.current && path.includes(anchorRef.current))
+                return;
+            onCloseRef.current();
+        };
+        document.addEventListener('pointerdown', handler);
+        return () => document.removeEventListener('pointerdown', handler);
+    }, [isOpen, closeOnClickOutside, anchorRef, onCloseRef]);
+    // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
+    // which the calendar and the time wheels inside leave to it. Escape closes
+    // it from anywhere, but the key is only the picker's when it was pressed in
+    // the panel or the field: then it's marked used, so a Modal or Sidebar
+    // around the picker stays open. From anywhere else, such as a dialog opened
+    // over the picker, the key goes on to whatever has focus.
+    React.useEffect(() => {
+        if (!isOpen || !closeOnEscape || !isBrowser)
+            return undefined;
+        const handler = (e) => {
+            if (e.key === 'Escape') {
+                if (isEventInside(e, panelRef.current) ||
+                    isEventInside(e, anchorRef.current)) {
+                    e.preventDefault();
+                }
+                onCloseRef.current();
+            }
+            else if (e.altKey && e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                onCloseRef.current();
+            }
+        };
+        document.addEventListener('keydown', handler);
+        return () => document.removeEventListener('keydown', handler);
+    }, [isOpen, closeOnEscape, anchorRef, onCloseRef]);
+    useFocusTrap(panelRef, {
+        active: isOpen && trapFocus,
+        initialFocusRef,
+        restoreFocus: restoreFocusRef ?? true,
+    });
+    const panelClass = usePrefixedClassNames('picker-popover', {
+        'is-active': isOpen,
+        [`is-${resolved.position}`]: true,
+        'is-portal': appendToBody,
+        'has-anchor-width': matchWidth,
+    });
+    if (!isOpen)
+        return null;
+    const style = appendToBody
+        ? {
+            position: 'fixed',
+            top: resolved.top,
+            left: resolved.left,
+            minWidth: resolved.minWidth,
         }
-        onChange?.(newTags);
-    }, [controlledValue, onChange]);
-    // Add tags from text typed, pasted or picked from the list. Each one is
-    // checked against the tags before it, this batch's included, so a paste
-    // of several adds them all in one change (#1101). Only `createTag` turns
-    // text into an object.
-    const addTags = React.useCallback((values) => {
-        if (disabled || readonly)
-            return;
-        let next = tags;
-        const added = [];
-        for (const value of values) {
-            // A paste can bring more tags than there's room for, and at the
-            // limit the read-only input still takes Enter.
-            if (maxTags !== undefined && next.length >= maxTags)
-                break;
-            const displayValue = value.trim();
-            if (!displayValue)
-                continue;
-            const lower = displayValue.toLowerCase();
-            // Duplicates, data and the dropdown filter all compare
-            // case-insensitively.
-            if (!allowDuplicates &&
+        : {};
+    const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, 
+        // An Escape pressed in the panel is the picker's, and the listener
+        // above claims it. A Dropdown menu around the picker hears Escape in a
+        // React handler, which runs before that listener, so the panel claims
+        // it here too, where React gets to it first.
+        onKeyDown: e => {
+            if (closeOnEscape && e.key === 'Escape')
+                e.preventDefault();
+        }, children: children }));
+    if (appendToBody && isBrowser) {
+        const target = resolveContainer();
+        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
+    }
+    return panel;
+};
+PickerPopover.displayName = 'PickerPopover';
+
+/**
+ * Whether a key is Alt+ArrowDown or Alt+ArrowUp, which open and close a
+ * picker's popover. The calendar and the time wheels leave both to it rather
+ * than reading them as plain arrows.
+ */
+const isPopoverToggleKey = (e) => e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp');
+const DEFAULT_PICKER_LABELS = {
+    prevMonth: 'Previous month',
+    nextMonth: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
+    chooseDate: 'Choose date',
+    chooseMonth: 'Choose month',
+    chooseYear: 'Choose year',
+    rangeStart: 'Start date',
+    rangeEnd: 'End date',
+    rangePreviewEnd: 'Choose as end date',
+    rangeSeparator: '–',
+    chooseDateRange: 'Choose date range',
+    hours: 'hours',
+    minutes: 'minutes',
+    seconds: 'seconds',
+    ampm: 'AM/PM',
+    increaseHours: 'Increase hours',
+    decreaseHours: 'Decrease hours',
+    increaseMinutes: 'Increase minutes',
+    decreaseMinutes: 'Decrease minutes',
+    increaseSeconds: 'Increase seconds',
+    decreaseSeconds: 'Decrease seconds',
+    toggleAmPm: 'Toggle AM/PM',
+    chooseTime: 'Choose time',
+    chooseDateTime: 'Choose date and time',
+    now: 'Now',
+    today: 'Today',
+    clear: 'Clear',
+    cancel: 'Cancel',
+    ok: 'OK',
+    reset: 'Reset',
+    done: 'Done',
+    time: 'Time',
+};
+/**
+ * Merge user-supplied label overrides with the defaults. A key set to
+ * `undefined` keeps its default, so a locale table that is missing a string
+ * still names its control instead of leaving it with no accessible name.
+ */
+const mergeLabels = (overrides) => {
+    const merged = { ...DEFAULT_PICKER_LABELS };
+    for (const [key, value] of Object.entries(overrides ?? {})) {
+        if (value !== undefined)
+            merged[key] = value;
+    }
+    return merged;
+};
+
+/**
+ * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
+ * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
+ */
+function usePickerLocale(own) {
+    const scope = useLocaleScope();
+    return own || scope?.locale;
+}
+const NO_ROOT_ATTRS = {};
+/**
+ * A picker's language and direction inside a `LocaleProvider`, by the rule a
+ * nested provider follows: its `lang` is its own `locale`, else the
+ * provider's, and its `dir` is the `dir` passed to it, else its own locale's
+ * direction when it has one, else the provider's. Outside a provider it
+ * changes nothing. A `locale` `Intl` refuses counts as none here, since the
+ * picker's own formatting reports it.
+ */
+function usePickerLocaleScope(ownLocale, ownDir) {
+    const scope = useLocaleScope();
+    return React.useMemo(() => {
+        if (!scope)
+            return { rootAttrs: NO_ROOT_ATTRS };
+        let own;
+        try {
+            own = canonicalLocale(ownLocale);
+        }
+        catch {
+            own = undefined;
+        }
+        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
+        return {
+            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
+            panel: { locale: own || scope.locale, dir },
+        };
+    }, [scope, ownLocale, ownDir]);
+}
+/**
+ * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
+ * does only for a full week of seven.
+ */
+function hasOwnDayNames(dayNames) {
+    return dayNames !== undefined && dayNames.length === 7;
+}
+/**
+ * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
+ * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
+ * Outside a provider it stays Sunday whatever the locale, as it always has,
+ * and so does a picker inside one with no locale from either, since the
+ * runtime's own differs between the server and the browser.
+ *
+ * It also stays Sunday for a picker that brings its own `dayNames`. The
+ * calendar shows those exactly as given, in calendar order, and before the
+ * provider an unset `firstDayOfWeek` was always Sunday, so names written
+ * Sunday first would sit a day or more off their columns if the week moved
+ * under them.
+ */
+function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
+    const inProvider = useLocaleScope() !== null;
+    return React.useMemo(() => {
+        if (own !== undefined)
+            return own;
+        if (!inProvider || !locale || hasDayNames)
+            return 0;
+        try {
+            return localeFirstDay(canonicalLocale(locale));
+        }
+        catch {
+            // A tag Intl refuses: the picker's own formatting says so.
+            return 0;
+        }
+    }, [own, inProvider, locale, hasDayNames]);
+}
+
+/**
+ * A field laid over the real one, unseen and letting presses through, so the
+ * browser's `required` check reads it and its message points at the field.
+ */
+const requiredProxyStyle = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    margin: 0,
+    padding: 0,
+    border: 0,
+    opacity: 0,
+    pointerEvents: 'none',
+    // Focused, it opens no on-screen keyboard (`inputMode`), and iOS zooms
+    // in on a field set under 16px. It's unseen, so the size shows nowhere.
+    fontSize: '16px',
+};
+/** Keys pressed on their own that don't act, such as Ctrl to stop speech. */
+const MODIFIER_KEYS = new Set([
+    'Alt',
+    'AltGraph',
+    'CapsLock',
+    'Control',
+    'Fn',
+    'Meta',
+    'NumLock',
+    'ScrollLock',
+    'Shift',
+]);
+const ignoreChange = () => { };
+/**
+ * A read-only `role="combobox"` field, wired as the date pickers' are, that
+ * opens a `PickerPopover` dialog panel: in a `Field` of its own unless one is
+ * around it, with a chevron at its inline end, a clear button, the hidden
+ * inputs for `name` and what the browser's `required` check reads. A click,
+ * Enter, Space, Down or Alt+Down opens the panel, which holds focus, as the
+ * date pickers' does: Tab and Shift+Tab wrap inside it. Escape and Alt+Up
+ * close it and put focus back on the field, and a press outside closes it
+ * where the press put focus.
+ */
+function DialogSelect({ component, rootClass, panelClass, text, values, hasValue, open, onOpenChange, onFormReset, onPrintableKey, onClear, clearable, clearLabel, chooseLabel, placeholder, name, form, required = false, disabled, color, size, isRounded, position = 'bottom-left', appendToBody = false, inputRef, fieldRef, describedBy, below, initialFocusSelector, children, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }) {
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField(component, {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { controlId, fieldLabelProps, labelId } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: ownField,
+        needsLabelId: true,
+    });
+    const reactId = React.useId();
+    const panelId = `${controlId ?? reactId}-panel`;
+    const localeScope = usePickerLocaleScope(undefined, props.dir);
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = React.useRef(null);
+    // The field's name, which the panel takes too unless it's given its own.
+    const fieldName = ariaLabel
+        ? { 'aria-label': ariaLabel }
+        : ariaLabelledBy
+            ? { 'aria-labelledby': ariaLabelledBy }
+            : labelId
+                ? { 'aria-labelledby': labelId }
+                : {};
+    const panelName = chooseLabel
+        ? { 'aria-label': chooseLabel }
+        : fieldName;
+    // Whether the field `required` hangs on has focus, which the browser gives
+    // it when it stops a submit. Taking it away or disabling it while it has
+    // focus fires no blur, so that clears it too.
+    const [proxyFocused, setProxyFocused] = React.useState(false);
+    if (proxyFocused && (!required || disabled))
+        setProxyFocused(false);
+    const showClear = !!clearable && hasValue && !disabled;
+    const rootClasses = usePrefixedClassNames(rootClass, {
+        'is-disabled': disabled,
+        'has-clear': showClear,
+    });
+    const inputClass = usePrefixedClassNames('input', {
+        [`is-${color}`]: !!color,
+        [`is-${size}`]: !!size,
+        'is-rounded': !!isRounded,
+        'is-focused': proxyFocused,
+    });
+    const chevronClass = usePrefixedClassNames(`${rootClass}-chevron`);
+    const clearClass = usePrefixedClassNames(`${rootClass}-clear`);
+    const panelClasses = usePrefixedClassNames(panelClass, {
+        [`is-${size}`]: !!size,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const isOpen = open && !disabled;
+    // A reset of the field's form puts the value back, as it does a native
+    // field's. The reset event fires before the form resets, and a listener
+    // after this one can still cancel it, so the value goes back a task later,
+    // and only if the reset went ahead, as File's and Dropzone's do. It's
+    // heard on the field's document, or the shadow root it's in, and matched
+    // to the field's form as it is then, so a form its `form` names that
+    // mounts later, or a `form` that changes, is followed, and a reset
+    // already under way still lands.
+    const onFormResetRef = useLatestRef(onFormReset);
+    React.useEffect(() => {
+        const root = inputRef.current.getRootNode();
+        let timer;
+        const onReset = (event) => {
+            if (event.target !== inputRef.current?.form)
+                return;
+            timer = setTimeout(() => {
+                if (!event.defaultPrevented)
+                    onFormResetRef.current();
+            });
+        };
+        root.addEventListener('reset', onReset, true);
+        return () => {
+            root.removeEventListener('reset', onReset, true);
+            clearTimeout(timer);
+        };
+    }, [inputRef, onFormResetRef]);
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        if (isPopoverToggleKey(event)) {
+            event.preventDefault();
+            if (event.key === 'ArrowDown')
+                onOpenChange(true);
+            return;
+        }
+        if (event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        if (event.key === 'Enter' ||
+            event.key === ' ' ||
+            event.key === 'ArrowDown') {
+            event.preventDefault();
+            onOpenChange(true);
+        }
+        else if (event.key.length === 1 &&
+            !event.nativeEvent.isComposing &&
+            onPrintableKey?.(event.key)) {
+            event.preventDefault();
+        }
+    };
+    const fieldDescription = [ariaDescribedBy, describedBy].filter(Boolean).join(' ') || undefined;
+    const field = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: fieldRef, type: "text", className: inputClass, id: controlId, readOnly: true, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-controls": isOpen ? panelId : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": fieldDescription, "aria-required": required || undefined, autoComplete: "off", value: text, placeholder: placeholder, disabled: disabled, form: form, 
+                // A disabled field takes no clicks.
+                onClick: () => onOpenChange(!isOpen), onKeyDown: handleKeyDown }), showClear && (jsxRuntime.jsx(Delete, { className: clearClass, size: size, ariaLabel: clearLabel, onClick: () => {
+                    onClear();
+                    onOpenChange(false);
+                    inputRef.current?.focus();
+                } })), jsxRuntime.jsx("span", { className: chevronClass, "aria-hidden": "true", children: jsxRuntime.jsx(Icon, { name: "chevron-down", size: size }) })] }));
+    const root = (jsxRuntime.jsxs("div", { ...localeScope.rootAttrs, ...rest, ref: rootRef, className: classNames(rootClasses, bulmaHelperClasses, className), children: [insideControl ? field : jsxRuntime.jsx(Control, { size: size, children: field }), required && (jsxRuntime.jsx("input", { ...(proxyFocused
+                    ? {
+                        ...fieldName,
+                        role: 'combobox',
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': false,
+                        'aria-describedby': fieldDescription,
+                    }
+                    : { 'aria-hidden': true }), tabIndex: -1, inputMode: "none", required: true, value: hasValue ? 'picked' : '', onChange: ignoreChange, form: form, disabled: disabled, 
+                // When the browser stops a submit, it focuses this and shows its
+                // message beside it, and every browser takes the message down as
+                // this loses focus. So focus stays here, over the field, which
+                // looks focused, and a press goes where it lands, as from any
+                // field. The next key hands focus to the field and does there
+                // what it would have. Firefox also stops taking clicks if focus
+                // leaves while it's still focusing this.
+                onFocus: () => setProxyFocused(true), onBlur: () => setProxyFocused(false), onKeyDown: event => {
+                    if (MODIFIER_KEYS.has(event.key))
+                        return;
+                    inputRef.current?.focus();
+                    handleKeyDown(event);
+                }, style: requiredProxyStyle })), jsxRuntime.jsx(HiddenValues, { name: name, values: values, form: form, disabled: disabled }), jsxRuntime.jsx(PickerPopover, { localeScope: localeScope.panel, isOpen: isOpen, onClose: () => onOpenChange(false), anchorRef: rootRef, position: position, appendToBody: appendToBody, className: panelClasses, ariaLabel: panelName['aria-label'], ariaLabelledBy: panelName['aria-labelledby'], id: panelId, restoreFocusRef: inputRef, initialFocusSelector: initialFocusSelector, matchWidth: true, followContent: true, children: children(panelName) })] }));
+    const fieldElement = below === undefined ? (root) : (jsxRuntime.jsxs("div", { children: [root, below] }));
+    const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [fieldElement, messageEl] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [fieldElement, messageEl] }));
+}
+
+const NOTHING_HIDDEN = new Set();
+const noMatches = [{ id: 'empty' }];
+const nothingToSay = [];
+/** What takes focus as the panel opens. */
+const INITIAL_FOCUS = '[data-initial-focus]';
+/** One value or several, as a list. */
+const asList = (value) => value == null ? [] : Array.isArray(value) ? value : [value];
+/** Whether two lists hold the same values, whatever their order and repeats. */
+const sameValues = (a, b) => {
+    const inA = new Set(a);
+    const inB = new Set(b);
+    return inA.size === inB.size && [...inA].every(value => inB.has(value));
+};
+/** The list with every value of `more` it doesn't have added at the end. */
+const withAll = (list, more) => [
+    ...list,
+    ...more.filter(value => !list.includes(value)),
+];
+/**
+ * The `TreeSelect` component is a form field whose options are a tree, such as categories, places or teams: it opens a panel holding a real `TreeView`, picks one item or checks a branch at a time, and searches labels.
+ *
+ * The field is a read-only `role="combobox"` that opens a dialog, wired as
+ * DateInput's is, so focus moves into the tree for real and the tree keeps
+ * TreeView's keys, type-ahead and spoken output. The tree is given as `data`,
+ * so the field and the tags can name what's picked while the panel is shut,
+ * and on the server.
+ *
+ * `selectionMode` picks the kind. `'single'` picks one item and closes. With
+ * `'checkbox'`, a check reaches every enabled item under it, closed or hidden
+ * by a search, and `checkedStrategy` decides what the value holds: the
+ * leaves, the topmost checked items or every one. With
+ * `'checkbox-independent'`, each box is its own item's, so a parent means
+ * itself alone (Mantine's and Ant Design's `checkStrictly`). The value shows
+ * as tags under the field.
+ *
+ * A value no node has is kept and shown as it is, with a warning in
+ * development, so a value under a branch that hasn't loaded survives until
+ * it does.
+ *
+ * @function
+ * @param {TreeSelectProps} props - Props for the TreeSelect component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the field.
+ * @returns {JSX.Element} The field, its tags and its panel, in a `Field` with the label unless one is around it.
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ | APG Combobox Pattern}
+ *
+ * @example
+ * <TreeSelect
+ *   label="Save to"
+ *   data={[
+ *     { value: 'docs', label: 'Documents', children: [{ value: 'invoices', label: 'Invoices' }] },
+ *     { value: 'photos', label: 'Photos' },
+ *   ]}
+ *   searchable
+ * />
+ *
+ * @example
+ * <TreeSelect label="Regions" selectionMode="checkbox" checkedStrategy="parent" data={regions} />
+ */
+const TreeSelect = React.forwardRef((props, ref) => {
+    const { data, expanded: expandedProp, defaultExpanded = [], onExpandedChange, open: openProp, defaultOpen = false, onOpenChange, searchable = false, query: queryProp, defaultQuery = '', onQueryChange, filter, empty, itemTemplate, disabled: disabledProp, clearable = false, size, labels, selectionMode = 'single', value: valueProp, defaultValue, 
+    // Called below through `props`, which knows which value it takes.
+    onChange: _onChange, parentsSelectable = true, closeOnSelect = true, checkedStrategy = 'child', ariaCloseLabel, ...rest } = props;
+    const disabled = useFieldsetDisabled(disabledProp);
+    const single = selectionMode === 'single';
+    const cascade = selectionMode === 'checkbox';
+    const index = React.useMemo(() => indexTree(data), [data]);
+    const records = React.useMemo(() => checkRecords(index), [index]);
+    const labelFor = (value) => {
+        const entry = index.get(value);
+        return entry ? nodeLabel(entry.node) : value;
+    };
+    // The value, as a list: none or one in `single`.
+    const [held, setHeld] = useControlled(valueProp, defaultValue ?? null);
+    const listed = asList(held);
+    const change = (next) => {
+        const value = single ? (next[0] ?? null) : next;
+        setHeld(value);
+        // The mode decides which of the two `onChange` takes.
+        const report = props.onChange;
+        report?.(value);
+    };
+    // What the field, the tags and the hidden inputs show: the value as it's
+    // held. `checkedStrategy` shapes a new value as a check makes it, so a
+    // branch that loads later changes nothing the form posts.
+    const picked = single ? listed.slice(0, 1) : Array.from(new Set(listed));
+    const unknown = picked.find(value => !index.has(value));
+    React.useEffect(() => {
+        if (unknown !== undefined) {
+            warnOnce('TreeSelect:unknown-value', `[bestax-bulma] <TreeSelect> was given the value "${unknown}", ` +
+                'which no node in its data has. It is kept and shown as it is, ' +
+                'as it should be for a node under a branch that has not loaded ' +
+                'yet. Otherwise, check the value against the data.');
+        }
+    }, [unknown]);
+    const [expanded, setExpanded] = useControlled(expandedProp, defaultExpanded);
+    const changeExpanded = (next) => {
+        setExpanded(next);
+        onExpandedChange?.(next);
+    };
+    // The picked item focus goes to: the first in the tree's order.
+    const pickedSet = new Set(picked);
+    const target = Array.from(index.keys()).find(value => pickedSet.has(value));
+    const [query, setQueryState] = useControlled(queryProp, defaultQuery);
+    const setQuery = (next) => {
+        if (next === query)
+            return;
+        setQueryState(next);
+        onQueryChange?.(next);
+    };
+    const [isOpen, setOpenState] = useControlled(openProp, defaultOpen);
+    const setOpen = (next) => {
+        if (next === isOpen)
+            return;
+        if (next) {
+            // Opening shows the picked item, its branch open.
+            const path = (target !== undefined && index.get(target)?.path) || [];
+            if (path.some(value => !expanded.includes(value))) {
+                changeExpanded(withAll(expanded, path));
+            }
+        }
+        else {
+            setQuery('');
+        }
+        setOpenState(next);
+        onOpenChange?.(next);
+    };
+    const matchText = useLocaleMatcher();
+    const typed = searchable ? query.trim() : '';
+    // Every item reads the hidden set, so it's only built again when the
+    // search text or the data changes.
+    const search = React.useMemo(() => typed
+        ? searchTree(data, (node, path) => {
+            if (filter)
+                return filter(typed, node, path);
+            const text = nodeLabel(node);
+            return matchText
+                ? matchText(text, typed)
+                : text.toLowerCase().includes(typed.toLowerCase());
+        })
+        : null, 
+    // `filter` is read as it is when the text or the data changes: one
+    // written inline is a new function every render, and listing it would
+    // search again on each.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data, typed, matchText]);
+    // The branches a search opened that were closed during it, for the
+    // search text they were closed under: any new text, from the box or
+    // from a held `query`, starts over.
+    const [searchClosed, setSearchClosed] = React.useState({
+        query: typed,
+        values: [],
+    });
+    if (searchClosed.query !== typed) {
+        setSearchClosed({ query: typed, values: [] });
+    }
+    const closedHere = searchClosed.query === typed ? searchClosed.values : [];
+    // The branches a search opens show open over the ones you opened, and
+    // close again once it's cleared.
+    const forced = search
+        ? search.open.filter(value => !closedHere.includes(value))
+        : [];
+    const shownExpanded = withAll(expanded, forced);
+    // TreeView's click on a row selects it and opens it. A pick by click, as
+    // a pick by Enter, only picks, so the open the tree asks for right after
+    // one on a parent is dropped, and a lazy parent isn't fetched to be
+    // picked.
+    const clickPickedRef = React.useRef(false);
+    const onTreeExpandedChange = (next) => {
+        if (clickPickedRef.current) {
+            clickPickedRef.current = false;
+            return;
+        }
+        const closed = shownExpanded.filter(value => !next.includes(value));
+        const opened = next.filter(value => !shownExpanded.includes(value));
+        const closedForced = closed.filter(value => forced.includes(value));
+        if (closedForced.length > 0) {
+            setSearchClosed({
+                query: typed,
+                values: [...closedHere, ...closedForced],
+            });
+        }
+        if (opened.length > 0 || closed.some(value => expanded.includes(value))) {
+            changeExpanded([
+                ...expanded.filter(value => !closed.includes(value)),
+                ...opened,
+            ]);
+        }
+    };
+    // Whether an item is on the page with the panel open: every branch
+    // above it open, and the search not hiding it.
+    const visible = (value) => !search?.hidden.has(value) &&
+        index.get(value).path.every(above => shownExpanded.includes(above));
+    const focusTarget = target !== undefined && visible(target)
+        ? target
+        : data.find(node => visible(node.value))?.value;
+    // Picking in `single`. TreeView shows `selected`, held here, and the
+    // picks are made from the rows' own keys and clicks, so a parent can
+    // open instead and a pick of the picked item still closes.
+    const pickable = (node) => !node.disabled && (parentsSelectable || !isParentNode(node));
+    const pick = (value) => {
+        if (listed.length !== 1 || listed[0] !== value)
+            change([value]);
+        if (closeOnSelect)
+            setOpen(false);
+    };
+    const toggleClass = usePrefixedClassNames('tree-view-toggle');
+    const rowHandlers = (node) => single
+        ? {
+            onKeyDown: (event) => {
+                if (event.target !== event.currentTarget ||
+                    event.repeat ||
+                    event.altKey ||
+                    event.ctrlKey ||
+                    event.metaKey ||
+                    (event.key !== 'Enter' && event.key !== ' ')) {
+                    return;
+                }
+                if (pickable(node)) {
+                    pick(node.value);
+                }
+                else if (!node.disabled && isParentNode(node)) {
+                    // TreeView leaves a key that's been used alone.
+                    event.preventDefault();
+                    onTreeExpandedChange(shownExpanded.includes(node.value)
+                        ? shownExpanded.filter(value => value !== node.value)
+                        : [...shownExpanded, node.value]);
+                }
+            },
+            onClick: (event) => {
+                const item = event.currentTarget;
+                const target = event.target;
+                // A click in this item's own row, where TreeView reads one,
+                // not one in the group of items inside it, and not on its
+                // chevron, which only opens it.
+                const inRow = target === item || item.firstElementChild.contains(target);
+                const onChevron = isParentNode(node) && !!target.closest(`.${toggleClass}`);
+                if (inRow && !onChevron && pickable(node)) {
+                    // TreeView opens a parent it's handed this click on, in
+                    // this same click: the flag goes once the click is over.
+                    clickPickedRef.current = isParentNode(node);
+                    queueMicrotask(() => {
+                        clickPickedRef.current = false;
+                    });
+                    pick(node.value);
+                }
+            },
+        }
+        : undefined;
+    const renderNode = (node) => (jsxRuntime.jsx(TreeView.Item, { value: node.value, label: itemTemplate ? itemTemplate(node) : nodeLabel(node), icon: node.icon, hasChildren: node.hasChildren, isLoading: node.isLoading, loadError: node.loadError, onRetry: node.onRetry, disabled: node.disabled, "data-initial-focus": !searchable && node.value === focusTarget ? '' : undefined, ...rowHandlers(node), children: childNodes(node).map(renderNode) }, node.value));
+    // In `checkbox`, TreeView reports every checked item, read here into
+    // the list `checkedStrategy` gives.
+    const shaped = (next) => cascade ? checkedByStrategy(records, next, checkedStrategy) : next;
+    const onCheckedChange = (next) => change(shaped(next));
+    // Every item's check state, read once a render, which the clear button
+    // and the tags' buttons decide from. Only `checkbox` reads TreeView's
+    // rules: in `checkbox-independent` a listed item is a checked one.
+    const listedKey = JSON.stringify(listed);
+    const checks = React.useMemo(() => (cascade ? readChecks(records, new Set(listed)) : null), 
+    // `listed` by what it holds, since a held list is a new array each
+    // render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascade, records, listedKey]);
+    const isDisabled = (value) => !!index.get(value)?.node.disabled;
+    // Read in `checkbox` only, where there are states to read.
+    const isChecked = (value) => checks.states.get(value) === true;
+    // What a control can uncheck. In `checkbox`, that's each checked end no
+    // checked disabled item above it keeps checked, and every item above it,
+    // which takes it along; elsewhere it's each listed item that isn't
+    // disabled. A disabled item is checked only by its own value, so nothing
+    // unchecks it, or what it keeps checked.
+    const uncheckable = new Set();
+    if (checks) {
+        for (const end of checks.ends) {
+            const { path } = index.get(end);
+            if (isChecked(end) &&
+                !path.some(above => isDisabled(above) && isChecked(above))) {
+                uncheckable.add(end);
+                path.forEach(above => uncheckable.add(above));
+            }
+        }
+    }
+    else if (!single) {
+        picked.forEach(value => !isDisabled(value) && uncheckable.add(value));
+    }
+    // A tag's button takes its value off where that changes what's checked,
+    // the way its box would. A value no node has can always go.
+    const removable = (value) => !index.has(value) || (!isDisabled(value) && uncheckable.has(value));
+    const without = (value) => cascade && records.has(value)
+        ? shaped(toggledList(records, listed, value))
+        : listed.filter(item => item !== value);
+    // What the clear button leaves: the checked disabled items, and in
+    // `checkbox` what they keep checked, shaped as a check's value is.
+    const cleared = single
+        ? []
+        : shaped(checks
+            ? Array.from(records.keys()).filter(value => isDisabled(value) && isChecked(value))
+            : picked.filter(isDisabled));
+    const canClear = single
+        ? picked.length > 0
+        : uncheckable.size > 0 || picked.some(value => !index.has(value));
+    const inputRef = React.useRef(null);
+    // A forwarded callback's cleanup, which React 19 lets it return, run on
+    // detach in place of a call with `null`, on React 18 as well.
+    const refCleanupRef = React.useRef(null);
+    const fieldRef = React.useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            if (node === null) {
+                const cleanup = refCleanupRef.current;
+                refCleanupRef.current = null;
+                if (cleanup)
+                    cleanup();
+                else
+                    ref(null);
+                return;
+            }
+            const cleanup = ref(node);
+            refCleanupRef.current =
+                typeof cleanup === 'function' ? cleanup : null;
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    const tagsId = React.useId();
+    const ids = tagIds(tagsId, picked);
+    const searchClass = usePrefixedClassNames('input', 'tree-select-search', {
+        [`is-${size}`]: !!size,
+    });
+    const emptyClass = usePrefixedClassNames('tree-select-empty');
+    const treeRef = React.useRef(null);
+    const emptyRef = React.useRef(null);
+    const nothingFound = !!search && !search.found;
+    // The region reads the text on screen, whatever `empty` renders.
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    return (jsxRuntime.jsx(DialogSelect, { ...rest, component: "TreeSelect", rootClass: "tree-select", panelClass: "tree-select-panel", text: single && picked.length > 0 ? labelFor(picked[0]) : '', values: single ? [picked[0] ?? ''] : picked, hasValue: picked.length > 0, open: isOpen, onOpenChange: setOpen, onPrintableKey: searchable
+            ? key => {
+                setQuery(key);
+                setOpen(true);
+                return true;
+            }
+            : undefined, onClear: () => change(cleared), clearable: clearable && canClear, onFormReset: () => {
+            // Back to `defaultValue`, or to nothing for a held value, which
+            // its owner sets from `onChange`.
+            const back = valueProp === undefined ? asList(defaultValue) : [];
+            if (!sameValues(back, listed))
+                change(back);
+        }, clearLabel: labels?.clear || 'Clear', chooseLabel: labels?.choose, disabled: disabled, size: size, inputRef: inputRef, fieldRef: fieldRef, describedBy: single ? undefined : ids.join(' '), below: single ? undefined : (jsxRuntime.jsx(ValueTags, { values: picked, ids: ids, labelFor: labelFor, disabled: disabled, ariaCloseLabel: ariaCloseLabel, removable: removable, onRemove: value => {
+                change(without(value));
+                inputRef.current?.focus();
+            } })), initialFocusSelector: INITIAL_FOCUS, children: panelName => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [searchable && (jsxRuntime.jsx("input", { className: searchClass, type: "search", "aria-label": labels?.search || 'Search', autoComplete: "off", value: query, "data-initial-focus": "", onChange: event => setQuery(event.target.value), onFocus: event => {
+                        // A key that opened the panel is in the box: type after it.
+                        const { length } = event.currentTarget.value;
+                        event.currentTarget.setSelectionRange(length, length);
+                    }, onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            // The search box's Enter would submit the form.
+                            event.preventDefault();
+                        }
+                        else if (event.key === 'ArrowDown' && !event.altKey) {
+                            event.preventDefault();
+                            const tree = treeRef.current;
+                            (tree?.querySelector('[role="treeitem"][tabindex="0"]') ?? tree?.querySelector('[role="treeitem"]'))?.focus();
+                        }
+                    } })), nothingFound ? (empty && (jsxRuntime.jsx("div", { className: emptyClass, ref: emptyRef, children: empty }))) : (jsxRuntime.jsx(TreeViewHiddenContext.Provider, { value: search?.hidden ?? NOTHING_HIDDEN, children: jsxRuntime.jsx(TreeView, { ...panelName, ref: treeRef, 
+                        // It scrolls, and Firefox makes a scroller a Tab stop of
+                        // its own: the roving one on its items is the tree's.
+                        tabIndex: -1, selectionMode: selectionMode, size: size, selected: single ? (picked[0] ?? null) : undefined, checked: single ? undefined : listed, onCheckedChange: onCheckedChange, expanded: shownExpanded, onExpandedChange: onTreeExpandedChange, loadingLabel: labels?.loading, retryLabel: labels?.retry, loadingAnnouncement: labels?.loadingAnnouncement, loadedAnnouncement: labels?.loadedAnnouncement, children: data.map(renderNode) }) })), jsxRuntime.jsx(StatusRegion, { items: nothingFound && empty ? noMatches : nothingToSay, describe: describeEmpty })] })) }));
+});
+TreeSelect.displayName = 'TreeSelect';
+
+// An IME that's composing owns every key: Enter confirms what it composed,
+// the arrows move through its candidates, and Escape cancels it. Safari can
+// say so with `keyCode` 229 rather than `isComposing` (#1102).
+const isComposing = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+/**
+ * The `Taginput` component provides a tag/chip input field for managing multiple tags.
+ *
+ * @function
+ * @param {TaginputProps} props - Props for the Taginput component.
+ * @param {React.Ref<HTMLInputElement>} ref - Forwarded ref to the input element.
+ * @returns {JSX.Element} The rendered taginput component.
+ *
+ * @example
+ * // Basic usage
+ * <Taginput
+ *   placeholder="Add a tag..."
+ *   onChange={(tags) => console.log(tags)}
+ * />
+ *
+ * @example
+ * // With autocomplete
+ * <Taginput
+ *   data={['React', 'Vue', 'Angular', 'Svelte']}
+ *   allowNew={false}
+ *   placeholder="Select frameworks..."
+ * />
+ */
+const Taginput = React.forwardRef(({ 
+// Field props
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled: disabledProp, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('Taginput', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const { classPrefix } = useConfig();
+    const defaultIconLibrary = useIconLibrary();
+    const formatNumber = useScopedNumberFormat();
+    const matchText = useLocaleMatcher();
+    const resolvedLibrary = iconLibraryProp || defaultIconLibrary || 'fa';
+    const pcn = (...args) => prefixedClassNames(classPrefix, ...args);
+    const containerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const [internalTags, setInternalTags] = React.useState(defaultValue);
+    const [inputValue, setInputValue] = React.useState('');
+    const [isActive, setIsActive] = React.useState(false);
+    const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const baseId = React.useId();
+    const listboxId = `${baseId}-listbox`;
+    const counterId = `${baseId}-counter`;
+    // With `data` the input offers suggestions, so it's a combobox, even
+    // while none match. Without it there's never a list, so it stays a plain
+    // text field.
+    const hasSuggestions = dataProp !== undefined;
+    const data = dataProp ?? [];
+    // Use controlled or internal tags
+    const tags = controlledValue !== undefined ? controlledValue : internalTags;
+    const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
+    // The suggestion list points `aria-labelledby` at the label that names
+    // the input, so with suggestions it needs that label's id.
+    const { controlId, fieldLabelProps, labelled, labelId: listLabelId, } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: ownField,
+        needsLabelId: hasSuggestions,
+    });
+    // Get display value from tag
+    const getDisplayValue = (tag) => {
+        if (typeof tag === 'string')
+            return tag;
+        const fieldValue = tag[field];
+        if (typeof fieldValue === 'string')
+            return fieldValue;
+        return tag.value || '';
+    };
+    // Filter autocomplete data
+    const filteredData = data.filter(item => {
+        const displayValue = item.toLowerCase();
+        const matchesInput = matchText
+            ? matchText(item, inputValue)
+            : displayValue.includes(inputValue.toLowerCase());
+        const notAlreadyAdded = allowDuplicates ||
+            !tags.some(tag => getDisplayValue(tag).toLowerCase() === displayValue);
+        const hasInput = inputValue || (openOnFocus && isActive);
+        return matchesInput && notAlreadyAdded && hasInput;
+    });
+    // At the tag limit the list stays closed, since it could only offer tags
+    // past the limit (#1087).
+    const listOpen = isActive && !isMaxReached && filteredData.length > 0;
+    // keepFirst: auto-highlight first item when dropdown opens
+    React.useEffect(() => {
+        if (keepFirst && isActive && filteredData.length > 0) {
+            setHighlightedIndex(0);
+        }
+    }, [keepFirst, isActive, filteredData.length]);
+    // Update tags
+    const updateTags = React.useCallback((newTags) => {
+        if (controlledValue === undefined) {
+            setInternalTags(newTags);
+        }
+        onChange?.(newTags);
+    }, [controlledValue, onChange]);
+    // Add tags from text typed, pasted or picked from the list. Each one is
+    // checked against the tags before it, this batch's included, so a paste
+    // of several adds them all in one change (#1101). Only `createTag` turns
+    // text into an object.
+    const addTags = React.useCallback((values) => {
+        if (disabled || readonly)
+            return;
+        let next = tags;
+        const added = [];
+        for (const value of values) {
+            // A paste can bring more tags than there's room for, and at the
+            // limit the read-only input still takes Enter.
+            if (maxTags !== undefined && next.length >= maxTags)
+                break;
+            const displayValue = value.trim();
+            if (!displayValue)
+                continue;
+            const lower = displayValue.toLowerCase();
+            // Duplicates, data and the dropdown filter all compare
+            // case-insensitively.
+            if (!allowDuplicates &&
                 next.some(tag => getDisplayValue(tag).toLowerCase() === lower))
                 continue;
             // Without allowNew, only a suggestion can become a tag.
@@ -21070,61 +22010,6 @@ fieldClassName, controlClassName,
 });
 TextArea.displayName = 'TextArea';
 
-/**
- * Whether a key is Alt+ArrowDown or Alt+ArrowUp, which open and close a
- * picker's popover. The calendar and the time wheels leave both to it rather
- * than reading them as plain arrows.
- */
-const isPopoverToggleKey = (e) => e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp');
-const DEFAULT_PICKER_LABELS = {
-    prevMonth: 'Previous month',
-    nextMonth: 'Next month',
-    prevYear: 'Previous year',
-    nextYear: 'Next year',
-    chooseDate: 'Choose date',
-    chooseMonth: 'Choose month',
-    chooseYear: 'Choose year',
-    rangeStart: 'Start date',
-    rangeEnd: 'End date',
-    rangePreviewEnd: 'Choose as end date',
-    rangeSeparator: '–',
-    chooseDateRange: 'Choose date range',
-    hours: 'hours',
-    minutes: 'minutes',
-    seconds: 'seconds',
-    ampm: 'AM/PM',
-    increaseHours: 'Increase hours',
-    decreaseHours: 'Decrease hours',
-    increaseMinutes: 'Increase minutes',
-    decreaseMinutes: 'Decrease minutes',
-    increaseSeconds: 'Increase seconds',
-    decreaseSeconds: 'Decrease seconds',
-    toggleAmPm: 'Toggle AM/PM',
-    chooseTime: 'Choose time',
-    chooseDateTime: 'Choose date and time',
-    now: 'Now',
-    today: 'Today',
-    clear: 'Clear',
-    cancel: 'Cancel',
-    ok: 'OK',
-    reset: 'Reset',
-    done: 'Done',
-    time: 'Time',
-};
-/**
- * Merge user-supplied label overrides with the defaults. A key set to
- * `undefined` keeps its default, so a locale table that is missing a string
- * still names its control instead of leaving it with no accessible name.
- */
-const mergeLabels = (overrides) => {
-    const merged = { ...DEFAULT_PICKER_LABELS };
-    for (const [key, value] of Object.entries(overrides ?? {})) {
-        if (value !== undefined)
-            merged[key] = value;
-    }
-    return merged;
-};
-
 function isSameDay(a, b) {
     return (a.getFullYear() === b.getFullYear() &&
         a.getMonth() === b.getMonth() &&
@@ -22453,112 +23338,6 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
 };
 Calendar.displayName = 'Calendar';
 
-const isBrowser = typeof window !== 'undefined';
-const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'bottom-left', appendToBody = false, className, trapFocus = true, closeOnClickOutside = true, closeOnEscape = true, ariaLabel, ariaLabelledBy, role = 'dialog', id, restoreFocusRef, initialFocusSelector, localeScope, }) => {
-    const panelRef = React.useRef(null);
-    const resolveContainer = usePortalContainer();
-    // Read as the trap turns on, once the panel's content has rendered.
-    const initialFocusRef = React.useMemo(() => initialFocusSelector === undefined
-        ? undefined
-        : {
-            get current() {
-                return (panelRef.current?.querySelector(initialFocusSelector) ?? null);
-            },
-        }, [initialFocusSelector]);
-    const resolved = useAnchoredPosition(anchorRef, panelRef, {
-        active: isOpen,
-        position,
-        fixed: appendToBody,
-        // The gap comes from `--bulma-picker-popover-offset` as a margin, in place
-        // or portaled, so the coordinates leave it out and `auto` reads it off
-        // the panel.
-        offset: 0,
-        styledGap: marginGap,
-    });
-    // Read when a press lands outside or a key arrives, so both listeners stay
-    // put while `onClose` changes identity, as an inline one does on every
-    // render of the field.
-    const onCloseRef = useLatestRef(onClose);
-    React.useEffect(() => {
-        if (!isOpen || !closeOnClickOutside || !isBrowser)
-            return undefined;
-        // Listen on `pointerdown` (rather than `mousedown`) so touch starts
-        // outside the popover dismiss it on mobile — including swipe-from-outside
-        // gestures, where the synthetic mouse event would otherwise lag a few
-        // hundred ms behind the actual touch.
-        const handler = (e) => {
-            const path = e.composedPath();
-            if (panelRef.current && path.includes(panelRef.current))
-                return;
-            if (anchorRef.current && path.includes(anchorRef.current))
-                return;
-            onCloseRef.current();
-        };
-        document.addEventListener('pointerdown', handler);
-        return () => document.removeEventListener('pointerdown', handler);
-    }, [isOpen, closeOnClickOutside, anchorRef, onCloseRef]);
-    // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
-    // which the calendar and the time wheels inside leave to it. Escape closes
-    // it from anywhere, but the key is only the picker's when it was pressed in
-    // the panel or the field: then it's marked used, so a Modal or Sidebar
-    // around the picker stays open. From anywhere else, such as a dialog opened
-    // over the picker, the key goes on to whatever has focus.
-    React.useEffect(() => {
-        if (!isOpen || !closeOnEscape || !isBrowser)
-            return undefined;
-        const handler = (e) => {
-            if (e.key === 'Escape') {
-                if (isEventInside(e, panelRef.current) ||
-                    isEventInside(e, anchorRef.current)) {
-                    e.preventDefault();
-                }
-                onCloseRef.current();
-            }
-            else if (e.altKey && e.key === 'ArrowUp') {
-                e.preventDefault();
-                e.stopPropagation();
-                onCloseRef.current();
-            }
-        };
-        document.addEventListener('keydown', handler);
-        return () => document.removeEventListener('keydown', handler);
-    }, [isOpen, closeOnEscape, anchorRef, onCloseRef]);
-    useFocusTrap(panelRef, {
-        active: isOpen && trapFocus,
-        initialFocusRef,
-        restoreFocus: restoreFocusRef ?? true,
-    });
-    const panelClass = usePrefixedClassNames('picker-popover', {
-        'is-active': isOpen,
-        [`is-${resolved.position}`]: true,
-        'is-portal': appendToBody,
-    });
-    if (!isOpen)
-        return null;
-    const style = appendToBody
-        ? {
-            position: 'fixed',
-            top: resolved.top,
-            left: resolved.left,
-        }
-        : {};
-    const panel = (jsxRuntime.jsx("div", { ref: panelRef, id: id, role: role, "aria-modal": role === 'dialog' ? 'false' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, tabIndex: -1, className: classNames(panelClass, className), style: style, 
-        // An Escape pressed in the panel is the picker's, and the listener
-        // above claims it. A Dropdown menu around the picker hears Escape in a
-        // React handler, which runs before that listener, so the panel claims
-        // it here too, where React gets to it first.
-        onKeyDown: e => {
-            if (closeOnEscape && e.key === 'Escape')
-                e.preventDefault();
-        }, children: children }));
-    if (appendToBody && isBrowser) {
-        const target = resolveContainer();
-        return reactDom.createPortal(jsxRuntime.jsx(LocalePortalScope, { target: target, scope: localeScope, children: panel }), target);
-    }
-    return panel;
-};
-PickerPopover.displayName = 'PickerPopover';
-
 /**
  * Segment-map utility for manual keyboard entry on a date / time picker input.
  * Given a token-format string like `'YYYY-MM-DD'`, `'HH:mm:ss'`, `'hh:mm A'`,
@@ -23311,79 +24090,6 @@ function supportsInputType(type) {
     return supported;
 }
 
-/**
- * A picker's locale: its own `locale`, else the one a `LocaleProvider` around
- * it sets, else `undefined`, which leaves `Intl` to use the runtime's.
- */
-function usePickerLocale(own) {
-    const scope = useLocaleScope();
-    return own || scope?.locale;
-}
-const NO_ROOT_ATTRS = {};
-/**
- * A picker's language and direction inside a `LocaleProvider`, by the rule a
- * nested provider follows: its `lang` is its own `locale`, else the
- * provider's, and its `dir` is the `dir` passed to it, else its own locale's
- * direction when it has one, else the provider's. Outside a provider it
- * changes nothing. A `locale` `Intl` refuses counts as none here, since the
- * picker's own formatting reports it.
- */
-function usePickerLocaleScope(ownLocale, ownDir) {
-    const scope = useLocaleScope();
-    return React.useMemo(() => {
-        if (!scope)
-            return { rootAttrs: NO_ROOT_ATTRS };
-        let own;
-        try {
-            own = canonicalLocale(ownLocale);
-        }
-        catch {
-            own = undefined;
-        }
-        const dir = ownDir || (own ? localeDirection(own) : scope.dir);
-        return {
-            rootAttrs: own ? { lang: own, dir } : NO_ROOT_ATTRS,
-            panel: { locale: own || scope.locale, dir },
-        };
-    }, [scope, ownLocale, ownDir]);
-}
-/**
- * Whether a picker's `dayNames` replace the calendar's own, which `Calendar`
- * does only for a full week of seven.
- */
-function hasOwnDayNames(dayNames) {
-    return dayNames !== undefined && dayNames.length === 7;
-}
-/**
- * The day a picker's week starts on: its own `firstDayOfWeek`, else, inside a
- * `LocaleProvider`, the first day of the locale the picker uses, else Sunday.
- * Outside a provider it stays Sunday whatever the locale, as it always has,
- * and so does a picker inside one with no locale from either, since the
- * runtime's own differs between the server and the browser.
- *
- * It also stays Sunday for a picker that brings its own `dayNames`. The
- * calendar shows those exactly as given, in calendar order, and before the
- * provider an unset `firstDayOfWeek` was always Sunday, so names written
- * Sunday first would sit a day or more off their columns if the week moved
- * under them.
- */
-function usePickerFirstDayOfWeek(own, locale, hasDayNames) {
-    const inProvider = useLocaleScope() !== null;
-    return React.useMemo(() => {
-        if (own !== undefined)
-            return own;
-        if (!inProvider || !locale || hasDayNames)
-            return 0;
-        try {
-            return localeFirstDay(canonicalLocale(locale));
-        }
-        catch {
-            // A tag Intl refuses: the picker's own formatting says so.
-            return 0;
-        }
-    }, [own, inProvider, locale, hasDayNames]);
-}
-
 const DEFAULT_FORMATS = {
     day: DEFAULT_DATE_FORMAT,
     month: DEFAULT_MONTH_FORMAT,
@@ -28774,6 +29480,7 @@ exports.ToastContainer = ToastContainer;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.Tr = Tr;
+exports.TreeSelect = TreeSelect;
 exports.TreeView = TreeView;
 exports.TreeViewItem = TreeViewItem;
 exports.UnorderedList = UnorderedList;