@elliemae/ds-controlled-form 2.4.1-rc.2 → 2.4.1-rc.6

package/cjs/autocomplete/Autocomplete.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('react');
-var reactDesc = require('react-desc');
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var useAutocomplete = require('./config/useAutocomplete.js');
 var Container = require('./parts/container/Container.js');
-var propTypes = require('./propTypes.js');
 var AutocompleteCTX = require('./AutocompleteCTX.js');
+var reactDescPropTypes = require('./react-desc-prop-types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -19,15 +18,15 @@ var _Container;
 
 const DSAutocomplete = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, AutocompleteCTX.defaultProps);
-  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, propTypes.propTypes);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.propTypes);
   const ctx = useAutocomplete.useAutocomplete(props);
   return /*#__PURE__*/_jsx__default["default"](AutocompleteCTX.AutocompleteContext.Provider, {
     value: ctx
   }, void 0, _Container || (_Container = /*#__PURE__*/_jsx__default["default"](Container.Container, {})));
 };
 
-const DSAutocompleteWithSchema = reactDesc.describe(DSAutocomplete);
-DSAutocompleteWithSchema.propTypes = propTypes.propTypes;
+const DSAutocompleteWithSchema = dsPropsHelpers.describe(DSAutocomplete);
+DSAutocompleteWithSchema.propTypes = reactDescPropTypes.propTypes;
 
 exports.DSAutocomplete = DSAutocomplete;
 exports.DSAutocompleteWithSchema = DSAutocompleteWithSchema;

package/cjs/autocomplete/AutocompleteCTX.js

@@ -7,18 +7,10 @@ var lodash = require('lodash');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const defaultProps = {
-  placeholder: '',
-  options: [],
-  selectedValues: '',
-  hasError: false,
-  isLoading: false,
-  autoFocus: false,
+  zIndex: 10,
+  withoutPortal: false,
   startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onChange: lodash.noop,
-  onKeyDown: lodash.noop,
-  onFilter: lodash.noop,
-  onMenuOpen: lodash.noop
+  placementOrderPreference: ['bottom-start', 'bottom-end']
 };
 const defaultContext = {
   props: defaultProps,
@@ -29,9 +21,6 @@ const defaultContext = {
   setReferenceElement: lodash.noop,
   inputRef: /*#__PURE__*/React.createRef(),
   listRef: /*#__PURE__*/React.createRef(),
-  wrapperListRef: /*#__PURE__*/React.createRef(),
-  controlsWrapperRef: /*#__PURE__*/React.createRef(),
-  selectedOptionsRef: /*#__PURE__*/React.createRef(),
   focusOptionIdx: '',
   setCurrentOption: lodash.noop
 };

package/cjs/autocomplete/AutocompleteDataTestids.js

@@ -3,15 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const AutocompleteDataTestid = {
-  INPUT: 'autocomplete-input',
   LIST: 'autocomplete-menu-list',
-  SELECTED_VALUES: 'autocomplete-selected-values',
-  SELECT_ALL_BUTTON: 'autocomplete-all-btn',
-  CLEAR_ALL_BUTTON: 'autocomplete-clear-btn',
-  DROPDOWN: 'autocomplete-dropdown-btn',
   OPTION: 'autocomplete-option',
-  SHOW_ALL_BUTTON: 'autocomplete-show-all-btn',
-  SHOW_SELECTED_OPTIONS_BUTTON: 'autocomplete-selected-options-btn'
+  CONTAINER: 'autocomplete-container'
 };
 
 exports.AutocompleteDataTestid = AutocompleteDataTestid;

package/cjs/autocomplete/config/useAutocomplete.js

@@ -10,8 +10,11 @@ require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var reactVirtual = require('react-virtual');
-var useGetPropsWithDefault = require('./useGetPropsWithDefault.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+var AutocompleteCTX = require('../AutocompleteCTX.js');
+var listHelper = require('../utils/listHelper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,18 +24,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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__default["default"](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 useAutocomplete = props => {
+  const defaultPropsWithInnerRef = _objectSpread(_objectSpread({}, AutocompleteCTX.defaultProps), {}, {
+    innerRef: React.useRef(null)
+  });
+
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.propTypes);
   const [showPopover, setShowPopover] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [focusOptionIdx, setCurrentOption] = React.useState('');
   const inputRef = React.useRef(null);
   const listRef = React.useRef(null);
-  const wrapperListRef = React.useRef(null);
   const selectedOptionsRef = React.useRef(null);
-  const controlsWrapperRef = React.useRef(null);
-  const propsWithDefaults = useGetPropsWithDefault.useGetAutocompleteWithDefaultsProps(props);
   const {
-    options
-  } = propsWithDefaults; // ===========================================================================
+    options,
+    filter
+  } = propsWithDefault; // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -51,8 +58,16 @@ const useAutocomplete = props => {
     };
     virtualListHelpers.scrollToIndex(options.findIndex(opt => opt.dsId === dsId), opts);
   }, [options, virtualListHelpers]);
