@linzjs/step-ag-grid 30.0.0 → 30.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GridTheme.scss +12 -0
- package/dist/src/components/gridFilter/GridFilterColumnsMultiSelect.d.ts +4 -0
- package/dist/step-ag-grid.cjs +51 -17
- package/dist/step-ag-grid.cjs.map +1 -1
- package/dist/step-ag-grid.esm.js +51 -17
- package/dist/step-ag-grid.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/gridFilter/GridFilterColumnsMultiSelect.tsx +30 -2
- package/src/components/gridPopoverEdit/{GridPopoverEditDropDown.ts → GridPopoverEditDropDown.tsx} +10 -2
- package/src/contexts/GridContextProvider.tsx +13 -8
- package/src/stories/grid/GridFilterColumnsMultiSelect.stories.tsx +5 -1
- package/src/styles/GridTheme.scss +12 -0
package/dist/step-ag-grid.esm.js
CHANGED
|
@@ -62082,6 +62082,9 @@ class GridFilterColumnsMultiSelect {
|
|
|
62082
62082
|
gui;
|
|
62083
62083
|
labelFormatter;
|
|
62084
62084
|
reactRoot = null;
|
|
62085
|
+
filterButtonClickListener = null;
|
|
62086
|
+
filterButton = null;
|
|
62087
|
+
hasOpened = false;
|
|
62085
62088
|
normalizeCellValue(value) {
|
|
62086
62089
|
if (typeof value === 'string')
|
|
62087
62090
|
return value.trim() === '' ? EMPTY_KEY : value;
|
|
@@ -62124,6 +62127,25 @@ class GridFilterColumnsMultiSelect {
|
|
|
62124
62127
|
this.gui = document.createElement('div');
|
|
62125
62128
|
this.reactRoot = createRoot(this.gui);
|
|
62126
62129
|
this.render();
|
|
62130
|
+
this.setupFilterButtonListener();
|
|
62131
|
+
}
|
|
62132
|
+
setupFilterButtonListener() {
|
|
62133
|
+
const columnId = this.params.column.getColId();
|
|
62134
|
+
this.filterButton = document.querySelector(`[col-id="${columnId}"] .ag-header-cell-filter-button`);
|
|
62135
|
+
if (this.filterButton) {
|
|
62136
|
+
this.filterButtonClickListener = (e) => {
|
|
62137
|
+
if (this.hasOpened) {
|
|
62138
|
+
e.stopPropagation();
|
|
62139
|
+
e.preventDefault();
|
|
62140
|
+
this.params.api.hidePopupMenu();
|
|
62141
|
+
this.hasOpened = false;
|
|
62142
|
+
}
|
|
62143
|
+
else {
|
|
62144
|
+
this.hasOpened = true;
|
|
62145
|
+
}
|
|
62146
|
+
};
|
|
62147
|
+
this.filterButton.addEventListener('click', this.filterButtonClickListener, true);
|
|
62148
|
+
}
|
|
62127
62149
|
}
|
|
62128
62150
|
render() {
|
|
62129
62151
|
if (!this.reactRoot)
|
|
@@ -62179,6 +62201,11 @@ class GridFilterColumnsMultiSelect {
|
|
|
62179
62201
|
this.render();
|
|
62180
62202
|
}
|
|
62181
62203
|
destroy() {
|
|
62204
|
+
if (this.filterButtonClickListener && this.filterButton) {
|
|
62205
|
+
this.filterButton.removeEventListener('click', this.filterButtonClickListener, true);
|
|
62206
|
+
this.filterButtonClickListener = null;
|
|
62207
|
+
this.filterButton = null;
|
|
62208
|
+
}
|
|
62182
62209
|
if (this.reactRoot) {
|
|
62183
62210
|
this.reactRoot.unmount();
|
|
62184
62211
|
this.reactRoot = null;
|
|
@@ -63793,16 +63820,22 @@ const GridPopoverEditBearingCorrection = (colDef, props) => GridPopoverEditBeari
|
|
|
63793
63820
|
},
|
|
63794
63821
|
});
|
|
63795
63822
|
|
|
63796
|
-
const GridPopoverEditDropDown = (colDef, props) =>
|
|
63797
|
-
|
|
63798
|
-
|
|
63799
|
-
|
|
63800
|
-
|
|
63801
|
-
|
|
63802
|
-
|
|
63803
|
-
|
|
63804
|
-
|
|
63805
|
-
|
|
63823
|
+
const GridPopoverEditDropDown = (colDef, props) => {
|
|
63824
|
+
colDef.cellRendererParams = {
|
|
63825
|
+
rightHoverElement: (jsx(GridIcon, { icon: 'ic_arrow_drop_down', title: '', className: 'GridCell-editableIcon GridCell-dropDownIcon' })),
|
|
63826
|
+
...colDef.cellRendererParams,
|
|
63827
|
+
};
|
|
63828
|
+
return GridCell(colDef, {
|
|
63829
|
+
editor: GridFormDropDown,
|
|
63830
|
+
...props,
|
|
63831
|
+
editorParams: {
|
|
63832
|
+
...props.editorParams,
|
|
63833
|
+
className: clsx({
|
|
63834
|
+
'GridPopoverEditDropDown-containerLarge': !props.editorParams?.className?.includes('GridPopoverEditDropDown-container'),
|
|
63835
|
+
}, props.editorParams?.className),
|
|
63836
|
+
},
|
|
63837
|
+
});
|
|
63838
|
+
};
|
|
63806
63839
|
|
|
63807
63840
|
const GridRenderPopoutMenuCell = (props) => {
|
|
63808
63841
|
const disabled = !fnOrVar(props.colDef?.editable, props);
|
|
@@ -63885,8 +63918,14 @@ const GridContextProvider = (props) => {
|
|
|
63885
63918
|
const enableMultilineBulkEditRef = useRef(false);
|
|
63886
63919
|
const idsBeforeUpdate = useRef([]);
|
|
63887
63920
|
const prePopupFocusedCell = useRef();
|
|
63888
|
-
const [externallySelectedItemsAreInSync,
|
|
63921
|
+
const [externallySelectedItemsAreInSync, _setExternallySelectedItemsAreInSync] = useState(false);
|
|
63889
63922
|
const externalFilters = useRef([]);
|
|
63923
|
+
// waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
|
|
63924
|
+
const externallySelectedItemsAreInSyncRef = useRef(false);
|
|
63925
|
+
const setExternallySelectedItemsAreInSync = useCallback((cond) => {
|
|
63926
|
+
_setExternallySelectedItemsAreInSync(cond);
|
|
63927
|
+
externallySelectedItemsAreInSyncRef.current = cond;
|
|
63928
|
+
}, [_setExternallySelectedItemsAreInSync]);
|
|
63890
63929
|
const setQuickFilter = useCallback((filter) => {
|
|
63891
63930
|
// If we don't clear the focused cell focus switches back to grid when typing in the quick filter input
|
|
63892
63931
|
gridApi?.clearFocusedCell();
|
|
@@ -64233,11 +64272,6 @@ const GridContextProvider = (props) => {
|
|
|
64233
64272
|
});
|
|
64234
64273
|
}
|
|
64235
64274
|
}, [gridApi]);
|
|
64236
|
-
// waitForExternallySelectedItemsToBeInSync can't use the state as it won't be updated during function execution
|
|
64237
|
-
const externallySelectedItemsAreInSyncRef = useRef(false);
|
|
64238
|
-
useEffect(() => {
|
|
64239
|
-
externallySelectedItemsAreInSyncRef.current = externallySelectedItemsAreInSync;
|
|
64240
|
-
}, [externallySelectedItemsAreInSync]);
|
|
64241
64275
|
const waitForExternallySelectedItemsToBeInSync = useCallback(async () => {
|
|
64242
64276
|
if (!hasExternallySelectedItemsRef.current) {
|
|
64243
64277
|
externallySelectedItemsAreInSyncRef.current = true;
|
|
@@ -64293,7 +64327,7 @@ const GridContextProvider = (props) => {
|
|
|
64293
64327
|
finally {
|
|
64294
64328
|
startCellEditingInProgressRef.current = false;
|
|
64295
64329
|
}
|
|
64296
|
-
}, [anyUpdating, gridApi, prePopupOps, waitForExternallySelectedItemsToBeInSync]);
|
|
64330
|
+
}, [anyUpdating, gridApi, prePopupOps, setExternallySelectedItemsAreInSync, waitForExternallySelectedItemsToBeInSync]);
|
|
64297
64331
|
const bulkEditingCompleteCallbackRef = useRef();
|
|
64298
64332
|
const onBulkEditingComplete = useCallback(async () => {
|
|
64299
64333
|
await bulkEditingCompleteCallbackRef.current?.();
|