@tap-payments/os-micro-frontend-shared 0.1.96-test.2 → 0.1.96-test.21

package/build/components/TableCells/CustomCells/ActionCell/constant.js

@@ -1,5 +1,5 @@
 import { BadgeVariants } from '../../../CountBadge';
-import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, } from '../../../../constants/index.js';
+import { flagIcon, clockIcon, disputeIcon, redFlagIcon, cancelledIcon, closedFlagIcon, orangeFlagIcon, refundInitiatedIcon, viewInvoiceIcon, reverseActionIcon, voidedIcon, capturedDropdownIcon, destinationReversedTableIcon, brandPlaceholderIcon, usersIcon, clipboardIcon, jsonBlackIcon, } from '../../../../constants/index.js';
 export const flags = {
     GRAY: { icon: closedFlagIcon, color: '#CFCFCF' },
     ORANGE: { icon: orangeFlagIcon, color: '#FFD503' },
@@ -24,4 +24,5 @@ export const actionIcons = {
     users: usersIcon,
     brand: brandPlaceholderIcon,
     clipboard: clipboardIcon,
+    viewApi: jsonBlackIcon,
 };

package/build/components/TableCells/CustomCells/ActionCell/hooks/useActionCell.d.ts

@@ -13,7 +13,7 @@ export declare function useActionCell({ actions, isDropdownShown, onCloseDropdow
         label: string;
         onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
         onRightClick?: ((e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void) | undefined;
-        icon: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard";
+        icon: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | "viewApi";
         isLoading?: boolean | undefined;
         isError?: boolean | undefined;
         isSuccess?: boolean | undefined;

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

@@ -283,5 +283,5 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     fetchPriority?: "auto" | "high" | "low" | undefined;
     srcSet?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLImageElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    icon?: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | undefined;
+    icon?: "brand" | "users" | "cancel" | "reverse" | "refund" | "destination" | "capture" | "flag" | "dispute" | "void" | "clock" | "invoice" | "clipboard" | "viewApi" | undefined;
 }, {}, {}>;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/ApplicationStatusCell.js

@@ -30,11 +30,10 @@ export default function ApplicationStatusCell(_a) {
             tooltip: 'Acceptance',
             enabled: isAcceptanceEnabled,
             shown: !hideAcceptance,
+            zIndex: isAcceptanceEnabled && !isPayoutEnabled ? 3 : 1,
         },
-        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout },
-    ]
-        .filter((app) => app.shown)
-        .sort((a, b) => (a.enabled !== b.enabled && b.enabled ? -1 : 0)), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
+        { icon: isPayoutEnabled ? payoutsGreenIcon : payoutWindowIcon, tooltip: 'Payout', enabled: isPayoutEnabled, shown: !hidePayout, zIndex: 2 },
+    ].filter((app) => app.shown), [isAcceptanceEnabled, isPayoutEnabled, hideAcceptance, hidePayout]);
     const appsStatus = useMemo(() => apps.map((app, index) => {
         const sourceTooltip = app.tooltip;
         return (_jsx(Tooltip, Object.assign({ onOpen: () => {
@@ -43,6 +42,7 @@ export default function ApplicationStatusCell(_a) {
                 setIsTooltipOpen(false);
             }, title: sourceTooltip }, { children: _jsx(ImageWrapper, Object.assign({ order: index, variants: appStatusAnimation(index, theme.shadows[4], 40), sx: {
                     width: '36px',
+                    zIndex: app.zIndex + 6,
                 } }, { children: _jsx(IconWithBadge, { mainIcon: app.icon, mainIconSize: 16, containerSize: 16, sx: { borderRadius: '40px' }, onError: (e) => {
                         e.currentTarget.src = app.icon;
                         e.currentTarget.style.borderRadius = '0px';

package/build/components/TableCells/CustomCells/BalanceCell/style.js

@@ -31,7 +31,7 @@ export const PercentageContainer = styled('div')(({ theme, percentage }) => ({
     gap: theme.spacing(0.5),
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/CustomCells/ProductsCell/style.js

@@ -34,7 +34,7 @@ export const PercentageContainer = styled('div')(({ theme }) => ({
     lineHeight: 0,
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/CustomCells/RefundChargeCell/style.js

@@ -31,7 +31,7 @@ export const PercentageContainer = styled(motion.div)(({ theme, percentage }) =>
     minWidth: '44px',
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/CustomCells/RefundStatusCell/style.js

@@ -38,7 +38,7 @@ export const DateContainer = styled(DateCell)(({ theme }) => ({
     color: theme.palette.secondary.main,
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/CustomCells/style.js

@@ -136,7 +136,7 @@ export const StatusIcon = styled('img')(() => ({
     height: '16px',
 }));
 export const PiePercentage = styled('div')(({ percentage, isCapture, theme }) => ({
-    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}.00%, transparent 0.00%)`,
+    background: `conic-gradient(${isCapture ? theme.palette.info.dark : '#656565'} ${percentage}%, transparent 0.00%)`,
     borderRadius: '50%',
     width: '8.333px',
     height: '8.333px',

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.d.ts

@@ -0,0 +1,13 @@
+import { StatusChipWithCopyProps } from '../../../StatusChipWithCopy';
+interface PaymentAgreementCellProps extends Omit<StatusChipWithCopyProps, 'chipIndex'> {
+    type?: keyof typeof paymentAgreementTypes;
+    count?: number;
+}
+declare const paymentAgreementTypes: {
+    SAVED_CARD: string;
+    ORDER: string;
+    SUBSCRIPTION: string;
+    INSTALLMENT: string;
+};
+declare function PaymentAgreementCell({ type, count, ...props }: PaymentAgreementCellProps): import("react/jsx-runtime").JSX.Element;
+export default PaymentAgreementCell;

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/PaymentAgreementCell.js

@@ -0,0 +1,26 @@
+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 { Box } from '@mui/material';
+import { StatusChipWithCopy } from '../../../index.js';
+const paymentAgreementTypes = {
+    SAVED_CARD: 'Card Agreement',
+    ORDER: 'Order',
+    SUBSCRIPTION: 'Subscription',
+    INSTALLMENT: 'Installment',
+};
+function PaymentAgreementCell(_a) {
+    var { type, count } = _a, props = __rest(_a, ["type", "count"]);
+    const countText = count === null || count === void 0 ? void 0 : count.toString();
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'row', gap: '4px' } }, { children: [_jsx(StatusChipWithCopy, Object.assign({ copyText: type, unknownText: "noPaymentAgreement" }, props, { chipIndex: 0 }, { children: type ? paymentAgreementTypes[type] : type })), countText && (_jsx(StatusChipWithCopy, Object.assign({ copyText: countText }, props, { chipIndex: 1, minWidth: "38px" }, { children: countText })))] })));
+}
+export default PaymentAgreementCell;

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.d.ts

@@ -0,0 +1 @@
+export { default as PaymentAgreementCell } from './PaymentAgreementCell';

package/build/components/TableCells/SheetViewCells/PaymentAgreementCell/index.js

@@ -0,0 +1 @@
+export { default as PaymentAgreementCell } from './PaymentAgreementCell';

package/build/components/TableCells/SheetViewCells/index.d.ts

@@ -0,0 +1 @@
+export * from './PaymentAgreementCell';

package/build/components/TableCells/SheetViewCells/index.js

@@ -0,0 +1 @@
+export * from './PaymentAgreementCell';

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

@@ -1,3 +1,4 @@
 export { default as TableCell } from './TableCell';
 export * from './CustomCells';
+export * from './SheetViewCells';
 export * from './type';

package/build/components/TableCells/index.js

@@ -1,3 +1,4 @@
 export { default as TableCell } from './TableCell';
 export * from './CustomCells';
+export * from './SheetViewCells';
 export * from './type';

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 default ToggleView;
+export * from './types';

package/build/components/ToggleView/index.js

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

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/Toolbar/style.d.ts

@@ -9,10 +9,14 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
     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>, {}, {}>;
 export declare const StyledHeaderWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledAppHeaderWrapper: 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> & {
+    isDragging?: boolean | undefined;
+}, {}, {}>;
 export declare const ToolbarStyled: 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> & {
@@ -20,7 +24,6 @@ export declare const ToolbarStyled: import("@emotion/styled").StyledComponent<im
     isHovered?: boolean | undefined;
 }, {}, {}>;
 export declare const StyledHeaderWrapperStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    sandboxMode?: boolean | undefined;
     maximized?: boolean | undefined;
     isDragging?: boolean | undefined;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, {}, {}>;

package/build/components/Toolbar/style.js

@@ -38,12 +38,17 @@ export const StyledBox = styled(Box)(({ theme }) => ({
 }));
 export const StyledHeaderWrapper = styled('div', {
     shouldForwardProp: (prop) => prop !== 'sandboxMode' && prop !== 'maximized' && prop !== 'isDragging',
-})(({ theme, sandboxMode, maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({ background: sandboxMode ? theme.palette.common.lightOrange : theme.palette.background.transparent[0], backdropFilter: 'blur(32px)' }, (!maximized && {
+})(({ maximized, isDragging }) => (Object.assign(Object.assign(Object.assign({}, (!maximized && {
     borderTopRightRadius: 12,
     borderTopLeftRadius: 12,
 })), (isDragging && {
     cursor: 'move',
 })), { margin: 0 })));
+export const StyledAppHeaderWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'maximized' && prop !== 'isDragging',
+})(({ isDragging }) => (Object.assign(Object.assign({}, (isDragging && {
+    cursor: 'move',
+})), { margin: 0 })));
 export const ToolbarStyled = styled(Box, {
     shouldForwardProp: (props) => props !== 'maximized' && props !== 'isHovered',
 })(({ theme, maximized }) => (Object.assign(Object.assign({ height: 32, position: 'relative', display: 'flex', width: '100%', justifyContent: 'center', transition: 'all 0.5s ease-in-out', borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }, (maximized && {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ISheetViewVirtualTable } from './types';
-declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, dragControls, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableTitle, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout, isPinnable, tableMode, overscanCount, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
 export default _default;

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

@@ -6,7 +6,7 @@ import { SheetViewTableContainer } from '../components/style';
 import { SheetViewVirtualTableWrapper } from './style';
 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, }) {
+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, onStartDrag, onColumnPin, clearBackdropVisibilityTimeout = 100, isPinnable = false, tableMode, overscanCount, }) {
     const { selectedCell, selectedColumn, selectedRow, showBackDrop, setShowBackdrop, handleCellClick, handleColumnClick, handleChipClick, selectedChip, } = useTableState();
     const { isError, tableLoading, tableError, tableEmpty, hasTimeoutError, showNoDataView, lastItemIndex, areTotalRowsNotFillingHeight, itemsCount, isDelayedFetchingNextPage, } = useTableData({
         rows,
@@ -35,7 +35,7 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         handleChipClick,
     });
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
         const listRef = containerKey === 'pinnedStart' ? pinnedStartVirtualListRef : containerKey === 'pinnedEnd' ? pinnedEndVirtualListRef : scrollableVirtualListRef;

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

@@ -12,8 +12,10 @@ function LoadingMainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, s
                             minWidth: 'fit-content',
                         } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_LoadingStyledBox", hidePadding: true, className: "list-wrapper", sx: {
                                 height: '100%',
+                                maxHeight: '100%',
                                 display: 'flex',
                                 flexDirection: 'column',
+                                overflow: 'hidden',
                             } }, { children: _jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false }) })) }))] })) })) })));
 }
 export default memo(LoadingMainTable);

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

@@ -10,6 +10,10 @@ function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHead
     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", "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_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' }) }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", 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_TableWrapper", sx: {
                             width: '100%',
                             minWidth: 'fit-content',
-                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
+                        } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_ScrollableStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                                height: '100%',
+                                maxHeight: '100%',
+                                overflow: 'hidden',
+                            } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": "SheetViewVirtualTable_TableLoading", columns: unpinnedColumnsData, isLoading: true, isPinned: false })) : (createVirtualTableContainer(unpinnedColumnsData, 'scrollable', false)) })) }))] })) })) })));
 }
 export default memo(MainTable);

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

@@ -15,6 +15,10 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
                         width: '100%',
                         minWidth: 'fit-content',
                         overflowX: 'hidden',
-                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper" }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
+                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "SheetViewVirtualTable_PinnedStyledBox", hidePadding: true, className: "list-wrapper", sx: {
+                            height: '100%',
+                            maxHeight: '100%',
+                            overflow: 'hidden',
+                        } }, { children: tableLoading ? (_jsx(SheetViewTableLoading, { "data-testid": `SheetViewVirtualTable_PinnedTableLoading_${position}`, columns: columnsData, isLoading: true, isPinned: true })) : (createVirtualTableContainer(columnsData, containerKey, true, columnsWidth)) })) }))] })) }));
 }
 export default memo(PinnedColumn);

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

@@ -7,10 +7,7 @@ interface ISheetViewTableLoadingProps {
     isLoading?: boolean;
     rowsCount?: number;
     isPinned?: boolean;
-    tableType?: string;
-    containerHeight?: number;
-    isCompact?: boolean;
 }
-declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, tableType, containerHeight, isCompact, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
+declare function SheetViewTableLoading({ columns, isLoaded, animationType, isLoading, rowsCount, isPinned, }: ISheetViewTableLoadingProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof SheetViewTableLoading>;
 export default _default;

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

@@ -1,21 +1,53 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import uniqueId from 'lodash/uniqueId';
-import { calculateSheetViewMaxRows, getSheetViewRowHeight } from '../../../../utils/index.js';
+import { calculateMaxAllowedRows } from '../../../../utils/index.js';
 import SheetViewTableRowLoading from './SheetViewTableRowLoading';
+import { SHEET_VIEW_TABLE_ROW_HEIGHT } from '../../../../constants/index.js';
 const Wrapper = styled('section')(({ isLoaded = false, isPinned = false }) => ({
     overflow: 'hidden',
     paddingInline: isLoaded && !isPinned ? '32px' : '0px',
     backgroundColor: isLoaded && !isPinned ? 'rgba(255, 255, 255, 0.60)' : 'none',
     filter: isLoaded && !isPinned ? 'blur(8px)' : 'none',
     marginTop: isLoaded && !isPinned ? '1rem' : '0',
+    height: '100%',
+    maxHeight: '100%',
 }));
-function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount, isPinned = false, tableType = 'default', containerHeight, isCompact = false, }) {
-    const availableHeight = containerHeight || window.innerHeight * 0.8;
-    const rowHeight = getSheetViewRowHeight();
-    const maxAllowedRows = calculateSheetViewMaxRows(availableHeight, rowHeight);
-    console.log({ maxAllowedRows, availableHeight, rowHeight, tableType, isCompact, containerHeight });
+function SheetViewTableLoading({ columns, isLoaded = false, animationType, isLoading = false, rowsCount = 13, isPinned = false, }) {
+    const [maxAllowedRows, setMaxAllowedRows] = useState(() => {
+        return rowsCount || Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 15);
+    });
+    useEffect(() => {
+        if (rowsCount) {
+            setMaxAllowedRows(rowsCount);
+            return;
+        }
+        const calculateRowsForContainer = () => {
+            var _a;
+            const wrapperElement = document.querySelector('[data-testid="SheetViewTableLoading"]');
+            if (!wrapperElement) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const containerHeight = ((_a = wrapperElement.parentElement) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
+            const rowHeight = SHEET_VIEW_TABLE_ROW_HEIGHT;
+            const headerHeight = 40;
+            const availableHeight = containerHeight - headerHeight;
+            if (availableHeight <= 0) {
+                return Math.min(calculateMaxAllowedRows(isLoaded, isLoading), 25);
+            }
+            const calculatedRows = Math.floor(availableHeight / rowHeight);
+            return Math.max(3, Math.min(calculatedRows + 2, 25));
+        };
+        const rows = calculateRowsForContainer();
+        setMaxAllowedRows(rows);
+        const handleResize = () => {
+            const calculatedRows = calculateRowsForContainer();
+            setMaxAllowedRows(calculatedRows);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [isLoaded, isLoading, rowsCount]);
     return (_jsx(Wrapper, Object.assign({ isLoaded: isLoaded, isPinned: isPinned, "data-testid": "SheetViewTableLoading" }, { children: [...Array(maxAllowedRows)].map((_, index) => (_jsx(SheetViewTableRowLoading, { columns: columns, animationType: animationType, rowIndex: index, useTableBackground: !isPinned }, `i-${uniqueId('SheetViewTableLoadingRow_')}`))) })));
 }
 export default memo(SheetViewTableLoading);

package/build/components/VirtualTables/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { IVirtualTable } from '../../../types/index.js';
-declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView, isMinimized, }: Readonly<IVirtualTable>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTable>;
 export default _default;

package/build/components/VirtualTables/VirtualTable/VirtualTable.js

@@ -34,11 +34,11 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     areAllRowsLoaded,
     isSheetView,
 }));
-function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, isSheetView = false, isMinimized, }) {
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, onStartDrag, isSheetView = false, isMinimized, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.d.ts

@@ -8,6 +8,6 @@ export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHead
     tableHeight: number;
     tableHeaderHeight?: number;
 }
-declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }: VirtualTableWithCardProps): import("react/jsx-runtime").JSX.Element;
+declare function VirtualTableWithCard({ rows, threshold, rowProps, footerProps, rowHeight, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }: Readonly<VirtualTableWithCardProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof VirtualTableWithCard>;
 export default _default;

package/build/components/VirtualTables/VirtualTableWithCard/VirtualTableWithCard.js

@@ -32,11 +32,11 @@ const createItemData = memoize((isLoading, rows, rowProps, scrollToIndex, lastIt
     areAllRowsLoaded,
     renderCardComponent,
 }));
-function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, dragControls, }) {
+function VirtualTableWithCard({ rows, threshold = TABLE_THRESHOLD, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, tableHeader, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, renderCardComponent, cardLoadingComponent, tableHeight, tableHeaderHeight, noDataComponent, onStartDrag, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/components/TableRow.js

@@ -53,9 +53,10 @@ function TableRow({ row, columns, index, rowProps, isSheetView, selectedCell = n
                     isPinnedEnd: column.pinned === 'end',
                 })
                 : {};
+            const isIndexColumn = column.pinned === 'start' && effectiveFirst;
             return (_jsx(StyledCell, Object.assign({ component: "div", "data-testid": "TableRow_TableCell", "data-column-id": column.id, "data-column-width": column.width, "data-column-width-used": column.width, "data-column-align": column.align, "data-column-order": column.order, "data-column-header": typeof column.header === 'string' ? column.header : 'component', "data-column-sortable": !!column.sortable, "data-column-filterable": !!column.filter, isFirst: effectiveFirst, isLast: effectiveLast, onClick: (event) => {
                     onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(index, colIndex, event, column.pinned);
-                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
+                }, sx: Object.assign(Object.assign(Object.assign({ width: column.width, minWidth: column.width, textAlign: column.align, justifyContent: isIndexColumn ? 'center' : column.align === 'right' ? 'flex-end' : 'flex-start', cursor: onCellClick ? 'pointer' : 'default' }, selectionStyles), rowSelectionBorderStyles), column.cellStyle), isSheetView: isSheetView, isSelected: isCellSelected }, { children: isSheetView ? (_jsx(Box, Object.assign({ sx: { position: 'relative', zIndex: 1 } }, { children: renderCell(column, index, colIndex) }))) : (_jsx(_Fragment, { children: renderCell(column, index, colIndex) })) }), `${column.id}-${colIndex}`));
         }) })), [columns, row, index, selectedCell, selectedColumn, selectedRow, onCellClick, isLastRow, selectedChip, isSheetView]);
     return (_createElement(StyledTableRow, Object.assign({ "data-testid": "TableRow", onClick: rowProps === null || rowProps === void 0 ? void 0 : rowProps.onRowClick, showShadowHighlight: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showShadowHighlight, showLoadedStyle: rowProps === null || rowProps === void 0 ? void 0 : rowProps.showLoadedStyle, component: "article" }, rowProps, { key: index, isSheetView: isSheetView }), content));
 }

package/build/components/Window/Window.d.ts

@@ -18,7 +18,8 @@ interface WindowWrapperProps {
         order?: number;
         openOrder?: number;
     };
+    sandboxMode?: boolean;
 }
-declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, }: WindowWrapperProps): import("react/jsx-runtime").JSX.Element;
+declare function WindowWrapper({ children, id, onResize, isMaximized, isMinimized, dragControls, onClick, options: { width, height, minHeight, minWidth, maxHeight, maxWidth, order, openOrder }, sandboxMode, }: Readonly<WindowWrapperProps>): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof WindowWrapper>;
 export default _default;