@linzjs/step-ag-grid 30.4.4 → 31.2.0

package/src/react-menu3/styles/index.scss

@@ -1,12 +1,14 @@
-@use "var";
-@use "core";
+@use 'var';
+@use 'core';
 
 .szh-menu {
   user-select: none;
   color: var.$color;
   border: none;
   border-radius: 0.25rem;
-  box-shadow: 0 3px 7px rgb(0 0 0 / 13.3%), 0 0.6px 2px rgb(0 0 0 / 10%);
+  box-shadow:
+    0 3px 7px rgb(0 0 0 / 13.3%),
+    0 0.6px 2px rgb(0 0 0 / 10%);
   min-width: 10rem;
   padding: 0.5rem 0;
 
@@ -28,7 +30,7 @@
       padding-left: 2.2rem;
 
       &::before {
-        content: "\25cb";
+        content: '\25cb';
         position: absolute;
         left: 0.8rem;
         top: 0.55rem;
@@ -37,7 +39,7 @@
     }
 
     &--type-radio#{&}--checked::before {
-      content: "\25cf";
+      content: '\25cf';
     }
 
     &--type-checkbox {
@@ -50,7 +52,7 @@
     }
 
     &--type-checkbox#{&}--checked::before {
-      content: "\2714";
+      content: '\2714';
     }
   }
 
@@ -58,7 +60,7 @@
     padding-right: 2.5rem;
 
     &::after {
-      content: "\276f";
+      content: '\276f';
       position: absolute;
       right: 1rem;
     }
@@ -72,6 +74,7 @@
   }
 }
 
-.react-menu-inline-test .szh-menu-container, .react-menu-inline-test .szh-menu {
+.react-menu-inline-test .szh-menu-container,
+.react-menu-inline-test .szh-menu {
   position: static !important;
 }

package/src/react-menu3/styles/theme-dark.scss

@@ -1,4 +1,4 @@
-@use "var";
+@use 'var';
 
 .szh-menu-container--theme-dark .szh-menu {
   color: var.$color-dark;

package/src/react-menu3/styles/transitions/slide.scss

@@ -1,13 +1,13 @@
-@use "sass:list";
-@use "sass:map";
+@use 'sass:list';
+@use 'sass:map';
 
-$menu: "szh-menu";
+$menu: 'szh-menu';
 $duration: 0.15s;
 $directions: (
-  "left": "X" 1,
-  "right": "X" -1,
-  "top": "Y" 1,
-  "bottom": "Y" -1,
+  'left': 'X' 1,
+  'right': 'X' -1,
+  'top': 'Y' 1,
+  'bottom': 'Y' -1,
 );
 
 @mixin animation($name, $dir) {
@@ -43,5 +43,5 @@ $directions: (
 }
 
 @each $dir in map.keys($directions) {
-  @include animation("slide", $dir);
+  @include animation('slide', $dir);
 }

package/src/react-menu3/utils/utils.ts

@@ -34,7 +34,7 @@ export const defineName = (
 ) => Object.defineProperty(component, internalKey, { value: name });
 
 export const mergeProps = (target: any, source: any) => {
-  source &&
+  if (source) {
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];
       const sourceProp = source[key];
@@ -47,6 +47,7 @@ export const mergeProps = (target: any, source: any) => {
         target[key] = sourceProp;
       }
     });
+  }
 
   return target;
 };

package/src/stories/grid/FormTest.scss

@@ -1,13 +1,13 @@
-.FormTest {
-  display: inline-flex;
-  flex-wrap: nowrap;
-  gap: 12px;
-}
-
-.FormTest .LuiTextInput {
-  margin-bottom: 0;
-}
-
-.FormTest-textInput {
-  width: 100px;
-}
+.FormTest {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  gap: 12px;
+}
+
+.FormTest .LuiTextInput {
+  margin-bottom: 0;
+}
+
+.FormTest-textInput {
+  width: 100px;
+}

package/src/stories/grid/GridDragRow.stories.tsx

