@tap-payments/os-micro-frontend-shared 0.1.270 → 0.1.271-test.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/build/components/Chip/style.d.ts +0 -1
  2. package/build/components/CountBadge/style.d.ts +0 -1
  3. package/build/components/Dialog/style.d.ts +0 -1
  4. package/build/components/FlippingCard/style.d.ts +0 -1
  5. package/build/components/ImageWrapper/ImageWrapper.d.ts +0 -1
  6. package/build/components/JSONViewer/style.d.ts +0 -1
  7. package/build/components/LeftPeekRightExpandingChip/style.d.ts +0 -1
  8. package/build/components/RightLeftExpandingCenterChip/style.d.ts +0 -1
  9. package/build/components/SearchButton/styles.d.ts +0 -1
  10. package/build/components/StatusBar/StatusBar.js +4 -3
  11. package/build/components/StatusBar/type.d.ts +1 -1
  12. package/build/components/StatusIcons/AuthIcons/style.d.ts +0 -1
  13. package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts +0 -1
  14. package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts +0 -1
  15. package/build/components/StatusIcons/SourceIcons/style.d.ts +0 -1
  16. package/build/components/TableCells/CustomCells/ActionCell/style.d.ts +0 -1
  17. package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts +0 -1
  18. package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts +0 -1
  19. package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts +0 -1
  20. package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts +0 -1
  21. package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts +0 -1
  22. package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts +0 -1
  23. package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts +0 -1
  24. package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts +0 -1
  25. package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts +0 -1
  26. package/build/components/TableCells/CustomCells/IDButton/style.d.ts +0 -1
  27. package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts +0 -1
  28. package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts +0 -1
  29. package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts +0 -1
  30. package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts +0 -1
  31. package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts +0 -1
  32. package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts +0 -1
  33. package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts +0 -1
  34. package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts +0 -1
  35. package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts +0 -1
  36. package/build/components/TableCells/CustomCells/SourceCell/style.d.ts +0 -1
  37. package/build/components/TableCells/CustomCells/StatusCell/style.d.ts +0 -1
  38. package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts +0 -1
  39. package/build/components/TableCells/CustomCells/style.d.ts +0 -1
  40. package/build/components/TableHeader/FiltersRow.d.ts +1 -1
  41. package/build/components/TableHeader/FiltersRow.js +17 -4
  42. package/build/components/TableHeader/FiltersRowWrapper.d.ts +5 -0
  43. package/build/components/TableHeader/FiltersRowWrapper.js +18 -0
  44. package/build/components/TableHeader/TableHeader.d.ts +5 -4
  45. package/build/components/TableHeader/TableHeader.js +21 -6
  46. package/build/components/TableHeader/TableHeaderWrapper.d.ts +5 -0
  47. package/build/components/TableHeader/TableHeaderWrapper.js +18 -0
  48. package/build/components/TableHeader/TableModeButton.d.ts +9 -0
  49. package/build/components/TableHeader/TableModeButton.js +11 -0
  50. package/build/components/TableHeader/TableView/ColumnItem.d.ts +14 -0
  51. package/build/components/TableHeader/TableView/ColumnItem.js +29 -0
  52. package/build/components/TableHeader/TableView/CustomViews.d.ts +5 -0
  53. package/build/components/TableHeader/TableView/CustomViews.js +21 -0
  54. package/build/components/TableHeader/TableView/DefaultViews.d.ts +13 -0
  55. package/build/components/TableHeader/TableView/DefaultViews.js +22 -0
  56. package/build/components/TableHeader/TableView/TableView.d.ts +12 -0
  57. package/build/components/TableHeader/TableView/TableView.js +55 -0
  58. package/build/components/TableHeader/TableView/hooks/index.d.ts +3 -0
  59. package/build/components/TableHeader/TableView/hooks/index.js +3 -0
  60. package/build/components/TableHeader/TableView/hooks/useColumnItem.d.ts +21 -0
  61. package/build/components/TableHeader/TableView/hooks/useColumnItem.js +29 -0
  62. package/build/components/TableHeader/TableView/hooks/useSubMenu.d.ts +10 -0
  63. package/build/components/TableHeader/TableView/hooks/useSubMenu.js +31 -0
  64. package/build/components/TableHeader/TableView/hooks/useViewColumns.d.ts +13 -0
  65. package/build/components/TableHeader/TableView/hooks/useViewColumns.js +45 -0
  66. package/build/components/TableHeader/TableView/index.d.ts +3 -0
  67. package/build/components/TableHeader/TableView/index.js +3 -0
  68. package/build/components/TableHeader/TableView/style.d.ts +24 -0
  69. package/build/components/TableHeader/TableView/style.js +102 -0
  70. package/build/components/TableHeader/TableView/type.d.ts +10 -0
  71. package/build/components/TableHeader/TableView/type.js +1 -0
  72. package/build/components/TableHeader/data.d.ts +5 -0
  73. package/build/components/TableHeader/data.js +7 -0
  74. package/build/components/TableHeader/index.d.ts +6 -2
  75. package/build/components/TableHeader/index.js +6 -2
  76. package/build/components/TableHeader/style.d.ts +1 -1
  77. package/build/components/TableHeader/style.js +1 -1
  78. package/build/components/TableHeader/type.d.ts +19 -11
  79. package/build/components/TableHeader/type.js +0 -7
  80. package/build/components/Tooltip/Tooltip.d.ts +1 -8
  81. package/build/components/Tooltip/Tooltip.js +3 -3
  82. package/build/components/Tooltip/styles.d.ts +1 -2
  83. package/build/components/Tooltip/styles.js +1 -16
  84. package/build/components/VirtualTables/components/style.d.ts +0 -1
  85. package/build/components/index.d.ts +1 -0
  86. package/build/components/index.js +1 -0
  87. package/build/types/tsUtils.d.ts +1 -0
  88. package/package.json +3 -3
