@tap-payments/os-micro-frontend-shared 0.1.417 → 0.1.418-test.8-test.1-test.2

package/build/components/AnimatedSpinnerIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type AnimatedSpinnerIconProps = {
     width?: string;
     height?: string;

package/build/components/Chip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { GetSourceAnimationFunction } from './type';
 export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: import("./type").ChipVariant | undefined;

package/build/components/CountBadge/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/Dialog/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/FlippingCard/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/JSONViewer/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const FOOTER_HEIGHT = 37;
 export declare const TITLE_BAR_HEIGHT = "32px";
 export declare const VIEWER_HEIGHT = 545;

package/build/components/LeftPeekRightExpandingChip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import type { SxProps, Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;

package/build/components/RightLeftExpandingCenterChip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { type Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const CenterIconWrapper: import("@emotion/styled").StyledComponent<{

package/build/components/SearchButton/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { TableMode } from '../../../../types/index.js';
 export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     tableMode?: TableMode | undefined;

package/build/components/TableCells/CustomCells/AgreementCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledAgreementCardIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const CardContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/IDButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/PayoutReportCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledDownloadFileImageWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isTextShown?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Global" | "Regional" | "Local" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -62,10 +62,10 @@ function CreateViewDialog({ open, onClose, onCreate, availableColumns = [], defa
     const handleDelete = () => __awaiter(this, void 0, void 0, function* () {
         if (!editingView || isDeleting || isLoading)
             return;
-        const templateId = editingView.templateId || editingView.id;
+        const viewId = editingView.id;
         setIsDeleting(true);
         try {
-            yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(templateId));
+            yield (onDelete === null || onDelete === void 0 ? void 0 : onDelete(viewId));
             onClose();
         }
         catch (error) {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ViewsMenuProps } from './types';
-declare function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, lang, }: ViewsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView, tableMode, lang, }: ViewsMenuProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ViewsMenu>;
 export default _default;

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

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,8 +9,7 @@ import CreateViewDialog from './CreateViewDialog';
 import { ViewWrapper } from './styles';
 import { useViewsManager } from './hooks';
 import { useViewsMenu } from './hooks/useViewsMenu';
-import { mapColumnsToLayoutSection } from './utils';
-function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', lang = 'en', }) {
+function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView, tableMode = 'default', lang = 'en', }) {
     var _a;
     const { t } = useTranslation();
     const [modifiedModes, setModifiedModes] = useState({});
@@ -38,17 +28,12 @@ function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomVi
         defaultTemplate,
         allTemplates,
     });
-    const handleSaveDefaultColumns = useCallback((columns) => __awaiter(this, void 0, void 0, function* () {
-        if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.templateId))
+    const handleSaveDefaultColumns = useCallback((columns) => {
+        if (!(defaultTemplate === null || defaultTemplate === void 0 ? void 0 : defaultTemplate.id))
             return;
-        const layout = mapColumnsToLayoutSection(columns, tableMode, lang);
-        yield (onEditCustomView === null || onEditCustomView === void 0 ? void 0 : onEditCustomView(defaultTemplate.templateId, {
-            name: defaultTemplate.label,
-            selectedColumns: columns,
-            layout,
-        }));
+        onUpdateDefaultView === null || onUpdateDefaultView === void 0 ? void 0 : onUpdateDefaultView(columns);
         setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
-    }), [defaultTemplate, tableMode, lang, onEditCustomView]);
+    }, [defaultTemplate, tableMode, onUpdateDefaultView]);
     return (_jsxs(_Fragment, { children: [_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCloseViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ sx: { width: '32px' }, "data-testid": "ViewsMenu" }, { children: [_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "ViewsMenu_button", onClick: handleViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })), _jsx(ViewsDropdown, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleCloseViewDropdown, defaultModified: (_a = modifiedModes[tableMode]) !== null && _a !== void 0 ? _a : false, onMarkDefaultModified: () => {
                                 setModifiedModes((current) => (Object.assign(Object.assign({}, current), { [tableMode]: true })));
                             }, setSelectedViewInfo: handleSelectedViewInfo, selectedViewInfo: selectedViewInfo, onCreateCustomView: handleOpenCreateDialog, customViews: customViews, onEditCustomView: handleOpenEditDialog, onSaveDefaultColumns: handleSaveDefaultColumns, defaultColumns: defaultColumns, updateSelectedView: updateSelectedView, baseDefaultColumns: baseDefaultColumns, mode: tableMode, defaultTemplate: defaultTemplate })] })) })), _jsx(CreateViewDialog, { open: isCreateDialogOpen, onClose: handleCloseCreateDialog, availableColumns: defaultColumns, defaultColumns: defaultColumns, onCreate: handleSaveView, editingView: editingView, onDelete: handleDeleteView, tableViews: shouldUseCurrentState ? initialColumnsForCreate !== null && initialColumnsForCreate !== void 0 ? initialColumnsForCreate : currentViewColumns : undefined, mode: tableMode })] }));

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

