@elliemae/ds-controlled-form 2.4.1 → 2.4.2-rc.11

package/esm/combobox/parts/A11yFocusedOption.js

@@ -5,28 +5,36 @@ import 'core-js/modules/esnext.iterator.find.js';
 import { useContext, useMemo } from 'react';
 import { ComboBoxContext } from '../ComboBoxCTX.js';
 import { StyledA11ySelectedValues } from './styled.js';
-import { getSelectableOptions } from '../utils/listHelper.js';
+import { getSelectableOptions, isSelected } from '../utils/listHelper.js';
 import { isSeparator } from '../sharedTypes.js';
 
 const A11yFocusedOption = () => {
   const {
     props: {
-      filteredOptions
+      filteredOptions,
+      selectedValues
     },
     focusOptionIdx,
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   const selectabledOptions = getSelectableOptions(filteredOptions);
-  const focusOption = filteredOptions.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+  const focusOption = filteredOptions.find(option => option.dsId === focusOptionIdx);
+  const isFocusOptionSelected = (focusOption === null || focusOption === void 0 ? void 0 : focusOption.type) === 'option' && isSelected(selectedValues, focusOption);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+  const navigationContext = 'Use up and down to choose options,press enter to choose focused option, press Escape to excuse dropdown menu';
   return useMemo(() => {
-    if (!isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+    if (!isSeparator(focusOption) && menuState && focusOption && focusOption.type === 'option') return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
       "aria-live": "polite",
       "aria-atomic": "false",
       "aria-relevant": "additions text"
-    }, void 0, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " focused.").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, " "));
+    }, menuState, "option ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, " ").concat(isFocusOptionSelected ? 'selected and ' : '', "focused .").concat(focusSelectableOptionIdx + 1, " of ").concat(selectabledOptions.length, ". ").concat(navigationContext, " "));
+    if ((focusOption === null || focusOption === void 0 ? void 0 : focusOption.type) === 'creatable') return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+      "aria-live": "assertive",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, menuState, "Press enter to Add: ".concat(focusOption === null || focusOption === void 0 ? void 0 : focusOption.label, ". ").concat(navigationContext));
     return null;
-  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
+  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };
 
 export { A11yFocusedOption };

package/esm/combobox/parts/A11ySelectedValues.js

@@ -19,8 +19,6 @@ const A11ySelectedValues = () => {
       if (selectedValues.length > 0) {
         msg = "Options selected: ".concat(selectedValues.map(item => item.label).join(', '));
       }
-
-      msg = 'No Options Selected';
     } else if (selectedValues) {
       msg = "Option selected: ".concat(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.label);
     }

package/esm/combobox/parts/DropdownIndicator.js

@@ -8,19 +8,19 @@ import { ComboBoxContext } from '../ComboBoxCTX.js';
 import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
 
 var _templateObject;
-const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus::after {\n    border: none;\n  }\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+const StyledDropDownButton = styled(DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &:focus::after {\n    border: none;\n  }\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
   let {
     theme,
     disabled
   } = _ref;
-  return disabled ? 'red' : theme.colors.brand['700'];
+  return disabled ? theme.colors.neutral['400'] : theme.colors.brand['700'];
 });
 const DropdownIndicator = () => {
   const {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   const colorButton = useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
   const handleOnClick = useCallback(e => {
@@ -32,7 +32,7 @@ const DropdownIndicator = () => {
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
     disabled: disabled,
-    "aria-expanded": showPopover,
+    "aria-expanded": menuState,
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",

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

@@ -7,10 +7,10 @@ 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 { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { StyledContainer, StyledPopperWrapper } from './styled.js';
 import { Controls } from '../controls/Controls.js';
 import { MenuList } from '../menu-list/MenuList.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
@@ -28,23 +28,21 @@ const Container = () => {
 
   const {
     props,
-    setShowPopover,
-    showPopover,
+    setMenuState,
+    menuState,
     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 globalAttributes = useGetGlobalAttributes(props);
+  const xStyledProps = useGetXstyledProps(props); // Removing possible collisionable props
 
   const globalsAttrs = _objectWithoutProperties(globalAttributes, _excluded);
 
@@ -52,31 +50,30 @@ const Container = () => {
     e.preventDefault();
   }, []);
   const handleCloseMenu = useCallback(() => {
-    setShowPopover(false);
+    setMenuState(false, 'blur');
     if (innerRef !== null && innerRef !== void 0 && innerRef.current) innerRef.current.blur();
-  }, [innerRef, setShowPopover]);
+  }, [innerRef, setMenuState]);
   useEffect(() => {
-    const closeMenuOnWindowBlur = () => setShowPopover(false);
+    const closeMenuOnWindowBlur = () => {
+      setMenuState(false, 'blur');
+    };
 
     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(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({
+  }, [setMenuState]);
+  return useMemo(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread(_objectSpread({
     "data-testid": ComboboxDataTestid.CONTAINER,
     ref: setReferenceElement
-  }, globalsAttrs), {}, {
+  }, globalsAttrs), xStyledProps), {}, {
     children: inline ? /*#__PURE__*/jsxs(Fragment, {
       children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {}))]
     }) : /*#__PURE__*/jsxs(Fragment, {
       children: [_Controls2 || (_Controls2 = /*#__PURE__*/_jsx(Controls, {})), /*#__PURE__*/_jsx(DSPopperJS, {
         customOffset: [0, 5],
         referenceElement: referenceElement,
-        showPopover: showPopover,
+        showPopover: menuState,
         closeContextMenu: handleCloseMenu,
         startPlacementPreference: startPlacementPreference,
         placementOrderPreference: placementOrderPreference,
@@ -89,7 +86,7 @@ const Container = () => {
         onMouseDown: handleMouseDown
       }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))))]
     })
-  })), [inline, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
+  })), [inline, setReferenceElement, globalsAttrs, referenceElement, menuState, xStyledProps, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
 };
 
 export { Container };

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

@@ -1,15 +1,22 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const StyledGenericContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n"])), _ref => {
+var _templateObject, _templateObject2;
+const StyledContainer = styled('div', {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.CONTAINER
+})(_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"])));
+const StyledPopperWrapper = styled('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: ", ";\n  overflow: auto;\n"])), _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'not-allowed' : 'default';
+});
 
-export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };
+export { StyledContainer, StyledPopperWrapper };

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

@@ -4,6 +4,7 @@ import { DropdownIndicator } from '../DropdownIndicator.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { StyledControlsWrapper, StyledSelection, StyledHeaderActionsWrapper, StyleHeaderActionsSeparator } from './styled.js';
+import { scrollIfNeeded } from '../../utils/listHelper.js';
 import { MultiSelectedValuesContainer } from '../multi-selected-values-container/MultiSelectedValuesContainer.js';
 import { ControlsInput } from '../controls-input/ControlsInput.js';
 import { useOnPillsNavigation } from './useOnPillsNavigation.js';
@@ -12,7 +13,7 @@ import { A11ySelectedValues } from '../A11ySelectedValues.js';
 import { RemovableSelectedValuePill } from '../multi-selected-values-container/RemovableSelectedValuePill.js';
 import { jsxs } from 'react/jsx-runtime';
 
