@abgov/jsonforms-components 1.2.4 → 1.3.1

package/index.esm.js

@@ -3,8 +3,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAIconButton, GoAFileUploadInput, GoAModal, GoACircularProgress, GoAGrid, GoAContainer, GoAButtonGroup, GoADetails } from '@abgov/react-components';
 import { Hidden, Typography, FormHelperText } from '@mui/material';
 import styled from 'styled-components';
-import { rankWith, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, uiTypeIs, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
-import { withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
+import { rankWith, uiTypeIs, isDateControl, isStringControl, and, optionIs, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, isDescriptionHidden, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, withIncreasedRank, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
+import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, withJsonFormsLayoutProps, JsonFormsDispatch, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
 import React, { createContext, useEffect, useState, useMemo, useContext, useCallback } from 'react';
 import merge from 'lodash/merge';
 import axios from 'axios';
@@ -2407,24 +2407,23 @@ const GoAInputBaseControl = props => {
   });
 };
 
-/**
- *  Used internally by registered Controls, the MessageControl
- *  is used to display an error message if a component cannot be rendered
- *  due to input errors - typically from options.componentProps.
- *
- *  NOTE: The component itself is not, and should not, be registered.
- *
- * @param message the message to be displayed
- *
- * @returns component for displaying the message in the correct style
- */
-// TODO: Add styling
-const MessageControl = message => {
-  return jsx(GoACallout, {
-    type: "emergency",
-    children: message
-  });
+// Used locally for callout presentation
+const callout = props => {
+  const componentProps = Object.assign({
+    size: 'medium',
+    type: 'emergency',
+    message: 'unknown'
+  }, props);
+  return jsx(GoACallout, Object.assign({}, componentProps, {
+    children: componentProps.message
+  }));
+};
+const CalloutControl = props => {
+  var _a, _b;
+  return callout(((_b = (_a = props === null || props === void 0 ? void 0 : props.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.componentProps) || {});
 };
+const GoACalloutControlTester = rankWith(1, uiTypeIs('Callout'));
+var GoACalloutControl = withJsonFormsRendererProps(CalloutControl);
 
 const errMalformedDate = (scope, type) => {
   return `${type}-date for variable '${scope}' has an incorrect format.`;
@@ -2442,7 +2441,9 @@ const isValidDateFormat = date => {
   return standardized !== undefined;
 };
 const invalidDateFormat = (scope, type) => {
-  return MessageControl(errMalformedDate(scope, type));
+  return callout({
+    message: errMalformedDate(scope, type)
+  });
 };
 const reformatDateProps = props => {
   if (props) {
@@ -3702,7 +3703,7 @@ let _$4 = t => t,
   _t$4,
   _t2$2,
   _t3$1,
-  _t4,
+  _t4$1,
   _t5,
   _t6,
   _t7;
@@ -3727,7 +3728,7 @@ const ReviewItemHeader = styled.div(_t3$1 || (_t3$1 = _$4`
   justify-content: space-between;
   margin-bottom: 2rem;
 `));
-const ReviewItemTitle = styled.div(_t4 || (_t4 = _$4`
+const ReviewItemTitle = styled.div(_t4$1 || (_t4$1 = _$4`
   font-size: var(--fs-xl);
   line-height: var(--lh-lg);
   font-weight: var(--fw-light);
@@ -4212,7 +4213,8 @@ const ObjectArrayToolBar = /*#__PURE__*/React.memo(function TableToolbar({
 let _$1 = t => t,
   _t$1,
   _t2,
-  _t3;
+  _t3,
+  _t4;
 const DeleteDialogContent = styled.div(_t$1 || (_t$1 = _$1`
   margin-bottom: var(--goa-space-m);
 `));
@@ -4222,6 +4224,9 @@ const ToolBarHeader = styled.div(_t2 || (_t2 = _$1`
 const ObjectArrayTitle = styled.h2(_t3 || (_t3 = _$1`
   margin-bottom: var(--goa-space-l);
 `));
+const DisplayWrapper = styled.div(_t4 || (_t4 = _$1`
+  display: ${0};
+`), p => p.visible ? 'initial' : 'none');
 
 // eslint-disable-next-line
 const extractScopesFromUISchema = uischema => {
@@ -4301,17 +4306,18 @@ const ctxToNonEmptyCellProps = (ctx, ownProps) => {
     renderers: ownProps.renderers || ctx.renderers
   };
 };
-const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent({
-  schema,
-  errors,
-  enabled,
-  renderers,
-  cells,
-  rowPath,
-  isValid,
-  uischema
-}) {
-  var _a, _b;
+const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellComponent(props) {
+  var _a, _b, _c;
+  const {
+    schema,
+    errors,
+    enabled,
+    renderers,
+    cells,
+    rowPath,
+    isValid,
+    uischema
+  } = props;
   const propNames = getValidColumnProps(schema);
   const propScopes = (uischema === null || uischema === void 0 ? void 0 : uischema.scope) ? propNames.map(name => {
     return `#/properties/${name}`;
@@ -4337,6 +4343,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
     // eslint-disable-next-line
     (_b = uischema === null || uischema === void 0 ? void 0 : uischema.elements) === null || _b === void 0 ? void 0 : _b.map(element => {
       return jsx(JsonFormsDispatch, {
+        "data-testid": `jsonforms-object-list-defined-elements-dispatch`,
         schema: schema,
         uischema: element,
         path: rowPath,
@@ -4344,7 +4351,7 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
         renderers: renderers,
         cells: cells
       }, rowPath);
-    }), jsx(JsonFormsDispatch, {
+    }), ((_c = uiSchemaElementsForNotDefined === null || uiSchemaElementsForNotDefined === void 0 ? void 0 : uiSchemaElementsForNotDefined.elements) === null || _c === void 0 ? void 0 : _c.length) > 0 && jsx(JsonFormsDispatch, {
       schema: schema,
       uischema: uiSchemaElementsForNotDefined,
       path: rowPath,
@@ -4456,38 +4463,37 @@ class ObjectArrayControl extends React.Component {
     const controlElement = uischema;
     // eslint-disable-next-line
     const listTitle = label || ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.title);
-    return jsx(Hidden, {
-      xsUp: !visible,
-      children: jsxs("div", {
-        children: [jsxs(ToolBarHeader, {
-          children: [listTitle && jsx(ObjectArrayTitle, {
-            children: listTitle
-          }), jsx(ObjectArrayToolBar, {
-            errors: errors,
-            label: label,
-            addItem: this.addItem,
-            numColumns: 0,
-            path: path,
-            uischema: controlElement,
-            schema: schema,
-            rootSchema: rootSchema,
-            enabled: enabled,
-            translations: translations
-          })]
-        }), jsx("div", {
-          children: jsx(ObjectArrayList, Object.assign({
-            path: path,
-            schema: schema,
-            uischema: uischema,
-            enabled: enabled,
-            openDeleteDialog: openDeleteDialog,
-            translations: translations,
-            data: data,
-            cells: cells,
-            config: config
-          }, additionalProps))
+    return jsxs(DisplayWrapper, {
+      visible: visible,
+      "data-testid": "jsonforms-object-list-wrapper",
+      children: [jsxs(ToolBarHeader, {
+        children: [listTitle && jsx(ObjectArrayTitle, {
+          children: listTitle
+        }), jsx(ObjectArrayToolBar, {
+          errors: errors,
+          label: label,
+          addItem: this.addItem,
+          numColumns: 0,
+          path: path,
+          uischema: controlElement,
+          schema: schema,
+          rootSchema: rootSchema,
+          enabled: enabled,
+          translations: translations
         })]
-      })
+      }), jsx("div", {
+        children: jsx(ObjectArrayList, Object.assign({
+          path: path,
+          schema: schema,
+          uischema: uischema,
+          enabled: enabled,
+          openDeleteDialog: openDeleteDialog,
+          translations: translations,
+          data: data,
+          cells: cells,
+          config: config
+        }, additionalProps))
+      })]
     });
   }
 }
@@ -4849,7 +4855,7 @@ const isLayoutType = schema => {
   return hasType(schema, 'VerticalLayout') || hasType(schema, 'HorizontalLayout') || hasType(schema, 'Categorization') || hasType(schema, 'Group');
 };
 const isKnownType = schema => {
-  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema);
+  return hasType(schema, 'Control') || isLayoutType(schema) || hasType(schema, 'HelpContent') || isListWithDetail(schema) || hasType(schema, 'Callout');
 };
 const isListWithDetail = schema => {
   return hasType(schema, 'ListWithDetail');
@@ -4873,9 +4879,6 @@ const isEmptyElements = schema => {
 const hasVariant = schema => {
   return 'options' in schema && schema.options !== undefined && schema.options !== null && 'variant' in schema.options;
 };
-const isValidJsonObject = schema => {
-  return typeof schema === 'object' && Object.keys(schema).length === 0 || 'properties' in schema && ('type' in schema && schema.type === 'object' || !('type' in schema));
-};
 
 const errCategorizationHasNonCategories = "Each element of 'Categorizations' must be of type 'Category'";
 const errCategorizationHasNoElements = 'A Categorization must contain Categories.';
@@ -4967,15 +4970,6 @@ const getUISchemaErrors = (uiSchema, schema) => {
   return null;
 };
 
-const isValidJsonSchema = schema => {
-  if (isNullSchema(schema)) {
-    return '';
-  }
-  if (!isValidJsonObject(schema)) {
-    return 'Unable to render: json schema is not valid.';
-  }
-  return null;
-};
 // Some 'errors' need not be reported, but we want to handle them
 // here.  e.g.  A layout with empty elements should be quietly ignored.
 // this is handled by the errors !== '' check.
@@ -4984,17 +4978,11 @@ const ErrorControl = props => {
     schema,
     uischema
   } = props;
-  // Report data schema errors over ui schema ones, as errors in the former
-  // can cause cascading errors in the latter.
-  const dataSchemaErrors = isValidJsonSchema(schema);
-  if (dataSchemaErrors && dataSchemaErrors !== '') {
-    return jsx("p", {
-      children: dataSchemaErrors
-    });
-  }
   const uiSchemaErrors = getUISchemaErrors(uischema, schema);
   if (uiSchemaErrors && uiSchemaErrors !== '') {
-    return MessageControl(uiSchemaErrors);
+    return callout({
+      message: uiSchemaErrors
+    });
   }
   return jsx("span", {});
 };
@@ -5003,9 +4991,8 @@ const ErrorControl = props => {
  * one that must get used if there are any errors whatsoever.
  */
 const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
-  const validJsonSchema = isValidJsonSchema(schema);
   const validUiSchema = getUISchemaErrors(uischema, schema);
-  return validUiSchema != null || validJsonSchema != null;
+  return validUiSchema != null;
 });
 var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
@@ -5037,6 +5024,9 @@ const GoABaseRenderers = [
 }, {
   tester: GoATimeControlTester,
   renderer: GoAInputTimeControl
+}, {
+  tester: GoACalloutControlTester,
+  renderer: GoACalloutControl
 }, {
   tester: materialSliderControlTester,
   renderer: MaterialSliderControl

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.2.4",
+  "version": "1.3.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/Additional/GoACalloutControl.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RankedTester } from '@jsonforms/core';
+import { GoACalloutSize, GoACalloutType } from '@abgov/react-components-new';
+export interface CalloutProps {
+    size?: GoACalloutSize;
+    type?: GoACalloutType;
+    message?: string;
+}
+export declare const callout: (props: CalloutProps) => JSX.Element;
+export declare const GoACalloutControlTester: RankedTester;
+declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfJsonFormsRenderer>;
+export default _default;

package/src/lib/Controls/ObjectArray/ObjectListControl.d.ts

@@ -1,10 +1,24 @@
 import React from 'react';
-import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsCellRendererRegistryEntry, ArrayTranslations } from '@jsonforms/core';
+import { ArrayLayoutProps, ControlElement, JsonSchema, JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry, ArrayTranslations, Layout } from '@jsonforms/core';
 import { WithDeleteDialogSupport } from './DeleteDialog';
+export type ObjectArrayControlProps = ArrayLayoutProps & WithDeleteDialogSupport;
 export interface EmptyListProps {
     numColumns: number;
     translations: ArrayTranslations;
 }
+interface NonEmptyRowComponentProps {
+    propName?: string;
+    schema: JsonSchema;
+    rootSchema?: JsonSchema;
+    rowPath: string;
+    errors: string;
+    enabled: boolean;
+    renderers?: JsonFormsRendererRegistryEntry[];
+    cells?: JsonFormsCellRendererRegistryEntry[];
+    isValid: boolean;
+    uischema?: ControlElement | Layout;
+}
+export declare const NonEmptyCellComponent: React.NamedExoticComponent<NonEmptyRowComponentProps>;
 interface NonEmptyRowProps {
     childPath: string;
     schema: JsonSchema;
@@ -17,7 +31,7 @@ interface NonEmptyRowProps {
     uischema: ControlElement;
 }
 export declare const NonEmptyList: React.MemoExoticComponent<({ childPath, schema, rowIndex, openDeleteDialog, enabled, cells, path, translations, uischema, }: NonEmptyRowProps & WithDeleteDialogSupport) => import("react/jsx-runtime").JSX.Element>;
-export declare class ObjectArrayControl extends React.Component<ArrayLayoutProps & WithDeleteDialogSupport, any> {
+export declare class ObjectArrayControl extends React.Component<ObjectArrayControlProps, any> {
     addItem: (path: string, value: any) => () => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/src/lib/Controls/ObjectArray/styled-components.d.ts

@@ -1,3 +1,6 @@
 export declare const DeleteDialogContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ToolBarHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ObjectArrayTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
+export declare const DisplayWrapper: import("styled-components").StyledComponent<"div", any, {
+    visible: boolean;
+}, never>;

package/src/lib/ErrorHandling/errorCheck.d.ts

@@ -11,4 +11,3 @@ export declare const isCategorization: (uiSchema: UISchemaElement) => boolean;
 export declare const hasElements: (schema: object) => boolean;
 export declare const isEmptyElements: (schema: object) => boolean;
 export declare const hasVariant: (schema: UISchemaElement) => boolean;
-export declare const isValidJsonObject: (schema: JsonSchema) => boolean;

package/src/lib/ErrorHandling/MessageControl.d.ts

@@ -1,12 +0,0 @@
-/**
- *  Used internally by registered Controls, the MessageControl
- *  is used to display an error message if a component cannot be rendered
- *  due to input errors - typically from options.componentProps.
- *
- *  NOTE: The component itself is not, and should not, be registered.
- *
- * @param message the message to be displayed
- *
- * @returns component for displaying the message in the correct style
- */
-export declare const MessageControl: (message: string) => JSX.Element;