@@ -0,0 +1,55 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { memo, useState } from 'react';
3
+ import { useTranslation } from 'react-i18next';
4
+ import ClickAwayListener from '@mui/material/ClickAwayListener';
5
+ import { Icon, StyledButton } from '../../index.js';
6
+ import { closeXIcon, viewIcon } from '../../../constants/index.js';
7
+ import CustomViews from './CustomViews';
8
+ import DefaultViews from './DefaultViews';
9
+ import { ButtonStyled, ViewWrapper } from './style';
10
+ function TableView({ onViewChange, setIsViewVisible, setTableViews, tableViews, resetTableViews }) {
11
+ const [anchorViewEl, setAnchorViewEl] = useState(null);
12
+ const [defaultViewEl, setDefaultViewElement] = useState(null);
13
+ const [customViewEl, setCustomViewElement] = useState(null);
14
+ const [selectedViewInfo, setSelectedViewInfo] = useState({
15
+ id: 'default',
16
+ label: 'Default',
17
+ });
18
+ const { t } = useTranslation();
19
+ const onViewButtonClick = (event) => {
20
+ onViewChange === null || onViewChange === void 0 ? void 0 : onViewChange();
21
+ setAnchorViewEl(event.currentTarget);
22
+ setIsViewVisible(true);
23
+ };
24
+ const closeViewDropdown = () => {
25
+ setDefaultViewElement(null);
26
+ setCustomViewElement(null);
27
+ };
28
+ const onClose = () => {
29
+ setAnchorViewEl(null);
30
+ setIsViewVisible(false);
31
+ // to be removed
32
+ setSelectedViewInfo({ label: 'Default', id: 'default' });
33
+ };
34
+ const handleSelectedViewInfo = (selected) => {
35
+ setSelectedViewInfo(selected);
36
+ closeViewDropdown();
37
+ };
38
+ if (!anchorViewEl) {
39
+ return (_jsx(StyledButton, Object.assign({ title: t('tableView'), "data-testid": "TableView_no_anchorViewEl", onClick: onViewButtonClick }, { children: _jsx(Icon, { src: viewIcon, alt: "view", sx: { width: 14, height: 14 } }) })));
40
+ }
41
+ return (_jsx(ClickAwayListener, Object.assign({ onClickAway: closeViewDropdown }, { children: _jsxs(ViewWrapper, Object.assign({ "data-testid": "TableView" }, { children: [selectedViewInfo.id === 'custom' && (_jsx(CustomViews, { tableViews: tableViews, setTableViews: setTableViews, anchorEl: customViewEl, open: Boolean(customViewEl), onSelect: (e) => {
42
+ setCustomViewElement(customViewEl ? null : e.currentTarget);
43
+ setDefaultViewElement(null);
44
+ }, onClose: () => {
45
+ setCustomViewElement(null);
46
+ } })), _jsx(DefaultViews, { open: Boolean(defaultViewEl), anchorEl: defaultViewEl, setSelectedViewInfo: (view) => {
47
+ handleSelectedViewInfo(view);
48
+ }, selectedViewInfo: selectedViewInfo, onSelect: (e) => {
49
+ setDefaultViewElement(defaultViewEl ? null : e.currentTarget);
50
+ setCustomViewElement(null);
51
+ }, setViews: (views) => {
52
+ resetTableViews === null || resetTableViews === void 0 ? void 0 : resetTableViews({ id: views[0], label: views[0] });
53
+ } }), _jsx(ButtonStyled, Object.assign({ sx: { width: 30, justifyContent: 'center' }, onClick: onClose }, { children: _jsx("img", { src: closeXIcon, alt: "close" }) }))] })) })));
54
+ }
55
+ export default memo(TableView);
@@ -0,0 +1,3 @@
1
+ export { useSubMenu } from './useSubMenu';
2
+ export { useViewColumns } from './useViewColumns';
3
+ export { useColumnItem } from './useColumnItem';
@@ -0,0 +1,3 @@
1
+ export { useSubMenu } from './useSubMenu';
2
+ export { useViewColumns } from './useViewColumns';
3
+ export { useColumnItem } from './useColumnItem';
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ import type { ColumnViewProps } from '../../../../types/index.js';
3
+ interface UseColumnItemProps {
4
+ column: ColumnViewProps;
5
+ index: number;
6
+ openSubMenuName: string | null;
7
+ toggleColumnSelection: (columnName: string) => void;
8
+ handleSubMenuOpen: (event: React.MouseEvent<HTMLElement>, name: string) => void;
9
+ handleSubMenuClose: () => void;
10
+ }
11
+ interface UseColumnItemReturn {
12
+ isIndeterminate: boolean;
13
+ hasSubmenuItems?: boolean;
14
+ isSubmenuOpen: boolean;
15
+ isFirstItem: boolean;
16
+ handleColumnClick: () => void;
17
+ handleMouseEnter: (event: React.MouseEvent<HTMLElement>) => void;
18
+ handleMouseLeave: () => void;
19
+ }
20
+ export declare function useColumnItem({ column, index, openSubMenuName, toggleColumnSelection, handleSubMenuOpen, handleSubMenuClose, }: UseColumnItemProps): UseColumnItemReturn;
21
+ export {};
@@ -0,0 +1,29 @@
1
+ import { useCallback, useMemo } from 'react';
2
+ export function useColumnItem({ column, index, openSubMenuName, toggleColumnSelection, handleSubMenuOpen, handleSubMenuClose, }) {
3
+ const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
4
+ const isSubmenuOpen = openSubMenuName === column.name;
5
+ const isFirstItem = index === 0;
6
+ const isIndeterminate = useMemo(() => { var _a, _b; return Boolean(column.selected && ((_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.some((item) => item.selected)) && !((_b = column.menuItems) === null || _b === void 0 ? void 0 : _b.every((item) => item.selected))); }, [column.selected, column.menuItems]);
7
+ const handleColumnClick = useCallback(() => {
8
+ toggleColumnSelection(column.name);
9
+ }, [toggleColumnSelection, column.name]);
10
+ const handleMouseEnter = useCallback((event) => {
11
+ if (hasSubmenuItems) {
12
+ handleSubMenuOpen(event, column.name);
13
+ }
14
+ }, [hasSubmenuItems, handleSubMenuOpen, column.name]);
15
+ const handleMouseLeave = useCallback(() => {
16
+ if (!hasSubmenuItems) {
17
+ handleSubMenuClose();
18
+ }
19
+ }, [hasSubmenuItems, handleSubMenuClose]);
20
+ return {
21
+ isIndeterminate,
22
+ hasSubmenuItems,
23
+ isSubmenuOpen,
24
+ isFirstItem,
25
+ handleColumnClick,
26
+ handleMouseEnter,
27
+ handleMouseLeave,
28
+ };
29
+ }
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ interface UseSubMenuReturn {
3
+ subMenuAnchorEl: HTMLElement | null;
4
+ openSubMenuName: string | null;
5
+ handleSubMenuClose: () => void;
6
+ handleSubMenuOpen: (event: React.MouseEvent<HTMLElement>, name: string) => void;
7
+ handleMenuScroll: () => void;
8
+ }
9
+ export declare function useSubMenu(isMainMenuOpen: boolean, onMainMenuClose?: () => void): UseSubMenuReturn;
10
+ export {};
@@ -0,0 +1,31 @@
1
+ import { useState, useCallback, useEffect } from 'react';
2
+ export function useSubMenu(isMainMenuOpen, onMainMenuClose) {
3
+ const [subMenuAnchorEl, setSubMenuAnchorEl] = useState(null);
4
+ const [openSubMenuName, setOpenSubMenuName] = useState(null);
5
+ const handleSubMenuClose = useCallback(() => {
6
+ setSubMenuAnchorEl(null);
7
+ setOpenSubMenuName(null);
8
+ }, []);
9
+ const handleSubMenuOpen = useCallback((event, name) => {
10
+ setSubMenuAnchorEl(event.currentTarget);
11
+ setOpenSubMenuName(name);
12
+ }, []);
13
+ const handleMenuScroll = useCallback(() => {
14
+ if (openSubMenuName) {
15
+ handleSubMenuClose();
16
+ }
17
+ }, [openSubMenuName, handleSubMenuClose]);
18
+ useEffect(() => {
19
+ if (!isMainMenuOpen) {
20
+ handleSubMenuClose();
21
+ onMainMenuClose === null || onMainMenuClose === void 0 ? void 0 : onMainMenuClose();
22
+ }
23
+ }, [isMainMenuOpen, onMainMenuClose, handleSubMenuClose]);
24
+ return {
25
+ subMenuAnchorEl,
26
+ openSubMenuName,
27
+ handleSubMenuClose,
28
+ handleSubMenuOpen,
29
+ handleMenuScroll,
30
+ };
31
+ }
@@ -0,0 +1,13 @@
1
+ import type { ColumnViewProps } from '../../../../types/index.js';
2
+ import type { TableHeaderProps } from '../../type';
3
+ interface UseViewColumnsProps {
4
+ columns: ColumnViewProps[];
5
+ setTableViews?: TableHeaderProps['setTableViews'];
6
+ }
7
+ interface UseViewColumnsReturn {
8
+ reorderColumns: (reorderedColumnNames: string[]) => void;
9
+ toggleColumnSelection: (columnName: string) => void;
10
+ toggleSubmenuItem: (columnName: string, submenuItemName: string) => void;
11
+ }
12
+ export declare function useViewColumns({ columns, setTableViews }: UseViewColumnsProps): UseViewColumnsReturn;
13
+ export {};
@@ -0,0 +1,45 @@
1
+ import { useCallback } from 'react';
2
+ export function useViewColumns({ columns, setTableViews }) {
3
+ const reorderColumns = useCallback((reorderedColumnNames) => {
4
+ const reorderedColumns = reorderedColumnNames
5
+ .map((name) => columns.find((column) => column.name === name))
6
+ .filter((column) => Boolean(column));
7
+ setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(reorderedColumns);
8
+ }, [columns, setTableViews]);
9
+ const toggleColumnSelection = useCallback((columnName) => {
10
+ const updatedColumns = columns.map((column) => {
11
+ var _a;
12
+ if (column.name !== columnName)
13
+ return column;
14
+ const hasSubmenuItems = column.menuItems && column.menuItems.length > 0;
15
+ const newSelected = !column.selected;
16
+ if (!hasSubmenuItems) {
17
+ return Object.assign(Object.assign({}, column), { selected: newSelected });
18
+ }
19
+ const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => (Object.assign(Object.assign({}, item), { selected: newSelected })));
20
+ return Object.assign(Object.assign({}, column), { selected: newSelected, menuItems: updatedMenuItems });
21
+ });
22
+ setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
23
+ }, [columns, setTableViews]);
24
+ const toggleSubmenuItem = useCallback((columnName, submenuItemName) => {
25
+ const updatedColumns = columns.map((column) => {
26
+ var _a, _b;
27
+ if (column.name !== columnName)
28
+ return column;
29
+ const updatedMenuItems = (_a = column.menuItems) === null || _a === void 0 ? void 0 : _a.map((item) => {
30
+ if (item.name === submenuItemName) {
31
+ return Object.assign(Object.assign({}, item), { selected: !item.selected });
32
+ }
33
+ return item;
34
+ });
35
+ const hasSelectedChildren = (_b = updatedMenuItems === null || updatedMenuItems === void 0 ? void 0 : updatedMenuItems.some((item) => item.selected)) !== null && _b !== void 0 ? _b : false;
36
+ return Object.assign(Object.assign({}, column), { menuItems: updatedMenuItems, selected: hasSelectedChildren });
37
+ });
38
+ setTableViews === null || setTableViews === void 0 ? void 0 : setTableViews(updatedColumns);
39
+ }, [columns, setTableViews]);
40
+ return {
41
+ reorderColumns,
42
+ toggleColumnSelection,
43
+ toggleSubmenuItem,
44
+ };
45
+ }
@@ -0,0 +1,3 @@
1
+ import TableView from './TableView';
2
+ export * from './TableView';
3
+ export default TableView;
@@ -0,0 +1,3 @@
1
+ import TableView from './TableView';
2
+ export * from './TableView';
3
+ export default TableView;
@@ -0,0 +1,24 @@
1
+ /// <reference types="react" />
2
+ export declare const ButtonStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
4
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
5
+ export declare const ViewWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
6
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
7
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
8
+ export declare const ListStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
9
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
10
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
11
+ export declare const DropdownStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
12
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
13
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
14
+ export declare const MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
15
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
16
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
17
+ addColumnViewEl?: boolean | undefined;
18
+ }, {}, {}>;
19
+ export declare const Space: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
20
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
22
+ export declare const SpaceAfter: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
23
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
24
+ }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -0,0 +1,102 @@
1
+ import { Box, styled } from '@mui/material';
2
+ export const ButtonStyled = styled(Box)(({ theme }) => ({
3
+ display: 'flex',
4
+ alignItems: 'center',
5
+ justifyContent: 'space-between',
6
+ borderRadius: '4px',
7
+ background: theme.palette.common.white,
8
+ padding: '8px',
9
+ border: '1px solid',
10
+ borderColor: theme.palette.divider,
11
+ gap: 8,
12
+ height: 32,
13
+ cursor: 'pointer',
14
+ '&:hover': {
15
+ border: '1px solid',
16
+ borderColor: theme.palette.info.dark,
17
+ boxShadow: theme.shadows[7],
18
+ },
19
+ }));
20
+ export const ViewWrapper = styled(Box)(({ theme }) => ({
21
+ background: theme.palette.common.white,
22
+ display: 'flex',
23
+ gap: theme.spacing(1),
24
+ alignItems: 'center',
25
+ color: theme.palette.text.primary,
26
+ fontSize: '11px',
27
+ fontWeight: theme.typography.fontWeightRegular,
28
+ textTransform: 'capitalize',
29
+ position: 'relative',
30
+ transition: '0.5s',
31
+ '&:after': {
32
+ content: '""',
33
+ position: 'absolute',
34
+ left: -8,
35
+ right: 0,
36
+ width: '100%',
37
+ height: '100%',
38
+ boxShadow: theme.shadows[11],
39
+ borderRadius: theme.spacing(0.5),
40
+ paddingInlineStart: theme.spacing(1),
41
+ paddingTop: '9px',
42
+ paddingBottom: '9px',
43
+ paddingInlineEnd: '9px',
44
+ zIndex: -1,
45
+ },
46
+ }));
47
+ export const ListStyled = styled(Box)(({ theme }) => ({
48
+ background: theme.palette.common.white,
49
+ borderRadius: theme.spacing(1),
50
+ boxShadow: theme.shadows[5],
51
+ border: '1px solid',
52
+ borderColor: theme.palette.divider,
53
+ zIndex: 5,
54
+ fontSize: '11px',
55
+ width: 192,
56
+ }));
57
+ export const DropdownStyled = styled(Box)(() => ({
58
+ minWidth: 160,
59
+ position: 'relative',
60
+ }));
61
+ export const MenuItem = styled(Box, { shouldForwardProp: (props) => props !== 'addColumnViewEl' })(({ theme }) => ({
62
+ padding: theme.spacing(1),
63
+ paddingInlineEnd: 2,
64
+ borderBottom: '1px solid',
65
+ borderColor: theme.palette.divider,
66
+ display: 'flex',
67
+ alignItems: 'center',
68
+ height: 32,
69
+ cursor: 'pointer',
70
+ img: {
71
+ height: 12,
72
+ },
73
+ '.check-icon': {
74
+ height: 'auto',
75
+ marginInlineEnd: theme.spacing(1),
76
+ },
77
+ '&:hover': {
78
+ color: theme.palette.info.dark,
79
+ fontWeight: theme.typography.fontWeightBold,
80
+ },
81
+ '&.add-column': {
82
+ justifyContent: 'space-between',
83
+ paddingInlineEnd: theme.spacing(1),
84
+ position: 'relative',
85
+ border: 'none',
86
+ zIndex: 5,
87
+ borderBottom: '1px solid',
88
+ borderColor: theme.palette.divider,
89
+ borderTopRightRadius: theme.spacing(1),
90
+ borderTopLeftRadius: theme.spacing(1),
91
+ '&:hover': {
92
+ boxShadow: theme.shadows[6],
93
+ },
94
+ },
95
+ }));
96
+ export const Space = styled(Box)(({ theme }) => ({
97
+ width: 12,
98
+ marginInlineEnd: theme.spacing(1),
99
+ }));
100
+ export const SpaceAfter = styled(Box)(() => ({
101
+ width: 16,
102
+ }));
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { TableHeaderProps } from '../type';
3
+ export interface CustomViewsProps {
4
+ open: boolean;
5
+ onSelect: (e: React.MouseEvent<HTMLDivElement>) => void;
6
+ setTableViews: TableHeaderProps['setTableViews'];
7
+ tableViews: TableHeaderProps['tableViews'];
8
+ anchorEl: Element | null;
9
+ onClose?: () => void;
10
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,5 @@
1
+ export declare const dummyViewList: {
2
+ label: string;
3
+ id: string;
4
+ columns: string[];
5
+ }[];
@@ -0,0 +1,7 @@
1
+ export const dummyViewList = [
2
+ {
3
+ label: 'Default',
4
+ id: 'default',
5
+ columns: ['default', 'default'],
6
+ },
7
+ ];
@@ -1,4 +1,8 @@
1
- export { default as TableHeader } from './TableHeader';
1
+ import TableHeader from './TableHeader';
2
+ export default TableHeader;
3
+ export * from './TableHeader';
4
+ export { default as TableHeaderWrapper } from './TableHeaderWrapper';
5
+ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
6
+ export { default as FiltersRow } from './FiltersRow';
2
7
  export * from './style';
3
8
  export * from './type';
4
- export { FiltersRow } from './FiltersRow';
@@ -1,4 +1,8 @@
1
- export { default as TableHeader } from './TableHeader';
1
+ import TableHeader from './TableHeader';
2
+ export default TableHeader;
3
+ export * from './TableHeader';
4
+ export { default as TableHeaderWrapper } from './TableHeaderWrapper';
5
+ export { default as FiltersRowWrapper } from './FiltersRowWrapper';
6
+ export { default as FiltersRow } from './FiltersRow';
2
7
  export * from './style';
3
8
  export * from './type';
4
- export { FiltersRow } from './FiltersRow';
@@ -16,6 +16,6 @@ export declare const TableHeaderRow: import("@emotion/styled").StyledComponent<i
16
16
  export declare const StatusButtonsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
17
17
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
18
18
  }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
