@tap-payments/os-micro-frontend-shared 0.1.102 → 0.1.103-test.107

package/LICENSE

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

package/README.md

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

package/build/components/ColorPicker/ColorPicker.d.ts

@@ -5,6 +5,9 @@ type ColorPickerProps = {
     onChange: (value: string) => void;
     onReset?: () => void;
     sx?: SxProps;
+    options?: {
+        hideReset?: boolean;
+    };
 };
-declare const ColorPicker: ({ id, value, onChange, onReset, sx }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorPicker: ({ id, value, onChange, onReset, sx, options }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
 export default ColorPicker;

package/build/components/ColorPicker/ColorPicker.js

@@ -13,7 +13,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
 import { useTranslation } from 'react-i18next';
-import Color from 'color';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Divider from '@mui/material/Divider';
@@ -22,16 +21,8 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { CancelButton, ConfirmButton, Footer, StyledCloseButtonWrapper, StyledColorWidgetWrapper } from './style';
 import { closeXIcon } from '../../constants/index.js';
-const hexa2Rgba = (value) => {
-    const colorInstance = Color(value).rgb();
-    const { r, g, b, alpha = 1 } = colorInstance.object();
-    return {
-        value: { r, g, b, alpha },
-        stringified: `rgba(${r},${g},${b},${alpha})`,
-    };
-};
-const rgba2Hexa = (value) => Color(value).hexa();
-const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
+import { hexa2Rgba, rgba2Hexa } from '../../utils/index.js';
+const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx, options }) => {
     const { t } = useTranslation();
     const [anchorEl, setAnchorEl] = useState(null);
     const rootRef = useRef(null);
@@ -54,6 +45,6 @@ const ColorPicker = ({ id, value = '#ffffff', onChange, onReset, sx }) => {
         onChange(rgba2Hexa(Object.assign(Object.assign({}, rest), { alpha })));
         setAnchorEl(null);
     }, [onChange, color]);
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker" }, { children: [_jsxs(Stack, Object.assign({ sx: sx, direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), _jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) })), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => setAnchorEl(null) }, { children: _jsxs(Stack, Object.assign({ ref: rootRef, bgcolor: "grey.400", borderRadius: "4px", p: "4px", pr: "12px", direction: "row", justifyContent: "space-between", spacing: 1, alignItems: "center", className: "color-picker", sx: sx }, { children: [_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center", className: "color-picker__controls-wrapper" }, { children: [_jsx(Box, { borderRadius: "5px", width: 32, height: 32, sx: { backgroundColor: value }, className: "color-picker__viewer" }), _jsxs(Box, Object.assign({ className: "color-picker__actions-wrapper" }, { children: [_jsx(Typography, Object.assign({ className: "color-picker__label", fontWeight: 500, fontSize: 9, color: "text.primary", textTransform: "uppercase" }, { children: value })), _jsx(Typography, Object.assign({ className: "color-picker__edit-btn", role: "button", onClick: handleOpen, htmlFor: id, fontWeight: 500, fontSize: 9, color: "info.dark", component: "label", sx: { textDecoration: 'underline', cursor: 'pointer' } }, { children: "Edit" }))] }))] })), !(options === null || options === void 0 ? void 0 : options.hideReset) ? (_jsx(StyledCloseButtonWrapper, Object.assign({ className: "color-picker__close-btn", type: "button", onClick: onReset }, { children: _jsx(Box, { component: "img", src: closeXIcon, width: 10, height: 10 }) }))) : (_jsx("div", {})), _jsx(Popper, Object.assign({ anchorEl: anchorEl, open: !!anchorEl, placement: "top" }, { children: _jsxs(StyledColorWidgetWrapper, Object.assign({ className: "color-picker__widget" }, { children: [_jsx(RgbaColorPicker, { color: color, onChange: setColor }), _jsx(Divider, { sx: { my: '12px' } }), _jsxs(Footer, Object.assign({ className: "color-picker__widget-actions" }, { children: [_jsx(CancelButton, Object.assign({ className: "color-picker__widget-actions__cancel", onClick: handleCancel }, { children: t('cancel') })), _jsx(ConfirmButton, Object.assign({ className: "color-picker__widget-actions__confirm", onClick: handleConfirm }, { children: t('okay') }))] }))] })) }))] })) })));
 };
 export default ColorPicker;

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

@@ -1,5 +1,5 @@
 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';
