@linzjs/step-ag-grid 1.5.3 → 1.5.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/Grid.tsx

@@ -4,7 +4,7 @@ import "./GridTheme.scss";
 import clsx from "clsx";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AgGridReact } from "ag-grid-react";
-import { AgGridEvent, CellClickedEvent, ColDef } from "ag-grid-community";
+import { CellClickedEvent, ColDef } from "ag-grid-community";
 import { CellEvent, GridReadyEvent, SelectionChangedEvent } from "ag-grid-community/dist/lib/events";
 import { GridOptions } from "ag-grid-community/dist/lib/entities/gridOptions";
 import { difference, last, xorBy } from "lodash-es";
@@ -28,7 +28,7 @@ export interface GridProps {
   externalSelectedItems?: any[];
   setExternalSelectedItems?: (items: any[]) => void;
   onGridReady?: GridOptions["onGridReady"];
-  defaultColDef: GridOptions["defaultColDef"];
+  defaultColDef?: GridOptions["defaultColDef"];
   columnDefs: GridOptions["columnDefs"];
   rowData: GridOptions["rowData"];
   noRowsOverlayText?: string;
@@ -38,8 +38,15 @@ export interface GridProps {
  * Wrapper for AgGrid to add commonly used functionality.
  */
 export const Grid = (params: GridProps): JSX.Element => {
-  const { gridReady, setGridApi, setQuickFilter, ensureRowVisible, selectRowsById, ensureSelectedRowIsVisible } =
-    useContext(GridContext);
+  const {
+    gridReady,
+    setGridApi,
+    setQuickFilter,
+    ensureRowVisible,
+    selectRowsById,
+    ensureSelectedRowIsVisible,
+    sizeColumnsToFit,
+  } = useContext(GridContext);
   const { checkUpdating } = useContext(UpdatingContext);
 
   const [internalQuickFilter, setInternalQuickFilter] = useState("");
@@ -156,15 +163,6 @@ export const Grid = (params: GridProps): JSX.Element => {
     [params.noRowsOverlayText],
   );
 
-  const sizeColumnsToFit = useCallback((event: AgGridEvent) => {
-    // @ts-ignore (gridBodyCtrl is private)
-    if (event.api.gridBodyCtrl == undefined) {
-      return;
-      // this is here because ag grid was throwing api undefined error when closing POPPED OUT panel
-    }
-    event.api.sizeColumnsToFit();
-  }, []);
-
   const refreshSelectedRows = useCallback((event: CellEvent): void => {
     // Force-refresh all selected rows to re-run class function, to update selection highlighting
     event.api.refreshCells({
@@ -227,6 +225,13 @@ export const Grid = (params: GridProps): JSX.Element => {
     [refreshSelectedRows],
   );
 
+  // When rows added or removed then resize columns
+  useEffect(() => {
+    if (columnDefs?.length) {
+      sizeColumnsToFit();
+    }
+  }, [columnDefs?.length, sizeColumnsToFit]);
+
   return (
     <div
       data-testid={params.dataTestId}

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -8,17 +8,15 @@ import { delay, fromPairs } from "lodash-es";
 import { LuiCheckboxInput } from "@linzjs/lui";
 import { GenericCellEditorParams, GridFormProps } from "../GridCell";
 import { useGridPopoverHook } from "../GridPopoverHook";
+import { MenuSeparatorString } from "@components/gridForm/GridFormDropDown";
 
-interface FinalSelectOption<ValueType> {
+interface MultiFinalSelectOption<ValueType> {
   value: ValueType;
   label?: JSX.Element | string;
   subComponent?: (props: any, ref: any) => any;
 }
 
-export const MenuSeparatorString = "_____MENU_SEPARATOR_____";
-export const MenuSeparator = Object.freeze({ value: MenuSeparatorString });
-
-export type SelectOption<ValueType> = ValueType | FinalSelectOption<ValueType>;
+export type MultiSelectOption<ValueType> = ValueType | MultiFinalSelectOption<ValueType>;
 
 export interface MultiSelectResult<RowType> {
   selectedRows: RowType[];
@@ -31,8 +29,8 @@ export interface GridFormMultiSelectProps<RowType extends GridBaseRow, ValueType
   filterPlaceholder?: string;
   onSave?: (props: MultiSelectResult<RowType>) => Promise<boolean>;
   options:
-    | SelectOption<ValueType>[]
-    | ((selectedRows: RowType[]) => Promise<SelectOption<ValueType>[]> | SelectOption<ValueType>[]);
+    | MultiSelectOption<ValueType>[]
+    | ((selectedRows: RowType[]) => Promise<MultiSelectOption<ValueType>[]> | MultiSelectOption<ValueType>[]);
   initialSelectedValues?: (selectedRows: RowType[]) => any[];
 }
 
@@ -42,7 +40,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
   const [filter, setFilter] = useState("");
   const [filteredValues, setFilteredValues] = useState<any[]>([]);
   const optionsInitialising = useRef(false);
-  const [options, setOptions] = useState<FinalSelectOption<ValueType>[]>();
+  const [options, setOptions] = useState<MultiFinalSelectOption<ValueType>[]>();
   const subSelectedValues = useRef<Record<string, any>>({});
   const [selectedValues, setSelectedValues] = useState<any[]>(() =>
     formProps.initialSelectedValues ? formProps.initialSelectedValues(props.selectedRows) : [],
@@ -75,10 +73,10 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
 
       const optionsList = optionsConf?.map((item) => {
         if (item == null || typeof item == "string" || typeof item == "number") {
-          item = { value: item as ValueType, label: item } as FinalSelectOption<ValueType>;
+          item = { value: item as ValueType, label: item } as MultiFinalSelectOption<ValueType>;
         }
         return item;
-      }) as any as FinalSelectOption<ValueType>[];
+      }) as any as MultiFinalSelectOption<ValueType>[];
 
       if (formProps.filtered) {
         // This is needed otherwise when filter input is rendered and sets autofocus

package/src/components/gridForm/GridFormPopoutMenu.tsx

@@ -11,7 +11,7 @@ export interface GridFormPopoutMenuProps<RowType extends GridBaseRow> extends Ge
 }
 
 /** Menu configuration types **/
-export const MenuSeparator = Object.freeze({ __isMenuSeparator__: true });
+export const PopoutMenuSeparator = Object.freeze({ __isMenuSeparator__: true });
 
 interface MenuSeparatorType {
   __isMenuSeparator__: boolean;
@@ -66,7 +66,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
   const selectedRowCount = props.selectedRows.length;
 
   const filteredOptions = options?.filter((menuOption) => {
-    return menuOption.label === MenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
+    return menuOption.label === PopoutMenuSeparator || selectedRowCount === 1 || menuOption.supportsMultiEdit;
   });
 
   const { popoverWrapper } = useGridPopoverHook(props);
@@ -74,7 +74,7 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
     <ComponentLoadingWrapper loading={!filteredOptions}>
       <div className={"Grid-popoverContainerList"}>
         {options?.map((item, index) =>
-          item.label === MenuSeparator ? (
+          item.label === PopoutMenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
             !item.hidden && (

package/src/components/gridForm/GridFormTextInput.tsx

@@ -10,7 +10,8 @@ export interface GridFormTextInputProps<RowType extends GridBaseRow> extends Gen
   required?: boolean;
   maxlength?: number;
   width?: string | number;
-  validate?: (value: string) => string | null;
+  // Return null for ok, otherwise an error string
+  validate?: (value: string, data: RowType) => string | null;
   onSave?: (selectedRows: RowType[], value: string) => Promise<boolean>;
 }
 
@@ -28,7 +29,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(props: GridFormPr
       return `Text must be no longer than ${formProps.maxlength} characters`;
     }
     if (formProps.validate) {
-      return formProps.validate(trimmedValue);
+      return formProps.validate(trimmedValue, props.data);
     }
     return null;
   }, [formProps, value]);

package/src/contexts/GridContext.tsx

@@ -17,6 +17,7 @@ export interface GridContextType {
   flashRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   ensureRowVisible: (id: number) => void;
   ensureSelectedRowIsVisible: () => void;
+  sizeColumnsToFit: () => void;
   stopEditing: () => void;
   updatingCells: (
     props: { selectedRows: GridBaseRow[]; field?: string },
@@ -68,6 +69,9 @@ export const GridContext = createContext<GridContextType>({
   ensureSelectedRowIsVisible: () => {
     console.error("no context provider for ensureSelectedRowIsVisible");
   },
+  sizeColumnsToFit: () => {
+    console.error("no context provider for sizeColumnsToFit");
+  },
   editingCells: () => {
     console.error("no context provider for editingCells");
     return false;

package/src/contexts/GridContextProvider.tsx

@@ -220,6 +220,15 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
     });
   };
 
+  /**
+   * Resize columns to fit container
+   */
+  const sizeColumnsToFit = (): void => {
+    gridApiOp((gridApi) => {
+      gridApi.sizeColumnsToFit();
+    });
+  };
+
   const stopEditing = (): void => gridApiOp((gridApi) => gridApi.stopEditing());
 
   const updatingCells = async (
@@ -283,6 +292,7 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         editingCells,
         ensureRowVisible,
         ensureSelectedRowIsVisible,
+        sizeColumnsToFit,
         stopEditing,
         updatingCells,
       }}