@elliemae/ds-controlled-form 2.4.2-rc.3 → 2.4.3-rc.0

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

@@ -2,19 +2,21 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 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 React, { useContext, useEffect, useCallback, useMemo } from 'react';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
+import { StyledContainer, StyledPopperWrapper } from './styled.js';
 import { MenuList } from '../menu-list/MenuList.js';
 import { useKeyboardNavigation } from './useKeyboardNavigation.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
-import { jsxs } from 'react/jsx-runtime';
+import { A11yFocusedOption } from '../A11yFocusedOption.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
 
-var _StyledPopperWrapper;
+var _A11yFocusedOption, _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
+      id,
       startPlacementPreference,
       children,
       filter,
@@ -23,6 +25,7 @@ const Container = () => {
     showPopover,
     setReferenceElement,
     setShowPopover,
+    focusOptionIdx,
     referenceElement
   } = useContext(AutocompleteContext);
   useEffect(() => {
@@ -38,32 +41,41 @@ const Container = () => {
   const handleCloseMenu = useCallback(() => {
     setShowPopover(false);
   }, [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,
-      showPopover: showPopover,
-      startPlacementPreference: startPlacementPreference,
-      placementOrderPreference: placementOrderPreference,
-      withoutPortal: true,
-      withoutArrow: true,
-      withoutAnimation: true,
-      zIndex: 10
-    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
-      tabIndex: -1
-    }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
+  const input = React.Children.only(children);
+  const childrenWithProps = /*#__PURE__*/React.isValidElement(input) ? /*#__PURE__*/React.cloneElement(input, {
+    'aria-activedescendant': focusOptionIdx
+  }) : input;
+  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [_A11yFocusedOption || (_A11yFocusedOption = /*#__PURE__*/_jsx(A11yFocusedOption, {})), /*#__PURE__*/jsxs(StyledContainer, {
+      id: id,
+      ref: setReferenceElement,
+      role: "combobox",
+      "aria-autocomplete": "list",
+      "aria-controls": "autocomplete-listbox",
+      "aria-expanded": showPopover,
+      "aria-haspopup": "listbox",
+      "aria-owns": idList,
+      onKeyDown: onInputKeyDown,
+      "data-testid": AutocompleteDataTestid.CONTAINER,
+      children: [childrenWithProps, filter && /*#__PURE__*/_jsx(DSPopperJS, {
+        customOffset: [0, 5],
+        closeContextMenu: handleCloseMenu,
+        referenceElement: referenceElement,
+        showPopover: showPopover,
+        startPlacementPreference: startPlacementPreference,
+        placementOrderPreference: placementOrderPreference,
+        withoutPortal: true,
+        withoutArrow: true,
+        withoutAnimation: true,
+        zIndex: 10
+      }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+        tabIndex: -1
+      }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
+    })]
   });
 };
 

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

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

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

@@ -31,7 +31,7 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'Enter' && showPopover) {
       e.preventDefault();
-      onSelect(currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, e);
+      onSelect(currentItem?.label, e);
       setShowPopover(false);
     } // =============================================================================
     // ARROWS UP AND DOWN
@@ -64,7 +64,7 @@ const useKeyboardNavigation = () => {
     if (e.key === 'Escape') {
       setShowPopover(false);
     }
-  }, [currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, currentItemIndex, onSelect, options, scrollOptionIntoView, setCurrentOption, setShowPopover, showPopover]);
+  }, [currentItem?.label, currentItemIndex, onSelect, options, scrollOptionIntoView, setCurrentOption, setShowPopover, showPopover]);
   return {
     onInputKeyDown
   };

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

@@ -1,5 +1,5 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+import { useContext, useCallback, useMemo } from 'react';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
@@ -9,7 +9,8 @@ import { jsx } from 'react/jsx-runtime';
 const MenuList = () => {
   const {
     props: {
-      options
+      options,
+      id
     },
     referenceElement,
     inputRef,
@@ -21,15 +22,14 @@ const MenuList = () => {
   } = useContext(AutocompleteContext);
   const ItemRenderer = useItemRenderer();
   const handleOnFocus = useCallback(() => {
-    var _inputRef$current;
-
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    inputRef.current?.focus();
   }, [inputRef]);
+  const idList = useMemo(() => `${id ? `${id}-` : ''}listbox`, [id]);
   return /*#__PURE__*/_jsx(StyledListWrapper, {
     tabIndex: -1,
     onMouseDown: e => e.preventDefault(),
-    minWidth: referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth,
-    id: "autocomplete-listbox",
+    minWidth: referenceElement?.offsetWidth,
+    id: idList,
     role: "listbox"
   }, void 0, options.length > 0 && /*#__PURE__*/jsx(StyledVirtualListWrapper, {
     tabIndex: -1,

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

@@ -6,7 +6,7 @@ const StyledListWrapper = /*#__PURE__*/styled.div.withConfig({
   let {
     minWidth
   } = _ref;
-  return minWidth ? "".concat(minWidth, "px") : '100%';
+  return minWidth ? `${minWidth}px` : '100%';
 });
 const StyledList = /*#__PURE__*/styled.ul.withConfig({
   componentId: "sc-qt1kwv-1"
@@ -17,7 +17,7 @@ const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
   let {
     maxHeight
   } = _ref2;
-  return "".concat(!maxHeight ? '400' : maxHeight, "px");
+  return `${!maxHeight ? '400' : maxHeight}px`;
 });
 
 export { StyledList, StyledListWrapper, StyledVirtualListWrapper };

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

@@ -43,7 +43,7 @@ const useItemRenderer = () => {
             left: 0,
             width: '100%'
           },
-          key: "".concat(option.dsId),
+          key: `${option.dsId}`,
           innerRef: vItem.measureRef
         };
 

package/esm/autocomplete/parts/styled.js

@@ -0,0 +1 @@
+

package/esm/autocomplete/utils/listHelper.js

@@ -9,7 +9,7 @@ const isSelectedValueMultiple = value => Array.isArray(value);
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
-  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+  for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
     if (criteria(list[i])) return i;
   }
 

package/esm/checkbox/ControlledCheckbox.js

@@ -9,7 +9,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutPr
 import { useRef, useCallback } from 'react';
 import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
-import { StyledContainer, StyledCheckBox, StyledInputMixed, StyledInput, StyledLabel } from './styles.js';
+import { StyledContainer, StyledCheckBox, StyledInputMixed, StyledInput, StyledLabel, StyledWrapLabel } from './styles.js';
 import { propTypes, defaultProps } from './react-desc-prop-types.js';
 import { setMultipleRefs } from './utils/setMultipleRefs.js';
 import { useValidateProps } from './config/useValidateProps.js';
@@ -98,7 +98,7 @@ const DSControlledCheckbox = props => {
       checked: checked,
       "data-testid": "ds-checkbox-label",
       wrapLabel: wrapLabel
-    }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    }, void 0, wrapLabel ? /*#__PURE__*/_jsx(StyledWrapLabel, {}, void 0, label) : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
       value: label
     }))]
   }));

package/esm/checkbox/config/useValidateProps.js

@@ -1,18 +1,21 @@
+import 'core-js/modules/es.error.cause.js';
 import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 
 const throwError = message => {
-  throw new Error("DSControlledCheckbox:: ".concat(message, "\n  "));
+  throw new Error(`DSControlledCheckbox:: ${message}
+  `);
 };
 
 const useValidateProps = (props, propTypes) => {
   useValidateTypescriptPropTypes(props, propTypes);
 
   if (typeof props.label === 'undefined' && typeof props['aria-label'] === 'undefined') {
-    throwError("Please provide a label or ariaLabel property to use this component.");
+    throwError(`Please provide a label or ariaLabel property to use this component.`);
   }
 
   if (props.checked === 'mixed' && typeof props['aria-controls'] === 'undefined') {
-    throwError("Please provide an ariaControls property to use a checkbox mixed state. \n      This property must be a string containing all the ids that this mixed checkbox is controlling.");
+    throwError(`Please provide an ariaControls property to use a checkbox mixed state. 
+      This property must be a string containing all the ids that this mixed checkbox is controlling.`);
   }
 };
 

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

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

package/esm/checkbox/styles.js

