@linzjs/step-ag-grid 32.2.0 → 32.3.0

package/package.json

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

package/src/components/gridForm/GridFormSubComponentTextInput.tsx

@@ -2,7 +2,11 @@ import { ReactElement, useCallback, useContext, useEffect } from 'react';
 
 import { GridSubComponentContext } from '../../contexts/GridSubComponentContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
-import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import {
+  TextInputValidator,
+  textInputValidatorPropsToSummary,
+  TextInputValidatorProps,
+} from '../../utils/textValidator';
 import { CellEditorCommon } from '../GridCell';
 import { GridBaseRow } from '../types';
 
@@ -41,6 +45,7 @@ export const GridFormSubComponentTextInput = <TData extends GridBaseRow>(
       placeholder={props.placeholder}
       style={{ width: '100%' }}
       allowTabToSave={true}
+      validationSummary={textInputValidatorPropsToSummary(props)}
     />
   );
 };

package/src/components/gridForm/GridFormTextInput.tsx

@@ -2,7 +2,11 @@ import { useCallback, useMemo, useState } from 'react';
 
 import { useGridPopoverContext } from '../../contexts/GridPopoverContext';
 import { TextInputFormatted } from '../../lui/TextInputFormatted';
-import { TextInputValidator, TextInputValidatorProps } from '../../utils/textValidator';
+import {
+  TextInputValidator,
+  textInputValidatorPropsToSummary,
+  TextInputValidatorProps,
+} from '../../utils/textValidator';
 import { CellEditorCommon } from '../GridCell';
 import { useGridPopoverHook } from '../GridPopoverHook';
 import { GridBaseRow } from '../types';
@@ -63,6 +67,7 @@ export const GridFormTextInput = <TData extends GridBaseRow>(props: GridFormText
         style={{ width: props.width ?? 240 }}
         placeholder={props.placeholder ?? 'Type here'}
         helpText={helpText}
+        validationSummary={textInputValidatorPropsToSummary(props)}
       />
     </div>,
   );

package/src/lui/TextInputFormatted.test.tsx

@@ -0,0 +1,22 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, test } from 'vitest';
+
+import { TextInputFormatted } from './TextInputFormatted';
+
+describe('TextInputFormatted', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('sets data-validationsummary attribute from validationSummary prop', () => {
+    render(<TextInputFormatted value={''} onChange={() => {}} validationSummary={'required,maxLength=10'} />);
+
+    expect(screen.getByRole('textbox').getAttribute('data-validationsummary')).toBe('required,maxLength=10');
+  });
+
+  test('omits data-validationsummary attribute when validationSummary prop is not set', () => {
+    render(<TextInputFormatted value={''} onChange={() => {}} />);
+
+    expect(screen.getByRole('textbox').hasAttribute('data-validationsummary')).toBe(false);
+  });
+});

package/src/lui/TextInputFormatted.tsx

@@ -15,6 +15,7 @@ export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes
   error?: ReactElement | string | boolean | null;
   formatted?: string;
   allowTabToSave?: boolean;
+  validationSummary?: string;
 }
 
 export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
@@ -32,13 +33,22 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
           type={'text'}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
+          {...omit(props, [
+            'error',
+            'value',
+            'helpText',
+            'formatted',
+            'className',
+            'allowTabToSave',
+            'validationSummary',
+          ])}
           className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
             props.onMouseEnter?.(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
+          data-validationsummary={props.validationSummary}
         />
         <span className={'LuiTextInput-formatted'}>{props.formatted}</span>
       </span>

package/src/utils/textValidator.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest';
 
 import { GridBaseRow } from '../components/types';
-import { TextInputValidator, TextInputValidatorProps } from './textValidator';
+import { textInputValidatorPropsToSummary, TextInputValidator, TextInputValidatorProps } from './textValidator';
 
 describe('TextInputValidator', () => {
   test('number format', () => {
@@ -115,3 +115,47 @@ describe('TextInputValidator', () => {
     expect(TextInputValidator({ maxBytes: 2 }, 'a–', { id: 0 }, {})).toBe('Must be no longer than 2 bytes');
   });
 });
+
+describe('textInputValidatorPropsToSummary', () => {
+  test('empty props gives empty summary', () => {
+    expect(textInputValidatorPropsToSummary({})).toBe('');
+  });
+
+  test('required', () => {
+    expect(textInputValidatorPropsToSummary({ required: true })).toBe('required');
+    expect(textInputValidatorPropsToSummary({ required: false })).toBe('');
+  });
+
+  test('maxLength and maxBytes', () => {
+    expect(textInputValidatorPropsToSummary({ maxLength: 10 })).toBe('maxLength=10');
+    expect(textInputValidatorPropsToSummary({ maxBytes: 20 })).toBe('maxBytes=20');
+  });
+
+  test('invalid callback', () => {
+    expect(textInputValidatorPropsToSummary({ invalid: () => null })).toBe('invalid');
+  });
+
+  test('numberFormat fields', () => {
+    expect(
+      textInputValidatorPropsToSummary({
+        numberFormat: { precision: 3, scale: 2, gtMin: 0, geMin: 1, ltMax: 100, leMax: 99, notZero: true },
+      }),
+    ).toBe('precision=3,scale=2,gtMin=0,geMin=1,ltMax=100,leMax=99,notZero');
+  });
+
+  test('numberFormat with no set fields contributes nothing', () => {
+    expect(textInputValidatorPropsToSummary({ numberFormat: {} })).toBe('');
+  });
+
+  test('combines multiple props in order', () => {
+    expect(
+      textInputValidatorPropsToSummary({
+        required: true,
+        maxLength: 10,
+        maxBytes: 20,
+        invalid: () => null,
+        numberFormat: { scale: 2 },
+      }),
+    ).toBe('required,maxLength=10,maxBytes=20,invalid,scale=2');
+  });
+});

package/src/utils/textValidator.ts

@@ -81,3 +81,24 @@ export const TextInputValidator = <TData extends GridBaseRow>(
   }
   return null;
 };
+
+export const textInputValidatorPropsToSummary = <TData extends GridBaseRow>(
+  props: TextInputValidatorProps<TData>,
+): string => {
+  const parts: string[] = [];
+  if (props.required) parts.push('required');
+  if (props.maxLength != null) parts.push(`maxLength=${props.maxLength}`);
+  if (props.maxBytes != null) parts.push(`maxBytes=${props.maxBytes}`);
+  if (props.invalid) parts.push('invalid');
+  const nf = props.numberFormat;
+  if (nf) {
+    if (nf.precision != null) parts.push(`precision=${nf.precision}`);
+    if (nf.scale != null) parts.push(`scale=${nf.scale}`);
+    if (nf.gtMin != null) parts.push(`gtMin=${nf.gtMin}`);
+    if (nf.geMin != null) parts.push(`geMin=${nf.geMin}`);
+    if (nf.ltMax != null) parts.push(`ltMax=${nf.ltMax}`);
+    if (nf.leMax != null) parts.push(`leMax=${nf.leMax}`);
+    if (nf.notZero) parts.push('notZero');
+  }
+  return parts.join(',');
+};