@elliemae/ds-popperjs 3.5.0-rc.9 → 3.6.0-next.0

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.
Files changed (13) hide show
  1. package/dist/cjs/PopoverArrow.js +17 -13
  2. package/dist/cjs/PopoverArrow.js.map +2 -2
  3. package/dist/cjs/PopoverContent.js +30 -17
  4. package/dist/cjs/PopoverContent.js.map +2 -2
  5. package/dist/cjs/index.js +9 -5
  6. package/dist/cjs/index.js.map +2 -2
  7. package/dist/esm/PopoverArrow.js +17 -13
  8. package/dist/esm/PopoverArrow.js.map +2 -2
  9. package/dist/esm/PopoverContent.js +30 -17
  10. package/dist/esm/PopoverContent.js.map +2 -2
  11. package/dist/esm/index.js +9 -5
  12. package/dist/esm/index.js.map +2 -2
  13. package/package.json +3 -3
package/dist/cjs/PopoverArrow.js CHANGED
@@ -28,7 +28,7 @@ __export(PopoverArrow_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(PopoverArrow_exports);
30
30
  var React = __toESM(require("react"));
31
- var import_react = __toESM(require("react"));
31
+ var import_jsx_runtime = require("react/jsx-runtime");
32
32
  var import_ds_system = require("@elliemae/ds-system");
33
33
  const arrowWidth = 18;
34
34
  const arrowHeight = 18;
@@ -70,19 +70,23 @@ const StyledArrow = import_ds_system.styled.div`
70
70
  margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
71
71
  margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
72
72
  `;
73
- const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ import_react.default.createElement(StyledArrow, {
74
- key: "popper-arrow",
73
+ const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledArrow, {
75
74
  "data-placement": placement,
76
75
  style,
77
76
  ref: arrowElementRef,
78
- "data-testid": "ds-tooltip-arrow"
79
- }, /* @__PURE__ */ import_react.default.createElement("svg", {
80
- viewBox: "0 0 30 30"
81
- }, /* @__PURE__ */ import_react.default.createElement("path", {
82
- className: "stroke",
83
- 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"
84
- }), /* @__PURE__ */ import_react.default.createElement("path", {
85
- className: "fill",
86
- 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"
87
- })));
77
+ "data-testid": "ds-tooltip-arrow",
78
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
79
+ viewBox: "0 0 30 30",
80
+ children: [
81
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
82
+ className: "stroke",
83
+ 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"
84
+ }),
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
86
+ className: "fill",
87
+ 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"
88
+ })
89
+ ]
90
+ })
91
+ }, "popper-arrow");
88
92
  //# sourceMappingURL=PopoverArrow.js.map
