@elliemae/ds-data-table 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/helpers/getIdFromUniqueRowAccessor.js

@@ -1,3 +1,6 @@
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+
 const getIdFromUniqueRowAccessor = (uniqueRowAccessor, row) => {
   if (uniqueRowAccessor === undefined) {
     // user did not defined an unique row accesor, use the one generated by react-table

package/esm/helpers/refs-helpers.js

@@ -1,8 +1,18 @@
+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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+
 // allow multiple refs to be set to point to the same DOM element
-const setMultipleRefs = (...refs) => {
+const setMultipleRefs = function () {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length) return null;
-  if (filteredRefs.length === 0) return filteredRefs[0];
+  if (!filteredRefs.length) return () => null;
+  if (filteredRefs.length === 0) return () => null;
   return newRef => {
     filteredRefs.forEach(refToBeUpdated => {
       if (typeof refToBeUpdated === 'function') {

package/esm/helpers/sizeToCss.js

@@ -1,3 +1,3 @@
-const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size;
+const sizeToCss = size => typeof size === 'number' && !Number.isNaN(size) ? "".concat(size, "px") : size;
 
 export { sizeToCss };

package/esm/hooks/useRecoverFocusCol.js

@@ -1,3 +1,4 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useState, useEffect } from 'react';
 
 // so we just keep track of it and focus it if necessary

package/esm/index.js

@@ -6,9 +6,9 @@ export { groupBy } from './exported-related/groupBy.js';
 export { FILTER_TYPES } from './exported-related/FilterTypes.js';
 export { ROW_VARIANTS, ROW_VARIANT_COMPACT_KEY, ROW_VARIANT_KEY } from './exported-related/RowVariants.js';
 export { applyOutOfTheBoxFilters } from './exported-related/Filters/applyOutOfTheBoxFilters.js';
-export { textFilterFn } from './exported-related/Filters/textFilterFn.js';
 export { singleDateFilterFn } from './exported-related/Filters/singleDateFilterFn.js';
 export { singleSelectFilterFn } from './exported-related/Filters/singleSelectFilterFn.js';
 export { multiSelectFilterFn } from './exported-related/Filters/multiSelectFilterFn.js';
 export { numberRangeFilterFn } from './exported-related/Filters/numberRangeFilterFn.js';
+export { currencyRangeFilterFn } from './exported-related/Filters/currencyRangeFilterFn.js';
 export { dateRangeFilterFn } from './exported-related/Filters/dateRangeFilterFn.js';

package/esm/parts/Cells/Cell.js

@@ -1,5 +1,11 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useContext, useMemo, memo } from 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import Grid from '@elliemae/ds-grid';
@@ -8,47 +14,53 @@ import { outOfTheBoxEditables } from '../../addons/Editables/index.js';
 import DataTableContext from '../../DataTableContext.js';
 import { SortableItemContext } from '../HoC/SortableItemContext.js';
 import { expandRowColumn } from '../../addons/Columns/ColumnExpand/ColumnExpand.js';
-import '@elliemae/ds-form/Checkbox';
+import '@elliemae/ds-form';
 import { DATA_TESTID } from '../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import 'styled-components';
-import '@elliemae/ds-form/Radio';
 import '../TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
+import '@elliemae/ds-icons';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../Row.js';
 import '../Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import { useCellStyle } from './useCellStyle.js';
 import { jsx } from 'react/jsx-runtime';
 
 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 PureStandardCell = /*#__PURE__*/memo(({
-  cellStyle,
-  children,
-  column
-}) => /*#__PURE__*/_jsx(StyledCell, {
-  column: column,
-  style: cellStyle,
-  role: "cell",
-  "data-testid": DATA_TESTID.DATA_TABLE_CELL
-}, void 0, children));
+const PureStandardCell = /*#__PURE__*/memo(_ref => {
+  let {
+    cellStyle,
+    children,
+    column
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledCell, {
+    column: column,
+    style: cellStyle,
+    role: "cell",
+    "data-testid": DATA_TESTID.DATA_TABLE_CELL
+  }, void 0, children);
+});
 
-const Cell = ({
-  cell,
-  column,
-  row,
-  isRowSelected,
-  shouldAddExpandCell,
-  isDragOverlay
-}) => {
+const Cell = _ref2 => {
   var _SimpleTruncatedToolt;
 
+  let {
+    cell,
+    column,
+    row,
+    isRowSelected,
+    shouldAddExpandCell,
+    isDragOverlay
+  } = _ref2;
   const ctx = useContext(DataTableContext);
   const {
     tableProps: {

package/esm/parts/Cells/index.js

@@ -1,4 +1,6 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useContext } from 'react';
 import { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';
 import { StyledActionCell } from '../../styled.js';
@@ -31,7 +33,7 @@ const Cells = props => {
           const ActionComponent = cell.render;
           jsx = /*#__PURE__*/_jsx(StyledActionCell, {
             role: "cell"
-          }, row.uid + column.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
+          }, cell.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
             row: row,
             cell: cell,
             column: column,
@@ -49,7 +51,7 @@ const Cells = props => {
             isRowSelected: isRowSelected,
             shouldAddExpandCell: isUserCell && shouldAddExpandCell,
             isDragOverlay: isDragOverlay
-          }, row.uid + column.id);
+          }, cell.id);
         } // Drag overlay only need to print the DnD handle and the first user's cell
 
 

package/esm/parts/Cells/useCellStyle.js

@@ -27,8 +27,8 @@ const useCellStyle = (column, shouldAddExpandCell) => {
     }
 
     if (shouldAddExpandCell) {
-      newStyle.gridColumn = `span 2`;
-      newStyle.padding = `0 16px 0 2px`;
+      newStyle.gridColumn = "span 2";
+      newStyle.padding = "0 16px 0 2px";
     }
 
     return newStyle;

package/esm/parts/DnDHandle.js

@@ -1,22 +1,28 @@
+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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import { useContext, createElement } from 'react';
-import GripperVertical from '@elliemae/ds-icons/GripperVertical';
+import { GripperVertical } from '@elliemae/ds-icons';
 import styled from 'styled-components';
 import { SortableItemContext } from './HoC/SortableItemContext.js';
 import { DATA_TESTID } from '../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import '@elliemae/ds-icons';
+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/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import './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.js';
@@ -28,17 +34,21 @@ 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 StyledGripperButton = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-fj20bf-0"
-})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], ({
-  isActive,
-  isDragOverlay
-}) => isActive || isDragOverlay ? 'grabbing' : 'grab');
+})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], _ref => {
+  let {
+    isActive,
+    isDragOverlay
+  } = _ref;
+  return isActive || isDragOverlay ? 'grabbing' : 'grab';
+});
 
