From 6fb77949fbcd57cbce5672224ea262a3643ab273 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Wed, 28 Sep 2022 11:53:35 -0500
Subject: [PATCH] fix(component): prevent column resizing when editing text
 field

---
 .../src/components/Worksheet/Worksheet.tsx          |  2 ++
 .../Worksheet/__snapshots__/spec.tsx.snap           |  2 +-
 .../big-design/src/components/Worksheet/spec.tsx    | 13 +++++++++++--
 .../big-design/src/components/Worksheet/styled.tsx  |  5 ++++-
 .../big-design/src/components/Worksheet/types.ts    |  1 +
 packages/docs/PropTables/WorksheetPropTable.tsx     |  5 +++++
 packages/docs/pages/worksheet.tsx                   |  1 +
 7 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/big-design/src/components/Worksheet/Worksheet.tsx b/packages/big-design/src/components/Worksheet/Worksheet.tsx
index a638d8021..b3ddbb9c6 100644
--- a/packages/big-design/src/components/Worksheet/Worksheet.tsx
+++ b/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}
diff --git a/packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap
index 0d00c74df..05d6d04a3 100644
--- a/packages/big-design/src/components/Worksheet/__snapshots__/spec.tsx.snap
+++ b/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>
diff --git a/packages/big-design/src/components/Worksheet/spec.tsx b/packages/big-design/src/components/Worksheet/spec.tsx
index 4dc8688ab..74af98d58 100644
--- a/packages/big-design/src/components/Worksheet/spec.tsx
+++ b/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} />);
 
diff --git a/packages/big-design/src/components/Worksheet/styled.tsx b/packages/big-design/src/components/Worksheet/styled.tsx
index a3bb86898..3a30e7ebf 100644
--- a/packages/big-design/src/components/Worksheet/styled.tsx
+++ b/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 {
diff --git a/packages/big-design/src/components/Worksheet/types.ts b/packages/big-design/src/components/Worksheet/types.ts
index e1518d074..902f073ea 100644
--- a/packages/big-design/src/components/Worksheet/types.ts
+++ b/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;
 }
diff --git a/packages/docs/PropTables/WorksheetPropTable.tsx b/packages/docs/PropTables/WorksheetPropTable.tsx
index 314e2d9ab..23e6ad327 100644
--- a/packages/docs/PropTables/WorksheetPropTable.tsx
+++ b/packages/docs/PropTables/WorksheetPropTable.tsx
@@ -94,6 +94,11 @@ const worksheetProps: Prop[] = [
       </>
     ),
   },
+  {
+    name: 'minWidth',
+    types: 'number',
+    description: 'Sets a min-width.',
+  },
 ];
 
 const worksheetTextColumnProps: Prop[] = [
diff --git a/packages/docs/pages/worksheet.tsx b/packages/docs/pages/worksheet.tsx
index d3d2d6b54..01dde767c 100644
--- a/packages/docs/pages/worksheet.tsx
+++ b/packages/docs/pages/worksheet.tsx
@@ -267,6 +267,7 @@ const WorksheetPage = () => {
                       <Worksheet
                         columns={columns}
                         items={items}
+                        minWidth={900}
                         onChange={(items) => items}
                         onErrors={(items) => items}
                       />