@elliemae/ds-data-table 2.0.0-alpha.3 → 2.0.0-alpha.7

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

@@ -1,9 +1,8 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useMemo, useCallback } from 'react';
-import ArrowShortReturn from '@elliemae/ds-icons/ArrowShortReturn';
+import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
 import styled from 'styled-components';
-import { CollapseAll, ExpandAll, ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 import { StyledFocusWithin } from '../../../styled.js';
 import { DATA_TESTID } from '../../../configs/constants.js';
 import 'react-virtual';
@@ -28,7 +27,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const StyledSpan = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
 const expandRowColumn = {
   // Build our expander column
   id: 'expander',
@@ -53,20 +52,32 @@ const expandRowColumn = {
     }, [allDataFlattened]);
     const isAllRowsExpanded = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(allExpandable, 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     const GlobalExpandIcon = useMemo(() => {
-      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(CollapseAll, {
-        size: "m",
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(ArrowheadDown, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      });
-      return /*#__PURE__*/_jsx(ExpandAll, {
-        size: "m",
+      }); // Mixed
+
+      if (Object.keys(expandedRows).length) {
+        return /*#__PURE__*/_jsx(ArrowheadRight, {
+          size: "s",
+          color: ['brand-primary', '600'],
+          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
+        });
+      }
+
+      return /*#__PURE__*/_jsx(ArrowheadRight, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
-    }, [isAllRowsExpanded]);
+    }, [expandedRows, isAllRowsExpanded]);
     return /*#__PURE__*/_jsx(StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx(StyledSpan, {
       role: "button",
       tabIndex: 0,
@@ -80,7 +91,10 @@ const expandRowColumn = {
       },
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      isRightArrow: !isAllRowsExpanded && Object.keys(expandedRows).length === 0
+      style: {
+        width: '24px',
+        height: '24px'
+      }
     }, void 0, GlobalExpandIcon));
   },
   Cell: ({
@@ -119,7 +133,7 @@ const expandRowColumn = {
     const indentStyle = useMemo(() => ({
       marginLeft: `${row.depth * 32}px`,
       marginRight: '18px',
-      paddingLeft: '1px',
+      paddingLeft: '2px',
       paddingRight: '2px',
       position: 'relative',
       height: '100%',

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -5,9 +5,8 @@ import DSCheckbox from '@elliemae/ds-form/Checkbox';
 import { DATA_TESTID } from '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Radio';
@@ -63,8 +62,8 @@ const multiSelectColumn = {
 
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    const onChangeHandler = useCallback(() => {
-      onSelectionChange(newSelection);
+    const onChangeHandler = useCallback(e => {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
     const PureHeaderCheckbox = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
@@ -101,7 +100,7 @@ const multiSelectColumn = {
       "aria-checked": selectedState,
       "aria-disabled": false,
       checked: selectedState,
-      onChange: () => {
+      onChange: e => {
         const newState = !selectedState;
 
         const newSelection = _objectSpread(_objectSpread({}, selection), {}, {
@@ -111,7 +110,7 @@ const multiSelectColumn = {
 
         if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
 
-        onSelectionChange(newSelection);
+        onSelectionChange(newSelection, uid, e);
       },
       disabled: disabledRows[row.uid],
       innerRef: cell.ref,

package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -6,7 +6,6 @@ import { DATA_TESTID } from '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';

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

@@ -1,16 +1,14 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useMemo, useState, useCallback } from 'react';
 import ComboBoxFreeSolo from '@elliemae/ds-form/ComboBoxFreeSolo';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.js';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';
@@ -26,6 +24,8 @@ import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

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

@@ -1,15 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useState, useCallback } from 'react';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.js';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';
@@ -25,6 +23,8 @@ import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

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

@@ -1,15 +1,13 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useContext, useState, useCallback } from 'react';
 import styled from 'styled-components';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.js';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';
@@ -25,6 +23,8 @@ import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';

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

@@ -14,7 +14,6 @@ import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
@@ -56,7 +55,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
@@ -79,7 +78,8 @@ const DateRangeFilter = props => {
       onFromDateChange: setStartDate,
       toDate: endDate,
       onToDateChange: setEndDate,
-      type: "date-range-inputs"
+      type: "date-range-inputs",
+      autoFocus: true
     })), /*#__PURE__*/_jsx(Grid, {
       onKeyDown: e => e.code === 'Enter' && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateRangePicker, {

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

@@ -14,7 +14,6 @@ import '@elliemae/ds-icons/MoreOptionsVert';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';

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

@@ -31,7 +31,6 @@ import '@elliemae/ds-icons/MoreOptionsVert';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Radio';
 import '../../../../parts/TableContent.js';

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

@@ -1,19 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { BaseSelectFilter } from './BaseSelectFilter.js';
-import '../../../../exported-related/FilterPopover.js';
-import '../../../../styled.js';
-import '../../../../DataTableContext.js';
-import 'react/jsx-runtime';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../../redux/reducers/index.js';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
+import '../../../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../../../../parts/TableContent.js';
@@ -21,10 +19,12 @@ import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import '../../../../DataTableContext.js';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';

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

@@ -1,19 +1,17 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { BaseSelectFilter } from './BaseSelectFilter.js';
-import '../../../../exported-related/FilterPopover.js';
-import '../../../../styled.js';
-import '../../../../DataTableContext.js';
-import 'react/jsx-runtime';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../../redux/reducers/index.js';
 import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
+import '../../../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../../../../parts/TableContent.js';
@@ -21,10 +19,12 @@ import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import '../../../../DataTableContext.js';
 import '../../../../parts/Row.js';
 import '../../../../parts/Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../../../../parts/HoC/SortableItemContext.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import { FILTER_TYPES } from '../../../../exported-related/FilterTypes.js';
 import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';

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

@@ -4,9 +4,8 @@ import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

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

@@ -14,7 +14,6 @@ import { DATA_TESTID } from '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
@@ -68,7 +67,8 @@ const SingleDateFilter = props => {
       date: date,
       onDateChange: setDate,
       type: "date-inputs",
-      isClearable: true
+      isClearable: true,
+      autoFocus: true
     })), /*#__PURE__*/_jsx(Grid, {
       onKeyDown: e => e.code === 'Enter' && setTimeout(commitDateChange, 0)
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateTimePicker, {

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

@@ -12,7 +12,6 @@ import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';

package/esm/addons/Pagination/PagesButtons.js

@@ -7,7 +7,6 @@ import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../styled.js';
 import { jsxs, Fragment } from 'react/jsx-runtime';

package/esm/addons/Pagination/Pagination.js

@@ -8,9 +8,8 @@ import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';

package/esm/configs/constants.js

@@ -38,7 +38,8 @@ const DATA_TESTID = {
   DATA_TABLE_HEADER: 'data-table-header',
   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_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',
+  DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title'
 };
 
 export { ColsLayoutStyle, DATA_TESTID, momentFormat };

package/esm/exported-related/EditableCell.js

@@ -52,7 +52,14 @@ const EditableCell = props => {
     onKeyDown: handleOnKeyDown,
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
-    children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx(StyledPencilIcon, {})))]
+    "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"
+    }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };
 

package/esm/exported-related/FilterPopover.js

@@ -1,18 +1,16 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useMemo, useState, useRef, useCallback } from 'react';
-import { usePopper } from 'react-popper';
+import { useState } from 'react';
 import DSButton from '@elliemae/ds-button';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
 import styled from 'styled-components';
-import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
 import '../redux/reducers/index.js';
 import { DATA_TESTID } from '../configs/constants.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
+import '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-icons';
 import '../styled.js';
-import { jsx } from 'react/jsx-runtime';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../parts/TableContent.js';
@@ -27,9 +25,6 @@ import '@elliemae/ds-icons/GripperVertical';
 import '../parts/HoC/SortableItemContext.js';
 import { useDispatchHeadersActions } from '../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const FilterButton = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], props => props.hide ? 'opacity: 0; display: none; width: 0;' : '');
@@ -37,13 +32,11 @@ const Button = /*#__PURE__*/styled(DSButton).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
 const FilterPopover = ({
-  column,
   columnId,
   triggerIcon,
   menuContent,
-  onTriggerClick,
-  onClickOutsideMenu,
-  removeWrapperStyles,
+  onTriggerClick = () => null,
+  onClickOutsideMenu = () => null,
   reduxHeader,
   innerRef,
   ariaLabel
@@ -73,50 +66,7 @@ const FilterPopover = ({
     e.stopPropagation();
   };
 
-  const wrapperStyles = useMemo(() => {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
   const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null); // We need this ref to correctly call useOnClickOutside
-
-  const ref = useRef(null);
-  const updatedReferenceElement = useCallback(newRef => {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  const {
-    styles,
-    attributes
-  } = usePopper(referenceElement, popperElement, {
-    placement: 'bottom-end',
-    modifiers: [{
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [3, 4]
-      }
-    }, {
-      name: 'preventOverflow',
-      options: {
-        mainAxis: true,
-        altAxis: true
-      }
-    }]
-  });
-
-  const handleClose = e => {
-    if (referenceElement && !referenceElement.contains(e.target)) {
-      handleClickOutsideMenu(e);
-    }
-  };
-
-  useOnClickOutside(ref, handleClose);
   return /*#__PURE__*/_jsx("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: e => e.stopPropagation(),
@@ -156,18 +106,21 @@ const FilterPopover = ({
       innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    ref: updatedReferenceElement,
-    style: _objectSpread(_objectSpread({}, styles.popper), wrapperStyles)
-  }, attributes.popper), {}, {
+  })), /*#__PURE__*/_jsx(DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
     "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
-    children: isMenuOpen && menuContent
-  })));
-};
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: () => null,
-  onTriggerClick: () => null,
-  removeWrapperStyles: false
+    startPlacementPreference: "bottom-end",
+    customOffset: [4, 4],
+    withoutArrow: true,
+    withoutPortal: true,
+    zIndex: 10
+  }, void 0, /*#__PURE__*/_jsx("div", {
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, void 0, menuContent)));
 };
 
 export { FilterPopover };

package/esm/exported-related/Filters/dateRangeFilterFn.js

@@ -5,9 +5,8 @@ import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/exported-related/Filters/singleDateFilterFn.js

@@ -5,9 +5,8 @@ import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

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

@@ -61,7 +61,9 @@ const DefaultRowContentRenderer = props => {
   const isDragging = draggableProps && draggableProps.isDragging;
   useLayoutEffect(() => {
     if (row.uid === focusedRowId) {
-      rowRef.current.focus();
+      rowRef.current.focus({
+        preventScroll: true
+      });
     }
   }, [focusedRowId, row.uid]);
   const gridTemplateColProps = useMemo(() => ({

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

@@ -11,9 +11,8 @@ import { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';
 import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
@@ -85,7 +84,8 @@ const RowRenderer = props => {
   const {
     handleItemClick,
     handleKeyDown,
-    handleOnBlur
+    handleOnBlur,
+    handleOnFocus
   } = useRowRendererHandlers({
     row,
     itemIndex,
@@ -112,6 +112,7 @@ const RowRenderer = props => {
     onClick: handleItemClick,
     onKeyDown: handleKeyDown,
     onBlur: handleOnBlur,
+    onFocus: handleOnFocus,
     "data-expandable": Boolean(row.original.tableRowDetails),
     "data-is-row-expanded": row.isExpanded,
     rows: rowsLayout,

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

@@ -79,10 +79,14 @@ const useRowRendererHandlers = ({
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
+  const handleOnFocus = useCallback(() => {
+    setFocusedRowId(row.uid);
+  }, [row.uid, setFocusedRowId]);
   return {
     handleItemClick,
     handleKeyDown,
-    handleOnBlur
+    handleOnBlur,
+    handleOnFocus
   };
 };