@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.0

package/cjs/{controlled-combobox → autocomplete}/parts/a11y-messages/styled.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledA11ySelectedValues = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-1ugq5ha-0"
+  componentId: "sc-cm1aqq-0"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
 
 exports.StyledA11ySelectedValues = StyledA11ySelectedValues;

package/cjs/{controlled-autocomplete → autocomplete}/parts/container/styled.js

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

package/cjs/{controlled-autocomplete → autocomplete}/parts/controls/styled.js

@@ -21,7 +21,7 @@ const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _tagged
   return theme.colors.brand[700];
 });
 const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-xlhlqm-0"
+  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
@@ -29,13 +29,13 @@ const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Gri
   return "".concat(minWidth, "px");
 }, normalBorder, focusBorder);
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
-  componentId: "sc-xlhlqm-1"
+  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__default["default"].div.withConfig({
-  componentId: "sc-xlhlqm-2"
+  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__default["default"].div.withConfig({
-  componentId: "sc-xlhlqm-3"
+  componentId: "sc-vp36gr-3"
 })(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
 
 exports.StyledControlsWrapper = StyledControlsWrapper;

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

@@ -0,0 +1,93 @@
+'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('../../utils/listHelper.js');
+
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+
+const useKeyboardNavigation = () => {
+  const {
+    props: {
+      onValueChange,
+      options
+    },
+    setShowPopover,
+    showPopover,
+    focusOptionIdx,
+    setCurrentOption,
+    scrollOptionIntoView
+  } = 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) {
+      setShowPopover(true);
+    } // =============================================================================
+    // 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);
+      }
+    } // =============================================================================
+    // 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, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  return {
+    onInputKeyDown
+  };
+};
+
+exports.useKeyboardNavigation = useKeyboardNavigation;

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

@@ -0,0 +1,28 @@
+'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/{controlled-autocomplete → autocomplete}/parts/menu-list/styled.js

@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-m3oh2u-0"
+  componentId: "sc-qt1kwv-0"
 })(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
 const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
-  componentId: "sc-m3oh2u-1"
+  componentId: "sc-qt1kwv-1"
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-m3oh2u-2"
+  componentId: "sc-qt1kwv-2"
 })(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
   let {
     withHeader

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

@@ -0,0 +1,19 @@
+'use strict';
+
+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('')
+};
+
+exports.noop = noop;
+exports.propTypes = propTypes;

package/cjs/{controlled-autocomplete → autocomplete}/utils/hooks/useKeyboardNavigation.js

@@ -30,7 +30,7 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = React.useCallback(() => {
     if (inputRef.current) inputRef.current.value = currentItem.label;
-    onFilter(currentItem.label);
+    if (onFilter) onFilter(currentItem.label);
     onChange(currentItem.label);
     setShowPopover(false);
   }, [currentItem, setShowPopover, onFilter, inputRef, onChange]);

package/cjs/{controlled-checkbox → checkbox}/ControlledCheckbox.js

@@ -45,15 +45,8 @@ const DSControlledCheckbox = props => {
     ariaControls: legacyAriaControls,
     'data-testid': dataTestid = 'ds-checkbox-container'
   } = propsWithDefault;
-  const handleOnKeyDown = React.useCallback(e => {
-    if (checkboxRef.current && e.key === 'Enter') {
-      checkboxRef.current.click();
-    }
-  }, []);
 
-  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
-    onKeyDown: handleOnKeyDown
-  }),
+  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault),
         {
     id,
     disabled,
@@ -61,11 +54,18 @@ const DSControlledCheckbox = props => {
     label: globalLabel,
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
-    onKeyDown,
+    onKeyDown: userOnKeyDown,
     className
   } = _useGetGlobalAttribut,
         restGlobals = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded);
 
+  const handleOnKeyDown = React.useCallback(e => {
+    if (checkboxRef.current && e.key === 'Enter') {
+      checkboxRef.current.click();
+    }
+
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
   return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     "data-testid": dataTestid,
     className: className
@@ -83,7 +83,9 @@ const DSControlledCheckbox = props => {
     checked: checked !== 'mixed' ? checked : undefined,
     "aria-label": ariaLabel || legacyAriaLabel || label,
     "aria-controls": ariaControls || legacyAriaControls,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    disabled: disabled,
+    readOnly: readOnly
   }))), label && /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
     htmlFor: id,
     disabled: disabled,

package/cjs/{controlled-checkbox → checkbox}/styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-349ih4-0"
+  componentId: "sc-flv7d2-0"
 })(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
   let {
     theme
@@ -18,7 +18,7 @@ const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   return theme.space.xs;
 });
 const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-349ih4-1"
