@homecode/ui 5.6.1 → 5.7.1

package/dist/esm/src/components/Select/Select2.js

@@ -1,7 +1,7 @@
-import { useRef, useState, useMemo, useEffect, useCallback, createElement } from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { mapById, isMultiple, renderLabel } from './Select.helpers.js';
-import { INTERACTION_MODE, getInteractionMode } from '../../tools/dom.js';
+import { isMultiple, renderLabel, isSelectable } from './Select.helpers.js';
+import { getInteractionMode, INTERACTION_MODE } from '../../tools/dom.js';
 import cn from 'classnames';
 import { omit } from '../../tools/object.js';
 import { AssistiveText } from '../AssistiveText/AssistiveText.js';
@@ -15,206 +15,247 @@ import { RequiredStar } from '../RequiredStar/RequiredStar.js';
 import { Scroll } from '../Scroll/Scroll.js';
 import { useThrottle } from '../../hooks/useThrottle.js';
 import useEvent from '../../hooks/useEvent.js';
+import { generateUID } from '../../tools/uid.js';
+import { useSelectedIds, useSelectOptions, useSelectOpenState, useKeyboardNav } from './Select.hooks.js';
 import S from './Select.styl.js';
 
+/** Time given to a pointer press inside the popup before a blur closes it. */
+const BLUR_CLOSE_DELAY = 60;
+const POINTER_PRESS_TTL = 100;
 function Select2(props) {
-    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionClassName, selectedChipClassName, additionalOptions = [], options, variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, } = props;
+    const { className, value, onChange, onChipClick, onSearchChange, disableTriggerArrow, inputProps, popupProps, scrollProps, size = 'm', round, optionsClassName, optionClassName, selectedChipClassName, additionalOptions = [], options = [], variant, label, additionalLabel, error, blur, disabled, trigger, required, hideRequiredStar, isSearchable, presets = [], selectAllButton, clearButton, showSelectedCount, disableLabel, selectedChipRemoveTooltip, selectedChipIds, onOpen, onClose, onFocus, onBlur, } = props;
     const isMultiple$1 = isMultiple(value);
     const closeOnSelect = props.closeOnSelect ?? !isMultiple$1;
+    const instanceId = useRef(generateUID());
     const contentRef = useRef(null);
     const scrollInnerRef = useRef(null);
-    const focusedItemId = useRef(null);
-    const focusedElem = useRef(null);
-    const maxIndex = useRef(-1);
-    const isFirstSelectedMeet = useRef(false);
-    const searchValLower = useRef('');
-    const [searchVal, _setSearchVal] = useState('');
-    const setSearchVal = (val) => {
-        _setSearchVal(val);
-        searchValLower.current = val.toLowerCase();
-    };
-    const [isOpen, setIsOpen] = useState(false);
-    const [isFocused, setIsFocused] = useState(false);
+    const pointerPressedInside = useRef(false);
+    const pressStartedInside = useRef(false);
+    const pointerPressTimer = useRef(0);
+    const blurTimer = useRef(0);
     const [labelClipPath, setLabelClipPath] = useState('');
