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

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

@@ -0,0 +1,219 @@
+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 } from 'react';
+import { createCustomViewMenuItem } from '../utils';
+export const useViewSelector = ({ mode, onViewChange, onTableViewsChange, onCustomViewsChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, resetTableViews, setTableViews, tableViews, customViews, defaultColumns, defaultTemplate, setInternalCustomViews, setInternalTableViews, setDefaultColumns, apiMetadata, }) => {
+    const [anchorViewEl, setAnchorViewEl] = useState(null);
+    const [defaultViewEl, setDefaultViewElement] = useState(null);
+    const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+    const [editingView, setEditingView] = useState(null);
+    const [selectedViewInfo, setSelectedViewInfo] = useState({ id: 'default', label: 'Default' });
+    const [shouldUseCurrentState, setShouldUseCurrentState] = useState(false);
+    const [selectedView, setSelectedView] = useState(undefined);
+    const hasInitializedRef = useRef(false);
+    const prevModeRef = useRef(mode);
+    // Update editingView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (editingView && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === editingView.id);
+            if (updatedView && updatedView !== editingView) {
+                setEditingView(updatedView);
+            }
+        }
+    }, [customViews, editingView]);
+    // Update selectedView when customViews changes to ensure it reflects the latest saved state
+    useEffect(() => {
+        if (selectedView && selectedView.isCustom && customViews.length > 0) {
+            const updatedView = customViews.find((view) => view.id === selectedView.id);
+            if (updatedView) {
+                // Compare submenu to detect changes (deep comparison would be better, but this works for now)
+                const submenuChanged = JSON.stringify(updatedView.submenu) !== JSON.stringify(selectedView.submenu);
+                const labelChanged = updatedView.label !== selectedView.label;
+                if (submenuChanged || labelChanged) {
+                    // Create a new object reference to ensure React detects the change
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: updatedView.submenu ? [...updatedView.submenu] : undefined });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+        }
+    }, [customViews, selectedView, onViewChange]);
+    // Notify parent of initial view on mount only
+    useEffect(() => {
+        // Only initialize once on mount, don't reset if user has already selected a view
+        if (hasInitializedRef.current)
+            return;
+        // Use defaultTemplate if available, otherwise undefined (built-in default view)
+        const initialView = defaultTemplate || undefined;
+        setSelectedView(initialView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(initialView);
+        hasInitializedRef.current = true;
+    }, [defaultTemplate, onViewChange]);
+    // Update selected view when mode changes
+    useEffect(() => {
+        // Skip initial mount
+        if (!hasInitializedRef.current)
+            return;
+        // Only run if mode actually changed
+        if (prevModeRef.current === mode)
+            return;
+        prevModeRef.current = mode;
+        if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === 'default' && defaultTemplate) {
+            // Mode has changed, update with new default template columns
+            const updatedView = Object.assign(Object.assign({}, defaultTemplate), { submenu: defaultTemplate.submenu ? [...defaultTemplate.submenu] : undefined });
+            setSelectedView(updatedView);
+            onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
+        }
+        else if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.isCustom) && customViews.length > 0) {
+            // If viewing a custom view, update it with the new columns for this mode
+            const updatedCustomView = customViews.find((view) => view.id === selectedView.id);
+            if (updatedCustomView) {
+                const newView = Object.assign(Object.assign({}, updatedCustomView), { submenu: updatedCustomView.submenu ? [...updatedCustomView.submenu] : undefined });
+                setSelectedView(newView);
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newView);
+            }
+        }
+    }, [mode, defaultTemplate, customViews, selectedView, onViewChange]);
+    const handleTableViewsChange = useCallback((newTableViews) => {
+        const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
+        setTableViewsState(newTableViews);
+        onTableViewsChange === null || onTableViewsChange === void 0 ? void 0 : onTableViewsChange(newTableViews);
+    }, [setTableViews, setInternalTableViews, onTableViewsChange]);
+    const handleCustomViewsChange = useCallback((newCustomViews) => {
+        setInternalCustomViews(newCustomViews);
+        onCustomViewsChange === null || onCustomViewsChange === void 0 ? void 0 : onCustomViewsChange(newCustomViews);
+    }, [setInternalCustomViews, onCustomViewsChange]);
+    const handleViewButtonClick = useCallback((event) => {
+        setAnchorViewEl(event.currentTarget);
+        setDefaultViewElement(event.currentTarget);
+    }, []);
+    const handleCloseViewDropdown = useCallback(() => {
+        setDefaultViewElement(null);
+    }, []);
+    const handleClose = useCallback(() => {
+        setAnchorViewEl(null);
+        setDefaultViewElement(null);
+        setSelectedViewInfo({ label: 'Default', id: 'default' });
+    }, []);
+    const handleSelectedViewInfo = useCallback((selected, viewMenuItem) => {
+        setSelectedViewInfo(selected);
+        // Update selected view and notify parent
+        const newSelectedView = viewMenuItem || undefined;
+        setSelectedView(newSelectedView);
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+        handleCloseViewDropdown();
+    }, [handleCloseViewDropdown, onViewChange]);
+    // Internal function to update selected view and notify parent
+    // Used when default columns change via "Okay" button
+    const updateSelectedView = useCallback((updatedView) => {
+        setSelectedView(updatedView);
+        setSelectedViewInfo({ id: updatedView.id, label: updatedView.label });
+        onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(updatedView);
+    }, [onViewChange, setSelectedViewInfo]);
+    const handleOpenCreateDialog = useCallback((useCurrentState = false) => {
+        setEditingView(null);
+        setShouldUseCurrentState(useCurrentState);
+        setIsCreateDialogOpen(true);
+        setDefaultViewElement(null);
+    }, []);
+    const handleOpenEditDialog = useCallback((view) => {
+        setEditingView(view);
+        setShouldUseCurrentState(true);
+        setIsCreateDialogOpen(true);
+    }, []);
+    const handleCloseCreateDialog = useCallback(() => {
+        setIsCreateDialogOpen(false);
+        setEditingView(null);
+        setShouldUseCurrentState(false);
+    }, []);
+    const handleSaveView = useCallback((data) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (editingView) {
+                // Use templateId for API calls, not the internal view id
+                const templateId = editingView.templateId || editingView.id;
+                yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(templateId, data));
+                // Update state after promise resolves successfully
+                const updatedView = Object.assign(Object.assign({}, editingView), { label: data.name, columns: data.selectedColumns.map((col) => col.name), submenu: data.selectedColumns });
+                const updatedViews = customViews.map((view) => (view.id === editingView.id ? updatedView : view));
+                handleCustomViewsChange(updatedViews);
+                // If the updated view is currently selected, update selectedView to reflect changes
+                // Create a new object reference to ensure React detects the change
+                if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === editingView.id) {
+                    const newSelectedView = Object.assign(Object.assign({}, updatedView), { submenu: [...updatedView.submenu] });
+                    setSelectedView(newSelectedView);
+                    onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(newSelectedView);
+                }
+            }
+            else {
+                yield (onCreateCustomView === null || onCreateCustomView === void 0 ? void 0 : onCreateCustomView(data));
+                // Update state after promise resolves successfully
+                const newView = createCustomViewMenuItem(data.name, data.selectedColumns);
+                const updatedViews = [...customViews, newView];
+                handleCustomViewsChange(updatedViews);
+            }
+        }
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
+        }
+    }), [editingView, customViews, handleCustomViewsChange, onEditCustomView, onCreateCustomView, selectedView, onViewChange]);
+    const handleDeleteView = useCallback((viewId) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            // Find the view to get its templateId
+            const viewToDelete = customViews.find((view) => view.id === viewId);
+            const templateId = (viewToDelete === null || viewToDelete === void 0 ? void 0 : viewToDelete.templateId) || viewId;
+            yield (onDeleteCustomView === null || onDeleteCustomView === void 0 ? void 0 : onDeleteCustomView(templateId));
+            // Update state after promise resolves successfully
+            const updatedViews = customViews.filter((view) => view.id !== viewId);
+            handleCustomViewsChange(updatedViews);
+            // If the deleted view was selected, reset to default
+            if ((selectedView === null || selectedView === void 0 ? void 0 : selectedView.id) === viewId) {
+                setSelectedView(undefined);
+                onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange(undefined);
+            }
+        }
+        catch (error) {
+            // Error will be handled by the toast in CreateViewDialog
+            throw error;
+        }
+    }), [customViews, handleCustomViewsChange, onDeleteCustomView, selectedView, onViewChange]);
+    const handleResetViews = useCallback((views) => {
+        if (resetTableViews) {
+            resetTableViews({ id: views[0], label: views[0] });
+        }
+        else {
+            // Reset to default columns from templates
+            handleTableViewsChange([...defaultColumns]);
+        }
+    }, [resetTableViews, defaultColumns, handleTableViewsChange]);
+    return {
+        // State
+        anchorViewEl,
+        defaultViewEl,
+        setDefaultViewElement,
+        isCreateDialogOpen,
+        editingView,
+        selectedViewInfo,
+        shouldUseCurrentState,
+        // Handlers
+        handleViewButtonClick,
+        handleCloseViewDropdown,
+        handleClose,
+        handleSelectedViewInfo,
+        handleOpenCreateDialog,
+        handleOpenEditDialog,
+        handleCloseCreateDialog,
+        handleSaveView,
+        handleDeleteView,
+        handleResetViews,
+        handleTableViewsChange,
+        updateSelectedView,
+    };
+};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../../types/index.js';
+import type { UseViewsManagerProps, ViewMenuItem } from '../types';
+export declare const useViewsManager: ({ mode, templates, lang }: UseViewsManagerProps) => {
+    defaultColumns: ColumnViewProps[];
+    setDefaultColumns: (newColumns: ColumnViewProps[]) => void;
+    internalTableViews: ColumnViewProps[];
+    setInternalTableViews: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
+    internalCustomViews: ViewMenuItem[];
+    setInternalCustomViews: import("react").Dispatch<import("react").SetStateAction<ViewMenuItem[]>>;
+    defaultTemplate: ViewMenuItem | undefined;
+};

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

