@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.hotfix.1

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[]>;
+};