@elliemae/ds-data-table 2.4.3 → 2.4.5

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -49,9 +49,10 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withCon
   componentId: "sc-1dqaj8a-0"
 })(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
   let {
-    shouldDropOneLevel
+    shouldDropOneLevel,
+    isDragOverlay
   } = _ref;
-  return shouldDropOneLevel ? `top: 50%; height: 50%;` : '';
+  return shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '';
 }, props => props.isDragOverlay ? 'fit-content' : '100%', props => props.gridColumn, props => props.isDragging ? props.theme.colors.neutral['080'] : 'white', props => props.isDragging ? 0.8 : 1, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', _ref2 => {
   let {
     isFirst

package/cjs/parts/Headers/HeaderResizer.js

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

package/cjs/parts/Row.js

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

package/cjs/parts/RowVariants/index.js

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

package/cjs/parts/TableContent.js

@@ -64,7 +64,7 @@ const TableContentComponent = props => {
     visibleColumns
   } = React.useContext(DataTableContext["default"]);
   const [shiftKeyPressed, setShiftKeyPressed] = React.useState(false);
-  const PureTableContent = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableWrapper, {
+  const PureTableContent = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(styled.StyledDataTableContentWrapper, {
     "data-testid": constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
     height: height,
     width: width,

package/cjs/styled.js

@@ -63,14 +63,17 @@ const StyledFocusWithin = /*#__PURE__*/styled__default["default"](Grid__default[
 })([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
 const StyledDataTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["width:", ";height:", ";user-select:", ";"], props => sizeToCss.sizeToCss(props.width ?? ' 100%'), props => sizeToCss.sizeToCss(props.height ?? ' 100%'), _ref2 => {
+})(["width:", ";height:", ";"], props => sizeToCss.sizeToCss(props.width ?? ' 100%'), props => sizeToCss.sizeToCss(props.height ?? ' 100%'));
+const StyledDataTableContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-2"
+})(["user-select:", ";width:100%;height:100%;"], _ref2 => {
   let {
     noSelectionAllowed
   } = _ref2;
   return noSelectionAllowed ? 'none' : 'auto';
 });
 const StyledTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-2"
+  componentId: "sc-38sgfo-3"
 })(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], _ref3 => {
   let {
     width = '100%',
@@ -82,7 +85,7 @@ const StyledTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfi
   `;
 });
 const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-3"
+  componentId: "sc-38sgfo-4"
 })(["position:relative;", ""], _ref4 => {
   let {
     height = 'auto'
@@ -92,7 +95,7 @@ const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.wi
   `;
 });
 const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-4"
+  componentId: "sc-38sgfo-5"
 })(["overflow:auto;", ""], _ref5 => {
   let {
     height = 'auto',
@@ -123,18 +126,17 @@ const getGridTemplateColumnsStyle = _ref6 => {
 };
 
 const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-5"
+  componentId: "sc-38sgfo-6"
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-38sgfo-6"
-})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+  componentId: "sc-38sgfo-7"
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
-
 const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-7"
+  componentId: "sc-38sgfo-8"
 })(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
           &:after {
             display: block;
@@ -151,86 +153,81 @@ const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
           cursor: pointer;
         }`, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER);
 const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-8"
+  componentId: "sc-38sgfo-9"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 const StyledResizer = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-9"
-})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], _ref7 => {
-  let {
-    isResizing,
-    theme
-  } = _ref7;
-  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
-}); // CELL ***********************************************************************/
+  componentId: "sc-38sgfo-10"
+})(["display:inline-block;background:transparent;width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"]); // CELL ***********************************************************************/
 
 const StyledActionCell = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-10"
+  componentId: "sc-38sgfo-11"
 })(["position:relative;position:sticky;display:inline-block;right:0;background:white;"]);
 const StyledCell = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-11"
+  componentId: "sc-38sgfo-12"
 })(["", " display:flex;align-items:center;width:100%;position:relative;"], cellPadding.cellPadding);
 const StyledCellContent = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-38sgfo-12"
+  componentId: "sc-38sgfo-13"
 })(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
 const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPencil).withConfig({
-  componentId: "sc-38sgfo-13"
+  componentId: "sc-38sgfo-14"
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  componentId: "sc-38sgfo-15"
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref7 => {
   let {
     shouldDisplayEditIcon
-  } = _ref8;
+  } = _ref7;
   return shouldDisplayEditIcon ? 'block' : 'none';
 }, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-38sgfo-15"
+  componentId: "sc-38sgfo-16"
 })(["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-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+  componentId: "sc-38sgfo-17"
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme.colors.brand[200];
-}, props => props.padding, _ref10 => {
+}, props => props.padding, _ref9 => {
   let {
     theme
-  } = _ref10;
+  } = _ref9;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-38sgfo-17"
+  componentId: "sc-38sgfo-18"
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
 const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
-  componentId: "sc-38sgfo-18"
+  componentId: "sc-38sgfo-19"
 })(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref11 => {
+}), _ref10 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref11;
+  } = _ref10;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref12;
+  } = _ref11;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref13 => {
+}, _ref12 => {
   let {
     shouldDisplayHover,
-    theme
-  } = _ref13;
-  return shouldDisplayHover ? `:hover {
+    theme,
+    disabled
+  } = _ref12;
+  return shouldDisplayHover && !disabled ? `:hover {
             background-color: ${theme.colors.brand[200]};
           }` : '';
 }, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : `
@@ -244,6 +241,7 @@ exports.StyledActionCell = StyledActionCell;
 exports.StyledCell = StyledCell;
 exports.StyledCellContainer = StyledCellContainer;
 exports.StyledCellContent = StyledCellContent;
+exports.StyledDataTableContentWrapper = StyledDataTableContentWrapper;
 exports.StyledDataTableWrapper = StyledDataTableWrapper;
 exports.StyledEditableContainer = StyledEditableContainer;
 exports.StyledFocusWithin = StyledFocusWithin;

package/esm/DataTable.js

@@ -17,6 +17,7 @@ import { useDatatableConfig } from './configs/useDatatableConfig.js';
 import './configs/useRowFlattenization.js';
 import { FiltersBar } from './parts/FilterBar/FiltersBar.js';
 import { DataTableSchema } from './DataTableSchema.js';
+import { StyledDataTableWrapper } from './styled.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _FiltersBar;
@@ -32,13 +33,21 @@ const DataTable = props => {
   const tableWrapperRef = useRef();
   const tableContentWrapperRef = useRef();
   const ctx = useDatatableConfig(props);
+  const {
+    tableProps: {
+      height,
+      width
+    }
+  } = ctx;
   return /*#__PURE__*/_jsx(Provider, {
     store: reduxStore
   }, void 0, /*#__PURE__*/_jsx(DataTableContext.Provider, {
     value: ctx
-  }, void 0, /*#__PURE__*/jsxs("div", {
+  }, void 0, /*#__PURE__*/jsxs(StyledDataTableWrapper, {
     ref: tableWrapperRef,
     "data-testid": DATA_TESTID.DATA_TABLE_WRAPPER,
+    height: height,
+    width: width,
     children: [withFilterBar ? _FiltersBar || (_FiltersBar = /*#__PURE__*/_jsx(FiltersBar, {})) : null, /*#__PURE__*/jsx(TableContent, {
       ref: tableContentWrapperRef
     })]

package/esm/DataTableSchema.js

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

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/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/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';
@@ -51,6 +51,8 @@ import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
+import '../../../../redux/reducers/index.js';
+import { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 var _SearchXsmall;
 const BaseSelectFilter = props => {
@@ -61,7 +63,8 @@ const BaseSelectFilter = props => {
     type,
     column: {
       id,
-      filterOptions: userFilterOptions
+      filterOptions: userFilterOptions,
+      filterMinWidth
     },
     ctx: {
       tableProps: {
@@ -72,10 +75,13 @@ const BaseSelectFilter = props => {
     innerRef,
     onValueChange
   } = props;
+  const {
+    patchHeaderFilterButtonAndMenu
+  } = useDispatchHeadersActions();
   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,
@@ -92,6 +98,7 @@ const BaseSelectFilter = props => {
 
   const handleOnChange = value => {
     onValueChange(type, value);
+    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);
   };
 
   const [filters, setFilteredOptions] = useState(filterOptions);
@@ -103,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/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/configs/useDatatableConfig.js

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

package/esm/exported-related/EditableCell.js

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