-    const [focusedItemIndex, setFocusedItemIndex] = useState(-1);
-    // Add tree-related state from Select.tsx
-    const [items, setItems] = useState([]);
-    const ids = useMemo(() => mapById(props.options), [props.options]);
-    // Add basic selection state
-    const [selected, setSelected] = useState(isMultiple$1 ? value : [value]);
-    const [optionsUpdated, setOptionsUpdated] = useState(0);
-    const isErrorVisible = !isOpen && !!error;
-    const triggerProps = useMemo(() => ({
-        label,
-        size,
-        round,
-        variant,
-        ...props.triggerProps,
-    }), [props.triggerProps, label, size, round, variant]);
-    const isSelected = (id) => isMultiple$1
-        ? selected.includes(id)
-        : selected[0] === id;
-    const isClickedInside = (elem) => !!(elem instanceof Element &&
-        (elem.closest(`.${S.root}`) || elem.closest(`.${S.options}`)));
-    const setNewItems = (newItems) => {
-        maxIndex.current = newItems.length - 1;
-        setItems(newItems);
-        setOptionsUpdated(optionsUpdated + 1);
-        if (focusedItemIndex > maxIndex.current && maxIndex.current >= 0) {
-            setFocusedItemIndex(maxIndex.current);
-            focusedItemId.current = newItems[maxIndex.current]?.id;
-        }
-    };
-    const setItemFocus = index => {
-        focusedItemId.current = items[index]?.id;
-        setFocusedItemIndex(index);
-    };
-    const [isSearchActive, setIsSearchActive] = useState(false);
-    const handleSearchChange = (e, value) => {
-        setSearchVal(value);
-        setIsSearchActive(true);
-        onSearchChange?.(value);
-        setNewItems(options.filter(filterOption));
-    };
-    const selectAll = () => {
-        const newValue = options.map(({ id }) => id);
-        setSelected(newValue);
-        onChange?.(newValue);
-    };
-    const dropSelected = () => {
-        setSelected([]);
-        onChange?.([]);
-    };
-    const onFocusedElemRef = elem => {
-        focusedElem.current = elem;
-        if (elem) {
-            const content = contentRef.current;
-            if (!content)
-                return;
-            const { top, bottom } = elem.getBoundingClientRect();
-            const rect = contentRef.current.getBoundingClientRect();
-            const list = scrollInnerRef.current;
-            if (top < rect.top) {
-                list.scrollTop -= rect.top - top;
-            }
-            else if (bottom > rect.bottom) {
-                list.scrollTop += bottom - rect.bottom;
-            }
-        }
-    };
-    const onPopupOpen = () => {
-        setIsOpen(true);
-        if (focusedItemIndex === -1) {
-            setItemFocus(0);
-        }
+    const [isSearching, setIsSearching] = useState(false);
+    const [innerSearchVal, setInnerSearchVal] = useState('');
+    const searchVal = props.searchValue ?? innerSearchVal;
+    const searchQuery = isSearching ? searchVal : '';
+    const { selectedIds, setSelectedIds } = useSelectedIds(value);
+    const { allOptions, visibleOptions, navigableOptions, optionsById } = useSelectOptions({
+        options,
+        additionalOptions,
+        searchQuery,
+    });
+    const handleOpen = useCallback(() => {
         popupProps?.onOpen?.();
         onOpen?.();
-    };
-    const onPopupClose = () => {
-        setIsOpen(false);
-        setSearchVal('');
-        setIsSearchActive(false);
-        setItemFocus(0);
+    }, [popupProps?.onOpen, onOpen]);
+    const handleClose = useCallback(() => {
         popupProps?.onClose?.();
         onClose?.();
+    }, [popupProps?.onClose, onClose]);
+    const { isOpen, open, close } = useSelectOpenState({
+        isOpen: props.isOpen,
+        onOpen: handleOpen,
+        onClose: handleClose,
+    });
+    const isErrorVisible = !isOpen && !!error;
+    const hasChips = isMultiple$1 && selectedIds.length > 0;
+    const isSelected = (id) => selectedIds.includes(id);
+    const getLabel = (id) => optionsById.items[id]?.label || '';
+    const isInsideSelect = (elem) => elem instanceof Element &&
+        Boolean(elem.closest(`[data-select-id="${instanceId.current}"]`));
+    const openIfEnabled = () => {
+        if (disabled)
+            return;
+        open();
     };
-    const onFocus = () => {
-        setIsFocused(true);
+    const resetSearch = () => {
+        setIsSearching(false);
+        setInnerSearchVal('');
+        if (searchVal)
+            onSearchChange?.('');
     };
-    const onBlur = () => {
-        setIsFocused(false);
+    const applySelection = (ids, nextValue) => {
+        setSelectedIds(ids);
+        onChange?.(nextValue);
     };
-    const onOptionHover = useThrottle(id => {
-        const mode = getInteractionMode();
-        if (mode !== INTERACTION_MODE.POINTER)
-            return;
-        const index = items.findIndex(item => item.id === id);
-        setItemFocus(index);
-    }, 100, { trailing: true });
     const onItemToggle = (id) => {
+        if (!isSelectable(optionsById.items[id]))
+            return;
         if (isMultiple$1) {
-            const newValue = isSelected(id)
-                ? selected.filter(i => i !== id)
-                : [...selected, id];
-            setSelected(newValue);
-            onChange?.(newValue);
+            const ids = isSelected(id)
+                ? selectedIds.filter(i => i !== id)
+                : [...selectedIds, id];
+            applySelection(ids, ids);
         }
         else {
-            // mono select
-            const newValue = isSelected(id) ? null : id;
-            const newSelected = isSelected(id) ? [] : [id];
-            setSelected(newSelected);
-            onChange?.(newValue);
+            const nextValue = isSelected(id) ? null : id;
+            applySelection(nextValue === null ? [] : [id], nextValue);
         }
-        setSearchVal('');
+        resetSearch();
         if (closeOnSelect)
-            setIsOpen(false);
+            close();
+    };
+    const selectAll = () => {
+        const ids = allOptions.filter(isSelectable).map(({ id }) => id);
+        applySelection(ids, isMultiple$1 ? ids : (ids[0] ?? null));
+    };
+    const dropSelected = () => applySelection([], isMultiple$1 ? [] : null);
+    const applyPreset = (ids) => applySelection(ids, isMultiple$1 ? ids : (ids[0] ?? null));
+    const { focusedId, setFocusedId } = useKeyboardNav({
+        isOpen,
+        navigableOptions,
+        selectedIds,
+        onSelect: onItemToggle,
+    });
+    const onOptionHover = useThrottle((id) => {
+        if (getInteractionMode() !== INTERACTION_MODE.POINTER)
+            return;
+        setFocusedId(id);
+    }, 100, { trailing: true });
+    const onScrollInnerRef = useCallback((elem) => {
+        scrollInnerRef.current = elem;
+    }, []);
+    const onFocusedElemRef = (elem) => {
+        const content = contentRef.current;
+        const list = scrollInnerRef.current;
+        if (!elem || !content || !list)
+            return;
+        const { top, bottom } = elem.getBoundingClientRect();
+        const rect = content.getBoundingClientRect();
+        if (top < rect.top) {
+            list.scrollTop -= rect.top - top;
+        }
+        else if (bottom > rect.bottom) {
+            list.scrollTop += bottom - rect.bottom;
+        }
+    };
+    const handleSearchChange = (e, val) => {
+        setIsSearching(true);
+        setInnerSearchVal(val);
+        onSearchChange?.(val);
+        openIfEnabled();
+    };
+    const handleFocus = e => {
+        window.clearTimeout(blurTimer.current);
+        onFocus?.(e);
+    };
+    /**
+     * Popup skips its own blur-close while it is controlled, so closing on blur is
+     * up to Select. A press inside the popup blurs the trigger too — that one must
+     * not close the list.
+     */
+    const handleBlur = e => {
+        onBlur?.(e);
+        window.clearTimeout(blurTimer.current);
+        blurTimer.current = window.setTimeout(() => {
+            if (pointerPressedInside.current)
+                return;
+            close();
+        }, BLUR_CLOSE_DELAY);
     };
-    const getLabel = (id) => ids.items[id]?.label || '';
+    const onTriggerPointerDown = () => {
+        if (disabled)
+            return;
+        // A searchable trigger is a text field: pressing it must never close.
+        if (isOpen && !isSearchable)
+            close();
+        else
+            open();
+    };
+    const markPressInside = (isInside) => {
+        window.clearTimeout(pointerPressTimer.current);
+        pointerPressedInside.current = isInside;
+        pointerPressTimer.current = window.setTimeout(() => (pointerPressedInside.current = false), POINTER_PRESS_TTL);
+    };
+    useEvent({
+        event: 'pointerdown',
+        isCapture: true,
+        callback: e => {
+            pressStartedInside.current = isInsideSelect(e.target);
+            markPressInside(pressStartedInside.current);
+        },
+    });
+    useEvent({
+        event: 'pointerup',
+        isCapture: true,
+        callback: () => {
+            // The release can land on the portalled popup that mounted under the
+            // cursor mid-gesture, so the up-target is not a reliable inside signal.
+            if (pressStartedInside.current)
+                markPressInside(true);
+            pressStartedInside.current = false;
+        },
+    });
+    useEvent({
+        event: 'click',
+        isActive: isOpen,
+        callback: e => {
+            // The click concluding a press that started inside must not count as an
+            // outside click: the portalled popup can mount under the cursor, which
+            // retargets the click to a common ancestor outside the select.
+            if (pointerPressedInside.current)
+                return;
+            if (!isInsideSelect(e.target))
+                close();
+        },
+    });
+    useEffect(() => {
+        if (!isOpen)
+            resetSearch();
+    }, [isOpen]);
+    useEffect(() => {
+        if (props.searchValue === undefined)
+            return;
+        setIsSearching(props.searchValue !== '');
+    }, [props.searchValue]);
+    useEffect(() => () => {
+        window.clearTimeout(blurTimer.current);
+        window.clearTimeout(pointerPressTimer.current);
+    }, []);
+    const triggerProps = useMemo(() => ({
+        label,
+        size,
+        round,
+        variant,
+        ...props.triggerProps,
+    }), [props.triggerProps, label, size, round, variant]);
     const getFieldLabel = (label) => {
         if (disableLabel)
             return null;
-        // @ts-ignore
-        const length = value?.length;
-        if (isMultiple$1 && length && showSelectedCount)
-            return `${label} (${length})`;
+        if (isMultiple$1 && selectedIds.length && showSelectedCount)
+            return `${label} (${selectedIds.length})`;
         return label;
     };
-    const filterOption = ({ label }) => {
-        return label.toLowerCase().includes(searchValLower.current);
-    };
-    const selectedLabel = useMemo(() => {
-        if (!isMultiple$1)
-            return getLabel(value);
-        if (!value)
-            return '';
-        return (value
-            // @ts-ignore
-            .reduce((acc, id) => {
-            const label = getLabel(id);
-            return label ? [...acc, label] : acc;
-        }, [])
-            .join(', '));
-    }, [isMultiple$1, value, ids]);
-    const renderSelectedChips = () => {
-        if (!isMultiple$1 || !value || !value.length)
-            return null;
-        return value.map(id => {
-            const label = getLabel(id);
-            if (!label)
-                return null;
-            return (jsx(Chip, { className: cn(S.chip, selectedChipIds?.includes(id) && selectedChipClassName, ids.items[id]?.chipClassName), size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
-        });
-    };
+    const selectedLabel = useMemo(() => selectedIds
+        .map(getLabel)
+        .filter(Boolean)
+        .join(', '), [selectedIds, optionsById]);
     const triggerArrow = useMemo(() => {
         if (disableTriggerArrow || (inputProps?.hasClear && searchVal))
             return null;
         return (jsx(Icon, { type: "chevronDown", className: cn(S.triggerArrow, isOpen && S.isOpen), size: size }));
-    }, [isOpen, searchVal]);
+    }, [disableTriggerArrow, inputProps?.hasClear, searchVal, isOpen, size]);
+    const renderSelectedChips = () => selectedIds.map(id => {
+        const label = getLabel(id);
+        if (!label)
+            return null;
+        return (jsx(Chip, { className: cn(S.chip, selectedChipIds?.includes(id) && selectedChipClassName, optionsById.items[id]?.chipClassName), size: size, selected: selectedChipIds?.includes(id), onRemove: () => onItemToggle(id), onClick: () => onChipClick?.(id), removeTooltip: selectedChipRemoveTooltip, children: label }, id));
+    });
     const renderTriggerInput = () => {
-        const hasChips = isMultiple$1 && value && value.length > 0;
-        const inputValue = isMultiple$1
-            ? isFocused && isSearchActive
-                ? searchVal
-                : ''
-            : isFocused && isSearchActive
-                ? searchVal
-                : selectedLabel;
+        const inputValue = isSearching ? searchVal : isMultiple$1 ? '' : selectedLabel;
         return (jsx(Input, { ...triggerProps, ...inputProps, 
             // TODO: autoComplete
             addonRight: triggerArrow, error: isErrorVisible, value: inputValue, onChange: handleSearchChange, label: getFieldLabel(label), placeholder: hasChips && !inputValue ? '' : inputProps?.placeholder }));
     };
     const renderTriggerButton = () => {
         const { label, className, ...rest } = triggerProps;
-        const props = omit(rest, ['name', 'inputProps']);
-        isMultiple$1 && value && value.length > 0;
+        const buttonProps = omit(rest, ['name', 'inputProps']);
         const fullSelectedLabel = [selectedLabel, additionalLabel].filter(Boolean);
         const hasSelected = fullSelectedLabel.length > 0;
         const displayLabel = hasSelected ? fullSelectedLabel : label;
         const title = hasSelected && !isMultiple$1 ? fullSelectedLabel : null;
-        const isError = isErrorVisible;
-        const classes = cn(S.triggerButton, isError && S.isError, triggerArrow && S.hasTriggerArrow, className);
-        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...props, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), !isMultiple$1 && (jsx(Label, { size: size, isOnTop: hasSelected, isError: isError, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) }))] }));
+        const classes = cn(S.triggerButton, isErrorVisible && S.isError, triggerArrow && S.hasTriggerArrow, className);
+        return (jsxs("div", { children: [jsxs(Button, { className: classes, variant: "default", ...buttonProps, style: { clipPath: labelClipPath }, title: title?.join?.(', '), children: [jsx("div", { className: cn(S.triggerButtonLabel, hasSelected && S.hasSelected), children: displayLabel }), triggerArrow] }), !isMultiple$1 && (jsx(Label, { size: size, isOnTop: hasSelected, isError: isErrorVisible, onClipPathChange: setLabelClipPath, children: getFieldLabel(label) }))] }));
     };
     const renderTrigger = () => {
         if (trigger)
@@ -222,13 +263,12 @@ function Select2(props) {
         const triggerElem = isSearchable
             ? renderTriggerInput()
             : renderTriggerButton();
-        const hasChips = isMultiple$1 && value && value.length > 0;
-        return (jsxs("div", { className: S.trigger, children: [hasChips && (jsx(Scroll, { y: true, className: S.chipsContainer, innerClassName: S.chipContainerInner, size: size, fadeSize: size, autoHide: true, children: renderSelectedChips() })), triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
+        return (jsxs("div", { className: S.trigger, onPointerDown: onTriggerPointerDown, children: [hasChips && (jsx(Scroll, { y: true, className: S.chipsContainer, innerClassName: S.chipContainerInner, size: size, fadeSize: size, autoHide: true, children: renderSelectedChips() })), triggerElem, required && !hideRequiredStar && jsx(RequiredStar, { size: size })] }));
     };
     const renderPresets = () => {
         const items = presets.map(({ label, ids }) => ({
             children: label,
-            onClick: () => setSelected(ids),
+            onClick: () => applyPreset(ids),
             key: label,
         }));
         if (selectAllButton) {
@@ -247,87 +287,25 @@ function Select2(props) {
         }
         if (items.length === 0)
             return null;
-        return (jsx("div", { className: S.presetPanel, children: items.map(props => (jsx(Button, { className: S.presetButton, variant: "clear", ...props }))) }, "preset-panel"));
+        return (jsx("div", { className: S.presetPanel, children: items.map(({ key, ...rest }) => (jsx(Button, { className: S.presetButton, variant: "clear", ...rest }, key))) }, "preset-panel"));
     };
     const renderOption = (item, level = 0) => {
         const { id, isGroupHeader } = item;
-        const isFocused = id === focusedItemId.current;
-        const isSelected = selected.includes(id);
-        const items = [];
-        const className = cn(S.option, isGroupHeader && S.isGroup, isFocused && S.isFocused, isSelected && S.isSelected, S[`level-${level}`], optionClassName);
         const optionProps = {
-            className,
+            className: cn(S.option, isGroupHeader && S.isGroup, id === focusedId && S.isFocused, isSelected(id) && S.isSelected, S[`level-${level}`], optionClassName),
             onPointerUp: () => onItemToggle(id),
             onPointerEnter: () => onOptionHover(id),
         };
-        // @ts-ignore
-        if (isFocused)
+        if (id === focusedId)
             optionProps.ref = onFocusedElemRef;
-        if (isSelected && !isFirstSelectedMeet.current) {
-            isFirstSelectedMeet.current = true;
-        }
-        if (filterOption(item)) {
-            items.unshift(jsx("div", { ...optionProps, children: renderLabel(item) }, id));
-        }
-        return items;
-    };
-    const renderOptions = () => {
-        isFirstSelectedMeet.current = false;
-        return [...additionalOptions, ...items]
-            .map(item => renderOption(item))
-            .flat();
+        return (jsx("div", { ...optionProps, children: renderLabel(item) }, id));
     };
-    useEffect(() => {
-        const items = additionalOptions?.length
-            ? [...additionalOptions, ...options]
-            : options;
-        setNewItems(items);
-    }, [options]);
-    useEffect(() => {
-        setIsOpen(props.isOpen);
-    }, [props.isOpen]);
-    useEffect(() => {
-        const searchVal = props.searchValue;
-        if (searchVal)
-            setSearchVal(searchVal);
-    }, [props.searchValue]);
-    const onKeyDown = useCallback((e) => {
-        const currIndex = focusedItemIndex;
-        if (e.key === 'ArrowUp') {
-            if (currIndex > 0)
-                setItemFocus(currIndex - 1);
-        }
-        if (e.key === 'ArrowDown') {
-            if (currIndex < maxIndex.current)
-                setItemFocus(currIndex + 1);
-        }
-        if (currIndex === -1 || !isOpen)
-            return;
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            onItemToggle(items[currIndex].id);
-        }
-    }, [items, focusedItemIndex, isOpen, selected]);
-    useEvent({
-        event: 'keydown',
-        isActive: isOpen,
-        callback: onKeyDown,
-    });
-    useEvent({
-        event: 'click',
-        // isActive: isMultiple,
-        callback: e => {
-            if (!isClickedInside(e.target)) {
-                setIsOpen(false);
-            }
-        },
-    });
-    const optionsList = useMemo(() => (jsxs("div", { ref: contentRef, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], scrollProps?.className), onInnerRef: elem => (scrollInnerRef.current = elem), key: "items-scroll" }, renderOptions())] })), [items, searchVal, focusedItemIndex, selected]);
+    const optionsList = (jsxs("div", { ref: contentRef, "data-select-id": instanceId.current, children: [renderPresets(), createElement(Scroll, { y: true, ...scrollProps, offset: { y: { before: 10, after: 10 } }, className: cn(S.options, S[`size-${size}`], optionsClassName, scrollProps?.className), onInnerRef: onScrollInnerRef, key: "items-scroll" }, visibleOptions.map(item => renderOption(item)))] }));
     const classes = cn(S.root, className, S[`size-${size}`]);
