@tap-payments/os-micro-frontend-shared 0.1.96-test.7 → 0.1.97-test.101

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

@@ -15,7 +15,7 @@ export declare const Charge: import("@emotion/styled").StyledComponent<import("@
 export declare const DropDownChargeGapColumn: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledAmount: import("@emotion/styled").StyledComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "name" | "value" | "list" | "form" | "slot" | "style" | "title" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
+}, "width" | "height" | "hidden" | "type" | "color" | "content" | "translate" | "value" | "list" | "form" | "slot" | "style" | "title" | "name" | "ref" | "pattern" | "key" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "multiple" | "autoComplete" | "readOnly" | "required" | "max" | "src" | "alt" | "formAction" | "formMethod" | "formNoValidate" | "formTarget" | "min" | "accept" | "capture" | "checked" | "formEncType" | "minLength"> & {
     allowDecimals?: boolean | undefined;
     allowNegativeValue?: boolean | undefined;
     id?: string | undefined;

package/build/components/AppServices/AppServices.d.ts

@@ -1,17 +1,11 @@
 import React from 'react';
-import { AppService } from '../../types/index.js';
+import { AppDetails, UserApp } from '../../types/index.js';
 import { ServiceItemProps } from './ServiceItem';
 interface AppServicesProps extends Pick<ServiceItemProps, 'onClickServiceItem'> {
-    serviceCode: string;
-    services: AppService[];
-    isMaximized: boolean;
-    appCode: string;
-    dimensions: {
-        width: string | number;
-    };
-    pathname: string;
-    onChangeServiceCode?: (serviceCode: string) => void;
+    appInfo: AppDetails;
+    userApp?: UserApp;
+    onChangeAppServiceCode?: (serviceCode: string) => void;
 }
-declare function AppServices({ isMaximized, serviceCode, dimensions, appCode, services, pathname, onChangeServiceCode, onClickServiceItem, }: Readonly<AppServicesProps>): import("react/jsx-runtime").JSX.Element;
+declare function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }: AppServicesProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof AppServices>;
 export default _default;