@@ -7,3 +7,5 @@ export { useSubmenuHover } from './useSubmenuHover';
 export { useOriginalColumns } from './useOriginalColumns';
 export { useNestedSubmenu } from './useNestedSubmenu';
 export { useCreateViewDialog } from './useCreateViewDialog';
+export { useCustomTableViews } from './useCustomTableViews';
+export type { UseTableViewsProps, ColumnModifier } from './useCustomTableViews';

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

@@ -7,3 +7,4 @@ export { useSubmenuHover } from './useSubmenuHover';
 export { useOriginalColumns } from './useOriginalColumns';
 export { useNestedSubmenu } from './useNestedSubmenu';
 export { useCreateViewDialog } from './useCreateViewDialog';
+export { useCustomTableViews } from './useCustomTableViews';

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

@@ -0,0 +1,9 @@
+import type { ColumnsView } from '../../../../types/index.js';
+import type { ViewMenuItem, UseTableViewsProps, CustomViewsConfigResult } from '../types';
+export type { ColumnModifier, UseTableViewsProps, CustomViewsConfigResult } from '../types';
+export declare function useCustomTableViews({ templates, setTemplates, createTemplate, updateTemplate, deleteTemplate, tableMode, lang, columnModifiers, }: UseTableViewsProps): {
+    customViews: CustomViewsConfigResult;
+    onViewChange: (view?: ViewMenuItem) => void;
+    columnsViewData: ColumnsView[];
+    selectedViewId: string | undefined;
+};

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

