chore(deps): convert Worksheet to transient props

bigcommerce · Feb 6, 2024 · 40cd2e7 · 40cd2e7
1 parent fcd6ed4
commit 40cd2e7
Show file tree

Hide file tree

Showing 10 changed files with 359 additions and 349 deletions.
diff --git a/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Tree/__snapshots__/spec.tsx.snap
@@ -14,10 +14,10 @@ exports[`renders simple tree 1`] = `
     tabindex="-1"
   >
     <div
-      class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+      class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
     >
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 bqCSpX jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
       >
         <svg
           aria-hidden="true"
@@ -41,7 +41,7 @@ exports[`renders simple tree 1`] = `
         </svg>
       </div>
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
       >
         <svg
           aria-hidden="true"
@@ -81,10 +81,10 @@ exports[`renders simple tree 1`] = `
         tabindex="-1"
       >
         <div
-          class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+          class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
         >
           <div
-            class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
+            class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 bqCSpX jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
           >
             <svg
               aria-hidden="true"
@@ -108,7 +108,7 @@ exports[`renders simple tree 1`] = `
             </svg>
           </div>
           <div
-            class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+            class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
           >
             <svg
               aria-hidden="true"
@@ -148,13 +148,13 @@ exports[`renders simple tree 1`] = `
             tabindex="-1"
           >
             <div
-              class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+              class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
             >
               <div
                 class="styled__StyledGap-sc-1073t7q-5 dbKRYo"
               />
               <div
-                class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+                class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
               >
                 <svg
                   aria-hidden="true"
@@ -195,10 +195,10 @@ exports[`renders simple tree 1`] = `
     tabindex="-1"
   >
     <div
-      class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+      class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
     >
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 bqCSpX jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
       >
         <svg
           aria-hidden="true"
@@ -222,7 +222,7 @@ exports[`renders simple tree 1`] = `
         </svg>
       </div>
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
       >
         <svg
           aria-hidden="true"
@@ -262,13 +262,13 @@ exports[`renders simple tree 1`] = `
         tabindex="-1"
       >
         <div
-          class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+          class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
         >
           <div
             class="styled__StyledGap-sc-1073t7q-5 dbKRYo"
           />
           <div
-            class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+            class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
           >
             <svg
               aria-hidden="true"
@@ -307,13 +307,13 @@ exports[`renders simple tree 1`] = `
     tabindex="-1"
   >
     <div
-      class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+      class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
     >
       <div
         class="styled__StyledGap-sc-1073t7q-5 dbKRYo"
       />
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
       >
         <svg
           aria-hidden="true"
@@ -350,10 +350,10 @@ exports[`renders simple tree 1`] = `
     tabindex="-1"
   >
     <div
-      class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+      class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
     >
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 bqCSpX jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
       >
         <svg
           aria-hidden="true"
@@ -377,7 +377,7 @@ exports[`renders simple tree 1`] = `
         </svg>
       </div>
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
       >
         <svg
           aria-hidden="true"
@@ -417,13 +417,13 @@ exports[`renders simple tree 1`] = `
         tabindex="-1"
       >
         <div
-          class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+          class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
         >
           <div
             class="styled__StyledGap-sc-1073t7q-5 dbKRYo"
           />
           <div
-            class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+            class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
           >
             <svg
               aria-hidden="true"
@@ -462,10 +462,10 @@ exports[`renders simple tree 1`] = `
     tabindex="-1"
   >
     <div
-      class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+      class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
     >
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 bqCSpX jqdDXp styled__StyledArrowWrapper-sc-1073t7q-1 klGWkW"
       >
         <svg
           aria-hidden="true"
@@ -489,7 +489,7 @@ exports[`renders simple tree 1`] = `
         </svg>
       </div>
       <div
-        class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+        class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
       >
         <svg
           aria-hidden="true"
