@tap-payments/os-micro-frontend-shared 0.1.439-test.1-test.2 → 0.1.439-test.1

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

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+export function useViewColumns({ columns, setTableViews }) {
+    const reorderColumns = useCallback((reorderedColumnNames) => {
+        const reorderedColumns = reorderedColumnNames
+            .map((name) => columns.find((column) => column.name === name))
+            .filter((column) => Boolean(column));
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(reorderedColumns);
+    }, [columns, setTableViews]);
+    const toggleColumnSelection = useCallback((columnName) => {
+        const updatedColumns = columns.map((column) => {
+            var _a;
+            if (column.name !== columnName)
+                return column;
+            const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
+            const newSelected = !column.selected;
+            if (!hasSubmenuItems) {
+                return Object.assign(Object.assign({}, column), { selected: newSelected });
+            }
+            const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
+            return Object.assign(Object.assign({}, column), { selected: newSelected, menuItems: updatedMenuItems });
+        });
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
+    }, [columns, setTableViews]);
+    const toggleSubmenuItem = useCallback((columnName, submenuItemName) => {
+        const updatedColumns = columns.map((column) => {
+            var _a, _b;
+            if (column.name !== columnName)
+                return column;
+            const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => {
+                if (item.name === submenuItemName) {
+                    return Object.assign(Object.assign({}, item), { selected: !item.selected });
+                }
+                return item;
+            });
+            const hasSelectedChildren = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
+            return Object.assign(Object.assign({}, column), { menuItems: updatedMenuItems, selected: hasSelectedChildren });
+        });
+        setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
+    }, [columns, setTableViews]);
+    return {
+        reorderColumns,
+        toggleColumnSelection,
+        toggleSubmenuItem,
+    };
+}

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

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { mapTemplatesToMenuItems, deepCloneColumns } from '../utils';
+export const useViewsManager = ({ tableMode, templates, lang = 'en' }) => {
+    const parsedData = useMemo(() => {
+        if (!templates || templates.length === 0) {
+            return {
+                menuItems: [],
+                defaultItem: undefined,
+                allItems: [],
+                defaultColumns: [],
+            };
+        }
+        const { menuItems, defaultItem, allItems } = mapTemplatesToMenuItems(templates, tableMode, lang);
+        const defaultColumns = (defaultItem === null || defaultItem === void 0 ? void 0 : defaultItem.submenu) ? deepCloneColumns(defaultItem.submenu) : [];
+        return {
+            menuItems,
+            defaultItem,
+            allItems,
+            defaultColumns,
+        };
+    }, [templates, tableMode, lang]);
+    return {
+        menuItems: parsedData.menuItems,
+        defaultItem: parsedData.defaultItem,
+        allItems: parsedData.allItems,
+        defaultColumns: parsedData.defaultColumns,
+        customViews: parsedData.menuItems,
+        defaultTemplate: parsedData.defaultItem,
+        allTemplates: parsedData.allItems,
+        baseDefaultColumns: parsedData.defaultColumns,
+    };
+};

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

