@linzjs/step-ag-grid 29.13.0 → 29.14.0

package/src/lui/timeoutHook.tsx

@@ -38,22 +38,3 @@ export const useTimeoutHook = () => {
 
   return invoke;
 };
-
-interface IntervalHookProps {
-  timeoutMs: number;
-  callback: () => void;
-}
-
-export const useIntervalHook = ({ callback, timeoutMs }: IntervalHookProps) => {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      callbackRef.current && callbackRef.current();
-    }, timeoutMs);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [timeoutMs]);
-};

package/src/lui/tsUtils.ts

@@ -0,0 +1,8 @@
+export type KeysOfType<TObject, TValue> = {
+  [K in keyof TObject]: TObject[K] extends TValue ? K : never;
+}[keyof TObject];
+
+export const typedKeys = <T extends object>(obj: T): (keyof T)[] => Object.keys(obj) as (keyof T)[];
+
+export const typedEntries = <T extends object>(obj: T): { [K in keyof T]-?: [K, T[K]] }[keyof T][] =>
+  Object.entries(obj) as { [K in keyof T]-?: [K, T[K]] }[keyof T][];

package/src/stories/grid/GridCopy.stories.tsx

@@ -0,0 +1,175 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { LuiMessagingContextProvider } from '@linzjs/lui';
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridCellBearingValueFormatter,
+  GridContextProvider,
+  GridFilterQuick,
+  GridFilters,
+  GridPopoverMenu,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from '../..';
+import { GridFilterColumnsToggle, GridFilterDownloadCsvButton } from '../../components';
+import { GridCellFiller } from '../../components/GridCellFiller';
+import { SeededRandomForTests } from '../../utils/__tests__/random';
+import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
+    selectable: false,
+    rowSelection: 'multiple',
+  }, // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <LuiMessagingContextProvider version="v2">
+        <div style={{ maxWidth: 1024, height: '80vh', display: 'flex', flexDirection: 'column' }}>
+          <GridUpdatingContextProvider>
+            <GridContextProvider>
+              <Story />
+            </GridContextProvider>
+          </GridUpdatingContextProvider>
+        </div>
+      </LuiMessagingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  position?: string;
+  age: number;
+  height: string;
+  bearing: string | number | null;
+}
+
+const GridCopyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+        cellRendererParams: {
+          error: ({ value }) => value === 'Manager' && 'Managers need management',
+          warning: ({ value }) => value === 'Tester' && 'Testers are testing',
+          info: ({ value }) => value === 'Developer' && 'Developers are awesome',
+        },
+      }),
+      {
+        headerName: 'Metrics',
+        marryChildren: true,
+        children: [
+          GridCell<ITestRow, ITestRow['age']>({
+            field: 'age',
+            headerName: 'Age',
+          }),
+          GridCell<ITestRow, ITestRow['height']>({
+            field: 'height',
+            headerName: 'Height',
+          }),
+        ],
+      },
+      GridCell({
+        field: 'bearing',
+        headerName: 'Bearing',
+        valueFormatter: GridCellBearingValueFormatter,
+      }),
+      GridCellFiller(),
+      GridPopoverMenu(
+        {},
+        {
+          editorParams: {
+            options: () => [
+              {
+                label: 'Test menu',
+                action: () => {},
+              },
+            ],
+          },
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>(() => {
+    const random = new SeededRandomForTests(1000);
+    let id = 1000;
+    const positions = [
+      undefined,
+      'Tester',
+      'Developer',
+      'Lawyer',
+      'Barrista """',
+      'Manager',
+      'CEO',
+      'CTO',
+      'Architect',
+    ];
+    const result: ITestRow[] = [];
+    for (let i = 0; i < 1000; i++) {
+      result.push({
+        id: id++,
+        position: random.fromArray(positions),
+        age: 30,
+        height: `${random.next(3) + 3}'${random.next(12)}"`,
+        bearing: Math.random() * 360,
+      });
+    }
+    return result;
+  });
+
+  return (
+    <GridWrapper>
+      <GridFilters>
+        <GridFilterQuick />
+        <GridFilterColumnsToggle />
+        <GridFilterDownloadCsvButton fileName={'readOnlyGrid'} />
+      </GridFilters>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        enableRangeSelection={true}
+        selectable={true}
+        enableClickSelection={true}
+        enableSelectionWithoutKeys={true}
+        autoSelectFirstRow={true}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
+        columnDefs={columnDefs}
+        rowData={rowData}
+      />
+    </GridWrapper>
+  );
+};
+
+export const GridCopy = GridCopyTemplate.bind({});
+GridCopy.play = waitForGridReady;

package/src/stories/grid/GridPopoverEditBearing.stories.tsx

@@ -51,8 +51,8 @@ interface ITestRow {
   bearing: string | number | null;
 }
 
-const GridPopoverEditBearingTemplate: StoryFn<typeof Grid> = (props: GridProps) => {
-  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+const GridPopoverEditBearingTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
@@ -111,8 +111,8 @@ const GridPopoverEditBearingTemplate: StoryFn<typeof Grid> = (props: GridProps)
         data-testid={'bearingsTestTable'}
         {...props}
         readOnly={false}
-        externalSelectedItems={externalSelectedItems}
-        setExternalSelectedItems={setExternalSelectedItems}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
         columnDefs={columnDefs}
         rowData={rowData}
         domLayout={'autoHeight'}

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -244,6 +244,7 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<I
       <Grid
         data-testid={'readonly'}
         {...props}
+        enableRangeSelection={true}
         selectable={true}
         enableClickSelection={true}
         enableSelectionWithoutKeys={true}

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -234,8 +234,8 @@ const GridKeyboardInteractionsTemplate: StoryFn<typeof Grid<ITestRow>> = (props:
   );
 };
 
-export const GridKeyboardInteractions: StoryFn<typeof Grid<ITestRow>> = GridKeyboardInteractionsTemplate.bind({});
-GridKeyboardInteractions.play = async ({ canvasElement }) => {
+export const KeyboardInteractions: StoryFn<typeof Grid<ITestRow>> = GridKeyboardInteractionsTemplate.bind({});
+KeyboardInteractions.play = async ({ canvasElement }) => {
   const canvas = within(document.body);
 
   multiEditAction.mockClear();

package/src/styles/ContextMenu.scss

@@ -0,0 +1,61 @@
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
+
+.GridContextMenu {
+  li.szh-menu__header {
+    color: lui.$fuscous;
+    text-transform: none;
+    font-size: 14px;
+    font-weight: 600;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  li.szh-menu__item {
+    padding-left: 16px;
+    padding-right: 16px;
+
+    .copyMenuMenuItem {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .copyMenuMenuItem__text {
+      color: lui.$charcoal;
+      font-size: 16px;
+      font-weight: 400;
+      width: 80px;
+    }
+
+    .copyMenuMenuItem__buttonDefault {
+      display: flex;
+      background: none;
+      padding: 6px 6px;
+      border: 2px solid transparent;
+
+      &.copyMenuMenuItem__buttonDefault--hidden:hover {
+        border: 2px solid lui.$charcoal;
+      }
+    }
+
+    .copyMenuMenuItem__buttonDefault--hidden .LuiIcon {
+      fill: transparent;
+    }
+    .copyMenuMenuItem__buttonDefault--hidden:hover .LuiIcon {
+      fill: lui.$fuscous;
+    }
+
+    .LuiIcon {
+      fill: lui.$fuscous;
+    }
+
+    .LuiIcon[data-icon="ic_tick"] {
+      padding-left: 4px;
+      padding-right: 4px;
+    }
+  }
+
+  li.szh-menu__item--hover {
+    background-color: lui.$polar;
+  }
+}

package/src/styles/Grid.scss

@@ -7,8 +7,12 @@
   margin-right: auto;
 }
 
-.ag-unselectable .ag-cell:not([col-id="ag-Grid-SelectionColumn"]) {
-  user-select: text !important;
+.ag-cell:not([col-id="ag-Grid-SelectionColumn"]) {
+  user-select: text;
+}
+
+.rangeSelectingMultiple .ag-cell {
+  user-select: none;
 }
 
 .LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
@@ -157,3 +161,23 @@ div.ag-ltr div.ag-header-cell-resize {
   font-size: lui.$base-font-size;
   @include lui.font-regular();
 }
+
+div.ag-row div.ag-cell.rangeSelect {
+  background-color: rgba(72, 160, 244, 0.2);
+}
+
+div.ag-row div.ag-cell.rangeSelectLeft {
+  border-left: 3px solid #48a0f4;
+}
+
+div.ag-row div.ag-cell.rangeSelectRight {
+  border-right: 3px solid #48a0f4;
+}
+
+div.ag-row div.ag-cell.rangeSelectTop {
+  border-top: 3px solid #48a0f4;
+}
+
+div.ag-row div.ag-cell.rangeSelectBottom {
+  border-bottom: 3px solid #48a0f4;
+}

package/src/utils/__tests__/random.ts

@@ -0,0 +1,19 @@
+export class SeededRandomForTests {
+  value: number;
+  constructor(seed: number) {
+    this.value = seed % 2147483647;
+  }
+
+  next(maxInc?: number) {
+    this.value = (this.value * 16807) % 2147483647;
+    const result = (this.value - 1) / 2147483646;
+    if (maxInc == null) {
+      return result;
+    }
+    return ((result * (maxInc + 1)) | 0) % (maxInc + 1);
+  }
+
+  fromArray<T>(arr: T[]): T {
+    return arr[this.next(arr.length - 1)];
+  }
+}

package/src/utils/bearing.ts

@@ -1,6 +1,6 @@
 export const bearingValueFormatter = (value: any): string => {
   const safeValue = typeof value === 'string' ? parseFloat(value) : value;
-  if (safeValue == null) {
+  if (safeValue == null || Number.isNaN(safeValue)) {
     return '–';
   }
   return convertDDToDMS(safeValue, false);
@@ -8,7 +8,7 @@ export const bearingValueFormatter = (value: any): string => {
 
 export const bearingCorrectionValueFormatter = (value: any): string => {
   const safeValue = value;
-  if (safeValue == null) {
+  if (safeValue == null || Number.isNaN(safeValue)) {
     return '–';
   }
   if (typeof safeValue === 'string') {

package/src/utils/util.ts

@@ -1,6 +1,8 @@
 import { isEmpty, negate } from 'lodash-es';
 import natsort from 'natsort';
 
+export type MaybePromise<T> = T | Promise<T>;
+
 export const isNotEmpty = negate(isEmpty);
 
 export const wait = (timeoutMs: number) =>