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

package/cjs/parts/EmptyContent.js

@@ -3,7 +3,7 @@
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
-var WarningTriangle = require('@elliemae/ds-icons/WarningTriangle');
+var dsIcons = require('@elliemae/ds-icons');
 var dsSystem = require('@elliemae/ds-system');
 var DSButton = require('@elliemae/ds-button');
 var styled = require('styled-components');
@@ -14,35 +14,38 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var WarningTriangle__default = /*#__PURE__*/_interopDefaultLegacy(WarningTriangle);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _Icon;
-const EmptyStateWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const EmptyStateWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-t6wd9y-0"
 })(["position:sticky;height:fit-content;top:0;left:0;"]);
-const Icon = /*#__PURE__*/styled__default['default'](WarningTriangle__default['default']).withConfig({
+const Icon = /*#__PURE__*/styled__default["default"](dsIcons.WarningTriangle).withConfig({
   componentId: "sc-t6wd9y-1"
 })(["fill:", ";color:", ";justify-self:center;"], props => props.theme.colors.neutral[300], props => props.theme.colors.neutral[300]);
-const PrimaryMessage = /*#__PURE__*/styled__default['default'].p.withConfig({
+const PrimaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-t6wd9y-2"
 })(["text-align:center;font-weight:bold;font-size:", ";color:", ";margin-top:", ";margin-bottom:", ";"], props => dsSystem.toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[600], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
-const SecondaryMessage = /*#__PURE__*/styled__default['default'].p.withConfig({
+const SecondaryMessage = /*#__PURE__*/styled__default["default"].p.withConfig({
   componentId: "sc-t6wd9y-3"
 })(["text-align:center;font-size:", ";color:", ";margin:0;"], props => dsSystem.toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[500]);
-const Button = /*#__PURE__*/styled__default['default'](DSButton__default['default']).withConfig({
+const Button = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-t6wd9y-4"
 })(["margin-top:", ";justify-self:center;width:fit-content;"], props => dsSystem.__UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m));
-const CenterContentFlexWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const CenterContentFlexWrapper = /*#__PURE__*/styled__default["default"].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,
@@ -52,20 +55,20 @@ const EmptyContent = ({
       onNoResultsButtonClick,
       width: tableWidth
     }
-  } = React.useContext(DataTableContext['default']);
-  if ( /*#__PURE__*/React__default['default'].isValidElement(noResultsPlaceholder)) return /*#__PURE__*/_jsx__default['default'](CenterContentFlexWrapper, {
+  } = React.useContext(DataTableContext["default"]);
+  if ( /*#__PURE__*/React__default["default"].isValidElement(noResultsPlaceholder)) return /*#__PURE__*/_jsx__default["default"](CenterContentFlexWrapper, {
     width: width
   }, void 0, noResultsPlaceholder);
-  return /*#__PURE__*/_jsx__default['default'](CenterContentFlexWrapper, {
+  return /*#__PURE__*/_jsx__default["default"](CenterContentFlexWrapper, {
     width: width,
     "aria-live": "assertive",
     role: "status"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](EmptyStateWrapper, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](EmptyStateWrapper, {
     width: tableWidth,
     justifyContent: "center"
-  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx__default['default'](Icon, {
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx__default["default"](Icon, {
     size: "xxl"
-  })), /*#__PURE__*/_jsx__default['default'](PrimaryMessage, {}, void 0, noResultsMessage), noResultsSecondaryMessage ? /*#__PURE__*/_jsx__default['default'](SecondaryMessage, {}, void 0, noResultsSecondaryMessage) : null, noResultsButtonLabel && onNoResultsButtonClick ? /*#__PURE__*/_jsx__default['default'](Button, {
+  })), /*#__PURE__*/_jsx__default["default"](PrimaryMessage, {}, void 0, noResultsMessage), noResultsSecondaryMessage ? /*#__PURE__*/_jsx__default["default"](SecondaryMessage, {}, void 0, noResultsSecondaryMessage) : null, noResultsButtonLabel && onNoResultsButtonClick ? /*#__PURE__*/_jsx__default["default"](Button, {
     buttonType: "secondary",
     labelText: noResultsButtonLabel,
     onClick: onNoResultsButtonClick

package/cjs/parts/FilterBar/FiltersBar.js

@@ -3,57 +3,69 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.find.js');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var DSButton = require('@elliemae/ds-button');
-var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
-require('../../exported-related/FilterPopover.js');
-require('../../styled.js');
-var DataTableContext = require('../../DataTableContext.js');
-require('react/jsx-runtime');
+var dsIcons = require('@elliemae/ds-icons');
+require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('@elliemae/ds-popperjs');
 require('styled-components');
-require('../../configs/constants.js');
+require('../../redux/reducers/index.js');
+var constants = require('../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('../../styled.js');
+require('react/jsx-runtime');
+require('@elliemae/ds-form');
 require('../TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
+var DataTableContext = require('../../DataTableContext.js');
 require('../Row.js');
 require('../Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../HoC/SortableItemContext.js');
+require('@elliemae/ds-utilities');
 require('uid');
 var FilterTypes = require('../../exported-related/FilterTypes.js');
 require('../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.some.js');
 var DateRangePill = require('./components/DateRangePill.js');
+var DateSwitcherPill = require('./components/DateSwitcherPill.js');
 var MultiSelectPill = require('./components/MultiSelectPill.js');
 var NumberRangePill = require('./components/NumberRangePill.js');
 var SelectPill = require('./components/SelectPill.js');
 var SingleDatePill = require('./components/SingleDatePill.js');
-var TextPill = require('./components/TextPill.js');
 var styled = require('./styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
-var MoreOptionsVert__default = /*#__PURE__*/_interopDefaultLegacy(MoreOptionsVert);
 
-var _DSButton;
+var _MoreOptionsVert;
 const pillRenderMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: SelectPill.SelectPill,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: MultiSelectPill.MultiSelectPill,
-  [FilterTypes.FILTER_TYPES.TEXT]: TextPill.TextPill,
   [FilterTypes.FILTER_TYPES.SINGLE_DATE]: SingleDatePill.SingleDatePill,
   [FilterTypes.FILTER_TYPES.DATE_RANGE]: DateRangePill.DateRangePill,
-  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: NumberRangePill.NumberRangePill
+  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill.DateSwitcherPill,
+  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: NumberRangePill.NumberRangePill,
+  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill.NumberRangePill
 };
 const FiltersBar = () => {
   const {
@@ -64,21 +76,31 @@ const FiltersBar = () => {
       filters
     },
     visibleColumns
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
+  const pillGroupRefs = React.useMemo(() => {
+    const refs = [];
+
+    for (let i = 0; i < filters.length; i += 1) refs.push( /*#__PURE__*/React__default["default"].createRef());
+
+    return refs;
+  }, [filters.length]);
+  const dropdownMenuRef = React.useRef(null);
   const removeAllFilters = React.useCallback(() => {
     onFiltersChange([]);
   }, [onFiltersChange]);
-  return /*#__PURE__*/_jsx__default['default'](styled.StyledWrapper, {
+  return /*#__PURE__*/_jsx__default["default"](styled.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;
@@ -91,24 +113,31 @@ const FiltersBar = () => {
       Component = filterBarProps.customPillRenderer;
     }
 
-    return /*#__PURE__*/_jsx__default['default'](Component, {
+    return /*#__PURE__*/_jsx__default["default"](Component, {
       columnHeader: typeof columnHeader === 'string' ? columnHeader : column,
       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__default['default'](styled.StyledDropdownMenu, {
+  }), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
     preventOverflow: "scrollParent",
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
       onClick: removeAllFilters
     }, ...((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])],
-    triggerComponent: _DSButton || (_DSButton = /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
+      containerProps: {
+        'data-testid': constants.DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON
+      },
       buttonType: "text",
-      icon: /*#__PURE__*/_jsx__default['default'](MoreOptionsVert__default['default'], {})
-    }))
+      innerRef: dropdownMenuRef,
+      icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
+    })
   }));
 };
 

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

@@ -4,6 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var dsPills = require('@elliemae/ds-pills');
 
@@ -13,21 +16,29 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 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 = React.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__default['default'](dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsPills.RemovablePill, {
-    label: `${format(value.startDate)} - ${format(value.endDate)}`,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
+    label: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/es.string.replace.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var dsPills = require('@elliemae/ds-pills');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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 = React.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__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
+    label: columnHeader
+  }), /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
+    label: value.isDateRange ? "".concat(format(value.startDate), " - ").concat(format(value.endDate)) : format(value.startDate),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
+  })) : null;
+};
+
+exports.DateSwitcherPill = DateSwitcherPill;

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

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
 var dsPills = require('@elliemae/ds-pills');
 
@@ -10,25 +16,39 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const MultiSelectPill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const MultiSelectPill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
+  const multiSelectedValue = value;
   const handleOnRemove = React.useCallback(valToRemove => {
     const newFilters = [...filters];
     const filterIndex = newFilters.findIndex(filter => filter.id === column);
-    newFilters[filterIndex].value = value.filter(val => val !== valToRemove);
+    newFilters[filterIndex].value = multiSelectedValue.filter(val => val.dsId !== valToRemove.dsId);
+
+    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);
-  }, [filters, value, onFiltersChange, column]);
-  return value !== null && value !== void 0 && value.length ? /*#__PURE__*/_jsx__default['default'](dsPills.LabeledPills, {
+  }, [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef]);
+  return multiSelectedValue !== null && multiSelectedValue !== void 0 && multiSelectedValue.length ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, value.map(val => /*#__PURE__*/_jsx__default['default'](dsPills.RemovablePill, {
-    label: val,
-    onRemove: () => handleOnRemove(val)
-  }, val))) : null;
+  }), multiSelectedValue.map((val, index) => /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
+    label: val.label,
+    onRemove: () => handleOnRemove(val),
+    innerRef: index === multiSelectedValue.length - 1 ? innerRef : {}
+  }, val.dsId))) : null;
 };
 
 exports.MultiSelectPill = MultiSelectPill;

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

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var dsPills = require('@elliemae/ds-pills');
 
@@ -10,21 +13,31 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const NumberRangePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const NumberRangePill = _ref => {
+  var _value$from, _value$to;
+
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = React.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.from && value !== null && value !== void 0 && value.to ? /*#__PURE__*/_jsx__default['default'](dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, column, prevRef, nextRef]);
+  return ((_value$from = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from !== void 0 ? _value$from : '') !== '' && ((_value$to = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to !== void 0 ? _value$to : '') !== '' ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsPills.RemovablePill, {
-    label: `${value.from} - ${value.to}`,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
+    label: "".concat(value.from, " - ").concat(value.to),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

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

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var dsPills = require('@elliemae/ds-pills');
 
@@ -10,21 +13,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const SelectPill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const SelectPill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = React.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 ? /*#__PURE__*/_jsx__default['default'](dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsPills.RemovablePill, {
-    label: value,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
+    label: value.label,
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

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

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('core-js/modules/es.string.replace.js');
 var React = require('react');
 var dsPills = require('@elliemae/ds-pills');
@@ -11,21 +14,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
-const SingleDatePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const SingleDatePill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = React.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 ? /*#__PURE__*/_jsx__default['default'](dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/_jsx__default["default"](dsPills.DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsPills.RemovablePill, {
+  }), /*#__PURE__*/_jsx__default["default"](dsPills.DSPillV2, {
+    type: "removable",
     label: value.replace(/-/g, '/'),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

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

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DateRangePill = require('./DateRangePill.js');
+var DateSwitcherPill = require('./DateSwitcherPill.js');
 var MultiSelectPill = require('./MultiSelectPill.js');
 var NumberRangePill = require('./NumberRangePill.js');
 var SelectPill = require('./SelectPill.js');
 var SingleDatePill = require('./SingleDatePill.js');
-var TextPill = require('./TextPill.js');
 
 
 
 exports.DateRangePill = DateRangePill.DateRangePill;
+exports.DateSwitcherPill = DateSwitcherPill.DateSwitcherPill;
 exports.MultiSelectPill = MultiSelectPill.MultiSelectPill;
 exports.NumberRangePill = NumberRangePill.NumberRangePill;
 exports.SelectPill = SelectPill.SelectPill;
 exports.SingleDatePill = SingleDatePill.SingleDatePill;
-exports.TextPill = TextPill.TextPill;

package/cjs/parts/FilterBar/styled.js

@@ -12,10 +12,10 @@ var DSDropdownMenu__default = /*#__PURE__*/_interopDefaultLegacy(DSDropdownMenu)
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledWrapper = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-10txld7-0"
 })(["display:flex;flex-wrap:wrap;width:", ";align-items:center;min-height:33px;padding:0 ", ";"], props => props.width, props => props.theme.space.xxxs);
-const StyledDropdownMenu = /*#__PURE__*/styled__default['default'](DSDropdownMenu__default['default']).withConfig({
+const StyledDropdownMenu = /*#__PURE__*/styled__default["default"](DSDropdownMenu__default["default"]).withConfig({
   componentId: "sc-10txld7-1"
 })(["margin-left:auto;"]);