@elliemae/ds-controlled-form 2.4.1-rc.1 → 2.4.1-rc.13

package/esm/autocomplete/AutocompleteDataTestids.js

@@ -1,13 +1,7 @@
 const AutocompleteDataTestid = {
-  INPUT: 'autocomplete-input',
   LIST: 'autocomplete-menu-list',
-  SELECTED_VALUES: 'autocomplete-selected-values',
-  SELECT_ALL_BUTTON: 'autocomplete-all-btn',
-  CLEAR_ALL_BUTTON: 'autocomplete-clear-btn',
-  DROPDOWN: 'autocomplete-dropdown-btn',
   OPTION: 'autocomplete-option',
-  SHOW_ALL_BUTTON: 'autocomplete-show-all-btn',
-  SHOW_SELECTED_OPTIONS_BUTTON: 'autocomplete-selected-options-btn'
+  CONTAINER: 'autocomplete-container'
 };
 
 export { AutocompleteDataTestid };

package/esm/autocomplete/config/useAutocomplete.js

@@ -1,30 +1,37 @@
-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 'core-js/modules/web.dom-collections.iterator.js';
-import { useState, useRef, useCallback, useMemo } from 'react';
+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 { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';
 import { useVirtual } from 'react-virtual';
-import { useGetAutocompleteWithDefaultsProps } from './useGetPropsWithDefault.js';
+import { propTypes } from '../react-desc-prop-types.js';
+import { defaultProps } from '../AutocompleteCTX.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; }
 
 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 useAutocomplete = props => {
+  const defaultPropsWithInnerRef = _objectSpread(_objectSpread({}, defaultProps), {}, {
+    innerRef: useRef(null)
+  });
+
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultPropsWithInnerRef);
+  useValidateTypescriptPropTypes(propsWithDefault, propTypes);
   const [showPopover, setShowPopover] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [focusOptionIdx, setCurrentOption] = useState('');
   const inputRef = useRef(null);
   const listRef = useRef(null);
-  const wrapperListRef = useRef(null);
   const selectedOptionsRef = useRef(null);
-  const controlsWrapperRef = useRef(null);
-  const propsWithDefaults = useGetAutocompleteWithDefaultsProps(props);
   const {
-    options
-  } = propsWithDefaults; // ===========================================================================
+    options,
+    filter
+  } = propsWithDefault; // ===========================================================================
   // Virtualization setup
   // ===========================================================================
 
@@ -43,8 +50,16 @@ const useAutocomplete = props => {
     };
     virtualListHelpers.scrollToIndex(options.findIndex(opt => opt.dsId === dsId), opts);
   }, [options, virtualListHelpers]);
+  useEffect(() => {
+    if (filter.length === 0 || options.length === 0) {
+      setShowPopover(false);
+    }
+  }, [filter, options.length, setShowPopover]);
+  useEffect(() => {
+    setCurrentOption(getFirstOption(options));
+  }, [options, showPopover]);
   const ctx = useMemo(() => ({
-    props: _objectSpread({}, propsWithDefaults),
+    props: _objectSpread({}, propsWithDefault),
     virtualListHelpers,
     showPopover,
     referenceElement,
@@ -52,13 +67,11 @@ const useAutocomplete = props => {
     listRef,
     focusOptionIdx,
     selectedOptionsRef,
-    controlsWrapperRef,
-    wrapperListRef,
     setCurrentOption,
     scrollOptionIntoView,
     setReferenceElement,
     setShowPopover
-  }), [scrollOptionIntoView, propsWithDefaults, virtualListHelpers, focusOptionIdx, wrapperListRef, showPopover, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, listRef]);
+  }), [scrollOptionIntoView, propsWithDefault, virtualListHelpers, focusOptionIdx, showPopover, referenceElement, inputRef, selectedOptionsRef, listRef]);
   return ctx;
 };
 

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

@@ -1,40 +1,56 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+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 { DSPopperJS } from '@elliemae/ds-popperjs';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { StyledPopperWrapper, StyledContainerInline, StyledContainerWithPopper } from './styled.js';
-import { Controls } from '../controls/Controls.js';
+import { StyledContainerWithPopper, StyledPopperWrapper } from './styled.js';
 import { MenuList } from '../menu-list/MenuList.js';
-import { jsxs, Fragment } from 'react/jsx-runtime';
-
-var _Controls, _MenuList, _MenuList2;
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
+import { jsxs } from 'react/jsx-runtime';
 