+  React.useEffect(() => {
+    if (filter.length === 0 || options.length === 0) {
+      setShowPopover(false);
+    }
+  }, [filter, options.length, setShowPopover]);
+  React.useEffect(() => {
+    setCurrentOption(listHelper.getFirstOption(options));
+  }, [options, showPopover]);
   const ctx = React.useMemo(() => ({
-    props: _objectSpread({}, propsWithDefaults),
+    props: _objectSpread({}, propsWithDefault),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -60,13 +75,11 @@ const useAutocomplete = props => {
     listRef,
     focusOptionIdx,
     selectedOptionsRef,
-    controlsWrapperRef,
-    wrapperListRef,
     setCurrentOption,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, propsWithDefaults, virtualListHelpers, focusOptionIdx, wrapperListRef, showPopover, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, listRef]);
+  }), [scrollOptionIntoView, propsWithDefault, virtualListHelpers, focusOptionIdx, showPopover, referenceElement, inputRef, selectedOptionsRef, listRef]);
   return ctx;
 };
 

package/cjs/autocomplete/parts/container/Container.js

@@ -3,46 +3,63 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var dsPopperjs = require('@elliemae/ds-popperjs');
 var AutocompleteCTX = require('../../AutocompleteCTX.js');
 var styled = require('./styled.js');
-var Controls = require('../controls/Controls.js');
 var MenuList = require('../menu-list/MenuList.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
+var AutocompleteDataTestids = require('../../AutocompleteDataTestids.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _Controls, _MenuList, _MenuList2;
-
+var _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
-      inline,
       startPlacementPreference,
+      children,
+      filter,
       placementOrderPreference
     },
     showPopover,
-    inputRef,
     setReferenceElement,
     setShowPopover,
     referenceElement
   } = React.useContext(AutocompleteCTX.AutocompleteContext);
+  React.useEffect(() => {
+    const closePopper = () => {
+      setShowPopover(false);
+    };
+
+    window.addEventListener('blur', closePopper);
+    return () => {
+      window.removeEventListener('blur', closePopper);
+    };
+  }, [setShowPopover]);
   const handleCloseMenu = React.useCallback(() => {
     setShowPopover(false);
-    if (inputRef.current) inputRef.current.blur();
-  }, [inputRef, setShowPopover]);
-  const handleMouseDown = React.useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const StyledContainer = inline ? styled.StyledContainerInline : styled.StyledContainerWithPopper;
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(StyledContainer, {
-      ref: setReferenceElement,
-      children: [_Controls || (_Controls = /*#__PURE__*/_jsx__default["default"](Controls.Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {})) : null]
-    }), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+  }, [setShowPopover]);
+  const input = React__default["default"].Children.only(children);
+  const {
+    onInputKeyDown
+  } = useKeyboardNavigation.useKeyboardNavigation();
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledContainerWithPopper, {
+    ref: setReferenceElement,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-controls": "autocomplete-listbox",
+    "aria-expanded": showPopover,
+    onKeyDown: onInputKeyDown,
+    "data-testid": AutocompleteDataTestids.AutocompleteDataTestid.CONTAINER,
+    children: [input, filter && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
       customOffset: [0, 5],
       closeContextMenu: handleCloseMenu,
       referenceElement: referenceElement,
@@ -53,10 +70,9 @@ const Container = () => {
       withoutArrow: true,
       withoutAnimation: true,
       zIndex: 10
-    }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
-      tabIndex: -1,
-      onMouseDown: handleMouseDown
-    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))))]
+    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx__default["default"](styled.StyledPopperWrapper, {
+      tabIndex: -1
+    }, void 0, /*#__PURE__*/_jsx__default["default"](MenuList.MenuList, {}))))]
   });
 };
 

package/cjs/autocomplete/parts/container/styled.js

