@elliemae/ds-data-table 2.0.0-alpha.6 → 2.0.0-next.0

package/cjs/DataTableSchema.js

@@ -13,12 +13,12 @@ const columnPropTypes = {
   accessor: reactDesc.PropTypes.string.description('The entry of the data that this column will display'),
   id: reactDesc.PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),
   filter: outOfTheBoxFilterType.description('out-of-the-box filters'),
-  Filter: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom component to render as a filter'),
-  Cell: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom cell renderer component'),
+  Filter: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom component to render as a filter'),
+  Cell: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom cell renderer component'),
   editable: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The editable out-of-the-box or component to render'),
   disableDnD: reactDesc.PropTypes.bool.description('Whereas this column should be draggable'),
   canResize: reactDesc.PropTypes.bool.description('Whereas this column should be resizable'),
-  width: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of this column'),
+  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of this column'),
   minWidth: reactDesc.PropTypes.number.description('Minimum width of this column, useful when resizing'),
   maxWidth: reactDesc.PropTypes.number.description('Maximum width of this column, useful when resizing'),
   canSort: reactDesc.PropTypes.bool.description('Whereas this column is sortable'),
@@ -31,7 +31,7 @@ const columnsPropTypes = reactDesc.PropTypes.shape(columnPropTypes).description(
 const rowPropTypes = {
   row_variant_type: rowVariantType.description('Which row variant to use, will default to primary'),
   row_variant_compact: reactDesc.PropTypes.bool.description('Whether to use the compact version of the row'),
-  tableRowDetails: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Component for row details'),
+  tableRowDetails: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Component for row details'),
   dimsumHeaderValue: reactDesc.PropTypes.string.description('Header displayed on the header variant of the row')
 };
 const rowsPropTypes = reactDesc.PropTypes.shape(rowPropTypes).description('Rows props');
@@ -39,8 +39,8 @@ const DataTableSchema = {
   columns: reactDesc.PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,
   data: reactDesc.PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),
   height: reactDesc.PropTypes.number.description('Height of the datatable component'),
-  width: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of the datatable component'),
-  renderRowActions: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.object, reactDesc.PropTypes.bool]).description('The renderer to use for the action toolbar'),
+  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of the datatable component'),
+  renderRowActions: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.bool]).description('The renderer to use for the action toolbar'),
   isExpandable: reactDesc.PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),
   uniqueRowAccessor: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.func]).description('Column / Combination of columns / Function to call to produce a unique identifier for each row.' + ' This is necessary for the selectable and drag and drop features'),
   disabledRows: reactDesc.PropTypes.object.description('Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not'),