package/dist/cjs/PopoverArrow.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverArrow.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div<{ 'data-placement': string }>`\n position: absolute;\n width: ${arrowWidth}px;\n height: ${arrowHeight}px;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: neutral-500;\n fill-opacity: 0.4;\n }\n & .fill {\n fill: neutral-000;\n }\n\n &[data-placement^='top'] {\n svg {\n transform: rotateZ(180deg);\n }\n bottom: -${arrowHeight}px;\n }\n &[data-placement^='right'] {\n svg {\n transform: rotateZ(-90deg);\n }\n left: -${arrowWidth}px;\n }\n &[data-placement^='bottom'] {\n top: -${arrowHeight}px;\n }\n &[data-placement^='left'] {\n svg {\n transform: rotateZ(90deg);\n }\n right: -${arrowWidth}px;\n }\n margin-left: ${(props) =>\n props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n ? `-${arrowWidth / 2}px;`\n : '0;'};\n margin-top: ${(props) =>\n props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n ? `-${arrowHeight / 2}px;`\n : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n <StyledArrow\n key=\"popper-arrow\"\n data-placement={placement}\n style={style}\n ref={arrowElementRef}\n data-testid=\"ds-tooltip-arrow\"\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 </StyledArrow>\n);\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,uBAAuB;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,wBAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D,6BAAAA,QAAA,cAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,6BAAAA,QAAA,cAAC;AAAA,EAAI,SAAQ;AAAA,GACX,6BAAAA,QAAA,cAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,6BAAAA,QAAA,cAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
6
- "names": ["React"]
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,uBAAuB;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,wBAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D,4CAAC;AAAA,EAEC,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,EAEZ,uDAAC;AAAA,IAAI,SAAQ;AAAA,IACX;AAAA,kDAAC;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,OAEJ;AAAA,MACA,4CAAC;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,OACJ;AAAA;AAAA,GACF;AAAA,GAhBI,cAiBN;",
6
+ "names": []
7
7
  }
package/dist/cjs/PopoverContent.js CHANGED
@@ -28,7 +28,8 @@ __export(PopoverContent_exports, {
28
28
  });
29
29
  module.exports = __toCommonJS(PopoverContent_exports);
30
30
  var React = __toESM(require("react"));
31
- var import_react = __toESM(require("react"));
31
+ var import_jsx_runtime = require("react/jsx-runtime");
32
+ var import_react = require("react");
32
33
  var import_PopoverArrow = require("./PopoverArrow");
33
34
  var import_styled = require("./styled");
34
35
  const PopoverContent = ({
@@ -53,28 +54,40 @@ const PopoverContent = ({
53
54
  }
54
55
  }, [showPopover, withoutAnimation, setIsAnimating]);
55
56
  const popperContent = (0, import_react.useMemo)(
56
- () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, children, withoutArrow === false ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_PopoverArrow.PopoverArrow, {
57
- arrowElementRef: setArrowElement,
58
- style: arrowStyle,
59
- placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
60
- }), /* @__PURE__ */ import_react.default.createElement("div", {
61
- ref: setArrowElement,
62
- style: arrowStyle
63
- })) : null),
57
+ () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
58
+ children: [
59
+ children,
60
+ withoutArrow === false ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
61
+ children: [
62
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PopoverArrow.PopoverArrow, {
63
+ arrowElementRef: setArrowElement,
64
+ style: arrowStyle,
65
+ placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
66
+ }),
67
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
68
+ ref: setArrowElement,
69
+ style: arrowStyle
70
+ })
71
+ ]
72
+ }) : null
73
+ ]
74
+ }),
64
75
  [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]
65
76
  );
66
- return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPopoverContentWrapper, {
77
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledPopoverContentWrapper, {
67
78
  zIndex,
68
79
  ref: setPopperElement,
69
80
  style: popperStyles,
70
81
  ...popperAttributes,
71
82
  ...globalAttrs,
72
- ...xStyledAttrs
73
- }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledAnimatedPopper, {
74
- showPopover,
75
- animationDuration,
76
- withoutAnimation,
77
- onAnimationEnd: checkAnimationStatus
78
- }, popperContent));
83
+ ...xStyledAttrs,
84
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledAnimatedPopper, {
85
+ showPopover,
86
+ animationDuration,
87
+ withoutAnimation,
88
+ onAnimationEnd: checkAnimationStatus,
89
+ children: popperContent
90
+ })
91
+ });
79
92
  };
80
93
  //# sourceMappingURL=PopoverContent.js.map
package/dist/cjs/PopoverContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/PopoverContent.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PopoverArrow } from './PopoverArrow';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport interface PopoverContentPropsT {\n setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n popperStyles: React.CSSProperties;\n arrowStyle: React.CSSProperties;\n popperAttributes: Record<string, string> | undefined;\n children: JSX.Element | JSX.Element[];\n setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n withoutArrow: boolean;\n withoutAnimation: boolean;\n animationDuration: number;\n zIndex: number;\n showPopover: boolean;\n setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n globalAttrs: GlobalAttributesT;\n xStyledAttrs: XstyledProps;\n}\n\nexport const PopoverContent = ({\n setPopperElement,\n popperStyles,\n popperAttributes,\n children,\n showPopover,\n setArrowElement,\n setIsAnimating,\n arrowStyle,\n withoutArrow,\n withoutAnimation,\n animationDuration,\n zIndex,\n globalAttrs,\n xStyledAttrs,\n}: PopoverContentPropsT): JSX.Element => {\n const checkAnimationStatus = useCallback(() => {\n if (!showPopover && !withoutAnimation) {\n setIsAnimating(false);\n }\n }, [showPopover, withoutAnimation, setIsAnimating]);\n\n const popperContent = useMemo(\n () => (\n <>\n {children}\n {withoutArrow === false ? (\n <>\n <PopoverArrow\n arrowElementRef={setArrowElement}\n style={arrowStyle}\n placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n />\n <div ref={setArrowElement} style={arrowStyle} />\n </>\n ) : null}\n </>\n ),\n [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n );\n return (\n <StyledPopoverContentWrapper\n zIndex={zIndex}\n ref={setPopperElement}\n style={popperStyles}\n {...popperAttributes}\n {...globalAttrs}\n {...xStyledAttrs}\n >\n <StyledAnimatedPopper\n showPopover={showPopover}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n onAnimationEnd={checkAnimationStatus}\n >\n {popperContent}\n </StyledAnimatedPopper>\n </StyledPopoverContentWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA4C;AAE5C,0BAA6B;AAC7B,oBAAkE;AAmB3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;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;AACF,MAAyC;AACvC,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,oBAAgB;AAAA,IACpB,MACE,6BAAAA,QAAA,2BAAAA,QAAA,gBACG,UACA,iBAAiB,QAChB,6BAAAA,QAAA,2BAAAA,QAAA,gBACE,6BAAAA,QAAA,cAAC;AAAA,MACC,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,KAC5E,GACA,6BAAAA,QAAA,cAAC;AAAA,MAAI,KAAK;AAAA,MAAiB,OAAO;AAAA,KAAY,CAChD,IACE,IACN;AAAA,IAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe;AAAA,EACxE;AACA,SACE,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,KAEJ,6BAAAA,QAAA,cAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
6
- "names": ["React"]
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA4C;AAE5C,0BAA6B;AAC7B,oBAAkE;AAmB3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;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;AACF,MAAyC;AACvC,QAAM,2BAAuB,0BAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,oBAAgB;AAAA,IACpB,MACE;AAAA,MACG;AAAA;AAAA,QACA,iBAAiB,QAChB;AAAA,UACE;AAAA,wDAAC;AAAA,cACC,iBAAiB;AAAA,cACjB,OAAO;AAAA,cACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,aAC5E;AAAA,YACA,4CAAC;AAAA,cAAI,KAAK;AAAA,cAAiB,OAAO;AAAA,aAAY;AAAA;AAAA,SAChD,IACE;AAAA;AAAA,KACN;AAAA,IAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe;AAAA,EACxE;AACA,SACE,4CAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IAEJ,sDAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAEf;AAAA,KACH;AAAA,GACF;AAEJ;",
6
+ "names": []
7
7
  }
package/dist/cjs/index.js CHANGED
@@ -30,7 +30,8 @@ __export(src_exports, {
30
30
  });
31
31
  module.exports = __toCommonJS(src_exports);
32
32
  var React = __toESM(require("react"));
33
- var import_react = __toESM(require("react"));
33
+ var import_jsx_runtime = require("react/jsx-runtime");
34
+ var import_react = require("react");
34
35
  var import_react_dom = require("react-dom");
35
36
  var import_ds_utilities = require("@elliemae/ds-utilities");
36
37
  var import_PopoverContent = require("./PopoverContent");
@@ -59,7 +60,7 @@ const DSPopperJS = (props) => {
59
60
  const { children } = props;
60
61
  const { styles, attributes } = popoverHelper;
61
62
  const contentJSX = (0, import_react.useMemo)(
62
- () => /* @__PURE__ */ import_react.default.createElement(import_PopoverContent.PopoverContent, {
63
+ () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_PopoverContent.PopoverContent, {
63
64
  setPopperElement,
64
65
  popperStyles: { ...styles.popper, ...extraPopperStyles },
65
66
  popperAttributes: attributes.popper,
@@ -72,8 +73,9 @@ const DSPopperJS = (props) => {
72
73
  showPopover,
73
74
  setIsAnimating,
74
75
  globalAttrs,
75
- xStyledAttrs
76
- }, children),
76
+ xStyledAttrs,
77
+ children
78
+ }),
77
79
  [
78
80
  attributes.popper,
79
81
  children,
@@ -96,7 +98,9 @@ const DSPopperJS = (props) => {
96
98
  if (withoutPortal === true)
97
99
  return contentJSX;
98
100
  if (withoutPortal === false)
99
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (0, import_react_dom.createPortal)(contentJSX, portalDOMContainer));
101
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
102
+ children: (0, import_react_dom.createPortal)(contentJSX, portalDOMContainer)
103
+ });
100
104
  }
101
105
  return null;
102
106
  };
package/dist/cjs/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
4
  "sourcesContent": ["import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport { dspopperjsPropTypes, DSDSPopperjsPropsT } from './react-desc-prop-types';\n\nconst DSPopperJS: React.ComponentType<DSDSPopperjsPropsT> = (props) => {\n const {\n props: {\n showPopover,\n withoutAnimation,\n animationDuration,\n withoutPortal,\n withoutArrow,\n portalDOMContainer,\n zIndex,\n extraPopperStyles,\n },\n globalAttrs,\n xStyledAttrs,\n setPopperElement,\n setArrowElement,\n setIsAnimating,\n popoverHelper,\n isAnimating,\n } = useConfigDSPopperjs(props);\n const { children } = props;\n const { styles, attributes } = popoverHelper;\n const contentJSX = useMemo(\n () => (\n <PopoverContent\n setPopperElement={setPopperElement}\n popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n popperAttributes={attributes.popper}\n setArrowElement={setArrowElement}\n arrowStyle={styles.arrow}\n withoutArrow={withoutArrow}\n withoutAnimation={withoutAnimation}\n animationDuration={animationDuration}\n zIndex={zIndex}\n showPopover={showPopover}\n setIsAnimating={setIsAnimating}\n globalAttrs={globalAttrs}\n xStyledAttrs={xStyledAttrs}\n >\n {children}\n </PopoverContent>\n ),\n [\n attributes.popper,\n children,\n setIsAnimating,\n showPopover,\n extraPopperStyles,\n setArrowElement,\n setPopperElement,\n styles.arrow,\n styles.popper,\n withoutArrow,\n withoutAnimation,\n animationDuration,\n zIndex,\n globalAttrs,\n xStyledAttrs,\n ],\n );\n if (showPopover || isAnimating) {\n if (withoutPortal === true) return contentJSX;\n if (withoutPortal === false) return <>{createPortal(contentJSX, portalDOMContainer)}</>;\n }\n return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA+B;AAC/B,uBAA6B;AAC7B,0BAAyB;AACzB,4BAA+B;AAC/B,iCAAoC;AACpC,mCAAwD;AAExD,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gDAAoB,KAAK;AAC7B,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,iBAAa;AAAA,IACjB,MACE,6BAAAA,QAAA,cAAC;AAAA,MACC;AAAA,MACA,cAAc,EAAE,GAAG,OAAO,QAAQ,GAAG,kBAAkB;AAAA,MACvD,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEC,QACH;AAAA,IAEF;AAAA,MACE,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,6BAAAA,QAAA,2BAAAA,QAAA,oBAAG,+BAAa,YAAY,kBAAkB,CAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
6
- "names": ["React"]
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AAAA,mBAA+B;AAC/B,uBAA6B;AAC7B,0BAAyB;AACzB,4BAA+B;AAC/B,iCAAoC;AACpC,mCAAwD;AAExD,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,gDAAoB,KAAK;AAC7B,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,iBAAa;AAAA,IACjB,MACE,4CAAC;AAAA,MACC;AAAA,MACA,cAAc,EAAE,GAAG,OAAO,QAAQ,GAAG,kBAAkB;AAAA,MACvD,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,KACH;AAAA,IAEF;AAAA,MACE,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO;AAAA,QAAG,6CAAa,YAAY,kBAAkB;AAAA,OAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,2BAAuB,8BAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
6
+ "names": []
7
7
  }
package/dist/esm/PopoverArrow.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import React2 from "react";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
3
  import { styled } from "@elliemae/ds-system";
4
4
  const arrowWidth = 18;
5
5
  const arrowHeight = 18;
@@ -41,21 +41,25 @@ const StyledArrow = styled.div`
41
41
  margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