@@ -0,0 +1,139 @@
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { transformTemplatesToViewMenuItems } from '../utils';
+export const useViewsManager = ({ mode, templates, lang = 'en' }) => {
+    // Maintain internal templates state that can be modified
+    const [internalTemplates, setInternalTemplates] = useState(() => templates);
+    // Update internal templates when external templates prop changes
+    useEffect(() => {
+        if (templates) {
+            setInternalTemplates(templates);
+        }
+    }, [templates]);
+    // Transform templates internally - this is the only source of data
+    const transformedTemplates = useMemo(() => {
+        if (!internalTemplates)
+            return null;
+        const templatesArray = Array.isArray(internalTemplates) ? internalTemplates : internalTemplates.templates;
+        const { customViews, defaultTemplateColumns, defaultTemplate } = transformTemplatesToViewMenuItems(templatesArray, mode, lang);
+        // Only use default template columns - no fallback to layout data
+        // The default view must come from a template with default: true
+        const effectiveLayoutData = defaultTemplateColumns
+            ? [
+                {
+                    code: mode === 'advanced' ? 'Advanced' : 'Sheet',
+                    columns: defaultTemplateColumns.map((col, idx) => {
+                        var _a, _b;
+                        return ({
+                            code: col.name,
+                            name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
+                            order: idx + 1,
+                            default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
+                            fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                                var _a;
+                                return ({
+                                    code: item.name,
+                                    name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang: '' }],
+                                    default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
+                                });
+                            }),
+                        });
+                    }),
+                },
+            ]
+            : [];
+        return {
+            customViews,
+            layoutData: effectiveLayoutData,
+            defaultTemplateColumns,
+            defaultTemplate,
+        };
+    }, [internalTemplates, mode, lang]);
+    const [defaultColumns, setDefaultColumns] = useState([]);
+    const [internalTableViews, setInternalTableViews] = useState([]);
+    const [internalCustomViews, setInternalCustomViews] = useState([]);
+    useEffect(() => {
+        // Only use default template columns from template with default: true
+        // No fallback to layout data - default must come from templates array
+        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplateColumns) {
+            // Create new array references to ensure state updates
+            const newColumns = [...transformedTemplates.defaultTemplateColumns];
+            setDefaultColumns(newColumns);
+            setInternalTableViews(newColumns);
+        }
+        else {
+            // No default template found - set empty arrays
+            setDefaultColumns([]);
+            setInternalTableViews([]);
+        }
+    }, [mode, transformedTemplates]);
+    // Update custom views when templates/mode change
+    useEffect(() => {
+        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {
+            // Create new array reference to ensure state updates
+            setInternalCustomViews([...transformedTemplates.customViews]);
+        }
+        else {
+            setInternalCustomViews([]);
+        }
+    }, [mode, transformedTemplates]);
+    // Custom setDefaultColumns that also updates the internal templates
+    const setDefaultColumnsWithTemplateUpdate = useCallback((newColumns) => {
+        setDefaultColumns(newColumns);
+        // Update the internal templates to persist the changes
+        setInternalTemplates((prevTemplates) => {
+            if (!prevTemplates)
+                return prevTemplates;
+            const templatesArray = Array.isArray(prevTemplates) ? prevTemplates : prevTemplates.templates;
+            const templatesCopy = templatesArray.map((t) => (Object.assign({}, t)));
+            // Find the default template
+            const defaultTemplateIndex = templatesCopy.findIndex((t) => t.default);
+            if (defaultTemplateIndex === -1)
+                return prevTemplates;
+            const defaultTemplate = Object.assign({}, templatesCopy[defaultTemplateIndex]);
+            const layoutCopy = [...defaultTemplate.layout];
+            // Find and update the appropriate layout section
+            const layoutCode = mode === 'advanced' ? 'Advanced' : 'Sheet';
+            const layoutSectionIndex = layoutCopy.findIndex((section) => section.code === layoutCode);
+            if (layoutSectionIndex !== -1) {
+                // Convert ColumnViewProps back to template format
+                const updatedColumns = newColumns.map((col, idx) => {
+                    var _a, _b;
+                    return ({
+                        code: col.name,
+                        name: [{ text: typeof col.label === 'string' ? col.label : col.name, lang }],
+                        order: idx + 1,
+                        default: (_a = col.selected) !== null && _a !== void 0 ? _a : false,
+                        fields: (_b = col.menuItems) === null || _b === void 0 ? void 0 : _b.map((item) => {
+                            var _a;
+                            return ({
+                                code: item.name,
+                                name: [{ text: typeof item.label === 'string' ? item.label : item.name, lang }],
+                                order: null,
+                                default: (_a = item.selected) !== null && _a !== void 0 ? _a : false,
+                            });
+                        }),
+                    });
+                });
+                layoutCopy[layoutSectionIndex] = Object.assign(Object.assign({}, layoutCopy[layoutSectionIndex]), { columns: updatedColumns });
+                defaultTemplate.layout = layoutCopy;
+                templatesCopy[defaultTemplateIndex] = defaultTemplate;
+            }
+            // Return updated templates in the same format as the input
+            if (Array.isArray(prevTemplates)) {
+                return templatesCopy;
+            }
+            else {
+                return Object.assign(Object.assign({}, prevTemplates), { templates: templatesCopy });
+            }
+        });
+    }, [mode, lang]);
+    return {
+        defaultColumns,
+        setDefaultColumns: setDefaultColumnsWithTemplateUpdate,
+        internalTableViews,
+        setInternalTableViews,
+        internalCustomViews,
+        setInternalCustomViews,
+        defaultTemplate: transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.defaultTemplate,
+    };
+};

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

