@elliemae/ds-data-table 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/exported-related/index.js

@@ -9,11 +9,11 @@ var groupBy = require('./groupBy.js');
 var FilterTypes = require('./FilterTypes.js');
 var RowVariants = require('./RowVariants.js');
 var applyOutOfTheBoxFilters = require('./Filters/applyOutOfTheBoxFilters.js');
-var textFilterFn = require('./Filters/textFilterFn.js');
 var singleDateFilterFn = require('./Filters/singleDateFilterFn.js');
 var singleSelectFilterFn = require('./Filters/singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./Filters/multiSelectFilterFn.js');
 var numberRangeFilterFn = require('./Filters/numberRangeFilterFn.js');
+var currencyRangeFilterFn = require('./Filters/currencyRangeFilterFn.js');
 var dateRangeFilterFn = require('./Filters/dateRangeFilterFn.js');
 
 
@@ -27,9 +27,9 @@ exports.ROW_VARIANTS = RowVariants.ROW_VARIANTS;
 exports.ROW_VARIANT_COMPACT_KEY = RowVariants.ROW_VARIANT_COMPACT_KEY;
 exports.ROW_VARIANT_KEY = RowVariants.ROW_VARIANT_KEY;
 exports.applyOutOfTheBoxFilters = applyOutOfTheBoxFilters.applyOutOfTheBoxFilters;
-exports.textFilterFn = textFilterFn.textFilterFn;
 exports.singleDateFilterFn = singleDateFilterFn.singleDateFilterFn;
 exports.singleSelectFilterFn = singleSelectFilterFn.singleSelectFilterFn;
 exports.multiSelectFilterFn = multiSelectFilterFn.multiSelectFilterFn;
 exports.numberRangeFilterFn = numberRangeFilterFn.numberRangeFilterFn;
+exports.currencyRangeFilterFn = currencyRangeFilterFn.currencyRangeFilterFn;
 exports.dateRangeFilterFn = dateRangeFilterFn.dateRangeFilterFn;

package/cjs/helpers/addCellData.js

@@ -2,18 +2,27 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/* eslint-disable react/prop-types */
-const BasicCell = /*#__PURE__*/React__default['default'].memo(({
-  cell
-}) => cell.value);
+const BasicCell = /*#__PURE__*/React__default["default"].memo(_ref => {
+  let {
+    cell
+  } = _ref;
+  return cell.value;
+});
 
