@linzjs/step-ag-grid 25.0.1 → 26.0.0

package/README.md

@@ -18,7 +18,7 @@
   - Custom form
   - Context menu
 
-_Please note this requires React >=17, ag-grid-community >=28, and SASS._
+_Please note this requires React>=18, ag-grid-community >=32.3.3, and SASS._
 
 ## Install
 

package/dist/GridTheme.scss

@@ -58,6 +58,29 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   )
 );
 
+// Don't hide the drag handle
+.ag-theme-step-default.theme-specific .ag-drag-handle.ag-row-drag, .ag-theme-step-compact.theme-specific div.ag-drag-handle.ag-row-drag {
+  opacity: 1 !important;
+}
+
+.ag-header-hide-default-select .ag-labeled {
+  display: none;
+}
+
+.ag-header-hide-default-select .ag-wrapper.ag-checkbox-input-wrapper {
+  margin-right: 9px;
+}
+
+div.ag-header-cell.ag-header-select-draggable[col-id='ag-Grid-SelectionColumn'] {
+  padding-left: 40px;
+}
+
+.ag-drag-handle.ag-row-drag {
+  .ag-icon.ag-icon-grip {
+    margin: auto;
+  }
+}
+
 .ag-theme-step-default.theme-specific,
 .ag-theme-step-compact.theme-specific {
   div.ag-center-cols-viewport {
@@ -70,61 +93,29 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     justify-content: center;
   }
 
-  .ag-header-select-draggable .ag-header-cell-comp-wrapper {
-    justify-content: end;
-  }
-
   .ag-header-cell {
     font-size: 14px;
     font-weight: 600;
 
-    // fix: Display descender line
-    padding: 0 11px;
-
     .LuiIcon {
       fill: lui.$surfie;
     }
   }
-
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 17px;
-    padding-right: 15px;
-  }
-
   .ag-text-area-input:focus {
     border-color: lui.$sea;
   }
 
-  .ag-cell[col-id="selection"] {
-    display: flex; // Fix that when you click below checkbox it doesn't process a click
-  }
-
-  // Fix that when you click below checkbox it doesn't process a click
-  .ag-cell-wrapper > *:not(.ag-cell-value, .ag-group-value) {
-    height: auto;
-  }
-
   .ag-row:last-of-type {
     border-bottom: 1px solid lui.$dew;
   }
 
   .ag-cell-label-container {
-    padding: 8px 0;
-
     // Help ag-grid to calculate column height in react portal
     height: fit-content;
   }
 
-
-  .ag-cell[aria-colindex="1"] {
-    padding-left: lui.$unit-rg;
-  }
-
-  .ag-cell {
-    padding-left: 11px;
-    padding-right: 11px;
-    display: flex;
-    align-items: center;
+  .ag-cell .ag-cell-wrapper {
+    width: 100%;
   }
 
   .ag-cell-wrap-text {
@@ -167,7 +158,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     }
   }
 
+
   .ag-cell {
+    display: flex;
+    align-items: center;
     font-weight: 400;
   }
 
@@ -217,25 +211,16 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     visibility: inherit;
   }
 
-  .ag-cell-wrapper {
-    width: 100%;
-  }
-
   .ag-row-highlight-above::after, .ag-row-highlight-below::after {
     content: '';
-    height: 2px;
+    height: 3px;
     background-color: transparent;
   }
 
   .ag-row-highlight-above::after {
-    top:-3px; // moves the top highlight to the position of the bottom highlight
     border-top: 2px dashed lui.$andrea;
   }
 
-  .ag-row-highlight-above:first-of-type::after {
-    top:0; // the first row highlight needs to in the normal position otherwise it is cut off by the top of the table
-  }
-
   .ag-row-highlight-below::after {
     border-bottom: 2px dashed lui.$andrea;
   }
@@ -266,19 +251,10 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
     font-size: 14px;
     font-weight: 600;
 
-    // fix: Display descender line
-    padding: 0 12px;
-
     .LuiIcon {
       fill: lui.$surfie;
     }
   }