@@ -37,30 +37,51 @@ function SheetViewVirtualTable({ columns, rows, threshold = SHEET_VIEW_TABLE_THR
     const onPointerDown = (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]);
+    console.log({ selectedCell, selectedColumn, selectedRow, selectedChip });
+    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,7 +7,9 @@ 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", sx: {
@@ -16,4 +18,24 @@ function MainTable({ hasPinnedStart, hasPinnedEnd, unpinnedColumnsData, showHead
                                 overflow: 'hidden',
                             } }, { 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';
@@ -7,10 +7,15 @@ import SheetViewTableHeader from './SheetViewTableHeader';
 import SheetViewTableLoading from './SheetViewTableLoading';
 function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList, showHeader, columnsSorting, onColumnSort, headerProps, showBackDrop, onColumnPin, isPinnable, lastColumnId, selectedColumn, onColumnClick, hasPinnedStart, hasPinnedEnd, tableTitle, areAllRowsLoaded, isFetchingNextPage, scrollToIndex, isLoading, isError, hasTimeoutError, tableMode, showNoDataView, tableLoading, createVirtualTableContainer, }) {
     const theme = useTheme();
+    const { Wrapper, containerKey } = useMemo(() => {
+        const key = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
+        return {
+            Wrapper: position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper,
+            containerKey: key,
+        };
+    }, [position]);
     if (columnsData.length === 0)
         return null;
-    const Wrapper = position === 'start' ? PinnedStartColumnWrapper : PinnedEndColumnWrapper;
-    const containerKey = position === 'start' ? 'pinnedStart' : 'pinnedEnd';
     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',
@@ -21,4 +26,22 @@ function PinnedColumn({ position, columnsData, columnsWidth, pinnedColumnsList,
                             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);
+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/optimization/AnimationOptimizations.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const useAnimationOptimization: (isAnimating: boolean) => ((callback: () => void) => void) | null;
+export declare const OptimizedAnimatedCell: import("react").MemoExoticComponent<({ children, ...props }: {
+    [key: string]: unknown;
+    children: React.ReactNode;
+}) => 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;

package/build/components/VirtualTables/optimization/AnimationOptimizations.js

@@ -0,0 +1,86 @@
+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 { memo, useMemo, useRef, useEffect } from 'react';
+const optimizedCellStyles = {
+    willChange: 'transform, opacity',
+    transform: 'translateZ(0)',
+    contain: 'layout style paint',
+};
+export const useAnimationOptimization = (isAnimating) => {
+    const animationFrameRef = useRef();
+    const throttledUpdate = useMemo(() => {
+        if (!isAnimating)
+            return null;
+        return (callback) => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            animationFrameRef.current = requestAnimationFrame(callback);
+        };
+    }, [isAnimating]);
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+    return throttledUpdate;
+};
+export const OptimizedAnimatedCell = memo((_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx("div", Object.assign({ style: optimizedCellStyles }, props, { children: children })));
+}, (prevProps, nextProps) => {
+    return prevProps.isAnimating === nextProps.isAnimating && prevProps.children === nextProps.children;
+});
+export const animationStyles = {
+    slideIn: {
+        transform: 'translateX(0)',
+        transition: 'transform 0.2s ease-out',
+    },
+    slideOut: {
+        transform: 'translateX(-100%)',
+        transition: 'transform 0.2s ease-out',
+    },
+    fadeIn: {
+        opacity: 1,
+        transition: 'opacity 0.15s ease-out',
+    },
+    fadeOut: {
+        opacity: 0,
+        transition: 'opacity 0.15s ease-out',
+    },
+};
+export const useScrollOptimization = () => {
+    const isScrolling = useRef(false);
+    const scrollTimeoutRef = useRef();
+    useEffect(() => {
+        const handleScroll = () => {
+            isScrolling.current = true;
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+            scrollTimeoutRef.current = setTimeout(() => {
+                isScrolling.current = false;
+            }, 150);
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            if (scrollTimeoutRef.current) {
+                clearTimeout(scrollTimeoutRef.current);
+            }
+        };
+    }, []);
+    return isScrolling.current;
+};

package/build/utils/color.d.ts

@@ -1,2 +1,13 @@
+import { ColorObject } from 'color';
 export declare function getRandomColor(): string;
 export declare function getRandomGradientColor(): string;
