@astral/ui 4.106.0 → 4.107.0

package/node/components/TagsList/useLogic/hooks/useHoverDelay/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useHoverDelay"), exports);

package/node/components/TagsList/useLogic/hooks/useHoverDelay/types.d.ts

@@ -0,0 +1,20 @@
+export type UseHoverDelayResult = {
+    /**
+     * Запускает отсчёт задержки. Повторный вызов перезапускает отсчёт
+     */
+    start: () => void;
+    /**
+     * Отменяет отсчёт, если он не завершился
+     */
+    cancel: () => void;
+};
+export type UseHoverDelayParams = {
+    /**
+     * Функция, вызывающаяся при hover-эффекте после задержки
+     */
+    onHover: () => void;
+    /**
+     * Задержка вызова функции в мс
+     */
+    delay: number;
+};

package/node/components/TagsList/useLogic/hooks/useHoverDelay/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/TagsList/useLogic/hooks/useHoverDelay/useHoverDelay.d.ts

@@ -0,0 +1,5 @@
+import { type UseHoverDelayParams, type UseHoverDelayResult } from './types';
+/**
+ * Откладывает вызов на время удержания указателя над элементом.
+ */
+export declare const useHoverDelay: ({ delay, onHover, }: UseHoverDelayParams) => UseHoverDelayResult;

package/node/components/TagsList/useLogic/hooks/useHoverDelay/useHoverDelay.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHoverDelay = void 0;
+const react_1 = require("react");
+/**
+ * Откладывает вызов на время удержания указателя над элементом.
+ */
+const useHoverDelay = ({ delay, onHover, }) => {
+    const timeoutRef = (0, react_1.useRef)(undefined);
+    const savedOnHoverRef = (0, react_1.useRef)(onHover);
+    (0, react_1.useEffect)(() => {
+        savedOnHoverRef.current = onHover;
+    });
+    const cancel = () => {
+        if (timeoutRef.current === undefined) {
+            return;
+        }
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = undefined;
+    };
+    const start = () => {
+        cancel();
+        timeoutRef.current = setTimeout(() => {
+            timeoutRef.current = undefined;
+            savedOnHoverRef.current();
+        }, delay);
+    };
+    (0, react_1.useEffect)(() => cancel, []);
+    return { start, cancel };
+};
+exports.useHoverDelay = useHoverDelay;

package/node/components/TagsList/useLogic/useLogic.d.ts

@@ -1,15 +1,27 @@
-/// <reference types="react" />
+import { type CSSProperties, type MouseEvent, type SyntheticEvent } from 'react';
 import type { TagsListProps, TagValue } from '../types';
 type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