+var _StyledPopperWrapper;
 const Container = () => {
   const {
     props: {
-      inline,
       startPlacementPreference,
+      children,
+      filter,
       placementOrderPreference
     },
     showPopover,
-    inputRef,
     setReferenceElement,
     setShowPopover,
     referenceElement
   } = useContext(AutocompleteContext);
+  useEffect(() => {
+    const closePopper = () => {
+      setShowPopover(false);
+    };
+
+    window.addEventListener('blur', closePopper);
+    return () => {
+      window.removeEventListener('blur', closePopper);
+    };
+  }, [setShowPopover]);
   const handleCloseMenu = useCallback(() => {
     setShowPopover(false);
-    if (inputRef.current) inputRef.current.blur();
-  }, [inputRef, setShowPopover]);
-  const handleMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(StyledContainer, {
-      ref: setReferenceElement,
-      children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {})) : null]
-    }), /*#__PURE__*/_jsx(DSPopperJS, {
+  }, [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,
@@ -45,10 +61,9 @@ const Container = () => {
       withoutArrow: true,
       withoutAnimation: true,
       zIndex: 10
-    }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
-      tabIndex: -1,
-      onMouseDown: handleMouseDown
-    }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {}))))]
+    }, void 0, _StyledPopperWrapper || (_StyledPopperWrapper = /*#__PURE__*/_jsx(StyledPopperWrapper, {
+      tabIndex: -1
+    }, void 0, /*#__PURE__*/_jsx(MenuList, {}))))]
   });
 };
 

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

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

package/esm/autocomplete/parts/{controls → container}/useKeyboardNavigation.js

@@ -10,7 +10,7 @@ const isOptionFocuseable = opt => !['section', 'separator'].includes(opt.type);
 const useKeyboardNavigation = () => {
   const {
     props: {
-      onValueChange,
+      onSelect,
       options
     },
     setShowPopover,
@@ -21,25 +21,18 @@ const useKeyboardNavigation = () => {
   } = useContext(AutocompleteContext);
   const currentItemIndex = options.findIndex(opt => opt.dsId === focusOptionIdx);
   const currentItem = options.find(item => item.type === 'option' && item.dsId === focusOptionIdx);
-  const selectOption = useCallback(e => {
-    if (onValueChange) onValueChange(currentItem.label, e);
-    setShowPopover(false);
-  }, [currentItem, setShowPopover, onValueChange]);
   const onInputKeyDown = useCallback(e => {
-    const targetElement = e.target;
-
-    if (['ArrowDown', 'ArrowUp', 'Enter'].includes(e.key) || e.keyCode >= 48 && e.keyCode <= 90) {
+    if ((e.keyCode >= 48 && e.keyCode <= 90 || e.key === 'Backspace') && !showPopover) {
       setShowPopover(true);
-    } // =============================================================================
+    } else if (e.key === 'Tab') setShowPopover(false); // =============================================================================
     // ENTER AND SPACE KEY SELECT OPTIONS AND OPEN CLOSE THE POPOVER
     // =============================================================================
 
 
-    if (e.keyCode === 32 && targetElement.value === '' || e.key === 'Enter') {
-      if (showPopover) {
-        e.preventDefault();
-        selectOption(e);
-      }
+    if (e.key === 'Enter' && showPopover) {
+      e.preventDefault();
+      onSelect(currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, e);
+      setShowPopover(false);
     } // =============================================================================
     // ARROWS UP AND DOWN
     // =============================================================================
@@ -52,8 +45,6 @@ const useKeyboardNavigation = () => {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
       }
     }
 
@@ -64,13 +55,6 @@ const useKeyboardNavigation = () => {
         const nextItemIndex = findInCircularList(options, currentItemIndex, isOptionFocuseable, -1);
         setCurrentOption(options[nextItemIndex].dsId);
         scrollOptionIntoView(options[nextItemIndex].dsId);
-      } else {
-        setShowPopover(true);
-        setTimeout(() => {
-          const nextItemIndex = findInCircularList(options, 0, isOptionFocuseable, -1);
-          setCurrentOption(options[nextItemIndex].dsId);
-          scrollOptionIntoView(options[nextItemIndex].dsId);
-        });
       }
     } // =============================================================================
     // ESCAPE
@@ -80,7 +64,7 @@ const useKeyboardNavigation = () => {
     if (e.key === 'Escape') {
       setShowPopover(false);
     }
-  }, [scrollOptionIntoView, currentItemIndex, options, showPopover, setCurrentOption, setShowPopover, selectOption]);
+  }, [currentItem === null || currentItem === void 0 ? void 0 : currentItem.label, currentItemIndex, onSelect, options, scrollOptionIntoView, setCurrentOption, setShowPopover, showPopover]);
   return {
     onInputKeyDown
   };

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

@@ -1,83 +1,50 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useMemo, useCallback } from 'react';
-import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
-import { Grid } from '@elliemae/ds-grid';
+import { useContext, useCallback } from 'react';
 import { StyledListWrapper, StyledVirtualListWrapper, StyledList } from './styled.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { useOnElementResize } from '../../utils/hooks/useOnElementResize.js';
 import { useItemRenderer } from './useItemRenderer.js';