@@ -15,6 +15,7 @@ import {
   GridProps,
   GridUpdatingContextProvider,
   GridWrapper,
+  reorderRows,
 } from '../..';
 import { waitForGridReady } from '../../utils/__tests__/storybookTestUtil';
 
@@ -98,14 +99,8 @@ const GridDragRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<IT
     { id: 1003, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
   ]);
 
-  const onRowDragEnd = useCallback(({ movedRow, targetRow }: GridOnRowDragEndProps<ITestRow>) => {
-    setRowData((rowData) =>
-      rowData.map((r) => {
-        if (r.id === movedRow.id) return targetRow;
-        if (r.id === targetRow.id) return movedRow;
-        return r;
-      }),
-    );
+  const onRowDragEnd = useCallback(({ movedRows, targetRow, direction }: GridOnRowDragEndProps<ITestRow>) => {
+    setRowData((rowData) => reorderRows(rowData, movedRows, targetRow, direction));
   }, []);
 
   return (
@@ -128,3 +123,61 @@ const GridDragRowTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<IT
 
 export const DragRowSingleSelection = GridDragRowTemplate.bind({});
 DragRowSingleSelection.play = waitForGridReady;
+
+const GridDragRowMultiTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell<ITestRow, ITestRow['position']>({
+        field: 'position',
+        headerName: 'Position',
+      }),
+      GridCell({
+        field: 'age',
+        headerName: 'Age',
+      }),
+      GridCell({
+        field: 'desc',
+        headerName: 'Description',
+        flex: 1,
+      }),
+    ],
+    [],
+  );
+
+  const [rowData, setRowData] = useState<ITestRow[]>([
+    { id: 1, position: 'Tester', age: 30, height: `6'4"`, desc: 'Tests application', dd: '1' },
+    { id: 2, position: 'Developer', age: 12, height: `5'3"`, desc: 'Develops application', dd: '2' },
+    { id: 3, position: 'Manager', age: 65, height: `5'9"`, desc: 'Manages', dd: '3' },
+    { id: 4, position: 'BA', age: 42, height: `5'7"`, desc: 'BAs', dd: '4' },
+    { id: 5, position: 'Designer', age: 28, height: `5'6"`, desc: 'Designs', dd: '5' },
+    { id: 6, position: 'DevOps', age: 35, height: `5'11"`, desc: 'Deploys', dd: '6' },
+  ]);
+
+  const onRowDragEnd = useCallback(({ movedRows, targetRow, direction }: GridOnRowDragEndProps<ITestRow>) => {
+    setRowData((rowData) => reorderRows(rowData, movedRows, targetRow, direction));
+  }, []);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'drag-multi'}
+        {...props}
+        selectable={true}
+        rowSelection="multiple"
+        animateRows={true}
+        columnDefs={columnDefs}
+        defaultColDef={{ sortable: false }}
+        rowData={rowData}
+        onRowDragEnd={onRowDragEnd}
+      />
+    </GridWrapper>
+  );
+};
+
+export const DragRowMultiSelection = GridDragRowMultiTemplate.bind({});
+DragRowMultiSelection.play = waitForGridReady;

package/src/stories/grid/GridInlineText.stories.tsx

@@ -174,7 +174,7 @@ const GridInlineTextTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridP
 export const _EditInlineText = GridInlineTextTemplate.bind({});
 _EditInlineText.play = waitForGridReady;
 
-const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+const InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
   const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
   const [isDirty, setIsDirty] = useState(false);
   const [rowData, setRowData] = useState<IFormTestRow[]>(initialRows);
@@ -251,7 +251,7 @@ const _InlineText_ChangeEventsTemplate: StoryFn<typeof Grid<IFormTestRow>> = (pr
   );
 };
 
