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

package/cjs/mask-hook/hooks/useRegExpMask.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var dsPropsHelpers = require('@elliemae/ds-props-helpers');
+var dsUtilities = require('@elliemae/ds-utilities');
+var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
+var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
+var setCursorPosition = require('../utils/setCursorPosition.js');
+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 flatStringArray = require('../utils/flatStringArray.js');
+var reactDescPropTypes = require('../react-desc-prop-types.js');
+
+const isRegExp = item => typeof item === 'object';
+
+const conformValue = (rawValue, cursorPos, lastKeyCode, regExp, filledMask) => {
+  const specialChars = [];
+  const flatRegExp = flatStringArray.flatStringArray(regExp);
+  const rawValueArray = rawValue.split('');
+  let offSet = 0;
+  let charsFound = 0;
+  let specialCharsLeft = '';
+  let fullRegExpMatched = false;
+  const maskedValue = [];
+
+  for (let i = 0; i < flatRegExp.length; i += 1) {
+    if (isRegExp(flatRegExp[i])) {
+      specialCharsLeft = '';
+      fullRegExpMatched = false;
+
+      for (let j = charsFound + offSet; j < rawValueArray.length; j += 1) {
+        var _rawValueArray$j;
+
+        const match = (_rawValueArray$j = rawValueArray[j]) === null || _rawValueArray$j === void 0 ? void 0 : _rawValueArray$j.match(flatRegExp[i]);
+
+        if (match) {
+          maskedValue.push(match[0]);
+          charsFound += 1;
+          fullRegExpMatched = true;
+          break;
+        } else {
+          offSet += 1;
+        }
+      }
+
+      if (filledMask && !fullRegExpMatched) {
+        maskedValue.push('_');
+      }
+    } else {
+      specialChars.push([flatRegExp[i], i]);
+      if (rawValueArray[i + offSet] === flatRegExp[i]) charsFound += 1;
+      specialCharsLeft += flatRegExp[i];
+    }
+  }
+
+  if (!fullRegExpMatched) specialCharsLeft = '';
+  const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
+  const [maskWithSpecialsChars, finalMaskedPos] = addSpecialCharacters.addSpecialCharacters(maskedValue, specialChars, maskedPos, lastKeyCode);
+  return [maskWithSpecialsChars + specialCharsLeft, finalMaskedPos];
+};
+
+const useRegExpMask = props => {
+  const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskRegExpHookDefaultProps);
+  dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskRegExpHookPropsTypes);
+  const {
+    valueSetter,
+    onChange: userOnChange,
+    onKeyDown: userOnKeyDown,
+    onBlur: userOnBlur,
+    regExp,
+    filledMask
+  } = propsWithDefault;
+  const lastKeyCode = React.useRef('Unidentified');
+  const scheduleAfterRender = dsUtilities.useCallbackAfterRender(); // Some times, the value of the mask is not gonna change (user types invalid char for example)
+  // This makes the input to go from "correct" -> "incorrect" -> "correct"
+  // But since the input is controlled, the input does not re-render
+  // This makes the input go mumbo-jumbo and places the cursor in the end, because we kinda changed the value async
+  // Solution for this is to trigger a re-render, we do this with a set state call in the on change event
+
+  const [, setKey] = React.useState(0);
+  const onKeyDown = React.useCallback(e => {
+    lastKeyCode.current = e.code;
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
+  const onChange = React.useCallback(e => {
+    var _e$target$selectionEn;
+
+    const [mask, cursorPos] = conformValue(e.target.value, (_e$target$selectionEn = e.target.selectionEnd) !== null && _e$target$selectionEn !== void 0 ? _e$target$selectionEn : 0, lastKeyCode.current, regExp, filledMask);
+    valueSetter(prevMask => {
+      // Here we need to update the key
+      if (mask === prevMask) setKey(key => key + 1);
+      return mask;
+    });
+    if (userOnChange) userOnChange(e, mask);
+    scheduleAfterRender(() => setCursorPosition.setCursorPosition(e.target, cursorPos));
+  }, [valueSetter, scheduleAfterRender, userOnChange]);
+  const onBlur = React.useCallback(e => {
+    if (filledMask) {
+      const maskedValue = e.target.value.split('');
+      const flatRegExp = flatStringArray.flatStringArray(regExp);
+      const firstUnderscoreIdx = maskedValue.findIndex((char, idx) => char === '_' && flatRegExp[idx] !== '_');
+      if (firstUnderscoreIdx > -1) valueSetter(maskedValue.slice(0, firstUnderscoreIdx).join(''));
+    }
+
+    if (userOnBlur) userOnBlur(e);
+  }, [valueSetter, userOnBlur]);
+  return {
+    onKeyDown,
+    onChange,
+    onBlur
+  };
+};
+const UseRegExpMaskWithSchema = dsPropsHelpers.describe(useRegExpMask);
+UseRegExpMaskWithSchema.propTypes = reactDescPropTypes.DSMaskRegExpHookPropsTypes;
+
+exports.UseRegExpMaskWithSchema = UseRegExpMaskWithSchema;
+exports.isRegExp = isRegExp;
+exports.useRegExpMask = useRegExpMask;

package/cjs/mask-hook/hooks/useSSNMask.js

@@ -12,6 +12,8 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const ssnSpecialChars = [['-', 3], ['-', 6]];
@@ -65,8 +67,13 @@ const useSSNMask = props => {
     onChange
   };
 };
