@abgov/jsonforms-components 1.32.0 → 1.32.2

package/index.esm.js

@@ -1,11 +1,12 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useCallback, useRef } from 'react';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoADropdown, GoADropdownItem, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoADetails } from '@abgov/react-components';
 import styled from 'styled-components';
 import axios from 'axios';
 import get$1 from 'lodash/get';
 import { rankWith, isStringControl, and, optionIs, uiTypeIs, isDateControl, isNumberControl, isIntegerControl, isDateTimeControl, isTimeControl, isEnumControl, isBooleanControl, getAjv, isVisible, isEnabled, deriveLabelForUISchemaElement, schemaTypeIs, formatIs, createDefaultValue, Paths, or, isObjectArrayControl, isPrimitiveArrayControl, hasType, isControl, isCategorization, isLayout } from '@jsonforms/core';
 import { withJsonFormsControlProps, withJsonFormsRendererProps, withJsonFormsEnumProps, withTranslateProps, useJsonForms, JsonFormsDispatch, withJsonFormsLayoutProps, withJsonFormsArrayLayoutProps, withJsonFormsCellProps } from '@jsonforms/react';
+import { isEqual } from 'lodash';
 import merge from 'lodash/merge';
 import isEmpty$1 from 'lodash/isEmpty';
 import range from 'lodash/range';
@@ -1627,9 +1628,9 @@ $$h({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
   assign: assign
 });
 
