@tap-payments/os-micro-frontend-shared 0.1.440 → 0.1.441

package/build/components/TableHeader/TableView/ViewsDropdown.js

@@ -1,153 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import Popper from '@mui/material/Popper';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import Button from '@mui/material/Button';
-import { useTranslation } from 'react-i18next';
-import { bluePlusIcon, editIcon, smallBlueCheckIcon, blackRightArrowIcon } from '../../../constants/index.js';
-import { Menu, Tooltip } from '../../index.js';
-import { useSubmenuHover, useOriginalColumns } from './hooks';
-import { MAX_CUSTOM_VIEWS, INDEX_COLUMN_CONFIG } from './constants';
-import { ViewsSubmenu } from './components/ViewsSubmenu';
-import { ListStyled, DropdownStyled, MenuItem as StyledMenuItem, Space, SpaceAfter, SubmenuContainer, SaveCustomViewBox, SaveCustomViewInnerBox, ButtonsContainer, CancelButtonSx, OkayButtonSx, ModifiedTextSx, } from './styles';
-import { deepCloneColumns, toggleSingleColumn, toggleSubItem, getSubmenuItems, hasSubmenu, areAllCurrentColumnsSelected, areSomeCurrentColumnsSelected, toggleAllCurrentColumns, areColumnsEqual, } from './utils';
-import { getSubmenuItemsForDisplay } from './utils/viewMenu';
-function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, anchorEl, onClose, onCreateCustomView, customViews = [], onEditCustomView, onSaveDefaultColumns, defaultColumns = [], updateSelectedView, baseDefaultColumns = [], defaultTemplate, }) {
-    const { t } = useTranslation();
-    const { hoveredColumn: hoveredViewId, anchorEl: submenuAnchorEl, openSubmenu, closeSubmenu, cancelClose, forceClose } = useSubmenuHover();
-    const [hoveredCustomId, setHoveredCustomId] = React.useState(null);
-    const [draftColumns, setDraftColumns] = React.useState(null);
-    const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
-    const views = useMemo(() => {
-        const list = [];
-        if (defaultTemplate)
-            list.push(defaultTemplate);
-        return [...list, ...customViews];
-    }, [defaultTemplate, customViews]);
-    const submenuColumns = useMemo(() => {
-        if (!hoveredViewId)
-            return [];
-        if (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length)
-            return draftColumns;
-        const view = views.find((v) => v.id === hoveredViewId);
-        return view ? getSubmenuItems(view, defaultColumns) : [];
-    }, [hoveredViewId, defaultColumns, views, draftColumns]);
-    const allSelected = useMemo(() => areAllCurrentColumnsSelected(submenuColumns), [submenuColumns]);
-    const someSelected = useMemo(() => areSomeCurrentColumnsSelected(submenuColumns, allSelected), [submenuColumns, allSelected]);
-    const draftHasChanges = useMemo(() => {
-        if (!originalColumns.length)
-            return false;
-        const current = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
-        return !areColumnsEqual(current, originalColumns);
-    }, [defaultColumns, originalColumns, draftColumns]);
-    const modifiedFromBase = useMemo(() => {
-        if (!baseDefaultColumns.length)
-            return false;
-        const current = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
-        return !areColumnsEqual(current, baseDefaultColumns);
-    }, [baseDefaultColumns, defaultColumns, draftColumns]);
-    const atCustomViewLimit = customViews.length >= MAX_CUSTOM_VIEWS;
-    function selectView(item) {
-        var _a;
-        forceClose();
-        setDraftColumns(null);
-        clearOriginalState();
-        let payload;
-        if (item.default) {
-            const cols = defaultColumns.length ? defaultColumns : (_a = defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.submenu) !== null && _a !== void 0 ? _a : [];
-            payload = Object.assign(Object.assign({}, item), { submenu: deepCloneColumns(cols), columns: cols.map((c) => c.name) });
-        }
-        else if (item.isCustom) {
-            payload = item;
-        }
-        setSelectedViewInfo(item, payload);
-    }
-    function openTemplateSubmenu(viewId, el) {
-        saveOriginalState();
-        setDraftColumns(deepCloneColumns(defaultColumns));
-        openSubmenu(viewId, el);
-    }
-    function discardAndClose() {
-        setDraftColumns(null);
-        clearOriginalState();
-        forceClose();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }
-    function applyAndClose() {
-        const isDefaultView = selectedViewInfo.id === (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id) || selectedViewInfo.id === 'default' || (defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.default) === true;
-        const colsToApply = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
-        if (isDefaultView && defaultTemplate && colsToApply.length) {
-            if (draftHasChanges) {
-                onSaveDefaultColumns === null || onSaveDefaultColumns === void 0 ? void 0 : onSaveDefaultColumns(colsToApply);
-            }
-            updateSelectedView === null || updateSelectedView === void 0 ? void 0 : updateSelectedView(Object.assign(Object.assign({}, defaultTemplate), { id: String(defaultTemplate.id), submenu: deepCloneColumns(colsToApply), columns: colsToApply.map((c) => c.name) }));
-        }
-        setDraftColumns(null);
-        clearOriginalState();
-        forceClose();
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-    }
-    function toggleColumn(columnName) {
-        if (!draftColumns)
-            return;
-        setDraftColumns(toggleSingleColumn(draftColumns, columnName));
-    }
-    function toggleNested(columnName, subItemName) {
-        if (!draftColumns)
-            return;
-        setDraftColumns(toggleSubItem(draftColumns, columnName, subItemName));
-    }
-    function reorderColumns(names) {
-        if (!draftColumns)
-            return;
-        const indexColumn = INDEX_COLUMN_CONFIG;
-        const reordered = names.map((name) => draftColumns.find((c) => c.name === name)).filter((c) => Boolean(c));
-        setDraftColumns([indexColumn, ...reordered]);
-    }
-    function selectAllColumns() {
-        if (!draftColumns)
-            return;
-        setDraftColumns(toggleAllCurrentColumns(draftColumns, !allSelected));
-    }
-    function resetToBaseDefault() {
-        if (!baseDefaultColumns.length)
-            return;
-        setDraftColumns(deepCloneColumns(baseDefaultColumns));
-    }
-    function goToCreateCustomView(e) {
-        e.stopPropagation();
-        const colsToUse = (draftColumns === null || draftColumns === void 0 ? void 0 : draftColumns.length) ? draftColumns : defaultColumns;
-        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true, colsToUse);
-        setDraftColumns(null);
-        clearOriginalState();
-        forceClose();
-    }
-    return (_jsxs(DropdownStyled, Object.assign({ "data-testid": "ViewsDropdown" }, { children: [_jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsxs(ListStyled, { children: [_jsx(Typography, Object.assign({ sx: { paddingX: 1.25, py: 1.1, fontWeight: 500, fontSize: 11, color: '#8D8D94' } }, { children: "View" })), _jsx(Divider, {}), views.map((item) => (_jsxs(StyledMenuItem, Object.assign({ onMouseEnter: (e) => {
-                                if (item.isCustom)
-                                    setHoveredCustomId(item.id);
-                                else if (hasSubmenu(item, defaultColumns))
-                                    openTemplateSubmenu(item.id, e.currentTarget);
-                            }, onMouseLeave: () => {
-                                if (item.isCustom)
-                                    setHoveredCustomId(null);
-                                else if (hasSubmenu(item, defaultColumns))
-                                    closeSubmenu();
-                            }, onClick: () => selectView(item), sx: { position: 'relative', cursor: 'pointer', pr: 1.5 } }, { children: [item.id === selectedViewInfo.id ? _jsx("img", { style: { width: 15, height: 15 }, src: smallBlueCheckIcon, alt: "check" }) : _jsx(Space, {}), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.default && item.id === selectedViewInfo.id && modifiedFromBase && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomId === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
-                                        e.stopPropagation();
-                                        onClose === null || onClose === void 0 ? void 0 : onClose();
-                                        onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(item);
-                                    } })), !item.isCustom && hasSubmenu(item, defaultColumns) && _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } })] }), item.id))), _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !atCustomViewLimit }, { children: _jsxs(StyledMenuItem, Object.assign({ sx: {
-                                    border: 'none',
-                                    opacity: atCustomViewLimit ? 0.5 : 1,
-                                    cursor: atCustomViewLimit ? 'not-allowed' : 'pointer',
-                                }, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (atCustomViewLimit)
-                                        return;
-                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false);
-                                    forceClose();
-                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "", style: { opacity: atCustomViewLimit ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: atCustomViewLimit ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredViewId && submenuAnchorEl && submenuColumns.length > 0 && (_jsx(Menu, Object.assign({ open: true, anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: cancelClose, onMouseLeave: discardAndClose }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getSubmenuItemsForDisplay(submenuColumns), allCurrentSelected: allSelected, someCurrentSelected: someSelected, onSelectAll: selectAllColumns, onReset: resetToBaseDefault, onColumnToggle: toggleColumn, onNestedItemToggle: toggleNested, onReorder: reorderColumns, anchorEl: submenuAnchorEl, isModified: modifiedFromBase }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !atCustomViewLimit }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: atCustomViewLimit, onClick: atCustomViewLimit ? undefined : goToCreateCustomView }, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 11, color: 'text.secondary' } }, { children: "Save as a custom view" })), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "", style: { width: 10, height: 10, opacity: atCustomViewLimit ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: atCustomViewLimit ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: discardAndClose, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: applyAndClose, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
-}
-export default React.memo(ViewsDropdown);

