@elliemae/ds-controlled-form 2.3.1-rc.0 → 2.3.2-next.0

package/cjs/{controlled-combobox → autocomplete}/parts/a11y-messages/styled.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledA11ySelectedValues = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-1ugq5ha-0"
+  componentId: "sc-cm1aqq-0"
 })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
 
 exports.StyledA11ySelectedValues = StyledA11ySelectedValues;

package/cjs/{controlled-autocomplete → autocomplete}/parts/container/styled.js

@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledContainerWithPopper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1xmjot4-0"
+  componentId: "sc-xupfk9-0"
 })(["width:100%;height:28px;position:relative;"]);
 const StyledContainerInline = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1xmjot4-1"
+  componentId: "sc-xupfk9-1"
 })(["width:100%;position:relative;"]);
 const StyledPopperWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-1xmjot4-2"
+  componentId: "sc-xupfk9-2"
 })(["background:#fff;overflow:auto;position:relative;"]);
 
 exports.StyledContainerInline = StyledContainerInline;

package/cjs/{controlled-autocomplete → autocomplete}/parts/controls/styled.js

@@ -21,7 +21,7 @@ const focusBorder = dsSystem.css(_templateObject2 || (_templateObject2 = _tagged
   return theme.colors.brand[700];
 });
 const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Grid).withConfig({
-  componentId: "sc-xlhlqm-0"
+  componentId: "sc-vp36gr-0"
 })(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}:focus-within{::after{", "}}"], _ref2 => {
   let {
     minWidth
@@ -29,13 +29,13 @@ const StyledControlsWrapper = /*#__PURE__*/styled__default["default"](dsGrid.Gri
   return "".concat(minWidth, "px");
 }, normalBorder, focusBorder);
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
-  componentId: "sc-xlhlqm-1"
+  componentId: "sc-vp36gr-1"
 })(["::placeholder{font-style:italic;color:", ";}font-size:13px;line-height:13px;border:none;padding:0;outline:none;width:100%;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[500], props => props.theme.colors.neutral[700]);
 const StyledInputPlaceHolder = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-xlhlqm-2"
+  componentId: "sc-vp36gr-2"
 })(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);
 const StyledInputWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-xlhlqm-3"