42
42
  margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
43
43
  `;
44
- const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ React2.createElement(StyledArrow, {
45
- key: "popper-arrow",
44
+ const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ jsx(StyledArrow, {
46
45
  "data-placement": placement,
47
46
  style,
48
47
  ref: arrowElementRef,
49
- "data-testid": "ds-tooltip-arrow"
50
- }, /* @__PURE__ */ React2.createElement("svg", {
51
- viewBox: "0 0 30 30"
52
- }, /* @__PURE__ */ React2.createElement("path", {
53
- className: "stroke",
54
- 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"
55
- }), /* @__PURE__ */ React2.createElement("path", {
56
- className: "fill",
57
- 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"
58
- })));
48
+ "data-testid": "ds-tooltip-arrow",
49
+ children: /* @__PURE__ */ jsxs("svg", {
50
+ viewBox: "0 0 30 30",
51
+ children: [
52
+ /* @__PURE__ */ jsx("path", {
53
+ className: "stroke",
54
+ 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"
55
+ }),
56
+ /* @__PURE__ */ jsx("path", {
57
+ className: "fill",
58
+ 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
+ })
60
+ ]
61
+ })
62
+ }, "popper-arrow");
59
63
  export {
60
64
  PopoverArrow
61
65
  };
package/dist/esm/PopoverArrow.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverArrow.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { styled } from '@elliemae/ds-system';\ninterface PopoverArrowT {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div<{ 'data-placement': string }>`\n position: absolute;\n width: ${arrowWidth}px;\n height: ${arrowHeight}px;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: neutral-500;\n fill-opacity: 0.4;\n }\n & .fill {\n fill: neutral-000;\n }\n\n &[data-placement^='top'] {\n svg {\n transform: rotateZ(180deg);\n }\n bottom: -${arrowHeight}px;\n }\n &[data-placement^='right'] {\n svg {\n transform: rotateZ(-90deg);\n }\n left: -${arrowWidth}px;\n }\n &[data-placement^='bottom'] {\n top: -${arrowHeight}px;\n }\n &[data-placement^='left'] {\n svg {\n transform: rotateZ(90deg);\n }\n right: -${arrowWidth}px;\n }\n margin-left: ${(props) =>\n props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom')\n ? `-${arrowWidth / 2}px;`\n : '0;'};\n margin-top: ${(props) =>\n props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right')\n ? `-${arrowHeight / 2}px;`\n : '0;'};\n`;\n\nexport const PopoverArrow = ({ placement, style, arrowElementRef }: PopoverArrowT): React.ReactElement => (\n <StyledArrow\n key=\"popper-arrow\"\n data-placement={placement}\n style={style}\n ref={arrowElementRef}\n data-testid=\"ds-tooltip-arrow\"\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 </StyledArrow>\n);\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,cAAc;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D,gBAAAA,OAAA,cAAC;AAAA,EACC,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,gBAAAA,OAAA,cAAC;AAAA,EAAI,SAAQ;AAAA,GACX,gBAAAA,OAAA,cAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CAEJ,GACA,gBAAAA,OAAA,cAAC;AAAA,EACC,WAAU;AAAA,EACV,GAAE;AAAA,CACJ,CACF,CACF;",
6
- "names": ["React"]
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,cAAc;AAMvB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAeG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMF;AAAA;AAAA;AAAA,YAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAME;AAAA;AAAA,iBAEG,CAAC,UACd,MAAM,kBAAkB,WAAW,KAAK,KAAK,MAAM,kBAAkB,WAAW,QAAQ,IACpF,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,MAAM,KAAK,MAAM,kBAAkB,WAAW,OAAO,IACpF,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,gBAAgB,MAC/D,oBAAC;AAAA,EAEC,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,EAEZ,+BAAC;AAAA,IAAI,SAAQ;AAAA,IACX;AAAA,0BAAC;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,OAEJ;AAAA,MACA,oBAAC;AAAA,QACC,WAAU;AAAA,QACV,GAAE;AAAA,OACJ;AAAA;AAAA,GACF;AAAA,GAhBI,cAiBN;",
6
+ "names": []
7
7
  }
package/dist/esm/PopoverContent.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useCallback, useMemo } from "react";
2
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
3
+ import { useCallback, useMemo } from "react";
3
4
  import { PopoverArrow } from "./PopoverArrow";
4
5
  import { StyledPopoverContentWrapper, StyledAnimatedPopper } from "./styled";
5
6
  const PopoverContent = ({
@@ -24,29 +25,41 @@ const PopoverContent = ({
24
25
  }
25
26
  }, [showPopover, withoutAnimation, setIsAnimating]);
26
27
  const popperContent = useMemo(
27
- () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children, withoutArrow === false ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PopoverArrow, {
28
- arrowElementRef: setArrowElement,
29
- style: arrowStyle,
30
- placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
31
- }), /* @__PURE__ */ React2.createElement("div", {
32
- ref: setArrowElement,
33
- style: arrowStyle
34
- })) : null),
28
+ () => /* @__PURE__ */ jsxs(Fragment, {
29
+ children: [
30
+ children,
31
+ withoutArrow === false ? /* @__PURE__ */ jsxs(Fragment, {
32
+ children: [
33
+ /* @__PURE__ */ jsx(PopoverArrow, {
34
+ arrowElementRef: setArrowElement,
35
+ style: arrowStyle,
36
+ placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
37
+ }),
38
+ /* @__PURE__ */ jsx("div", {
39
+ ref: setArrowElement,
40
+ style: arrowStyle
41
+ })
42
+ ]
43
+ }) : null
44
+ ]
45
+ }),
35
46
  [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]
36
47
  );
37
- return /* @__PURE__ */ React2.createElement(StyledPopoverContentWrapper, {
48
+ return /* @__PURE__ */ jsx(StyledPopoverContentWrapper, {
38
49
  zIndex,
39
50
  ref: setPopperElement,
40
51
  style: popperStyles,
41
52
  ...popperAttributes,
42
53
  ...globalAttrs,
43
- ...xStyledAttrs
44
- }, /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
45
- showPopover,
46
- animationDuration,
47
- withoutAnimation,
48
- onAnimationEnd: checkAnimationStatus
49
- }, popperContent));
54
+ ...xStyledAttrs,
55
+ children: /* @__PURE__ */ jsx(StyledAnimatedPopper, {
56
+ showPopover,
57
+ animationDuration,
58
+ withoutAnimation,
59
+ onAnimationEnd: checkAnimationStatus,
60
+ children: popperContent
61
+ })
62
+ });
50
63
  };
51
64
  export {
52
65
  PopoverContent
package/dist/esm/PopoverContent.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverContent.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-utilities';\nimport { PopoverArrow } from './PopoverArrow';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\n\nexport interface PopoverContentPropsT {\n setPopperElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n popperStyles: React.CSSProperties;\n arrowStyle: React.CSSProperties;\n popperAttributes: Record<string, string> | undefined;\n children: JSX.Element | JSX.Element[];\n setArrowElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n withoutArrow: boolean;\n withoutAnimation: boolean;\n animationDuration: number;\n zIndex: number;\n showPopover: boolean;\n setIsAnimating: React.Dispatch<React.SetStateAction<boolean>>;\n globalAttrs: GlobalAttributesT;\n xStyledAttrs: XstyledProps;\n}\n\nexport const PopoverContent = ({\n setPopperElement,\n popperStyles,\n popperAttributes,\n children,\n showPopover,\n setArrowElement,\n setIsAnimating,\n arrowStyle,\n withoutArrow,\n withoutAnimation,\n animationDuration,\n zIndex,\n globalAttrs,\n xStyledAttrs,\n}: PopoverContentPropsT): JSX.Element => {\n const checkAnimationStatus = useCallback(() => {\n if (!showPopover && !withoutAnimation) {\n setIsAnimating(false);\n }\n }, [showPopover, withoutAnimation, setIsAnimating]);\n\n const popperContent = useMemo(\n () => (\n <>\n {children}\n {withoutArrow === false ? (\n <>\n <PopoverArrow\n arrowElementRef={setArrowElement}\n style={arrowStyle}\n placement={popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'}\n />\n <div ref={setArrowElement} style={arrowStyle} />\n </>\n ) : null}\n </>\n ),\n [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement],\n );\n return (\n <StyledPopoverContentWrapper\n zIndex={zIndex}\n ref={setPopperElement}\n style={popperStyles}\n {...popperAttributes}\n {...globalAttrs}\n {...xStyledAttrs}\n >\n <StyledAnimatedPopper\n showPopover={showPopover}\n animationDuration={animationDuration}\n withoutAnimation={withoutAnimation}\n onAnimationEnd={checkAnimationStatus}\n >\n {popperContent}\n </StyledAnimatedPopper>\n </StyledPopoverContentWrapper>\n );\n};\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,aAAa,eAAe;AAE5C,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,4BAA4B;AAmB3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;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;AACF,MAAyC;AACvC,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB;AAAA,IACpB,MACE,gBAAAA,OAAA,cAAAA,OAAA,gBACG,UACA,iBAAiB,QAChB,gBAAAA,OAAA,cAAAA,OAAA,gBACE,gBAAAA,OAAA,cAAC;AAAA,MACC,iBAAiB;AAAA,MACjB,OAAO;AAAA,MACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,KAC5E,GACA,gBAAAA,OAAA,cAAC;AAAA,MAAI,KAAK;AAAA,MAAiB,OAAO;AAAA,KAAY,CAChD,IACE,IACN;AAAA,IAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe;AAAA,EACxE;AACA,SACE,gBAAAA,OAAA,cAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,KAEJ,gBAAAA,OAAA,cAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf,aACH,CACF;AAEJ;",
6
- "names": ["React"]
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,aAAa,eAAe;AAE5C,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B,4BAA4B;AAmB3D,MAAM,iBAAiB,CAAC;AAAA,EAC7B;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;AACF,MAAyC;AACvC,QAAM,uBAAuB,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe,KAAK;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,aAAa,kBAAkB,cAAc,CAAC;AAElD,QAAM,gBAAgB;AAAA,IACpB,MACE;AAAA,MACG;AAAA;AAAA,QACA,iBAAiB,QAChB;AAAA,UACE;AAAA,gCAAC;AAAA,cACC,iBAAiB;AAAA,cACjB,OAAO;AAAA,cACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,aAC5E;AAAA,YACA,oBAAC;AAAA,cAAI,KAAK;AAAA,cAAiB,OAAO;AAAA,aAAY;AAAA;AAAA,SAChD,IACE;AAAA;AAAA,KACN;AAAA,IAEF,CAAC,UAAU,cAAc,YAAY,kBAAkB,eAAe;AAAA,EACxE;AACA,SACE,oBAAC;AAAA,IACC;AAAA,IACA,KAAK;AAAA,IACL,OAAO;AAAA,IACN,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IAEJ,8BAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAgB;AAAA,MAEf;AAAA,KACH;AAAA,GACF;AAEJ;",
6
+ "names": []
7
7
  }
package/dist/esm/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from "react";
2
- import React2, { useMemo } from "react";
2
+ import { Fragment, jsx } from "react/jsx-runtime";
3
+ import { useMemo } from "react";
3
4
  import { createPortal } from "react-dom";
4
5
  import { describe } from "@elliemae/ds-utilities";
5
6
  import { PopoverContent } from "./PopoverContent";
@@ -28,7 +29,7 @@ const DSPopperJS = (props) => {
28
29
  const { children } = props;
29
30
  const { styles, attributes } = popoverHelper;
30
31
  const contentJSX = useMemo(
31
- () => /* @__PURE__ */ React2.createElement(PopoverContent, {
32
+ () => /* @__PURE__ */ jsx(PopoverContent, {
32
33
  setPopperElement,
33
34
  popperStyles: { ...styles.popper, ...extraPopperStyles },
34
35
  popperAttributes: attributes.popper,
@@ -41,8 +42,9 @@ const DSPopperJS = (props) => {
41
42
  showPopover,
42
43
  setIsAnimating,
43
44
  globalAttrs,
44
- xStyledAttrs
45
- }, children),
45
+ xStyledAttrs,
46
+ children
47
+ }),
46
48
  [
47
49
  attributes.popper,
48
50
  children,
@@ -65,7 +67,9 @@ const DSPopperJS = (props) => {
65
67
  if (withoutPortal === true)
66
68
  return contentJSX;
67
69
  if (withoutPortal === false)
68
- return /* @__PURE__ */ React2.createElement(React2.Fragment, null, createPortal(contentJSX, portalDOMContainer));
70
+ return /* @__PURE__ */ jsx(Fragment, {
71
+ children: createPortal(contentJSX, portalDOMContainer)
72
+ });
69
73
  }
70
74
  return null;
71
75
  };
package/dist/esm/index.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
4
4
  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { describe } from '@elliemae/ds-utilities';\nimport { PopoverContent } from './PopoverContent';\nimport { useConfigDSPopperjs } from './config/useConfigDSPopperjs';\nimport { dspopperjsPropTypes, DSDSPopperjsPropsT } from './react-desc-prop-types';\n\nconst DSPopperJS: React.ComponentType<DSDSPopperjsPropsT> = (props) => {\n const {\n props: {\n showPopover,\n withoutAnimation,\n animationDuration,\n withoutPortal,\n withoutArrow,\n portalDOMContainer,\n zIndex,\n extraPopperStyles,\n },\n globalAttrs,\n xStyledAttrs,\n setPopperElement,\n setArrowElement,\n setIsAnimating,\n popoverHelper,\n isAnimating,\n } = useConfigDSPopperjs(props);\n const { children } = props;\n const { styles, attributes } = popoverHelper;\n const contentJSX = useMemo(\n () => (\n <PopoverContent\n setPopperElement={setPopperElement}\n popperStyles={{ ...styles.popper, ...extraPopperStyles }}\n popperAttributes={attributes.popper}\n setArrowElement={setArrowElement}\n arrowStyle={styles.arrow}\n withoutArrow={withoutArrow}\n withoutAnimation={withoutAnimation}\n animationDuration={animationDuration}\n zIndex={zIndex}\n showPopover={showPopover}\n setIsAnimating={setIsAnimating}\n globalAttrs={globalAttrs}\n xStyledAttrs={xStyledAttrs}\n >\n {children}\n </PopoverContent>\n ),\n [\n attributes.popper,\n children,\n setIsAnimating,\n showPopover,\n extraPopperStyles,\n setArrowElement,\n setPopperElement,\n styles.arrow,\n styles.popper,\n withoutArrow,\n withoutAnimation,\n animationDuration,\n zIndex,\n globalAttrs,\n xStyledAttrs,\n ],\n );\n if (showPopover || isAnimating) {\n if (withoutPortal === true) return contentJSX;\n if (withoutPortal === false) return <>{createPortal(contentJSX, portalDOMContainer)}</>;\n }\n return null;\n};\n\nDSPopperJS.propTypes = dspopperjsPropTypes;\nDSPopperJS.displayName = 'DSPopperJS';\nconst DSPopperJSWithSchema = describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');\nDSPopperJSWithSchema.propTypes = dspopperjsPropTypes;\n\nexport { DSPopperJS, DSPopperJSWithSchema };\nexport default DSPopperJS;\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,eAAe;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA+C;AAExD,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB,KAAK;AAC7B,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB,MACE,gBAAAA,OAAA,cAAC;AAAA,MACC;AAAA,MACA,cAAc,EAAE,GAAG,OAAO,QAAQ,GAAG,kBAAkB;AAAA,MACvD,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,OAEC,QACH;AAAA,IAEF;AAAA,MACE,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO,gBAAAA,OAAA,cAAAA,OAAA,gBAAG,aAAa,YAAY,kBAAkB,CAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
6
- "names": ["React"]
5
+ "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,eAAe;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,2BAA+C;AAExD,MAAM,aAAsD,CAAC,UAAU;AACrE,QAAM;AAAA,IACJ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB,KAAK;AAC7B,QAAM,EAAE,SAAS,IAAI;AACrB,QAAM,EAAE,QAAQ,WAAW,IAAI;AAC/B,QAAM,aAAa;AAAA,IACjB,MACE,oBAAC;AAAA,MACC;AAAA,MACA,cAAc,EAAE,GAAG,OAAO,QAAQ,GAAG,kBAAkB;AAAA,MACvD,kBAAkB,WAAW;AAAA,MAC7B;AAAA,MACA,YAAY,OAAO;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA,KACH;AAAA,IAEF;AAAA,MACE,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACA,MAAI,eAAe,aAAa;AAC9B,QAAI,kBAAkB;AAAM,aAAO;AACnC,QAAI,kBAAkB;AAAO,aAAO;AAAA,QAAG,uBAAa,YAAY,kBAAkB;AAAA,OAAE;AAAA,EACtF;AACA,SAAO;AACT;AAEA,WAAW,YAAY;AACvB,WAAW,cAAc;AACzB,MAAM,uBAAuB,SAAS,UAAU,EAAE,YAAY,oDAAoD;AAClH,qBAAqB,YAAY;AAGjC,IAAO,cAAQ;",
6
+ "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-popperjs",
3
- "version": "3.5.0-rc.9",
3
+ "version": "3.6.0-next.0",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Popper JS Wrapper",
6
6
  "files": [
@@ -71,8 +71,8 @@
71
71
  "indent": 4
72
72
  },
73
73
  "dependencies": {
74
- "@elliemae/ds-system": "3.5.0-rc.9",
75
- "@elliemae/ds-utilities": "3.5.0-rc.9",
74
+ "@elliemae/ds-system": "3.6.0-next.0",
75
+ "@elliemae/ds-utilities": "3.6.0-next.0",
76
76
  "react-popper": "~2.3.0"
77
77
  },
78
78
  "devDependencies": {