@elliemae/ds-popper 3.0.4-rc.5 → 3.1.0-next.10
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.
- package/dist/cjs/DSPopper.js +2 -2
- package/dist/cjs/DSPopper.js.map +2 -2
- package/dist/cjs/PopperContent.js +10 -16
- package/dist/cjs/PopperContent.js.map +2 -2
- package/dist/cjs/props.js +14 -14
- package/dist/cjs/props.js.map +2 -2
- package/dist/esm/DSPopper.js +1 -1
- package/dist/esm/DSPopper.js.map +1 -1
- package/dist/esm/PopperContent.js +10 -16
- package/dist/esm/PopperContent.js.map +2 -2
- package/dist/esm/props.js +1 -1
- package/dist/esm/props.js.map +1 -1
- package/package.json +8 -7
package/dist/cjs/DSPopper.js
CHANGED
|
@@ -31,7 +31,7 @@ __export(DSPopper_exports, {
|
|
|
31
31
|
module.exports = __toCommonJS(DSPopper_exports);
|
|
32
32
|
var React = __toESM(require("react"));
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
|
-
var
|
|
34
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
35
35
|
var import_PopperImpl = __toESM(require("./PopperImpl"));
|
|
36
36
|
var import_positions = require("./positions");
|
|
37
37
|
var import_interaction = require("./interaction");
|
|
@@ -105,7 +105,7 @@ const DSPopper = ({
|
|
|
105
105
|
DSPopper.propTypes = import_props.popperProps;
|
|
106
106
|
DSPopper.defaultProps = import_props.defaultProps;
|
|
107
107
|
DSPopper.displayName = "DSPopper";
|
|
108
|
-
const DSPopperWithSchema = (0,
|
|
108
|
+
const DSPopperWithSchema = (0, import_ds_utilities.describe)(DSPopper);
|
|
109
109
|
DSPopperWithSchema.propTypes = import_props.popperProps;
|
|
110
110
|
var DSPopper_default = DSPopper;
|
|
111
111
|
//# sourceMappingURL=DSPopper.js.map
|
package/dist/cjs/DSPopper.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSPopper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React from 'react';\nimport { describe } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport PopperImpl from './PopperImpl';\nimport { Position } from './positions';\nimport { Interaction } from './interaction';\nimport { popperProps, defaultProps } from './props';\n\nconst DSPopper = ({\n containerProps,\n arrowGap,\n arrowSize,\n blockName,\n contentOffset,\n contentStyle,\n contentComponent,\n delayClose,\n delayOpen,\n interactionType,\n isOpen, // if this is set DSPopper would be a controlled component if not, an uncontrolled one\n onOpen,\n onClose,\n onPlacementChange,\n placement,\n preventOverflow,\n showArrow,\n closeAnimationConfig,\n openAnimationConfig,\n usePortal,\n triggerComponent,\n wrapExtraComponent,\n getTargetFromChildren,\n getContentFromChildren,\n modifiers,\n triggerRef,\n children: customPopper,\n renderReference,\n referenceNode,\n zIndex,\n hideIfNotVisible,\n}): JSX.Element => (\n <PopperImpl\n arrowGap={arrowGap}\n arrowSize={arrowSize}\n blockName={blockName}\n closeAnimationConfig={closeAnimationConfig}\n containerProps={containerProps}\n contentComponent={contentComponent}\n contentOffset={contentOffset}\n contentStyle={contentStyle}\n delayClose={delayClose}\n delayOpen={delayOpen}\n getContentFromChildren={getContentFromChildren}\n getTargetFromChildren={getTargetFromChildren}\n interactionType={interactionType}\n isOpen={isOpen}\n modifiers={modifiers}\n onOpen={onOpen}\n onClose={onClose}\n onPlacementChange={onPlacementChange}\n openAnimationConfig={openAnimationConfig}\n placement={placement}\n preventOverflow={preventOverflow}\n referenceNode={referenceNode}\n renderReference={renderReference}\n showArrow={showArrow}\n triggerComponent={triggerComponent}\n triggerRef={triggerRef}\n usePortal={usePortal}\n wrapExtraComponent={wrapExtraComponent}\n zIndex={zIndex}\n hideIfNotVisible={hideIfNotVisible}\n >\n {customPopper}\n </PopperImpl>\n);\n\n// @deprecated: There's the NEW (not finished) popover that uses its own popper implementation.\nDSPopper.propTypes = popperProps;\nDSPopper.defaultProps = defaultProps;\nDSPopper.displayName = 'DSPopper';\nconst DSPopperWithSchema = describe(DSPopper);\nDSPopperWithSchema.propTypes = popperProps;\n\nexport { Interaction as PopperInteractions, Position as PopperPositions, DSPopperWithSchema, DSPopper };\n\nexport { interactions } from './interaction';\nexport { positions } from './positions';\n\nexport default DSPopper;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,0BAAyB;AACzB,wBAAuB;AACvB,uBAAyB;AACzB,yBAA4B;AAC5B,mBAA0C;AAgF1C,0BAA6B;AAC7B,wBAA0B;AA/E1B,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,mDAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEC,YACH;AAIF,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,MAAM,qBAAqB,kCAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAO/B,IAAO,mBAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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_ds_system = require("@elliemae/ds-system");
|
|
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_ds_system.styled.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 =
|
|
105
|
-
|
|
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({
|
|
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;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport { styled } from '@elliemae/ds-system';\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,uBAAuB;AACvB,0BAAuB;AACvB,yBAAoC;AACpC,mCAAkC;AAClC,wBAAsB;AACtB,kCAAqC;AAErC,MAAM,UAAU,6BAAU,OAAO,CAAC,CAAC;AACnC,MAAM,YAAY,wBAAO;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
|
}
|
package/dist/cjs/props.js
CHANGED
|
@@ -25,24 +25,24 @@ __export(props_exports, {
|
|
|
25
25
|
});
|
|
26
26
|
module.exports = __toCommonJS(props_exports);
|
|
27
27
|
var React = __toESM(require("react"));
|
|
28
|
-
var
|
|
28
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
29
29
|
var import_positions = require("./positions");
|
|
30
30
|
var import_interaction = require("./interaction");
|
|
31
31
|
const popperProps = {
|
|
32
|
-
hideIfNotVisible:
|
|
33
|
-
containerProps:
|
|
34
|
-
arrowGap:
|
|
35
|
-
onOpen:
|
|
36
|
-
onClose:
|
|
37
|
-
delayClose:
|
|
38
|
-
delayOpen:
|
|
39
|
-
onPlacementChange:
|
|
40
|
-
arrowSize:
|
|
41
|
-
blockName:
|
|
42
|
-
|
|
43
|
-
|
|
32
|
+
hideIfNotVisible: import_ds_utilities.PropTypes.bool.description("Hide menu component if trigger component is not visible/scrolled away"),
|
|
33
|
+
containerProps: import_ds_utilities.PropTypes.object.description("props to inject to popper wrapper"),
|
|
34
|
+
arrowGap: import_ds_utilities.PropTypes.number.description("Space between the arrow and the popup"),
|
|
35
|
+
onOpen: import_ds_utilities.PropTypes.func.description("callback for when menu changes from close to open"),
|
|
36
|
+
onClose: import_ds_utilities.PropTypes.func.description("callback for when menu changes from open to close"),
|
|
37
|
+
delayClose: import_ds_utilities.PropTypes.number.description("Time in ms to delay close of menu"),
|
|
38
|
+
delayOpen: import_ds_utilities.PropTypes.number.description("Time in ms to delay open of menu"),
|
|
39
|
+
onPlacementChange: import_ds_utilities.PropTypes.func.description("callback for when menu changes placement"),
|
|
40
|
+
arrowSize: import_ds_utilities.PropTypes.number.description("Arrow size"),
|
|
41
|
+
blockName: import_ds_utilities.PropTypes.oneOfType([
|
|
42
|
+
import_ds_utilities.PropTypes.string,
|
|
43
|
+
import_ds_utilities.PropTypes.object
|
|
44
44
|
]).description("Bem blockname for the popper"),
|
|
45
|
-
triggerComponent:
|
|
45
|
+
triggerComponent: import_ds_utilities.PropTypes.element.description(`The component that will open/close the tooltip.
|
|
46
46
|
Cannot be used with disabled elements.
|
|
47
47
|
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled`).isRequired
|
|
48
48
|
};
|
package/dist/cjs/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/props.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { PropTypes } from '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { Position } from './positions';\nimport { Interaction } from './interaction';\n\nexport const popperProps = {\n /** Hide menu component if trigger component is not visible/scrolled away */\n hideIfNotVisible: PropTypes.bool.description(\n 'Hide menu component if trigger component is not visible/scrolled away',\n ),\n /** props to inject to popper wrapper */\n containerProps: PropTypes.object.description(\n 'props to inject to popper wrapper',\n ),\n /** Space between the arrow and the popup */\n arrowGap: PropTypes.number.description(\n 'Space between the arrow and the popup',\n ),\n /** callback for when menu changes from close to open */\n onOpen: PropTypes.func.description(\n 'callback for when menu changes from close to open',\n ),\n /** callback for when menu changes from open to close */\n onClose: PropTypes.func.description(\n 'callback for when menu changes from open to close',\n ),\n /** Time in ms to delay close of menu */\n delayClose: PropTypes.number.description('Time in ms to delay close of menu'),\n /** Time in ms to delay open of menu */\n delayOpen: PropTypes.number.description('Time in ms to delay open of menu'),\n /** callback for when menu changes placement */\n onPlacementChange: PropTypes.func.description(\n 'callback for when menu changes placement',\n ),\n /** Arrow size */\n arrowSize: PropTypes.number.description('Arrow size'),\n /** Bem blockname for the popper */\n blockName: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n ]).description('Bem blockname for the popper'),\n triggerComponent: PropTypes.element.description(\n `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`,\n ).isRequired,\n};\n\nexport const defaultProps = {\n containerProps: {},\n arrowGap: 8,\n arrowSize: 6,\n blockName: '',\n contentOffset: null,\n contentStyle: null,\n contentComponent: () => null,\n delayClose: 300,\n delayOpen: 200,\n interactionType: Interaction.CLICK,\n onOpen: () => null,\n onClose: () => null,\n onPlacementChange: () => null,\n placement: Position.BOTTOM,\n preventOverflow: 'window',\n showArrow: true,\n closeAnimationConfig: {\n to: { transform: 'scale(0.8)', opacity: '0' },\n config: { delay: 80, duration: 80 },\n },\n openAnimationConfig: {\n to: { transform: 'scale(1)', opacity: '1' },\n config: { delay: 80, duration: 80 },\n },\n usePortal: true,\n triggerComponent: () => null,\n getTargetFromChildren: () => null,\n getContentFromChildren: () => null,\n modifiers: {},\n triggerRef: () => null,\n hideIfNotVisible: false,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,uBAAyB;AACzB,yBAA4B;AAErB,MAAM,cAAc;AAAA,EAEzB,kBAAkB,8BAAU,KAAK,YAC/B,uEACF;AAAA,EAEA,gBAAgB,8BAAU,OAAO,YAC/B,mCACF;AAAA,EAEA,UAAU,8BAAU,OAAO,YACzB,uCACF;AAAA,EAEA,QAAQ,8BAAU,KAAK,YACrB,mDACF;AAAA,EAEA,SAAS,8BAAU,KAAK,YACtB,mDACF;AAAA,EAEA,YAAY,8BAAU,OAAO,YAAY,mCAAmC;AAAA,EAE5E,WAAW,8BAAU,OAAO,YAAY,kCAAkC;AAAA,EAE1E,mBAAmB,8BAAU,KAAK,YAChC,0CACF;AAAA,EAEA,WAAW,8BAAU,OAAO,YAAY,YAAY;AAAA,EAEpD,WAAW,8BAAU,UAAU;AAAA,IAC7B,8BAAU;AAAA,IACV,8BAAU;AAAA,EACZ,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC7C,kBAAkB,8BAAU,QAAQ,YAClC;AAAA;AAAA,0EAGF,EAAE;AACJ;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,kBAAkB,MAAM;AAAA,EACxB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,iBAAiB,+BAAY;AAAA,EAC7B,QAAQ,MAAM;AAAA,EACd,SAAS,MAAM;AAAA,EACf,mBAAmB,MAAM;AAAA,EACzB,WAAW,0BAAS;AAAA,EACpB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,IAAI,EAAE,WAAW,cAAc,SAAS,IAAI;AAAA,IAC5C,QAAQ,EAAE,OAAO,IAAI,UAAU,GAAG;AAAA,EACpC;AAAA,EACA,qBAAqB;AAAA,IACnB,IAAI,EAAE,WAAW,YAAY,SAAS,IAAI;AAAA,IAC1C,QAAQ,EAAE,OAAO,IAAI,UAAU,GAAG;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB,MAAM;AAAA,EACxB,uBAAuB,MAAM;AAAA,EAC7B,wBAAwB,MAAM;AAAA,EAC9B,WAAW,CAAC;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,kBAAkB;AACpB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSPopper.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import React2 from "react";
|
|
3
|
-
import { describe } from "
|
|
3
|
+
import { describe } from "@elliemae/ds-utilities";
|
|
4
4
|
import PopperImpl from "./PopperImpl";
|
|
5
5
|
import { Position } from "./positions";
|
|
6
6
|
import { Interaction } from "./interaction";
|
package/dist/esm/DSPopper.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPopper.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport PopperImpl from './PopperImpl';\nimport { Position } from './positions';\nimport { Interaction } from './interaction';\nimport { popperProps, defaultProps } from './props';\n\nconst DSPopper = ({\n containerProps,\n arrowGap,\n arrowSize,\n blockName,\n contentOffset,\n contentStyle,\n contentComponent,\n delayClose,\n delayOpen,\n interactionType,\n isOpen, // if this is set DSPopper would be a controlled component if not, an uncontrolled one\n onOpen,\n onClose,\n onPlacementChange,\n placement,\n preventOverflow,\n showArrow,\n closeAnimationConfig,\n openAnimationConfig,\n usePortal,\n triggerComponent,\n wrapExtraComponent,\n getTargetFromChildren,\n getContentFromChildren,\n modifiers,\n triggerRef,\n children: customPopper,\n renderReference,\n referenceNode,\n zIndex,\n hideIfNotVisible,\n}): JSX.Element => (\n <PopperImpl\n arrowGap={arrowGap}\n arrowSize={arrowSize}\n blockName={blockName}\n closeAnimationConfig={closeAnimationConfig}\n containerProps={containerProps}\n contentComponent={contentComponent}\n contentOffset={contentOffset}\n contentStyle={contentStyle}\n delayClose={delayClose}\n delayOpen={delayOpen}\n getContentFromChildren={getContentFromChildren}\n getTargetFromChildren={getTargetFromChildren}\n interactionType={interactionType}\n isOpen={isOpen}\n modifiers={modifiers}\n onOpen={onOpen}\n onClose={onClose}\n onPlacementChange={onPlacementChange}\n openAnimationConfig={openAnimationConfig}\n placement={placement}\n preventOverflow={preventOverflow}\n referenceNode={referenceNode}\n renderReference={renderReference}\n showArrow={showArrow}\n triggerComponent={triggerComponent}\n triggerRef={triggerRef}\n usePortal={usePortal}\n wrapExtraComponent={wrapExtraComponent}\n zIndex={zIndex}\n hideIfNotVisible={hideIfNotVisible}\n >\n {customPopper}\n </PopperImpl>\n);\n\n// @deprecated: There's the NEW (not finished) popover that uses its own popper implementation.\nDSPopper.propTypes = popperProps;\nDSPopper.defaultProps = defaultProps;\nDSPopper.displayName = 'DSPopper';\nconst DSPopperWithSchema = describe(DSPopper);\nDSPopperWithSchema.propTypes = popperProps;\n\nexport { Interaction as PopperInteractions, Position as PopperPositions, DSPopperWithSchema, DSPopper };\n\nexport { interactions } from './interaction';\nexport { positions } from './positions';\n\nexport default DSPopper;\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,qCAAC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAEC,YACH;AAIF,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,MAAM,qBAAqB,SAAS,QAAQ;AAC5C,mBAAmB,YAAY;AAI/B;AACA;AAEA,IAAO,mBAAQ;",
|
|
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 "@elliemae/ds-system";
|
|
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 =
|
|
82
|
-
|
|
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({
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,UAAU,UAAU,OAAO,CAAC,CAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { PureComponent } from 'react';\nimport { styled } from '@elliemae/ds-system';\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/dist/esm/props.js
CHANGED
package/dist/esm/props.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/props.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { Position } from './positions';\nimport { Interaction } from './interaction';\n\nexport const popperProps = {\n /** Hide menu component if trigger component is not visible/scrolled away */\n hideIfNotVisible: PropTypes.bool.description(\n 'Hide menu component if trigger component is not visible/scrolled away',\n ),\n /** props to inject to popper wrapper */\n containerProps: PropTypes.object.description(\n 'props to inject to popper wrapper',\n ),\n /** Space between the arrow and the popup */\n arrowGap: PropTypes.number.description(\n 'Space between the arrow and the popup',\n ),\n /** callback for when menu changes from close to open */\n onOpen: PropTypes.func.description(\n 'callback for when menu changes from close to open',\n ),\n /** callback for when menu changes from open to close */\n onClose: PropTypes.func.description(\n 'callback for when menu changes from open to close',\n ),\n /** Time in ms to delay close of menu */\n delayClose: PropTypes.number.description('Time in ms to delay close of menu'),\n /** Time in ms to delay open of menu */\n delayOpen: PropTypes.number.description('Time in ms to delay open of menu'),\n /** callback for when menu changes placement */\n onPlacementChange: PropTypes.func.description(\n 'callback for when menu changes placement',\n ),\n /** Arrow size */\n arrowSize: PropTypes.number.description('Arrow size'),\n /** Bem blockname for the popper */\n blockName: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.object,\n ]).description('Bem blockname for the popper'),\n triggerComponent: PropTypes.element.description(\n `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`,\n ).isRequired,\n};\n\nexport const defaultProps = {\n containerProps: {},\n arrowGap: 8,\n arrowSize: 6,\n blockName: '',\n contentOffset: null,\n contentStyle: null,\n contentComponent: () => null,\n delayClose: 300,\n delayOpen: 200,\n interactionType: Interaction.CLICK,\n onOpen: () => null,\n onClose: () => null,\n onPlacementChange: () => null,\n placement: Position.BOTTOM,\n preventOverflow: 'window',\n showArrow: true,\n closeAnimationConfig: {\n to: { transform: 'scale(0.8)', opacity: '0' },\n config: { delay: 80, duration: 80 },\n },\n openAnimationConfig: {\n to: { transform: 'scale(1)', opacity: '1' },\n config: { delay: 80, duration: 80 },\n },\n usePortal: true,\n triggerComponent: () => null,\n getTargetFromChildren: () => null,\n getContentFromChildren: () => null,\n modifiers: {},\n triggerRef: () => null,\n hideIfNotVisible: false,\n};\n"],
|
|
5
5
|
"mappings": "AAAA;ACAA;AACA;AACA;AAEO,MAAM,cAAc;AAAA,EAEzB,kBAAkB,UAAU,KAAK,YAC/B,uEACF;AAAA,EAEA,gBAAgB,UAAU,OAAO,YAC/B,mCACF;AAAA,EAEA,UAAU,UAAU,OAAO,YACzB,uCACF;AAAA,EAEA,QAAQ,UAAU,KAAK,YACrB,mDACF;AAAA,EAEA,SAAS,UAAU,KAAK,YACtB,mDACF;AAAA,EAEA,YAAY,UAAU,OAAO,YAAY,mCAAmC;AAAA,EAE5E,WAAW,UAAU,OAAO,YAAY,kCAAkC;AAAA,EAE1E,mBAAmB,UAAU,KAAK,YAChC,0CACF;AAAA,EAEA,WAAW,UAAU,OAAO,YAAY,YAAY;AAAA,EAEpD,WAAW,UAAU,UAAU;AAAA,IAC7B,UAAU;AAAA,IACV,UAAU;AAAA,EACZ,CAAC,EAAE,YAAY,8BAA8B;AAAA,EAC7C,kBAAkB,UAAU,QAAQ,YAClC;AAAA;AAAA,0EAGF,EAAE;AACJ;AAEO,MAAM,eAAe;AAAA,EAC1B,gBAAgB,CAAC;AAAA,EACjB,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe;AAAA,EACf,cAAc;AAAA,EACd,kBAAkB,MAAM;AAAA,EACxB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,iBAAiB,YAAY;AAAA,EAC7B,QAAQ,MAAM;AAAA,EACd,SAAS,MAAM;AAAA,EACf,mBAAmB,MAAM;AAAA,EACzB,WAAW,SAAS;AAAA,EACpB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,IAAI,EAAE,WAAW,cAAc,SAAS,IAAI;AAAA,IAC5C,QAAQ,EAAE,OAAO,IAAI,UAAU,GAAG;AAAA,EACpC;AAAA,EACA,qBAAqB;AAAA,IACnB,IAAI,EAAE,WAAW,YAAY,SAAS,IAAI;AAAA,IAC1C,QAAQ,EAAE,OAAO,IAAI,UAAU,GAAG;AAAA,EACpC;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB,MAAM;AAAA,EACxB,uBAAuB,MAAM;AAAA,EAC7B,wBAAwB,MAAM;AAAA,EAC9B,WAAW,CAAC;AAAA,EACZ,YAAY,MAAM;AAAA,EAClB,kBAAkB;AACpB;",
|
|
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
|
|
3
|
+
"version": "3.1.0-next.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Popper",
|
|
6
6
|
"files": [
|
|
@@ -63,13 +63,13 @@
|
|
|
63
63
|
"indent": 4
|
|
64
64
|
},
|
|
65
65
|
"dependencies": {
|
|
66
|
-
"@elliemae/ds-overlay": "3.0
|
|
67
|
-
"@elliemae/ds-
|
|
66
|
+
"@elliemae/ds-overlay": "3.1.0-next.10",
|
|
67
|
+
"@elliemae/ds-system": "3.1.0-next.10",
|
|
68
|
+
"@elliemae/ds-utilities": "3.1.0-next.10",
|
|
68
69
|
"@elliemae/react-popper": "~1.0.2",
|
|
69
70
|
"memoize-one": "~5.1.1",
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"react-spring": "~8.0.27"
|
|
71
|
+
"react-spring": "~8.0.27",
|
|
72
|
+
"styled-components": "~5.3.5"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
75
|
"react": "^17.0.2",
|
|
@@ -84,6 +84,7 @@
|
|
|
84
84
|
"test": "node ../../scripts/testing/test.mjs",
|
|
85
85
|
"lint": "node ../../scripts/lint.mjs",
|
|
86
86
|
"dts": "node ../../scripts/dts.mjs",
|
|
87
|
-
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
87
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
88
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
88
89
|
}
|
|
89
90
|
}
|