-export const _InlineText_ChangeEvents = _InlineText_ChangeEventsTemplate.bind({});
+export const _InlineText_ChangeEvents = InlineText_ChangeEventsTemplate.bind({});
 _InlineText_ChangeEvents.play = async (context) => {
   await waitForGridReady(context);
   const canvas = within(context.canvasElement);

package/src/stories/grid/GridSorting.stories.tsx

@@ -137,9 +137,13 @@ Sorting.play = async (context) => {
     if (colId !== null) {
       await clickColumnHeaderToSort(colId, canvasElement);
       await wait(500);
-      expected && expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+      if (expected) {
+        expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+      }
+    }
+    if (idExpected) {
+      expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
     }
-    idExpected && expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
   };
 
   // Default sort order

package/src/styles/ComponentLoadingWrapper.scss

@@ -3,4 +3,4 @@
   inset: 0;
   background-color: rgb(64 64 64 / 10%);
   z-index: 1000;
-}
+}

package/src/styles/ContextMenu.scss

@@ -49,7 +49,7 @@
       fill: lui.$fuscous;
     }
 
-    .LuiIcon[data-icon="ic_tick"] {
+    .LuiIcon[data-icon='ic_tick'] {
       padding-left: 4px;
       padding-right: 4px;
     }

package/src/styles/Grid.scss

@@ -1,13 +1,13 @@
-@use "../react-menu3/styles/index";
-@use "./react-menu-customisations";
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../react-menu3/styles/index';
+@use './react-menu-customisations';
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .LabelPreferencesPanelGridCellAlignCenter .ag-wrapper {
   margin-left: auto;
   margin-right: auto;
 }
 
-.ag-cell:not([col-id="ag-Grid-SelectionColumn"]) {
+.ag-cell:not([col-id='ag-Grid-SelectionColumn']) {
   user-select: text;
 }
 
@@ -15,7 +15,8 @@
   user-select: none;
 }
 
-.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+.LabelPreferencesPanelGridCellAlignCenter .ag-cell-wrapper,
+.LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
   display: flex;
   justify-content: center;
 }
@@ -28,7 +29,7 @@
 }
 
 .Grid-hideSelectedRow div.ag-row::before {
-  content: "";
+  content: '';
   background-color: white !important;
 }
 
@@ -42,7 +43,7 @@
   span.ag-sort-indicator-icon::before {
     margin-left: -6px;
     position: absolute;
-    content: "*";
+    content: '*';
   }
 }
 
@@ -92,7 +93,7 @@
   border-radius: 3px;
   padding-left: 36px;
   padding-right: 0.75rem;
-  font-family: "Open Sans", system-ui, sans-serif;
+  font-family: 'Open Sans', system-ui, sans-serif;
 
   &::placeholder {
     color: lui.$fuscous;
@@ -144,7 +145,8 @@
   margin-right: auto;
 }
 
-.GridCellAlignCenter .ag-cell-wrapper, .LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
+.GridCellAlignCenter .ag-cell-wrapper,
+.LabelPreferencesPanelGridCellAlignCenter .GridCell-container {
   display: flex;
   justify-content: center;
 }

package/src/styles/GridCell.scss

@@ -10,4 +10,4 @@
   right: 8px;
   display: flex;
   align-items: center;
-}
+}

package/src/styles/GridFilterColumnsToggle.scss

@@ -1,4 +1,4 @@
 .GridFilterColumnsToggle-container {
   max-height: 280px;
   overflow: auto;
-}
+}

package/src/styles/GridFormInlineTextInput.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .GridFormInlineTextInput {
   height: 100%;
@@ -10,14 +10,14 @@
 
 .GridFormInlineTextInput > input {
   display: block;
-  left:0;
-  top:0;
-  right:0;
-  bottom:0;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
   position: absolute;
   padding-left: 9px;
   padding-right: 9px;
   outline: 0;
   border: 0;
-  font-family: "Open Sans", system-ui, sans-serif;
-}
+  font-family: 'Open Sans', system-ui, sans-serif;
+}

package/src/styles/GridFormMultiSelectGrid.scss

@@ -6,4 +6,4 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-}
+}

package/src/styles/GridFormSubComponentTextInput.scss

