@tap-payments/os-micro-frontend-shared 0.1.414 → 0.1.415

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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, }: 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, 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 { ViewsMenu } 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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, }) {
+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, 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,9 @@ 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 &&
-                (templates ? (_jsx(ViewsMenu, { onViewChange: onViewChange, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, tableMode: tableMode, templates: templates, lang: lang })) : (_jsx(TableView, { onViewChange: onViewChange, setIsViewVisible: setIsViewVisible, tableViews: tableViews, setTableViews: setTableViews, resetTableViews: resetTableViews }))), rightActions && !isViewVisible && rightActions] }));
+                (customViews ? (_jsx(ViewsMenu
+                // @todo to be moved to grouping
+                , Object.assign({ 
+                    // @todo to be moved to grouping
+                    onViewChange: onViewChange, tableMode: tableMode, lang: lang }, customViews))) : (_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, onCreateCustomView, onEditCustomView, onDeleteCustomView, templates, lang, ...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, 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 = [], onCreateCustomView, onEditCustomView, onDeleteCustomView, 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", "onCreateCustomView", "onEditCustomView", "onDeleteCustomView", "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, onCreateCustomView: onCreateCustomView, onEditCustomView: onEditCustomView, onDeleteCustomView: onDeleteCustomView, templates: templates, lang: lang }));
+    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, 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", "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, 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/ViewsMenu.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ViewsMenuProps } from './types';
-declare function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode, templates, lang, }: ViewsMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, 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

@@ -19,7 +19,7 @@ import { ViewWrapper } from './styles';
 import { useViewsManager } from './hooks';
 import { useViewsMenu } from './hooks/useViewsMenu';
 import { mapColumnsToLayoutSection } from './utils';
-function ViewsMenu({ onViewChange, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', templates, lang = 'en', }) {
+function ViewsMenu({ onViewChange, templates, onCreateCustomView, onEditCustomView, onDeleteCustomView, tableMode = 'default', lang = 'en', }) {
     var _a;
     const { t } = useTranslation();
     const [modifiedModes, setModifiedModes] = useState({});

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { ColumnViewProps, TableMode } from '../../../types/index.js';
-import type { TableHeaderProps, ViewOption } from '../type';
+import type { TableHeaderProps, CustomViewsConfig, ViewOption } from '../type';
 export interface CustomViewsProps {
     open: boolean;
     onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -117,20 +117,9 @@ export interface ColumnCheckState {
     checked: boolean;
     indeterminate: boolean;
 }
-export interface ViewsMenuProps {
+export interface ViewsMenuProps extends CustomViewsConfig {
     onViewChange?: TableHeaderProps['onViewChange'];
-    onCreateCustomView?: (data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<{
-        templateId: string;
-        name: string;
-    } | void>;
-    onEditCustomView?: (viewId: string, data: CreateOrEditViewPayload) => Promise<void>;
-    onDeleteCustomView?: (viewId: string) => Promise<void>;
     tableMode?: TableMode;
-    templates: Template[];
     lang?: string;
 }
 export interface ViewsDropdownProps {

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

@@ -3,6 +3,23 @@ import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timez
 import { AvailableStatus } from '../StatusBar/type';
 import { PartialExcept } from '../../types/index.js';
 import type { ViewMenuItem, LayoutSection, Template } from './TableView/types';
+export interface CustomViewsConfig {
+    templates: Template[];
+    onCreateCustomView: (data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<{
+        templateId: string;
+        name: string;
+    } | void>;
+    onEditCustomView: (viewId: string, data: {
+        name: string;
+        selectedColumns: ColumnViewProps[];
+        layout: LayoutSection;
+    }) => Promise<void>;
+    onDeleteCustomView: (viewId: string) => Promise<void>;
+}
 type ViewsOptions = {
     default: {};
     developer: {};
@@ -45,21 +62,7 @@ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeade
         id: string;
         label: string;
     }) => void;
-    onCreateCustomView?: (data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<{
-        templateId: string;
-        name: string;
-    } | void>;
-    onEditCustomView?: (viewId: string, data: {
-        name: string;
-        selectedColumns: ColumnViewProps[];
-        layout: LayoutSection;
-    }) => Promise<void>;
-    onDeleteCustomView?: (viewId: string) => Promise<void>;
-    templates?: Template[];
+    customViews?: CustomViewsConfig;
     lang?: string;
     onToggleTextButtonClick?: () => void;
     children?: ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.414",
+  "version": "0.1.415",
   "testVersion": 0,
   "type": "module",
   "main": "build/index.js",