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

package/cjs/props.js

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactDesc = require('react-desc');
+var positions = require('./positions.js');
+var interaction = require('./interaction.js');
+
+const popperProps = {
+  /** Hide menu component if trigger component is not visible/scrolled away */
+  hideIfNotVisible: reactDesc.PropTypes.bool.description('Hide menu component if trigger component is not visible/scrolled away'),
+
+  /** props to inject to popper wrapper */
+  containerProps: reactDesc.PropTypes.object.description('props to inject to popper wrapper'),
+
+  /** Space between the arrow and the popup */
+  arrowGap: reactDesc.PropTypes.number.description('Space between the arrow and the popup'),
+
+  /** callback for when menu changes from close to open */
+  onOpen: reactDesc.PropTypes.func.description('callback for when menu changes from close to open'),
+
+  /** callback for when menu changes from open to close */
+  onClose: reactDesc.PropTypes.func.description('callback for when menu changes from open to close'),
+
+  /** Time in ms to delay close of menu */
+  delayClose: reactDesc.PropTypes.number.description('Time in ms to delay close of menu'),
+
+  /** Time in ms to delay open of menu */
+  delayOpen: reactDesc.PropTypes.number.description('Time in ms to delay open of menu'),
+
+  /** callback for when menu changes placement */
+  onPlacementChange: reactDesc.PropTypes.func.description('callback for when menu changes placement'),
+
+  /** Arrow size */
+  arrowSize: reactDesc.PropTypes.number.description('Arrow size'),
+
+  /** Bem blockname for the popper */
+  blockName: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.object]).description('Bem blockname for the popper'),
+  triggerComponent: reactDesc.PropTypes.element.description("The component that will open/close the tooltip. \n    Cannot be used with disabled elements. \n    https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled").isRequired
+};
+const defaultProps = {
+  containerProps: {},
+  arrowGap: 8,
+  arrowSize: 6,
+  blockName: '',
+  contentOffset: null,
+  contentStyle: null,
+  contentComponent: () => null,
+  delayClose: 300,
+  delayOpen: 200,
+  interactionType: interaction.Interaction.CLICK,
+  onOpen: () => null,
+  onClose: () => null,
+  onPlacementChange: () => null,
+  placement: positions.Position.BOTTOM,
+  preventOverflow: 'window',
+  showArrow: true,
+  closeAnimationConfig: {
+    to: {
+      transform: 'scale(0.8)',
+      opacity: '0'
+    },
+    config: {
+      delay: 80,
+      duration: 80
+    }
+  },
+  openAnimationConfig: {
+    to: {
+      transform: 'scale(1)',
+      opacity: '1'
+    },
+    config: {
+      delay: 80,
+      duration: 80
+    }
+  },
+  usePortal: true,
+  triggerComponent: () => null,
+  getTargetFromChildren: () => null,
+  getContentFromChildren: () => null,
+  modifiers: {},
+  triggerRef: () => null,
+  hideIfNotVisible: false
+};
+
+exports.defaultProps = defaultProps;
+exports.popperProps = popperProps;

package/esm/DSPopper.js