@@ -59,7 +59,7 @@ const DataTableSchema = {
   })).description('Array of filter keys and values'),
   withFilterBar: reactDesc.PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: reactDesc.PropTypes.shape({
-    customPillRenderer: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    customPillRenderer: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
     extraOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
       type: reactDesc.PropTypes.string,
       id: reactDesc.PropTypes.string,
@@ -68,7 +68,7 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: reactDesc.PropTypes.func.description('Function invoked when filters change'),
-  pagination: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.bool, reactDesc.PropTypes.shape({
+  pagination: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.bool, reactDesc.PropTypes.shape({
     pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1'),
     canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not'),
     canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not'),
@@ -90,7 +90,7 @@ const DataTableSchema = {
   noResultsMessage: reactDesc.PropTypes.string.description('Message to show when no more data is available'),
   noResultsSecondaryMessage: reactDesc.PropTypes.string.description('Secondary message to show when no more data is available'),
   noResultsButtonLabel: reactDesc.PropTypes.string.description('Label of the button when no more data is available'),
-  noResultsPlaceholder: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Custom content to show when dataset is empty'),
+  noResultsPlaceholder: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Custom content to show when dataset is empty'),
   isLoading: reactDesc.PropTypes.bool.description('Whether to show a global loader in the datatable'),
   isLoadingAppended: reactDesc.PropTypes.bool.description('Whether to show an appended loader in the datatable'),
   // eslint-disable-next-line max-lines

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

@@ -30,6 +30,7 @@ require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 require('../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');

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

@@ -29,6 +29,7 @@ require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 require('../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');

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

@@ -29,6 +29,7 @@ require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
 var EditableCell = require('../../../exported-related/EditableCell.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 require('../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');

package/cjs/addons/Filters/Components/DateRangeFilter/index.js

@@ -14,6 +14,7 @@ require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 var constants = require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -65,7 +66,7 @@ const DateRangeFilter = props => {
     setEndDate(dateRange.endDate || '');
   }, [dateRange]);
   React.useEffect(() => {
-    if (!startDate.includes('_') && !endDate.includes('_')) {
+    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
       onValueChange(FilterTypes.FILTER_TYPES.DATE_RANGE, {
         startDate,
         endDate

package/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -15,6 +15,7 @@ require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 var constants = require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');

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

@@ -32,6 +32,7 @@ var jsxRuntime = require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 var constants = require('../../../../configs/constants.js');
 require('../../../../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');

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

@@ -29,6 +29,7 @@ require('../../../../parts/Footer.js');
 require('@elliemae/ds-icons/GripperVertical');
 require('../../../../parts/HoC/SortableItemContext.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 var FilterTypes = require('../../../../exported-related/FilterTypes.js');
 require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');

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

@@ -29,6 +29,7 @@ require('../../../../parts/Footer.js');
 require('@elliemae/ds-icons/GripperVertical');
 require('../../../../parts/HoC/SortableItemContext.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 var FilterTypes = require('../../../../exported-related/FilterTypes.js');
 require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');

package/cjs/addons/Filters/Components/SingleDateFilter/index.js

@@ -14,6 +14,7 @@ require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 var constants = require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');

package/cjs/addons/Filters/Components/TextInputFilter/index.js

@@ -12,6 +12,7 @@ require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');

package/cjs/configs/constants.js

@@ -43,7 +43,8 @@ const DATA_TESTID = {
   DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',
   DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',
   DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',
-  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title'
+  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',
+  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button'
 };
 
 exports.DATA_TESTID = DATA_TESTID;

package/cjs/exported-related/EditableCell.js

@@ -60,13 +60,14 @@ const EditableCell = props => {
     onKeyDown: handleOnKeyDown,
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
+    role: "cell",
     "aria-describedby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx__default["default"](styled.StyledPencilIcon, {}))), /*#__PURE__*/_jsx__default["default"]("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
-      "aria-hidden": "false"
+      "aria-hidden": "true"
     }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };

package/cjs/exported-related/FilterPopover.js

@@ -122,10 +122,14 @@ const FilterPopover = ({
     closeContextMenu: handleClickOutsideMenu,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
     startPlacementPreference: "bottom-end",
-    customOffset: [4, 4],
+    customOffset: [5, 4],
     withoutArrow: true,
     withoutPortal: true,
-    zIndex: 10
+    zIndex: 10,
+    extraPopperStyles: {
+      minWidth: '100%'
+    },
+    placementOrderPreference: ['bottom-end']
   }, void 0, /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       backgroundColor: '#fff'

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

@@ -3,7 +3,28 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var constants = require('../../configs/constants.js');
+require('react-virtual');
+require('../../configs/useRowFlattenization.js');
+require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/jsx');
+require('@elliemae/ds-icons');
+require('styled-components');
+require('../../styled.js');
+require('react/jsx-runtime');
+require('@elliemae/ds-form/Checkbox');
+require('@elliemae/ds-form/Radio');
+require('../../parts/TableContent.js');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-circular-progress-indicator');
+require('@elliemae/ds-icons/WarningTriangle');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
 var DataTableContext = require('../../DataTableContext.js');
+require('../../parts/Row.js');
+require('../../parts/Footer.js');
+require('@elliemae/ds-icons/GripperVertical');
+require('../../parts/HoC/SortableItemContext.js');
 require('../../redux/reducers/index.js');
 var useDispatchRowsActions = require('../../redux/reducers/rowsReducers/useDispatchRowsActions.js');
 
@@ -83,8 +104,10 @@ const useRowRendererHandlers = ({
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
-  const handleOnFocus = React.useCallback(() => {
-    setFocusedRowId(row.uid);
+  const handleOnFocus = React.useCallback(e => {
+    if (e.target && e.target.getAttribute('data-testid') === constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+      setFocusedRowId(row.uid);
+    }
   }, [row.uid, setFocusedRowId]);
   return {
     handleItemClick,

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

@@ -18,22 +18,22 @@ const useRowStyle = row => {
 
   const [borderTop, borderBottom, shouldAppendDottedBorder] = React.useMemo(() => {
     if (row.original.dimsumHeaderValue) {
-      return ['1px solid transparent', '1px solid transparent', false];
+      return ['none', 'none', false];
     }
 
     if (row.isExpanded && row.original.subRows && row.depth === 0) {
-      return ['1px solid #EBEDF0', '1px solid transparent', true];
+      return ['1px solid #EBEDF0', 'none', true];
     }
 
     if (row.depth >= 1) {
       if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {
-        return ['1px solid transparent', '2px solid #EBEDF0', false];
+        return ['none', '2px solid #EBEDF0', false];
       }
 
-      return ['1px solid transparent', '1px solid transparent', true];
+      return ['none', 'none', true];
     }
 
-    return ['1px solid transparent', '1px solid #EBEDF0', false];
+    return ['none', '1px solid #EBEDF0', false];
   }, [row, flattenedData]);
   const rowStyle = React.useMemo(() => ({
     borderTop,

package/cjs/exported-related/Toolbar/Toolbar.js

@@ -7,13 +7,14 @@ var React = require('react');
 var styled = require('styled-components');
 var DSButton = require('@elliemae/ds-button');
 var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
+var hooks = require('@elliemae/ds-utilities/hooks');
 var constants = require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
 require('@elliemae/ds-icons');
 require('../../styled.js');
-require('react/jsx-runtime');
+var jsxRuntime = require('react/jsx-runtime');
 require('@elliemae/ds-form/Checkbox');
 require('@elliemae/ds-form/Radio');
 require('../../parts/TableContent.js');
@@ -43,24 +44,38 @@ const ToolbarWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
 })(["display:flex;align-items:center;height:36px;margin-right:1px;pointer-events:all;&:hover{box-shadow:0 1px 2px 0 rgba(0,0,0,0.13),0 1px 2px 0 rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"]);
 const ToolbarPosition = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1ru2no0-2"
-})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:", ";margin-top:", ";width:100%;height:100%;&:hover{z-index:1;}"], props => props.rowSize === 'normal' ? '36px' : '28px', props => props.rowSize === 'normal' ? '0' : '0'); // eslint-disable-next-line react/prop-types
+})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:28px;margin-top:4px;width:100%;padding-left:4px;&:hover{z-index:1;}:after{content:'';position:absolute;left:0px;top:4px;bottom:4px;width:1px;background-color:", ";z-index:7;}"], props => props.theme.colors.neutral['080']); // eslint-disable-next-line react/prop-types
 
 const Toolbar = ({
   children
 }) => {
   const [show, setShow] = React.useState(false);
-  return /*#__PURE__*/_jsx__default["default"](ToolbarPosition, {}, void 0, /*#__PURE__*/_jsx__default["default"](ToolbarWrapper, {
-    onMouseEnter: () => setShow(true),
-    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",
-    "data-testid": constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
-    icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](MoreOptionsVert__default["default"], {})),
-    onClick: () => setShow(true),
-    onKeyDown: e => ['Enter', 'Space'].includes(e.code) && setShow(true),
-    tabIndex: 0
-  })));
+  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);
+  }, []);
+  hooks.useOnClickOutside(toolbarRef, handleOnClickOutside);
+  return /*#__PURE__*/jsxRuntime.jsx(ToolbarPosition, {
+    ref: toolbarRef,
+    children: /*#__PURE__*/_jsx__default["default"](ToolbarWrapper, {
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(clicked)
+    }, void 0, show && /*#__PURE__*/_jsx__default["default"](ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      buttonType: "text",
+      className: "toolbar-trigger",
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
+      icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](MoreOptionsVert__default["default"], {})),
+      onClick: handleOnClick,
+      onKeyDown: e => ['Enter', 'Space'].includes(e.code) && handleOnClick(),
+      tabIndex: 0
+    }))
+  });
 };
 
 exports.Toolbar = Toolbar;

package/cjs/helpers/addCellData.js

@@ -22,7 +22,7 @@ const addColumnData = (datum, column) => {
     render: column.Cell || BasicCell,
     row: datum,
     ref: /*#__PURE__*/React__default["default"].createRef(),
-    id: `${datum.uid}/${column.id}`
+    id: `${datum.uid}__${column.id}`
   });
 };
 

package/cjs/parts/FilterBar/FiltersBar.js

@@ -9,7 +9,7 @@ var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
 require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
-require('../../configs/constants.js');
+var constants = require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
@@ -28,6 +28,7 @@ require('../Row.js');
 require('../Footer.js');
 require('@elliemae/ds-icons/GripperVertical');
 require('../HoC/SortableItemContext.js');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 var FilterTypes = require('../../exported-related/FilterTypes.js');
 require('../../exported-related/Filters/applyOutOfTheBoxFilters.js');
@@ -119,6 +120,9 @@ const FiltersBar = () => {
       onClick: removeAllFilters
     }, ...((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])],
     triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      containerProps: {
+        'data-testid': constants.DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON
+      },
       buttonType: "text",
       innerRef: dropdownMenuRef,
       icon: _VerticalElipsis || (_VerticalElipsis = /*#__PURE__*/_jsx__default["default"](MoreOptionsVert__default["default"], {}))

package/cjs/parts/FilterBar/components/MultiSelectPill.js

@@ -27,6 +27,7 @@ const MultiSelectPill = ({
 
     if (newFilters[filterIndex].value.length === 0) {
       if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+      newFilters.splice(filterIndex, 1);
     }
 
     onFiltersChange(newFilters);
@@ -34,11 +35,11 @@ const MultiSelectPill = ({
   return value !== null && value !== void 0 && value.length ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
     type: "label",
     label: columnHeader
-  }), value.map(val => /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+  }), value.map((val, index) => /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
     type: "removable",
     label: val,
     onRemove: () => handleOnRemove(val),
-    innerRef: innerRef
+    innerRef: index === value.length - 1 ? innerRef : {}
   }, val))) : null;
 };
 

package/cjs/parts/Filters/index.js

@@ -34,6 +34,7 @@ require('../Footer.js');
 require('@elliemae/ds-icons/GripperVertical');
 require('../HoC/SortableItemContext.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 var FilterTypes = require('../../exported-related/FilterTypes.js');
 require('../../exported-related/Filters/applyOutOfTheBoxFilters.js');

package/cjs/parts/Headers/HeaderCell.js

@@ -88,7 +88,8 @@ const HeaderCellComp = props => {
       onFiltersChange,
       filters,
       textWrap
-    }
+    },
+    flattenedData
   } = ctx;
   const {
     patchHeader
@@ -162,6 +163,7 @@ const HeaderCellComp = props => {
     ,
     "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
     "data-testid": constants.DATA_TESTID.DATA_TABLE_HEADER,
+    isFirstRowGroup: !!flattenedData[0].original.dimsumHeaderValue,
     tabIndex: column.isFocuseable === false ? -1 : 0,
     isDragOverlay: isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,

package/cjs/parts/RowVariants/index.js

@@ -28,6 +28,7 @@ require('../Footer.js');
 require('@elliemae/ds-icons/GripperVertical');
 require('../HoC/SortableItemContext.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('uid');
 var RowVariants = require('../../exported-related/RowVariants.js');
 require('../../exported-related/Filters/applyOutOfTheBoxFilters.js');

package/cjs/styled.js

@@ -115,9 +115,16 @@ const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["defa
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }));
+
+const getStyledHeadTHBorderColor = props => {
+  if (props.dragOverlay) return 'transparent';
+  if (props.isFirstRowGroup) return 'transparent';
+  return props.theme.colors.neutral['080'];
+};
+
 const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["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:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], props => props.isDragOverlay ? 'transparent' : props.theme.colors.neutral['080'], props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : `:hover {
+})(["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:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : `:hover {
     border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};
     cursor: pointer;
   }`);
@@ -152,7 +159,7 @@ 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-16"
-})(["background-color:", ";align-items:center;padding:0 ", ";border-top:solid 1px ", ";grid-template-columns:min-content 1fr;"], ({
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], ({
   theme
 }) => theme.colors.brand[200], props => props.padding, ({
   theme

package/esm/DataTableSchema.js

@@ -9,12 +9,12 @@ const columnPropTypes = {
   accessor: PropTypes.string.description('The entry of the data that this column will display'),
   id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),
   filter: outOfTheBoxFilterType.description('out-of-the-box filters'),
-  Filter: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('The custom component to render as a filter'),
-  Cell: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('The custom cell renderer component'),
+  Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('The custom component to render as a filter'),
+  Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('The custom cell renderer component'),
   editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description('The editable out-of-the-box or component to render'),
   disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),
   canResize: PropTypes.bool.description('Whereas this column should be resizable'),
-  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('Width of this column'),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),
   minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),
   maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),
   canSort: PropTypes.bool.description('Whereas this column is sortable'),
@@ -27,7 +27,7 @@ const columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns p
 const rowPropTypes = {
   row_variant_type: rowVariantType.description('Which row variant to use, will default to primary'),
   row_variant_compact: PropTypes.bool.description('Whether to use the compact version of the row'),
-  tableRowDetails: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('Component for row details'),
+  tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Component for row details'),
   dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row')
 };
 const rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');
@@ -35,8 +35,8 @@ const DataTableSchema = {
   columns: PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,
   data: PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),
   height: PropTypes.number.description('Height of the datatable component'),
-  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),
-  renderRowActions: PropTypes.oneOf([PropTypes.object, PropTypes.bool]).description('The renderer to use for the action toolbar'),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),
+  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description('The renderer to use for the action toolbar'),
   isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),
   uniqueRowAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), PropTypes.func]).description('Column / Combination of columns / Function to call to produce a unique identifier for each row.' + ' This is necessary for the selectable and drag and drop features'),
   disabledRows: PropTypes.object.description('Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not'),
@@ -55,7 +55,7 @@ const DataTableSchema = {
   })).description('Array of filter keys and values'),
   withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: PropTypes.shape({
-    customPillRenderer: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
     extraOptions: PropTypes.arrayOf(PropTypes.shape({
       type: PropTypes.string,
       id: PropTypes.string,
@@ -64,7 +64,7 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: PropTypes.func.description('Function invoked when filters change'),
-  pagination: PropTypes.oneOf([PropTypes.bool, PropTypes.shape({
+  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     pageIndex: PropTypes.number.description('Index of the current page, starting from 1'),
     canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not'),
     canNextPage: PropTypes.bool.description('Whether the next button is disabled or not'),
@@ -86,7 +86,7 @@ const DataTableSchema = {
   noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),
   noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),
   noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),
-  noResultsPlaceholder: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('Custom content to show when dataset is empty'),
+  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Custom content to show when dataset is empty'),
   isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),
   isLoadingAppended: PropTypes.bool.description('Whether to show an appended loader in the datatable'),
   // eslint-disable-next-line max-lines

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

@@ -26,6 +26,7 @@ import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

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

@@ -25,6 +25,7 @@ import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

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

@@ -25,6 +25,7 @@ import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

package/esm/addons/Filters/Components/DateRangeFilter/index.js

@@ -10,6 +10,7 @@ import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -55,7 +56,7 @@ const DateRangeFilter = props => {
     setEndDate(dateRange.endDate || '');
   }, [dateRange]);
   useEffect(() => {
-    if (!startDate.includes('_') && !endDate.includes('_')) {
+    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
       onValueChange(FILTER_TYPES.DATE_RANGE, {
         startDate,
         endDate

package/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -11,6 +11,7 @@ import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';

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

@@ -28,6 +28,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';

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

@@ -25,6 +25,7 @@ import '../../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';

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

@@ -25,6 +25,7 @@ import '../../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';

package/esm/addons/Filters/Components/SingleDateFilter/index.js

@@ -10,6 +10,7 @@ import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';

package/esm/addons/Filters/Components/TextInputFilter/index.js

@@ -8,6 +8,7 @@ import 'react/jsx-runtime';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';

package/esm/configs/constants.js

@@ -39,7 +39,8 @@ const DATA_TESTID = {
   DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',
   DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',
   DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',
-  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title'
+  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',
+  DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button'
 };
 
 export { ColsLayoutStyle, DATA_TESTID, momentFormat };

package/esm/exported-related/EditableCell.js

@@ -52,13 +52,14 @@ const EditableCell = props => {
     onKeyDown: handleOnKeyDown,
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
+    role: "cell",
     "aria-describedby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {}))), /*#__PURE__*/_jsx("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
-      "aria-hidden": "false"
+      "aria-hidden": "true"
     }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };

package/esm/exported-related/FilterPopover.js

@@ -112,10 +112,14 @@ const FilterPopover = ({
     closeContextMenu: handleClickOutsideMenu,
     "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
     startPlacementPreference: "bottom-end",
-    customOffset: [4, 4],
+    customOffset: [5, 4],
     withoutArrow: true,
     withoutPortal: true,
-    zIndex: 10
+    zIndex: 10,
+    extraPopperStyles: {
+      minWidth: '100%'
+    },
+    placementOrderPreference: ['bottom-end']
   }, void 0, /*#__PURE__*/_jsx("div", {
     style: {
       backgroundColor: '#fff'

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

@@ -1,5 +1,26 @@
 import { useContext, useCallback } from 'react';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'react-virtual';
+import '../../configs/useRowFlattenization.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@babel/runtime/helpers/esm/jsx';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import '../../styled.js';
+import 'react/jsx-runtime';
+import '@elliemae/ds-form/Checkbox';
+import '@elliemae/ds-form/Radio';
+import '../../parts/TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-icons/WarningTriangle';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
 import DataTableContext from '../../DataTableContext.js';
+import '../../parts/Row.js';
+import '../../parts/Footer.js';
+import '@elliemae/ds-icons/GripperVertical';
+import '../../parts/HoC/SortableItemContext.js';
 import '../../redux/reducers/index.js';
 import { useDispatchRowsActions } from '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
 
@@ -79,8 +100,10 @@ const useRowRendererHandlers = ({
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
-  const handleOnFocus = useCallback(() => {
-    setFocusedRowId(row.uid);
+  const handleOnFocus = useCallback(e => {
+    if (e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+      setFocusedRowId(row.uid);
+    }
   }, [row.uid, setFocusedRowId]);
   return {
     handleItemClick,

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

@@ -14,22 +14,22 @@ const useRowStyle = row => {
 
   const [borderTop, borderBottom, shouldAppendDottedBorder] = useMemo(() => {
     if (row.original.dimsumHeaderValue) {
-      return ['1px solid transparent', '1px solid transparent', false];
+      return ['none', 'none', false];
     }
 
     if (row.isExpanded && row.original.subRows && row.depth === 0) {
-      return ['1px solid #EBEDF0', '1px solid transparent', true];
+      return ['1px solid #EBEDF0', 'none', true];
     }
 
     if (row.depth >= 1) {
       if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {
-        return ['1px solid transparent', '2px solid #EBEDF0', false];
+        return ['none', '2px solid #EBEDF0', false];
       }
 
-      return ['1px solid transparent', '1px solid transparent', true];
+      return ['none', 'none', true];
     }
 
-    return ['1px solid transparent', '1px solid #EBEDF0', false];
+    return ['none', '1px solid #EBEDF0', false];
   }, [row, flattenedData]);
   const rowStyle = useMemo(() => ({
     borderTop,

package/esm/exported-related/Toolbar/Toolbar.js

@@ -1,15 +1,16 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useState } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import DSButton from '@elliemae/ds-button';
 import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
+import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-icons';
 import '../../styled.js';
-import 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../../parts/TableContent.js';
@@ -32,24 +33,38 @@ const ToolbarWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;height:36px;margin-right:1px;pointer-events:all;&:hover{box-shadow:0 1px 2px 0 rgba(0,0,0,0.13),0 1px 2px 0 rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"]);
 const ToolbarPosition = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1ru2no0-2"
-})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:", ";margin-top:", ";width:100%;height:100%;&:hover{z-index:1;}"], props => props.rowSize === 'normal' ? '36px' : '28px', props => props.rowSize === 'normal' ? '0' : '0'); // eslint-disable-next-line react/prop-types
+})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:28px;margin-top:4px;width:100%;padding-left:4px;&:hover{z-index:1;}:after{content:'';position:absolute;left:0px;top:4px;bottom:4px;width:1px;background-color:", ";z-index:7;}"], props => props.theme.colors.neutral['080']); // eslint-disable-next-line react/prop-types
 
 const Toolbar = ({
   children
 }) => {
   const [show, setShow] = useState(false);
-  return /*#__PURE__*/_jsx(ToolbarPosition, {}, void 0, /*#__PURE__*/_jsx(ToolbarWrapper, {
-    onMouseEnter: () => setShow(true),
-    onMouseLeave: () => setShow(false)
-  }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx(DSButton, {
-    buttonType: "text",
-    className: "toolbar-trigger",
-    "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
-    icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {})),
-    onClick: () => setShow(true),
-    onKeyDown: e => ['Enter', 'Space'].includes(e.code) && setShow(true),
-    tabIndex: 0
-  })));
+  const [clicked, setClicked] = useState(false);
+  const toolbarRef = useRef(null);
+  const handleOnClickOutside = useCallback(() => {
+    setShow(false);
+    setClicked(false);
+  }, []);
+  const handleOnClick = useCallback(() => {
+    setShow(true);
+    setClicked(true);
+  }, []);
+  useOnClickOutside(toolbarRef, handleOnClickOutside);
+  return /*#__PURE__*/jsx(ToolbarPosition, {
+    ref: toolbarRef,
+    children: /*#__PURE__*/_jsx(ToolbarWrapper, {
+      onMouseEnter: () => setShow(true),
+      onMouseLeave: () => setShow(clicked)
+    }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      className: "toolbar-trigger",
+      "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
+      icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {})),
+      onClick: handleOnClick,
+      onKeyDown: e => ['Enter', 'Space'].includes(e.code) && handleOnClick(),
+      tabIndex: 0
+    }))
+  });
 };
 
 export { Toolbar };

package/esm/helpers/addCellData.js

@@ -14,7 +14,7 @@ const addColumnData = (datum, column) => {
     render: column.Cell || BasicCell,
     row: datum,
     ref: /*#__PURE__*/React.createRef(),
-    id: `${datum.uid}/${column.id}`
+    id: `${datum.uid}__${column.id}`
   });
 };
 

package/esm/parts/FilterBar/FiltersBar.js

@@ -5,7 +5,7 @@ import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
 import '@elliemae/ds-popperjs';
 import 'styled-components';
 import '../../redux/reducers/index.js';
-import '../../configs/constants.js';
+import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
@@ -24,6 +24,7 @@ import '../Row.js';
 import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';
@@ -108,6 +109,9 @@ const FiltersBar = () => {
       onClick: removeAllFilters
     }, ...((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])],
     triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      containerProps: {
+        'data-testid': DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON
+      },
       buttonType: "text",
       innerRef: dropdownMenuRef,
       icon: _VerticalElipsis || (_VerticalElipsis = /*#__PURE__*/_jsx(MoreOptionsVert, {}))

package/esm/parts/FilterBar/components/MultiSelectPill.js

@@ -19,6 +19,7 @@ const MultiSelectPill = ({
 
     if (newFilters[filterIndex].value.length === 0) {
       if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+      newFilters.splice(filterIndex, 1);
     }
 
     onFiltersChange(newFilters);
@@ -26,11 +27,11 @@ const MultiSelectPill = ({
   return value !== null && value !== void 0 && value.length ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
     type: "label",
     label: columnHeader
-  }), value.map(val => /*#__PURE__*/_jsx(DSPillV2, {
+  }), value.map((val, index) => /*#__PURE__*/_jsx(DSPillV2, {
     type: "removable",
     label: val,
     onRemove: () => handleOnRemove(val),
-    innerRef: innerRef
+    innerRef: index === value.length - 1 ? innerRef : {}
   }, val))) : null;
 };
 

package/esm/parts/Filters/index.js

@@ -30,6 +30,7 @@ import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';

package/esm/parts/Headers/HeaderCell.js

@@ -78,7 +78,8 @@ const HeaderCellComp = props => {
       onFiltersChange,
       filters,
       textWrap
-    }
+    },
+    flattenedData
   } = ctx;
   const {
     patchHeader
@@ -152,6 +153,7 @@ const HeaderCellComp = props => {
     ,
     "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
     "data-testid": DATA_TESTID.DATA_TABLE_HEADER,
+    isFirstRowGroup: !!flattenedData[0].original.dimsumHeaderValue,
     tabIndex: column.isFocuseable === false ? -1 : 0,
     isDragOverlay: isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,

package/esm/parts/RowVariants/index.js

@@ -24,6 +24,7 @@ import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import 'uid';
 import { ROW_VARIANTS } from '../../exported-related/RowVariants.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';

package/esm/styled.js

@@ -105,9 +105,16 @@ const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }));
+
+const getStyledHeadTHBorderColor = props => {
+  if (props.dragOverlay) return 'transparent';
+  if (props.isFirstRowGroup) return 'transparent';
+  return props.theme.colors.neutral['080'];
+};
+
 const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["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:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], props => props.isDragOverlay ? 'transparent' : props.theme.colors.neutral['080'], props => props.theme.colors.brand[700], ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : `:hover {
+})(["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:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : `:hover {
     border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};
     cursor: pointer;
   }`);
@@ -142,7 +149,7 @@ 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-16"
-})(["background-color:", ";align-items:center;padding:0 ", ";border-top:solid 1px ", ";grid-template-columns:min-content 1fr;"], ({
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], ({
   theme
 }) => theme.colors.brand[200], props => props.padding, ({
   theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.0.0-alpha.6",
+  "version": "2.0.0-next.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -642,9 +642,9 @@
   "dependencies": {
     "@dnd-kit/core": "^3.0.4",
     "@dnd-kit/sortable": "^3.0.1",
-    "@elliemae/ds-basic": "2.0.0-alpha.6",
-    "@elliemae/ds-date-picker": "2.0.0-alpha.6",
-    "@elliemae/ds-date-range-picker": "2.0.0-alpha.6",
+    "@elliemae/ds-basic": "2.0.0-next.0",
+    "@elliemae/ds-date-picker": "2.0.0-next.0",
+    "@elliemae/ds-date-range-picker": "2.0.0-next.0",
     "@popperjs/core": "^2.9.3",
     "@reduxjs/toolkit": "^1.5.1",
     "array-move": "^3.0.1",

package/types/configs/constants.d.ts

@@ -37,4 +37,5 @@ export declare const DATA_TESTID: {
     DATA_TABLE_ROW_GROUP_HEADER: string;
     DATA_TABLE_COLUMN_DRAG_OVERLAY: string;
     DATA_TABLE_HEADER_CELL_TITLE: string;
+    DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: string;
 };

package/types/exported-related/Toolbar/Toolbar.d.ts

@@ -1,4 +1,2 @@
-/// <reference types="react" />
-export declare const Toolbar: ({ children }: {
-    children: any;
-}) => JSX.Element;
+import React from 'react';
+export declare const Toolbar: React.ComponentType;