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

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

@@ -1,83 +1,50 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useMemo, useCallback } from 'react';
-import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
-import { Grid } from '@elliemae/ds-grid';
+import { useContext, useCallback } from 'react';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
 import { useItemRenderer } from './useItemRenderer.js';
-import { useMenuList } from './useMenuList.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const MenuList = () => {
-  var _inputRef$current2;
-
   const {
     props: {
-      menuMinWidth,
-      menuMaxHeight,
-      options,
-      isLoading
+      options
     },
     referenceElement,
     inputRef,
     listRef,
     showPopover,
-    wrapperListRef,
-    controlsWrapperRef,
     virtualListHelpers: {
       totalSize
     }
   } = useContext(AutocompleteContext);
   const ItemRenderer = useItemRenderer();
-  useMenuList();
-  const {
-    width
-  } = useOnElementResize(controlsWrapperRef);
-  const listWidth = 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 = useCallback(() => {
     var _inputRef$current;
 
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
-  return /*#__PURE__*/jsx(StyledListWrapper, {
+  return /*#__PURE__*/_jsx(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(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__*/jsx(StyledVirtualListWrapper, {
+    tabIndex: -1,
+    ref: listRef,
+    children: /*#__PURE__*/_jsx(StyledList, {
+      tabIndex: -1,
+      "aria-expanded": showPopover,
+      onFocus: handleOnFocus,
+      "data-testid": AutocompleteDataTestid.LIST,
       style: {
-        padding: 20
+        height: totalSize,
+        margin: '8px 0px'
       }
-    }, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
-      size: "l",
-      loading: isLoading,
-      waiting: false,
-      showTooltip: false
-    })) : /*#__PURE__*/jsx(Fragment, {
-      children: options.length > 0 && /*#__PURE__*/jsx(StyledVirtualListWrapper, {
-        tabIndex: -1,
-        maxHeight: menuMaxHeight,
-        ref: listRef,
-        children: /*#__PURE__*/_jsx(StyledList, {
-          tabIndex: -1,
-          "aria-expanded": showPopover,
-          onFocus: handleOnFocus,
-          "data-testid": AutocompleteDataTestid.LIST,
-          style: {
-            height: totalSize,
-            margin: '8px 0px'
-          }
-        }, void 0, ItemRenderer)
-      })
-    })
-  });
+    }, void 0, ItemRenderer)
+  }));
 };
 
 export { MenuList };

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

@@ -2,23 +2,22 @@ import styled from 'styled-components';
 
 const StyledListWrapper = /*#__PURE__*/styled.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.ul.withConfig({
   componentId: "sc-qt1kwv-1"
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled.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");
 });
 
 export { StyledList, StyledListWrapper, StyledVirtualListWrapper };

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

@@ -7,75 +7,69 @@ 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 { SingleMenuItem } from '@elliemae/ds-form';
+import { Section, SingleMenuItem } from '@elliemae/ds-form';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { isSelected } from '../../utils/listHelper.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 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,
-      onChange,
-      selectedValues,
-      onFilter
+      onSelect
     },
     inputRef,
     setShowPopover,
     focusOptionIdx,
     virtualListHelpers
   } = useContext(AutocompleteContext);
-  const {
-    virtualItems
-  } = virtualListHelpers;
   const handleClick = 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 = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const ItemRenderer = 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 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__*/jsx(Section, _objectSpread({
+            label: option.label
+          }, generalProps));
+        }
+
+        if (option.type === 'option') {
+          return /*#__PURE__*/jsx(SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
+            value: option.value,
+            label: option.label,
+            dataTestid: AutocompleteDataTestid.OPTION,
+            disabled: option.disabled,
+            onClick: e => handleClick(option, e),
+            isActive: option.dsId === focusOptionIdx
+          }));
+        }
 
-    if (option.type === 'option') {
-      return /*#__PURE__*/jsx(SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
-        value: option.value,
-        label: option.label,
-        dataTestid: AutocompleteDataTestid.OPTION,
-        disabled: option.disabled,
-        onClick: e => handleClick(option, e),
-        onMouseDown: handleOnMouseDown,
-        isActive: option.dsId === focusOptionIdx,
-        isSelected: isSelected(selectedValues, option)
-      }));
+        return /*#__PURE__*/jsx(Fragment, {});
+      });
     }
 
