@linzjs/step-ag-grid 30.4.4 → 31.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.
Files changed (81) hide show
  1. package/dist/GridTheme.scss +12 -7
  2. package/dist/index.css +6 -3
  3. package/dist/src/components/gridDragUtil.d.ts +10 -0
  4. package/dist/src/components/gridDragUtil.test.d.ts +1 -0
  5. package/dist/src/components/index.d.ts +1 -0
  6. package/dist/src/components/types.d.ts +4 -0
  7. package/dist/src/utils/__tests__/testQuick.ts +7 -7
  8. package/dist/src/utils/__tests__/testUtil.ts +3 -1
  9. package/dist/src/utils/__tests__/vitestUtil.ts +3 -1
  10. package/dist/src/utils/storybook.d.ts +4 -0
  11. package/dist/src/utils/useInterval.d.ts +17 -0
  12. package/dist/src/utils/useIsomorphicLayoutEffect.d.ts +17 -0
  13. package/dist/step-ag-grid.cjs +402 -218
  14. package/dist/step-ag-grid.cjs.map +1 -1
  15. package/dist/step-ag-grid.esm.js +402 -219
  16. package/dist/step-ag-grid.esm.js.map +1 -1
  17. package/package.json +26 -52
  18. package/src/components/Grid.tsx +75 -8
  19. package/src/components/PostSortRowsHook.ts +3 -1
  20. package/src/components/gridDragUtil.test.ts +115 -0
  21. package/src/components/gridDragUtil.ts +32 -0
  22. package/src/components/gridFilter/GridFilterColumnsMultiSelect.scss +18 -20
  23. package/src/components/gridFilter/GridFilterColumnsToggle.tsx +3 -4
  24. package/src/components/gridFilter/useGridFilter.ts +2 -2
  25. package/src/components/gridForm/GridFormDropDown.tsx +1 -1
  26. package/src/components/gridForm/GridFormInlineTextInput.tsx +1 -2
  27. package/src/components/gridForm/GridFormMultiSelect.tsx +10 -4
  28. package/src/components/gridForm/GridFormSubComponentTextArea.tsx +1 -2
  29. package/src/components/gridForm/GridFormSubComponentTextInput.tsx +1 -2
  30. package/src/components/gridForm/GridFormTextArea.tsx +1 -2
  31. package/src/components/gridForm/GridFormTextInput.tsx +1 -2
  32. package/src/components/gridHeader/GridHeaderSelect.tsx +3 -1
  33. package/src/components/gridHook/useGridCopy.ts +13 -3
  34. package/src/components/gridHook/useGridRangeSelection.ts +29 -16
  35. package/src/components/index.ts +1 -0
  36. package/src/components/types.ts +4 -0
  37. package/src/contexts/GridContextProvider.tsx +18 -7
  38. package/src/lui/ActionButton.scss +1 -1
  39. package/src/lui/ActionButton.tsx +5 -1
  40. package/src/lui/FormError.scss +1 -1
  41. package/src/lui/TextAreaInput.tsx +1 -1
  42. package/src/lui/TextInputFormatted.scss +13 -13
  43. package/src/lui/TextInputFormatted.tsx +1 -1
  44. package/src/react-menu3/README.md +66 -67
  45. package/src/react-menu3/components/ControlledMenu.tsx +2 -2
  46. package/src/react-menu3/components/Menu.tsx +1 -1
  47. package/src/react-menu3/components/MenuItem.tsx +1 -1
  48. package/src/react-menu3/components/MenuList.tsx +8 -2
  49. package/src/react-menu3/components/SubMenu.tsx +6 -6
  50. package/src/react-menu3/hooks/useBEM.ts +2 -1
  51. package/src/react-menu3/hooks/useItemState.ts +8 -4
  52. package/src/react-menu3/styles/_var.scss +1 -1
  53. package/src/react-menu3/styles/core.scss +6 -6
  54. package/src/react-menu3/styles/index.scss +11 -8
  55. package/src/react-menu3/styles/theme-dark.scss +1 -1
  56. package/src/react-menu3/styles/transitions/slide.scss +8 -8
  57. package/src/react-menu3/utils/utils.ts +2 -1
  58. package/src/stories/grid/FormTest.scss +13 -13
  59. package/src/stories/grid/GridDragRow.stories.tsx +61 -8
  60. package/src/stories/grid/GridInlineText.stories.tsx +2 -2
  61. package/src/stories/grid/GridSorting.stories.tsx +6 -2
  62. package/src/styles/ComponentLoadingWrapper.scss +1 -1
  63. package/src/styles/ContextMenu.scss +1 -1
  64. package/src/styles/Grid.scss +11 -9
  65. package/src/styles/GridCell.scss +1 -1
  66. package/src/styles/GridFilterColumnsToggle.scss +1 -1
  67. package/src/styles/GridFormInlineTextInput.scss +7 -7
  68. package/src/styles/GridFormMultiSelectGrid.scss +1 -1
  69. package/src/styles/GridFormSubComponentTextInput.scss +4 -4
  70. package/src/styles/GridIcon.scss +1 -1
  71. package/src/styles/GridPopoverMenu.scss +1 -1
  72. package/src/styles/GridTheme.scss +12 -7
  73. package/src/styles/index.scss +16 -16
  74. package/src/styles/react-menu-customisations.scss +119 -120
  75. package/src/utils/__tests__/testQuick.ts +7 -7
  76. package/src/utils/__tests__/testUtil.ts +3 -1
  77. package/src/utils/__tests__/vitestUtil.ts +3 -1
  78. package/src/utils/deferredPromise.ts +1 -1
  79. package/src/utils/storybook.ts +5 -0
  80. package/src/utils/useInterval.ts +44 -0
  81. package/src/utils/useIsomorphicLayoutEffect.ts +18 -0
