@tap-payments/os-micro-frontend-shared 0.1.133-test.2 → 0.1.134-test.1

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Tap Payments
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2025 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,12 @@
-# os-micro-frontend-shared
-
-## Publishing Workflow
-
-1. Update version in package.json
-2. Commit changes
-3. Create and push a tag:
-
-```bash
-npm version patch  # or minor, major
-git push origin main --tags
-```
+# os-micro-frontend-shared
+
+## Publishing Workflow
+
+1. Update version in package.json
+2. Commit changes
+3. Create and push a tag:
+
+```bash
+npm version patch  # or minor, major
+git push origin main --tags
+```

package/build/components/DisplayAmount/DisplayAmount.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+import { Currency } from '../../types/index.js';
+interface DisplayAmountI extends BoxProps {
+    amount: number;
+    selectedCurrency: Currency;
+}
+declare function DisplayAmount({ amount, selectedCurrency, ...props }: DisplayAmountI): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof DisplayAmount>;
+export default _default;

package/build/components/DisplayAmount/DisplayAmount.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { formatAmountWithCurrency } from '../../utils/index.js';
+import { DecimalSpan, CurrencySpan } from './style';
+function DisplayAmount(_a) {
+    var _b;
+    var { amount, selectedCurrency } = _a, props = __rest(_a, ["amount", "selectedCurrency"]);
+    const { integerAmount, decimalAmount } = formatAmountWithCurrency(amount, (_b = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _b === void 0 ? void 0 : _b.english);
+    return (_jsxs(CurrencySpan, Object.assign({}, props, { children: [_jsx("span", { children: integerAmount }), _jsx("span", { children: "." }), _jsx(DecimalSpan, { children: decimalAmount })] })));
+}
+export default memo(DisplayAmount);

package/build/components/DisplayAmount/index.d.ts

@@ -0,0 +1,2 @@
+import DisplayAmount from './DisplayAmount';
+export default DisplayAmount;

package/build/components/DisplayAmount/index.js

@@ -0,0 +1,2 @@
+import DisplayAmount from './DisplayAmount';
+export default DisplayAmount;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DecimalSpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/DisplayAmount/style.js

@@ -0,0 +1,14 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const DecimalSpan = styled('span')(() => ({
+    fontWeight: 400,
+}));
+export const CurrencySpan = styled(Box)(() => ({
+    fontWeight: 700,
+    fontSize: '11px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'default',
+    whiteSpace: 'nowrap',
+    overflow: 'auto',
+}));

package/build/components/ErrorToast/ErrorToast.d.ts

@@ -0,0 +1,3 @@
+import { ErrorToastProps } from './type';
+declare function ErrorToast({ message, onRetry, position, iconSrc }: ErrorToastProps): import("react/jsx-runtime").JSX.Element;
+export default ErrorToast;

package/build/components/ErrorToast/ErrorToast.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { reloadIcon } from '../../constants/index.js';
+import { ToastContainer, ToastIcon, ToastText } from './style';
+function ErrorToast({ message = 'Something went wrong', onRetry, position = 'bottom-center', iconSrc }) {
+    return (_jsxs(ToastContainer, Object.assign({ toastPosition: position }, { children: [_jsx(ToastText, { children: message }), _jsx(ToastIcon, { onClick: onRetry, src: iconSrc || reloadIcon, alt: "toast-icon" })] })));
+}
+export default ErrorToast;

package/build/components/ErrorToast/index.d.ts

@@ -0,0 +1,2 @@
+import ErrorToast from './ErrorToast';
+export default ErrorToast;

package/build/components/ErrorToast/index.js

@@ -0,0 +1,2 @@
+import ErrorToast from './ErrorToast';
+export default ErrorToast;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ToastContainerProps } from './type';
+export declare const ToastContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ToastContainerProps, {}, {}>;
+export declare const ToastIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const ToastText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "style" | "className" | "classes" | "children" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ErrorToast/style.js

