@abgov/jsonforms-components 1.2.0 → 1.2.2

package/index.esm.js

@@ -2399,9 +2399,29 @@ const GoAInputBaseControl = props => {
   });
 };
 
+/**
+ * Checks input controls data value to determine is required and has any data.
+ * @param props - The JsonForm control props
+ * @returns true if there is no data and is a required field
+ */
+const isRequiredAndHasNoData = props => {
+  const {
+    data,
+    required
+  } = props;
+  return required && (data === undefined || data.length === 0);
+};
+/**
+ * Checks the key press value to determine if the key press is a 'Shift' or 'Tab'.
+ * @param key - The key press value
+ * @returns true if the key pressed is not a shift or tab key being pressed, otherwise false
+ */
+const isNotKeyPressTabOrShift = key => {
+  return !(key === 'Tab' || key === 'Shift') && key !== undefined;
+};
+
 const GoAInputText = props => {
   var _a, _b, _c, _d;
-  // eslint-disable-next-line
   const {
     data,
     config,
@@ -2434,7 +2454,7 @@ const GoAInputText = props => {
     // side effect that causes the validation to render when it shouldnt.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         if (autoCapitalize === true) {
           handleChange(path, value.toUpperCase());
         } else {
@@ -2443,10 +2463,12 @@ const GoAInputText = props => {
       }
     },
     onBlur: (name, value) => {
-      if (autoCapitalize === true) {
-        handleChange(path, value.toUpperCase());
-      } else {
-        handleChange(path, value);
+      if (isRequiredAndHasNoData(props)) {
+        if (autoCapitalize) {
+          handleChange(path, value.toUpperCase());
+        } else {
+          handleChange(path, value);
+        }
       }
     }
   }, (_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.componentProps));
@@ -2486,7 +2508,7 @@ const MultiLineText = props => {
     // Note: Paul Jan-09-2023. The latest ui-component come with the maxCount. We need to uncomment the following line when the component is updated
     // maxCount={schema.maxLength || 256}
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         if (autoCapitalize === true) {
           handleChange(path, value.toUpperCase());
         } else {
@@ -2587,14 +2609,16 @@ const GoADateInput = props => {
     // side effect that causes the validation to render when it shouldn't.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         value = standardizeDate(value) || '';
         handleChange(path, value);
       }
     },
     onBlur: (name, value) => {
-      value = standardizeDate(value) || '';
-      handleChange(path, value);
+      if (isRequiredAndHasNoData(props)) {
+        value = standardizeDate(value) || '';
+        handleChange(path, value);
+      }
     }
   }, reformatDateProps((_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps)));
 };
@@ -2640,7 +2664,7 @@ const GoANumberInput = props => {
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         let newValue = '';
         if (value !== '') {
           newValue = +value;
@@ -2649,11 +2673,13 @@ const GoANumberInput = props => {
       }
     },
     onBlur: (name, value) => {
-      let newValue = '';
-      if (value !== '') {
-        newValue = +value;
+      if (isRequiredAndHasNoData(props)) {
+        let newValue = '';
+        if (value !== '') {
+          newValue = +value;
+        }
+        handleChange(path, newValue);
       }
-      handleChange(path, newValue);
     },
     //Dont trigger the handleChange event on the onChange event as it will cause
     //issue with the error message from displaying, use keyPress or the onBlur event instead
@@ -2702,7 +2728,7 @@ const GoAInputInteger = props => {
     name: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.name) || `${id || label}-input`,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         let newValue = '';
         if (value !== '') {
           newValue = +value;
@@ -2711,11 +2737,13 @@ const GoAInputInteger = props => {
       }
     },
     onBlur: (name, value) => {
-      let newValue = '';
-      if (value !== '') {
-        newValue = +value;
+      if (isRequiredAndHasNoData(props)) {
+        let newValue = '';
+        if (value !== '') {
+          newValue = +value;
+        }
+        handleChange(path, newValue);
       }
-      handleChange(path, newValue);
     },
     //Dont trigger the handleChange event on the onChange event as it will cause
     //issue with the error message from displaying, use keyPress or the onBlur event instead
@@ -2758,14 +2786,16 @@ const GoADateTimeInput = props => {
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
       var _a;
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         value = isValidDate(value) ? (_a = new Date(value)) === null || _a === void 0 ? void 0 : _a.toISOString() : '';
         handleChange(path, value);
       }
     },
     onBlur: (name, value) => {
-      value = isValidDate(value) ? new Date(value).toISOString() : '';
-      handleChange(path, value);
+      if (isRequiredAndHasNoData(props)) {
+        value = isValidDate(value) ? new Date(value).toISOString() : '';
+        handleChange(path, value);
+      }
     }
   }, (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps));
 };