@@ -57824,6 +57824,79 @@ var AgGridReact = class extends Component$1 {
57824
57824
 
57825
57825
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
57826
57826
 
57827
+ const NoContext = () => {
57828
+ console.error('Missing GridContextProvider');
57829
+ return null;
57830
+ };
57831
+ const GridContext = createContext({
57832
+ gridReady: false,
57833
+ gridRenderState: () => null,
57834
+ getCellValue: NoContext,
57835
+ getColDef: NoContext,
57836
+ getColumns: NoContext,
57837
+ getColumnIds: NoContext,
57838
+ invisibleColumnIds: undefined,
57839
+ setInvisibleColumnIds: NoContext,
57840
+ prePopupOps: NoContext,
57841
+ externallySelectedItemsAreInSync: false,
57842
+ setApis: NoContext,
57843
+ setQuickFilter: NoContext,
57844
+ selectRowsById: NoContext,
57845
+ getSelectedRows: NoContext,
57846
+ getFilteredSelectedRows: NoContext,
57847
+ getSelectedRowIds: NoContext,
57848
+ getFilteredSelectedRowIds: NoContext,
57849
+ selectRowsDiff: NoContext,
57850
+ selectRowsByIdWithFlash: NoContext,
57851
+ selectRowsWithFlashDiff: NoContext,
57852
+ flashRows: NoContext,
57853
+ flashRowsDiff: NoContext,
57854
+ focusByRowById: NoContext,
57855
+ ensureRowVisible: NoContext,
57856
+ ensureSelectedRowIsVisible: NoContext,
57857
+ getFirstRowId: NoContext,
57858
+ autoSizeColumns: NoContext,
57859
+ sizeColumnsToFit: NoContext,
57860
+ editingCells: NoContext,
57861
+ startCellEditing: NoContext,
57862
+ resetFocusedCellAfterCellEditing: NoContext,
57863
+ updatingCells: NoContext,
57864
+ redrawRows: NoContext,
57865
+ setExternallySelectedItemsAreInSync: NoContext,
57866
+ waitForExternallySelectedItemsToBeInSync: NoContext,
57867
+ addExternalFilter: NoContext,
57868
+ removeExternalFilter: NoContext,
57869
+ isExternalFilterPresent: NoContext,
57870
+ doesExternalFilterPass: NoContext,
57871
+ downloadCsv: NoContext,
57872
+ onBulkEditingComplete: NoContext,
57873
+ setOnBulkEditingComplete: NoContext,
57874
+ showNoRowsOverlay: NoContext,
57875
+ });
57876
+ const useGridContext = () => useContext(GridContext);
57877
+
57878
+ const GridUpdatingContext = createContext({
57879
+ anyUpdating: () => {
57880
+ console.error('Missing GridUpdatingContext');
57881
+ return false;
57882
+ },
57883
+ checkUpdating: () => {
57884
+ console.error('Missing GridUpdatingContext');
57885
+ return false;
57886
+ },
57887
+ updatingCols: () => {
57888
+ console.error('Missing GridUpdatingContext');
57889
+ return [];
57890
+ },
57891
+ // eslint-disable-next-line @typescript-eslint/require-await
57892
+ modifyUpdating: async () => {
57893
+ console.error('Missing GridUpdatingContext');
57894
+ },
57895
+ updatedDep: 0,
57896
+ });
57897
+
57898
+ const isStorybook = window.IS_STORYBOOK;
57899
+
57827
57900
  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
57828
57901
 
57829
57902
  function getDefaultExportFromCjs (x) {
@@ -58219,95 +58292,45 @@ function requireLodash_debounce () {
58219
58292
  requireLodash_debounce();
58220
58293
 
58221
58294
  var useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
58295
+
58296
+ /**
58297
+ * Copied from usehooks-ts
58298
+ *
58299
+ * Custom hook that creates an interval that invokes a callback function at a specified delay using the [`setInterval API`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval).
58300
+ * @param {() => void} callback - The function to be invoked at each interval.
58301
+ * @param {number | null} delay - The time, in milliseconds, between each invocation of the callback. Use `null` to clear the interval.
58302
+ * @public
58303
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-interval)
58304
+ * @example
58305
+ * ```tsx
58306
+ * const handleInterval = () => {
58307
+ * // Code to be executed at each interval
58308
+ * };
58309
+ * useInterval(handleInterval, 1000);
58310
+ * ```
58311
+ */
58222
58312
  function useInterval(callback, delay) {
58223
- const savedCallback = useRef(callback);
58224
- useIsomorphicLayoutEffect$1(() => {
58225
- savedCallback.current = callback;
58226
- }, [callback]);
58227
- useEffect(() => {
58228
- if (delay === null) {
58229
- return;
58230
- }
58231
- const id = setInterval(() => {
58232
- savedCallback.current();
58233
- }, delay);
58234
- return () => {
58235
- clearInterval(id);
58236
- };
58237
- }, [delay]);
58313
+ const savedCallback = useRef(callback);
58314
+ // Remember the latest callback if it changes.
58315
+ useIsomorphicLayoutEffect$1(() => {
58316
+ savedCallback.current = callback;
58317
+ }, [callback]);
58318
+ // Set up the interval.
58319
+ useEffect(() => {
58320
+ // Don't schedule if no delay is specified.
58321
+ // Note: 0 is a valid value for delay.
58322
+ if (delay === null) {
58323
+ return;
58324
+ }
58325
+ const id = setInterval(() => {
58326
+ savedCallback.current();
58327
+ }, delay);
58328
+ return () => {
58329
+ clearInterval(id);
58330
+ };
58331
+ }, [delay]);
58238
58332
  }
58239
58333
 
58240
- const NoContext = () => {
58241
- console.error('Missing GridContextProvider');
58242
- return null;
58243
- };
58244
- const GridContext = createContext({
58245
- gridReady: false,
58246
- gridRenderState: () => null,
58247
- getCellValue: NoContext,
58248
- getColDef: NoContext,
58249
- getColumns: NoContext,
58250
- getColumnIds: NoContext,
58251
- invisibleColumnIds: undefined,
58252
- setInvisibleColumnIds: NoContext,
58253
- prePopupOps: NoContext,
58254
- externallySelectedItemsAreInSync: false,
58255
- setApis: NoContext,
58256
- setQuickFilter: NoContext,
58257
- selectRowsById: NoContext,
58258
- getSelectedRows: NoContext,
58259
- getFilteredSelectedRows: NoContext,
58260
- getSelectedRowIds: NoContext,
58261
- getFilteredSelectedRowIds: NoContext,
58262
- selectRowsDiff: NoContext,
58263
- selectRowsByIdWithFlash: NoContext,
58264
- selectRowsWithFlashDiff: NoContext,
58265
- flashRows: NoContext,
58266
- flashRowsDiff: NoContext,
58267
- focusByRowById: NoContext,
58268
- ensureRowVisible: NoContext,
58269
- ensureSelectedRowIsVisible: NoContext,
58270
- getFirstRowId: NoContext,
58271
- autoSizeColumns: NoContext,
58272
- sizeColumnsToFit: NoContext,
58273
- editingCells: NoContext,
58274
- startCellEditing: NoContext,
58275
- resetFocusedCellAfterCellEditing: NoContext,
58276
- updatingCells: NoContext,
58277
- redrawRows: NoContext,
58278
- setExternallySelectedItemsAreInSync: NoContext,
58279
- waitForExternallySelectedItemsToBeInSync: NoContext,
58280
- addExternalFilter: NoContext,
58281
- removeExternalFilter: NoContext,
58282
- isExternalFilterPresent: NoContext,
58283
- doesExternalFilterPass: NoContext,
58284
- downloadCsv: NoContext,
58285
- onBulkEditingComplete: NoContext,
58286
- setOnBulkEditingComplete: NoContext,
58287
- showNoRowsOverlay: NoContext,
58288
- });
58289
- const useGridContext = () => useContext(GridContext);
58290
-
58291
- const GridUpdatingContext = createContext({
58292
- anyUpdating: () => {
58293
- console.error('Missing GridUpdatingContext');
58294
- return false;
58295
- },
58296
- checkUpdating: () => {
58297
- console.error('Missing GridUpdatingContext');
58298
- return false;
58299
- },
58300
- updatingCols: () => {
58301
- console.error('Missing GridUpdatingContext');
58302
- return [];
58303
- },
58304
- // eslint-disable-next-line @typescript-eslint/require-await
58305
- modifyUpdating: async () => {
58306
- console.error('Missing GridUpdatingContext');
58307
- },
58308
- updatedDep: 0,
58309
- });
58310
-
58311
58334
  var lib = {};
58312
58335
 
58313
58336
  var hasRequiredLib;
@@ -58547,7 +58570,9 @@ const GridHeaderSelect = ({ api }) => {
58547
58570
  };
58548
58571
  api.addEventListener('selectionChanged', clickHandler);
58549
58572
  return () => {
58550
- !api.isDestroyed() && api.removeEventListener('selectionChanged', clickHandler);
58573
+ if (!api.isDestroyed()) {
58574
+ api.removeEventListener('selectionChanged', clickHandler);
58575
+ }
58551
58576
  };
58552
58577
  }, [api, updateCounter]);
58553
58578
  const handleMultiSelect = () => {
@@ -58613,12 +58638,13 @@ const SettingsContext = createContext({});
58613
58638
  const useBEM = ({ block, element, modifiers, className }) => useMemo(() => {
58614
58639
  const blockElement = element ? `${block}__${element}` : block;
58615
58640
  let classString = blockElement;
58616
- modifiers &&
58641
+ if (modifiers) {
58617
58642
  Object.keys(modifiers).forEach((name) => {
58618
58643
  const value = modifiers[name];
58619
58644
  if (value)
58620
58645
  classString += ` ${blockElement}--${value === true ? name : `${name}-${value}`}`;
58621
58646
  });
58647
+ }
58622
58648
  let expandedClassName = typeof className === 'function' ? className(modifiers) : className;
58623
58649
  if (typeof expandedClassName === 'string') {
58624
58650
  expandedClassName = expandedClassName.trim();
@@ -58735,7 +58761,7 @@ function safeCall(fn, arg) {
58735
58761
  const internalKey = '_szhsinMenu';
58736
58762
  const getName = (component) => component[internalKey];
58737
58763
  const mergeProps = (target, source) => {
58738
- source &&
58764
+ if (source) {
58739
58765
  Object.keys(source).forEach((key) => {
58740
58766
  const targetProp = target[key];
58741
58767
  const sourceProp = source[key];
@@ -58749,6 +58775,7 @@ const mergeProps = (target, source) => {
58749
58775
  target[key] = sourceProp;
58750
58776
  }
58751
58777
  });
58778
+ }
58752
58779
  return target;
58753
58780
  };
58754
58781
  const parsePadding = (paddingStr) => {
@@ -58931,10 +58958,12 @@ const useItemState = (menuItemRef, focusRef, isHovering, isDisabled) => {
58931
58958
  const { isParentOpen, isSubmenuOpen, dispatch, updateItems } = useContext(MenuListItemContext);
58932
58959
  const timeoutId = useRef(undefined);
58933
58960
  const setHover = () => {
58934
- !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
58961
+ if (!isHovering && !isDisabled)
58962
+ dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
58935
58963
  };
58936
58964
  const unsetHover = () => {
58937
- !isDisabled && dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
58965
+ if (!isDisabled)
58966
+ dispatch(HoverActionTypes.UNSET, menuItemRef?.current, 0);
58938
58967
  };
58939
58968
  const onBlur = (e) => {
58940
58969
  // Focus has moved out of the entire item
@@ -58959,7 +58988,9 @@ const useItemState = (menuItemRef, focusRef, isHovering, isDisabled) => {
58959
58988
  clearTimeout(timeoutId.current);
58960
58989
  timeoutId.current = undefined;
58961
58990
  }
58962
- !keepHover && unsetHover();
58991
+ if (!keepHover) {
58992
+ unsetHover();
58993
+ }
58963
58994
  };
58964
58995
  useItemEffect(isDisabled, menuItemRef, updateItems);
58965
58996
  useEffect(() => () => clearTimeout(timeoutId.current), []);
@@ -58967,7 +58998,9 @@ const useItemState = (menuItemRef, focusRef, isHovering, isDisabled) => {
58967
58998
  // Don't set focus when parent menu is closed, otherwise focus will be lost
58968
58999
  // and onBlur event will be fired with relatedTarget setting as null.
58969
59000
  if (isHovering && isParentOpen) {
58970
- focusRef?.current && focusRef.current.focus();
59001
+ if (focusRef?.current) {
59002
+ focusRef.current.focus();
59003
+ }
58971
59004
  }
58972
59005
  }, [focusRef, isHovering, isParentOpen]);
58973
59006
  return {
@@ -58987,6 +59020,7 @@ const useMenuChange = (onMenuChange, isOpen) => {
58987
59020
  }, [onMenuChange, isOpen]);
58988
59021
  };
58989
59022
 
59023
+ //#region src/utils.ts
58990
59024
  const PRE_ENTER = 0;
58991
59025
  const ENTERING = 1;
58992
59026
  const ENTERED = 2;
@@ -58994,84 +59028,89 @@ const PRE_EXIT = 3;
58994
59028
  const EXITING = 4;
58995
59029
  const EXITED = 5;
58996
59030
  const UNMOUNTED = 6;
58997
- const STATUS = ['preEnter', 'entering', 'entered', 'preExit', 'exiting', 'exited', 'unmounted'];
58998
- const getState = status => ({
58999
- _s: status,
59000
- status: STATUS[status],
59001
- isEnter: status < PRE_EXIT,
59002
- isMounted: status !== UNMOUNTED,
59003
- isResolved: status === ENTERED || status > EXITING
59031
+ const STATUS = [
59032
+ "preEnter",
59033
+ "entering",
59034
+ "entered",
59035
+ "preExit",
59036
+ "exiting",
59037
+ "exited",
59038
+ "unmounted"
59039
+ ];
59040
+ const getState = (status) => ({
59041
+ _s: status,
59042
+ status: STATUS[status],
59043
+ isEnter: status < PRE_EXIT,
59044
+ isMounted: status !== UNMOUNTED,
59045
+ isResolved: status === ENTERED || status > EXITING
59004
59046
  });
59005
- const startOrEnd = unmounted => unmounted ? UNMOUNTED : EXITED;
59047
+ const startOrEnd = (unmounted) => unmounted ? UNMOUNTED : EXITED;
59006
59048
  const getEndStatus = (status, unmountOnExit) => {
59007
- switch (status) {
59008
- case ENTERING:
59009
- case PRE_ENTER:
59010
- return ENTERED;
59011
- case EXITING:
59012
- case PRE_EXIT:
59013
- return startOrEnd(unmountOnExit);
59014
- }
59015
- };
59016
- const getTimeout = timeout => typeof timeout === 'object' ? [timeout.enter, timeout.exit] : [timeout, timeout];
59017
- const nextTick = (transitState, status) => setTimeout(() => {
59018
- // Reading document.body.offsetTop can force browser to repaint before transition to the next state
59019
- isNaN(document.body.offsetTop) || transitState(status + 1);
59049
+ switch (status) {
59050
+ case ENTERING:
59051
+ case PRE_ENTER: return ENTERED;
59052
+ case EXITING:
59053
+ case PRE_EXIT: return startOrEnd(unmountOnExit);
59054
+ }
59055
+ };
59056
+ const getTimeout = (timeout) => typeof timeout === "object" ? [timeout.enter, timeout.exit] : [timeout, timeout];
59057
+ const _setTimeout = (...args) => setTimeout(...args);
59058
+ const nextTick = (transitState, status) => _setTimeout(() => {
59059
+ isNaN(document.body.offsetTop) || transitState(status + 1);
59020
59060
  }, 0);
59021
59061
 
59062
+ //#region src/useTransitionState.ts
59022
59063
  const updateState = (status, setState, latestState, timeoutId, onChange) => {
59023
- clearTimeout(timeoutId.current);
59024
- const state = getState(status);
59025
- setState(state);
59026
- latestState.current = state;
59027
- onChange && onChange({
59028
- current: state
59029
- });
59030
- };
59031
- const useTransitionState = ({
59032
- enter = true,
59033
- exit = true,
59034
- preEnter,
59035
- preExit,
59036
- timeout,
59037
- initialEntered,
59038
- mountOnEnter,
59039
- unmountOnExit,
59040
- onStateChange: onChange
59041
- } = {}) => {
59042
- const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
59043
- const latestState = useRef(state);
59044
- const timeoutId = useRef();
59045
- const [enterTimeout, exitTimeout] = getTimeout(timeout);
59046
- const endTransition = useCallback(() => {
59047
- const status = getEndStatus(latestState.current._s, unmountOnExit);
59048
- status && updateState(status, setState, latestState, timeoutId, onChange);
59049
- }, [onChange, unmountOnExit]);
59050
- const toggle = useCallback(toEnter => {
59051
- const transitState = status => {
59052
- updateState(status, setState, latestState, timeoutId, onChange);
59053
- switch (status) {
59054
- case ENTERING:
59055
- if (enterTimeout >= 0) timeoutId.current = setTimeout(endTransition, enterTimeout);
59056
- break;
59057
- case EXITING:
59058
- if (exitTimeout >= 0) timeoutId.current = setTimeout(endTransition, exitTimeout);
59059
- break;
59060
- case PRE_ENTER:
59061
- case PRE_EXIT:
59062
- timeoutId.current = nextTick(transitState, status);
59063
- break;
59064
- }
59065
- };
59066
- const enterStage = latestState.current.isEnter;
59067
- if (typeof toEnter !== 'boolean') toEnter = !enterStage;
59068
- if (toEnter) {
59069
- !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
59070
- } else {
59071
- enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
59072
- }
59073
- }, [endTransition, onChange, enter, exit, preEnter, preExit, enterTimeout, exitTimeout, unmountOnExit]);
59074
- return [state, toggle, endTransition];
59064
+ clearTimeout(timeoutId.current);
59065
+ const state = getState(status);
59066
+ setState(state);
59067
+ latestState.current = state;
59068
+ onChange && onChange({ current: state });
59069
+ };
59070
+ const useTransitionState = ({ enter = true, exit = true, preEnter, preExit, timeout, initialEntered, mountOnEnter, unmountOnExit, onStateChange: onChange } = {}) => {
59071
+ const [state, setState] = useState(() => getState(initialEntered ? ENTERED : startOrEnd(mountOnEnter)));
59072
+ const latestState = useRef(state);
59073
+ const timeoutId = useRef(0);
59074
+ const [enterTimeout, exitTimeout] = getTimeout(timeout);
59075
+ const endTransition = useCallback(() => {
59076
+ const status = getEndStatus(latestState.current._s, unmountOnExit);
59077
+ status && updateState(status, setState, latestState, timeoutId, onChange);
59078
+ }, [onChange, unmountOnExit]);
59079
+ return [
59080
+ state,
59081
+ useCallback((toEnter) => {
59082
+ const transitState = (status) => {
59083
+ updateState(status, setState, latestState, timeoutId, onChange);
59084
+ switch (status) {
59085
+ case ENTERING:
59086
+ if (enterTimeout >= 0) timeoutId.current = _setTimeout(endTransition, enterTimeout);
59087
+ break;
59088
+ case EXITING:
59089
+ if (exitTimeout >= 0) timeoutId.current = _setTimeout(endTransition, exitTimeout);
59090
+ break;
59091
+ case PRE_ENTER:
59092
+ case PRE_EXIT:
59093
+ timeoutId.current = nextTick(transitState, status);
59094
+ break;
59095
+ }
59096
+ };
59097
+ const enterStage = latestState.current.isEnter;
59098
+ if (typeof toEnter !== "boolean") toEnter = !enterStage;
59099
+ if (toEnter) !enterStage && transitState(enter ? preEnter ? PRE_ENTER : ENTERING : ENTERED);
59100
+ else enterStage && transitState(exit ? preExit ? PRE_EXIT : EXITING : startOrEnd(unmountOnExit));
59101
+ }, [
59102
+ endTransition,
59103
+ onChange,
59104
+ enter,
59105
+ exit,
59106
+ preEnter,
59107
+ preExit,
59108
+ enterTimeout,
59109
+ exitTimeout,
59110
+ unmountOnExit
59111
+ ]),
59112
+ endTransition
59113
+ ];
59075
59114
  };
59076
59115
 
59077
59116
  /**
@@ -59501,7 +59540,9 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
59501
59540
  if (state === 'closing') {
59502
59541
  setOverflowData(undefined); // reset overflowData after closing
59503
59542
  }
59504
- endTransition && safeCall(endTransition);
59543
+ if (endTransition) {
59544
+ safeCall(endTransition);
59545
+ }
59505
59546
  };
59506
59547
  const handlePosition = useCallback((noOverflowCheck) => {
59507
59548
  if (!containerRef?.current) {
@@ -59757,7 +59798,12 @@ const MenuList = ({ ariaLabel, menuClassName, menuStyle, arrowClassName, arrowSt
59757
59798
  let maxHeight;
59758
59799
  let overflowAmt;
59759
59800
  if (overflowData) {
59760
- setDownOverflow ? (overflowAmt = overflowData.overflowAmt) : (maxHeight = overflowData.height);
59801
+ if (setDownOverflow) {
59802
+ overflowAmt = overflowData.overflowAmt;
59803
+ }
59804
+ else {
59805
+ maxHeight = overflowData.height;
59806
+ }
59761
59807
  }
59762
59808
  const listContext = useMemo(() => ({
59763
59809
  reposSubmenu,
@@ -59935,7 +59981,8 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
59935
59981
  lastTabDownEl.current = activeElement;
59936
59982
  }
59937
59983
  else {
59938
- lastTabDownEl.current == activeElement && invokeSave(tabDirection);
59984
+ if (lastTabDownEl.current == activeElement)
59985
+ invokeSave(tabDirection);
59939
59986
  }
59940
59987
  }
59941
59988
  }
@@ -59952,7 +59999,8 @@ const ControlledMenuFr = ({ 'aria-label': ariaLabel, className, containerProps,
59952
59999
  lastEnterDownEl.current = activeElement;
59953
60000
  }
59954
60001
  else {
59955
- lastEnterDownEl.current == activeElement && invokeSave(CloseReason.CLICK);
60002
+ if (lastEnterDownEl.current == activeElement)
60003
+ invokeSave(CloseReason.CLICK);
59956
60004
  }
59957
60005
  }
59958
60006
  }
@@ -60107,7 +60155,7 @@ function MenuFr({ 'aria-label': ariaLabel, menuButton, instanceRef, onMenuChange
60107
60155
  const handleClose = useCallback((e) => {
60108
60156
  toggleMenu(false);
60109
60157
  if (e.key)
60110
- buttonRef.current && buttonRef.current.focus();
60158
+ buttonRef?.current?.focus();
60111
60159
  }, [toggleMenu]);
60112
60160
  const onClick = (e) => {
60113
60161
  if (skipOpen.current)
@@ -60248,7 +60296,7 @@ const MenuItemFr = ({ className, value, href, type, checked, disabled, children,
60248
60296
  e.preventDefault();
60249
60297
  e.stopPropagation();
60250
60298
  if (isAnchor) {
60251
- menuItemRef?.current && menuItemRef.current.click();
60299
+ menuItemRef?.current.click();
60252
60300
  }
60253
60301
  else {
60254
60302
  handleClick(e);
@@ -60320,7 +60368,8 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
60320
60368
  const openMenu = (...args) => {
60321
60369
  stopTimer();
60322
60370
  setHover();
60323
- !isDisabled && _openMenu(...args);
60371
+ if (!isDisabled)
60372
+ _openMenu(...args);
60324
60373
  };
60325
60374
  const setHover = () => !isHovering && !isDisabled && dispatch(HoverActionTypes.SET, menuItemRef?.current, 0);
60326
60375
  const delayOpen = (delay) => {
@@ -60349,7 +60398,7 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
60349
60398
  // LEFT key is bubbled up from submenu items
60350
60399
  case Keys.LEFT:
60351
60400
  if (isOpen) {
60352
- menuItemRef?.current && menuItemRef.current.focus();
60401
+ menuItemRef?.current.focus();
60353
60402
  toggleMenu(false);
60354
60403
  handled = true;
60355
60404
  }
@@ -60372,7 +60421,8 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
60372
60421
  case Keys.ENTER:
60373
60422
  case Keys.SPACE:
60374
60423
  case Keys.RIGHT:
60375
- openTrigger !== 'none' && openMenu(FocusPositions.FIRST);
60424
+ if (openTrigger !== 'none')
60425
+ openMenu(FocusPositions.FIRST);
60376
60426
  break;
60377
60427
  }
60378
60428
  };
@@ -60383,7 +60433,7 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
60383
60433
  // Don't set focus when parent menu is closed, otherwise focus will be lost
60384
60434
  // and onBlur event will be fired with relatedTarget setting as null.
60385
60435
  if (isHovering && isParentOpen) {
60386
- menuItemRef?.current && menuItemRef.current.focus();
60436
+ menuItemRef?.current?.focus();
60387
60437
  }
60388
60438
  else {
60389
60439
  toggleMenu(false);
@@ -60394,11 +60444,12 @@ const SubMenuFr = ({ 'aria-label': ariaLabel, className, disabled, direction, la
60394
60444
  }, [setOpenSubmenuCount, isOpen]);
60395
60445
  useImperativeHandle(instanceRef, () => ({
60396
60446
  openMenu: (...args) => {
60397
- isParentOpen && openMenu(...args);
60447
+ if (isParentOpen)
60448
+ openMenu(...args);
60398
60449
  },
60399
60450
  closeMenu: () => {
60400
60451
  if (isOpen) {
60401
- menuItemRef?.current && menuItemRef.current.focus();
60452
+ menuItemRef?.current?.focus();
60402
60453
  toggleMenu(false);
60403
60454
  }
60404
60455
  },
@@ -60694,7 +60745,17 @@ const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOn
60694
60745
  else {
60695
60746
  void navigator.clipboard.writeText(result).catch((err) => console.error('Failed to copy: ', err));
60696
60747
  }
60697
- }, [getCellValue, ranges, copyType]);
60748
+ }, [
60749
+ getCellValue,
60750
+ ranges,
60751
+ copyType,
60752
+ rangeStartRef,
60753
+ hasSelectedMoreThanOneCellRef,
60754
+ rangeEndRef,
60755
+ showToast,
60756
+ getColDef,
60757
+ getSelectedRowIds,
60758
+ ]);
60698
60759
  const onCopyEvent = useCallback((e) => {
60699
60760
  const rangeStart = rangeStartRef.current;
60700
60761
  const rangeEnd = rangeEndRef.current;
@@ -60707,7 +60768,7 @@ const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOn
60707
60768
  }
60708
60769
  e.preventDefault();
60709
60770
  onCopy();
60710
- }, [onCopy]);
60771
+ }, [onCopy, rangeStartRef, rangeEndRef, hasSelectedMoreThanOneCellRef]);
60711
60772
  const { cellContextMenu: rangeSelectContextMenu, contextMenuComponent: rangeSelectContextMenuComponent } = useGridContextMenu({
60712
60773
  contextMenu: (GridRangeSelectContextMenu),
60713
60774
  context: { onCopy, copyType, setCopyType },
@@ -60716,7 +60777,7 @@ const useGridCopy = ({ ranges, rangeStartRef, rangeEndRef, hasSelectedMoreThanOn
60716
60777
  return hasSelectedMoreThanOneCellRef.current && rangeStartRef.current !== null
60717
60778
  ? rangeSelectContextMenu(event)
60718
60779
  : cellContextMenu(event);
60719
- }, [cellContextMenu, rangeSelectContextMenu]);
60780
+ }, [cellContextMenu, rangeSelectContextMenu, rangeStartRef, hasSelectedMoreThanOneCellRef]);
60720
60781
  return {
60721
60782
  onCopyEvent,
60722
60783
  rangeSelectInterceptContextMenu,
@@ -60766,7 +60827,7 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60766
60827
  const endRowIndex = rangeSortedNodes.findIndex((node) => node.data.id === rangeEnd.rowId);
60767
60828
  const selectedNodes = rangeSortedNodes.slice(Math.min(startRowIndex, endRowIndex), Math.max(startRowIndex, endRowIndex) + 1);
60768
60829
  return { selectedColIds, selectedNodes };
60769
- }, []);
60830
+ }, [gridDivRef, rangeSortedNodesRef, rangeStartRef, rangeEndRef]);
60770
60831
  const redrawSelectedRanges = useCallback(() => {
60771
60832
  const gridElement = gridDivRef.current;
60772
60833
  const { selectedColIds, selectedNodes } = ranges();
@@ -60789,7 +60850,7 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60789
60850
  }
60790
60851
  });
60791
60852
  });
60792
- }, []);
60853
+ }, [ranges, gridDivRef]);
60793
60854
  const updateRangeSelectionCellClasses = useCallback((justRefresh) => {
60794
60855
  //
60795
60856
  // Get all grid cols, sort by pinned, then style: left
@@ -60827,7 +60888,7 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60827
60888
  return;
60828
60889
  }
60829
60890
  redrawSelectedRanges();
60830
- }, [ranges, redrawSelectedRanges]);
60891
+ }, [redrawSelectedRanges, rangeStartRef, rangeEndRef, gridDivRef, hasSelectedMoreThanOneCellRef, rangeSortedNodesRef]);
60831
60892
  // Handle updates after scroll / grid refresh
60832
60893
  useInterval(() => {
60833
60894
  updateRangeSelectionCellClasses(true);
@@ -60839,16 +60900,16 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60839
60900
  rangeStartRef.current = null;
60840
60901
  rangeEndRef.current = null;
60841
60902
  updateRangeSelectionCellClasses();
60842
- }, [updateRangeSelectionCellClasses]);
60903
+ }, [updateRangeSelectionCellClasses, hasSelectedMoreThanOneCellRef, rangeStartRef, rangeEndRef]);
60843
60904
  const mouseDownRef = useRef([0, 0]);
60844
60905
  const trackMouseDown = useCallback((e) => {
60845
60906
  mouseDownRef.current = [e.screenX, e.screenY];
60846
- }, []);
60907
+ }, [mouseDownRef]);
60847
60908
  const trackMouseUp = useCallback((e) => {
60848
60909
  if (rangeEndRef.current) {
60849
60910
  rangeEndRef.current.clickLocation = [e.screenX, e.screenY];
60850
60911
  }
60851
- }, []);
60912
+ }, [rangeEndRef]);
60852
60913
  useEffect(() => {
60853
60914
  document.addEventListener('mousedown', trackMouseDown, { capture: true });
60854
60915
  document.addEventListener('mouseup', trackMouseUp, { capture: true });
@@ -60856,7 +60917,7 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60856
60917
  document.removeEventListener('mousemove', trackMouseDown, { capture: true });
60857
60918
  document.removeEventListener('mouseup', trackMouseUp, { capture: true });
60858
60919
  };
60859
- }, []);
60920
+ }, [trackMouseDown, trackMouseUp]);
60860
60921
  const onCellMouseOver = useCallback((e, mouseDown) => {
60861
60922
  if (!enableRangeSelection) {
60862
60923
  return;
@@ -60888,14 +60949,21 @@ const useGridRangeSelection = ({ enableRangeSelection, gridDivRef, rangeStartRef
60888
60949
  window.getSelection()?.removeAllRanges();
60889
60950
  }
60890
60951
  updateRangeSelectionCellClasses();
60891
- }, [enableRangeSelection, updateRangeSelectionCellClasses]);
60952
+ }, [
60953
+ enableRangeSelection,
60954
+ updateRangeSelectionCellClasses,
60955
+ hasSelectedMoreThanOneCellRef,
60956
+ rangeEndRef,
60957
+ rangeSortedNodesRef,
60958
+ rangeStartRef,
60959
+ ]);
60892
60960
  const onCellMouseDown = useCallback((e) => {
60893
60961
  const button = e.event.buttons;
60894
60962
  if (button === 1) {
60895
60963
  clearRangeSelection();
60896
60964
  }
60897
60965
  onCellMouseOver(e, true);
60898
- }, [onCellMouseOver]);
60966
+ }, [onCellMouseOver, clearRangeSelection]);
60899
60967
  return { clearRangeSelection, ranges, onCellMouseDown, onCellMouseOver };
60900
60968
  };
60901
60969
 
@@ -61049,7 +61117,9 @@ const usePostSortRowsHook = ({ setStaleGrid }) => {
61049
61117
  };
61050
61118
  wasStale = true;
61051
61119
  // For some reason AgGrid mis-positions the inserted row.
61052
- lastNewNode && redrawRows();
61120
+ if (lastNewNode) {
61121
+ redrawRows();
61122
+ }
61053
61123
  }
61054
61124
  else if (changedRowCount == 1 && newRowCount === 0) {
61055
61125
  // User edited one row so, do nothing, retain sort
@@ -61244,7 +61314,9 @@ maxInitialWidth,
61244
61314
  selectRowsById([firstRowId]);
61245
61315
  }
61246
61316
  else {
61247
- focusByRowById(firstRowId, true);
61317
+ if (!isStorybook) {
61318
+ focusByRowById(firstRowId, true);
61319
+ }
61248
61320
  }
61249
61321
  }
61250
61322
  }, [
@@ -61601,7 +61673,7 @@ maxInitialWidth,
61601
61673
  const adjustedColDef = {
61602
61674
  ...colDef,
61603
61675
  // You cannot pass a width to a flex
61604
- width: !!colDef.flex ? undefined : colDef.width,
61676
+ width: colDef.flex ? undefined : colDef.width,
61605
61677
  ...(!!colDef.flex && { flexAutoSizeWidth: colDef.width }),
61606
61678
  // If this is allowed flex columns don't size based on flex
61607
61679
  suppressSizeToFit: true,
@@ -61674,10 +61746,36 @@ maxInitialWidth,
61674
61746
  el.classList.remove('ag-row-highlight-below');
61675
61747
  });
61676
61748
  }, []);
61749
+ const clearDragRowClasses = useCallback(() => {
61750
+ document.querySelectorAll(`.ag-row-dragging`)?.forEach((el) => {
61751
+ el.classList.remove('ag-row-dragging');
61752
+ });
61753
+ }, []);
61677
61754
  const gridElementRef = useRef(undefined);
61755
+ const multiDragAppliedRef = useRef(false);
61756
+ const multiDragCountRef = useRef(0);
61678
61757
  const onRowDragMove = useCallback((event) => {
61679
61758
  if (startDragYRef.current === null) {
61680
61759
  startDragYRef.current = event.y;
61760
+ // On first move event, apply ag-row-dragging class to all selected rows for multi-drag
61761
+ if (rowSelection === 'multiple' && event.node.isSelected()) {
61762
+ const selectedNodes = event.api.getSelectedNodes().filter((n) => n.displayed && n.data != null);
61763
+ if (selectedNodes.length > 1) {
61764
+ multiDragAppliedRef.current = true;
61765
+ multiDragCountRef.current = selectedNodes.length;
61766
+ // Find the grid body element for scoped queries
61767
+ const targetEl = event.event.target;
61768
+ const gridElement = targetEl?.closest('.ag-body');
61769
+ if (gridElement) {
61770
+ gridElementRef.current = gridElement;
61771
+ for (const node of selectedNodes) {
61772
+ gridElement.querySelectorAll(`[row-id='${node.data.id}']`)?.forEach((el) => {
61773
+ el.classList.add('ag-row-dragging');
61774
+ });
61775
+ }
61776
+ }
61777
+ }
61778
+ }
61681
61779
  }
61682
61780
  const yDiff = event.y - startDragYRef.current;
61683
61781
  const data = event.overNode?.data;
@@ -61696,7 +61794,7 @@ maxInitialWidth,
61696
61794
  el.classList.add(yDiff < 0 ? 'ag-row-highlight-above' : 'ag-row-highlight-below');
61697
61795
  });
61698
61796
  }
61699
- }, [clearHighlightRowClasses]);
61797
+ }, [clearHighlightRowClasses, rowSelection]);
61700
61798
  const onCellFocused = useCallback((event) => {
61701
61799
  if (event.rowIndex == null) {
61702
61800
  return;
@@ -61725,6 +61823,9 @@ maxInitialWidth,
61725
61823
  }, [paramsOnCellFocused]);
61726
61824
  const onRowDragEnd = useCallback((event) => {
61727
61825
  clearHighlightRowClasses();
61826
+ clearDragRowClasses();
61827
+ multiDragAppliedRef.current = false;
61828
+ multiDragCountRef.current = 0;
61728
61829
  gridElementRef.current = undefined;
61729
61830
  if (!params.onRowDragEnd || startDragYRef.current === null) {
61730
61831
  return;
@@ -61737,9 +61838,26 @@ maxInitialWidth,
61737
61838
  if (!movedRow || !targetRow || movedRow === targetRow || yDiff === 0) {
61738
61839
  return;
61739
61840
  }
61740
- void params.onRowDragEnd({ movedRow, targetRow, direction: yDiff > 0 ? 1 : -1 });
61841
+ // Determine movedRows: if dragged row is part of a multi-selection, include all selected & displayed rows
61842
+ let movedRows;
61843
+ if (rowSelection === 'multiple' && event.node.isSelected()) {
61844
+ movedRows = event.api
61845
+ .getSelectedNodes()
61846
+ .filter((n) => n.displayed && n.data != null)
61847
+ .sort((a, b) => (a.rowIndex ?? 0) - (b.rowIndex ?? 0))
61848
+ .map((n) => n.data);
61849
+ }
61850
+ else {
61851
+ movedRows = [movedRow];
61852
+ }
61853
+ // If targetRow is one of the moved rows, no-op
61854
+ if (movedRows.some((r) => r.id === targetRow.id)) {
61855
+ return;
61856
+ }
61857
+ const direction = yDiff > 0 ? 1 : -1;
61858
+ void params.onRowDragEnd({ movedRow, movedRows, targetRow, direction });
61741
61859
  }
61742
- }, [params, clearHighlightRowClasses]);
61860
+ }, [params, clearHighlightRowClasses, clearDragRowClasses, rowSelection]);
61743
61861
  useEffect(() => {
61744
61862
  if ((setExternalSelectedItems || setExternalSelectedIds) && selectable == null) {
61745
61863
  console.warn('<Grid/> has setExternalSelectedItems/setExternalSelectedIds parameter, but is missing selectable parameter,' +
@@ -61809,7 +61927,20 @@ maxInitialWidth,
61809
61927
  event.api.sizeColumnsToFit();
61810
61928
  }
61811
61929
  }, [sizeColumns]);
61812
- return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready', params.hideSelectedRow && 'Grid-hideSelectedRow'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsx(AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: clearHighlightRowClasses, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText, rowHeight: rowHeight, rowSelection: selectable
61930
+ return (jsxs("div", { "data-testid": dataTestId, className: clsx('Grid-container', theme, 'theme-specific', staleGrid && 'Grid-sortIsStale', gridReady && rowData && autoSized && 'Grid-ready', params.hideSelectedRow && 'Grid-hideSelectedRow'), children: [contextMenuComponent, rangeSelectContextMenuComponent, jsx("div", { style: { flex: 1 }, ref: gridDivRef, onCopy: onCopyEvent, children: jsx(AgGridReact, { theme: 'legacy', domLayout: params.domLayout, defaultColDef: defaultColDef, columnDefs: columnDefsAdjusted, getRowId: getRowId, rowData: rowData, alwaysShowVerticalScroll: params.alwaysShowVerticalScroll, animateRows: params.animateRows ?? false, doesExternalFilterPass: doesExternalFilterPass, isExternalFilterPresent: isExternalFilterPresent, maintainColumnOrder: true, noRowsOverlayComponent: noRowsOverlayComponent, onCellClicked: onCellClicked, onCellContextMenu: rangeSelectInterceptContextMenu, onCellDoubleClicked: onCellDoubleClick, onCellEditingStopped: onCellEditingStopped, onCellFocused: onCellFocused, onCellKeyDown: onCellKeyPress, onCellMouseDown: onCellMouseDown, onCellMouseOver: onCellMouseOver, onColumnMoved: columnMoved, onColumnResized: onColumnResized, onColumnVisible: () => void setInitialContentSize(), onGridReady: onGridReady, onGridSizeChanged: onGridSizeChanged, onModelUpdated: onModelUpdated, onRowClicked: params.onRowClicked, onRowDataUpdated: onRowDataUpdated, onRowDoubleClicked: params.onRowDoubleClicked, onRowDragCancel: () => {
61931
+ clearHighlightRowClasses();
61932
+ clearDragRowClasses();
61933
+ multiDragAppliedRef.current = false;
61934
+ multiDragCountRef.current = 0;
61935
+ }, onRowDragEnd: onRowDragEnd, onRowDragMove: onRowDragMove, onSelectionChanged: synchroniseExternalStateToGridSelection, onSortChanged: onSortChanged, pinnedBottomRowData: params.pinnedBottomRowData, pinnedTopRowData: params.pinnedTopRowData, postSortRows: params.onRowDragEnd || !defaultPostSort ? undefined : postSortRows, preventDefaultOnContextMenu: true, quickFilterParser: quickFilterParser, rowClassRules: params.rowClassRules, rowDragText: params.rowDragText ??
61936
+ (rowSelection === 'multiple'
61937
+ ? () => {
61938
+ const count = multiDragCountRef.current;
61939
+ if (count > 1)
61940
+ return `Moving ${count} rows`;
61941
+ return '';
61942
+ }
61943
+ : undefined), rowHeight: rowHeight, rowSelection: selectable
61813
61944
  ? {
61814
61945
  enableSelectionWithoutKeys: params.enableSelectionWithoutKeys ?? false,
61815
61946
  enableClickSelection: params.enableClickSelection ?? false,
@@ -62041,13 +62172,43 @@ const GridCellMultiEditor = (props, cellEditorSelector) => GridCell({
62041
62172
  ...props,
62042
62173
  });
62043
62174
 
62175
+ /**
62176
+ * Reorders rows by removing movedRows from the array and inserting them at the target position.
62177
+ * @param rows - The current row array.
62178
+ * @param movedRows - Rows to move, in desired insertion order (typically display order).
62179
+ * @param targetRow - The row to insert relative to.
62180
+ * @param direction - -1 inserts above targetRow, 1 inserts below targetRow.
62181
+ * @returns A new array with the rows reordered, or the original array if the operation is a no-op.
62182
+ */
62183
+ function reorderRows(rows, movedRows, targetRow, direction) {
62184
+ if (movedRows.length === 0)
62185
+ return rows;
62186
+ const movedIds = new Set(movedRows.map((r) => r.id));
62187
+ // If targetRow is one of the moved rows, no-op
62188
+ if (movedIds.has(targetRow.id))
62189
+ return rows;
62190
+ // Remove moved rows from the array
62191
+ const remaining = rows.filter((r) => !movedIds.has(r.id));
62192
+ // Find where to insert relative to the target
62193
+ const targetIndex = remaining.findIndex((r) => r.id === targetRow.id);
62194
+ if (targetIndex === -1)
62195
+ return rows;
62196
+ const insertIndex = direction === 1 ? targetIndex + 1 : targetIndex;
62197
+ // Insert movedRows at the calculated position
62198
+ const result = [...remaining];
62199
+ result.splice(insertIndex, 0, ...movedRows);
62200
+ return result;
62201
+ }
62202
+
62044
62203
  const useGridFilter = (filter) => {
62045
62204
  const { addExternalFilter, removeExternalFilter } = useGridContext();
62046
62205
  useEffect(() => {
62047
62206
  const thisFilter = filter;
62048
- thisFilter && addExternalFilter(thisFilter);
62207
+ if (thisFilter)
62208
+ addExternalFilter(thisFilter);
62049
62209
  return () => {
62050
- thisFilter && removeExternalFilter(thisFilter);
62210
+ if (thisFilter)
62211
+ removeExternalFilter(thisFilter);
62051
62212
  };
62052
62213
  }, [addExternalFilter, filter, removeExternalFilter]);
62053
62214
  };
@@ -62060,7 +62221,7 @@ const GridFilterButtons = ({ className, luiButtonProps, options, }) => {
62060
62221
  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}`))) }) }));
62061
62222
  };
62062
62223
 
62063
- 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}";
62224
+ 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:24px;margin-bottom:0}";
62064
62225
  styleInject(css_248z$3);
62065
62226
 
62066
62227
  const EMPTY_KEY = '__EMPTY__';
@@ -62259,7 +62420,8 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
62259
62420
  console.error(`stored invisible ids not strings: ${stored}`);
62260
62421
  }
62261
62422
  else {
62262
- invisibleIds && setInvisibleColumnIds(invisibleIds);
62423
+ if (invisibleIds)
62424
+ setInvisibleColumnIds(invisibleIds);
62263
62425
  }
62264
62426
  }
62265
62427
  }
@@ -62271,10 +62433,9 @@ const GridFilterColumnsToggle = ({ saveState = true }) => {
62271
62433
  }, [columnStorageKey, getColumns, loaded, resetColumns, saveState, setInvisibleColumnIds]);
62272
62434
  // Save state on column visibility change
62273
62435
  useEffect(() => {
62274
- loaded &&
62275
- columnStorageKey &&
62276
- saveState &&
62436
+ if (loaded && columnStorageKey && saveState) {
62277
62437
  window.localStorage.setItem(columnStorageKey, JSON.stringify(invisibleColumnIds));
62438
+ }
62278
62439
  }, [columnStorageKey, invisibleColumnIds, loaded, saveState]);
62279
62440
  const toggleColumn = useCallback((colId) => {
62280
62441
  if (!colId || !invisibleColumnIds)
@@ -62917,7 +63078,7 @@ styleInject(css_248z$1);
62917
63078
  const TextInputFormatted = (props) => {
62918
63079
  return (jsxs("div", { className: clsx('LuiTextInput GridLuiTextInput Grid-popoverContainer', props.error && 'hasError', props.className), children: [jsxs("span", { className: "LuiTextInput-inputWrapper", children: [jsx("input", { type: 'text', spellCheck: true, defaultValue: props.value, ...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave']), className: 'LuiTextInput-input', onMouseEnter: (e) => {
62919
63080
  e.currentTarget.focus();
62920
- props.onMouseEnter && props.onMouseEnter(e);
63081
+ props.onMouseEnter?.(e);
62921
63082
  }, "data-allowtabtosave": props.allowTabToSave }), jsx("span", { className: 'LuiTextInput-formatted', children: props.formatted })] }), jsx(FormError, { error: props.error, helpText: props.helpText })] }));
62922
63083
  };
62923
63084
 
@@ -63356,12 +63517,16 @@ const FilterInput = (props) => {
63356
63517
  void triggerSave();
63357
63518
  return;
63358
63519
  }
63359
- onSelectFilter && addCustomFilterValue();
63520
+ if (onSelectFilter) {
63521
+ addCustomFilterValue();
63522
+ }
63360
63523
  }
63361
63524
  lastKeyWasEnter.current = true;
63362
63525
  }
63363
63526
  else if (e.key === 'Control') {
63364
- lastKeyWasEnter.current && setFilter('');
63527
+ if (lastKeyWasEnter.current) {
63528
+ setFilter('');
63529
+ }
63365
63530
  lastKeyWasEnter.current = false;
63366
63531
  }
63367
63532
  else {
@@ -63382,7 +63547,9 @@ const MenuRadioItem = (props) => {
63382
63547
  e.keepOpen = true;
63383
63548
  toggleValue(item);
63384
63549
  }
63385
- item.checked && props.onChecked && props.onChecked();
63550
+ if (item.checked) {
63551
+ props.onChecked?.();
63552
+ }
63386
63553
  }, children: jsx(LuiCheckboxInput, { isChecked: item.checked ?? false, value: `${item.value}`, label: jsxs(Fragment, { children: [item.warning && jsx(GridIcon, { icon: 'ic_warning_outline', title: item.warning }), item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)] }), inputProps: {
63387
63554
  onClick: (e) => {
63388
63555
  // Click is handled by MenuItem onClick
@@ -63599,7 +63766,7 @@ const TextAreaInput = (props) => {
63599
63766
  e.currentTarget.focus();
63600
63767
  e.currentTarget.selectionStart = e.currentTarget.value.length;
63601
63768
  }
63602
- props.onMouseEnter && props.onMouseEnter(e);
63769
+ props.onMouseEnter?.(e);
63603
63770
  }, "data-allowtabtosave": props.allowTabToSave, children: props.value }) })] }), jsx(FormError, { error: props.error, helpText: props.helpText })] }));
63604
63771
  };
63605
63772
 
@@ -63995,7 +64162,7 @@ const GridContextProvider = (props) => {
63995
64162
  throw 'expected exception - exit_loop';
63996
64163
  });
63997
64164
  }
63998
- catch (ex) {
64165
+ catch {
63999
64166
  // ignore
64000
64167
  }
64001
64168
  return id;
@@ -64122,7 +64289,7 @@ const GridContextProvider = (props) => {
64122
64289
  const colId = col.colId;
64123
64290
  // We need to make sure we aren't currently editing a cell otherwise tests will fail
64124
64291
  // as they will start to edit the cell before this stuff has a chance to run
64125
- colId &&
64292
+ if (colId) {
64126
64293
  delay(() => {
64127
64294
  if (!gridApi.isDestroyed() &&
64128
64295
  isEmpty(gridApi.getEditingCells()) &&
@@ -64134,6 +64301,7 @@ const GridContextProvider = (props) => {
64134
64301
  gridApi.setFocusedCell(rowIndex, agGridSelectRowColId);
64135
64302
  }
64136
64303
  }, 100);
64304
+ }
64137
64305
  }
64138
64306
  }
64139
64307
  }
@@ -64150,7 +64318,9 @@ const GridContextProvider = (props) => {
64150
64318
  if (flash) {
64151
64319
  delay(() => {
64152
64320
  try {
64153
- !gridApi.isDestroyed() && gridApi.flashCells({ rowNodes });
64321
+ if (!gridApi.isDestroyed()) {
64322
+ gridApi.flashCells({ rowNodes });
64323
+ }
64154
64324
  }
64155
64325
  catch {
64156
64326
  // ignore, flash cells sometimes throws errors as nodes have gone out of scope
@@ -64441,7 +64611,9 @@ const GridContextProvider = (props) => {
64441
64611
  // !gridApi.isDestroyed && gridApi.setFocusedCell(cell.rowIndex, cell.column);
64442
64612
  // }
64443
64613
  // This is needed to trigger postSortRowsHook
64444
- !gridApi.isDestroyed && gridApi.refreshClientSideRowModel();
64614
+ if (!gridApi.isDestroyed) {
64615
+ gridApi.refreshClientSideRowModel();
64616
+ }
64445
64617
  }
64446
64618
  void (async () => {
64447
64619
  // Only focus next cell if user hasn't already manually changed focus
@@ -64467,7 +64639,9 @@ const GridContextProvider = (props) => {
64467
64639
  }, [gridApiOp, modifyUpdating, onBulkEditingComplete, selectNextEditableCell]);
64468
64640
  const redrawRows = useMemo(() => debounce((rowNodes) => {
64469
64641
  try {
64470
- gridApi && gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
64642
+ if (gridApi) {
64643
+ gridApi.redrawRows(rowNodes ? { rowNodes } : undefined);
64644
+ }
64471
64645
  }
64472
64646
  catch (ex) {
64473
64647
  console.error(ex);
@@ -64492,7 +64666,9 @@ const GridContextProvider = (props) => {
64492
64666
  const postHash = hasFocusedCell && getDisplayedRowsHash();
64493
64667
  // Ag-grid has a bug where if a focused cell comes into view after a filter the filter loses focus
64494
64668
  // So the focus is cleared to prevent this
64495
- preHash !== postHash && gridApi.clearFocusedCell();
64669
+ if (preHash !== postHash) {
64670
+ gridApi.clearFocusedCell();
64671
+ }
64496
64672
  }
64497
64673
  }, 200), [gridApi]);
64498
64674
  const addExternalFilter = useCallback((filter) => {
@@ -64521,7 +64697,9 @@ const GridContextProvider = (props) => {
64521
64697
  const visibleColumnsContainsAFlex = newVisibleColumns.some(isFlexColumn);
64522
64698
  if (!visibleColumnsContainsAFlex) {
64523
64699
  const fillerColumn = getColumns(isGridCellFiller)[0];
64524
- fillerColumn && newVisibleColumns.push(fillerColumn);
64700
+ if (fillerColumn) {
64701
+ newVisibleColumns.push(fillerColumn);
64702
+ }
64525
64703
  }
64526
64704
  gridApi.setColumnsVisible(compact(newVisibleColumns.map(getColId)), true);
64527
64705
  // Hide the filler column if there's already a flex column
@@ -64694,7 +64872,12 @@ const ActionButton = ({ icon, name, inProgressName, disabled, dataTestId, style,
64694
64872
  useEffect(() => {
64695
64873
  if (inProgress == lastInProgress)
64696
64874
  return;
64697
- inProgress ? setLocalInProgress(true) : setLocalInProgressDeferred(false, minimumInProgressTimeMs);
64875
+ if (inProgress) {
64876
+ setLocalInProgress(true);
64877
+ }
64878
+ else {
64879
+ setLocalInProgressDeferred(false, minimumInProgressTimeMs);
64880
+ }
64698
64881
  }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
64699
64882
  const buttonText = (jsxs("span", { className: 'ActionButton-minimalArea', children: [jsx("span", { className: 'ActionButton-minimalAreaDisplay', children: (localInProgress ? inProgressName : name) ?? name }), jsx("span", { className: 'ActionButton-minimalAreaExpand', children: name })] }));
64700
64883
  return (jsxs(LuiButton, { "data-testid": dataTestId, type: 'button', level: level, title: title ?? ariaLabel ?? name, buttonProps: { 'aria-label': ariaLabel ?? name }, className: clsx('lui-button-icon-right', 'ActionButton', className, localInProgress && 'ActionButton-inProgress', name != null && !className?.includes('ActionButton-fill') && 'ActionButton-minimal', name == null && 'ActionButton-iconOnly'), size: 'lg', style: style, onClick: () => {
@@ -64726,7 +64909,7 @@ const useDeferredPromise = () => {
64726
64909
  // End promise on unload
64727
64910
  useEffect(() => {
64728
64911
  return () => {
64729
- promiseReject.current && promiseReject.current();
64912
+ promiseReject.current?.();
64730
64913
  };
64731
64914
  }, []);
64732
64915
  return {
@@ -64758,5 +64941,5 @@ const useDeferredPromise = () => {
64758
64941
  };
64759
64942
  };
64760
64943
 
64761
- export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellBearingValueFormatter, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormInlineTextInput, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridInlineTextInput, 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, agGridSelectRowColId, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, 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 };
64944
+ export { ActionButton, CancelPromise, ComponentLoadingWrapper, ControlledMenu, Editor, FocusableItem, FormError, GenericCellEditorComponentWrapper, Grid, GridButton, GridCell, GridCellBearingValueFormatter, GridCellFiller, GridCellFillerColId, GridCellMultiEditor, GridCellMultiSelectClassRules, GridCellRenderer, GridContext, GridContextProvider, GridEditBoolean, GridFilterButtons, GridFilterColumnsMultiSelect, GridFilterColumnsToggle, GridFilterDownloadCsvButton, GridFilterHeaderIconButton, GridFilterQuick, GridFilters, GridFormDropDown, GridFormEditBearing, GridFormInlineTextInput, GridFormMessage, GridFormMultiSelect, GridFormMultiSelectGrid, GridFormPopoverMenu, GridFormSubComponentTextArea, GridFormSubComponentTextInput, GridFormTextArea, GridFormTextInput, GridIcon, GridInlineTextInput, 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, agGridSelectRowColId, bearingCorrectionRangeValidator, bearingCorrectionValueFormatter, bearingNumberParser, bearingRangeValidator, bearingStringValidator, bearingValueFormatter, colStateFlexed, colStateId, colStateNotFlexed, compareNaturalInsensitive, convertDDToDMS, createCheckboxMultiFilterParams, defaultValueFormatter, downloadCsvUseValueFormattersProcessCellCallback, findParentWithClass, fnOrVar, generateFilterGetter, hasParentClass, isFloat, isGridCellFiller, isNotEmpty, primitiveToSelectOption, reorderRows, sanitiseFileName, stringByteLengthIsInvalid, suppressCellKeyboardEvents, textMatch, useDeferredPromise, useGridContext, useGridContextMenu, useGridFilter, useGridPopoverContext, useGridPopoverHook, useMenuState, usePostSortRowsHook, wait, waitForCondition };
64762
64945
  //# sourceMappingURL=step-ag-grid.esm.js.map