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

package/esm/combobox/parts/controls-input/useMaskedOnChange.js

@@ -9,31 +9,31 @@ const useMaskedOnChange = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     setInputValue,
     setShowSelectedOptions
   } = useContext(ComboBoxContext); // default onchange when no mask provided
 
   const handleOnChange = useCallback(e => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
 
     if (onFilter) {
       onFilter(filterOptions(e.currentTarget.value, allOptions), e.currentTarget.value);
       setInputValue(e.currentTarget.value);
     }
-  }, [allOptions, onFilter, setInputValue, setShowPopover, setShowSelectedOptions]); // onchange used when mask is provided
+  }, [allOptions, onFilter, setInputValue, setMenuState, setShowSelectedOptions]); // onchange used when mask is provided
 
-  const handleOnChangeMask = useCallback((_, mask) => {
+  const handleOnChangeMask = useCallback((e, mask) => {
     setShowSelectedOptions(false);
-    setShowPopover(true);
+    setMenuState(true, 'filter', e);
     if (mask && onFilter) onFilter(filterOptions(mask, allOptions), mask);else if (!mask && onFilter) onFilter(allOptions, '');
-  }, [allOptions, onFilter, setShowPopover, setShowSelectedOptions]);
+  }, [allOptions, onFilter, setMenuState, setShowSelectedOptions]);
   const onChangeMask = useMask({
     valueSetter: setInputValue,
     onChange: handleOnChangeMask
   });
-  return (onChangeMask === null || onChangeMask === void 0 ? void 0 : onChangeMask.onChange) || handleOnChange;
+  return onChangeMask?.onChange || handleOnChange;
 };
 
 export { useMaskedOnChange };

package/esm/combobox/parts/dropdown-indicator/DropdownIndicator.js

@@ -12,14 +12,14 @@ const DropdownIndicator = () => {
     props: {
       disabled
     },
-    showPopover
+    menuState
   } = useContext(ComboBoxContext);
   return /*#__PURE__*/_jsx(StyledDropDownButton, {
     "data-testid": ComboboxDataTestid.DROPDOWN,
     "aria-controls": "combo-listbox",
     "aria-labelledby": "combo-label",
     disabled: disabled,
-    "aria-expanded": showPopover,
+    "aria-expanded": menuState,
     "aria-haspopup": "listbox",
     "aria-hidden": true,
     buttonType: "icon",

package/esm/combobox/parts/header-list/HeaderList.js

@@ -51,7 +51,7 @@ const HeaderList = () => {
     size: BUTTON_SIZES.S,
     "data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
     innerRef: toggleSelectionButtonRef
-  }, void 0, !showSelectedOptions ? "SHOW SELECTED [".concat(multiSelectedValues.length, "]") : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
+  }, void 0, !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL') : _StyledNoOptionsSelec || (_StyledNoOptionsSelec = /*#__PURE__*/_jsx(StyledNoOptionsSelected, {}, void 0, "0 SELECTED"))));
 };
 
 export { HeaderList };

package/esm/combobox/parts/header-list/styled.js

