@elliemae/ds-popper 3.0.4-rc.4 → 3.1.0-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -42,12 +42,16 @@ __export(PopperContent_exports, {
42
42
  module.exports = __toCommonJS(PopperContent_exports);
43
43
  var React = __toESM(require("react"));
44
44
  var import_react = __toESM(require("react"));
45
+ var import_styled_components = __toESM(require("styled-components"));
45
46
  var import_react_popper = require("@elliemae/react-popper");
46
47
  var import_renderprops = require("react-spring/renderprops");
47
48
  var import_getComponentFromProps = __toESM(require("@elliemae/ds-utilities/getComponentFromProps"));
48
49
  var import_ds_overlay = __toESM(require("@elliemae/ds-overlay"));
49
50
  var import_getArrowStylesBySize = require("./getArrowStylesBySize");
50
51
  const Content = import_renderprops.Keyframes.Spring({});
52
+ const StyledDiv = import_styled_components.default.div`
53
+ z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.popper};
54
+ `;
51
55
  class PopperContent extends import_react.PureComponent {
52
56
  constructor(props) {
53
57
  super(props);
@@ -81,14 +85,7 @@ class PopperContent extends import_react.PureComponent {
81
85
  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"
82
86
  })));
83
87
  }
84
- renderContent({
85
- ref,
86
- style,
87
- placement,
88
- arrowProps,
89
- scheduleUpdate,
90
- outOfBoundaries
91
- }) {
88
+ renderContent({ ref, style, placement, arrowProps, scheduleUpdate, outOfBoundaries }) {
92
89
  const {
93
90
  contentComponent,
94
91
  contentStyle,
@@ -101,15 +98,14 @@ class PopperContent extends import_react.PureComponent {
101
98
  zIndex,
102
99
  hideIfNotVisible
103
100
  } = this.props;
104
- const computedStyle = __spreadProps(__spreadValues(__spreadValues({}, style), contentStyle), {
105
- zIndex
106
- });
107
- return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
101
+ const computedStyle = __spreadValues(__spreadValues({}, style), contentStyle);
102
+ return /* @__PURE__ */ import_react.default.createElement(StyledDiv, __spreadProps(__spreadValues({}, containerProps), {
108
103
  "data-placement": placement,
109
104
  onMouseEnter,
110
105
  onMouseLeave,
111
106
  style: computedStyle,
112
- "data-testid": "popper-container"
107
+ "data-testid": "popper-container",
108
+ zIndex
113
109
  }), /* @__PURE__ */ import_react.default.createElement(Content, {
114
110
  native: true,
115
111
  onRest: this.handleRestAnimation,
@@ -123,9 +119,7 @@ class PopperContent extends import_react.PureComponent {
123
119
  }, (animationStyle) => /* @__PURE__ */ import_react.default.createElement(import_renderprops.animated.div, {
124
120
  ref,
125
121
  style: animationStyle
126
- }, (0, import_getComponentFromProps.default)(contentComponent, { scheduleUpdate }, [
127
- this.renderArrow(arrowProps, placement)
128
- ]))));
122
+ }, (0, import_getComponentFromProps.default)(contentComponent, { scheduleUpdate }, [this.renderArrow(arrowProps, placement)]))));
129
123
  }
