chore: cleanup

razorpay · Jan 24, 2025 · 0e3a352 · 0e3a352
1 parent 44c03ec
commit 0e3a352
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 40 deletions.
diff --git a/packages/blade/src/components/Table/Table.web.tsx b/packages/blade/src/components/Table/Table.web.tsx
@@ -598,7 +598,7 @@ const _Table = <Item,>(
           {toolbar}
           <StyledReactTable
             role={isVirtualized ? 'grid' : 'table'}
-            layout={{ fixedHeader: true, horizontalScroll: true, isDiv: true }}
+            layout={{ fixedHeader: true, horizontalScroll: true }}
             data={data}
             // @ts-expect-error ignore this, theme clashes with styled-component's theme. We're using useTheme from blade to get actual theme
             theme={tableTheme}

diff --git a/packages/blade/src/components/Table/TableBody.web.tsx b/packages/blade/src/components/Table/TableBody.web.tsx
@@ -218,13 +218,13 @@ const StyledRow = styled(Row)<{
             borderRightColor: getIn(theme.colors, tableRow.borderColor),
           }
         : undefined,
-      [`& ${getTableDataSelector({ isVirtualized: $isVirtualized })}:last-child .cell-wrapper`]: {
+      [`& td:last-child .cell-wrapper`]: {
         borderRight: 'none',
       },
       ...(hasHoverActions
         ? {
             [`@media ${getMediaQuery({ min: theme.breakpoints.m })}`]: {
-              [`& ${getTableDataSelector({ isVirtualized: $isVirtualized })}:last-child`]: {
+              [`& td:last-child`]: {
                 opacity: 0,
                 position: 'sticky',
                 zIndex: 2,
@@ -234,16 +234,14 @@ const StyledRow = styled(Row)<{
                   overflow: 'visible',
                 },
               },
-              [`& ${getTableDataSelector({
-                isVirtualized: $isVirtualized,
-              })}:last-child:focus-within`]: {
+              [`& td:last-child:focus-within`]: {
                 opacity: 1,
                 ...getTableActionsHoverStyles({
                   theme,
                   hoverColor: tableRow.nonStripe.backgroundColor,
                 }),
               },
-              [`&:hover ${getTableDataSelector({ isVirtualized: $isVirtualized })}:last-child`]: {
+              [`&:hover td:last-child`]: {
                 opacity: 1,
               },
             },

diff --git a/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx b/packages/blade/src/components/Table/commonStyles/tableBodyStyles.tsx
@@ -1,5 +1,5 @@
 import { tableRow } from '../tokens';
-import { getTableActionsHoverStyles, getTableRowSelector } from '../utils';
+import { getTableActionsHoverStyles } from '../utils';
 import getIn from '~utils/lodashButBetter/get';
 import type { Theme } from '~components/BladeProvider';
 import type { BoxProps } from '~components/Box';
@@ -13,7 +13,7 @@ const addTableRowSelectorIFVirtualized = ({
 }: {
   isVirtualized?: boolean;
 }): string => {
-  return isVirtualized ? '.tr' : '';
+  return isVirtualized ? 'tr' : '';
 };
 
 const getTableBodyStyles = ({
@@ -49,12 +49,12 @@ const getTableBodyStyles = ({
       '.tbody > div': {
         display: 'block !important',
       },
-      '.tbody  div  .tr': {
+      '.tbody  div  tr': {
         display: 'grid',
         gridTemplateColumns: 'var(--data-table-library_grid-template-columns)',
         columnGap: '0',
       },
-      '.tbody div .tr:last-child .cell-wrapper': {
+      '.tbody div tr:last-child .cell-wrapper': {
         borderBottom: 'none',
       },
       '.tbody div td': {
@@ -102,26 +102,20 @@ const getTableBodyStyles = ({
       ...(isSelectable && {
         [`${getRowWrapperSelector({
           isVirtualized,
-        })} ${getTableRowSelector({
-          isVirtualized,
-        })}:active:not(.disabled-row) .cell-wrapper`]: {
+        })} tr:active:not(.disabled-row) .cell-wrapper`]: {
           backgroundColor: getIn(theme.colors, tableRow.nonStripeWrapper.backgroundColorActive),
         },
       }),
 
       ...(showStripedRows && {
         [`${getRowWrapperSelector({
           isVirtualized,
-        })}  ${getTableRowSelector({
-          isVirtualized,
-        })}:nth-child(even) .cell-wrapper`]: {
+        })}  tr:nth-child(even) .cell-wrapper`]: {
           backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColor),
         },
         [`${getRowWrapperSelector({
           isVirtualized,
-        })} ${getTableRowSelector({
-          isVirtualized,
-        })}:nth-child(even) .cell-wrapper-base`]: {
+        })} tr:nth-child(even) .cell-wrapper-base`]: {
           backgroundColor: tableRow.stripe.backgroundColor,
         },
       }),
@@ -130,23 +124,17 @@ const getTableBodyStyles = ({
         isSelectable && {
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: {
+          })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorHover),
           },
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: {
+          })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorFocus),
           },
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: {
+          })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripeWrapper.backgroundColorActive),
           },
           [`${getRowWrapperSelector({
@@ -181,9 +169,7 @@ const getTableBodyStyles = ({
 
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: {
+          })} tr:nth-child(even):hover:not(.disabled-row) .cell-wrapper-base`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorHover),
             ...getTableActionsHoverStyles({
               hoverColor: tableRow.stripe.backgroundColorHover,
@@ -193,9 +179,7 @@ const getTableBodyStyles = ({
           },
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: {
+          })} tr:nth-child(even):focus:not(.disabled-row) .cell-wrapper-base`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorFocus),
             ...getTableActionsHoverStyles({
               hoverColor: tableRow.stripe.backgroundColorFocus,
@@ -205,9 +189,7 @@ const getTableBodyStyles = ({
           },
           [`${getRowWrapperSelector({
             isVirtualized,
-          })} ${getTableRowSelector({
-            isVirtualized,
-          })}:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: {
+          })} tr:nth-child(even):active:not(.disabled-row) .cell-wrapper-base`]: {
             backgroundColor: getIn(theme.colors, tableRow.stripe.backgroundColorActive),
             ...getTableActionsHoverStyles({
               hoverColor: tableRow.stripe.backgroundColorActive,

diff --git a/packages/blade/src/components/Table/utils.ts b/packages/blade/src/components/Table/utils.ts
@@ -44,11 +44,11 @@ const getTableActionsHoverStyles = ({
 };
 
 const getTableRowSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => {
-  return isVirtualized ? '.tr' : 'tr';
+  return isVirtualized ? 'tr' : 'tr';
 };
 
 const getTableDataSelector = ({ isVirtualized }: { isVirtualized?: boolean }): string => {
-  return isVirtualized ? '.td' : 'td';
+  return isVirtualized ? 'td' : 'td';
 };
 
 export {