@elliemae/ds-data-table 2.2.0-alpha.3 → 2.2.0-next.2

package/esm/parts/DnDHandle.js

@@ -1,40 +1,73 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { GripperVertical } from "@elliemae/ds-icons";
-import styled from "styled-components";
-import { SortableItemContext } from "./HoC/SortableItemContext";
-import { DATA_TESTID } from "../configs/constants";
-const StyledGripperButton = styled.div`
-  cursor: ${({ isActive, isDragOverlay }) => isActive || isDragOverlay ? "grabbing" : "grab"};
-  outline: none;
-  display: flex;
-  align-items: center;
-  touch-action: none;
-`;
-const DragHandle = ({ id, isReachable, isDragOverlay, innerRef }) => {
-  const { draggableProps } = useContext(SortableItemContext);
-  const isActive = draggableProps && !!draggableProps.active;
-  const isDragging = draggableProps && draggableProps.isDragging;
-  return /* @__PURE__ */ React2.createElement(StyledGripperButton, {
-    role: "button",
-    ...draggableProps && {
-      ...draggableProps.listeners,
-      ...draggableProps.attributes
-    },
+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: `${id}-drag-handle`,
-    key: `${id}-drag-handle`
-  }, /* @__PURE__ */ React2.createElement(GripperVertical, {
+    id: "".concat(id, "-drag-handle"),
+    key: "".concat(id, "-drag-handle")
+  }), /*#__PURE__*/_jsx(GripperVertical, {
     size: "s",
-    color: isDragging ? ["neutral", "500"] : ["brand-primary", "800"]
+    color: isDragging ? ['neutral', '500'] : ['brand-primary', '800']
   }));
 };
-var DnDHandle_default = DragHandle;
-export {
-  DnDHandle_default as default
-};
-//# sourceMappingURL=DnDHandle.js.map
+
+export { DragHandle as default };

package/esm/parts/DropIndicator.js

