@linzjs/step-ag-grid 29.6.0 → 29.8.0

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

@@ -5,6 +5,7 @@ import { AgGridReact } from 'ag-grid-react';
 import { negate, isEmpty, findIndex, defer, debounce as debounce$1, xorBy, last, difference, delay, omit, sortBy, partition, compact, pick, groupBy, fromPairs, toPairs, isEqual, pull, filter, sumBy, remove, flatten, castArray } from 'lodash-es';
 import React, { useRef, useLayoutEffect, useEffect, createContext, useContext, useState, useMemo, memo, forwardRef, useCallback, useReducer, cloneElement, useImperativeHandle, Fragment as Fragment$1, useId } from 'react';
 import { unstable_batchedUpdates, flushSync, createPortal } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 /**
  * If loading is true this returns a loading spinner, otherwise it returns its children.
@@ -3596,6 +3597,140 @@ const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
     return (jsx("div", { className: clsx(className, 'flex-col-center'), children: jsx(LuiButtonGroup, { children: options.map((option, index) => (jsx(LuiButton, { ...luiButtonProps, className: clsx(`lui-button lui-button-secondary`, selectedOption?.label === option.label && `lui-button-active`, luiButtonProps?.className), onClick: () => setSelectedOption(option), children: option.label }, `${index}`))) }) }));
 };
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$3 = ".GridFilterColsMultiSelect{background:#fff;font-family:Open Sans,system-ui,sans-serif;font-style:normal;font-weight:600;padding:8px}.GridFilterColsMultiSelect .LuiSelect-label-text{color:#6b6966;display:inline-block}.GridFilterColsMultiSelect .LuiCheckboxInput-item,.GridFilterColsMultiSelect .LuiCheckboxInput-selectAll{color:#2a292c;font-size:16px;font-weight:600;letter-spacing:0;line-height:20px;line-height:24px;margin-bottom:0}";
+styleInject(css_248z$3);
+
+const FilterUI = ({ allValues, selected, labels, labelFormatter, onToggleAll, onToggleOne, }) => {
+    const allChecked = allValues.length > 0 && selected.size === allValues.length;
+    const getDisplayLabel = (raw) => {
+        const mapped = labels[raw] ?? raw;
+        return labelFormatter ? labelFormatter(mapped) : mapped;
+    };
+    return (jsxs("div", { className: "GridFilterColsMultiSelect", children: [jsx("span", { className: "LuiSelect-label-text", children: "Filter column" }), jsx(LuiCheckboxInput, { className: "LuiCheckboxInput-selectAll", label: 'Select All', value: "true", isChecked: allChecked, onChange: (e) => onToggleAll(e.target.checked) }), allValues.map((val) => (jsx(LuiCheckboxInput, { className: "LuiCheckboxInput-item", label: getDisplayLabel(val), value: val, isChecked: selected.has(val), onChange: (e) => onToggleOne(val, e.target.checked) }, val)))] }));
+};
+class GridFilterColumnsMultiSelect {
+    params;
+    selectedValues = new Set();
+    labels = {};
+    allValues = [];
+    gui;
+    labelFormatter;
+    reactRoot = null;
+    loadFieldValues() {
+        const field = this.params.colDef.field;
+        const values = new Set();
+        this.params.api.forEachNode((node) => {
+            const data = node.data;
+            const cellValue = data?.[field];
+            if (data &&
+                typeof data === 'object' &&
+                field in data &&
+                typeof cellValue === 'string' &&
+                cellValue !== undefined &&
+                cellValue !== null) {
+                values.add(cellValue);
+            }
+        });
+        return Array.from(values).sort();
+    }
+    init(params) {
+        this.params = params;
+        this.labels = { ...params.labels };
+        this.labelFormatter = params.labelFormatter;
+        this.allValues = this.loadFieldValues();
+        this.selectedValues = new Set(this.allValues);
+        this.gui = document.createElement('div');
+        this.reactRoot = createRoot(this.gui);
+        this.render();
+    }
+    render() {
+        if (!this.reactRoot)
+            return;
+        this.reactRoot.render(jsx(FilterUI, { allValues: this.allValues, selected: this.selectedValues, labels: this.labels, labelFormatter: this.labelFormatter, onToggleAll: this.handleToggleAll.bind(this), onToggleOne: this.handleToggleOne.bind(this) }));
+    }
+    handleToggleAll(checked) {
+        if (checked) {
+            this.allValues.forEach((val) => this.selectedValues.add(val));
+        }
+        else {
+            this.selectedValues.clear();
+        }
+        this.render();
+        this.params.filterChangedCallback();
+    }
+    handleToggleOne(value, checked) {
+        if (checked) {
+            this.selectedValues.add(value);
+        }
+        else {
+            this.selectedValues.delete(value);
+        }
+        this.render();
+        this.params.filterChangedCallback();
+    }
+    getGui() {
+        return this.gui;
+    }
+    isFilterActive() {
+        return this.selectedValues.size > 0;
+    }
+    doesFilterPass(params) {
+        const field = this.params.colDef.field;
+        if (!params.data || typeof params.data !== 'object' || !(field in params.data)) {
+            return false;
+        }
+        const cellValue = params.data[field];
+        if (typeof cellValue !== 'string') {
+            return false;
+        }
+        return this.selectedValues.has(cellValue);
+    }
+    getModel() {
+        return this.selectedValues.size > 0 ? { values: Array.from(this.selectedValues) } : null;
+    }
+    setModel(model) {
+        this.selectedValues = new Set(model?.values || []);
+        this.render();
+    }
+    destroy() {
+        if (this.reactRoot) {
+            this.reactRoot.unmount();
+            this.reactRoot = null;
+        }
+    }
+}
+const createCheckboxMultiFilterParams = (labels = {}, labelFormatter) => ({
+    labels,
+    labelFormatter,
+});
+
 const GridFilterHeaderIconButton = forwardRef(function columnsButton({ icon, title, onClick, buttonProps, disabled = false, size = 'md' }, ref) {
     return (jsx(LuiButton, { ...buttonProps, type: 'button', level: 'tertiary', className: 'lui-button-icon-only', ref: ref, buttonProps: { 'aria-label': title }, title: title, onClick: onClick, disabled: disabled, children: jsx(LuiIcon, { name: icon, alt: 'Menu', size: size }) }));
 });
@@ -3863,33 +3998,6 @@ const GridSubComponentContext = createContext({
     context: null,
 });
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 var css_248z$2 = ".FormError{display:flex}.FormError-helpText{color:#6b6966;font-size:.75rem;font-weight:400}.FormError-text-icon{margin-right:4px;margin-top:4px}.FormError-error{align-items:center;color:#2a292c;font-size:14px;font-weight:600;padding-left:0}";
 styleInject(css_248z$2);
 
@@ -6005,5 +6113,5 @@ const useDeferredPromise = () => {
     };
 };
 
-export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, 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, TextInputValidator, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, convertDDToDMS, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
+export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridLoadableCell, GridNoRowsOverlay, GridNoRowsOverlayFr, 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, TextInputValidator, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
 //# sourceMappingURL=step-ag-grid.esm.js.map