@elliemae/ds-popperjs 2.2.0-alpha.1 → 2.2.0-alpha.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.
Files changed (45) hide show
  1. package/cjs/PopoverArrow.js +88 -51
  2. package/cjs/PopoverArrow.js.map +7 -0
  3. package/cjs/PopoverContent.js +70 -65
  4. package/cjs/PopoverContent.js.map +7 -0
  5. package/cjs/config/useConfigDSPopperjs.js +51 -42
  6. package/cjs/config/useConfigDSPopperjs.js.map +7 -0
  7. package/cjs/config/useConfiguredDefaultModifiers.js +69 -50
  8. package/cjs/config/useConfiguredDefaultModifiers.js.map +7 -0
  9. package/cjs/config/useConfiguredDefaultProps.js +44 -40
  10. package/cjs/config/useConfiguredDefaultProps.js.map +7 -0
  11. package/cjs/config/useConfiguredMergedProps.js +39 -19
  12. package/cjs/config/useConfiguredMergedProps.js.map +7 -0
  13. package/cjs/index.d.js +27 -2
  14. package/cjs/index.d.js.map +7 -0
  15. package/cjs/index.js +79 -63
  16. package/cjs/index.js.map +7 -0
  17. package/cjs/propTypes.js +78 -83
  18. package/cjs/propTypes.js.map +7 -0
  19. package/cjs/styled.js +68 -34
  20. package/cjs/styled.js.map +7 -0
  21. package/cjs/utils/hooks/useOnClickOutside.js +42 -20
  22. package/cjs/utils/hooks/useOnClickOutside.js.map +7 -0
  23. package/esm/PopoverArrow.js +59 -42
  24. package/esm/PopoverArrow.js.map +7 -0
  25. package/esm/PopoverContent.js +40 -55
  26. package/esm/PopoverContent.js.map +7 -0
  27. package/esm/config/useConfigDSPopperjs.js +16 -32
  28. package/esm/config/useConfigDSPopperjs.js.map +7 -0
  29. package/esm/config/useConfiguredDefaultModifiers.js +38 -44
  30. package/esm/config/useConfiguredDefaultModifiers.js.map +7 -0
  31. package/esm/config/useConfiguredDefaultProps.js +14 -31
  32. package/esm/config/useConfiguredDefaultProps.js.map +7 -0
  33. package/esm/config/useConfiguredMergedProps.js +9 -14
  34. package/esm/config/useConfiguredMergedProps.js.map +7 -0
  35. package/esm/index.d.js +2 -1
  36. package/esm/index.d.js.map +7 -0
  37. package/esm/index.js +48 -50
  38. package/esm/index.js.map +7 -0
  39. package/esm/propTypes.js +49 -79
  40. package/esm/propTypes.js.map +7 -0
  41. package/esm/styled.js +40 -25
  42. package/esm/styled.js.map +7 -0
  43. package/esm/utils/hooks/useOnClickOutside.js +12 -15
  44. package/esm/utils/hooks/useOnClickOutside.js.map +7 -0
  45. package/package.json +3 -3
