@tap-payments/os-micro-frontend-shared 0.1.373-test.1 → 0.1.374-test.1

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

@@ -1,92 +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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { Box, Typography, CircularProgress, Dialog } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import Draggable from 'react-draggable';
-import { InputBase } from '../../index.js';
-import { useToast } from '../../../hooks/index.js';
-import Toolbar, { StyledHeaderWrapperStyled } from '../../Toolbar';
-import { CloseIcon } from '../../ToolbarIcon';
-import { TEMPLATE_NAME_MAX_LENGTH } from './constants';
-import { DialogContentWrapper, ScrollableContent, TitleSection, FooterBar, CreateButtonWrapper, DeleteButton, CreateButton, getDialogPaperStyle, dialogSx, } from './styles';
-import { DIALOG_WIDTH, DIALOG_HEIGHT } from './constants';
-import { useCreateViewDialog } from './hooks';
-import { ColumnList } from './components/ColumnList';
-import { convertColumnsToLayoutSection } from './utils';
-function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], defaultColumns = [], editingView, onDelete, tableViews = [], mode = 'sheet', }) {
-    const { t } = useTranslation();
-    const toast = useToast();
-    const [isDeleting, setIsDeleting] = useState(false);
-    const [isLoading, setIsLoading] = useState(false);
-    // Reset loading state when dialog closes
-    React.useEffect(() => {
-        if (!open) {
-            setIsDeleting(false);
-            setIsLoading(false);
-        }
-    }, [open]);
-    const { templateName, setTemplateName, selectedColumns, columnNames, allSelected, someSelected, isNameValid, hoveredColumn, anchorEl, openSubmenu, closeSubmenu, cancelClose, handleReorder, handleColumnToggle, handleSubItemToggle, handleSelectAll, handleResetToDefault, } = useCreateViewDialog({
-        open,
-        availableColumns,
-        defaultColumns,
-        editingView,
-        tableViews,
-    });
-    const handleCreate = () => __awaiter(this, void 0, void 0, function* () {
-        if (!isNameValid || isLoading || isDeleting)
-            return;
-        setIsLoading(true);
-        try {
-            const columnsToCreate = selectedColumns.filter((col) => col.selected);
-            const layout = convertColumnsToLayoutSection(columnsToCreate, mode);
-            yield (onCreate === null || onCreate === void 0 ? void 0 : onCreate({ name: templateName, selectedColumns: columnsToCreate, layout }));
-            onClose();
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Failed to save view. Please try again.';
-            toast.error(errorMessage);
-        }
-        finally {
-            setIsLoading(false);
-        }
-    });
-    const handleDelete = () => __awaiter(this, void 0, void 0, function* () {
-        if (!editingView || isDeleting || isLoading)
-            return;
-        const templateId = editingView.templateId || editingView.id;
-        console.log({ templateId });
-        setIsDeleting(true);
-        try {
-            yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(templateId));
-            onClose();
-        }
-        catch (error) {
-            const errorMessage = error instanceof Error ? error.message : 'Failed to delete view. Please try again.';
-            toast.error(errorMessage);
-        }
-        finally {
-            setIsDeleting(false);
-        }
-    });
-    if (!open)
-        return null;
-    return (_jsx(Draggable, Object.assign({ handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' }, { children: _jsxs(Dialog, Object.assign({ disableEnforceFocus: true, open: open, onClose: onClose, hideBackdrop: true, PaperProps: { style: getDialogPaperStyle(DIALOG_WIDTH, DIALOG_HEIGHT) }, sx: dialogSx, TransitionProps: {
-                timeout: 0,
-            }, slotProps: {
-                backdrop: {
-                    sx: {
-                        transition: 'none',
-                    },
-                },
-            } }, { children: [_jsx(StyledHeaderWrapperStyled, Object.assign({ id: "draggable-dialog-title", style: { cursor: 'move' } }, { children: _jsx(Toolbar, { isHovered: true, title: editingView ? 'Edit Custom View' : t('createCustomView') || 'Create Custom View', leftActions: _jsx(CloseIcon, { onClick: onClose }) }) })), _jsxs(DialogContentWrapper, { children: [_jsxs(ScrollableContent, { children: [_jsxs(TitleSection, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#9F9F9F', lineHeight: '0.7' } }, { children: "Custom" })), _jsx(Typography, Object.assign({ sx: { fontSize: 24, fontWeight: 700, color: '#20232B', lineHeight: 1.2 } }, { children: "View" }))] }), editingView && (_jsx(DeleteButton, Object.assign({ onClick: handleDelete, disabled: isDeleting || isLoading }, { children: isDeleting ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: "Deleting..." })] }))) : ('Delete View') })))] }), _jsx(Box, Object.assign({ sx: { mb: 3 } }, { children: _jsx(InputBase, { name: "templateName", label: "Name", value: templateName, onChange: (value) => setTemplateName(value), hasError: false, inputProps: { maxLength: TEMPLATE_NAME_MAX_LENGTH }, required: true }) })), _jsx(ColumnList, { selectedColumns: selectedColumns, columnNames: columnNames, allSelected: allSelected, someSelected: someSelected, hoveredColumn: hoveredColumn, anchorEl: anchorEl, onReorder: handleReorder, onColumnToggle: handleColumnToggle, onSubItemToggle: handleSubItemToggle, onSelectAll: handleSelectAll, onResetToDefault: handleResetToDefault, onSubmenuEnter: openSubmenu, onSubmenuLeave: closeSubmenu, onCancelClose: cancelClose })] }), _jsx(FooterBar, {}), _jsx(CreateButtonWrapper, { children: _jsx(CreateButton, Object.assign({ variant: "contained", onClick: handleCreate, disabled: !isNameValid || isLoading || isDeleting, title: !isNameValid ? `Name is required. Current: "${templateName}"` : undefined }, { children: isLoading ? (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 1 } }, { children: [_jsx(CircularProgress, { size: 14, color: "inherit" }), _jsx("span", { children: editingView ? 'Saving...' : 'Creating...' })] }))) : editingView ? ('Update View') : ('Create View') })) })] })] })) })));
-}
-export default CreateViewDialog;

package/build/components/TableHeader/TableView/ViewSelector.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { ViewSelectorProps } from './types';
-declare function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, onTableViewsChange, onCustomViewsChange, templates, lang, }: ViewSelectorProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof ViewSelector>;
-export default _default;

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

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo } 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 { useViewSelector } from './hooks/useViewSelector';
-function ViewSelector({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', onTableViewsChange, onCustomViewsChange, templates, lang = 'en', }) {
-    const { t } = useTranslation();
-    // Map tableMode to viewMode: 'sheet' → 'sheet', 'default' → 'advanced'
-    const mode = tableMode === 'sheet' ? 'sheet' : 'advanced';
-    const { defaultColumns, setDefaultColumns, internalTableViews, setInternalTableViews, internalCustomViews, setInternalCustomViews, defaultTemplate, } = useViewsManager({
-        mode,
-        templates,
-        lang,
-    });
-    const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
-    const customViews = externalCustomViews !== null && externalCustomViews !== void 0 ? externalCustomViews : internalCustomViews;
-    const { anchorViewEl, defaultViewEl, setDefaultViewElement, isCreateDialogOpen, editingView, selectedViewInfo, shouldUseCurrentState, handleViewButtonClick, handleCloseViewDropdown, handleSelectedViewInfo, handleOpenCreateDialog, handleOpenEditDialog, handleCloseCreateDialog, handleSaveView, handleDeleteView, handleResetViews, handleTableViewsChange, } = useViewSelector({
-        mode,
-        onViewChange,
-        onTableViewsChange,
-        onCustomViewsChange,
-        onCreateCustomView,
-        onEditCustomView,
-        onDeleteCustomView,
-        resetTableViews,
-        setTableViews,
-        tableViews,
-        customViews,
-        defaultColumns,
-        defaultTemplate,
-        setInternalCustomViews,
-        setInternalTableViews,
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewSelector" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewSelector_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(defaultViewEl), anchorEl: anchorViewEl, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onSelect: (e, selectedView) => {
-                                setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
-                            }, setViews: handleResetViews, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, defaultColumns: defaultColumns, setDefaultColumns: setDefaultColumns })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? defaultColumns : undefined, mode: mode })] }));
-}
-export default memo(ViewSelector);

package/build/components/TableHeader/TableView/ViewsDropdown.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import type { ViewsDropdownProps } from './types';
-declare function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews, onEditCustomView, defaultColumns, setDefaultColumns, }: Readonly<ViewsDropdownProps>): import("react/jsx-runtime").JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof ViewsDropdown>;
-export default _default;

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

