@razorpay/blade 12.14.0 → 12.15.1

package/build/lib/web/production/components/Table/commonStyles/tableBodyStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableBodyStyles.js","sources":["../../../../../../../src/components/Table/commonStyles/tableBodyStyles.tsx"],"sourcesContent":["import { tableRow } from '../tokens';\nimport { getTableActionsHoverStyles } from '../utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport type { BoxProps } from '~components/Box';\n\nconst getRowWrapperSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => {\n  return isVirtualized ? 'tbody div' : '&';\n};\n\nconst addTableRowSelectorIFVirtualized = ({\n  isVirtualized,\n}: {\n  isVirtualized?: boolean;\n}): string => {\n  return isVirtualized ? 'tr' : '';\n};\n\nconst getTableBodyStyles = ({\n  isVirtualized,\n  addCommonStyles,\n  theme,\n  height,\n  width,\n  isSelectable,\n  showStripedRows,\n}: {\n  isVirtualized?: boolean;\n  addCommonStyles?: boolean;\n  theme: Theme;\n  height?: BoxProps['height'];\n  width?: BoxProps['width'];\n  isSelectable?: boolean;\n  showStripedRows?: boolean;\n}): Record<string, unknown> => {\n  const shouldAddCommonStyle = isVirtualized ?? addCommonStyles;\n  return {\n    ...(isVirtualized && {\n      '& > div ': {\n        overflow: 'auto !important',\n        height: `${height} !important`,\n        width: `${width} !important`,\n      },\n      // and remove scroll from the main table element\n      '&': {\n        overflow: 'hidden !important',\n      },\n      // for virtualized table, we need to apply some styles to tbody\n      'tbody > div': {\n        display: 'block !important',\n      },\n      'tbody  div  tr': {\n        display: 'grid',\n        gridTemplateColumns: 'var(--data-table-library_grid-template-columns)',\n        columnGap: '0',\n      },\n      'tbody div tr:last-child .cell-wrapper': {\n        borderBottom: 'none',\n      },\n      'tbody div td': {\n        padding: '0',\n      },\n    }),\n    // these styles are common for both virtualized and non-virtualized tables\n    ...(shouldAddCommonStyle && {\n      [`${getRowWrapperSelector({\n        isVirtualized,\n      })} .row-select-single-selected .cell-wrapper-base, .row-select-selected .cell-wrapper-base`]: {\n        backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelected),\n      },\n      [`${getRowWrapperSelector({\n        isVirtualized,\n      })}  .row-select-single-selected:hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:hover:not(.disabled-row) .cell-wrapper-base`]: {\n        backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedHover),\n        ...getTableActionsHoverStyles({\n          hoverColor: tableRow.nonStripe.backgroundColorSelectedHover,\n          backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedHover,\n          theme,\n        }),\n      },\n      [`${getRowWrapperSelector({\n        isVirtualized,\n      })} .row-select-single-selected:focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:focus:not(.disabled-row) .cell-wrapper-base`]: {\n        backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedFocus),\n        ...getTableActionsHoverStyles({\n          hoverColor: tableRow.nonStripe.backgroundColorSelectedFocus,\n          backgroundGradientColor: tableRow.nonStripeWrapper.backgroundColorSelectedFocus,\n          theme,\n        }),\n      },\n      [`${getRowWrapperSelector({\n        isVirtualized,\n      })} .row-select-single-selected:active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:active:not(.disabled-row) .cell-wrapper-base`]: {\n        backgroundColor: getIn(theme.colors, tableRow.nonStripe.backgroundColorSelectedActive),\n        ...getTableActionsHoverStyles({\n          hoverColor: tableRow.nonStripe.backgroundColorSelectedActive,\n          backgroundGradientColor: tableRow.nonStripe.backgroundColorHover,\n          theme,\n        }),\n      },\n\n      ...(isSelectable && {\n        [`${getRowWrapperSelector({\n          isVirtualized,\n        })} tr:active:not(.disabled-row) .cell-wrapper`]: {\n          backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),\n        },\n      }),\n\n      ...(showStripedRows && {\n        [`${getRowWrapperSelector({\n          isVirtualized,\n        })}  tr:nth-child(even) .cell-wrapper`]: {\n          backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),\n        },\n        [`${getRowWrapperSelector({\n          isVirtualized,\n        })} tr:nth-child(even) .cell-wrapper-base`]: {\n          backgroundColor: tableRow.stripe.backgroundColor,\n        },\n      }),\n\n      ...(showStripedRows &&\n        isSelectable && {\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even) .cell-wrapper, .row-select-selected:nth-child(even) .cell-wrapper`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorSelected),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(\n              theme.colors,\n              tableRow.stripeWrapper.backgroundColorSelectedHover,\n            ),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(\n              theme.colors,\n              tableRow.stripeWrapper.backgroundColorSelectedFocus,\n            ),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: {\n            backgroundColor: getIn(\n              theme.colors,\n              tableRow.stripeWrapper.backgroundColorSelectedActive,\n            ),\n          },\n\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorHover,\n              theme,\n              backgroundGradientColor: tableRow.stripeWrapper.backgroundColorHover,\n            }),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorFocus,\n              theme,\n              backgroundGradientColor: tableRow.stripeWrapper.backgroundColorFocus,\n            }),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorActive,\n              backgroundGradientColor: tableRow.stripe.backgroundColorHover,\n              theme,\n            }),\n          },\n\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })}  ${addTableRowSelectorIFVirtualized({\n            isVirtualized,\n          })}.row-select-single-selected:nth-child(even) .cell-wrapper-base, .row-select-selected:nth-child(even) .cell-wrapper-base `]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelected),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorSelected,\n              theme,\n              backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelected,\n            }),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })}  ${addTableRowSelectorIFVirtualized({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base `]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedHover),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorSelectedHover,\n              theme,\n              backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedHover,\n            }),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })}  ${addTableRowSelectorIFVirtualized({\n            isVirtualized,\n          })} .row-select-single-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base `]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedFocus),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorSelectedFocus,\n              theme,\n              backgroundGradientColor: tableRow.stripeWrapper.backgroundColorSelectedFocus,\n            }),\n          },\n          [`${getRowWrapperSelector({\n            isVirtualized,\n          })}  ${addTableRowSelectorIFVirtualized({\n            isVirtualized,\n          })}.row-select-single-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base, .row-select-selected:nth-child(even):active:not(.disabled-row) .cell-wrapper-base `]: {\n            backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorSelectedActive),\n            ...getTableActionsHoverStyles({\n              hoverColor: tableRow.stripe.backgroundColorSelectedActive,\n              theme,\n              backgroundGradientColor: tableRow.stripe.backgroundColorHover,\n            }),\n          },\n        }),\n    }),\n  };\n};\nexport { getTableBodyStyles };\n"],"names":["getRowWrapperSelector","_ref","isVirtualized","addTableRowSelectorIFVirtualized","_ref2","getTableBodyStyles","_ref3","_ref6","addCommonStyles","theme","height","width","isSelectable","showStripedRows","shouldAddCommonStyle","_objectSpread","overflow","concat","display","gridTemplateColumns","columnGap","borderBottom","padding","_defineProperty","backgroundColor","getIn","colors","tableRow","nonStripe","backgroundColorSelected","backgroundColorSelectedHover","getTableActionsHoverStyles","hoverColor","backgroundGradientColor","nonStripeWrapper","backgroundColorSelectedFocus","backgroundColorSelectedActive","backgroundColorHover","backgroundColorActive","stripeWrapper","stripe","backgroundColorFocus"],"mappings":"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"}

