@elliemae/ds-controlled-form 2.3.0-next.18 → 2.3.0-next.19

package/esm/combobox/parts/container/Container.js

@@ -0,0 +1,103 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { useContext, useCallback, useEffect, useMemo } from 'react';
+import { useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { Controls } from '../controls/Controls.js';
+import { MenuList } from '../menu-list/MenuList.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var _Controls, _MenuList, _Controls2, _MenuList2;
+
+const _excluded = ["placeholder", "onKeyDown", "onChange"];
+
+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 Container = () => {
+  var _StyledPopperWrapper;
+
+  const {
+    props,
+    setShowPopover,
+    showPopover,
+    setReferenceElement,
+    referenceElement
+  } = useContext(ComboBoxContext);
+  const {
+    inline,
+    onMenuOpen,
+    onMenuClose,
+    innerRef,
+    startPlacementPreference,
+    placementOrderPreference,
+    withoutPortal,
+    zIndex
+  } = props;
+  const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
+  const globalAttributes = useGetGlobalAttributes(props); // Removing possible collisionable props
+
+  const rest = _objectWithoutProperties(globalAttributes, _excluded);
+
+  const handleMouseDown = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  const handleCloseMenu = useCallback(() => {
+    setShowPopover(false);
+    if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
+  }, [innerRef, setShowPopover]);
+  useEffect(() => {
+    const closeMenuOnWindowBlur = () => setShowPopover(false);
+
+    window.addEventListener('blur', closeMenuOnWindowBlur);
+    return () => {
+      window.removeEventListener('blur', closeMenuOnWindowBlur);
+    };
+  }, [setShowPopover]);
+  useEffect(() => {
+    if (onMenuOpen && showPopover) onMenuOpen();else if (onMenuClose && !showPopover) onMenuClose();
+  }, [showPopover, onMenuOpen, onMenuClose]);
+  return useMemo(() => {
+    if (inline) {
+      return /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+        ref: setReferenceElement
+      }, rest), {}, {
+        children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
+      }));
+    }
+
+    return /*#__PURE__*/jsx(Fragment, {
+      children: /*#__PURE__*/jsxs(StyledContainer, _objectSpread(_objectSpread({
+        "data-testid": ComboboxDataTestid.CONTAINER,
+        ref: setReferenceElement
+      }, rest), {}, {
+        children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx(Controls, {})), /*#__PURE__*/_jsx(DSPopperJS, {
+          customOffset: [0, 5],
+          referenceElement: referenceElement,
+          showPopover: showPopover,
+          closeContextMenu: handleCloseMenu,
+          startPlacementPreference: startPlacementPreference,
+          placementOrderPreference: placementOrderPreference,
+          withoutPortal: withoutPortal,
+          withoutArrow: true,
+          withoutAnimation: true,
+          zIndex: zIndex
+        }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+          tabIndex: -1,
+          onMouseDown: handleMouseDown
+        }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
+      }))
+    });
+  }, [inline, showPopover, StyledContainer, placementOrderPreference, referenceElement, rest, startPlacementPreference, withoutPortal, zIndex, handleCloseMenu, handleMouseDown, setReferenceElement]);
+};
+
+export { Container };

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

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { styled } from '@elliemae/ds-system';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const StyledGenericContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'default';
+});
+const StyledContainerWithPopper = styled(StyledGenericContainer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 28px;\n"])));
+const StyledContainerInline = styled(StyledGenericContainer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+const StyledPopperWrapper = styled(StyledGenericContainer)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  overflow: auto;\n"])));
+
+export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };

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

@@ -0,0 +1,109 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useContext, useCallback, useMemo } from 'react';
+import { DSPillV2 } from '@elliemae/ds-pills';
+import { DropdownIndicator } from '../DropdownIndicator.js';
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { StyledControlsWrapper, StyledSelection, StyledHeaderActionsWrapper, StyleHeaderActionsSeparator } from './styled.js';
+import { MultiSelectedValuesContainer } from '../multi-selected-values-container/MultiSelectedValuesContainer.js';
+import { ControlsInput } from '../controls-input/ControlsInput.js';
+import { useOnPillsNavigation } from './useOnPillsNavigation.js';
+import { A11yFocusedOption } from '../A11yFocusedOption.js';
+import { A11ySelectedValues } from '../A11ySelectedValues.js';
+import { jsxs } from 'react/jsx-runtime';
+
+var _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
+const Controls = () => {
+  const {
+    props: {
+      inline,
+      onChange,
+      disabled,
+      inputMinWidth,
+      hasError,
+      selectedValues,
+      innerRef
+    },
+    selectedOptionsRef,
+    setShowPopover,
+    hasFocus,
+    showPopover,
+    controlsWrapperRef
+  } = useContext(ComboBoxContext);
+  const handleOnClick = useCallback(() => {
+    var _innerRef$current2;
+
+    if (disabled) return;
+
+    if (hasFocus && showPopover && !inline) {
+      var _innerRef$current;
+
+      setShowPopover(false);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.blur();
+      return;
+    }
+
+    (_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
+
+  const handleOnPillsClick = useCallback(e => {
+    if (showPopover || disabled) {
+      e.stopPropagation();
+    } else {
+      var _innerRef$current3;
+
+      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
+      setShowPopover(true);
+    }
+  }, [showPopover, innerRef, disabled, setShowPopover]); // callback to prevent onBlur on the input when clicking in all the wrapper
+
+  const handleOnMouseDown = useCallback(e => {
+    if (document.activeElement === innerRef.current || inline) {
+      e.preventDefault();
+    }
+  }, [innerRef, inline]);
+  const {
+    onKeyDownPills
+  } = useOnPillsNavigation();
+  const cols = useMemo(() => !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'], [inline]);
+  return /*#__PURE__*/jsxs(StyledControlsWrapper, {
+    ref: controlsWrapperRef,
+    cols: cols,
+    disabled: disabled,
+    minWidth: inputMinWidth,
+    hasError: hasError,
+    inline: inline,
+    onClick: handleOnClick,
+    onMouseDown: handleOnMouseDown,
+    onKeyDown: onKeyDownPills,
+    "data-testid": ComboboxDataTestid.CONTROLS_WRAPPER,
+    children: [!inline && /*#__PURE__*/jsxs(StyledSelection, {
+      ref: selectedOptionsRef,
+      onClick: handleOnPillsClick,
+      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx(A11ySelectedValues, {})), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx(MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx("div", {
+        "data-testid": ComboboxDataTestid.SELECTED_VALUES
+      }, void 0, selectedValues && /*#__PURE__*/_jsx(DSPillV2, {
+        size: "s",
+        labelTruncated: true,
+        tabIndex: -1,
+        disabled: disabled,
+        label: selectedValues.label,
+        type: disabled ? 'value' : 'removable',
+        onRemove: () => {
+          var _innerRef$current4;
+
+          onChange(null);
+          (_innerRef$current4 = innerRef.current) === null || _innerRef$current4 === void 0 ? void 0 : _innerRef$current4.focus();
+        }
+      }, selectedValues.value))]
+    }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
+      justifyContent: "center",
+      cols: ['auto', 'auto']
+    }, void 0, /*#__PURE__*/_jsx(StyleHeaderActionsSeparator, {
+      disabled: disabled
+    }), _DropdownIndicator || (_DropdownIndicator = /*#__PURE__*/_jsx(DropdownIndicator, {})))]
+  });
+};
+
+export { Controls };

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

@@ -0,0 +1,49 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { css, styled } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref => {
+  let {
+    hasError,
+    theme
+  } = _ref;
+  return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
+});
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colors.brand[700];
+});
+const afterStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 2px;\n  pointer-events: none;\n  z-index: 7;\n"])));
+const StyledControlsWrapper = styled(Grid)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background: ", ";\n  position: relative;\n  border-radius: 2px;\n  min-width: ", ";\n  align-items: center;\n  align-content: center;\n  height: 28px;\n  padding-left: 8px;\n  margin: ", ";\n  &::after {\n    ", "\n    ", "\n  }\n\n  &:focus-within {\n    &::after {\n      ", "\n      ", "\n    }\n  }\n"])), _ref3 => {
+  let {
+    disabled,
+    theme
+  } = _ref3;
+  return disabled ? theme.colors.neutral['080'] : '#ffffff';
+}, _ref4 => {
+  let {
+    minWidth,
+    inline
+  } = _ref4;
+  return inline || !minWidth ? '' : "".concat(minWidth, "px");
+}, _ref5 => {
+  let {
+    inline
+  } = _ref5;
+  return inline ? '10px 16px' : 'none';
+}, afterStyle, normalBorder, afterStyle, focusBorder);
+const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\n  line-height: 13px;\n  display: flex;\n"])));
+const StyledHeaderActionsWrapper = styled(Grid)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 100%;\n  .em-ds-button--text:focus::after {\n    border: none;\n  }\n"])));
+const StyleDropdownIndicator = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref6 => {
+  let {
+    theme,
+    disabled
+  } = _ref6;
+  return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
+});
+
+export { StyleDropdownIndicator, StyleHeaderActionsSeparator, StyledControlsWrapper, StyledHeaderActionsWrapper, StyledSelection };