@@ -1,12 +1,45 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 import { DSButtonV2 } from '@elliemae/ds-button';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledHeaderListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: fixed;\n  top: 0;\n  z-index: 10;\n  justify-content: space-between;\n  padding: 0px 12px 0px 16px;\n  width: 100%;\n  height: 28px;\n  background-color: #fff;\n  box-shadow: 0 4px 2px -4px ", ";\n  overflow-x: hidden;\n\n  & button {\n    font-size: 13px;\n  }\n"])), props => props.theme.colors.neutral[700]);
-const StyledButtonSelection = styled(DSButtonV2)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: 0px;\n  padding: 0 ", ";\n  margin: 0;\n  align-items: center;\n  transition: unset;\n  &:hover:not([disabled]) {\n    background-color: transparent;\n    color: ", ";\n  }\n"])), props => props.theme.space.xxs, props => props.theme.colors.brand['700']);
-const StyledSelectedItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-const StyledNoOptionsSelected = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n"])), props => props.theme.space.xxs);
-const StyledSelectAllCheckbox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+/* eslint-disable max-len */
+const StyledHeaderListWrapper = styled.div`
+  display: flex;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  justify-content: space-between;
+  padding: 0px 12px 0px 16px;
+  width: 100%;
+  height: 28px;
+  background-color: #fff;
+  box-shadow: 0 4px 2px -4px ${props => props.theme.colors.neutral[700]};
+  overflow-x: hidden;
+
+  & button {
+    font-size: 13px;
+  }
+`;
+const StyledButtonSelection = styled(DSButtonV2)`
+  border-radius: 0px;
+  padding: 0 ${props => props.theme.space.xxs};
+  margin: 0;
+  align-items: center;
+  transition: unset;
+  &:hover:not([disabled]) {
+    background-color: transparent;
+    color: ${props => props.theme.colors.brand['700']};
+  }
+`;
+const StyledSelectedItems = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const StyledNoOptionsSelected = styled.div`
+  padding: 0 ${props => props.theme.space.xxs};
+`;
+const StyledSelectAllCheckbox = styled.div`
+  display: flex;
+  align-items: center;
+`;
 
 export { StyledButtonSelection, StyledHeaderListWrapper, StyledNoOptionsSelected, StyledSelectAllCheckbox, StyledSelectedItems };

package/esm/combobox/parts/header-list/useHeaderListHandlers.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
@@ -16,7 +15,7 @@ const useHeaderListHandlers = () => {
     },
     showSelectedOptions,
     setShowSelectedOptions,
-    setShowPopover
+    setMenuState
   } = useContext(ComboBoxContext);
   const multiSelectedValues = selectedValues;
   const selectableOptions = getSelectableOptions(filteredOptions);
@@ -25,7 +24,7 @@ const useHeaderListHandlers = () => {
       return true;
     }
 
-    if ((multiSelectedValues === null || multiSelectedValues === void 0 ? void 0 : multiSelectedValues.length) === 0) {
+    if (multiSelectedValues?.length === 0) {
       return false;
     }
 
@@ -55,27 +54,21 @@ const useHeaderListHandlers = () => {
 
   const handleKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
-      var _innerRef$current;
-
-      setShowPopover(false);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      setMenuState(false, 'close', e);
+      innerRef.current?.focus();
     }
-  }, [setShowPopover, innerRef]); // when hitting tab on selected values button filter we target the input again
+  }, [setMenuState, innerRef]); // when hitting tab on selected values button filter we target the input again
 
   const handleFilterSelectionBtnOnTab = useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey) {
-      var _innerRef$current2;
-
       e.preventDefault();
-      (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.focus();
+      innerRef.current?.focus();
     }
   }, [innerRef]);
   const handleCheckAllOnTab = useCallback(e => {
     if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {
-      var _innerRef$current3;
-
       e.preventDefault();
-      (_innerRef$current3 = innerRef.current) === null || _innerRef$current3 === void 0 ? void 0 : _innerRef$current3.focus();
+      innerRef.current?.focus();
     }
   }, [innerRef, multiSelectedValues]);
   useEffect(() => {

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

@@ -8,11 +8,14 @@ import { HeaderList } from '../header-list/HeaderList.js';
 import { useItemRenderer } from './useItemRenderer.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _HeaderList, _StyledNoResultsWrapp;
+var _HeaderList;
 const MenuList = () => {
+  var _StyledNoResultsWrapp;
+
   const {
     props: {
       menuMinWidth,
+      noOptionsMessage,
       menuMaxHeight,
       onCreate,
       inline,
@@ -53,15 +56,14 @@ const MenuList = () => {
         role: "listbox",
         "data-testid": ComboboxDataTestid.LIST,
         style: {
-          height: virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize,
+          height: virtualListHelpers?.totalSize,
           margin: inline ? '0px' : '8px 0px'
         }
       }, void 0, ItemRenderer)
     }) : _StyledNoResultsWrapp || (_StyledNoResultsWrapp = /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
-      role: "alert",
-      "aria-live": "polite"
-    }, void 0, "No matches found"))]
-  }, width), [wrapperListRef, inline, preventLoseInputFocus, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers === null || virtualListHelpers === void 0 ? void 0 : virtualListHelpers.totalSize, ItemRenderer, width]);
+      role: "alert"
+    }, void 0, noOptionsMessage))]
+  }, width), [wrapperListRef, inline, preventLoseInputFocus, width, menuMinWidth, withHeader, filteredOptions.length, onCreate, menuMaxHeight, listRef, virtualListHelpers?.totalSize, ItemRenderer, noOptionsMessage]);
 };
 
 export { MenuList };

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