package/build/lib/web/production/components/Table/componentIds.js

@@ -12,6 +12,7 @@ var ComponentIds = {
   TableFooter: 'TableFooter',
   TableFooterRow: 'TableFooterRow',
   TableFooterCell: 'TableFooterCell',
+  VirtualizedTable: 'VirtualizedTable',
   TablePagination: 'TablePagination'
 };
 

package/build/lib/web/production/components/Table/componentIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"componentIds.js","sources":["../../../../../../src/components/Table/componentIds.ts"],"sourcesContent":["const ComponentIds = {\n  Table: 'Table',\n  TableBody: 'TableBody',\n  TableRow: 'TableRow',\n  TableCell: 'TableCell',\n  TableEditableCell: 'TableEditableCell',\n  TableToolbar: 'TableToolbar',\n  TableToolbarActions: 'TableToolbarActions',\n  TableHeader: 'TableHeader',\n  TableHeaderRow: 'TableHeaderRow',\n  TableHeaderCell: 'TableHeaderCell',\n  TableFooter: 'TableFooter',\n  TableFooterRow: 'TableFooterRow',\n  TableFooterCell: 'TableFooterCell',\n  TablePagination: 'TablePagination',\n};\n\nexport { ComponentIds };\n"],"names":["ComponentIds","Table","TableBody","TableRow","TableCell","TableEditableCell","TableToolbar","TableToolbarActions","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","TablePagination"],"mappings":"AAAA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,eAAe,EAAE,iBAAA;AACnB;;;;"}
+{"version":3,"file":"componentIds.js","sources":["../../../../../../src/components/Table/componentIds.ts"],"sourcesContent":["const ComponentIds = {\n  Table: 'Table',\n  TableBody: 'TableBody',\n  TableRow: 'TableRow',\n  TableCell: 'TableCell',\n  TableEditableCell: 'TableEditableCell',\n  TableToolbar: 'TableToolbar',\n  TableToolbarActions: 'TableToolbarActions',\n  TableHeader: 'TableHeader',\n  TableHeaderRow: 'TableHeaderRow',\n  TableHeaderCell: 'TableHeaderCell',\n  TableFooter: 'TableFooter',\n  TableFooterRow: 'TableFooterRow',\n  TableFooterCell: 'TableFooterCell',\n  VirtualizedTable: 'VirtualizedTable',\n  TablePagination: 'TablePagination',\n};\n\nexport { ComponentIds };\n"],"names":["ComponentIds","Table","TableBody","TableRow","TableCell","TableEditableCell","TableToolbar","TableToolbarActions","TableHeader","TableHeaderRow","TableHeaderCell","TableFooter","TableFooterRow","TableFooterCell","VirtualizedTable","TablePagination"],"mappings":"AAAA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,SAAS,EAAE,WAAW;AACtBC,EAAAA,iBAAiB,EAAE,mBAAmB;AACtCC,EAAAA,YAAY,EAAE,cAAc;AAC5BC,EAAAA,mBAAmB,EAAE,qBAAqB;AAC1CC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,WAAW,EAAE,aAAa;AAC1BC,EAAAA,cAAc,EAAE,gBAAgB;AAChCC,EAAAA,eAAe,EAAE,iBAAiB;AAClCC,EAAAA,gBAAgB,EAAE,kBAAkB;AACpCC,EAAAA,eAAe,EAAE,iBAAA;AACnB;;;;"}