-import { useMenuList } from './useMenuList.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const MenuList = () => {
-  var _inputRef$current2;
-
   const {
     props: {
-      menuMinWidth,
-      menuMaxHeight,
-      options,
-      isLoading
+      options
     },
     referenceElement,
     inputRef,
     listRef,
     showPopover,
-    wrapperListRef,
-    controlsWrapperRef,
     virtualListHelpers: {
       totalSize
     }
   } = useContext(AutocompleteContext);
   const ItemRenderer = useItemRenderer();
-  useMenuList();
-  const {
-    width
-  } = useOnElementResize(controlsWrapperRef);
-  const listWidth = useMemo(() => menuMinWidth || "".concat(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [menuMinWidth, referenceElement, width]);
   const handleOnFocus = useCallback(() => {
     var _inputRef$current;
 
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }, [inputRef]);
-  return /*#__PURE__*/jsx(StyledListWrapper, {
+  return /*#__PURE__*/_jsx(StyledListWrapper, {
     tabIndex: -1,
-    ref: wrapperListRef,
     onMouseDown: e => e.preventDefault(),
-    minWidth: listWidth,
-    id: "combo-listbox",
-    role: "listbox",
-    children: isLoading && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.value) !== '' ? /*#__PURE__*/_jsx(Grid, {
-      justifyContent: "center",
-      alignItems: "center",
+    minWidth: referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth,
+    id: "autocomplete-listbox",
+    role: "listbox"
+  }, void 0, options.length > 0 && /*#__PURE__*/jsx(StyledVirtualListWrapper, {
+    tabIndex: -1,
+    ref: listRef,
+    children: /*#__PURE__*/_jsx(StyledList, {
+      tabIndex: -1,
+      "aria-expanded": showPopover,
+      onFocus: handleOnFocus,
+      "data-testid": AutocompleteDataTestid.LIST,
       style: {
-        padding: 20
+        height: totalSize,
+        margin: '8px 0px'
       }
-    }, void 0, /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
-      size: "l",
-      loading: isLoading,
-      waiting: false,
-      showTooltip: false
-    })) : /*#__PURE__*/jsx(Fragment, {
-      children: options.length > 0 && /*#__PURE__*/jsx(StyledVirtualListWrapper, {
-        tabIndex: -1,
-        maxHeight: menuMaxHeight,
-        ref: listRef,
-        children: /*#__PURE__*/_jsx(StyledList, {
-          tabIndex: -1,
-          "aria-expanded": showPopover,
-          onFocus: handleOnFocus,
-          "data-testid": AutocompleteDataTestid.LIST,
-          style: {
-            height: totalSize,
-            margin: '8px 0px'
-          }
-        }, void 0, ItemRenderer)
-      })
-    })
-  });
+    }, void 0, ItemRenderer)
+  }));
 };
 
 export { MenuList };

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

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

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

@@ -7,75 +7,69 @@ 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 { useContext, useCallback, useMemo } from 'react';
-import { SingleMenuItem } from '@elliemae/ds-form';
+import { Section, SingleMenuItem } from '@elliemae/ds-form';
 import { AutocompleteContext } from '../../AutocompleteCTX.js';
-import { isSelected } from '../../utils/listHelper.js';
 import { AutocompleteDataTestid } from '../../AutocompleteDataTestids.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 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 useItemRenderer = () => {
   const {
     props: {
       options,
-      onChange,
-      selectedValues,
-      onFilter
+      onSelect
     },
     inputRef,
     setShowPopover,
     focusOptionIdx,
     virtualListHelpers
   } = useContext(AutocompleteContext);
-  const {
-    virtualItems
-  } = virtualListHelpers;
   const handleClick = useCallback((option, e) => {
-    var _inputRef$current;
-
-    if (inputRef.current) inputRef.current.value = option.label;
-    onFilter(option.label);
-    onChange(option.label);
+    onSelect(option.label, e);
     setShowPopover(false);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, onChange, setShowPopover, inputRef]);
-  const handleOnMouseDown = useCallback(e => {
-    e.preventDefault();
-  }, []);
-  const ItemRenderer = useMemo(() => virtualItems.map(vItem => {
-    const option = options[vItem.index];
-    const generalProps = {
-      wrapperStyles: {
-        position: 'absolute',
-        top: vItem.start,
-        left: 0,
-        width: '100%'
-      },
-      key: "".concat(option.dsId),
-      innerRef: vItem.measureRef
-    };
+  }, [onSelect, setShowPopover]);
+  return useMemo(() => {
+    if (virtualListHelpers) {
+      return virtualListHelpers.virtualItems.map(vItem => {
+        const option = options[vItem.index];
+        const generalProps = {
+          wrapperStyles: {
+            position: 'absolute',
+            top: vItem.start,
+            left: 0,
+            width: '100%'
+          },
+          key: "".concat(option.dsId),
+          innerRef: vItem.measureRef
+        };
+
+        if (option.type === 'section') {
+          return /*#__PURE__*/jsx(Section, _objectSpread({
+            label: option.label
+          }, generalProps));
+        }
+
+        if (option.type === 'option') {
+          return /*#__PURE__*/jsx(SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
+            value: option.value,
+            label: option.label,
+            dataTestid: AutocompleteDataTestid.OPTION,
+            disabled: option.disabled,
+            onClick: e => handleClick(option, e),
+            isActive: option.dsId === focusOptionIdx
+          }));
+        }
 
-    if (option.type === 'option') {
-      return /*#__PURE__*/jsx(SingleMenuItem, _objectSpread(_objectSpread({}, generalProps), {}, {
-        value: option.value,
-        label: option.label,
-        dataTestid: AutocompleteDataTestid.OPTION,
-        disabled: option.disabled,
-        onClick: e => handleClick(option, e),
-        onMouseDown: handleOnMouseDown,
-        isActive: option.dsId === focusOptionIdx,
-        isSelected: isSelected(selectedValues, option)
-      }));
+        return /*#__PURE__*/jsx(Fragment, {});
+      });
     }
 
-    return /*#__PURE__*/jsx(Fragment, {});
-  }), [options, focusOptionIdx, selectedValues, inputRef, virtualItems]);
-  return ItemRenderer;
+    return null;
+  }, [options, focusOptionIdx, inputRef, virtualListHelpers]);
 };
 
 export { useItemRenderer };

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

@@ -1,14 +1,11 @@
 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('')
+  options: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired.description('List of options').defaultValue([]),
+  filter: PropTypes.string.isRequired.description('String value to filter the options').defaultValue(''),
+  onSelect: PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue(''),
+  children: PropTypes.node.isRequired.description('React component to apply autocomplete functionality').defaultValue('')
 };
 
-export { noop, propTypes };
+export { propTypes };

package/esm/autocomplete/utils/listHelper.js

@@ -1,26 +1,11 @@
 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.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 isSelectedValueEmpty = value => Array.isArray(value) ? value.length === 0 : !value;
 const isSelectedValueMultiple = value => Array.isArray(value);
-const isSelected = (value, activeOption) => {
-  if (isSelectedValueMultiple(value)) {
-    const multiValue = value;
-    return multiValue.some(item => (item === null || item === void 0 ? void 0 : item.value) === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.value));
-  }
-
-  if (typeof value === 'string') {
-    return false;
-  }
-
-  const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
-};
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
 
@@ -30,5 +15,12 @@ const findInCircularList = function (list, from, criteria) {
 
   return from; // return same item
 };
+const getFirstOption = options => {
+  for (let i = 0; i < options.length; i += 1) if (!['section', 'separator'].includes(options[i].type)) {
+    return options[i].dsId;
+  }
+
+  return '';
+};
 
-export { findInCircularList, getOptions, getSelectableOptions, isSelected, isSelectedValueEmpty, isSelectedValueMultiple };
+export { findInCircularList, getFirstOption, getOptions, getSelectableOptions, isSelectedValueEmpty, isSelectedValueMultiple };

package/esm/checkbox/ControlledCheckbox.js

@@ -30,6 +30,7 @@ const DSControlledCheckbox = props => {
     label,
     hasError,
     innerRef,
+    wrapLabel,
     tabIndex,
     ariaLabel: legacyAriaLabel,
     ariaControls: legacyAriaControls,
@@ -82,7 +83,7 @@ const DSControlledCheckbox = props => {
     readOnly: readOnly,
     checked: checked,
     "data-testid": "ds-checkbox-label"
-  }, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+  }, void 0, wrapLabel ? label : /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
     value: label
   })));
 };

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

@@ -10,12 +10,14 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 defaultProps = {
+  wrapLabel: false,
   hasError: false,
   tabIndex: undefined,
   checked: false
 };
 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.'),
+  wrapLabel: PropTypes.bool.description('Whether to wrap or truncate label'),
   hasError: PropTypes.bool.description('Whether the checkbox has error or not.'),
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Checkbox input ref.')
 });

package/esm/combobox/ComboBox.js

@@ -18,4 +18,4 @@ const DSComboBox = props => {
 const DSComboBoxWithSchema = describe(DSComboBox);
 DSComboBoxWithSchema.propTypes = ComboboxPropTypes;
 
-export { DSComboBox, DSComboBoxWithSchema };
+export { DSComboBox, DSComboBox as DSComboBoxV3, DSComboBoxWithSchema };