@linzjs/step-ag-grid 32.4.2 → 32.5.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "32.4.2",
+  "version": "32.5.0",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/gridForm/GridFormTextArea.tsx

@@ -1,3 +1,4 @@
+import { useFilterCharacters } from '@linzjs/lui';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -13,6 +14,7 @@ export interface GridFormTextAreaProps<TData extends GridBaseRow>
   width?: string | number;
   onSave?: (props: { selectedRows: TData[]; value: string }) => Promise<boolean>;
   helpText?: string;
+  disableUnicodeCharacterFilter?: boolean;
 }
 
 export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextAreaProps<TData>): ReactElement => {
@@ -21,6 +23,8 @@ export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextA
   const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
+  const { filterInputEvent } = useFilterCharacters();
+
   const helpText = props.helpText ?? 'Press tab to save';
 
   const invalid = useCallback(() => TextInputValidator(props, value, data, {}), [props, value, data]);
@@ -53,7 +57,12 @@ export const GridFormTextArea = <TData extends GridBaseRow>(props: GridFormTextA
     <div className={'subComponent'} style={{ display: 'flex', flexDirection: 'row', width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          if (!props.disableUnicodeCharacterFilter) {
+            filterInputEvent(e);
+          }
+          setValue(e.target.value);
+        }}
         error={invalid()}
         placeholder={props.placeholder ?? 'Type here'}
         helpText={helpText}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -1,3 +1,4 @@
+import { useFilterCharacters } from '@linzjs/lui';
 import { useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
@@ -18,6 +19,7 @@ export interface GridFormTextInputProps<TData extends GridBaseRow>
   width?: string | number;
   onSave?: (props: { selectedRows: TData[]; value: string }) => Promise<boolean>;
   helpText?: string;
+  disableUnicodeCharacterFilter?: boolean;
 }
 
 export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormTextInputProps<TData>) => {
@@ -28,6 +30,8 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
   const initValue = useMemo(() => (initialVale == null ? '' : `${initialVale}`), [initialVale]);
   const [value, setValue] = useState(initValue);
 
+  const { filterInputEvent } = useFilterCharacters();
+
   const invalid = useCallback(() => TextInputValidator<TData>(props, value, data, {}), [data, props, value]);
 
   const save = useCallback(
@@ -61,7 +65,12 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
     <div style={{ display: 'flex', flexDirection: 'row' }} className={'FormTest subComponent'}>
       <TextInputFormatted
         value={value}
-        onChange={(e) => setValue(e.target.value)}
+        onChange={(e) => {
+          if (!props.disableUnicodeCharacterFilter) {
+            filterInputEvent(e);
+          }
+          setValue(e.target.value);
+        }}
         error={invalid()}
         formatted={props.units}
         style={{ width: props.width ?? 240 }}

package/src/lui/FormError.scss

@@ -2,6 +2,7 @@
 
 .FormError {
   display: flex;
+  line-height: 24px;
 
   &-helpText {
     font-size: 0.75rem;

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 Ω');
 };