@elliemae/ds-controlled-form 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/controlled-combobox/parts/menu-list/useItemRenderer.js

@@ -1,97 +1,132 @@
-import * as React from "react";
-import React2, { useMemo, useContext, useCallback } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { SingleMenuItem, MultiMenuItem, Section, Separator } from "@elliemae/ds-form";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { StyledCreatableLabel } from "./styled";
-import { isSelected } from "../../utils/listHelper";
-import { ComboboxDataTestid } from "../../ComboboxDataTestids";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useContext, useCallback, useMemo } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { Section, Separator, SingleMenuItem, MultiMenuItem } from '@elliemae/ds-form';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledCreatableLabel } from './styled.js';
+import { isSelected } from '../../utils/listHelper.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _StyledCreatableLabel;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 const useItemRenderer = () => {
   const {
-    props: { options, onCreate, onChange, selectedValues, onFilter },
+    props: {
+      options,
+      onCreate,
+      onChange,
+      selectedValues,
+      onFilter
+    },
     inputRef,
     setShowPopover,
     focusOptionIdx,
     virtualListHelpers
   } = useContext(ComboBoxContext);
-  const { virtualItems } = virtualListHelpers;
+  const {
+    virtualItems
+  } = virtualListHelpers;
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
   const handleClick = useCallback((option, e) => {
-    if (option.type === "creatable") {
+    if (option.type === 'creatable') {
       if (inputRef.current) {
         onCreate(inputRef.current.value);
-        inputRef.current.value = "";
-        onFilter("");
+        inputRef.current.value = '';
+        onFilter('');
       }
+
       return;
     }
+
     if (!multiple) {
       setShowPopover(false);
-      if (inputRef.current)
-        inputRef.current.value = "";
+      if (inputRef.current) inputRef.current.value = '';
     } else if (inputRef.current) {
       onFilter(inputRef.current.value);
     }
+
     onChange(option);
     e.stopPropagation();
     e.preventDefault();
   }, [onFilter, onChange, setShowPopover, multiple, inputRef]);
-  const handleOnMouseDown = useCallback((e) => {
+  const handleOnMouseDown = useCallback(e => {
     e.preventDefault();
   }, []);
-  const ItemRenderer = useMemo(() => virtualItems.map((vItem) => {
+  const ItemRenderer = useMemo(() => virtualItems.map(vItem => {
     const option = options[vItem.index];
     const generalProps = {
-      wrapperStyles: { position: "absolute", top: vItem.start, left: 0, width: "100%" },
-      key: `${option.dsId}`,
+      wrapperStyles: {
+        position: 'absolute',
+        top: vItem.start,
+        left: 0,
+        width: '100%'
+      },
+      key: "".concat(option.dsId),
       innerRef: vItem.measureRef
     };
-    if (option.type === "section") {
-      return /* @__PURE__ */ React2.createElement(Section, {
-        label: option.label,
-        ...generalProps
-      });
+
+    if (option.type === 'section') {
+      return /*#__PURE__*/jsx(Section, _objectSpread({
+        label: option.label
+      }, generalProps));
     }
-    if (option.type === "separator") {
-      return /* @__PURE__ */ React2.createElement(Separator, {
-        ...generalProps
-      });
+
+    if (option.type === 'separator') {
+      return /*#__PURE__*/jsx(Separator, _objectSpread({}, generalProps));
     }
-    if (option.type === "option") {
-      return /* @__PURE__ */ React2.createElement(CBItem, {
-        ...generalProps,
+
+    if (option.type === 'option') {
+      return /*#__PURE__*/jsx(CBItem, _objectSpread(_objectSpread({}, generalProps), {}, {
         value: option.value,
         label: option.label,
         dataTestid: ComboboxDataTestid.OPTION,
         disabled: option.disabled,
-        onClick: (e) => handleClick(option, e),
+        onClick: e => handleClick(option, e),
         onMouseDown: handleOnMouseDown,
         isActive: option.dsId === focusOptionIdx,
         isSelected: isSelected(selectedValues, option),
         tabIndex: -1
-      });
+      }));
     }
-    if (option.type === "creatable") {
-      return /* @__PURE__ */ React2.createElement(SingleMenuItem, {
+
+    if (option.type === 'creatable') {
+      return /*#__PURE__*/jsx(SingleMenuItem, _objectSpread(_objectSpread({
         dataTestid: ComboboxDataTestid.OPTION,
-        isActive: option.dsId === focusOptionIdx,
-        ...generalProps,
-        render: ({ label }) => /* @__PURE__ */ React2.createElement(Grid, {
-          cols: ["min-content", "auto"],
-          height: "16px",
-          gutter: "xxs",
-          alignItems: "center"
-        }, /* @__PURE__ */ React2.createElement(StyledCreatableLabel, null, "Add:"), /* @__PURE__ */ React2.createElement("span", null, label)),
+        isActive: option.dsId === focusOptionIdx
+      }, generalProps), {}, {
+        render: _ref => {
+          let {
+            label
+          } = _ref;
+          return /*#__PURE__*/_jsx(Grid, {
+            cols: ['min-content', 'auto'],
+            height: "16px",
+            gutter: "xxs",
+            alignItems: "center"
+          }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, label));
+        },
         label: option.label,
-        onClick: (e) => handleClick(option, e)
-      });
+        onClick: e => handleClick(option, e)
+      }));
     }
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null);
+
+    return /*#__PURE__*/jsx(Fragment, {});
   }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
   return ItemRenderer;
 };
-export {
-  useItemRenderer
-};
-//# sourceMappingURL=useItemRenderer.js.map
+
+export { useItemRenderer };

package/esm/controlled-combobox/parts/menu-list/useMenuList.js

@@ -1,9 +1,16 @@
-import * as React from "react";
-import { useEffect, useContext } from "react";
-import { ComboBoxContext } from "../../ComboBoxCTX";
+import { useContext, useEffect } from 'react';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+
 const useMenuList = () => {
+  var _inputRef$current2;
+
   const {
-    props: { inline, selectedValues, onMenuOpen, options },
+    props: {
+      inline,
+      selectedValues,
+      onMenuOpen,
+      options
+    },
     inputRef,
     setCurrentOption,
     scrollOptionIntoView,
@@ -12,19 +19,22 @@ const useMenuList = () => {
   } = useContext(ComboBoxContext);
   useEffect(() => {
     const getFirstOption = () => {
-      for (let i = 0; i < options.length; i += 1)
-        if (!["section", "separator"].includes(options[i].type)) {
-          setCurrentOption(options[i].dsId);
-          break;
-        }
+      for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
+        setCurrentOption(options[i].dsId);
+        break;
+      }
     };
+
     if (showPopover || inline) {
-      if (onMenuOpen)
-        onMenuOpen();
-      if (inputRef.current?.value !== "") {
+      var _inputRef$current;
+
+      if (onMenuOpen) onMenuOpen();
+
+      if (((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.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);
@@ -33,6 +43,7 @@ const useMenuList = () => {
         }
       } else {
         const singleSelectedValue = selectedValues;
+
         if (singleSelectedValue) {
           setCurrentOption(selectedValues.dsId);
           scrollOptionIntoView(selectedValues.dsId);
@@ -40,10 +51,9 @@ const useMenuList = () => {
           getFirstOption();
         }
       }
-    }
-  }, [showPopover, inline, hasFocus, inputRef.current?.value]);
-};
-export {
-  useMenuList
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [showPopover, inline, hasFocus, (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value]);
 };
-//# sourceMappingURL=useMenuList.js.map
+
+export { useMenuList };

package/esm/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -1,38 +1,49 @@
-import * as React from "react";
-import React2, { useMemo, useContext } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { useGroupPills } from "./useGroupPills";
-import { MultiAllyMessages } from "../a11y-messages";
+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, useMemo } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { useGroupPills } from './useGroupPills.js';
+import { MultiAllyMessages } from '../a11y-messages/MultiAllyMessages.js';
+import 'styled-components';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _MultiAllyMessages;
+
 const MultiSelectedValuesContainer = () => {
+  var _inputRef$current;
+
   const {
-    props: { selectedValues },
+    props: {
+      selectedValues
+    },
     inputRef,
     pillGroupRef
   } = useContext(ComboBoxContext);
   const multiSelectedValue = selectedValues;
   const pillsToShow = useGroupPills();
   const correctPillsToShow = pillsToShow || 1;
-  const pills = useMemo(() => /* @__PURE__ */ React2.createElement(Grid, {
-    style: { width: "max-content" }
-  }, /* @__PURE__ */ React2.createElement(DSPillGroupV2, {
+  const pills = useMemo(() => /*#__PURE__*/_jsx(Grid, {
+    style: {
+      width: 'max-content'
+    }
+  }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {
     innerRef: pillGroupRef
-  }, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map((option) => /* @__PURE__ */ React2.createElement(DSPillV2, {
+  }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx(DSPillV2, {
     size: "s",
-    key: option.value,
     label: option.label,
     type: "value"
-  })), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /* @__PURE__ */ React2.createElement(DSPillV2, {
+  }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(DSPillV2, {
     size: "s",
     labelTruncated: false,
-    key: "grouped",
-    label: `+${multiSelectedValue.length - correctPillsToShow}`,
+    label: "+".concat(multiSelectedValue.length - correctPillsToShow),
     type: "value"
-  }))), [pillGroupRef, multiSelectedValue, correctPillsToShow]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, multiSelectedValue.length > 0 && !inputRef.current?.value && /* @__PURE__ */ React2.createElement(MultiAllyMessages, null), pills);
+  }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [multiSelectedValue.length > 0 && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx(MultiAllyMessages, {}))), pills]
+  });
 };
-export {
-  MultiSelectedValuesContainer
-};
-//# sourceMappingURL=MultiSelectedValuesContainer.js.map
+
+export { MultiSelectedValuesContainer };

package/esm/controlled-combobox/parts/multi-selected-values-container/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { MultiSelectedValuesContainer } from "./MultiSelectedValuesContainer";
-export {
-  MultiSelectedValuesContainer
-};
-//# sourceMappingURL=index.js.map
+export { MultiSelectedValuesContainer } from './MultiSelectedValuesContainer.js';

package/esm/controlled-combobox/parts/multi-selected-values-container/styled.js

@@ -1,19 +1,13 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledGroupedPillPopoverContent = styled.div`
-  padding: 10px;
-  background-color: #fff;
-`;
-const StyledGroupPillWrapper = styled.div``;
-const StyledA11ySelectedValues = styled.span`
-  width: 1px;
-  height: 1px;
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-`;
-export {
-  StyledA11ySelectedValues,
-  StyledGroupPillWrapper,
-  StyledGroupedPillPopoverContent
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+
+const StyledGroupedPillPopoverContent = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1yaq41r-0"
+})(["padding:10px;background-color:#fff;"]);
+const StyledGroupPillWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1yaq41r-1"
+})([""]);
+const StyledA11ySelectedValues = /*#__PURE__*/styled.span.withConfig({
+  componentId: "sc-1yaq41r-2"
+})(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
+
+export { StyledA11ySelectedValues, StyledGroupPillWrapper, StyledGroupedPillPopoverContent };

package/esm/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -1,16 +1,24 @@
-import * as React from "react";
-import { useContext, useEffect, useState, useLayoutEffect } from "react";
-import { useOnElementResize } from "../../utils/hooks/useOnElementResize";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-const getGroupedPillWidth = (remainingPills) => {
-  if (remainingPills === 0)
-    return 0;
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { useContext, useState, useEffect, useLayoutEffect } from 'react';
+import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+
+const getGroupedPillWidth = remainingPills => {
+  if (remainingPills === 0) return 0;
   const digits = remainingPills.toString().length;
   return 8 * (digits - 1) + 31;
 };
+
 const useGroupPills = () => {
   const {
-    props: { selectedValues },
+    props: {
+      selectedValues
+    },
     inputRef,
     selectedOptionsRef,
     controlsWrapperRef,
@@ -18,43 +26,46 @@ const useGroupPills = () => {
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const [pillsToShow, setPillsToShow] = useState(multiSelectedValues.length);
-  const { width } = useOnElementResize(controlsWrapperRef);
-  const { width: widthInput } = useOnElementResize(inputRef || null);
+  const {
+    width
+  } = useOnElementResize(controlsWrapperRef);
+  const {
+    width: widthInput
+  } = useOnElementResize(inputRef || null);
   useEffect(() => {
     if (multiSelectedValues.length !== pillsToShow) {
       setPillsToShow(multiSelectedValues.length);
-    }
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [multiSelectedValues.length, width, widthInput]);
   useLayoutEffect(() => {
     if (selectedOptionsRef.current) {
-      if (pillGroupRef.current)
-        pillGroupRef.current.style.width = "max-content";
+      if (pillGroupRef.current) pillGroupRef.current.style.width = 'max-content';
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [
-        ...selectedOptionsRef.current.querySelectorAll(".ds-pill-wrapper-value")
-      ];
-      const pillsWidth = pills.map((pill) => pill?.offsetWidth);
+      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
+      const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
+
         if (currentWidth + getGroupedPillWidth(multiSelectedValues.length - idx - 1) <= referenceWidth) {
           lastPillFit = idx;
         }
       });
+
       if (!(multiSelectedValues.length > 0 && pillsToShow !== multiSelectedValues.length)) {
         const nextPillsToShow = lastPillFit + 1;
+
         if (nextPillsToShow !== pillsToShow) {
           setPillsToShow(nextPillsToShow);
         }
       }
-      if (pillGroupRef.current)
-        pillGroupRef.current.style.width = "fit-content";
+
+      if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
   }, [selectedOptionsRef, inputRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput]);
   return pillsToShow;
 };
-export {
-  useGroupPills
-};
-//# sourceMappingURL=useGroupPills.js.map
+
+export { useGroupPills };

package/esm/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js

@@ -1,19 +1,20 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { ComboBoxContext } from "../../ComboBoxCTX";
-import { StyledSingleSelectedValue } from "./styled";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext } from 'react';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledSingleSelectedValue } from './styled.js';
+
 const SingleSelectedValueContainer = () => {
   const {
-    props: { selectedValues },
+    props: {
+      selectedValues
+    },
     showSelectedValue
   } = useContext(ComboBoxContext);
   const singleSelectedValue = selectedValues;
-  return /* @__PURE__ */ React2.createElement(StyledSingleSelectedValue, null, showSelectedValue ? /* @__PURE__ */ React2.createElement(SimpleTruncatedTooltipText, {
-    value: singleSelectedValue?.label
+  return /*#__PURE__*/_jsx(StyledSingleSelectedValue, {}, void 0, showSelectedValue ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: singleSelectedValue === null || singleSelectedValue === void 0 ? void 0 : singleSelectedValue.label
   }) : null);
 };
-export {
-  SingleSelectedValueContainer
-};
-//# sourceMappingURL=SingleSelectedValueContainer.js.map
+
+export { SingleSelectedValueContainer };

package/esm/controlled-combobox/parts/single-selected-value-container/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { SingleSelectedValueContainer } from "./SingleSelectedValueContainer";
-export {
-  SingleSelectedValueContainer
-};
-//# sourceMappingURL=index.js.map
+export { SingleSelectedValueContainer } from './SingleSelectedValueContainer.js';

package/esm/controlled-combobox/parts/single-selected-value-container/styled.js

@@ -1,11 +1,7 @@
-import * as React from "react";
-import styled from "styled-components";
-const StyledSingleSelectedValue = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-`;
-export {
-  StyledSingleSelectedValue
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+
+const StyledSingleSelectedValue = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-5qepox-0"
+})(["width:100%;display:flex;align-items:center;"]);
+
+export { StyledSingleSelectedValue };

package/esm/controlled-combobox/propTypes.js

@@ -1,24 +1,22 @@
-import * as React from "react";
-import { PropTypes } from "react-desc";
+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]).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 combobox 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(""),
-  onCancel: PropTypes.func.description("function triggered when user press ESC key").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(void 0),
-  menuMinWidth: PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
-  menuMaxHeight: PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
-  withToggle: PropTypes.bool.description("POC purpose this prop will not remain").defaultValue("false")
+  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]).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 combobox 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(''),
+  onCancel: PropTypes.func.description('function triggered when user press ESC key').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
-};
-//# sourceMappingURL=propTypes.js.map
+
+export { propTypes };