@@ -0,0 +1,152 @@
+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 { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { deepCloneColumns } from '../utils';
+export const useViewsMenu = ({ mode, onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, defaultColumns, defaultTemplate, allTemplates, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const [editingView, setEditingView] = useState(null);
+    const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const [initialColumnsForCreate, setInitialColumnsForCreate] = useState(null);
+    const [selectedViewId, setSelectedViewId] = useState(null);
+    const hasInitializedRef = useRef(false);
+    const lastModeRef = useRef(null);
+    const getViewForParent = useCallback((view) => {
+        var _a;
+        const selectedColumns = ((_a = view.submenu) === null || _a === void 0 ? void 0 : _a.filter((col) => col.selected)) || [];
+        return Object.assign(Object.assign({}, view), { submenu: selectedColumns, columns: selectedColumns.map((col) => col.name) });
+    }, []);
+    const selectedView = useMemo(() => {
+        if (!selectedViewId)
+            return defaultTemplate;
+        const found = allTemplates.find((t) => t.id === selectedViewId);
+        return found || defaultTemplate;
+    }, [allTemplates, selectedViewId, defaultTemplate]);
+    const currentViewColumns = useMemo(() => {
+        return deepCloneColumns((selectedView === null || selectedView === void 0 ? void 0 : selectedView.submenu) || defaultColumns);
+    }, [selectedView, defaultColumns]);
+    const selectedViewInfo = useMemo(() => {
+        return {
+            id: (selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) || 'default',
+            label: (selectedView === null || selectedView === void 0 ? void 0 : selectedView.label) || 'Default',
+        };
+    }, [selectedView]);
+    useEffect(() => {
+        if (hasInitializedRef.current)
+            return;
+        if (!defaultTemplate)
+            return;
+        setSelectedViewId(defaultTemplate.id || null);
+        hasInitializedRef.current = true;
+        lastModeRef.current = mode;
+    }, [defaultTemplate, mode]);
+    useEffect(() => {
+        if (!hasInitializedRef.current)
+            return;
+        if (lastModeRef.current === mode)
+            return;
+        lastModeRef.current = mode;
+        if (selectedViewId) {
+            const matchingView = allTemplates.find((t) => t.id === selectedViewId);
+            if (matchingView)
+                return;
+        }
+        if (defaultTemplate) {
+            setSelectedViewId(defaultTemplate.id || null);
+        }
+        else {
+            setSelectedViewId(null);
+        }
+    }, [mode, selectedViewId, allTemplates, defaultTemplate]);
+    useEffect(() => {
+        if (selectedView) {
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(selectedView));
+        }
+        else {
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
+        }
+    }, [selectedView, onViewChange, getViewForParent]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorEl((current) => (current ? null : event.currentTarget));
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
+        var _a;
+        const viewId = (_a = viewMenuItem === null || viewMenuItem === void 0 ? void 0 : viewMenuItem.id) !== null && _a !== void 0 ? _a : null;
+        setSelectedViewId(viewId);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown]);
+    const updateSelectedView = useCallback((updatedView) => {
+        const viewId = updatedView.id;
+        setSelectedViewId((prev) => (prev !== viewId ? viewId : prev));
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(getViewForParent(updatedView));
+    }, [onViewChange, getViewForParent]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false, initialColumns) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setInitialColumnsForCreate(initialColumns !== null && initialColumns !== void 0 ? initialColumns : null);
+        setIsCreateDialogOpen(true);
+        setAnchorEl(null);
+    }, []);
+    const handleOpenEditDialog = useCallback((view) => {
+        setEditingView(view);
+        setShouldUseCurrentState(true);
+        setIsCreateDialogOpen(true);
+    }, []);
+    const handleCloseCreateDialog = useCallback(() => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+        setShouldUseCurrentState(false);
+        setInitialColumnsForCreate(null);
+    }, []);
+    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
+        if (editingView) {
+            const viewId = editingView.id;
+            yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(viewId, data));
+            setSelectedViewId(viewId);
+            handleCloseViewDropdown();
+        }
+        else {
+            const created = yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+            if (created === null || created === void 0 ? void 0 : created.id) {
+                setSelectedViewId(created.id);
+            }
+        }
+    }), [editingView, onEditCustomView, onCreateCustomView, handleCloseViewDropdown]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        const viewToDelete = allTemplates.find((view) => view.id === viewId);
+        yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView((_a = viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.id) !== null && _a !== void 0 ? _a : viewId));
+        if (selectedViewId === ((_b = viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.id) !== null && _b !== void 0 ? _b : viewId)) {
+            setSelectedViewId((_c = defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id) !== null && _c !== void 0 ? _c : null);
+        }
+    }), [allTemplates, onDeleteCustomView, selectedViewId, defaultTemplate]);
+    return {
+        anchorEl,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        selectedView,
+        currentViewColumns,
+        initialColumnsForCreate,
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        updateSelectedView,
+    };
+};

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

@@ -0,0 +1,10 @@
+export { default } from './TableView';
+export { default as TableView } from './TableView';
+export { default as DefaultViews } from './DefaultViews';
+export { default as CustomViews } from './CustomViews';
+export { default as ViewsMenu } from './ViewsMenu';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, mapTemplatesToMenuItems, mapColumnsToLayoutSection, getSubmenuFromTemplateLayout, getColumnOrder, handleTemplateUpdate, templateToViewMenuItem, convertTemplateToColumnsView, convertTemplatesToColumnsView, } from './utils';
+export { useSubmenuHover, useViewsManager, useViewsMenu, useCustomTableViews } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH, INDEX_COLUMN_CONFIG, DATE_COLUMN_CONFIG } from './constants';

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