package/build/components/AppServices/AppServices.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { memo, useEffect, useRef, useState, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router';
 import { StyledIconForDropDown, StyledMenuTitle, StyledOption, StyledSelect, StyledSelectComponent } from '../index.js';
 import { APP_CODES, blackHeadingDownArrow, blueHeadingDropdownArrow } from '../../constants/index.js';
 import { getNameText } from '../../utils/index.js';
@@ -10,20 +11,21 @@ import { Wrapper } from './style';
 const selectedIcon = (props) => {
     return (_jsx(StyledIconForDropDown, { src: props.className.includes('MuiSelect-iconOpen') ? blueHeadingDropdownArrow : blackHeadingDownArrow, alt: "dropdown" }));
 };
-function AppServices({ isMaximized, serviceCode, dimensions, appCode, services, pathname, onChangeServiceCode, onClickServiceItem, }) {
+function AppServices({ appInfo, userApp, onChangeAppServiceCode, onClickServiceItem }) {
     const [initServicesWidth, setInitServicesWidth] = useState(0);
     const [isDropdown, setIsDropdown] = useState(false);
     const [selectedOption, setSelectedOption] = useState('');
     const servicesRef = useRef(null);
     const [openDropdown, setOpenDropdown] = React.useState(false);
+    const pathname = useLocation();
     const { i18n } = useTranslation();
-    const servicesList = useMemo(() => {
-        var _a;
-        if (appCode === APP_CODES.account.code) {
-            return (_a = services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
+    const services = useMemo(() => {
+        var _a, _b;
+        if (appInfo.appCode === APP_CODES.account.code) {
+            return (_a = userApp === null || userApp === void 0 ? void 0 : userApp.app_services.filter((service) => service.code === APP_CODES.account.services.account.code)) !== null && _a !== void 0 ? _a : [];
         }
-        return services !== null && services !== void 0 ? services : [];
-    }, [appCode, services]);
+        return (_b = userApp === null || userApp === void 0 ? void 0 : userApp.app_services) !== null && _b !== void 0 ? _b : [];
+    }, [appInfo.appCode, userApp === null || userApp === void 0 ? void 0 : userApp.app_services]);
     const handleChange = (event) => {
         setSelectedOption(event.target.value);
     };
@@ -32,8 +34,8 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
     };
     const activeTabTitle = useMemo(() => {
         var _a, _b;
-        return getNameText((_b = (_a = servicesList.filter((service) => service.code.toLowerCase() === decodeURIComponent(serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
-    }, [pathname, services, i18n.language]);
+        return getNameText((_b = (_a = services.filter((service) => service.code.toLowerCase() === decodeURIComponent(appInfo.serviceCode).toLowerCase())) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.name, i18n.language);
+    }, [pathname, appInfo.serviceCode]);
     useEffect(() => {
         setSelectedOption(activeTabTitle);
     }, [activeTabTitle]);
@@ -45,14 +47,14 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
         setInitServicesWidth(((_a = servicesRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) + iconSize + iconGap + iconMargin);
     }, []);
     useEffect(() => {
-        setIsDropdown(Number(dimensions.width) < initServicesWidth + 10);
-    }, [dimensions.width, initServicesWidth]);
-    const navigateToService = (newServiceCode) => {
-        onChangeServiceCode === null || onChangeServiceCode === void 0 ? void 0 : onChangeServiceCode(newServiceCode);
+        setIsDropdown(Number(appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width) < initServicesWidth + 10);
+    }, [appInfo === null || appInfo === void 0 ? void 0 : appInfo.dimensions.width]);
+    const navigateToService = (serviceCode) => {
+        onChangeAppServiceCode === null || onChangeAppServiceCode === void 0 ? void 0 : onChangeAppServiceCode(serviceCode);
         setOpenDropdown(false);
     };
     const renderValue = (selected) => _jsx(StyledSelectComponent, { children: selected });
-    return (_jsxs(Wrapper, Object.assign({ maximized: isMaximized }, { children: [!!services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { activeCode: serviceCode, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), !!services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
+    return (_jsxs(Wrapper, Object.assign({ maximized: appInfo.isMaximized }, { children: [services.length && !isDropdown && (_jsx(Box, Object.assign({ ref: servicesRef, display: "flex", gap: "8px", flexDirection: "row", sx: { userSelect: 'none' } }, { children: services.map((service, idx) => (_jsx(ServiceItem, { appInfo: appInfo, onClickServiceItem: onClickServiceItem, navigateToMenuItem: navigateToService, name: getNameText(service.name, i18n.language) || '', code: service.code }, `service-item-${service.code}-${idx}`))) }))), services.length && isDropdown && (_jsx(StyledSelect, Object.assign({ open: openDropdown, onClick: handleOpenDropdown, displayEmpty: true, inputProps: { 'aria-label': 'Without label' }, MenuProps: {
                     anchorOrigin: {
                         vertical: 40,
                         horizontal: 83,
@@ -72,7 +74,7 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
                         paddingTop: '0px !important',
                         paddingBottom: '0px !important',
                     },
-                } }, { children: services.map((service, idx) => {
+                } }, { children: services.map((service) => {
                     var _a;
                     if (((_a = getNameText(service.name, i18n.language)) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.toLowerCase())) {
                         return null;
@@ -81,7 +83,7 @@ function AppServices({ isMaximized, serviceCode, dimensions, appCode, services,
                             e.preventDefault();
                             e.stopPropagation();
                             navigateToService(service.code);
-                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) }), `option-${service.code}-${idx}`));
+                        } }, { children: _jsx(StyledMenuTitle, { children: getNameText(service.name, i18n.language) }) })));
                 }) })))] })));
 }
 export default memo(AppServices);

package/build/components/AppServices/ServiceItem.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
+import { AppDetails } from '../../types/index.js';
 export interface ServiceItemProps {
-    activeCode: string;
+    appInfo: AppDetails;
     isDropdown?: boolean;
     name: string;
     code: string;
+    onDropdownClick?: () => void;
     navigateToMenuItem: (serviceCode: string) => void;
     onClickServiceItem?: (code: string) => void;
 }
-declare function ServiceItem({ isDropdown, name, code, activeCode, navigateToMenuItem, onClickServiceItem }: Readonly<ServiceItemProps>): import("react/jsx-runtime").JSX.Element;
+declare function ServiceItem({ isDropdown, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }: ServiceItemProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof ServiceItem>;
 export default _default;

package/build/components/AppServices/ServiceItem.js

@@ -5,7 +5,7 @@ import { DropdownMenu, Icon } from '../index.js';
 import { isInsightService } from '../../utils/index.js';
 import { homeIcon, newWindowIcon } from '../../constants/index.js';
 import { ServiceItemStyled } from './style';
-function ServiceItem({ isDropdown = false, name, code, activeCode, navigateToMenuItem, onClickServiceItem }) {
+function ServiceItem({ isDropdown = false, name, code, appInfo, onDropdownClick, navigateToMenuItem, onClickServiceItem }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const { t } = useTranslation();
     const open = Boolean(anchorEl);
@@ -13,7 +13,7 @@ function ServiceItem({ isDropdown = false, name, code, activeCode, navigateToMen
         setAnchorEl(null);
     };
     const isHomeService = isInsightService(code);
-    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: activeCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(ServiceItemStyled, Object.assign({ isDropdown: isDropdown, className: appInfo.serviceCode.toLowerCase() === code.toLowerCase() ? 'active' : '', onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     navigateToMenuItem(code);
@@ -31,6 +31,8 @@ function ServiceItem({ isDropdown = false, name, code, activeCode, navigateToMen
                             e.stopPropagation();
                             onClickServiceItem === null || onClickServiceItem === void 0 ? void 0 : onClickServiceItem(code);
                             handleClose();
+                            if (onDropdownClick)
+                                onDropdownClick();
                         },
                     },
                 ] })] }));

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

@@ -9,12 +9,12 @@ export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     color?: string | undefined;
     content?: string | undefined;
     translate?: "yes" | "no" | undefined;
-    name?: string | undefined;
     value?: string | number | readonly string[] | undefined;
     list?: string | undefined;
     form?: string | undefined;
     slot?: string | undefined;
     title?: string | undefined;
+    name?: string | undefined;
     className?: string | undefined;
     pattern?: string | undefined;
     defaultChecked?: boolean | undefined;

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

@@ -13,12 +13,6 @@ export declare const StyledHeaderWrapper: import("@emotion/styled").StyledCompon
     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> & {
-    sandboxMode?: boolean | undefined;
-    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> & {

package/build/components/Toolbar/style.js

@@ -44,11 +44,6 @@ export const StyledHeaderWrapper = styled('div', {
 })), (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, onStartDrag, 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, dragControls, 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

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } 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 } 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, onStartDrag, 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, dragControls, 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,32 +35,52 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
         handleChipClick,
     });
     const onPointerDown = (e) => {
-        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
-    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 }));
-    }, [
+    const scrollHandlers = useMemo(() => ({
+        start: (scrollProps) => handleScroll(scrollProps, 'start'),
+        end: (scrollProps) => handleScroll(scrollProps, 'end'),
+        scrollable: (scrollProps) => handleScroll(scrollProps, 'scrollable'),
+    }), [handleScroll]);
+    const stableTableProps = useMemo(() => ({
+        itemCount: itemsCount,
+        lastItemIndex,
+        areAllRowsLoaded,
+        loadMoreItems,
+        threshold,
+        areTotalRowsNotFillingHeight,
+        clearBackdropVisibilityTimeout,
+        overscanCount,
+    }), [
         itemsCount,
         lastItemIndex,
         areAllRowsLoaded,
         loadMoreItems,
         threshold,
-        getItemSize,
-        getItemDataForContainer,
-        scrollToIndex,
         areTotalRowsNotFillingHeight,
         clearBackdropVisibilityTimeout,
-        handleScroll,
-        setShowBackdrop,
-        pinnedStartVirtualListRef,
-        pinnedEndVirtualListRef,
-        scrollableVirtualListRef,
+        overscanCount,
     ]);
+    const dynamicTableProps = useMemo(() => ({
+        getItemSize,
+        getItemData: getItemDataForContainer,
+        scrollToIndex,
+        setBackdropVisibility: setShowBackdrop,
+    }), [getItemSize, getItemDataForContainer, scrollToIndex, setShowBackdrop]);
+    const createPinnedStartTable = useCallback((columnsData, fixedWidth) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: true, fixedWidth: fixedWidth, onScroll: scrollHandlers.start, listRef: pinnedStartVirtualListRef }), "pinned-start")), [stableTableProps, dynamicTableProps, scrollHandlers.start, pinnedStartVirtualListRef]);
+    const createPinnedEndTable = useCallback((columnsData, fixedWidth) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: true, fixedWidth: fixedWidth, onScroll: scrollHandlers.end, listRef: pinnedEndVirtualListRef }), "pinned-end")), [stableTableProps, dynamicTableProps, scrollHandlers.end, pinnedEndVirtualListRef]);
+    const createScrollableTable = useCallback((columnsData) => (_jsx(VirtualTable, Object.assign({ columnsData: columnsData }, stableTableProps, dynamicTableProps, { isPinned: false, onScroll: scrollHandlers.scrollable, listRef: scrollableVirtualListRef }), "scrollable")), [stableTableProps, dynamicTableProps, scrollHandlers.scrollable, scrollableVirtualListRef]);
+    const createVirtualTableContainer = useCallback((columnsData, containerKey, isPinned = false, fixedWidth) => {
+        switch (containerKey) {
+            case 'pinnedStart':
+                return createPinnedStartTable(columnsData, fixedWidth);
+            case 'pinnedEnd':
+                return createPinnedEndTable(columnsData, fixedWidth);
+            case 'scrollable':
+            default:
+                return createScrollableTable(columnsData);
+        }
+    }, [createPinnedStartTable, createPinnedEndTable, createScrollableTable]);
     const baseCommonProps = {
         showHeader,
         columnsSorting,

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { MainTableWrapper, UnpinnedTableHeaderWrapper } from '../style';
@@ -7,9 +7,31 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 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, }) {
     const theme = useTheme();
-    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: {
+    const allPinnedColumns = useMemo(() => [...pinnedStartColumns, ...pinnedEndColumns], [pinnedStartColumns, pinnedEndColumns]);
+    const memoizedTableBodyStyles = useMemo(() => (Object.assign(Object.assign({}, tableBodyStyles), { display: 'flex', flexDirection: 'column', height: '100%' })), [tableBodyStyles]);
+    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: memoizedTableBodyStyles }, { children: [showHeader && (_jsx(UnpinnedTableHeaderWrapper, { children: _jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_UnpinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: unpinnedColumnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: allPinnedColumns, 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)) })) }))] })) })) })));
 }