@@ -0,0 +1,126 @@
+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 { useCallback, useMemo, useState } from 'react';
+import { updateColumnSelection } from '../../../../utils/index.js';
+import { handleTemplateUpdate, templateToViewMenuItem, mapColumnsToLayoutSection, convertTemplateToColumnsView, convertTemplatesToColumnsView, isTemplateMatchingId, replaceTemplateInList, updateCurrentTemplate, } from '../utils';
+export function useCustomTableViews({ templates, setTemplates, createTemplate, updateTemplate, deleteTemplate, tableMode, lang = 'en', columnModifiers, }) {
+    const [selectedView, setSelectedView] = useState(undefined);
+    const onCreateCustomView = useCallback(({ name, layout }) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        const created = yield createTemplate({ name, layout: [layout] });
+        if (created) {
+            const normalized = handleTemplateUpdate(created);
+            setTemplates((prev) => [...prev, normalized]);
+            setSelectedView(templateToViewMenuItem(normalized, tableMode));
+            return { id: created.id, name: (_a = created.name) !== null && _a !== void 0 ? _a : '' };
+        }
+    }), [createTemplate, setTemplates, tableMode]);
+    const onDeleteCustomView = useCallback((templateId) => __awaiter(this, void 0, void 0, function* () {
+        yield deleteTemplate(templateId);
+        setTemplates((prev) => prev.filter((t) => !isTemplateMatchingId(t, templateId)));
+        setSelectedView((current) => ((current === null || current === void 0 ? void 0 : current.id) === templateId ? undefined : current));
+    }), [deleteTemplate, setTemplates]);
+    const onUpdateDefaultView = useCallback((columns) => {
+        const defaultTemplate = templates.find((t) => t.default);
+        if (!defaultTemplate)
+            return;
+        const layout = mapColumnsToLayoutSection(columns, tableMode, lang);
+        const { name, layout: mergedLayout } = updateCurrentTemplate(defaultTemplate, { layout });
+        const updatedDefault = Object.assign(Object.assign({}, defaultTemplate), { name, layout: mergedLayout });
+        setTemplates((prev) => replaceTemplateInList(prev, (t) => t.default, updatedDefault));
+    }, [templates, tableMode, lang, setTemplates]);
+    const onEditCustomView = useCallback((viewId, data) => __awaiter(this, void 0, void 0, function* () {
+        const template = templates.find((t) => isTemplateMatchingId(t, viewId));
+        const { name, layout } = updateCurrentTemplate(template, data);
+        const updated = yield updateTemplate(viewId, { name, layout });
+        if (updated) {
+            const normalized = handleTemplateUpdate(updated);
+            setTemplates((prev) => replaceTemplateInList(prev, (t) => isTemplateMatchingId(t, viewId), normalized));
+            setSelectedView(templateToViewMenuItem(normalized, tableMode));
+        }
+    }), [templates, tableMode, updateTemplate, setTemplates]);
+    const customViews = useMemo(() => ({
+        templates,
+        onCreateCustomView,
+        onEditCustomView,
+        onDeleteCustomView,
+        onUpdateDefaultView,
+    }), [templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, onUpdateDefaultView]);
+    const onViewChange = useCallback((view) => {
+        setSelectedView(view);
+    }, []);
+    const selectedViewSignature = useMemo(() => {
+        var _a, _b, _c;
+        if (!selectedView)
+            return '';
+        const submenuSignature = ((_a = selectedView.submenu) !== null && _a !== void 0 ? _a : []).map((item) => {
+            var _a;
+            return ({
+                name: item.name,
+                selected: item.selected,
+                menuItems: ((_a = item.menuItems) !== null && _a !== void 0 ? _a : []).map((menuItem) => ({
+                    name: menuItem.name,
+                    selected: menuItem.selected,
+                })),
+            });
+        });
+        const columnsSignature = (_b = selectedView.columns) !== null && _b !== void 0 ? _b : [];
+        const viewWithLayout = selectedView;
+        const layoutSignature = ((_c = viewWithLayout.layout) !== null && _c !== void 0 ? _c : []).map((layout) => {
+            var _a;
+            return ({
+                code: layout.code,
+                columns: ((_a = layout.columns) !== null && _a !== void 0 ? _a : []).map((col) => col.code),
+            });
+        });
+        return JSON.stringify({
+            id: selectedView.id,
+            columns: columnsSignature,
+            submenu: submenuSignature,
+            layout: layoutSignature,
+        });
+    }, [selectedView]);
+    const columnsViewData = useMemo(() => {
+        const currentSelectedView = selectedView;
+        let templateColumnsView = [];
+        if (currentSelectedView) {
+            const viewWithLayout = currentSelectedView;
+            const hasLayout = !!viewWithLayout.layout;
+            templateColumnsView = convertTemplateToColumnsView(viewWithLayout, tableMode);
+            if (templateColumnsView.length === 0 && !hasLayout && (templates === null || templates === void 0 ? void 0 : templates.length) > 0) {
+                templateColumnsView = convertTemplatesToColumnsView(templates, tableMode);
+            }
+        }
+        if (templateColumnsView.length === 0 && !currentSelectedView && (templates === null || templates === void 0 ? void 0 : templates.length) > 0) {
+            templateColumnsView = convertTemplatesToColumnsView(templates, tableMode);
+        }
+        if (templateColumnsView.length === 0) {
+            return [];
+        }
+        if (columnModifiers === null || columnModifiers === void 0 ? void 0 : columnModifiers.length) {
+            let result = templateColumnsView;
+            for (const mod of columnModifiers) {
+                result = updateColumnSelection({
+                    columnsViewData: result,
+                    columnsName: mod.columnsName,
+                    selected: mod.selected,
+                });
+            }
+            return result;
+        }
+        return templateColumnsView;
+    }, [tableMode, templates, selectedView === null || selectedView === void 0 ? void 0 : selectedView.id, selectedViewSignature, columnModifiers]);
+    return {
+        customViews,
+        onViewChange,
+        columnsViewData,
+        selectedViewId: selectedView === null || selectedView === void 0 ? void 0 : selectedView.id,
+    };
+}

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

@@ -10,7 +10,7 @@ export interface UseViewsMenuProps {
         selectedColumns: ColumnViewProps[];
         layout: LayoutSection;
     }) => Promise<{
-        templateId: string;
+        id: string;
         name: string;
     } | void>;
     onEditCustomView?: (viewId: string, data: {