+  componentId: "sc-flv7d2-1"
 })(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
   let {
     theme
@@ -56,7 +56,7 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
     hasError,
     disabled
   } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[700], "; outline : 1px solid ").concat(theme.colors.brand[700], " ") : undefined;
 }, _ref8 => {
   let {
     theme,
@@ -83,10 +83,10 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
   return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
 });
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
-  componentId: "sc-349ih4-2"
+  componentId: "sc-flv7d2-2"
 })(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
 const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
-  componentId: "sc-349ih4-3"
+  componentId: "sc-flv7d2-3"
 })(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
   let {
     theme

package/cjs/{controlled-combobox → combobox}/ComboBoxCTX.js

@@ -3,49 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var lodash = require('lodash');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+function noop() {}
 const defaultProps = {
-  placeholder: '',
-  options: [],
-  selectedValues: null,
   hasError: false,
   inline: false,
-  autoFocus: false,
-  startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onClearAll: lodash.noop,
-  onSelectAll: lodash.noop,
-  onCreate: lodash.noop,
-  onBlur: lodash.noop,
   withoutPortal: true,
   zIndex: 10,
-  onChange: lodash.noop,
-  onKeyDown: lodash.noop,
-  onFilter: lodash.noop,
-  onMenuOpen: lodash.noop
+  disabled: false,
+  useMask: noop,
+  innerRef: /*#__PURE__*/React.createRef(),
+  startPlacementPreference: 'bottom-start',
+  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
-  setShowPopover: lodash.noop,
-  scrollOptionIntoView: lodash.noop,
-  referenceElement: null,
   hasFocus: false,
-  setHasFocus: lodash.noop,
+  referenceElement: null,
+  inputValue: '',
+  focusOptionIdx: '',
+  showSelectedOptions: false,
   pillGroupRef: /*#__PURE__*/React.createRef(),
-  setReferenceElement: lodash.noop,
   listRef: /*#__PURE__*/React.createRef(),
   wrapperListRef: /*#__PURE__*/React.createRef(),
   controlsWrapperRef: /*#__PURE__*/React.createRef(),
   selectedOptionsRef: /*#__PURE__*/React.createRef(),
   selectAllCheckboxRef: /*#__PURE__*/React.createRef(),
   toggleSelectionButtonRef: /*#__PURE__*/React.createRef(),
-  focusOptionIdx: '',
-  setCurrentOption: lodash.noop,
-  showSelectedOptions: false,
-  setShowSelectedOptions: lodash.noop
+  setShowPopover: noop,
+  scrollOptionIntoView: noop,
+  setHasFocus: noop,
+  setInputValue: noop,
+  setReferenceElement: noop,
+  setFocusOptionIdx: noop,
+  setShowSelectedOptions: noop
 };
 /** Context for cross component communication */
 
@@ -54,3 +49,4 @@ const ComboBoxContext = /*#__PURE__*/React.createContext(defaultContext);
 exports.ComboBoxContext = ComboBoxContext;
 exports["default"] = ComboBoxContext;
 exports.defaultProps = defaultProps;
+exports.noop = noop;

package/cjs/{controlled-combobox → combobox}/ComboboxDataTestids.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const ComboboxDataTestid = {
+  MULTISELECT: {
+    SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
+    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle'
+  },
+  CONTROLS_WRAPPER: 'combobox-controls-wrapper',
+  CONTAINER: 'combobox-container',
   INPUT: 'combobox-input',
   LIST: 'combobox-menu-list',
   SELECTED_VALUES: 'combobox-selected-values',
-  SELECT_ALL_BUTTON: 'combobox-all-btn',
-  CLEAR_ALL_BUTTON: 'combobox-clear-btn',
   DROPDOWN: 'combobox-dropdown-btn',
   OPTION: 'combobox-option',
-  SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
-  SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',
   ALLY_SELECTED_VALUES: 'combobox-ally-selected-values'
 };
 

package/cjs/{controlled-combobox → combobox}/config/useComboBox.js

@@ -15,6 +15,7 @@ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
 var ComboBoxCTX = require('../ComboBoxCTX.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 var useCorrectOptions = require('./useCorrectOptions.js');
+var listHelper = require('../utils/listHelper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,19 +34,22 @@ const useComboBox = props => {
   const [showPopover, setShowPopover] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [showSelectedOptions, setShowSelectedOptions] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
   const [hasFocus, setHasFocus] = React.useState(false);
-  const [focusOptionIdx, setCurrentOption] = React.useState('');
   const listRef = React.useRef(null);
   const wrapperListRef = React.useRef(null);
   const selectedOptionsRef = React.useRef(null);
   const controlsWrapperRef = React.useRef(null);
   const selectAllCheckboxRef = React.useRef(null);
   const toggleSelectionButtonRef = React.useRef(null);
-  const pillGroupRef = React.useRef(null); // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter
+  const pillGroupRef = React.useRef(null);
+  const {
+    selectedValues
+  } = propsWithDefaults; // ---------------------------------------------------------------------------
+  // Menu Options with/out selected filter and creatable functionality
   // ---------------------------------------------------------------------------
 
-  const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, showSelectedOptions); // ===========================================================================
+  const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -58,11 +62,30 @@ const useComboBox = props => {
   // Scroll into view function
   // ===========================================================================
 
-  const scrollOptionIntoView = React.useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), {
+  const scrollOptionIntoView = React.useCallback(function (dsId) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'center'
-    });
-  }, [correctOptions, virtualListHelpers]);
+    };
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    opts);
+  }, [correctOptions, virtualListHelpers]); // ===========================================================================
+  // Init focused option when opening the menu list
+  // ===========================================================================
+
+  const [focusOptionIdx, setFocusOptionIdx] = React.useState('');
+  React.useEffect(() => {
+    // we are updating the focus option only when we have focus on the input and
+    // we are in the selected option view or we are typing to force first option always
+    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {
+      const focusedValue = listHelper.getFirstOption(correctOptions, selectedValues, inputValue);
+      setFocusOptionIdx(focusedValue);
+      scrollOptionIntoView(focusedValue, {
+        align: 'center'
+      });
+    }
+
+    if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
   const ctx = React.useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
       options: correctOptions
@@ -75,18 +98,20 @@ const useComboBox = props => {
     selectedOptionsRef,
     controlsWrapperRef,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef,
+    inputValue,
+    setInputValue,
     hasFocus,
+    toggleSelectionButtonRef,
     pillGroupRef,
     showSelectedOptions,
     wrapperListRef,
     setShowSelectedOptions,
     setHasFocus,
-    setCurrentOption,
+    setFocusOptionIdx,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };