@antscorp/antsomi-ui 2.0.110 → 2.0.112

package/es/components/molecules/EyedropperButton/EyedropperButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Button, Popover, Typography } from 'antd';
+import tinycolor from 'tinycolor2';
+import { useEyedropper } from '@antscorp/antsomi-ui/es/hooks';
+import { ColorizeIcon } from '../../icons';
+import { ColorSwatch, ColorText, PopoverContent } from './styled';
+const { Text } = Typography;
+export const EyedropperButton = ({ onColorPick, size = 'middle', type = 'text', disabled = false, className, showIcon = true, }) => {
+    const { isLoading, apiSupported, pickColor, copyToClipboard } = useEyedropper();
+    const [popoverVisible, setPopoverVisible] = useState(false);
+    const [currentColor, setCurrentColor] = useState(null);
+    const handlePickColor = useCallback(async () => {
+        const color = await pickColor();
+        if (color) {
+            setCurrentColor(color);
+            const copySuccess = await copyToClipboard(color);
+            if (copySuccess) {
+                setPopoverVisible(true);
+                setTimeout(() => {
+                    setPopoverVisible(false);
+                }, 2000);
+            }
+            onColorPick?.(color);
+        }
+    }, [copyToClipboard, onColorPick, pickColor]);
+    const renderPopoverContent = useCallback(() => {
+        if (!currentColor)
+            return null;
+        const isLight = tinycolor(currentColor).isLight();
+        return (_jsxs(PopoverContent, { children: [_jsx(ColorSwatch, { "$color": currentColor }), _jsxs("div", { children: [_jsx(Text, { type: "secondary", style: { fontSize: '12px' }, children: "\u0110\u00E3 copy:" }), _jsx("br", {}), _jsx(ColorText, { color: currentColor, "$isLight": isLight, children: currentColor })] })] }));
+    }, [currentColor]);
+    return (_jsx(Popover, { content: renderPopoverContent(), title: "M\u00E0u \u0111\u00E3 tr\u00EDch xu\u1EA5t", trigger: ['click'], open: popoverVisible, onOpenChange: setPopoverVisible, placement: "top", children: _jsx(Button, { type: type, size: size, icon: showIcon ? _jsx(ColorizeIcon, { size: 16 }) : undefined, onClick: handlePickColor, loading: isLoading, disabled: disabled || isLoading || !apiSupported, className: className, title: !apiSupported ? 'Trình duyệt không hỗ trợ EyeDropper API' : 'Trích xuất màu từ màn hình' }) }));
+};

package/es/components/molecules/EyedropperButton/index.js

@@ -0,0 +1 @@
+"use strict";

package/es/components/molecules/EyedropperButton/styled.d.ts

@@ -0,0 +1,7 @@
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;
+export declare const PopoverContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ColorText: import("styled-components").StyledComponent<"span", any, {
+    $isLight: boolean;
+}, never>;