package/esm/{controlled-combobox → combobox}/parts/controls/useOnPillsNavigation.js

@@ -7,26 +7,29 @@ const useOnPillsNavigation = () => {
     props: {
       innerRef
     },
+    inputValue,
+    hasFocus,
     setShowPopover,
-    pillGroupRef
-  } = useContext(ComboBoxContext);
+    selectedOptionsRef
+  } = useContext(ComboBoxContext); // todo: constant must be defined on pills component
+
   const REMOVABLE_PILL_SELECTOR = '.ds-pill-wrapper-removable button';
   const onKeyDownPills = useCallback(e => {
-    var _innerRef$current;
-
-    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) === '') {
+    if ((e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown') && inputValue === '') {
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-        innerRef.current.focus();
+        var _innerRef$current;
+
+        (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
         setShowPopover(true);
         return;
       }
 
       if (e.key === 'ArrowLeft') {
-        var _pillGroupRef$current;
+        var _selectedOptionsRef$c;
 
-        const removablePills = (_pillGroupRef$current = pillGroupRef.current) === null || _pillGroupRef$current === void 0 ? void 0 : _pillGroupRef$current.querySelectorAll(REMOVABLE_PILL_SELECTOR);
+        const removablePills = (_selectedOptionsRef$c = selectedOptionsRef.current) === null || _selectedOptionsRef$c === void 0 ? void 0 : _selectedOptionsRef$c.querySelectorAll(REMOVABLE_PILL_SELECTOR);
 
-        if (document.activeElement === innerRef.current && removablePills) {
+        if (hasFocus && removablePills) {
           var _removablePills;
 
           (_removablePills = removablePills[removablePills.length - 1]) === null || _removablePills === void 0 ? void 0 : _removablePills.focus();
@@ -34,11 +37,13 @@ const useOnPillsNavigation = () => {
       }
 
       if (e.key === 'ArrowRight') {
+        var _innerRef$current2;
+
         e.preventDefault();
-        innerRef.current.focus();
+        (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
       }
     }
-  }, [innerRef, pillGroupRef, setShowPopover]);
+  }, [inputValue, hasFocus, innerRef, selectedOptionsRef, setShowPopover]);
   return {
     onKeyDownPills
   };

package/esm/{controlled-combobox → combobox}/parts/controls-input/ControlsInput.js

@@ -3,7 +3,7 @@ import { useContext } from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { StyledInputWrapper, StyledInputWidthReference, StyledInputPlaceHolder, StyledInput } from './styled.js';
-import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
 import { useControlsInput } from './useControlsInput.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { jsx } from 'react/jsx-runtime';
@@ -13,9 +13,11 @@ const ControlsInput = () => {
     props: {
       autoFocus,
       disabled,
-      innerRef
+      innerRef,
+      onFilter
     },
     focusOptionIdx,
+    inputValue,
     showPopover
   } = useContext(ComboBoxContext);
   const {
@@ -38,7 +40,6 @@ const ControlsInput = () => {
   })), /*#__PURE__*/jsx(StyledInput, {
     "data-testid": ComboboxDataTestid.INPUT,
     autoFocus: autoFocus,
-    id: "combo-input",
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
     "aria-expanded": showPopover,
@@ -50,11 +51,13 @@ const ControlsInput = () => {
       width
     },
     ref: innerRef,
+    value: inputValue,
     type: "text",
     onKeyDown: onInputKeyDown,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
-    onFocus: handleOnFocus
+    onFocus: handleOnFocus,
+    withoutCaret: !onFilter
   }));
 };
 

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

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+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 => {
+  let {
+    withoutCaret
+  } = _ref;
+  return withoutCaret && 'caret-color: transparent;';
+});
+const StyledInputPlaceHolder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-style: italic;\n  color: ", ";\n  position: absolute;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  user-select: none;\n  height: 28px;\n  & span {\n    line-height: 13px;\n  }\n"])), props => props.theme.colors.neutral[500]);
+const StyledInputWidthReference = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n  top: -9999px;\n"])));
+const StyledInputWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  flex: 1;\n  margin-right: 5px;\n  display: flex;\n  align-items: center;\n"])));
+
+export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

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

