@elliemae/ds-controlled-form 2.3.3-rc.0 → 2.4.0-rc.2

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

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

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

@@ -0,0 +1,14 @@
+import { PropTypes } from '@elliemae/ds-props-helpers';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+function noop() {}
+const propTypes = {
+  placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
+  value: PropTypes.oneOfType([PropTypes.string]).description('Array of option or single option selected'),
+  autoFocus: PropTypes.bool.description('Whether the combo box uses auto focus or not').defaultValue('false'),
+  hasError: PropTypes.bool.description('Whether the combo box has error or not').defaultValue('false'),
+  onChange: PropTypes.func.description('function triggered when an option is selected it will send the options selected').defaultValue('')
+};
+
+export { noop, propTypes };

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

@@ -26,7 +26,7 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = 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/esm/{controlled-checkbox → checkbox}/ControlledCheckbox.js

@@ -35,15 +35,8 @@ const DSControlledCheckbox = props => {
     ariaControls: legacyAriaControls,
     'data-testid': dataTestid = 'ds-checkbox-container'
   } = propsWithDefault;
-  const handleOnKeyDown = useCallback(e => {
-    if (checkboxRef.current && e.key === 'Enter') {
-      checkboxRef.current.click();
-    }
-  }, []);
 
-  const _useGetGlobalAttribut = useGetGlobalAttributes(propsWithDefault, {
-    onKeyDown: handleOnKeyDown
-  }),
+  const _useGetGlobalAttribut = useGetGlobalAttributes(propsWithDefault),
         {
     id,
     disabled,
@@ -51,11 +44,18 @@ const DSControlledCheckbox = props => {
     label: globalLabel,
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
-    onKeyDown,
+    onKeyDown: userOnKeyDown,
     className
   } = _useGetGlobalAttribut,
         restGlobals = _objectWithoutProperties(_useGetGlobalAttribut, _excluded);
 
+  const handleOnKeyDown = useCallback(e => {
+    if (checkboxRef.current && e.key === 'Enter') {
+      checkboxRef.current.click();
+    }
+
+    if (userOnKeyDown) userOnKeyDown(e);
+  }, [userOnKeyDown]);
   return /*#__PURE__*/_jsx(StyledContainer, {
     "data-testid": dataTestid,
     className: className
@@ -73,7 +73,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(StyledLabel, {
     htmlFor: id,
     disabled: disabled,

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

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { handleBackgroundColor, handleCheckmark } from './utils/styleHelpers.js';
 
 const StyledContainer = /*#__PURE__*/styled.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
@@ -10,7 +10,7 @@ const StyledContainer = /*#__PURE__*/styled.div.withConfig({
   return theme.space.xs;
 });
 const StyledCheckBox = /*#__PURE__*/styled.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
@@ -48,7 +48,7 @@ const StyledCheckBox = /*#__PURE__*/styled.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,
@@ -75,10 +75,10 @@ const StyledCheckBox = /*#__PURE__*/styled.span.withConfig({
   return !hasError && !disabled && !readOnly ? " border: 1px solid  ".concat(theme.colors.brand[600]) : undefined;
 });
 const StyledInput = /*#__PURE__*/styled.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.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/esm/{controlled-combobox → combobox}/ComboBoxCTX.js

@@ -1,50 +1,45 @@
-import { createContext, createRef } from 'react';
-import { noop } from 'lodash';
+import { createRef, createContext } from 'react';
 
 // 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: noop,
-  onSelectAll: noop,
-  onCreate: noop,
-  onBlur: noop,
   withoutPortal: true,
   zIndex: 10,
-  onChange: noop,
-  onKeyDown: noop,
-  onFilter: noop,
-  onMenuOpen: noop
+  disabled: false,
+  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
+
 };
 const defaultContext = {
   props: defaultProps,
   showPopover: false,
-  setShowPopover: noop,
-  scrollOptionIntoView: noop,
-  referenceElement: null,
   hasFocus: false,
-  setHasFocus: noop,
+  referenceElement: null,
+  inputValue: '',
+  focusOptionIdx: '',
+  showSelectedOptions: false,
   pillGroupRef: /*#__PURE__*/createRef(),
-  setReferenceElement: noop,
   listRef: /*#__PURE__*/createRef(),
   wrapperListRef: /*#__PURE__*/createRef(),
   controlsWrapperRef: /*#__PURE__*/createRef(),
   selectedOptionsRef: /*#__PURE__*/createRef(),
   selectAllCheckboxRef: /*#__PURE__*/createRef(),
   toggleSelectionButtonRef: /*#__PURE__*/createRef(),
-  focusOptionIdx: '',
-  setCurrentOption: noop,
-  showSelectedOptions: false,
+  setShowPopover: noop,
+  scrollOptionIntoView: noop,
+  setHasFocus: noop,
+  setInputValue: noop,
+  setReferenceElement: noop,
+  setFocusOptionIdx: noop,
   setShowSelectedOptions: noop
 };
 /** Context for cross component communication */
 
 const ComboBoxContext = /*#__PURE__*/createContext(defaultContext);
 
-export { ComboBoxContext, ComboBoxContext as default, defaultProps };
+export { ComboBoxContext, ComboBoxContext as default, defaultProps, noop };

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

@@ -1,13 +1,15 @@
 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/esm/{controlled-combobox → combobox}/config/useComboBox.js

@@ -5,12 +5,13 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useCallback, useMemo } from 'react';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { defaultProps } from '../ComboBoxCTX.js';
 import { ComboboxPropTypes } from '../react-desc-prop-types.js';
 import { useCorrectOptions } from './useCorrectOptions.js';
+import { getFirstOption } from '../utils/listHelper.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -25,19 +26,22 @@ const useComboBox = props => {
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [showSelectedOptions, setShowSelectedOptions] = useState(false);
+  const [inputValue, setInputValue] = useState('');
   const [hasFocus, setHasFocus] = useState(false);
-  const [focusOptionIdx, setCurrentOption] = useState('');
   const listRef = useRef(null);
   const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
   const controlsWrapperRef = useRef(null);
   const selectAllCheckboxRef = useRef(null);
   const toggleSelectionButtonRef = useRef(null);
-  const pillGroupRef = useRef(null); // ---------------------------------------------------------------------------
-  // Menu Options with/out selected filter
+  const pillGroupRef = useRef(null);
+  const {
+    selectedValues
+  } = propsWithDefaults; // ---------------------------------------------------------------------------
+  // Menu Options with/out selected filter and creatable functionality
   // ---------------------------------------------------------------------------
 
-  const correctOptions = useCorrectOptions(propsWithDefaults, showSelectedOptions); // ===========================================================================
+  const correctOptions = useCorrectOptions(propsWithDefaults, inputValue, showSelectedOptions); // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -50,11 +54,30 @@ const useComboBox = props => {
   // Scroll into view function
   // ===========================================================================
 
-  const scrollOptionIntoView = useCallback(dsId => {
-    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), {
+  const scrollOptionIntoView = useCallback(function (dsId) {
+    let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       align: 'center'
-    });
-  }, [correctOptions, virtualListHelpers]);
+    };
+    virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    opts);
+  }, [correctOptions, virtualListHelpers]); // ===========================================================================
+  // Init focused option when opening the menu list
+  // ===========================================================================
+
+  const [focusOptionIdx, setFocusOptionIdx] = useState('');
+  useEffect(() => {
+    // we are updating the focus option only when we have focus on the input and
+    // we are in the selected option view or we are typing to force first option always
+    if (hasFocus && (focusOptionIdx === '' || inputValue !== '' || showSelectedOptions)) {
+      const focusedValue = getFirstOption(correctOptions, selectedValues, inputValue);
+      setFocusOptionIdx(focusedValue);
+      scrollOptionIntoView(focusedValue, {
+        align: 'center'
+      });
+    }
+
+    if (!hasFocus) setFocusOptionIdx(''); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showPopover, hasFocus, correctOptions, selectedValues, inputValue]);
   const ctx = useMemo(() => ({
     props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
       options: correctOptions
@@ -67,18 +90,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/esm/{controlled-combobox → combobox}/config/useCorrectOptions.js

@@ -6,14 +6,13 @@ import 'core-js/modules/esnext.iterator.find.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useCallback, useMemo } from 'react';
 import { uid } from 'uid';
-import { noop } from 'lodash';
+import { MENU_OPTION_TYPES } from '../constants.js';
 
-const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
+const useCorrectOptions = (propsWithDefaults, inputValue, showSelectedOptions) => {
   const {
     options,
     selectedValues,
-    onCreate,
-    innerRef
+    onCreate
   } = propsWithDefaults;
   const selectedValuesWithSections = useCallback(() => {
     var _items2;
@@ -27,10 +26,10 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
         items.push(option);
       }
 
-      if (option.type === 'section') {
+      if (option.type === 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) === MENU_OPTION_TYPES.SECTION) {
           items[items.length - 1] = option;
         } else {
           items.push(option);
@@ -38,7 +37,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) === MENU_OPTION_TYPES.SECTION) {
       items.pop();
     }
 
@@ -49,24 +48,18 @@ const useCorrectOptions = (propsWithDefaults, showSelectedOptions) => {
       return selectedValuesWithSections();
     }
 
-    if (onCreate !== 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 = uid(6);
+    if (onCreate && inputValue && options.findIndex(option => option.type === MENU_OPTION_TYPES.OPTION && option.label === inputValue) === -1) {
+      const creatableUuid = uid();
       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/esm/combobox/constants.js

@@ -0,0 +1,10 @@
+const MENU_OPTION_TYPES = {
+  OPTION: 'option',
+  SECTION: 'section',
+  SEPARATOR: 'separator'
+};
+const INTERNAL_MENU_OPTION_TYPES = {
+  CREATABLE: 'creatable'
+};
+
+export { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES };

package/esm/combobox/parts/A11yFocusedOption.js

@@ -0,0 +1,32 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+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 { isSeparator } from '../sharedTypes.js';
+
+const A11yFocusedOption = () => {
+  const {
+    props: {
+      options
+    },
+    focusOptionIdx,
+    showPopover
+  } = useContext(ComboBoxContext);
+  const selectabledOptions = getSelectableOptions(options);
+  const focusOption = options.find(option => !isSeparator(option) && option.dsId === focusOptionIdx);
+  const focusSelectableOptionIdx = selectabledOptions.findIndex(option => option.dsId === focusOptionIdx);
+  return useMemo(() => {
+    if (!isSeparator(focusOption) && showPopover && focusOption) 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, " "));
+    return null;
+  }, [showPopover, focusOption, focusSelectableOptionIdx, selectabledOptions]);
+};
+
+export { A11yFocusedOption };

package/esm/combobox/parts/A11ySelectedValues.js

@@ -0,0 +1,38 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext, useMemo } from 'react';
+import { ComboBoxContext } from '../ComboBoxCTX.js';
+import { StyledA11ySelectedValues } from './styled.js';
+import { ComboboxDataTestid } from '../ComboboxDataTestids.js';
+
+const A11ySelectedValues = () => {
+  const {
+    props: {
+      selectedValues
+    }
+  } = useContext(ComboBoxContext);
+  return 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(StyledA11ySelectedValues, {
+      id: "combobox-selected-items",
+      "data-testid": ComboboxDataTestid.ALLY_SELECTED_VALUES,
+      "aria-live": "polite",
+      "aria-atomic": "false",
+      "aria-relevant": "additions text"
+    }, void 0, msg);
+  }, [selectedValues]);
+};
+
+export { A11ySelectedValues };

package/esm/combobox/parts/DropdownIndicator.js

@@ -0,0 +1,45 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
+import { useContext, useMemo, useCallback } from 'react';
+import { styled } from '@elliemae/ds-system';
+import { DSButtonV2 } from '@elliemae/ds-button';
+import { ChevronSmallDown } from '@elliemae/ds-icons';
+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 => {
+  let {
+    theme,
+    disabled
+  } = _ref;
+  return disabled ? 'red' : theme.colors.brand['700'];
+});
+const DropdownIndicator = () => {
+  const {
+    props: {
+      disabled
+    },
+    showPopover
+  } = useContext(ComboBoxContext);
+  const colorButton = useMemo(() => disabled ? ['neutral', 400] : ['brand-primary', 700], [disabled]);
+  const handleOnClick = useCallback(e => {
+    e.preventDefault();
+  }, []);
+  return /*#__PURE__*/_jsx(StyledDropDownButton, {
+    onClick: handleOnClick,
+    "data-testid": 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(ChevronSmallDown, {
+    color: colorButton
+  }));
+};
+
+export { DropdownIndicator };

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

@@ -0,0 +1,95 @@
+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 { jsx, jsxs, 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 globalsAttrs = _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(() => /*#__PURE__*/jsx(StyledContainer, _objectSpread(_objectSpread({
+    "data-testid": ComboboxDataTestid.CONTAINER,
+    ref: setReferenceElement
+  }, globalsAttrs), {}, {
+    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,
+        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, StyledContainer, setReferenceElement, globalsAttrs, referenceElement, showPopover, handleCloseMenu, startPlacementPreference, placementOrderPreference, withoutPortal, zIndex, handleMouseDown]);
+};
+
+export { Container };