130
124
  render() {
131
125
  const {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopperContent.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport { Popper } from '@elliemae/react-popper';\nimport { Keyframes, animated } from 'react-spring/renderprops';\nimport getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';\nimport DSOverlay from '@elliemae/ds-overlay';\nimport { getArrowStylesBySize } from './getArrowStylesBySize';\n\nconst Content = Keyframes.Spring({});\n\nexport default class PopperContent extends PureComponent {\n // eslint-disable-next-line react/static-property-placement\n static defaultProps = { onContentDestroyed: () => null };\n\n constructor(props) {\n super(props);\n this.renderContent = this.renderContent.bind(this);\n this.renderArrow = this.renderArrow.bind(this);\n this.handleRestAnimation = this.handleRestAnimation.bind(this);\n }\n\n handleRestAnimation() {\n const { isOpen, onContentDestroyed } = this.props;\n if (!isOpen) {\n onContentDestroyed();\n }\n }\n\n renderArrow({ ref, style }, placement) {\n const { blockName, showArrow } = this.props;\n if (!showArrow) return null;\n return (\n <div\n key=\"popper-arrow\"\n ref={ref}\n className={`${blockName || 'popper'}__arrow`}\n data-placement={placement}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </div>\n );\n }\n\n renderContent({\n ref,\n style,\n placement,\n arrowProps,\n scheduleUpdate,\n outOfBoundaries,\n }) {\n const {\n contentComponent,\n contentStyle,\n isOpen,\n closeAnimationConfig,\n openAnimationConfig,\n onMouseEnter,\n onMouseLeave,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const computedStyle = {\n ...style,\n ...contentStyle,\n zIndex,\n };\n return (\n <div\n {...containerProps}\n data-placement={placement}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={computedStyle}\n data-testid=\"popper-container\"\n >\n <Content\n native\n onRest={this.handleRestAnimation}\n state={\n isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close'\n }\n states={{\n open: {\n ...openAnimationConfig,\n from: closeAnimationConfig.to,\n },\n close: closeAnimationConfig,\n }}\n >\n {(animationStyle) => (\n <animated.div ref={ref} style={animationStyle}>\n {getComponentFromProps(contentComponent, { scheduleUpdate }, [\n this.renderArrow(arrowProps, placement),\n ])}\n </animated.div>\n )}\n </Content>\n </div>\n );\n }\n\n render() {\n const {\n destroyed = false,\n onClickOutside = () => null,\n placement = 'bottom-start',\n modifiers = {},\n referenceNode,\n usePortal = true,\n } = this.props;\n return (\n <DSOverlay\n isOpen={!destroyed}\n onClickOutside={onClickOutside}\n usePortal={usePortal}\n >\n <Popper\n modifiers={modifiers}\n placement={placement}\n referenceElement={referenceNode}\n >\n {this.renderContent}\n </Popper>\n </DSOverlay>\n );\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqC;AACrC,0BAAuB;AACvB,yBAAoC;AACpC,mCAAkC;AAClC,wBAAsB;AACtB,kCAAqC;AAErC,MAAM,UAAU,6BAAU,OAAO,CAAC,CAAC;AAEnC,MAAO,sBAAoC,2BAAc;AAAA,EAIvD,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,cAAc,KAAK,YAAY,KAAK,IAAI;AAC7C,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAAA,EAC/D;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,QAAQ,uBAAuB,KAAK;AAC5C,QAAI,CAAC,QAAQ;AACX,yBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,KAAK,SAAS,WAAW;AACrC,UAAM,EAAE,WAAW,cAAc,KAAK;AACtC,QAAI,CAAC;AAAW,aAAO;AACvB,WACE,mDAAC;AAAA,MACC,KAAI;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,aAAa;AAAA,MAC3B,kBAAgB;AAAA,MAChB,OAAO,kCACF,QACA,sDAAqB,WAAW,EAAE;AAAA,OAGvC,mDAAC;AAAA,MAAI,SAAQ;AAAA,OACX,mDAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KAEJ,GACA,mDAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KACJ,CACF,CACF;AAAA,EAEJ;AAAA,EAEA,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,gBAAgB,gDACjB,QACA,eAFiB;AAAA,MAGpB;AAAA,IACF;AACA,WACE,mDAAC,wCACK,iBADL;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,QAEZ,mDAAC;AAAA,MACC,QAAM;AAAA,MACN,QAAQ,KAAK;AAAA,MACb,OACE,UAAW,EAAC,mBAAmB,CAAC,oBAAoB,SAAS;AAAA,MAE/D,QAAQ;AAAA,QACN,MAAM,iCACD,sBADC;AAAA,UAEJ,MAAM,qBAAqB;AAAA,QAC7B;AAAA,QACA,OAAO;AAAA,MACT;AAAA,OAEC,CAAC,mBACA,mDAAC,4BAAS,KAAT;AAAA,MAAa;AAAA,MAAU,OAAO;AAAA,OAC5B,0CAAsB,kBAAkB,EAAE,eAAe,GAAG;AAAA,MAC3D,KAAK,YAAY,YAAY,SAAS;AAAA,IACxC,CAAC,CACH,CAEJ,CACF;AAAA,EAEJ;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,iBAAiB,MAAM;AAAA,MACvB,YAAY;AAAA,MACZ,YAAY,CAAC;AAAA,MACb;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AACT,WACE,mDAAC;AAAA,MACC,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,OAEA,mDAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,OAEjB,KAAK,aACR,CACF;AAAA,EAEJ;AACF;AAnIS,AAFT,cAES,eAAe,EAAE,oBAAoB,MAAM,KAAK;",
4
+ "sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport styled from 'styled-components';\nimport { Popper } from '@elliemae/react-popper';\nimport { Keyframes, animated } from 'react-spring/renderprops';\nimport getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';\nimport DSOverlay from '@elliemae/ds-overlay';\nimport { getArrowStylesBySize } from './getArrowStylesBySize';\n\nconst Content = Keyframes.Spring({});\nconst StyledDiv = styled.div`\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.popper};\n`;\n\nexport default class PopperContent extends PureComponent {\n // eslint-disable-next-line react/static-property-placement\n static defaultProps = { onContentDestroyed: () => null };\n\n constructor(props) {\n super(props);\n this.renderContent = this.renderContent.bind(this);\n this.renderArrow = this.renderArrow.bind(this);\n this.handleRestAnimation = this.handleRestAnimation.bind(this);\n }\n\n handleRestAnimation() {\n const { isOpen, onContentDestroyed } = this.props;\n if (!isOpen) {\n onContentDestroyed();\n }\n }\n\n renderArrow({ ref, style }, placement) {\n const { blockName, showArrow } = this.props;\n if (!showArrow) return null;\n return (\n <div\n key=\"popper-arrow\"\n ref={ref}\n className={`${blockName || 'popper'}__arrow`}\n data-placement={placement}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </div>\n );\n }\n\n renderContent({ ref, style, placement, arrowProps, scheduleUpdate, outOfBoundaries }) {\n const {\n contentComponent,\n contentStyle,\n isOpen,\n closeAnimationConfig,\n openAnimationConfig,\n onMouseEnter,\n onMouseLeave,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const computedStyle = {\n ...style,\n ...contentStyle,\n };\n return (\n <StyledDiv\n {...containerProps}\n data-placement={placement}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={computedStyle}\n data-testid=\"popper-container\"\n zIndex={zIndex}\n >\n <Content\n native\n onRest={this.handleRestAnimation}\n state={isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close'}\n states={{\n open: {\n ...openAnimationConfig,\n from: closeAnimationConfig.to,\n },\n close: closeAnimationConfig,\n }}\n >\n {(animationStyle) => (\n <animated.div ref={ref} style={animationStyle}>\n {getComponentFromProps(contentComponent, { scheduleUpdate }, [this.renderArrow(arrowProps, placement)])}\n </animated.div>\n )}\n </Content>\n </StyledDiv>\n );\n }\n\n render() {\n const {\n destroyed = false,\n onClickOutside = () => null,\n placement = 'bottom-start',\n modifiers = {},\n referenceNode,\n usePortal = true,\n } = this.props;\n return (\n <DSOverlay isOpen={!destroyed} onClickOutside={onClickOutside} usePortal={usePortal}>\n <Popper modifiers={modifiers} placement={placement} referenceElement={referenceNode}>\n {this.renderContent}\n </Popper>\n </DSOverlay>\n );\n }\n}\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAqC;AACrC,+BAAmB;AACnB,0BAAuB;AACvB,yBAAoC;AACpC,mCAAkC;AAClC,wBAAsB;AACtB,kCAAqC;AAErC,MAAM,UAAU,6BAAU,OAAO,CAAC,CAAC;AACnC,MAAM,YAAY,iCAAO;AAAA,aACZ,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM,OAAO;AAAA;AAG3D,MAAO,sBAAoC,2BAAc;AAAA,EAIvD,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,cAAc,KAAK,YAAY,KAAK,IAAI;AAC7C,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAAA,EAC/D;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,QAAQ,uBAAuB,KAAK;AAC5C,QAAI,CAAC,QAAQ;AACX,yBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,KAAK,SAAS,WAAW;AACrC,UAAM,EAAE,WAAW,cAAc,KAAK;AACtC,QAAI,CAAC;AAAW,aAAO;AACvB,WACE,mDAAC;AAAA,MACC,KAAI;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,aAAa;AAAA,MAC3B,kBAAgB;AAAA,MAChB,OAAO,kCACF,QACA,sDAAqB,WAAW,EAAE;AAAA,OAGvC,mDAAC;AAAA,MAAI,SAAQ;AAAA,OACX,mDAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KAEJ,GACA,mDAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KACJ,CACF,CACF;AAAA,EAEJ;AAAA,EAEA,cAAc,EAAE,KAAK,OAAO,WAAW,YAAY,gBAAgB,mBAAmB;AACpF,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,gBAAgB,kCACjB,QACA;AAEL,WACE,mDAAC,4CACK,iBADL;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,MACZ;AAAA,QAEA,mDAAC;AAAA,MACC,QAAM;AAAA,MACN,QAAQ,KAAK;AAAA,MACb,OAAO,UAAW,EAAC,mBAAmB,CAAC,oBAAoB,SAAS;AAAA,MACpE,QAAQ;AAAA,QACN,MAAM,iCACD,sBADC;AAAA,UAEJ,MAAM,qBAAqB;AAAA,QAC7B;AAAA,QACA,OAAO;AAAA,MACT;AAAA,OAEC,CAAC,mBACA,mDAAC,4BAAS,KAAT;AAAA,MAAa;AAAA,MAAU,OAAO;AAAA,OAC5B,0CAAsB,kBAAkB,EAAE,eAAe,GAAG,CAAC,KAAK,YAAY,YAAY,SAAS,CAAC,CAAC,CACxG,CAEJ,CACF;AAAA,EAEJ;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,iBAAiB,MAAM;AAAA,MACvB,YAAY;AAAA,MACZ,YAAY,CAAC;AAAA,MACb;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AACT,WACE,mDAAC;AAAA,MAAU,QAAQ,CAAC;AAAA,MAAW;AAAA,MAAgC;AAAA,OAC7D,mDAAC;AAAA,MAAO;AAAA,MAAsB;AAAA,MAAsB,kBAAkB;AAAA,OACnE,KAAK,aACR,CACF;AAAA,EAEJ;AACF;AAhHS,AAFT,cAES,eAAe,EAAE,oBAAoB,MAAM,KAAK;",
6
6
  "names": []
7
7
  }
