@tap-payments/os-micro-frontend-shared 0.0.70 → 0.0.73-pin-icon-v1

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { GetSourceAnimationFunction } from './type';
 export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: import("./type").ChipVariant | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const FOOTER_HEIGHT = 37;
 export declare const TITLE_BAR_HEIGHT = "32px";
 export declare const VIEWER_HEIGHT = 545;

package/build/components/SearchButton/SearchButton.js

@@ -38,8 +38,10 @@ function SearchButton(_a) {
     };
     const onKeyDown = (event) => {
         if (event.key === 'Enter') {
-            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(event.currentTarget.value);
+            onSearchChange === null || onSearchChange === void 0 ? void 0 : onSearchChange(value);
         }
+    };
+    const onChange = (event) => {
         setValue(event.currentTarget.value);
     };
     return (_jsxs(Wrapper, { children: [_jsx(AnimatePresence, { children: isInputShown && (_jsxs(_Fragment, { children: [_jsx(StyledInput, { initial: {
@@ -50,6 +52,6 @@ function SearchButton(_a) {
                                 width: 30,
                                 border: `1px solid ${theme.palette.divider}`,
                                 boxShadow: 'none',
-                            }, placeholder: t('search') || '', onKeyDown: onKeyDown }), _jsx(Icon, { style: { right: 48 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: grayCloseIcon, alt: "close", onClick: onReset }), _jsx(Icon, { style: { right: 9 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: searchBlueIcon, alt: "search", onClick: onSubmit })] })) }), _jsx(StyledSearchButton, Object.assign({}, props, { variant: isInputShown ? 'active' : 'inActive', icon: "search", onClick: onSearchClick }))] }));
+                            }, placeholder: t('search') || '', onKeyDown: onKeyDown, onChange: onChange }), _jsx(Icon, { style: { right: 48 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: grayCloseIcon, alt: "close", onClick: onReset }), _jsx(Icon, { style: { right: 9 }, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, src: searchBlueIcon, alt: "search", onClick: onSubmit })] })) }), _jsx(StyledSearchButton, Object.assign({}, props, { variant: isInputShown ? 'active' : 'inActive', icon: "search", onClick: onSearchClick }))] }));
 }
 export default memo(SearchButton);

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;
@@ -555,9 +554,9 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const ActionsIconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     selected: boolean;
@@ -270,9 +269,9 @@ export declare const ActionIcon: import("@emotion/styled").StyledComponent<{
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const collapsedViewIconVariants: {
     default: {
         duration: number;
@@ -274,9 +273,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;
@@ -263,9 +262,9 @@ export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLImageElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
-    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     src?: string | undefined;
     alt?: string | undefined;
+    referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     useMap?: string | undefined;
     loading?: "eager" | "lazy" | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     id?: string | undefined;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Local" | "Global" | "Regional" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SheetViewVirtualTableExample: React.FC;
+export default SheetViewVirtualTableExample;

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

@@ -0,0 +1,138 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box } from '@mui/material';
+import SheetViewVirtualTable from './index';
+const sampleData = Array.from({ length: 1000 }, (_, index) => ({
+    id: `${index + 1}`,
+    name: `User ${index + 1}`,
+    email: `user${index + 1}@example.com`,
+    status: ['active', 'inactive', 'pending'][index % 3],
+    amount: Math.floor(Math.random() * 10000) / 100,
+    date: new Date(Date.now() - Math.random() * 10000000000).toLocaleDateString(),
+    country: ['USA', 'Canada', 'UK', 'Germany', 'France'][index % 5],
+    category: ['Premium', 'Basic', 'Enterprise'][index % 3],
+}));
+const SheetViewVirtualTableExample = () => {
+    const [pinnedColumns, setPinnedColumns] = useState(['id', 'name']);
+    const [columnsSorting, setColumnsSorting] = useState({});
+    const columns = useMemo(() => [
+        {
+            id: 'id',
+            header: 'ID',
+            width: '80px',
+            align: 'left',
+            sortable: true,
+            order: 1,
+            render: ({ value }) => _jsx("strong", { children: value }),
+        },
+        {
+            id: 'name',
+            header: 'Name',
+            width: '200px',
+            align: 'left',
+            sortable: true,
+            order: 2,
+            render: ({ value }) => _jsx("span", Object.assign({ style: { color: '#1976d2' } }, { children: value })),
+        },
+        {
+            id: 'email',
+            header: 'Email',
+            width: '250px',
+            align: 'left',
+            sortable: true,
+            order: 3,
+        },
+        {
+            id: 'status',
+            header: 'Status',
+            width: '120px',
+            align: 'center',
+            sortable: true,
+            order: 4,
+            render: ({ value }) => (_jsx(Box, Object.assign({ sx: {
+                    px: 1,
+                    py: 0.5,
+                    borderRadius: 1,
+                    fontSize: '0.75rem',
+                    fontWeight: 'medium',
+                    textTransform: 'uppercase',
+                    backgroundColor: value === 'active' ? '#e8f5e8' : value === 'pending' ? '#fff3cd' : '#f8d7da',
+                    color: value === 'active' ? '#2e7d32' : value === 'pending' ? '#856404' : '#721c24',
+                } }, { children: value }))),
+        },
+        {
+            id: 'amount',
+            header: 'Amount',
+            width: '120px',
+            align: 'right',
+            sortable: true,
+            order: 5,
+            format: ({ value }) => `$${value.toFixed(2)}`,
+        },
+        {
+            id: 'date',
+            header: 'Date',
+            width: '150px',
+            align: 'left',
+            sortable: true,
+            order: 6,
+        },
+        {
+            id: 'country',
+            header: 'Country',
+            width: '120px',
+            align: 'left',
+            sortable: true,
+            order: 7,
+        },
+        {
+            id: 'category',
+            header: 'Category',
+            width: '150px',
+            align: 'left',
+            sortable: true,
+            order: 8,
+            render: ({ value }) => (_jsx(Box, Object.assign({ sx: {
+                    px: 1,
+                    py: 0.5,
+                    borderRadius: 1,
+                    fontSize: '0.75rem',
+                    backgroundColor: '#f5f5f5',
+                    color: '#666',
+                } }, { children: value }))),
+        },
+    ], []);
+    const handleColumnPin = (columnId, isPinned) => {
+        console.log(`Column ${columnId} ${isPinned ? 'pinned' : 'unpinned'}`);
+        if (isPinned) {
+            setPinnedColumns((prev) => [...prev, columnId]);
+        }
+        else {
+            setPinnedColumns((prev) => prev.filter((id) => id !== columnId));
+        }
+    };
+    const handleColumnSort = (sorting) => {
+        setColumnsSorting(sorting);
+        console.log('Sorting changed:', sorting);
+    };
+    const handleRowClick = (row, index) => {
+        console.log('Row clicked:', { row, index });
+    };
+    return (_jsxs(Box, Object.assign({ sx: { height: '600px', width: '100%', p: 2 } }, { children: [_jsxs(Box, Object.assign({ sx: { mb: 2 } }, { children: [_jsx("h2", { children: "SheetViewVirtualTable Example" }), _jsx("p", { children: "This table demonstrates the pin functionality. Click the pin icon next to column headers to pin/unpin columns. Pinned columns will appear on the left side with a separator." }), _jsxs("p", { children: [_jsx("strong", { children: "Currently pinned columns:" }), " ", pinnedColumns.join(', ') || 'None'] })] })), _jsx(SheetViewVirtualTable, { columns: columns, rows: sampleData, showHeader: true, pinnable: true, pinnedColumns: pinnedColumns, onColumnPin: handleColumnPin, columnsSorting: columnsSorting, onColumnSort: handleColumnSort, rowProps: {
+                    onRowClick: handleRowClick,
+                }, footerProps: {
+                    totalCount: sampleData.length,
+                }, isLoading: false, error: null, triggerDataRefetch: () => __awaiter(void 0, void 0, void 0, function* () {
+                    console.log('Data refetch triggered');
+                }), showBackgroundColor: true, areAllRowsLoaded: true, tableMode: "sheet", tableTitle: "Example Sheet View Table" })] })));
+};
+export default SheetViewVirtualTableExample;

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { IVirtualTable } from '../../types/index.js';
+interface ISheetViewVirtualTable extends Omit<IVirtualTable, 'isSheetView'> {
+    pinnable?: boolean;
+    onColumnPin?: (columnId: string, isPinned: boolean) => void;
+    pinnedColumns?: string[];
+}
+declare function SheetViewVirtualTable({ columns, rows, threshold, showHeader, headerProps, rowProps, footerProps, rowHeight, isLoading, error, columnsSorting, onColumnSort, loadMoreItems, isFetchingNextPage, triggerDataRefetch, scrollToIndex, showBackgroundColor, areAllRowsLoaded, tableBodyStyles, tableMode, tableTitle, dragControls, pinnable, onColumnPin, pinnedColumns, }: Readonly<ISheetViewVirtualTable>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof SheetViewVirtualTable>;
+export default _default;