+const getSSNMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
 const UseSSNMaskWithSchema = dsPropsHelpers.describe(useSSNMask);
 UseSSNMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
 
 exports.UseSSNMaskWithSchema = UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = getSSNMaskedValue;
 exports.useSSNMask = useSSNMask;

package/cjs/mask-hook/hooks/{useZipCode.js → useZipCodeMask.js}

@@ -12,20 +12,22 @@ var dsUtilities = require('@elliemae/ds-utilities');
 var addSpecialCharacters = require('../utils/addSpecialCharacters.js');
 var getPartialMaskedPos = require('../utils/getPartialMaskedPos.js');
 var setCursorPosition = require('../utils/setCursorPosition.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var reactDescPropTypes = require('../react-desc-prop-types.js');
 
 const zipCodeSpecialChars = [['-', 5]];
 
 const conformValue = (rawValue, cursorPos, lastKeyCode) => {
   // Work with digits only
-  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 5 digits
+  let maskedValue = rawValue.split('').filter(char => char >= '0' && char <= '9'); // We only consider first 9 digits
 
-  maskedValue = maskedValue.slice(0, 6);
+  maskedValue = maskedValue.slice(0, 9);
   const maskedPos = getPartialMaskedPos.getPartialMaskedPos(rawValue, maskedValue, cursorPos);
   return addSpecialCharacters.addSpecialCharacters(maskedValue, zipCodeSpecialChars, maskedPos, lastKeyCode);
 };
 
-const useZipCode = props => {
+const useZipCodeMask = props => {
   const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.DSMaskHookDefaultProps);
   dsPropsHelpers.useValidateTypescriptPropTypes(propsWithDefault, reactDescPropTypes.DSMaskHookPropsTypes);
   const {
@@ -62,8 +64,13 @@ const useZipCode = props => {
     onChange
   };
 };
-const UseZipCodeMaskWithSchema = dsPropsHelpers.describe(useZipCode);
+const getUseZipMaskedValue = value => {
+  const [maskedValue] = conformValue(value, value.length - 1, '');
+  return maskedValue;
+};
+const UseZipCodeMaskWithSchema = dsPropsHelpers.describe(useZipCodeMask);
 UseZipCodeMaskWithSchema.propTypes = reactDescPropTypes.DSMaskHookPropsTypes;
 
 exports.UseZipCodeMaskWithSchema = UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode;
+exports.getUseZipMaskedValue = getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask;

package/cjs/mask-hook/index.js

@@ -5,15 +5,23 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var usePhoneMask = require('./hooks/usePhoneMask.js');
 var useNumberMask = require('./hooks/useNumberMask.js');
 var useSSNMask = require('./hooks/useSSNMask.js');
-var useZipCode = require('./hooks/useZipCode.js');
+var useRegExpMask = require('./hooks/useRegExpMask.js');
+var useZipCodeMask = require('./hooks/useZipCodeMask.js');
 
 
 
 exports.UsePhoneMaskWithSchema = usePhoneMask.UsePhoneMaskWithSchema;
+exports.getPhoneMaskedValue = usePhoneMask.getPhoneMaskedValue;
 exports.usePhoneMask = usePhoneMask.usePhoneMask;
 exports.UseNumberMaskWithSchema = useNumberMask.UseNumberMaskWithSchema;
+exports.getNumberMaskedValue = useNumberMask.getNumberMaskedValue;
 exports.useNumberMask = useNumberMask.useNumberMask;
 exports.UseSSNMaskWithSchema = useSSNMask.UseSSNMaskWithSchema;
+exports.getSSNMaskedValue = useSSNMask.getSSNMaskedValue;
 exports.useSSNMask = useSSNMask.useSSNMask;
-exports.UseZipCodeMaskWithSchema = useZipCode.UseZipCodeMaskWithSchema;
-exports.useZipCode = useZipCode.useZipCode;
+exports.UseRegExpMaskWithSchema = useRegExpMask.UseRegExpMaskWithSchema;
+exports.isRegExp = useRegExpMask.isRegExp;
+exports.useRegExpMask = useRegExpMask.useRegExpMask;
+exports.UseZipCodeMaskWithSchema = useZipCodeMask.UseZipCodeMaskWithSchema;
+exports.getUseZipMaskedValue = useZipCodeMask.getUseZipMaskedValue;
+exports.useZipCodeMask = useZipCodeMask.useZipCodeMask;

package/cjs/mask-hook/react-desc-prop-types.js

@@ -25,6 +25,9 @@ const DSMaskHookDefaultProps = {
 const DSMaskPhoneHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   isInternational: false
 });
+const DSMaskRegExpHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
+  filledMask: false
+});
 const DSMaskNumberHookDefaultProps = _objectSpread(_objectSpread({}, DSMaskHookDefaultProps), {}, {
   suffix: '',
   prefix: '',
@@ -38,6 +41,10 @@ const DSMaskHookPropsTypes = {
   onChange: dsPropsHelpers.PropTypes.func.description('Callback for onChange'),
   onKeyDown: dsPropsHelpers.PropTypes.func.description('Callback for onKeyDown')
 };
+const DSMaskRegExpHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
+  regExp: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.string, dsPropsHelpers.PropTypes.instanceOf(RegExp)])).description('Array with regexp or special chars per character').isRequired,
+  filledMask: dsPropsHelpers.PropTypes.bool.description('Show blank chars positions').defaultValue(false)
+});
 const DSMaskPhoneHookPropsTypes = _objectSpread(_objectSpread({}, DSMaskHookPropsTypes), {}, {
   isInternational: dsPropsHelpers.PropTypes.bool.description('Use or not internaltional phone mask number').defaultValue(false)
 });
