@abgov/jsonforms-components 1.9.0 → 1.10.0

package/index.esm.js

@@ -7,8 +7,6 @@ import { withJsonFormsRendererProps, withJsonFormsControlProps, withJsonFormsEnu
 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';
@@ -3415,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;
@@ -3423,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);
@@ -3437,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, {

package/package.json

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