@elliemae/ds-data-table 2.4.3-rc.8 → 2.4.4-rc.0

package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -41,32 +41,44 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$1);
 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; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const disabledCaret = /*#__PURE__*/styled$1.css(["cursor:not-allowed;svg{fill:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+});
 const StyledSpan = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;", ""], _ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled && disabledCaret;
+});
 const expandRowColumn = {
   // Build our expander column
   id: 'expander',
   // Make sure it has an ID
   accessor: 'expandRowColumn',
-  Header: _ref => {
+  Header: _ref3 => {
     let {
       ctx
-    } = _ref;
+    } = _ref3;
     const {
       tableProps: {
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       },
       allDataFlattened
     } = ctx;
     const allExpandable = React.useMemo(() => {
       const expandable = {};
       allDataFlattened.forEach(row => {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
+        if (!disabledRows[row.uid] && (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)) expandable[row.uid] = true;
       });
       return expandable;
-    }, [allDataFlattened]);
+    }, [allDataFlattened, disabledRows]);
     const isAllRowsExpanded = React.useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = React.useCallback(() => {
       if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
@@ -114,19 +126,20 @@ const expandRowColumn = {
       }
     }, void 0, GlobalExpandIcon));
   },
-  Cell: _ref2 => {
+  Cell: _ref4 => {
     let {
       cell,
       row,
       isRowSelected,
       ctx,
       draggableProps
-    } = _ref2;
+    } = _ref4;
     const {
       tableProps: {
         dragAndDropRows,
         expandedRows,
-        onRowExpand
+        onRowExpand,
+        disabledRows
       }
     } = ctx;
     const uniqueId = row.uid;
@@ -160,7 +173,7 @@ const expandRowColumn = {
       role: 'button',
       key: `${row.uid}-expand-button`,
       title: 'Toggle Row Expanded',
-      onClick: onRowExpandHandler,
+      onClick: !disabledRows[row.uid] ? onRowExpandHandler : undefined,
       onKeyDown: e => {
         if (['Enter', 'Space'].includes(e.code)) {
           e.preventDefault();
@@ -168,11 +181,12 @@ const expandRowColumn = {
         }
       },
       ref: cell.ref,
-      tabIndex: isRowSelected ? 0 : -1,
+      tabIndex: isRowSelected || disabledRows[row.uid] ? 0 : -1,
       'data-testid': 'data-table-row-expand-cell',
       'aria-expanded': isExpanded,
-      isRightArrow: !isExpanded || isDragging || isDragOverlay
-    }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
+      isRightArrow: !isExpanded || isDragging || isDragOverlay,
+      disabled: disabledRows[row.uid]
+    }), [row.uid, disabledRows, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
     const PureCaretIcon = React.useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",

package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -18,7 +18,6 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -27,6 +26,7 @@ require('../../../configs/useRowFlattenization.js');
 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');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

package/cjs/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -15,7 +15,6 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -26,6 +25,7 @@ require('../../../configs/useRowFlattenization.js');
 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');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

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

@@ -15,7 +15,6 @@ require('@elliemae/ds-button');
 require('@elliemae/ds-popperjs');
 require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
-require('react/jsx-runtime');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
@@ -26,6 +25,7 @@ require('../../../configs/useRowFlattenization.js');
 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');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');

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

@@ -21,6 +21,9 @@ require('core-js/modules/esnext.set.reduce.js');
 require('core-js/modules/esnext.set.some.js');
 require('core-js/modules/esnext.set.symmetric-difference.js');
 require('core-js/modules/esnext.set.union.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');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
@@ -33,9 +36,6 @@ require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-utilities');
 var constants = require('../../../../configs/constants.js');