package/build/lib/web/production/components/Table/utils.js

@@ -0,0 +1,29 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { tableRow, classes, tableBackgroundColor } from './tokens.js';
+import '../../utils/index.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+
+var getTableRowBackgroundTransition = function getTableRowBackgroundTransition(theme) {
+  var rowBackgroundTransition = "background-color ".concat(makeMotionTime(getIn(theme.motion, tableRow.backgroundColorMotionDuration)), " ").concat(getIn(theme.motion, tableRow.backgroundColorMotionEasing));
+  return rowBackgroundTransition;
+};
+var getTableActionsHoverStyles = function getTableActionsHoverStyles(_ref) {
+  var hoverColor = _ref.hoverColor,
+    theme = _ref.theme,
+    backgroundGradientColor = _ref.backgroundGradientColor;
+  var rowBackgroundTransition = getTableRowBackgroundTransition(theme);
+  return _defineProperty(_defineProperty(_defineProperty({}, "& .".concat(classes.HOVER_ACTIONS), {
+    backgroundColor: getIn(theme.colors, tableBackgroundColor),
+    transition: rowBackgroundTransition
+  }), "& .".concat(classes.HOVER_ACTIONS_LAYER2), {
+    backgroundColor: getIn(theme.colors, backgroundGradientColor !== null && backgroundGradientColor !== void 0 ? backgroundGradientColor : 'transparent'),
+    transition: rowBackgroundTransition
+  }), "& .".concat(classes.HOVER_ACTIONS_LAYER3), {
+    backgroundColor: getIn(theme.colors, hoverColor),
+    transition: rowBackgroundTransition
+  });
+};
+
+export { getTableActionsHoverStyles, getTableRowBackgroundTransition };
+//# sourceMappingURL=utils.js.map

