@tap-payments/os-micro-frontend-shared 0.0.1

package/build/components/Toolbar/style.js

@@ -0,0 +1,93 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ActionsBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    gap: theme.spacing(1),
+    insetInlineStart: theme.spacing(1.25),
+    zIndex: 1,
+}));
+export const HeaderIcon = styled(Box)(({ theme }) => ({
+    width: 12,
+    height: 12,
+    borderRadius: '50%',
+    cursor: 'pointer',
+    backgroundColor: `${theme.palette.grey[200]}14`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'all 0.2s ease-in-out',
+    img: {
+        opacity: '0',
+        transition: 'all 0.2s ease-in-out',
+    },
+    '&:active': {
+        backgroundColor: `${theme.palette.grey[200]} !important`,
+    },
+}));
+export const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    height: '2rem',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    paddingLeft: theme.spacing(1.25),
+    paddingRight: theme.spacing(1.25),
+    '& > *': {
+        flex: '1 1 0px;',
+    },
+}));
+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 && {
+    borderTopRightRadius: 12,
+    borderTopLeftRadius: 12,
+})), (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 && {
+    display: 'block !important',
+    position: 'fixed',
+    right: 0,
+    left: 0,
+    zIndex: 999,
+    background: 'transparent',
+    '.toolbar-wrapper': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 10,
+        alignItems: 'center',
+        position: 'absolute',
+        right: 0,
+        left: 0,
+        height: '2rem',
+        '.action-box': {
+            visibility: 'hidden',
+        },
+    },
+    '&:hover': {
+        '.toolbar-wrapper': {
+            top: 0,
+        },
+        '.action-box': {
+            visibility: 'visible',
+        },
+    },
+})), { ':hover': {
+        '.header-icon': {
+            backgroundColor: `${theme.palette.grey[200]}40`,
+        },
+        '.header-icon img': {
+            opacity: 1,
+        },
+    } })));
+export const StyledHeaderWrapperStyled = styled(StyledHeaderWrapper)(() => ({
+    position: 'sticky',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1000,
+    background: `#eaeaea`,
+    backdropFilter: 'blur(32px)',
+}));

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '@mui/material/Box';
+export interface ToolbarProps extends BoxProps {
+    isMaximized?: boolean;
+    isHovered?: boolean;
+    rightActions?: ReactNode;
+    leftActions?: ReactNode;
+    title: string;
+    icon?: string;
+}

package/build/components/Toolbar/type.js

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

package/build/components/ToolbarIcon/CloseIcon/CloseIcon.d.ts