@@ -1,41 +1,51 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled, css } from '@elliemae/ds-system';
 import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
 import { DSCheckboxName, DSCheckboxSlots } from './exported-related/theming.js';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 const StyledContainer = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.CONTAINER
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-grid;\n  grid-template-rows: min-content;\n  grid-template-columns: ", " auto;\n  align-items: center;\n"])), _ref => {
+})`
+  display: inline-grid;
+  grid-template-rows: min-content;
+  grid-template-columns: ${_ref => {
   let {
     theme
   } = _ref;
   return theme.space.xs;
-});
-const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  border: 1px solid ", ";\n  border-radius: 2px;\n  position: relative;\n  background: ", ";\n  ", "\n  &:focus-within {\n    ", ";\n    &:hover {\n      ", "\n    }\n  }\n  &:hover {\n    background: ", ";\n    ", ";\n  }\n"])), _ref2 => {
+}} auto;
+  align-items: center;
+`;
+const StyledCheckBox = styled('span')`
+  width: ${_ref2 => {
   let {
     theme
   } = _ref2;
   return theme.space.xs;
-}, _ref3 => {
+}};
+  height: ${_ref3 => {
   let {
     theme
   } = _ref3;
   return theme.space.xs;
-}, _ref4 => {
+}};
+  border: 1px solid ${_ref4 => {
   let {
     theme,
     hasError
   } = _ref4;
   return hasError ? theme.colors.danger[900] : theme.colors.neutral[400];
-}, _ref5 => {
+}};
+  border-radius: 2px;
+  position: relative;
+  background: ${_ref5 => {
   let {
     theme,
     disabled
   } = _ref5;
   return handleBackgroundColor(theme, disabled);
-}, _ref6 => {
+}};
+  ${_ref6 => {
   let {
     theme,
     checked,
@@ -44,14 +54,18 @@ const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _t
     hasError
   } = _ref6;
   return handleCheckmark(theme, checked, disabled, readOnly, hasError);
-}, _ref7 => {
+}}
+  &:focus-within {
+    ${_ref7 => {
   let {
     theme,
     hasError,
     disabled
   } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[700], "; outline : 1px solid ").concat(theme.colors.brand[700], " ") : undefined;
-}, _ref8 => {
+  return !disabled && !hasError ? `border: 1px solid ${theme.colors.brand[700]}; outline : 1px solid ${theme.colors.brand[700]} ` : undefined;
+}};
+    &:hover {
+      ${_ref8 => {
   let {
     theme,
     checked,
@@ -60,41 +74,71 @@ const StyledCheckBox = styled('span')(_templateObject2 || (_templateObject2 = _t
     hasError
   } = _ref8;
   return handleCheckmark(theme, checked, disabled, readOnly, hasError, true);
-}, _ref9 => {
+}}
+    }
+  }
+  &:hover {
+    background: ${_ref9 => {
   let {
     theme,
     checked,
     disabled
   } = _ref9;
   return !disabled && (checked === 'mixed' || checked) ? theme.colors.brand[200] : undefined;
-}, _ref10 => {
+}};
+    ${_ref10 => {
   let {
     theme,
     hasError,
     disabled,
     readOnly
   } = _ref10;
-  return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
-});
-const checkboxStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0;\n"])));
+  return !hasError && !disabled && !readOnly ? ` border: 1px solid  ${theme.colors.brand[600]}` : undefined;
+}};
+  }
+`;
+const checkboxStyles = css`
+  &:hover {
+    cursor: pointer;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+`;
 const StyledInput = styled('input', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
-})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+})`
+  ${checkboxStyles}
+`;
 const StyledInputMixed = styled('div', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.INPUT
-})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n"])), checkboxStyles);
+})`
+  ${checkboxStyles}
+`;
 const StyledLabel = styled('label', {
   name: DSCheckboxName,
   slot: DSCheckboxSlots.LABEL
-})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:hover {\n    cursor: pointer;\n  }\n  ", ";\n\n  color: ", ";\n  font-size: 13px;\n  line-height: 13px;\n  display: inherit;\n"])), _ref11 => {
+})`
+  &:hover {
+    cursor: pointer;
+  }
+  ${_ref11 => {
   let {
     wrapLabel,
     theme
   } = _ref11;
-  return wrapLabel ? 'padding: 8px' : "padding-left: ".concat(theme.space.xxs);
-}, _ref12 => {
+  return wrapLabel ? 'padding: 8px 0px 8px 8px;' : `padding-left: ${theme.space.xxs}`;
+}};
+
+  color: ${_ref12 => {
   let {
     theme,
     disabled,
@@ -102,6 +146,11 @@ const StyledLabel = styled('label', {
     checked
   } = _ref12;
   return disabled && checked !== true || readOnly ? theme.colors.neutral[500] : theme.colors.neutral[800];
-});
+}};
+  font-size: 13px;
+  line-height: 13px;
+  display: inherit;
+`;
+const StyledWrapLabel = styled('span')``;
 
-export { StyledCheckBox, StyledContainer, StyledInput, StyledInputMixed, StyledLabel };
+export { StyledCheckBox, StyledContainer, StyledInput, StyledInputMixed, StyledLabel, StyledWrapLabel };

package/esm/checkbox/utils/styleHelpers.js

@@ -22,11 +22,29 @@ const handleCheckmark = function (theme, checked, disabled, readOnly, hasError)
   let isHovering = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
 
   if (checked === 'mixed') {
-    return "&:before {\n      position: absolute;\n    content: '';\n    top: 6px;\n    left: 3px;\n    background: ".concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n    width: ").concat(theme.space.xxs, ";\n    height: 2px;\n    }");
+    return `&:before {
+      position: absolute;
+    content: '';
+    top: 6px;
+    left: 3px;
+    background: ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+    width: ${theme.space.xxs};
+    height: 2px;
+    }`;
   }
 
   if (checked) {
-    return "&:before {\n      position: absolute;\n      content: '';\n          top: 3px;\n          left: 2px;\n          border-left: 2px solid ".concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n          border-bottom: 2px solid ").concat(handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError), ";\n          height: 5px;\n          width: 10px;\n          transform: rotate(-45deg);\n    }");
+    return `&:before {
+      position: absolute;
+      content: '';
+          top: 3px;
+          left: 2px;
+          border-left: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+          border-bottom: 2px solid ${handleCheckMarkColor(theme, checked, isHovering, disabled, readOnly, hasError)};
+          height: 5px;
+          width: 10px;
+          transform: rotate(-45deg);
+    }`;
   }
 
   return '';

