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

package/build/components/TableCells/CustomCells/ReferenceCell/style.js

@@ -10,7 +10,9 @@ export const StyledSourceImage = styled('img')(() => ({
     maxWidth: '36px',
     maxHeight: '24px',
 }));
-export const ReferenceSourcesContainer = styled(motion.span)(({ theme, sourcesCount }) => ({
+export const ReferenceSourcesContainer = styled(motion.span, {
+    shouldForwardProp: (prop) => prop !== 'sourcesCount',
+})(({ theme, sourcesCount }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-start',

package/build/components/TableCells/CustomCells/StatusCell/style.js

@@ -46,7 +46,9 @@ export const statusAnimation = (index, shadow, xDelta) => ({
 export const StatusIcon = styled(motion.span)(({ isTextShown, theme }) => (Object.assign({ border: `1px solid ${theme.palette.divider}`, borderRadius: '12px', backgroundColor: theme.palette.background.paper, height: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', minWidth: isTextShown ? 'auto' : '36px' }, (isTextShown && {
     border: 'none',
 }))));
-export const StatusWrapper = styled(motion.div)(({ statusesCount }) => ({
+export const StatusWrapper = styled(motion.div, {
+    shouldForwardProp: (prop) => prop !== 'statusesCount',
+})(({ statusesCount }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',

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,
+    },
+}));

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

@@ -0,0 +1,89 @@
+/// <reference types="react" />
+import { Input, MenuItem } from '../index.js';
+import { type SxProps, type Theme } from '@mui/material/styles';
+import { PopperProps } from '@mui/material/Popper';
+export type TreeNodeIcon = {
+    fileId: string;
+    width?: number | string;
+    height?: number | string;
+};
+export type ExtendableObject<T> = T extends Record<string, any> ? T & Record<string, any> : never;
+export type OnTreeMountedParams = {
+    state: TreeMapper;
+    tree: TreeNode[];
+    selectedTree: TreeNode[];
+};
+export type TreeDropdownProps = {
+    onMounted?: (params: OnTreeMountedParams) => void;
+    onChange?: (tree: TreeNode[]) => void;
+    multiple?: boolean;
+    anchorEl: HTMLElement | null;
+    placement?: PopperProps['placement'];
+    sx?: SxProps<Theme>;
+    treeDefinition: TreeDefinition;
+    exposeOnlySelectedTree?: boolean;
+    IconComponent?: React.ComponentType<{
+        fileId: string;
+        width?: number | string;
+        height?: number | string;
+    }>;
+};
+export type TreeDropdownRef = {
+    treeMapper: TreeMapper;
+    getFullTree: () => TreeNode[];
+    getSelectedTree: () => TreeNode[];
+    toggleAll: (selected: boolean) => void;
+};
+export type TreeNode = ExtendableObject<{
+    id: string;
+    label?: React.ReactNode;
+    hintText?: React.ReactNode;
+    icon?: TreeNodeIcon;
+    iconComponent?: React.ReactNode;
+    itemProps?: React.ComponentProps<typeof MenuItem>;
+    renderItem?: (params: {
+        nodeProps: TreeNode;
+        checked?: boolean;
+        indeterminate?: boolean;
+        onSelect: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    }) => React.ReactNode;
+}> & TreeDefinition;
+export type TreeDefinition = {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    /**
+     * [Optional] Used to determine the level of the node in the tree
+     * It will appear as data attribute over the list element.
+     * ```
+     * <div ... data-level-key="some-unique-key"> ... </div>
+     * ```
+     */
+    levelKey?: string;
+    searchProps?: {
+        /**
+         * ### [Required For Search]
+         * The function to get the value of the item for the search
+         */
+        getValues: (item: TreeNode) => string[];
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        noResultsText?: React.ReactNode;
+        inputProps?: React.ComponentProps<typeof Input>;
+    };
+    children?: TreeNode[];
+    disablePromotion?: boolean;
+    status?: `${SelectedState}`;
+};
+export declare enum SelectedState {
+    CHECKED = "CHECKED",
+    UNCHECKED = "UNCHECKED",
+    INDETERMINATE = "INDETERMINATE"
+}
+export type SelectedItems = {
+    [key: string]: `${SelectedState}`;
+};
+export type TreeMapper = {
+    [nodeKey: string]: {
+        status: `${SelectedState}`;
+        _parents?: string[];
+    };
+};

package/build/components/TreeDropdown/type.js

@@ -0,0 +1,6 @@
+export var SelectedState;
+(function (SelectedState) {
+    SelectedState["CHECKED"] = "CHECKED";
+    SelectedState["UNCHECKED"] = "UNCHECKED";
+    SelectedState["INDETERMINATE"] = "INDETERMINATE";
+})(SelectedState || (SelectedState = {}));

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

@@ -0,0 +1,21 @@
+import { TreeMapper, TreeNode } from './type';
+export declare function promoteSingleChild(items: TreeNode[]): TreeNode[];
+export declare const getAncestorIdsByNodeId: (nodeId: string, nodes: TreeNode[], path?: TreeNode[]) => TreeNode[] | null;
+export declare function collectCheckedIds(nodes: TreeNode[], multiple: boolean, acc?: string[]): string[];
+export declare function normalizeStructure(nodes: TreeNode[], parents?: string[], acc?: TreeMapper, isParentSelected?: boolean): TreeMapper;
+export declare function initializeTreeMapper(nodes: TreeNode[], multiple: boolean): TreeMapper;
+export declare function denormalizeTree(nodes: TreeNode[], state: TreeMapper): TreeNode[];
+export declare function updateTreeSelection(tree: TreeMapper, targetNodeId: string, isChecked: boolean): TreeMapper;
+export declare function extractSelectedBranches(nodes: TreeNode[]): TreeNode[];
+export declare function resetTreeState(tree: TreeMapper): TreeMapper;
+export declare function updateSelection(tree: TreeMapper, targetNode: string, isChecked: boolean, multiple: boolean): TreeMapper;
+export type GetNodesByLevelOptions = {
+    filter?: (node: TreeNode) => boolean;
+    includeChildren?: boolean;
+};
+export declare function filterNodesByLevelKey(nodes: TreeNode[], levelKey: string): TreeNode[];
+export declare const TreeManager: {
+    denormalizeTree: import("memoize-one").MemoizedFn<(tree: TreeNode[], mapper: TreeMapper) => TreeNode[]>;
+    extractSelectedBranches: import("memoize-one").MemoizedFn<(nodes: TreeNode[]) => TreeNode[]>;
+    filterNodesByLevelKey: import("memoize-one").MemoizedFn<(nodes: TreeNode[], levelKey: string) => TreeNode[]>;
+};

package/build/components/TreeDropdown/utils.js

@@ -0,0 +1,161 @@
+import memoizeOne from 'memoize-one';
+import { SelectedState } from './type';
+export function promoteSingleChild(items) {
+    function promote(item) {
+        var _a, _b, _c;
+        let children = item.children ? item.children.map(promote) : undefined;
+        // Promote children if exactly one child exists and it has children
+        if ((children === null || children === void 0 ? void 0 : children.length) === 1 && ((_a = children[0].children) === null || _a === void 0 ? void 0 : _a.length) && !children[0].disablePromotion) {
+            const onlyChild = children[0];
+            children = onlyChild.children;
+            item = Object.assign(Object.assign({}, item), { header: (_b = onlyChild.header) !== null && _b !== void 0 ? _b : item.header, footer: (_c = onlyChild.footer) !== null && _c !== void 0 ? _c : item.footer });
+        }
+        return Object.assign(Object.assign({}, item), { children });
+    }
+    return items.map(promote);
+}
+export const getAncestorIdsByNodeId = (nodeId, nodes, path = []) => {
+    for (const node of nodes) {
+        if (node.id === nodeId) {
+            return [...path, node];
+        }
+        if (node.children) {
+            const found = getAncestorIdsByNodeId(nodeId, node.children, [...path, node]);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+};
+export function collectCheckedIds(nodes, multiple, acc = []) {
+    for (const node of nodes) {
+        if (node.status === SelectedState.CHECKED) {
+            acc.push(node.id);
+        }
+        if (node.children) {
+            collectCheckedIds(node.children, multiple, acc);
+        }
+    }
+    return acc;
+}
+export function normalizeStructure(nodes, parents = [], acc = {}, isParentSelected = false) {
+    var _a;
+    for (const node of nodes) {
+        const status = isParentSelected ? SelectedState.CHECKED : (_a = node.status) !== null && _a !== void 0 ? _a : SelectedState.UNCHECKED;
+        acc[node.id] = Object.assign({ status }, (parents.length ? { _parents: parents } : {}));
+        if (node.children) {
+            normalizeStructure(node.children, [...parents, node.id], acc, status === SelectedState.CHECKED);
+        }
+    }
+    return acc;
+}
+export function initializeTreeMapper(nodes, multiple) {
+    const base = normalizeStructure(nodes);
+    const checkedIds = collectCheckedIds(nodes, multiple);
+    let next = base;
+    for (const id of checkedIds) {
+        next = updateTreeSelection(next, id, true);
+    }
+    return next;
+}
+export function denormalizeTree(nodes, state) {
+    return nodes.map((node) => {
+        var _a, _b;
+        return (Object.assign(Object.assign({}, node), { status: (_b = (_a = state[node.id]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : SelectedState.UNCHECKED, children: node.children ? denormalizeTree(node.children, state) : undefined }));
+    });
+}
+function buildChildrenMap(tree) {
+    var _a;
+    const map = {};
+    for (const key of Object.keys(tree)) {
+        const parents = tree[key]._parents;
+        if (!(parents === null || parents === void 0 ? void 0 : parents.length))
+            continue;
+        const parent = parents[parents.length - 1];
+        (_a = map[parent]) !== null && _a !== void 0 ? _a : (map[parent] = []);
+        map[parent].push(key);
+    }
+    return map;
+}
+export function updateTreeSelection(tree, targetNodeId, isChecked) {
+    const next = structuredClone(tree);
+    const childrenMap = buildChildrenMap(tree);
+    const targetStatus = isChecked ? SelectedState.CHECKED : SelectedState.UNCHECKED;
+    function updateDown(node) {
+        var _a;
+        next[node].status = targetStatus;
+        for (const child of (_a = childrenMap[node]) !== null && _a !== void 0 ? _a : []) {
+            updateDown(child);
+        }
+    }
+    function updateUp(node) {
+        var _a;
+        const parents = next[node]._parents;
+        if (!(parents === null || parents === void 0 ? void 0 : parents.length))
+            return;
+        const parent = parents[parents.length - 1];
+        const siblings = (_a = childrenMap[parent]) !== null && _a !== void 0 ? _a : [];
+        const statuses = siblings.map((id) => next[id].status);
+        if (statuses.every((s) => s === SelectedState.CHECKED)) {
+            next[parent].status = SelectedState.CHECKED;
+        }
+        else if (statuses.every((s) => s === SelectedState.UNCHECKED)) {
+            next[parent].status = SelectedState.UNCHECKED;
+        }
+        else {
+            next[parent].status = SelectedState.INDETERMINATE;
+        }
+        updateUp(parent);
+    }
+    updateDown(targetNodeId);
+    updateUp(targetNodeId);
+    return next;
+}
+export function extractSelectedBranches(nodes) {
+    function visit(node) {
+        var _a;
+        const children = (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(visit).filter(Boolean);
+        const isSelected = node.status === SelectedState.CHECKED || node.status === SelectedState.INDETERMINATE;
+        if (isSelected || (children && children.length > 0)) {
+            return Object.assign(Object.assign({}, node), { children });
+        }
+        return null;
+    }
+    return nodes.map(visit).filter(Boolean);
+}
+export function resetTreeState(tree) {
+    const next = {};
+    for (const key in tree) {
+        next[key] = Object.assign({ status: SelectedState.UNCHECKED }, (tree[key]._parents ? { _parents: tree[key]._parents } : {}));
+    }
+    return next;
+}
+export function updateSelection(tree, targetNode, isChecked, multiple) {
+    if (multiple) {
+        return updateTreeSelection(tree, targetNode, isChecked);
+    }
+    // SINGLE SELECT
+    if (!isChecked) {
+        // unchecking in single mode clears everything
+        return resetTreeState(tree);
+    }
+    const cleared = resetTreeState(tree);
+    return updateTreeSelection(cleared, targetNode, true);
+}
+export function filterNodesByLevelKey(nodes, levelKey) {
+    const result = [];
+    function walk(node) {
+        var _a;
+        if (node.levelKey === levelKey) {
+            result.push(node);
+        }
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((child) => walk(child));
+    }
+    nodes.forEach(walk);
+    return result;
+}
+export const TreeManager = {
+    denormalizeTree: memoizeOne((tree, mapper) => denormalizeTree(tree, mapper)),
+    extractSelectedBranches: memoizeOne((nodes) => extractSelectedBranches(nodes)),
+    filterNodesByLevelKey: memoizeOne((nodes, levelKey) => filterNodesByLevelKey(nodes, levelKey)),
+};

package/build/components/index.d.ts

@@ -153,3 +153,5 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export { default as TreeDropdown } from './TreeDropdown';
+export * from './TreeDropdown';

package/build/components/index.js

@@ -153,3 +153,5 @@ export * from './SalesChannelFilter';
 export * from './ReferenceTypeFilter';
 export * from './ListColumnFilter';
 export * from './VerificationIcon';
+export { default as TreeDropdown } from './TreeDropdown';
+export * from './TreeDropdown';

package/build/hooks/index.d.ts

@@ -14,3 +14,4 @@ export * from './useAppEventPublisher';
 export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
+export * from './useScrolledTo';

package/build/hooks/index.js

@@ -14,3 +14,4 @@ export * from './useAppEventPublisher';
 export * from './useAppEventListener';
 export * from './useSelectedMerchantDetails';
 export * from './useToast';
+export * from './useScrolledTo';

package/build/hooks/useScrolledTo.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+type UseScrolledToArgs = {
+    threshold?: number;
+    containerRef?: React.RefObject<HTMLElement>;
+};
+type ScrollSource = HTMLElement | React.UIEvent<HTMLElement, UIEvent>;
+export declare function useScrolledTo({ threshold, containerRef }?: UseScrolledToArgs): {
+    handleScroll: (source: ScrollSource) => void;
+    scrolledToTop: boolean;
+    scrolledToBottom: boolean;
+    scrollable: boolean;
+};
+export {};

package/build/hooks/useScrolledTo.js

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from 'react';
+const DEFAULT_THRESHOLD = 10;
+export function useScrolledTo({ threshold = DEFAULT_THRESHOLD, containerRef } = {}) {
+    const [scrolledToTop, setScrolledToTop] = useState(true);
+    const [scrolledToBottom, setScrolledToBottom] = useState(false);
+    const [scrollable, setScrollable] = useState(false);
+    const updateFromElement = useCallback((el) => {
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        setScrollable(scrollHeight > clientHeight + threshold);
+        setScrolledToTop(scrollTop <= threshold);
+        setScrolledToBottom(scrollHeight - (scrollTop + clientHeight) <= threshold);
+    }, [threshold]);
+    const handleScroll = useCallback((source) => {
+        if (!source)
+            return;
+        // React onScroll event
+        if ('currentTarget' in source) {
+            updateFromElement(source.currentTarget);
+            return;
+        }
+        // Direct HTMLElement
+        updateFromElement(source);
+    }, [updateFromElement]);
+    useEffect(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+            return;
+        const element = containerRef.current;
+        // Initial calculation
+        handleScroll(element);
+        // Watch for container size changes
+        const resizeObserver = new ResizeObserver(() => {
+            handleScroll(element);
+        });
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [containerRef, handleScroll]);
+    return {
+        handleScroll,
+        scrolledToTop,
+        scrolledToBottom,
+        scrollable,
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.396",
+  "version": "0.1.398",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",