@elliemae/ds-datagrids 2.0.0-next.0 → 2.0.0-next.12

package/cjs/plugins/custom-cell-renderer/addCustomRendererToCell.js

@@ -2,8 +2,13 @@
 
 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');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var utils = require('@elliemae/ds-utilities/utils');
+var dsUtilities = require('@elliemae/ds-utilities');
 var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
 var getRendererComponent = require('./getRendererComponent.js');
 
@@ -46,14 +51,14 @@ const addCustomRendererToCell = grid => column => {
   const {
     customRenderer
   } = column;
-  const customHeaderRenderer = utils.get(column, ['header', 'customRenderer']);
+  const customHeaderRenderer = dsUtilities.get(column, ['header', 'customRenderer']);
   if (!customRenderer && !customHeaderRenderer) return column;
 
-  if (utils.isFunction(customHeaderRenderer)) {
+  if (dsUtilities.isFunction(customHeaderRenderer)) {
     column.header.formatters.push(getRenderer(customHeaderRenderer, grid));
   }
 
-  if (utils.isFunction(customRenderer)) {
+  if (dsUtilities.isFunction(customRenderer)) {
     column = initColumnDefinition.appendCellFormatter(getRenderer(customRenderer, grid, column), column);
   } else {
     if (!customRenderer) return column;

package/cjs/plugins/custom-cell-renderer/getRendererComponent.js

@@ -2,13 +2,14 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+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/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('react');
-var DSButton = require('@elliemae/ds-basic/Button');
-var DSCheckbox = require('@elliemae/ds-basic/form/Checkbox');
-var DSComboBox = require('@elliemae/ds-basic/form/ComboBox');
-var DSRadio = require('@elliemae/ds-basic/form/Radio');
-var DSTextBox = require('@elliemae/ds-basic/form/TextBox');
-var DSToggle = require('@elliemae/ds-basic/form/Toggle');
+var DSButton = require('@elliemae/ds-button');
+var dsForm = require('@elliemae/ds-form');
 var DSDropdownMenu = require('@elliemae/ds-dropdownmenu');
 var index = require('../../components/renderers/index.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,11 +19,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
-var DSComboBox__default = /*#__PURE__*/_interopDefaultLegacy(DSComboBox);
-var DSRadio__default = /*#__PURE__*/_interopDefaultLegacy(DSRadio);
-var DSTextBox__default = /*#__PURE__*/_interopDefaultLegacy(DSTextBox);
-var DSToggle__default = /*#__PURE__*/_interopDefaultLegacy(DSToggle);
 var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu);
 
 const _excluded = ["type", "handlers"];
@@ -32,19 +28,22 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 components = {
   DSButton: DSButton__default["default"],
-  DSCheckbox: DSCheckbox__default["default"],
-  DSComboBox: DSComboBox__default["default"],
-  DSRadio: DSRadio__default["default"],
-  DSTextBox: DSTextBox__default["default"],
-  DSToggle: DSToggle__default["default"],
+  DSCheckbox: dsForm.DSCheckbox,
+  DSComboBox: dsForm.DSComboBox,
+  DSRadio: dsForm.DSRadio,
+  DSTextBox: dsForm.DSTextBox,
+  DSToggle: dsForm.DSToggle,
   DSDropdownMenu: DSDropdownMenu__default["default"]
 };
 
-const getRendererComponent = ({
-  props
-}, _ref, {
-  rowData
-}) => {
+const getRendererComponent = (_ref2, _ref, _ref3) => {
+  let {
+    props
+  } = _ref2;
+  let {
+    rowData
+  } = _ref3;
+
   let {
     type = 'DSTextBox',
     handlers

package/cjs/plugins/editable/EditableComponents/ComboBox.js

@@ -1,14 +1,18 @@
 '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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var DSComboBox = require('@elliemae/ds-basic/form/ComboBox');
+var dsForm = require('@elliemae/ds-form');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var DSComboBox__default = /*#__PURE__*/_interopDefaultLegacy(DSComboBox);
 
 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; }
 
@@ -50,7 +54,7 @@ class ComboBox extends React.Component {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/jsxRuntime.jsx(DSComboBox__default["default"], _objectSpread(_objectSpread({}, this.props), {}, {
+    return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSComboBox, _objectSpread(_objectSpread({}, this.props), {}, {
       menuIsOpen: true,
       onBlur: this.handleBlur,
       onChange: this.handleChange,

package/cjs/plugins/editable/EditableComponents/TextBox.js

@@ -1,15 +1,19 @@
 '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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var DSTextBox = require('@elliemae/ds-basic/form/TextBox');
+var dsForm = require('@elliemae/ds-form');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var DSTextBox__default = /*#__PURE__*/_interopDefaultLegacy(DSTextBox);
 
 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; }
 
@@ -35,12 +39,13 @@ class TextBox extends React.Component {
     }, 50);
   }
 
-  handleKeyUp({
-    key,
-    target: {
-      value
-    }
-  }) {
+  handleKeyUp(_ref) {
+    let {
+      key,
+      target: {
+        value
+      }
+    } = _ref;
     const {
       onValue
     } = this.props;
@@ -69,11 +74,12 @@ class TextBox extends React.Component {
     onValue(value);
   }
 
-  handleChange({
-    target: {
-      value
-    }
-  }) {
+  handleChange(_ref2) {
+    let {
+      target: {
+        value
+      }
+    } = _ref2;
     this.setState({
       value
     });
@@ -83,7 +89,7 @@ class TextBox extends React.Component {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/jsxRuntime.jsx(DSTextBox__default["default"], _objectSpread(_objectSpread({
+    return /*#__PURE__*/jsxRuntime.jsx(dsForm.DSTextBox, _objectSpread(_objectSpread({
       "data-testid": "ds-datagrids-editable-text-box"
     }, this.props), {}, {
       innerRef: this.inputRef,

package/cjs/plugins/editable/EditablePlugin.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var useDerivedStateFromProps = require('@elliemae/ds-utilities/hooks/useDerivedStateFromProps');
-var utils = require('@elliemae/ds-utilities/utils');
+require('core-js/modules/web.dom-collections.iterator.js');
+var dsUtilities = require('@elliemae/ds-utilities');
 var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
 var decorateEditable = require('./decorateEditable.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var useDerivedStateFromProps__default = /*#__PURE__*/_interopDefaultLegacy(useDerivedStateFromProps);
 var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
 
 const registerStateHook = grid => {
@@ -19,7 +18,7 @@ const registerStateHook = grid => {
     onColumnRowEdited,
     onColumnRowEdit
   } = grid.props;
-  const [editingRows, setEditingRows] = useDerivedStateFromProps__default["default"](editingRowsProp || {});
+  const [editingRows, setEditingRows] = dsUtilities.useDerivedStateFromProps(editingRowsProp || {});
 
   const activateEdit = editParams => {
     const {
@@ -35,16 +34,17 @@ const registerStateHook = grid => {
     };
     setEditingRows(prevEditingRows => {
       onColumnRowEdit(editParams);
-      return utils.toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
+      return dsUtilities.toggleInObject(prevEditingRows, rowData[rowKey], columnIndex);
     });
   };
 
-  const editValue = ({
-    value,
-    rowData,
-    property,
-    rowIndex
-  }) => {
+  const editValue = _ref => {
+    let {
+      value,
+      rowData,
+      property,
+      rowIndex
+    } = _ref;
     setEditingRows({});
     onColumnRowEdited({
       value,
@@ -87,10 +87,11 @@ const EditablePlugin = createInstancePlugin__default["default"]('editable', {
   registerHotKeys(grid) {
     return {
       key: 'enter',
-      handler: ({
-        rowIndex,
-        cellIndex
-      }) => {
+      handler: _ref2 => {
+        let {
+          rowIndex,
+          cellIndex
+        } = _ref2;
         const {
           composedRows,
           decoratedColumns,

package/cjs/plugins/editable/decorateEditable.js

@@ -5,10 +5,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+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');
 require('react');
 var edit = require('react-edit');
-var EditPencil = require('@elliemae/ds-icons/EditPencil');
-var utils = require('@elliemae/ds-utilities/utils');
+var dsIcons = require('@elliemae/ds-icons');
+var dsUtilities = require('@elliemae/ds-utilities');
 var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
 var getEditorComponent = require('./getEditorComponent.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -37,7 +43,6 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var edit__namespace = /*#__PURE__*/_interopNamespace(edit);
-var EditPencil__default = /*#__PURE__*/_interopDefaultLegacy(EditPencil);
 
 var _EditPencil, _span;
 
@@ -77,16 +82,19 @@ const makeEditableConfig = grid => edit__namespace.edit({
     return editingRows[rowData[rowKey]] === columnIndex || column.alwaysEditing || isCustomEditing;
   },
   onActivate: () => null,
-  onValue: (...args) => grid.getInstance().actions.editValue(...args)
+  onValue: function () {
+    return grid.getInstance().actions.editValue(...arguments);
+  }
 });
 
-const addEditableToCell = ({
-  column,
-  config,
-  handlers
-}, grid) => {
+const addEditableToCell = (_ref2, grid) => {
+  let {
+    column,
+    config,
+    handlers
+  } = _ref2;
   column.cell.transforms.push(config(getEditorComponent(column.customEditor, handlers)));
-  column.cell.props.className = utils.cx(column.cell.props.className, `editable${column.customEditor ? ' customEditor' : ''}`);
+  column.cell.props.className = dsUtilities.cx(column.cell.props.className, "editable".concat(column.customEditor ? ' customEditor' : ''));
   return initColumnDefinition.appendCellFormatter([(value, extraParams) => /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/_jsx__default["default"]("div", {
       onClick: e => {
@@ -102,7 +110,7 @@ const addEditableToCell = ({
       },
       role: "gridcell",
       tabIndex: 0
-    }, void 0, value, _EditPencil || (_EditPencil = /*#__PURE__*/_jsx__default["default"](EditPencil__default["default"], {
+    }, void 0, value, _EditPencil || (_EditPencil = /*#__PURE__*/_jsx__default["default"](dsIcons.EditPencil, {
       className: "edit-pencil"
     })), _span || (_span = /*#__PURE__*/_jsx__default["default"]("span", {
       className: "edit-separator"

package/cjs/plugins/editable/getEditorComponent.js

@@ -1,5 +1,10 @@
 '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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
@@ -24,48 +29,54 @@ const components = {
   DSTextBox: TextBox
 };
 
-const getEditorComponent = (editorComponent = {}, handlers) => ({
-  value,
-  onValue,
-  extraParameters
-}) => {
-  if (typeof editorComponent === 'function') {
-    return editorComponent(_objectSpread({
+const getEditorComponent = function () {
+  let editorComponent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let handlers = arguments.length > 1 ? arguments[1] : undefined;
+  return _ref => {
+    let {
       value,
       onValue,
-      customHandlers: handlers
-    }, extraParameters));
-  }
+      extraParameters
+    } = _ref;
 
-  const {
-    type = 'DSTextBox'
-  } = editorComponent,
-        restEditorProps = _objectWithoutProperties__default["default"](editorComponent, _excluded);
+    if (typeof editorComponent === 'function') {
+      return editorComponent(_objectSpread({
+        value,
+        onValue,
+        customHandlers: handlers
+      }, extraParameters));
+    }
 
-  const Component = components[type];
+    const {
+      type = 'DSTextBox'
+    } = editorComponent,
+          restEditorProps = _objectWithoutProperties__default["default"](editorComponent, _excluded);
 
-  if (type === 'DSComboBox') {
-    var _restEditorProps$opti;
+    const Component = components[type];
 
-    // TODO: remove this whole condition when combobox v3 is out and fully working without "maxOptions" parameter
-    const maxOptions = (restEditorProps === null || restEditorProps === void 0 ? void 0 : (_restEditorProps$opti = restEditorProps.options) === null || _restEditorProps$opti === void 0 ? void 0 : _restEditorProps$opti.length) || 100;
-    return /*#__PURE__*/_jsx__default["default"]("div", {
-      style: {
-        zIndex: 0
-      }
-    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
+    if (type === 'DSComboBox') {
+      var _restEditorProps$opti;
+
+      // TODO: remove this whole condition when combobox v3 is out and fully working without "maxOptions" parameter
+      const maxOptions = (restEditorProps === null || restEditorProps === void 0 ? void 0 : (_restEditorProps$opti = restEditorProps.options) === null || _restEditorProps$opti === void 0 ? void 0 : _restEditorProps$opti.length) || 100;
+      return /*#__PURE__*/_jsx__default["default"]("div", {
+        style: {
+          zIndex: 0
+        }
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
+        autoFocus: true,
+        onValue: onValue,
+        value: value,
+        maxOptions: maxOptions
+      }, restEditorProps)));
+    }
+
+    return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
       autoFocus: true,
       onValue: onValue,
-      value: value,
-      maxOptions: maxOptions
-    }, restEditorProps)));
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({
-    autoFocus: true,
-    onValue: onValue,
-    value: value
-  }, restEditorProps));
+      value: value
+    }, restEditorProps));
+  };
 };
 
 module.exports = getEditorComponent;

package/cjs/plugins/expandable-grid/ExpandableColumn.js

@@ -1,14 +1,18 @@
 '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 _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
-var ArrowheadRight = require('@elliemae/ds-icons/ArrowheadRight');
+var dsIcons = require('@elliemae/ds-icons');
 var dsClassnames = require('@elliemae/ds-classnames');
-var DSButton = require('@elliemae/ds-basic/Button');
-var DSTruncatedTooltipText = require('@elliemae/ds-basic/TruncatedTooltipText');
+var DSButton = require('@elliemae/ds-button');
+var DSTruncatedTooltipText = require('@elliemae/ds-truncated-tooltip-text');
 var blockNames = require('../../blockNames.js');
 var rowSizes = require('../../rowSizes.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,8 +22,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
-var ArrowheadRight__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadRight);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var DSTruncatedTooltipText__default = /*#__PURE__*/_interopDefaultLegacy(DSTruncatedTooltipText);
 
@@ -30,24 +32,25 @@ var _ArrowheadDown, _ArrowheadRight;
 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 blockName = `${blockNames.dataGridBlockName}-expandable-column`; // todo: clean this when we move to css-js
+const blockName = "".concat(blockNames.dataGridBlockName, "-expandable-column"); // todo: clean this when we move to css-js
 
 const ExpandableColumnWrapper = dsClassnames.aggregatedClasses('div')(blockName);
 const LabelDescriptionWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'label-description-wrapper');
 const Label = dsClassnames.aggregatedClasses('span')(blockName, 'label');
 const Description = dsClassnames.aggregatedClasses('span')(blockName, 'description');
 const ExtraColumnData = dsClassnames.aggregatedClasses('div')(blockName, 'extra-column-data');
-const ExpandableMasterWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-master-wrapper`);
-const ExpandableDetailsWrapper = dsClassnames.aggregatedClasses('div')(`${blockName}-details-wrapper`);
+const ExpandableMasterWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-master-wrapper"));
+const ExpandableDetailsWrapper = dsClassnames.aggregatedClasses('div')("".concat(blockName, "-details-wrapper"));
 
-function ExpandableColumnCell({
-  label,
-  description,
-  isExpanded,
-  expandableDetails,
-  extraData,
-  onToggleExpand
-}) {
+function ExpandableColumnCell(_ref) {
+  let {
+    label,
+    description,
+    isExpanded,
+    expandableDetails,
+    extraData,
+    onToggleExpand
+  } = _ref;
   const ref = React.useRef();
   return /*#__PURE__*/jsxRuntime.jsxs(ExpandableColumnWrapper, {
     ref: ref,
@@ -59,7 +62,7 @@ function ExpandableColumnCell({
     }, void 0, /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
       className: "expandable-arrow",
-      icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](ArrowheadDown__default["default"], {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](ArrowheadRight__default["default"], {})),
+      icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {})),
       onClick: e => {
         onToggleExpand(e);
 
@@ -76,44 +79,48 @@ function ExpandableColumnCell({
   });
 }
 
-const expandableColumnRenderer = ({
-  renderRowLabel,
-  renderRowDescription,
-  renderExtraData
-}) => (value, {
-  rowData,
-  isExpanded
-}, grid) => {
-  const {
-    props: {
-      renderExpandedDetails
-    },
-    actions: {
-      toggleExpand
-    }
-  } = grid.getInstance();
-  const expandableDetails = renderExpandedDetails({
-    rowData
-  });
-  return /*#__PURE__*/_jsx__default["default"](ExpandableColumnCell, {
-    description: renderRowDescription({
-      rowData
-    }),
-    expandableDetails: expandableDetails,
-    extraData: renderExtraData({
-      rowData
-    }),
-    isExpanded: isExpanded,
-    label: renderRowLabel({
+const expandableColumnRenderer = _ref2 => {
+  let {
+    renderRowLabel,
+    renderRowDescription,
+    renderExtraData
+  } = _ref2;
+  return (value, _ref3, grid) => {
+    let {
+      rowData,
+      isExpanded
+    } = _ref3;
+    const {
+      props: {
+        renderExpandedDetails
+      },
+      actions: {
+        toggleExpand
+      }
+    } = grid.getInstance();
+    const expandableDetails = renderExpandedDetails({
       rowData
-    }),
-    onToggleExpand: () => toggleExpand(rowData)
-  });
+    });
+    return /*#__PURE__*/_jsx__default["default"](ExpandableColumnCell, {
+      description: renderRowDescription({
+        rowData
+      }),
+      expandableDetails: expandableDetails,
+      extraData: renderExtraData({
+        rowData
+      }),
+      isExpanded: isExpanded,
+      label: renderRowLabel({
+        rowData
+      }),
+      onToggleExpand: () => toggleExpand(rowData)
+    });
+  };
 };
 
 const noop = () => null;
 
-function createExpandableColumn(_ref) {
+function createExpandableColumn(_ref4) {
   let {
     property,
     label,
@@ -125,8 +132,8 @@ function createExpandableColumn(_ref) {
     sortable,
     searchable,
     customRenderer
-  } = _ref,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded);
+  } = _ref4,
+      rest = _objectWithoutProperties__default["default"](_ref4, _excluded);
 
   return _objectSpread(_objectSpread({}, rest), {}, {
     label,