@abgov/jsonforms-components 1.41.0 → 1.41.2

package/index.esm.js

@@ -4431,23 +4431,17 @@ let _$7 = t => t,
   _t2$4,
   _t3$4,
   _t4$2;
-styled.div(_t$7 || (_t$7 = _$7`
-  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;
+const GoADropdownTextbox = styled.div(_t$7 || (_t$7 = _$7`
+  border-radius: var(--goa-space-2xs);
   box-shadow: ${0};
-`), p => p.isOpen ? `0 0 0 3px #feba35` : '');
+  &:hover {
+    cursor: pointer;
+  }
+
+  .inputStyle {
+    box-shadow: ${0};
+  }
+`), p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus)` : '', p => p.isOpen ? `0 0 0 3px var(--goa-color-interactive-focus) !important` : '');
 const GoADropdownListContainerWrapper = styled.div(_t2$4 || (_t2$4 = _$7`
   position: relative;
   display: ${0};
@@ -4681,27 +4675,27 @@ const Dropdown = props => {
   };
   return jsxs("div", {
     "data-testid": id,
-    children: [jsx(GoAInput, {
-      onTrailingIconClick: () => {
-        setIsOpen(!isOpen);
-      },
-      disabled: !enabled,
-      name: `dropdown-${label}`,
-      width: "100%",
-      value: inputText,
-      testId: `${id}-input`,
-      id: `${id}-input`,
-      readonly: !isAutoCompletion,
-      onChange: (name, value) => {
-        if (isAutoCompletion) {
-          setInputText(value);
-          const selectedItems = props.items.filter(item => {
-            return item.label.includes(value);
-          });
-          setItems(selectedItems);
-        }
-      },
-      trailingIcon: trailingIcon
+    children: [jsx(GoADropdownTextbox, {
+      isOpen: isOpen,
+      children: jsx(GoAInput, {
+        disabled: !enabled,
+        name: `dropdown-${label}`,
+        width: "100%",
+        value: inputText,
+        testId: `${id}-input`,
+        id: `${id}-input`,
+        readonly: !isAutoCompletion,
+        onChange: (name, value) => {
+          if (isAutoCompletion) {
+            setInputText(value);
+            const selectedItems = props.items.filter(item => {
+              return item.label.includes(value);
+            });
+            setItems(selectedItems);
+          }
+        },
+        trailingIcon: trailingIcon
+      })
     }), jsx(GoADropdownListContainerWrapper, {
       isOpen: isOpen,
       id: `${PREFIX}-dropDownListContainerWrapper-${label}`,
@@ -5146,6 +5140,11 @@ const Anchor = styled.div(_t5$1 || (_t5$1 = _$5`
   text-decoration: underline;
   outline: none;
   cursor: pointer;
+
+  &:focus {
+    outline: 2px solid #0070c4;
+    background-color: #e6f7ff;
+  }
 `));
 styled.div(_t6$1 || (_t6$1 = _$5`
   margin-left: var(--goa-space-m);
@@ -5739,8 +5738,15 @@ const FormStepper = props => {
                     children: [jsx(ReviewItemTitle, {
                       children: categoryLabel
                     }), jsx(Anchor, {
+                      tabIndex: readOnly ? -1 : 0,
                       onClick: () => setPage(index + 1),
                       "data-testid": testId,
+                      onKeyDown: e => {
+                        if (!readOnly && (e.key === ' ' || e.key === 'Enter')) {
+                          e.preventDefault();
+                          setPage(index + 1);
+                        }
+                      },
                       children: readOnly ? 'View' : 'Edit'
                     })]
                   }), jsx(GoAGrid, {
@@ -8112,7 +8118,7 @@ const AddressViews = ({
   data,
   isAlbertaAddress
 }) => {
-  var _a;
+  var _a, _b, _c, _d;
   const provinces = [{
     value: 'AB',
     label: 'Alberta'
@@ -8158,6 +8164,7 @@ const AddressViews = ({
       minChildWidth: "0",
       gap: "s",
       children: [jsx(GoAFormItem, {
+        error: ((_a = data === null || data === void 0 ? void 0 : data.addressLine1) === null || _a === void 0 ? void 0 : _a.length) === 0 ? 'addressLine1 is required' : '',
         label: `${isAlbertaAddress ? 'Alberta p' : 'P'}ostal address`,
         children: jsx("p", {
           children: data === null || data === void 0 ? void 0 : data.addressLine1
@@ -8172,11 +8179,13 @@ const AddressViews = ({
       minChildWidth: "0ch",
       gap: "s",
       children: [jsx(GoAFormItem, {
+        error: ((_b = data === null || data === void 0 ? void 0 : data.municipality) === null || _b === void 0 ? void 0 : _b.length) === 0 ? 'city is required' : '',
         label: "City",
         children: jsx("p", {
           children: data === null || data === void 0 ? void 0 : data.city
         })
       }), jsx(GoAFormItem, {
+        error: ((_c = data === null || data === void 0 ? void 0 : data.postalCode) === null || _c === void 0 ? void 0 : _c.length) === 0 ? 'postalCode is required' : '',
         label: "Postal Code",
         children: jsx("p", {
           children: data === null || data === void 0 ? void 0 : data.postalCode
@@ -8192,7 +8201,7 @@ const AddressViews = ({
           children: "Alberta"
         }), !isAlbertaAddress && jsx("div", {
           "data-testid": "address-form-province-view",
-          children: (_a = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.province))) === null || _a === void 0 ? void 0 : _a.label
+          children: (_d = provinces.find(p => p.value === (data === null || data === void 0 ? void 0 : data.province))) === null || _d === void 0 ? void 0 : _d.label
         })]
       }), jsx(GoAFormItem, {
         label: "Country",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.41.0",
+  "version": "1.41.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",