-export default memo(MainTable);
+export default memo(MainTable, (prevProps, nextProps) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const criticalProps = [
+        'hasPinnedStart',
+        'hasPinnedEnd',
+        'showHeader',
+        'showBackDrop',
+        'tableLoading',
+        'showNoDataView',
+        'isLoading',
+        'isError',
+        'hasTimeoutError',
+        'tableMode',
+    ];
+    const areCriticalPropsSame = criticalProps.every((prop) => prevProps[prop] === nextProps[prop]);
+    const areColumnsDataSame = ((_a = prevProps.unpinnedColumnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.unpinnedColumnsData) === null || _b === void 0 ? void 0 : _b.length) &&
+        ((_c = prevProps.unpinnedColumnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b; return col.id === ((_b = (_a = nextProps.unpinnedColumnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id); }));
+    const arePinnedColumnsSame = ((_d = prevProps.pinnedStartColumns) === null || _d === void 0 ? void 0 : _d.length) === ((_e = nextProps.pinnedStartColumns) === null || _e === void 0 ? void 0 : _e.length) &&
+        ((_f = prevProps.pinnedEndColumns) === null || _f === void 0 ? void 0 : _f.length) === ((_g = nextProps.pinnedEndColumns) === null || _g === void 0 ? void 0 : _g.length);
+    return areCriticalPropsSame && areColumnsDataSame && arePinnedColumnsSame;
+});

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { StyledTableBox, TableWrapper, StyledBox } from '../../components/style';
 import { PinnedStartColumnWrapper, PinnedEndColumnWrapper } from '../style';
