@elliemae/ds-controlled-form 2.3.0-next.5 → 2.3.0-next.9

package/esm/controlled-combobox/parts/multi-selected-values-container/MultiSelectedValuesContainer.js

@@ -6,43 +6,47 @@ import Grid from '@elliemae/ds-grid';
 import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { useGroupPills } from './useGroupPills.js';
-import { MultiAllyMessages } from '../a11y-messages/MultiAllyMessages.js';
-import 'styled-components';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _MultiAllyMessages;
+import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const MultiSelectedValuesContainer = () => {
-  var _inputRef$current;
-
   const {
     props: {
-      selectedValues
+      selectedValues,
+      onChange,
+      innerRef
     },
-    inputRef,
     pillGroupRef
   } = useContext(ComboBoxContext);
   const multiSelectedValue = selectedValues;
-  const pillsToShow = useGroupPills();
-  const correctPillsToShow = pillsToShow || 1;
+  const correctPillsToShow = useGroupPills() || 1;
   const pills = useMemo(() => /*#__PURE__*/_jsx(Grid, {
     style: {
       width: 'max-content'
-    }
+    },
+    onClick: e => e.stopPropagation(),
+    "data-testid": ComboboxDataTestid.SELECTED_VALUES
   }, void 0, /*#__PURE__*/_jsx(DSPillGroupV2, {
     innerRef: pillGroupRef
   }, void 0, multiSelectedValue.length > 0 && multiSelectedValue.slice(0, correctPillsToShow).map(option => /*#__PURE__*/_jsx(DSPillV2, {
     size: "s",
     label: option.label,
-    type: "value"
+    type: "removable",
+    tabIndex: -1,
+    onRemove: () => {
+      var _innerRef$current;
+
+      onChange(option);
+      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+    }
   }, option.value)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(DSPillV2, {
     size: "s",
     labelTruncated: false,
     label: "+".concat(multiSelectedValue.length - correctPillsToShow),
     type: "value"
-  }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [multiSelectedValue.length > 0 && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && (_MultiAllyMessages || (_MultiAllyMessages = /*#__PURE__*/_jsx(MultiAllyMessages, {}))), pills]
+  }, "grouped"))), [pillGroupRef, innerRef, onChange, multiSelectedValue, correctPillsToShow]);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: pills
   });
 };
 

package/esm/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js

@@ -17,9 +17,9 @@ const getGroupedPillWidth = remainingPills => {
 const useGroupPills = () => {
   const {
     props: {
-      selectedValues
+      selectedValues,
+      innerRef
     },
-    inputRef,
     selectedOptionsRef,
     controlsWrapperRef,
     pillGroupRef
@@ -31,7 +31,7 @@ const useGroupPills = () => {
   } = useOnElementResize(controlsWrapperRef);
   const {
     width: widthInput
-  } = useOnElementResize(inputRef || null);
+  } = useOnElementResize(innerRef || null);
   useEffect(() => {
     if (multiSelectedValues.length !== pillsToShow) {
       setPillsToShow(multiSelectedValues.length);
@@ -44,7 +44,7 @@ const useGroupPills = () => {
       let lastPillFit = -1;
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
-      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-value')];
+      const pills = [...selectedOptionsRef.current.querySelectorAll('.ds-pill-wrapper-removable')];
       const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
@@ -64,7 +64,7 @@ const useGroupPills = () => {
 
       if (pillGroupRef.current) pillGroupRef.current.style.width = 'fit-content';
     }
-  }, [selectedOptionsRef, inputRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput]);
+  }, [selectedOptionsRef, innerRef, multiSelectedValues, pillsToShow, pillGroupRef, width, widthInput]);
   return pillsToShow;
 };
 

package/esm/controlled-combobox/{propTypes.js → react-desc-prop-types.js}

@@ -1,9 +1,19 @@
-import { PropTypes } from 'react-desc';
+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 { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
 
-const propTypes = {
+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 ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
   placeholder: PropTypes.string.description('input s placeholder value').defaultValue(''),
   options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).description('List of options').defaultValue([]),
   selectedValues: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]).description('Array of option or single option selected'),
