fix(component): prevent column resizing when editing text field

packages/big-design/src/components/Worksheet/Worksheet.tsx

@@ -24,6 +24,7 @@ const InternalWorksheet = typedMemo(
     defaultExpandedRows,
     disabledRows,
     items,
+    minWidth,
     onChange,
     onErrors,
   }: WorksheetProps<T>): React.ReactElement<WorksheetProps<T>> => {
@@ -133,6 +134,7 @@ const InternalWorksheet = typedMemo(
         <StyledBox>
           <Table
             hasStaticWidth={tableHasStaticWidth}
+            minWidth={minWidth}
             onKeyDown={handleKeyDown}
             ref={tableRef}
             tabIndex={0}

packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`renders worksheet 1`] = `
   class="styled__StyledBox-sc-sj5f1m-0 gHBxjL styled__StyledBox-sc-16rzzpq-2 jjhxof"
 >
   <table
-    class="styled__Table-sc-16rzzpq-0 hiKdjk"
+    class="styled__Table-sc-16rzzpq-0 iumFEW"
     tabindex="0"
   >
     <thead>
@@ -14,27 +14,27 @@ exports[`renders worksheet 1`] = `
           class="styled__Status-sc-1aacki0-0 eDVZgo"
         />
         <th
-          class="styled__Header-sc-16rzzpq-1 cRvCWu"
+          class="styled__Header-sc-16rzzpq-1 bAyhTK"
         >
           Product name
         </th>
         <th
-          class="styled__Header-sc-16rzzpq-1 biTmCe"
+          class="styled__Header-sc-16rzzpq-1 iEhMHd"
         >
           Visible on storefront
         </th>
         <th
-          class="styled__Header-sc-16rzzpq-1 cRvCWu"
+          class="styled__Header-sc-16rzzpq-1 bAyhTK"
         >
           Other field
         </th>
         <th
-          class="styled__Header-sc-16rzzpq-1 cRvCWu"
+          class="styled__Header-sc-16rzzpq-1 bAyhTK"
         >
           Other field
         </th>
         <th
-          class="styled__Header-sc-16rzzpq-1 cyFJXl"
+          class="styled__Header-sc-16rzzpq-1 ZLAqT"
         >
           Number field
         </th>

packages/big-design/src/components/Worksheet/spec.tsx

@@ -1,5 +1,6 @@
 import { theme } from '@bigcommerce/big-design-theme';
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { StatefulTree } from '../StatefulTree';
@@ -726,11 +727,11 @@ describe('SelectEditor', () => {
 
     const cells = await findAllByDisplayValue('Value 1');
 
-    fireEvent.click(cells[0]);
+    await userEvent.click(cells[0]);
 
     const options = await findAllByRole('option');
 
-    fireEvent.click(options[2]);
+    await userEvent.click(options[2]);
 
     expect(handleChange).toHaveBeenCalledTimes(1);
     expect(handleChange).toHaveBeenLastCalledWith([
@@ -1147,6 +1148,14 @@ describe('column widths', () => {
     expect(table).toHaveStyle('width: auto');
   });
 
+  test('table accepts a minWidth prop', () => {
+    render(<Worksheet columns={columns} items={items} minWidth={900} onChange={handleChange} />);
+
+    const table = screen.getByRole('table');
+
+    expect(table).toHaveStyle('min-width: 900px');
+  });
+
   test('columns have defined widths (or auto if none)', async () => {
     render(<Worksheet columns={columns} items={items} onChange={handleChange} />);
 

packages/big-design/src/components/Worksheet/styled.tsx

@@ -5,9 +5,12 @@ import { Box } from '../Box';
 
 import { InternalWorksheetColumn } from './types';
 
-export const Table = styled.table<{ hasStaticWidth: boolean }>`
+export const Table = styled.table<{ minWidth?: number; hasStaticWidth: boolean }>`
   border-collapse: collapse;
   border-spacing: 0;
+  min-width: ${({ minWidth, hasStaticWidth }) =>
+    minWidth && !hasStaticWidth ? `${minWidth}px` : 'auto'};
+  table-layout: fixed;
   width: ${({ hasStaticWidth }) => (hasStaticWidth ? 'auto' : '100%')};
 
   &:focus {
@@ -24,8 +27,6 @@ export const Header = styled.th<{
   color: ${({ theme }) => theme.colors.secondary60};
   font-weight: ${({ theme }) => theme.typography.fontWeight.semiBold};
   height: ${({ theme }) => theme.helpers.remCalc(52)};
-  min-width: ${({ columnWidth }) =>
-    typeof columnWidth === 'string' ? columnWidth : `${columnWidth}px`};
   overflow: hidden;
   padding: ${({ theme }) => `0 ${theme.helpers.remCalc(17)}`};
   text-align: ${({ columnType }) => (columnType === 'number' ? 'right' : 'left')};

packages/big-design/src/components/Worksheet/types.ts

@@ -14,6 +14,7 @@ export interface WorksheetProps<Item extends WorksheetItem> {
   expandableRows?: ExpandableRows;
   defaultExpandedRows?: Array<string | number>;
   disabledRows?: DisabledRows;
+  minWidth?: number;
   onChange(items: Item[]): void;
   onErrors?(items: Array<WorksheetError<Item>>): void;
 }

packages/docs/PropTables/WorksheetPropTable.tsx

@@ -94,6 +94,11 @@ const worksheetProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'minWidth',
+    types: 'number',
+    description: 'Sets a min-width.',
+  },
 ];
 
 const worksheetTextColumnProps: Prop[] = [

packages/docs/pages/worksheet.tsx

@@ -267,6 +267,7 @@ const WorksheetPage = () => {
                       <Worksheet
                         columns={columns}
                         items={items}
+                        minWidth={900}
                         onChange={(items) => items}
                         onErrors={(items) => items}
                       />