@@ -0,0 +1,55 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/es.string.replace.js';
+import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { useMaskedOnChange } from './useMaskedOnChange.js';
+import { ComboBoxContext } from '../../ComboBoxCTX.js';
+import { isSelectedValueEmpty } from '../../utils/listHelper.js';
+
+const useControlsInput = () => {
+  const {
+    props: {
+      selectedValues,
+      placeholder,
+      onFilter
+    },
+    setHasFocus,
+    setFocusOptionIdx,
+    inputValue,
+    setInputValue,
+    setShowSelectedOptions
+  } = useContext(ComboBoxContext);
+  const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
+
+  const spanReference = useRef(null);
+  const showPlaceholder = !inputValue && isSelectedValueEmpty(selectedValues) ? placeholder : null;
+  const spanReferenceText = inputValue.replace(/\s/g, '\u00a0');
+  useEffect(() => {
+    var _spanReference$curren, _spanReference$curren2;
+
+    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);
+  }, [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('');
+    setFocusOptionIdx('');
+    setHasFocus(false);
+    setShowSelectedOptions(false);
+  }, [setInputValue, setShowSelectedOptions, onFilter, setFocusOptionIdx, setHasFocus]);
+  const handleOnFocus = useCallback(() => {
+    setHasFocus(true);
+  }, [setHasFocus]);
+  return useMemo(() => ({
+    handleOnBlur,
+    handleOnChange,
+    handleOnFocus,
+    showPlaceholder,
+    spanReferenceText,
+    width,
+    spanReference
+  }), [handleOnBlur, handleOnChange, handleOnFocus, spanReferenceText, showPlaceholder, width, spanReference]);
+};
+
+export { useControlsInput };

