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

package/cjs/{styled-691c4110.js → styled-e5f7790f.js}

@@ -28,12 +28,10 @@ var parts_EmptyContent = require('./parts/EmptyContent.js');
 var helpers_refsHelpers = require('./helpers/refs-helpers.js');
 var parts_HoC_SortableItemContext = require('./parts/HoC/SortableItemContext.js');
 var parts_HoC_withDnDSortableRowContext = require('./parts/HoC/withDnDSortableRowContext.js');
-var reactPopper = require('react-popper');
-var hooks = require('@elliemae/ds-utilities/hooks');
+var dsPopperjs = require('@elliemae/ds-popperjs');
 require('./redux/reducers/index.js');
 var parts_Footer = require('./parts/Footer.js');
 var GripperVertical = require('@elliemae/ds-icons/GripperVertical');
-var redux_reducers_headersReducers_useDispatchHeadersActions = require('./redux/reducers/headersReducers/useDispatchHeadersActions.js');
 require('@elliemae/ds-icons/MoreOptionsVert');
 require('uid');
 var exportedRelated_RowVariants = require('./exported-related/RowVariants.js');
@@ -63,6 +61,7 @@ var helpers_dndkit_hierarchy_useHierarchyAnnouncements = require('./helpers/dndk
 var parts_SortByCaret = require('./parts/SortByCaret.js');
 var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
+var redux_reducers_headersReducers_useDispatchHeadersActions = require('./redux/reducers/headersReducers/useDispatchHeadersActions.js');
 var DSTextBox = require('@elliemae/ds-form/TextBox');
 var SearchIcon = require('@elliemae/ds-icons/SearchXsmall');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -101,9 +100,9 @@ var DSTextBox__default = /*#__PURE__*/_interopDefaultLegacy(DSTextBox);
 var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 
-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__default['default'](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__default['default'](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__default['default'].span.withConfig({
   componentId: "sc-1xp824d-0"
 })(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
@@ -129,7 +128,7 @@ var expandRowColumn = {
       return Object.keys(allExpandable).length === Object.keys(expandedRows).length;
     }, [allExpandable, expandedRows]);
     var onExpandedAllHandler = React.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 = React.useMemo(function () {
       if (isAllRowsExpanded) return /*#__PURE__*/React__default['default'].createElement(dsIcons.ArrowheadDown, {
@@ -199,7 +198,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;
@@ -277,9 +276,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__default['default'](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__default['default'](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',
@@ -353,7 +352,7 @@ var multiSelectColumn = {
         onChange: function onChange(e) {
           var newState = !selectedState;
 
-          var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
+          var newSelection = _objectSpread$9(_objectSpread$9({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
 
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
@@ -542,9 +541,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__default['default'](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__default['default'].span.withConfig({
   componentId: "sc-16i88ut-0"
 })(["display:inline-grid;", ""], function (props) {
@@ -557,9 +553,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;
@@ -589,58 +590,11 @@ var FilterPopover = function FilterPopover(_ref2) {
     e.stopPropagation();
   };
 
-  var wrapperStyles = React.useMemo(function () {
-    if (removeWrapperStyles) return {};
-    return {
-      backgroundColor: '#fff',
-      boxShadow: '0 6px 20px 0 rgba(0, 0, 0, 0.24)',
-      minWidth: '100%'
-    };
-  }, [removeWrapperStyles]);
-
   var _useState = React.useState(null),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
       referenceElement = _useState2[0],
       setReferenceElement = _useState2[1];
 
-  var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      popperElement = _useState4[0],
-      setPopperElement = _useState4[1]; // We need this ref to correctly call useOnClickOutside
-
-
-  var ref = React.useRef(null);
-  var updatedReferenceElement = React.useCallback(function (newRef) {
-    setPopperElement(newRef);
-    ref.current = newRef;
-  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
-
-  var _usePopper = reactPopper.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);
-    }
-  };
-
-  hooks.useOnClickOutside(ref, handleClose);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     // This is here to prevent propagation, and not trigger the sort functionality
     onClick: function onClick(e) {
@@ -682,33 +636,21 @@ var FilterPopover = function FilterPopover(_ref2) {
       _innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/React__default['default'].createElement("div", _extends__default['default']({
-    ref: updatedReferenceElement,
-    style: _objectSpread$9(_objectSpread$9({}, styles.popper), wrapperStyles)
-  }, attributes.popper, {
-    "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT
-  }), isMenuOpen && menuContent));
-};
-FilterPopover.propTypes = {
-  columnId: PropTypes__default['default'].string.isRequired,
-  column: PropTypes__default['default'].any.isRequired,
-  triggerIcon: PropTypes__default['default'].element.isRequired,
-  menuContent: PropTypes__default['default'].element,
-  onClickOutsideMenu: PropTypes__default['default'].func,
-  onTriggerClick: PropTypes__default['default'].func,
-  removeWrapperStyles: PropTypes__default['default'].bool,
-  reduxHeader: PropTypes__default['default'].any,
-  innerRef: PropTypes__default['default'].any,
-  ariaLabel: PropTypes__default['default'].string
-};
-FilterPopover.defaultProps = {
-  onClickOutsideMenu: function onClickOutsideMenu() {
-    return null;
-  },
-  onTriggerClick: function onTriggerClick() {
-    return null;
-  },
-  removeWrapperStyles: false
+  })), /*#__PURE__*/React__default['default'].createElement(dsPopperjs.DSPopperJS, {
+    referenceElement: referenceElement,
+    showPopover: isMenuOpen,
+    closeContextMenu: handleClickOutsideMenu,
+    "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT,
+    startPlacementPreference: "bottom-end",
+    customOffset: [4, 4],
+    withoutArrow: true,
+    withoutPortal: true,
+    zIndex: 10
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      backgroundColor: '#fff'
+    }
+  }, menuContent)));
 };
 
 var EditableCell = function EditableCell(props) {
@@ -3391,4 +3333,4 @@ exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;
 exports.useSelectFilterHandlers = useSelectFilterHandlers;
 exports.withConditionalDnDColumnContext = withConditionalDnDColumnContext;
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;
-//# sourceMappingURL=styled-691c4110.js.map
+//# sourceMappingURL=styled-e5f7790f.js.map