@@ -0,0 +1,83 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { describe } from 'react-desc';
+import PopperImpl from './PopperImpl.js';
+export { Position as PopperPositions, positions } from './positions.js';
+export { Interaction as PopperInteractions, interactions } from './interaction.js';
+import { popperProps, defaultProps } from './props.js';
+
+const DSPopper = _ref => {
+  let {
+    containerProps,
+    arrowGap,
+    arrowSize,
+    blockName,
+    contentOffset,
+    contentStyle,
+    contentComponent,
+    delayClose,
+    delayOpen,
+    interactionType,
+    isOpen,
+    // if this is set DSPopper would be a controlled component if not, an uncontrolled one
+    onOpen,
+    onClose,
+    onPlacementChange,
+    placement,
+    preventOverflow,
+    showArrow,
+    closeAnimationConfig,
+    openAnimationConfig,
+    usePortal,
+    triggerComponent,
+    wrapExtraComponent,
+    getTargetFromChildren,
+    getContentFromChildren,
+    modifiers,
+    triggerRef,
+    children: customPopper,
+    renderReference,
+    referenceNode,
+    zIndex,
+    hideIfNotVisible
+  } = _ref;
+  return /*#__PURE__*/_jsx(PopperImpl, {
+    arrowGap: arrowGap,
+    arrowSize: arrowSize,
+    blockName: blockName,
+    closeAnimationConfig: closeAnimationConfig,
+    containerProps: containerProps,
+    contentComponent: contentComponent,
+    contentOffset: contentOffset,
+    contentStyle: contentStyle,
+    delayClose: delayClose,
+    delayOpen: delayOpen,
+    getContentFromChildren: getContentFromChildren,
+    getTargetFromChildren: getTargetFromChildren,
+    interactionType: interactionType,
+    isOpen: isOpen,
+    modifiers: modifiers,
+    onOpen: onOpen,
+    onClose: onClose,
+    onPlacementChange: onPlacementChange,
+    openAnimationConfig: openAnimationConfig,
+    placement: placement,
+    preventOverflow: preventOverflow,
+    referenceNode: referenceNode,
+    renderReference: renderReference,
+    showArrow: showArrow,
+    triggerComponent: triggerComponent,
+    triggerRef: triggerRef,
+    usePortal: usePortal,
+    wrapExtraComponent: wrapExtraComponent,
+    zIndex: zIndex,
+    hideIfNotVisible: hideIfNotVisible
+  }, void 0, customPopper);
+}; // @deprecated: There's the NEW (not finished) popover that uses its own popper implementation.
+
+
+DSPopper.defaultProps = defaultProps;
+const DSPopperWithSchema = describe(DSPopper);
+DSPopperWithSchema.propTypes = popperProps;
+
+export { DSPopper, DSPopperWithSchema, DSPopper as default };

package/esm/PopperContent.js

@@ -0,0 +1,147 @@
+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 { PureComponent } from 'react';
+import { Popper } from 'react-popper';
+import { Keyframes, animated } from 'react-spring/renderprops';
+import getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';
+import DSOverlay from '@elliemae/ds-overlay';
+import { getArrowStylesBySize } from './getArrowStylesBySize.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _svg;
+
+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 Content = Keyframes.Spring({});
+class PopperContent extends PureComponent {
+  // eslint-disable-next-line react/static-property-placement
+  constructor(props) {
+    super(props);
+    this.renderContent = this.renderContent.bind(this);
+    this.renderArrow = this.renderArrow.bind(this);
+    this.handleRestAnimation = this.handleRestAnimation.bind(this);
+    this.handleRestAnimation = this.handleRestAnimation.bind(this);
+  }
+
+  handleRestAnimation() {
+    const {
+      isOpen,
+      onContentDestroyed
+    } = this.props;
+
+    if (!isOpen) {
+      onContentDestroyed();
+    }
+  }
+
+  renderArrow(_ref, placement) {
+    let {
+      ref,
+      style
+    } = _ref;
+    const {
+      blockName,
+      showArrow
+    } = this.props;
+    if (!showArrow) return null;
+    return /*#__PURE__*/jsx("div", {
+      ref: ref,
+      className: "".concat(blockName || 'popper', "__arrow"),
+      "data-placement": placement,
+      style: _objectSpread(_objectSpread({}, style), getArrowStylesBySize(placement, 25)),
+      children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
+        viewBox: "0 0 30 30"
+      }, void 0, /*#__PURE__*/_jsx("path", {
+        className: "stroke",
+        d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
+      }), /*#__PURE__*/_jsx("path", {
+        className: "fill",
+        d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
+      })))
+    }, "popper-arrow");
+  }
+
+  renderContent(_ref2) {
+    let {
+      ref,
+      style,
+      placement,
+      arrowProps,
+      scheduleUpdate,
+      outOfBoundaries
+    } = _ref2;
+    const {
+      contentComponent,
+      contentStyle,
+      isOpen,
+      closeAnimationConfig,
+      openAnimationConfig,
+      onMouseEnter,
+      onMouseLeave,
+      containerProps,
+      zIndex,
+      hideIfNotVisible
+    } = this.props;
+
+    const computedStyle = _objectSpread(_objectSpread(_objectSpread({}, style), contentStyle), {}, {
+      zIndex
+    });
+
+    return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, containerProps), {}, {
+      "data-placement": placement,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      style: computedStyle,
+      "data-testid": "popper-container",
+      children: /*#__PURE__*/_jsx(Content, {
+        native: true,
+        onRest: this.handleRestAnimation,
+        state: isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close',
+        states: {
+          open: _objectSpread(_objectSpread({}, openAnimationConfig), {}, {
+            from: closeAnimationConfig.to
+          }),
+          close: closeAnimationConfig
+        }
+      }, void 0, animationStyle => /*#__PURE__*/jsx(animated.div, {
+        ref: ref,
+        style: animationStyle,
+        children: getComponentFromProps(contentComponent, {
+          scheduleUpdate
+        }, [this.renderArrow(arrowProps, placement)])
+      }))
+    }));
+  }
+
+  render() {
+    const {
+      destroyed = false,
+      onClickOutside = () => null,
+      placement = 'bottom-start',
+      modifiers = {},
+      referenceNode,
+      usePortal = true
+    } = this.props;
+    return /*#__PURE__*/_jsx(DSOverlay, {
+      isOpen: !destroyed,
+      onClickOutside: onClickOutside,
+      usePortal: usePortal
+    }, void 0, /*#__PURE__*/_jsx(Popper, {
+      modifiers: modifiers,
+      placement: placement,
+      referenceElement: referenceNode
+    }, void 0, this.renderContent));
+  }
+
+}
+PopperContent.defaultProps = {
+  onContentDestroyed: () => null
+};
+
+export { PopperContent as default };