package/esm/{controlled-combobox/utils/hooks → combobox/parts/controls-input}/useKeyboardNavigation.js

@@ -3,7 +3,8 @@ import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { findInCircularList } from '../listHelper.js';
+import { getOptions, findInCircularList } from '../../utils/listHelper.js';
+import { INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
 
@@ -19,45 +20,62 @@ const useKeyboardNavigation = () => {
       options,
       selectedValues,
       onFilter,
-      withoutPortal,
-      innerRef
+      withoutPortal
     },
     setShowPopover,
+    setInputValue,
+    inputValue,
     showPopover,
     focusOptionIdx,
-    setCurrentOption,
-    scrollOptionIntoView,
+    setFocusOptionIdx,
     selectAllCheckboxRef,
     toggleSelectionButtonRef
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
+  const selectableOptions = getOptions(options);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = useCallback(() => {
-    if (multiple) {
-      if (innerRef.current) onFilter(innerRef.current.value);
-    } else {
-      onFilter('');
-      if (innerRef.current) innerRef.current.value = '';
-    }
-
     const selectedOption = options.find(item => item.dsId === focusOptionIdx);
-    onChange(selectedOption);
-    if (!selectedOption.disabled && !multiple) setShowPopover(false);
-  }, [multiple, options, focusOptionIdx, setShowPopover, onFilter, innerRef, onChange]);
+
+    if (!selectedOption.disabled) {
+      if (onFilter) onFilter('');
+      setInputValue('');
+      onChange(selectedOption);
+      if (!multiple) setShowPopover(false);
+    }
+  }, [multiple, options, setInputValue, focusOptionIdx, setShowPopover, onFilter, onChange]);
   const onInputKeyDown = useCallback(e => {
-    const targetElement = e.target; // =============================================================================
+    // =============================================================================
     // CUSTOM KEYS
     // =============================================================================
+    if (onKeyDown) onKeyDown(e, currentItem);
+
+    if (!['Escape', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+      setShowPopover(true);
+    } // =============================================================================
+    // ESCAPE
+    // =============================================================================
 
-    onKeyDown(e, currentItem); // =============================================================================
+
+    if (e.key === 'Escape') {
+      if (onCancel) onCancel();
+
+      if (inputValue) {
+        if (onFilter) onFilter('');
+        setInputValue('');
+      }
+
+      if (!inline) setShowPopover(false);
+    } // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
     // =============================================================================
 
-    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'creatable') {
-      onCreate(targetElement.value);
-      onFilter('');
-      if (innerRef.current) innerRef.current.value = '';
+
+    if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
+      onCreate(inputValue);
+      if (onFilter) onFilter('');
+      setInputValue('');
       return;
     } // =============================================================================
     // Enter and space on selection
@@ -68,9 +86,7 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (!showPopover && !inline) {
-        setShowPopover(true);
-      } else {
+      if (focusOptionIdx !== '' && showPopover) {
         selectOption();
       }
     }
@@ -80,9 +96,9 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple) {
-      onSelectAll();
+      if (onSelectAll) onSelectAll();
     } // =============================================================================
-    // ARROWS UP AND DOWN
+    // ARROWS UP AND DOWN: LOGIC TO CALCULATE NEXT OR PREV ITEM TO PSEUDOFOCUS FROM INPUT
     // =============================================================================
 
 
@@ -90,60 +106,40 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (showPopover || inline) {
+      if ((showPopover || inline) && selectableOptions.length) {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
+        setFocusOptionIdx(options[nextItemIndex].dsId);
       }
     }
 
     if (e.key === 'ArrowUp') {
       e.preventDefault();
       e.stopPropagation();
+      if (!selectableOptions.length) return;
+      const prevItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
 
       if (showPopover || inline) {
-        const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
-        setCurrentOption(options[nextItemIndex].dsId);
-        scrollOptionIntoView(options[nextItemIndex].dsId);
+        setFocusOptionIdx(options[prevItemIndex].dsId);
       } else {
         setShowPopover(true);
         setTimeout(() => {
           const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
+          setFocusOptionIdx(options[nextItemIndex].dsId);
         });
       }
     } // =============================================================================
-    // ESCAPE
-    // =============================================================================
-
-
-    if (e.key === 'Escape') {
-      var _innerRef$current;
-
-      if (onCancel) onCancel();
-
-      if (innerRef.current && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
-        onFilter('');
-        innerRef.current.value = '';
-      }
-
-      if (!inline) setShowPopover(false);
-    } // =============================================================================
     // BACKSPACE
     // =============================================================================
 
 
-    if (e.key === 'Backspace' && targetElement.value.length <= 0 && !inline) {
-      if (multiple && !targetElement.value) {
+    if (e.key === 'Backspace' && inputValue.length <= 0 && !inline) {
+      if (multiple && !inputValue) {
         if (selectedValues.length > 0) onChange(selectedValues[selectedValues.length - 1]);
       } else {
         onChange(null);
       }
 
-      onFilter('');
+      if (onFilter) onFilter('');
     }
 
     if (e.key === 'Tab' && !inline && !withoutPortal) {
@@ -155,10 +151,11 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
         element.focus();
       }
-    } // if (e.key === 'Tab' && multiple) {
+    } // waiting for validation from ux
+    // if (e.key === 'Tab' && multiple) {
     // }
 
-  }, [currentItemIndex, options, currentItem, innerRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
+  }, [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectOption, onSelectAll, selectableOptions.length, options, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };