@elliemae/ds-data-table 1.55.0-next.4 → 1.55.0-next.5

package/esm/{styled-0f986376.js → styled-bb1c6660.js}

@@ -4,7 +4,7 @@ import EditPencil from '@elliemae/ds-icons/EditPencil';
 import { sizeToCss } from './helpers/sizeToCss.js';
 import { DATA_TESTID, momentFormat, ColsLayoutStyle } from './configs/constants.js';
 import { columnPadding, cellPadding } from './helpers/cellPadding.js';
-import React, { useMemo, useCallback, useContext, useEffect, useState, useRef, useLayoutEffect, memo, createContext, cloneElement } from 'react';
+import React, { useMemo, useCallback, useContext, useEffect, useState, useLayoutEffect, memo, useRef, createContext, cloneElement } from 'react';
 import { FIXED_SIZES } from './configs/fixedSizes.js';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { useVirtual } from 'react-virtual';
@@ -26,12 +26,10 @@ import EmptyContent from './parts/EmptyContent.js';
 import { setMultipleRefs } from './helpers/refs-helpers.js';
 import { SortableItemContext, DropIndicatorPosition } from './parts/HoC/SortableItemContext.js';
 import { withDnDSortableRowContext } from './parts/HoC/withDnDSortableRowContext.js';
-import { usePopper } from 'react-popper';
-import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
+import { DSPopperJS } from '@elliemae/ds-popperjs';
 import './redux/reducers/index.js';
 import Footer from './parts/Footer.js';
 import GripperVertical from '@elliemae/ds-icons/GripperVertical';
-import { useDispatchHeadersActions } from './redux/reducers/headersReducers/useDispatchHeadersActions.js';
 import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import { ROW_VARIANTS } from './exported-related/RowVariants.js';
@@ -61,6 +59,7 @@ import { useHierarchyAnnouncements } from './helpers/dndkit/hierarchy/useHierarc
 import { SortByCaret } from './parts/SortByCaret.js';
 import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
 import { DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
+import { useDispatchHeadersActions } from './redux/reducers/headersReducers/useDispatchHeadersActions.js';
 import DSTextBox from '@elliemae/ds-form/TextBox';
 import SearchIcon from '@elliemae/ds-icons/SearchXsmall';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -76,9 +75,9 @@ import Loader from './parts/Loader.js';
 import { useDispatchRowsActions } from './redux/reducers/rowsReducers/useDispatchRowsActions.js';
 import { ZIndexDataTable } from './configs/zIndexInternalConfig.js';
 
-function ownKeys$b(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 ownKeys$a(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var StyledSpan = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1xp824d-0"
 })(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
@@ -104,7 +103,7 @@ var expandRowColumn = {
       return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
     }, [allExpandable, expandedRows]);
     var onExpandedAllHandler = useCallback(function () {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$b({}, allExpandable), 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread$a({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     var GlobalExpandIcon = useMemo(function () {
       if (isAllRowsExpanded) return /*#__PURE__*/React.createElement(ArrowheadDown, {
@@ -174,7 +173,7 @@ var expandRowColumn = {
         expandedRows[uniqueId] = true;
       }
 
-      onRowExpand(_objectSpread$b({}, expandedRows), uniqueId);
+      onRowExpand(_objectSpread$a({}, expandedRows), uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     var isDragging = draggableProps ? draggableProps.isDragging : false;
     var isDragOverlay = dragAndDropRows && !draggableProps;
@@ -252,9 +251,9 @@ var expandRowColumn = {
   disableDnD: true
 };
 
-function ownKeys$a(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 ownKeys$9(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var multiSelectColumn = {
   // Build our multiSelecter column
   id: 'multiSelecter',
@@ -328,7 +327,7 @@ var multiSelectColumn = {
         onChange: function onChange(e) {
           var newState = !selectedState;
 
-          var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty({}, uid, newState)); // we only want true and mixed values
+          var newSelection = _objectSpread$9(_objectSpread$9({}, selection), {}, _defineProperty({}, uid, newState)); // we only want true and mixed values
 
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
@@ -517,9 +516,6 @@ var RowLoading = function RowLoading() {
   return PureLoading;
 };
 
-function ownKeys$9(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var FilterButton = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], function (props) {
@@ -532,9 +528,14 @@ var FilterPopover = function FilterPopover(_ref2) {
   var columnId = _ref2.columnId,
       triggerIcon = _ref2.triggerIcon,
       menuContent = _ref2.menuContent,
-      onTriggerClick = _ref2.onTriggerClick,
-      onClickOutsideMenu = _ref2.onClickOutsideMenu,
-      removeWrapperStyles = _ref2.removeWrapperStyles,
+      _ref2$onTriggerClick = _ref2.onTriggerClick,
+      onTriggerClick = _ref2$onTriggerClick === void 0 ? function () {
+    return null;
+  } : _ref2$onTriggerClick,
+      _ref2$onClickOutsideM = _ref2.onClickOutsideMenu,
+      onClickOutsideMenu = _ref2$onClickOutsideM === void 0 ? function () {
+    return null;
+  } : _ref2$onClickOutsideM,
       reduxHeader = _ref2.reduxHeader,
       _innerRef = _ref2.innerRef,
       ariaLabel = _ref2.ariaLabel;
@@ -564,58 +565,11 @@ var FilterPopover = function FilterPopover(_ref2) {
     e.stopPropagation();
   };
 
-  var wrapperStyles = useMemo(function () {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
-
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       referenceElement = _useState2[0],
       setReferenceElement = _useState2[1];
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      popperElement = _useState4[0],
-      setPopperElement = _useState4[1]; // We need this ref to correctly call useOnClickOutside
-
-
-  var ref = useRef(null);
-  var updatedReferenceElement = useCallback(function (newRef) {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  var _usePopper = usePopper(referenceElement, popperElement, {
-    placement: 'bottom-end',
-    modifiers: [{
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [3, 4]
-      }
-    }, {
-      name: 'preventOverflow',
-      options: {
-        mainAxis: true,
-        altAxis: true
-      }
-    }]
-  }),
-      styles = _usePopper.styles,
-      attributes = _usePopper.attributes;
-
-  var handleClose = function handleClose(e) {
-    if (referenceElement && !referenceElement.contains(e.target)) {
-      handleClickOutsideMenu(e);
-    }
-  };
-
-  useOnClickOutside(ref, handleClose);
   return /*#__PURE__*/React.createElement("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: function onClick(e) {
@@ -657,33 +611,21 @@ var FilterPopover = function FilterPopover(_ref2) {
       _innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/React.createElement("div", _extends({
-    ref: updatedReferenceElement,
-    style: _objectSpread$9(_objectSpread$9({}, styles.popper), wrapperStyles)
-  }, attributes.popper, {
-    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT
-  }), isMenuOpen && menuContent));
-};
-FilterPopover.propTypes = {
-  columnId: PropTypes.string.isRequired,
-  column: PropTypes.any.isRequired,
-  triggerIcon: PropTypes.element.isRequired,
-  menuContent: PropTypes.element,
-  onClickOutsideMenu: PropTypes.func,
-  onTriggerClick: PropTypes.func,
-  removeWrapperStyles: PropTypes.bool,
-  reduxHeader: PropTypes.any,
-  innerRef: PropTypes.any,
-  ariaLabel: PropTypes.string
-};
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: function onClickOutsideMenu() {
-    return null;
-  },
-  onTriggerClick: function onTriggerClick() {
-    return null;
-  },
-  removeWrapperStyles: false
+  })), /*#__PURE__*/React.createElement(DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
+    "data-testid": DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+    startPlacementPreference: "bottom-end",
+    customOffset: [4, 4],
+    withoutArrow: true,
+    withoutPortal: true,
+    zIndex: 10
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, menuContent)));
 };
 
 var EditableCell = function EditableCell(props) {
@@ -3294,4 +3236,4 @@ var PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;margin:5px 0;justify-content:flex-end;"]);
 
 export { StyledDataTableWrapper as $, useHierarchyDndkitConfig as A, DnDGroupContext as B, ComboboxEditableCell as C, DragHandle as D, EditableCell as E, FilterPopover as F, withConditionalDnDColumnContext as G, focusNextMenuItem as H, focusPrevMenuItem as I, useSelectFilterHandlers as J, BaseSelectFilter as K, FilterMapItem as L, MultiSelectFilter as M, NumberRangeFilter as N, HeaderResizer as O, Pagination as P, HeaderCellTitle as Q, Row$1 as R, SingleSelectFilter as S, TableContent as T, HeaderCell as U, withDnDSortableColumnContext as V, HeaderCellGroup as W, Headers as X, VirtualRowsList as Y, INTERNAL_COLUMNS as Z, StyledFocusWithin as _, applyOutOfTheBoxFilters as a, StyledTableWrapper as a0, StyledTableContentWrapper as a1, StyledVirtualListWrapper as a2, StyledHeadWrapper as a3, StyledHeadTr as a4, StyledHeadTh as a5, StyledHeaderRightIconsWrapper as a6, StyledResizer as a7, StyledActionCell as a8, StyledCell as a9, StyledCellContent as aa, StyledPencilIcon as ab, StyledEditableContainer as ac, StyledFullsizeGrid as ad, GroupHeaderContainer as ae, GroupHeaderTitle as af, StyledCellContainer as ag, PaginationContainer as ah, PaginationWrapper as ai, singleSelectColumn as b, dragHandleColumn as c, dateRangeFilterFn as d, expandRowColumn as e, DateRangeFilter as f, SingleDateFilter as g, TextInputFilter as h, PagesButtons as i, RowLoading as j, TextEditableCell as k, Cell as l, multiSelectColumn as m, Cells as n, outOfTheBoxEditables as o, DefaultRowContentRenderer as p, RowRenderer as q, RowVariantHeader as r, singleDateFilterFn as s, RowVariantPrimary as t, RowVariantSecondary as u, RowVariantMapItem as v, Rows$1 as w, useHierarchyPreviewHandlers as x, getHierarchyKeyboardCoordinates as y, customCollisionDetection as z };
-//# sourceMappingURL=styled-0f986376.js.map
+//# sourceMappingURL=styled-bb1c6660.js.map