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

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

@@ -0,0 +1,417 @@
+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: 0,
+    },
+}));
+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: '#FAFAFA',
+    cursor: 'pointer',
+    '&:hover': {
+        backgroundColor: '#F0F0F0',
+    },
+}));
+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: '#F8F9FB',
+    borderTop: '1px solid',
+    borderColor: theme.palette.divider,
+}));
+export const CreateButtonWrapper = styled(Box)(() => ({
+    position: 'absolute',
+    bottom: 12,
+    right: 16,
+    padding: 6,
+    backgroundColor: 'white',
+}));
+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)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '8px 12px',
+    cursor: 'pointer',
+}));
+export const DeleteButton = styled(Button)(() => ({
+    color: '#FF0000',
+    textTransform: 'none',
+    fontSize: 10,
+    fontWeight: 500,
+    borderRadius: '4px',
+    border: '1px solid #F4F4F4',
+    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: '#1F88D0',
+    '&:hover': {
+        backgroundColor: '#1A7BC0',
+    },
+    '&.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,
+}));
+export const ColumnItemsContainer = styled(Box)(() => ({
+    maxHeight: 300,
+    overflowY: 'auto',
+    paddingLeft: 6,
+    paddingRight: 6,
+}));
+export const SaveCustomViewBox = styled(Box)(() => ({
+    paddingLeft: 8,
+    paddingRight: 8,
+    paddingTop: 8,
+    paddingBottom: 8,
+}));
+export const SaveCustomViewInnerBox = styled(Box)(({ disabled }) => ({
+    width: '100%',
+    borderRadius: '8px',
+    backgroundColor: '#1F88D00D',
+    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)(() => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 12,
+    paddingTop: 8,
+    paddingBottom: 8,
+    paddingLeft: 12,
+    paddingRight: 12,
+}));
+export const CancelButtonSx = {
+    fontSize: 11,
+    fontWeight: 400,
+    textTransform: 'none',
+    color: 'text.primary',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    border: '1px solid #F2F2F2',
+};
+export const OkayButtonSx = {
+    fontSize: 11,
+    fontWeight: 500,
+    textTransform: 'none',
+    backgroundColor: '#1F88D0',
+    minWidth: 80,
+    height: 38,
+    borderRadius: '8px',
+    boxShadow: 'none',
+    '&:hover': {
+        backgroundColor: '#1976B8',
+        boxShadow: 'none',
+    },
+};
+export const ModifiedTextSx = {
+    color: '#20232B80',
+    fontSize: '9px',
+    fontWeight: 500,
+    marginLeft: '4px',
+};

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

@@ -0,0 +1,137 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { TableHeaderProps, ViewOption } from '../type';
+export type ViewMode = 'advanced' | 'sheet';
+export interface ViewMenuItem {
+    label: string;
+    id: string;
+    columns?: string[];
+    submenu?: ColumnViewProps[];
+    isCustom?: boolean;
+}
+export interface FieldItem {
+    code: string;
+    name: {
+        text: string;
+        lang: string;
+    }[];
+    default?: boolean;
+}
+export interface ColumnItem {
+    code: string;
+    name: {
+        text: string;
+        lang: string;
+    }[];
+    order?: number;
+    default?: boolean;
+    fields?: FieldItem[];
+}
+export interface LayoutSection {
+    code: string;
+    columns: ColumnItem[];
+}
+export interface CreateCustomViewDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onCreate?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+    }) => Promise<void>;
+    availableColumns?: ColumnViewProps[];
+    isLoading?: boolean;
+    defaultColumns?: ColumnViewProps[];
+    editingView?: {
+        id: string;
+        label: string;
+        submenu?: ColumnViewProps[];
+    } | null;
+    onDelete?: (viewId: string) => Promise<void>;
+    tableViews?: ColumnViewProps[];
+}
+export interface ColumnCheckState {
+    checked: boolean;
+    indeterminate: boolean;
+}
+export interface ViewsManagerProps {
+    onViewChange?: TableHeaderProps['onViewChange'];
+    setIsViewVisible: (visible: boolean) => void;
+    setTableViews?: TableHeaderProps['setTableViews'];
+    tableViews?: TableHeaderProps['tableViews'];
+    resetTableViews?: TableHeaderProps['resetTableViews'];
+    customViews?: ViewMenuItem[];
+    onCreateCustomView?: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+    }) => Promise<void>;
+    onEditCustomView?: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+    }) => Promise<void>;
+    onDeleteCustomView?: (viewId: string) => Promise<void>;
+    mode?: ViewMode;
+    onTableViewsChange?: (tableViews: ColumnViewProps[]) => void;
+    initialTableViews?: ColumnViewProps[];
+    onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
+    initialCustomViews?: ViewMenuItem[];
+    layoutData?: LayoutSection[];
+}
+export interface ViewsDropdownProps {
+    open: boolean;
+    selectedViewInfo: ViewOption;
+    setSelectedViewInfo: (selected: ViewOption) => void;
+    onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
+    setViews?: (views: string[]) => void;
+    anchorEl: Element | null;
+    tableViews?: ColumnViewProps[];
+    setTableViews?: (columns: ColumnViewProps[]) => void;
+    onCreateCustomView?: (useCurrentState?: boolean) => void;
+    customViews?: ViewMenuItem[];
+    onEditCustomView?: (view: ViewMenuItem) => void;
+    defaultColumns?: ColumnViewProps[];
+    setDefaultColumns?: (columns: ColumnViewProps[]) => void;
+}
+export interface ColumnListProps {
+    selectedColumns: ColumnViewProps[];
+    columnNames: string[];
+    allSelected: boolean;
+    someSelected: boolean;
+    hoveredColumn: string | null;
+    anchorEl: HTMLElement | null;
+    onReorder: (reorderedNames: string[]) => void;
+    onColumnToggle: (columnName: string) => void;
+    onSubItemToggle: (columnName: string, subItemName: string) => void;
+    onSelectAll: () => void;
+    onResetToDefault: () => void;
+    onSubmenuEnter: (columnName: string, element: HTMLElement) => void;
+    onSubmenuLeave: () => void;
+    onCancelClose: () => void;
+    hasChanges?: boolean;
+}
+export interface ViewsSubmenuProps {
+    columns: ColumnViewProps[];
+    allCurrentSelected: boolean;
+    someCurrentSelected: boolean;
+    onSelectAll: () => void;
+    onReset: () => void;
+    onColumnToggle: (columnName: string) => void;
+    onNestedItemToggle: (columnName: string, subItemName: string) => void;
+    anchorEl: HTMLElement | null;
+}
+export interface UseCreateViewDialogProps {
+    open: boolean;
+    availableColumns: ColumnViewProps[];
+    defaultColumns: ColumnViewProps[];
+    editingView?: {
+        id: string;
+        label: string;
+        submenu?: ColumnViewProps[];
+    } | null;
+    tableViews?: ColumnViewProps[];
+}
+export interface UseViewsManagerProps {
+    mode: ViewMode;
+    layoutData?: LayoutSection[];
+    initialTableViews?: ColumnViewProps[];
+    initialCustomViews?: ViewMenuItem[];
+}

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

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

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

