PF4 downshift select

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -0,0 +1,136 @@
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+const options = [
+  {
+    label: 'Morton',
+    value: 'Jenifer'
+  },
+  {
+    label: 'Vega',
+    value: 'Cervantes'
+  },
+  {
+    label: 'Gilbert',
+    value: 'Wallace'
+  },
+  {
+    label: 'Jami',
+    value: 'Cecilia'
+  },
+  {
+    label: 'Ebony',
+    value: 'Kay'
+  }
+];
+
+const loadOptions = (inputValue = '') => {
+  return new Promise((res) =>
+    setTimeout(() => {
+      if (inputValue.length === 0) {
+        return res(options.slice(0, 3));
+      }
+
+      return res(options.filter(({ label }) => label.toLocaleLowerCase().includes(inputValue.toLocaleLowerCase())));
+    }, 1500)
+  );
+};
+
+const selectSchema = {
+  fields: [
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-portal-select',
+      label: 'Simple portal select',
+      options,
+      menuIsPortal: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-async-select',
+      label: 'Simple async select',
+      loadOptions
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-searchable-async-select',
+      label: 'Simple searchable async select',
+      loadOptions,
+      isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-async-select',
+      label: 'multi async select',
+      loadOptions,
+      isMulti: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'searchable-multi-async-select',
+      label: 'Multi searchable async select',
+      loadOptions,
+      isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-simple-select',
+      label: 'Simple multi select',
+      options,
+      isMulti: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-searchable-select',
+      label: 'Searchable multi select',
+      options,
+      isMulti: true,
+      isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'multi-clearable-searchable-select',
+      label: 'Searchable clearable multi select',
+      options,
+      isMulti: true,
+      isSearchable: true,
+      isClearable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'simple-select',
+      label: 'Simple-select',
+      options
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'disabled-select',
+      label: 'Disabled-select',
+      options,
+      isDisabled: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'clearable-select',
+      label: 'Clearable-select',
+      options,
+      isClearable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'searchable-select',
+      label: 'Clearable-select',
+      options,
+      isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'dosbaled-option-select',
+      label: 'Disabled-option-select',
+      options: [...options, { label: 'Disabled option', value: 'disabled', isDisabled: true }]
+    }
+  ]
+};
+
+export default {
+  ...selectSchema
+};

packages/pf4-component-mapper/demo/index.js

@@ -5,11 +5,12 @@ import FormRenderer from '@data-driven-forms/react-form-renderer';
 import miqSchema from './demo-schemas/miq-schema';
 import { uiArraySchema, arraySchema, array1Schema, schema, uiSchema, conditionalSchema, arraySchemaDDF } from './demo-schemas/widget-schema';
 import { componentMapper, FormTemplate } from '../src';
-import { Title, Button, Toolbar, ToolbarGroup } from '@patternfly/react-core';
+import { Title, Button, Toolbar, ToolbarGroup, ToolbarItem, Modal } from '@patternfly/react-core';
 import { wizardSchema, wizardSchemaWithFunction, wizardSchemaSimple, wizardSchemaSubsteps, wizardSchemaMoreSubsteps } from './demo-schemas/wizard-schema';
 import sandboxSchema from './demo-schemas/sandbox';
 import dualSchema from './demo-schemas/dual-list-schema';
 import demoSchema from '@data-driven-forms/common/src/demoschema';
+import selectSchema from './demo-schemas/select-schema';
 
 const Summary = props => <div>Custom summary component.</div>;
 
@@ -23,7 +24,7 @@ const fieldArrayState = { schema: arraySchemaDDF, additionalOptions: {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        this.state = fieldArrayState 
+        this.state = {schema: selectSchema, additionalOptions: {}} 
     }
 
     render() {
@@ -32,25 +33,30 @@ class App extends React.Component {
             <Title headingLevel="h2" size="4xl">Pf4 component mapper</Title>
             <Toolbar style={{ marginBottom: 20, marginTop: 20 }}>
                 <ToolbarGroup>
-                    <Button onClick={() => this.setState(state => ({ schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }))}>Wizard</Button>
-                </ToolbarGroup>
-                <ToolbarGroup>
-                    <Button onClick={() => this.setState(state => fieldArrayState)}>arraySchema</Button>
-                </ToolbarGroup>
-                <ToolbarGroup>
-                    <Button onClick={() => this.setState(state => ({ schema: sandboxSchema, additionalOptions: {}}))}>Sandbox</Button>
-                </ToolbarGroup>
-                <ToolbarGroup>
-                    <Button onClick={() => this.setState(state => ({ schema: demoSchema, additionalOptions: {}}))}>Super schema</Button>
-                </ToolbarGroup>
-                <ToolbarGroup>
-                    <Button onClick={() => this.setState(state => ({ schema: dualSchema, additionalOptions: {} }))}>Dual List</Button>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => ({schema: selectSchema, additionalOptions: {}}))}>select schema</Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => ({ schema: wizardSchema, additionalOptions: { showFormControls: false, wizard: true } }))}>Wizard</Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => fieldArrayState)}>arraySchema</Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => ({ schema: sandboxSchema, additionalOptions: {}}))}>Sandbox</Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => ({ schema: demoSchema, additionalOptions: {}}))}>Super schema</Button>
+                    </ToolbarItem>
+                    <ToolbarItem>
+                        <Button onClick={() => this.setState(state => ({ schema: dualSchema, additionalOptions: {} }))}>Dual List</Button>
+                    </ToolbarItem>
                 </ToolbarGroup>
             </Toolbar>
             <FormRenderer
                 onSubmit={console.log}
                 initialValues={{
-                    'async-drop-down': 'async-option-2'
+                    'simple-select': 'Kay'
                 }}
                 componentMapper={{
                     ...componentMapper,

packages/pf4-component-mapper/package.json

@@ -57,8 +57,8 @@
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^3.1.2",
     "rollup-plugin-replace": "^2.2.0",
-    "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-size-snapshot": "^0.10.0",
     "rollup-plugin-sourcemaps": "^0.5.0",
     "rollup-plugin-terser": "^5.1.2",
@@ -78,9 +78,8 @@
     "@patternfly/react-icons": "^4.3.5"
   },
   "dependencies": {
-    "@patternfly/patternfly-next": "^1.0.175",
     "prop-types": "^15.7.2",
-    "react-select": "^3.0.4"
+    "downshift": "^5.4.3"
   },
   "postpublish": "export RELEASE_DEMO=true"
 }

