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

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

@@ -141,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

@@ -56,7 +56,7 @@ const useRowRendererHandlers = _ref => {
     }
   } = React.useContext(DataTableContext["default"]);
 
-  const isOptionFocuseable = opt => !disabledRows[opt.id];
+  const isOptionFocuseable = opt => !disabledRows[opt.uid];
 
   const findInCircularList = function (list, from, criteria) {
     let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

package/cjs/parts/Cells/Cell.js

@@ -121,7 +121,7 @@ const Cell = _ref2 => {
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
   return /*#__PURE__*/jsxRuntime.jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
-    children: column.editable && !disabledRows[row.id] ? EditableContentJSX : DefaultCellContentJSX
+    children: column.editable && !disabledRows[row.uid] ? EditableContentJSX : DefaultCellContentJSX
   }));
 };
 

package/cjs/parts/FilterBar/FiltersBar.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/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

@@ -59,7 +59,7 @@ const RowComp = props => {
   } = React.useContext(SortableItemContext.SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
   return /*#__PURE__*/jsxRuntime.jsx(StyledRow, {
-    disabled: disabledRows[row.id],
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {

package/cjs/styled.js

@@ -157,13 +157,7 @@ const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].di
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 const StyledResizer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-10"
-})(["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 ***********************************************************************/
+})(["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__default["default"].div.withConfig({
   componentId: "sc-38sgfo-11"
@@ -179,10 +173,10 @@ const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPen
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-15"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+})(["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 ************************************************************************/
 
@@ -191,15 +185,15 @@ const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-17"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+})(["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__default["default"].span.withConfig({
@@ -211,28 +205,29 @@ const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__defaul
   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 ? '' : `

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -7,7 +7,7 @@ import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useCallback } from 'react';
 import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { StyledFocusWithin } from '../../../styled.js';
 import { DATA_TESTID } from '../../../configs/constants.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
@@ -31,32 +31,44 @@ import { jsx } from 'react/jsx-runtime';
 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(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__*/css(["cursor:not-allowed;svg{fill:", ";}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colors.neutral['400'];
+});
 const StyledSpan = /*#__PURE__*/styled.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 = 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 = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
       if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
@@ -104,19 +116,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;
@@ -150,7 +163,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();
@@ -158,11 +171,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 = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx(ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",

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

@@ -17,6 +17,9 @@ import 'core-js/modules/esnext.set.reduce.js';
 import 'core-js/modules/esnext.set.some.js';
 import 'core-js/modules/esnext.set.symmetric-difference.js';
 import 'core-js/modules/esnext.set.union.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useState, useEffect } from 'react';
 import { Grid } from '@elliemae/ds-grid';
 import { DSComboBox } from '@elliemae/ds-controlled-form';
@@ -29,9 +32,6 @@ import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-utilities';
 import { DATA_TESTID } from '../../../../configs/constants.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
 import 'core-js/modules/esnext.async-iterator.reduce.js';
 import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
@@ -63,7 +63,8 @@ const BaseSelectFilter = props => {
     type,
     column: {
       id,
-      filterOptions: userFilterOptions
+      filterOptions: userFilterOptions,
+      filterMinWidth
     },
     ctx: {
       tableProps: {
@@ -80,7 +81,7 @@ const BaseSelectFilter = props => {
   const filterOptions = 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,
@@ -109,7 +110,8 @@ const BaseSelectFilter = props => {
     "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
     style: {
       background: '#fff',
-      position: 'relative'
+      position: 'relative',
+      width: filterMinWidth
     }
   }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
     inline: true,

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

@@ -132,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

@@ -52,7 +52,7 @@ const useRowRendererHandlers = _ref => {
     }
   } = useContext(DataTableContext);
 
-  const isOptionFocuseable = opt => !disabledRows[opt.id];
+  const isOptionFocuseable = opt => !disabledRows[opt.uid];
 
   const findInCircularList = function (list, from, criteria) {
     let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;

package/esm/parts/Cells/Cell.js

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

package/esm/parts/FilterBar/FiltersBar.js

@@ -78,28 +78,28 @@ const FiltersBar = () => {
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
     filterBarProps?.onClearAllFiltersClick?.();
-  }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
+  }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
   const onFilterBarClose = useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
     setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle]);
+  }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOpen = useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
     setIsOpen(true);
-  }, [filterBarProps.onDropdownMenuToggle]);
+  }, [filterBarProps?.onDropdownMenuToggle]);
   const onFilterBarOnClickOutside = useCallback(() => {
     filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
     filterBarProps?.onDropdownMenuClickOutside?.();
     setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
+  }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
   const onTriggerClick = useCallback(() => {
     filterBarProps?.onDropdownMenuTriggerClick?.();
     onFilterBarOpen();
-  }, [filterBarProps.onDropdownMenuTriggerClick]);
+  }, [filterBarProps?.onDropdownMenuTriggerClick]);
   const finalIsOpen = useMemo(() => {
     if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
     return isOpen;
-  }, [filterBarProps.isDropdownMenuOpen, isOpen]);
+  }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
   return /*#__PURE__*/_jsx(StyledWrapper, {
     width: width,
     "aria-live": "polite",

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

@@ -51,7 +51,7 @@ const RowComp = props => {
   } = useContext(SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
   return /*#__PURE__*/jsx(StyledRow, {
-    disabled: disabledRows[row.id],
+    disabled: disabledRows[row.uid],
     style: !isDragOverlay ? itemWrapperStyle : {},
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx(RowVariantMapItem, {

package/esm/styled.js

@@ -148,13 +148,7 @@ const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 const StyledResizer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-10"
-})(["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 ***********************************************************************/
+})(["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-11"
@@ -170,10 +164,10 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-15"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+})(["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 ************************************************************************/
 
@@ -182,15 +176,15 @@ const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
 })(["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-17"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+})(["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({
@@ -202,28 +196,29 @@ const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
   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 ? '' : `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.4.3-rc.9",
+  "version": "2.4.4",
   "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.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",
+    "@elliemae/ds-button": "2.4.4",
+    "@elliemae/ds-circular-progress-indicator": "2.4.4",
+    "@elliemae/ds-controlled-form": "2.4.4",
+    "@elliemae/ds-drag-and-drop": "2.4.4",
+    "@elliemae/ds-dropdownmenu": "2.4.4",
+    "@elliemae/ds-form": "2.4.4",
+    "@elliemae/ds-form-layout-blocks": "2.4.4",
+    "@elliemae/ds-grid": "2.4.4",
+    "@elliemae/ds-icons": "2.4.4",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.4",
+    "@elliemae/ds-pagination": "2.4.4",
+    "@elliemae/ds-pills": "2.4.4",
+    "@elliemae/ds-popperjs": "2.4.4",
+    "@elliemae/ds-props-helpers": "2.4.4",
+    "@elliemae/ds-system": "2.4.4",
+    "@elliemae/ds-toolbar": "2.4.4",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.4",
+    "@elliemae/ds-utilities": "2.4.4",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",

package/types/types/props.d.ts

@@ -14,6 +14,7 @@ export declare type TypescriptColumn = {
     accessor?: string;
     filter?: string;
     filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);
+    filterMinWidth?: number | string;
     Filter?: React.ComponentType<FilterProps>;
     Cell?: React.ComponentType<any>;
     editable?: string | TypescriptGenericFunc;