@elliemae/ds-controlled-form 2.4.1-rc.4 → 2.4.1-rc.5

package/cjs/autocomplete/parts/controls/useMaskedOnChange.js

@@ -1,28 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var AutocompleteCTX = require('../../AutocompleteCTX.js');
-
-const useMaskedOnChange = () => {
-  const {
-    props: {
-      useMask,
-      onChange
-    },
-    setShowPopover
-  } = React.useContext(AutocompleteCTX.AutocompleteContext); // default onchange when no mask provided
-
-  const handleOnChange = React.useCallback(e => {
-    setShowPopover(true);
-    onChange(e.target.value);
-  }, [onChange, setShowPopover]);
-  const onChangeMask = useMask({
-    valueSetter: setInputValue,
-    onChange: handleOnChange
-  });
-  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
-};
-
-exports.useMaskedOnChange = useMaskedOnChange;

package/cjs/autocomplete/parts/menu-list/useMenuList.js

@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var AutocompleteCTX = require('../../AutocompleteCTX.js');
-
-const useMenuList = () => {
-  var _inputRef$current3;
-
-  const {
-    props: {
-      selectedValues,
-      onMenuOpen,
-      options
-    },
-    inputRef,
-    setCurrentOption,
-    scrollOptionIntoView,
-    setShowPopover,
-    showPopover
-  } = React.useContext(AutocompleteCTX.AutocompleteContext);
-  React.useEffect(() => {
-    var _inputRef$current;
-
-    if (options.length === 0 || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
-      setShowPopover(false);
-    }
-  }, [options, inputRef, setShowPopover]);
-  React.useEffect(() => {
-    const getFirstOption = () => {
-      for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
-        setCurrentOption(options[i].dsId);
-        break;
-      }
-    };
-
-    if (showPopover) {
-      var _inputRef$current2;
-
-      onMenuOpen();
-
-      if (((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '') {
-        getFirstOption();
-      } else if (Array.isArray(selectedValues)) {
-        const multiSelectedValues = selectedValues;
-
-        if (multiSelectedValues.length > 0) {
-          setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
-          scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
-        } else {
-          getFirstOption();
-        }
-      } else {
-        const singleSelectedValue = selectedValues;
-
-        if (singleSelectedValue) {
-          setCurrentOption(selectedValues.dsId);
-          scrollOptionIntoView(selectedValues.dsId);
-        } else {
-          getFirstOption();
-        }
-      }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [showPopover, (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value]);
-};
-
-exports.useMenuList = useMenuList;

package/cjs/autocomplete/propTypes.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactDesc = require('react-desc');
-
-const propTypes = {
-  placeholder: reactDesc.PropTypes.string.description('input s placeholder value').defaultValue(''),
-  options: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.object]).description('List of options').defaultValue([]),
-  selectedValues: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.object), reactDesc.PropTypes.object, reactDesc.PropTypes.string]).description('Array of option or single option selected'),
-  autoFocus: reactDesc.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
-  hasError: reactDesc.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
-  onChange: reactDesc.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
-  onSelectAll: reactDesc.PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
-  onFilter: reactDesc.PropTypes.func.description('function triggered when user type in the autocomplete input').defaultValue(''),
-  onCreate: reactDesc.PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
-  onClearAll: reactDesc.PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
-  onMenuOpen: reactDesc.PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
-  inputMinWidth: reactDesc.PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
-  menuMinWidth: reactDesc.PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
-  menuMaxHeight: reactDesc.PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
-  withToggle: reactDesc.PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
-};
-
-exports.propTypes = propTypes;