-
-  .ag-header .ag-header-cell[aria-colindex="1"] {
-    padding-left: 32px;
-    padding-right: 12px;
-  }
-
   .ag-header-group-cell {
     font-weight: normal;
     font-size: 22px;
@@ -287,12 +263,4 @@ $grid-base-font-size: calc(#{lui.$base-font-size} - 1px);
   .ag-header-cell {
     font-size: 14px;
   }
-
-  .ag-row .ag-cell:first-of-type {
-    padding-left: 32px;
-  }
-
-  .ag-row .ag-cell:last-of-type {
-    padding-right: 32px;
-  }
 }

package/dist/src/components/Grid.d.ts

@@ -4,7 +4,12 @@ import { GridContextMenuComponent } from './gridHook';
 export interface GridBaseRow {
     id: string | number;
 }
-export interface GridProps {
+export interface GridOnRowDragEndProps<TData extends GridBaseRow> {
+    movedRow: TData;
+    targetRow: TData;
+    direction: -1 | 1;
+}
+export interface GridProps<TData extends GridBaseRow = GridBaseRow> {
     readOnly?: boolean;
     defaultPostSort?: boolean;
     selectable?: boolean;
@@ -14,11 +19,8 @@ export interface GridProps {
     externalSelectedItems?: any[];
     setExternalSelectedItems?: (items: any[]) => void;
     defaultColDef?: GridOptions['defaultColDef'];
-    columnDefs: ColDef[];
+    columnDefs: ColDef<TData>[];
     rowData: GridOptions['rowData'];
-    /**
-     * Whether select column is pinned.  Defaults to "left".
-     */
     selectColumnPinned?: ColDef['pinned'];
     noRowsOverlayText?: string;
     noRowsMatchingOverlayText?: string;
@@ -29,7 +31,7 @@ export interface GridProps {
     autoSelectFirstRow?: boolean;
     onColumnMoved?: GridOptions['onColumnMoved'];
     rowDragText?: GridOptions['rowDragText'];
-    onRowDragEnd?: (movedRow: any, targetRow: any, targetIndex: number) => Promise<void> | void;
+    onRowDragEnd?: (props: GridOnRowDragEndProps<TData>) => Promise<void> | void;
     alwaysShowVerticalScroll?: boolean;
     suppressColumnVirtualization?: GridOptions['suppressColumnVirtualisation'];
     /**
@@ -77,4 +79,4 @@ export interface GridProps {
 /**
  * Wrapper for AgGrid to add commonly used functionality.
  */
-export declare const Grid: ({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, ...params }: GridProps) => ReactElement;
+export declare const Grid: <TData extends GridBaseRow = GridBaseRow>({ "data-testid": dataTestId, defaultPostSort, rowSelection, suppressColumnVirtualization, theme, sizeColumns, selectColumnPinned, contextMenuSelectRow, singleClickEdit, rowData, rowHeight, selectable, ...params }: GridProps<TData>) => ReactElement;

package/dist/src/components/GridCell.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
+import { ColDef, EditableCallback, ICellEditorParams, ICellRendererParams } from 'ag-grid-community';
 import { EditableCallbackParams, SuppressKeyboardEventParams, ValueFormatterFunc, ValueFormatterParams, ValueGetterFunc, ValueGetterParams } from 'ag-grid-community';
 import { ReactElement } from 'react';
 import { GridBaseRow } from './Grid';
@@ -33,10 +33,9 @@ export interface SAValueFormatterFunc<TData = any, TValue = any> {
     (params: SAValueFormatterParams<TData, TValue>): string;
 }
 export interface ColDefT<TData extends GridBaseRow, ValueType = any> extends ColDef<TData, ValueType> {
-    _?: TData;
-    editable?: boolean | SAEditableCallback<TData, ValueType>;
-    valueGetter?: string | SAValueGetterFunc<TData, ValueType>;
-    valueFormatter?: string | SAValueFormatterFunc<TData, ValueType>;
+    editable?: boolean | EditableCallback<TData, ValueType>;
+    valueGetter?: string | ValueGetterFunc<TData, ValueType>;
+    valueFormatter?: string | ValueFormatterFunc<TData, ValueType>;
     cellRenderer?: ((props: SAICellRendererParams<TData, ValueType>) => ReactElement | string | false | null | undefined) | string;
     cellRendererParams?: {
         singleClickEdit?: boolean;

package/dist/src/components/gridForm/GridFormDropDown.d.ts

@@ -23,7 +23,7 @@ export declare const MenuHeaderItem: (title: string) => {
     value: string;
 };
 export type SelectOption = null | string | FinalSelectOption;
-export interface GridFormDropDownProps<TData extends GridBaseRow, TValue> extends CellEditorCommon {
+export interface GridFormDropDownProps<TData extends GridBaseRow, TValue = any> extends CellEditorCommon {
     className?: 'GridPopoverEditDropDown-containerSmall' | 'GridPopoverEditDropDown-containerMedium' | 'GridPopoverEditDropDown-containerLarge' | 'GridPopoverEditDropDown-containerUnlimited' | 'GridPopoverEditDropDown-containerAutoWidth' | string | undefined;
     filtered?: 'local' | 'reload';
     filterDefaultValue?: string;

package/dist/src/components/gridPopoverEdit/GridEditBoolean.d.ts

@@ -6,6 +6,6 @@ export interface GridEditBooleanEditorProps<TData extends GridBaseRow> extends C
         selectedRows: TData[];
         selectedRowIds: TData['id'][];
         checked: boolean;
-    }) => Promise<boolean>;
+    }) => Promise<boolean> | boolean;
 }
 export declare const GridEditBoolean: <TData extends GridBaseRow>(colDef: GenericCellColDef<TData, boolean>, editorProps: GridEditBooleanEditorProps<TData>) => ColDefT<TData>;

package/dist/src/components/index.d.ts

@@ -1,4 +1,3 @@
-export * from './clickInputWhenContainingCellClicked';
 export * from './ComponentLoadingWrapper';
 export * from './Grid';
 export * from './GridCell';
@@ -7,7 +6,6 @@ export * from './GridCellMultiEditor';
 export * from './GridCellMultiSelectClassRules';
 export * from './gridFilter';
 export * from './gridForm';
-export * from './gridHeader';
 export * from './gridHook';
 export * from './GridIcon';
 export * from './GridLoadableCell';

package/dist/src/contexts/GridContext.d.ts

@@ -42,7 +42,7 @@ export interface GridContextType<TData extends GridBaseRow> {
     startCellEditing: ({ rowId, colId }: {
         rowId: number;
         colId: string;
-    }) => void;
+    }) => Promise<void>;
     stopEditing: () => void;
     updatingCells: (props: {
         selectedRows: GridBaseRow[];