-    return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, hoverControl: isFocused, blur: blur, isOpen: isOpen, disabled: disabled, ...popupProps, onOpen: onPopupOpen, onClose: onPopupClose, trigger: renderTrigger(), triggerProps: {
-                    onFocus: onFocus,
-                    onBlur: onBlur,
+    return (jsxs(Fragment, { children: [jsx(Popup, { className: classes, direction: "bottom", size: size, focusControl: true, blur: blur, round: round, disabled: disabled, ...popupProps, isOpen: isOpen, onOpen: openIfEnabled, onClose: close, trigger: renderTrigger(), triggerProps: {
+                    'data-select-id': instanceId.current,
+                    onFocus: handleFocus,
+                    onBlur: handleBlur,
                 }, content: optionsList }), isErrorVisible && (jsx(AssistiveText, { variant: "danger", size: size, children: error }))] }));
 }
 

package/dist/esm/src/components/Tooltip/Tooltip.styl.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT{word-wrap:break-word;box-sizing:border-box;height:-moz-fit-content;height:fit-content;max-width:none;overflow-wrap:break-word;white-space:normal}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:after{display:none}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:popover-open{animation:Tooltip_fadeIn__Buhx4 .15s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
+var css_248z = ".Tooltip_trigger__9GSNV{display:inline-block}.Tooltip_tooltip__tzL8q{word-wrap:break-word;background:var(--decent-color-alpha-900);border-radius:4px;box-shadow:0 0 0 1px var(--accent-color-alpha-100);color:var(--accent-color);font-size:14px;line-height:1.4;margin:0;max-width:250px;padding:6px 12px;pointer-events:none;position:fixed;z-index:9999}.Tooltip_tooltip__tzL8q.Tooltip_blur__SQYHW{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:var(--decent-color-alpha-500)}.Tooltip_tooltip__tzL8q:after{content:\"\";position:absolute}.Tooltip_tooltip__tzL8q[data-direction=top]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=top]:after{left:50%;top:100%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=bottom]{transform:translateY(0)}.Tooltip_tooltip__tzL8q[data-direction=bottom]:after{bottom:100%;left:50%;transform:translateX(-50%)}.Tooltip_tooltip__tzL8q[data-direction=left]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=left]:after{left:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q[data-direction=right]{transform:translateX(0)}.Tooltip_tooltip__tzL8q[data-direction=right]:after{right:100%;top:50%;transform:translateY(-50%)}.Tooltip_tooltip__tzL8q:popover-open{animation:Tooltip_fadeIn__Buhx4 .2s ease-out}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT{word-wrap:break-word;box-sizing:border-box;font-size:inherit;height:-moz-fit-content;height:fit-content;line-height:inherit;max-width:none;overflow-wrap:break-word;white-space:normal}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:after{display:none}.Tooltip_tooltip__tzL8q.Tooltip_tooltipOverTrigger__gRUoT:popover-open{animation:Tooltip_fadeIn__Buhx4 .15s ease-out}@keyframes Tooltip_fadeIn__Buhx4{0%{opacity:0}to{opacity:1}}";
 var S = {"trigger":"Tooltip_trigger__9GSNV","tooltip":"Tooltip_tooltip__tzL8q","blur":"Tooltip_blur__SQYHW","fadeIn":"Tooltip_fadeIn__Buhx4","tooltipOverTrigger":"Tooltip_tooltipOverTrigger__gRUoT"};
 styleInject(css_248z);
 

package/dist/esm/src/components/Tooltip/TooltipOverTrigger.js

@@ -2,13 +2,14 @@ import { jsx } from 'react/jsx-runtime';
 import { useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import S from './Tooltip.styl.js';
 import { TooltipCore } from './TooltipCore.js';
-import { applyTriggerTextStyles, getTextStyleSource, clearTriggerTextStyles } from './tooltipTextStyles.js';
+import { getTextStyleSource, applyTriggerTextStyles, clearTriggerTextStyles } from './tooltipTextStyles.js';
 
 function parsePx(value) {
     return Number.parseFloat(value) || 0;
 }
 function applyOverTriggerStyles(contentEl, triggerEl) {
-    const rect = triggerEl.getBoundingClientRect();
+    const textSource = getTextStyleSource(triggerEl);
+    const rect = textSource.getBoundingClientRect();
     const contentComputed = window.getComputedStyle(contentEl);
     const paddingLeft = parsePx(contentComputed.paddingLeft);
     const paddingRight = parsePx(contentComputed.paddingRight);
@@ -21,7 +22,7 @@ function applyOverTriggerStyles(contentEl, triggerEl) {
     contentEl.style.setProperty('transform', 'none');
     contentEl.style.width = `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`;
     contentEl.style.boxSizing = 'border-box';
-    applyTriggerTextStyles(contentEl, getTextStyleSource(triggerEl));
+    applyTriggerTextStyles(contentEl, textSource);
     // Trigger ancestors (e.g. menu items) often use nowrap for ellipsis; allow wrap here.
     contentEl.style.setProperty('white-space', 'normal');
     contentEl.style.setProperty('overflow-wrap', 'break-word');

package/dist/esm/src/components/Tooltip/tooltipTextStyles.js

@@ -30,9 +30,24 @@ const TRIGGER_TEXT_STYLE_PROPS = [
     'overflow-wrap',
     'hyphens',
 ];
+function hasDirectText(el) {
+    return Array.from(el.childNodes).some(node => node.nodeType === Node.TEXT_NODE &&
+        (node.textContent?.trim().length ?? 0) > 0);
+}
 function getTextStyleSource(triggerEl) {
-    const firstChild = triggerEl.firstElementChild;
-    return firstChild instanceof HTMLElement ? firstChild : triggerEl;
+    let source = triggerEl;
+    const walk = (el) => {
+        if (hasDirectText(el)) {
+            source = el;
+        }
+        for (const child of el.children) {
+            if (child instanceof HTMLElement) {
+                walk(child);
+            }
+        }
+    };
+    walk(triggerEl);
+    return source;
 }
 function applyTriggerTextStyles(contentEl, sourceEl) {
     const computed = window.getComputedStyle(sourceEl);