@elliemae/ds-data-table 2.4.3 → 2.4.5

package/esm/exported-related/FilterPopover.js

@@ -5,13 +5,12 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useRef, useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { DSButton } from '@elliemae/ds-button';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import styled from 'styled-components';
 import '../redux/reducers/index.js';
 import { DATA_TESTID } from '../configs/constants.js';
-import { jsx } from 'react/jsx-runtime';
 import { useDispatchHeadersActions } from '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -26,7 +25,22 @@ const Button = /*#__PURE__*/styled(DSButton).withConfig({
 const PopperContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-16i88ut-2"
 })(["background-color:#fff;"]);
-const FilterPopover = _ref2 => {
+
+const ButtonTrap = _ref2 => {
+  let {
+    cb
+  } = _ref2;
+  return /*#__PURE__*/_jsx("span", {
+    "aria-hidden": "true",
+    tabIndex: 0,
+    onFocus: e => {
+      e.stopPropagation();
+      cb();
+    }
+  });
+};
+
+const FilterPopover = _ref3 => {
   let {
     column,
     columnId,
@@ -38,7 +52,7 @@ const FilterPopover = _ref2 => {
     innerRef,
     ariaLabel,
     customStyles
-  } = _ref2;
+  } = _ref3;
   const {
     hideFilterButton,
     hideFilterMenu
@@ -46,7 +60,6 @@ const FilterPopover = _ref2 => {
     hideFilterButton: true,
     hideFilterMenu: true
   };
-  const popperRef = useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -77,6 +90,13 @@ const FilterPopover = _ref2 => {
   };
 
   const [referenceElement, setReferenceElement] = useState(null);
+  const buttonTrapCallback = useCallback(() => {
+    patchHeader(columnId, {
+      hideFilterMenu: true,
+      hideFilterButton: false
+    });
+    referenceElement?.focus();
+  }, [columnId, patchHeader, referenceElement]);
   return /*#__PURE__*/_jsx("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
@@ -99,11 +119,6 @@ const FilterPopover = _ref2 => {
     },
     style: {
       display: 'flex'
-    },
-    onBlur: e => {
-      if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {
-        referenceElement?.focus();
-      }
     }
   }, void 0, /*#__PURE__*/_jsx(FilterButton, {
     hide: !isIconVisible,
@@ -135,24 +150,11 @@ const FilterPopover = _ref2 => {
       minWidth: column.ref?.current?.offsetWidth ?? '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsx(PopperContent, {
-    onKeyDown: e => {
-      if (e.code === 'Tab') {
-        setTimeout(() => {
-          if (!popperRef?.current?.contains(document.activeElement)) {
-            patchHeader(columnId, {
-              hideFilterMenu: true,
-              hideFilterButton: false
-            });
-            e.preventDefault();
-            referenceElement.focus();
-          }
-        });
-      }
-    },
-    ref: popperRef,
-    children: menuContent
-  })));
+  }, void 0, /*#__PURE__*/_jsx(PopperContent, {}, void 0, /*#__PURE__*/_jsx(ButtonTrap, {
+    cb: buttonTrapCallback
+  }), menuContent, /*#__PURE__*/_jsx(ButtonTrap, {
+    cb: buttonTrapCallback
+  }))));
 };
 
 export { FilterPopover };

package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -5,7 +5,7 @@ import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useRef, useLayoutEffect, useMemo } from 'react';
+import { useRef, useLayoutEffect, useMemo, useCallback } from 'react';
 import { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';
 import { DATA_TESTID } from '../../configs/constants.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
@@ -91,12 +91,18 @@ const DefaultRowContentRenderer = props => {
 
     return padding;
   }, [row.depth, visibleColumns]);
