@elliemae/ds-data-table 2.4.2-rc.12 → 2.4.2-rc.15

package/cjs/parts/Headers/HeaderCell.js

@@ -32,7 +32,6 @@ var useHeaderCellHandlers = require('./useHeaderCellHandlers.js');
 var useHeaderCellConfig = require('./useHeaderCellConfig.js');
 var useRecoverFocusCol = require('../../hooks/useRecoverFocusCol.js');
 var constants = require('../../configs/constants.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
@@ -60,26 +59,24 @@ const buildScreenReaderInstructions = (colSpan, draggable, filterable, sortable)
   let message = sortable ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so' : '';
 
   if (draggable && filterable) {
-    message = "This column is draggable and filterable. To enable these interactions press the enter key. ".concat(message);
+    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
   } else if (draggable || filterable) {
-    message = "This column is ".concat(draggable ? 'draggable' : 'filterable', ". To enable this interaction press the enter key. ").concat(message);
+    message = `This column is ${draggable ? 'draggable' : 'filterable'}. To enable this interaction press the enter key. ${message}`;
   }
 
-  return "".concat(preffix).concat(message);
+  return `${preffix}${message}`;
 };
 
 function mapStateToProps(state, ownProps) {
-  var _state$headers;
-
   return {
-    reduxHeader: (_state$headers = state.headers) === null || _state$headers === void 0 ? void 0 : _state$headers[ownProps.column.id]
+    reduxHeader: state.headers?.[ownProps.column.id]
   };
 }
 
 const connector = reactRedux.connect(mapStateToProps);
 
 const HeaderCellComp = props => {
-  var _FilterMapItem, _flattenedData$, _flattenedData$$origi;
+  var _FilterMapItem;
 
   const {
     reduxHeader,
@@ -146,10 +143,10 @@ const HeaderCellComp = props => {
     hideFocus: isDragging
   }, void 0, /*#__PURE__*/_jsx__default["default"](DnDHandle, {
     innerRef: dragHandleRef,
-    isReachable: reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops,
+    isReachable: reduxHeader?.withTabStops,
     id: column.id,
     isDragOverlay: isDragOverlay
-  }, column.id))), [column.id, isDragOverlay, isDragging, reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops]);
+  }, column.id))), [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops]);
   const handlers = useHeaderCellHandlers.useHeaderCellHandlers({
     hasFilter,
     patchHeader,
@@ -166,11 +163,11 @@ const HeaderCellComp = props => {
   }, handlers), {}, {
     role: colSpan === 1 ? 'columnheader' : 'group',
     colSpan: colSpan,
-    "aria-describedby": "".concat(column.id, "-instructions") // eslint-disable-next-line no-nested-ternary
+    "aria-describedby": `${column.id}-instructions` // eslint-disable-next-line no-nested-ternary
     ,
     "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
     "data-testid": constants.DATA_TESTID.DATA_TABLE_HEADER,
-    isFirstRowGroup: !!((_flattenedData$ = flattenedData[0]) !== null && _flattenedData$ !== void 0 && (_flattenedData$$origi = _flattenedData$.original) !== null && _flattenedData$$origi !== void 0 && _flattenedData$$origi.dimsumHeaderValue),
+    isFirstRowGroup: !!flattenedData[0]?.original?.dimsumHeaderValue,
     tabIndex: column.isFocuseable === false ? -1 : 0,
     isDragOverlay: isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,
@@ -187,7 +184,7 @@ const HeaderCellComp = props => {
     }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/_jsx__default["default"](HeaderResizer.HeaderResizer, {
       column: column
     })), /*#__PURE__*/_jsx__default["default"]("span", {
-      id: "".concat(column.id, "-instructions"),
+      id: `${column.id}-instructions`,
       style: {
         display: 'none'
       },

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -20,7 +20,6 @@ var EmptyChildrenGroup = require('./EmptyChildrenGroup.js');
 var constants = require('../../configs/constants.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
@@ -52,7 +51,7 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withCon
   let {
     shouldDropOneLevel
   } = _ref;
-  return shouldDropOneLevel ? "top: 50%; height: 50%;" : '';
+  return shouldDropOneLevel ? `top: 50%; height: 50%;` : '';
 }, props => props.isDragOverlay ? 'fit-content' : '100%', props => props.gridColumn, props => props.isDragging ? props.theme.colors.neutral['080'] : 'white', props => props.isDragging ? 0.8 : 1, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', _ref2 => {
   let {
     isFirst
@@ -61,8 +60,6 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withCon
 }, props => props.theme.colors.neutral['080']);
 
 const HeaderCellGroupComp = _ref3 => {
-  var _children$length;
-
   let {
     header,
     isDragOverlay,
@@ -82,10 +79,10 @@ const HeaderCellGroupComp = _ref3 => {
   const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
   const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;
-  const colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
+  const colSpan = children?.length ?? 1;
   return /*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
-    gridColumn: isDragOverlay ? 'auto' : "span ".concat(colSpan),
+    gridColumn: isDragOverlay ? 'auto' : `span ${colSpan}`,
     isDragOverlay: isDragOverlay,
     isDragging: isDragging,
     cols: ['auto'],
@@ -96,7 +93,7 @@ const HeaderCellGroupComp = _ref3 => {
       column: header,
       isDragOverlay: isDragOverlay,
       colSpan: colSpan
-    }), !!(children !== null && children !== void 0 && children.length) && !isDragOverlay && /*#__PURE__*/_jsx__default["default"](SortableHeaderCell.SortableHeaderCell, {
+    }), !!children?.length && !isDragOverlay && /*#__PURE__*/_jsx__default["default"](SortableHeaderCell.SortableHeaderCell, {
       items: children,
       isDragOverlay: isDragOverlay
     }, void 0, children.map((h, index) => /*#__PURE__*/_jsx__default["default"](ChildGroup, {
@@ -106,7 +103,7 @@ const HeaderCellGroupComp = _ref3 => {
       isLast: index === children.length - 1,
       isFirst: index === 0,
       level: level + 1
-    }, h.id))), (children === null || children === void 0 ? void 0 : children.length) && isDragOverlay && (_EmptyChildrenGroup || (_EmptyChildrenGroup = /*#__PURE__*/_jsx__default["default"](EmptyChildrenGroup.EmptyChildrenGroup, {}))), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
+    }, h.id))), children?.length && isDragOverlay && (_EmptyChildrenGroup || (_EmptyChildrenGroup = /*#__PURE__*/_jsx__default["default"](EmptyChildrenGroup.EmptyChildrenGroup, {}))), /*#__PURE__*/_jsx__default["default"](DropIndicator, {
       vertical: true,
       dropIndicatorPosition: dropIndicatorPosition,
       isLast: isLast && isDragging

package/cjs/parts/Headers/HeaderCellTitle.js

@@ -10,7 +10,6 @@ var constants = require('../../configs/constants.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');

package/cjs/parts/Headers/HeaderResizer.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -42,11 +41,9 @@ 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__default["default"](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 narrow = (value, min, max) => Math.min(Math.max(value, min !== null && min !== void 0 ? min : 30), max !== null && max !== void 0 ? max : Infinity);
+const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
 
 const HeaderResizer = _ref => {
-  var _column$width;
-
   let {
     column
   } = _ref;
@@ -60,7 +57,7 @@ const HeaderResizer = _ref => {
     }
   } = React.useContext(DataTableContext["default"]);
   const [isResizing, setIsResizing] = React.useState(false);
-  const [nextWidth, setNextWidth] = React.useState((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 150);
+  const [nextWidth, setNextWidth] = React.useState(column.width ?? 150);
   const visibleColumnsCopy = React.useMemo(() => visibleColumns.map(col => _objectSpread({}, col)), [visibleColumns]);
   React.useEffect(() => {
     const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
@@ -72,9 +69,7 @@ const HeaderResizer = _ref => {
     setIsResizing(true);
   }, []);
   const onResizeHandler = React.useCallback(e => {
-    var _ref$current$getBound, _ref$current;
-
-    const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - ((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0); // delta in pixels
+    const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - (ref.current?.getBoundingClientRect().x ?? 0); // delta in pixels
 
     const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
     const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);

package/cjs/parts/Headers/useHeaderCellConfig.js

@@ -20,7 +20,7 @@ const useHeaderCellConfig = _ref => {
   const hasSortingCaret = column.canSort && typeof column.isSortedDesc === 'boolean';
   const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);
   const isDragging = draggableProps && draggableProps.isDragging;
-  const shouldShowDnD = hasDnD && ((reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.showDnDHandle) && draggableProps && !draggableProps.active || draggableProps && draggableProps.isDragging || isDragOverlay); // Column definition
+  const shouldShowDnD = hasDnD && (reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active || draggableProps && draggableProps.isDragging || isDragOverlay); // Column definition
 
   const hCols = ['auto'];
   if (hasRightIcons) hCols.push('min-content');

package/cjs/parts/Headers/useHeaderCellHandlers.js

@@ -45,9 +45,7 @@ const useHeaderCellHandlers = _ref => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
   const onMouseLeave = React.useCallback(() => {
-    var _headerRef$current;
-
-    if (!(headerRef !== null && headerRef !== void 0 && (_headerRef$current = headerRef.current) !== null && _headerRef$current !== void 0 && _headerRef$current.contains(document.activeElement))) {
+    if (!headerRef?.current?.contains(document.activeElement)) {
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
@@ -82,7 +80,7 @@ const useHeaderCellHandlers = _ref => {
   }, [column.canSort, column.id, onColumnSortChange, patchHeader, reduxHeader, hasFilter, hasDnD, dragHandleRef, filterIconRef]);
   const onFocus = React.useCallback(e => {
     // Don't do anything if focus wasn't placed in the element (bubling issues)
-    if (e.target === (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)) {
+    if (e.target === headerRef?.current) {
       patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -7,7 +7,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.find.js');
 require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
@@ -94,11 +93,11 @@ const withConditionalDnDColumnContext = Component => props => {
     onColumnsReorder(newData, indexes);
   }, [flattenedItems, onColumnsReorder]);
   const onPreviewResetState = React.useCallback(() => {
-    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    const el = document.body.querySelector(`[data-testid="${constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
     if (el) el.onscroll = () => null;
   }, []);
   const onPreviewDragStart = React.useCallback(() => {
-    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    const el = document.body.querySelector(`[data-testid="${constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
 
     if (el) {
       const y = el.scrollTop;

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
@@ -64,7 +63,7 @@ const withConditionalDnDRowContext = Component => props => {
       // otherwise append it to the new user data
       if (row.parentId) {
         const parentNode = nodes[row.parentId];
-        if (parentNode !== null && parentNode !== void 0 && parentNode.subRows) parentNode.subRows.push(row.original);else parentNode.subRows = [row.original];
+        if (parentNode?.subRows) parentNode.subRows.push(row.original);else parentNode.subRows = [row.original];
       } else newUserData.push(row.original);
     }); // Tell the user that the order has change, he can chose to commit it or not
 

package/cjs/parts/Row.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var reactRedux = require('react-redux');
 var DataTableContext = require('../DataTableContext.js');

package/cjs/parts/RowLoading.js

@@ -9,7 +9,6 @@ var constants = require('../configs/constants.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');

package/cjs/parts/RowVariants/RowVariantHeader.js

@@ -18,7 +18,6 @@ require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('@elliemae/ds-form');
 var constants = require('../../configs/constants.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');

package/cjs/parts/RowVariants/index.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/es.error.cause.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 require('react');
 require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('@elliemae/ds-button');
 require('@elliemae/ds-popperjs');
 require('styled-components');
@@ -78,7 +78,7 @@ const RowVariantMapItem = props => {
 
   if (typeof variant === 'string') {
     if (!(variant in RowVariantMapper)) {
-      throw new Error("".concat(variant, " is not an out-of-the-box row variant"));
+      throw new Error(`${variant} is not an out-of-the-box row variant`);
     }
 
     Component = RowVariantMapper[variant];

package/cjs/parts/Rows.js

@@ -51,12 +51,12 @@ const Rows = () => {
       addCellData.addCellData(row, visibleColumns);
       const style = {
         position: 'absolute',
-        top: "".concat(start, "px"),
+        top: `${start}px`,
         left: 0,
         width: totalColumnsWidth
       };
       const rowProps = {
-        key: "ds-table-row-".concat(row.uid),
+        key: `ds-table-row-${row.uid}`,
         row,
         measureRef,
         index,

package/cjs/parts/TableContent.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _jsx = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactRedux = require('react-redux');
 var styled = require('../styled.js');

package/cjs/parts/VirtualRowsList.js

@@ -17,7 +17,6 @@ var constants = require('../configs/constants.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.filter.js');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');

package/cjs/redux/reducers/headersReducers/logic.js

@@ -18,7 +18,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__default["default"](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 patchUpdateOneHeader = (payload, state) => {
-  state[payload.headerId] = _objectSpread(_objectSpread({}, (state === null || state === void 0 ? void 0 : state[payload.headerId]) || {}), payload.newHeader);
+  state[payload.headerId] = _objectSpread(_objectSpread({}, state?.[payload.headerId] || {}), payload.newHeader);
 };
 const patchHeaderFilterButtonAndMenu = (_ref, state) => {
   let {
@@ -29,7 +29,7 @@ const patchHeaderFilterButtonAndMenu = (_ref, state) => {
     hideFilterMenu: newState,
     hideFilterButton: newState
   };
-  state[headerId] = _objectSpread(_objectSpread({}, (state === null || state === void 0 ? void 0 : state[headerId]) || {}), updatedState);
+  state[headerId] = _objectSpread(_objectSpread({}, state?.[headerId] || {}), updatedState);
 };
 
 exports.patchHeaderFilterButtonAndMenu = patchHeaderFilterButtonAndMenu;

package/cjs/styled.js

@@ -16,7 +16,6 @@ var cellPadding = require('./helpers/cellPadding.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
 require('react');
-require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
@@ -44,7 +43,19 @@ const styledFocusCss = _ref => {
   let {
     theme
   } = _ref;
-  return "\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: ").concat(zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, ";\n}");
+  return `
+&:after {
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 2px solid ${theme.colors.brand[700]};
+  pointer-events: none;
+  z-index: ${zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
+}`;
 };
 
 const StyledFocusWithin = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
@@ -52,15 +63,7 @@ const StyledFocusWithin = /*#__PURE__*/styled__default["default"](Grid__default[
 })([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
 const StyledDataTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["width:", ";height:", ";user-select:", ";"], props => {
-  var _props$width;
-
-  return sizeToCss.sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
-}, props => {
-  var _props$height;
-
-  return sizeToCss.sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
-}, _ref2 => {
+})(["width:", ";height:", ";user-select:", ";"], props => sizeToCss.sizeToCss(props.width ?? ' 100%'), props => sizeToCss.sizeToCss(props.height ?? ' 100%'), _ref2 => {
   let {
     noSelectionAllowed
   } = _ref2;
@@ -73,7 +76,10 @@ const StyledTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfi
     width = '100%',
     height = '100%'
   } = _ref3;
-  return "\n  width: ".concat(sizeToCss.sizeToCss(width), ";\n  height: ").concat(sizeToCss.sizeToCss(height), ";\n  ");
+  return `
+  width: ${sizeToCss.sizeToCss(width)};
+  height: ${sizeToCss.sizeToCss(height)};
+  `;
 });
 const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-3"
@@ -81,7 +87,9 @@ const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.wi
   let {
     height = 'auto'
   } = _ref4;
-  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  ");
+  return `
+  height: ${sizeToCss.sizeToCss(height)};
+  `;
 });
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-4"
@@ -90,7 +98,10 @@ const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.wit
     height = 'auto',
     width = '100%'
   } = _ref5;
-  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  width: ").concat(sizeToCss.sizeToCss(width), ";\n  ");
+  return `
+  height: ${sizeToCss.sizeToCss(height)};
+  width: ${sizeToCss.sizeToCss(width)};
+  `;
 });
 /**
  * HEADER
@@ -104,11 +115,11 @@ const getGridTemplateColumnsStyle = _ref6 => {
   if (!cols) return '';
 
   if (colsLayoutStyle === 'fixed') {
-    const widthAttr = cols.map(col => "minmax(0, ".concat(col, ")")).join(' ');
-    return "grid-template-columns: ".concat(widthAttr);
+    const widthAttr = cols.map(col => `minmax(0, ${col})`).join(' ');
+    return `grid-template-columns: ${widthAttr}`;
   }
 
-  return "grid-template-columns: ".concat(cols.map(col => "minmax(0, ".concat(col, ")")).join(' '));
+  return `grid-template-columns: ${cols.map(col => `minmax(0, ${col})`).join(' ')}`;
 };
 
 const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
@@ -124,7 +135,21 @@ const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["defa
 
 const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : ":hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ".concat(props.theme.colors.brand[700], ";\n            pointer-events: none;\n            z-index: ").concat(zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, ";\n          }\n          cursor: pointer;\n        }"), props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER);
+})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
+          &:after {
+            display: block;
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-bottom: 1px solid ${props.theme.colors.brand[700]};
+            pointer-events: none;
+            z-index: ${zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
+          }
+          cursor: pointer;
+        }`, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER);
 const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-8"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
@@ -205,8 +230,13 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
     shouldDisplayHover,
     theme
   } = _ref13;
-  return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
-}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[500], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
+  return shouldDisplayHover ? `:hover {
+            background-color: ${theme.colors.brand[200]};
+          }` : '';
+}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : `
+    background-color: ${props.theme.colors.brand[200]};
+    border: 1px solid ${props.theme.colors.brand[500]};
+    `, props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
 exports.GroupHeaderContainer = GroupHeaderContainer;
 exports.GroupHeaderTitle = GroupHeaderTitle;

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -10,7 +10,6 @@ import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-ic
 import styled from 'styled-components';
 import { StyledFocusWithin } from '../../../styled.js';
 import { DATA_TESTID } from '../../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
@@ -106,8 +105,6 @@ const expandRowColumn = {
     }, void 0, GlobalExpandIcon));
   },
   Cell: _ref2 => {
-    var _row$original$subRows;
-
     let {
       cell,
       row,
@@ -124,7 +121,7 @@ const expandRowColumn = {
     } = ctx;
     const uniqueId = row.uid;
     const isExpanded = expandedRows[uniqueId];
-    const shouldPrintCaret = ((_row$original$subRows = row.original.subRows) === null || _row$original$subRows === void 0 ? void 0 : _row$original$subRows.length) && row.depth === 0 || // only allows 1 level of expands
+    const shouldPrintCaret = row.original.subRows?.length && row.depth === 0 || // only allows 1 level of expands
     row.original.tableRowDetails || row.original.dimsumHeaderValue;
     const onRowExpandHandler = useCallback(e => {
       e.stopPropagation();
@@ -140,7 +137,7 @@ const expandRowColumn = {
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
     const indentStyle = useMemo(() => ({
-      marginLeft: "".concat(row.depth * 32, "px"),
+      marginLeft: `${row.depth * 32}px`,
       marginRight: '18px',
       paddingLeft: '2px',
       paddingRight: '2px',
@@ -151,7 +148,7 @@ const expandRowColumn = {
     }), [row.depth]);
     const rowProps = useMemo(() => ({
       role: 'button',
-      key: "".concat(row.uid, "-expand-button"),
+      key: `${row.uid}-expand-button`,
       title: 'Toggle Row Expanded',
       onClick: onRowExpandHandler,
       onKeyDown: e => {

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -8,7 +8,6 @@ import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useCallback } from 'react';
 import { DSCheckbox } from '@elliemae/ds-form';
 import { DATA_TESTID } from '../../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
@@ -102,7 +101,7 @@ const multiSelectColumn = {
     const {
       uid
     } = row;
-    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
+    const selectedState = selection?.[uid];
     const PureCheckboxCell = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
       title: "Toggle Row Selected",

package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -6,7 +6,6 @@ import { DATA_TESTID } from '../../../configs/constants.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/web.dom-collections.iterator.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
@@ -59,7 +58,7 @@ const singleSelectColumn = {
     const {
       uid
     } = row;
-    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
+    const selectedState = selection?.[uid];
     const PureCheckBox = useMemo(() => /*#__PURE__*/_jsx(CenteredContent, {}, void 0, /*#__PURE__*/_jsx(StyledDSRadio // eslint-disable-next-line react/prop-types
     , {
       containerProps: {

package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -1,5 +1,4 @@
 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';
@@ -82,11 +81,11 @@ const ComboboxEditableCell = props => {
   const handleOnBlur = useCallback(() => {
     const property = columnId;
     onCellValueChange({
-      value: value === null || value === void 0 ? void 0 : value.value,
+      value: value?.value,
       property,
       rowIndex: cell.row.index
     });
-  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell]);
+  }, [columnId, onCellValueChange, value?.value, cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx(DSComboBox, {

package/esm/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback } from 'react';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.constructor.js';

package/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -1,5 +1,4 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback } from 'react';
 import styled from 'styled-components';
 import 'core-js/modules/esnext.async-iterator.filter.js';