package/build/components/TableHeader/TableView/ViewsMenu.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import ClickAwayListener from '@mui/material/ClickAwayListener';
-import { Icon, StyledButton } from '../../index.js';
-import { viewIcon } from '../../../constants/index.js';
-import ViewsDropdown from './ViewsDropdown';
-import CreateViewDialog from './CreateViewDialog';
-import { ViewWrapper } from './styles';
-import { useViewsManager } from './hooks';
-import { useViewsMenu } from './hooks/useViewsMenu';
-function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView, tableMode = 'default', lang = 'en', }) {
-    const { t } = useTranslation();
-    const { defaultColumns, defaultTemplate, customViews, allTemplates, baseDefaultColumns } = useViewsManager({
-        tableMode,
-        templates,
-        lang,
-    });
-    const { anchorEl, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, currentViewColumns, initialColumnsForCreate, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, updateSelectedView, } = useViewsMenu({
-        mode: tableMode,
-        onViewChange,
-        onCreateCustomView,
-        onEditCustomView,
-        onDeleteCustomView,
-        defaultColumns,
-        defaultTemplate,
-        allTemplates,
-    });
-    const handleSaveDefaultColumns = useCallback((columns) => {
-        if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id))
-            return;
-        onUpdateDefaultView === null || onUpdateDefaultView === void 0 ? void 0 : onUpdateDefaultView(columns);
-    }, [defaultTemplate, onUpdateDefaultView]);
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));
-}
-export default memo(ViewsMenu);