-const DragHandle = ({
-  id,
-  isReachable,
-  isDragOverlay,
-  innerRef
-}) => {
+const DragHandle = _ref2 => {
+  let {
+    id,
+    isReachable,
+    isDragOverlay,
+    innerRef
+  } = _ref2;
   const {
     draggableProps
   } = useContext(SortableItemContext);
@@ -52,8 +62,8 @@ const DragHandle = ({
     ref: innerRef,
     tabIndex: isReachable ? 0 : -1,
     "data-testid": DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
-    id: `${id}-drag-handle`,
-    key: `${id}-drag-handle`
+    id: "".concat(id, "-drag-handle"),
+    key: "".concat(id, "-drag-handle")
   }), /*#__PURE__*/_jsx(GripperVertical, {
     size: "s",
     color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']

package/esm/parts/DropIndicator.js

@@ -7,35 +7,34 @@ import { jsxs, Fragment } from 'react/jsx-runtime';
 
 var _circle;
 
-const getPositionStyles = ({
-  dropIndicatorPosition,
-  vertical
-}) => {
+const getPositionStyles = _ref => {
+  let {
+    dropIndicatorPosition,
+    vertical
+  } = _ref;
+
   if (vertical) {
-    return `
-      left: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};
-      right: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};
-    `;
+    return "\n      left: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      right: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
   }
 
-  return `
-      top: ${dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset'};
-      bottom: ${dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset'};
-    `;
+  return "\n      top: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
 };
 
-const getCircleStyles = ({
-  dropIndicatorPosition,
-  vertical
-}) => ({
-  position: 'absolute',
-  zIndex: ZIndexDataTable.DROP_INDICATOR,
-  top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
-  bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
-  left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
-  right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
-  opacity: 1
-});
+const getCircleStyles = _ref2 => {
+  let {
+    dropIndicatorPosition,
+    vertical
+  } = _ref2;
+  return {
+    position: 'absolute',
+    zIndex: ZIndexDataTable.DROP_INDICATOR,
+    top: vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
+    bottom: vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
+    left: !vertical || dropIndicatorPosition === DropIndicatorPosition.After ? 'unset' : '-2px',
+    right: !vertical || dropIndicatorPosition === DropIndicatorPosition.Before ? 'unset' : '-2px',
+    opacity: 1
+  };
+};
 
 const StyledIndicator = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1aa87sx-0"
@@ -53,11 +52,12 @@ const CircleIndicator = style => /*#__PURE__*/_jsx("svg", {
   fill: "#1E79C2"
 })));
 
-const DropIndicator = ({
-  vertical,
-  dropIndicatorPosition,
-  isLast
-}) => {
+const DropIndicator = _ref3 => {
+  let {
+    vertical,
+    dropIndicatorPosition,
+    isLast
+  } = _ref3;
   if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition)) return null;
   const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
   return /*#__PURE__*/jsxs(Fragment, {

package/esm/parts/EmptyContent.js

@@ -1,7 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext } from 'react';
 import Grid from '@elliemae/ds-grid';
-import WarningTriangle from '@elliemae/ds-icons/WarningTriangle';
+import { WarningTriangle } from '@elliemae/ds-icons';
 import { toMobile, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
 import DSButton from '@elliemae/ds-button';
 import styled from 'styled-components';
@@ -25,13 +25,17 @@ const Button = /*#__PURE__*/styled(DSButton).withConfig({
 })(["margin-top:", ";justify-self:center;width:fit-content;"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m));
 const CenterContentFlexWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-t6wd9y-5"
-})(["width:", "px;height:calc(100% - 48px);display:flex;align-items:center;"], ({
-  width
-}) => width);
+})(["width:", "px;height:calc(100% - 48px);display:flex;align-items:center;"], _ref => {
+  let {
+    width
+  } = _ref;
+  return width;
+});
 
-const EmptyContent = ({
-  width
-}) => {
+const EmptyContent = _ref2 => {
+  let {
+    width
+  } = _ref2;
   const {
     tableProps: {
       noResultsPlaceholder,

package/esm/parts/FilterBar/FiltersBar.js

@@ -1,49 +1,61 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useCallback } from 'react';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useContext, useMemo, useRef, useCallback } from 'react';
 import DSButton from '@elliemae/ds-button';
-import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import '../../exported-related/FilterPopover.js';
-import '../../styled.js';
-import DataTableContext from '../../DataTableContext.js';
-import 'react/jsx-runtime';
+import { MoreOptionsVert } from '@elliemae/ds-icons';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@elliemae/ds-popperjs';
 import 'styled-components';
-import '../../configs/constants.js';
+import '../../redux/reducers/index.js';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.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';
+import '../../styled.js';
+import 'react/jsx-runtime';
+import '@elliemae/ds-form';
 import '../TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import DataTableContext from '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
+import '@elliemae/ds-utilities';
 import 'uid';
 import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
 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 { DateRangePill } from './components/DateRangePill.js';
+import { DateSwitcherPill } from './components/DateSwitcherPill.js';
 import { MultiSelectPill } from './components/MultiSelectPill.js';
 import { NumberRangePill } from './components/NumberRangePill.js';
 import { SelectPill } from './components/SelectPill.js';
 import { SingleDatePill } from './components/SingleDatePill.js';
-import { TextPill } from './components/TextPill.js';
 import { StyledWrapper, StyledDropdownMenu } from './styled.js';
 
-var _DSButton;
+var _MoreOptionsVert;
 const pillRenderMapper = {
   [FILTER_TYPES.SELECT]: SelectPill,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,
-  [FILTER_TYPES.TEXT]: TextPill,
   [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,
   [FILTER_TYPES.DATE_RANGE]: DateRangePill,
-  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill
+  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,
+  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,
+  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill
 };
 const FiltersBar = () => {
   const {
@@ -55,20 +67,30 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = useContext(DataTableContext);
+  const pillGroupRefs = useMemo(() => {
+    const refs = [];
+
+    for (let i = 0; i < filters.length; i += 1) refs.push( /*#__PURE__*/React.createRef());
+
+    return refs;
+  }, [filters.length]);
+  const dropdownMenuRef = useRef(null);
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
   }, [onFiltersChange]);
   return /*#__PURE__*/_jsx(StyledWrapper, {
     width: width,
     "aria-live": "polite",
-    "aria-relevant": "additions removals"
-  }, void 0, filters.map(({
-    id: column,
-    type,
-    value
-  }) => {
-    var _visibleColumns$find;
+    "aria-relevant": "additions removals",
+    gutter: "xs"
+  }, void 0, filters.map((_ref, index) => {
+    var _visibleColumns$find, _pillGroupRefs;
 
+    let {
+      id: column,
+      type,
+      value
+    } = _ref;
     const columnHeader = (_visibleColumns$find = visibleColumns.find(col => col.accessor === column)) === null || _visibleColumns$find === void 0 ? void 0 : _visibleColumns$find.Header;
 
     let Component = () => null;
@@ -86,7 +108,10 @@ const FiltersBar = () => {
       column: column,
       value: value,
       filters: filters,
-      onFiltersChange: onFiltersChange
+      onFiltersChange: onFiltersChange,
+      prevRef: pillGroupRefs[index - 1],
+      innerRef: pillGroupRefs[index],
+      nextRef: (_pillGroupRefs = pillGroupRefs[index + 1]) !== null && _pillGroupRefs !== void 0 ? _pillGroupRefs : dropdownMenuRef
     }, column);
   }), /*#__PURE__*/_jsx(StyledDropdownMenu, {
     preventOverflow: "scrollParent",
@@ -95,10 +120,14 @@ const FiltersBar = () => {
       label: 'Clear Filters',
       onClick: removeAllFilters
     }, ...((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])],
-    triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx(DSButton, {
+    triggerComponent: /*#__PURE__*/_jsx(DSButton, {
+      containerProps: {
+        'data-testid': DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON
+      },
       buttonType: "text",
-      icon: /*#__PURE__*/_jsx(MoreOptionsVert, {})
-    }))
+      innerRef: dropdownMenuRef,
+      icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
+    })
   }));
 };
 

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

@@ -1,25 +1,36 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'core-js/modules/es.string.replace.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 { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 const format = value => value === null || value === void 0 ? void 0 : value.replace(/-/g, '/');
 
-const DateRangePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const DateRangePill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = useCallback(() => {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(filter => filter.id !== column));
-  }, [onFiltersChange, filters, column]);
-  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/_jsx(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx(RemovablePill, {
-    label: `${format(value.startDate)} - ${format(value.endDate)}`,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

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

@@ -0,0 +1,37 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/es.string.replace.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 { useCallback } from 'react';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
+
+const format = value => value === null || value === void 0 ? void 0 : value.replace(/-/g, '/');
+
+const DateSwitcherPill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
+  const handleOnRemove = useCallback(() => {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+    onFiltersChange(filters.filter(filter => filter.id !== column));
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
+    label: columnHeader
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: value.isDateRange ? "".concat(format(value.startDate), " - ").concat(format(value.endDate)) : format(value.startDate),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
+  })) : null;
+};
+
+export { DateSwitcherPill };