@linzjs/step-ag-grid 32.4.2 → 32.6.0

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
 
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';

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

@@ -1,8 +1,4 @@
-import '../../../react-menu3/styles/index.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
+import { LuiFilterCharactersProvider } from '@linzjs/lui';
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
@@ -51,35 +47,93 @@ export const GridFormTextAreaInteractions_: typeof Template = Template.bind({});
 GridFormTextAreaInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
+  await expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
 
   const inputField = canvas.getByPlaceholderText('Type here');
   await userEvent.type(inputField, 'Hello');
 
-  expect(await canvas.findByText('Press tab to save')).toBeInTheDocument();
+  await expect(await canvas.findByText('Press tab to save')).toBeInTheDocument();
 
   // Test tab to save
   updateValue.mockClear();
   await userEvent.tab();
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
 
   // Test shift+tab to save
   updateValue.mockClear();
   await userEvent.tab({ shift: true });
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
 
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(inputField);
 
-  expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
+  await expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
   await userEvent.tab();
-  expect(updateValue).not.toHaveBeenCalled();
+  await expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab({ shift: true });
-  expect(updateValue).not.toHaveBeenCalled();
+  await expect(updateValue).not.toHaveBeenCalled();
+};
+
+const FilterTemplate: StoryFn<typeof GridFormTextArea> = (props: GridFormTextAreaProps<any>) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={'react-menu-inline-test'}>
+      <LuiFilterCharactersProvider>
+        <GridContextProvider>
+          <h6 ref={anchorRef}>Interaction Test</h6>
+          <GridPopoverContext.Provider
+            value={{
+              anchorRef,
+              value: null,
+              updateValue,
+              data: { value: null },
+              colId: '',
+              field: 'value',
+              selectedRows: [],
+              saving: false,
+              setSaving: () => {},
+              formatValue: (value) => value,
+              stopEditing: () => {},
+            }}
+          >
+            <GridFormTextArea {...props} />
+          </GridPopoverContext.Provider>
+        </GridContextProvider>
+      </LuiFilterCharactersProvider>
+    </div>
+  );
+};
+
+// By default (disableUnicodeCharacterFilter unset) invalid unicode characters are silently
+// converted or stripped as the user types, matching LuiTextAreaInput's behaviour.
+export const GridFormTextAreaUnicodeFilter_ = FilterTemplate.bind({});
+GridFormTextAreaUnicodeFilter_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // The popover mounts asynchronously (GridPopoverHook opens on a post-mount effect), so wait for it.
+  const inputField = await canvas.findByPlaceholderText('Type here');
+  // ’ (U+2019 right single quote) -> ' , — (U+2014 em dash) -> - , Ω (U+03A9, out of range) -> removed
+  await userEvent.type(inputField, 'It’s—cool Ω');
+
+  await expect(inputField).toHaveValue("It's-cool ");
+};
+
+// disableUnicodeCharacterFilter=true opts out of filtering, leaving invalid characters intact.
+export const GridFormTextAreaUnicodeFilterDisabled_ = FilterTemplate.bind({});
+GridFormTextAreaUnicodeFilterDisabled_.args = { disableUnicodeCharacterFilter: true };
+GridFormTextAreaUnicodeFilterDisabled_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const inputField = await canvas.findByPlaceholderText('Type here');
+  // Same chars as above, but left untouched since filtering is disabled
+  await userEvent.type(inputField, 'It’s—cool Ω');
+
+  await expect(inputField).toHaveValue('It’s—cool Ω');
 };

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

@@ -1,8 +1,4 @@
-import '../../../react-menu3/styles/index.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
+import { LuiFilterCharactersProvider } from '@linzjs/lui';
 import { StoryFn } from '@storybook/react-vite';
 import { GridPopoverContext } from '../../../contexts/GridPopoverContext';
 import { useRef } from 'react';
@@ -51,42 +47,100 @@ export const GridFormTextInputInteractions_: typeof Template = Template.bind({})
 GridFormTextInputInteractions_.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
 
-  expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
+  await expect(await canvas.findByText('Must not be empty')).toBeInTheDocument();
 
   const inputField = canvas.getByPlaceholderText('Type here');
   await userEvent.type(inputField, 'Hello');
 
-  expect(canvas.getByText('Press enter or tab to save')).toBeInTheDocument();
+  await expect(canvas.getByText('Press enter or tab to save')).toBeInTheDocument();
 
   // Test enter to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Enter}');
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0); // 0 = Enter
 
   // Test tab to save
   updateValue.mockClear();
   await userEvent.tab();
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), 1); // 1 = Tab
 
   // Test shift+tab to save
   updateValue.mockClear();
   await userEvent.tab({ shift: true });
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), -1); // -1 = Shift + tab
 
   // Test escape not to save
   updateValue.mockClear();
   await userEvent.type(inputField, '{Escape}');