+  componentId: "sc-vp36gr-3"
 })(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
 
 exports.StyledControlsWrapper = StyledControlsWrapper;

package/cjs/{controlled-autocomplete → autocomplete}/parts/menu-list/styled.js

@@ -9,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-m3oh2u-0"
+  componentId: "sc-qt1kwv-0"
 })(["min-width:", ";"], props => props.inline ? '100%' : "".concat(props.minWidth, "px"));
 const StyledList = /*#__PURE__*/styled__default["default"].ul.withConfig({
-  componentId: "sc-m3oh2u-1"
+  componentId: "sc-qt1kwv-1"
 })(["position:relative;padding:0;"]);
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-m3oh2u-2"
+  componentId: "sc-qt1kwv-2"
 })(["overflow-y:auto;margin-top:", ";max-height:", ";"], _ref => {
   let {
     withHeader

package/cjs/{controlled-autocomplete → autocomplete}/utils/hooks/useKeyboardNavigation.js

@@ -30,7 +30,7 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = React.useCallback(() => {
     if (inputRef.current) inputRef.current.value = currentItem.label;
-    onFilter(currentItem.label);
+    if (onFilter) onFilter(currentItem.label);
     onChange(currentItem.label);
     setShowPopover(false);
   }, [currentItem, setShowPopover, onFilter, inputRef, onChange]);

package/cjs/{controlled-checkbox → checkbox}/ControlledCheckbox.js

@@ -45,15 +45,8 @@ const DSControlledCheckbox = props => {
     ariaControls: legacyAriaControls,
     'data-testid': dataTestid = 'ds-checkbox-container'
   } = propsWithDefault;
-  const handleOnKeyDown = React.useCallback(e => {
-    if (checkboxRef.current && e.key === 'Enter') {
-      checkboxRef.current.click();
-    }
-  }, []);
 
-  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault, {
-    onKeyDown: handleOnKeyDown
-  }),
+  const _useGetGlobalAttribut = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault),
         {
     id,
     disabled,
@@ -61,11 +54,18 @@ const DSControlledCheckbox = props => {
     label: globalLabel,
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
-    onKeyDown,
+    onKeyDown: userOnKeyDown,
     className
   } = _useGetGlobalAttribut,
         restGlobals = _objectWithoutProperties__default["default"](_useGetGlobalAttribut, _excluded);
 
+  const handleOnKeyDown = React.useCallback(e => {
+    if (checkboxRef.current && e.key === 'Enter') {
+      checkboxRef.current.click();
+    }
+
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
   return /*#__PURE__*/_jsx__default["default"](styles.StyledContainer, {
     "data-testid": dataTestid,
     className: className
@@ -83,7 +83,9 @@ const DSControlledCheckbox = props => {
     checked: checked !== 'mixed' ? checked : undefined,
     "aria-label": ariaLabel || legacyAriaLabel || label,
     "aria-controls": ariaControls || legacyAriaControls,
-    tabIndex: tabIndex
+    tabIndex: tabIndex,
+    disabled: disabled,
+    readOnly: readOnly
   }))), label && /*#__PURE__*/_jsx__default["default"](styles.StyledLabel, {
     htmlFor: id,
     disabled: disabled,

package/cjs/{controlled-checkbox → checkbox}/styles.js

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-349ih4-0"
+  componentId: "sc-flv7d2-0"
 })(["display:inline-grid;grid-template-rows:min-content;grid-template-columns:", " auto;align-items:center;"], _ref => {
   let {
     theme
@@ -18,7 +18,7 @@ const StyledContainer = /*#__PURE__*/styled__default["default"].div.withConfig({
   return theme.space.xs;
 });
 const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-349ih4-1"
+  componentId: "sc-flv7d2-1"
 })(["width:", ";height:", ";border:1px solid ", ";border-radius:2px;position:relative;background:", ";", " &:focus-within{", ";&:hover{", "}}&:hover{background:", ";", ";}"], _ref2 => {
   let {
     theme
@@ -56,7 +56,7 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
     hasError,
     disabled
   } = _ref7;
-  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[600], " ") : undefined;
+  return !disabled && !hasError ? "border: 1px solid ".concat(theme.colors.brand[700], "; outline : 1px solid ").concat(theme.colors.brand[700], " ") : undefined;
 }, _ref8 => {
   let {
     theme,
@@ -83,10 +83,10 @@ const StyledCheckBox = /*#__PURE__*/styled__default["default"].span.withConfig({
   return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
 });
 const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
-  componentId: "sc-349ih4-2"
+  componentId: "sc-flv7d2-2"
 })(["&:hover{cursor:pointer;}&:disabled{cursor:not-allowed;}height:100%;position:absolute;top:0;left:0;opacity:0;"]);
 const StyledLabel = /*#__PURE__*/styled__default["default"].label.withConfig({
-  componentId: "sc-349ih4-3"
+  componentId: "sc-flv7d2-3"
 })(["&:hover{cursor:pointer;}padding-left:", ";color:", ";font-size:13px;line-height:13px;display:inherit;"], _ref11 => {
   let {
     theme

package/cjs/{controlled-combobox → combobox}/ComboBoxCTX.js

@@ -3,49 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var lodash = require('lodash');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
+// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+function noop() {}
 const defaultProps = {
-  placeholder: '',
-  options: [],
-  selectedValues: null,
   hasError: false,
   inline: false,
-  autoFocus: false,
-  startPlacementPreference: 'bottom-start',
-  placementOrderPreference: ['bottom-start', 'bottom-end'],
-  onClearAll: lodash.noop,
-  onSelectAll: lodash.noop,
-  onCreate: lodash.noop,
-  onBlur: lodash.noop,
   withoutPortal: true,
   zIndex: 10,
-  onChange: lodash.noop,
-  onKeyDown: lodash.noop,
-  onFilter: lodash.noop,
-  onMenuOpen: lodash.noop
+  disabled: false,
+  useMask: noop,
+  innerRef: /*#__PURE__*/React.createRef(),
+  startPlacementPreference: 'bottom-start',
+  placementOrderPreference: ['bottom-start', 'bottom-end'] // override in useCombobox to avoid ref duplications when more than one cb is used
+
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
-  setShowPopover: lodash.noop,
-  scrollOptionIntoView: lodash.noop,
-  referenceElement: null,
   hasFocus: false,
-  setHasFocus: lodash.noop,
+  referenceElement: null,
+  inputValue: '',
+  focusOptionIdx: '',
+  showSelectedOptions: false,
   pillGroupRef: /*#__PURE__*/React.createRef(),
-  setReferenceElement: lodash.noop,
   listRef: /*#__PURE__*/React.createRef(),
   wrapperListRef: /*#__PURE__*/React.createRef(),
   controlsWrapperRef: /*#__PURE__*/React.createRef(),
   selectedOptionsRef: /*#__PURE__*/React.createRef(),
   selectAllCheckboxRef: /*#__PURE__*/React.createRef(),
   toggleSelectionButtonRef: /*#__PURE__*/React.createRef(),
-  focusOptionIdx: '',
-  setCurrentOption: lodash.noop,
-  showSelectedOptions: false,
-  setShowSelectedOptions: lodash.noop
+  setShowPopover: noop,
+  scrollOptionIntoView: noop,
+  setHasFocus: noop,
+  setInputValue: noop,
+  setReferenceElement: noop,
+  setFocusOptionIdx: noop,
+  setShowSelectedOptions: noop
 };
 /** Context for cross component communication */
 
@@ -54,3 +49,4 @@ const ComboBoxContext = /*#__PURE__*/React.createContext(defaultContext);
 exports.ComboBoxContext = ComboBoxContext;
 exports["default"] = ComboBoxContext;
 exports.defaultProps = defaultProps;
+exports.noop = noop;

package/cjs/{controlled-combobox → combobox}/ComboboxDataTestids.js

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const ComboboxDataTestid = {
+  MULTISELECT: {
+    SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
+    SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle'
+  },
+  CONTROLS_WRAPPER: 'combobox-controls-wrapper',
+  CONTAINER: 'combobox-container',
   INPUT: 'combobox-input',
   LIST: 'combobox-menu-list',
   SELECTED_VALUES: 'combobox-selected-values',
-  SELECT_ALL_BUTTON: 'combobox-all-btn',
-  CLEAR_ALL_BUTTON: 'combobox-clear-btn',
   DROPDOWN: 'combobox-dropdown-btn',
   OPTION: 'combobox-option',
-  SELECT_ALL_CHECKBOX: 'combobox-select-all-checkbox',
-  SHOW_SELECTED_OPTIONS_TOGGLE: 'combobox-selected-options-toggle',
   ALLY_SELECTED_VALUES: 'combobox-ally-selected-values'
 };
 

package/cjs/{controlled-combobox → combobox}/config/useComboBox.js

@@ -33,8 +33,9 @@ const useComboBox = props => {
   const [showPopover, setShowPopover] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState(null);
   const [showSelectedOptions, setShowSelectedOptions] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
   const [hasFocus, setHasFocus] = React.useState(false);
-  const [focusOptionIdx, setCurrentOption] = React.useState('');
+  const [focusOptionIdx, setFocusOptionIdx] = React.useState('');
   const listRef = React.useRef(null);
   const wrapperListRef = React.useRef(null);
   const selectedOptionsRef = React.useRef(null);
@@ -45,7 +46,7 @@ const useComboBox = props => {
   // Menu Options with/out selected filter
   // ---------------------------------------------------------------------------
 
-  const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, showSelectedOptions); // ===========================================================================
+  const correctOptions = useCorrectOptions.useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -59,9 +60,7 @@ const useComboBox = props => {
   // ===========================================================================
 
   const scrollOptionIntoView = React.useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), {
-      align: 'center'
-    });
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId));
   }, [correctOptions, virtualListHelpers]);
   const ctx = React.useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
@@ -75,18 +74,20 @@ const useComboBox = props => {
     selectedOptionsRef,
     controlsWrapperRef,
     selectAllCheckboxRef,
-    toggleSelectionButtonRef,
+    inputValue,
+    setInputValue,
     hasFocus,
+    toggleSelectionButtonRef,
     pillGroupRef,
     showSelectedOptions,
     wrapperListRef,
     setShowSelectedOptions,
     setHasFocus,
-    setCurrentOption,
+    setFocusOptionIdx,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, hasFocus, listRef]);
+  }), [scrollOptionIntoView, correctOptions, hasFocus, propsWithDefaults, virtualListHelpers, inputValue, focusOptionIdx, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, selectedOptionsRef, controlsWrapperRef, selectAllCheckboxRef, toggleSelectionButtonRef, listRef]);
   return ctx;
 };
 