-var _A11ySelectedValues, _A11yFocusedOption, _MultiSelectedValuesC, _ControlsInput, _DropdownIndicator;
+var _A11ySelectedValues, _MultiSelectedValuesC, _A11yFocusedOption, _ControlsInput, _DropdownIndicator;
 const Controls = () => {
   const {
     props: {
@@ -24,11 +25,12 @@ const Controls = () => {
       innerRef
     },
     selectedOptionsRef,
-    setShowPopover,
+    setMenuState,
+    setFocusOptionIdx,
     hasFocus,
+    listRef,
     focusOptionIdx,
-    scrollOptionIntoView,
-    showPopover,
+    menuState,
     controlsWrapperRef
   } = useContext(ComboBoxContext);
   const handleOnClick = useCallback(() => {
@@ -36,28 +38,34 @@ const Controls = () => {
 
     if (disabled) return;
 
-    if (hasFocus && showPopover && !inline) {
+    if (hasFocus && menuState && !inline) {
       var _innerRef$current;
 
-      setShowPopover(false);
+      setMenuState(false);
+      setFocusOptionIdx('');
       (_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); // 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
+    setMenuState(true);
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => {
+        if (listRef.current) scrollIfNeeded(listRef.current);
+      });
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabled, listRef, hasFocus, menuState, inline, innerRef, setMenuState, focusOptionIdx]); // this callback prevent to toggle the menu when clicking or removing pills
 
   const handleOnPillsClick = useCallback(e => {
-    if (showPopover || disabled) {
+    if (menuState || disabled) {
       e.stopPropagation();
     } else {
       var _innerRef$current3;
 
       (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
-      setShowPopover(true);
+      setMenuState(true);
     }
-  }, [showPopover, innerRef, disabled, setShowPopover]); // callback to prevent onBlur on the input when clicking in all the wrapper
+  }, [menuState, innerRef, disabled, setMenuState]); // callback to prevent onBlur on the input when clicking in all the wrapper
 
   const handleOnMouseDown = useCallback(e => {
     if (document.activeElement === innerRef.current || inline) {
@@ -82,14 +90,14 @@ const Controls = () => {
     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", {
+      children: [_A11ySelectedValues || (_A11ySelectedValues = /*#__PURE__*/_jsx(A11ySelectedValues, {})), Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx(MultiSelectedValuesContainer, {})) : /*#__PURE__*/_jsx("div", {
         "data-testid": ComboboxDataTestid.SELECTED_VALUES
       }, void 0, selectedValues && /*#__PURE__*/_jsx(RemovableSelectedValuePill, {
         pill: selectedValues
       }))]
-    }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
+    }), _A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {
       justifyContent: "center",
-      cols: ['auto', 'auto']
+      cols: ['min-content', 'min-content']
     }, void 0, /*#__PURE__*/_jsx(StyleHeaderActionsSeparator, {
       disabled: disabled
     }), _DropdownIndicator || (_DropdownIndicator = /*#__PURE__*/_jsx(DropdownIndicator, {})))]

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

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { css, styled } from '@elliemae/ds-system';
 import { Grid } from '@elliemae/ds-grid';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref => {
@@ -10,39 +11,47 @@ const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLi
   } = _ref;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
 });
-const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 2px solid ", ";\n"])), _ref2 => {
+const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  outline: 2px solid ", ";\n  outline-offset: -2px;\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 => {
+const hoverBorder = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n"])), _ref3 => {
   let {
-    disabled,
     theme
   } = _ref3;
+  return theme.colors.brand[700];
+});
+const StyledControlsWrapper = styled(Grid, {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.INPUT_WRAPPER
+})(_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  ", "\n  &:hover {\n    ", "\n  }\n  &:focus-within {\n    ", "\n  }\n"])), _ref4 => {
+  let {
+    disabled,
+    theme
+  } = _ref4;
   return disabled ? theme.colors.neutral['080'] : '#ffffff';
-}, _ref4 => {
+}, _ref5 => {
   let {
     minWidth,
     inline
-  } = _ref4;
+  } = _ref5;
   return inline || !minWidth ? '' : "".concat(minWidth, "px");
-}, _ref5 => {
+}, _ref6 => {
   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"])));
+  } = _ref6;
+  return inline ? '10px 16px' : '';
+}, normalBorder, hoverBorder, focusBorder);
+const StyledSelection = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  margin-right: 3px;\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 => {
+const StyleHeaderActionsSeparator = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  align-self: stretch;\n  margin: 4px 0px;\n  width: 1px;\n  background-color: ", ";\n"])), _ref7 => {
   let {
     theme,
     disabled
-  } = _ref6;
+  } = _ref7;
   return disabled ? theme.colors.neutral['400'] : theme.colors.neutral['500'];
 });
 

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

@@ -9,7 +9,7 @@ const useOnPillsNavigation = () => {
     },
     inputValue,
     hasFocus,
-    setShowPopover,
+    setMenuState,
     selectedOptionsRef
   } = useContext(ComboBoxContext); // todo: constant must be defined on pills component
 
@@ -20,7 +20,7 @@ const useOnPillsNavigation = () => {
         var _innerRef$current;
 
         (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
-        setShowPopover(true);
+        setMenuState(true, 'open', e);
         return;
       }
 
@@ -43,7 +43,7 @@ const useOnPillsNavigation = () => {
         (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
       }
     }
-  }, [inputValue, hasFocus, innerRef, selectedOptionsRef, setShowPopover]);
+  }, [inputValue, innerRef, setMenuState, selectedOptionsRef, hasFocus]);
   return {
     onKeyDownPills
   };

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

