@elliemae/ds-data-table 2.4.3 → 2.4.5

package/cjs/DataTable.js

@@ -21,6 +21,7 @@ var useDatatableConfig = require('./configs/useDatatableConfig.js');
 require('./configs/useRowFlattenization.js');
 var FiltersBar = require('./parts/FilterBar/FiltersBar.js');
 var DataTableSchema = require('./DataTableSchema.js');
+var styled = require('./styled.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -41,13 +42,21 @@ const DataTable = props => {
   const tableWrapperRef = React.useRef();
   const tableContentWrapperRef = React.useRef();
   const ctx = useDatatableConfig.useDatatableConfig(props);
+  const {
+    tableProps: {
+      height,
+      width
+    }
+  } = ctx;
   return /*#__PURE__*/_jsx__default["default"](reactRedux.Provider, {
     store: reduxStore
   }, void 0, /*#__PURE__*/_jsx__default["default"](DataTableContext["default"].Provider, {
     value: ctx
-  }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", {
+  }, void 0, /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableWrapper, {
     ref: tableWrapperRef,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_WRAPPER,
+    height: height,
+    width: width,
     children: [withFilterBar ? _FiltersBar || (_FiltersBar = /*#__PURE__*/_jsx__default["default"](FiltersBar.FiltersBar, {})) : null, /*#__PURE__*/jsxRuntime.jsx(TableContent, {
       ref: tableContentWrapperRef
     })]

package/cjs/DataTableSchema.js

@@ -57,6 +57,11 @@ const DataTableSchema = {
   withFilterBar: dsPropsHelpers.PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: dsPropsHelpers.PropTypes.shape({
     customPillRenderer: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    isDropdownMenuOpen: dsPropsHelpers.PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
+    onDropdownMenuToggle: dsPropsHelpers.PropTypes.func.description('Callback to toggle the DropdownMenu.'),
+    onClearAllFiltersClick: dsPropsHelpers.PropTypes.func.description('Callback for Clear Al Filters option.'),
+    onDropdownMenuClickOutside: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
+    onDropdownMenuTriggerClick: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
     extraOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.shape({
       type: dsPropsHelpers.PropTypes.string,
       id: dsPropsHelpers.PropTypes.string,

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');
@@ -55,6 +55,8 @@ require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
 require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
+require('../../../../redux/reducers/index.js');
+var useDispatchHeadersActions = require('../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,7 +71,8 @@ const BaseSelectFilter = props => {
     type,
     column: {
       id,
-      filterOptions: userFilterOptions
+      filterOptions: userFilterOptions,
+      filterMinWidth
     },
     ctx: {
       tableProps: {
@@ -80,10 +83,13 @@ const BaseSelectFilter = props => {
     innerRef,
     onValueChange
   } = props;
+  const {
+    patchHeaderFilterButtonAndMenu
+  } = useDispatchHeadersActions.useDispatchHeadersActions();
   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,
@@ -100,6 +106,7 @@ const BaseSelectFilter = props => {
 
   const handleOnChange = value => {
     onValueChange(type, value);
+    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);
   };
 
   const [filters, setFilteredOptions] = React.useState(filterOptions);
@@ -111,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/configs/useDatatableConfig.js

@@ -54,7 +54,11 @@ const useDatatableConfig = props => {
   // Layout config
   // ===========================================================================
 
-  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
+  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
+
+  React.useEffect(() => {
+    setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
+  }, [visibleColumns, props.colsLayoutStyle]);
   const totalColumnsWidth = React.useMemo(() => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
   const layoutHelpers = React.useMemo(() => ({
     gridLayout,

package/cjs/exported-related/EditableCell.js

@@ -18,8 +18,7 @@ const EditableCell = props => {
     StandardRender,
     EditableRenderer,
     cell,
-    isRowSelected,
-    setValue
+    isRowSelected
   } = props;
   const {
     virtualListHelpers

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/exported-related/Toolbar/Toolbar.js

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

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');
@@ -76,6 +76,7 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = React.useContext(DataTableContext["default"]);
+  const [isOpen, setIsOpen] = React.useState(false);
   const pillGroupRefs = React.useMemo(() => {
     const refs = [];
 
@@ -86,7 +87,29 @@ const FiltersBar = () => {
   const dropdownMenuRef = React.useRef(null);
   const removeAllFilters = React.useCallback(() => {
     onFiltersChange([]);
-  }, [onFiltersChange]);
+    filterBarProps?.onClearAllFiltersClick?.();
+  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
+  const onFilterBarClose = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
+    setIsOpen(false);
+  }, [filterBarProps?.onDropdownMenuToggle]);
+  const onFilterBarOpen = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
+    setIsOpen(true);
+  }, [filterBarProps?.onDropdownMenuToggle]);
+  const onFilterBarOnClickOutside = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
+    filterBarProps?.onDropdownMenuClickOutside?.();
+    setIsOpen(false);
+  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
+  const onTriggerClick = React.useCallback(() => {
+    filterBarProps?.onDropdownMenuTriggerClick?.();
+    onFilterBarOpen();
+  }, [filterBarProps?.onDropdownMenuTriggerClick]);
+  const finalIsOpen = React.useMemo(() => {
+    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
+    return isOpen;
+  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
     width: width,
     "aria-live": "polite",
@@ -122,6 +145,9 @@ const FiltersBar = () => {
     }, column);
   }), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
     preventOverflow: "scrollParent",
+    isOpen: finalIsOpen,
+    onClose: onFilterBarClose,
+    onClickOutsideMenu: onFilterBarOnClickOutside,
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
@@ -133,6 +159,7 @@ const FiltersBar = () => {
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
+      onClick: onTriggerClick,
       icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
     })
   }));

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');