-  expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
+  await expect(updateValue).toHaveBeenCalledWith(expect.anything(), 0);
 
   // Test invalid value doesn't save
   updateValue.mockClear();
   await userEvent.clear(inputField);
 
-  expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
+  await expect(canvas.getByText('Must not be empty')).toBeInTheDocument();
   await userEvent.type(inputField, '{Enter}');
-  expect(updateValue).not.toHaveBeenCalled();
+  await expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab();
-  expect(updateValue).not.toHaveBeenCalled();
+  await expect(updateValue).not.toHaveBeenCalled();
   await userEvent.tab({ shift: true });
-  expect(updateValue).not.toHaveBeenCalled();
+  await expect(updateValue).not.toHaveBeenCalled();
+};
+
+const FilterTemplate: StoryFn<typeof GridFormTextInput> = (props: GridFormTextInputProps<any>) => {
+  const anchorRef = useRef<HTMLHeadingElement>(null);
+
+  return (
+    <div className={'react-menu-inline-test'}>
+      <LuiFilterCharactersProvider>
+        <GridContextProvider>
+          <h6 ref={anchorRef}>Interaction Test</h6>
+          <GridPopoverContext.Provider
+            value={{
+              anchorRef,
+              value: null,
+              updateValue,
+              data: { value: null },
+              colId: '',
+              field: 'value',
+              selectedRows: [],
+              saving: false,
+              setSaving: () => {},
+              formatValue: (value) => value,
+              stopEditing: () => {},
+            }}
+          >
+            <GridFormTextInput {...props} />
+          </GridPopoverContext.Provider>
+        </GridContextProvider>
+      </LuiFilterCharactersProvider>
+    </div>
+  );
+};
+
+// By default (disableUnicodeCharacterFilter unset) invalid unicode characters are silently
+// converted or stripped as the user types, matching LuiTextInput's behaviour.
+export const GridFormTextInputUnicodeFilter_ = FilterTemplate.bind({});
+GridFormTextInputUnicodeFilter_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  // The popover mounts asynchronously (GridPopoverHook opens on a post-mount effect), so wait for it.
+  const inputField = await canvas.findByPlaceholderText('Type here');
+  // ’ (U+2019 right single quote) -> ' , — (U+2014 em dash) -> - , Ω (U+03A9, out of range) -> removed
+  await userEvent.type(inputField, 'It’s—cool Ω');
+
+  await expect(inputField).toHaveValue("It's-cool ");
+};
+
+// disableUnicodeCharacterFilter=true opts out of filtering, leaving invalid characters intact.
+export const GridFormTextInputUnicodeFilterDisabled_ = FilterTemplate.bind({});
+GridFormTextInputUnicodeFilterDisabled_.args = { disableUnicodeCharacterFilter: true };
+GridFormTextInputUnicodeFilterDisabled_.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+
+  const inputField = await canvas.findByPlaceholderText('Type here');
+  // Same chars as above, but left untouched since filtering is disabled
+  await userEvent.type(inputField, 'It’s—cool Ω');
+
+  await expect(inputField).toHaveValue('It’s—cool Ω');
 };

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

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

@@ -1,7 +1,6 @@
 import '../../../react-menu3/styles/index.scss';
 import '../../../styles/index.scss';
 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';

package/src/stories/grid/interactions/GridKeyboardInteractions.stories.tsx

@@ -1,8 +1,3 @@
-import '../../../styles/GridTheme.scss';
-import '../../../styles/index.scss';
-import '@linzjs/lui/dist/scss/base.scss';
-import '@linzjs/lui/dist/fonts';
-
 import { Meta, StoryFn } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 import { expect, within } from 'storybook/test';

package/src/utils/isChromatic.tsx

@@ -0,0 +1,30 @@
+import type { Decorator } from '@storybook/react-vite';
+import chromaticIsChromatic from 'chromatic/isChromatic';
+import { useEffect } from 'react';
+
+export interface WindowChromaticProps {
+  FORCE_IS_CHROMATIC?: boolean;
+}
+
+/**
+ * Wraps chromatic's isChromatic(). If window.FORCE_IS_CHROMATIC is set, returns that;
+ * otherwise returns whatever the real chromaticIsChromatic() reports.
+ */
+export const isChromatic = (): boolean => {
+  const forced = (window as WindowChromaticProps).FORCE_IS_CHROMATIC;
+  return forced ?? chromaticIsChromatic();
+};
+
+/** Story decorator that forces isChromatic() to false for the story's lifetime. */
+export const ChromaticAllowGridAutosize: Decorator = (Story) => {
+  // Set during render (not in useEffect) so it's already in place before Story
+  // renders in this same pass — Grid reads isChromatic() synchronously while rendering.
+  // oxlint-disable-next-line react/immutability
+  (window as WindowChromaticProps).FORCE_IS_CHROMATIC = false;
+  useEffect(() => {
+    return () => {
+      delete (window as WindowChromaticProps).FORCE_IS_CHROMATIC;
+    };
+  }, []);
+  return <Story />;
+};