+  disabled: PropTypes.bool.description('wheter or not the input is disabled').defaultValue('false'),
   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(''),
@@ -16,9 +26,9 @@ const propTypes = {
   inputMinWidth: PropTypes.any.description('Minimum width for the combo box input controller').defaultValue(undefined),
   menuMinWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),
   menuMaxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),
-  withToggle: PropTypes.bool.description('POC purpose this prop will not remain').defaultValue('false'),
   withoutPortal: PropTypes.bool.description('Whether the combobox menu is rendered in a portal or not').defaultValue(false),
-  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10)
-};
+  zIndex: PropTypes.number.description('The z-index of the combobox menu').defaultValue(10),
+  innerRef: PropTypes.object.description('ref to the component s container')
+});
 
-export { propTypes };
+export { ComboboxPropTypes };

package/esm/controlled-combobox/utils/hooks/useKeyboardNavigation.js

@@ -5,7 +5,7 @@ import { useContext, useCallback } from 'react';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
 import { findInCircularList } from '../listHelper.js';
 
-const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
+const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type) && !opt.disabled;
 
 const useKeyboardNavigation = () => {
   const {
@@ -19,13 +19,13 @@ const useKeyboardNavigation = () => {
       options,
       selectedValues,
       onFilter,
-      withoutPortal
+      withoutPortal,
+      innerRef
     },
     setShowPopover,
     showPopover,
     setShowSelectedValue,
     focusOptionIdx,
-    inputRef,
     setCurrentOption,
     scrollOptionIntoView,
     selectAllCheckboxRef,
@@ -36,16 +36,17 @@ const useKeyboardNavigation = () => {
   const currentItem = options.find(item => item.dsId === focusOptionIdx);
   const selectOption = useCallback(() => {
     if (multiple) {
-      if (inputRef.current) onFilter(inputRef.current.value);
+      if (innerRef.current) onFilter(innerRef.current.value);
     } else {
       onFilter('');
-      if (inputRef.current) inputRef.current.value = '';
+      if (innerRef.current) innerRef.current.value = '';
       setShowSelectedValue(true);
     }
 
-    onChange(options.find(item => item.dsId === focusOptionIdx));
-    setShowPopover(multiple ? true : !showPopover);
-  }, [multiple, options, focusOptionIdx, setShowPopover, showPopover, onFilter, inputRef, setShowSelectedValue, onChange]);
+    const selectedOption = options.find(item => item.dsId === focusOptionIdx);
+    onChange(selectedOption);
+    if (!selectedOption.disabled && !multiple) setShowPopover(false);
+  }, [multiple, options, focusOptionIdx, setShowPopover, onFilter, innerRef, setShowSelectedValue, onChange]);
   const onInputKeyDown = useCallback(e => {
     const targetElement = e.target; // =============================================================================
     // CUSTOM KEYS
@@ -58,7 +59,7 @@ const useKeyboardNavigation = () => {
     if (e.key === 'Enter' && (currentItem === null || currentItem === void 0 ? void 0 : currentItem.type) === 'creatable') {
       onCreate(targetElement.value);
       onFilter('');
-      if (inputRef.current) inputRef.current.value = '';
+      if (innerRef.current) innerRef.current.value = '';
       return;
     } // =============================================================================
     // Enter and space on selection
@@ -67,6 +68,7 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'Enter' || e.keyCode === 32 && e.altKey) {
       e.preventDefault();
+      e.stopPropagation();
 
       if (!showPopover && !inline) {
         setShowPopover(true);
@@ -88,6 +90,7 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'ArrowDown') {
       e.preventDefault();
+      e.stopPropagation();
 
       if (showPopover || inline) {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
@@ -100,6 +103,7 @@ const useKeyboardNavigation = () => {
 
     if (e.key === 'ArrowUp') {
       e.preventDefault();
+      e.stopPropagation();
 
       if (showPopover || inline) {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
@@ -119,13 +123,13 @@ const useKeyboardNavigation = () => {
 
 
     if (e.key === 'Escape') {
-      var _inputRef$current;
+      var _innerRef$current;
 
       if (onCancel) onCancel();
 
-      if (inputRef.current && ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) !== '') {
+      if (innerRef.current && ((_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.value) !== '') {
         onFilter('');
-        inputRef.current.value = '';
+        innerRef.current.value = '';
       }
 
       if (!inline) setShowPopover(false);
@@ -154,10 +158,10 @@ const useKeyboardNavigation = () => {
         e.preventDefault();
         element.focus();
       }
-    }
+    } // if (e.key === 'Tab' && multiple) {
+    // }
 
-    if (e.key === 'Tab' && inline) ;
-  }, [currentItemIndex, options, currentItem, inputRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
+  }, [currentItemIndex, options, currentItem, innerRef, multiple, showPopover, selectedValues, inline, scrollOptionIntoView, onKeyDown, onSelectAll, onChange, onCreate, onFilter, setCurrentOption, setShowPopover, setShowSelectedValue, selectOption, onCancel, selectAllCheckboxRef, toggleSelectionButtonRef, withoutPortal]);
   return {
     onInputKeyDown
   };

package/esm/controlled-combobox/utils/listHelper.js

@@ -4,8 +4,8 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
 
-const getSelectableOptions = options => options ? options.filter(option => option.type === 'option' && !option.disabled) : [];
-const getOptions = options => options ? options.filter(option => option.type === 'option') : [];
+const getSelectableOptions = options => options.filter(option => option.type === 'option' && !option.disabled);
+const getOptions = options => options.filter(option => option.type === 'option');
 const isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = value => Array.isArray(value);
 const isSelected = (value, activeOption) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-controlled-form",
-  "version": "2.3.0-next.5",
+  "version": "2.3.0-next.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Controlled Form Controllers",
   "module": "./esm/index.js",
@@ -419,21 +419,13 @@
       "import": "./esm/controlled-combobox/tests/utils.js",
       "require": "./cjs/controlled-combobox/tests/utils.js"
     },
-    "./controlled-combobox/propTypes": {
-      "import": "./esm/controlled-combobox/propTypes.js",
-      "require": "./cjs/controlled-combobox/propTypes.js"
+    "./controlled-combobox/sharedTypes": {
+      "import": "./esm/controlled-combobox/sharedTypes.js",
+      "require": "./cjs/controlled-combobox/sharedTypes.js"
     },
-    "./controlled-combobox/parts/single-selected-value-container/styled": {
-      "import": "./esm/controlled-combobox/parts/single-selected-value-container/styled.js",
-      "require": "./cjs/controlled-combobox/parts/single-selected-value-container/styled.js"
-    },
-    "./controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer": {
-      "import": "./esm/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js",
-      "require": "./cjs/controlled-combobox/parts/single-selected-value-container/SingleSelectedValueContainer.js"
-    },
-    "./controlled-combobox/parts/single-selected-value-container": {
-      "import": "./esm/controlled-combobox/parts/single-selected-value-container/index.js",
-      "require": "./cjs/controlled-combobox/parts/single-selected-value-container/index.js"
+    "./controlled-combobox/react-desc-prop-types": {
+      "import": "./esm/controlled-combobox/react-desc-prop-types.js",
+      "require": "./cjs/controlled-combobox/react-desc-prop-types.js"
     },
     "./controlled-combobox/parts/multi-selected-values-container/useGroupPills": {
       "import": "./esm/controlled-combobox/parts/multi-selected-values-container/useGroupPills.js",
@@ -507,6 +499,10 @@
       "import": "./esm/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js",
       "require": "./cjs/controlled-combobox/parts/dropdown-indicator/DropdownIndicator.js"
     },
+    "./controlled-combobox/parts/controls/useOnPillsNavigation": {
+      "import": "./esm/controlled-combobox/parts/controls/useOnPillsNavigation.js",
+      "require": "./cjs/controlled-combobox/parts/controls/useOnPillsNavigation.js"
+    },
     "./controlled-combobox/parts/controls/styled": {
       "import": "./esm/controlled-combobox/parts/controls/styled.js",
       "require": "./cjs/controlled-combobox/parts/controls/styled.js"
@@ -547,34 +543,30 @@
       "import": "./esm/controlled-combobox/parts/a11y-messages/styled.js",
       "require": "./cjs/controlled-combobox/parts/a11y-messages/styled.js"
     },
-    "./controlled-combobox/parts/a11y-messages/SingleAllyMessages": {
-      "import": "./esm/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js",
-      "require": "./cjs/controlled-combobox/parts/a11y-messages/SingleAllyMessages.js"
-    },
-    "./controlled-combobox/parts/a11y-messages/MultiAllyMessages": {
-      "import": "./esm/controlled-combobox/parts/a11y-messages/MultiAllyMessages.js",
-      "require": "./cjs/controlled-combobox/parts/a11y-messages/MultiAllyMessages.js"
+    "./controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg": {
+      "import": "./esm/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.js",
+      "require": "./cjs/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.js"
     },
     "./controlled-combobox/parts/a11y-messages": {
       "import": "./esm/controlled-combobox/parts/a11y-messages/index.js",
       "require": "./cjs/controlled-combobox/parts/a11y-messages/index.js"
     },
+    "./controlled-combobox/parts/a11y-messages/FocusMenuItem": {
+      "import": "./esm/controlled-combobox/parts/a11y-messages/FocusMenuItem.js",
+      "require": "./cjs/controlled-combobox/parts/a11y-messages/FocusMenuItem.js"
+    },
     "./controlled-combobox": {
       "import": "./esm/controlled-combobox/index.js",
       "require": "./cjs/controlled-combobox/index.js"
     },
-    "./controlled-combobox/config/useGetPropsWithDefault": {
-      "import": "./esm/controlled-combobox/config/useGetPropsWithDefault.js",
-      "require": "./cjs/controlled-combobox/config/useGetPropsWithDefault.js"
+    "./controlled-combobox/config/useCorrectOptions": {
+      "import": "./esm/controlled-combobox/config/useCorrectOptions.js",
+      "require": "./cjs/controlled-combobox/config/useCorrectOptions.js"
     },
     "./controlled-combobox/config/useComboBox": {
       "import": "./esm/controlled-combobox/config/useComboBox.js",
       "require": "./cjs/controlled-combobox/config/useComboBox.js"
     },
-    "./controlled-combobox/config/constants": {
-      "import": "./esm/controlled-combobox/config/constants.js",
-      "require": "./cjs/controlled-combobox/config/constants.js"
-    },
     "./controlled-combobox/ComboboxDataTestids": {
       "import": "./esm/controlled-combobox/ComboboxDataTestids.js",
       "require": "./cjs/controlled-combobox/ComboboxDataTestids.js"
@@ -744,15 +736,15 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-next.5",
-    "@elliemae/ds-form-layout-blocks": "2.3.0-next.5",
-    "@elliemae/ds-grid": "2.3.0-next.5",
-    "@elliemae/ds-icon": "2.3.0-next.5",
-    "@elliemae/ds-icons": "2.3.0-next.5",
-    "@elliemae/ds-props-helpers": "2.3.0-next.5",
-    "@elliemae/ds-system": "2.3.0-next.5",
-    "@elliemae/ds-tooltip": "2.3.0-next.5",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.5",
+    "@elliemae/ds-button": "2.3.0-next.9",
+    "@elliemae/ds-form-layout-blocks": "2.3.0-next.9",
+    "@elliemae/ds-grid": "2.3.0-next.9",
+    "@elliemae/ds-icon": "2.3.0-next.9",
+    "@elliemae/ds-icons": "2.3.0-next.9",
+    "@elliemae/ds-props-helpers": "2.3.0-next.9",
+    "@elliemae/ds-system": "2.3.0-next.9",
+    "@elliemae/ds-tooltip": "2.3.0-next.9",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.9",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
     "react-popper": "~2.2.5",

package/types/controlled-combobox/ComboBox.d.ts

@@ -1,71 +1,5 @@
-/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
-/// <reference types="react" />
-import type { ComboBoxPropsT } from './index.d';
-declare const DSComboBox: {
-    (props: ComboBoxPropsT): JSX.Element;
-    propTypes: {
-        placeholder: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        options: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        selectedValues: {
-            defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-                deprecated: import("react-desc").PropTypesDescValidator;
-            };
-            isRequired: import("react-desc").PropTypesDescValue;
-        };
-        autoFocus: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        hasError: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onChange: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onSelectAll: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onFilter: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onCreate: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onClearAll: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onCancel: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onMenuOpen: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        inputMinWidth: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        menuMinWidth: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        menuMaxHeight: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        withToggle: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        withoutPortal: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        zIndex: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-    };
-};
-declare const DSComboBoxWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
+import React from 'react';
+import { DSComboboxT } from './react-desc-prop-types';
+declare const DSComboBox: React.ComponentType<DSComboboxT.Props>;
+declare const DSComboBoxWithSchema: any;
 export { DSComboBox, DSComboBoxWithSchema };

package/types/controlled-combobox/ComboBoxCTX.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { ComboBoxPropsT, ComboBoxContextT } from './index.d';
-export declare const defaultProps: ComboBoxPropsT;
+import { DSComboboxT } from './react-desc-prop-types';
+import { DSComboboxInternalsT } from './sharedTypes';
+export declare const defaultProps: DSComboboxT.Props;
 /** Context for cross component communication */
-export declare const ComboBoxContext: import("react").Context<ComboBoxContextT>;
+export declare const ComboBoxContext: import("react").Context<DSComboboxInternalsT.ComboBoxContextT>;
 export default ComboBoxContext;

package/types/controlled-combobox/ComboboxDataTestids.d.ts

@@ -8,4 +8,5 @@ export declare const ComboboxDataTestid: {
     OPTION: string;
     SELECT_ALL_CHECKBOX: string;
     SHOW_SELECTED_OPTIONS_TOGGLE: string;
+    ALLY_SELECTED_VALUES: string;
 };

package/types/controlled-combobox/config/useComboBox.d.ts

@@ -1,2 +1,3 @@
-import type { ComboBoxPropsT, ComboBoxContextT } from '../index.d';
-export declare const useComboBox: (props: Partial<ComboBoxPropsT>) => ComboBoxContextT;
+import { DSComboboxT } from '../react-desc-prop-types';
+import { DSComboboxInternalsT } from '../sharedTypes';
+export declare const useComboBox: (props: Partial<DSComboboxT.Props>) => DSComboboxInternalsT.ComboBoxContextT;

package/types/controlled-combobox/config/useCorrectOptions.d.ts

@@ -0,0 +1,3 @@
+import { DSComboboxT } from '../react-desc-prop-types';
+declare const useCorrectOptions: (propsWithDefaults: DSComboboxT.Props, showSelectedOptions: boolean) => DSComboboxT.OptionTypes[];
+export { useCorrectOptions };

package/types/controlled-combobox/parts/a11y-messages/FocusMenuItem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const FocusMenuItem: () => JSX.Element;
+export { FocusMenuItem };

package/types/controlled-combobox/parts/a11y-messages/SelectedValuesAllyMsg.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SelectedValuesAllyMsg: () => JSX.Element;
+export { SelectedValuesAllyMsg };

package/types/controlled-combobox/parts/a11y-messages/index.d.ts

@@ -1,2 +1,2 @@
-export { MultiAllyMessages } from './MultiAllyMessages';
-export { SingleAllyMessages } from './SingleAllyMessages';
+export { SelectedValuesAllyMsg } from './SelectedValuesAllyMsg';
+export { FocusMenuItem } from './FocusMenuItem';

package/types/controlled-combobox/parts/controls/styled.d.ts

@@ -1,6 +1,14 @@
 /// <reference types="react" />
-export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+interface StyledControlsWrapperT {
+    hasError?: boolean;
+    inline?: boolean;
+    hasFocus?: boolean;
+    minWidth: number;
+    disabled?: boolean;
+}
+export declare const StyledControlsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, StyledControlsWrapperT, never>;
 export declare const StyledSelection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeaderActionsWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleDropdownIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyleHeaderActionsSeparator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/types/controlled-combobox/parts/controls/useOnPillsNavigation.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const useOnPillsNavigation: () => {
+    onKeyDownPills: import("react").KeyboardEventHandler<Element>;
+};

package/types/controlled-combobox/parts/dropdown-indicator/styled.d.ts

@@ -1 +1,2 @@
-export declare const StyledDropDownButton: import("styled-components").StyledComponent<any, import("styled-components").DefaultTheme, any, any>;
+/// <reference types="react" />
+export declare const StyledDropDownButton: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button/types/v2/propTypes").DSButtonT.Props>, import("styled-components").DefaultTheme, {}, never>;

package/types/controlled-combobox/react-desc-prop-types.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+export declare namespace DSComboboxT {
+    interface CommonItemOptions {
+        dsId: string;
+        disabled?: boolean;
+        render?: React.ComponentType<unknown>;
+    }
+    interface ItemSeparatorOptions extends CommonItemOptions {
+        type: 'separator';
+    }
+    interface ItemSectionOptions extends CommonItemOptions {
+        type: 'section';
+        label: string;
+    }
+    interface ItemOption extends CommonItemOptions {
+        value: unknown;
+        label: string;
+        type: 'option';
+    }
+    interface ItemCreatableOption extends CommonItemOptions {
+        label: string;
+        type: 'creatable';
+    }
+    type OptionTypes = ItemOption | ItemSectionOptions | ItemSeparatorOptions | ItemCreatableOption;
+    type SelectedOptionsT = ItemOption[] | ItemOption | null;
+    interface Props {
+        placeholder?: string;
+        options: OptionTypes[];
+        selectedValues: SelectedOptionsT;
+        hasError?: boolean;
+        inline?: boolean;
+        autoFocus?: boolean;
+        innerRef: React.RefObject<HTMLInputElement>;
+        startPlacementPreference: string;
+        placementOrderPreference: string[];
+        withoutPortal?: boolean;
+        zIndex?: number;
+        inputMinWidth?: number;
+        menuMinWidth?: number;
+        menuMaxHeight?: number;
+        disabled?: boolean;
+        onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>, value: ItemOption | undefined) => void;
+        onChange: (value: ItemOption | null) => void;
+        onBlur: () => void;
+        onSelectAll: () => void;
+        onClearAll: () => void;
+        onFilter: (value: string) => void;
+        onCreate: (label: string) => void;
+        onMenuOpen?: () => void;
+        onCancel?: () => void;
+    }
+}
+export declare const ComboboxPropTypes: any;

package/types/controlled-combobox/sharedTypes.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { useVirtual } from 'react-virtual';
+import { DSComboboxT } from './react-desc-prop-types';
+export declare namespace DSComboboxInternalsT {
+    interface ComboBoxContextT {
+        props: DSComboboxT.Props;
+        virtualListHelpers?: ReturnType<typeof useVirtual>;
+        showPopover: boolean;
+        setShowPopover: React.Dispatch<React.SetStateAction<boolean>>;
+        referenceElement: HTMLElement | null;
+        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
+        hasFocus: boolean;
+        pillGroupRef: React.RefObject<HTMLDivElement>;
+        scrollOptionIntoView: (dsId: string) => void;
+        setHasFocus: React.Dispatch<React.SetStateAction<boolean>>;
+        listRef: React.RefObject<HTMLDivElement>;
+        wrapperListRef: React.RefObject<HTMLDivElement>;
+        selectedOptionsRef: React.RefObject<HTMLDivElement>;
+        controlsWrapperRef: React.RefObject<HTMLDivElement>;
+        selectAllCheckboxRef: React.RefObject<HTMLInputElement>;
+        toggleSelectionButtonRef: React.RefObject<HTMLButtonElement>;
+        showSelectedValue: boolean;
+        setShowSelectedValue: React.Dispatch<React.SetStateAction<boolean>>;
+        focusOptionIdx: string;
+        setCurrentOption: React.Dispatch<React.SetStateAction<string>>;
+        showSelectedOptions: boolean;
+        setShowSelectedOptions: React.Dispatch<React.SetStateAction<boolean>>;
+    }
+}

package/types/controlled-combobox/utils/hooks/useKeyboardNavigation.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const useKeyboardNavigation: () => {
-    onInputKeyDown: import("react").KeyboardEventHandler<Element>;
+    onInputKeyDown: import("react").KeyboardEventHandler<HTMLInputElement>;
 };