From c1b4d391ef5c68a240acde579da80b68b66c505d Mon Sep 17 00:00:00 2001
From: Magnus Natrud Holta <146428101+magnh@users.noreply.github.com>
Date: Thu, 15 Feb 2024 14:53:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Enable=20contain=20strict=20when?=
 =?UTF-8?q?=20width=20and=20height=20is=20provided=20(#3273)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 Enable contain strict when width and height is provided

Enables 100% width without requiring any custom code

* 🐛 Add px suffix when passing only numbers as size
---
 .../src/EdsDataGrid.stories.tsx               |  4 +++
 .../eds-data-grid-react/src/EdsDataGrid.tsx   | 36 +++++++++++++------
 .../src/tests/utils.test.ts                   | 22 ++++++++++++
 packages/eds-data-grid-react/src/utils.ts     | 27 ++++++++++++++
 4 files changed, 79 insertions(+), 10 deletions(-)
 create mode 100644 packages/eds-data-grid-react/src/tests/utils.test.ts
 create mode 100644 packages/eds-data-grid-react/src/utils.ts

diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
index 93f50ee56f..6ecf40ce62 100644
--- a/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
+++ b/packages/eds-data-grid-react/src/EdsDataGrid.stories.tsx
@@ -145,6 +145,10 @@ export const ColumnGrouping: StoryFn<EdsDataGridProps<Photo>> = (args) => {
 ColumnGrouping.args = {
   rows: data,
   columns: groupedColumns,
+  height: 400,
+  width: '100%',
+  enableVirtual: true,
+  scrollbarHorizontal: true,
 }
 
 export const Sortable: StoryFn<EdsDataGridProps<Photo>> = (args) => {
diff --git a/packages/eds-data-grid-react/src/EdsDataGrid.tsx b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
index 6c358165ef..fd799e6a55 100644
--- a/packages/eds-data-grid-react/src/EdsDataGrid.tsx
+++ b/packages/eds-data-grid-react/src/EdsDataGrid.tsx
@@ -31,6 +31,8 @@ import { TableHeaderRow } from './components/TableHeaderRow'
 import { TableRow } from './components/TableRow'
 import { TableProvider } from './EdsDataGridContext'
 import { EdsDataGridProps } from './EdsDataGridProps'
+import styled from 'styled-components'
+import { addPxSuffixIfInputHasNoPrefix } from './utils'
 
 export function EdsDataGrid<T>({
   rows,
@@ -156,6 +158,7 @@ export function EdsDataGrid<T>({
     data: rows,
     columns: _columns,
     defaultColumn: {
+      size: 150,
       cell: (context) => {
         return (
           <Typography
@@ -275,14 +278,14 @@ export function EdsDataGrid<T>({
 
   const table = useReactTable(options)
 
-  let parentRefStyle: CSSProperties = {}
+  let tableWrapperStyle: CSSProperties = {}
 
   /**
    * Style the parent container to enable virtualization.
    * By not setting this, the virtual-scroll will always render every row, reducing computational overhead if turned off.
    */
   if (enableVirtual) {
-    parentRefStyle = {
+    tableWrapperStyle = {
       height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative',
@@ -332,15 +335,13 @@ export function EdsDataGrid<T>({
       enableColumnFiltering={!!enableColumnFiltering}
       stickyHeader={!!stickyHeader}
     >
-      <div
+      <TableWrapper
         className="table-wrapper"
-        style={{
-          height: height ?? 'auto',
-          ...parentRefStyle,
-          width: scrollbarHorizontal ? width ?? '100%' : 'auto',
-          overflow: 'auto',
-        }}
+        style={tableWrapperStyle}
         ref={parentRef}
+        $height={height}
+        $width={width}
+        $scrollbarHorizontal={scrollbarHorizontal}
       >
         <Table
           className={Object.entries(classList)
@@ -434,7 +435,7 @@ export function EdsDataGrid<T>({
                 />
               </div>
             )}
-      </div>
+      </TableWrapper>
       {debug && enableVirtual && (
         <span>
           Visible items: {virtualizer.range.startIndex} -{' '}
@@ -444,3 +445,18 @@ export function EdsDataGrid<T>({
     </TableProvider>
   )
 }
+
+const TableWrapper = styled.div<{
+  $height?: string | number
+  $width?: string | number
+  $scrollbarHorizontal?: boolean
+}>`
+  height: ${({ $height }) => addPxSuffixIfInputHasNoPrefix($height) ?? 'auto'};
+  width: ${({ $scrollbarHorizontal, $width }) =>
+    $scrollbarHorizontal
+      ? addPxSuffixIfInputHasNoPrefix($width) ?? '100%'
+      : 'auto'};
+  overflow: auto;
+  contain: ${({ $height, $width }) =>
+    Boolean($height) && Boolean($width) ? 'strict' : 'unset'};
+`
diff --git a/packages/eds-data-grid-react/src/tests/utils.test.ts b/packages/eds-data-grid-react/src/tests/utils.test.ts
new file mode 100644
index 0000000000..43ab2f7624
--- /dev/null
+++ b/packages/eds-data-grid-react/src/tests/utils.test.ts
@@ -0,0 +1,22 @@
+import { addPxSuffixIfInputHasNoPrefix, isNumberOnlyString } from '../utils'
+
+test('Should validate number string correctly', () => {
+  expect(isNumberOnlyString('1')).toBe(true)
+
+  expect(isNumberOnlyString('1s')).toBe(false)
+
+  expect(isNumberOnlyString('sa')).toBe(false)
+
+  expect(isNumberOnlyString('1.1')).toBe(true)
+
+  expect(isNumberOnlyString('1,1')).toBe(false)
+
+  expect(isNumberOnlyString('11 ')).toBe(true)
+})
+
+test('Should add px suffix in correct cases', () => {
+  expect(addPxSuffixIfInputHasNoPrefix('1')).toEqual('1px')
+  expect(addPxSuffixIfInputHasNoPrefix('1px')).toEqual('1px')
+  expect(addPxSuffixIfInputHasNoPrefix('1.1')).toEqual('1.1px')
+  expect(addPxSuffixIfInputHasNoPrefix('100%')).toEqual('100%')
+})
diff --git a/packages/eds-data-grid-react/src/utils.ts b/packages/eds-data-grid-react/src/utils.ts
new file mode 100644
index 0000000000..9d524e5fd4
--- /dev/null
+++ b/packages/eds-data-grid-react/src/utils.ts
@@ -0,0 +1,27 @@
+/**
+ * Function returning wether a string only contains number. Allows leading or trailing spaces.
+ *
+ * Examples:
+ *
+ * ```
+ * isNumberOnlyString("10") // true
+ * isNumberOnlyString("10.10") // true
+ * isNumberOnlyString("10px") // false
+ * isNumberOnlyString("10%") // false
+ * isNumberOnlyString("10 ") // true
+ * ```
+ *
+ * @param number
+ * @returns
+ */
+export function isNumberOnlyString(number: string) {
+  return !isNaN(Number(number)) && !isNaN(parseFloat(number))
+}
+
+export function addPxSuffixIfInputHasNoPrefix(size: number | string) {
+  if (typeof size === 'number' || isNumberOnlyString(size)) {
+    return `${size}px`
+  }
+
+  return size
+}