package/cjs/{controlled-combobox → combobox}/config/useCorrectOptions.js

@@ -9,15 +9,14 @@ require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var uuid = require('uuid');
-var lodash = require('lodash');
+var uid = require('uid');
+var constants = require('../constants.js');
 
-const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
+const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
     options,
     selectedValues,
-    onCreate,
-    innerRef
+    onCreate
   } = propsWithDefaults;
   const selectedValuesWithSections = React.useCallback(() => {
     var _items2;
@@ -31,10 +30,10 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
         items.push(option);
       }
 
-      if (option.type === 'section') {
+      if (option.type === constants.MENU_OPTION_TYPES.SECTION) {
         var _items;
 
-        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
+        if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === constants.MENU_OPTION_TYPES.SECTION) {
           items[items.length - 1] = option;
         } else {
           items.push(option);
@@ -42,7 +41,7 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       }
     });
 
-    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
+    if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === constants.MENU_OPTION_TYPES.SECTION) {
       items.pop();
     }
 
@@ -53,24 +52,18 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       return selectedValuesWithSections();
     }
 
-    if (onCreate !== lodash.noop && innerRef.current && innerRef.current.value !== '' && options.findIndex(option => {
-      var _innerRef$current;
-
-      return option.type === 'option' && option.label === (innerRef === null || innerRef === void 0 ? void 0 : (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value);
-    }) === -1) {
-      var _innerRef$current2;
-
-      const creatableUuid = uuid.v4();
+    if (onCreate && inputValue && options.findIndex(option => option.type === constants.MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+      const creatableUuid = uid.uid(6);
       const creatableItem = {
         dsId: "creatable-".concat(creatableUuid),
-        label: (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.value,
+        label: inputValue,
         type: 'creatable'
       };
       return [creatableItem, ...options];
     }
 
     return options;
-  }, [options, onCreate, innerRef, selectedValuesWithSections, selectedValues, showSelectedOptions]);
+  }, [options, onCreate, inputValue, selectedValuesWithSections, selectedValues, showSelectedOptions]);
   return correctOptions;
 };
 

