Merge branch 'master' into warning

Author: rvsia

packages/ant-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/ant-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Component mapper for Ant Design component mapper form data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/blueprint-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/blueprint-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Blueprint component mapper for data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/carbon-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/carbon-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "carbon-component-mapper for data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/carbon-component-mapper/src/files/select.js

@@ -5,7 +5,7 @@ import { useFieldApi } from '@data-driven-forms/react-form-renderer';
 import DataDrivenSelect from '@data-driven-forms/common/src/select';
 import fnToString from '@data-driven-forms/common/src/utils/fn-to-string';
 
-import { Select as CarbonSelect, MultiSelect, SelectItem } from 'carbon-components-react';
+import { Select as CarbonSelect, MultiSelect, SelectItem, ComboBox } from 'carbon-components-react';
 import prepareProps from '../common/prepare-props';
 
 export const multiOnChange = (input, simpleValue) => ({ selectedItems }) => {
@@ -165,8 +165,63 @@ ClearedSelect.propTypes = {
   isClearable: PropTypes.bool
 };
 
+const ClearedSelectSearchable = ({
+  isSearchable,
+  isClearable,
+  isDisabled,
+  isMulti,
+  invalidText,
+  hideSelectedOptions,
+  noOptionsMessage,
+  onInputChange,
+  options,
+  isFetching,
+  invalid,
+  classNamePrefix,
+  closeMenuOnSelect,
+  originalOnChange,
+  placeholder,
+  labelText,
+  ...rest
+}) => (
+  <ComboBox
+    disabled={isFetching}
+    {...rest}
+    id={rest.name}
+    invalid={Boolean(invalidText)}
+    invalidText={invalidText}
+    initialSelectedItem={rest.value}
+    items={options}
+    placeholder={placeholder}
+    titleText={labelText}
+    onChange={originalOnChange}
+  />
+);
+
+ClearedSelectSearchable.propTypes = {
+  invalidText: PropTypes.node,
+  hideSelectedOptions: PropTypes.any,
+  noOptionsMessage: PropTypes.any,
+  onInputChange: PropTypes.func,
+  options: PropTypes.array,
+  isFetching: PropTypes.bool,
+  invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),
+  isMulti: PropTypes.bool,
+  classNamePrefix: PropTypes.any,
+  closeMenuOnSelect: PropTypes.any,
+  onChange: PropTypes.func,
+  originalOnChange: PropTypes.func,
+  carbonLabel: PropTypes.node,
+  placeholder: PropTypes.node,
+  isDisabled: PropTypes.bool,
+  isRequired: PropTypes.bool,
+  isSearchable: PropTypes.bool,
+  isClearable: PropTypes.bool,
+  labelText: PropTypes.string
+};
+
 const Select = (props) => {
-  const { isMulti, isSearchable, loadOptions, input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
+  const { isMulti, isSearchable, isClearable, loadOptions, input, meta, validateOnMount, helperText, ...rest } = useFieldApi(prepareProps(props));
 
   const [loadOptionsChangeCounter, setCounter] = useState(0);
 
@@ -176,8 +231,10 @@ const Select = (props) => {
     setCounter(loadOptionsChangeCounter + 1);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [loadOptionsStr]);
+  const isSearchClear = isSearchable || isClearable;
 
-  const Component = isMulti && isSearchable ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : ClearedSelect;
+  const Component =
+    isMulti && isSearchClear ? ClearedMultiSelectFilterable : isMulti ? ClearedMultiSelect : isSearchClear ? ClearedSelectSearchable : ClearedSelect;
 
   const invalidText = ((meta.touched || validateOnMount) && meta.error) || '';
   const text = ((meta.touched || validateOnMount) && meta.warning) || helperText;

packages/carbon-component-mapper/src/tests/select.test.js

@@ -5,7 +5,7 @@ import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-rend
 
 import FormTemplate from '../files/form-template';
 import componentMapper from '../files/component-mapper';
-import { Select, MultiSelect } from 'carbon-components-react';
+import { Select, MultiSelect, ComboBox } from 'carbon-components-react';
 import { multiOnChange } from '../files/select';
 
 describe('<Select />', () => {
@@ -31,6 +31,31 @@ describe('<Select />', () => {
     expect(wrapper.find(Select)).toHaveLength(1);
   });
 
+  ['isSearchable', 'isClearable'].forEach((setting) => {
+    it(`renders select ${setting}`, () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.SELECT,
+            name: 'select',
+            label: 'select',
+            [setting]: true,
+            options: [
+              { label: 'option 1', value: 1 },
+              { label: 'option 2', value: 2 }
+            ]
+          }
+        ]
+      };
+
+      const wrapper = mount(
+        <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
+      );
+
+      expect(wrapper.find(ComboBox)).toHaveLength(1);
+    });
+  });
+
   it('renders multi select', () => {
     const schema = {
       fields: [
@@ -55,29 +80,31 @@ describe('<Select />', () => {
     expect(wrapper.find(MultiSelect)).toHaveLength(1);
   });
 
-  it('renders multi select - searchable', () => {
-    const schema = {
-      fields: [
-        {
-          component: componentTypes.SELECT,
-          name: 'select',
-          label: 'select',
-          initialValue: [1],
-          isMulti: true,
-          isSearchable: true,
-          options: [
-            { label: 'option 1', value: 1 },
-            { label: 'option 2', value: 2 }
-          ]
-        }
-      ]
-    };
-
-    const wrapper = mount(
-      <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
-    );
-
-    expect(wrapper.find(MultiSelect.Filterable)).toHaveLength(1);
+  ['isSearchable', 'isClearable'].forEach((setting) => {
+    it(`renders multi select - ${setting}`, () => {
+      const schema = {
+        fields: [
+          {
+            component: componentTypes.SELECT,
+            name: 'select',
+            label: 'select',
+            initialValue: [1],
+            isMulti: true,
+            [setting]: true,
+            options: [
+              { label: 'option 1', value: 1 },
+              { label: 'option 2', value: 2 }
+            ]
+          }
+        ]
+      };
+
+      const wrapper = mount(
+        <FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
+      );
+
+      expect(wrapper.find(MultiSelect.Filterable)).toHaveLength(1);
+    });
   });
 
   describe('multichange', () => {

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/common",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Common components, helpers and other pieces of code",
   "license": "Apache-2.0",
   "main": "index.js",

packages/mui-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/mui-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Component mapper for Material ui component mapper form data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/parsers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/parsers",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Parsers for Data Driven Forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/pf3-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/pf3-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Patternfly 3 component mapper",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

packages/pf4-component-mapper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-driven-forms/pf4-component-mapper",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "description": "Starter pf4-component-mapper for data-driven-forms.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",