@elliemae/ds-data-table 2.0.0-rc.9 → 2.0.0

package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -79,15 +79,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = React.useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx__default["default"](StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -117,7 +117,10 @@ const CurrencyRangeFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "Min",
       inputID: "".concat(idPreffix, "-min-").concat(column.id)

package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -92,7 +92,10 @@ const DateSwitcherFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       p: "xxs",
-      gutter: "xxs"
+      gutter: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
       checked: isDateRange,
       name: "Date range",

package/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -120,7 +120,10 @@ const NumberRangeFilter = props => {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "Low",
       inputID: "".concat(idPreffix, "-low-").concat(column.id)

package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -140,7 +140,8 @@ const BaseSelectFilter = props => {
     options: filters,
     onChange: handleOnChange,
     selectedValues: selectedItems,
-    onFilter: handleOnFilter
+    onFilter: handleOnFilter,
+    menuMaxHeight: 300
   }));
 
   const handleOnClickOutside = () => {
@@ -157,8 +158,7 @@ const BaseSelectFilter = props => {
     ariaLabel: "Open Selection Filter",
     onClickOutsideMenu: handleOnClickOutside,
     customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px',
-      maxHeight: '300px'
+      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }
   });
 };

package/cjs/exported-related/EditableCell.js

@@ -19,7 +19,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -41,20 +42,25 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = React.useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = React.useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,

package/cjs/exported-related/FilterPopover.js

@@ -54,7 +54,7 @@ const Button = /*#__PURE__*/styled__default["default"](DSButton__default["defaul
 })(["position:relative;justify-self:flex-end;"]);
 const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-16i88ut-2"
-})(["background-color:'#fff';"]);
+})(["background-color:#fff;"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -14,10 +14,11 @@ require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var core = require('@dnd-kit/core');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
 var sortable = require('@dnd-kit/sortable');
-var useHierarchyDndkitConfig = require('../../helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js');
 var DataTableContext = require('../../DataTableContext.js');
 var HeaderCellGroup = require('../Headers/HeaderCellGroup.js');
+var constants = require('../../configs/constants.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -86,14 +87,30 @@ 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, "\"]"));
+    if (el) el.onscroll = () => null;
+  }, []);
+  const onPreviewDragStart = React.useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
+    if (el) {
+      const y = el.scrollTop;
+
+      el.onscroll = () => el.scrollTo(0, y);
+    }
+  }, []);
   const {
     dndContextProps,
     activeId,
     activeIndex
-  } = useHierarchyDndkitConfig({
+  } = dsDragAndDrop.useHierarchyDndkitConfig({
     flattenedItems,
+    dragOverlayDataTestid: constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
     isHorizontalDnD: true,
-    onReorder
+    onReorder,
+    onPreviewResetState,
+    onPreviewDragStart
   });
   if (dragAndDropColumns) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/_jsx__default["default"](DnDGroupContext.Provider, {

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -16,7 +16,7 @@ var React = require('react');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
-var useTreeDndkitConfig = require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
 var SortableItemContext = require('./SortableItemContext.js');
 var Row = require('../Row.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -78,7 +78,7 @@ const withConditionalDnDRowContext = Component => props => {
     depth,
     dropIndicatorPosition,
     visibleItems
-  } = useTreeDndkitConfig({
+  } = dsDragAndDrop.useTreeDndkitConfig({
     flattenedItems: allDataFlattened,
     visibleItems: flattenedData,
     isHorizontalDnD: false,

package/cjs/styled.js

@@ -158,22 +158,27 @@ const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPen
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.brand[200];
-}, props => props.padding, _ref9 => {
+}, props => props.padding, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
@@ -185,27 +190,27 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref10 => {
+}), _ref11 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref10;
+  } = _ref11;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref11;
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref12 => {
+}, _ref13 => {
   let {
     shouldDisplayHover,
     theme
-  } = _ref12;
+  } = _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');
 

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

@@ -70,15 +70,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx(StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -107,7 +107,10 @@ const CurrencyRangeFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Min",
       inputID: "".concat(idPreffix, "-min-").concat(column.id)

package/esm/addons/Filters/Components/DateSwitcherFilter/index.js

@@ -83,7 +83,10 @@ const DateSwitcherFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx(Grid, {
       p: "xxs",
-      gutter: "xxs"
+      gutter: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
       checked: isDateRange,
       name: "Date range",

package/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -110,7 +110,10 @@ const NumberRangeFilter = props => {
       "data-testid": DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
-      cols: ['auto', 'auto']
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Low",
       inputID: "".concat(idPreffix, "-low-").concat(column.id)

package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -132,7 +132,8 @@ const BaseSelectFilter = props => {
     options: filters,
     onChange: handleOnChange,
     selectedValues: selectedItems,
-    onFilter: handleOnFilter
+    onFilter: handleOnFilter,
+    menuMaxHeight: 300
   }));
 
   const handleOnClickOutside = () => {
@@ -149,8 +150,7 @@ const BaseSelectFilter = props => {
     ariaLabel: "Open Selection Filter",
     onClickOutsideMenu: handleOnClickOutside,
     customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px',
-      maxHeight: '300px'
+      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }
   });
 };

package/esm/exported-related/EditableCell.js

@@ -11,7 +11,8 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected
+    isRowSelected,
+    setValue
   } = props;
   const {
     virtualListHelpers
@@ -33,20 +34,25 @@ const EditableCell = props => {
     }
   }, [isEditing]);
   const handleOnKeyDown = useCallback(e => {
-    if (isEditing) e.stopPropagation();
+    if (isEditing) {
+      e.stopPropagation();
 
-    if (['Enter', 'Space'].includes(e.code)) {
+      if (['Enter', 'Escape'].includes(e.code)) {
+        setIsEditing(false);
+      }
+    } else if (['Enter', 'Space'].includes(e.code)) {
       handleCellClick(e);
     }
-  }, [isEditing, handleCellClick]);
+  }, [isEditing, handleCellClick, setIsEditing]);
   const handleOnBlur = useCallback(event => {
     if (isEditing && !event.currentTarget.contains(event.relatedTarget)) {
       // Not triggered when swapping focus between children
       setIsEditing(false);
     }
   }, [isEditing]);
