@linzjs/step-ag-grid 14.9.4 → 15.0.0

package/dist/step-ag-grid.esm.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { LuiMiniSpinner, LuiIcon, LuiButton, LuiCheckboxInput, LuiButtonGroup } from '@linzjs/lui';
 import { AgGridReact } from 'ag-grid-react';
-import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, compact, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, sumBy, remove, castArray, flatten } from 'lodash-es';
+import { negate, isEmpty, xorBy, last, difference, defer as defer$1, omit, sortBy, findIndex, debounce as debounce$1, delay, partition, pick, groupBy, fromPairs, toPairs, isEqual, compact, filter, sumBy, pull, remove, castArray, flatten } from 'lodash-es';
 import * as React from 'react';
 import { createContext, useContext, useRef, useEffect, useCallback, useState, useMemo, forwardRef, useLayoutEffect, memo, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1 } from 'react';
 import ReactDOM, { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
@@ -42,6 +42,10 @@ const GridContext = createContext({
         console.error("no context provider for getColumns");
         return [];
     },
+    getColumnIds: () => {
+        console.error("no context provider for getColumnIds");
+        return [];
+    },
     invisibleColumnIds: undefined,
     setInvisibleColumnIds: () => {
         console.error("no context provider for setInvisibleColumnIds");
@@ -1068,6 +1072,14 @@ const GenericCellEditorComponentWrapper = (editor) => {
     });
 };
 
+const GridCellFillerColId = "gridCellFiller";
+const isGridCellFiller = (col) => col.colId === GridCellFillerColId;
+const GridCellFiller = () => ({
+    colId: GridCellFillerColId,
+    headerName: "",
+    flex: 1,
+});
+
 const Editor = (props) => ({
     component: GenericCellEditorComponentWrapper(props.editor),
     params: { ...props.editorParams, multiEdit: props.multiEdit },
@@ -2903,13 +2915,12 @@ const MenuRadioGroup = forwardRef(MenuRadioGroupFr);
 
 const GridFilterColumnsToggle = ({ saveState = true }) => {
     const [loaded, setLoaded] = useState(false);
-    const { getColumns, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
-    const columnStorageKey = useMemo(() => isEmpty(getColumns())
+    const { getColumns, getColumnIds, invisibleColumnIds, setInvisibleColumnIds } = useContext(GridContext);
+    const columnStorageKey = useMemo(() => isEmpty(getColumnIds())
         ? null // Grid hasn't been initialised yet
-        : "stepAgGrid_invisibleColumnIds_" +
-            getColumns()
-                .map((col) => col.colId || "")
-                .join("_"), [getColumns]);
+        : "stepAgGrid_invisibleColumnIds_" + getColumnIds().join("_"), [getColumnIds]);
+    // infer the invisible ids from colDefs
+    const resetColumns = useCallback(() => setInvisibleColumnIds(getColumnIds("initialHide")), [getColumnIds, setInvisibleColumnIds]);
     // Load state on start
     useEffect(() => {
         if (!columnStorageKey || loaded)
@@ -2918,10 +2929,7 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
             try {
                 const stored = window.localStorage.getItem(columnStorageKey);
                 if (!stored) {
-                    // infer the invisible ids from colDefs
-                    setInvisibleColumnIds(compact(getColumns()
-                        .filter((col) => col.initialHide)
-                        .map((col) => col.colId)));
+                    resetColumns();
                 }
                 else {
                     const invisibleIds = JSON.parse(stored ?? "[]");
@@ -2941,7 +2949,7 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
             }
             setLoaded(true);
         }
-    }, [columnStorageKey, getColumns, loaded, saveState, setInvisibleColumnIds]);
+    }, [columnStorageKey, getColumns, loaded, resetColumns, saveState, setInvisibleColumnIds]);
     // Save state on column visibility change
     useEffect(() => {
         loaded &&
@@ -2956,16 +2964,11 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
             ? invisibleColumnIds.filter((id) => id !== colId)
             : [...invisibleColumnIds, colId]);
     }, [invisibleColumnIds, setInvisibleColumnIds]);
-    const resetColumns = () => {
-        setInvisibleColumnIds([]);
-    };
     const numericRegExp = /^\d+$/;
     const isNonManageableColumn = (col) => {
         return col.lockVisible || col.colId == null || numericRegExp.test(col.colId);
     };
-    return (jsxs(Menu, { menuButton: jsx(GridFilterHeaderIconButton, { icon: "ic_columns", title: "Column visibility" }), menuClassName: "step-ag-grid-react-menu", portal: true, unmountOnClose: true, children: [jsx("div", { className: "GridFilterColumnsToggle-container", children: getColumns()
-                    .filter((col) => !!col.headerName)
-                    .map((col) => (jsx(MenuItem, { disabled: isNonManageableColumn(col), onClick: (e) => {
+    return (jsxs(Menu, { menuButton: jsx(GridFilterHeaderIconButton, { icon: "ic_columns", title: "Column visibility" }), menuClassName: "step-ag-grid-react-menu", portal: true, unmountOnClose: true, children: [jsx("div", { className: "GridFilterColumnsToggle-container", children: getColumns("headerName").map((col) => (jsx(MenuItem, { disabled: isNonManageableColumn(col), onClick: (e) => {
                         // Global react-menu MenuItem handler handles tabs
                         if (e.key !== "Tab") {
                             e.keepOpen = true;
@@ -4444,6 +4447,9 @@ const GridPopoverTextInput = (colDef, params) => GridCell(colDef, {
 
 const GridWrapper = ({ children, maxHeight }) => (jsx("div", { className: "Grid-wrapper", style: { maxHeight }, children: children }));
 
+const getColId = (colDef) => colDef.colId ?? "";
+const isFlexColumn = (colDef) => !!colDef.flex && !isGridCellFiller(colDef);
+
 /**
  * Context for AgGrid operations.
  * Make sure you wrap AgGrid in this.
@@ -4455,12 +4461,16 @@ const GridContextProvider = (props) => {
     const [columnApi, setColumnApi] = useState();
     const [gridReady, setGridReady] = useState(false);
     const [quickFilter, setQuickFilter] = useState("");
-    const [invisibleColumnIds, setInvisibleColumnIds] = useState();
+    const [invisibleColumnIds, _setInvisibleColumnIds] = useState();
     const testId = useRef();
     const idsBeforeUpdate = useRef([]);
     const prePopupFocusedCell = useRef();
     const [externallySelectedItemsAreInSync, setExternallySelectedItemsAreInSync] = useState(false);
     const externalFilters = useRef([]);
+    /**
+     * Make extra sure the GridCellFillerColId never gets added to invisibleColumnIds as it's dynamically determined
+     */
+    const setInvisibleColumnIds = (invisibleColumnIds) => _setInvisibleColumnIds(pull(invisibleColumnIds, GridCellFillerColId));
     /**
      * Set quick filter directly on grid, based on previously save quickFilter state.
      */
@@ -4560,9 +4570,7 @@ const GridContextProvider = (props) => {
      * Uses beforeUpdate ids to find new nodes.
      */
     const _getNewNodes = useCallback(() => {
-        return gridApiOp((gridApi) => difference(_getAllRowIds(), idsBeforeUpdate.current)
-            .map((rowId) => gridApi.getRowNode("" + rowId)) //
-            .filter((r) => r), () => []);
+        return gridApiOp((gridApi) => compact(difference(_getAllRowIds(), idsBeforeUpdate.current).map((rowId) => gridApi.getRowNode("" + rowId))), () => []);
     }, [_getAllRowIds, gridApiOp]);
     /**
      * Get grid nodes via rowIds.  If rowIds has no matching node the result may be smaller than expected.
@@ -4571,14 +4579,13 @@ const GridContextProvider = (props) => {
      * @param rowIds Row ids to get from grid.
      */
     const _rowIdsToNodes = useCallback((rowIds) => {
-        return gridApiOp((gridApi) => rowIds
-            .map((rowId) => gridApi.getRowNode("" + rowId)) //
-            .filter((r) => r), () => []);
+        return gridApiOp((gridApi) => compact(rowIds.map((rowId) => gridApi.getRowNode("" + rowId))), () => []);
     }, [gridApiOp]);
     /**
      * Get ColDefs, with flattened ColGroupDefs
      */
-    const getColumns = useCallback(() => columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], [columnApi]);
+    const getColumns = useCallback((filterDef = () => true) => filter(columnApi?.getAllColumns()?.map((col) => col.getColDef()) ?? [], filterDef), [columnApi]);
+    const getColumnIds = useCallback((filterDef = () => true) => compact(getColumns(filterDef).map(getColId)), [getColumns]);
     /**
      * Internal method for selecting and flashing rows.
      *
@@ -4837,9 +4844,7 @@ const GridContextProvider = (props) => {
         });
     }, [gridApiOp, modifyUpdating, selectNextEditableCell]);
     const redrawRows = useCallback((rowNodes) => {
-        gridApiOp((gridApi) => {
-            gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
-        });
+        gridApiOp((gridApi) => gridApi.redrawRows(rowNodes ? { rowNodes } : undefined));
     }, [gridApiOp]);
     // waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
     const externallySelectedItemsAreInSyncRef = useRef(false);
@@ -4863,20 +4868,29 @@ const GridContextProvider = (props) => {
         remove(externalFilters.current, (v) => v === filter);
         onFilterChanged().then();
     };
-    const isExternalFilterPresent = () => externalFilters.current.length > 0;
-    const doesExternalFilterPass = (node) => {
-        return externalFilters.current.every((filter) => filter(node.data, node));
-    };
+    const isExternalFilterPresent = () => !isEmpty(externalFilters.current);
+    const doesExternalFilterPass = (node) => externalFilters.current.every((filter) => filter(node.data, node));
     const getColDef = useCallback((colId) => (!!colId && gridApi?.getColumnDef(colId)) || undefined, [gridApi]);
+    /**
+     * Apply column visibility
+     */
     useEffect(() => {
-        if (columnApi && invisibleColumnIds) {
-            // show all columns that aren't invisible
-            columnApi.setColumnsVisible(compact(getColumns()
-                .filter((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId))
-                .map((col) => col.colId)), true);
-            // hide all invisible columns
-            columnApi.setColumnsVisible(invisibleColumnIds, false);
+        if (!columnApi || !invisibleColumnIds)
+            return;
+        // show all columns that aren't invisible
+        const newVisibleColumns = getColumns((col) => !col.lockVisible && col.colId && !invisibleColumnIds.includes(col.colId) && !isGridCellFiller(col));
+        // If there's no flex column showing add the filler column if defined
+        const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
+        if (!visibleColumnsContainsAFlex) {
+            const fillerColumn = getColumns(isGridCellFiller)[0];
+            fillerColumn && newVisibleColumns.push(fillerColumn);
         }
+        columnApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
+        // Hide the filler column if there's already a flex column
+        const invisibleColumnIdsWithOptionalFiller = visibleColumnsContainsAFlex
+            ? [...invisibleColumnIds, GridCellFillerColId]
+            : invisibleColumnIds;
+        columnApi.setColumnsVisible(invisibleColumnIdsWithOptionalFiller, false);
     }, [invisibleColumnIds, columnApi, getColumns]);
     /**
      * Download visible columns as a CSV
@@ -4887,7 +4901,10 @@ const GridContextProvider = (props) => {
         const fileName = csvExportParams?.fileName && sanitiseFileName(csvExportParams.fileName);
         const columnKeys = columnApi
             ?.getColumnState()
-            .filter((cs) => !cs.hide && gridApi.getColumnDef(cs.colId)?.headerComponentParams?.exportable !== false)
+            .filter((cs) => {
+            const colDef = gridApi.getColumnDef(cs.colId);
+            return !cs.hide && colDef && !isGridCellFiller(colDef) && colDef.headerComponentParams?.exportable !== false;
+        })
             .map((cs) => cs.colId);
         gridApi.exportDataAsCsv({
             columnKeys,
@@ -4899,6 +4916,7 @@ const GridContextProvider = (props) => {
     return (jsx(GridContext.Provider, { value: {
             getColDef,
             getColumns,
+            getColumnIds,
             invisibleColumnIds,
             setInvisibleColumnIds,
             gridReady,
@@ -27634,5 +27652,5 @@ const clickActionButton = async (text, container) => {
     });
 };
 
-export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, downloadCsvUseValueFormattersProcessCellCallback, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, sanitiseFileName, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
+export { ActionButton, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridHeaderSelect, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridPopoutEditMultiSelect, GridPopoutEditMultiSelectGrid, GridPopoverContext, GridPopoverContextProvider, GridPopoverEditBearing, GridPopoverEditBearingCorrection, GridPopoverEditBearingCorrectionEditorParams, GridPopoverEditBearingEditorParams, GridPopoverEditDropDown, GridPopoverMenu, GridPopoverMessage, GridPopoverTextArea, GridPopoverTextInput, GridRenderPopoutMenuCell, GridSubComponentContext, GridUpdatingContext, GridUpdatingContextProvider, GridWrapper, Menu, MenuButton, MenuDivider, MenuGroup, MenuHeader, MenuHeaderItem, MenuHeaderString, MenuItem, MenuRadioGroup, MenuSeparator, MenuSeparatorString, PopoutMenuSeparator, SubMenu, TextAreaInput, TextInputFormatted, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, clickActionButton, clickMenuOption, clickMultiSelectOption, closeMenu, closePopover, convertDDToDMS, countRows, deselectRow, downloadCsvUseValueFormattersProcessCellCallback, editCell, findActionButton, findCell, findCellContains, findMenuOption, findMultiSelectOption, findOpenPopover, findParentWithClass, findRow, fnOrVar, generateFilterGetter, getMultiSelectOptions, hasParentClass, isCellReadOnly, isFloat, isGridCellFiller, isNotEmpty, openAndClickMenuOption, openAndFindMenuOption, queryMenuOption, queryRow, sanitiseFileName, selectCell, selectRow, stringByteLengthIsInvalid, suppressCellKeyboardEvents, typeInputByLabel, typeInputByPlaceholder, typeOnlyInput, typeOtherInput, typeOtherTextArea, useDeferredPromise, useGenerateOrDefaultId, useGridContext, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, validateMenuOptions, wait$2 as wait };
 //# sourceMappingURL=step-ag-grid.esm.js.map