@@ -1,37 +1,58 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const StyledListWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: ", ";\n  width: ", ";\n  background-color: #ffffff;\n  max-height: ", ";\n  z-index: 100;\n"])), _ref => {
+const StyledListWrapper = styled.div`
+  min-width: ${_ref => {
   let {
     inline,
     minWidth
   } = _ref;
-  return inline ? '100%' : "".concat(minWidth, "px");
-}, _ref2 => {
+  return inline ? '100%' : `${minWidth}px`;
+}};
+  width: ${_ref2 => {
   let {
     width
   } = _ref2;
-  return "".concat(width, "px");
-}, _ref3 => {
+  return `${width}px`;
+}};
+  background-color: #ffffff;
+  max-height: ${_ref3 => {
   let {
     maxHeight
   } = _ref3;
-  return "".concat(maxHeight, "px");
-});
-const StyledList = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  padding: 0;\n  background-color: #ffffff;\n"])));
-const StyledVirtualListWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  margin-top: ", ";\n  max-height: ", ";\n"])), _ref4 => {
+  return `${maxHeight}px`;
+}};
+  z-index: 100;
+`;
+const StyledList = styled.ul`
+  position: relative;
+  padding: 0;
+  background-color: #ffffff;
+  overflow-x: hidden;
+`;
+const StyledVirtualListWrapper = styled.div`
+  overflow-y: auto;
+  margin-top: ${_ref4 => {
   let {
     withHeader
   } = _ref4;
   return withHeader ? '28px' : '';
-}, _ref5 => {
+}};
+  max-height: ${_ref5 => {
   let {
     maxHeight
   } = _ref5;
-  return maxHeight ? "".concat(maxHeight, "px") : '300px';
-});
-const StyledCreatableLabel = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-weight: bold;\n  font-style: italic;\n"])));
-const StyledNoResultsWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 16px;\n"])));
+  return maxHeight ? `${maxHeight}px` : '300px';
+}};
+`;
+const StyledCreatableLabel = styled.span`
+  font-weight: bold;
+  font-style: italic;
+`;
+const StyledCreatableValue = styled.span`
+  word-break: break-all;
+`;
+const StyledNoResultsWrapper = styled.div`
+  padding: 16px;
+`;
 
-export { StyledCreatableLabel, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };
+export { StyledCreatableLabel, StyledCreatableValue, StyledList, StyledListWrapper, StyledNoResultsWrapper, StyledVirtualListWrapper };

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

@@ -11,10 +11,10 @@ import { useContext, useCallback, useMemo } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { Section, Separator, SingleMenuItem, MultiMenuItem } from '@elliemae/ds-form';
 import { ComboBoxContext } from '../../ComboBoxCTX.js';
-import { StyledCreatableLabel } from './styled.js';
+import { StyledCreatableLabel, StyledCreatableValue } from './styled.js';
 import { getSuggestedValueOnChange, isSelected } from '../../utils/listHelper.js';
 import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
-import { INTERNAL_MENU_OPTION_TYPES, MENU_OPTION_TYPES } from '../../constants.js';
+import { MENU_OPTION_TYPES, INTERNAL_MENU_OPTION_TYPES } from '../../constants.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 var _StyledCreatableLabel;
@@ -32,7 +32,7 @@ const useItemRenderer = () => {
       onFilter,
       allOptions
     },
-    setShowPopover,
+    setMenuState,
     inputValue,
     focusOptionIdx,
     setInputValue,
@@ -40,20 +40,21 @@ const useItemRenderer = () => {
   } = useContext(ComboBoxContext);
   const multiple = Array.isArray(selectedValues);
   const CBItem = multiple ? MultiMenuItem : SingleMenuItem;