package/cjs/combobox/constants.js

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const MENU_OPTION_TYPES = {
+  OPTION: 'option',
+  SECTION: 'section',
+  SEPARATOR: 'separator'
+};
+const INTERNAL_MENU_OPTION_TYPES = {
+  CREATABLE: 'creatable'
+};
+
+exports.INTERNAL_MENU_OPTION_TYPES = INTERNAL_MENU_OPTION_TYPES;
+exports.MENU_OPTION_TYPES = MENU_OPTION_TYPES;

package/cjs/{controlled-combobox/parts/a11y-messages/FocusMenuItem.js → combobox/parts/A11yFocusedOption.js}

@@ -7,16 +7,16 @@ require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.find.js');
 var React = require('react');
-var ComboBoxCTX = require('../../ComboBoxCTX.js');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
 var styled = require('./styled.js');
-var listHelper = require('../../utils/listHelper.js');
-var jsxRuntime = require('react/jsx-runtime');
+var listHelper = require('../utils/listHelper.js');
+var sharedTypes = require('../sharedTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const FocusMenuItem = () => {
+const A11yFocusedOption = () => {
   const {
     props: {
       options
@@ -25,22 +25,16 @@ const FocusMenuItem = () => {
     showPopover
   } = React.useContext(ComboBoxCTX.ComboBoxContext);
   const selectabledOptions = listHelper.getSelectableOptions(options);
-  const focusOption = options.find(option => option.dsId === focusOptionIdx);
+  const focusOption = options.find(option => !sharedTypes.isSeparator(option) && option.dsId === focusOptionIdx);
   const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
-  const msg = React.useMemo(() => {
-    if (showPopover) {
-      return /*#__PURE__*/_jsx__default["default"](styled.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, " "));
-    }
-
-    return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  return React.useMemo(() => {
+    if (!sharedTypes.isSeparator(focusOption) && showPopover && focusOption) return /*#__PURE__*/_jsx__default["default"](styled.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, " "));
+    return null;
   }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: msg
-  });
 };
 
-exports.FocusMenuItem = FocusMenuItem;
+exports.A11yFocusedOption = A11yFocusedOption;

package/cjs/combobox/parts/A11ySelectedValues.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
+var styled = require('./styled.js');
+var ComboboxDataTestids = require('../ComboboxDataTestids.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+const A11ySelectedValues = () => {
+  const {
+    props: {
+      selectedValues
+    }
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  return React.useMemo(() => {
+    let msg = 'No Option Selected';
+
+    if (Array.isArray(selectedValues)) {
+      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);
+    }
+
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledA11ySelectedValues, {
+      id: "combobox-selected-items",
+      "data-testid": ComboboxDataTestids.ComboboxDataTestid.ALLY_SELECTED_VALUES,
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, void 0, msg);
+  }, [selectedValues]);
+};
+
+exports.A11ySelectedValues = A11ySelectedValues;

package/cjs/combobox/parts/DropdownIndicator.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var React = require('react');
+var dsSystem = require('@elliemae/ds-system');
+var DSButton = require('@elliemae/ds-button');
+var dsIcons = require('@elliemae/ds-icons');
+var ComboBoxCTX = require('../ComboBoxCTX.js');
+var ComboboxDataTestids = require('../ComboboxDataTestids.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+
+var _templateObject;
+const StyledDropDownButton = dsSystem.styled(DSButton.DSButtonV2)(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  &:focus::after {\n    border: none;\n  }\n  & svg {\n    fill: ", ";\n  }\n"])), _ref => {
+  let {
+    theme,
+    disabled
+  } = _ref;
+  return disabled ? 'red' : theme.colors.brand['700'];
+});
+const DropdownIndicator = () => {
+  const {
+    props: {
+      disabled
+    },
+    showPopover
+  } = React.useContext(ComboBoxCTX.ComboBoxContext);
+  const colorButton = React.useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
+  const handleOnClick = React.useCallback(e => {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/_jsx__default["default"](StyledDropDownButton, {
+    onClick: handleOnClick,
+    "data-testid": ComboboxDataTestids.ComboboxDataTestid.DROPDOWN,
+    "aria-controls": "combo-listbox",
+    "aria-labelledby": "combo-label",
+    disabled: disabled,
+    "aria-expanded": showPopover,
+    "aria-haspopup": "listbox",
+    "aria-hidden": true,
+    buttonType: "icon",
+    tabIndex: -1
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallDown, {
+    color: colorButton
+  }));
+};
+
+exports.DropdownIndicator = DropdownIndicator;