@@ -0,0 +1,2 @@
+import { BoxProps } from '@mui/material/Box';
+export declare function CloseIcon(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/build/components/ToolbarIcon/CloseIcon/CloseIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { closeIcon } from '../../../constants/index.js';
+import { Icon } from './style';
+export function CloseIcon(props) {
+    return (_jsx(Icon, Object.assign({}, props, { className: "header-icon" }, { children: _jsx("img", { src: closeIcon, alt: "close" }) })));
+}

package/build/components/ToolbarIcon/CloseIcon/index.d.ts

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

package/build/components/ToolbarIcon/CloseIcon/index.js

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

package/build/components/ToolbarIcon/CloseIcon/style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Icon: 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/ToolbarIcon/CloseIcon/style.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import { HeaderIcon } from '../style';
+export const Icon = styled(HeaderIcon)(({ theme }) => ({
+    '&.header-icon:hover': {
+        backgroundColor: theme.palette.error.main,
+    },
+}));

package/build/components/ToolbarIcon/ExpandButton/ExpandButton.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '@mui/material/Box';
+interface ExpandButtonTextProps extends BoxProps {
+    isExpanded: boolean;
+    children: ReactNode;
+    isHovered?: boolean;
+}
+export declare function ExpandButton({ isExpanded, isHovered, children, ...props }: ExpandButtonTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ToolbarIcon/ExpandButton/ExpandButton.js

@@ -0,0 +1,21 @@
+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/Box';
+import { whiteArrowLeftIcon, whiteArrowRightIcon } from '../../../constants/index.js';
+import { ExpandWrapper, RequestIcon, ExpandText } from './style';
+export function ExpandButton(_a) {
+    var { isExpanded, isHovered, children } = _a, props = __rest(_a, ["isExpanded", "isHovered", "children"]);
+    return (_jsxs(ExpandWrapper, Object.assign({}, props, { children: [_jsx(RequestIcon, Object.assign({ className: "header-icon", isHovered: isHovered }, { children: _jsx(Box, { component: "img", sx: Object.assign({}, (isHovered && {
+                        opacity: 1,
+                    })), src: isExpanded ? whiteArrowRightIcon : whiteArrowLeftIcon, alt: "arrow" }) })), _jsx(ExpandText, Object.assign({ className: "request-text", isHovered: isHovered }, { children: children }))] })));
+}

package/build/components/ToolbarIcon/ExpandButton/index.d.ts

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

package/build/components/ToolbarIcon/ExpandButton/index.js

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

package/build/components/ToolbarIcon/ExpandButton/style.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const RequestIcon: 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> & {
+    isHovered?: boolean | undefined;
+}, {}, {}>;
+export declare const ExpandWrapper: 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>, {}, {}>;
+export declare const ExpandText: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isHovered?: boolean | undefined;
+}, {}, {}>;

package/build/components/ToolbarIcon/ExpandButton/style.js

@@ -0,0 +1,31 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Typography from '@mui/material/Typography';
+import { HeaderIcon } from '../style';
+export const RequestIcon = styled(HeaderIcon, { shouldForwardProp: (props) => props !== 'isHovered' })(({ theme, isHovered }) => (Object.assign({ '&.header-icon:hover': {
+        backgroundColor: theme.palette.success.main,
+    } }, (isHovered && {
+    backgroundColor: `${theme.palette.success.main} !important`,
+}))));
+export const ExpandWrapper = styled(Box)(({ theme }) => ({
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    height: 12,
+    gap: '5px',
+    marginInlineStart: '10px',
+    '&:hover': {
+        '& .request-text': {
+            opacity: 1,
+        },
+        '& .header-icon': {
+            backgroundColor: `${theme.palette.success.main} !important`,
+        },
+    },
+    cursor: 'pointer',
+}));
+export const ExpandText = styled(Typography, { shouldForwardProp: (props) => props !== 'isHovered' })(({ theme, isHovered }) => ({
+    fontSize: '10px',
+    color: theme.palette.success.main,
+    opacity: isHovered ? 1 : 0,
+}));

package/build/components/ToolbarIcon/MaximizeIcon/MaximizeIcon.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '@mui/material/Box';
+interface MaximizeIconProps extends BoxProps {
+    isMaximized: boolean;
+}
+export declare function MaximizeIcon({ isMaximized, ...props }: MaximizeIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ToolbarIcon/MaximizeIcon/MaximizeIcon.js

@@ -0,0 +1,18 @@
+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 } from "react/jsx-runtime";
+import { deMaximizeIcon, maximizeIcon } from '../../../constants/index.js';
+import { Icon } from './style';
+export function MaximizeIcon(_a) {
+    var { isMaximized } = _a, props = __rest(_a, ["isMaximized"]);
+    return (_jsx(Icon, Object.assign({}, props, { className: "header-icon" }, { children: _jsx("img", { src: isMaximized ? deMaximizeIcon : maximizeIcon, alt: "maximize" }) })));
+}

package/build/components/ToolbarIcon/MaximizeIcon/index.d.ts

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

package/build/components/ToolbarIcon/MaximizeIcon/index.js

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

package/build/components/ToolbarIcon/MaximizeIcon/style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Icon: 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/ToolbarIcon/MaximizeIcon/style.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import { HeaderIcon } from '../style';
+export const Icon = styled(HeaderIcon)(({ theme }) => ({
+    '&.header-icon:hover': {
+        backgroundColor: theme.palette.info.dark,
+    },
+}));

package/build/components/ToolbarIcon/MinimizeIcon/MinimizeIcon.d.ts

@@ -0,0 +1,2 @@
+import { BoxProps } from '@mui/material/Box';
+export declare function MinimizeIcon(props: BoxProps): import("react/jsx-runtime").JSX.Element;

package/build/components/ToolbarIcon/MinimizeIcon/MinimizeIcon.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { minimizeIcon } from '../../../constants/index.js';
+import { Icon } from './style';
+export function MinimizeIcon(props) {
+    return (_jsx(Icon, Object.assign({}, props, { className: "header-icon" }, { children: _jsx("img", { src: minimizeIcon, alt: "minimize" }) })));
+}

package/build/components/ToolbarIcon/MinimizeIcon/index.d.ts

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

package/build/components/ToolbarIcon/MinimizeIcon/index.js

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

package/build/components/ToolbarIcon/MinimizeIcon/style.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Icon: 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/ToolbarIcon/MinimizeIcon/style.js

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import { HeaderIcon } from '../style';
+export const Icon = styled(HeaderIcon)(({ theme }) => ({
+    '&.header-icon:hover': {
+        backgroundColor: theme.palette.warning.main,
+    },
+}));

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

@@ -0,0 +1,4 @@
+export * from './CloseIcon';
+export * from './MinimizeIcon';
+export * from './MaximizeIcon';
+export * from './ExpandButton';

package/build/components/ToolbarIcon/index.js

@@ -0,0 +1,4 @@
+export * from './CloseIcon';
+export * from './MinimizeIcon';
+export * from './MaximizeIcon';
+export * from './ExpandButton';

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const HeaderIcon: 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/ToolbarIcon/style.js

@@ -0,0 +1,20 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const HeaderIcon = styled(Box)(({ theme }) => ({
+    width: 12,
+    height: 12,
+    borderRadius: '50%',
+    cursor: 'pointer',
+    backgroundColor: `${theme.palette.grey[200]}14`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    transition: 'all 0.2s ease-in-out',
+    img: {
+        opacity: '0',
+        transition: 'all 0.2s ease-in-out',
+    },
+    '&:active': {
+        backgroundColor: `${theme.palette.grey[200]} !important`,
+    },
+}));

package/build/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+import type { TooltipProps } from '@mui/material/Tooltip';
+interface Props extends Omit<TooltipProps, 'children'> {
+    title: React.ReactNode;
+    placement?: TooltipProps['placement'];
+    children?: ReactElement;
+    className?: string;
+}
+declare function Tooltip({ className, title, placement, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export default Tooltip;

package/build/components/Tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { StyledTooltip } from './styles';
+function Tooltip(_a) {
+    var { className, title, placement = 'top', children } = _a, rest = __rest(_a, ["className", "title", "placement", "children"]);
+    return (_jsx(StyledTooltip, Object.assign({ classes: { popper: className }, title: title, placement: placement, arrow: true }, rest, { children: children || _jsx(_Fragment, {}) })));
+}
+export default Tooltip;

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

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

package/build/components/Tooltip/index.js

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

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

@@ -0,0 +1,2 @@
+import { TooltipProps } from '@mui/material/Tooltip';
+export declare const StyledTooltip: import("@emotion/styled").StyledComponent<TooltipProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/Tooltip/styles.js

@@ -0,0 +1,34 @@
+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 } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import TooltipComponent, { tooltipClasses } from '@mui/material/Tooltip';
+export const StyledTooltip = styled((_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx(TooltipComponent, Object.assign({}, props, { classes: { popper: className } }));
+})(({ theme }) => ({
+    zIndex: 999999,
+    [`& .${tooltipClasses.arrow}`]: {
+        '&:before': {
+            border: `0.97px solid rgba(60, 55, 55, 0.13)`,
+        },
+        color: theme.palette.common.white,
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: theme.palette.common.white,
+        color: theme.palette.text.secondary,
+        boxShadow: theme.shadows[1],
+        fontSize: 12,
+        border: `0.97px solid rgba(60, 55, 55, 0.13)`,
+        marginBottom: '7px !important',
+    },
+}));

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

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

package/build/components/VirtualTable/VirtualTable.js

@@ -0,0 +1,91 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, memo, useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import memoize from 'memoize-one';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { TABLE_ROW_HEIGHT, TABLE_THRESHOLD, TABLE_LIST_OVER_SCAN } from '../../constants/index.js';
+import { useDelayToSetValue } from '../../hooks/index.js';
+import { isHeightNotFullyFilledByRows, isNotFoundError, isTimeoutError, hasError } from '../../utils/index.js';
+import TableFooter from './components/TableFooter/TableFooter';
+import TableHeader from './components/TableHeader';
+import TableLastItem from './components/TableLastItem';
+import TableNoData from './components/TableNoData';
+import ListItemWrapper from './components/virtualScroll/ListItemWrapper';
+import { StyledBox, StyledTableBox, StyledVirtualList, TableContainer, TableWrapper } from './style';
+const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded) => ({
+    columns,
+    isLoading,
+    rows,
+    rowProps,
+    scrollToIndex,
+    totalCount,
+    lastItemIndex,
+    isError,
+    areAllRowsLoaded,
+}));
+function VirtualTable({ columns, rows, threshold = TABLE_THRESHOLD, showHeader, headerProps, rowProps, footerProps, rowHeight = TABLE_ROW_HEIGHT, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded = false, tableBodyStyles, tableMode, tableTitle, dragControls, }) {
+    var _a;
+    const theme = useTheme();
+    const onPointerDown = (e) => {
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
+    };
+    const isDelayedFetchingNextPage = useDelayToSetValue({
+        value: isFetchingNextPage,
+        delay: 1000,
+    });
+    const [showBackDrop, setShowBackdrop] = useState(false);
+    const isError = hasError(error);
+    const tableLoading = isLoading !== null && isLoading !== void 0 ? isLoading : true;
+    const tableError = !isLoading && rows.length === 0 && isError && !isNotFoundError(error);
+    const tableEmpty = !isLoading && rows.length === 0;
+    const hasTimeoutError = isTimeoutError(error);
+    const lastItemIndex = rows.length - 1;
+    const shownColumns = useMemo(() => columns.filter((column) => !column.hidden), [columns]);
+    const orderedColumns = useMemo(() => shownColumns.sort((a, b) => { var _a, _b; return ((_a = a === null || a === void 0 ? void 0 : a.order) !== null && _a !== void 0 ? _a : 1000000) - ((_b = b === null || b === void 0 ? void 0 : b.order) !== null && _b !== void 0 ? _b : 1000000); }), [shownColumns]);
+    const areTotalRowsNotFillingHeight = isHeightNotFullyFilledByRows(rows.length) && !tableLoading;
+    const itemsCount = isDelayedFetchingNextPage || (areAllRowsLoaded && !areTotalRowsNotFillingHeight) ? rows.length + 1 : rows.length;
+    const itemData = createItemData(orderedColumns, isDelayedFetchingNextPage, rows, rowProps, scrollToIndex, lastItemIndex, (_a = footerProps === null || footerProps === void 0 ? void 0 : footerProps.totalCount) !== null && _a !== void 0 ? _a : 0, isError, areAllRowsLoaded && !areTotalRowsNotFillingHeight);
+    const renderTableContainer = useMemo(() => {
+        const setBackdropVisibility = (isVisible) => {
+            setShowBackdrop(isVisible);
+        };
+        const handleOnLoadMoreItems = () => __awaiter(this, void 0, void 0, function* () {
+            if (areAllRowsLoaded)
+                return;
+            yield (loadMoreItems === null || loadMoreItems === void 0 ? void 0 : loadMoreItems());
+        });
+        return (_jsx(InfiniteLoader, Object.assign({ "data-testid": "VirtualTable_InfiniteLoader", isItemLoaded: (index) => index !== lastItemIndex, itemCount: itemsCount, loadMoreItems: handleOnLoadMoreItems, threshold: threshold }, { children: ({ onItemsRendered, ref }) => (_jsx(AutoSizer, Object.assign({ ref: ref, "data-testid": "VirtualTable_AutoSizer" }, { children: ({ height, width }) => (_jsx(StyledVirtualList, Object.assign({ "data-testid": "VirtualTable_VirtualList", useIsScrolling: true, className: "list", itemData: itemData, height: height || 0, width: width || 0, itemCount: itemsCount, itemSize: () => TABLE_ROW_HEIGHT, onItemsRendered: onItemsRendered, setBackdropVisibility: setBackdropVisibility, areTotalRowsNotFillingHeight: areTotalRowsNotFillingHeight, scrollToIndex: scrollToIndex, overscanCount: TABLE_LIST_OVER_SCAN }, { children: ListItemWrapper }))) }))) })));
+    }, [
+        orderedColumns,
+        error,
+        isLoading,
+        lastItemIndex,
+        loadMoreItems,
+        rowHeight,
+        rows,
+        rowProps,
+        tableError,
+        tableLoading,
+        threshold,
+        isDelayedFetchingNextPage,
+        areAllRowsLoaded,
+        areTotalRowsNotFillingHeight,
+        itemsCount,
+    ]);
+    const showNoDataView = tableLoading || tableError || tableEmpty || hasTimeoutError;
+    return (_jsxs(_Fragment, { children: [_jsxs(TableContainer, { children: [_jsx(StyledTableBox, Object.assign({ as: "main", id: "table-box-container", "aria-labelledby": "table-box-container", "data-testid": "VirtualTable_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-show-background-color": !!showBackgroundColor, "data-table-mode": tableMode, height: "100%", dir: theme.direction, showBackgroundColor: showBackgroundColor, showNoDataView: showNoDataView }, { children: _jsxs(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", showNoDataView: showNoDataView, sx: Object.assign({}, tableBodyStyles) }, { children: [showHeader && (_jsx(TableHeader, { "data-testid": "VirtualTable_TableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: orderedColumns, headerProps: headerProps, showBackDrop: showBackDrop })), showNoDataView ? (_jsx(TableNoData, { error: error, tableEmpty: tableEmpty, isTimeoutError: hasTimeoutError, tableError: tableError, tableLoading: tableLoading, orderedColumns: orderedColumns, triggerDataRefetch: triggerDataRefetch, footerProps: footerProps })) : (_jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
+                                        width: '100%',
+                                        minWidth: 'fit-content',
+                                    } }, { children: _jsx(StyledBox, Object.assign({ "data-testid": "VirtualTable_StyledBox", hidePadding: true, className: "list-wrapper" }, { children: renderTableContainer })) })))] })) })), !showNoDataView && areTotalRowsNotFillingHeight && !isFetchingNextPage && (_jsx(TableLastItem, { height: (itemsCount + 1) * TABLE_ROW_HEIGHT, sandboxMode: footerProps === null || footerProps === void 0 ? void 0 : footerProps.sandboxMode, "data-testid": "VirtualTable_TableLastItem" }))] }), _jsx(TableFooter, Object.assign({ "data-testid": "VirtualTable_TableFooter", showSeparator: true, showBackDrop: showBackDrop, onPointerDown: onPointerDown }, footerProps))] }));
+}
+export default memo(VirtualTable);

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

@@ -0,0 +1,13 @@
+import { ReactNode, ReactElement } from 'react';
+import type { IVirtualTable } from '../../types/index.js';
+export interface VirtualTableWithCardProps extends Omit<IVirtualTable, 'showHeader' | 'dimensions' | '	showBackgroundColor' | 'columns'> {
+    tableHeader?: ReactNode;
+    renderCardComponent: (rows: any) => ReactElement | null;
+    cardLoadingComponent: ReactNode;
+    noDataComponent: ReactElement;
+    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 const _default: import("react").MemoExoticComponent<typeof VirtualTableWithCard>;
+export default _default;