@@ -0,0 +1,86 @@
+import type { ColumnViewProps } from '../../../types/index.js';
+import type { LayoutSection, ViewMenuItem, ColumnCheckState, ViewMode } from './types';
+/**
+ * Transform API layout response to internal ColumnViewProps format
+ */
+export declare const transformLayoutToColumns: (layout: LayoutSection[], lang?: string) => ColumnViewProps[];
+export declare const getColumnsByMode: (mode: ViewMode, layoutData?: LayoutSection[]) => ColumnViewProps[];
+export declare const isDateColumn: (name: string) => boolean;
+export declare const getColumnCheckState: (column: ColumnViewProps) => ColumnCheckState;
+export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[]) => ViewMenuItem;
+/**
+ * Initialize columns for editing mode
+ */
+export declare const initializeEditingColumns: (editingColumns: ColumnViewProps[], availableColumns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Initialize columns for create mode (all unchecked except date)
+ */
+export declare const initializeCreateColumns: (availableColumns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Initialize columns for create mode with current tableViews state (preserves checked/unchecked values)
+ */
+export declare const initializeCreateColumnsWithCurrentState: (availableColumns: ColumnViewProps[], currentTableViews: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Reset columns to their default selection state
+ */
+export declare const resetColumnsToDefault: (columns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Toggle a column's selection (including all children if present)
+ */
+export declare const toggleColumn: (columns: ColumnViewProps[], columnName: string) => ColumnViewProps[];
+/**
+ * Toggle a sub-item's selection and update parent state
+ */
+export declare const toggleSubItem: (columns: ColumnViewProps[], columnName: string, subItemName: string) => ColumnViewProps[];
+/**
+ * Select or deselect all columns (except date)
+ */
+export declare const toggleAllColumns: (columns: ColumnViewProps[], selectAll: boolean) => ColumnViewProps[];
+/**
+ * Check if all non-date columns are selected
+ */
+export declare const areAllColumnsSelected: (columns: ColumnViewProps[]) => boolean;
+/**
+ * Check if some (but not all) non-date columns are selected
+ */
+export declare const areSomeColumnsSelected: (columns: ColumnViewProps[], allSelected: boolean) => boolean;
+/**
+ * Validate template name
+ */
+export declare const isValidTemplateName: (name: string, maxLength: number) => boolean;
+/**
+ * Deep clone columns array with all nested properties
+ */
+export declare const deepCloneColumns: (columns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Toggle a single column's selection state
+ */
+export declare const toggleSingleColumn: (columns: ColumnViewProps[], columnName: string) => ColumnViewProps[];
+/**
+ * Get submenu items for a view menu item
+ */
+export declare const getSubmenuItems: (item: ViewMenuItem, defaultColumns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Check if a view menu item has submenu
+ */
+export declare const hasSubmenu: (item: ViewMenuItem, defaultColumns: ColumnViewProps[]) => boolean;
+/**
+ * Check if all columns in current state are selected
+ */
+export declare const areAllCurrentColumnsSelected: (columns: ColumnViewProps[]) => boolean;
+/**
+ * Check if some (but not all) columns in current state are selected
+ */
+export declare const areSomeCurrentColumnsSelected: (columns: ColumnViewProps[], allSelected: boolean) => boolean;
+/**
+ * Toggle all columns selection (select all or unselect all)
+ */
+export declare const toggleAllCurrentColumns: (columns: ColumnViewProps[], shouldSelect: boolean) => ColumnViewProps[];
+/**
+ * Normalize columns by converting undefined selected values to false for consistent comparison
+ */
+export declare const normalizeColumnsSelected: (columns: ColumnViewProps[]) => ColumnViewProps[];
+/**
+ * Compare two columns arrays to check if they are equal (same order, same selection states)
+ */
+export declare const areColumnsEqual: (cols1: ColumnViewProps[], cols2: ColumnViewProps[]) => boolean;