@linzjs/step-ag-grid 31.2.5 → 32.1.0

package/src/stories/grid/gridFormInteraction/GridFormPopoverMenuInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import * as test from 'storybook/test';
 import { expect, userEvent, within } from 'storybook/test';
@@ -171,3 +171,50 @@ GridFormPopoverMenuInteractions_.play = async ({ canvasElement }) => {
   await userEvent.type(textArea, '{Enter}');
   expect(updateValue).not.toHaveBeenCalled();
 };
+
+const AllHiddenTemplate: StoryFn<typeof GridFormPopoverMenu> = (props: GridFormPopoverMenuProps<any>) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={'react-menu-inline-test'}>
+      <GridContextProvider>
+        <h6 ref={anchorRef}>Interaction Test</h6>
+        <GridPopoverContext.Provider
+          value={{
+            anchorRef,
+            value: null,
+            updateValue,
+            data: { value: '' },
+            colId: '',
+            field: 'value',
+            selectedRows: [],
+            saving: false,
+            setSaving: () => {},
+            formatValue: (value) => value,
+            stopEditing: () => {},
+          }}
+        >
+          <GridFormPopoverMenu
+            {...props}
+            options={() => [
+              { label: 'Hidden one', value: 1, action: enabledAction, hidden: true },
+              { label: 'Hidden two', value: 2, action: enabledAction, hidden: true },
+            ]}
+          />
+        </GridPopoverContext.Provider>
+      </GridContextProvider>
+    </div>
+  );
+};
+
+// Regression test: when every option resolves to hidden, the menu must show "No actions"
+// rather than an empty menu body (isEmpty(options) alone doesn't catch this — the array is
+// non-empty, just every item is hidden).
+export const GridFormPopoverMenuAllOptionsHidden_ = AllHiddenTemplate.bind({});
+GridFormPopoverMenuAllOptionsHidden_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  expect(await canvas.findByText('No actions')).toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'Hidden one' })).not.toBeInTheDocument();
+  expect(canvas.queryByRole('menuitem', { name: 'Hidden two' })).not.toBeInTheDocument();
+};

package/src/stories/grid/gridFormInteraction/GridFormTextAreaInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormInteraction/GridFormTextInputInteraction.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext } from 'contexts/GridPopoverContext';
+import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 import { expect, fn, userEvent, within } from 'storybook/test';
 

package/src/stories/grid/gridFormStatic/GridFormDropDown.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormDropDown, GridFormDropDownProps, MenuHeaderItem } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormEditBearing.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormEditBearingCorrection.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormMessage.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridContextProvider, GridFormMessage, GridFormMessageProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormMultiSelect.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormMultiSelect, GridFormMultiSelectProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormPopoverMenu.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import {

package/src/stories/grid/gridFormStatic/GridFormTextArea.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormTextArea, GridFormTextAreaProps } from '../../..';

package/src/stories/grid/gridFormStatic/GridFormTextInput.stories.tsx

@@ -4,7 +4,7 @@ import '@linzjs/lui/dist/scss/base.scss';
 import '@linzjs/lui/dist/fonts';
 
 import { Meta, StoryFn } from '@storybook/react-vite';
-import { GridPopoverContext, GridPopoverContextType } from 'contexts/GridPopoverContext';
+import { GridPopoverContext, GridPopoverContextType } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
 
 import { GridBaseRow, GridContextProvider, GridFormTextInput, GridFormTextInputProps } from '../../..';

package/src/styles/GridLoadableCell.scss

@@ -1,6 +1,10 @@
 .GridLoadableCell-container {
   width: 100%;
-  display: flex;
   align-items: center;
+  display: flex;
   margin-bottom: 6px;
 }
+
+.GridCellAlignCenter .GridLoadableCell-container {
+  justify-content: center;
+}

package/src/utils/useSharedInterval.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from 'usehooks-ts';
+
+type Callback = () => void;
+
+const isNode = typeof process !== 'undefined' && process.env.NODE_ENV === 'test';
+
+let sharedIntervalId: ReturnType<typeof setInterval> | null = null;
+const callbacks = new Set<Callback>();
+
+const startSharedInterval = () => {
+  if (isNode || sharedIntervalId !== null) {
+    return;
+  }
+  sharedIntervalId = setInterval(() => {
+    callbacks.forEach((cb) => {
+      try {
+        cb();
+      } catch (e) {
+        console.error(e);
+      }
+    });
+  }, 100);
+}
+
+const stopSharedInterval = () => {
+  if (sharedIntervalId === null) {
+    return;
+  }
+  clearInterval(sharedIntervalId);
+  sharedIntervalId = null;
+}
+
+/**
+ * Like useInterval, but all callers share a single 100ms interval.
+ * Each callback is isolated in a try/catch so a throwing callback won't prevent others from running.
+ */
+export const useSharedInterval = (callback: () => void) => {
+  const savedCallback = useRef(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    const cb = () => savedCallback.current();
+    callbacks.add(cb);
+    startSharedInterval();
+
+    return () => {
+      callbacks.delete(cb);
+      if (callbacks.size === 0) {
+        stopSharedInterval();
+      }
+    };
+  }, []);
+}

package/src/utils/util.ts

@@ -1,5 +1,7 @@
 import { isEmpty, negate } from 'lodash-es';
-import natsort from 'natsort';
+import natsortModule from 'natsort';
+// natsort is a CJS module that sets exports.default, so interop wraps it in an extra layer
+const natsort: typeof natsortModule = (natsortModule as any).default ?? natsortModule;
 
 export type MaybePromise<T> = T | Promise<T>;
 
@@ -52,7 +54,7 @@ export const fnOrVar = (fn: any, param?: any) => (typeof fn === 'function' ? fn(
 export const sanitiseFileName = (filename: string): string => {
   const valid = filename
     .trim()
-    .replaceAll(/(\/|\\)+/g, '-')
+    .replaceAll(/([\/\\])+/g, '-')
     .replaceAll(/\s+/g, '_')
     .replaceAll(/[^\w\-āēīōūĀĒĪŌŪ.]/g, '');
   const parts = valid.split('.');