+  const handleSelectDisableRow = useCallback(e => {
+    if (disabledRows[row.uid]) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [disabledRows, row.uid]);
   const PureRowContent = useMemo(() => {
     const DetailsView = row.original.tableRowDetails;
     return /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(StyledCellContainer, _objectSpread(_objectSpread({
         ref: rowRef,
-        tabIndex: 0,
+        tabIndex: disabledRows[row.uid] ? -1 : 0,
         role: "row",
         "aria-rowindex": row.realIndex + 1,
         "aria-label": ariaLabelMessage(row, selection?.[row.uid] === true),
@@ -115,6 +121,7 @@ const DefaultRowContentRenderer = props => {
         selected: noSelectionColumn && selection?.[row.uid] === true,
         disabled: disabledRows[row.uid],
         "data-testid": DATA_TESTID.DATA_TABLE_ROW_CONTENT,
+        onMouseDown: handleSelectDisableRow,
         children: /*#__PURE__*/_jsx(Cells, {
           row: row,
           isRowSelected: selectedRowId === row.uid,
@@ -125,7 +132,7 @@ const DefaultRowContentRenderer = props => {
         detailsIndent: detailsIndent
       }))]
     });
-  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
+  }, [row, disabledRows, selection, isExpandable, expandedRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, handleSelectDisableRow, selectedRowId, detailsIndent]);
   return PureRowContent;
 };
 

package/esm/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -44,12 +44,26 @@ const useRowRendererHandlers = _ref => {
   const {
     tableProps: {
       onRowClick,
-      onRowFocus
+      onRowFocus,
+      disabledRows
     },
     virtualListHelpers: {
       scrollToIndex
     }
   } = useContext(DataTableContext);
+
+  const isOptionFocuseable = opt => !disabledRows[opt.uid];
+
+  const findInCircularList = function (list, from, criteria) {
+    let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+
+    for (let i = (from + step + list.length) % list.length; i !== from && from > -1; i = (i + step + list.length) % list.length) {
+      if (criteria(list[i])) return i;
+    }
+
+    return from; // return same item
+  };
+
   const {
     setSelectedRowId,
     setFocusedRowId
@@ -60,6 +74,7 @@ const useRowRendererHandlers = _ref => {
       uid
     } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : row;
     // setSelectedRowId(null);
+    if (disabledRows[uid]) return;
     onRowClick(original, e, uid);
     onRowFocus({
       itemIndex,
@@ -71,7 +86,7 @@ const useRowRendererHandlers = _ref => {
       },
       original
     }, e);
-  }, [row, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
+  }, [row, disabledRows, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
   const isActive = draggableProps && draggableProps.active;
   const handleKeyDown = useCallback(e => {
     if (isDragOverlay || isActive) {
@@ -98,24 +113,27 @@ const useRowRendererHandlers = _ref => {
 
     if (e.code === 'ArrowDown') {
       e.preventDefault();
-      if (itemIndex + 1 < items.length) setFocusedRowId(items[itemIndex + 1].uid);
+      e.stopPropagation();
+      const next = findInCircularList(items, itemIndex, isOptionFocuseable);
+      setFocusedRowId(items[next].uid);
     }
 
     if (e.code === 'ArrowUp') {
       e.preventDefault();
-      if (itemIndex - 1 >= 0) setFocusedRowId(items[itemIndex - 1].uid);
+      const prev = findInCircularList(items, itemIndex, isOptionFocuseable, -1);
+      setFocusedRowId(items[prev].uid);
     }
-  }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, itemIndex, items, setFocusedRowId]);
+  }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, items, itemIndex, isOptionFocuseable, setFocusedRowId]);
   const handleOnBlur = useCallback(e => {
     if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
   const handleOnFocus = useCallback(e => {
-    if (e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+    if (!disabledRows[row.uid] && e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
       setFocusedRowId(row.uid);
     }
-  }, [row.uid, setFocusedRowId]);
+  }, [row.uid, setFocusedRowId, disabledRows]);
   return {
     handleItemClick,
     handleKeyDown,

package/esm/exported-related/Toolbar/Toolbar.js

@@ -45,22 +45,15 @@ const Toolbar = _ref => {
     children
   } = _ref;
   const [show, setShow] = useState(false);
-  const [clicked, setClicked] = useState(false);
   const toolbarRef = useRef(null);
-  const handleOnClickOutside = useCallback(() => {
-    setShow(false);
-    setClicked(false);
-  }, []);
-  const handleOnClick = useCallback(() => {
-    setShow(true);
-    setClicked(true);
-  }, []);
+  const handleOnClickOutside = useCallback(() => setShow(false), []);
+  const handleOnClick = useCallback(() => setShow(true), []);
   useOnClickOutside(toolbarRef, handleOnClickOutside);
   return /*#__PURE__*/jsx(ToolbarPosition, {
     ref: toolbarRef,
     children: /*#__PURE__*/_jsx(ToolbarWrapper, {
       onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(clicked)
+      onMouseLeave: () => setShow(false)
     }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
       className: "toolbar-trigger",

package/esm/parts/Cells/Cell.js

@@ -63,7 +63,8 @@ const Cell = _ref2 => {
   const ctx = useContext(DataTableContext);
   const {
     tableProps: {
-      cellRendererProps
+      cellRendererProps,
+      disabledRows
     }
   } = ctx;
   const {
@@ -112,7 +113,7 @@ const Cell = _ref2 => {
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
   return /*#__PURE__*/jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
-    children: column.editable ? EditableContentJSX : DefaultCellContentJSX
+    children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/esm/parts/FilterBar/FiltersBar.js

@@ -4,7 +4,7 @@ import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import React, { useContext, useMemo, useRef, useCallback } from 'react';
+import React, { useContext, useState, useMemo, useRef, useCallback } from 'react';
 import DSButton from '@elliemae/ds-button';
 import { MoreOptionsVert } from '@elliemae/ds-icons';
 import 'core-js/modules/esnext.async-iterator.filter.js';
@@ -16,9 +16,9 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../redux/reducers/index.js';
 import { DATA_TESTID } from '../../configs/constants.js';
-import 'react/jsx-runtime';
 import '../../styled.js';
 import DataTableContext from '../../DataTableContext.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
@@ -66,6 +66,7 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = useContext(DataTableContext);
+  const [isOpen, setIsOpen] = useState(false);
   const pillGroupRefs = useMemo(() => {
     const refs = [];
 
@@ -76,7 +77,29 @@ const FiltersBar = () => {
   const dropdownMenuRef = useRef(null);
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
-  }, [onFiltersChange]);
+    filterBarProps?.onClearAllFiltersClick?.();
+  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
+  const onFilterBarClose = useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
+    setIsOpen(false);
+  }, [filterBarProps?.onDropdownMenuToggle]);
+  const onFilterBarOpen = useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
+    setIsOpen(true);
+  }, [filterBarProps?.onDropdownMenuToggle]);
+  const onFilterBarOnClickOutside = useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
+    filterBarProps?.onDropdownMenuClickOutside?.();
+    setIsOpen(false);
+  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
+  const onTriggerClick = useCallback(() => {
+    filterBarProps?.onDropdownMenuTriggerClick?.();
+    onFilterBarOpen();
+  }, [filterBarProps?.onDropdownMenuTriggerClick]);
+  const finalIsOpen = useMemo(() => {
+    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
+    return isOpen;
+  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
   return /*#__PURE__*/_jsx(StyledWrapper, {
     width: width,
     "aria-live": "polite",
@@ -112,6 +135,9 @@ const FiltersBar = () => {
     }, column);
   }), /*#__PURE__*/_jsx(StyledDropdownMenu, {
     preventOverflow: "scrollParent",
+    isOpen: finalIsOpen,
+    onClose: onFilterBarClose,
+    onClickOutsideMenu: onFilterBarOnClickOutside,
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
@@ -123,6 +149,7 @@ const FiltersBar = () => {
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
+      onClick: onTriggerClick,
       icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
     })
   }));

package/esm/parts/Filters/index.js

@@ -21,9 +21,9 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
-import { jsx } from 'react/jsx-runtime';
 import '../../styled.js';
 import '../../DataTableContext.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';

package/esm/parts/Headers/HeaderCellGroup.js

@@ -40,9 +40,10 @@ const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-1dqaj8a-0"
 })(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
   let {
-    shouldDropOneLevel
+    shouldDropOneLevel,
+    isDragOverlay
   } = _ref;
-  return shouldDropOneLevel ? `top: 50%; height: 50%;` : '';
+  return shouldDropOneLevel && !isDragOverlay ? `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

package/esm/parts/Headers/HeaderResizer.js

@@ -71,9 +71,9 @@ const HeaderResizer = _ref => {
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = useCallback(() => {
-    onColumnResize(column.id, nextWidth);
     setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
     setIsResizing(false);
+    onColumnResize(column.id, nextWidth);
   }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;

package/esm/parts/Row.js

@@ -1,6 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext } from 'react';
 import { connect } from 'react-redux';
+import { styled } from '@elliemae/ds-system';
 import DataTableContext from '../DataTableContext.js';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
@@ -21,6 +22,15 @@ const setItemRefs = (measureRef, draggableRef, ref) => {
   setMultipleRefs(...refsToSet)(ref);
 };
 
+const StyledRow = styled('div')`
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'normal';
+}};
+`;
+
 const RowComp = props => {
   const {
     row,
@@ -31,11 +41,17 @@ const RowComp = props => {
     selectedRowId
   } = props;
   const ctx = useContext(DataTableContext);
+  const {
+    tableProps: {
+      disabledRows
+    }
+  } = ctx;
   const {
     draggableProps
   } = useContext(SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx(StyledRow, {
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx(RowVariantMapItem, {

package/esm/parts/RowVariants/index.js

@@ -12,9 +12,9 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
-import { jsx } from 'react/jsx-runtime';
 import '../../styled.js';
 import '../../DataTableContext.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';

package/esm/parts/TableContent.js

@@ -7,7 +7,7 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext, useState, useMemo } from 'react';
 import { connect } from 'react-redux';
-import { StyledDataTableWrapper, StyledTableWrapper } from '../styled.js';
+import { StyledDataTableContentWrapper, StyledTableWrapper } from '../styled.js';
 import DataTableContext from '../DataTableContext.js';
 import { Pagination } from '../addons/Pagination/Pagination.js';
 import VirtualRowsList from './VirtualRowsList.js';
@@ -56,7 +56,7 @@ const TableContentComponent = props => {
     visibleColumns
   } = useContext(DataTableContext);
   const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
-  const PureTableContent = useMemo(() => /*#__PURE__*/jsxs(StyledDataTableWrapper, {
+  const PureTableContent = useMemo(() => /*#__PURE__*/jsxs(StyledDataTableContentWrapper, {
     "data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
     height: height,
     width: width,

package/esm/styled.js

@@ -54,14 +54,17 @@ const StyledFocusWithin = /*#__PURE__*/styled(Grid).withConfig({
 })([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
 const StyledDataTableWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["width:", ";height:", ";user-select:", ";"], props => sizeToCss(props.width ?? ' 100%'), props => sizeToCss(props.height ?? ' 100%'), _ref2 => {
+})(["width:", ";height:", ";"], props => sizeToCss(props.width ?? ' 100%'), props => sizeToCss(props.height ?? ' 100%'));
+const StyledDataTableContentWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-38sgfo-2"
+})(["user-select:", ";width:100%;height:100%;"], _ref2 => {
   let {
     noSelectionAllowed
   } = _ref2;
   return noSelectionAllowed ? 'none' : 'auto';
 });
 const StyledTableWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-2"
+  componentId: "sc-38sgfo-3"
 })(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], _ref3 => {
   let {
     width = '100%',
@@ -73,7 +76,7 @@ const StyledTableWrapper = /*#__PURE__*/styled.div.withConfig({
   `;
 });
 const StyledTableContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-3"
+  componentId: "sc-38sgfo-4"
 })(["position:relative;", ""], _ref4 => {
   let {
     height = 'auto'
@@ -83,7 +86,7 @@ const StyledTableContentWrapper = /*#__PURE__*/styled.div.withConfig({
   `;
 });
 const StyledVirtualListWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-4"
+  componentId: "sc-38sgfo-5"
 })(["overflow:auto;", ""], _ref5 => {
   let {
     height = 'auto',
@@ -114,18 +117,17 @@ const getGridTemplateColumnsStyle = _ref6 => {
 };
 
 const StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-5"
+  componentId: "sc-38sgfo-6"
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-6"
-})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+  componentId: "sc-38sgfo-7"
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
-
 const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-7"
+  componentId: "sc-38sgfo-8"
 })(["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:", ";}}"], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
           &:after {
             display: block;
@@ -142,86 +144,81 @@ const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
           cursor: pointer;
         }`, props => props.theme.colors.brand[700], ZIndexDataTable.FOCUS_BORDER);
 const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-8"
+  componentId: "sc-38sgfo-9"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 const StyledResizer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-9"
-})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], _ref7 => {
-  let {
-    isResizing,
-    theme
-  } = _ref7;
-  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
-}); // CELL ***********************************************************************/
+  componentId: "sc-38sgfo-10"
+})(["display:inline-block;background:transparent;width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"]); // CELL ***********************************************************************/
 
 const StyledActionCell = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-10"