+  const handleOnCreateClick = useCallback(() => {
+    if (inputValue && onCreate) {
+      onCreate(inputValue);
+      setInputValue('');
+      if (onFilter) onFilter(allOptions, inputValue);
+    }
+  }, [onFilter, onCreate, inputValue, allOptions, setInputValue]);
   const handleClick = useCallback((option, e) => {
-    if (option.type === INTERNAL_MENU_OPTION_TYPES.CREATABLE && onCreate && onFilter) {
-      if (inputValue) {
-        onCreate(inputValue);
-        setInputValue('');
-        onFilter(allOptions, inputValue);
-      }
-    } else if (option.type === MENU_OPTION_TYPES.OPTION) {
+    if (option.type === MENU_OPTION_TYPES.OPTION) {
       if (!option.disabled) {
         if (onFilter) onFilter(allOptions, inputValue);
         setInputValue('');
 
         if (!multiple) {
-          setShowPopover(false);
+          setMenuState(false, 'selectOption', e);
         }
 
         onChange(getSuggestedValueOnChange(option, selectedValues), option, e);
@@ -63,7 +64,7 @@ const useItemRenderer = () => {
 
     e.stopPropagation();
     e.preventDefault();
-  }, [onFilter, selectedValues, onChange, setShowPopover, multiple]); // prevent blur from controls input
+  }, [onFilter, selectedValues, allOptions, onChange, setMenuState, multiple]); // prevent blur from controls input
 
   const handleOnMouseDown = useCallback(e => {
     e.preventDefault();
@@ -81,9 +82,9 @@ const useItemRenderer = () => {
           top: 0,
           left: 0,
           width: '100%',
-          transform: "translateY(".concat(vItem.start, "px)")
+          transform: `translateY(${vItem.start}px)`
         },
-        key: "".concat(option.dsId),
+        key: `${option.dsId}`,
         innerRef: vItem.measureRef
       };
 
@@ -106,8 +107,8 @@ const useItemRenderer = () => {
           onClick: e => handleClick(option, e),
           onMouseDown: handleOnMouseDown,
           isActive: option.dsId === focusOptionIdx,
-          isSelected: isSelected(selectedValues, option) //tabIndex={-1}
-
+          isSelected: isSelected(selectedValues, option),
+          tabIndex: -1
         }));
       }
 
@@ -121,14 +122,14 @@ const useItemRenderer = () => {
               label
             } = _ref;
             return /*#__PURE__*/_jsx(Grid, {
+              p: "8px",
               cols: ['min-content', 'auto'],
-              height: "16px",
               gutter: "xxs",
               alignItems: "center"
-            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx("span", {}, void 0, "\"".concat(label, "\"")));
+            }, void 0, _StyledCreatableLabel || (_StyledCreatableLabel = /*#__PURE__*/_jsx(StyledCreatableLabel, {}, void 0, "Add:")), /*#__PURE__*/_jsx(StyledCreatableValue, {}, void 0, `"${label}"`));
           },
           label: option.label,
-          onClick: e => handleClick(option, e)
+          onClick: handleOnCreateClick
         }));
       }
 

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

@@ -31,7 +31,7 @@ const MultiSelectedValuesContainer = () => {
   }, pill.dsId)), multiSelectedValue.length > 0 && correctPillsToShow !== multiSelectedValue.length && /*#__PURE__*/_jsx(DSPillV2, {
     size: "s",
     labelTruncated: false,
-    label: "+".concat(multiSelectedValue.length - correctPillsToShow),
+    label: `+${multiSelectedValue.length - correctPillsToShow}`,
     type: "value",
     disabled: disabled
   }, "grouped"))), [pillGroupRef, multiSelectedValue, correctPillsToShow, disabled]);

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

@@ -23,12 +23,10 @@ const RemovableSelectedValuePill = props => {
     type: disabled ? 'value' : 'removable',
     tabIndex: -1,
     onRemove: e => {
-      var _innerRef$current;
-
       // preventing the menu to be opened
       e.stopPropagation();
       onChange(getSuggestedValueOnChange(pill, selectedValues), pill, e);
-      (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.focus();
+      innerRef.current?.focus();
     }
   }, pill.value);
 };

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

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
@@ -49,7 +48,7 @@ const useGroupPills = () => {
       let currentWidth = 0;
       const referenceWidth = selectedOptionsRef.current.offsetWidth;
       const pills = [...pillGroupRef.current.querySelectorAll(disabled ? '.ds-pill-wrapper-value' : '.ds-pill-wrapper-removable')];
-      const pillsWidth = pills.map(pill => pill === null || pill === void 0 ? void 0 : pill.offsetWidth);
+      const pillsWidth = pills.map(pill => pill?.offsetWidth);
       pillsWidth.forEach((pillWidth, idx) => {
         currentWidth += pillWidth;
 

package/esm/combobox/parts/styled.js

@@ -1,7 +1,10 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
 import { styled } from '@elliemae/ds-system';
 
-var _templateObject;
-const StyledA11ySelectedValues = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 1px;\n  height: 1px;\n  position: absolute;\n  clip: rect(1px, 1px, 1px, 1px);\n"])));
+const StyledA11ySelectedValues = styled.span`
+  width: 1px;
+  height: 1px;
+  position: absolute;
+  clip: rect(1px, 1px, 1px, 1px);
+`;
 
 export { StyledA11ySelectedValues };

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

@@ -18,12 +18,13 @@ const ComboboxPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTy
   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'),
+  noOptionsMessage: PropTypes.string.description('Custome message to be display when no matches found after filtering').defaultValue('No Matches Found'),
+  closeMenuOnScroll: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).description('If true, close the select menu when the user scrolls the document/body.').defaultValue(false),
   onChange: PropTypes.func.isRequired.description('function triggered when an option is selected it will send the options selected').defaultValue('() => {}'),
   onFilter: PropTypes.func.description('function triggered when user type in the combobox input').defaultValue(''),
   onCreate: PropTypes.func.description('function triggered when user select "create" a new item whenever is not a match in the all option list').defaultValue(''),
   onCancel: PropTypes.func.description('function triggered when user press ESC key').defaultValue('() => {}'),
-  onMenuOpen: PropTypes.func.description('function triggered when user open the menu list').defaultValue('() => {}'),
-  onMenuClose: PropTypes.func.description('function triggered when user close the menu list').defaultValue('() => {}'),
+  onMenuChange: PropTypes.func.description('function triggered when user open or close the menu list').defaultValue('() => {}'),
   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),

package/esm/combobox/sharedTypes.js

@@ -1,6 +1,6 @@
 import { MENU_OPTION_TYPES } from './constants.js';
 
-const isSeparator = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.SEPARATOR;
-const isOption = el => (el === null || el === void 0 ? void 0 : el.type) === MENU_OPTION_TYPES.OPTION;
+const isSeparator = el => el?.type === MENU_OPTION_TYPES.SEPARATOR;
+const isOption = el => el?.type === MENU_OPTION_TYPES.OPTION;
 
 export { isOption, isSeparator };

package/esm/combobox/utils/listHelper.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import { MENU_OPTION_TYPES } from '../constants.js';
@@ -17,11 +16,11 @@ 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));
+    return multiValue.some(item => item?.value === activeOption?.value);
   }
 
   const singleValue = value;
-  return (singleValue === null || singleValue === void 0 ? void 0 : singleValue.value) === activeOption.value;
+  return singleValue?.value === activeOption.value;
 };
 const findInCircularList = function (list, from, criteria) {
   let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
@@ -71,8 +70,6 @@ const getSuggestedValueOnChange = (selectedOption, selectedValues) => {
 };
 const filterOptions = (inputValue, options) => options.filter(option => option.type === MENU_OPTION_TYPES.OPTION && option.label.toLowerCase().includes(inputValue.toLowerCase()));
 const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
-  var _items2;
-
   const items = [];
   if (optionsToParse) optionsToParse.forEach(option => {
     // const isSelectedValue = multiSelectedValue.find((item) => item?.dsId === option.dsId);
@@ -81,9 +78,7 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
 
     if (option.type === MENU_OPTION_TYPES.SECTION) {
-      var _items;
-
-      if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === MENU_OPTION_TYPES.SECTION) {
+      if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
         items[items.length - 1] = option;
       } else {
         items.push(option);
@@ -91,12 +86,21 @@ const selectedValuesWithSections = (optionsToParse, multiSelectedValue) => {
     }
   });
 
-  if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === MENU_OPTION_TYPES.SECTION) {
+  if (items[items.length - 1]?.type === MENU_OPTION_TYPES.SECTION) {
     items.pop();
   }
 
   return items;
 };
 const getFilteredOptionsSelected = (filteredOption, selectedValues) => filteredOption.filter(option => option.type === MENU_OPTION_TYPES.OPTION && isSelected(selectedValues, option));
+const scrollIfNeeded = function (elem) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    behavior: 'smooth',
+    block: 'end',
+    inline: 'nearest'
+  };
+  const bounding = elem.getBoundingClientRect();
+  if (!(bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth))) elem.scrollIntoView(options);
+};
 