package/build/components/TableHeader/TableView/components/ColumnList.js

@@ -1,73 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Typography, Link, Popper, Divider } from '@mui/material';
-import { Reorder } from 'framer-motion';
-import { dragIcon, rightArrow, viewIcon } from '../../../../constants/index.js';
-import { Checkbox, MenuItem } from '../../../index.js';
-import { isDateColumn, getColumnCheckState } from '../utils';
-import { ColumnListContainer, SelectAllHeader, ColumnItemRow, DragIconWrapper, CheckboxWrapper, SubmenuPaper, checkboxSx } from '../styles';
-export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSelected, hoveredColumn, anchorEl, onReorder, onColumnToggle, onSubItemToggle, onSelectAll, onResetToDefault, onSubmenuEnter, onSubmenuLeave, onCancelClose, }) => {
-    return (_jsxs(ColumnListContainer, { children: [_jsxs(SelectAllHeader, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: viewIcon, alt: "drag", style: { width: 16, height: 16, opacity: 0.5 } }) }), _jsx(CheckboxWrapper, Object.assign({ onClick: (e) => {
-                            e.stopPropagation();
-                            onSelectAll();
-                        } }, { children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", sx: checkboxSx, onChange: (e) => {
-                                e.stopPropagation();
-                                onSelectAll();
-                            }, onClick: (e) => {
-                                e.stopPropagation();
-                            } }) })), _jsx(Typography, Object.assign({ onClick: (e) => {
-                            e.stopPropagation();
-                            onSelectAll();
-                        }, sx: { flex: 1, fontSize: 13, fontWeight: 500, color: 'text.primary', ml: 0.75, cursor: 'pointer' } }, { children: "Select All" })), _jsx(Link, Object.assign({ component: "button", type: "button", onClick: (e) => {
-                            e.stopPropagation();
-                            onResetToDefault();
-                        }, underline: "none", sx: { fontSize: 13, fontWeight: 500, cursor: 'pointer', color: 'common.blue' } }, { children: "Reset to default" }))] }), _jsx(Box, Object.assign({ sx: { flex: 1, overflowY: 'auto', minHeight: 0 } }, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: selectedColumns.map((column) => {
-                        var _a;
-                        const isDate = isDateColumn(column.name);
-                        const hasSubmenu = column.menuItems && column.menuItems.length > 0;
-                        const { checked, indeterminate } = getColumnCheckState(column);
-                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1 }, style: {
-                                listStyle: 'none',
-                                margin: 0,
-                                padding: 0,
-                                position: 'relative',
-                                zIndex: 1,
-                                backgroundColor: '#fff',
-                                width: '100%',
-                                willChange: 'transform',
-                            }, onDragStart: (e) => {
-                                const target = e.target;
-                                if (target.closest('[role="checkbox"]') ||
-                                    target.closest('input[type="checkbox"]') ||
-                                    target.closest('[class*="CheckboxWrapper"]')) {
-                                    e.preventDefault();
-                                }
-                            } }, { children: [_jsxs(ColumnItemRow, Object.assign({ isHovered: hoveredColumn === column.name, isDate: isDate, onMouseEnter: (e) => hasSubmenu && onSubmenuEnter(column.name, e.currentTarget), onMouseLeave: () => hasSubmenu && onSubmenuLeave(), onClick: (e) => {
-                                        if (e.target.closest('[role="checkbox"]') || e.target.closest('input[type="checkbox"]')) {
-                                            e.stopPropagation();
-                                        }
-                                    }, sx: { width: '100%', position: 'relative' } }, { children: [_jsx(DragIconWrapper, { children: _jsx("img", { src: dragIcon, alt: "drag", draggable: false, style: { width: 16, height: 16, cursor: isDate ? 'default' : 'grab', pointerEvents: 'none' } }) }), _jsx(CheckboxWrapper, Object.assign({ onMouseDown: (e) => {
-                                                e.stopPropagation();
-                                            }, onPointerDown: (e) => {
-                                                e.stopPropagation();
-                                            } }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: (e) => {
-                                                    e.stopPropagation();
-                                                    onColumnToggle(column.name);
-                                                }, onClick: (e) => {
-                                                    e.stopPropagation();
-                                                }, disabled: isDate, size: "small", sx: checkboxSx }) })), _jsx(Typography, Object.assign({ sx: { flex: 1, fontSize: 13, fontWeight: 400, color: 'text.primary', ml: 1 } }, { children: column.label || column.name })), hasSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', ml: 1, flexShrink: 0 } }, { children: _jsx("img", { src: rightArrow, alt: "arrow", style: { width: 12, height: 12 } }) })))] })), hasSubmenu && (_jsx(Popper, Object.assign({ open: hoveredColumn === column.name, anchorEl: anchorEl, placement: "right-start", sx: { zIndex: 10000 }, modifiers: [
-                                        {
-                                            name: 'offset',
-                                            options: {
-                                                offset: [0, 0],
-                                            },
-                                        },
-                                    ] }, { children: _jsxs(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
-                                                    var _a, _b;
-                                                    return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
-                                                                    if (!isDate)
-                                                                        onSubItemToggle(column.name, subItem.name);
-                                                                } }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
-                                                }) })] })) })))] }), column.name));
-                    }) })) }))] }));
-};