@@ -1,206 +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, useNestedSubmenu } from './hooks';
-import { MAX_CUSTOM_VIEWS } from './constants';
-import { defaultViewList } from './data';
-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';
-function ViewsDropdown({ open, selectedViewInfo, setSelectedViewInfo, onSelect, setViews, anchorEl, onCreateCustomView, customViews = [], onEditCustomView, defaultColumns = [], setDefaultColumns, }) {
-    const { t } = useTranslation();
-    const { hoveredColumn: hoveredItem, anchorEl: submenuAnchorEl, openSubmenu: handleMenuItemHover, closeSubmenu: handleMenuItemLeave, cancelClose: handleSubmenuEnter, forceClose: forceCloseSubmenu, } = useSubmenuHover();
-    const [hoveredCustomView, setHoveredCustomView] = React.useState(null);
-    const [isDefaultModified, setIsDefaultModified] = React.useState(false);
-    const [baselineColumns, setBaselineColumns] = React.useState([]);
-    const [isOkayClicked, setIsOkayClicked] = React.useState(false);
-    const { originalColumns, saveOriginalState, clearOriginalState } = useOriginalColumns(defaultColumns);
-    // Wrapper to restore state when submenu closes without clicking Okay
-    const handleSubmenuLeave = () => {
-        // If submenu closes without clicking Okay, restore original state
-        if (!isOkayClicked && originalColumns.length > 0 && setDefaultColumns) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-            clearOriginalState();
-        }
-        setIsOkayClicked(false);
-        forceCloseSubmenu();
-    };
-    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    // Default templates are merged into built-in Default view, so no need to sort
-    const viewList = [...defaultViewList, ...customViews];
-    const handleViewClick = (item) => {
-        if (item.columns)
-            setViews === null || setViews === void 0 ? void 0 : setViews(item.columns);
-        // Call onSelect with the full view object
-        const syntheticEvent = {
-            currentTarget: anchorEl || document.createElement('div'),
-        };
-        // Pass the full view object for custom views, undefined for default view
-        const viewToPass = item.isCustom ? item : undefined;
-        onSelect(syntheticEvent, viewToPass);
-        // Update selected view info with the view object
-        setSelectedViewInfo(item, viewToPass);
-    };
-    const toggleColumnSelection = (columnName) => {
-        if (!setDefaultColumns)
-            return;
-        const newColumns = toggleSingleColumn(defaultColumns, columnName);
-        setDefaultColumns(newColumns);
-    };
-    const toggleNestedItem = (columnName, subItemName) => {
-        if (!setDefaultColumns)
-            return;
-        const newColumns = toggleSubItem(defaultColumns, columnName, subItemName);
-        setDefaultColumns(newColumns);
-    };
-    const getHoveredSubmenu = () => {
-        if (!hoveredItem)
-            return [];
-        const item = viewList.find((i) => i.id === hoveredItem);
-        return item ? getSubmenuItems(item, defaultColumns) : [];
-    };
-    const currentSubmenuColumns = useMemo(() => getHoveredSubmenu(), [hoveredItem, defaultColumns, viewList]);
-    const originalSubmenuColumns = useMemo(() => {
-        if (!hoveredItem || originalColumns.length === 0)
-            return [];
-        const item = viewList.find((i) => i.id === hoveredItem);
-        return item ? getSubmenuItems(item, originalColumns) : [];
-    }, [hoveredItem, originalColumns, viewList]);
-    const isSubmenuModified = useMemo(() => {
-        if (originalSubmenuColumns.length === 0)
-            return true;
-        return !areColumnsEqual(currentSubmenuColumns, originalSubmenuColumns);
-    }, [currentSubmenuColumns, originalSubmenuColumns]);
-    const allCurrentSelected = useMemo(() => areAllCurrentColumnsSelected(currentSubmenuColumns), [currentSubmenuColumns]);
-    const someCurrentSelected = useMemo(() => areSomeCurrentColumnsSelected(currentSubmenuColumns, allCurrentSelected), [currentSubmenuColumns, allCurrentSelected]);
-    const handleSelectAll = () => {
-        if (!setDefaultColumns)
-            return;
-        const shouldSelectAll = !allCurrentSelected;
-        const newColumns = toggleAllCurrentColumns(defaultColumns, shouldSelectAll);
-        setDefaultColumns(newColumns);
-    };
-    const handleReset = () => {
-        if (!setDefaultColumns || originalColumns.length === 0)
-            return;
-        const restoredColumns = deepCloneColumns(originalColumns);
-        setDefaultColumns([...restoredColumns]);
-        setIsDefaultModified(false);
-        setBaselineColumns([]);
-    };
-    const handleSaveAsCustomView = (e) => {
-        e.stopPropagation();
-        setIsOkayClicked(true); // Mark that a valid action was taken, don't restore on close
-        clearOriginalState();
-        forceCloseSubmenu();
-        onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(true); // Use current state when saving from submenu
-    };
-    const handleCancel = () => {
-        if (setDefaultColumns && originalColumns.length > 0) {
-            const restoredColumns = deepCloneColumns(originalColumns);
-            setDefaultColumns(restoredColumns);
-            // Reset modified state when canceling
-            setIsDefaultModified(false);
-            setBaselineColumns([]);
-        }
-        clearOriginalState();
-        setIsOkayClicked(false);
-        forceCloseSubmenu();
-    };
-    const handleOkay = () => {
-        if (originalColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, originalColumns);
-            setIsDefaultModified(hasChanges);
-            if (hasChanges) {
-                setBaselineColumns(deepCloneColumns(originalColumns));
-            }
-            else {
-                setBaselineColumns([]);
-            }
-        }
-        setIsOkayClicked(true); // Mark that Okay was clicked so we don't restore on close
-        clearOriginalState();
-        forceCloseSubmenu();
-    };
-    const handleOpenSubmenu = (itemId, element) => {
-        saveOriginalState();
-        setIsOkayClicked(false); // Reset flag when opening submenu
-        if (itemId === 'default' && baselineColumns.length > 0) {
-            const hasChanges = !areColumnsEqual(defaultColumns, baselineColumns);
-            setIsDefaultModified(hasChanges);
-        }
-        handleMenuItemHover(itemId, element);
-    };
-    const shouldDimNewCustomView = customViews.length >= MAX_CUSTOM_VIEWS;
-    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, {}), viewList.map((item) => (_jsxs(StyledMenuItem, Object.assign({ onMouseEnter: (e) => {
-                                if (item.isCustom) {
-                                    setHoveredCustomView(item.id);
-                                }
-                                else if (hasSubmenu(item, defaultColumns)) {
-                                    handleOpenSubmenu(item.id, e.currentTarget);
-                                }
-                            }, onMouseLeave: () => {
-                                if (item.isCustom) {
-                                    setHoveredCustomView(null);
-                                }
-                                else if (hasSubmenu(item, defaultColumns)) {
-                                    handleMenuItemLeave();
-                                }
-                            }, onClick: () => handleViewClick(item), sx: {
-                                position: 'relative',
-                                cursor: 'pointer',
-                                pr: 1.5,
-                            } }, { children: [item.id === selectedViewInfo.id ? (_jsx("img", { style: {
-                                        width: 15,
-                                        height: 15,
-                                    }, className: "check-icon", src: smallBlueCheckIcon, alt: "check" })) : (_jsx(Space, {})), _jsxs("span", Object.assign({ style: { flex: 1, fontSize: 11 } }, { children: [item.label, item.id === 'default' && isDefaultModified && _jsx("span", Object.assign({ style: ModifiedTextSx }, { children: "(Modified)" }))] })), item.isCustom && hoveredCustomView === item.id && (_jsx("img", { src: editIcon, alt: "edit", style: { width: 12, height: 12, cursor: 'pointer' }, onClick: (e) => {
-                                        e.stopPropagation();
-                                        onSelect(e);
-                                        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: !shouldDimNewCustomView }, { children: _jsxs(StyledMenuItem, Object.assign({ sx: {
-                                    border: 'none',
-                                    opacity: shouldDimNewCustomView ? 0.5 : 1,
-                                    cursor: shouldDimNewCustomView ? 'not-allowed' : 'pointer',
-                                }, onClick: (e) => {
-                                    if (shouldDimNewCustomView) {
-                                        e.stopPropagation();
-                                        return;
-                                    }
-                                    e.stopPropagation();
-                                    handleSubmenuLeave();
-                                    onSelect(e);
-                                    onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(false); // Don't use current state for "New Custom View"
-                                } }, { children: [_jsx(Space, {}), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: 0.5 } }, { children: [_jsx("img", { src: bluePlusIcon, alt: "icon", style: { opacity: shouldDimNewCustomView ? 0.5 : 1, width: 10, height: 10 } }), _jsx("span", Object.assign({ style: { color: shouldDimNewCustomView ? '#999' : '#1F88D0', fontSize: 11, fontWeight: 500 } }, { children: t('New Custom View') }))] })), _jsx(SpaceAfter, {})] })) }))] }) })), hoveredItem && submenuAnchorEl && getHoveredSubmenu().length > 0 && (_jsx(Menu, Object.assign({ open: Boolean(hoveredItem), anchorEl: submenuAnchorEl, placement: "auto-end", onMouseEnter: handleSubmenuEnter, onMouseLeave: handleSubmenuLeave, modifiers: [
-                    {
-                        name: 'offset',
-                        options: {
-                            offset: [-4, 0],
-                        },
-                    },
-                    {
-                        name: 'preventOverflow',
-                        enabled: true,
-                    },
-                    {
-                        name: 'flip',
-                        enabled: true,
-                    },
-                ] }, { children: _jsxs(SubmenuContainer, { children: [_jsx(ViewsSubmenu, { columns: getHoveredSubmenu(), allCurrentSelected: allCurrentSelected, someCurrentSelected: someCurrentSelected, onSelectAll: handleSelectAll, onReset: handleReset, onColumnToggle: toggleColumnSelection, onNestedItemToggle: toggleNestedItem, anchorEl: submenuAnchorEl, isModified: isSubmenuModified }), _jsx(SaveCustomViewBox, { children: _jsx(Tooltip, Object.assign({ title: "Limit reached. Delete a view to create a new one.", placement: "left", disableHoverListener: !shouldDimNewCustomView }, { children: _jsxs(SaveCustomViewInnerBox, Object.assign({ disabled: shouldDimNewCustomView, onClick: shouldDimNewCustomView ? undefined : handleSaveAsCustomView }, { 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: "add", style: { width: 10, height: 10, opacity: shouldDimNewCustomView ? 0.5 : 1 } }), _jsx(Typography, Object.assign({ sx: { fontSize: 10, fontWeight: 600, color: shouldDimNewCustomView ? '#999' : '#1F88D0' } }, { children: "Custom View" }))] }))] })) })) }), _jsxs(ButtonsContainer, { children: [_jsx(Button, Object.assign({ variant: "text", onClick: handleCancel, sx: CancelButtonSx }, { children: "Cancel" })), _jsx(Button, Object.assign({ variant: "contained", onClick: handleOkay, sx: OkayButtonSx }, { children: "Okay" }))] })] }) })))] })));
-}
-export default React.memo(ViewsDropdown);