-require('core-js/modules/esnext.async-iterator.filter.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
@@ -71,7 +71,8 @@ const BaseSelectFilter = props => {
     type,
     column: {
       id,
-      filterOptions: userFilterOptions
+      filterOptions: userFilterOptions,
+      filterMinWidth
     },
     ctx: {
       tableProps: {
@@ -88,7 +89,7 @@ const BaseSelectFilter = props => {
   const filterOptions = React.useMemo(() => {
     // If the user didn't provide options, use the available ones
     if (!userFilterOptions) {
-      const automaticFilters = [...new Set(data.map(datum => datum[id].toString()))].map(item => ({
+      const automaticFilters = [...new Set(data.filter(datum => !!datum[id]).map(datum => datum[id].toString()))].map(item => ({
         type: 'option',
         dsId: item,
         value: item,
@@ -117,7 +118,8 @@ const BaseSelectFilter = props => {
     "data-testid": isMulti ? constants.DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : constants.DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
     style: {
       background: '#fff',
-      position: 'relative'
+      position: 'relative',
+      width: filterMinWidth
     }
   }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSComboBox, {
     inline: true,

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

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../../redux/reducers/index.js');
 var constants = require('../../../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../../../styled.js');
 require('../../../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

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

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../../../redux/reducers/index.js');
 var constants = require('../../../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../../../styled.js');
 require('../../../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/exported-related/FilterPopover.js

@@ -15,7 +15,6 @@ var dsPopperjs = require('@elliemae/ds-popperjs');
 var styled = require('styled-components');
 require('../redux/reducers/index.js');
 var constants = require('../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 var useDispatchHeadersActions = require('../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +35,22 @@ const Button = /*#__PURE__*/styled__default["default"](DSButton.DSButton).withCo
 const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-16i88ut-2"
 })(["background-color:#fff;"]);
-const FilterPopover = _ref2 => {
+
+const ButtonTrap = _ref2 => {
+  let {
+    cb
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"]("span", {
+    "aria-hidden": "true",
+    tabIndex: 0,
+    onFocus: e => {
+      e.stopPropagation();
+      cb();
+    }
+  });
+};
+
+const FilterPopover = _ref3 => {
   let {
     column,
     columnId,
@@ -48,7 +62,7 @@ const FilterPopover = _ref2 => {
     innerRef,
     ariaLabel,
     customStyles
-  } = _ref2;
+  } = _ref3;
   const {
     hideFilterButton,
     hideFilterMenu
@@ -56,7 +70,6 @@ const FilterPopover = _ref2 => {
     hideFilterButton: true,
     hideFilterMenu: true
   };
-  const popperRef = React.useRef(null);
   const {
     patchHeaderFilterButtonAndMenu,
     patchHeader
@@ -87,6 +100,13 @@ const FilterPopover = _ref2 => {
   };
 
   const [referenceElement, setReferenceElement] = React.useState(null);
+  const buttonTrapCallback = React.useCallback(() => {
+    patchHeader(columnId, {
+      hideFilterMenu: true,
+      hideFilterButton: false
+    });
+    referenceElement?.focus();
+  }, [columnId, patchHeader, referenceElement]);
   return /*#__PURE__*/_jsx__default["default"]("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
@@ -109,11 +129,6 @@ const FilterPopover = _ref2 => {
     },
     style: {
       display: 'flex'
-    },
-    onBlur: e => {
-      if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {
-        referenceElement?.focus();
-      }
     }
   }, void 0, /*#__PURE__*/_jsx__default["default"](FilterButton, {
     hide: !isIconVisible,
@@ -145,24 +160,11 @@ const FilterPopover = _ref2 => {
       minWidth: column.ref?.current?.offsetWidth ?? '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsxRuntime.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__default["default"](PopperContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](ButtonTrap, {
+    cb: buttonTrapCallback
+  }), menuContent, /*#__PURE__*/_jsx__default["default"](ButtonTrap, {
+    cb: buttonTrapCallback
+  }))));
 };
 
 exports.FilterPopover = FilterPopover;

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

@@ -100,12 +100,18 @@ const DefaultRowContentRenderer = props => {
 
     return padding;
   }, [row.depth, visibleColumns]);
+  const handleSelectDisableRow = React.useCallback(e => {
+    if (disabledRows[row.uid]) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [disabledRows, row.uid]);
   const PureRowContent = React.useMemo(() => {
     const DetailsView = row.original.tableRowDetails;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(styled.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),
@@ -124,6 +130,7 @@ const DefaultRowContentRenderer = props => {
         selected: noSelectionColumn && selection?.[row.uid] === true,
         disabled: disabledRows[row.uid],
         "data-testid": constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT,
+        onMouseDown: handleSelectDisableRow,
         children: /*#__PURE__*/_jsx__default["default"](index$1, {
           row: row,
           isRowSelected: selectedRowId === row.uid,
@@ -134,7 +141,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/cjs/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -48,12 +48,26 @@ const useRowRendererHandlers = _ref => {
   const {
     tableProps: {
       onRowClick,
-      onRowFocus
+      onRowFocus,
+      disabledRows
     },
     virtualListHelpers: {
       scrollToIndex
     }
   } = React.useContext(DataTableContext["default"]);
+
+  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
@@ -64,6 +78,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,
@@ -75,7 +90,7 @@ const useRowRendererHandlers = _ref => {
       },
       original
     }, e);
-  }, [row, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
+  }, [row, disabledRows, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
   const isActive = draggableProps && draggableProps.active;
   const handleKeyDown = React.useCallback(e => {
     if (isDragOverlay || isActive) {
@@ -102,24 +117,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 = React.useCallback(e => {
     if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
   const handleOnFocus = React.useCallback(e => {
-    if (e.target && e.target.getAttribute('data-testid') === constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+    if (!disabledRows[row.uid] && e.target && e.target.getAttribute('data-testid') === constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
       setFocusedRowId(row.uid);
     }
-  }, [row.uid, setFocusedRowId]);
+  }, [row.uid, setFocusedRowId, disabledRows]);
   return {
     handleItemClick,
     handleKeyDown,

package/cjs/parts/Cells/Cell.js

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

package/cjs/parts/FilterBar/FiltersBar.js

@@ -20,9 +20,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 var constants = require('../../configs/constants.js');
-require('react/jsx-runtime');
 require('../../styled.js');
 var DataTableContext = require('../../DataTableContext.js');
+require('react/jsx-runtime');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.reduce.js');
@@ -88,28 +88,28 @@ const FiltersBar = () => {
   const removeAllFilters = React.useCallback(() => {
     onFiltersChange([]);
     filterBarProps?.onClearAllFiltersClick?.();
-  }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
+  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
   const onFilterBarClose = React.useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
     setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle]);
+  }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOpen = React.useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
     setIsOpen(true);
-  }, [filterBarProps.onDropdownMenuToggle]);
+  }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOnClickOutside = React.useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
     filterBarProps?.onDropdownMenuClickOutside?.();
     setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
+  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
   const onTriggerClick = React.useCallback(() => {
     filterBarProps?.onDropdownMenuTriggerClick?.();
     onFilterBarOpen();
-  }, [filterBarProps.onDropdownMenuTriggerClick]);
+  }, [filterBarProps?.onDropdownMenuTriggerClick]);
   const finalIsOpen = React.useMemo(() => {
     if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
     return isOpen;
-  }, [filterBarProps.isDropdownMenuOpen, isOpen]);
+  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
     width: width,
     "aria-live": "polite",

package/cjs/parts/Filters/index.js

@@ -25,9 +25,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 require('../../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 require('../../styled.js');
 require('../../DataTableContext.js');
+var jsxRuntime = require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -49,9 +49,10 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withCon
   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/cjs/parts/Headers/HeaderResizer.js

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

package/cjs/parts/Row.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var reactRedux = require('react-redux');
+var dsSystem = require('@elliemae/ds-system');
 var DataTableContext = require('../DataTableContext.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
@@ -29,6 +30,15 @@ const setItemRefs = (measureRef, draggableRef, ref) => {
   refsHelpers.setMultipleRefs(...refsToSet)(ref);
 };
 
+const StyledRow = dsSystem.styled('div')`
+  cursor: ${_ref => {
+  let {
+    disabled
+  } = _ref;
+  return disabled ? 'not-allowed' : 'normal';
+}};
+`;
+
 const RowComp = props => {
   const {
     row,
@@ -39,11 +49,17 @@ const RowComp = props => {
     selectedRowId
   } = props;
   const ctx = React.useContext(DataTableContext["default"]);
+  const {
+    tableProps: {
+      disabledRows
+    }
+  } = ctx;
   const {
     draggableProps
   } = React.useContext(SortableItemContext.SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
+  return /*#__PURE__*/jsxRuntime.jsx(StyledRow, {
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {

package/cjs/parts/RowVariants/index.js

@@ -16,9 +16,9 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 require('../../configs/constants.js');
-var jsxRuntime = require('react/jsx-runtime');
 require('../../styled.js');
 require('../../DataTableContext.js');
+var jsxRuntime = require('react/jsx-runtime');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-utilities');
 require('core-js/modules/esnext.async-iterator.reduce.js');