@@ -1,54 +1,91 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- require('react');
7
- var styled = require('styled-components');
8
- var jsxRuntime = require('react/jsx-runtime');
9
-
10
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
-
12
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
13
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
14
-
15
- var _svg;
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var PopoverArrow_exports = {};
29
+ __export(PopoverArrow_exports, {
30
+ PopoverArrow: () => PopoverArrow
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ var import_styled_components = __toESM(require("styled-components"));
16
35
  const arrowWidth = 18;
17
36
  const arrowHeight = 18;
18
- const StyledArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
19
- componentId: "sc-olcdf1-0"
20
- })(["position:absolute;width:", "px;height:", "px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-", "px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-", "px;}&[data-placement^='bottom']{top:-", "px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-", "px;}margin-left:", ";margin-top:", ";"], arrowWidth, arrowHeight, _ref => {
21
- let {
22
- theme
23
- } = _ref;
24
- return theme.colors.neutral['500'];
25
- }, _ref2 => {
26
- let {
27
- theme
28
- } = _ref2;
29
- return theme.colors.neutral['000'];
30
- }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? "-".concat(arrowWidth / 2, "px;") : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? "-".concat(arrowHeight / 2, "px;") : '0;');
31
- const PopoverArrow = _ref3 => {
32
- let {
33
- placement,
34
- style,
35
- arrowElementRef
36
- } = _ref3;
37
- return /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
38
- "data-placement": placement,
39
- style: style,
40
- ref: arrowElementRef,
41
- "data-testid": "ds-tooltip-arrow",
42
- children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
43
- viewBox: "0 0 30 30"
44
- }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
45
- className: "stroke",
46
- d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
47
- }), /*#__PURE__*/_jsx__default["default"]("path", {
48
- className: "fill",
49
- 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"
50
- })))
51
- }, "popper-arrow");
52
- };
37
+ const StyledArrow = import_styled_components.default.div`
38
+ position: absolute;
39
+ width: ${arrowWidth}px;
40
+ height: ${arrowHeight}px;
41
+ pointer-events: none;
42
+ background-color: transparent;
43
+ & .stroke {
44
+ fill: ${({ theme }) => theme.colors.neutral["500"]};
45
+ fill-opacity: 0.4;
46
+ }
47
+ & .fill {
48
+ fill: ${({ theme }) => theme.colors.neutral["000"]};
49
+ }
53
50
 
54
- exports.PopoverArrow = PopoverArrow;
51
+ &[data-placement^='top'] {
52
+ svg {
53
+ transform: rotateZ(180deg);
54
+ }
55
+ bottom: -${arrowHeight}px;
56
+ }
57
+ &[data-placement^='right'] {
58
+ svg {
59
+ transform: rotateZ(-90deg);
60
+ }
61
+ left: -${arrowWidth}px;
62
+ }
63
+ &[data-placement^='bottom'] {
64
+ top: -${arrowHeight}px;
65
+ }
66
+ &[data-placement^='left'] {
67
+ svg {
68
+ transform: rotateZ(90deg);
69
+ }
70
+ right: -${arrowWidth}px;
71
+ }
72
+ margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
73
+ margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
74
+ `;
75
+ const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ import_react.default.createElement(StyledArrow, {
76
+ key: "popper-arrow",
77
+ "data-placement": placement,
78
+ style,
79
+ ref: arrowElementRef,
80
+ "data-testid": "ds-tooltip-arrow"
81
+ }, /* @__PURE__ */ import_react.default.createElement("svg", {
82
+ viewBox: "0 0 30 30"
83
+ }, /* @__PURE__ */ import_react.default.createElement("path", {
84
+ className: "stroke",
85
+ 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"
86
+ }), /* @__PURE__ */ import_react.default.createElement("path", {
87
+ className: "fill",
88
+ 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"
89
+ })));
90
+ module.exports = __toCommonJS(PopoverArrow_exports);
91
+ //# sourceMappingURL=PopoverArrow.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/PopoverArrow.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\ninterface PopoverArrowT {\n placement: string;\n style: React.CSSProperties;\n arrowElementRef: React.Dispatch<React.SetStateAction<HTMLDivElement>>;\n}\nconst arrowWidth = 18;\nconst arrowHeight = 18;\n\nconst StyledArrow = styled.div`\n position: absolute;\n width: ${arrowWidth}px;\n height: ${arrowHeight}px;\n pointer-events: none;\n background-color: transparent;\n & .stroke {\n fill: ${({ theme }) => theme.colors.neutral['500']};\n fill-opacity: 0.4;\n }\n & .fill {\n fill: ${({ theme }) => theme.colors.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;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AAMnB,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,iCAAO;AAAA;AAAA,WAEhB;AAAA,YACC;AAAA;AAAA;AAAA;AAAA,YAIA,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOjC;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,UAAU,MAAM,kBAAkB,WAAW,YAC5E,IAAI,aAAa,SACjB;AAAA,gBACQ,CAAC,UACb,MAAM,kBAAkB,WAAW,WAAW,MAAM,kBAAkB,WAAW,WAC7E,IAAI,cAAc,SAClB;AAAA;AAGD,MAAM,eAAe,CAAC,EAAE,WAAW,OAAO,sBAC/C,mDAAC,aAAD;AAAA,EACE,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,mDAAC,OAAD;AAAA,EAAK,SAAQ;AAAA,GACX,mDAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA,IAGJ,mDAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA;",
6
+ "names": []
7
+ }
@@ -1,71 +1,76 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
- var _jsx = require('@babel/runtime/helpers/jsx');
12
- var react = require('react');
13
- var PopoverArrow = require('./PopoverArrow.js');
14
- var styled = require('./styled.js');
15
- var jsxRuntime = require('react/jsx-runtime');
16
-
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
21
-
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
-
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
- const PopoverContent = _ref => {
26
- let {
27
- setPopperElement,
28
- popperStyles,
29
- popperAttributes,
30
- children,
31
- showPopover,
32
- setArrowElement,
33
- setIsAnimating,
34
- arrowStyle,
35
- withoutArrow,
36
- withoutAnimation,
37
- animationDuration,
38
- zIndex
39
- } = _ref;
40
- const checkAnimationStatus = react.useCallback(() => {
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var PopoverContent_exports = {};
29
+ __export(PopoverContent_exports, {
30
+ PopoverContent: () => PopoverContent
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ var import_PopoverArrow = __toESM(require("./PopoverArrow"));
35
+ var import_styled = __toESM(require("./styled"));
36
+ const PopoverContent = ({
37
+ setPopperElement,
38
+ popperStyles,
39
+ popperAttributes,
40
+ children,
41
+ showPopover,
42
+ setArrowElement,
43
+ setIsAnimating,
44
+ arrowStyle,
45
+ withoutArrow,
46
+ withoutAnimation,
47
+ animationDuration,
48
+ zIndex
49
+ }) => {
50
+ const checkAnimationStatus = (0, import_react.useCallback)(() => {
41
51
  if (!showPopover && !withoutAnimation) {
42
52
  setIsAnimating(false);
43
53
  }
44
54
  }, [showPopover, withoutAnimation, setIsAnimating]);
45
- const popperContent = react.useMemo(() => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
46
- children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
47
- children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
48
- arrowElementRef: setArrowElement,
49
- style: arrowStyle,
50
- placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
51
- }), /*#__PURE__*/jsxRuntime.jsx("div", {
52
- ref: setArrowElement,
53
- style: arrowStyle
54
- })]
55
- }) : null]
56
- }), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
57
- return /*#__PURE__*/jsxRuntime.jsx(styled.StyledPopoverContentWrapper, _objectSpread(_objectSpread({
58
- zIndex: zIndex,
55
+ const popperContent = (0, import_react.useMemo)(() => /* @__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, {
56
+ arrowElementRef: setArrowElement,
57
+ style: arrowStyle,
58
+ placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
59
+ }), /* @__PURE__ */ import_react.default.createElement("div", {
60
+ ref: setArrowElement,
61
+ style: arrowStyle
62
+ })) : null), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
63
+ return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledPopoverContentWrapper, {
64
+ zIndex,
59
65
  ref: setPopperElement,
60
- style: popperStyles
61
- }, popperAttributes), {}, {
62
- children: /*#__PURE__*/_jsx__default["default"](styled.StyledAnimatedPopper, {
63
- showPopover: showPopover,
64
- animationDuration: animationDuration,
65
- withoutAnimation: withoutAnimation,
66
- onAnimationEnd: checkAnimationStatus
67
- }, void 0, popperContent)
68
- }));
66
+ style: popperStyles,
67
+ ...popperAttributes
68
+ }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledAnimatedPopper, {
69
+ showPopover,
70
+ animationDuration,
71
+ withoutAnimation,
72
+ onAnimationEnd: checkAnimationStatus
73
+ }, popperContent));
69
74
  };