-const getCellValue = (row, accessor) => row.original[accessor] ?? null;
+const getCellValue = (row, accessor) => {
+  var _row$original$accesso;
+
+  return (_row$original$accesso = row.original[accessor]) !== null && _row$original$accesso !== void 0 ? _row$original$accesso : null;
+};
 
 const addColumnData = (datum, column) => {
   datum.cells.push({
@@ -21,7 +30,8 @@ const addColumnData = (datum, column) => {
     value: getCellValue(datum, column.accessor),
     render: column.Cell || BasicCell,
     row: datum,
-    ref: /*#__PURE__*/React__default['default'].createRef()
+    ref: /*#__PURE__*/React__default["default"].createRef(),
+    id: "".concat(datum.uid, "__").concat(column.id)
   });
 };
 

package/cjs/helpers/cellPadding.js

@@ -4,19 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var sizeToCss = require('./sizeToCss.js');
 
-const cellPadding = ({
-  theme,
-  column
-}) => `padding: 0 ${sizeToCss.sizeToCss(column.padding) ?? theme.space.xxs};`;
-const columnPadding = ({
-  theme,
-  column,
-  shouldShowDnD
-}) => {
+const cellPadding = _ref => {
+  var _sizeToCss;
+
+  let {
+    theme,
+    column
+  } = _ref;
+  return "padding: 0 ".concat((_sizeToCss = sizeToCss.sizeToCss(column.padding)) !== null && _sizeToCss !== void 0 ? _sizeToCss : theme.space.xxs, ";");
+};
+const columnPadding = _ref2 => {
+  let {
+    theme,
+    column,
+    shouldShowDnD
+  } = _ref2;
   // Internal columns
-  if (column.padding !== undefined) return `padding: 0 ${sizeToCss.sizeToCss(column.padding)};`; // Default user columns
+  if (column.padding !== undefined) return "padding: 0 ".concat(sizeToCss.sizeToCss(column.padding), ";"); // Default user columns
 
-  return `padding: 0 ${theme.space.xxxs} 0 ${shouldShowDnD ? '2px' : theme.space.xxs};`;
+  return "padding: 0 ".concat(theme.space.xxxs, " 0 ").concat(shouldShowDnD ? '2px' : theme.space.xxs, ";");
 };
 
 exports.cellPadding = cellPadding;

package/cjs/helpers/columnsToGrid.js

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
 var constants = require('../configs/constants.js');
 var sizeToCss = require('./sizeToCss.js');
 
 const columnsToGridImpl = (c, grid, colsLayoutStyle) => {
-  if ('columns' in c) c.columns.forEach(col => columnsToGridImpl(col, grid, colsLayoutStyle));else grid.push(sizeToCss.sizeToCss(c.width ?? (colsLayoutStyle === constants.ColsLayoutStyle.Auto ? '1fr' : 150)));
+  var _c$width;
+
+  if ('columns' in c) c.columns.forEach(col => columnsToGridImpl(col, grid, colsLayoutStyle));else grid.push(sizeToCss.sizeToCss((_c$width = c.width) !== null && _c$width !== void 0 ? _c$width : colsLayoutStyle === constants.ColsLayoutStyle.Auto ? '1fr' : 150));
 };
 
 const columnsToGrid = (columns, colsLayoutStyle) => {

package/cjs/helpers/getIdFromUniqueRowAccessor.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+
 const getIdFromUniqueRowAccessor = (uniqueRowAccessor, row) => {
   if (uniqueRowAccessor === undefined) {
     // user did not defined an unique row accesor, use the one generated by react-table

package/cjs/helpers/refs-helpers.js

@@ -2,11 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+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');
+
 // allow multiple refs to be set to point to the same DOM element
-const setMultipleRefs = (...refs) => {
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length) return null;
-  if (filteredRefs.length === 0) return filteredRefs[0];
+  if (!filteredRefs.length) return () => null;
+  if (filteredRefs.length === 0) return () => null;
   return newRef => {
     filteredRefs.forEach(refToBeUpdated => {
       if (typeof refToBeUpdated === 'function') {

package/cjs/helpers/sizeToCss.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size;
+const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
 
 exports.sizeToCss = sizeToCss;

package/cjs/hooks/useRecoverFocusCol.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 
 // so we just keep track of it and focus it if necessary

package/cjs/index.js

@@ -10,11 +10,11 @@ var groupBy = require('./exported-related/groupBy.js');
 var FilterTypes = require('./exported-related/FilterTypes.js');
 var RowVariants = require('./exported-related/RowVariants.js');
 var applyOutOfTheBoxFilters = require('./exported-related/Filters/applyOutOfTheBoxFilters.js');
-var textFilterFn = require('./exported-related/Filters/textFilterFn.js');
 var singleDateFilterFn = require('./exported-related/Filters/singleDateFilterFn.js');
 var singleSelectFilterFn = require('./exported-related/Filters/singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./exported-related/Filters/multiSelectFilterFn.js');
 var numberRangeFilterFn = require('./exported-related/Filters/numberRangeFilterFn.js');
+var currencyRangeFilterFn = require('./exported-related/Filters/currencyRangeFilterFn.js');
 var dateRangeFilterFn = require('./exported-related/Filters/dateRangeFilterFn.js');
 
 
@@ -30,9 +30,9 @@ exports.ROW_VARIANTS = RowVariants.ROW_VARIANTS;
 exports.ROW_VARIANT_COMPACT_KEY = RowVariants.ROW_VARIANT_COMPACT_KEY;
 exports.ROW_VARIANT_KEY = RowVariants.ROW_VARIANT_KEY;
 exports.applyOutOfTheBoxFilters = applyOutOfTheBoxFilters.applyOutOfTheBoxFilters;
-exports.textFilterFn = textFilterFn.textFilterFn;
 exports.singleDateFilterFn = singleDateFilterFn.singleDateFilterFn;
 exports.singleSelectFilterFn = singleSelectFilterFn.singleSelectFilterFn;
 exports.multiSelectFilterFn = multiSelectFilterFn.multiSelectFilterFn;
 exports.numberRangeFilterFn = numberRangeFilterFn.numberRangeFilterFn;
+exports.currencyRangeFilterFn = currencyRangeFilterFn.currencyRangeFilterFn;
 exports.dateRangeFilterFn = dateRangeFilterFn.dateRangeFilterFn;

package/cjs/parts/Cells/Cell.js

@@ -2,6 +2,12 @@
 
 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 React = require('react');
 var dsTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var Grid = require('@elliemae/ds-grid');
@@ -10,20 +16,22 @@ var index = require('../../addons/Editables/index.js');
 var DataTableContext = require('../../DataTableContext.js');
 var SortableItemContext = require('../HoC/SortableItemContext.js');
 var ColumnExpand = require('../../addons/Columns/ColumnExpand/ColumnExpand.js');
-require('@elliemae/ds-form/Checkbox');
+require('@elliemae/ds-form');
 var constants = require('../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('styled-components');
-require('@elliemae/ds-form/Radio');
 require('../TableContent.js');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
+require('@elliemae/ds-icons');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
 require('../Row.js');
 require('../Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 var useCellStyle = require('./useCellStyle.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -35,29 +43,33 @@ var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const PureStandardCell = /*#__PURE__*/React.memo(({
-  cellStyle,
-  children,
-  column
-}) => /*#__PURE__*/_jsx__default['default'](styled.StyledCell, {
-  column: column,
-  style: cellStyle,
-  role: "cell",
-  "data-testid": constants.DATA_TESTID.DATA_TABLE_CELL
-}, void 0, children));
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const PureStandardCell = /*#__PURE__*/React.memo(_ref => {
+  let {
+    cellStyle,
+    children,
+    column
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](styled.StyledCell, {
+    column: column,
+    style: cellStyle,
+    role: "cell",
+    "data-testid": constants.DATA_TESTID.DATA_TABLE_CELL
+  }, void 0, children);
+});
 
-const Cell = ({
-  cell,
-  column,
-  row,
-  isRowSelected,
-  shouldAddExpandCell,
-  isDragOverlay
-}) => {
+const Cell = _ref2 => {
   var _SimpleTruncatedToolt;
 
-  const ctx = React.useContext(DataTableContext['default']);
+  let {
+    cell,
+    column,
+    row,
+    isRowSelected,
+    shouldAddExpandCell,
+    isDragOverlay
+  } = _ref2;
+  const ctx = React.useContext(DataTableContext["default"]);
   const {
     tableProps: {
       cellRendererProps
@@ -81,7 +93,7 @@ const Cell = ({
   const CellComponent = cell.render;
   const pureCellContent = React.useMemo(() => {
     if (shouldAddExpandCell) {
-      return /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+      return /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
         cols: ['min-content', 'auto'],
         alignItems: "center",
         height: "100%"
@@ -90,7 +102,7 @@ const Cell = ({
 
     return /*#__PURE__*/jsxRuntime.jsx(CellComponent, _objectSpread({}, cellProps));
   }, [CellComponent, cellProps, shouldAddExpandCell]);
-  const DefaultCellContentJSX = React.useMemo(() => /*#__PURE__*/_jsx__default['default'](styled.StyledCellContent, {}, void 0, appliedTextWrap === 'truncate' ? _SimpleTruncatedToolt || (_SimpleTruncatedToolt = /*#__PURE__*/_jsx__default['default'](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
+  const DefaultCellContentJSX = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](styled.StyledCellContent, {}, void 0, appliedTextWrap === 'truncate' ? _SimpleTruncatedToolt || (_SimpleTruncatedToolt = /*#__PURE__*/_jsx__default["default"](dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
     value: pureCellContent
   })) : pureCellContent), [appliedTextWrap, pureCellContent]);
   const EditableContentJSX = React.useMemo(() => {

package/cjs/parts/Cells/index.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var index = require('../../addons/Columns/index.js');
 var styled = require('../../styled.js');
@@ -18,7 +20,7 @@ const Cells = props => {
     isRowSelected,
     isDragOverlay
   } = props;
-  const ctx = React.useContext(DataTableContext['default']); // we won't print sub-rows more nested than the first level
+  const ctx = React.useContext(DataTableContext["default"]); // we won't print sub-rows more nested than the first level
 
   if (row.depth <= 1) {
     let shouldAddExpandCell = false;
@@ -35,9 +37,9 @@ const Cells = props => {
 
         if (column.id === 'rowActions') {
           const ActionComponent = cell.render;
-          jsx = /*#__PURE__*/_jsx__default['default'](styled.StyledActionCell, {
+          jsx = /*#__PURE__*/_jsx__default["default"](styled.StyledActionCell, {
             role: "cell"
-          }, row.uid + column.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx__default['default'](ActionComponent, {
+          }, cell.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx__default["default"](ActionComponent, {
             row: row,
             cell: cell,
             column: column,
@@ -48,14 +50,14 @@ const Cells = props => {
           // Next user's cell will have the expand cell
           shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay
         } else {
-          jsx = /*#__PURE__*/_jsx__default['default'](Cell, {
+          jsx = /*#__PURE__*/_jsx__default["default"](Cell, {
             cell: cell,
             column: column,
             row: row,
             isRowSelected: isRowSelected,
             shouldAddExpandCell: isUserCell && shouldAddExpandCell,
             isDragOverlay: isDragOverlay
-          }, row.uid + column.id);
+          }, cell.id);
         } // Drag overlay only need to print the DnD handle and the first user's cell
 
 

package/cjs/parts/Cells/useCellStyle.js

@@ -10,7 +10,7 @@ const useCellStyle = (column, shouldAddExpandCell) => {
     tableProps: {
       textWrap
     }
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const appliedTextWrap = column.textWrap || textWrap;
   const cellStyle = React.useMemo(() => {
     const newStyle = {};
@@ -31,8 +31,8 @@ const useCellStyle = (column, shouldAddExpandCell) => {
     }
 
     if (shouldAddExpandCell) {
-      newStyle.gridColumn = `span 2`;
-      newStyle.padding = `0 16px 0 2px`;
+      newStyle.gridColumn = "span 2";
+      newStyle.padding = "0 16px 0 2px";
     }
 
     return newStyle;

package/cjs/parts/DnDHandle.js

@@ -1,24 +1,30 @@
 'use strict';
 
+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 _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var GripperVertical = require('@elliemae/ds-icons/GripperVertical');
+var dsIcons = require('@elliemae/ds-icons');
 var styled = require('styled-components');
 var SortableItemContext = require('./HoC/SortableItemContext.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');
 require('../configs/useRowFlattenization.js');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('@elliemae/ds-icons');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('./TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
 require('../DataTableContext.js');
@@ -29,25 +35,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var GripperVertical__default = /*#__PURE__*/_interopDefaultLegacy(GripperVertical);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-const StyledGripperButton = /*#__PURE__*/styled__default['default'].div.withConfig({
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const StyledGripperButton = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-fj20bf-0"
-})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], ({
-  isActive,
-  isDragOverlay
-}) => isActive || isDragOverlay ? 'grabbing' : 'grab');
+})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], _ref => {
+  let {
+    isActive,
+    isDragOverlay
+  } = _ref;
+  return isActive || isDragOverlay ? 'grabbing' : 'grab';
+});
 
-const DragHandle = ({
-  id,
-  isReachable,
-  isDragOverlay,
-  innerRef
-}) => {
+const DragHandle = _ref2 => {
+  let {
+    id,
+    isReachable,
+    isDragOverlay,
+    innerRef
+  } = _ref2;
   const {
     draggableProps
   } = React.useContext(SortableItemContext.SortableItemContext);
@@ -61,9 +70,9 @@ const DragHandle = ({
     ref: innerRef,
     tabIndex: isReachable ? 0 : -1,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
-    id: `${id}-drag-handle`,
-    key: `${id}-drag-handle`
-  }), /*#__PURE__*/_jsx__default['default'](GripperVertical__default['default'], {
+    id: "".concat(id, "-drag-handle"),
+    key: "".concat(id, "-drag-handle")
+  }), /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
     size: "s",
     color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']
   }));

package/cjs/parts/DropIndicator.js

@@ -14,45 +14,44 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _circle;
 
-const getPositionStyles = ({
-  dropIndicatorPosition,
-  vertical
-}) => {
+const getPositionStyles = _ref => {
+  let {
+    dropIndicatorPosition,
+    vertical
+  } = _ref;
+
   if (vertical) {
-    return `
-      left: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset'};
-      right: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset'};
-    `;
+    return "\n      left: ".concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset', ";\n      right: ").concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
   }
 
-  return `
-      top: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset'};
-      bottom: ${dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset'};
-    `;
+  return "\n      top: ".concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
 };
 
-const getCircleStyles = ({
-  dropIndicatorPosition,
-  vertical
-}) => ({
-  position: 'absolute',
-  zIndex: zIndexInternalConfig.ZIndexDataTable.DROP_INDICATOR,
-  top: vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? 'unset' : '-2px',
-  bottom: vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? 'unset' : '-2px',
-  left: !vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? 'unset' : '-2px',
-  right: !vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? 'unset' : '-2px',
-  opacity: 1
-});
+const getCircleStyles = _ref2 => {
+  let {
+    dropIndicatorPosition,
+    vertical
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: zIndexInternalConfig.ZIndexDataTable.DROP_INDICATOR,
+    top: vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? 'unset' : '-2px',
+    bottom: vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? 'unset' : '-2px',
+    left: !vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.After ? 'unset' : '-2px',
+    right: !vertical || dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Before ? 'unset' : '-2px',
+    opacity: 1
+  };
+};
 
-const StyledIndicator = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1aa87sx-0"
 })(["position:absolute;", " box-sizing:border-box;width:", ";height:", ";background-color:", ";z-index:", ";"], getPositionStyles, props => props.vertical ? '2px' : '100%', props => props.vertical ? '100%' : '2px', props => props.theme.colors.brand[600], zIndexInternalConfig.ZIndexDataTable.DROP_INDICATOR);
 
-const CircleIndicator = style => /*#__PURE__*/_jsx__default['default']("svg", {
+const CircleIndicator = style => /*#__PURE__*/_jsx__default["default"]("svg", {
   height: "6",
   width: "6",
   style: style
-}, void 0, _circle || (_circle = /*#__PURE__*/_jsx__default['default']("circle", {
+}, void 0, _circle || (_circle = /*#__PURE__*/_jsx__default["default"]("circle", {
   cx: "3",
   cy: "3",
   r: "3",
@@ -60,18 +59,19 @@ const CircleIndicator = style => /*#__PURE__*/_jsx__default['default']("svg", {
   fill: "#1E79C2"
 })));
 
-const DropIndicator = ({
-  vertical,
-  dropIndicatorPosition,
-  isLast
-}) => {
+const DropIndicator = _ref3 => {
+  let {
+    vertical,
+    dropIndicatorPosition,
+    isLast
+  } = _ref3;
   if (![SortableItemContext.DropIndicatorPosition.After, SortableItemContext.DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;
   const safeDropIndicatorPosition = isLast ? SortableItemContext.DropIndicatorPosition.Before : dropIndicatorPosition;
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [CircleIndicator(getCircleStyles({
       vertical,
       dropIndicatorPosition: safeDropIndicatorPosition
-    })), /*#__PURE__*/_jsx__default['default'](StyledIndicator, {
+    })), /*#__PURE__*/_jsx__default["default"](StyledIndicator, {
       vertical: vertical,
       dropIndicatorPosition: safeDropIndicatorPosition
     })]