@@ -1,3 +1,12 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+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 ViewSelector } from './ViewSelector';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export type { ViewMenuItem, ViewMode, CreateCustomViewDialogProps, LayoutSection, ColumnItem, FieldItem, TemplateResponse, TemplatesListResponse, TemplateAPIMetadata, CreateTemplatePayload, UpdateTemplatePayload, } from './types';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -1,3 +1,13 @@
-import TableView from './TableView';
-export * from './TableView';
-export default TableView;
+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 ViewSelector } from './ViewSelector';
+export { default as ViewsDropdown } from './ViewsDropdown';
+export { default as CreateViewDialog } from './CreateViewDialog';
+export { transformLayoutToColumns, getColumnsByMode, createCustomViewMenuItem, setViewAsDefault, transformTemplatesToViewMenuItems, convertColumnsToLayoutSection, isDateColumn, getColumnCheckState, } from './utils';
+export { useSubmenuHover } from './hooks';
+export { DIALOG_WIDTH, DIALOG_HEIGHT, MAX_CUSTOM_VIEWS, TEMPLATE_NAME_MAX_LENGTH } from './constants';
+// Note: defaultViewList, advancedColumns, sheetColumns are only exported for demo purposes
+// They should not be used as defaults in production - all data should come from API
+export { defaultViewList, advancedColumns, sheetColumns } from './data';

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

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+import type { SxProps, Theme } from '@mui/material/styles';
+export declare const ButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ViewWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DropdownStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    addColumnViewEl?: boolean | undefined;
+}, {}, {}>;
+export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SpaceAfter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DialogContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ScrollableContent: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const TitleSection: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnListContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SelectAllHeader: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnItemRow: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isHovered?: boolean | undefined;
+    isDate?: boolean | undefined;
+}, {}, {}>;
+export declare const DragIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CheckboxWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const FooterBar: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CreateButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SubmenuPaper: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "classes" | "className" | "style" | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SubmenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DeleteButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CreateButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NameTextField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const checkboxSx: SxProps<Theme>;
+export declare const getDialogPaperStyle: (width: number, height: number) => {
+    margin: number;
+    maxHeight: string;
+    maxWidth: string;
+    width: number;
+    height: number;
+    borderRadius: number;
+    overflow: string;
+    boxShadow: string;
+};
+export declare const dialogSx: {
+    backgroundColor: string;
+    pointerEvents: string;
+    zIndex: number;
+    '& .MuiDialog-container': {
+        transition: string;
+        zIndex: number;
+    };
+    '& .MuiDialog-paper': {
+        transition: string;
+        pointerEvents: string;
+        zIndex: number;
+    };
+};
+export declare const ResetHeaderBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ResetCheckboxSx: SxProps<Theme>;
+export declare const SubmenuContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ColumnItemsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SaveCustomViewBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const SaveCustomViewInnerBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    disabled?: boolean | undefined;
+}, {}, {}>;
+export declare const ButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<Theme>> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const CancelButtonSx: SxProps<Theme>;
+export declare const OkayButtonSx: SxProps<Theme>;
+export declare const ModifiedTextSx: {
+    readonly color: "#20232B80";
+    readonly fontSize: "9px";
+    readonly fontWeight: 500;
+    readonly marginLeft: "4px";
+};