@linzjs/step-ag-grid 29.12.0 → 29.14.0

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/GridPopoverEditDropDown.stories.tsx

@@ -66,7 +66,7 @@ interface ICode {
 }
 
 const GridEditDropDownTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
-  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
 
   const optionsFn = useCallback(async (selectedRows: ITestRow[], filter?: string) => {
     // eslint-disable-next-line no-console
@@ -312,8 +312,8 @@ const GridEditDropDownTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridPro
       </GridFilters>
       <Grid
         {...props}
-        externalSelectedItems={externalSelectedItems}
-        setExternalSelectedItems={setExternalSelectedItems}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
         columnDefs={columnDefs}
         rowData={rowData}
         domLayout={'autoHeight'}

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

@@ -71,7 +71,7 @@ interface ITestRow {
 }
 
 const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
-  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const [externalSelectedIds, setExternalSelectedIds] = useState<number[]>([]);
   const columnDefs: ColDefT<ITestRow>[] = useMemo(
     () => [
       GridCell({
@@ -244,12 +244,13 @@ const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<I
       <Grid
         data-testid={'readonly'}
         {...props}
+        enableRangeSelection={true}
         selectable={true}
         enableClickSelection={true}
         enableSelectionWithoutKeys={true}
         autoSelectFirstRow={true}
-        externalSelectedItems={externalSelectedItems}
-        setExternalSelectedItems={setExternalSelectedItems}
+        externalSelectedIds={externalSelectedIds}
+        setExternalSelectedIds={setExternalSelectedIds}
         columnDefs={columnDefs}
         rowData={rowData}
       />

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/textValidator.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test, vi } from 'vitest';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { TextInputValidator, TextInputValidatorProps } from './textValidator';
 
 describe('TextInputValidator', () => {

package/src/utils/textValidator.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { GridBaseRow } from '../components/Grid';
+import { GridBaseRow } from '../components/types';
 import { isFloat, stringByteLengthIsInvalid } from './util';
 
 export interface TextInputValidatorProps<TData extends GridBaseRow> {

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) =>