@@ -0,0 +1,33 @@
+import { Box, styled, Typography } from '@mui/material';
+export const ToastContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'toastPosition',
+})(({ theme, toastPosition }) => (Object.assign(Object.assign(Object.assign(Object.assign({ width: 160, position: 'absolute', bottom: 12, zIndex: 1000, display: 'flex', justifyContent: 'space-between', alignItems: 'center', backgroundColor: theme.palette.background.paper, height: 31, gap: theme.spacing(1), borderRadius: theme.shape.borderRadius, borderWidth: 1, padding: theme.spacing(1), border: `1px solid ${theme.palette.divider}`, boxShadow: '0px 0px 16px 0px #00000014', animation: 'slideIn 0.5s ease-out' }, (toastPosition === 'bottom-center' && {
+    left: '50%',
+    transform: 'translateX(-50%)',
+})), (toastPosition === 'bottom-right' && {
+    right: 12,
+    transform: 'none',
+})), (toastPosition === 'bottom-left' && {
+    left: 12,
+    transform: 'none',
+})), { '@keyframes slideIn': {
+        '0%': {
+            opacity: 0,
+            transform: toastPosition === 'bottom-center' ? 'translate(-50%, 100%)' : toastPosition === 'bottom-right' ? 'translateX(100%)' : 'translateX(-100%)',
+        },
+        '100%': {
+            opacity: 1,
+            transform: toastPosition === 'bottom-center' ? 'translate(-50%, 0)' : 'translateX(0)',
+        },
+    } })));
+export const ToastIcon = styled('img')({
+    cursor: 'pointer',
+});
+export const ToastText = styled(Typography)(({ theme }) => ({
+    fontSize: 11,
+    fontWeight: 500,
+    color: theme.palette.text.primary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));

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

@@ -0,0 +1,10 @@
+export type ToastPosition = 'bottom-center' | 'bottom-right' | 'bottom-left';
+export interface ErrorToastProps {
+    message?: string;
+    onRetry?: () => void;
+    position?: ToastPosition;
+    iconSrc?: string;
+}
+export interface ToastContainerProps {
+    toastPosition: ToastPosition;
+}

package/build/components/ErrorToast/type.js

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

package/build/components/LanguageDropdown/LanguageDropdown.d.ts

@@ -0,0 +1,6 @@
+interface LanguageDropdownProps {
+    defaultLanguage?: string;
+    onChange?: (language: string) => void;
+}
+export default function LanguageDropdown({ defaultLanguage, onChange }: LanguageDropdownProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/LanguageDropdown/LanguageDropdown.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { Menu, MenuItem } from '../index.js';
+import { Button } from './style';
+const languages = ['EN', 'AR'];
+export default function LanguageDropdown({ defaultLanguage = 'EN', onChange }) {
+    const [language, setLanguage] = useState(defaultLanguage);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCLose = () => {
+        setAnchorEl(null);
+    };
+    const onClick = (lang) => {
+        setLanguage(lang);
+        onChange === null || onChange === void 0 ? void 0 : onChange(lang);
+        onCLose();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCLose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ onClick: onOpen, open: open }, { children: _jsx(Box, Object.assign({ component: "span" }, { children: language })) })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', width: 31.8 } }, { children: languages.map((lang) => lang !== language && (_jsx(MenuItem, Object.assign({ onClick: () => onClick(lang) }, { children: lang }), lang))) }))] }) })));
+}

package/build/components/LanguageDropdown/index.d.ts

@@ -0,0 +1,2 @@
+import LanguageDropdown from './LanguageDropdown';
+export default LanguageDropdown;

package/build/components/LanguageDropdown/index.js

@@ -0,0 +1,2 @@
+import LanguageDropdown from './LanguageDropdown';
+export default LanguageDropdown;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Button: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open?: boolean | undefined;
+}, {}, {}>;

package/build/components/LanguageDropdown/style.js

@@ -0,0 +1,5 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Button = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, fontSize: '11px', color: theme.palette.text.primary, padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', height: 32, gap: '4px' }, (open && {
+    borderColor: theme.palette.info.dark,
+}))));

