@elliemae/ds-form 2.4.2-rc.9 → 2.4.2

package/esm/Checkbox/DSCheckbox.js

@@ -62,7 +62,7 @@ function Checkbox(_ref) {
     "data-testid": rest['data-testid'] || 'ds-checkbox',
     "aria-checked": checked,
     "aria-disabled": disabled,
-    className: "".concat(className, " ").concat(variant || '', " ").concat(disabled ? 'disabled' : ''),
+    className: `${className} ${variant || ''} ${disabled ? 'disabled' : ''}`,
     "data-kind": "checkmark",
     onKeyDown: e => {
       e.target = checkRef.current;
@@ -80,7 +80,7 @@ function Checkbox(_ref) {
     tabIndex: tabIndex,
     value: value,
     children: /*#__PURE__*/jsx("input", {
-      id: "".concat(instanceUID, "-").concat(labelText),
+      id: `${instanceUID}-${labelText}`,
       onClick: handleClick,
       ref: checkRef,
       checked: !!checked,
@@ -129,7 +129,7 @@ const DSCheckbox = _ref2 => {
 
   const checkbox = /*#__PURE__*/jsx(Checkbox, _objectSpread(_objectSpread({}, otherProps), {}, {
     checked: checked,
-    className: cx("".concat(classNameElement('input-button'), " checkbox-").concat(String(checked)), className),
+    className: cx(`${classNameElement('input-button')} checkbox-${String(checked)}`, className),
     disabled: disabled,
     innerRef: innerRef,
     name: name,
@@ -142,12 +142,12 @@ const DSCheckbox = _ref2 => {
 
   if (!labelText) return checkbox;
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: "".concat(cssClassName, " ").concat(variant)
+    className: `${cssClassName} ${variant}`
   }, containerProps), {}, {
     children: [/*#__PURE__*/_jsx("label", {
       "data-testid": "ds-checkbox-label",
       className: classNameElement('label'),
-      htmlFor: "".concat(instanceUID, "-").concat(labelText)
+      htmlFor: `${instanceUID}-${labelText}`
     }, void 0, checkbox, /*#__PURE__*/_jsx("span", {
       className: classNameElement('label-text')
     }, void 0, labelText)), children && /*#__PURE__*/_jsx("div", {

package/esm/CheckboxGroup/DSCheckboxGroup.js

@@ -22,7 +22,7 @@ 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 emClassPrefix = 'em-ds';
-const baseClass = "".concat(emClassPrefix, "-checkbox-group");
+const baseClass = `${emClassPrefix}-checkbox-group`;
 
 const CheckboxItem = props => /*#__PURE__*/_jsx(GroupItem, {
   render: context => /*#__PURE__*/jsx(DSCheckbox, _objectSpread(_objectSpread({}, props), {}, {
@@ -62,7 +62,7 @@ const DSCheckboxGroup = _ref => {
     multiple: true,
     onChange: onChange
   }, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: "".concat(baseClass, " ").concat(baseClass, "--").concat(orientation)
+    className: `${baseClass} ${baseClass}--${orientation}`
   }, labelProps && labelProps.labelText ? {} : containerProps), {}, {
     role: "group",
     children: React.Children.map(children, (child, index) => /*#__PURE__*/jsx(CheckboxItem, _objectSpread(_objectSpread({}, child.props), {}, {
@@ -75,7 +75,7 @@ const DSCheckboxGroup = _ref => {
 
   if (labelProps && labelProps.labelText) {
     return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-      className: "".concat(baseClass, "-form-item-layout-wrapper")
+      className: `${baseClass}-form-item-layout-wrapper`
     }, containerProps), {}, {
       role: "group",
       children: /*#__PURE__*/jsx(DSFormItemLayout, _objectSpread(_objectSpread({}, labelProps), {}, {

package/esm/ComboBox/v1/DSComboBox.js

@@ -7,7 +7,6 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 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/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
@@ -196,7 +195,7 @@ class DSComboBox extends React.Component {
 
     return /*#__PURE__*/_jsx(Manager, {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
       ref: measureRef,
-      className: cx("".concat(ThemeConstants.prefix, "-").concat(blockName, "-wrapper"), className, hasError && "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(COMBOBOX_VARIANT.ERROR), "".concat(ThemeConstants.prefix, "-").concat(blockName, "--").concat(variant), "focus-".concat(focus), isMulti && 'combo-multi', expandMenuOutsideContainer && 'expanded-outside-container')
+      className: cx(`${ThemeConstants.prefix}-${blockName}-wrapper`, className, hasError && `${ThemeConstants.prefix}-${blockName}--${COMBOBOX_VARIANT.ERROR}`, `${ThemeConstants.prefix}-${blockName}--${variant}`, `focus-${focus}`, isMulti && 'combo-multi', expandMenuOutsideContainer && 'expanded-outside-container')
     }, containerProps), {}, {
       onMouseEnter: () => {
         this.handleHoverRef(undefined);
@@ -206,11 +205,11 @@ class DSComboBox extends React.Component {
           this.select = ref;
         },
         autoFocus: autoFocus,
-        classNamePrefix: "".concat(ThemeConstants.prefix, "-").concat(blockName),
+        classNamePrefix: `${ThemeConstants.prefix}-${blockName}`,
         components: _objectSpread({
           Control,
           Menu: !options || options.length === 0 ? SelectMenu : props => /*#__PURE__*/_jsx("div", {
-            className: "select-menu-combo ".concat(isMulti && 'select-menu-combo-multi'),
+            className: `select-menu-combo ${isMulti && 'select-menu-combo-multi'}`,
             onMouseLeave: () => {
               this.isHover = undefined;
               this.handleHover(undefined);
@@ -300,7 +299,7 @@ class DSComboBox extends React.Component {
               const width = calculateWidth(options);
               if (!width) return null;
               return {
-                width: "".concat(width, "px")
+                width: `${width}px`
               };
             }
 

package/esm/ComboBox/v1/components/MenuList.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect } from 'react';
 import { components } from 'react-select';
 import { FixedSizeList } from 'react-window';
@@ -79,7 +78,7 @@ const MenuList = props => {
     }
   }, void 0, isMulti && /*#__PURE__*/jsx(MultiSelectHeader, _objectSpread({}, props)), /*#__PURE__*/jsx(FixedSizeList, {
     ref: listRef,
-    className: "combobox-menu-list ".concat(isMulti && 'combobox-menu-list-is-multi'),
+    className: `combobox-menu-list ${isMulti && 'combobox-menu-list-is-multi'}`,
     height: height,
     itemCount: options.length,
     itemData: itemData,

package/esm/ComboBox/v1/components/MultiSelectHeader.js

@@ -8,7 +8,7 @@ const MultiSelectHeader = props => {
   const count = props.children.filter(child => child.props.isSelected).length;
   return /*#__PURE__*/_jsx("div", {
     className: "combobox-multi-select-header"
-  }, void 0, "".concat(count, " selected"));
+  }, void 0, `${count} selected`);
 };
 
 export { MultiSelectHeader as default };

package/esm/ComboBox/v1/components/getoptions.js

@@ -1,5 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-
 const getOptions = _ref => {
   let {
     showAllOption,

package/esm/ComboBox/v1/withSelectStringValueConverter.js

@@ -1,7 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';

package/esm/ComboBox/v2/Combobox.js

@@ -3,7 +3,6 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 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/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
@@ -61,7 +60,7 @@ 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 blockName = 'em-ds-combobox';
-const container = "".concat(blockName, "-container");
+const container = `${blockName}-container`;
 
 const getValues = (options, isMulti, valueProperty) => {
   if (!options) return null;
@@ -143,10 +142,8 @@ const DSComboBox2HOCLess = _ref => {
   const optionsChanged = useShouldRecalculate(isEqual(prevOptions, options));
   const SelectComponent = useMemo(() => isFreeSolo ? Creatable : Select, [isFreeSolo]);
   useEffect(() => {
-    var _select$current;
-
     setInputInFocus(isFocused);
-    if (isFocused) (_select$current = select.current) === null || _select$current === void 0 ? void 0 : _select$current.focus();
+    if (isFocused) select.current?.focus();
   }, [isFocused]);
   useEffect(() => {
     if (selectedValue && !isFreeSolo && !Array.isArray(selectedValue)) {
@@ -177,9 +174,7 @@ const DSComboBox2HOCLess = _ref => {
     }
 
     if (e.key === 'Tab' && menuOpen) {
-      var _select$current2;
-
-      (_select$current2 = select.current) === null || _select$current2 === void 0 ? void 0 : _select$current2.blur(); // manually invoking blur to ensure losing focus on tab.
+      select.current?.blur(); // manually invoking blur to ensure losing focus on tab.
     }
 
     if (e.key === 'Escape') setMenuOpen(false);
@@ -272,7 +267,7 @@ const DSComboBox2HOCLess = _ref => {
     value: ctx
   }, void 0, /*#__PURE__*/_jsx(Manager, {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: measureRef,
-    className: cx("".concat(container), inputInFocus && 'in-focus', hasError && 'with-error', disabled && 'is-disabled', className),
+    className: cx(`${container}`, inputInFocus && 'in-focus', hasError && 'with-error', disabled && 'is-disabled', className),
     onBlur: handleBlur,
     "data-testid": "combobox",
     role: "combobox"
@@ -359,7 +354,7 @@ const DSComboBox2HOCLess = _ref => {
             const width = calculateWidth(options);
             if (!width) return null;
             return {
-              width: "".concat(width, "px")
+              width: `${width}px`
             };
           }
 

package/esm/ComboBox/v2/components/Content.js

@@ -17,8 +17,6 @@ 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 Content = _ref => {
-  var _rest$selectProps;
-
   let {
     scheduleUpdate,
     styleMenu
@@ -28,7 +26,7 @@ const Content = _ref => {
   useEffect(() => {
     // trigger popper update on input change PUI-4069
     scheduleUpdate();
-  }, [rest === null || rest === void 0 ? void 0 : (_rest$selectProps = rest.selectProps) === null || _rest$selectProps === void 0 ? void 0 : _rest$selectProps.inputValue]);
+  }, [rest?.selectProps?.inputValue]);
   return /*#__PURE__*/_jsx("div", {
     style: styleMenu,
     "data-testid": "combobox-menu"

package/esm/ComboBox/v2/components/CustomOption.js

@@ -19,8 +19,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const isOptionAGroup = option => option && option.type && option.type.name === 'Group';
 
 const CustomOption = _ref => {
-  var _option$props, _option$props2, _option$props2$innerP, _option$props3, _option$props3$innerP;
-
   let {
     index,
     data,
@@ -37,10 +35,10 @@ const CustomOption = _ref => {
   const {
     value
   } = useContext(DropDownContext);
-  const isSelected = (value === null || value === void 0 ? void 0 : value.label) === (option === null || option === void 0 ? void 0 : (_option$props = option.props) === null || _option$props === void 0 ? void 0 : _option$props.label); // react-select performance optimization
+  const isSelected = value?.label === option?.props?.label; // react-select performance optimization
 
-  option === null || option === void 0 ? true : (_option$props2 = option.props) === null || _option$props2 === void 0 ? true : (_option$props2$innerP = _option$props2.innerProps) === null || _option$props2$innerP === void 0 ? true : delete _option$props2$innerP.onMouseMove;
-  option === null || option === void 0 ? true : (_option$props3 = option.props) === null || _option$props3 === void 0 ? true : (_option$props3$innerP = _option$props3.innerProps) === null || _option$props3$innerP === void 0 ? true : delete _option$props3$innerP.onMouseOver;
+  delete option?.props?.innerProps?.onMouseMove;
+  delete option?.props?.innerProps?.onMouseOver;
   const renderOptionStyle = isOptionAGroup(option) ? {} : style;
 
   const optionProps = _objectSpread(_objectSpread({}, option.props.innerProps), {}, {
@@ -49,10 +47,8 @@ const CustomOption = _ref => {
     role: 'option',
     'aria-selected': isSelected,
     onClick: e => {
-      var _option$props4, _option$props4$innerP;
-
       e.stopPropagation();
-      if (option !== null && option !== void 0 && (_option$props4 = option.props) !== null && _option$props4 !== void 0 && (_option$props4$innerP = _option$props4.innerProps) !== null && _option$props4$innerP !== void 0 && _option$props4$innerP.onClick) option.props.innerProps.onClick(e);
+      if (option?.props?.innerProps?.onClick) option.props.innerProps.onClick(e);
     }
   });
 

package/esm/ComboBox/v2/components/CustomOptionMulti.js

@@ -1,12 +1,10 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-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 '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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { useContext } from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { DSCheckbox } from '../../../Checkbox/DSCheckbox.js';
@@ -33,11 +31,7 @@ const CustomOptionMulti = _ref => {
   const {
     value
   } = useContext(DropDownContext);
-  const isSelected = !!(value !== null && value !== void 0 && value.find(item => {
-    var _option$props;
-
-    return item.label === (option === null || option === void 0 ? void 0 : (_option$props = option.props) === null || _option$props === void 0 ? void 0 : _option$props.label);
-  }));
+  const isSelected = !!value?.find(item => item.label === option?.props?.label);
 
   const optionProps = _objectSpread(_objectSpread({}, option.props.innerProps), {}, {
     style,

package/esm/ComboBox/v2/components/DropdownIndicator.js

@@ -1,12 +1,11 @@
-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 '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';
 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, useState } from 'react';
 import { get } from 'lodash';
 import { ChevronSmallDown } from '@elliemae/ds-icons';
@@ -72,7 +71,7 @@ const DropdownIndicator = _ref => {
     "data-testid": "combobox-dropdown-btn",
     "aria-label": "dropdown-indicator",
     buttonType: "text",
-    className: "dropdown-indicator ".concat(get(selectProps, 'menuIsOpen', false) && !inputInFocus ? 'active' : ''),
+    className: `dropdown-indicator ${get(selectProps, 'menuIsOpen', false) && !inputInFocus ? 'active' : ''}`,
     icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
     innerRef: innerRef,
     onClick: handleOnClick,

package/esm/ComboBox/v2/components/MenuList.js

@@ -5,7 +5,6 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import React, { useRef, useState, useEffect } from 'react';
 import { components } from 'react-select';
 import { FixedSizeList } from 'react-window';
@@ -20,7 +19,7 @@ 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 createItemData = memoize((items, options) => {
-  if (items !== null && items !== void 0 && items.findIndex) {
+  if (items?.findIndex) {
     const index = items.findIndex(item => item.props.isFocused);
     if (index > -1) return {
       items,
@@ -109,7 +108,7 @@ const MenuList = /*#__PURE__*/React.memo(props => {
         scrollTo(listRef);
       }
     },
-    className: "combobox-menu-list ".concat(isMulti && 'combobox-menu-list-is-multi'),
+    className: `combobox-menu-list ${isMulti && 'combobox-menu-list-is-multi'}`,
     height: height,
     itemCount: options.length,
     itemData: itemData,

package/esm/ComboBox/v2/components/MultiSelectHeader.js

@@ -21,7 +21,7 @@ const MultiSelectHeader = props => {
   const isClearButtonDisabled = selectedItems === 0;
   const isAllButtonDisabled = selectedItems === totalItems;
   return /*#__PURE__*/_jsx(HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx(ContentWrapper, {}, void 0, /*#__PURE__*/_jsx(HeaderTitle, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-    value: "".concat(selectedItems, " selected")
+    value: `${selectedItems} selected`
   })), !selectAllDisabled && /*#__PURE__*/_jsx(ActionButtons, {}, void 0, /*#__PURE__*/_jsx(StyledButton, {
     "data-testid": "combobox-all-btn",
     buttonType: "text",

package/esm/ComboBox/v2/components/ValueContainer.js

@@ -1,11 +1,10 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-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';
 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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useRef, useContext, useState } from 'react';
 import { components } from 'react-select';
 import { cx } from '@elliemae/ds-utilities';

package/esm/ComboBox/v2/components/getoptions.js

@@ -1,5 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-
 const getOptions = _ref => {
   let {
     showAllOption,

package/esm/ComboBox/v2/components/useMenuListHeight.js

@@ -1,7 +1,6 @@
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 
 /* eslint-disable no-restricted-syntax */
 
@@ -38,9 +37,7 @@ const useMenuListHeight = (elements, maxElements, itemSize, remainingHeight) =>
   let calculatedHeight = itemSize * elementSlotsToShow;
 
   if (elementSlotsToShow === 1) {
-    var _elements$, _elements$$props, _elements$$props$data;
-
-    if ((_elements$ = elements[0]) !== null && _elements$ !== void 0 && (_elements$$props = _elements$.props) !== null && _elements$$props !== void 0 && (_elements$$props$data = _elements$$props.data) !== null && _elements$$props$data !== void 0 && _elements$$props$data.hasSeparator) calculatedHeight += 40;else calculatedHeight += 25;
+    if (elements[0]?.props?.data?.hasSeparator) calculatedHeight += 40;else calculatedHeight += 25;
   } // add pixels for group type (title and padding)
 
 
@@ -48,17 +45,15 @@ const useMenuListHeight = (elements, maxElements, itemSize, remainingHeight) =>
     let groupElementsShowed = 0;
 
     for (const group of elements) {
-      var _currentOptions$props, _currentOptions$props2, _currentOptions$props3, _currentOptions$props4;
-
       if (groupElementsShowed >= elementSlotsToShow) {
         break;
       }
 
       const currentOptions = group;
-      groupElementsShowed += (currentOptions === null || currentOptions === void 0 ? void 0 : (_currentOptions$props = currentOptions.props) === null || _currentOptions$props === void 0 ? void 0 : (_currentOptions$props2 = _currentOptions$props.options) === null || _currentOptions$props2 === void 0 ? void 0 : _currentOptions$props2.length) || 0;
+      groupElementsShowed += currentOptions?.props?.options?.length || 0;
       calculatedHeight += GROUP_PADDING + GROUP_TITLE;
 
-      if (currentOptions !== null && currentOptions !== void 0 && (_currentOptions$props3 = currentOptions.props) !== null && _currentOptions$props3 !== void 0 && (_currentOptions$props4 = _currentOptions$props3.data) !== null && _currentOptions$props4 !== void 0 && _currentOptions$props4.hasSeparator) {
+      if (currentOptions?.props?.data?.hasSeparator) {
         calculatedHeight += SEPARATOR;
       }
     }

package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js

@@ -57,7 +57,7 @@ function ComboBoxFreeSolo(_ref) {
     disabled = false,
     menuIsOpen = false,
     placeholder = 'Select values',
-    formatCreateLabel = val => "Create ".concat(val),
+    formatCreateLabel = val => `Create ${val}`,
     maxOptions = undefined
   } = _ref,
       rest = _objectWithoutProperties(_ref, _excluded);

package/esm/DateInput/DSDateInput.js

@@ -6,7 +6,6 @@ import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect, useCallback } from 'react';
 import { describe } from 'react-desc';
 import { runAll } from '@elliemae/ds-utilities';
@@ -61,7 +60,7 @@ const DSDateInput = _ref => {
     inputOnChange(date);
   }, []);
   return /*#__PURE__*/_jsx(DSInput, {
-    className: "".concat(className, " input-date-input "),
+    className: `${className} input-date-input `,
     clearable: clearable,
     containerProps: containerProps,
     customInputType: _ref2 => {

package/esm/DateInput/components/DateInputs.js

@@ -4,7 +4,6 @@ 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 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';

package/esm/DateInput/components/utils.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.some.js';
@@ -172,7 +171,7 @@ const handleCompletedDate = (time, date, show, INTERNAL_V2_NO_MUTATION) => {
     showDay
   } = show;
   if (time && !year && !month && !day) return '';
-  newDate.value = "".concat(year, "-").concat(month, "-").concat(day);
+  newDate.value = `${year}-${month}-${day}`;
   if (showMonth && month) newDate.month(parseInt(month - 1, 10));
   if (showDay && day) newDate.date(parseInt(day, 10));
   if (showYear && year) newDate.year(parseInt(year, 10));

package/esm/DateInputV2/components/DateInputs.js

@@ -4,7 +4,6 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
@@ -47,7 +46,7 @@ const DateInputs = _ref => {
   }, [dayRef.current]);
   const triggerOnDateChange = React.useCallback(() => {
     if (month && day && year && haveInputsOnChangeTriggered) {
-      const momentValue = moment("".concat(month).concat(day).concat(year), 'MMDDYYYY', true);
+      const momentValue = moment(`${month}${day}${year}`, 'MMDDYYYY', true);
 
       if (momentValue.isValid()) {
         onDateChange(momentValue);
@@ -90,15 +89,15 @@ const DateInputs = _ref => {
     // When component mounts haveInputsOnChangeTriggered is set to false
     // so this is not triggered on mount but is triggered with all other changes
     if (haveInputsOnChangeTriggered) {
-      const momentValue = moment("".concat(month).concat(day).concat(year), FORMAT, true);
-      onChange("".concat(month).concat(day).concat(year), momentValue.isValid() ? momentValue : null);
+      const momentValue = moment(`${month}${day}${year}`, FORMAT, true);
+      onChange(`${month}${day}${year}`, momentValue.isValid() ? momentValue : null);
     }
   }, [day, month, year]);
   useEffect(() => {
     triggerOnDateChange();
   }, [onChangeDateTrigger]);
   useEffect(() => {
-    if (time && time !== "".concat(month).concat(day).concat(year) && moment(time, 'MMDDYYYY').isValid()) {
+    if (time && time !== `${month}${day}${year}` && moment(time, 'MMDDYYYY').isValid()) {
       const values = String(time || '');
       if (values.slice(0, 2)) setMonth(values.slice(0, 2));
       if (values.slice(2, 4)) setDay(values.slice(2, 4));

package/esm/DateInputV2/components/styled.js

@@ -11,7 +11,10 @@ const DateInputWrapper = /*#__PURE__*/styled(Grid).withConfig({
     disabled,
     theme
   } = _ref;
-  return disabled ? "\n    background: ".concat(theme.colors.neutral[100], ";\n    color: ").concat(theme.colors.neutral[500], ";\n    ") : '';
+  return disabled ? `
+    background: ${theme.colors.neutral[100]};
+    color: ${theme.colors.neutral[500]};
+    ` : '';
 });
 const DateInputInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-ads423-2"
@@ -20,7 +23,10 @@ const DateInputInput = /*#__PURE__*/styled.input.withConfig({
     disabled,
     theme
   } = _ref2;
-  return disabled ? "\n  background: ".concat(theme.colors.neutral[100], ";\n  color: ").concat(theme.colors.neutral[500], ";\n  ") : '';
+  return disabled ? `
+  background: ${theme.colors.neutral[100]};
+  color: ${theme.colors.neutral[500]};
+  ` : '';
 }, _ref3 => {
   let {
     theme

package/esm/DateInputV2/components/utils.js

@@ -1,4 +1,3 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.some.js';
@@ -115,14 +114,10 @@ const triggerOnBlur = function (blurEvent) {
   }
 };
 const focusNextInput = currentEl => {
-  var _getNextSibling;
-
-  (_getNextSibling = getNextSibling(currentEl, 'input')) === null || _getNextSibling === void 0 ? void 0 : _getNextSibling.focus();
+  getNextSibling(currentEl, 'input')?.focus();
 };
 const focusPreviousInput = currentEl => {
-  var _getPreviousSibling;
-
-  (_getPreviousSibling = getPreviousSibling(currentEl, 'input')) === null || _getPreviousSibling === void 0 ? void 0 : _getPreviousSibling.focus();
+  getPreviousSibling(currentEl, 'input')?.focus();
 };
 const getValidTimeNumber = function (_ref, number) {
   let {
@@ -221,7 +216,7 @@ const handleCompletedDate = (time, date, show, INTERNAL_V2_NO_MUTATION) => {
     showDay
   } = show;
   if (time && !year && !month && !day) return '';
-  newDate.value = "".concat(year, "-").concat(month, "-").concat(day);
+  newDate.value = `${year}-${month}-${day}`;
   if (showMonth && month) newDate.month(parseInt(month - 1, 10));
   if (showDay && day) newDate.date(parseInt(day, 10));
   if (showYear && year) newDate.year(parseInt(year, 10));

package/esm/FormItem/DSFormItemLayout.js

@@ -42,8 +42,8 @@ const Wrapper = aggregatedClasses('div')(blockName, null, _ref => {
     'with-highlight': withHighlight
   };
 });
-const WrapperContent = aggregatedClasses('div')("".concat(blockName, "-content"));
-const WrapperContentGroup = aggregatedClasses('fieldset')("".concat(blockName, "-content"));
+const WrapperContent = aggregatedClasses('div')(`${blockName}-content`);
+const WrapperContentGroup = aggregatedClasses('fieldset')(`${blockName}-content`);
 
 const DSFormItemLayout = _ref2 => {
   var _WrapperContentComp;

package/esm/FormItem/Label/DSLabel.js

@@ -19,7 +19,7 @@ const DSLabel = _ref => {
   } = _ref;
   const Tag = isGroup ? 'legend' : 'label';
   return /*#__PURE__*/_jsx(Tag, {
-    className: "".concat(blockName).concat(isGroup ? " ".concat(blockName, "--group") : ''),
+    className: `${blockName}${isGroup ? ` ${blockName}--group` : ''}`,
     htmlFor: htmlFor
   }, void 0, truncateText ? /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
     value: children || label

package/esm/FormItem/Suffix/Suffix.js

@@ -5,11 +5,15 @@ const Suffix = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-126c671-0"
 })(["height:2.16rem;align-items:center;display:flex;", ""], props => {
   if (props.label && !props.withFeedback) {
-    return "\n      padding-top: 1.2rem;\n      ";
+    return `
+      padding-top: 1.2rem;
+      `;
   }
 
   if (!props.label && !props.withFeedback) {
-    return "\n      padding-top: 1rem;\n      ";
+    return `
+      padding-top: 1rem;
+      `;
   }
 });
 const SuffixInputWrapper = /*#__PURE__*/styled.div.withConfig({

package/esm/Input/DSInput.js

@@ -50,7 +50,7 @@ const DSInput = _ref => {
     "aria-label": otherProps['aria-label'],
     "aria-describedby": otherProps['aria-describedby'],
     autoFocus: autoFocus,
-    className: "".concat(className, " ").concat(disabled ? 'input-disabled' : '').concat(readOnly ? 'read-only' : ''),
+    className: `${className} ${disabled ? 'input-disabled' : ''}${readOnly ? 'read-only' : ''}`,
     clearable: clearable,
     containerProps: containerProps,
     customInputType: customInputType,