@@ -0,0 +1,427 @@
+import { Box, styled, Button, Paper, TextField } from '@mui/material';
+export const ButtonStyled = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: '4px',
+    background: theme.palette.common.white,
+    padding: '8px',
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    gap: 8,
+    height: 32,
+    cursor: 'pointer',
+    '&:hover': {
+        border: '1px solid',
+        borderColor: theme.palette.info.dark,
+        boxShadow: theme.shadows[7],
+    },
+}));
+export const ViewWrapper = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    display: 'flex',
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    color: theme.palette.text.primary,
+    fontSize: '11px',
+    fontWeight: theme.typography.fontWeightRegular,
+    textTransform: 'capitalize',
+    position: 'relative',
+    transition: '0.5s',
+    paddingRight: 0,
+    marginRight: 0,
+    '&:after': {
+        content: '""',
+        position: 'absolute',
+        left: -8,
+        right: 0,
+        width: '100%',
+        height: '100%',
+        boxShadow: theme.shadows[11],
+        borderRadius: theme.spacing(0.5),
+        paddingInlineStart: theme.spacing(1),
+        paddingTop: '9px',
+        paddingBottom: '9px',
+        paddingInlineEnd: '9px',
+        zIndex: -1,
+    },
+    '& > *:last-child': {
+        marginRight: 0,
+        paddingRight: '6px',
+    },
+}));
+export const ListStyled = styled(Box)(({ theme }) => ({
+    background: theme.palette.common.white,
+    borderRadius: theme.spacing(1),
+    boxShadow: theme.shadows[5],
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    zIndex: 5,
+    fontSize: '11px',
+    width: 192,
+}));
+export const DropdownStyled = styled(Box)(() => ({
+    minWidth: 160,
+    position: 'relative',
+    marginRight: 0,
+    paddingRight: 0,
+}));
+export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
+    padding: theme.spacing(1),
+    paddingInlineEnd: 2,
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    display: 'flex',
+    alignItems: 'center',
+    height: 32,
+    cursor: 'pointer',
+    img: {
+        height: 12,
+    },
+    '.check-icon': {
+        height: 'auto',
+        marginInlineEnd: theme.spacing(1),
+    },
+    '&:hover': {
+        color: theme.palette.info.dark,
+        fontWeight: theme.typography.fontWeightBold,
+    },
+    '&.add-column': {
+        justifyContent: 'space-between',
+        paddingInlineEnd: theme.spacing(1),
+        position: 'relative',
+        border: 'none',
+        zIndex: 5,
+        borderBottom: '1px solid',
+        borderColor: theme.palette.divider,
+        borderTopRightRadius: theme.spacing(1),
+        borderTopLeftRadius: theme.spacing(1),
+        '&:hover': {
+            boxShadow: theme.shadows[6],
+        },
+    },
+}));
+export const Space = styled(Box)(({ theme }) => ({
+    width: 12,
+    marginInlineEnd: theme.spacing(1),
+}));
+export const SpaceAfter = styled(Box)(() => ({
+    width: 16,
+}));
+export const DialogContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'calc(100% - 32px)',
+    backgroundColor: theme.palette.background.paper,
+    position: 'relative',
+}));
+export const ScrollableContent = styled(Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 64,
+}));
+export const TitleSection = styled(Box)(() => ({
+    padding: '24px 0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
+export const ColumnListContainer = styled(Box)(({ theme }) => ({
+    border: '1px solid',
+    borderColor: theme.palette.divider,
+    borderRadius: '8px',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minHeight: 0,
+}));
+export const SelectAllHeader = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '12px',
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    backgroundColor: theme.palette.grey[50],
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: theme.palette.grey[100],
+    },
+}));
+export const ColumnItemRow = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isHovered' && prop !== 'isDate',
+})(({ theme, isHovered, isDate }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '12px',
+    borderBottom: '1px solid',
+    borderColor: theme.palette.divider,
+    backgroundColor: isHovered ? theme.palette.action.hover : theme.palette.background.paper,
+    cursor: isDate ? 'default' : 'grab',
+    '&:hover': {
+        backgroundColor: isDate ? theme.palette.background.paper : theme.palette.action.hover,
+    },
+    '&:last-child': {
+        borderBottom: 'none',
+    },
+}));
+export const DragIconWrapper = styled(Box)(() => ({
+    width: 20,
+    height: 20,
+    marginRight: 8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+}));
+export const CheckboxWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    width: 14,
+    height: 14,
+    minWidth: 14,
+    minHeight: 14,
+    flexShrink: 0,
+}));
+export const FooterBar = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 35,
+    backgroundColor: theme.palette.grey[50],
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+}));
+export const CreateButtonWrapper = styled(Box)(({ theme }) => ({
+    position: 'absolute',
+    bottom: 12,
+    right: 16,
+    padding: 6,
+    backgroundColor: theme.palette.background.paper,
+}));
+export const SubmenuPaper = styled(Paper)(() => ({
+    paddingTop: 4,
+    paddingBottom: 4,
+    minWidth: 180,
+    boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+    borderRadius: '8px',
+}));
+export const SubmenuItem = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 12px',
+    cursor: 'pointer',
+}));
+export const DeleteButton = styled(Button)(({ theme }) => ({
+    color: theme.palette.error.main,
+    textTransform: 'none',
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 4,
+    paddingBottom: 4,
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+}));
+export const CreateButton = styled(Button)(({ theme }) => ({
+    fontSize: 9,
+    fontWeight: 600,
+    borderRadius: 4,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 8,
+    paddingBottom: 8,
+    textTransform: 'none',
+    backgroundColor: theme.palette.info.dark,
+    '&:hover': {
+        backgroundColor: theme.palette.info.main,
+    },
+    '&.Mui-disabled': {
+        backgroundColor: theme.palette.grey[300],
+        color: theme.palette.grey[500],
+    },
+}));
+export const NameTextField = styled(TextField)(({ theme }) => ({
+    '& .MuiFilledInput-root': {
+        borderRadius: '8px',
+        backgroundColor: theme.palette.background.paper,
+        border: '1px solid',
+        borderColor: theme.palette.divider,
+        '&:hover': {
+            backgroundColor: theme.palette.background.paper,
+        },
+        '&.Mui-focused': {
+            backgroundColor: theme.palette.background.paper,
+        },
+        '&::before, &::after': {
+            display: 'none',
+        },
+    },
+}));
+export const checkboxSx = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    width: 14,
+    height: 14,
+    minWidth: 14,
+    minHeight: 14,
+    flexShrink: 0,
+    color: 'grey.A400',
+    '&.Mui-checked': {
+        color: 'info.dark',
+    },
+    '&.MuiCheckbox-indeterminate': {
+        color: 'info.dark',
+    },
+    '&.Mui-disabled.Mui-checked': {
+        color: 'grey.500',
+        '& .MuiSvgIcon-root': {
+            backgroundColor: 'grey.500',
+            borderRadius: '3px',
+            color: '#fff',
+        },
+    },
+    '& .MuiSvgIcon-root': {
+        width: 14,
+        height: 14,
+    },
+    '& img': {
+        width: 14,
+        height: 14,
+    },
+};
+export const getDialogPaperStyle = (width, height) => ({
+    margin: 0,
+    maxHeight: '100%',
+    maxWidth: 'none',
+    width,
+    height,
+    borderRadius: 12,
+    overflow: 'hidden',
+    boxShadow: '0px 8px 32px rgba(0, 0, 0, 0.15)',
+});
+export const dialogSx = {
+    backgroundColor: 'transparent',
+    pointerEvents: 'none',
+    zIndex: 1300,
+    '& .MuiDialog-container': {
+        transition: 'none !important',
+        zIndex: 1300,
+    },
+    '& .MuiDialog-paper': {
+        transition: 'none !important',
+        pointerEvents: 'auto',
+        zIndex: 1300,
+    },
+};
+export const ResetHeaderBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: theme.spacing(1.5),
+    paddingRight: theme.spacing(1.5),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+    },
+}));
+export const ResetCheckboxSx = {
+    p: 0,
+    width: 14,
+    height: 14,
+    minWidth: 14,
+    minHeight: 14,
+    '&.Mui-checked': { color: 'info.dark' },
+    '&.MuiCheckbox-indeterminate': { color: 'info.dark' },
+    '& .MuiSvgIcon-root': { width: 14, height: 14 },
+};
+export const SubmenuContainer = styled(Box)(() => ({
+    minWidth: 200,
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: '80vh',
+    overflow: 'hidden',
+}));
+export const ColumnItemsContainer = styled(Box)(() => ({
+    flex: 1,
+    overflowY: 'auto',
+    paddingLeft: 6,
+    paddingRight: 6,
+    minHeight: 0,
+}));
+export const SaveCustomViewBox = styled(Box)(() => ({
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+    flexShrink: 0,
+}));
+export const SaveCustomViewInnerBox = styled(Box)(({ theme, disabled }) => ({
+    width: '100%',
+    borderRadius: '8px',
+    backgroundColor: theme.palette.grey[50],
+    padding: '8px',
+    marginLeft: 6,
+    marginRight: 6,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '6px',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.5 : 1,
+}));
+export const ButtonsContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+    flexShrink: 0,
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+}));
+export const CancelButtonSx = {
+    fontSize: 11,
+    fontWeight: 400,
+    textTransform: 'none',
+    color: 'text.primary',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    border: '1px solid',
+    borderColor: 'divider',
+};
+export const OkayButtonSx = {
+    fontSize: 11,
+    fontWeight: 500,
+    textTransform: 'none',
+    backgroundColor: 'info.dark',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    boxShadow: 'none',
+    '&:hover': {
+        backgroundColor: 'info.main',
+        boxShadow: 'none',
+    },
+};
+export const ModifiedTextSx = {
+    color: 'text.secondary',
+    fontSize: '9px',
+    fontWeight: 500,
+    marginLeft: '4px',
+};

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

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