package/esm/combobox/ComboBoxCTX.js

@@ -12,12 +12,14 @@ const defaultProps = {
   useMask: noop,
   innerRef: /*#__PURE__*/createRef(),
   startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+  placementOrderPreference: ['bottom-start', 'bottom-end'],
+  noOptionsMessage: 'No Matches Found',
+  filteredOptions: [] // override in useCombobox to avoid ref duplications when more than one cb is used
 
 };
 const defaultContext = {
   props: defaultProps,
-  showPopover: false,
+  menuState: false,
   hasFocus: false,
   referenceElement: null,
   inputValue: '',
@@ -36,7 +38,8 @@ const defaultContext = {
   setInputValue: noop,
   setReferenceElement: noop,
   setFocusOptionIdx: noop,
-  setShowSelectedOptions: noop
+  setShowSelectedOptions: noop,
+  setMenuState: noop
 };
 /** Context for cross component communication */
 

package/esm/combobox/config/useComboBox.js

@@ -1,11 +1,10 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 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 { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { defaultProps } from '../ComboBoxCTX.js';
@@ -36,8 +35,18 @@ const useComboBox = props => {
   const toggleSelectionButtonRef = useRef(null);
   const pillGroupRef = useRef(null);
   const {
-    selectedValues
-  } = propsWithDefaults; // ---------------------------------------------------------------------------
+    selectedValues,
+    isMenuOpen,
+    onMenuChange
+  } = propsWithDefaults;
+  const menuState = useMemo(() => {
+    if (isMenuOpen !== undefined) return isMenuOpen;
+    return showPopover;
+  }, [showPopover, isMenuOpen]);
+  const setMenuState = useCallback((newState, reason, e) => {
+    if (onMenuChange !== undefined) onMenuChange(newState, reason, e);
+    setShowPopover(newState);
+  }, [onMenuChange]); // ---------------------------------------------------------------------------
   // Options with creatable option + filtered by selected
   // ---------------------------------------------------------------------------
 
@@ -91,7 +100,7 @@ const useComboBox = props => {
       filteredOptions: correctOptions
     }),
     virtualListHelpers,
-    showPopover,
+    menuState,
     referenceElement,
     listRef,
     focusOptionIdx,
@@ -100,6 +109,7 @@ const useComboBox = props => {
     selectAllCheckboxRef,
     inputValue,
     setInputValue,
+    setMenuState,
     hasFocus,
     toggleSelectionButtonRef,
     pillGroupRef,
@@ -111,7 +121,7 @@ const useComboBox = props => {
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
+  }), [scrollOptionIntoView, setMenuState, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, menuState, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };
 

package/esm/combobox/config/useCorrectOptions.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useMemo } from 'react';
 import { uid } from 'uid';
 import { MENU_OPTION_TYPES } from '../constants.js';
@@ -24,7 +23,7 @@ const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) =
     if (onCreate && inputValue && filteredOptions.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
       const creatableUuid = uid();
       const creatableItem = {
-        dsId: "creatable-".concat(creatableUuid),
+        dsId: `creatable-${creatableUuid}`,
         label: inputValue,
         type: 'creatable'
       };

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?.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 ${focusOption?.label} ${isFocusOptionSelected ? 'selected and ' : ''}focused .${focusSelectableOptionIdx + 1} of ${selectabledOptions.length}. ${navigationContext} `);
+    if (focusOption?.type === 'creatable') return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
+      "aria-live": "assertive",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, menuState, `Press enter to Add: ${focusOption?.label}. ${navigationContext}`);
     return null;
-  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
+  }, [focusOption, menuState, isFocusOptionSelected, focusSelectableOptionIdx, selectabledOptions.length]);
 };
 
 export { A11yFocusedOption };

package/esm/combobox/parts/A11ySelectedValues.js

@@ -17,12 +17,10 @@ const A11ySelectedValues = () => {
 
     if (Array.isArray(selectedValues)) {
       if (selectedValues.length > 0) {
-        msg = "Options selected: ".concat(selectedValues.map(item => item.label).join(', '));
+        msg = `Options selected: ${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);
+      msg = `Option selected: ${selectedValues?.label}`;
     }
 
     return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {