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

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/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,

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.id];
+
+  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.id] ? 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');

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/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.id],
     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');

package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -14,7 +14,6 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
-import 'react/jsx-runtime';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
@@ -23,6 +22,7 @@ import '../../../configs/useRowFlattenization.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import '../../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';

package/esm/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -11,7 +11,6 @@ import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
-import 'react/jsx-runtime';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
@@ -22,6 +21,7 @@ import '../../../configs/useRowFlattenization.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import '../../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';

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

@@ -11,7 +11,6 @@ import '@elliemae/ds-button';
 import '@elliemae/ds-popperjs';
 import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
-import 'react/jsx-runtime';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
@@ -22,6 +21,7 @@ import '../../../configs/useRowFlattenization.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import '../../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';

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

@@ -12,9 +12,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.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';

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

@@ -12,9 +12,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.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-utilities';
 import 'core-js/modules/esnext.async-iterator.reduce.js';

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,

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.id];
+
+  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/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.id] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/esm/parts/FilterBar/FiltersBar.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';

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/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.id],
     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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.4.3-rc.8",
+  "version": "2.4.3-rc.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -570,24 +570,24 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.4.3-rc.8",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.8",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.8",
-    "@elliemae/ds-drag-and-drop": "2.4.3-rc.8",
-    "@elliemae/ds-dropdownmenu": "2.4.3-rc.8",
-    "@elliemae/ds-form": "2.4.3-rc.8",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.8",
-    "@elliemae/ds-grid": "2.4.3-rc.8",
-    "@elliemae/ds-icons": "2.4.3-rc.8",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.8",
-    "@elliemae/ds-pagination": "2.4.3-rc.8",
-    "@elliemae/ds-pills": "2.4.3-rc.8",
-    "@elliemae/ds-popperjs": "2.4.3-rc.8",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.8",
-    "@elliemae/ds-system": "2.4.3-rc.8",
-    "@elliemae/ds-toolbar": "2.4.3-rc.8",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.8",
-    "@elliemae/ds-utilities": "2.4.3-rc.8",
+    "@elliemae/ds-button": "2.4.3-rc.9",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.9",
+    "@elliemae/ds-controlled-form": "2.4.3-rc.9",
+    "@elliemae/ds-drag-and-drop": "2.4.3-rc.9",
+    "@elliemae/ds-dropdownmenu": "2.4.3-rc.9",
+    "@elliemae/ds-form": "2.4.3-rc.9",
+    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.9",
+    "@elliemae/ds-grid": "2.4.3-rc.9",
+    "@elliemae/ds-icons": "2.4.3-rc.9",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.9",
+    "@elliemae/ds-pagination": "2.4.3-rc.9",
+    "@elliemae/ds-pills": "2.4.3-rc.9",
+    "@elliemae/ds-popperjs": "2.4.3-rc.9",
+    "@elliemae/ds-props-helpers": "2.4.3-rc.9",
+    "@elliemae/ds-system": "2.4.3-rc.9",
+    "@elliemae/ds-toolbar": "2.4.3-rc.9",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.9",
+    "@elliemae/ds-utilities": "2.4.3-rc.9",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",