+  const cols = !isEditing ? ['auto', 'min-content'] : ['auto'];
   return /*#__PURE__*/jsxs(StyledEditableContainer, {
-    cols: !isEditing ? ['auto', 'min-content'] : ['auto'],
+    cols: cols,
     tabIndex: isRowSelected && !isEditing ? 0 : -1,
     ref: cell.ref,
     onClick: handleCellClick,

package/esm/exported-related/FilterPopover.js

@@ -43,7 +43,7 @@ const Button = /*#__PURE__*/styled(DSButton).withConfig({
 })(["position:relative;justify-self:flex-end;"]);
 const PopperContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-16i88ut-2"
-})(["background-color:'#fff';"]);
+})(["background-color:#fff;"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 

package/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -10,10 +10,11 @@ import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.find.js';
 import React, { useMemo, useCallback, createContext } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
+import { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';
 import { arrayMove } from '@dnd-kit/sortable';
-import useHierarchyDndkitConfig from '../../helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js';
 import DataTableContext from '../../DataTableContext.js';
 import { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';
+import { DATA_TESTID } from '../../configs/constants.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }
@@ -76,14 +77,30 @@ const withConditionalDnDColumnContext = Component => props => {
     });
     onColumnsReorder(newData, indexes);
   }, [flattenedItems, onColumnsReorder]);
+  const onPreviewResetState = useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    if (el) el.onscroll = () => null;
+  }, []);
+  const onPreviewDragStart = useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
+    if (el) {
+      const y = el.scrollTop;
+
+      el.onscroll = () => el.scrollTo(0, y);
+    }
+  }, []);
   const {
     dndContextProps,
     activeId,
     activeIndex
   } = useHierarchyDndkitConfig({
     flattenedItems,
+    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
     isHorizontalDnD: true,
-    onReorder
+    onReorder,
+    onPreviewResetState,
+    onPreviewDragStart
   });
   if (dragAndDropColumns) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/_jsx(DnDGroupContext.Provider, {

package/esm/parts/HoC/withConditionalDnDRowContext.js

@@ -12,7 +12,7 @@ import React, { createContext, useCallback } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { SortableContext } from '@dnd-kit/sortable';
 import DataTableContext from '../../DataTableContext.js';
-import useTreeDndkitConfig from '../../helpers/dndkit/tree/useTreeDndkitConfig.js';
+import { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';
 import { DropIndicatorPosition } from './SortableItemContext.js';
 import { Row } from '../Row.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/esm/styled.js

@@ -149,22 +149,27 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.brand[200];
-}, props => props.padding, _ref9 => {
+}, props => props.padding, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
@@ -176,27 +181,27 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref10 => {
+}), _ref11 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref10;
+  } = _ref11;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref11;
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref12 => {
+}, _ref13 => {
   let {
     shouldDisplayHover,
     theme
-  } = _ref12;
+  } = _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');