@tap-payments/os-micro-frontend-shared 0.1.390-test.2-test.3 → 0.1.391-test.1

package/build/components/StatusBar/StatusBar.js

@@ -23,7 +23,7 @@ function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChan
         onStatusChange === null || onStatusChange === void 0 ? void 0 : onStatusChange(selected);
     }, [onStatusChange]);
     return (_jsx(_Fragment, { children: availableStatuses === null || availableStatuses === void 0 ? void 0 : availableStatuses.map((_a, index) => {
-            var _b;
+            var _b, _c;
             var { render } = _a, s = __rest(_a, ["render"]);
             if (render) {
                 return (_jsx(Fragment, { children: render({ status: status, onChange: handleStatusChange }, Object.assign(Object.assign({}, s), { index })) }, `custom-status-slot-${index}`));
@@ -42,13 +42,13 @@ function StatusBar({ isFilteredIdsShown, availableStatuses, status, onStatusChan
                 []);
             const hasMatchingDropdownStatus = !!status && formattedStatuses.some((item) => (item === null || item === void 0 ? void 0 : item.value) === status);
             const variant = hasMatchingDropdownStatus ? 'active' : 'inActive';
-            const selectedStatus = hasMatchingDropdownStatus ? status : undefined;
+            const selectedStatus = hasMatchingDropdownStatus ? status : (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value;
             return (_jsx("div", { children: _jsx(StatusButton, Object.assign({}, s, { selectedStatus: selectedStatus, variant: variant, onButtonBodyClick: (buttonStatus) => handleStatusChange(buttonStatus), dropdownOptions: formattedStatuses.map((stat) => ({
                         label: t((stat === null || stat === void 0 ? void 0 : stat.value) || ''),
                         status: stat === null || stat === void 0 ? void 0 : stat.value,
                         icon: stat.icon,
                         onClick: () => handleStatusChange(stat.value),
-                    })), buttonSx: buttonSx })) }, (_b = formattedStatuses[0]) === null || _b === void 0 ? void 0 : _b.value));
+                    })), buttonSx: buttonSx })) }, (_c = formattedStatuses[0]) === null || _c === void 0 ? void 0 : _c.value));
         }) }));
 }
 export default memo(StatusBar);

package/build/components/StatusButton/StatusButton.js

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import StyledBadge, { BadgeVariants } from '../CountBadge';
 import { convertToNumber, formatNumber } from '../../utils/index.js';
 import { ChevronIcon } from './ChevronIcon';
-import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants, IconWrapper } from './style';
+import { ChevronContainer, Label, LabelWrapper, StyledStatusIcon, StyledDropdown, statusButtonVariants } from './style';
 import { statusButtonIcons } from './constant';
 const StatusButton = memo((props) => {
     var _a;
@@ -25,26 +25,14 @@ const StatusButton = memo((props) => {
     const buttonRef = useRef(null);
     const [anchorEl, setAnchorEl] = useState(null);
     const [selectedStatus, setSelectedStatus] = useState(initialStatus !== null && initialStatus !== void 0 ? initialStatus : (_a = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions[0]) === null || _a === void 0 ? void 0 : _a.status);
-    useEffect(() => {
-        if (initialStatus !== undefined) {
-            setSelectedStatus(initialStatus);
-        }
-    }, [initialStatus]);
+    // Memoized computed values
     const hasDropdown = useMemo(() => Boolean(dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.length), [dropdownOptions]);
     // only open if button is clicked more than once
     const isDropdownOpen = Boolean(anchorEl) && buttonClicks > 1;
     const isActiveVariant = variant === 'active';
     const badgeVariant = useMemo(() => (isActiveVariant ? BadgeVariants.ACTIVE : BadgeVariants.INACTIVE), [isActiveVariant]);
-    const statusIcon = useMemo(() => {
-        const selectedOption = selectedStatus ? dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option.status === selectedStatus) : null;
-        if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.icon) {
-            return _jsx(IconWrapper, Object.assign({ variant: variant }, { children: selectedOption.icon }));
-        }
-        const iconKey = selectedStatus && iconMapper[selectedStatus] ? selectedStatus : icon;
-        if (iconKey && iconMapper[iconKey]) {
-            return _jsx(StyledStatusIcon, { icon: iconKey, variant: variant, src: iconMapper[iconKey], alt: `${iconKey}-icon` });
-        }
-    }, [selectedStatus, dropdownOptions, iconMapper, icon, variant]);
+    // Memoized UI elements
+    const statusIcon = useMemo(() => (icon ? _jsx(StyledStatusIcon, { icon: icon, variant: variant, src: iconMapper[icon], alt: `${icon}-icon` }) : null), [icon, iconMapper, variant]);
     const statusBadge = useMemo(() => {
         if (!badgeCount || Number.isNaN(convertToNumber(badgeCount)))
             return null;

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

@@ -38,8 +38,3 @@ export declare const StyledStatusIcon: import("@emotion/styled").StyledComponent
     variant: StatusButtonVariant;
     icon?: StatusButtonProps['icon'];
 }, React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    variant: StatusButtonVariant;
-}, {}, {}>;

package/build/components/StatusButton/style.js

@@ -79,14 +79,3 @@ export const StyledStatusIcon = styled('img')(({ theme, variant, icon }) => {
         filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
     })), { maxWidth: '14px', maxHeight: '14px' }));
 });