+export declare const hexa2Rgba: (value: string) => {
+    value: {
+        r: number;
+        g: number;
+        b: number;
+        alpha: number;
+    };
+    stringified: string;
+};
+export declare const rgba2Hexa: (value: ColorObject) => string;

package/build/utils/color.js

@@ -1,3 +1,4 @@
+import Color from 'color';
 export function getRandomColor() {
     const colors = [
         '#D6D6D6',
@@ -36,3 +37,12 @@ export function getRandomGradientColor() {
     ];
     return colors[Math.trunc(Math.random() * colors.length)];
 }
+export const hexa2Rgba = (value) => {
+    const colorInstance = Color(value).rgb();
+    const { r, g, b, alpha = 1 } = colorInstance.object();
+    return {
+        value: { r, g, b, alpha },
+        stringified: `rgba(${r},${g},${b},${alpha})`,
+    };
+};
+export const rgba2Hexa = (value) => Color(value).hexa();

package/package.json

@@ -1,139 +1,143 @@
-{
-  "name": "@tap-payments/os-micro-frontend-shared",
-  "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.102",
-  "testVersion": 4,
-  "type": "module",
-  "main": "build/index.js",
-  "module": "build/index.js",
-  "types": "build/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./build/index.d.ts",
-      "import": "./build/index.js",
-      "require": "./build/index.js"
-    },
-    "./constants": {
-      "types": "./build/constants/index.d.ts",
-      "import": "./build/constants/index.js",
-      "require": "./build/constants/index.js"
-    },
-    "./components": {
-      "types": "./build/components/index.d.ts",
-      "import": "./build/components/index.js",
-      "require": "./build/components/index.js"
-    },
-    "./components/*": {
-      "types": "./build/components/*/index.d.ts",
-      "import": "./build/components/*/index.js",
-      "require": "./build/components/*/index.js"
-    },
-    "./hooks": {
-      "types": "./build/hooks/index.d.ts",
-      "import": "./build/hooks/index.js",
-      "require": "./build/hooks/index.js"
-    },
-    "./utils": {
-      "types": "./build/utils/index.d.ts",
-      "import": "./build/utils/index.js",
-      "require": "./build/utils/index.js"
-    },
-    "./theme": {
-      "types": "./build/theme/index.d.ts",
-      "import": "./build/theme/index.js",
-      "require": "./build/theme/index.js"
-    },
-    "./types": {
-      "types": "./build/types/index.d.ts",
-      "import": "./build/types/index.js",
-      "require": "./build/types/index.js"
-    }
-  },
-  "license": "MIT",
-  "author": {
-    "name": "Ahmed Sharkawy",
-    "email": "a.elsharkawy@tap.company"
-  },
-  "files": [
-    "build",
-    "readme.md"
-  ],
-  "scripts": {
-    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
-    "push:local": "yarn ts:build && yalc publish --push",
-    "push": "npm run ts:build && npm publish --access public",
-    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
-    "dev": "vite",
-    "build": "tsc -b && vite build ",
-    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
-    "lint": "eslint . --color",
-    "lint:fix": "eslint src --fix --color",
-    "preview": "vite preview",
-    "prepare": "husky"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
-    "@hookform/resolvers": "^3.3.1",
-    "@mui/material": "^5.12.3",
-    "@uiw/react-json-view": "^2.0.0-alpha.16",
-    "axios": "^1.4.0",
-    "color": "^5.0.0",
-    "dayjs": "^1.11.8",
-    "framer-motion": "10.11.0",
-    "i18next": "^22.4.15",
-    "memoize-one": "^6.0.0",
-    "re-resizable": "^6.9.9",
-    "react": "^18.2.0",
-    "react-colorful": "^5.6.1",
-    "react-currency-input-field": "^3.6.11",
-    "react-dom": "^18.2.0",
-    "react-draggable": "^4.4.6",
-    "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.45.4",
-    "react-hot-toast": "^2.4.1",
-    "react-i18next": "^12.2.2",
-    "react-lazy-load-image-component": "^1.6.3",
-    "react-multi-date-picker": "^4.1.2",
-    "react-router-dom": "^7.7.0",
-    "react-virtualized-auto-sizer": "^1.0.20",
-    "react-window": "^1.8.9",
-    "react-window-infinite-loader": "^1.0.9",
-    "react18-input-otp": "^1.1.4",
-    "recharts": "^2.15.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.17.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/lodash": "^4.17.15",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-lazy-load-image-component": "^1.6.4",
-    "@types/react-virtualized-auto-sizer": "^1.0.8",
-    "@types/react-window": "^1.8.5",
-    "@types/react-window-infinite-loader": "^1.0.6",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "globals": "^15.14.0",
-    "husky": "^8.0.3",
-    "lint-staged": "^13.2.2",
-    "prettier": "^2.8.8",
-    "tsc-alias": "^1.8.16",
-    "typescript": "5.0.2",
-    "typescript-eslint": "^8.18.2",
-    "vite": "6.0.5",
-    "vite-tsconfig-paths": "^4.2.0"
-  },
-  "lint-staged": {
-    "src/**/*.{ts,tsx,json,js,jsx}": [
-      "yarn run prettier:fix",
-      "yarn run lint"
-    ]
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  }
-}
+{
+  "name": "@tap-payments/os-micro-frontend-shared",
+  "description": "Shared components and utilities for Tap Payments micro frontends",
+  "version": "0.1.103-test.107",
+  "testVersion": 107,
+  "type": "module",
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js",
+      "require": "./build/index.js"
+    },
+    "./constants": {
+      "types": "./build/constants/index.d.ts",
+      "import": "./build/constants/index.js",
+      "require": "./build/constants/index.js"
+    },
+    "./components": {
+      "types": "./build/components/index.d.ts",
+      "import": "./build/components/index.js",
+      "require": "./build/components/index.js"
+    },
+    "./components/*": {
+      "types": "./build/components/*/index.d.ts",
+      "import": "./build/components/*/index.js",
+      "require": "./build/components/*/index.js"
+    },
+    "./hooks": {
+      "types": "./build/hooks/index.d.ts",
+      "import": "./build/hooks/index.js",
+      "require": "./build/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./build/utils/index.d.ts",
+      "import": "./build/utils/index.js",
+      "require": "./build/utils/index.js"
+    },
+    "./theme": {
+      "types": "./build/theme/index.d.ts",
+      "import": "./build/theme/index.js",
+      "require": "./build/theme/index.js"
+    },
+    "./types": {
+      "types": "./build/types/index.d.ts",
+      "import": "./build/types/index.js",
+      "require": "./build/types/index.js"
+    }
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Ahmed Sharkawy",
+    "email": "a.elsharkawy@tap.company"
+  },
+  "files": [
+    "build",
+    "readme.md"
+  ],
+  "scripts": {
+    "ts:build": "rm -rf build && tsc -p tsconfig.npm.json && tsc-alias -p tsconfig.npm.json",
+    "push:local": "yarn ts:build && yalc publish --push",
+    "push": "npm run ts:build && npm publish --access public",
+    "push:test": "node scripts/increment-test-version.cjs && npm run ts:build && npm publish --access public --tag test && node scripts/restore-version.cjs",
+    "dev": "vite",
+    "build": "tsc -b && vite build ",
+    "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"",
+    "lint": "eslint . --color",
+    "lint:fix": "eslint src --fix --color",
+    "preview": "vite preview",
+    "prepare": "husky"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.1",
+    "@mui/material": "^5.12.3",
+    "@uiw/react-json-view": "^2.0.0-alpha.16",
+    "axios": "^1.4.0",
+    "color": "^5.0.0",
+    "dayjs": "^1.11.8",
+    "framer-motion": "10.11.0",
+    "i18next": "^22.4.15",
+    "memoize-one": "^6.0.0",
+    "re-resizable": "^6.9.9",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-currency-input-field": "^3.6.11",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.45.4",
+    "react-hot-toast": "^2.4.1",
+    "react-i18next": "^12.2.2",
+    "react-lazy-load-image-component": "^1.6.3",
+    "react-multi-date-picker": "^4.1.2",
+    "react-router-dom": "^7.7.0",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
+    "react18-input-otp": "^1.1.4",
+    "recharts": "^2.15.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/lodash": "^4.17.15",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-lazy-load-image-component": "^1.6.4",
+    "@types/react-virtualized-auto-sizer": "^1.0.8",
+    "@types/react-window": "^1.8.5",
+    "@types/react-window-infinite-loader": "^1.0.6",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.1.6",
+    "prettier": "^2.8.8",
+    "tsc-alias": "^1.8.16",
+    "typescript": "5.0.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^7.1.4",
+    "vite-tsconfig-paths": "^4.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,json,js,jsx}": [
+      "yarn run prettier:fix",
+      "yarn run lint"
+    ]
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  }
+}