package/cjs/autocomplete/utils/hooks/useKeyboardNavigation.js

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.js');
-var React = require('react');
-var AutocompleteCTX = require('../../AutocompleteCTX.js');
-var listHelper = require('../listHelper.js');
-
-const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
-
-const useKeyboardNavigation = () => {
-  const {
-    props: {
-      onKeyDown,
-      onChange,
-      options,
-      onFilter
-    },
-    setShowPopover,
-    showPopover,
-    focusOptionIdx,
-    inputRef,
-    setCurrentOption,
-    scrollOptionIntoView
-  } = React.useContext(AutocompleteCTX.AutocompleteContext);
-  const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
-  const currentItem = options.find(item => item.dsId === focusOptionIdx);
-  const selectOption = React.useCallback(() => {
-    if (inputRef.current) inputRef.current.value = currentItem.label;
-    if (onFilter) onFilter(currentItem.label);
-    onChange(currentItem.label);
-    setShowPopover(false);
-  }, [currentItem, setShowPopover, onFilter, inputRef, onChange]);
-  const onInputKeyDown = React.useCallback(e => {
-    const targetElement = e.target; // =============================================================================
-    // CUSTOM KEYS
-    // =============================================================================
-
-    onKeyDown(e, currentItem); // =============================================================================
-    // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
-    // =============================================================================
-
-    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
-      if (showPopover) {
-        e.preventDefault();
-        selectOption();
-      }
-    } // =============================================================================
-    // ARROWS UP AND DOWN
-    // =============================================================================
-
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-
-      if (showPopover) {
-        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-      }
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-
-      if (showPopover) {
-        const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const nextItemIndex = listHelper.findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
-        });
-      }
-    } // =============================================================================
-    // ESCAPE
-    // =============================================================================
-
-
-    if (e.key === 'Escape') {
-      setShowPopover(false);
-    }
-  }, [scrollOptionIntoView, currentItemIndex, options, currentItem, showPopover, onKeyDown, setCurrentOption, setShowPopover, selectOption]);
-  return {
-    onInputKeyDown
-  };
-};
-
-exports.useKeyboardNavigation = useKeyboardNavigation;

package/cjs/autocomplete/utils/hooks/useOnElementResize.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-require('core-js/modules/web.dom-collections.iterator.js');
-var React = require('react');
-
-// Taken and modified from https://stackoverflow.com/a/60218754
-
-const useOnElementResize = targetRef => {
-  var _targetRef$current, _targetRef$current2;
-
-  const [width, setWidth] = React.useState(targetRef.current ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : 0);
-  const [height, setHeight] = React.useState(targetRef.current ? (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetWidth : 0);
-  const observer = React.useRef(null);
-  React.useEffect(() => {
-    function outputsize() {
-      if (targetRef.current) {
-        setWidth(targetRef.current.offsetWidth);
-        setHeight(targetRef.current.offsetHeight);
-      }
-    }
-
-    observer.current = new ResizeObserver(outputsize).observe(targetRef.current);
-    return () => {
-      var _observer$current;
-
-      (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
-    };
-  }, [targetRef]);
-  return React.useMemo(() => ({
-    width,
-    height
-  }), [width, height]);
-};
-
-exports.useOnElementResize = useOnElementResize;

package/esm/autocomplete/config/constants.js

@@ -1,10 +0,0 @@
-const DATA_TESTID = {
-  COMBOBOX_MENU_LIST: 'autocomplete-menu-list',
-  COMBOBOX_CLEAR_BTN: 'autocomplete-clear-btn',
-  COMBOBOX_ALL_BTN: 'autocomplete-all-btn',
-  COMBOBOX_DROPDOWN_BTN: 'autocomplete-dropdown-btn',
-  COMBOBOX_OPTION: 'autocomplete-option',
-  COMBOBOX: 'autocomplete'
-};
-
-export { DATA_TESTID };

package/esm/autocomplete/config/useGetPropsWithDefault.js

@@ -1,7 +0,0 @@
-import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
-import { defaultProps } from '../AutocompleteCTX.js';
-
-// we have to merge the "default" nested default values with what the user gives us...
-const useGetAutocompleteWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
-
-export { useGetAutocompleteWithDefaultsProps };

package/esm/autocomplete/index.d.js

@@ -1 +0,0 @@
-

package/esm/autocomplete/parts/a11y-messages/MultiAllyMessages.js

@@ -1,25 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { useContext } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { getSelectableOptions } from '../../utils/listHelper.js';
-import { StyledA11ySelectedValues } from './styled.js';
-
-const MultiAllyMessages = () => {
-  const {
-    props: {
-      options,
-      selectedValues
-    }
-  } = useContext(AutocompleteContext);
-  const selectableOptions = getSelectableOptions(options);
-  const multipleSelectedValues = selectedValues;
-  return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
-    "aria-live": "polite",
-    "aria-atomic": "false",
-    "aria-relevant": "additions text"
-  }, void 0, "Options selected: ".concat(multipleSelectedValues.map(item => item.label).join(', '), ". ").concat(multipleSelectedValues.length, " of ").concat(selectableOptions.length));
-};
-
-export { MultiAllyMessages };

