@tap-payments/os-micro-frontend-shared 0.1.396 → 0.1.398-test.1

package/build/components/TableReports/style.js

@@ -1,7 +1,7 @@
 import { styled, Box, alpha } from '@mui/material';
 import { motion } from 'framer-motion';
 export const ExportButton = styled(motion.div, {
-    shouldForwardProp: (props) => props !== 'notificationState' && props !== 'open' && props !== 'loading' && props !== 'ready',
+    shouldForwardProp: (prop) => !['notificationState', 'open', 'loading', 'ready', 'failed'].includes(prop),
 })(({ theme, notificationState, open, loading, ready, failed }) => (Object.assign(Object.assign({ position: 'relative', border: `1px solid ${theme.palette.divider}`, padding: '0 8px', height: 32, borderRadius: '4px', display: 'flex', alignItems: 'center', overflow: 'hidden', fontSize: '11px', fontWeight: 500, color: theme.palette.text.primary, transition: 'width 2s ease-in-out', cursor: 'pointer' }, (((notificationState === null || notificationState === void 0 ? void 0 : notificationState.success) || (notificationState === null || notificationState === void 0 ? void 0 : notificationState.failed)) &&
     !loading &&
     !ready &&

package/build/components/TreeDropdown/TreeDropdown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TreeDropdownProps, TreeDropdownRef } from './type';
+declare const TreeDropdown: import("react").ForwardRefExoticComponent<Readonly<TreeDropdownProps> & import("react").RefAttributes<TreeDropdownRef>>;
+export default TreeDropdown;

package/build/components/TreeDropdown/TreeDropdown.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { SelectedState } from './type';
+import TreeNodeList from './TreeNodeList/TreeNodeList';
+import { initializeTreeMapper, promoteSingleChild, TreeManager, updateSelection } from './utils';
+import TreeDropdownProvider from './context/TreeDropdownProvider';
+const TreeDropdown = forwardRef((props, ref) => {
+    const { anchorEl, placement = 'bottom-start', treeDefinition, sx, onChange, multiple = true, exposeOnlySelectedTree = false, IconComponent, onMounted, } = props;
+    const { header, footer, children: menuItems = [], searchProps, levelKey } = treeDefinition;
+    const [treeMapper, setTreeMapper] = useState({});
+    const onMountedRef = useRef(onMounted);
+    onMountedRef.current = onMounted;
+    const formattedMenuItems = useMemo(() => promoteSingleChild(menuItems || []), [menuItems]);
+    const getFullTree = useCallback(() => TreeManager.denormalizeTree(menuItems, treeMapper), [menuItems, treeMapper]);
+    const getSelectedTree = useCallback(() => TreeManager.extractSelectedBranches(getFullTree()), [getFullTree]);
+    const handleSelect = useCallback((isChecked, targetNode) => {
+        const nextInternal = updateSelection(treeMapper, targetNode.id, isChecked, multiple);
+        setTreeMapper(nextInternal);
+        if (onChange) {
+            if (exposeOnlySelectedTree) {
+                onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
+            }
+            else {
+                onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
+            }
+        }
+    }, [onChange, menuItems, treeMapper, multiple, exposeOnlySelectedTree]);
+    const toggleAll = useCallback((selected) => {
+        const setStatus = (tree, isChecked) => {
+            const next = Object.assign({}, tree);
+            Object.keys(next).forEach((nodeId) => {
+                next[nodeId] = Object.assign(Object.assign({}, next[nodeId]), { status: isChecked ? SelectedState.CHECKED : SelectedState.UNCHECKED });
+            });
+            return next;
+        };
+        const nextInternal = setStatus(treeMapper, selected);
+        setTreeMapper(nextInternal);
+        if (onChange) {
+            if (exposeOnlySelectedTree) {
+                onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
+            }
+            else {
+                onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
+            }
+        }
+    }, [treeMapper, onChange, menuItems, exposeOnlySelectedTree]);
+    useEffect(() => {
+        var _a;
+        const intitialMapper = initializeTreeMapper(menuItems || [], multiple);
+        setTreeMapper(intitialMapper);
+        const tree = TreeManager.denormalizeTree(menuItems, intitialMapper);
+        const selectedTree = TreeManager.extractSelectedBranches(tree);
+        (_a = onMountedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMountedRef, {
+            state: intitialMapper,
+            tree,
+            selectedTree,
+        });
+    }, [menuItems, multiple]);
+    useImperativeHandle(ref, () => ({
+        treeMapper,
+        getFullTree,
+        getSelectedTree,
+        toggleAll,
+    }), [treeMapper, getFullTree, getSelectedTree, toggleAll]);
+    return (_jsx(TreeDropdownProvider, Object.assign({ treeMapper: treeMapper, IconComponent: IconComponent, handleSelect: handleSelect, multiple: multiple }, { children: _jsx(TreeNodeList, { anchorEl: anchorEl, sx: sx, header: header, footer: footer, menuItems: formattedMenuItems, levelKey: levelKey, searchProps: searchProps, placement: placement }) })));
+});
+export default TreeDropdown;

package/build/components/TreeDropdown/TreeNodeItem/SelectionControl.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type SelectionControlProps = {
+    checked: boolean;
+    indeterminate: boolean;
+    onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+declare const SelectionControl: (props: SelectionControlProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectionControl;

package/build/components/TreeDropdown/TreeNodeItem/SelectionControl.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import useTreeDropdown from '../hooks/useTreeDropdown';
+import { StyledCheckbox as Checkbox, StyledRadioButton as RadioButton } from './style';
+import { useCallback } from 'react';
+const SelectionControl = (props) => {
+    const { checked, indeterminate, onSelect } = props;
+    const { multiple } = useTreeDropdown();
+    const handleSelect = useCallback((e) => {
+        e.stopPropagation();
+        onSelect(e);
+    }, [onSelect]);
+    if (multiple) {
+        return _jsx(Checkbox, { size: "small", checked: checked, indeterminate: indeterminate, onChange: handleSelect });
+    }
+    return _jsx(RadioButton, { size: "small", checked: checked, onChange: handleSelect });
+};
+export default SelectionControl;

package/build/components/TreeDropdown/TreeNodeItem/TreeNodeItem.d.ts

@@ -0,0 +1,12 @@
+import { SxProps, Theme } from '@mui/material';
+import { TreeNode } from '../type';
+type InternalTreeNodeItemProps = {
+    levelIndex?: number;
+    nestedMenuSx?: SxProps<Theme>;
+    parentMenuFlipped?: boolean;
+    subLevelKey?: string;
+    disableHovering?: boolean;
+};
+type TreeNodeItemProps = TreeNode & InternalTreeNodeItemProps;
+declare const TreeNodeItem: (props: TreeNodeItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TreeNodeItem;

package/build/components/TreeDropdown/TreeNodeItem/TreeNodeItem.js

@@ -0,0 +1,64 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Stack } from '@mui/material';
+import { blackRightArrowIcon } from '../../../constants/index.js';
+import { StyledMenuItem as Root } from '../style';
+import { SelectedState } from '../type';
+import TreeNodeList from '../TreeNodeList/TreeNodeList';
+import useTreeDropdown from '../hooks/useTreeDropdown';
+import SelectionControl from './SelectionControl';
+import { ArrowIcon, ChildrenCount, Content, HintText, Label } from './style';
+const TreeNodeItem = (props) => {
+    var _a, _b;
+    const { renderItem, header, footer } = props, nodeProps = __rest(props, ["renderItem", "header", "footer"]);
+    const { treeMapper, handleSelect, multiple, IconComponent } = useTreeDropdown();
+    const { label, icon, iconComponent, levelIndex = 0, children, nestedMenuSx, hintText, disableHovering, itemProps, searchProps, subLevelKey, } = nodeProps;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const hasChildren = !!children;
+    const childrenCount = children === null || children === void 0 ? void 0 : children.length;
+    const handleMouseEnter = useCallback((event) => {
+        if (disableHovering)
+            return;
+        setAnchorEl(event.currentTarget);
+    }, [disableHovering]);
+    const handleMouseLeave = useCallback(() => {
+        if (disableHovering)
+            return;
+        setAnchorEl(null);
+    }, [disableHovering]);
+    useEffect(() => {
+        if (disableHovering) {
+            setAnchorEl(null);
+        }
+    }, [disableHovering]);
+    const renderedIcon = useMemo(() => {
+        var _a, _b;
+        if (iconComponent)
+            return iconComponent;
+        if (!icon)
+            return null;
+        return IconComponent ? _jsx(IconComponent, { fileId: icon.fileId, width: (_a = icon.width) !== null && _a !== void 0 ? _a : 20, height: (_b = icon.height) !== null && _b !== void 0 ? _b : 20 }) : null;
+    }, [iconComponent, icon, IconComponent]);
+    const checked = ((_a = treeMapper[nodeProps.id]) === null || _a === void 0 ? void 0 : _a.status) === SelectedState.CHECKED;
+    const indeterminate = multiple ? ((_b = treeMapper[nodeProps.id]) === null || _b === void 0 ? void 0 : _b.status) === SelectedState.INDETERMINATE : false;
+    const showSelectionControl = multiple || !hasChildren;
+    const handleSelectInternal = useCallback((e) => {
+        e.stopPropagation();
+        handleSelect(e.target.checked, nodeProps);
+    }, [handleSelect, nodeProps]);
+    return (_jsxs(Root, Object.assign({ hideCheckbox: true, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-testid": nodeProps.id, onClick: () => {
+            handleSelect(!checked, nodeProps);
+        } }, itemProps, { children: [renderItem ? (renderItem({ nodeProps, checked, indeterminate, onSelect: handleSelectInternal })) : (_jsxs(Content, Object.assign({ width: "100%", "data-testid": "Content" }, { children: [showSelectionControl && _jsx(SelectionControl, { checked: checked, indeterminate: indeterminate, onSelect: handleSelectInternal }), renderedIcon, _jsxs(Stack, Object.assign({ flex: 1, width: "100%", minWidth: 0 }, { children: [_jsx(Label, Object.assign({ title: typeof label === 'string' ? label : undefined }, { children: label })), hintText && _jsx(HintText, Object.assign({ title: typeof hintText === 'string' ? hintText : undefined }, { children: hintText }))] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", spacing: 0.5 }, { children: [childrenCount && _jsx(ChildrenCount, Object.assign({ isOneDigit: Math.floor(childrenCount / 10) === 0 }, { children: childrenCount })), hasChildren && _jsx(ArrowIcon, { src: blackRightArrowIcon, alt: "Expand" })] }))] }))), !!children && (_jsx(TreeNodeList, { anchorEl: anchorEl, menuItems: children, levelIndex: levelIndex + 1, sx: nestedMenuSx, header: header, levelKey: subLevelKey, footer: footer, searchProps: searchProps }))] })));
+};
+export default TreeNodeItem;

package/build/components/TreeDropdown/TreeNodeItem/index.d.ts

@@ -0,0 +1,2 @@
+import TreeNodeItem from './TreeNodeItem';
+export default TreeNodeItem;

package/build/components/TreeDropdown/TreeNodeItem/index.js

@@ -0,0 +1,2 @@
+import TreeNodeItem from './TreeNodeItem';
+export default TreeNodeItem;

package/build/components/TreeDropdown/TreeNodeItem/style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const StyledCheckbox: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledRadioButton: import("@emotion/styled").StyledComponent<import("../../index.js").RadioButtonProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Label: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>;
+export declare const HintText: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>;
+export declare const ChildrenCount: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isOneDigit?: boolean | undefined;
+}, {}, {}>;
+export declare const ArrowIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/TreeDropdown/TreeNodeItem/style.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha, styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { Checkbox, RadioButton } from '../../index.js';
+export const StyledCheckbox = styled(Checkbox)(({ theme }) => ({
+    padding: 0,
+    paddingRight: '4px',
+    width: '14px !important',
+    svg: {
+        width: '12px !important',
+        height: '12px !important',
+    },
+    '&.Mui-disabled': {
+        '[data-testid="IndeterminateCheckBoxIcon"]': {
+            fill: alpha(theme.palette.common.black, 0.26),
+        },
+    },
+}));
+export const StyledRadioButton = styled(RadioButton)({
+    padding: 0,
+});
+export const Content = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    width: '100%',
+    alignItems: 'center',
+    minWidth: 0,
+}));
+export const Label = styled((props) => _jsx(Typography, Object.assign({ noWrap: true, component: "span" }, props)))(({ theme }) => ({
+    flex: 1,
+    fontSize: 'inherit',
+    width: '100%',
+    display: 'inline-block',
+    color: theme.palette.text.primary,
+}));
+export const HintText = styled((props) => _jsx(Typography, Object.assign({ noWrap: true }, props)))(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.5),
+    fontSize: 8,
+}));
+export const ChildrenCount = styled(Box, { shouldForwardProp: (prop) => prop !== 'isOneDigit' })(({ theme, isOneDigit = true }) => (Object.assign({ borderRadius: isOneDigit ? '50%' : '4px', background: theme.palette.divider, width: isOneDigit ? 13 : 'auto', height: 14, fontSize: '8px', fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: '10px' }, (!isOneDigit && { padding: '0 3px' }))));
+export const ArrowIcon = styled('img')(() => ({
+    height: 12,
+}));

package/build/components/TreeDropdown/TreeNodeList/List.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const List: ({ children, onScroll }: {
+    children: React.ReactNode;
+    onScroll: (e: React.UIEvent<HTMLElement, UIEvent>) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default List;

package/build/components/TreeDropdown/TreeNodeList/List.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useScrolledTo } from '../../../hooks/index.js';
+import { useCallback, useMemo, useRef } from 'react';
+import { ListOuterContainer, ListInnerContainer } from './style';
+const List = ({ children, onScroll }) => {
+    const containerRef = useRef(null);
+    const { scrolledToBottom, scrolledToTop, scrollable, handleScroll: handleScrolling } = useScrolledTo({ containerRef });
+    const classes = useMemo(() => {
+        return [scrolledToBottom && 'scrolled-to-bottom', scrolledToTop && 'scrolled-to-top', scrollable && 'scrollable'].filter(Boolean).join(' ');
+    }, [scrolledToBottom, scrolledToTop, scrollable]);
+    const handleScroll = useCallback((e) => {
+        onScroll(e);
+        handleScrolling(e);
+    }, [onScroll, handleScrolling]);
+    return (_jsx(ListOuterContainer, Object.assign({ sx: { position: 'relative' }, className: classes }, { children: _jsx(ListInnerContainer, Object.assign({ ref: containerRef, onScroll: handleScroll }, { children: children })) })));
+};
+export default List;

package/build/components/TreeDropdown/TreeNodeList/TreeNodeList.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { PopperProps } from '@mui/material/Popper';
+import { SxProps, Theme } from '@mui/material/styles';
+import { TreeNode } from '../type';
+type TreeNodeListProps = {
+    menuItems: TreeNode[];
+    anchorEl: HTMLElement | null;
+    sx?: SxProps<Theme>;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    levelIndex?: number;
+    levelKey?: TreeNode['levelKey'];
+    searchProps?: TreeNode['searchProps'];
+    placement?: PopperProps['placement'];
+};
+declare const TreeNodeList: (props: TreeNodeListProps) => import("react/jsx-runtime").JSX.Element;
+export default TreeNodeList;

package/build/components/TreeDropdown/TreeNodeList/TreeNodeList.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { alpha } from '@mui/material/styles';
+import { grayCloseIcon, searchIcon } from '../../../constants/index.js';
+import { Section } from '../style';
+import TreeNodeItem from '../TreeNodeItem';
+import List from './List';
+import { Root, SearchInput } from './style';
+import useSearch from '../hooks/useSearch';
+const TreeNodeList = (props) => {
+    var _a, _b;
+    const { anchorEl, sx, levelIndex = 0, placement, menuItems, header, footer, levelKey, searchProps } = props;
+    const [isScrolling, setIsScrolling] = useState(false);
+    const open = !!anchorEl;
+    const searchEnabled = !!searchProps;
+    const { searchText, filteredItems, handleSearch, handleReset } = useSearch(Object.assign(Object.assign({}, searchProps), { enabled: searchEnabled, items: menuItems }));
+    const timeout = useRef();
+    const handleScroll = useCallback(() => {
+        setIsScrolling(true);
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            setIsScrolling(false);
+        }, 100);
+    }, []);
+    useEffect(() => () => clearTimeout(timeout.current), []);
+    return (_jsx(Root, Object.assign({ open: open, anchorEl: anchorEl, placement: levelIndex > 0 ? 'right-start' : placement, "data-level": levelIndex, "data-level-key": levelKey, onClick: (e) => e.stopPropagation(), sx: Object.assign(Object.assign({}, sx), { '&.MuiPopper-dropdown': {
+                '&:after': {
+                    display: 'none',
+                },
+            } }) }, { children: _jsxs(Stack, Object.assign({ divider: _jsx(Divider, { flexItem: true }) }, { children: [header && _jsx(Section, { children: header }), searchEnabled && (_jsxs(Stack, Object.assign({ divider: _jsx(Divider, { flexItem: true, sx: { my: 1 } }) }, { children: [_jsx(Box, Object.assign({ sx: { p: 1 } }, { children: _jsx(SearchInput, Object.assign({}, searchProps === null || searchProps === void 0 ? void 0 : searchProps.inputProps, { placeholder: (_b = (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.inputProps) === null || _a === void 0 ? void 0 : _a.placeholder) !== null && _b !== void 0 ? _b : 'Search...', onChange: handleSearch, value: searchText, inputProps: { autoComplete: 'off' }, endAdornment: _jsx(Box, Object.assign({ component: "img", "data-icon": searchText ? 'close' : 'search', src: searchText ? grayCloseIcon : searchIcon, alt: "search", className: "icon" }, (searchText && { sx: { cursor: 'pointer' } }), { onClick: handleReset })) })) })), filteredItems.length === 0 && (searchProps === null || searchProps === void 0 ? void 0 : searchProps.noResultsText) && (_jsx(Typography, Object.assign({ component: "div", fontSize: 10, color: (theme) => alpha(theme.palette.text.primary, 0.4), textAlign: "center", minHeight: 36, fontWeight: 500, display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsx("span", { children: "No results found" }) })))] }))), _jsx(List, Object.assign({ onScroll: handleScroll }, { children: filteredItems.map((item, index) => (_jsx(TreeNodeItem, Object.assign({ disableHovering: isScrolling }, item, { levelIndex: levelIndex, subLevelKey: item.levelKey, nestedMenuSx: sx }), `${levelIndex}-${item.id}-${index}`))) })), footer && _jsx(Section, { children: footer })] })) })));
+};
+export default TreeNodeList;

package/build/components/TreeDropdown/TreeNodeList/index.d.ts

@@ -0,0 +1,2 @@
+import TreeNodeList from './TreeNodeList';
+export default TreeNodeList;

package/build/components/TreeDropdown/TreeNodeList/index.js

@@ -0,0 +1,2 @@
+import TreeNodeList from './TreeNodeList';
+export default TreeNodeList;

package/build/components/TreeDropdown/TreeNodeList/style.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Root: import("@emotion/styled").StyledComponent<Omit<import("../../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ListOuterContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ListInnerContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const SearchInput: import("@emotion/styled").StyledComponent<Readonly<import("@mui/material").InputProps & {
+    isError?: boolean | undefined;
+}> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/TreeDropdown/TreeNodeList/style.js

@@ -0,0 +1,60 @@
+import { styled } from '@mui/material/styles';
+import { Input, Menu } from '../../index.js';
+export const Root = styled(Menu)({
+    maxHeight: '100%',
+});
+export const ListOuterContainer = styled('div')({
+    position: 'relative',
+    '&:before, &:after': {
+        display: 'none',
+    },
+    '&.scrollable': {
+        position: 'relative',
+        '&::before, &::after': {
+            display: 'block',
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            width: '100%',
+            height: '20px',
+            opacity: 1,
+            pointerEvents: 'none',
+            zIndex: 2,
+            transition: 'opacity 0.3s ease-out',
+        },
+        '&::before': {
+            top: 0,
+            background: 'linear-gradient(to top, transparent, rgba(255, 255, 255, 1))',
+        },
+        '&::after': {
+            bottom: 0,
+            background: 'linear-gradient(to bottom, transparent, rgba(255, 255, 255, 1))',
+        },
+    },
+    '&.scrolled-to-top': {
+        '&::before': {
+            opacity: 0,
+        },
+    },
+    '&.scrolled-to-bottom': {
+        '&::after': {
+            opacity: 0,
+        },
+    },
+});
+export const ListInnerContainer = styled('ul')({
+    listStyle: 'none',
+    padding: 0,
+    margin: 0,
+    maxHeight: 300,
+    overflow: 'auto',
+});
+export const SearchInput = styled(Input)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    '& .MuiInputBase-input': {
+        color: '#000000',
+    },
+    '.icon': {
+        width: 14,
+    },
+}));

package/build/components/TreeDropdown/context/TreeDropdownProvider.d.ts

@@ -0,0 +1,15 @@
+import { type PropsWithChildren } from 'react';
+import { TreeMapper, TreeNode } from '../type';
+type TreeDropdownContextType = {
+    treeMapper: TreeMapper;
+    handleSelect: (isChecked: boolean, targetNode: TreeNode) => void;
+    multiple?: boolean;
+    IconComponent?: React.ComponentType<{
+        fileId: string;
+        width?: number | string;
+        height?: number | string;
+    }>;
+};
+export declare const TreeDropdownContext: import("react").Context<TreeDropdownContextType>;
+declare const TreeDropdownProvider: ({ children, treeMapper, handleSelect, multiple, IconComponent }: PropsWithChildren<TreeDropdownContextType>) => import("react/jsx-runtime").JSX.Element;
+export default TreeDropdownProvider;

package/build/components/TreeDropdown/context/TreeDropdownProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, createContext } from 'react';
+// eslint-disable-next-line react-refresh/only-export-components
+export const TreeDropdownContext = createContext({
+    treeMapper: {},
+    handleSelect: () => { },
+    multiple: false,
+});
+const TreeDropdownProvider = ({ children, treeMapper, handleSelect, multiple, IconComponent }) => {
+    const ctxValues = useMemo(() => ({ treeMapper, handleSelect, multiple, IconComponent }), [treeMapper, handleSelect, multiple, IconComponent]);
+    return _jsx(TreeDropdownContext.Provider, Object.assign({ value: ctxValues }, { children: children }));
+};
+export default TreeDropdownProvider;

package/build/components/TreeDropdown/hooks/useSearch.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TreeNode } from '../type';
+type UseSearchProps = {
+    initialValue?: string;
+    getValues?: (item: TreeNode) => string[];
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    items: TreeNode[];
+    debounceMs?: number;
+    enabled?: boolean;
+};
+declare const useSearch: (props: UseSearchProps) => {
+    searchText: string;
+    filteredItems: TreeNode[];
+    handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleReset: () => void;
+};
+export default useSearch;

package/build/components/TreeDropdown/hooks/useSearch.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+const useSearch = (props) => {
+    const { initialValue = '', getValues, onChange, items, enabled = false, debounceMs = 300 } = props;
+    const [searchText, setSearchText] = useState(initialValue);
+    const [debouncedText, setDebouncedText] = useState(initialValue);
+    const debouncedUpdate = useMemo(() => debounce((value) => {
+        setDebouncedText(value);
+    }, debounceMs), [debounceMs]);
+    useEffect(() => {
+        debouncedUpdate(searchText);
+        return () => debouncedUpdate.cancel();
+    }, [debouncedUpdate, searchText]);
+    const handleSearch = useCallback((e) => {
+        const value = e.target.value;
+        setSearchText(value);
+        debouncedUpdate(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(e);
+    }, [onChange, debouncedUpdate]);
+    const handleReset = useCallback(() => {
+        setSearchText('');
+        setDebouncedText('');
+        debouncedUpdate.cancel();
+        onChange === null || onChange === void 0 ? void 0 : onChange({ target: { value: '' } });
+    }, [onChange, debouncedUpdate]);
+    const filteredItems = useMemo(() => {
+        if (!enabled || !debouncedText.trim())
+            return items;
+        if (!getValues) {
+            console.error('`searchProps.getValues` is required for searching, provide it on the tree node level or the global search props');
+            return items;
+        }
+        const matchedText = debouncedText.toLowerCase();
+        return items.filter((item) => getValues(item).some((value) => value.toLowerCase().includes(matchedText)));
+    }, [items, debouncedText, getValues, enabled]);
+    return { searchText, filteredItems, handleSearch, handleReset };
+};
+export default useSearch;

package/build/components/TreeDropdown/hooks/useTreeDropdown.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare const useTreeDropdown: () => {
+    treeMapper: import("..").TreeMapper;
+    handleSelect: (isChecked: boolean, targetNode: import("..").TreeNode) => void;
+    multiple?: boolean | undefined;
+    IconComponent?: import("react").ComponentType<{
+        fileId: string;
+        width?: string | number | undefined;
+        height?: string | number | undefined;
+    }> | undefined;
+};
+export default useTreeDropdown;

package/build/components/TreeDropdown/hooks/useTreeDropdown.js

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { TreeDropdownContext } from '../context/TreeDropdownProvider';
+const useTreeDropdown = () => {
+    const context = useContext(TreeDropdownContext);
+    if (!context) {
+        throw new Error(`'useTreeDropdown' must be used within an 'TreeDropdownProvider'`);
+    }
+    return context;
+};
+export default useTreeDropdown;

package/build/components/TreeDropdown/index.d.ts

@@ -0,0 +1,4 @@
+import TreeDropdown from './TreeDropdown';
+export default TreeDropdown;
+export { TreeManager } from './utils';
+export * from './type';

package/build/components/TreeDropdown/index.js

@@ -0,0 +1,4 @@
+import TreeDropdown from './TreeDropdown';
+export default TreeDropdown;
+export { TreeManager } from './utils';
+export * from './type';

package/build/components/TreeDropdown/style.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const CollapseIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    expanded: boolean;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const LoadingRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Section: import("@emotion/styled").StyledComponent<import("../MenuItem/MenuItem").MenuItemProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/TreeDropdown/style.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { MenuItem } from '../index.js';
+export const CollapseIcon = styled('img', { shouldForwardProp: (props) => props !== 'expanded' })(({ theme, expanded }) => ({
+    transform: !expanded ? 'rotate(0deg)' : 'rotate(180deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+        duration: theme.transitions.duration.shortest,
+    }),
+}));
+export const LoadingRow = styled(Box)(() => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBlock: '4px',
+    borderTop: '1px solid #F2F2F2',
+}));
+export const StyledMenuItem = styled(MenuItem)({
+    minWidth: 120,
+    minHeight: 36,
+    maxHeight: 36,
+    paddingTop: 0,
+    paddingBottom: 0,
+    backgroundColor: '#fff',
+    '--menuitem-border-rad': '4px',
+    '&:hover': {
+        boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.13)',
+        zIndex: 1,
+    },
+});
+export const Section = styled((props) => _jsx(StyledMenuItem, Object.assign({ hideCheckbox: true }, props)))(({ theme }) => ({
+    fontSize: 11,
+    fontWeight: 500,
+    color: theme.palette.grey['700'],
+    minHeight: 36,
+    maxHeight: 'auto',
+    cursor: 'auto',
+    ':hover': {
+        boxShadow: 'none',
+        zIndex: 1,
+    },
+}));