-export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth, }: UseLogicParams<TData>) => {
+export declare const useLogic: <TData extends TagValue>({ data, keyId, isDisabled, getOptionLabel, onChange, onClick, inputContainerRef, fieldRef, reservedWidth, }: UseLogicParams<TData>) => {
     visibleOptions: TData[];
     hiddenCount: number;
     showCounter: boolean;
     tagsContainerRef: import("react").RefObject<HTMLDivElement | null>;
+    counterRef: import("react").RefObject<HTMLDivElement | null>;
     getTagProps: (option: TData) => {
         label: string | number;
         shrinks: boolean;
         onDelete: () => void;
     };
+    isPopoverOpen: boolean;
+    isPopoverEnabled: boolean;
+    setPopoverContentRef: (node: HTMLDivElement | null) => void;
+    popoverContentCssVars: CSSProperties;
+    stopPopoverEventPropagation: (event: SyntheticEvent) => void;
+    popoverAnchorEl: HTMLElement | null;
+    closePopover: () => void;
+    startPopoverDelay: () => void;
+    cancelPopoverDelay: () => void;
+    handleTagClick: (event: MouseEvent<HTMLDivElement>) => void;
+    handleCounterClick: (event: MouseEvent<HTMLDivElement>) => void;
 };
 export {};

package/node/components/TagsList/useLogic/useLogic.js

@@ -3,14 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useTheme_1 = require("../../theme/hooks/useTheme");
+const useClickAwayEffect_1 = require("../../useClickAwayEffect");
+const useNewToggle_1 = require("../../useNewToggle");
+const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
 const utils_1 = require("../utils");
-const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRef, reservedWidth = 0, }) => {
+const useHoverDelay_1 = require("./hooks/useHoverDelay");
+const useLogic = ({ data = [], keyId, isDisabled, getOptionLabel, onChange, onClick, inputContainerRef, fieldRef, reservedWidth = 0, }) => {
     const [visibleOptions, setVisibleOptions] = (0, react_1.useState)([]);
     const [hiddenCount, setHiddenCount] = (0, react_1.useState)(0);
+    const [isPopoverOpen, togglePopover] = (0, useNewToggle_1.useNewToggle)(false);
+    const [isPopoverContentMounted, togglePopoverContentMounted] = (0, useNewToggle_1.useNewToggle)(false);
+    /**
+     * Ширина окна и якорь позиционирования фиксируются на момент открытия
+     * и дальше не пересчитываются
+     */
+    const [popoverWidth, setPopoverWidth] = (0, react_1.useState)(0);
+    const [popoverAnchorEl, setPopoverAnchorEl] = (0, react_1.useState)(null);
     const tagsContainerRef = (0, react_1.useRef)(null);
     const availableWidthRef = (0, react_1.useRef)(0);
+    const popoverContentRef = (0, react_1.useRef)(null);
+    const counterRef = (0, react_1.useRef)(null);
     const theme = (0, useTheme_1.useTheme)();
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    const openPopover = () => {
+        const field = fieldRef.current;
+        if (isPopoverOpen || !field) {
+            return;
+        }
+        setPopoverWidth((0, utils_1.calculatePopoverWidth)(field.getBoundingClientRect().width, data.map((item) => getOptionLabel(item).toString()), theme));
+        setPopoverAnchorEl(field);
+        togglePopover(true);
+    };
+    const closePopover = () => togglePopover(false);
     /**
      * Обновляет доступную ширину для расчета количества отображаемых тегов
      */
@@ -67,6 +92,7 @@ const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRe
         if (!data.length) {
             setVisibleOptions([]);
             setHiddenCount(0);
+            closePopover();
             return;
         }
         const resizeObserver = new ResizeObserver(() => {
@@ -105,12 +131,66 @@ const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputContainerRe
         return { label, shrinks: false, onDelete };
     };
     const showCounter = hiddenCount > 0;
+    const { start: startPopoverDelay, cancel: cancelPopoverDelay } = (0, useHoverDelay_1.useHoverDelay)({ onHover: openPopover, delay: constants_1.POPOVER_HOVER_DELAY });
+    const setPopoverContentRef = (0, react_1.useCallback)((node) => {
+        popoverContentRef.current = node;
+        togglePopoverContentMounted(Boolean(node));
+    }, []);
+    const popoverExcludedNodes = (0, react_1.useMemo)(() => [counterRef], []);
+    (0, useClickAwayEffect_1.useClickAwayEffect)({
+        ref: popoverContentRef,
+        onClickAway: closePopover,
+        isActive: isPopoverOpen && isPopoverContentMounted,
+        excludeNodes: popoverExcludedNodes,
+    });
+    const isPopoverEnabled = !isMobile && !isDisabled;
+    const handleTagClick = (event) => {
+        event.stopPropagation();
+        onClick?.(event);
+    };
+    const handleCounterClick = (event) => {
+        event.stopPropagation();
+        cancelPopoverDelay();
+        // На мобильной ширине и в заблокированном поле у счётчика прежнее поведение — список опций
+        if (!isPopoverEnabled) {
+            onClick?.(event);
+            return;
+        }
+        if (isPopoverOpen) {
+            closePopover();
+            return;
+        }
+        openPopover();
+    };
+    /**
+     * Окно живёт в портале, но синтетические события React всплывают по дереву
+     * компонентов и доходят до обработчиков поля: у MUI Select это `handleMouseDown`,
+     * который переводит фокус на поле и открывает список, у TreeLike* — `onClick` поля
+     */
+    const stopPopoverEventPropagation = (event) => {
+        event.stopPropagation();
+    };
+    const popoverContentCssVars = {
+        '--tags-list-popover-width': `${popoverWidth}px`,
+    };
     return {
         visibleOptions,
         hiddenCount,
         showCounter,
         tagsContainerRef,
+        counterRef,
         getTagProps,
+        isPopoverOpen,
+        isPopoverEnabled,
+        setPopoverContentRef,
+        popoverContentCssVars,
+        stopPopoverEventPropagation,
+        popoverAnchorEl,
+        closePopover,
+        startPopoverDelay,
+        cancelPopoverDelay,
+        handleTagClick,
+        handleCounterClick,
     };
 };
 exports.useLogic = useLogic;

package/node/components/TagsList/utils/calculatePopoverWidth/calculatePopoverWidth.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from '../../../theme/types';
+/**
+ * Вычисляет ширину всплывающего окна
+ */
+export declare const calculatePopoverWidth: (fieldWidth: number, tagLabels: string[], theme: Theme) => number;

package/node/components/TagsList/utils/calculatePopoverWidth/calculatePopoverWidth.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculatePopoverWidth = void 0;
+const constants_1 = require("../../constants");
+const getTagWidth_1 = require("../getTagWidth");
+const getSpacingValue = (theme, spacing) => parseInt(theme.spacing(spacing), 10);
+/**
+ * Минимальная ширина popover: вмещает в строку POPOVER_MIN_TAGS_IN_ROW самых
+ * широких тэгов вместе с отступом между ними и отступами контейнера
+ */
+const getMinWidth = (tagLabels, theme) => {
+    const widestTagWidths = tagLabels
+        .map((label) => (0, getTagWidth_1.getTagWidth)(label, theme))
+        .sort((current, next) => next - current)
+        .slice(0, constants_1.POPOVER_MIN_TAGS_IN_ROW);
+    const tagsWidth = widestTagWidths.reduce((width, tagWidth) => width + tagWidth, 0);
+    const gapsWidth = Math.max(widestTagWidths.length - 1, 0) *
+        getSpacingValue(theme, constants_1.POPOVER_TAGS_GAP_SPACING);
+    const paddingsWidth = getSpacingValue(theme, constants_1.POPOVER_TAGS_PADDING_SPACING) * 2;
+    return tagsWidth + gapsWidth + paddingsWidth;
+};
+/**
+ * Вычисляет ширину всплывающего окна
+ */
+const calculatePopoverWidth = (fieldWidth, tagLabels, theme) => Math.min(Math.max(fieldWidth, getMinWidth(tagLabels, theme)), constants_1.POPOVER_MAX_WIDTH);
+exports.calculatePopoverWidth = calculatePopoverWidth;

package/node/components/TagsList/utils/calculatePopoverWidth/index.d.ts

@@ -0,0 +1 @@
+export * from './calculatePopoverWidth';

package/node/components/TagsList/utils/calculatePopoverWidth/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./calculatePopoverWidth"), exports);

package/node/components/TagsList/utils/index.d.ts

@@ -3,3 +3,4 @@ export { getKey } from './getKey';
 export { getTagWidth } from './getTagWidth';
 export { getAvailableWidth } from './getAvailableWidth';
 export { calculateVisibleTagsCount } from './calculateVisibleTagsCount';
+export { calculatePopoverWidth } from './calculatePopoverWidth';

package/node/components/TagsList/utils/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculateVisibleTagsCount = exports.getAvailableWidth = exports.getTagWidth = exports.getKey = exports.getElementByText = void 0;
+exports.calculatePopoverWidth = exports.calculateVisibleTagsCount = exports.getAvailableWidth = exports.getTagWidth = exports.getKey = exports.getElementByText = void 0;
 var getElementByText_1 = require("./getElementByText");
 Object.defineProperty(exports, "getElementByText", { enumerable: true, get: function () { return getElementByText_1.getElementByText; } });
 var getKey_1 = require("./getKey");
@@ -11,3 +11,5 @@ var getAvailableWidth_1 = require("./getAvailableWidth");
 Object.defineProperty(exports, "getAvailableWidth", { enumerable: true, get: function () { return getAvailableWidth_1.getAvailableWidth; } });
 var calculateVisibleTagsCount_1 = require("./calculateVisibleTagsCount");
 Object.defineProperty(exports, "calculateVisibleTagsCount", { enumerable: true, get: function () { return calculateVisibleTagsCount_1.calculateVisibleTagsCount; } });
+var calculatePopoverWidth_1 = require("./calculatePopoverWidth");
+Object.defineProperty(exports, "calculatePopoverWidth", { enumerable: true, get: function () { return calculatePopoverWidth_1.calculatePopoverWidth; } });

package/node/components/TreeLikeAsyncAutocomplete/Input/Input.js

@@ -12,13 +12,14 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, onClick: onClick, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)(({ disabled, onChange: propsOnChange, value, inputRef, hideHelperText = false, onClick, isLoading, ...restProps }, forwardedRef) => {
-    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, } = (0, useLogic_1.useLogic)({
+    const { isVisibleClearButton, isVisibleTagsList, onChange, textFieldProps, onClearAll, fieldRef, } = (0, useLogic_1.useLogic)({
         inputRef,
+        InputProps: restProps.InputProps,
         value,
         onChange: propsOnChange,
         disabled,
         onClick,
         isLoading,
     });
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { children: [isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "small" })) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) }))] }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, hideHelperText: hideHelperText, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, ...textFieldProps, InputProps: { ...restProps.InputProps, ref: fieldRef }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: value, keyId: "id", isDisabled: disabled, fieldRef: fieldRef, getOptionLabel: (option) => option.label, onClick: onClick, onChange: onChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.IconWrapper, { children: [isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: onClearAll })), isLoading ? ((0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "small" })) : ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) }))] }) }));
 });

