@abgov/jsonforms-components 1.8.1 → 1.10.0

package/index.esm.js

@@ -1,15 +1,12 @@
 import { withAjvProps, materialSliderControlTester, MaterialSliderControl, materialObjectControlTester, MaterialObjectRenderer, materialAllOfControlTester, MaterialAllOfRenderer, materialAnyOfControlTester, MaterialAnyOfRenderer, materialOneOfControlTester, MaterialOneOfRenderer, materialOneOfRadioGroupControlTester, MaterialOneOfRadioGroupControl, materialOneOfEnumControlTester, MaterialOneOfEnumControl, materialHorizontalLayoutTester, materialVerticalLayoutTester, materialArrayLayoutTester, MaterialArrayLayout, materialAnyOfStringOrEnumControlTester, MaterialAnyOfStringOrEnumControl, materialEnumArrayRendererTester, MaterialEnumArrayRenderer, materialBooleanCellTester, MaterialBooleanCell, materialBooleanToggleCellTester, MaterialBooleanToggleCell, materialEnumCellTester, MaterialEnumCell, materialOneOfEnumCellTester, MaterialOneOfEnumCell } from '@jsonforms/material-renderers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { GoAFormItem, GoACallout, GoAInputDate, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
-import { Hidden, Typography, FormHelperText } from '@mui/material';
+import { GoACallout, GoAInputDate, GoAFormItem, GoAInput, GoATextArea, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAFormStepper, GoAFormStep, GoAPages, GoAGrid, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 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';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
 import isEmpty from 'lodash/isEmpty';
 import range from 'lodash/range';
 import Ajv from 'ajv';
@@ -1740,9 +1737,9 @@ $$3({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-let _$6 = t => t,
-  _t$6;
-const FormFieldWrapper = styled.div(_t$6 || (_t$6 = _$6`
+let _$7 = t => t,
+  _t$7;
+const FormFieldWrapper = styled.div(_t$7 || (_t$7 = _$7`
   margin-bottom: var(--goa-space-l);
 `));
 
@@ -2373,41 +2370,6 @@ const isValidDate = function isValidDate(date) {
   }
 };
 
-const GoAInputBaseControl = props => {
-  var _a, _b, _c;
-  // eslint-disable-next-line
-  const {
-    id,
-    description,
-    errors,
-    uischema,
-    visible,
-    config,
-    label,
-    input,
-    required
-  } = props;
-  errors.length === 0;
-  const InnerComponent = input;
-  const labelToUpdate = getLabelText(uischema.scope, label || '');
-  let modifiedErrors = checkFieldValidity(props);
-  if (modifiedErrors === 'should be equal to one of the allowed values' && ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.enumContext)) {
-    modifiedErrors = '';
-  }
-  return jsx(Hidden, {
-    xsUp: !visible,
-    children: jsx(FormFieldWrapper, {
-      children: jsx(GoAFormItem, {
-        requirement: required ? 'required' : undefined,
-        error: modifiedErrors,
-        label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
-        helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
-        children: jsx(InnerComponent, Object.assign({}, props))
-      })
-    })
-  });
-};
-
 // Used locally for callout presentation
 const callout = props => {
   const componentProps = Object.assign({
@@ -2771,6 +2733,54 @@ const onChangeForNumericControl = props => {
   }
 };
 
+let _$6 = t => t,
+  _t$6,
+  _t2$4;
+styled.div(_t$6 || (_t$6 = _$6`
+  height: 70vh;
+  overflow-y: auto;
+  padding-left: var(--goa-space-2xs);
+  padding-right: var(--goa-space-2xs);
+`));
+const Visible = styled.div(_t2$4 || (_t2$4 = _$6`
+  display: ${0};
+`), p => p.visible ? 'initial' : 'none');
+
+const GoAInputBaseControl = props => {
+  var _a, _b, _c;
+  // eslint-disable-next-line
+  const {
+    id,
+    description,
+    errors,
+    uischema,
+    visible,
+    config,
+    label,
+    input,
+    required
+  } = props;
+  errors.length === 0;
+  const InnerComponent = input;
+  const labelToUpdate = getLabelText(uischema.scope, label || '');
+  let modifiedErrors = checkFieldValidity(props);
+  if (modifiedErrors === 'should be equal to one of the allowed values' && ((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.enumContext)) {
+    modifiedErrors = '';
+  }
+  return jsx(Visible, {
+    visible: visible,
+    children: jsx(FormFieldWrapper, {
+      children: jsx(GoAFormItem, {
+        requirement: required ? 'required' : undefined,
+        error: modifiedErrors,
+        label: (props === null || props === void 0 ? void 0 : props.noLabel) === true ? '' : labelToUpdate,
+        helpText: typeof ((_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.help) === 'string' ? (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help : '',
+        children: jsx(InnerComponent, Object.assign({}, props))
+      })
+    })
+  });
+};
+
 const GoAInputText = props => {
   var _a, _b, _c, _d, _e, _f, _g;
   const {
@@ -3403,7 +3413,8 @@ const EnumSelectAutoComplete = props => {
     schema,
     path,
     handleChange,
-    uischema
+    uischema,
+    label
   } = props;
   let enumData = (schema === null || schema === void 0 ? void 0 : schema.enum) || [];
   const dataKey = (_b = (_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.enumContext) === null || _b === void 0 ? void 0 : _b.key;
@@ -3411,11 +3422,6 @@ const EnumSelectAutoComplete = props => {
   const location = (_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.enumContext) === null || _f === void 0 ? void 0 : _f.location;
   const type = (_h = (_g = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _g === void 0 ? void 0 : _g.enumContext) === null || _h === void 0 ? void 0 : _h.type;
   const values = (_k = (_j = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _j === void 0 ? void 0 : _j.enumContext) === null || _k === void 0 ? void 0 : _k.values;
-  const defaultProps = {
-    options: enumData,
-    getOptionLabel: option => option
-  };
-  const [inputValue, setInputValue] = React.useState('');
   useEffect(() => {
     if (dataKey && url) {
       addDataByOptions(dataKey, url, location, type, values);
@@ -3425,25 +3431,25 @@ const EnumSelectAutoComplete = props => {
     const newData = getData(dataKey);
     // eslint-disable-next-line
     enumData = newData;
-    defaultProps.options = enumData;
   }
-  return jsx(Autocomplete, Object.assign({}, defaultProps, {
-    id: "autocomplete",
-    getOptionLabel: option => option,
-    isOptionEqualToValue: (option, value) => option.id === value.id,
-    value: data || null,
+  return jsx(GoADropdown, {
+    value: data,
     onChange: (name, value) => {
       handleChange(path, value);
-      setInputValue(value);
     },
-    renderInput: params => {
-      return jsx(TextField, Object.assign({}, params, {
-        variant: "outlined",
-        size: "small",
-        placeholder: schema === null || schema === void 0 ? void 0 : schema.description
-      }));
-    }
-  }));
+    testId: `autocomplete-dropdown-${label}`,
+    id: `autocomplete-dropdown-${label}`,
+    width: "100%",
+    filterable: true,
+    relative: true,
+    ariaLabel: label,
+    children: enumData === null || enumData === void 0 ? void 0 : enumData.map(item => {
+      return jsx(GoADropdownItem, {
+        value: item,
+        label: item
+      }, `autocomplete-${item}`);
+    })
+  });
 };
 const numControlAutoComplete = props => {
   return jsx(GoAInputBaseControl, Object.assign({}, props, {
@@ -3575,8 +3581,8 @@ const BooleanRadioComponent = ({
     required,
     errors
   });
-  return jsx(Hidden, {
-    xsUp: !visible,
+  return jsx(Visible, {
+    visible: visible,
     children: jsxs(GoARadioGroup, Object.assign({
       error: errorsFormInput.length > 0,
       name: `${label}`,
@@ -3959,8 +3965,8 @@ const FormStepper = ({
       /*
         [Mar-04-2024][Paul Li] the GoAPages internal state cannot handle the hidden/display well. We need extra hide/display control to it appropriately.
        */
-      jsx(Hidden, {
-        xsUp: indexOfCategory !== step - 1,
+      jsx(Visible, {
+        visible: indexOfCategory === step - 1,
         children: category.elements.map((elementUiSchema, index) => {
           return jsx(JsonFormsDispatch, {
             schema: schema,
@@ -3978,8 +3984,8 @@ const FormStepper = ({
   const handleEdit = index => {
     setPage(index + 1);
   };
-  return jsx(Hidden, {
-    xsUp: !visible,
+  return jsx(Visible, {
+    visible: visible,
     children: jsxs("div", {
       id: `${path || `goa`}-form-stepper`,
       className: "formStepper",
@@ -4187,6 +4193,8 @@ const DeleteFileModal = ({
 let _$2 = t => t,
   _t$2,
   _t2$1;
+const DELAY_UPLOAD_TIMEOUT_MS = 200;
+const DELAY_DELETE_TIMEOUT_MS = 80;
 const FileUploader = _a => {
   var _b;
   var {
@@ -4221,7 +4229,7 @@ const FileUploader = _a => {
         const value = ['Loading', Array.isArray(data) ? data[1] : file === null || file === void 0 ? void 0 : file.name];
         handleChange(propertyId, value);
       };
-      setTimeout(handleFunction, 1);
+      setTimeout(handleFunction, DELAY_UPLOAD_TIMEOUT_MS);
     }
   }
   function downloadFile(file) {
@@ -4304,7 +4312,10 @@ const FileUploader = _a => {
             onDelete: () => {
               setShowFileDeleteConfirmation(false);
               deleteFile(getFile());
-              handleChange(propertyId, '');
+              const handleFunction = () => {
+                handleChange(propertyId, '');
+              };
+              setTimeout(handleFunction, DELAY_DELETE_TIMEOUT_MS);
             }
           })]
         })
@@ -4385,9 +4396,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');
+const TextCenter = styled.div(_t4 || (_t4 = _$1`
+  text-align: center;
+`));
 
 // eslint-disable-next-line
 const extractScopesFromUISchema = uischema => {
@@ -4445,8 +4456,7 @@ const EmptyList = ({
   translations
 }) => jsx(GoAGrid, {
   minChildWidth: "30ch",
-  children: jsx(Typography, {
-    align: "center",
+  children: jsx(TextCenter, {
     children: jsx("b", {
       children: translations.noDataMessage
     })
@@ -4519,9 +4529,6 @@ const NonEmptyCellComponent = /*#__PURE__*/React.memo(function NonEmptyCellCompo
       enabled: enabled,
       renderers: renderers,
       cells: cells
-    }), jsx(FormHelperText, {
-      error: !isValid,
-      children: !isValid && errors
     })]
   });
 });
@@ -4624,7 +4631,7 @@ 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 jsxs(DisplayWrapper, {
+    return jsxs(Visible, {
       visible: visible,
       "data-testid": "jsonforms-object-list-wrapper",
       children: [jsxs(ToolBarHeader, {
@@ -4717,8 +4724,8 @@ const ArrayControl = props => {
     setOpen(false);
     // eslint-disable-next-line
   }, [setOpen, path, rowData]);
-  return jsxs(Hidden, {
-    xsUp: !visible,
+  return jsxs(Visible, {
+    visible: visible,
     children: [jsx(ObjectArrayControl, Object.assign({}, props, {
       openDeleteDialog: openDeleteDialog
     })), jsx(DeleteDialog, {
@@ -4797,16 +4804,16 @@ const LayoutRenderer = ({
     return null;
   } else {
     if (direction === 'row') {
-      return jsx(Hidden, {
-        xsUp: !visible,
+      return jsx(Visible, {
+        visible: visible,
         children: jsx(GoAGrid, {
           minChildWidth: "10ch",
           children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
         })
       });
     } else {
-      return jsx(Hidden, {
-        xsUp: !visible,
+      return jsx(Visible, {
+        visible: visible,
         children: renderLayoutElements(elements, schema, path, enabled, renderers, cells)
       });
     }
@@ -4877,8 +4884,8 @@ const GoAGroupControlComponent = props => {
     visible
   } = props;
   const group = uischema;
-  return jsxs(Hidden, {
-    xsUp: !visible,
+  return jsxs(Visible, {
+    visible: visible,
     children: [((_b = (_a = group.options) === null || _a === void 0 ? void 0 : _a.componentProps) === null || _b === void 0 ? void 0 : _b.accent) === 'thick' && jsx(GoAContainer, Object.assign({
       heading: group.label
     }, (_c = group.options) === null || _c === void 0 ? void 0 : _c.componentProps, {
@@ -4960,8 +4967,8 @@ const HelpContentComponent = _a => {
       children: (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.help
     });
   };
-  return jsx(Hidden, {
-    xsUp: !visible,
+  return jsx(Visible, {
+    visible: visible,
     children: jsx(HelpContentDiv, {
       "aria-label": (_b = uischema.options) === null || _b === void 0 ? void 0 : _b.ariaLabel,
       children: jsxs("div", {
@@ -5181,7 +5188,8 @@ const ajv = new Ajv({
   allErrors: true,
   verbose: true
 });
-ajv.addFormat('file-urn', /^urn:[a-zA-Z0-9.-]+(:[a-zA-Z0-9.-]+)*$/);
+//Example format: urn:ads:platform:file-service:v1:/files/f6de737e-c5fc-42fe-963b-28bfe14597c4
+ajv.addFormat('file-urn', /^urn:ads:platform:file-service:v[0-9]:\/files\/[a-zA-Z0-9.-]*$/);
 
 const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
 addData('countries', countries);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.8.1",
+  "version": "1.10.0",
   "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/ObjectArray/styled-components.d.ts

@@ -1,6 +1,4 @@
 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>;
+export declare const TextCenter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,2 @@
+export * from './inputControlUtils';
+export * from './style-component';

package/src/lib/util/style-component.d.ts

@@ -1 +1,4 @@
 export declare const VerticalLayout: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Visible: import("styled-components").StyledComponent<"div", any, {
+    visible: boolean | undefined;
+}, never>;