package/build/components/TableHeader/TableView/components/ViewsSubmenu.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
-import { Box, Typography, Divider, Popper } from '@mui/material';
-import { Reorder } from 'framer-motion';
-import { Checkbox, MenuItem } from '../../../index.js';
-import { blackRightArrowIcon } from '../../../../constants/index.js';
-import { getColumnCheckState, isDateColumn } from '../utils';
-import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
-import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
-export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, onReorder, isModified = false, }) => {
-    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    const columnNames = useMemo(() => columns.map((col) => col.name), [columns]);
-    return (_jsxs(_Fragment, { children: [_jsxs(ResetHeaderBox, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: _jsx(Checkbox, { checked: allCurrentSelected, indeterminate: someCurrentSelected, onChange: (e) => {
-                                e.stopPropagation();
-                                onSelectAll();
-                            }, onClick: (e) => {
-                                e.stopPropagation();
-                            }, sx: ResetCheckboxSx }) })), _jsx(Typography, Object.assign({ component: "button", disabled: !isModified, onClick: (e) => {
-                            e.stopPropagation();
-                            if (isModified)
-                                onReset();
-                        }, sx: {
-                            fontSize: 11,
-                            fontWeight: 500,
-                            color: '#1F88D0',
-                            background: 'none',
-                            border: 'none',
-                            cursor: isModified ? 'pointer' : 'default',
-                            padding: 0,
-                            opacity: isModified ? 1 : 0.5,
-                            pointerEvents: isModified ? 'auto' : 'none',
-                            '&:hover': isModified ? { textDecoration: 'underline' } : undefined,
-                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: _jsx(Reorder.Group, Object.assign({ axis: "y", onReorder: onReorder, values: columnNames, style: { listStyle: 'none', padding: 0, margin: 0 } }, { children: columns.map((column, columnIndex) => {
-                        var _a;
-                        const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
-                        const { checked, indeterminate } = getColumnCheckState(column);
-                        const isDate = isDateColumn(column.name);
-                        return (_jsxs(Reorder.Item, Object.assign({ value: column.name, drag: !isDate, dragListener: !isDate, transition: { duration: 0 }, whileDrag: { zIndex: 9999, boxShadow: '0 4px 12px rgba(0,0,0,0.15)', scale: 1.02 }, style: {
-                                listStyle: 'none',
-                                margin: 0,
-                                padding: 0,
-                                position: 'relative',
-                                zIndex: 1,
-                                backgroundColor: '#fff',
-                                width: '100%',
-                                willChange: 'transform',
-                            }, onDragStart: (e) => {
-                                const target = e.target;
-                                if (target.closest('[role="checkbox"]') ||
-                                    target.closest('input[type="checkbox"]') ||
-                                    target.closest('[class*="CheckboxWrapper"]')) {
-                                    e.preventDefault();
-                                }
-                            } }, { children: [_jsxs(Box, Object.assign({ sx: { position: 'relative' }, onMouseEnter: (e) => hasNestedSubmenu && openNestedSubmenu(column.name, e.currentTarget), onMouseLeave: () => hasNestedSubmenu && closeNestedSubmenu() }, { children: [_jsxs(Box, Object.assign({ sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'space-between',
-                                                width: '100%',
-                                            } }, { children: [_jsx(MenuItem, Object.assign({ isSelected: hasNestedSubmenu ? checked : column.selected, isIndeterminate: hasNestedSubmenu ? indeterminate : false, isDisabled: isDate, onClick: () => {
-                                                        if (!isDate) {
-                                                            onColumnToggle(column.name);
-                                                        }
-                                                    }, sx: { flex: 1, display: 'flex', alignItems: 'center' } }, { children: _jsx("span", { children: column.label || column.name }) })), hasNestedSubmenu && (_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', pr: 1, pointerEvents: 'none' } }, { children: _jsx("img", { src: blackRightArrowIcon, alt: "arrow", style: { height: 12 } }) })))] })), hasNestedSubmenu && (_jsx(Popper, Object.assign({ open: hoveredNestedColumn === column.name, anchorEl: nestedSubmenuAnchorEl, placement: "right-start", sx: { zIndex: 10000 } }, { children: _jsxs(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex', pl: 0.5 } }, { children: [_jsx(Box, { sx: { width: 8, height: '100%', position: 'absolute', left: -8, top: 0, bottom: 0 } }), _jsx(SubmenuPaper, { children: (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((subItem, subItemIndex) => {
-                                                            var _a, _b;
-                                                            return (_jsxs(React.Fragment, { children: [_jsx(MenuItem, Object.assign({ isSelected: subItem.selected, isDisabled: isDate, onClick: () => {
-                                                                            if (!isDate)
-                                                                                onNestedItemToggle(column.name, subItem.name);
-                                                                        } }, { children: subItem.label || subItem.name })), subItemIndex < ((_b = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) - 1 && _jsx(Divider, {})] }, subItem.name));
-                                                        }) })] })) })))] })), columnIndex < columns.length - 1 && _jsx(Divider, {})] }), column.name));
-                    }) })) })] }));
-};