package/node/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.d.ts

@@ -1,13 +1,14 @@
 import { type MouseEvent, type SyntheticEvent } from 'react';
 import { type TreeLikeAsyncAutocompleteValue } from '../../types';
 import type { InputProps } from '../types';
-type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'onChange' | 'isLoading' | 'onClick'>;
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
+type UseLogicParams = Pick<InputProps, 'value' | 'disabled' | 'inputRef' | 'InputProps' | 'onChange' | 'isLoading' | 'onClick'>;
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }: UseLogicParams) => {
     isVisibleClearButton: boolean;
     onClearAll: (event: SyntheticEvent<HTMLButtonElement>) => void;
     onChange: (newValue: TreeLikeAsyncAutocompleteValue | undefined) => void;
     onClick: (event: MouseEvent<HTMLDivElement>) => void;
     isVisibleTagsList: boolean;
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     textFieldProps: {
         value: string;
         $isHidden: boolean;

package/node/components/TreeLikeAsyncAutocomplete/Input/useLogic/useLogic.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForwardedRef_1 = require("../../../useForwardedRef");
-const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange: propsOnChange, onClick: propsOnClick, }) => {
+const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange: propsOnChange, onClick: propsOnClick, }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
+    const fieldRef = (0, useForwardedRef_1.useForwardedRef)(externalInputProps?.ref);
     const prevValue = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (value && !prevValue.current) {
@@ -43,6 +44,7 @@ const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onCh
         onChange,
         onClick,
         isVisibleTagsList: hasValue,
+        fieldRef,
         textFieldProps: {
             value: preparedValue,
             $isHidden: hasValue,

package/node/components/TreeLikeAutocomplete/Input/Input.js

@@ -11,7 +11,7 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const ClearButton = ({ disabled, onClick }) => ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, title: constants_1.CLEAR_TEXT, "aria-label": constants_1.CLEAR_TEXT, onClick: onClick, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) }));
 exports.Input = (0, react_1.forwardRef)((props, forwardedRef) => {
-    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, } = (0, useLogic_1.useLogic)(props);
+    const { textFieldProps, isVisibleTagsList, isVisibleClearButton, handleChange, handleClearAll, fieldRef, } = (0, useLogic_1.useLogic)(props);
     const { value, valueToRender, disabled, isLoading, onChange, onClick, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTextField, { ...restProps, ref: forwardedRef, disabled: disabled, inputProps: { readOnly: true }, InputProps: { ...restProps.InputProps, ref: fieldRef }, startAdornment: isVisibleTagsList && ((0, jsx_runtime_1.jsx)(styles_1.StyledTagsList, { data: valueToRender, keyId: "id", isDisabled: disabled, fieldRef: fieldRef, getOptionLabel: (option) => option.label, onClick: onClick, onChange: handleChange })), endAdornment: (0, jsx_runtime_1.jsxs)(styles_1.EndAdornmentWrapper, { children: [isLoading && (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}), isVisibleClearButton && ((0, jsx_runtime_1.jsx)(ClearButton, { disabled: disabled, onClick: handleClearAll })), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", color: "grey", disabled: disabled, children: (0, jsx_runtime_1.jsx)(DownOutlineMd_1.DownOutlineMd, {}) })] }), onClick: onClick, ...textFieldProps }));
 });

package/node/components/TreeLikeAutocomplete/Input/useLogic/useLogic.d.ts

@@ -2,12 +2,13 @@ import { type SyntheticEvent } from 'react';
 import { type TreeListData } from '../../../Tree';
 import type { TreeLikeAutocompleteValue } from '../../types';
 import { type InputProps } from '../types';
-export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }: InputProps) => {
+export declare const useLogic: ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }: InputProps) => {
     textFieldProps: {
         $isHidden: boolean;
         inputRef: import("react").RefObject<HTMLInputElement | null>;
         value: string | TreeLikeAutocompleteValue;
     };
+    fieldRef: import("react").RefObject<HTMLElement | null>;
     isVisibleTagsList: boolean;
     isVisibleClearButton: boolean;
     handleChange: (newValue: TreeListData[] | undefined) => void;

package/node/components/TreeLikeAutocomplete/Input/useLogic/useLogic.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useForwardedRef_1 = require("../../../useForwardedRef");
-const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onChange, }) => {
+const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, InputProps: externalInputProps, onChange, }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
+    const fieldRef = (0, useForwardedRef_1.useForwardedRef)(externalInputProps?.ref);
     const prevValue = (0, react_1.useRef)(undefined);
     (0, react_1.useEffect)(() => {
         if (value && !prevValue.current) {
@@ -41,6 +42,7 @@ const useLogic = ({ value, disabled, isLoading, inputRef: externalInputRef, onCh
             inputRef,
             value: preparedValue,
         },
+        fieldRef,
         isVisibleTagsList: hasValue,
         isVisibleClearButton,
         handleChange,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.106.0",
+  "version": "4.107.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {