@tap-payments/os-micro-frontend-shared 0.1.371-test.1-test.2-test.3-test.4-test.5-test.6-test.7 → 0.1.372-test.1

package/build/components/TableHeader/FiltersRow.d.ts

@@ -1,2 +1,2 @@
 import type { FilterRowProps } from './type';
-export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, }: FilterRowProps): import("react/jsx-runtime").JSX.Element;
+export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange, searchPlaceholder, isAcceptance, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }: FilterRowProps): import("react/jsx-runtime").JSX.Element;

package/build/components/TableHeader/FiltersRow.js

@@ -6,7 +6,7 @@ import FiltersRowWrapper from './FiltersRowWrapper';
 import TableView from './TableView';
 import { ViewsManager } from './TableView';
 import TableModeButton from './TableModeButton';
-export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange = 31, searchPlaceholder, isAcceptance, tableMode = 'default', timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, }) {
+export default function FiltersRow({ date, calendarMode, onDateChange, onCalendarModeSwitch, tableReportsComponent, tableFilterComponent, isReportsButtonVisible, onViewChange, onSearchChange, onToggleViewButtonClick, rightActions, leftActions, setTableViews, tableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, maxDateRange = 31, searchPlaceholder, isAcceptance, tableMode = 'default', timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, }) {
     const [isViewVisible, setIsViewVisible] = useState(false);
     const timezoneCountriesCodes = useMemo(() => segmentCountries.map(({ code }) => code), [segmentCountries]);
     const tableModeButton = useMemo(() => _jsx(TableModeButton, { tableMode: tableMode, onToggle: onToggleTextButtonClick }), [tableMode, onToggleTextButtonClick]);
@@ -16,5 +16,5 @@ export default function FiltersRow({ date, calendarMode, onDateChange, onCalenda
                                 onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange([startDate, endDate]);
                             }
                         }, mode: calendarMode, onCalendarModeSwitch: onCalendarModeSwitch, maxDateRange: maxDateRange, groupBy: calendarGroupBy, onCalendarGroupChange: onCalendarGroupChange, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, timezone: timezone, onChangeTimezone: onChangeTimezone, timezoneCountriesCodes: timezoneCountriesCodes })), isReportsButtonVisible && tableReportsComponent, onToggleTextButtonClick && isAcceptance && tableModeButton] })), onToggleViewButtonClick && (_jsx(StyledButton, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), onViewChange &&
-                (customViews || onCreateCustomView ? (_jsx(ViewsManager, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, mode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
+                (customViews || onCreateCustomView ? (_jsx(ViewsManager, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, mode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData, templates: templates, lang: lang })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
 }

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

@@ -1,5 +1,5 @@
 import type { TableHeaderProps } from './type';
 import { type TableHeaderStatus } from '../../types/index.js';
-export declare function TableHeader<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, ...StatusBarProps }: TableHeaderProps<IStatus>): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined>({ date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries, customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang, ...StatusBarProps }: TableHeaderProps<IStatus>): import("react/jsx-runtime").JSX.Element;
 declare const _default: typeof TableHeader;
 export default _default;

package/build/components/TableHeader/TableHeader.js

@@ -15,8 +15,8 @@ import { FilteredIds, StatusBar, TableHeaderWrapper } from '../index.js';
 import FiltersRow from './FiltersRow';
 import { StatusButtonsContainer, TitleContainer, TableHeaderTitle, TableHeaderRow } from './style';
 export function TableHeader(_a) {
-    var { date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries = [], customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData } = _a, StatusBarProps = __rest(_a, ["date", "status", "availableStatuses", "showMaximizedView", "title", "calendarMode", "tableReportsComponent", "tableFilterComponent", "onStatusChange", "onViewChange", "onDateChange", "onCalendarModeSwitch", "filteredIds", "onCancelFilteredIdsClick", "isFilteredIdsShown", "cardNumber", "leftActions", "rightActions", "isReportsButtonVisible", "onSearchChange", "onToggleViewButtonClick", "leftComponent", "tableViews", "setTableViews", "resetTableViews", "onToggleTextButtonClick", "calendarGroupBy", "onCalendarGroupChange", "children", "maxDateRange", "isAcceptance", "startComponent", "searchPlaceholder", "tableMode", "timezone", "browserTimezone", "defaultCountryTimezone", "onChangeTimezone", "segmentCountries", "customViews", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "viewMode", "onTableViewsChange", "initialTableViews", "onCustomViewsChange", "initialCustomViews", "layoutData"]);
-    const filtersRow = (_jsx(FiltersRow, { date: date, calendarMode: calendarMode, onDateChange: onDateChange, onCalendarModeSwitch: onCalendarModeSwitch, tableReportsComponent: tableReportsComponent, tableFilterComponent: tableFilterComponent, onViewChange: onViewChange, leftActions: leftActions, rightActions: rightActions, onSearchChange: onSearchChange, onToggleViewButtonClick: onToggleViewButtonClick, isReportsButtonVisible: isReportsButtonVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, onToggleTextButtonClick: onToggleTextButtonClick, tableMode: tableMode, onCalendarGroupChange: onCalendarGroupChange, calendarGroupBy: calendarGroupBy, maxDateRange: maxDateRange, isAcceptance: isAcceptance, searchPlaceholder: searchPlaceholder, timezone: timezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, onChangeTimezone: onChangeTimezone, segmentCountries: segmentCountries, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, viewMode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData }));
+    var { date, status, availableStatuses, showMaximizedView, title, calendarMode, tableReportsComponent, tableFilterComponent, onStatusChange, onViewChange, onDateChange, onCalendarModeSwitch, filteredIds, onCancelFilteredIdsClick, isFilteredIdsShown, cardNumber, leftActions, rightActions, isReportsButtonVisible, onSearchChange, onToggleViewButtonClick, leftComponent, tableViews, setTableViews, resetTableViews, onToggleTextButtonClick, calendarGroupBy, onCalendarGroupChange, children, maxDateRange, isAcceptance, startComponent, searchPlaceholder, tableMode, timezone, browserTimezone, defaultCountryTimezone, onChangeTimezone, segmentCountries = [], customViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, viewMode, onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang } = _a, StatusBarProps = __rest(_a, ["date", "status", "availableStatuses", "showMaximizedView", "title", "calendarMode", "tableReportsComponent", "tableFilterComponent", "onStatusChange", "onViewChange", "onDateChange", "onCalendarModeSwitch", "filteredIds", "onCancelFilteredIdsClick", "isFilteredIdsShown", "cardNumber", "leftActions", "rightActions", "isReportsButtonVisible", "onSearchChange", "onToggleViewButtonClick", "leftComponent", "tableViews", "setTableViews", "resetTableViews", "onToggleTextButtonClick", "calendarGroupBy", "onCalendarGroupChange", "children", "maxDateRange", "isAcceptance", "startComponent", "searchPlaceholder", "tableMode", "timezone", "browserTimezone", "defaultCountryTimezone", "onChangeTimezone", "segmentCountries", "customViews", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "viewMode", "onTableViewsChange", "initialTableViews", "onCustomViewsChange", "initialCustomViews", "layoutData", "templates", "lang"]);
+    const filtersRow = (_jsx(FiltersRow, { date: date, calendarMode: calendarMode, onDateChange: onDateChange, onCalendarModeSwitch: onCalendarModeSwitch, tableReportsComponent: tableReportsComponent, tableFilterComponent: tableFilterComponent, onViewChange: onViewChange, leftActions: leftActions, rightActions: rightActions, onSearchChange: onSearchChange, onToggleViewButtonClick: onToggleViewButtonClick, isReportsButtonVisible: isReportsButtonVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews, onToggleTextButtonClick: onToggleTextButtonClick, tableMode: tableMode, onCalendarGroupChange: onCalendarGroupChange, calendarGroupBy: calendarGroupBy, maxDateRange: maxDateRange, isAcceptance: isAcceptance, searchPlaceholder: searchPlaceholder, timezone: timezone, browserTimezone: browserTimezone, defaultCountryTimezone: defaultCountryTimezone, onChangeTimezone: onChangeTimezone, segmentCountries: segmentCountries, customViews: customViews, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, viewMode: viewMode, onTableViewsChange: onTableViewsChange, initialTableViews: initialTableViews, onCustomViewsChange: onCustomViewsChange, initialCustomViews: initialCustomViews, layoutData: layoutData, templates: templates, lang: lang }));
     return (_jsxs(TableHeaderWrapper, { children: [showMaximizedView && (_jsxs(TitleContainer, { children: [_jsx("span", { children: !!title && _jsx(TableHeaderTitle, { children: title }) }), filtersRow] }, "TitleContainer")), _jsxs(TableHeaderRow, Object.assign({ as: "section" }, { children: [_jsxs(StatusButtonsContainer, Object.assign({ as: "aside" }, { children: [startComponent, _jsx(StatusBar, Object.assign({ status: status, availableStatuses: availableStatuses, onStatusChange: onStatusChange, isFilteredIdsShown: isFilteredIdsShown }, StatusBarProps)), leftComponent, isFilteredIdsShown && (_jsx(FilteredIds, { cardNumber: cardNumber, Ids: filteredIds, isShown: isFilteredIdsShown, onCancelClick: onCancelFilteredIdsClick }, "FilteredIds"))] })), !showMaximizedView && filtersRow] }), "FiltersWrapper"), children] }));
 }
 export default memo(TableHeader);

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

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

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

@@ -18,7 +18,7 @@ import CreateViewDialog from './CreateViewDialog';
 import { getColumnsByMode, createCustomViewMenuItem } from './utils';
 import { ViewWrapper } from './styles';
 import { useViewsManager } from './hooks';
-function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode = 'sheet', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, }) {
+function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableViews: externalTableViews, resetTableViews, customViews: externalCustomViews, onCreateCustomView, onEditCustomView, onDeleteCustomView, mode = 'sheet', onTableViewsChange, initialTableViews, onCustomViewsChange, initialCustomViews, layoutData, templates, lang = 'en', }) {
     const { t } = useTranslation();
     const [anchorViewEl, setAnchorViewEl] = useState(null);
     const [defaultViewEl, setDefaultViewElement] = useState(null);
@@ -31,6 +31,8 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
         layoutData,
         initialTableViews,
         initialCustomViews,
+        templates,
+        lang,
     });
     const tableViews = externalTableViews !== null && externalTableViews !== void 0 ? externalTableViews : internalTableViews;
     const setTableViewsState = setTableViews !== null && setTableViews !== void 0 ? setTableViews : setInternalTableViews;
@@ -116,6 +118,6 @@ function ViewsManager({ onViewChange, setIsViewVisible, setTableViews, tableView
                                     const resetColumns = getColumnsByMode(mode, layoutData);
                                     handleTableViewsChange(resetColumns);
                                 }
-                            }, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: (useCurrentState) => handleOpenCreateDialog(useCurrentState), 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 })] }));
+                            }, tableViews: tableViews, setTableViews: handleTableViewsChange, onCreateCustomView: (useCurrentState) => handleOpenCreateDialog(useCurrentState), 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(ViewsManager);

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

@@ -46,9 +46,16 @@ export const ColumnList = ({ selectedColumns, columnNames, allSelected, someSele
                                                     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 } }, { 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));
+                                                }, 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", modifiers: [
+                                        {
+                                            name: 'offset',
+                                            options: {
+                                                offset: [0, 0],
+                                            },
+                                        },
+                                    ], sx: { zIndex: 10000 } }, { children: _jsx(Box, Object.assign({ onMouseEnter: onCancelClose, onMouseLeave: onSubmenuLeave, sx: { display: 'flex' } }, { children: _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.js

@@ -37,9 +37,16 @@ export const ViewsSubmenu = ({ columns, allCurrentSelected, someCurrentSelected,
                                             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 } }, { 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));
+                                        } }, { 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", modifiers: [
+                                            {
+                                                name: 'offset',
+                                                options: {
+                                                    offset: [0, 0],
+                                                },
+                                            },
+                                        ], sx: { zIndex: 10000 } }, { children: _jsx(Box, Object.assign({ onMouseEnter: cancelNestedClose, onMouseLeave: closeNestedSubmenu, sx: { display: 'flex' } }, { children: _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/hooks/useViewsManager.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ColumnViewProps } from '../../../../types/index.js';
 import type { UseViewsManagerProps, ViewMenuItem } from '../types';
-export declare const useViewsManager: ({ mode, layoutData, initialTableViews, initialCustomViews }: UseViewsManagerProps) => {
+export declare const useViewsManager: ({ mode, layoutData, initialTableViews, initialCustomViews, templates, lang }: UseViewsManagerProps) => {
     defaultColumns: ColumnViewProps[];
     setDefaultColumns: import("react").Dispatch<import("react").SetStateAction<ColumnViewProps[]>>;
     internalTableViews: ColumnViewProps[];

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

@@ -1,15 +1,34 @@
-import { useState, useEffect } from 'react';
-import { getColumnsByMode } from '../utils';
-export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCustomViews }) => {
-    const [defaultColumns, setDefaultColumns] = useState(() => getColumnsByMode(mode, layoutData));
-    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || getColumnsByMode(mode, layoutData) || []);
-    const [internalCustomViews, setInternalCustomViews] = useState(initialCustomViews || []);
+import { useState, useEffect, useMemo } from 'react';
+import { getColumnsByMode, transformTemplatesToViewMenuItems, getLayoutDataFromTemplates } from '../utils';
+export const useViewsManager = ({ mode, layoutData, initialTableViews, initialCustomViews, templates, lang = 'en' }) => {
+    // Transform templates internally if provided
+    const transformedTemplates = useMemo(() => {
+        if (!templates)
+            return null;
+        const templatesArray = Array.isArray(templates) ? templates : templates.templates;
+        return {
+            customViews: transformTemplatesToViewMenuItems(templatesArray, mode, lang),
+            layoutData: getLayoutDataFromTemplates(templatesArray),
+        };
+    }, [templates, mode, lang]);
+    // Use transformed templates or provided props
+    const effectiveLayoutData = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.layoutData) || layoutData;
+    const effectiveCustomViews = (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) || initialCustomViews;
+    const [defaultColumns, setDefaultColumns] = useState(() => getColumnsByMode(mode, effectiveLayoutData));
+    const [internalTableViews, setInternalTableViews] = useState(initialTableViews || getColumnsByMode(mode, effectiveLayoutData) || []);
+    const [internalCustomViews, setInternalCustomViews] = useState(effectiveCustomViews || []);
     useEffect(() => {
-        setDefaultColumns(getColumnsByMode(mode, layoutData));
-        if (!initialTableViews && layoutData) {
-            setInternalTableViews(getColumnsByMode(mode, layoutData));
+        setDefaultColumns(getColumnsByMode(mode, effectiveLayoutData));
+        if (!initialTableViews && effectiveLayoutData) {
+            setInternalTableViews(getColumnsByMode(mode, effectiveLayoutData));
         }
-    }, [mode, layoutData, initialTableViews]);
+    }, [mode, effectiveLayoutData, initialTableViews]);
+    // Update custom views when templates change
+    useEffect(() => {
+        if (transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews) {
+            setInternalCustomViews(transformedTemplates.customViews);
+        }
+    }, [transformedTemplates === null || transformedTemplates === void 0 ? void 0 : transformedTemplates.customViews]);
     return {
         defaultColumns,
         setDefaultColumns,

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

@@ -108,6 +108,8 @@ export interface ViewsManagerProps {
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     initialCustomViews?: ViewMenuItem[];
     layoutData?: LayoutSection[];
+    templates?: TemplatesListResponse | TemplateResponse[];
+    lang?: string;
 }
 export interface ViewsDropdownProps {
     open: boolean;
@@ -168,4 +170,6 @@ export interface UseViewsManagerProps {
     layoutData?: LayoutSection[];
     initialTableViews?: ColumnViewProps[];
     initialCustomViews?: ViewMenuItem[];
+    templates?: TemplatesListResponse | TemplateResponse[];
+    lang?: string;
 }

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

@@ -8,6 +8,13 @@ export declare const getColumnsByMode: (mode: ViewMode, layoutData?: LayoutSecti
 export declare const isDateColumn: (name: string) => boolean;
 export declare const getColumnCheckState: (column: ColumnViewProps) => ColumnCheckState;
 export declare const createCustomViewMenuItem: (name: string, selectedColumns: ColumnViewProps[], isDefault?: boolean) => ViewMenuItem;
+/**
+ * Extract layout data from templates (combine all sections from all templates)
+ * This is used for the built-in "Default" view's layoutData prop
+ */
+export declare const getLayoutDataFromTemplates: (templates: Array<{
+    layout: LayoutSection[];
+}>) => LayoutSection[];
 /**
  * Set a view as default and ensure only one view is default at a time
  */

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

@@ -59,6 +59,31 @@ export const createCustomViewMenuItem = (name, selectedColumns, isDefault = fals
     isCustom: true,
     default: isDefault,
 });
+/**
+ * Extract layout data from templates (combine all sections from all templates)
+ * This is used for the built-in "Default" view's layoutData prop
+ */
+export const getLayoutDataFromTemplates = (templates) => {
+    const sectionsMap = new Map();
+    templates.forEach((template) => {
+        template.layout.forEach((section) => {
+            const existingSection = sectionsMap.get(section.code);
+            if (existingSection) {
+                // Merge columns, avoiding duplicates
+                const existingCodes = new Set(existingSection.columns.map((col) => col.code));
+                section.columns.forEach((col) => {
+                    if (!existingCodes.has(col.code)) {
+                        existingSection.columns.push(col);
+                    }
+                });
+            }
+            else {
+                sectionsMap.set(section.code, Object.assign(Object.assign({}, section), { columns: [...section.columns] }));
+            }
+        });
+    });
+    return Array.from(sectionsMap.values());
+};
 /**
  * Set a view as default and ensure only one view is default at a time
  */

package/build/components/TableHeader/type.d.ts

@@ -63,6 +63,8 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
     onCustomViewsChange?: (customViews: ViewMenuItem[]) => void;
     initialCustomViews?: ViewMenuItem[];
     layoutData?: import('./TableView/types').LayoutSection[];
+    templates?: import('./TableView/types').TemplatesListResponse | import('./TableView/types').TemplateResponse[];
+    lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;
     calendarGroupBy?: string;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.371-test.1-test.2-test.3-test.4-test.5-test.6-test.7",
-  "testVersion": 7,
+  "version": "0.1.372-test.1",
+  "testVersion": 1,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",