package/es/components/molecules/EyedropperButton/styled.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+export const ColorSwatch = styled.div `
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: ${props => props.$color};
+  border: 1px solid #d9d9d9;
+  flex-shrink: 0;
+`;
+export const PopoverContent = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+`;
+export const ColorText = styled.span `
+  background-color: ${props => props.color};
+  color: ${props => (props.$isLight ? '#000' : '#fff')};
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 12px;
+`;

package/es/components/molecules/FontSizeInput/FontSizeInput.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FontSizeInputProps, HandlerRef } from './types';
+export declare const FontSizeInput: import("react").ForwardRefExoticComponent<FontSizeInputProps & import("react").RefAttributes<HandlerRef>>;

package/es/components/molecules/FontSizeInput/FontSizeInput.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useState, useImperativeHandle, useEffect, useRef, useMemo, } from 'react';
+import clsx from 'clsx';
+import { useElementSize } from '@antscorp/antsomi-ui/es/hooks';
+import { DEFAULT_FONT_SIZE, DEFAULT_FONT_SIZE_OPTIONS } from './constants';
+import { CLS } from './utils';
+import { FontSizeDropdown } from './components/FontSizeDropdown';
+import { FontSizeControl } from './components/FontSizeControl';
+export const FontSizeInput = forwardRef((props, ref) => {
+    const { min = 1, max = 300, value: valueProp, defaultValue = DEFAULT_FONT_SIZE, options = DEFAULT_FONT_SIZE_OPTIONS, placeholder, style, className, disabled, dropdownProps, onFocus, onBlur, onChange = () => undefined, } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [popoverValue, setPopoverValue] = useState(null);
+    const [initialPopoverValue, setInitialPopoverValue] = useState(null);
+    const [inputRef, { width: inputWidth }] = useElementSize();
+    const isControlled = valueProp !== undefined;
+    const value = isControlled ? +valueProp : +uncontrolledValue;
+    const popoverItemRefs = useRef(new Map());
+    const fontSizeOptions = useMemo(() => options.map(option => ({
+        size: option,
+        label: option.toString(),
+        className: clsx(CLS.PopoverListItem, {
+            [CLS.PopoverListItemSelected]: option === (value || initialPopoverValue),
+        }),
+    })), [options, value, initialPopoverValue]);
+    useEffect(() => {
+        if (!isPopoverOpen) {
+            setPopoverValue(null);
+        }
+        if (isPopoverOpen && popoverValue) {
+            popoverItemRefs.current.get(popoverValue)?.focus();
+        }
+    }, [popoverValue, isPopoverOpen]);
+    const handleInputFocus = (event) => {
+        onFocus?.(value, event);
+        setIsPopoverOpen(true);
+        if (!popoverValue && fontSizeOptions.some(item => item.size === value)) {
+            setInitialPopoverValue(value);
+        }
+    };
+    const handleInputBlur = (event) => {
+        onBlur?.(value, event);
+        if (!popoverValue) {
+            setIsPopoverOpen(false);
+        }
+    };
+    const handleValueChange = useCallback((newValue, info) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onChange(newValue, info);
+    }, [isControlled, onChange]);
+    const handleKeyDown = useCallback((e) => {
+        const currentSize = popoverValue ?? value;
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === currentSize);
+        const firstFontSize = fontSizeOptions.at(0);
+        const lastFontSize = fontSizeOptions.at(-1);
+        switch (e.key) {
+            case 'Enter': {
+                handleValueChange(uncontrolledValue, { type: 'input' });
+                inputRef.current?.blur();
+                break;
+            }
+            case 'ArrowDown': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    // Infinite scroll: go to first item when reaching the end
+                    const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (firstFontSize) {
+                    setPopoverValue(firstFontSize.size);
+                }
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                if (currentFocusIndex !== -1) {
+                    // Infinite scroll: go to last item when reaching the beginning
+                    const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
+                    setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                }
+                else if (lastFontSize) {
+                    setPopoverValue(lastFontSize.size);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, inputRef, popoverValue, uncontrolledValue, value, handleValueChange]);
+    const handleClickPopoverItem = useCallback((size) => {
+        handleValueChange(size, { type: 'dropdown' });
+        setIsPopoverOpen(false);
+        inputRef.current?.blur();
+    }, [handleValueChange, inputRef]);
+    const handlePopoverItemKeydown = useCallback((e, size) => {
+        const currentFocusIndex = fontSizeOptions.findIndex(item => item.size === popoverValue);
+        switch (e.key) {
+            case 'Enter': {
+                handleClickPopoverItem(size);
+                break;
+            }
+            case 'ArrowDown': {
+                // Infinite scroll: go to first item when reaching the end
+                const nextFocusIndex = (currentFocusIndex + 1) % fontSizeOptions.length;
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            case 'ArrowUp': {
+                // Infinite scroll: go to last item when reaching the beginning
+                const nextFocusIndex = (currentFocusIndex - 1 + fontSizeOptions.length) % fontSizeOptions.length;
+                setPopoverValue(fontSizeOptions[nextFocusIndex].size);
+                e.stopPropagation();
+                break;
+            }
+            default:
+                break;
+        }
+    }, [fontSizeOptions, popoverValue, handleClickPopoverItem]);
+    useImperativeHandle(ref, () => ({
+        closeDropdown: () => setIsPopoverOpen(false),
+    }));
+    const content = (_jsx(FontSizeControl, { disabled: disabled, ref: inputRef, className: className, value: popoverValue ?? value, max: max, min: min, keyboard: false, defaultValue: defaultValue, style: style, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyDown: handleKeyDown, onChange: newValue => {
+            if (newValue === null)
+                return;
+            setUncontrolledValue(Number(newValue));
+        }, onIncrement: () => handleValueChange(value + 1, { type: 'input' }), onDecrement: () => handleValueChange(value - 1, { type: 'input' }) }));
+    if (options.length) {
+        return (_jsx(FontSizeDropdown, { isOpen: isPopoverOpen, options: fontSizeOptions, popoverValue: popoverValue, initialPopoverValue: initialPopoverValue, width: inputWidth, itemRefs: popoverItemRefs, onItemClick: handleClickPopoverItem, onItemKeyDown: handlePopoverItemKeydown, onClose: () => setIsPopoverOpen(false), getPopupContainer: () => dropdownProps?.getPopupContainer?.() || document.body, children: content }));
+    }
+    return content;
+});

package/es/components/molecules/FontSizeInput/components/FontSizeControl.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { InputNumberProps } from 'antd';
+interface FontSizeControlProps extends InputNumberProps {
+    onIncrement: () => void;
+    onDecrement: () => void;
+}
+export declare const FontSizeControl: import("react").ForwardRefExoticComponent<FontSizeControlProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/es/components/molecules/FontSizeInput/components/FontSizeControl.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputNumber } from 'antd';
+import { forwardRef } from 'react';
+import { ControlButton, InputRoot } from '../styled';
+import { CLS } from '../utils';
+import clsx from 'clsx';
+import { AddIcon, MinusIcon } from '../../../icons';
+export const FontSizeControl = forwardRef(({ onIncrement, onDecrement, ...rest }, ref) => (_jsxs(InputRoot, { children: [_jsx(ControlButton, { type: "text", onClick: onDecrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.min !== 'number' ||
+                rest.value <= rest.min, children: _jsx(MinusIcon, { size: 14 }) }), _jsx(InputNumber, { ref: ref, className: clsx(CLS.Input, rest.className), parser: value => value?.replace(/[^\d]/g, ''), controls: false, ...rest }), _jsx(ControlButton, { type: "text", onClick: onIncrement, disabled: rest.disabled ||
+                typeof rest.value !== 'number' ||
+                typeof rest.max !== 'number' ||
+                rest.value >= rest.max, children: _jsx(AddIcon, { size: 14 }) })] })));

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.d.ts

@@ -0,0 +1,21 @@
+import { RefObject } from 'react';
+type FontSizeOption = {
+    size: number;
+    label: string;
+    className: string;
+};
+interface FontSizeDropdownProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    options: FontSizeOption[];
+    popoverValue: number | null;
+    initialPopoverValue?: number | null;
+    width: number;
+    itemRefs: RefObject<Map<number, HTMLLIElement>>;
+    onItemClick: (size: number) => void;
+    onItemKeyDown: (e: React.KeyboardEvent, size: number) => void;
+    onClose: () => void;
+    getPopupContainer?: () => HTMLElement;
+}
+export declare const FontSizeDropdown: ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, initialPopoverValue, }: FontSizeDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/FontSizeInput/components/FontSizeDropdown.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover } from 'antd';
+import { CLS } from '../utils';
+import { StyledListFont, StyledListItemFont } from '../styled';
+export const FontSizeDropdown = ({ children, isOpen, options, popoverValue, width, itemRefs, onItemClick, onItemKeyDown, onClose, getPopupContainer, initialPopoverValue, }) => {
+    const content = (_jsx(StyledListFont, { role: "list", className: CLS.PopoverList, style: { width: `${width}px` }, onMouseDown: e => e.preventDefault(), children: options.map((i, idx) => {
+            const isFocused = i.size === (popoverValue || initialPopoverValue);
+            return (_jsx(StyledListItemFont, { ref: el => {
+                    if (!el || !itemRefs.current)
+                        return;
+                    itemRefs.current.set(i.size, el);
+                }, role: "listitem", className: i.className, "aria-posinset": idx + 1, "aria-setsize": options.length, tabIndex: isFocused ? 0 : -1, onClick: () => onItemClick(i.size), onKeyDown: e => onItemKeyDown(e, i.size), ...(isFocused && {
+                    onBlur: onClose,
+                }), children: i.label }, i.size));
+        }) }));
+    return (_jsx(Popover, { arrow: false, open: isOpen, overlayClassName: CLS.Popover, overlayInnerStyle: {
+            borderRadius: 4,
+        }, content: content, getPopupContainer: getPopupContainer, placement: "bottom", children: children }));
+};

package/es/components/molecules/FontSizeInput/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_FONT_SIZE_OPTIONS: number[];
+export declare const DEFAULT_FONT_SIZE: number;

package/es/components/molecules/FontSizeInput/constants.js

@@ -0,0 +1,5 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const DEFAULT_FONT_SIZE_OPTIONS = [
+    8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72, 96,
+];
+export const DEFAULT_FONT_SIZE = THEME.token?.fontSize || 14;

package/es/components/molecules/FontSizeInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FontSizeInput';
+export type { FontSizeInputProps, HandlerRef as FontSizeInputHandlerRef } from './types';

package/es/components/molecules/FontSizeInput/index.js

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

package/es/components/molecules/FontSizeInput/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledListFont: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const StyledListItemFont: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const InputRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ControlButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;

package/es/components/molecules/FontSizeInput/styled.js

@@ -0,0 +1,39 @@
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Button } from 'antd';
+import styled from 'styled-components';
+import { CLS } from './utils';
+export const StyledListFont = styled.ul `
+  &.${CLS.PopoverList} {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+  }
+`;
+export const StyledListItemFont = styled.li `
+  &.${CLS.PopoverListItem} {
+    padding: 6px 10px;
+    cursor: pointer;
+    text-align: center;
+
+    &:hover,
+    &:focus,
+    &:focus-visible,
+    &.${CLS.PopoverListItemSelected} {
+      outline: none;
+      background-color: ${THEME.components?.Menu?.itemHoverBg};
+    }
+  }
+`;
+export const InputRoot = styled.div `
+  display: flex;
+  align-items: center;
+  width: fit-content;
+`;
+export const ControlButton = styled(Button) `
+  &.antsomi-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    padding: 0px;
+  }
+`;

package/es/components/molecules/FontSizeInput/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export interface HandlerRef {
+    closeDropdown: () => void;
+}
+export interface FontSizeInputProps {
+    value: number;
+    min?: number;
+    max?: number;
+    defaultValue?: number;
+    options?: number[];
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (value: number, info: {
+        type: 'input' | 'dropdown';
+    }) => void;
+    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement>) => void;
+    dropdownProps?: {
+        getPopupContainer?: () => HTMLElement | null;
+    };
+}

package/es/components/molecules/FontSizeInput/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/molecules/FontSizeInput/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const CLS: {
+    Popover: string;
+    PopoverList: string;
+    PopoverListItem: string;
+    PopoverListItemSelected: string;
+    Input: string;
+};

package/es/components/molecules/FontSizeInput/utils.js

@@ -0,0 +1,9 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+const componentCls = antsomiClsx('font-size-input');
+export const CLS = {
+    Popover: componentCls('popover'),
+    PopoverList: componentCls('popover-list'),
+    PopoverListItem: componentCls('popover-list-item'),
+    PopoverListItemSelected: componentCls('popover-list-item-selected'),
+    Input: componentCls('input'),
+};

package/es/components/molecules/SearchPopover/SearchPopover.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { SearchPopoverProps } from './types';
-export declare const SearchPopover: (props: SearchPopoverProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchPopover: React.FC<SearchPopoverProps>;

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -4,8 +4,8 @@ import clsx from 'clsx';
 import { StyledInput } from './styled';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { SearchIcon } from '../../icons';
-export const SearchPopover = (props) => {
-    const { inputSearchProps = {}, ...popoverProps } = props;
+export const SearchPopover = props => {
+    const { inputSearchProps = {}, inputSearchRef, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: inputSearchRef, placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
 };

package/es/components/molecules/SearchPopover/styled.d.ts

@@ -1 +1,12 @@
-export declare const StyledInput: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+    readonly DefaultInput: import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+        Group: import("react").FC<import("antd/es/input").GroupProps>;
+        Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+        TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    };
+    readonly CustomSearch: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    readonly TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+}, any, {}, never>;

package/es/components/molecules/SearchPopover/styled.js

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Input } from '../../atoms/Input';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(props => _jsx(Input, { ...props })) `
+export const StyledInput = styled(Input) `
   &.antsomi-input-group-wrapper {
     padding: 8px 10px;
     border-bottom: 1px solid var(--divider-1);

package/es/components/molecules/SearchPopover/types.d.ts

@@ -1,7 +1,7 @@
-import { PopoverProps } from 'antd';
-import { InputProps } from '../../atoms/Input';
+import type { InputRef, PopoverProps } from 'antd';
+import type { InputProps } from '../../atoms/Input';
 import React, { PropsWithChildren } from 'react';
-import { MenuInlineProps } from '../VirtualizedMenu/types';
+import type { MenuInlineProps } from '../VirtualizedMenu/types';
 export type SearchConfig = {
     searchWithKey?: boolean;
 };
@@ -9,6 +9,7 @@ export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps & {
         searchConfig?: SearchConfig;
     };
+    inputSearchRef?: React.RefObject<InputRef>;
     isAllowEmpty?: boolean;
     noItemContent?: React.ReactNode;
 } & PopoverProps>;

package/es/components/molecules/VirtualizedMenu/VirtualizedMenu.d.ts

@@ -8,6 +8,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { memo, useMemo, useRef, useCallback } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -19,6 +19,7 @@ export const Item = memo((props) => {
     const expanded = hasChildren && expandedKeys.has(item.data.key);
     const selected = selectedKeys.has(item.data.key);
     const disabled = item.data?.disabled;
+    const displayOnly = item.data?.displayOnly;
     const indentSize = item.level * inlineIndent;
     const itemStyle = {
         ...style,
@@ -31,6 +32,7 @@ export const Item = memo((props) => {
         [CLS.Item.selected]: selected,
         [CLS.Item.expanded]: expanded,
         [CLS.Item.disabled]: disabled,
+        [CLS.Item.displayOnly]: displayOnly,
     }, item.data.className);
     const handleItemRef = useCallback((el) => {
         if (!el)
@@ -39,7 +41,7 @@ export const Item = memo((props) => {
         item.data.ref(el);
     }, [item.data]);
     const handleOnClick = (event, elKey) => {
-        if (!onClick || disabled)
+        if (!onClick || disabled || displayOnly)
             return;
         onClick({ item, index, elKey, domEvent: event });
     };
@@ -67,11 +69,7 @@ export const Item = memo((props) => {
     }, [item.id, normalizeTreeItems, selectedKeys]);
     const className = clsx(itemClassName, {
         [CLS.Item.selectedDescendant]: isSelectedDescendant,
+        [CLS.Item.focused]: isFocused,
     });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: "treeitem", tabIndex: isFocused ? 0 : -1, "aria-selected": selected, "aria-disabled": disabled, "aria-expanded": expanded, "aria-level": item.level, "aria-posinset": index + 1, "aria-setsize": items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+    return (_jsxs(MenuItemRoot, { "data-selected": !!selected, "data-focused": isFocused, ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
-import { ItemType } from '../../types';
-export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Partial<{
-    items: ItemType[];
+/// <reference types="react" />
+export declare const MenuInline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Partial<{
+    items: import("../../types").ItemType[];
     inlineIndent: number;
     inlinePadding: number;
     itemSpacing: number;
@@ -9,15 +8,16 @@ export declare const MenuInline: React.MemoExoticComponent<React.ForwardRefExoti
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
-        item: ItemType;
-        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
+        item: import("../../types").ItemType;
+        domEvent?: import("react").MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: import("react").ReactNode | ((item: import("../../types").ItemType, others: {
+        expandEl: import("react").ReactNode;
+    }) => import("react").ReactNode);
 }> & {
     mode?: "inline" | undefined;
-} & React.RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;
+} & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;