@@ -11,13 +11,9 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 const StyledContainerWithPopper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
-const StyledContainerInline = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-xupfk9-1"
-})(["width:100%;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-xupfk9-2"
+  componentId: "sc-xupfk9-1"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
-exports.StyledContainerInline = StyledContainerInline;
 exports.StyledContainerWithPopper = StyledContainerWithPopper;
 exports.StyledPopperWrapper = StyledPopperWrapper;

package/cjs/autocomplete/parts/{controls → container}/useKeyboardNavigation.js

@@ -14,7 +14,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
 const useKeyboardNavigation = () => {
   const {
     props: {
-      onValueChange,
+      onSelect,
       options
     },
     setShowPopover,
@@ -25,25 +25,18 @@ const useKeyboardNavigation = () => {
   } = React.useContext(AutocompleteCTX.AutocompleteContext);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
-  const selectOption = React.useCallback(e => {
-    if (onValueChange) onValueChange(currentItem.label, e);
-    setShowPopover(false);
-  }, [currentItem, setShowPopover, onValueChange]);
   const onInputKeyDown = React.useCallback(e => {
-    const targetElement = e.target;
-
-    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+    if ((e.keyCode >= 48 && e.keyCode <= 90 || e.key === 'Backspace') && !showPopover) {
       setShowPopover(true);
-    } // =============================================================================
+    } else if (e.key === 'Tab') setShowPopover(false); // =============================================================================
     // 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(e);
-      }
+    if (e.key === 'Enter' && showPopover) {
+      e.preventDefault();
+      onSelect(currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, e);
+      setShowPopover(false);
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
@@ -56,8 +49,6 @@ const useKeyboardNavigation = () => {
         const nextItemIndex = listHelper.findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
       }
     }
 
@@ -68,13 +59,6 @@ const useKeyboardNavigation = () => {
         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
@@ -84,7 +68,7 @@ const useKeyboardNavigation = () => {
     if (e.key === 'Escape') {
       setShowPopover(false);
     }
-  }, [scrollOptionIntoView, currentItemIndex, options, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  }, [currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, currentItemIndex, onSelect, options, scrollOptionIntoView, setCurrentOption, setShowPopover, showPopover]);
   return {
     onInputKeyDown
   };

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

@@ -4,14 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var dsCircularProgressIndicator = require('@elliemae/ds-circular-progress-indicator');
-var dsGrid = require('@elliemae/ds-grid');
 var styled = require('./styled.js');
 var AutocompleteDataTestids = require('../../AutocompleteDataTestids.js');
 var AutocompleteCTX = require('../../AutocompleteCTX.js');
-var useOnElementResize = require('../../utils/hooks/useOnElementResize.js');
 var useItemRenderer = require('./useItemRenderer.js');
-var useMenuList = require('./useMenuList.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,73 +15,44 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const MenuList = () => {
-  var _inputRef$current2;
-
   const {
     props: {
-      menuMinWidth,
-      menuMaxHeight,
-      options,
-      isLoading
+      options
     },
     referenceElement,
     inputRef,
     listRef,
     showPopover,
-    wrapperListRef,
-    controlsWrapperRef,
     virtualListHelpers: {
       totalSize
     }
   } = React.useContext(AutocompleteCTX.AutocompleteContext);
   const ItemRenderer = useItemRenderer.useItemRenderer();
-  useMenuList.useMenuList();
-  const {
-    width
-  } = useOnElementResize.useOnElementResize(controlsWrapperRef);
-  const listWidth = React.useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [menuMinWidth, referenceElement, width]);
   const handleOnFocus = React.useCallback(() => {
     var _inputRef$current;
 
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(styled.StyledListWrapper, {
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledListWrapper, {
     tabIndex: -1,
-    ref: wrapperListRef,
     onMouseDown: e => e.preventDefault(),
-    minWidth: listWidth,
-    id: "combo-listbox",
-    role: "listbox",
-    children: isLoading && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '' ? /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
-      justifyContent: "center",
-      alignItems: "center",
+    minWidth: referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth,
+    id: "autocomplete-listbox",
+    role: "listbox"
+  }, void 0, options.length > 0 && /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
+    tabIndex: -1,
+    ref: listRef,
+    children: /*#__PURE__*/_jsx__default["default"](styled.StyledList, {
+      tabIndex: -1,
+      "aria-expanded": showPopover,
+      onFocus: handleOnFocus,
+      "data-testid": AutocompleteDataTestids.AutocompleteDataTestid.LIST,
       style: {
-        padding: 20
+        height: totalSize,
+        margin: '8px 0px'
       }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](dsCircularProgressIndicator.DSCircularProgressIndicator, {
-      size: "l",
-      loading: isLoading,
-      waiting: false,
-      showTooltip: false
-    })) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: options.length > 0 && /*#__PURE__*/jsxRuntime.jsx(styled.StyledVirtualListWrapper, {
-        tabIndex: -1,
-        maxHeight: menuMaxHeight,
-        ref: listRef,
-        children: /*#__PURE__*/_jsx__default["default"](styled.StyledList, {
-          tabIndex: -1,
-          "aria-expanded": showPopover,
-          onFocus: handleOnFocus,
-          "data-testid": AutocompleteDataTestids.AutocompleteDataTestid.LIST,
-          style: {
-            height: totalSize,
-            margin: '8px 0px'
-          }
-        }, void 0, ItemRenderer)
-      })
-    })
-  });
+    }, void 0, ItemRenderer)
+  }));
 };
 
 exports.MenuList = MenuList;

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