package/build/components/TableHeader/TableView/components/index.js

@@ -1,2 +0,0 @@
-export { ColumnList } from './ColumnList';
-export { ViewsSubmenu } from './ViewsSubmenu';

package/build/components/TableHeader/TableView/constants.js

@@ -1,39 +0,0 @@
-export const DIALOG_WIDTH = 450;
-export const DIALOG_HEIGHT = 600;
-export const SUBMENU_CLOSE_DELAY = 150;
-export const MAX_CUSTOM_VIEWS = 3;
-export const TEMPLATE_NAME_MAX_LENGTH = 20;
-export const INDEX_COLUMN_CONFIG = {
-    name: 'index',
-    label: '',
-    selected: true,
-    menuItems: undefined,
-    order: 0,
-    pinned: 'start',
-    isDefaultPinned: true,
-    pinnable: true,
-};
-export const DATE_COLUMN_CONFIG = {
-    name: 'date',
-    label: 'Date',
-    selected: true,
-    menuItems: undefined,
-    order: 1,
-    pinned: 'start',
-    isDefaultPinned: true,
-    pinnable: true,
-};
-export const CUSTOM_TABLE_REQUIRED_COLUMN_LABELS = {
-    date: 'Date',
-    index: 'Index',
-};
-export const CUSTOM_TABLE_MODE_ALIASES = {
-    sheet: ['sheet'],
-    default: ['advanced', 'default'],
-    text: ['text'],
-};
-export const OTHER_SECTION_CODE = {
-    sheet: 'Advanced',
-    default: 'Sheet',
-    text: 'text',
-};