19
- export declare const FiltersRowWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
19
+ export declare const FiltersRowContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
20
20
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
21
21
  }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
@@ -34,7 +34,7 @@ export const StatusButtonsContainer = styled(Box)(({ theme }) => ({
34
34
  alignItems: 'center',
35
35
  gap: theme.spacing(1),
36
36
  }));
37
- export const FiltersRowWrapper = styled(Box)(() => ({
37
+ export const FiltersRowContainer = styled(Box)(() => ({
38
38
  display: 'flex',
39
39
  justifyContent: 'flex-start',
40
40
  alignItems: 'center',
@@ -1,27 +1,29 @@
1
- import React, { PropsWithChildren, ReactNode } from 'react';
2
- import type { CalenderMode, TableHeaderStatus, ColumnViewProps } from '../../types/index.js';
1
+ import React, { ReactNode } from 'react';
2
+ import type { CalenderMode, TableHeaderStatus, ColumnViewProps, TableMode, Timezone, SegmentCountry } from '../../types/index.js';
3
3
  import { AvailableStatus } from '../StatusBar/type';
4
- declare const viewsOptions: {
4
+ import { PartialExcept } from '../../types/index.js';
5
+ type ViewsOptions = {
5
6
  default: {};
6
7
  developer: {};
7
8
  marketing: {};
8
9
  finance: {};
9
10
  custom: {};
10
11
  };
11
- export type View = keyof typeof viewsOptions;
12
- export interface TableHeaderProps {
13
- availableStatuses?: AvailableStatus[];
14
- status?: TableHeaderStatus;
12
+ export type View = keyof ViewsOptions;
13
+ export interface TableHeaderProps<IStatus extends TableHeaderStatus | TableHeaderStatus[] = undefined> {
14
+ tableMode?: TableMode;
15
+ status?: IStatus;
16
+ availableStatuses?: AvailableStatus<IStatus>[];
15
17
  search?: string;
16
18
  view?: View;
17
19
  date?: Date | [Date, Date];
18
20
  showMaximizedView?: boolean;
19
21
  title?: string | null;
20
22
  calendarMode?: CalenderMode;
21
- onStatusChange?: (status: Partial<TableHeaderStatus>) => void;
23
+ onStatusChange?: <T extends IStatus>(status?: T) => void;
22
24
  onSearch?: (search: string) => void;
23
25
  onViewChange?: () => void;
24
- onDateChange?: (date: Date | [Date, Date], timezoneOffset?: number) => void;
26
+ onDateChange?: (date: Date | [Date, Date]) => void;
25
27
  tableReportsComponent?: React.ReactNode;
26
28
  tableFilterComponent?: React.ReactNode;
27
29
  onCalendarModeSwitch: (mode: CalenderMode) => void;
@@ -43,14 +45,20 @@ export interface TableHeaderProps {
43
45
  label: string;
44
46
  }) => void;
45
47
  onToggleTextButtonClick?: () => void;
46
- isTextShown?: boolean;
47
48
  children?: ReactNode;
48
49
  calendarGroupBy?: string;
49
50
  onCalendarGroupChange?: (value: string) => void;
50
51
  maxDateRange?: number;
51
52
  isAcceptance?: boolean;
53
+ startComponent?: React.ReactNode;
54
+ searchPlaceholder?: string;
55
+ timezone: Timezone | null;
56
+ browserTimezone: string;
57
+ defaultCountryTimezone: Timezone;
58
+ onChangeTimezone: (newTimezone: Timezone) => void;
59
+ segmentCountries: SegmentCountry[];
52
60
  }
53
- export type FilterRowProps = PropsWithChildren<{}>;
61
+ export type FilterRowProps = PartialExcept<TableHeaderProps<TableHeaderStatus>, 'timezone' | 'browserTimezone' | 'defaultCountryTimezone' | 'onChangeTimezone' | 'segmentCountries'>;
54
62
  export interface Column {
55
63
  label: string;
56
64
  name: string;
@@ -1,8 +1 @@
1
- const viewsOptions = {
2
- default: {},
3
- developer: {},
4
- marketing: {},
5
- finance: {},
6
- custom: {},
7
- };
8
1
  export {};
@@ -1,10 +1,3 @@
1
- import React, { ReactElement } from 'react';
2
1
  import type { TooltipProps } from '@mui/material/Tooltip';
3
- interface Props extends Omit<TooltipProps, 'children'> {
4
- title: React.ReactNode;
5
- placement?: TooltipProps['placement'];
6
- children?: ReactElement;
7
- className?: string;
8
- }
9
- declare function Tooltip({ className, title, placement, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
2
+ declare function Tooltip({ className, placement, children, ...rest }: TooltipProps): import("react/jsx-runtime").JSX.Element;
10
3
  export default Tooltip;
@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { StyledTooltip } from './styles';
14
14
  function Tooltip(_a) {
15
- var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
16
- return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: children || _jsx(_Fragment, {}) })));
15
+ var { className, placement = 'top', children } = _a, rest = __rest(_a, ["className", "placement", "children"]);
16
+ return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, placement: placement, arrow: true }, rest, { children: children })));
17
17
  }
18
18
  export default Tooltip;
@@ -1,2 +1 @@
1
- import { TooltipProps } from '@mui/material/Tooltip';
2
- export declare const StyledTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1
+ export declare const StyledTooltip: import("@emotion/styled").StyledComponent<import("@mui/material/Tooltip").TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
@@ -1,21 +1,6 @@
1
- var __rest = (this && this.__rest) || function (s, e) {
2
- var t = {};
3
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
- t[p] = s[p];
5
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
- t[p[i]] = s[p[i]];
9
- }
10
- return t;
11
- };
12
- import { jsx as _jsx } from "react/jsx-runtime";
13
1
  import { styled } from '@mui/material/styles';
14
2
  import TooltipComponent, { tooltipClasses } from '@mui/material/Tooltip';
15
- export const StyledTooltip = styled((_a) => {
16
- var { className } = _a, props = __rest(_a, ["className"]);
17
- return _jsx(TooltipComponent, Object.assign({}, props, { classes: { popper: className } }));
18
- })(({ theme }) => ({
3
+ export const StyledTooltip = styled(TooltipComponent)(({ theme }) => ({
19
4
  zIndex: 999999,
20
5
  [`& .${tooltipClasses.arrow}`]: {
21
6
  '&:before': {
@@ -1,5 +1,4 @@
1
1
  /// <reference types="react" />
2
- /// <reference types="react" />
3
2
  interface TableWrapperProps {
4
3
  showNoDataView?: boolean;
5
4
  }
@@ -92,6 +92,7 @@ export { default as StatusBar, type AvailableStatus } from './StatusBar';
92
92
  export { default as MultiSelectStatusButton, type CurrencyOption, type MultiSelectStatusButtonProps } from './MultiSelectStatusButton';
93
93
  export * from './Chip';
94
94
  export * from './StatusGroupChips';
95
+ export { default as TableHeader } from './TableHeader';
95
96
  export * from './TableHeader';
96
97
  export { default as RangeCalender } from './RangeCalender';
97
98
  export { default as AppServices } from './AppServices';
@@ -92,6 +92,7 @@ export { default as StatusBar } from './StatusBar';
92
92
  export { default as MultiSelectStatusButton } from './MultiSelectStatusButton';
93
93
  export * from './Chip';
94
94
  export * from './StatusGroupChips';
95
+ export { default as TableHeader } from './TableHeader';
95
96
  export * from './TableHeader';
96
97
  export { default as RangeCalender } from './RangeCalender';
97
98
  export { default as AppServices } from './AppServices';
@@ -2,3 +2,4 @@ export type Override<T, R> = Omit<T, keyof R> & R;
2
2
  export type MakeOptional<T, K extends keyof T> = Override<T, {
3
3
  [P in K]?: T[K];
4
4
  }>;
5
+ export type PartialExcept<T, K extends keyof T> = Partial<Omit<T, K>> & Pick<T, K>;
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.270",
5
- "testVersion": 0,
4
+ "version": "0.1.271-test.1",
5
+ "testVersion": 1,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
8
8
  "module": "build/index.js",
@@ -164,4 +164,4 @@
164
164
  "publishConfig": {
165
165
  "registry": "https://registry.npmjs.org/"
166
166
  }
167
- }
167
+ }