package/build/components/TableHeader/TableView/components/ColumnList.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { ColumnListProps } from '../types';
-export declare const ColumnList: React.FC<ColumnListProps>;

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

@@ -1,70 +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, onClick: () => 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.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import type { ViewsSubmenuProps } from '../types';
-export declare const ViewsSubmenu: React.FC<ViewsSubmenuProps>;

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

@@ -1,52 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Typography, Divider, Popper } from '@mui/material';
-import { Checkbox, MenuItem } from '../../../index.js';
-import { blackRightArrowIcon } from '../../../../constants/index.js';
-import { getColumnCheckState } from '../utils';
-import { ResetHeaderBox, ResetCheckboxSx, ColumnItemsContainer, SubmenuPaper } from '../styles';
-import { useNestedSubmenu } from '../hooks/useNestedSubmenu';
-export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected, onSelectAll, onReset, onColumnToggle, onNestedItemToggle, anchorEl, isModified = false, }) => {
-    const { hoveredNestedColumn, nestedSubmenuAnchorEl, openNestedSubmenu, closeNestedSubmenu, cancelNestedClose } = useNestedSubmenu();
-    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", onClick: (e) => {
-                            e.stopPropagation();
-                            onReset();
-                        }, sx: {
-                            fontSize: 11,
-                            fontWeight: 500,
-                            color: '#1F88D0',
-                            background: 'none',
-                            border: 'none',
-                            cursor: 'pointer',
-                            padding: 0,
-                            opacity: isModified ? 1 : 0.5,
-                            '&:hover': {
-                                textDecoration: 'underline',
-                            },
-                        } }, { children: "Reset" }))] }), _jsx(Divider, {}), _jsx(ColumnItemsContainer, { children: columns.map((column, columnIndex) => {
-                    var _a;
-                    const hasNestedSubmenu = column.menuItems && column.menuItems.length > 0;
-                    const { checked, indeterminate } = getColumnCheckState(column);
-                    return (_jsxs(React.Fragment, { 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, onClick: () => 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 }, modifiers: [
-                                            {
-                                                name: 'offset',
-                                                options: {
-                                                    offset: [0, 0],
-                                                },
-                                            },
-                                        ] }, { 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, onClick: () => 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.d.ts

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

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.d.ts

@@ -1,10 +0,0 @@
-export declare const DIALOG_WIDTH = 450;
-export declare const DIALOG_HEIGHT = 600;
-export declare const SUBMENU_CLOSE_DELAY = 150;
-export declare const MAX_CUSTOM_VIEWS = 3;
-export declare const TEMPLATE_NAME_MAX_LENGTH = 20;
-export declare const DATE_COLUMN_CONFIG: {
-    readonly name: "date";
-    readonly label: "Date";
-    readonly selected: true;
-};

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

@@ -1,10 +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 DATE_COLUMN_CONFIG = {
-    name: 'date',
-    label: 'Date',
-    selected: true,
-};

package/build/components/TableHeader/TableView/data.d.ts

@@ -1,5 +0,0 @@
-import type { ColumnViewProps } from '../../../types/index.js';
-import type { ViewMenuItem } from './types';
-export declare const advancedColumns: ColumnViewProps[];
-export declare const sheetColumns: ColumnViewProps[];
-export declare const defaultViewList: ViewMenuItem[];

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

@@ -1,48 +0,0 @@
-export const advancedColumns = [
-    {
-        name: 'customer',
-        label: 'Customer',
-        selected: true,
-        menuItems: [
-            { name: 'customer_id', label: 'ID', selected: true },
-            { name: 'customer_name', label: 'Name', selected: true },
-            { name: 'customer_email', label: 'Email', selected: true },
-            { name: 'customer_phone', label: 'Phone', selected: false },
-        ],
-    },
-    {
-        name: 'transaction',
-        label: 'Transaction',
-        selected: true,
-        menuItems: [
-            { name: 'transaction_id', label: 'Transaction ID', selected: true },
-            { name: 'transaction_amount', label: 'Amount', selected: true },
-            { name: 'transaction_status', label: 'Status', selected: false },
-            { name: 'transaction_type', label: 'Type', selected: false },
-        ],
-    },
-    {
-        name: 'payment',
-        label: 'Payment',
-        selected: false,
-        menuItems: [
-            { name: 'payment_method', label: 'Method', selected: false },
-            { name: 'payment_card', label: 'Card', selected: false },
-            { name: 'payment_bank', label: 'Bank', selected: false },
-        ],
-    },
-];
-export const sheetColumns = [
-    { name: 'customerID', label: 'Customer ID', selected: true },
-    { name: 'customerName', label: 'Customer Name', selected: true },
-    { name: 'amount', label: 'Amount', selected: true },
-    { name: 'status', label: 'Status', selected: false },
-    { name: 'currency', label: 'Currency', selected: false },
-    { name: 'reference', label: 'Reference', selected: true },
-];
-export const defaultViewList = [
-    {
-        label: 'Default',
-        id: 'default',
-    },
-];

package/build/components/TableHeader/TableView/hooks/useCreateViewDialog.d.ts

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import type { ColumnViewProps } from '../../../../types/index.js';
-import type { UseCreateViewDialogProps } from '../types';
-export declare const useCreateViewDialog: ({ open, availableColumns, defaultColumns, editingView, tableViews }: UseCreateViewDialogProps) => {
-    templateName: string;
-    setTemplateName: import("react").Dispatch<import("react").SetStateAction<string>>;
-    selectedColumns: ColumnViewProps[];
-    columnNames: string[];
-    allSelected: boolean;
-    someSelected: boolean;
-    isNameValid: boolean;
-    hoveredColumn: string | null;
-    anchorEl: HTMLElement | null;
-    openSubmenu: (columnName: string, element: HTMLElement) => void;
-    closeSubmenu: () => void;
-    cancelClose: () => void;
-    handleReorder: (reorderedNames: string[]) => void;
-    handleColumnToggle: (columnName: string) => void;
-    handleSubItemToggle: (columnName: string, subItemName: string) => void;
-    handleSelectAll: () => void;
-    handleResetToDefault: () => void;
-};