@elliemae/ds-popperjs 2.3.0-next.0 → 3.0.0-alpha.0

package/esm/index.js

@@ -1,74 +0,0 @@
-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 { useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { describe } from 'react-desc';
-import { dspopperjsPropTypes } from './propTypes.js';
-import { PopoverContent } from './PopoverContent.js';
-import { useConfigDSPopperjs } from './config/useConfigDSPopperjs.js';
-import { jsx, Fragment } 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 DSPopperJS = props => {
-  const {
-    props: {
-      showPopover,
-      withoutAnimation,
-      animationDuration,
-      withoutPortal,
-      withoutArrow,
-      portalDOMContainer,
-      zIndex,
-      extraPopperStyles
-    },
-    setPopperElement,
-    setArrowElement,
-    setIsAnimating,
-    popoverHelper,
-    isAnimating
-  } = useConfigDSPopperjs(props);
-  const {
-    children
-  } = props;
-  const {
-    styles,
-    attributes
-  } = popoverHelper;
-  const contentJSX = useMemo(() => /*#__PURE__*/_jsx(PopoverContent, {
-    setPopperElement: setPopperElement,
-    popperStyles: _objectSpread(_objectSpread({}, styles.popper), extraPopperStyles),
-    popperAttributes: attributes.popper,
-    setArrowElement: setArrowElement,
-    arrowStyle: styles.arrow,
-    withoutArrow: withoutArrow,
-    withoutAnimation: withoutAnimation,
-    animationDuration: animationDuration,
-    zIndex: zIndex,
-    showPopover: showPopover,
-    setIsAnimating: setIsAnimating
-  }, void 0, children), [attributes.popper, children, setIsAnimating, showPopover, extraPopperStyles, setArrowElement, setPopperElement, styles.arrow, styles.popper, withoutArrow, withoutAnimation, animationDuration, zIndex]);
-
-  if (showPopover || isAnimating) {
-    if (withoutPortal === true) return contentJSX;
-    if (withoutPortal === false) return /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(Fragment, {
-        children: contentJSX
-      }), portalDOMContainer)
-    });
-  }
-
-  return null;
-};
-
-const DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
-DSPopperJSWithSchema.propTypes = dspopperjsPropTypes;
-
-export { DSPopperJS, DSPopperJSWithSchema, DSPopperJS as default };

package/esm/propTypes.js

@@ -1,81 +0,0 @@
-import { PropTypes } from 'react-desc';
-
-const dspopperjsPropTypes = {
-  /**
-   * React ref to popperjs referenceElement
-   */
-  referenceElement: PropTypes.element.description('popperjs DOM referenceElement').isRequired,
-
-  /**
-   * Wheter or not to show the popper content
-   */
-  showPopover: PropTypes.bool.description('whether or not to show the popper content').isRequired,
-
-  /**
-   * Callback to close the context menu, used for "on click outside",
-   *  if not provided click outside will not trigger anything
-   */
-  closeContextMenu: PropTypes.func.description('Callback to close the context menu, used for "on click outside",' + ' if not provided click outside will not trigger anything').defaultValue('() => {}'),
-
-  /**
-   *  Wheter or not the popper content should appear in a DOM portal or not
-   */
-  withoutPortal: PropTypes.bool.description('Whether or not the popper content should appear in a DOM portal or not').defaultValue(true),
-
-  /**
-   *  Wheter or not the popper context menu should print the arrow
-   */
-  withoutArrow: PropTypes.bool.description('Whether or not the popper context menu should print the arrow').defaultValue(false),
-
-  /**
-   *  Whether or not the popper context menu should be animated
-   */
-  withoutAnimation: PropTypes.bool.description('Whether or not the popper context menu should be animated').defaultValue(false),
-
-  /**
-   *  Popper context menus Animation duration in ms
-   */
-  animationDuration: PropTypes.number.description('Popper context menus Animation duration in ms').defaultValue(100),
-
-  /**
-   *  Bounding element to calculate upon, defaults to it is "clippingParents",
-   *   which are the scrolling containers that may cause the element to be partially or fully cut off.
-   */
-  boundaryElement: PropTypes.element.description('Bounding element to calculate upon, defaults to "clippingParents",' + 'which are the scrolling containers that may cause element to be partially or fully cut off').defaultValue(undefined),
-
-  /**
-   *  When using portal, the container in which to append the DOM content, defaults to document body
-   */
-  portalDOMContainer: PropTypes.element.description('When using portal, the container in which to append the DOM content, defaults to document body').defaultValue(undefined),
-
-  /**
-   *  start placement preferences, as per popperjs placement option
-   */
-  startPlacementPreference: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preferences, as per popperjs placement option').defaultValue("'top'"),
-
-  /**
-   *  Array of placement preferences, as per popperjs "flip" placement option
-   */
-  placementOrderPreference: PropTypes.arrayOf(PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start'])).description('Array of placement preferences, as per popperjs "flip" placement option').defaultValue("['top', 'bottom', 'left', 'right']"),
-
-  /**
-   *  popperjs content z-index
-   */
-  zIndex: PropTypes.number.description('popperjs content z-index').defaultValue(1),
-
-  /**
-   *  placement offset array
-   */
-  customOffset: PropTypes.arrayOf(PropTypes.number).description('placement offset array').defaultValue(1),
-
-  /**
-   *  modifiers array for full-custom popper-js override
-   *  https://popper.js.org/docs/v2/modifiers/
-   */
-  modifiers: PropTypes.array.description('modifiers array for full-custom popper-js override, https://popper.js.org/docs/v2/modifiers/').defaultValue(1),
-  extraPopperStyles: PropTypes.object.description('Extra object styles to attach to the popper element').defaultValue({}),
-  onClickOutside: PropTypes.func.description('Callback triggered when clicking outside the popper').defaultValue(() => null),
-  children: PropTypes.node.description('The content of the popper').defaultValue(undefined)
-};
-
-export { dspopperjsPropTypes };

package/esm/styled.js

@@ -1,27 +0,0 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
-import styled from 'styled-components';
-import { kfrm, css } from '@elliemae/ds-system';
-
-var _templateObject, _templateObject2, _templateObject3;
-const showAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    from {\n      opacity: 0;\n      transform: scale(0.8);\n    }\n\n    to {\n      opacity: 1;\n      transform: scale(1);\n      visibility: visible;\n    }\n"])));
-const hideAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n\n    to {\n      opacity: 0;\n      transform: scale(0.8);\n      visibility: hidden;\n    }\n"])));
-const StyledPopoverContentWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1giz5kx-0"
-})(["z-index:", ";"], _ref => {
-  let {
-    zIndex
-  } = _ref;
-  return zIndex;
-});
-const StyledAnimatedPopper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1giz5kx-1"
-})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);", ""], _ref2 => {
-  let {
-    showPopover,
-    animationDuration,
-    withoutAnimation
-  } = _ref2;
-  return !withoutAnimation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " ", "ms ease-in;\n    "])), showPopover ? showAnimation : hideAnimation, animationDuration);
-});
-
-export { StyledAnimatedPopper, StyledPopoverContentWrapper };

package/esm/utils/hooks/useOnClickOutside.js

@@ -1,25 +0,0 @@
-import { useEffect } from 'react';
-
-function useOnClickOutside(ref, cb) {
-  useEffect(() => {
-    const listener = event => {
-      var _ref$contains;
-
-      // Do nothing if clicking ref's element or descendent elements
-      if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
-        return;
-      }
-
-      cb(event);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [ref, cb]);
-}
-
-export { useOnClickOutside };