@@ -56,3 +63,5 @@ exports.DSMaskNumberHookDefaultProps = DSMaskNumberHookDefaultProps;
 exports.DSMaskNumberHookPropsTypes = DSMaskNumberHookPropsTypes;
 exports.DSMaskPhoneHookDefaultProps = DSMaskPhoneHookDefaultProps;
 exports.DSMaskPhoneHookPropsTypes = DSMaskPhoneHookPropsTypes;
+exports.DSMaskRegExpHookDefaultProps = DSMaskRegExpHookDefaultProps;
+exports.DSMaskRegExpHookPropsTypes = DSMaskRegExpHookPropsTypes;

package/cjs/mask-hook/utils/addSpecialCharacters.js

@@ -38,10 +38,9 @@ const addSpecialCharacters = (maskWithoutSpecialChars, specialCharsDescr, masked
     });
   } else if (lastKeyCode === 'Backspace' && finalMaskedPos) {
     // If erasing, move the cursor back if we are in a special chars area
-    specialCharsDescr.forEach(_ref3 => {
-      let [chars, pos] = _ref3;
-      if (pos + 1 <= finalMaskedPos && finalMaskedPos <= pos + chars.length) finalMaskedPos = pos;
-    });
+    for (let i = specialCharsDescr.length - 1; i >= 0; i -= 1) {
+      if (specialCharsDescr[i][1] + 1 <= finalMaskedPos && finalMaskedPos <= specialCharsDescr[i][1] + specialCharsDescr[i][0].length) [, finalMaskedPos] = specialCharsDescr[i];
+    }
   }
 
   return [finalMask.join(''), finalMaskedPos];