@@ -529,13 +529,13 @@ exports[`renders simple tree 1`] = `
         tabindex="-1"
       >
         <div
-          class="styled__StyledBox-sc-sj5f1m-0 bqCSpX styled__StyledFlex-sc-hcvk8l-0 ljMwty styled__StyledFlex-sc-1073t7q-3 iVrFPl"
+          class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlex-sc-hcvk8l-0 bqCSpX kBZCLF styled__StyledFlex-sc-1073t7q-3 iVrFPl"
         >
           <div
             class="styled__StyledGap-sc-1073t7q-5 dbKRYo"
           />
           <div
-            class="styled__StyledBox-sc-sj5f1m-0 cMHsUF styled__StyledFlexItem-sc-smjqtt-0 jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
+            class="styled__StyledBox-sc-sj5f1m-0 styled__StyledFlexItem-sc-smjqtt-0 cMHsUF jqdDXp styled__StyledFlexItem-sc-1073t7q-4 bDMUPR"
           >
             <svg
               aria-hidden="true"

diff --git a/packages/big-design/src/components/Worksheet/Cell/Cell.tsx b/packages/big-design/src/components/Worksheet/Cell/Cell.tsx
@@ -17,14 +17,14 @@ import { getCellIdx } from '../utils';
 import { AutoFillHandler, CellNote, StyledCell } from './styled';
 
 interface CellProps<Item> extends TCell<Item> {
-  nextRowValue: Item[keyof Item] | '';
-  isLastChild: boolean;
-  isChild: boolean;
-  options?: WorksheetSelectableColumn<Item>['config']['options'];
-  rowId: number | string;
-  formatting?: WorksheetTextColumn<Item>['formatting'];
-  validation?: InternalWorksheetColumn<Item>['validation'];
-  notation?: InternalWorksheetColumn<Item>['notation'];
+  readonly nextRowValue: Item[keyof Item] | '';
+  readonly isLastChild: boolean;
+  readonly isChild: boolean;
+  readonly options?: WorksheetSelectableColumn<Item>['config']['options'];
+  readonly rowId: number | string;
+  readonly formatting?: WorksheetTextColumn<Item>['formatting'];
+  readonly validation?: InternalWorksheetColumn<Item>['validation'];
+  readonly notation?: InternalWorksheetColumn<Item>['notation'];
 }
 
 const InternalCell = <T extends WorksheetItem>({
@@ -262,8 +262,8 @@ const InternalCell = <T extends WorksheetItem>({
   const renderedAutoFillHandler = useMemo(() => {
     return isLastSelected ? (
       <AutoFillHandler
+        $isVisible={!isAutoFillActive}
         aria-label="Autofill handler"
-        isVisible={!isAutoFillActive}
         onDoubleClick={handleAutoFilldblClick}
         onMouseDown={(event) => {
           event.stopPropagation();
@@ -285,14 +285,14 @@ const InternalCell = <T extends WorksheetItem>({
 
   return (
     <StyledCell
-      isChild={isChild}
-      isEdited={isEdited}
-      isFirstSelected={isFirstSelected}
-      isLastChild={isLastChild}
-      isLastSelected={isLastSelected}
-      isNextCellValid={isNextCellValid}
-      isSelected={isSelected}
-      isValid={isValid}
+      $isChild={isChild}
+      $isEdited={isEdited}
+      $isFirstSelected={isFirstSelected}
+      $isLastChild={isLastChild}
+      $isLastSelected={isLastSelected}
+      $isNextCellValid={isNextCellValid}
+      $isSelected={isSelected}
+      $isValid={isValid}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onMouseDown={() => {

diff --git a/packages/big-design/src/components/Worksheet/Cell/styled.tsx b/packages/big-design/src/components/Worksheet/Cell/styled.tsx
@@ -1,6 +1,7 @@
 import { Colors, theme as defaultTheme } from '@bigcommerce/big-design-theme';
 import { css, styled } from 'styled-components';
 
+import { WithTransients } from '../../../utils';
 import { Cell, WorksheetItem } from '../types';
 
 interface StyledCellProps<Item> {
@@ -15,7 +16,7 @@ interface StyledCellProps<Item> {
   type: Cell<Item>['type'];
 }
 
-export const StyledCell = styled.td<StyledCellProps<WorksheetItem>>`
+export const StyledCell = styled.td<WithTransients<StyledCellProps<WorksheetItem>>>`
   position: relative;
   background-color: ${({ theme }) => theme.colors.inherit};
   border: ${({ theme }) => `${theme.helpers.remCalc(0.5)} solid ${theme.colors.secondary30}`};
@@ -46,52 +47,52 @@ export const StyledCell = styled.td<StyledCellProps<WorksheetItem>>`
         `${theme.colors.white} ${theme.colors.white} ${theme.colors.white} ${theme.colors.secondary30}`};
     `}
 
-  ${({ type, isChild }) =>
+  ${({ type, $isChild }) =>
     type === 'toggle' &&
-    !isChild &&
+    !$isChild &&
     css`
       border-color: ${({ theme }) =>
         `${theme.colors.secondary30} ${theme.colors.white} ${theme.colors.secondary30} ${theme.colors.secondary30}`};
     `}
 
 
-    ${({ type, isLastChild }) =>
+    ${({ type, $isLastChild }) =>
     type === 'toggle' &&
-    isLastChild &&
+    $isLastChild &&
     css`
       border-bottom-color: ${({ theme }) => `${theme.colors.secondary30}`};
     `}
 
-  ${({ type, isSelected, isFirstSelected, isLastSelected, isNextCellValid }) =>
-    isSelected &&
+  ${({ type, $isSelected, $isFirstSelected, $isLastSelected, $isNextCellValid }) =>
+    $isSelected &&
     type !== 'toggle' &&
     css`
       border: ${({ theme }) => `${theme.helpers.remCalc(0.5)} double ${theme.colors.primary}`};
 
       border-top-color: ${({ theme }) =>
-        `${isFirstSelected ? theme.colors.primary : theme.colors.secondary30}`};
+        `${$isFirstSelected ? theme.colors.primary : theme.colors.secondary30}`};
       border-bottom-color: ${({ theme }) => {
-        if (!isNextCellValid && !isLastSelected) {
+        if (!$isNextCellValid && !$isLastSelected) {
           return theme.colors.danger;
         }
 
         return `${
-          isFirstSelected || isLastSelected ? theme.colors.primary : theme.colors.secondary30
+          $isFirstSelected || $isLastSelected ? theme.colors.primary : theme.colors.secondary30
         }`;
       }};
       ${AutoFillHandler} {
         display: block;
       }
     `}
 
-  ${({ isValid }) =>
-    !isValid &&
+  ${({ $isValid }) =>
+    !$isValid &&
     css`
       border: ${({ theme }) => `${theme.helpers.remCalc(0.5)} double ${theme.colors.danger}`};
     `}
 
-  ${({ isEdited }) =>
-    isEdited &&
+  ${({ $isEdited }) =>
+    $isEdited &&
     css`
       background-color: ${({ theme }) => theme.colors.warning10};
     `}
@@ -103,15 +104,15 @@ export const StyledCell = styled.td<StyledCellProps<WorksheetItem>>`
     margin: 0;
   }
 