@@ -9,12 +9,35 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
     const theme = useTheme();
     if (columnsData.length === 0)
         return null;
-    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
-    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+    const { Wrapper, containerKey } = useMemo(() => {
+        const key = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+        return {
+            Wrapper: position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper,
+            containerKey: key,
+        };
+    }, [position]);
     return (_jsx(Wrapper, { children: _jsxs(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 }, { children: [showHeader && (_jsx(SheetViewTableHeader, { "data-testid": "SheetViewVirtualTable_PinnedTableHeader", columnsSorting: columnsSorting, onColumnSort: onColumnSort, columns: columnsData, headerProps: headerProps, showBackDrop: showBackDrop, pinnedColumns: pinnedColumnsList, onColumnPin: onColumnPin, isPinnable: isPinnable, lastColumnId: lastColumnId, selectedColumn: selectedColumn, onColumnClick: onColumnClick, tablePosition: position === 'start' ? 'pinnedStart' : 'pinnedEnd', hasPinnedStart: hasPinnedStart, hasPinnedEnd: hasPinnedEnd })), _jsx(TableWrapper, Object.assign({ "data-testid": "VirtualTable_TableWrapper", sx: {
                         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)) })) }))] })) }));
 }
-export default memo(PinnedColumn);
+export default memo(PinnedColumn, (prevProps, nextProps) => {
+    var _a, _b, _c, _d, _e, _f;
+    const criticalProps = [
+        'position',
+        'columnsWidth',
+        'showHeader',
+        'showBackDrop',
+        'tableLoading',
+        'showNoDataView',
+        'hasPinnedStart',
+        'hasPinnedEnd',
+    ];
+    const areCriticalPropsSame = criticalProps.every((prop) => prevProps[prop] === nextProps[prop]);
+    const areColumnsDataSame = ((_a = prevProps.columnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.columnsData) === null || _b === void 0 ? void 0 : _b.length) &&
+        ((_c = prevProps.columnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b, _c, _d; return col.id === ((_b = (_a = nextProps.columnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id) && col.width === ((_d = (_c = nextProps.columnsData) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.width); }));
+    const arePinnedColumnsSame = ((_d = prevProps.pinnedColumnsList) === null || _d === void 0 ? void 0 : _d.length) === ((_e = nextProps.pinnedColumnsList) === null || _e === void 0 ? void 0 : _e.length) &&
+        ((_f = prevProps.pinnedColumnsList) === null || _f === void 0 ? void 0 : _f.every((col, index) => { var _a; return col === ((_a = nextProps.pinnedColumnsList) === null || _a === void 0 ? void 0 : _a[index]); }));
+    return areCriticalPropsSame && areColumnsDataSame && arePinnedColumnsSame;
+});

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

@@ -30,4 +30,21 @@ function VirtualTable({ columnsData, itemCount, lastItemIndex, areAllRowsLoaded,
                     } }, { children: ListItemWrapper })));
             } }))) })));
 }