package/build/components/TableHeader/TableView/hooks/index.js

@@ -1,10 +0,0 @@
-export { useSubMenu } from './useSubMenu';
-export { useViewColumns } from './useViewColumns';
-export { useColumnItem } from './useColumnItem';
-export { useViewsManager } from './useViewsManager';
-export { useViewsMenu } from './useViewsMenu';
-export { useSubmenuHover } from './useSubmenuHover';
-export { useOriginalColumns } from './useOriginalColumns';
-export { useNestedSubmenu } from './useNestedSubmenu';
-export { useCreateViewDialog } from './useCreateViewDialog';
-export { useCustomTableViews } from './useCustomTableViews';

package/build/components/TableHeader/TableView/hooks/useColumnItem.js

@@ -1,29 +0,0 @@
-import { useCallback, useMemo } from 'react';
-export function useColumnItem({ column, index, openSubMenuName, toggleColumnSelection, handleSubMenuOpen, handleSubMenuClose, }) {
-    const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
-    const isSubmenuOpen = openSubMenuName === column.name;
-    const isFirstItem = index === 0;
-    const isIndeterminate = useMemo(() => { var _a, _b; return Boolean(column.selected && ((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.some((item) => item.selected)) && !((_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.every((item) => item.selected))); }, [column.selected, column.menuItems]);
-    const handleColumnClick = useCallback(() => {
-        toggleColumnSelection(column.name);
-    }, [toggleColumnSelection, column.name]);
-    const handleMouseEnter = useCallback((event) => {
-        if (hasSubmenuItems) {
-            handleSubMenuOpen(event, column.name);
-        }
-    }, [hasSubmenuItems, handleSubMenuOpen, column.name]);
-    const handleMouseLeave = useCallback(() => {
-        if (!hasSubmenuItems) {
-            handleSubMenuClose();
-        }
-    }, [hasSubmenuItems, handleSubMenuClose]);
-    return {
-        isIndeterminate,
-        hasSubmenuItems,
-        isSubmenuOpen,
-        isFirstItem,
-        handleColumnClick,
-        handleMouseEnter,
-        handleMouseLeave,
-    };
-}

package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.js

@@ -1,92 +0,0 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { INDEX_COLUMN_CONFIG, DATE_COLUMN_CONFIG, TEMPLATE_NAME_MAX_LENGTH } from '../constants';
-import { initializeEditingColumns, initializeCreateColumns, initializeCreateColumnsWithCurrentState, toggleColumn, toggleSubItem, toggleAllColumns, areAllColumnsSelected, areSomeColumnsSelected, isValidTemplateName, deepCloneColumns, } from '../utils';
-import { useSubmenuHover } from './useSubmenuHover';
-export const useCreateViewDialog = ({ open, availableColumns, defaultColumns, editingView, tableViews = [] }) => {
-    const [templateName, setTemplateName] = useState(() => (editingView === null || editingView === void 0 ? void 0 : editingView.label) || '');
-    const [selectedColumns, setSelectedColumns] = useState([]);
-    const previousOpenRef = useRef(false);
-    const initialColumnsRef = useRef([]);
-    const { hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose } = useSubmenuHover();
-    const indexColumn = INDEX_COLUMN_CONFIG;
-    const dateColumn = DATE_COLUMN_CONFIG;
-    useEffect(() => {
-        var _a, _b;
-        if (!open) {
-            previousOpenRef.current = false;
-            return;
-        }
-        const wasClosed = !previousOpenRef.current;
-        if (wasClosed && open) {
-            if (editingView) {
-                const savedColumns = editingView.submenu && editingView.submenu.length > 0 ? editingView.submenu : defaultColumns;
-                const otherColumns = initializeEditingColumns(savedColumns, availableColumns);
-                const withoutIndexAndDate = otherColumns.filter((c) => { var _a, _b; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index' && ((_b = c.name) !== null && _b !== void 0 ? _b : '').toLowerCase() !== 'date'; });
-                const columnsToSet = [indexColumn, dateColumn, ...withoutIndexAndDate];
-                setSelectedColumns(columnsToSet);
-                initialColumnsRef.current = deepCloneColumns(columnsToSet);
-                const nameToSet = ((_a = editingView.label) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-                setTemplateName(nameToSet);
-            }
-            else {
-                const otherColumns = tableViews && tableViews.length > 0
-                    ? initializeCreateColumnsWithCurrentState(availableColumns, tableViews)
-                    : initializeCreateColumns(availableColumns);
-                const withoutIndexAndDate = otherColumns.filter((c) => { var _a, _b; return ((_a = c.name) !== null && _a !== void 0 ? _a : '').toLowerCase() !== 'index' && ((_b = c.name) !== null && _b !== void 0 ? _b : '').toLowerCase() !== 'date'; });
-                const columnsToSet = [indexColumn, dateColumn, ...withoutIndexAndDate];
-                setSelectedColumns(columnsToSet);
-                initialColumnsRef.current = deepCloneColumns(columnsToSet);
-                setTemplateName('');
-            }
-        }
-        else if (open && editingView) {
-            const nameToSet = ((_b = editingView.label) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-            setTemplateName(nameToSet);
-        }
-        previousOpenRef.current = open;
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally depend on editingView fields only to avoid unnecessary resets when object reference changes
-    }, [open, editingView === null || editingView === void 0 ? void 0 : editingView.id, editingView === null || editingView === void 0 ? void 0 : editingView.label, editingView === null || editingView === void 0 ? void 0 : editingView.submenu, availableColumns, defaultColumns, tableViews, indexColumn, dateColumn]);
-    const columnNames = useMemo(() => selectedColumns.map((col) => col.name), [selectedColumns]);
-    const allSelected = useMemo(() => areAllColumnsSelected(selectedColumns), [selectedColumns]);
-    const someSelected = useMemo(() => areSomeColumnsSelected(selectedColumns, allSelected), [selectedColumns, allSelected]);
-    const isNameValid = useMemo(() => isValidTemplateName(templateName, TEMPLATE_NAME_MAX_LENGTH), [templateName]);
-    const handleReorder = (reorderedNames) => {
-        const reorderedColumns = reorderedNames
-            .map((name) => selectedColumns.find((col) => col.name === name))
-            .filter((col) => Boolean(col));
-        setSelectedColumns([indexColumn, ...reorderedColumns]);
-    };
-    const handleColumnToggle = (columnName) => {
-        setSelectedColumns((prev) => toggleColumn(prev, columnName));
-    };
-    const handleSubItemToggle = (columnName, subItemName) => {
-        setSelectedColumns((prev) => toggleSubItem(prev, columnName, subItemName));
-    };
-    const handleSelectAll = () => {
-        setSelectedColumns((prev) => toggleAllColumns(prev, !allSelected));
-    };
-    const handleResetToDefault = () => {
-        if (initialColumnsRef.current.length > 0) {
-            setSelectedColumns(deepCloneColumns(initialColumnsRef.current));
-        }
-    };
-    return {
-        templateName,
-        setTemplateName,
-        selectedColumns,
-        columnNames,
-        allSelected,
-        someSelected,
-        isNameValid,
-        hoveredColumn,
-        anchorEl,
-        openSubmenu,
-        closeSubmenu,
-        cancelClose,
-        handleReorder,
-        handleColumnToggle,
-        handleSubItemToggle,
-        handleSelectAll,
-        handleResetToDefault,
-    };
-};

package/build/components/TableHeader/TableView/hooks/useCustomTableViews.js

@@ -1,105 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { useCallback, useMemo, useState } from 'react';
-import { OTHER_SECTION_CODE } from '../constants';
-import { handleTemplateUpdate, mapColumnsToLayoutSection, convertTemplateToColumnsView, replaceTemplateInList, updateCurrentTemplate, addRequiredColumns, } from '../utils';
-import { updateColumnSelection } from '../../../../utils/index.js';
-export function useCustomTableViews({ templates, setTemplates, createTemplate, updateTemplate, deleteTemplate, tableMode, lang = 'en', columnModifiers, }) {
-    const defaultTemplate = useMemo(() => templates.find((t) => t.default), [templates]);
-    const [selectedTemplateId, setSelectedTemplateId] = useState(() => defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id);
-    const onCreateCustomView = useCallback(({ name, layout }) => __awaiter(this, void 0, void 0, function* () {
-        var _a, _b, _c, _d;
-        const created = yield createTemplate({ name, layout: [layout] });
-        if (created) {
-            const otherCode = (_a = OTHER_SECTION_CODE[tableMode]) !== null && _a !== void 0 ? _a : OTHER_SECTION_CODE.default;
-            const hasOtherSection = (_b = created.layout) === null || _b === void 0 ? void 0 : _b.some((s) => { var _a; return ((_a = s.code) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === otherCode.toLowerCase(); });
-            const templateWithOtherLayout = hasOtherSection
-                ? created
-                : Object.assign(Object.assign({}, created), { layout: [...((_c = created.layout) !== null && _c !== void 0 ? _c : []), { code: otherCode, columns: [] }] });
-            const normalized = handleTemplateUpdate(templateWithOtherLayout);
-            setTemplates((prev) => [...prev, normalized]);
-            setSelectedTemplateId(normalized.id);
-            return { id: created.id, name: (_d = created.name) !== null && _d !== void 0 ? _d : '' };
-        }
-    }), [createTemplate, setTemplates, tableMode]);
-    const onDeleteCustomView = useCallback((templateId) => __awaiter(this, void 0, void 0, function* () {
-        yield deleteTemplate(templateId);
-        setTemplates((prev) => prev.filter((t) => t.id !== templateId));
-        setSelectedTemplateId((current) => (current === templateId ? defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id : current));
-    }), [deleteTemplate, setTemplates, defaultTemplate]);
-    const onUpdateDefaultView = useCallback((columns) => {
-        const defaultTemplate = templates.find((t) => t.default);
-        if (!defaultTemplate)
-            return;
-        const layout = mapColumnsToLayoutSection(columns, tableMode, lang);
-        const { name, layout: mergedLayout } = updateCurrentTemplate(defaultTemplate, { layout });
-        const updatedDefault = Object.assign(Object.assign({}, defaultTemplate), { name, layout: mergedLayout });
-        setTemplates((prev) => replaceTemplateInList(prev, (t) => t.default, updatedDefault));
-    }, [templates, tableMode, lang, setTemplates]);
-    const onEditCustomView = useCallback((viewId, data) => __awaiter(this, void 0, void 0, function* () {
-        const template = templates.find((t) => t.id === viewId);
-        const { name, layout } = updateCurrentTemplate(template, data);
-        const updated = yield updateTemplate(viewId, { name, layout });
-        if (updated) {
-            const normalized = handleTemplateUpdate(updated);
-            setTemplates((prev) => replaceTemplateInList(prev, (t) => t.id === viewId, normalized));
-            setSelectedTemplateId(normalized.id);
-        }
-    }), [templates, updateTemplate, setTemplates]);
-    const customViews = useMemo(() => ({
-        templates,
-        onCreateCustomView,
-        onEditCustomView,
-        onDeleteCustomView,
-        onUpdateDefaultView,
-    }), [templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView]);
-    const onViewChange = useCallback((view) => {
-        var _a;
-        if (!defaultTemplate) {
-            setSelectedTemplateId(undefined);
-            return;
-        }
-        if (!(view === null || view === void 0 ? void 0 : view.id) || view.id === 'default') {
-            setSelectedTemplateId(defaultTemplate.id);
-            return;
-        }
-        const matchingTemplate = templates.find((t) => t.id === view.id);
-        setSelectedTemplateId((_a = matchingTemplate === null || matchingTemplate === void 0 ? void 0 : matchingTemplate.id) !== null && _a !== void 0 ? _a : defaultTemplate.id);
-    }, [templates, defaultTemplate]);
-    const columnsViewData = useMemo(() => {
-        var _a;
-        const selectedTemplate = (_a = templates.find((t) => (selectedTemplateId ? t.id === selectedTemplateId : false))) !== null && _a !== void 0 ? _a : defaultTemplate;
-        let templateColumnsView = [];
-        if (selectedTemplate) {
-            templateColumnsView = convertTemplateToColumnsView(selectedTemplate, tableMode);
-        }
-        if (templateColumnsView.length === 0) {
-            return [];
-        }
-        if (columnModifiers === null || columnModifiers === void 0 ? void 0 : columnModifiers.length) {
-            let result = templateColumnsView;
-            for (const mod of columnModifiers) {
-                result = updateColumnSelection({
-                    columnsViewData: result,
-                    columnsName: mod.columnsName,
-                    selected: mod.selected,
-                });
-            }
-            return addRequiredColumns(result, tableMode);
-        }
-        return addRequiredColumns(templateColumnsView, tableMode);
-    }, [tableMode, templates, selectedTemplateId, defaultTemplate, columnModifiers]);
-    return {
-        customViews,
-        onViewChange,
-        columnsViewData,
-        selectedViewId: selectedTemplateId,
-    };
-}