-  ${({ type, isChild, isLastChild }) =>
+  ${({ type, $isChild, $isLastChild }) =>
     type === 'toggle' &&
-    isChild &&
+    $isChild &&
     css`
       &::before {
         content: '';
         display: block;
         top: 0;
-        height: ${isLastChild ? '50%' : '100%'};
+        height: ${$isLastChild ? '50%' : '100%'};
         left: 50%;
         width: ${({ theme }) => `${theme.helpers.remCalc(1)}`};
         position: absolute;
@@ -130,16 +131,16 @@ export const StyledCell = styled.td<StyledCellProps<WorksheetItem>>`
     `}
 `;
 
-export const AutoFillHandler = styled.div<{ isVisible: boolean }>`
+export const AutoFillHandler = styled.div<WithTransients<{ isVisible: boolean }>>`
   position: absolute;
-  border: ${({ theme, isVisible }) =>
+  border: ${({ theme, $isVisible }) =>
     `${theme.helpers.remCalc(1)} solid ${
-      isVisible ? theme.colors.white : theme.colors.transparent
+      $isVisible ? theme.colors.white : theme.colors.transparent
     }`};
   height: ${({ theme }) => `${theme.helpers.remCalc(6)}`};
   width: ${({ theme }) => `${theme.helpers.remCalc(6)}`};
-  background-color: ${({ theme, isVisible }) =>
-    isVisible ? theme.colors.primary : theme.colors.transparent};
+  background-color: ${({ theme, $isVisible }) =>
+    $isVisible ? theme.colors.primary : theme.colors.transparent};
   right: -${({ theme }) => `${theme.helpers.remCalc(4)}`};
   bottom: -${({ theme }) => `${theme.helpers.remCalc(4)}`};
   z-index: 100;

diff --git a/packages/big-design/src/components/Worksheet/RowStatus/RowStatus.tsx b/packages/big-design/src/components/Worksheet/RowStatus/RowStatus.tsx
@@ -24,5 +24,5 @@ export const RowStatus: React.FC<RowStatusProps> = memo(({ rowIndex }) => {
     ),
   );
 
-  return <Status isInvalid={isInvalid} isSelected={isSelected} />;
+  return <Status $isInvalid={isInvalid} $isSelected={isSelected} />;
 });