@@ -19,7 +19,7 @@ const ControlsInput = () => {
     },
     focusOptionIdx,
     inputValue,
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   const {
     onInputKeyDown
@@ -44,8 +44,8 @@ const ControlsInput = () => {
     placeholder: placeholder,
     "aria-controls": "combo-listbox",
     "aria-activedescendant": focusOptionIdx,
-    "aria-expanded": showPopover,
-    "aria-haspopup": "true",
+    "aria-expanded": menuState,
+    "aria-haspopup": "listbox",
     "aria-describedby": "combobox-selected-items",
     role: "combobox",
     disabled: disabled,

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

@@ -1,15 +1,19 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
+import { DSComboBoxName, DSComboboxSlots } from '../../theming.js';
 
 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  &::placeholder {\n    color: transparent;\n  }\n"])), props => props.theme.colors.neutral[700], _ref => {
+const StyledInput = styled('input', {
+  name: DSComboBoxName,
+  slot: DSComboboxSlots.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;
   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 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  font-size: 13px;\n  & span::after {\n    content: '';\n    padding: 1px;\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"])));
+const StyledInputWrapper = styled('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: flex;\n"])));
 
 export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };

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

@@ -15,8 +15,8 @@ const useControlsInput = () => {
     },
     setHasFocus,
     inputValue,
-    setInputValue,
-    setShowSelectedOptions
+    setMenuState,
+    setInputValue
   } = useContext(ComboBoxContext);
   const [width, setWidth] = useState(1); // use span reference to calculate the real width for the input
 
@@ -33,9 +33,9 @@ const useControlsInput = () => {
   const handleOnChange = useMaskedOnChange();
   const handleOnBlur = useCallback(() => {
     setInputValue('');
-    if (onFilter) onFilter(allOptions, inputValue);
-    setHasFocus(false); // setShowSelectedOptions(false);
-  }, [setInputValue, onFilter, allOptions, inputValue, setHasFocus, setShowSelectedOptions]);
+    if (onFilter) onFilter(allOptions);
+    setHasFocus(false);
+  }, [setInputValue, onFilter, allOptions, setHasFocus]);
   const handleOnFocus = useCallback(() => {
     setHasFocus(true);
   }, [setHasFocus]);

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

@@ -5,7 +5,7 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { getOptions, getSuggestedValueOnChange, findInCircularList, getLastValueSelected } from '../../utils/listHelper.js';
+import { getOptions, scrollIfNeeded, getSuggestedValueOnChange, findInCircularList, getLastValueSelected } from '../../utils/listHelper.js';
 import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 
 const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
@@ -26,11 +26,12 @@ const useKeyboardNavigation = () => {
       withoutPortal
     },
     inputValue,
-    showPopover,
+    menuState,
     focusOptionIdx,
+    listRef,
     selectAllCheckboxRef,
     toggleSelectionButtonRef,
-    setShowPopover,
+    setMenuState,
     setInputValue,
     scrollOptionIntoView,
     setFocusOptionIdx
@@ -45,8 +46,11 @@ const useKeyboardNavigation = () => {
     // =============================================================================
     if (onKeyDown && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION) onKeyDown(e, currentItem);
 
-    if (['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
-      setShowPopover(true);
+    if ((['ArrowDown', 'ArrowUp', 'Enter', 'Spacebar'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) && !menuState) {
+      setMenuState(true);
+      window.requestAnimationFrame(() => {
+        if (listRef.current) scrollIfNeeded(listRef.current);
+      });
     } // =============================================================================
     // ESCAPE
     // =============================================================================
@@ -60,14 +64,14 @@ const useKeyboardNavigation = () => {
         setInputValue('');
       }
 
-      if (!inline) setShowPopover(false);
+      if (!inline) setMenuState(false, 'close', e);
     } // =============================================================================
     // ENTER KEY TO CREATE ELEMENTS
     // =============================================================================
 
 
     if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate) {
-      onCreate(inputValue); //blank active item to force search last one
+      onCreate(inputValue); // blank active item to force search last one
 
       setFocusOptionIdx('');
       if (onFilter) onFilter(allOptions, '');
@@ -82,12 +86,12 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if (focusOptionIdx !== '' && (showPopover || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
+      if (focusOptionIdx !== '' && (menuState || inline) && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === MENU_OPTION_TYPES.OPTION && !currentItem.disabled) {
         if (onFilter) onFilter(allOptions, '');
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(getSuggestedValueOnChange(currentItem, selectedValues), currentItem, e);
@@ -95,7 +99,7 @@ const useKeyboardNavigation = () => {
     }
 
     if (e.key === 'Enter' && e.altKey) {
-      setShowPopover(false);
+      setMenuState(false, 'selectOption', e);
     }
 
     if (e.key === 'a' && e.ctrlKey && multiple && onSelectAll) {
@@ -109,10 +113,13 @@ const useKeyboardNavigation = () => {
       e.preventDefault();
       e.stopPropagation();
 
-      if ((showPopover || inline) && selectableOptions.length) {
-        const nextItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
-        setFocusOptionIdx(filteredOptions[nextItemIndex].dsId);
-        scrollOptionIntoView(filteredOptions[nextItemIndex].dsId);
+      if ((menuState || inline) && selectableOptions.length) {
+        const nextItemIndexIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable);
+
+        if (nextItemIndexIndex > -1) {
+          setFocusOptionIdx(filteredOptions[nextItemIndexIndex].dsId);
+          scrollOptionIntoView(filteredOptions[nextItemIndexIndex].dsId);
+        }
       }
     }
 
@@ -122,16 +129,19 @@ const useKeyboardNavigation = () => {
       if (!selectableOptions.length) return;
       const prevItemIndex = findInCircularList(filteredOptions, currentItemIndex, isOptionFocuseable, -1);
 
-      if (showPopover || inline) {
-        setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
-        scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const prevItem = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
-          setFocusOptionIdx(filteredOptions[prevItem].dsId);
-          scrollOptionIntoView(filteredOptions[prevItem].dsId);
-        });
+      if (prevItemIndex > -1) {
+        if (menuState || inline) {
+          setFocusOptionIdx(filteredOptions[prevItemIndex].dsId);
+          scrollOptionIntoView(filteredOptions[prevItemIndex].dsId);
+        } else {
+          // open menu and search last item to focused
+          setMenuState(true, 'open', e);
+          const lastItemIndex = findInCircularList(filteredOptions, 0, isOptionFocuseable, -1);
+          setFocusOptionIdx(filteredOptions[lastItemIndex].dsId);
+          setTimeout(() => {
+            scrollOptionIntoView(filteredOptions[lastItemIndex].dsId);
+          });
+        }
       }
     } // =============================================================================
     // BACKSPACE
@@ -148,7 +158,7 @@ const useKeyboardNavigation = () => {
       if (onFilter) onFilter(allOptions, inputValue);
     }
 
-    if (e.key === 'Tab' && !inline && !withoutPortal) {
+    if (e.key === 'Tab' && !inline && menuState) {
       var _selectAllCheckboxRef;
 
       const element = (_selectAllCheckboxRef = selectAllCheckboxRef.current) !== null && _selectAllCheckboxRef !== void 0 ? _selectAllCheckboxRef : toggleSelectionButtonRef.current;
@@ -156,14 +166,12 @@ const useKeyboardNavigation = () => {
       if (element) {
         e.preventDefault();
         element.focus();
+      } else {
+        setMenuState(false, 'blur', e);
       }
     }
-
-    if (e.key === 'Tab' && !multiple && showPopover) {
-      setShowPopover(false);
-    }
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setShowPopover, onCancel, onFilter, setInputValue, focusOptionIdx, showPopover, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
+  [onKeyDown, currentItem, onCreate, multiple, inputValue, inline, withoutPortal, setMenuState, onCancel, onFilter, setInputValue, listRef, focusOptionIdx, menuState, selectableOptions.length, filteredOptions, currentItemIndex, setFocusOptionIdx, selectedValues, onChange, selectAllCheckboxRef, toggleSelectionButtonRef]);
   return {
     onInputKeyDown
   };