package/esm/autocomplete/parts/a11y-messages/SingleAllyMessages.js

@@ -1,20 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { StyledA11ySelectedValues } from './styled.js';
-
-const SingleAllyMessages = () => {
-  const {
-    props: {
-      selectedValues
-    }
-  } = useContext(AutocompleteContext);
-  const singleSelectedValue = selectedValues;
-  return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
-    "aria-live": "polite",
-    "aria-atomic": "false",
-    "aria-relevant": "additions text"
-  }, void 0, "Option selected: ".concat(singleSelectedValue.label, "."));
-};
-
-export { SingleAllyMessages };

package/esm/autocomplete/parts/a11y-messages/index.js

@@ -1,2 +0,0 @@
-export { MultiAllyMessages } from './MultiAllyMessages.js';
-export { SingleAllyMessages } from './SingleAllyMessages.js';

package/esm/autocomplete/parts/a11y-messages/styled.js

@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledA11ySelectedValues = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-cm1aqq-0"
-})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
-
-export { StyledA11ySelectedValues };

package/esm/autocomplete/parts/controls/Controls.js

@@ -1,55 +0,0 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
-import { useControlsInput } from './useControlsInput.js';
-import { StyledControlsWrapper, StyledInputWrapper, StyledInput } from './styled.js';
-import { jsx } from 'react/jsx-runtime';
-
-const Controls = () => {
-  const {
-    props: {
-      autoFocus,
-      hasError,
-      placeholder,
-      inputMinWidth
-    },
-    inputRef,
-    showPopover,
-    focusOptionIdx,
-    controlsWrapperRef
-  } = useContext(AutocompleteContext);
-  const {
-    onInputKeyDown
-  } = useKeyboardNavigation();
-  const {
-    handleOnBlur,
-    handleOnInputMouseDown,
-    handleOnChange
-  } = useControlsInput();
-  return /*#__PURE__*/jsx(StyledControlsWrapper, {
-    ref: controlsWrapperRef,
-    cols: ['minmax(20px, auto)'],
-    minWidth: inputMinWidth,
-    hasError: hasError,
-    children: /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInput, {
-      autoFocus: autoFocus,
-      "aria-labelledby": "combo-label",
-      "aria-controls": "combo-listbox",
-      "aria-owns": "combo-listbox",
-      "aria-activedescendant": focusOptionIdx,
-      "aria-expanded": showPopover,
-      "aria-haspopup": "listbox",
-      placeholder: placeholder,
-      role: "combobox",
-      ref: inputRef,
-      type: "text",
-      onKeyDown: onInputKeyDown,
-      onChange: handleOnChange,
-      onBlur: handleOnBlur,
-      onClick: handleOnInputMouseDown
-    }))
-  });
-};
-
-export { Controls };

package/esm/autocomplete/parts/controls/index.js

@@ -1 +0,0 @@
-export { Controls } from './Controls.js';

package/esm/autocomplete/parts/controls/styled.js