-export const IconWrapper = styled(Box)(({ variant }) => ({
-    width: '14px',
-    height: '14px',
-    display: 'flex',
-    alignItems: 'center',
-    '& img': {
-        width: '14px',
-        height: '14px',
-        filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
-    },
-}));

package/build/components/TableCells/CustomCells/InvoiceStatusCell/ChargeStatusIcon.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { type ChargeStatus } from '../../../TableCells';
+interface SmallChargeStatusIconProps {
+    chargeStatus?: ChargeStatus;
+    chargeTooltip?: string;
+    errorCode?: string;
+    iconStyles?: CSSProperties;
+    iconWrapperStyles?: CSSProperties;
+}
+export declare function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }: Readonly<SmallChargeStatusIconProps>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/build/components/TableCells/CustomCells/InvoiceStatusCell/ChargeStatusIcon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '../../../Tooltip';
+import { statusIcons, unCapturedStatusesStyles } from '../../../TableCells/CustomCells/StatusCell/constant';
+import { StatusIcon } from '../../../TableCells/CustomCells/style';
+import { ErrorChip, StatusIconWrapper } from './style';
+export function ChargeStatusIcon({ chargeStatus, chargeTooltip, errorCode, iconStyles, iconWrapperStyles }) {
+    const { t } = useTranslation();
+    const unCapturedStatusStyle = chargeStatus ? unCapturedStatusesStyles[chargeStatus] : null;
+    const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx(StatusIconWrapper, Object.assign({ style: iconWrapperStyles }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", style: Object.assign({ width: '16px', height: '16px' }, iconStyles) }) })));
+    if (!chargeStatus)
+        return null;
+    return (_jsx(Tooltip, Object.assign({ title: chargeTooltip !== null && chargeTooltip !== void 0 ? chargeTooltip : t(chargeStatus) }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', gap: '6px', alignItems: 'center' } }, { children: [chargeIcon, errorCode && _jsx(ErrorChip, Object.assign({ style: { background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color } }, { children: errorCode }))] })) })));
+}

package/build/components/TableCells/CustomCells/InvoiceStatusCell/InvoiceStatusCell.d.ts

@@ -1,2 +1,2 @@
-import { DueCellProps } from './type';
-export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown, ...props }: DueCellProps): import("react/jsx-runtime").JSX.Element;
+import { InvoiceStatusCellProps } from './type';
+export default function InvoiceStatusCell({ status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, remindedCount, ...props }: InvoiceStatusCellProps): import("react/jsx-runtime").JSX.Element | null;

package/build/components/TableCells/CustomCells/InvoiceStatusCell/InvoiceStatusCell.js

@@ -9,81 +9,61 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
-import { motion } from 'framer-motion';
-import camelCase from 'lodash/camelCase';
-import capitalize from 'lodash/capitalize';
+import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import StyledBadge, { BadgeVariants } from '../../../CountBadge';
 import Tooltip from '../../../Tooltip';
 import { TableCell } from '../../../TableCells';
 import { formatDate } from '../../../TableCells/CustomCells/DueDateCell/utils';
 import { chargeStatusIcons } from '../../../TableCells/CustomCells/AuthenticationStatusCell/constant';
-import { ChargeStatusIcon } from '../../../StatusIcons';
+import { remindedRedIcon } from '../../../../constants/index.js';
+import { RightLeftExpandingCenterChip } from '../../../RightLeftExpandingCenterChip';
 import { statusIcons } from './constant';
-import { DueDateCellContainer, DateIcon, StatusTextLabel } from './style';
+import { DateIcon } from './style';
 import { invoiceStatusStyles } from './utils';
-import { StatusIconWrapper } from '../style';
+import { ChargeStatusIcon } from './ChargeStatusIcon';
+import { useMemo } from 'react';
 export default function InvoiceStatusCell(_a) {
-    var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, isTextShown } = _a, props = __rest(_a, ["status", "date", "viewsCount", "chargeStatus", "errorCode", "chargeTooltip", "isTextShown"]);
-    const theme = useTheme();
+    var { status, date, viewsCount, chargeStatus, errorCode, chargeTooltip, remindedCount = 0 } = _a, props = __rest(_a, ["status", "date", "viewsCount", "chargeStatus", "errorCode", "chargeTooltip", "remindedCount"]);
     const { t } = useTranslation();
+    const theme = useTheme();
     const icon = status ? statusIcons[status] : null;
     const statusStyles = invoiceStatusStyles(status);
-    const showExpansion = viewsCount !== 0 && !!viewsCount && status === 'VIEWED';
     const statusTooltip = `${t((status === null || status === void 0 ? void 0 : status.toLowerCase()) || '')} ${formatDate(dayjs(date).valueOf())}`;
+    const statusIcon = useMemo(() => _jsx(ChargeStatusIcon, { chargeStatus: chargeStatus, errorCode: errorCode, chargeTooltip: chargeTooltip }), [chargeStatus, errorCode, chargeTooltip]);
+    const remindedIcon = useMemo(() => (_jsx(Tooltip, Object.assign({ title: t('reminded') }, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' } }, { children: [_jsx(DateIcon, { sx: {
+                        width: '14px',
+                        height: '14px',
+                    }, src: remindedRedIcon, alt: "icon" }), _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
+                        background: theme.palette.error.main,
+                        fontWeight: 600,
+                        color: theme.palette.common.white,
+                    } }, { children: remindedCount }))] })) }))), [remindedCount]);
+    const centerIcon = useMemo(() => {
+        if (icon) {
+            return (_jsx(Tooltip, Object.assign({ title: t(statusTooltip || '') }, { children: _jsx(DateIcon, { src: icon, alt: "status icon" }) })));
+        }
+        if (chargeStatus && chargeStatusIcons[chargeStatus])
+            return statusIcon;
+        if (remindedCount)
+            return remindedIcon;
+        return undefined;
+    }, [icon, chargeStatus, remindedCount]);
+    if (!status && !chargeStatus && !remindedCount)
+        return null;
     return (_jsx(TableCell, Object.assign({}, props, { sx: {
             position: 'relative',
             overflow: 'visible',
-        } }, { children: _jsxs("div", Object.assign({ style: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: '8px',
-                overflow: 'visible',
-            } }, { children: [_jsx(Tooltip, Object.assign({ title: t(statusTooltip || '') }, { children: _jsx(DueDateCellContainer, Object.assign({ whileHover: showExpansion ? ['animate', 'fadeIn'] : [], animate: "start", sx: Object.assign({ zIndex: 25, position: 'absolute' }, (isTextShown && {
-                            border: `1px solid ${statusStyles.color}1A`,
-                        })), variants: {
-                            animate: Object.assign({}, (showExpansion && {
-                                boxShadow: theme.shadows[4],
-                            })),
-                        }, background: statusStyles.background }, { children: (icon || (isTextShown && status)) && (_jsxs(_Fragment, { children: [isTextShown ? (_jsx(StatusTextLabel, Object.assign({ sx: {
-                                        color: statusStyles.color,
-                                    } }, { children: capitalize(status) }))) : (icon && _jsx(DateIcon, { src: icon, alt: "icon" })), _jsx(motion.div, Object.assign({ style: {
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        gap: '4px',
-                                        display: 'none',
-                                        width: 0,
-                                    }, initial: { width: 0, opacity: 0 }, transition: {
-                                        animate: {
-                                            duration: 0.5,
-                                        },
-                                        fadeIn: {
-                                            duration: 0.2,
-                                        },
-                                    }, variants: {
-                                        animate: {
-                                            width: 'auto',
-                                            display: 'flex',
-                                        },
-                                        fadeIn: {
-                                            transition: {
-                                                delay: 0.5,
-                                            },
-                                            opacity: 1,
-                                        },
-                                    } }, { children: showExpansion && (_jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
-                                            color: '#fff',
-                                            backgroundColor: statusStyles.color,
-                                        } }, { children: viewsCount }))) }))] })) })) })), _jsx(StatusIconWrapper, Object.assign({ sx: {
-                        position: 'absolute',
-                        left: isTextShown ? '88px' : '32px',
-                        width: isTextShown ? '65px' : '24px',
-                    } }, { children: chargeStatus && chargeStatusIcons[chargeStatus] && (_jsx(_Fragment, { children: isTextShown ? (_jsx(Tooltip, Object.assign({ title: t(camelCase(chargeStatus)) }, { children: _jsx(StatusTextLabel, Object.assign({ sx: {
-                                    color: invoiceStatusStyles('VIEWED').color,
-                                    backgroundColor: `${invoiceStatusStyles('VIEWED').color}0d`,
-                                } }, { children: capitalize(chargeStatus) })) }))) : (_jsx(ChargeStatusIcon, { chargeStatus: chargeStatus, errorCode: errorCode, chargeTooltip: chargeTooltip })) })) }))] })) })));
+        } }, { children: _jsx(RightLeftExpandingCenterChip, { sx: { justifyContent: 'flex-start' }, expandableCenterRight: !!viewsCount && status === 'VIEWED' && icon
+                ? [
+                    _jsx(StyledBadge, Object.assign({ variant: BadgeVariants.DEFAULT, style: {
+                            marginRight: '8px',
+                            color: '#fff',
+                            backgroundColor: statusStyles.color,
+                        } }, { children: viewsCount })),
+                ]
+                : undefined, centerIcon: centerIcon, leftIcons: !!remindedCount && icon ? [remindedIcon] : undefined, rightIcons: chargeStatus && chargeStatusIcons[chargeStatus] && icon ? [statusIcon] : undefined }) })));
 }