-    return /*#__PURE__*/jsx(Fragment, {});
-  }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return ItemRenderer;
+    return null;
+  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);
 };
 
 export { useItemRenderer };

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

@@ -1,14 +1,11 @@
 import { PropTypes } from '@elliemae/ds-props-helpers';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-function noop() {}
 const propTypes = {
-  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
-  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
-  value: PropTypes.oneOfType([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('')
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),
+  onSelect: PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  children: PropTypes.node.isRequired.description('React component to apply autocomplete functionality').defaultValue('')
 };
 
-export { noop, propTypes };
+export { propTypes };

package/esm/autocomplete/utils/listHelper.js

@@ -1,26 +1,11 @@
 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.some.js';
-import 'core-js/modules/esnext.iterator.some.js';
 
 const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
 const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
 const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = value => Array.isArray(value);
-const isSelected = (value, activeOption) => {
-  if (isSelectedValueMultiple(value)) {
-    const multiValue = value;
-    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
-  }
-
-  if (typeof value === 'string') {
-    return false;
-  }
-
-  const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
-};
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
@@ -30,5 +15,12 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getFirstOption = options => {
+  for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
+    return options[i].dsId;
+  }
+
+  return '';
+};
 
-export { findInCircularList, getOptions, getSelectableOptions, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };
+export { findInCircularList, getFirstOption, getOptions, getSelectableOptions, isSelectedValueEmpty, isSelectedValueMultiple };

package/esm/checkbox/react-desc-prop-types.js

@@ -17,6 +17,7 @@ const defaultProps = {
 };
 const propTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   label: PropTypes.string.description('Checkbox Label property. This label is also going to be used as an aria-label for screen readers.'),
+  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate label'),
   hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.')
 });

package/esm/combobox/ComboBox.js

@@ -18,4 +18,4 @@ const DSComboBox = props => {
 const DSComboBoxWithSchema = describe(DSComboBox);
 DSComboBoxWithSchema.propTypes = ComboboxPropTypes;
 
-export { DSComboBox, DSComboBoxWithSchema };
+export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };

package/esm/combobox/config/useComboBox.js

@@ -38,7 +38,7 @@ const useComboBox = props => {
   const {
     selectedValues
   } = propsWithDefaults; // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter and creatable functionality
+  // Options with creatable option + filtered by selected
   // ---------------------------------------------------------------------------
 
   const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
@@ -78,9 +78,15 @@ const useComboBox = props => {
 
     if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
+  useEffect(() => {
+    if (!showPopover) {
+      setFocusOptionIdx('');
+      setShowSelectedOptions(false);
+    }
+  }, [showPopover]);
   const ctx = useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
-      options: correctOptions
+      filteredOptions: correctOptions
     }),
     virtualListHelpers,
     showPopover,

package/esm/combobox/config/useCorrectOptions.js

@@ -1,66 +1,38 @@
-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 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 import { uid } from 'uid';
 import { MENU_OPTION_TYPES } from '../constants.js';
+import { selectedValuesWithSections } from '../utils/listHelper.js';
 
 const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
-    options,
+    filteredOptions,
+    allOptions,
     selectedValues,
     onCreate
   } = propsWithDefaults;
-  const selectedValuesWithSections = useCallback(() => {
-    var _items2;
+  return useMemo(() => {
+    // if filteredOptions is not passed we copy allOptions into the prop as default
+    // this is useful when the user wants a combo with out filtering and only pass allOptions as its required
+    if (!filteredOptions) return [...allOptions]; // when show selected toggle is on we return the selected value only as filteredOptions prop
 
-    const multiSelectedValue = selectedValues;
-    const items = [];
-    options.forEach(option => {
-      const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
-
-      if (isSelectedValue) {
-        items.push(option);
-      }
-
-      if (option.type === MENU_OPTION_TYPES.SECTION) {
-        var _items;
-
-        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === MENU_OPTION_TYPES.SECTION) {
-          items[items.length - 1] = option;
-        } else {
-          items.push(option);
-        }
-      }
-    });
-
-    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === MENU_OPTION_TYPES.SECTION) {
-      items.pop();
-    }
-
-    return items;
-  }, [options, selectedValues]);
-  const correctOptions = useMemo(() => {
     if (showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0) {
-      return selectedValuesWithSections();
-    }
+      return selectedValuesWithSections(filteredOptions, selectedValues);
+    } // whether oncreate is passed we add as first option the creatable action based on input value string
+
 
-    if (onCreate && inputValue && options.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+    if (onCreate && inputValue && filteredOptions.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = uid();
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
         label: inputValue,
         type: 'creatable'
       };
-      return [creatableItem, ...options];
+      return [creatableItem, ...filteredOptions];
     }
 
-    return options;
-  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
-  return correctOptions;
+    return filteredOptions;
+  }, [filteredOptions, allOptions, showSelectedOptions, selectedValues, onCreate, inputValue]);
 };
 
 export { useCorrectOptions };