@@ -1,32 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled from 'styled-components';
-import { css } from '@elliemae/ds-system';
-import { Grid } from '@elliemae/ds-grid';
-
-var _templateObject, _templateObject2;
-const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), props => props.hasError ? props.theme.colors.danger[900] : props.theme.colors.neutral[400]);
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.colors.brand[700];
-});
-const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-vp36gr-0"
-})(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}:focus-within{::after{", "}}"], _ref2 => {
-  let {
-    minWidth
-  } = _ref2;
-  return "".concat(minWidth, "px");
-}, normalBorder, focusBorder);
-const StyledInput = /*#__PURE__*/styled.input.withConfig({
-  componentId: "sc-vp36gr-1"
-})(["::placeholder{font-style:italic;color:", ";}font-size:13px;line-height:13px;border:none;padding:0;outline:none;width:100%;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[700]);
-const StyledInputPlaceHolder = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-vp36gr-2"
-})(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);
-const StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-vp36gr-3"
-})(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
-
-export { StyledControlsWrapper, StyledInput, StyledInputPlaceHolder, StyledInputWrapper };

package/esm/autocomplete/parts/controls/useControlsInput.js

@@ -1,40 +0,0 @@
-import { useContext, useCallback, useMemo } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-
-const useControlsInput = () => {
-  const {
-    props: {
-      selectedValues,
-      onChange,
-      placeholder,
-      onFilter
-    },
-    setShowPopover,
-    inputRef
-  } = useContext(AutocompleteContext);
-  const handleOnChange = useCallback(e => {
-    const target = e.target;
-    onChange(target.value);
-    setShowPopover(true);
-    onFilter(target.value);
-  }, [onFilter, onChange, setShowPopover]);
-  const handleOnBlur = useCallback(() => {
-    setShowPopover(false);
-  }, [setShowPopover]);
-  const handleOnInputMouseDown = useCallback(e => {
-    e.stopPropagation();
-  }, []);
-  const showPlaceholder = useMemo(() => {
-    var _inputRef$current;
-
-    return !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && selectedValues === '' ? placeholder : null;
-  }, [placeholder, inputRef, selectedValues]);
-  return useMemo(() => ({
-    handleOnBlur,
-    handleOnChange,
-    handleOnInputMouseDown,
-    showPlaceholder
-  }), [handleOnBlur, handleOnInputMouseDown, handleOnChange, showPlaceholder]);
-};
-
-export { useControlsInput };

package/esm/autocomplete/parts/controls/useMaskedOnChange.js

@@ -1,24 +0,0 @@
-import { useContext, useCallback } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-
-const useMaskedOnChange = () => {
-  const {
-    props: {
-      useMask,
-      onChange
-    },
-    setShowPopover
-  } = useContext(AutocompleteContext); // default onchange when no mask provided
-
-  const handleOnChange = useCallback(e => {
-    setShowPopover(true);
-    onChange(e.target.value);
-  }, [onChange, setShowPopover]);
-  const onChangeMask = useMask({
-    valueSetter: setInputValue,
-    onChange: handleOnChange
-  });
-  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
-};
-
-export { useMaskedOnChange };

package/esm/autocomplete/parts/menu-list/useMenuList.js

@@ -1,65 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { AutocompleteContext } from '../../AutocompleteCTX.js';
-
-const useMenuList = () => {
-  var _inputRef$current3;
-
-  const {
-    props: {
-      selectedValues,
-      onMenuOpen,
-      options
-    },
-    inputRef,
-    setCurrentOption,
-    scrollOptionIntoView,
-    setShowPopover,
-    showPopover
-  } = useContext(AutocompleteContext);
-  useEffect(() => {
-    var _inputRef$current;
-
-    if (options.length === 0 || ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
-      setShowPopover(false);
-    }
-  }, [options, inputRef, setShowPopover]);
-  useEffect(() => {
-    const getFirstOption = () => {
-      for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
-        setCurrentOption(options[i].dsId);
-        break;
-      }
-    };
-
-    if (showPopover) {
-      var _inputRef$current2;
-
-      onMenuOpen();
-
-      if (((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '') {
-        getFirstOption();
-      } else if (Array.isArray(selectedValues)) {
-        const multiSelectedValues = selectedValues;
-
-        if (multiSelectedValues.length > 0) {
-          setCurrentOption(multiSelectedValues[multiSelectedValues.length - 1].dsId);
-          scrollOptionIntoView(multiSelectedValues[multiSelectedValues.length - 1].dsId);
-        } else {
-          getFirstOption();
-        }
-      } else {
-        const singleSelectedValue = selectedValues;
-
-        if (singleSelectedValue) {
-          setCurrentOption(selectedValues.dsId);
-          scrollOptionIntoView(selectedValues.dsId);
-        } else {
-          getFirstOption();
-        }
-      }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [showPopover, (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value]);
-};
-
-export { useMenuList };

package/esm/autocomplete/propTypes.js

@@ -1,21 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const propTypes = {
-  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
-  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
-  selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object, PropTypes.string]).description('Array of option or single option selected'),
-  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
-  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
-  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
-  onSelectAll: PropTypes.func.description('function triggered when ALL button is selected from the header menu list').defaultValue(''),
-  onFilter: PropTypes.func.description('function triggered when user type in the autocomplete input').defaultValue(''),
-  onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
-  onClearAll: PropTypes.func.description('function triggered when user select CLEAR button from the header menu list').defaultValue(''),
-  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue(''),
-  inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
-  menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
-  menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
-  withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false')
-};
-
-export { propTypes };