package/{dist/esm → esm}/PopperImpl.js

@@ -1,22 +1,39 @@
-import * as React from "react";
-import React2, { Component } from "react";
-import { isFunction, get, isDOMTypeElement, getComponentFromProps, mergeRefs } from "@elliemae/ds-utilities";
-import { Manager, Reference } from "react-popper";
-import memoizeOne from "memoize-one";
-import PopperContent from "./PopperContent";
-import { Interaction } from "./interaction";
+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 { Component } from 'react';
+import { get, isFunction, isDOMTypeElement, mergeRefs, getComponentFromProps } from '@elliemae/ds-utilities';
+import { Manager, Reference } from 'react-popper';
+export { Reference } from 'react-popper';
+import memoizeOne from 'memoize-one';
+import PopperContent from './PopperContent.js';
+export { default as PopperContent } from './PopperContent.js';
+import { Interaction } from './interaction.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; }
 class PopperImpl extends Component {
+  // we use safeIsMounted because isMounted is not allowed by React.
   constructor(props) {
     super(props);
     this.safeIsMounted = false;
-    this.handlePopperPlacementChange = memoizeOne((placement) => {
-      const { onPlacementChange } = this.props;
+    this.handlePopperPlacementChange = memoizeOne(placement => {
+      const {
+        onPlacementChange
+      } = this.props;
       onPlacementChange(placement);
     });
     this.state = {
       isOpen: false,
       destroyed: true
-    };
+    }; // TODO: Fix the autobinding to remove this!!
+
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
     this.handleMouseLeave = this.handleMouseLeave.bind(this);
     this.handleTriggerClick = this.handleTriggerClick.bind(this);
@@ -26,34 +43,55 @@ class PopperImpl extends Component {
     this.handleDestroyContent = this.handleDestroyContent.bind(this);
     this.handleContentMouseEnter = this.handleContentMouseEnter.bind(this);
     this.handleContentMouseLeave = this.handleContentMouseLeave.bind(this);
-  }
+  } // this is needed to prevent setState on unmounted components
+
+
   componentDidMount() {
     this.safeIsMounted = true;
   }
+
   componentDidUpdate() {
-    const { isOpen, destroyed } = this.state;
+    const {
+      isOpen,
+      destroyed
+    } = this.state;
+
     if (isOpen === true && destroyed === true) {
-      this.setState({ destroyed: false });
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        destroyed: false
+      });
     }
   }