@@ -19,12 +19,16 @@ var __spreadValues = (a, b) => {
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
20
  import * as React from "react";
21
21
  import React2, { PureComponent } from "react";
22
+ import styled from "styled-components";
22
23
  import { Popper } from "@elliemae/react-popper";
23
24
  import { Keyframes, animated } from "react-spring/renderprops";
24
25
  import getComponentFromProps from "@elliemae/ds-utilities/getComponentFromProps";
25
26
  import DSOverlay from "@elliemae/ds-overlay";
26
27
  import { getArrowStylesBySize } from "./getArrowStylesBySize";
27
28
  const Content = Keyframes.Spring({});
29
+ const StyledDiv = styled.div`
30
+ z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.popper};
31
+ `;
28
32
  class PopperContent extends PureComponent {
29
33
  constructor(props) {
30
34
  super(props);
@@ -58,14 +62,7 @@ class PopperContent extends PureComponent {
58
62
  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"
59
63
  })));
60
64
  }
61
- renderContent({
62
- ref,
63
- style,
64
- placement,
65
- arrowProps,
66
- scheduleUpdate,
67
- outOfBoundaries
68
- }) {
65
+ renderContent({ ref, style, placement, arrowProps, scheduleUpdate, outOfBoundaries }) {
69
66
  const {
70
67
  contentComponent,
71
68
  contentStyle,
@@ -78,15 +75,14 @@ class PopperContent extends PureComponent {
78
75
  zIndex,
79
76
  hideIfNotVisible
80
77
  } = this.props;
81
- const computedStyle = __spreadProps(__spreadValues(__spreadValues({}, style), contentStyle), {
82
- zIndex
83
- });
84
- return /* @__PURE__ */ React2.createElement("div", __spreadProps(__spreadValues({}, containerProps), {
78
+ const computedStyle = __spreadValues(__spreadValues({}, style), contentStyle);
79
+ return /* @__PURE__ */ React2.createElement(StyledDiv, __spreadProps(__spreadValues({}, containerProps), {
85
80
  "data-placement": placement,
86
81
  onMouseEnter,
87
82
  onMouseLeave,
88
83
  style: computedStyle,
89
- "data-testid": "popper-container"
84
+ "data-testid": "popper-container",
85
+ zIndex
90
86
  }), /* @__PURE__ */ React2.createElement(Content, {
91
87
  native: true,
92
88
  onRest: this.handleRestAnimation,
@@ -100,9 +96,7 @@ class PopperContent extends PureComponent {
100
96
  }, (animationStyle) => /* @__PURE__ */ React2.createElement(animated.div, {
101
97
  ref,
102
98
  style: animationStyle
103
- }, getComponentFromProps(contentComponent, { scheduleUpdate }, [
104
- this.renderArrow(arrowProps, placement)
105
- ]))));
99
+ }, getComponentFromProps(contentComponent, { scheduleUpdate }, [this.renderArrow(arrowProps, placement)]))));
106
100
  }
107
101
  render() {
108
102
  const {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopperContent.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport { Popper } from '@elliemae/react-popper';\nimport { Keyframes, animated } from 'react-spring/renderprops';\nimport getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';\nimport DSOverlay from '@elliemae/ds-overlay';\nimport { getArrowStylesBySize } from './getArrowStylesBySize';\n\nconst Content = Keyframes.Spring({});\n\nexport default class PopperContent extends PureComponent {\n // eslint-disable-next-line react/static-property-placement\n static defaultProps = { onContentDestroyed: () => null };\n\n constructor(props) {\n super(props);\n this.renderContent = this.renderContent.bind(this);\n this.renderArrow = this.renderArrow.bind(this);\n this.handleRestAnimation = this.handleRestAnimation.bind(this);\n }\n\n handleRestAnimation() {\n const { isOpen, onContentDestroyed } = this.props;\n if (!isOpen) {\n onContentDestroyed();\n }\n }\n\n renderArrow({ ref, style }, placement) {\n const { blockName, showArrow } = this.props;\n if (!showArrow) return null;\n return (\n <div\n key=\"popper-arrow\"\n ref={ref}\n className={`${blockName || 'popper'}__arrow`}\n data-placement={placement}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </div>\n );\n }\n\n renderContent({\n ref,\n style,\n placement,\n arrowProps,\n scheduleUpdate,\n outOfBoundaries,\n }) {\n const {\n contentComponent,\n contentStyle,\n isOpen,\n closeAnimationConfig,\n openAnimationConfig,\n onMouseEnter,\n onMouseLeave,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const computedStyle = {\n ...style,\n ...contentStyle,\n zIndex,\n };\n return (\n <div\n {...containerProps}\n data-placement={placement}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={computedStyle}\n data-testid=\"popper-container\"\n >\n <Content\n native\n onRest={this.handleRestAnimation}\n state={\n isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close'\n }\n states={{\n open: {\n ...openAnimationConfig,\n from: closeAnimationConfig.to,\n },\n close: closeAnimationConfig,\n }}\n >\n {(animationStyle) => (\n <animated.div ref={ref} style={animationStyle}>\n {getComponentFromProps(contentComponent, { scheduleUpdate }, [\n this.renderArrow(arrowProps, placement),\n ])}\n </animated.div>\n )}\n </Content>\n </div>\n );\n }\n\n render() {\n const {\n destroyed = false,\n onClickOutside = () => null,\n placement = 'bottom-start',\n modifiers = {},\n referenceNode,\n usePortal = true,\n } = this.props;\n return (\n <DSOverlay\n isOpen={!destroyed}\n onClickOutside={onClickOutside}\n usePortal={usePortal}\n >\n <Popper\n modifiers={modifiers}\n placement={placement}\n referenceElement={referenceNode}\n >\n {this.renderContent}\n </Popper>\n </DSOverlay>\n );\n }\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,UAAU,OAAO,CAAC,CAAC;AAEnC,MAAO,sBAAoC,cAAc;AAAA,EAIvD,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,cAAc,KAAK,YAAY,KAAK,IAAI;AAC7C,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAAA,EAC/D;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,QAAQ,uBAAuB,KAAK;AAC5C,QAAI,CAAC,QAAQ;AACX,yBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,KAAK,SAAS,WAAW;AACrC,UAAM,EAAE,WAAW,cAAc,KAAK;AACtC,QAAI,CAAC;AAAW,aAAO;AACvB,WACE,qCAAC;AAAA,MACC,KAAI;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,aAAa;AAAA,MAC3B,kBAAgB;AAAA,MAChB,OAAO,kCACF,QACA,qBAAqB,WAAW,EAAE;AAAA,OAGvC,qCAAC;AAAA,MAAI,SAAQ;AAAA,OACX,qCAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KAEJ,GACA,qCAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KACJ,CACF,CACF;AAAA,EAEJ;AAAA,EAEA,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KACC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,gBAAgB,gDACjB,QACA,eAFiB;AAAA,MAGpB;AAAA,IACF;AACA,WACE,qCAAC,wCACK,iBADL;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,QAEZ,qCAAC;AAAA,MACC,QAAM;AAAA,MACN,QAAQ,KAAK;AAAA,MACb,OACE,UAAW,EAAC,mBAAmB,CAAC,oBAAoB,SAAS;AAAA,MAE/D,QAAQ;AAAA,QACN,MAAM,iCACD,sBADC;AAAA,UAEJ,MAAM,qBAAqB;AAAA,QAC7B;AAAA,QACA,OAAO;AAAA,MACT;AAAA,OAEC,CAAC,mBACA,qCAAC,SAAS,KAAT;AAAA,MAAa;AAAA,MAAU,OAAO;AAAA,OAC5B,sBAAsB,kBAAkB,EAAE,eAAe,GAAG;AAAA,MAC3D,KAAK,YAAY,YAAY,SAAS;AAAA,IACxC,CAAC,CACH,CAEJ,CACF;AAAA,EAEJ;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,iBAAiB,MAAM;AAAA,MACvB,YAAY;AAAA,MACZ,YAAY,CAAC;AAAA,MACb;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AACT,WACE,qCAAC;AAAA,MACC,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,OAEA,qCAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,OAEjB,KAAK,aACR,CACF;AAAA,EAEJ;AACF;AAnIS,AAFT,cAES,eAAe,EAAE,oBAAoB,MAAM,KAAK;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport styled from 'styled-components';\nimport { Popper } from '@elliemae/react-popper';\nimport { Keyframes, animated } from 'react-spring/renderprops';\nimport getComponentFromProps from '@elliemae/ds-utilities/getComponentFromProps';\nimport DSOverlay from '@elliemae/ds-overlay';\nimport { getArrowStylesBySize } from './getArrowStylesBySize';\n\nconst Content = Keyframes.Spring({});\nconst StyledDiv = styled.div`\n z-index: ${({ zIndex, theme }) => zIndex ?? theme.zIndex.popper};\n`;\n\nexport default class PopperContent extends PureComponent {\n // eslint-disable-next-line react/static-property-placement\n static defaultProps = { onContentDestroyed: () => null };\n\n constructor(props) {\n super(props);\n this.renderContent = this.renderContent.bind(this);\n this.renderArrow = this.renderArrow.bind(this);\n this.handleRestAnimation = this.handleRestAnimation.bind(this);\n }\n\n handleRestAnimation() {\n const { isOpen, onContentDestroyed } = this.props;\n if (!isOpen) {\n onContentDestroyed();\n }\n }\n\n renderArrow({ ref, style }, placement) {\n const { blockName, showArrow } = this.props;\n if (!showArrow) return null;\n return (\n <div\n key=\"popper-arrow\"\n ref={ref}\n className={`${blockName || 'popper'}__arrow`}\n data-placement={placement}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </div>\n );\n }\n\n renderContent({ ref, style, placement, arrowProps, scheduleUpdate, outOfBoundaries }) {\n const {\n contentComponent,\n contentStyle,\n isOpen,\n closeAnimationConfig,\n openAnimationConfig,\n onMouseEnter,\n onMouseLeave,\n containerProps,\n zIndex,\n hideIfNotVisible,\n } = this.props;\n\n const computedStyle = {\n ...style,\n ...contentStyle,\n };\n return (\n <StyledDiv\n {...containerProps}\n data-placement={placement}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n style={computedStyle}\n data-testid=\"popper-container\"\n zIndex={zIndex}\n >\n <Content\n native\n onRest={this.handleRestAnimation}\n state={isOpen && (!outOfBoundaries || !hideIfNotVisible) ? 'open' : 'close'}\n states={{\n open: {\n ...openAnimationConfig,\n from: closeAnimationConfig.to,\n },\n close: closeAnimationConfig,\n }}\n >\n {(animationStyle) => (\n <animated.div ref={ref} style={animationStyle}>\n {getComponentFromProps(contentComponent, { scheduleUpdate }, [this.renderArrow(arrowProps, placement)])}\n </animated.div>\n )}\n </Content>\n </StyledDiv>\n );\n }\n\n render() {\n const {\n destroyed = false,\n onClickOutside = () => null,\n placement = 'bottom-start',\n modifiers = {},\n referenceNode,\n usePortal = true,\n } = this.props;\n return (\n <DSOverlay isOpen={!destroyed} onClickOutside={onClickOutside} usePortal={usePortal}>\n <Popper modifiers={modifiers} placement={placement} referenceElement={referenceNode}>\n {this.renderContent}\n </Popper>\n </DSOverlay>\n );\n }\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,UAAU,OAAO,CAAC,CAAC;AACnC,MAAM,YAAY,OAAO;AAAA,aACZ,CAAC,EAAE,QAAQ,YAAY,UAAU,MAAM,OAAO;AAAA;AAG3D,MAAO,sBAAoC,cAAc;AAAA,EAIvD,YAAY,OAAO;AACjB,UAAM,KAAK;AACX,SAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AACjD,SAAK,cAAc,KAAK,YAAY,KAAK,IAAI;AAC7C,SAAK,sBAAsB,KAAK,oBAAoB,KAAK,IAAI;AAAA,EAC/D;AAAA,EAEA,sBAAsB;AACpB,UAAM,EAAE,QAAQ,uBAAuB,KAAK;AAC5C,QAAI,CAAC,QAAQ;AACX,yBAAmB;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,YAAY,EAAE,KAAK,SAAS,WAAW;AACrC,UAAM,EAAE,WAAW,cAAc,KAAK;AACtC,QAAI,CAAC;AAAW,aAAO;AACvB,WACE,qCAAC;AAAA,MACC,KAAI;AAAA,MACJ;AAAA,MACA,WAAW,GAAG,aAAa;AAAA,MAC3B,kBAAgB;AAAA,MAChB,OAAO,kCACF,QACA,qBAAqB,WAAW,EAAE;AAAA,OAGvC,qCAAC;AAAA,MAAI,SAAQ;AAAA,OACX,qCAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KAEJ,GACA,qCAAC;AAAA,MACC,WAAU;AAAA,MACV,GAAE;AAAA,KACJ,CACF,CACF;AAAA,EAEJ;AAAA,EAEA,cAAc,EAAE,KAAK,OAAO,WAAW,YAAY,gBAAgB,mBAAmB;AACpF,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,QACE,KAAK;AAET,UAAM,gBAAgB,kCACjB,QACA;AAEL,WACE,qCAAC,4CACK,iBADL;AAAA,MAEC,kBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,eAAY;AAAA,MACZ;AAAA,QAEA,qCAAC;AAAA,MACC,QAAM;AAAA,MACN,QAAQ,KAAK;AAAA,MACb,OAAO,UAAW,EAAC,mBAAmB,CAAC,oBAAoB,SAAS;AAAA,MACpE,QAAQ;AAAA,QACN,MAAM,iCACD,sBADC;AAAA,UAEJ,MAAM,qBAAqB;AAAA,QAC7B;AAAA,QACA,OAAO;AAAA,MACT;AAAA,OAEC,CAAC,mBACA,qCAAC,SAAS,KAAT;AAAA,MAAa;AAAA,MAAU,OAAO;AAAA,OAC5B,sBAAsB,kBAAkB,EAAE,eAAe,GAAG,CAAC,KAAK,YAAY,YAAY,SAAS,CAAC,CAAC,CACxG,CAEJ,CACF;AAAA,EAEJ;AAAA,EAEA,SAAS;AACP,UAAM;AAAA,MACJ,YAAY;AAAA,MACZ,iBAAiB,MAAM;AAAA,MACvB,YAAY;AAAA,MACZ,YAAY,CAAC;AAAA,MACb;AAAA,MACA,YAAY;AAAA,QACV,KAAK;AACT,WACE,qCAAC;AAAA,MAAU,QAAQ,CAAC;AAAA,MAAW;AAAA,MAAgC;AAAA,OAC7D,qCAAC;AAAA,MAAO;AAAA,MAAsB;AAAA,MAAsB,kBAAkB;AAAA,OACnE,KAAK,aACR,CACF;AAAA,EAEJ;AACF;AAhHS,AAFT,cAES,eAAe,EAAE,oBAAoB,MAAM,KAAK;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-popper",
3
- "version": "3.0.4-rc.4",
3
+ "version": "3.1.0-next.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Popper",
6
6
  "files": [
@@ -70,8 +70,8 @@
70
70
  "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
71
71
  },
72
72
  "dependencies": {
73
- "@elliemae/ds-overlay": "3.0.4-rc.4",
74
- "@elliemae/ds-utilities": "3.0.4-rc.4",
73
+ "@elliemae/ds-overlay": "3.1.0-next.2",
74
+ "@elliemae/ds-utilities": "3.1.0-next.2",
75
75
  "@elliemae/react-popper": "~1.0.2",
76
76
  "memoize-one": "~5.1.1",
77
77
  "prop-types": "~15.8.1",