packages/pf4-component-mapper/rollup.config.js

@@ -5,9 +5,9 @@ import replace from 'rollup-plugin-replace';
 import nodeGlobals from 'rollup-plugin-node-globals';
 import { terser } from 'rollup-plugin-terser';
 import { createFilter } from 'rollup-pluginutils';
-import sass from 'rollup-plugin-sass';
 import async from 'rollup-plugin-async';
 import sourcemaps from 'rollup-plugin-sourcemaps';
+import postcss from 'rollup-plugin-postcss';
 
 import glob from 'glob';
 import path from 'path';
@@ -45,7 +45,10 @@ const babelOptions = {
 
 const commonjsOptions = {
   ignoreGlobal: true,
-  include: /node_modules/
+  include: /node_modules/,
+  namedExports: {
+    '../../node_modules/react-is/index.js': ['isForwardRef']
+  }
 };
 
 const plugins = [
@@ -59,8 +62,9 @@ const plugins = [
     keep_classnames: true,
     keep_fnames: true
   }),
-  sass({
-    insert: true
+  postcss({
+    inject: true,
+    extensions: ['.css', '.scss']
   }),
   sourcemaps()
 ];

packages/pf4-component-mapper/src/common/select/clear-indicator.js

@@ -1,23 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, ButtonVariant } from '@patternfly/react-core';
-
 import { TimesCircleIcon } from '@patternfly/react-icons';
+import './clear-indicator.scss';
 
-const ClearIndicator = ({ clearValue, innerProps: { ref, ...restInnerProps } }) => (
-  <Button {...restInnerProps} onClick={clearValue} variant={ButtonVariant.plain}>
+const ClearIndicator = ({ clearSelection }) => (
+  <button
+    onClick={(event) => {
+      clearSelection();
+      event.stopPropagation();
+    }}
+    className="pf-c-button pf-m-plain pf-c-select__toggle-clear pf-u-p-0"
+    type="button"
+    aria-label="Clear all"
+  >
     <TimesCircleIcon />
-  </Button>
+  </button>
 );
 
 ClearIndicator.propTypes = {
-  innerProps: PropTypes.object.isRequired,
-  clearValue: PropTypes.func
-};
-
-ClearIndicator.defaultProps = {
-  clearValue: () => undefined
+  clearSelection: PropTypes.func.isRequired
 };
 
 export default ClearIndicator;

packages/pf4-component-mapper/src/common/select/clear-indicator.scss

@@ -0,0 +1,17 @@
+.ddorg__pf4-component-mapper__select-clear-indicator {
+  position: relative;
+  display: inline-block;
+  > svg {
+    fill: var(--pf-global--palette--black-600)
+  }
+  &:hover > svg {
+    fill: inherit
+  }
+  &::before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}

packages/pf4-component-mapper/src/common/select/empty-options.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const EmptyOptions = ({ noOptionsMessage, noResultsMessage, getInputProps, isSearchable, isFetching }) => {
+  const { value } = getInputProps();
+  const message = isFetching ? noOptionsMessage() : isSearchable && value ? noResultsMessage : noOptionsMessage();
+  return <div className="pf-c-select__menu-item pf-m-disabled">{message}</div>;
+};
+
+EmptyOptions.propTypes = {
+  noOptionsMessage: PropTypes.func.isRequired,
+  noResultsMessage: PropTypes.node.isRequired,
+  getInputProps: PropTypes.func.isRequired,
+  isSearchable: PropTypes.bool,
+  isFetching: PropTypes.bool
+};
+
+export default EmptyOptions;

packages/pf4-component-mapper/src/common/select/input.js

@@ -1,13 +1,39 @@
-import React from 'react';
-import { components } from 'react-select';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Divider } from '@patternfly/react-core';
 
-const Input = (props) => <components.Input {...props} />;
+import './input.scss';
+
+const Input = ({ inputRef, isSearchable, isDisabled, getInputProps, value, ...props }) => {
+  const inputProps = getInputProps({ disabled: isDisabled });
+  return (
+    <Fragment>
+      <div className="pf-c-select__menu-search">
+        <input
+          autoFocus
+          value=""
+          {...props}
+          {...(!isSearchable && { tabIndex: '-1' })}
+          className="pf-c-form-control pf-m-search"
+          ref={inputRef}
+          {...{
+            ...inputProps,
+            value: inputProps.value || '',
+            onChange: inputProps.onChange || Function
+          }}
+        />
+      </div>
+      <Divider />
+    </Fragment>
+  );
+};
 
 Input.propTypes = {
-  selectProps: PropTypes.shape({
-    isMulti: PropTypes.bool
-  }).isRequired
+  inputRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  isSearchable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  getInputProps: PropTypes.func.isRequired,
+  value: PropTypes.string
 };
 
 export default Input;