@@ -2802,14 +2832,16 @@ const GoATimeInput = props => {
     disabled: !enabled,
     testId: (appliedUiSchemaOptions === null || appliedUiSchemaOptions === void 0 ? void 0 : appliedUiSchemaOptions.testId) || `${id}-input`,
     onBlur: (name, value) => {
-      handleChange(path, value);
+      if (isRequiredAndHasNoData(props)) {
+        handleChange(path, value);
+      }
     },
     // Dont use handleChange in the onChange event, use the keyPress or onBlur.
     // If you use it onChange along with keyPress event it will cause a
     // side effect that causes the validation to render when it shouldnt.
     onChange: (name, value) => {},
     onKeyPress: (name, value, key) => {
-      if (!(key === 'Tab' || key === 'Shift')) {
+      if (isNotKeyPressTabOrShift(key)) {
         handleChange(path, value);
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/Inputs/InputDateTimeControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputDateTimeProps = CellProps & WithClassname & WithInputProps;
+export type GoAInputDateTimeProps = CellProps & WithClassname & WithInputProps;
 export declare const GoADateTimeInput: (props: GoAInputDateTimeProps) => JSX.Element;
 export declare const GoADateTimeControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoADateTimeControlTester: RankedTester;
 export declare const GoAInputDateTimeControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/Controls/Inputs/InputIntegerControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputIntegerProps = CellProps & WithClassname & WithInputProps;
+export type GoAInputIntegerProps = CellProps & WithClassname & WithInputProps;
 export declare const GoAInputInteger: (props: GoAInputIntegerProps) => JSX.Element;
 export declare const GoAIntegerControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoAIntegerControlTester: RankedTester;
 export declare const GoAInputIntegerControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/Controls/Inputs/InputMultiLineTextControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
-export declare const MultiLineText: (props: GoAInputTextProps) => JSX.Element;
+export type GoAInputMultiLineTextProps = CellProps & WithClassname & WithInputProps;
+export declare const MultiLineText: (props: GoAInputMultiLineTextProps) => JSX.Element;
 export declare const MultiLineTextControlInput: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiLineTextControlTester: RankedTester;
 export declare const MultiLineTextControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/Controls/Inputs/InputNumberControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputNumberProps = CellProps & WithClassname & WithInputProps;
+export type GoAInputNumberProps = CellProps & WithClassname & WithInputProps;
 export declare const GoANumberInput: (props: GoAInputNumberProps) => JSX.Element;
 export declare const GoANumberControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoANumberControlTester: RankedTester;
 export declare const GoAInputNumberControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/Controls/Inputs/InputTextControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
+export type GoAInputTextProps = CellProps & WithClassname & WithInputProps;
 export declare const GoAInputText: (props: GoAInputTextProps) => JSX.Element;
 export declare const GoATextControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoATextControlTester: RankedTester;
 export declare const GoAInputTextControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/Controls/Inputs/InputTimeControl.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { CellProps, WithClassname, ControlProps, RankedTester } from '@jsonforms/core';
 import { WithInputProps } from './type';
-type GoAInputTimeProps = CellProps & WithClassname & WithInputProps;
+export type GoAInputTimeProps = CellProps & WithClassname & WithInputProps;
 export declare const GoATimeInput: (props: GoAInputTimeProps) => JSX.Element;
 export declare const GoATimeControl: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoATimeControlTester: RankedTester;
 export declare const GoAInputTimeControl: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
-export {};

package/src/lib/util/inputControlUtils.d.ts

@@ -0,0 +1,13 @@
+import { ControlProps } from '@jsonforms/core';
+/**
+ * Checks input controls data value to determine is required and has any data.
+ * @param props - The JsonForm control props
+ * @returns true if there is no data and is a required field
+ */
+export declare const isRequiredAndHasNoData: (props: ControlProps) => boolean | undefined;
+/**
+ * Checks the key press value to determine if the key press is a 'Shift' or 'Tab'.
+ * @param key - The key press value
+ * @returns true if the key pressed is not a shift or tab key being pressed, otherwise false
+ */
+export declare const isNotKeyPressTabOrShift: (key: string) => boolean;

package/src/lib/util/stringUtils.d.ts

@@ -19,7 +19,6 @@ export declare const controlScopeMatchesLabel: (scope: string, label: string) =>
  * @returns
  */
 export declare const getLabelText: (scope: string, label: string) => string;
-export declare const FIELD_REQUIRED = "data should pass \"isNotEmpty\" keyword validation";
 /**
  * Check if a required, defined input value is valid. Returns an appropriate
  * error message if not.