@abgov/jsonforms-components 1.32.1 → 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');
 
@@ -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 => {

package/package.json

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