-export default memo(VirtualTable);
+export default memo(VirtualTable, (prevProps, nextProps) => {
+    var _a, _b, _c;
+    const propsToCompare = [
+        'columnsData',
+        'itemCount',
+        'lastItemIndex',
+        'areAllRowsLoaded',
+        'isPinned',
+        'fixedWidth',
+        'scrollToIndex',
+        'areTotalRowsNotFillingHeight',
+        'overscanCount',
+    ];
+    const areCriticalPropsSame = propsToCompare.every((key) => prevProps[key] === nextProps[key]);
+    const areColumnsDataSame = ((_a = prevProps.columnsData) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.columnsData) === null || _b === void 0 ? void 0 : _b.length) &&
+        ((_c = prevProps.columnsData) === null || _c === void 0 ? void 0 : _c.every((col, index) => { var _a, _b, _c, _d; return col.id === ((_b = (_a = nextProps.columnsData) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.id) && col.width === ((_d = (_c = nextProps.columnsData) === null || _c === void 0 ? void 0 : _c[index]) === null || _d === void 0 ? void 0 : _d.width); }));
+    return areCriticalPropsSame && areColumnsDataSame;
+});

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

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 export const useTableState = () => {
     const [selectedCell, setSelectedCell] = useState(null);
     const [selectedColumn, setSelectedColumn] = useState(null);
@@ -48,7 +48,7 @@ export const useTableState = () => {
         setSelectedChip(null);
         setSelectedRow(null);
     }, []);