package/build/components/ToggleView/ToggleView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ToggleViews, ToggleViewsValues } from './types';
+declare const DEFAULT_TOGGLE_VIEWS: {
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: ToggleViews;
+}[];
+export interface ToggleViewProps {
+    onToggleClick: (view: ToggleViewsValues) => void;
+    currentView: ToggleViewsValues;
+    getOverrideViews?: (defaultViews: typeof DEFAULT_TOGGLE_VIEWS) => {
+        icon: React.ReactNode;
+        value: ToggleViewsValues;
+    }[];
+}
+declare const ToggleView: (props: ToggleViewProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ToggleView;

package/build/components/ToggleView/ToggleView.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardViewButtonIcon, listViewButtonIcon } from '../../constants/index.js';
+import { ActiveOverlay, ViewButton } from './style';
+import { ToggleViews } from './types';
+import { useMemo } from 'react';
+import ToggleWrapper from './ToggleWrapper';
+const DEFAULT_TOGGLE_VIEWS = [
+    {
+        icon: _jsx("img", { src: cardViewButtonIcon, alt: "card" }),
+        value: ToggleViews.CARDS,
+    },
+    {
+        icon: _jsx("img", { src: listViewButtonIcon, alt: ToggleViews.LIST }),
+        value: ToggleViews.LIST,
+    },
+];
+const ToggleView = (props) => {
+    const { currentView, onToggleClick, getOverrideViews } = props;
+    const views = useMemo(() => {
+        if (getOverrideViews)
+            return getOverrideViews(DEFAULT_TOGGLE_VIEWS);
+        return DEFAULT_TOGGLE_VIEWS;
+    }, [getOverrideViews]);
+    const viewIndex = useMemo(() => views.findIndex((view) => view.value === currentView), [views, currentView]);
+    if (!onToggleClick)
+        return null;
+    return (_jsxs(ToggleWrapper, { children: [views.map((view) => (_jsx(ViewButton, Object.assign({ onClick: () => onToggleClick(view.value), sx: {
+                    height: '11.6px',
+                    width: '11.6px',
+                }, isActive: currentView === view.value }, { children: view.icon }), view.value))), _jsx(ActiveOverlay, { activeIndex: viewIndex })] }));
+};
+export default ToggleView;

package/build/components/ToggleView/ToggleWrapper.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { type BoxProps } from '@mui/material/Box';
+declare const ToggleWrapper: (props: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
+export default ToggleWrapper;

package/build/components/ToggleView/ToggleWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ToggleWrapperStyled } from './style';
+const ToggleWrapper = (props) => {
+    const viewTogglers = React.Children.count(props.children) - 1;
+    return _jsx(ToggleWrapperStyled, Object.assign({}, props, { sx: { width: viewTogglers * 30 + 2 } }));
+};
+export default ToggleWrapper;

package/build/components/ToggleView/index.d.ts

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export { type ToggleViewsValues, ToggleViews } from './types';
+export default ToggleView;

package/build/components/ToggleView/index.js

@@ -0,0 +1,3 @@
+import ToggleView from './ToggleView';
+export { ToggleViews } from './types';
+export default ToggleView;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const ToggleWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ViewButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isActive: boolean;
+}, {}, {}>;
+export declare const ActiveOverlay: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    activeIndex: number;
+}, {}, {}>;

package/build/components/ToggleView/style.js

@@ -0,0 +1,31 @@
+import { Box, styled } from '@mui/material';
+export const ToggleWrapperStyled = styled(Box)(({ theme }) => ({
+    height: '32px',
+    borderRadius: '4px',
+    backgroundColor: theme.palette.action.hover,
+    padding: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'pointer',
+}));
+export const ViewButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ isActive }) => ({
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    zIndex: 2,
+    opacity: isActive ? 1 : 0.5,
+}));
+export const ActiveOverlay = styled(Box, { shouldForwardProp: (props) => props !== 'activeIndex' })(({ theme, activeIndex }) => ({
+    position: 'absolute',
+    top: 2,
+    left: activeIndex * 30 + 2,
+    transition: 'all 0.25s ease-in-out',
+    width: '28px',
+    height: '28px',
+    backgroundColor: theme.palette.common.white,
+    borderRadius: '2px',
+    boxShadow: '0px 0px 4px 0px rgba(0, 0, 0, 0.20)',
+}));

package/build/components/ToggleView/types.d.ts

@@ -0,0 +1,6 @@
+export declare enum ToggleViews {
+    LIST = "LIST",
+    CARDS = "CARDS",
+    MAP = "MAP"
+}
+export type ToggleViewsValues = `${ToggleViews}` | (string & {});

package/build/components/ToggleView/types.js

@@ -0,0 +1,6 @@
+export var ToggleViews;
+(function (ToggleViews) {
+    ToggleViews["LIST"] = "LIST";
+    ToggleViews["CARDS"] = "CARDS";
+    ToggleViews["MAP"] = "MAP";
+})(ToggleViews || (ToggleViews = {}));

package/build/components/VirtualTables/SheetViewVirtualTable/SheetViewVirtualTable.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { SHEET_VIEW_TABLE_THRESHOLD } from '../../../constants/index.js';
 import TableFooter from '../components/TableFooter/TableFooter';
 import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