package/build/lib/web/production/components/Table/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/Table/utils.ts"],"sourcesContent":["import { classes, tableRow, tableBackgroundColor } from './tokens';\nimport type { Theme } from '~components/BladeProvider';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\n\nimport { makeMotionTime } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\n\nconst getTableRowBackgroundTransition = (theme: Theme): string => {\n  const rowBackgroundTransition = `background-color ${makeMotionTime(\n    getIn(theme.motion, tableRow.backgroundColorMotionDuration),\n  )} ${getIn(theme.motion, tableRow.backgroundColorMotionEasing)}`;\n\n  return rowBackgroundTransition;\n};\n\nconst getTableActionsHoverStyles = ({\n  hoverColor,\n  theme,\n  backgroundGradientColor,\n}: {\n  hoverColor: DotNotationToken<Theme['colors']>;\n  backgroundGradientColor?: DotNotationToken<Omit<Theme['colors'], 'name'>>;\n  theme: Theme;\n}): React.CSSProperties => {\n  const rowBackgroundTransition = getTableRowBackgroundTransition(theme);\n\n  return {\n    // Solid layer 1 background - should match the table background\n    [`& .${classes.HOVER_ACTIONS}`]: {\n      backgroundColor: getIn(theme.colors, tableBackgroundColor),\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 2 background - Stripped row background, Hover background in selected state, etc\n    [`& .${classes.HOVER_ACTIONS_LAYER2}`]: {\n      backgroundColor: getIn(theme.colors, backgroundGradientColor ?? 'transparent'),\n      transition: rowBackgroundTransition,\n    },\n    // Alpha layer 3 background - Hover, selection, active background\n    [`& .${classes.HOVER_ACTIONS_LAYER3}`]: {\n      backgroundColor: getIn(theme.colors, hoverColor),\n      transition: rowBackgroundTransition,\n    },\n  };\n};\n\nexport { getTableActionsHoverStyles, getTableRowBackgroundTransition };\n"],"names":["getTableRowBackgroundTransition","theme","rowBackgroundTransition","concat","makeMotionTime","getIn","motion","tableRow","backgroundColorMotionDuration","backgroundColorMotionEasing","getTableActionsHoverStyles","_ref","hoverColor","backgroundGradientColor","_defineProperty","classes","HOVER_ACTIONS","backgroundColor","colors","tableBackgroundColor","transition","HOVER_ACTIONS_LAYER2","HOVER_ACTIONS_LAYER3"],"mappings":";;;;;;AAOA,IAAMA,+BAA+B,GAAG,SAAlCA,+BAA+BA,CAAIC,KAAY,EAAa;AAChE,EAAA,IAAMC,uBAAuB,GAAA,mBAAA,CAAAC,MAAA,CAAuBC,cAAc,CAChEC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACC,6BAA6B,CAC5D,CAAC,EAAAL,GAAAA,CAAAA,CAAAA,MAAA,CAAIE,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,QAAQ,CAACE,2BAA2B,CAAC,CAAE,CAAA;AAEhE,EAAA,OAAOP,uBAAuB,CAAA;AAChC,EAAC;AAED,IAAMQ,0BAA0B,GAAG,SAA7BA,0BAA0BA,CAAAC,IAAA,EAQL;AAAA,EAAA,IAPzBC,UAAU,GAAAD,IAAA,CAAVC,UAAU;IACVX,KAAK,GAAAU,IAAA,CAALV,KAAK;IACLY,uBAAuB,GAAAF,IAAA,CAAvBE,uBAAuB,CAAA;AAMvB,EAAA,IAAMX,uBAAuB,GAAGF,+BAA+B,CAACC,KAAK,CAAC,CAAA;EAEtE,OAAAa,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAX,EAAAA,EAAAA,KAAAA,CAAAA,MAAA,CAESY,OAAO,CAACC,aAAa,CAAK,EAAA;IAC/BC,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEC,oBAAoB,CAAC;AAC1DC,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACM,oBAAoB,CAAK,EAAA;AACtCJ,IAAAA,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEL,uBAAuB,KAAA,IAAA,IAAvBA,uBAAuB,KAAA,KAAA,CAAA,GAAvBA,uBAAuB,GAAI,aAAa,CAAC;AAC9EO,IAAAA,UAAU,EAAElB,uBAAAA;AACd,GAAC,SAAAC,MAAA,CAEMY,OAAO,CAACO,oBAAoB,CAAK,EAAA;IACtCL,eAAe,EAAEZ,KAAK,CAACJ,KAAK,CAACiB,MAAM,EAAEN,UAAU,CAAC;AAChDQ,IAAAA,UAAU,EAAElB,uBAAAA;GACb,CAAA,CAAA;AAEL;;;;"}

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

@@ -23935,7 +23935,7 @@ type TableProps<Item> = {
     defaultSelectedIds?: Identifier[];
 } & DataAnalyticsAttribute & StyledPropsBlade;
 type Identifier = string | number;
-type TableBodyProps = {
+type TableBodyProps<Item> = {
     /**
      * The children of the TableBody component should be TableRow components.
      * @example
@@ -23944,8 +23944,17 @@ type TableBodyProps = {
      *     <TableCell>...</TableCell>
      *   </TableRow>
      * </TableBody>
+     * if you are using TableBody inside TableVirtualizedWrapper then you can pass the children as a function
+     * @example
+     * <TableBody>
+     *  {(tableItem, index) => (
+     *   <TableRow key={index} item={tableItem}>
+     *    <TableCell>...</TableCell>
+     *   </TableRow>
+     *   )}
+     * </TableBody>
      **/
-    children: React__default.ReactNode;
+    children: React__default.ReactNode | ((tableItem: Item, index: number) => React__default.ReactElement);
 } & DataAnalyticsAttribute;
 type TableRowProps<Item> = {
     /**
@@ -24059,6 +24068,7 @@ type TablePaginationCommonProps = {
      * The default page size.
      * Page size controls how rows are shown per page.
      * @default 10
+     * consider using virtualization for large page sizes
      **/
     defaultPageSize?: 10 | 25 | 50;
     /**
@@ -24162,7 +24172,7 @@ declare const TableHeader: ({ children, ...rest }: TableHeaderRowProps) => React
 declare const TableHeaderCell: ({ children, headerKey, _hasPadding, textAlign, ...rest }: TableHeaderCellProps) => React__default.ReactElement;
 declare const TableHeaderRow: ({ children, rowDensity, ...rest }: TableHeaderRowProps) => React__default.ReactElement;
 
-declare const TableBody: ({ children, ...rest }: TableBodyProps) => React__default.ReactElement;
+declare const TableBody: <Item>({ children, ...rest }: TableBodyProps<Item>) => React__default.ReactElement;
 declare const TableCell: ({ children, textAlign, _hasPadding, ...rest }: TableCellProps) => React__default.ReactElement;
 declare const TableRow: <Item>({ children, item, isDisabled, onHover, onClick, hoverActions, testID, ...rest }: TableRowProps<Item>) => React__default.ReactElement;
 

package/build/types/components/index.native.d.ts

@@ -14683,7 +14683,7 @@ type TableProps<Item> = {
     defaultSelectedIds?: Identifier[];
 } & DataAnalyticsAttribute & StyledPropsBlade;
 type Identifier = string | number;
-type TableBodyProps = {
+type TableBodyProps<Item> = {
     /**
      * The children of the TableBody component should be TableRow components.
      * @example
@@ -14692,8 +14692,17 @@ type TableBodyProps = {
      *     <TableCell>...</TableCell>
      *   </TableRow>
      * </TableBody>
+     * if you are using TableBody inside TableVirtualizedWrapper then you can pass the children as a function
+     * @example
+     * <TableBody>
+     *  {(tableItem, index) => (
+     *   <TableRow key={index} item={tableItem}>
+     *    <TableCell>...</TableCell>
+     *   </TableRow>
+     *   )}
+     * </TableBody>
      **/
-    children: React__default.ReactNode;
+    children: React__default.ReactNode | ((tableItem: Item, index: number) => React__default.ReactElement);
 } & DataAnalyticsAttribute;
 type TableRowProps<Item> = {
     /**
@@ -14807,6 +14816,7 @@ type TablePaginationCommonProps = {
      * The default page size.
      * Page size controls how rows are shown per page.
      * @default 10
+     * consider using virtualization for large page sizes
      **/
     defaultPageSize?: 10 | 25 | 50;
     /**
@@ -14910,7 +14920,7 @@ declare const TableHeader: (props: TableHeaderProps) => React__default.ReactElem
 declare const TableHeaderRow: (props: TableHeaderRowProps) => React__default.ReactElement;
 declare const TableHeaderCell: (props: TableHeaderCellProps) => React__default.ReactElement;
 
-declare const TableBody: (props: TableBodyProps) => React__default.ReactElement;
+declare const TableBody: <Item>(props: TableBodyProps<Item>) => React__default.ReactElement;
 declare const TableRow: (props: TableRowProps<unknown>) => React__default.ReactElement;
 declare const TableCell: (props: TableCellProps) => React__default.ReactElement;
 

package/codemods/aicodemod/knowledge/Table.md

@@ -594,3 +594,129 @@ const TableComponent: StoryFn<typeof Table> = ({ ...args }) => {
   );
 };
 ```
+
+# Virtualized Table
+
+Virtaulized table is a table component that renders only the visible rows and columns. This is useful when you have a large dataset and you want to render only the visible rows and columns to improve the performance of the table.
+
+Out implementation of virtualized table is an wrapper on top of react-table-library 's implementation. It provides a simple API to create a virtualized table.
+
+## Props
+
+most of props are same as Table component. we have added following table component.
+
+
+but their is a change in children prop of Table component. In virtualized table we need to pass a component named TableVirtulized that takes TableHeader, TableBody components.
+VirtualizedTable is a wrapper on top of react-table-library's [Virtualized](https://github.com/table-library/react-table-library/blob/master/src/virtualized/Virtualized.tsx) component. It provides a simple API to create a virtualized table.
+
+```ts
+type VirtualizedWrapperProps<Item> = {
+  /**
+   * * @example
+   *   <TableComponent
+   *      data={data}
+   *      isVirtualized
+   *      rowDensity="compact"
+   *      selectionType="multiple"
+   *      height="700px"
+   *      toolbar={
+   *        <TableToolbar>
+   *          <TableToolbarActions>
+   *            <Button variant="secondary" marginRight="spacing.2">
+   *              Export
+   *            </Button>
+   *            <Button>Payout</Button>
+   *          </TableToolbarActions>
+   *        </TableToolbar>
+   *      }
+   *    >
+   *      {(tableData) => (
+   *        <TableVirtualizedWrapper tableData={tableData}>
+   *          <TableHeader>
+   *            <TableHeaderRow>
+   *              <TableHeaderCell>ID</TableHeaderCell>
+   *              <TableHeaderCell>Amount</TableHeaderCell>
+   *              <TableHeaderCell>Account</TableHeaderCell>
+   *              <TableHeaderCell>Date</TableHeaderCell>
+   *              <TableHeaderCell>Method</TableHeaderCell>
+   *              <TableHeaderCell>Status</TableHeaderCell>
+   *            </TableHeaderRow>
+   *          </TableHeader>
+   *          <TableBody<Item>>
+   *            {(tableItem, index) => (
+   *              <TableRow
+   *                key={index}
+   *                item={tableItem}
+   *                hoverActions={
+   *                  <>
+   *                    <IconButton
+   *                      accessibilityLabel="Copy"
+   *                      isHighlighted
+   *                      icon={CopyIcon}
+   *                      onClick={() => console.log('copy', tableItem)}
+   *                    />
+   *                    <IconButton
+   *                      accessibilityLabel="Delete"
+   *                      isHighlighted
+   *                      icon={TrashIcon}
+   *                      onClick={() => console.log('delete', tableItem)}
+   *                    />
+   *                  </>
+   *                }
+   *              >
+   *                <TableCell>
+   *                  <Code size="medium">{tableItem.paymentId}</Code>
+   *                </TableCell>
+   *                <TableCell>
+   *                  <Amount value={tableItem.amount} />
+   *                </TableCell>
+   *                <TableCell>{tableItem.account}</TableCell>
+   *                <TableCell>
+   *                  {tableItem.date?.toLocaleDateString('en-IN', {
+   *                    year: 'numeric',
+   *                    month: '2-digit',
+   *                    day: '2-digit',
+   *                  })}
+   *                </TableCell>
+   *                <TableCell>{tableItem.method}</TableCell>
+   *                <TableCell>
+   *                  <Badge
+   *                    size="medium"
+   *                    color={
+   *                      tableItem.status === 'Completed'
+   *                        ? 'positive'
+   *                        : tableItem.status === 'Pending'
+   *                        ? 'notice'
+   *                        : tableItem.status === 'Failed'
+   *                        ? 'negative'
+   *                        : 'default'
+   *                    }
+   *                  >
+   *                    {tableItem.status}
+   *                  </Badge>
+   *                </TableCell>
+   *              </TableRow>
+   *            )}
+   *          </TableBody>
+   *        </TableVirtualizedWrapper>
+   *      )}
+   *    </TableComponent>
+   *
+   **/
+  /**
+   /**
+   * The tableData prop is an array of objects.
+   */
+  tableData: TableNode<Item>[];
+  /**
+   * headerHeight is the height of the header
+   **/
+  headerHeight?: number;
+  /**
+   * rowHeight is the height of each row, it can be a fixed number or a function that returns a number
+   **/
+  rowHeight?: (item: TableLibraryTableNode, index: number) => number;
+  children: React.ReactNode;
+  children: React.ReactNode;
+};
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.14.0",
+  "version": "12.15.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"