package/esm/combobox/index.js

@@ -1 +1 @@
-export { DSComboBox, DSComboBoxWithSchema } from './ComboBox.js';
+export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema } from './ComboBox.js';

package/esm/combobox/parts/A11yFocusedOption.js

@@ -11,13 +11,13 @@ import { isSeparator } from '../sharedTypes.js';
 const A11yFocusedOption = () => {
   const {
     props: {
-      options
+      filteredOptions
     },
     focusOptionIdx,
     showPopover
   } = useContext(ComboBoxContext);
-  const selectabledOptions = getSelectableOptions(options);
-  const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+  const selectabledOptions = getSelectableOptions(filteredOptions);
+  const focusOption = filteredOptions.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
   return useMemo(() => {
     if (!isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {

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

@@ -26,6 +26,8 @@ const Controls = () => {
     selectedOptionsRef,
     setShowPopover,
     hasFocus,
+    focusOptionIdx,
+    scrollOptionIntoView,
     showPopover,
     controlsWrapperRef
   } = useContext(ComboBoxContext);
@@ -43,8 +45,8 @@ const Controls = () => {
     }
 
     (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
-    setShowPopover(true);
-  }, [disabled, hasFocus, setShowPopover, showPopover, innerRef, inline]); // this callback prevent to toggle the menu when clicking or removing pills
+    setShowPopover(true); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, hasFocus, showPopover, inline, innerRef, setShowPopover, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
 
   const handleOnPillsClick = useCallback(e => {
     if (showPopover || disabled) {

package/esm/combobox/parts/controls-input/ControlsInput.js

@@ -12,6 +12,7 @@ const ControlsInput = () => {
   const {
     props: {
       autoFocus,
+      placeholder,
       disabled,
       innerRef,
       onFilter
@@ -40,6 +41,7 @@ const ControlsInput = () => {
   })), /*#__PURE__*/jsx(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,
     autoFocus: autoFocus,
+    placeholder: placeholder,
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,

package/esm/combobox/parts/controls-input/styled.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLit
 import { styled } from '@elliemae/ds-system';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n"])), props => props.theme.colors.neutral[700], _ref => {
+const StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 13px;\n  line-height: 13px;\n  border: none;\n  padding: 0;\n  outline: none;\n  color: ", ";\n  &:focus {\n    outline: none;\n  }\n  ", "\n  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
   let {
     withoutCaret
   } = _ref;

package/esm/combobox/parts/controls-input/useControlsInput.js

@@ -9,6 +9,7 @@ const useControlsInput = () => {
   const {
     props: {
       selectedValues,
+      allOptions,
       placeholder,
       onFilter
     },
@@ -23,19 +24,18 @@ const useControlsInput = () => {
   const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
   const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
   useEffect(() => {
-    var _spanReference$curren, _spanReference$curren2;
+    var _spanReference$curren;
 
-    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? ((_spanReference$curren2 = spanReference.current) === null || _spanReference$curren2 === void 0 ? void 0 : _spanReference$curren2.offsetWidth) + 2 : 1);
+    setWidth((_spanReference$curren = spanReference.current) !== null && _spanReference$curren !== void 0 && _spanReference$curren.offsetWidth ? spanReference.current.offsetWidth + 2 : 1);
   }, [inputValue]); // if we se an input mask we configure inside here the proper mask
   // or a stardard combobox onchange event
 
   const handleOnChange = useMaskedOnChange();
   const handleOnBlur = useCallback(() => {
     setInputValue('');
-    if (onFilter) onFilter('');
-    setHasFocus(false);
-    setShowSelectedOptions(false);
-  }, [setInputValue, setShowSelectedOptions, onFilter, setHasFocus]);
+    if (onFilter) onFilter(allOptions, inputValue);
+    setHasFocus(false); // setShowSelectedOptions(false);
+  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);