@abgov/jsonforms-components 1.22.3 → 1.23.1

package/index.esm.js

@@ -4880,6 +4880,7 @@ const FormStepper = props => {
   const submitForm = submitFormFunction && submitFormFunction();
   const categorization = uischema;
   const allCategories = JSON.parse(JSON.stringify(categorization));
+  const componentProps = (_b = (_a = uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) !== null && _b !== void 0 ? _b : {};
   const [step, setStep] = React.useState(0);
   const [isFormValid, setIsFormValid] = React.useState(false);
   const [showNextBtn, setShowNextBtn] = React.useState(true);
@@ -4918,10 +4919,9 @@ const FormStepper = props => {
     setIsFormValid(isValid);
   }, [ajv, data, schema]);
   useEffect(() => {
-    var _a, _b;
     // Override the "controlled Navigation", if property is supplied
     // Default: no controlled nav.
-    setStep(((_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.controlledNav) ? 1 : 0);
+    setStep((componentProps === null || componentProps === void 0 ? void 0 : componentProps.controlledNav) ? 1 : 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   if ((categories === null || categories === void 0 ? void 0 : categories.length) < 1) {
@@ -4960,7 +4960,7 @@ const FormStepper = props => {
   const isInputInitialized = inputId => {
     return inputId in inputStatuses;
   };
-  const readOnly = (_c = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.readOnly) !== null && _c !== void 0 ? _c : false;
+  const readOnly = (_c = componentProps === null || componentProps === void 0 ? void 0 : componentProps.readOnly) !== null && _c !== void 0 ? _c : false;
   const isFormSubmitted = (_d = enumerators === null || enumerators === void 0 ? void 0 : enumerators.isFormSubmitted) !== null && _d !== void 0 ? _d : false;
   return jsx("div", {
     "data-testid": "form-stepper-test-wrapper",
@@ -5051,7 +5051,7 @@ const FormStepper = props => {
           minChildWidth: "100px",
           children: [jsx("div", {
             children: step !== 1 ? jsx(GoAButton, {
-              type: "secondary",
+              type: (componentProps === null || componentProps === void 0 ? void 0 : componentProps.previousButtonType) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps.previousButtonType : 'secondary',
               disabled: disabledCategoryMap[step - 1],
               onClick: () => {
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
@@ -5061,11 +5061,11 @@ const FormStepper = props => {
                 prevPage(step, disabledCategoryMap);
               },
               testId: "prev-button",
-              children: "Previous"
+              children: (componentProps === null || componentProps === void 0 ? void 0 : componentProps.previousButtonLabel) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps.previousButtonLabel : 'Previous'
             }) : jsx("div", {})
           }), jsxs(RightAlignmentDiv, {
             children: [step !== null && showNextBtn && jsx(GoAButton, {
-              type: "primary",
+              type: (componentProps === null || componentProps === void 0 ? void 0 : componentProps.nextButtonType) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps.nextButtonType : 'primary',
               disabled: disabledCategoryMap[step - 1],
               onClick: () => {
                 const element = document.getElementById(`${path || `goa`}-form-stepper`);
@@ -5075,10 +5075,10 @@ const FormStepper = props => {
                 nextPage(step, disabledCategoryMap);
               },
               testId: "next-button",
-              children: "Next"
+              children: (componentProps === null || componentProps === void 0 ? void 0 : componentProps.nextButtonLabel) ? componentProps === null || componentProps === void 0 ? void 0 : componentProps.nextButtonLabel : 'Next'
             }), !showNextBtn && !isFormSubmitted && jsx("div", {
               children: jsx(GoAButton, {
-                type: "primary",
+                type: 'primary',
                 onClick: handleSubmit,
                 disabled: !isFormValid,
                 testId: "stepper-submit-btn",
@@ -5382,8 +5382,9 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
   rootSchema,
   uischema
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const buttonPosition = ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.addButtonPosition) || 'left';
+  const arrayLabel = getLabelText(uischema.scope, label);
   return jsx(Fragment, {
     children: jsx("div", {
       style: {
@@ -5394,7 +5395,8 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
         testId: `object-array-toolbar-${label}`,
         "aria-label": translations.addAriaLabel,
         onClick: addItem(path, createDefaultValue(schema, rootSchema)),
-        children: ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonText) || 'Add'
+        type: (_c = (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.addButtonType) !== null && _c !== void 0 ? _c : 'primary',
+        children: ((_d = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _d === void 0 ? void 0 : _d.addButtonText) || capitalizeFirstLetter(`Add ${arrayLabel}`)
       })
     })
   });
@@ -5981,7 +5983,7 @@ const RenderLink = props => {
 };
 
 const HelpContentComponent = _a => {
-  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
   var {
       isParent = true
     } = _a,
@@ -6019,24 +6021,25 @@ const HelpContentComponent = _a => {
       alt: alt
     });
   };
+  const textVariant = !((_c = uischema.options) === null || _c === void 0 ? void 0 : _c.variant) || ((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) !== 'details' && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'link';
   return jsx(Visible, {
     visible: visible,
     children: jsx(HelpContentDiv, {
-      "aria-label": (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.ariaLabel,
+      "aria-label": (_f = uischema.options) === null || _f === void 0 ? void 0 : _f.ariaLabel,
       children: jsxs("div", {
         className: marginClass,
-        children: [label && !((_d = uischema.options) === null || _d === void 0 ? void 0 : _d.variant) && ((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.variant) !== 'details' && jsxs("div", {
+        children: [label && (!((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) || ((_h = uischema.options) === null || _h === void 0 ? void 0 : _h.variant) === 'link') && jsxs("div", {
           className: labelClass,
           "data-testid": label,
           children: [label, jsx("br", {})]
-        }), ((_f = uischema.options) === null || _f === void 0 ? void 0 : _f.variant) && ((_g = uischema.options) === null || _g === void 0 ? void 0 : _g.variant) === 'img' && renderImage(uischema.options), ((_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.link) && link !== '' && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), (!((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) || ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) !== 'details') && !link && renderHelp(), ((_l = uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'details' && jsxs(GoADetails, {
+        }), ((_j = uischema.options) === null || _j === void 0 ? void 0 : _j.variant) && ((_k = uischema.options) === null || _k === void 0 ? void 0 : _k.variant) === 'img' && renderImage(uischema.options), ((_l = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _l === void 0 ? void 0 : _l.variant) && ((_m = uischema.options) === null || _m === void 0 ? void 0 : _m.variant) === 'link' && link && RenderLink(uischema === null || uischema === void 0 ? void 0 : uischema.options), textVariant && renderHelp(), ((_o = uischema.options) === null || _o === void 0 ? void 0 : _o.variant) && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) === 'details' && jsxs(GoADetails, {
           heading: label ? label : '',
           mt: "3xs",
           mb: "none",
-          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_o = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _o === void 0 ? void 0 : _o.length) > 0 && jsx(HelpContents, {
+          children: [renderHelp(), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && ((_q = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _q === void 0 ? void 0 : _q.length) > 0 && jsx(HelpContents, {
             elements: uischema === null || uischema === void 0 ? void 0 : uischema.elements
           })]
-        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_p = uischema.options) === null || _p === void 0 ? void 0 : _p.variant) !== 'details' && jsx(HelpContents, {
+        }), (uischema === null || uischema === void 0 ? void 0 : uischema.elements) && (uischema === null || uischema === void 0 ? void 0 : uischema.elements.length) > 0 && ((_r = uischema.options) === null || _r === void 0 ? void 0 : _r.variant) !== 'details' && jsx(HelpContents, {
           elements: uischema.elements,
           isParent: false
         })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.22.3",
+  "version": "1.23.1",
   "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/FormStepper/FormStepperControl.d.ts

@@ -1,8 +1,17 @@
+import { GoAButtonType } from '@abgov/react-components-new';
 import { StatePropsOfLayout } from '@jsonforms/core';
 import { TranslateProps } from '@jsonforms/react';
 import { AjvProps } from '../../util/layout';
 export interface CategorizationStepperLayoutRendererProps extends StatePropsOfLayout, AjvProps, TranslateProps {
 }
+export interface FormStepperComponentProps {
+    nextButtonLabel?: string;
+    nextButtonType?: GoAButtonType;
+    previousButtonLabel?: string;
+    previousButtonType?: GoAButtonType;
+    controlledNav?: number;
+    readOnly?: boolean;
+}
 export declare const FormStepper: (props: CategorizationStepperLayoutRendererProps) => JSX.Element;
 export declare const FormStepperControl: (props: CategorizationStepperLayoutRendererProps & import("@jsonforms/core").OwnPropsOfLayout) => import("react/jsx-runtime").JSX.Element;
 export default FormStepper;