@@ -1,4 +1,4 @@
-.GridFormSubComponentTextInput-full-width-input {
-  width: 100%;
-  padding: 0;
-}
+.GridFormSubComponentTextInput-full-width-input {
+  width: 100%;
+  padding: 0;
+}

package/src/styles/GridIcon.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .AgGridGenericCellRenderer-icon {
   margin-right: 4px;

package/src/styles/GridPopoverMenu.scss

@@ -1,4 +1,4 @@
-@use "../../node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use '../../node_modules/@linzjs/lui/dist/scss/Core' as lui;
 
 .ag-cell .GridPopoutMenu-burger {
   cursor: pointer;

package/src/styles/GridTheme.scss

@@ -1,5 +1,5 @@
-@use "@linzjs/lui/dist/scss/Core" as lui;
-@use "ag-grid-community/styles" as ag;
+@use '@linzjs/lui/dist/scss/Core' as lui;
+@use 'ag-grid-community/styles' as ag;
 
 // ag-grid likes to add 1px to this, so we subtract to compensate
 $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
@@ -44,7 +44,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     data-color: lui.$charcoal,
     foreground-color: lui.$charcoal,
     font-family: (
-      "Open Sans",
+      'Open Sans',
       system-ui,
       sans-serif,
     ),
@@ -58,6 +58,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+.ag-theme-step-view-list-default,
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
   // Don't hide the drag handle
@@ -154,7 +155,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
       content: none !important;
     }
   }
-  
+
   .ag-header-cell-filter-button.ag-has-popup-positioned-under .ag-icon-filter {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M6 12.984v-1.969h12v1.969zM3 6h18v2.016H3zm6.984 12v-2.016h4.031V18z'/%3E%3C/svg%3E") !important;
     background-color: #007198;
@@ -243,7 +244,8 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     visibility: inherit;
   }
 
-  .ag-row-highlight-above::after, .ag-row-highlight-below::after {
+  .ag-row-highlight-above::after,
+  .ag-row-highlight-below::after {
     content: '';
     height: 3px;
     background-color: transparent;
@@ -257,6 +259,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     border-bottom: 2px dashed lui.$andrea;
   }
 
+  .ag-row-dragging {
+    opacity: 0.5;
+  }
+
   .ag-pinned-left-header,
   .ag-pinned-right-header,
   .ag-pinned-right-cols-container,
@@ -268,7 +274,7 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 
   .ag-pinned-left-header,
   .ag-pinned-left-cols-container {
-      clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
+    clip-path: polygon(0% 0%, 120% 0%, 120% 100%, 0% 100%);
   }
 
   .ag-pinned-right-header,
@@ -278,7 +284,6 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
 }
 
 .ag-theme-step-view-list-default.theme-specific {
-
   .ag-header-hide-default-select .ag-labeled {
     display: none;
   }

package/src/styles/index.scss

@@ -1,16 +1,16 @@
-@use "./lui-overrides";
-@use "./react-menu-customisations";
-@use "./ComponentLoadingWrapper";
-@use "./Grid";
-@use "./GridCell";
-@use "./GridFormDropDown";
-@use "./GridFormEditBearing";
-@use "./GridFormMultiSelect";
-@use "./GridFormMultiSelectGrid";
-@use "./GridFormSubComponentTextInput";
-@use "./GridIcon";
-@use "./GridLoadableCell";
-@use "./GridPopoverMenu";
-@use "./GridFilterColumnsToggle";
-@use "./GridFilterHeaderIconButton";
-@use "./GridFormInlineTextInput";
+@use './lui-overrides';
+@use './react-menu-customisations';
+@use './ComponentLoadingWrapper';
+@use './Grid';
+@use './GridCell';
+@use './GridFormDropDown';
+@use './GridFormEditBearing';
+@use './GridFormMultiSelect';
+@use './GridFormMultiSelectGrid';
+@use './GridFormSubComponentTextInput';
+@use './GridIcon';
+@use './GridLoadableCell';
+@use './GridPopoverMenu';
+@use './GridFilterColumnsToggle';
+@use './GridFilterHeaderIconButton';
+@use './GridFormInlineTextInput';