@elliemae/ds-data-table 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/parts/Cells/Cell.js

@@ -0,0 +1,120 @@
+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';
+import { StyledCellContent, StyledCell } from '../../styled.js';
+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';
+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 '../TableContent.js';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-icons';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../Row.js';
+import '../Footer.js';
+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); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const 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 = _ref2 => {
+  var _SimpleTruncatedToolt;
+
+  let {
+    cell,
+    column,
+    row,
+    isRowSelected,
+    shouldAddExpandCell,
+    isDragOverlay
+  } = _ref2;
+  const ctx = useContext(DataTableContext);
+  const {
+    tableProps: {
+      cellRendererProps
+    }
+  } = ctx;
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const [appliedTextWrap, cellStyle] = useCellStyle(column, shouldAddExpandCell);
+  const cellProps = useMemo(() => _objectSpread(_objectSpread({}, cellRendererProps), {}, {
+    cell,
+    row,
+    isRowSelected,
+    ctx,
+    draggableProps,
+    isDragOverlay,
+    role: 'cell',
+    cellStyle,
+    column
+  }), [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]);
+  const CellComponent = cell.render;
+  const pureCellContent = useMemo(() => {
+    if (shouldAddExpandCell) {
+      return /*#__PURE__*/_jsx(Grid, {
+        cols: ['min-content', 'auto'],
+        alignItems: "center",
+        height: "100%"
+      }, void 0, shouldAddExpandCell && /*#__PURE__*/jsx(expandRowColumn.Cell, _objectSpread({}, cellProps)), /*#__PURE__*/jsx(CellComponent, _objectSpread({}, cellProps)));
+    }
+
+    return /*#__PURE__*/jsx(CellComponent, _objectSpread({}, cellProps));
+  }, [CellComponent, cellProps, shouldAddExpandCell]);
+  const DefaultCellContentJSX = useMemo(() => /*#__PURE__*/_jsx(StyledCellContent, {}, void 0, appliedTextWrap === 'truncate' ? _SimpleTruncatedToolt || (_SimpleTruncatedToolt = /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: pureCellContent
+  })) : pureCellContent), [appliedTextWrap, pureCellContent]);
+  const EditableContentJSX = useMemo(() => {
+    if (typeof column.editable === 'string') {
+      const {
+        EditableComponent
+      } = outOfTheBoxEditables === null || outOfTheBoxEditables === void 0 ? void 0 : outOfTheBoxEditables[column.editable];
+      if (EditableComponent) return /*#__PURE__*/jsx(EditableComponent, _objectSpread(_objectSpread({}, cellProps), {}, {
+        DefaultCellRender: DefaultCellContentJSX
+      }));
+    }
+
+    if (typeof column.editable === 'function') return column.editable(_objectSpread({
+      DefaultCellRender: DefaultCellContentJSX
+    }, cellProps));
+    return null;
+  }, [DefaultCellContentJSX, cellProps, column]);
+  return /*#__PURE__*/jsx(PureStandardCell, _objectSpread(_objectSpread({}, cellProps), {}, {
+    children: column.editable ? EditableContentJSX : DefaultCellContentJSX
+  }));
+};
+
+export { Cell as default };

package/esm/parts/Cells/index.js

@@ -0,0 +1,76 @@
+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';
+import Cell from './Cell.js';
+import DataTableContext from '../../DataTableContext.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Cells = props => {
+  const {
+    row,
+    isRowSelected,
+    isDragOverlay
+  } = props;
+  const ctx = useContext(DataTableContext); // we won't print sub-rows more nested than the first level
+
+  if (row.depth <= 1) {
+    let shouldAddExpandCell = false;
+    let userCellsProcessed = 0;
+    return /*#__PURE__*/jsx(Fragment, {
+      children: row.cells.map(cell => {
+        var _ActionComponent;
+
+        const {
+          column
+        } = cell;
+        const isUserCell = !INTERNAL_COLUMNS.includes(column.id);
+        let jsx = null;
+
+        if (column.id === 'rowActions') {
+          const ActionComponent = cell.render;
+          jsx = /*#__PURE__*/_jsx(StyledActionCell, {
+            role: "cell"
+          }, cell.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
+            row: row,
+            cell: cell,
+            column: column,
+            isRowSelected: isRowSelected,
+            ctx: ctx
+          })));
+        } else if (column.id === 'expander') {
+          // Next user's cell will have the expand cell
+          shouldAddExpandCell = !isDragOverlay; // Don't add it on drag overlay
+        } else {
+          jsx = /*#__PURE__*/_jsx(Cell, {
+            cell: cell,
+            column: column,
+            row: row,
+            isRowSelected: isRowSelected,
+            shouldAddExpandCell: isUserCell && shouldAddExpandCell,
+            isDragOverlay: isDragOverlay
+          }, cell.id);
+        } // Drag overlay only need to print the DnD handle and the first user's cell
+
+
+        if (isDragOverlay) {
+          if (column.id !== 'dragHandleColumn' && (!isUserCell || userCellsProcessed !== 0)) jsx = null;
+        } // Reset expand cell
+
+
+        if (isUserCell) {
+          shouldAddExpandCell = false;
+          userCellsProcessed += 1;
+        }
+
+        return jsx;
+      })
+    });
+  }
+
+  return null;
+};
+
+export { Cells as default };

package/esm/parts/Cells/useCellStyle.js

@@ -0,0 +1,39 @@
+import { useContext, useMemo } from 'react';
+import DataTableContext from '../../DataTableContext.js';
+
+const useCellStyle = (column, shouldAddExpandCell) => {
+  const {
+    tableProps: {
+      textWrap
+    }
+  } = useContext(DataTableContext);
+  const appliedTextWrap = column.textWrap || textWrap;
+  const cellStyle = useMemo(() => {
+    const newStyle = {};
+
+    switch (appliedTextWrap) {
+      case 'wrap-all':
+        newStyle.wordBreak = 'break-all';
+        break;
+
+      case 'truncate':
+        newStyle.whiteSpace = 'nowrap';
+        break;
+
+      default:
+      case 'wrap':
+        newStyle.whiteSpace = 'normal';
+        break;
+    }
+
+    if (shouldAddExpandCell) {
+      newStyle.gridColumn = "span 2";
+      newStyle.padding = "0 16px 0 2px";
+    }
+
+    return newStyle;
+  }, [appliedTextWrap, shouldAddExpandCell]);
+  return [appliedTextWrap, cellStyle];
+};
+
+export { useCellStyle };

package/esm/parts/DnDHandle.js

@@ -0,0 +1,73 @@
+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';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '../styled.js';
+import 'react/jsx-runtime';
+import '@elliemae/ds-form';
+import './TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../DataTableContext.js';
+import './Row.js';
+import './Footer.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const StyledGripperButton = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-fj20bf-0"
+})(["cursor:", ";outline:none;display:flex;align-items:center;touch-action:none;"], _ref => {
+  let {
+    isActive,
+    isDragOverlay
+  } = _ref;
+  return isActive || isDragOverlay ? 'grabbing' : 'grab';
+});
+
+const DragHandle = _ref2 => {
+  let {
+    id,
+    isReachable,
+    isDragOverlay,
+    innerRef
+  } = _ref2;
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const isActive = draggableProps && !!draggableProps.active;
+  const isDragging = draggableProps && draggableProps.isDragging;
+  return /*#__PURE__*/createElement(StyledGripperButton, _objectSpread(_objectSpread({
+    role: "button"
+  }, draggableProps && _objectSpread(_objectSpread({}, draggableProps.listeners), draggableProps.attributes)), {}, {
+    isActive: isActive,
+    isDragOverlay: isDragOverlay,
+    ref: innerRef,
+    tabIndex: isReachable ? 0 : -1,
+    "data-testid": DATA_TESTID.DATA_TABLE_DRAG_HANDLE,
+    id: "".concat(id, "-drag-handle"),
+    key: "".concat(id, "-drag-handle")
+  }), /*#__PURE__*/_jsx(GripperVertical, {
+    size: "s",
+    color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']
+  }));
+};
+
+export { DragHandle as default };

package/esm/parts/DropIndicator.js

@@ -0,0 +1,74 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+import { ZIndexDataTable } from '../configs/zIndexInternalConfig.js';
+import { DropIndicatorPosition } from './HoC/SortableItemContext.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _circle;
+
+const getPositionStyles = _ref => {
+  let {
+    dropIndicatorPosition,
+    vertical
+  } = _ref;
+
+  if (vertical) {
+    return "\n      left: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      right: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
+  }
+
+  return "\n      top: ".concat(dropIndicatorPosition === DropIndicatorPosition.Before ? '0' : 'unset', ";\n      bottom: ").concat(dropIndicatorPosition === DropIndicatorPosition.After ? '0' : 'unset', ";\n    ");
+};
+
+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"
+})(["position:absolute;", " box-sizing:border-box;width:", ";height:", ";background-color:", ";z-index:", ";"], getPositionStyles, props => props.vertical ? '2px' : '100%', props => props.vertical ? '100%' : '2px', props => props.theme.colors.brand[600], ZIndexDataTable.DROP_INDICATOR);
+
+const CircleIndicator = style => /*#__PURE__*/_jsx("svg", {
+  height: "6",
+  width: "6",
+  style: style
+}, void 0, _circle || (_circle = /*#__PURE__*/_jsx("circle", {
+  cx: "3",
+  cy: "3",
+  r: "3",
+  strokeWidth: "0",
+  fill: "#1E79C2"
+})));
+
+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, {
+    children: [CircleIndicator(getCircleStyles({
+      vertical,
+      dropIndicatorPosition: safeDropIndicatorPosition
+    })), /*#__PURE__*/_jsx(StyledIndicator, {
+      vertical: vertical,
+      dropIndicatorPosition: safeDropIndicatorPosition
+    })]
+  });
+};
+
+export { DropIndicator as default };

package/esm/parts/EmptyContent.js

@@ -0,0 +1,68 @@
+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';
+import { toMobile, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import DSButton from '@elliemae/ds-button';
+import styled from 'styled-components';
+import DataTableContext from '../DataTableContext.js';
+
+var _Icon;
+const EmptyStateWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-t6wd9y-0"
+})(["position:sticky;height:fit-content;top:0;left:0;"]);
+const Icon = /*#__PURE__*/styled(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.p.withConfig({
+  componentId: "sc-t6wd9y-2"
+})(["text-align:center;font-weight:bold;font-size:", ";color:", ";margin-top:", ";margin-bottom:", ";"], props => toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[600], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
+const SecondaryMessage = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-t6wd9y-3"
+})(["text-align:center;font-size:", ";color:", ";margin:0;"], props => toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[500]);
+const Button = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-t6wd9y-4"
+})(["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;"], _ref => {
+  let {
+    width
+  } = _ref;
+  return width;
+});
+
+const EmptyContent = _ref2 => {
+  let {
+    width
+  } = _ref2;
+  const {
+    tableProps: {
+      noResultsPlaceholder,
+      noResultsMessage,
+      noResultsSecondaryMessage,
+      noResultsButtonLabel,
+      onNoResultsButtonClick,
+      width: tableWidth
+    }
+  } = useContext(DataTableContext);
+  if ( /*#__PURE__*/React.isValidElement(noResultsPlaceholder)) return /*#__PURE__*/_jsx(CenterContentFlexWrapper, {
+    width: width
+  }, void 0, noResultsPlaceholder);
+  return /*#__PURE__*/_jsx(CenterContentFlexWrapper, {
+    width: width,
+    "aria-live": "assertive",
+    role: "status"
+  }, void 0, /*#__PURE__*/_jsx(EmptyStateWrapper, {
+    width: tableWidth,
+    justifyContent: "center"
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+    size: "xxl"
+  })), /*#__PURE__*/_jsx(PrimaryMessage, {}, void 0, noResultsMessage), noResultsSecondaryMessage ? /*#__PURE__*/_jsx(SecondaryMessage, {}, void 0, noResultsSecondaryMessage) : null, noResultsButtonLabel && onNoResultsButtonClick ? /*#__PURE__*/_jsx(Button, {
+    buttonType: "secondary",
+    labelText: noResultsButtonLabel,
+    onClick: onNoResultsButtonClick
+  }) : null));
+};
+
+export { EmptyContent as default };

package/esm/parts/FilterBar/FiltersBar.js

@@ -0,0 +1,134 @@
+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 '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';
+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 '../../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 '../../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-system';
+import DataTableContext from '../../DataTableContext.js';
+import '../Row.js';
+import '../Footer.js';
+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 { StyledWrapper, StyledDropdownMenu } from './styled.js';
+
+var _MoreOptionsVert;
+const pillRenderMapper = {
+  [FILTER_TYPES.SELECT]: SelectPill,
+  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,
+  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,
+  [FILTER_TYPES.DATE_RANGE]: DateRangePill,
+  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,
+  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,
+  [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill
+};
+const FiltersBar = () => {
+  const {
+    tableProps: {
+      width,
+      filterBarProps,
+      onFiltersChange,
+      filters
+    },
+    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",
+    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;
+
+    const filterType = type;
+
+    if (filterType in pillRenderMapper) {
+      Component = pillRenderMapper[filterType];
+    } else if (filterBarProps !== null && filterBarProps !== void 0 && filterBarProps.customPillRenderer) {
+      Component = filterBarProps.customPillRenderer;
+    }
+
+    return /*#__PURE__*/_jsx(Component, {
+      columnHeader: typeof columnHeader === 'string' ? columnHeader : column,
+      column: column,
+      value: value,
+      filters: filters,
+      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",
+    options: [{
+      id: '__internal__option__clear__filters',
+      label: 'Clear Filters',
+      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: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
+    })
+  }));
+};
+
+export { FiltersBar };

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

@@ -0,0 +1,39 @@
+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 DateRangePill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
+  const handleOnRemove = useCallback(() => {
+    var _nextRef$current;
+
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _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: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
+  })) : null;
+};
+
+export { DateRangePill };

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

@@ -0,0 +1,39 @@
+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(() => {
+    var _nextRef$current;
+
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _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 };