package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts

@@ -265,3 +265,5 @@ export declare const DueDateCellContainer: import("@emotion/styled").StyledCompo
 }, {}, {}>;
 export declare const DateIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const StatusTextLabel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ErrorChip: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StatusIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -30,3 +30,21 @@ export const StatusTextLabel = styled('div')(() => ({
     padding: '4.5px 8px',
     borderRadius: '24px',
 }));
+export const ErrorChip = styled('div')(({ theme }) => ({
+    color: theme.palette.common.white,
+    background: theme.palette.error.main,
+    fontSize: '0.6rem',
+    fontWeight: 600,
+    borderRadius: '16px',
+    padding: '2px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const StatusIconWrapper = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '16px',
+    height: '16px',
+}));

package/build/components/TableCells/CustomCells/InvoiceStatusCell/type.d.ts

@@ -2,7 +2,7 @@ import { TableCellProps } from '@mui/material/TableCell';
 import { statusIcons } from './constant';
 import { ChargeStatus } from '../type';
 export type StatusIconType = keyof typeof statusIcons;
-export interface DueCellProps extends TableCellProps {
+export interface InvoiceStatusCellProps extends TableCellProps {
     status?: StatusIconType;
     date: Date | '';
     viewsCount?: number;
@@ -12,4 +12,5 @@ export interface DueCellProps extends TableCellProps {
     gatewayTooltip?: string;
     errorCode?: string;
     isTextShown?: boolean;
+    remindedCount?: number;
 }

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,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, 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 } = props;
+    const { header, footer, children: menuItems = [], searchProps, levelKey } = treeDefinition;
+    const [internalMapper, setInternalMapper] = useState(() => initializeTreeMapper(menuItems || [], multiple));
+    const formattedMenuItems = useMemo(() => promoteSingleChild(menuItems || []), [menuItems]);
+    const getFullTree = useCallback(() => TreeManager.denormalizeTree(menuItems, internalMapper), [menuItems, internalMapper]);
+    const getSelectedTree = useCallback(() => TreeManager.extractSelectedBranches(getFullTree()), [getFullTree]);
+    const handleSelect = useCallback((isChecked, targetNode) => {
+        const nextInternal = updateSelection(internalMapper, targetNode.id, isChecked, multiple);
+        setInternalMapper(nextInternal);
+        if (onChange) {
+            if (exposeOnlySelectedTree) {
+                onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
+            }
+            else {
+                onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
+            }
+        }
+    }, [onChange, menuItems, internalMapper, 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(internalMapper, selected);
+        setInternalMapper(nextInternal);
+        if (onChange) {
+            if (exposeOnlySelectedTree) {
+                onChange(TreeManager.extractSelectedBranches(TreeManager.denormalizeTree(menuItems, nextInternal)));
+            }
+            else {
+                onChange(TreeManager.denormalizeTree(menuItems, nextInternal));
+            }
+        }
+    }, [internalMapper, onChange, menuItems, exposeOnlySelectedTree]);
+    useImperativeHandle(ref, () => ({
+        state: internalMapper,
+        getFullTree,
+        getSelectedTree,
+        toggleAll,
+    }), [internalMapper, getFullTree, getSelectedTree, toggleAll]);
+    return (_jsx(TreeDropdownProvider, Object.assign({ internalMapper: internalMapper, 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 { internalMapper, 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 = internalMapper[nodeProps.id]) === null || _a === void 0 ? void 0 : _a.status) === SelectedState.CHECKED;
+    const indeterminate = multiple ? ((_b = internalMapper[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;