package/cjs/mask-hook/utils/flatStringArray.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+
+const flatStringArray = stringArray => stringArray.reduce((acc, curr) => {
+  if (typeof curr === 'string') {
+    return [...acc, ...curr.split('')];
+  }
+
+  return [...acc, curr];
+}, []);
+
+exports.flatStringArray = flatStringArray;

package/cjs/mask-hook/utils/index.js

@@ -6,6 +6,7 @@ var addSpecialCharacters = require('./addSpecialCharacters.js');
 var getPartialMaskedPos = require('./getPartialMaskedPos.js');
 var setCursorPosition = require('./setCursorPosition.js');
 var sharedFilters = require('./sharedFilters.js');
+var flatStringArray = require('./flatStringArray.js');
 
 
 
@@ -13,3 +14,4 @@ exports.addSpecialCharacters = addSpecialCharacters.addSpecialCharacters;
 exports.getPartialMaskedPos = getPartialMaskedPos.getPartialMaskedPos;
 exports.setCursorPosition = setCursorPosition.setCursorPosition;
 exports.filterNumbersOnly = sharedFilters.filterNumbersOnly;
+exports.flatStringArray = flatStringArray.flatStringArray;

package/esm/autocomplete/Autocomplete.js

@@ -1,11 +1,10 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import { describe } from 'react-desc';
-import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
+import { describe, useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useAutocomplete } from './config/useAutocomplete.js';
 import { Container } from './parts/container/Container.js';
-import { propTypes } from './propTypes.js';
 import { defaultProps, AutocompleteContext } from './AutocompleteCTX.js';
+import { propTypes } from './react-desc-prop-types.js';
 
 var _Container;
 

package/esm/autocomplete/AutocompleteCTX.js

@@ -3,18 +3,10 @@ import { noop } from '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: noop,
-  onKeyDown: noop,
-  onFilter: noop,
-  onMenuOpen: noop
+  placementOrderPreference: ['bottom-start', 'bottom-end']
 };
 const defaultContext = {
   props: defaultProps,
@@ -25,9 +17,6 @@ const defaultContext = {
   setReferenceElement: noop,
   inputRef: /*#__PURE__*/createRef(),
   listRef: /*#__PURE__*/createRef(),
-  wrapperListRef: /*#__PURE__*/createRef(),
-  controlsWrapperRef: /*#__PURE__*/createRef(),
-  selectedOptionsRef: /*#__PURE__*/createRef(),
   focusOptionIdx: '',
   setCurrentOption: noop
 };

package/esm/autocomplete/AutocompleteDataTestids.js

@@ -1,13 +1,7 @@
 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'
 };
 
 export { AutocompleteDataTestid };

package/esm/autocomplete/config/useAutocomplete.js

@@ -1,30 +1,37 @@
-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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useCallback, useMemo } from 'react';
+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 { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useVirtual } from 'react-virtual';
-import { useGetAutocompleteWithDefaultsProps } from './useGetPropsWithDefault.js';
+import { propTypes } from '../react-desc-prop-types.js';
+import { defaultProps } from '../AutocompleteCTX.js';
+import { getFirstOption } from '../utils/listHelper.js';
 
 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 useAutocomplete = props => {
+  const defaultPropsWithInnerRef = _objectSpread(_objectSpread({}, defaultProps), {}, {
+    innerRef: useRef(null)
+  });
+
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [focusOptionIdx, setCurrentOption] = useState('');
   const inputRef = useRef(null);
   const listRef = useRef(null);
-  const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
-  const controlsWrapperRef = useRef(null);
-  const propsWithDefaults = useGetAutocompleteWithDefaultsProps(props);
   const {
-    options
-  } = propsWithDefaults; // ===========================================================================
+    options,
+    filter
+  } = propsWithDefault; // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -43,8 +50,16 @@ const useAutocomplete = props => {
     };
     virtualListHelpers.scrollToIndex(options.findIndex(opt => opt.dsId === dsId), opts);
   }, [options, virtualListHelpers]);