@@ -10,23 +10,22 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-qt1kwv-0"
-})(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
+})(["min-width:", ";"], _ref => {
+  let {
+    minWidth
+  } = _ref;
+  return minWidth ? "".concat(minWidth, "px") : '100%';
+});
 const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
   componentId: "sc-qt1kwv-1"
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-qt1kwv-2"
-})(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
-  let {
-    withHeader
-  } = _ref;
-  return withHeader ? '28px' : '';
-}, _ref2 => {
+})(["overflow-y:auto;max-height:", ";"], _ref2 => {
   let {
-    maxHeight,
-    inline
+    maxHeight
   } = _ref2;
-  return inline ? '' : "".concat(!maxHeight ? '400' : maxHeight, "px");
+  return "".concat(!maxHeight ? '400' : maxHeight, "px");
 });
 
 exports.StyledList = StyledList;

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

@@ -13,7 +13,6 @@ require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var dsForm = require('@elliemae/ds-form');
 var AutocompleteCTX = require('../../AutocompleteCTX.js');
-var listHelper = require('../../utils/listHelper.js');
 var AutocompleteDataTestids = require('../../AutocompleteDataTestids.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -24,66 +23,61 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 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__default["default"](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,
-      onChange,
-      selectedValues,
-      onFilter
+      onSelect
     },
     inputRef,
     setShowPopover,
     focusOptionIdx,
     virtualListHelpers
   } = React.useContext(AutocompleteCTX.AutocompleteContext);
-  const {
-    virtualItems
-  } = virtualListHelpers;
   const handleClick = React.useCallback((option, e) => {
-    var _inputRef$current;
-
-    if (inputRef.current) inputRef.current.value = option.label;
-    onFilter(option.label);
-    onChange(option.label);
+    onSelect(option.label, e);
     setShowPopover(false);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, onChange, setShowPopover, inputRef]);
-  const handleOnMouseDown = React.useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const ItemRenderer = React.useMemo(() => virtualItems.map(vItem => {
-    const option = options[vItem.index];
-    const generalProps = {
-      wrapperStyles: {
-        position: 'absolute',
-        top: vItem.start,
-        left: 0,
-        width: '100%'
-      },
-      key: "".concat(option.dsId),
-      innerRef: vItem.measureRef
-    };
+  }, [onSelect, setShowPopover]);
+  return React.useMemo(() => {
+    if (virtualListHelpers) {
+      return virtualListHelpers.virtualItems.map(vItem => {
+        const option = options[vItem.index];
+        const generalProps = {
+          wrapperStyles: {
+            position: 'absolute',
+            top: vItem.start,
+            left: 0,
+            width: '100%'
+          },
+          key: "".concat(option.dsId),
+          innerRef: vItem.measureRef
+        };
+
+        if (option.type === 'section') {
+          return /*#__PURE__*/jsxRuntime.jsx(dsForm.Section, _objectSpread({
+            label: option.label
+          }, generalProps));
+        }
+
+        if (option.type === 'option') {
+          return /*#__PURE__*/jsxRuntime.jsx(dsForm.SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
+            value: option.value,
+            label: option.label,
+            dataTestid: AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
+            disabled: option.disabled,
+            onClick: e => handleClick(option, e),
+            isActive: option.dsId === focusOptionIdx
+          }));
+        }
 
-    if (option.type === 'option') {
-      return /*#__PURE__*/jsxRuntime.jsx(dsForm.SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
-        value: option.value,
-        label: option.label,
-        dataTestid: AutocompleteDataTestids.AutocompleteDataTestid.OPTION,
-        disabled: option.disabled,
-        onClick: e => handleClick(option, e),
-        onMouseDown: handleOnMouseDown,
-        isActive: option.dsId === focusOptionIdx,
-        isSelected: listHelper.isSelected(selectedValues, option)
-      }));
+        return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
+      });
     }
 
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return ItemRenderer;
+    return null;
+  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);
 };
 
 exports.useItemRenderer = useItemRenderer;

package/cjs/autocomplete/react-desc-prop-types.js

@@ -5,15 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-function noop() {}
 const propTypes = {
-  placeholder: dsPropsHelpers.PropTypes.string.description('input s placeholder value').defaultValue(''),
-  options: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).description('List of options').defaultValue([]),
-  value: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string]).description('Array of option or single option selected'),
-  autoFocus: dsPropsHelpers.PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
-  hasError: dsPropsHelpers.PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
-  onChange: dsPropsHelpers.PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue('')
+  options: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.array, dsPropsHelpers.PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  filter: dsPropsHelpers.PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),
+  onSelect: dsPropsHelpers.PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  children: dsPropsHelpers.PropTypes.node.isRequired.description('React component to apply autocomplete functionality').defaultValue('')
 };
 
-exports.noop = noop;
 exports.propTypes = propTypes;