+  componentId: "sc-38sgfo-11"
 })(["position:relative;position:sticky;display:inline-block;right:0;background:white;"]);
 const StyledCell = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-11"
+  componentId: "sc-38sgfo-12"
 })(["", " display:flex;align-items:center;width:100%;position:relative;"], cellPadding);
 const StyledCellContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-38sgfo-12"
+  componentId: "sc-38sgfo-13"
 })(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
 const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
-  componentId: "sc-38sgfo-13"
+  componentId: "sc-38sgfo-14"
 })([""]);
 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, _ref8 => {
+  componentId: "sc-38sgfo-15"
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref7 => {
   let {
     shouldDisplayEditIcon
-  } = _ref8;
+  } = _ref7;
   return shouldDisplayEditIcon ? 'block' : 'none';
 }, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-15"
+  componentId: "sc-38sgfo-16"
 })(["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;"], _ref9 => {
+  componentId: "sc-38sgfo-17"
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme.colors.brand[200];
-}, props => props.padding, _ref10 => {
+}, props => props.padding, _ref9 => {
   let {
     theme
-  } = _ref10;
+  } = _ref9;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-38sgfo-17"
+  componentId: "sc-38sgfo-18"
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
 const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
-  componentId: "sc-38sgfo-18"
+  componentId: "sc-38sgfo-19"
 })(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref11 => {
+}), _ref10 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref11;
+  } = _ref10;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref12;
+  } = _ref11;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref13 => {
+}, _ref12 => {
   let {
     shouldDisplayHover,
-    theme
-  } = _ref13;
-  return shouldDisplayHover ? `:hover {
+    theme,
+    disabled
+  } = _ref12;
+  return shouldDisplayHover && !disabled ? `: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 ? '' : `
@@ -229,4 +226,4 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
     border: 1px solid ${props.theme.colors.brand[500]};
     `, props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
-export { GroupHeaderContainer, GroupHeaderTitle, StyledActionCell, StyledCell, StyledCellContainer, StyledCellContent, StyledDataTableWrapper, StyledEditableContainer, StyledFocusWithin, StyledFullsizeGrid, StyledHeadTh, StyledHeadTr, StyledHeadWrapper, StyledHeaderRightIconsWrapper, StyledPencilIcon, StyledResizer, StyledTableContentWrapper, StyledTableWrapper, StyledVirtualListWrapper };
+export { GroupHeaderContainer, GroupHeaderTitle, StyledActionCell, StyledCell, StyledCellContainer, StyledCellContent, StyledDataTableContentWrapper, StyledDataTableWrapper, StyledEditableContainer, StyledFocusWithin, StyledFullsizeGrid, StyledHeadTh, StyledHeadTr, StyledHeadWrapper, StyledHeaderRightIconsWrapper, StyledPencilIcon, StyledResizer, StyledTableContentWrapper, StyledTableWrapper, StyledVirtualListWrapper };