+
   componentWillUnmount() {
     this.safeIsMounted = false;
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { isOpen } = nextProps;
-    const { prevPropIsOpen } = prevState;
+    const {
+      isOpen
+    } = nextProps;
+    const {
+      prevPropIsOpen
+    } = prevState; // todo: this causes multiple rerenders
+
     if (isOpen !== prevPropIsOpen) {
       return {
         isOpen,
         prevPropIsOpen: isOpen
       };
     }
+
     return null;
   }
-  getInteractionObject(interaction, referenceProps = {}) {
-    const { isOpen } = this.props;
-    if (isOpen !== void 0)
-      return {};
+
+  getInteractionObject(interaction) {
+    let referenceProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const {
+      isOpen
+    } = this.props;
+    if (isOpen !== undefined) return {};
     return {
       [Interaction.CLICK]: {
         handlers: {
@@ -76,45 +114,66 @@ class PopperImpl extends Component {
       canClose: () => true
     };
   }
+
   setOpen(opening) {
-    const { onOpen } = this.props;
-    const { prevPropIsOpen } = this.state;
-    if (!this.safeIsMounted)
-      return;
-    if (prevPropIsOpen === void 0) {
+    const {
+      onOpen
+    } = this.props;
+    const {
+      prevPropIsOpen
+    } = this.state;
+    if (!this.safeIsMounted) return;
+
+    if (prevPropIsOpen === undefined) {
       this.setState({
         isOpen: opening,
         destroyed: false
       });
     }
+
     onOpen(opening);
   }
+
   open() {
     clearTimeout(this.closeTimer);
-    const { delayOpen } = this.props;
+    const {
+      delayOpen
+    } = this.props;
     this.openTimer = setTimeout(() => this.setOpen(true), delayOpen);
   }
+
   close() {
     clearTimeout(this.openTimer);
-    const { delayClose, onClose = () => null } = this.props;
+    const {
+      delayClose,
+      onClose = () => null
+    } = this.props;
     this.closeTimer = setTimeout(() => {
       this.setOpen(false);
       onClose();
     }, delayClose);
   }
+
   handleTriggerClick(e) {
-    const { triggerComponent } = this.props;
-    const { onClick } = get(triggerComponent, "props") || {};
+    const {
+      triggerComponent
+    } = this.props;
+    const {
+      onClick
+    } = get(triggerComponent, 'props') || {};
     this.open();
-    if (isFunction(onClick))
-      onClick(e);
+    if (isFunction(onClick)) onClick(e);
   }
+
   handleContentMouseEnter() {
     this.isMouseOverContent = true;
   }
+
   handleContentMouseLeave() {
     this.isMouseOverContent = false;
-    const { onClose = () => null } = this.props;
+    const {
+      onClose = () => null
+    } = this.props;
     setTimeout(() => {
       if (!this.isMouseOverTarget) {
         this.setOpen(false);
@@ -122,10 +181,12 @@ class PopperImpl extends Component {
       }
     }, 10);
   }
+
   handleMouseEnter() {
     this.isMouseOverTarget = true;
     this.open();
   }
+
   handleMouseLeave() {
     this.isMouseOverTarget = false;
     setTimeout(() => {
@@ -134,35 +195,57 @@ class PopperImpl extends Component {
       }
     }, 10);
   }
+
   updatePopoverState(popperData) {
     this.handlePopperPlacementChange(popperData.placement);
     return popperData;
   }
+
   handleDestroyContent() {
-    this.setState({ destroyed: true });
+    this.setState({
+      destroyed: true
+    });
   }
-  renderTarget({ ref }) {
-    const { isOpen } = this.state;
-    const { triggerComponent, interactionType, renderReference } = this.props;
-    const componentInnerRef = get(triggerComponent, ["props", "innerRef"], () => null);
-    const compRef = isDOMTypeElement(triggerComponent) ? { ref } : { innerRef: mergeRefs(ref, componentInnerRef) };
-    const triggerHandler = this.getInteractionObject(interactionType, triggerComponent.props).handlers;
-    const targetProps = {
-      ...triggerHandler,
-      ...compRef,
-      "aria-haspopup": true,
-      "aria-expanded": isOpen
+
+  renderTarget(_ref) {
+    let {
+      ref
+    } = _ref;
+    const {
+      isOpen
+    } = this.state;
+    const {
+      triggerComponent,
+      interactionType,
+      renderReference
+    } = this.props;
+    const componentInnerRef = get(triggerComponent, ['props', 'innerRef'], () => null);
+    const compRef = isDOMTypeElement(triggerComponent) ? {
+      ref
+    } : {
+      innerRef: mergeRefs(ref, componentInnerRef)
     };
+    const triggerHandler = this.getInteractionObject(interactionType, triggerComponent.props).handlers;
+
+    const targetProps = _objectSpread(_objectSpread(_objectSpread({}, triggerHandler), compRef), {}, {
+      'aria-haspopup': true,
+      'aria-expanded': isOpen
+    });
+
     if (renderReference) {
-      return renderReference({
-        ref,
-        ...targetProps
-      });
+      return renderReference(_objectSpread({
+        ref
+      }, targetProps));
     }
+
     return getComponentFromProps(triggerComponent, targetProps);
   }
+
   render() {
-    const { isOpen, destroyed } = this.state;
+    const {
+      isOpen,
+      destroyed
+    } = this.state;
     const {
       placement,
       interactionType,
@@ -182,10 +265,11 @@ class PopperImpl extends Component {
       zIndex,
       hideIfNotVisible
     } = this.props;
-    const allModifiers = {
+
+    const allModifiers = _objectSpread({
       offset: {
         enabled: showArrow,
-        offset: `0, ${arrowSize + arrowGap}`
+        offset: "0, ".concat(arrowSize + arrowGap)
       },
       preventOverflow: {
         enabled: true,
@@ -196,9 +280,9 @@ class PopperImpl extends Component {
         enabled: true,
         fn: this.updatePopoverState,
         order: 900
-      },
-      ...modifiers
-    };
+      }
+    }, modifiers);
+
     const triggerHandler = this.getInteractionObject(interactionType).handlers;
     const popperContentProps = {
       hideIfNotVisible,
@@ -216,28 +300,23 @@ class PopperImpl extends Component {
       usePortal,
       openAnimationConfig,
       closeAnimationConfig,
-      onMouseEnter: interactionType === Interaction.HOVER ? this.handleContentMouseEnter : void 0,
-      onMouseLeave: interactionType === Interaction.HOVER ? this.handleContentMouseLeave : void 0,
+      onMouseEnter: interactionType === Interaction.HOVER ? this.handleContentMouseEnter : undefined,
+      onMouseLeave: interactionType === Interaction.HOVER ? this.handleContentMouseLeave : undefined,
       referenceNode,
       zIndex
     };
-    if (customPopper && typeof customPopper === "function") {
-      return /* @__PURE__ */ React2.createElement(Manager, null, customPopper({
+
+    if (customPopper && typeof customPopper === 'function') {
+      return /*#__PURE__*/_jsx(Manager, {}, void 0, customPopper({
         Reference,
         triggerHandler,
-        content: /* @__PURE__ */ React2.createElement(PopperContent, {
-          ...popperContentProps
-        })
+        content: /*#__PURE__*/jsx(PopperContent, _objectSpread({}, popperContentProps))
       }));
     }
-    return /* @__PURE__ */ React2.createElement(Manager, null, /* @__PURE__ */ React2.createElement(Reference, null, this.renderTarget), /* @__PURE__ */ React2.createElement(PopperContent, {
-      ...popperContentProps
-    }));
+
+    return /*#__PURE__*/_jsx(Manager, {}, void 0, /*#__PURE__*/_jsx(Reference, {}, void 0, this.renderTarget), /*#__PURE__*/jsx(PopperContent, _objectSpread({}, popperContentProps)));
   }
+
 }
-export {
-  PopperContent,
-  Reference,
-  PopperImpl as default
-};
-//# sourceMappingURL=PopperImpl.js.map
+
+export { PopperImpl as default };