70
-
71
- exports.PopoverContent = PopoverContent;
75
+ module.exports = __toCommonJS(PopoverContent_exports);
76
+ //# sourceMappingURL=PopoverContent.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/PopoverContent.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { PopoverArrow } from './PopoverArrow';\nimport type { PopoverContentPropsT } from './index.d';\nimport { StyledPopoverContentWrapper, StyledAnimatedPopper } from './styled';\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}: 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 zIndex={zIndex} ref={setPopperElement} style={popperStyles} {...popperAttributes}>\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;ACAA,YAAuB;ADAvB,mBAA4C;AAC5C,0BAA6B;AAE7B,oBAAkE;AAE3D,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,MACuC;AACvC,QAAM,uBAAuB,8BAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa,kBAAkB;AAEnC,QAAM,gBAAgB,0BACpB,MACE,wFACG,UACA,iBAAiB,QAChB,wFACE,mDAAC,kCAAD;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,MAE5E,mDAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAiB,OAAO;AAAA,QAElC,OAGR,CAAC,UAAU,cAAc,YAAY,kBAAkB;AAEzD,SACE,mDAAC,2CAAD;AAAA,IAA6B;AAAA,IAAgB,KAAK;AAAA,IAAkB,OAAO;AAAA,OAAkB;AAAA,KAC3F,mDAAC,oCAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf;AAAA;",
6
+ "names": []
7
+ }
@@ -1,51 +1,60 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/web.dom-collections.iterator.js');
6
- var react = require('react');
7
- var reactPopper = require('react-popper');
8
- var useConfiguredMergedProps = require('./useConfiguredMergedProps.js');
9
- var useOnClickOutside = require('../utils/hooks/useOnClickOutside.js');
10
-
11
- const useConfigDSPopperjs = appProps => {
12
- const [popperElement, setPopperElement] = react.useState(null);
13
- const [arrowElement, setArrowElement] = react.useState(null);
14
- const [isAnimating, setIsAnimating] = react.useState(false);
15
- const props = useConfiguredMergedProps.useConfiguredMergedProps({
16
- props: appProps,
17
- arrowElement
18
- });
19
- const {
20
- referenceElement,
21
- closeContextMenu,
22
- onClickOutside,
23
- modifiers,
24
- startPlacementPreference
25
- } = props;
26
- const popperExtraOpts = react.useMemo(() => ({
27
- placement: startPlacementPreference,
28
- modifiers
29
- }), [modifiers, startPlacementPreference]);
30
- const popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
31
- const {
32
- showPopover,
33
- withoutAnimation
34
- } = props;
35
- react.useEffect(() => {
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var useConfigDSPopperjs_exports = {};
29
+ __export(useConfigDSPopperjs_exports, {
30
+ useConfigDSPopperjs: () => useConfigDSPopperjs
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ var import_react_popper = __toESM(require("react-popper"));
35
+ var import_useConfiguredMergedProps = __toESM(require("./useConfiguredMergedProps"));
36
+ var import_useOnClickOutside = __toESM(require("../utils/hooks/useOnClickOutside"));
37
+ const useConfigDSPopperjs = (appProps) => {
38
+ const [popperElement, setPopperElement] = (0, import_react.useState)(null);
39
+ const [arrowElement, setArrowElement] = (0, import_react.useState)(null);
40
+ const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
41
+ const props = (0, import_useConfiguredMergedProps.useConfiguredMergedProps)({ props: appProps, arrowElement });
42
+ const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;
43
+ const popperExtraOpts = (0, import_react.useMemo)(() => ({ placement: startPlacementPreference, modifiers }), [modifiers, startPlacementPreference]);
44
+ const popoverHelper = (0, import_react_popper.usePopper)(referenceElement, popperElement, popperExtraOpts);
45
+ const { showPopover, withoutAnimation } = props;
46
+ (0, import_react.useEffect)(() => {
36
47
  if (showPopover && !withoutAnimation) {
37
48
  setIsAnimating(true);
38
49
  }
39
50
  }, [showPopover, withoutAnimation]);
40
- useOnClickOutside.useOnClickOutside(popperElement, e => {
41
- var _referenceElement$con;
42
-
43
- if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) {
51
+ (0, import_useOnClickOutside.useOnClickOutside)(popperElement, (e) => {
52
+ if (!referenceElement?.contains?.(e?.target)) {
44
53
  onClickOutside(e);
45
54
  closeContextMenu();
46
55
  }
47
56
  });
48
- return react.useMemo(() => ({
57
+ return (0, import_react.useMemo)(() => ({
49
58
  props,
50
59
  popperElement,
51
60
  setPopperElement,
@@ -56,5 +65,5 @@ const useConfigDSPopperjs = appProps => {
56
65
  setIsAnimating
57
66
  }), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
58
67
  };
59
-
60
- exports.useConfigDSPopperjs = useConfigDSPopperjs;
68
+ module.exports = __toCommonJS(useConfigDSPopperjs_exports);
69
+ //# sourceMappingURL=useConfigDSPopperjs.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/config/useConfigDSPopperjs.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { useMemo, useState, useEffect } from 'react';\nimport { usePopper } from 'react-popper';\nimport { useConfiguredMergedProps } from './useConfiguredMergedProps';\nimport type { useDSPopperjsPropsArgT, useDSPopperjsRT } from '../index.d';\n\nimport { useOnClickOutside } from '../utils/hooks/useOnClickOutside';\n\nexport const useConfigDSPopperjs = (appProps: useDSPopperjsPropsArgT): useDSPopperjsRT => {\n const [popperElement, setPopperElement] = useState(null);\n const [arrowElement, setArrowElement] = useState(null);\n const [isAnimating, setIsAnimating] = useState<boolean>(false);\n\n const props = useConfiguredMergedProps({ props: appProps, arrowElement });\n const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;\n const popperExtraOpts = useMemo(\n () => ({ placement: startPlacementPreference, modifiers }),\n [modifiers, startPlacementPreference],\n );\n\n const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);\n\n const { showPopover, withoutAnimation } = props;\n\n useEffect(() => {\n if (showPopover && !withoutAnimation) {\n setIsAnimating(true);\n }\n }, [showPopover, withoutAnimation]);\n\n useOnClickOutside(popperElement, (e) => {\n if (!referenceElement?.contains?.(e?.target)) {\n onClickOutside(e);\n closeContextMenu();\n }\n });\n\n return useMemo(\n () => ({\n props,\n popperElement,\n setPopperElement,\n arrowElement,\n setArrowElement,\n popoverHelper,\n isAnimating,\n setIsAnimating,\n }),\n [arrowElement, popoverHelper, popperElement, isAnimating, props],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA6C;AAC7C,0BAA0B;AAC1B,sCAAyC;AAGzC,+BAAkC;AAE3B,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,2BAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,2BAAS;AACjD,QAAM,CAAC,aAAa,kBAAkB,2BAAkB;AAExD,QAAM,QAAQ,8DAAyB,EAAE,OAAO,UAAU;AAC1D,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,0BACtB,MAAO,GAAE,WAAW,0BAA0B,cAC9C,CAAC,WAAW;AAGd,QAAM,gBAAgB,mCAAU,kBAAkB,eAAe;AAEjE,QAAM,EAAE,aAAa,qBAAqB;AAE1C,8BAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa;AAEjB,kDAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,kBAAkB,WAAW,GAAG,SAAS;AAC5C,qBAAe;AACf;AAAA;AAAA;AAIJ,SAAO,0BACL,MAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MAEF,CAAC,cAAc,eAAe,eAAe,aAAa;AAAA;",
6
+ "names": []
7
+ }
@@ -1,70 +1,89 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var react = require('react');
6
-
7
- const useConfiguredDefaultModifiers = _ref => {
8
- let {
9
- props,
10
- arrowElement
11
- } = _ref;
12
- // we destructure explicit app definitions before merge
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var useConfiguredDefaultModifiers_exports = {};
29
+ __export(useConfiguredDefaultModifiers_exports, {
30
+ useConfiguredDefaultModifiers: () => useConfiguredDefaultModifiers
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_react = __toESM(require("react"));
34
+ const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {
13
35
  const {
14
36
  boundaryElement: explicitAppBoundaryElement,
15
37
  withoutArrow: explicitAppWithoutArrow = false,
16
- placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],
17
- customOffset: explictAppOffset = undefined
18
- } = props; // to build default modifiers on top of it
19
-
20
- const defaultModifiers = react.useMemo(() => {
38
+ placementOrderPreference: explicitPlacementOrderPreference = ["top", "bottom", "left", "right"],
39
+ customOffset: explictAppOffset = void 0
40
+ } = props;
41
+ const defaultModifiers = (0, import_react.useMemo)(() => {
21
42
  const mod = [];
43
+ mod.push({ name: "hide", enabled: true });
22
44
  mod.push({
23
- name: 'hide',
24
- enabled: true
25
- });
26
- mod.push({
27
- name: 'flip',
45
+ name: "flip",
28
46
  options: {
29
47
  fallbackPlacements: explicitPlacementOrderPreference
30
48
  }
31
- }); // we apply an offset if the app defines one or if the app wants the arrow
32
-
49
+ });
33
50
  if (!explicitAppWithoutArrow || explictAppOffset) {
34
51
  const defaultOffset = explictAppOffset || [0, 14];
35
52
  mod.push({
36
- name: 'offset',
53
+ name: "offset",
37
54
  enabled: true,
38
55
  options: {
39
56
  offset: defaultOffset
40
57
  }
41
58
  });
42
- } // the app can opt for a "no arrow" implementation (we do so in datatable/calendar etc...)
43
-
44
-
45
- if (!explicitAppWithoutArrow) mod.push({
46
- name: 'arrow',
47
- options: {
48
- element: arrowElement,
49
- padding: 18
50
- }
51
- }); // the app can define an explicit element to act as a boundary instead of popperjs default one
52
-
53
- if (explicitAppBoundaryElement) mod.push({
54
- name: 'preventOverflow',
55
- options: {
56
- boundary: explicitAppBoundaryElement
57
- }
58
- });
59
+ }
60
+ if (!explicitAppWithoutArrow)
61
+ mod.push({
62
+ name: "arrow",
63
+ options: {
64
+ element: arrowElement,
65
+ padding: 18
66
+ }
67
+ });
68
+ if (explicitAppBoundaryElement)
69
+ mod.push({
70
+ name: "preventOverflow",
71
+ options: {
72
+ boundary: explicitAppBoundaryElement
73
+ }
74
+ });
59
75
  return mod;
60
- }, [arrowElement, explicitAppBoundaryElement, explicitAppWithoutArrow, explicitPlacementOrderPreference, explictAppOffset]); // if the app pass custom modifier, we don't use "default modifiers"
61
-
62
- const {
63
- modifiers: explicitAppModifiers = defaultModifiers
64
- } = props;
65
- return react.useMemo(() => ({
76
+ }, [
77
+ arrowElement,
78
+ explicitAppBoundaryElement,
79
+ explicitAppWithoutArrow,
80
+ explicitPlacementOrderPreference,
81
+ explictAppOffset
82
+ ]);
83
+ const { modifiers: explicitAppModifiers = defaultModifiers } = props;
84
+ return (0, import_react.useMemo)(() => ({
66
85
  modifiers: explicitAppModifiers
67
86
  }), [explicitAppModifiers]);
68
87
  };
69
-
70
- exports.useConfiguredDefaultModifiers = useConfiguredDefaultModifiers;
88
+ module.exports = __toCommonJS(useConfiguredDefaultModifiers_exports);
89
+ //# sourceMappingURL=useConfiguredDefaultModifiers.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../src/config/useConfiguredDefaultModifiers.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["import { useMemo } from 'react';\n\nexport const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {\n // we destructure explicit app definitions before merge\n const {\n boundaryElement: explicitAppBoundaryElement,\n withoutArrow: explicitAppWithoutArrow = false,\n placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],\n customOffset: explictAppOffset = undefined,\n } = props;\n // to build default modifiers on top of it\n const defaultModifiers = useMemo(() => {\n const mod = [];\n mod.push({ name: 'hide', enabled: true });\n mod.push({\n name: 'flip',\n options: {\n fallbackPlacements: explicitPlacementOrderPreference,\n },\n });\n // we apply an offset if the app defines one or if the app wants the arrow\n if (!explicitAppWithoutArrow || explictAppOffset) {\n const defaultOffset = explictAppOffset || [0, 14];\n mod.push({\n name: 'offset',\n enabled: true,\n options: {\n offset: defaultOffset,\n },\n });\n }\n // the app can opt for a \"no arrow\" implementation (we do so in datatable/calendar etc...)\n if (!explicitAppWithoutArrow)\n mod.push({\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: 18,\n },\n });\n\n // the app can define an explicit element to act as a boundary instead of popperjs default one\n if (explicitAppBoundaryElement)\n mod.push({\n name: 'preventOverflow',\n options: {\n boundary: explicitAppBoundaryElement,\n },\n });\n return mod;\n }, [\n arrowElement,\n explicitAppBoundaryElement,\n explicitAppWithoutArrow,\n explicitPlacementOrderPreference,\n explictAppOffset,\n ]);\n // if the app pass custom modifier, we don't use \"default modifiers\"\n const { modifiers: explicitAppModifiers = defaultModifiers } = props;\n\n return useMemo(\n () => ({\n modifiers: explicitAppModifiers,\n }),\n [explicitAppModifiers],\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAwB;AAEjB,MAAM,gCAAgC,CAAC,EAAE,OAAO,mBAAmB;AAExE,QAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,cAAc,0BAA0B;AAAA,IACxC,0BAA0B,mCAAmC,CAAC,OAAO,UAAU,QAAQ;AAAA,IACvF,cAAc,mBAAmB;AAAA,MAC/B;AAEJ,QAAM,mBAAmB,0BAAQ,MAAM;AACrC,UAAM,MAAM;AACZ,QAAI,KAAK,EAAE,MAAM,QAAQ,SAAS;AAClC,QAAI,KAAK;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,oBAAoB;AAAA;AAAA;AAIxB,QAAI,CAAC,2BAA2B,kBAAkB;AAChD,YAAM,gBAAgB,oBAAoB,CAAC,GAAG;AAC9C,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,QAAQ;AAAA;AAAA;AAAA;AAKd,QAAI,CAAC;AACH,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,SAAS;AAAA,UACT,SAAS;AAAA;AAAA;AAKf,QAAI;AACF,UAAI,KAAK;AAAA,QACP,MAAM;AAAA,QACN,SAAS;AAAA,UACP,UAAU;AAAA;AAAA;AAGhB,WAAO;AAAA,KACN;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,EAAE,WAAW,uBAAuB,qBAAqB;AAE/D,SAAO,0BACL,MAAO;AAAA,IACL,WAAW;AAAA,MAEb,CAAC;AAAA;",
6
+ "names": []
7
+ }