-import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths, usePerformanceOptimizations, } from './hooks';
+import { usePinnedColumns, useSynchronizedScroll, useTableState, useTableData, useVirtualTableContainer, usePinnedColumnsWidths } from './hooks';
 import { PinnedColumn, MainTable, LoadingMainTable, NoDataView, VirtualTable } from './components';
 function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = 28, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
-    const { stableColumns } = usePerformanceOptimizations(columns);
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
@@ -16,7 +15,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         isFetchingNextPage,
         areAllRowsLoaded,
     });
-    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(stableColumns, isPinnable, onColumnPin);
+    const { pinnedStartColumns, pinnedEndColumns, handleColumnPin, pinnedStartColumnsData, pinnedEndColumnsData, unpinnedColumnsData, orderedColumns, lastColumnId, } = usePinnedColumns(columns, isPinnable, onColumnPin);
     const { pinnedStartVirtualListRef, scrollableVirtualListRef, pinnedEndVirtualListRef, handleScroll } = useSynchronizedScroll();
     const { pinnedStartColumnsWidth, pinnedEndColumnsWidth } = usePinnedColumnsWidths(pinnedStartColumnsData, pinnedEndColumnsData);
     const { getItemSize, getItemDataForContainer } = useVirtualTableContainer({
@@ -38,37 +37,41 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (e) => {
         dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    const baseCommonProps = useMemo(() => ({
-        showHeader,
-        columnsSorting,
-        onColumnSort,
-        headerProps,
-        showBackDrop,
-        onColumnPin: handleColumnPin,
-        isPinnable,
-        lastColumnId,
-        selectedColumn,
-        onColumnClick: handleColumnClick,
-        tableTitle,
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
+        const handleScrollCallback = (scrollProps) => {
+            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
+            handleScroll(scrollProps, source);
+        };
+        return (_jsx(VirtualTable, { columnsData: columnsData, itemCount: itemsCount, lastItemIndex: lastItemIndex, areAllRowsLoaded: areAllRowsLoaded, loadMoreItems: loadMoreItems, threshold: threshold, getItemSize: getItemSize, getItemData: getItemDataForContainer, isPinned: isPinned, fixedWidth: fixedWidth, scrollToIndex: scrollToIndex, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, clearBackdropVisibilityTimeout: clearBackdropVisibilityTimeout, onScroll: handleScrollCallback, setBackdropVisibility: setShowBackdrop, listRef: listRef, overscanCount: overscanCount }));
+    }, [
+        itemsCount,
+        lastItemIndex,
         areAllRowsLoaded,
-        isFetchingNextPage,
+        loadMoreItems,
+        threshold,
+        getItemSize,
+        getItemDataForContainer,
         scrollToIndex,
-        isLoading,
-        isError,
-        tableMode,
-        showNoDataView,
-        tableBodyStyles,
-    }), [
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        handleScroll,
+        setShowBackdrop,
+        pinnedStartVirtualListRef,
+        pinnedEndVirtualListRef,
+        scrollableVirtualListRef,
+    ]);
+    const baseCommonProps = {
         showHeader,
         columnsSorting,
         onColumnSort,
         headerProps,
         showBackDrop,
-        handleColumnPin,
+        onColumnPin: handleColumnPin,
         isPinnable,
         lastColumnId,
         selectedColumn,
-        handleColumnClick,
+        onColumnClick: handleColumnClick,
         tableTitle,
         areAllRowsLoaded,
         isFetchingNextPage,
@@ -78,44 +81,9 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         tableMode,
         showNoDataView,
         tableBodyStyles,
-    ]);
-    const commonPropsWithTableStates = useMemo(() => (Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
-        tableLoading })), [baseCommonProps, hasTimeoutError, tableLoading]);
-    const virtualTableBaseProps = useMemo(() => ({
-        itemCount: itemsCount,
-        lastItemIndex,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        getItemSize,
-        getItemData: getItemDataForContainer,
-        scrollToIndex,
-        areTotalRowsNotFillingHeight,
-        clearBackdropVisibilityTimeout,
-        setBackdropVisibility: setShowBackdrop,
-        overscanCount,
-    }), [
-        itemsCount,
-        lastItemIndex,
-        areAllRowsLoaded,
-        loadMoreItems,
-        threshold,
-        getItemSize,
-        getItemDataForContainer,
-        scrollToIndex,
-        areTotalRowsNotFillingHeight,
-        clearBackdropVisibilityTimeout,
-        setShowBackdrop,
-        overscanCount,
-    ]);
-    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
-        const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;
-        const handleScrollCallback = (scrollProps) => {
-            const source = containerKey === 'pinnedStart' ? 'start' : containerKey === 'pinnedEnd' ? 'end' : 'scrollable';
-            handleScroll(scrollProps, source);
-        };
-        return (_jsx(VirtualTable, Object.assign({}, virtualTableBaseProps, { columnsData: columnsData, isPinned: isPinned, fixedWidth: fixedWidth, onScroll: handleScrollCallback, listRef: listRef })));
-    }, [virtualTableBaseProps, handleScroll, pinnedStartVirtualListRef, pinnedEndVirtualListRef, scrollableVirtualListRef]);
-    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(LoadingMainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) : (_jsx(NoDataView, { tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps, commonProps: baseCommonProps }))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates })), _jsx(MainTable, { hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, { position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer, commonProps: commonPropsWithTableStates }))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+    };
+    const commonPropsWithTableStates = Object.assign(Object.assign({}, baseCommonProps), { hasTimeoutError,
+        tableLoading });
+    return (_jsxs(_Fragment, { children: [_jsx(SheetViewTableContainer, { children: showNoDataView ? (tableLoading ? (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(LoadingMainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) : (_jsx(NoDataView, Object.assign({ tableLoading: tableLoading, tableError: tableError, tableEmpty: tableEmpty, hasTimeoutError: hasTimeoutError, orderedColumns: orderedColumns, error: error, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps }, baseCommonProps)))) : (_jsxs(SheetViewVirtualTableWrapper, { children: [pinnedStartColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "start", columnsData: pinnedStartColumnsData, columnsWidth: pinnedStartColumnsWidth, pinnedColumnsList: pinnedStartColumns, hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates))), _jsx(MainTable, Object.assign({ hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, unpinnedColumnsData: unpinnedColumnsData, pinnedStartColumns: pinnedStartColumns, pinnedEndColumns: pinnedEndColumns, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)), pinnedEndColumnsData.length > 0 && (_jsx(PinnedColumn, Object.assign({ position: "end", columnsData: pinnedEndColumnsData, columnsWidth: pinnedEndColumnsWidth, pinnedColumnsList: [...pinnedStartColumns, ...pinnedEndColumns], hasPinnedStart: pinnedStartColumnsData.length > 0, hasPinnedEnd: pinnedEndColumnsData.length > 0, createVirtualTableContainer: createVirtualTableContainer }, commonPropsWithTableStates)))] })) }), _jsx(TableFooter, Object.assign({ "data-testid": "SheetViewVirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
 }
 export default memo(SheetViewVirtualTable);

package/build/components/VirtualTables/SheetViewVirtualTable/components/LoadingMainTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { LoadingMainTableProps } from '../types';
-declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }: LoadingMainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof LoadingMainTable>;
 export default _default;

package/build/components/VirtualTables/SheetViewVirtualTable/components/LoadingMainTable.js

@@ -5,9 +5,8 @@ import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style'
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
 import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
-function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, commonProps, }) {
+function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, }) {
     const theme = useTheme();
-    const { showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, } = commonProps;
     return (_jsx(MainTableWrapper, Object.assign({ hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }, { children: _jsx(StyledTableBox, Object.assign({ as: "main", id: "sheet-table-box-container", "aria-labelledby": "sheet-table-box-container", "data-testid": "SheetViewVirtualTable_StyledTableBox_Loading", "data-title": tableTitle, "data-direction": theme.direction, "data-are-all-rows-loaded": !!areAllRowsLoaded, "data-is-fetching-next-page": !!isFetchingNextPage, "data-scroll-to-index": scrollToIndex, "data-is-loading": !!isLoading, "data-is-error": !!isError, "data-is-error-timeout": !!hasTimeoutError, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showNoDataView: showNoDataView, scrollable: true }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingTableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_LoadingTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: [...pinnedStartColumns, ...pinnedEndColumns], onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: "scrollable", hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd }) })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_LoadingTableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',

package/build/components/VirtualTables/SheetViewVirtualTable/components/MainTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { MainTableProps } from '../types';
-declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, pinnedStartColumns, pinnedEndColumns, createVirtualTableContainer, commonProps, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
+declare function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, pinnedStartColumns, pinnedEndColumns, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableBodyStyles, tableLoading, createVirtualTableContainer, }: MainTableProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MainTable>;
 export default _default;