-    return {
+    const tableStateAPI = useMemo(() => ({
         selectedCell,
         selectedColumn,
         selectedRow,
@@ -59,5 +59,17 @@ export const useTableState = () => {
         handleCellClick,
         handleColumnClick,
         resetSelection,
-    };
+    }), [
+        selectedCell,
+        selectedColumn,
+        selectedRow,
+        showBackDrop,
+        selectedChip,
+        setShowBackdrop,
+        handleChipClick,
+        handleCellClick,
+        handleColumnClick,
+        resetSelection,
+    ]);
+    return tableStateAPI;
 };

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import memoize from 'memoize-one';
 const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToIndex, lastItemIndex, totalCount, isError, areAllRowsLoaded, isPinned, selectedCell, selectedColumn, selectedRow, selectedChip, onCellClick, onChipClick, containerHeight, rowHeight) => ({
     columns,
@@ -24,16 +24,20 @@ const createItemData = memoize((columns, isLoading, rows, rowProps, scrollToInde
     rowHeight,
 }));
 export const useVirtualTableContainer = ({ rowHeight, areAllRowsLoaded, rows, isDelayedFetchingNextPage, rowProps, scrollToIndex, footerProps, isError, selectedCell, selectedColumn, selectedRow, selectedChip, handleCellClick, handleChipClick, }) => {
+    const stableRowsLength = useRef(rows.length);
+    if (stableRowsLength.current !== rows.length) {
+        stableRowsLength.current = rows.length;
+    }
     const getItemSize = useCallback((index, height) => {
-        const isLastRow = areAllRowsLoaded && index === rows.length;
+        const isLastRow = areAllRowsLoaded && index === stableRowsLength.current;
         if (isLastRow) {
-            const usedHeight = rows.length * rowHeight;
+            const usedHeight = stableRowsLength.current * rowHeight;
             const remainingHeight = height - usedHeight;
             const minimumLastRowHeight = rowHeight * 2;
             return Math.max(remainingHeight, minimumLastRowHeight);
         }
         return rowHeight;
-    }, [areAllRowsLoaded, rows.length, rowHeight]);
+    }, [areAllRowsLoaded, rowHeight]);
     const commonItemDataParams = useMemo(() => {
         var _a;
         return [

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, onStartDrag, 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, dragControls, 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, onStartDrag, 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, dragControls, isSheetView = false, isMinimized, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(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, onStartDrag, }: Readonly<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, dragControls, }: 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, onStartDrag, }) {
+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, }) {
     var _a;
     const theme = useTheme();
     const onPointerDown = (e) => {
-        onStartDrag === null || onStartDrag === void 0 ? void 0 : onStartDrag(e);
+        dragControls === null || dragControls === void 0 ? void 0 : dragControls.start(e);
     };
     const isDelayedFetchingNextPage = useDelayToSetValue({
         value: isFetchingNextPage,

package/build/components/VirtualTables/optimization/AnimationOptimizations.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+export declare const useAnimationOptimization: (isAnimating: boolean) => ((callback: () => void) => void) | null;
+export declare const OptimizedAnimatedCell: import("react").MemoExoticComponent<({ children, isAnimating, ...props }: {
+    [key: string]: any;
+    children: React.ReactNode;
+    isAnimating: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;
+export declare const animationStyles: {
+    slideIn: {
+        transform: string;
+        transition: string;
+    };
+    slideOut: {
+        transform: string;
+        transition: string;
+    };
+    fadeIn: {
+        opacity: number;
+        transition: string;
+    };
+    fadeOut: {
+        opacity: number;
+        transition: string;
+    };
+};
+export declare const useScrollOptimization: () => boolean;