-let _$7 = t => t,
-  _t$7;
-const FormFieldWrapper = styled.div(_t$7 || (_t$7 = _$7`
+let _$8 = t => t,
+  _t$8;
+const FormFieldWrapper = styled.div(_t$8 || (_t$8 = _$8`
   margin-bottom: var(--goa-space-l);
 `));
 
@@ -2717,16 +2718,16 @@ const onChangeForNumericControl = props => {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const onChangeForCheckboxData = (data, name, value) => data ? !value ? data === null || data === void 0 ? void 0 : data.filter(item => item !== name) : [...data, name] : [name];
 
-let _$6 = t => t,
-  _t$6,
-  _t2$3;
-styled.div(_t$6 || (_t$6 = _$6`
+let _$7 = t => t,
+  _t$7,
+  _t2$4;
+styled.div(_t$7 || (_t$7 = _$7`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$3 || (_t2$3 = _$6`
+const Visible = styled.div(_t2$4 || (_t2$4 = _$7`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -3469,7 +3470,7 @@ const JsonFormRegisterProvider = ({
         return [];
       },
       fetchErrors: criteria => {
-        var _a;
+        var _a, _b;
         if (criteria === null || criteria === void 0 ? void 0 : criteria.url) {
           const matchFound = registers === null || registers === void 0 ? void 0 : registers.registerData.some(listItem => {
             var _a;
@@ -3480,7 +3481,7 @@ const JsonFormRegisterProvider = ({
           });
           return matchFound ? '' : `${((_a = registers.errors[criteria === null || criteria === void 0 ? void 0 : criteria.url]) === null || _a === void 0 ? void 0 : _a.message) || ''}`;
         } else if (criteria === null || criteria === void 0 ? void 0 : criteria.urn) {
-          if (registers === null || registers === void 0 ? void 0 : registers.nonExistent) {
+          if (((_b = registers === null || registers === void 0 ? void 0 : registers.nonExistent) === null || _b === void 0 ? void 0 : _b.length) > 0) {
             const matchFound = registers === null || registers === void 0 ? void 0 : registers.nonExistent.some(listItem => {
               var _a;
               if ((_a = criteria === null || criteria === void 0 ? void 0 : criteria.urn) === null || _a === void 0 ? void 0 : _a.toString().includes(listItem)) {
@@ -4211,13 +4212,127 @@ const GoATimeControl = props => jsx(GoAInputBaseControl, Object.assign({}, props
 const GoATimeControlTester = rankWith(4, isTimeControl);
 const GoAInputTimeControl = withJsonFormsControlProps(GoATimeControl);
 
+let _$6 = t => t,
+  _t$6,
+  _t2$3,
+  _t3$3,
+  _t4$2;
+styled.div(_t$6 || (_t$6 = _$6`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  min-height: 43px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px;
+  padding-right: 8px;
+  border-radius: 4px;
+  border: 1px solid #666;
+  font-size: 18px;
+  font-weight: 400;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-shadow: ${0};
+`), p => p.isOpen ? `0 0 0 3px #feba35` : '');
+const GoADropdownListContainerWrapper = styled.div(_t2$3 || (_t2$3 = _$6`
+  position: relative;
+  display: ${0};
+`), p => !(p === null || p === void 0 ? void 0 : p.isOpen) && 'none');
+const GoADropdownListContainer = styled.div(_t3$3 || (_t3$3 = _$6`
+  border: solid 1px #dcdcdc;
+  border-radius: 4px;
+  background: #fff;
+  padding: 0;
+  margin-top: 3px;
+  width: 100%;
+  overflow-y: auto;
+  z-index: 1000;
+  position: absolute;
+  line-height: 2rem;
+  max-height: ${0};
+`), p => p.optionListMaxHeight || '272px');
+const GoADropdownListOption = styled.div(_t4$2 || (_t4$2 = _$6`
+  padding: 4px 12px;
+  text-overflow: ellipsis;
+  color: ${0} !important;
+  border: 1px solid #f1f1f1;
+  z-index: 1001;
+  background: ${0};
+  &:hover {
+    background-color: ${0};
+    color: ${0} !important;
+  }
+`), p => p.isSelected ? 'white' : 'var(--goa-color-greyscale-black)', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#fff', p => p.isSelected ? 'var(--goa-color-interactive-default)' : '#f1f1f1', p => p.isSelected ? 'white' : '#333');
+const Dropdown = props => {
+  const {
+    label,
+    selected,
+    onChange,
+    optionListMaxHeight,
+    isAutocompletion,
+    id
+  } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(selected);
+  const trailingIcon = isOpen ? 'chevron-up' : 'chevron-down';
+  const [items, setItems] = useState(props.items);
+  const [inputText, setInputText] = useState(selected);
+  useEffect(() => {
+    setItems(props.items);
+  }, [isEqual(props.items, items)]);
+  return jsxs("div", {
+    "data-testid": id,
+    children: [jsx(GoAInput, {
+      name: `dropdown-${label}`,
+      width: "100%",
+      value: inputText,
+      testId: `${id}-input`,
+      id: `${id}-input`,
+      readonly: !isAutocompletion,
+      onChange: (name, value) => {
+        if (isAutocompletion) {
+          setIsOpen(true);
+          const selectedItems = props.items.filter(item => {
+            return item.label.includes(value);
+          });
+          setItems(selectedItems);
+        }
+      },
+      trailingIcon: trailingIcon,
+      onFocus: () => {
+        setIsOpen(!isOpen);
+      }
+    }), jsx(GoADropdownListContainerWrapper, {
+      isOpen: isOpen,
+      children: jsx(GoADropdownListContainer, {
+        optionListMaxHeight: optionListMaxHeight,
+        children: items.map(item => {
+          return jsx(GoADropdownListOption, {
+            isSelected: item.value === selected,
+            children: jsx("div", {
+              "data-testid": `${id}-${item.label}-option`,
+              onClick: () => {
+                onChange(item.value);
+                setSelectedOption(item.value);
+                setInputText(item.value);
+                setIsOpen(false);
+              },
+              children: item.label
+            }, `jsonforms-dropdown-${label}-${item.value}`)
+          });
+        })
+      })
+    })]
+  });
+};
+
 function fetchRegisterConfigFromOptions(options) {
   if (!(options === null || options === void 0 ? void 0 : options.url) && !(options === null || options === void 0 ? void 0 : options.urn)) return undefined;
   const config = Object.assign({}, options);
   return config;
 }
 const EnumSelect = props => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const {
     data,
     id,
@@ -4242,9 +4357,8 @@ const EnumSelect = props => {
     error = (registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchErrors(registerConfig)) || '';
   }
   const autocompletion = ((_d = (_c = props.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.autocomplete) === true;
-  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const mergedOptions = useMemo(() => {
-    const newOptions = [...(options || []), ...registerData.map(d => {
+    const newOptions = [...(options || []), ...((registerData === null || registerData === void 0 ? void 0 : registerData.map(d => {
       if (typeof d === 'string') {
         return {
           value: d,
@@ -4253,7 +4367,7 @@ const EnumSelect = props => {
       } else {
         return Object.assign({}, d);
       }
-    })];
+    })) || [])];
     const hasNonEmptyOptions = newOptions.some(option => option.value !== '');
     if (!hasNonEmptyOptions && newOptions.length === 1 && newOptions[0].value === '') {
       return newOptions;
@@ -4266,6 +4380,7 @@ const EnumSelect = props => {
     }
     return newOptions.filter(option => option.value !== '');
   }, [registerData, options]);
+  console.log(mergedOptions);
   useEffect(() => {
     if (registerConfig) {
       registerCtx === null || registerCtx === void 0 ? void 0 : registerCtx.fetchRegisterByUrl(registerConfig);
@@ -4274,25 +4389,16 @@ const EnumSelect = props => {
   return jsx("div", {
     children: error.length > 0 ? callout({
       message: error
-    }) : jsx(GoADropdown, Object.assign({
-      name: `${label}`,
-      value: data,
-      disabled: !enabled,
-      relative: true,
-      filterable: autocompletion,
-      testId: `${id || label}-jsonform`
-    }, appliedUiSchemaOptions, {
-      onChange: (name, value) => {
+    }) : jsx(Dropdown, {
+      items: mergedOptions,
+      selected: data,
+      id: `jsonforms-${label}-dropdown`,
+      label: label,
+      isAutocompletion: autocompletion,
+      onChange: value => {
         handleChange(path, value);
       }
-    }, (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps, {
-      children: mergedOptions === null || mergedOptions === void 0 ? void 0 : mergedOptions.map(item => {
-        return jsx(GoADropdownItem, {
-          value: `${item.value}`,
-          label: `${item.label}`
-        }, `json-form-dropdown-${item.value}`);
-      })
-    }), `${id}-jsonform-key`)
+    })
   });
 };
 const enumControl = props => {
@@ -4869,7 +4975,7 @@ class ContextProviderClass {
       this.enumValues.set(key, () => data);
     };
     this.setup = props => {
-      var _a, _b, _c;
+      var _a, _b;
       this.selfProps = props;
       if (props.fileManagement) {
         const {
@@ -4892,17 +4998,17 @@ class ContextProviderClass {
       }
       if (props.data) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (_a = props.data) === null || _a === void 0 ? void 0 : _a.forEach(item => {
-          this.enumValues.set(Object.keys(item)[0], () => item);
+        Object.keys(props.data).forEach(item => {
+          this.enumValues.set(item, () => props.data[item]);
         });
       }
       if (!props.children) {
         return null;
       }
-      this.baseEnumerator.isFormSubmitted = (_b = props.isFormSubmitted) !== null && _b !== void 0 ? _b : false;
+      this.baseEnumerator.isFormSubmitted = (_a = props.isFormSubmitted) !== null && _a !== void 0 ? _a : false;
       return jsx(JsonFormContext.Provider, {
         value: this.baseEnumerator,
-        children: (_c = this.selfProps) === null || _c === void 0 ? void 0 : _c.children
+        children: (_b = this.selfProps) === null || _b === void 0 ? void 0 : _b.children
       });
     };
     this.getContextProvider = () => {
@@ -4925,8 +5031,6 @@ class ContextProviderClass {
      * Grabs data stored under a given key
      *
      */
-    // FIXME give some clue as to what data is being fetched.
-    // e.g.is it getFormContextData?
     this.getFormContextData = key => {
       const dataFunction = this.baseEnumerator.data.get(key);
       return dataFunction && dataFunction();
@@ -5412,6 +5516,7 @@ const FileUploader = _a => {
   const fileListValue = enumerators.data.get('file-list');
   const countries = ['Argentina', 'Brazil', 'Canada', 'Denmark', 'Egypt', 'France', 'Greece', 'India', 'Japan', 'Kenya'];
   enumerators.addFormContextData('countries', countries);
+  const user = enumerators === null || enumerators === void 0 ? void 0 : enumerators.getFormContextData('user');
   // eslint-disable-next-line
   const fileList = fileListValue && fileListValue();
   const {
@@ -5460,7 +5565,7 @@ const FileUploader = _a => {
     const timeoutId = setTimeout(delayedFunction, 1);
     return () => clearTimeout(timeoutId);
   }, [handleChange, fileList, propertyId]);
-  const readOnly = ((_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) === true || (props === null || props === void 0 ? void 0 : props.isStepperReview) === true;
+  const readOnly = ((_d = (_c = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _c === void 0 ? void 0 : _c.componentProps) === null || _d === void 0 ? void 0 : _d.readOnly) === true || (props === null || props === void 0 ? void 0 : props.isStepperReview) === true || user === null;
   const maxFileSize = (_g = (_f = (_e = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _e === void 0 ? void 0 : _e.componentProps) === null || _f === void 0 ? void 0 : _f.maxFileSize) !== null && _g !== void 0 ? _g : '';
   const accept = (_k = (_j = (_h = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _h === void 0 ? void 0 : _h.componentProps) === null || _j === void 0 ? void 0 : _j.accept) !== null && _k !== void 0 ? _k : '';
   return jsxs(FileUploaderStyle, {
@@ -6603,7 +6708,8 @@ const GoAGroupControlComponent = props => {
     enabled,
     renderers,
     cells,
-    visible
+    visible,
+    isStepperReview
   } = props;
   const group = uischema;
   return jsxs(Visible, {
@@ -6627,7 +6733,9 @@ const GoAGroupControlComponent = props => {
     }), !((_o = group.options) === null || _o === void 0 ? void 0 : _o.componentProps) && jsxs("div", {
       children: [group.label && jsx("h3", {
         children: group.label
-      }), jsx(GoAContainer, {
+      }), isStepperReview && jsx(Fragment, {
+        children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
+      }), !isStepperReview && jsx(GoAContainer, {
         children: renderLayoutElements(group.elements, schema, path, enabled, renderers, cells)
       })]
     })]
@@ -6984,6 +7092,14 @@ const GoAErrorControlTester = rankWith(1000, (uischema, schema, context) => {
 });
 var GoAErrorControl = withJsonFormsControlProps(ErrorControl);
 
+const GoAGroupReviewControlComponent = props => {
+  return jsx(GoAGroupControlComponent, Object.assign({}, props, {
+    isStepperReview: true
+  }));
+};
+const GoAGroupReviewLayoutTester = rankWith(1, uiTypeIs('Group'));
+const GoAGroupReviewControl = withJsonFormsLayoutProps(GoAGroupReviewControlComponent, true);
+
 const createDefaultAjv = (...schemas) => {
   const ajv = new Ajv({
     allErrors: true,
@@ -8312,8 +8428,8 @@ const GoABaseReviewRenderers = [
   tester: GoAlVerticalLayoutTester,
   renderer: GoAVerticalLayout
 }, {
-  tester: GoAGroupLayoutTester,
-  renderer: GoAGroupControl
+  tester: GoAGroupReviewLayoutTester,
+  renderer: GoAGroupReviewControl
 }, {
   tester: HelpContentTester,
   renderer: HelpReviewContent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.32.0",
+  "version": "1.32.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/Components/Dropdown.d.ts

@@ -0,0 +1,15 @@
+export interface Item {
+    label: string;
+    value: string;
+}
+interface DropdownProps {
+    items: Array<Item>;
+    label: string;
+    selected: string;
+    optionListMaxHeight?: string;
+    onChange: (value: string) => void;
+    isAutocompletion?: boolean;
+    id?: string;
+}
+export declare const Dropdown: (props: DropdownProps) => JSX.Element;
+export {};

package/src/lib/layouts/GroupControl.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { LayoutProps, RankedTester } from '@jsonforms/core';
-export declare const GoAGroupControlComponent: (props: LayoutProps) => JSX.Element;
+export interface withIsStepper {
+    isStepperReview: boolean;
+}
+export declare const GoAGroupControlComponent: (props: LayoutProps & withIsStepper) => JSX.Element;
 export declare const GoAGroupLayoutTester: RankedTester;
-export declare const GoAGroupControl: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;
+export declare const GoAGroupControl: React.ComponentType<LayoutProps & withIsStepper & import("@jsonforms/core").OwnPropsOfLayout>;

package/src/lib/layouts/GroupReviewControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { LayoutProps, RankedTester } from '@jsonforms/core';
+export declare const GoAGroupReviewControlComponent: (props: LayoutProps) => JSX.Element;
+export declare const GoAGroupReviewLayoutTester: RankedTester;
+export declare const GoAGroupReviewControl: React.ComponentType<LayoutProps & import("@jsonforms/core").OwnPropsOfLayout>;