+  useEffect(() => {
+    if (filter.length === 0 || options.length === 0) {
+      setShowPopover(false);
+    }
+  }, [filter, options.length, setShowPopover]);
+  useEffect(() => {
+    setCurrentOption(getFirstOption(options));
+  }, [options, showPopover]);
   const ctx = useMemo(() => ({
-    props: _objectSpread({}, propsWithDefaults),
+    props: _objectSpread({}, propsWithDefault),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -52,13 +67,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/esm/autocomplete/parts/container/Container.js

@@ -1,40 +1,56 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+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 React, { useContext, useEffect, useCallback } from 'react';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { StyledPopperWrapper, StyledContainerInline, StyledContainerWithPopper } from './styled.js';
-import { Controls } from '../controls/Controls.js';
+import { StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
 import { MenuList } from '../menu-list/MenuList.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _Controls, _MenuList, _MenuList2;
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
+import { jsxs } from 'react/jsx-runtime';
 
+var _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
-      inline,
       startPlacementPreference,
+      children,
+      filter,
       placementOrderPreference
     },
     showPopover,
-    inputRef,
     setReferenceElement,
     setShowPopover,
     referenceElement
   } = useContext(AutocompleteContext);
+  useEffect(() => {
+    const closePopper = () => {
+      setShowPopover(false);
+    };
+
+    window.addEventListener('blur', closePopper);
+    return () => {
+      window.removeEventListener('blur', closePopper);
+    };
+  }, [setShowPopover]);
   const handleCloseMenu = useCallback(() => {
     setShowPopover(false);
-    if (inputRef.current) inputRef.current.blur();
-  }, [inputRef, setShowPopover]);
-  const handleMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(StyledContainer, {
-      ref: setReferenceElement,
-      children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {})) : null]
-    }), /*#__PURE__*/_jsx(DSPopperJS, {
+  }, [setShowPopover]);
+  const input = React.Children.only(children);
+  const {
+    onInputKeyDown
+  } = useKeyboardNavigation();
+  return /*#__PURE__*/jsxs(StyledContainerWithPopper, {
+    ref: setReferenceElement,
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-controls": "autocomplete-listbox",
+    "aria-expanded": showPopover,
+    onKeyDown: onInputKeyDown,
+    "data-testid": AutocompleteDataTestid.CONTAINER,
+    children: [input, filter && /*#__PURE__*/_jsx(DSPopperJS, {
       customOffset: [0, 5],
       closeContextMenu: handleCloseMenu,
       referenceElement: referenceElement,
@@ -45,10 +61,9 @@ const Container = () => {
       withoutArrow: true,
       withoutAnimation: true,
       zIndex: 10
-    }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
-      tabIndex: -1,
-      onMouseDown: handleMouseDown
-    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {}))))]
+    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+      tabIndex: -1
+    }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
   });
 };
 

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

@@ -3,11 +3,8 @@ import styled from 'styled-components';
 const StyledContainerWithPopper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
-const StyledContainerInline = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-xupfk9-1"
-})(["width:100%;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-xupfk9-2"
+  componentId: "sc-xupfk9-1"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
-export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };
+export { StyledContainerWithPopper, StyledPopperWrapper };

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

@@ -10,7 +10,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
 const useKeyboardNavigation = () => {
   const {
     props: {
-      onValueChange,
+      onSelect,
       options
     },
     setShowPopover,
@@ -21,25 +21,18 @@ const useKeyboardNavigation = () => {
   } = useContext(AutocompleteContext);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
-  const selectOption = useCallback(e => {
-    if (onValueChange) onValueChange(currentItem.label, e);
-    setShowPopover(false);
-  }, [currentItem, setShowPopover, onValueChange]);
   const onInputKeyDown = 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
     // =============================================================================
@@ -52,8 +45,6 @@ const useKeyboardNavigation = () => {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
       }
     }
 
@@ -64,13 +55,6 @@ const useKeyboardNavigation = () => {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
-        });
       }
     } // =============================================================================
     // ESCAPE
@@ -80,7 +64,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
   };