@tap-payments/os-micro-frontend-shared 0.1.391-test.1 → 0.1.391-test.5

package/build/components/FilterDropdown/FilterDropdown.d.ts

@@ -1,10 +1,17 @@
-/// <reference types="react" />
-interface FilterDropdownProps {
-    children?: React.ReactNode;
+import { ReactNode } from 'react';
+import { BoxProps } from '@mui/material/Box';
+import { SxProps } from '@mui/material';
+interface FilterDropdownProps extends BoxProps {
     onConfirm: () => void;
     onCancel: () => void;
     isOkayButDisabled?: boolean;
     isDisabled?: boolean;
+    icon?: string;
+    title?: string;
+    menuStyle?: SxProps;
+    hideTitle?: boolean;
+    renderButton?: ReactNode;
+    onOpenChange?: (isOpen: boolean) => void;
 }
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
+export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle, renderButton, onOpenChange, ...props }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/FilterDropdown/FilterDropdown.js

@@ -1,12 +1,24 @@
+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 { useState, useEffect } from 'react';
 import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
-import { ClickAwayListener } from '@mui/material';
 import { darkFilterIcon } from '../../constants/index.js';
 import { Menu, CustomBackdrop } from '../index.js';
 import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled }) {
+export default function FilterDropdown(_a) {
+    var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle = false, renderButton, onOpenChange } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle", "hideTitle", "renderButton", "onOpenChange"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const { t } = useTranslation();
@@ -32,12 +44,14 @@ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled,
             return;
         if (!open) {
             setAnchorEl(e.currentTarget);
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
             return;
         }
         onClose();
     };
     const onClose = () => {
         setAnchorEl(null);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
         onCancel();
     };
     const handleCancel = () => {
@@ -50,5 +64,5 @@ export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled,
         onConfirm();
         onClose();
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, { children: [_jsx(FilterButton, Object.assign({ isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.5 })) }, { children: _jsx(Box, { component: "img", src: darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: { marginTop: '8px', marginBottom: '8px', width: 193 }, placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] }) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: renderButton !== null && renderButton !== void 0 ? renderButton : _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle), placement: "bottom-end" }, { children: [!hideTitle && _jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
 }

package/build/components/FilterDropdown/style.js

@@ -2,7 +2,7 @@ import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import { Text } from '../index.js';
-export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
+export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, minHeight: 32, minWidth: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
         opacity: 0.7,
     } }, (isActive && {
     boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+interface DonutProps {
+    size?: number;
+    chartData: Array<{
+        name: string;
+        value: number;
+        color: string;
+    }>;
+    chartInfo?: ReactNode;
+}
+export declare const MultiDatakeyDonut: ({ chartData, size, chartInfo }: DonutProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/MultiDatakeyDonut/MultiDatakeyDonut.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
+import { DonutWrapper, CenterOverlay, Empty } from './style';
+export const MultiDatakeyDonut = ({ chartData, size = 170, chartInfo }) => {
+    const pieSegments = useMemo(() => {
+        const total = chartData.reduce((sum, d) => sum + d.value, 0) || 1;
+        let cumulative = 0;
+        return chartData.map((d) => {
+            const start = (cumulative / total) * 360;
+            const end = ((cumulative + d.value) / total) * 360;
+            cumulative += d.value;
+            return Object.assign(Object.assign({}, d), { startAngle: start, endAngle: end });
+        });
+    }, [chartData]);
+    const isEmpty = chartData.every((d) => d.value === 0);
+    return (_jsxs(DonutWrapper, Object.assign({ sx: { width: size, height: size } }, { children: [_jsx(ResponsiveContainer, { children: _jsxs(PieChart, { children: [_jsx(Pie, { data: [{ value: 100 }], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", fill: "#E5E7EB", stroke: "none", isAnimationActive: false }), !isEmpty &&
+                            pieSegments.map((segment) => (_jsx(Pie, Object.assign({ data: [segment], dataKey: "value", cx: "50%", cy: "50%", innerRadius: "70%", outerRadius: "100%", startAngle: 90 - segment.startAngle, endAngle: 90 - segment.endAngle, cornerRadius: 0, stroke: "none", isAnimationActive: true, animationDuration: 800, style: { outline: 'none' } }, { children: _jsx(Cell, { fill: segment.color, tabIndex: -1 }, segment.name) }), segment.name)))] }) }), _jsx(CenterOverlay, { children: !chartInfo ? _jsx(Empty, { children: "----" }) : chartInfo })] })));
+};

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

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

package/build/components/MultiDatakeyDonut/index.js

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const DonutWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CenterOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const Empty: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/MultiDatakeyDonut/style.js

@@ -0,0 +1,23 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export const DonutWrapper = styled(Box)(() => ({
+    width: '100%',
+    maxWidth: 500,
+    aspectRatio: '1',
+    position: 'relative',
+}));
+export const CenterOverlay = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    inset: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+    gap: theme.spacing(1),
+}));
+export const Empty = styled(Box)(({ theme }) => ({
+    fontSize: 17,
+    fontWeight: 700,
+    color: '#CFD0D2',
+}));

package/build/components/RangeCalender/RangeCalender.js

@@ -58,8 +58,10 @@ function RangeCalender({ defaultDate, onDateChange, mode = 'gregorian', onCalend
         onChangeTimezone === null || onChangeTimezone === void 0 ? void 0 : onChangeTimezone(selectedTimezone);
     };
     const getSelectedDate = () => {
-        const startSelectedTime = dates[0].format('MMM D');
-        const endSelectedTime = dates[1] ? dates[1].format('MMM D') : dates[0].format('MMM D');
+        const nowYear = dayjs().year();
+        const formatDate = (date) => (date.year === nowYear ? date.format('MMM D') : date.format('MMM D YYYY'));
+        const startSelectedTime = formatDate(dates[0]);
+        const endSelectedTime = dates[1] ? formatDate(dates[1]) : formatDate(dates[0]);
         return startSelectedTime === endSelectedTime && !noTimezone ? startSelectedTime : `${startSelectedTime} - ${endSelectedTime}`;
     };
     const onChange = (newDate) => {

package/build/components/index.d.ts

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

package/build/components/index.js

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

package/build/constants/assets.d.ts

@@ -46,6 +46,7 @@ export declare const storedValueWalletIcon: string;
 export declare const buyNowPayLaterIcon: string;
 export declare const openBankingIcon: string;
 export declare const visaIcon: string;
+export declare const redArrowDownIcon: string;
 export declare const completedIcon: string;
 export declare const chargeBackRequestedIcon: string;
 export declare const chargeBackIcon: string;
@@ -80,12 +81,14 @@ export declare const dashedCheckIcon: string;
 export declare const outstandingIcon: string;
 export declare const deactivatedIcon: string;
 export declare const topUpIcon: string;
+export declare const AIOverviewIcon: string;
 export declare const deMaximizeIcon: string;
 export declare const pendingFlag: string;
 export declare const ibanIcon: string;
 export declare const payoutIcon: string;
 export declare const releasedFlag: string;
 export declare const acceptedFlag: string;
+export declare const clearIcon: string;
 export declare const unCapturedIcon: string;
 export declare const newWindowIcon: string;
 export declare const viewAllIcon: string;

package/build/constants/assets.js

@@ -51,6 +51,7 @@ export const storedValueWalletIcon = `${lightUrl}/storedValueWallet.svg`;
 export const buyNowPayLaterIcon = `${lightUrl}/buyNowPayLater.svg`;
 export const openBankingIcon = `${lightUrl}/openBanking.svg`;
 export const visaIcon = `${lightUrl}/visa.svg`;
+export const redArrowDownIcon = `${lightUrl}/redArrowDownIcon.svg`;
 export const completedIcon = `${lightUrl}/completed.svg`;
 export const chargeBackRequestedIcon = `${lightUrl}/chargebackRequested.svg`;
 export const chargeBackIcon = `${lightUrl}/chargeback.svg`;
@@ -85,12 +86,14 @@ export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
 export const outstandingIcon = `${lightUrl}/outstandingIcon.svg`;
 export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
 export const topUpIcon = `${lightUrl}/topup.svg`;
+export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
 export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
 export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
 export const ibanIcon = `${lightUrl}/ibanIcon.svg`;
 export const payoutIcon = `${lightUrl}/payoutIcon.svg`;
 export const releasedFlag = `${lightUrl}/releasedFlag.svg`;
 export const acceptedFlag = `${lightUrl}/acceptedFlag.svg`;
+export const clearIcon = `${lightUrl}/clearIcon.svg`;
 export const unCapturedIcon = `${lightUrl}/status/unCaptured.svg`;
 export const newWindowIcon = `${appBaseUrl}/newWindow.svg`;
 export const viewAllIcon = `${appBaseUrl}/viewAll.svg`;

package/build/hooks/index.d.ts

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

package/build/hooks/index.js

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

package/build/types/index.d.ts

@@ -32,5 +32,6 @@ export * from './filter';
 export * from './utilities';
 export * from './reports';
 export * from './document';
+export * from './toggleOptions';
 export * from './toast';
 export * from './flag';

package/build/types/index.js

@@ -32,5 +32,6 @@ export * from './filter';
 export * from './utilities';
 export * from './reports';
 export * from './document';
+export * from './toggleOptions';
 export * from './toast';
 export * from './flag';

package/build/types/toggleOptions.d.ts

@@ -0,0 +1,2 @@
+import { DATA_KEY } from '../constants/index.js';
+export type DataKey = (typeof DATA_KEY)[keyof typeof DATA_KEY];

package/build/types/toggleOptions.js

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

package/build/utils/date.d.ts

@@ -43,5 +43,9 @@ export declare function isWithinTimeAgo(timestampMs: number, amount: number, uni
 export declare const formatRelativeTimeWithinHour: (timestampMs: number) => string;
 export declare const isTodayDate: (date: string | Date) => boolean;
 export declare const isYesterdayDate: (date: string | Date) => boolean;
+export declare const getDateLabel: (from: Date, to: Date) => {
+    label: string;
+    isCustom: boolean;
+};
 export declare const isValidDate: (date?: Date | string | number) => boolean;
 export {};

package/build/utils/date.js

@@ -245,6 +245,43 @@ export const formatRelativeTimeWithinHour = (timestampMs) => {
 };
 export const isTodayDate = (date) => dayjs(date).isToday();
 export const isYesterdayDate = (date) => dayjs(date).isYesterday();
+export const getDateLabel = (from, to) => {
+    const start = dayjs(from).startOf('day');
+    const end = dayjs(to).endOf('day');
+    const today = dayjs().startOf('day');
+    const currentYear = today.year();
+    const diffDays = end.diff(start, 'day') + 1;
+    // Today / Yesterday
+    if (start.isToday() && end.isToday())
+        return { label: 'Today', isCustom: false };
+    if (start.isYesterday() && end.isYesterday())
+        return { label: 'Yesterday', isCustom: false };
+    // Last 7 days
+    if (diffDays === 7 && end.isSame(today, 'day'))
+        return { label: 'Last 7 days', isCustom: false };
+    // Last 30 days (inclusive)
+    if (diffDays === 31 && end.isSame(today, 'day'))
+        return { label: 'Last 30 days', isCustom: false };
+    // Full month
+    if (start.date() === 1 && end.date() === end.daysInMonth() && start.month() === end.month()) {
+        const monthLabel = start.year() === currentYear ? start.format('MMMM') : start.format('MMMM YYYY');
+        return { label: monthLabel, isCustom: false };
+    }
+    // Same day: show Month + Day
+    if (start.isSame(end, 'day')) {
+        const label = start.format(start.year() === currentYear ? 'MMM D' : 'MMM D YYYY');
+        return { label, isCustom: false };
+    }
+    // Custom range
+    const showStartYear = start.year() !== currentYear;
+    const showEndYear = end.year() !== currentYear;
+    const startLabel = start.format(`MMM D${showStartYear ? ' YYYY' : ''}`);
+    const endLabel = end.format(`MMM D${showEndYear ? ' YYYY' : ''}`);
+    return {
+        label: `${startLabel} – ${endLabel}`,
+        isCustom: true,
+    };
+};
 export const isValidDate = (date) => {
     return dayjs(date).isValid();
 };

package/package.json

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

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

@@ -1,4 +0,0 @@
-/// <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

@@ -1,53 +0,0 @@
-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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,17 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

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

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

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

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

@@ -1,14 +0,0 @@
-/// <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

@@ -1,46 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;