@@ -1,61 +1,74 @@
-import * as React from "react";
-import React2 from "react";
-import styled from "styled-components";
-import { ZIndexDataTable } from "../configs/zIndexInternalConfig";
-import { DropIndicatorPosition } from "./HoC/SortableItemContext";
-const getPositionStyles = ({ dropIndicatorPosition, vertical }) => {
+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 `
-      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 StyledIndicator = styled.div`
-  position: absolute;
-  ${getPositionStyles}
-  box-sizing: border-box;
-  width: ${(props) => props.vertical ? "2px" : "100%"};
-  height: ${(props) => props.vertical ? "100%" : "2px"};
-  background-color: ${(props) => props.theme.colors.brand[600]};
-  z-index: ${ZIndexDataTable.DROP_INDICATOR};
-`;
-const CircleIndicator = (style) => /* @__PURE__ */ React2.createElement("svg", {
+
+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
-}, /* @__PURE__ */ React2.createElement("circle", {
+  style: style
+}, void 0, _circle || (_circle = /*#__PURE__*/_jsx("circle", {
   cx: "3",
   cy: "3",
   r: "3",
   strokeWidth: "0",
   fill: "#1E79C2"
-}));
-const DropIndicator = ({ vertical, dropIndicatorPosition, isLast }) => {
-  if (![DropIndicatorPosition.After, DropIndicatorPosition.Before].includes(dropIndicatorPosition))
-    return null;
-  const safeDropIndicatorPosition = isLast ? DropIndicatorPosition.Before : dropIndicatorPosition;
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, CircleIndicator(getCircleStyles({ vertical, dropIndicatorPosition: safeDropIndicatorPosition })), /* @__PURE__ */ React2.createElement(StyledIndicator, {
+})));
+
+const DropIndicator = _ref3 => {
+  let {
     vertical,
-    dropIndicatorPosition: safeDropIndicatorPosition
-  }));
-};
-var DropIndicator_default = DropIndicator;
-export {
-  DropIndicator,
-  DropIndicator_default as default
+    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
+    })]
+  });
 };
-//# sourceMappingURL=DropIndicator.js.map
+
+export { DropIndicator as default };

package/esm/parts/EmptyContent.js

@@ -1,49 +1,41 @@
-import * as React from "react";
-import React2, { useContext } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { WarningTriangle } from "@elliemae/ds-icons";
-import { __UNSAFE_SPACE_TO_DIMSUM, toMobile } from "@elliemae/ds-system";
-import { DSButton } from "@elliemae/ds-button";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import { DataTableContext } from "../DataTableContext";
-const EmptyStateWrapper = styled(Grid)`
-  position: sticky;
-  height: fit-content;
-  top: 0;
-  left: 0;
-`;
-const Icon = styled(WarningTriangle)`
-  fill: ${(props) => props.theme.colors.neutral[300]};
-  color: ${(props) => props.theme.colors.neutral[300]};
-  justify-self: center;
-`;
-const PrimaryMessage = styled.p`
-  text-align: center;
-  font-weight: bold;
-  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])};
-  color: ${(props) => props.theme.colors.neutral[600]};
-  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s)};
-  margin-bottom: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs)};
-`;
-const SecondaryMessage = styled.p`
-  text-align: center;
-  font-size: ${(props) => toMobile(props.theme.fontSizes.value[400])}; /* 13px */
-  color: ${(props) => props.theme.colors.neutral[500]};
-  margin: 0;
-`;
-const Button = styled(DSButton)`
-  margin-top: ${(props) => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m)};
-  justify-self: center;
-  width: fit-content;
-`;
-const CenterContentFlexWrapper = styled.div`
-  width: ${({ width }) => width}px;
-  height: calc(100% - 48px);
-  display: flex;
-  align-items: center;
-`;
-const EmptyContent = ({ width }) => {
+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,
@@ -54,31 +46,23 @@ const EmptyContent = ({ width }) => {
       width: tableWidth
     }
   } = useContext(DataTableContext);
-  if (React2.isValidElement(noResultsPlaceholder))
-    return /* @__PURE__ */ React2.createElement(CenterContentFlexWrapper, {
-      width
-    }, noResultsPlaceholder);
-  return /* @__PURE__ */ React2.createElement(CenterContentFlexWrapper, {
-    width,
+  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"
-  }, /* @__PURE__ */ React2.createElement(EmptyStateWrapper, {
+  }, void 0, /*#__PURE__*/_jsx(EmptyStateWrapper, {
     width: tableWidth,
     justifyContent: "center"
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
     size: "xxl"
-  }), /* @__PURE__ */ React2.createElement(PrimaryMessage, null, noResultsMessage), noResultsSecondaryMessage ? /* @__PURE__ */ React2.createElement(SecondaryMessage, null, noResultsSecondaryMessage) : null, noResultsButtonLabel && onNoResultsButtonClick ? /* @__PURE__ */ React2.createElement(Button, {
+  })), /*#__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));
 };
-EmptyContent.propTypes = {
-  width: PropTypes.number
-};
-var EmptyContent_default = EmptyContent;
-export {
-  EmptyContent,
-  EmptyContent_default as default
-};
-//# sourceMappingURL=EmptyContent.js.map
+
+export { EmptyContent as default };

package/esm/parts/FilterBar/FiltersBar.js

@@ -1,19 +1,53 @@
-import * as React from "react";
-import React2, { useCallback, useContext, useMemo, useRef } from "react";
-import { DSButton } from "@elliemae/ds-button";
-import { MoreOptionsVert } from "@elliemae/ds-icons";
-import { FILTER_TYPES } from "../../exported-related";
-import {
-  SelectPill,
-  MultiSelectPill,
-  SingleDatePill,
-  DateRangePill,
-  NumberRangePill,
-  DateSwitcherPill
-} from "./components";
-import { DataTableContext } from "../../DataTableContext";
-import { StyledDropdownMenu, StyledWrapper } from "./styled";
-import { DATA_TESTID } from "../../configs/constants";
+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,
@@ -25,65 +59,76 @@ const pillRenderMapper = {
 };
 const FiltersBar = () => {
   const {
-    tableProps: { width, filterBarProps, onFiltersChange, filters },
+    tableProps: {
+      width,
+      filterBarProps,
+      onFiltersChange,
+      filters
+    },
     visibleColumns
   } = useContext(DataTableContext);
   const pillGroupRefs = useMemo(() => {
     const refs = [];
-    for (let i = 0; i < filters.length; i += 1)
-      refs.push(React2.createRef());
+
+    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__ */ React2.createElement(StyledWrapper, {
-    width,
+  return /*#__PURE__*/_jsx(StyledWrapper, {
+    width: width,
     "aria-live": "polite",
     "aria-relevant": "additions removals",
     gutter: "xs"
-  }, filters.map(({ id: column, type, value }, index) => {
-    const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;
+  }, 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?.customPillRenderer) {
+    } else if (filterBarProps !== null && filterBarProps !== void 0 && filterBarProps.customPillRenderer) {
       Component = filterBarProps.customPillRenderer;
     }
-    return /* @__PURE__ */ React2.createElement(Component, {
-      key: column,
-      columnHeader: typeof columnHeader === "string" ? columnHeader : column,
-      column,
-      value,
-      filters,
-      onFiltersChange,
+
+    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[index + 1] ?? dropdownMenuRef
-    });
-  }), /* @__PURE__ */ React2.createElement(StyledDropdownMenu, {
+      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?.extraOptions || []
-    ],
-    triggerComponent: /* @__PURE__ */ React2.createElement(DSButton, {
+    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
+        'data-testid': DATA_TESTID.DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
-      icon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, null)
+      icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
     })
   }));
 };
-export {
-  FiltersBar
-};
-//# sourceMappingURL=FiltersBar.js.map
+
+export { FiltersBar };

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

@@ -1,35 +1,39 @@
-import * as React from "react";
-import React2, { useCallback } from "react";
-import { DSPillGroupV2, DSPillV2 } from "@elliemae/ds-pills";
-const format = (value) => value?.replace(/-/g, "/");
-const DateRangePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange,
-  prevRef,
-  innerRef,
-  nextRef
-}) => {
+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(() => {
-    if (prevRef?.current)
-      prevRef.current.focus();
-    else
-      nextRef.current?.focus();
-    onFiltersChange(filters.filter((filter) => filter.id !== column));
+    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?.startDate && value?.endDate ? /* @__PURE__ */ React2.createElement(DSPillGroupV2, null, /* @__PURE__ */ React2.createElement(DSPillV2, {
+  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__ */ React2.createElement(DSPillV2, {
+  }), /*#__PURE__*/_jsx(DSPillV2, {
     type: "removable",
-    label: `${format(value.startDate)} - ${format(value.endDate)}`,
+    label: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
     onRemove: handleOnRemove,
-    innerRef
+    innerRef: innerRef
   })) : null;
 };
-export {
-  DateRangePill
-};
-//# sourceMappingURL=DateRangePill.js.map
+
+export { DateRangePill };