-export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, selectedValuesWithSections };
+export { filterOptions, findInCircularList, getFilteredOptionsSelected, getFirstOption, getLastValueSelected, getOptions, getSelectableOptions, getSuggestedValueOnChange, isSelected, isSelectedValueEmpty, isSelectedValueMultiple, scrollIfNeeded, selectedValuesWithSections };

package/esm/date-range-picker/config/useRangePickerLogic.js

@@ -4,12 +4,10 @@ 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, useEffect, useCallback, useMemo } from 'react';
 import '../../date-time-picker/ControlledDateTimePicker.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/es.string.replace.js';
 import { getDayFromDateString } from '../../date-time-picker/utils/dateHelpers.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; }
@@ -46,7 +44,7 @@ const useRangePickerLogic = _ref => {
     const dateToString = calendarChangeIsFrom ? toDate : changedDay;
     const dateTo = getDayFromDateString(dateToString); // we force the "from" to ALWAYS be before the "to" date
 
-    const isToBeforeFrom = (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    const isToBeforeFrom = dateTo?.getTime() < dateFrom?.getTime();
     const newDateFromString = isToBeforeFrom ? dateToString : dateFromString;
     const forcingFromDatePick = isToBeforeFrom ? !calendarChangeIsFrom : false;
     const newDateToString = isToBeforeFrom ? dateFromString : dateToString;
@@ -121,19 +119,17 @@ const useRangePickerLogic = _ref => {
   }, [getChangedDayStringValues, onFromDateChange, onToDateChange]);
   const getIsStartRangeDay = useCallback(dayString => dayString === fromDate, [fromDate]);
   const getIsDayInRange = useCallback(dayString => {
-    var _getDayFromDateString;
-
     const dayFrom = getDayFromDateString(fromDate);
     const dayTo = getDayFromDateString(toDate);
     if (!dayFrom || !dayTo || !dayString) return false;
-    const newDayTime = (_getDayFromDateString = getDayFromDateString(dayString)) === null || _getDayFromDateString === void 0 ? void 0 : _getDayFromDateString.getTime();
+    const newDayTime = getDayFromDateString(dayString)?.getTime();
     return newDayTime <= dayTo.getTime() && newDayTime >= dayFrom.getTime();
   }, [fromDate, toDate]);
   const getIsEndRangeDay = useCallback(dayString => dayString === toDate, [toDate]);
   const getIsToBeforeFrom = useCallback((fromString, toString) => {
     const dateFrom = getDayFromDateString(fromString);
     const dateTo = getDayFromDateString(toString);
-    return (dateTo === null || dateTo === void 0 ? void 0 : dateTo.getTime()) < (dateFrom === null || dateFrom === void 0 ? void 0 : dateFrom.getTime());
+    return dateTo?.getTime() < dateFrom?.getTime();
   }, []);
   const handleFromDateChange = useCallback((newVal, metaInfo) => {
     const isIncorrectOrder = getIsToBeforeFrom(newVal, toDate);

package/esm/date-range-picker/parts/ControlledDateRangeCalendar.js

@@ -4,8 +4,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/date-range-picker/parts/ControlledDateRangeFromDate.js

@@ -5,8 +5,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/date-range-picker/parts/ControlledDateRangeToDate.js

@@ -5,8 +5,6 @@ import { DSControlledDateTimePicker } from '../../date-time-picker/ControlledDat
 import { CONTROLLED_DATE_TIME_PICKER_TYPES } from '../../date-time-picker/ControlledDateTimePickerTypes.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/es.string.replace.js';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';