@elliemae/ds-popperjs 2.2.0-next.4 → 2.3.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.
- package/cjs/PopoverArrow.js +88 -51
- package/cjs/PopoverArrow.js.map +7 -0
- package/cjs/PopoverContent.js +70 -65
- package/cjs/PopoverContent.js.map +7 -0
- package/cjs/config/useConfigDSPopperjs.js +51 -42
- package/cjs/config/useConfigDSPopperjs.js.map +7 -0
- package/cjs/config/useConfiguredDefaultModifiers.js +69 -50
- package/cjs/config/useConfiguredDefaultModifiers.js.map +7 -0
- package/cjs/config/useConfiguredDefaultProps.js +44 -40
- package/cjs/config/useConfiguredDefaultProps.js.map +7 -0
- package/cjs/config/useConfiguredMergedProps.js +39 -19
- package/cjs/config/useConfiguredMergedProps.js.map +7 -0
- package/cjs/index.d.js +27 -2
- package/cjs/index.d.js.map +7 -0
- package/cjs/index.js +79 -63
- package/cjs/index.js.map +7 -0
- package/cjs/propTypes.js +78 -83
- package/cjs/propTypes.js.map +7 -0
- package/cjs/styled.js +68 -34
- package/cjs/styled.js.map +7 -0
- package/cjs/utils/hooks/useOnClickOutside.js +42 -20
- package/cjs/utils/hooks/useOnClickOutside.js.map +7 -0
- package/esm/PopoverArrow.js +59 -42
- package/esm/PopoverArrow.js.map +7 -0
- package/esm/PopoverContent.js +40 -55
- package/esm/PopoverContent.js.map +7 -0
- package/esm/config/useConfigDSPopperjs.js +16 -32
- package/esm/config/useConfigDSPopperjs.js.map +7 -0
- package/esm/config/useConfiguredDefaultModifiers.js +38 -44
- package/esm/config/useConfiguredDefaultModifiers.js.map +7 -0
- package/esm/config/useConfiguredDefaultProps.js +14 -31
- package/esm/config/useConfiguredDefaultProps.js.map +7 -0
- package/esm/config/useConfiguredMergedProps.js +9 -14
- package/esm/config/useConfiguredMergedProps.js.map +7 -0
- package/esm/index.d.js +2 -1
- package/esm/index.d.js.map +7 -0
- package/esm/index.js +48 -50
- package/esm/index.js.map +7 -0
- package/esm/propTypes.js +49 -79
- package/esm/propTypes.js.map +7 -0
- package/esm/styled.js +40 -25
- package/esm/styled.js.map +7 -0
- package/esm/utils/hooks/useOnClickOutside.js +12 -15
- package/esm/utils/hooks/useOnClickOutside.js.map +7 -0
- package/package.json +3 -3
package/cjs/styled.js
CHANGED
|
@@ -1,37 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
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 styled_exports = {};
|
|
29
|
+
__export(styled_exports, {
|
|
30
|
+
StyledAnimatedPopper: () => StyledAnimatedPopper,
|
|
31
|
+
StyledPopoverContentWrapper: () => StyledPopoverContentWrapper
|
|
32
|
+
});
|
|
33
|
+
var React = __toESM(require("react"));
|
|
34
|
+
var import_styled_components = __toESM(require("styled-components"));
|
|
35
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
36
|
+
const showAnimation = import_ds_system.kfrm`
|
|
37
|
+
from {
|
|
38
|
+
opacity: 0;
|
|
39
|
+
transform: scale(0.8);
|
|
40
|
+
}
|
|
10
41
|
|
|
11
|
-
|
|
12
|
-
|
|
42
|
+
to {
|
|
43
|
+
opacity: 1;
|
|
44
|
+
transform: scale(1);
|
|
45
|
+
visibility: visible;
|
|
46
|
+
}
|
|
47
|
+
`;
|
|
48
|
+
const hideAnimation = import_ds_system.kfrm`
|
|
49
|
+
from {
|
|
50
|
+
opacity: 1;
|
|
51
|
+
transform: scale(1);
|
|
52
|
+
}
|
|
13
53
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
const StyledAnimatedPopper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
26
|
-
componentId: "sc-1giz5kx-1"
|
|
27
|
-
})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);", ""], _ref2 => {
|
|
28
|
-
let {
|
|
29
|
-
showPopover,
|
|
30
|
-
animationDuration,
|
|
31
|
-
withoutAnimation
|
|
32
|
-
} = _ref2;
|
|
33
|
-
return !withoutAnimation && dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n animation: ", " ", "ms ease-in;\n "])), showPopover ? showAnimation : hideAnimation, animationDuration);
|
|
34
|
-
});
|
|
54
|
+
to {
|
|
55
|
+
opacity: 0;
|
|
56
|
+
transform: scale(0.8);
|
|
57
|
+
visibility: hidden;
|
|
58
|
+
}
|
|
59
|
+
`;
|
|
60
|
+
const StyledPopoverContentWrapper = import_styled_components.default.div`
|
|
61
|
+
z-index: ${({ zIndex }) => zIndex};
|
|
62
|
+
`;
|
|
63
|
+
const StyledAnimatedPopper = import_styled_components.default.div`
|
|
64
|
+
box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);
|
|
35
65
|
|
|
36
|
-
|
|
37
|
-
|
|
66
|
+
${({ showPopover, animationDuration, withoutAnimation }) => !withoutAnimation && import_ds_system.css`
|
|
67
|
+
animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
|
|
68
|
+
`}
|
|
69
|
+
`;
|
|
70
|
+
module.exports = __toCommonJS(styled_exports);
|
|
71
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import styled from 'styled-components';\nimport { kfrm, css } from '@elliemae/ds-system';\n\ninterface StyledContentWrapperPropsT {\n zIndex: number;\n}\n\ninterface StyledAnimatedPopperPropsT {\n showPopover: boolean;\n animationDuration: number;\n withoutAnimation: boolean;\n}\n\nconst showAnimation = kfrm`\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n`;\n\nconst hideAnimation = kfrm`\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.8);\n visibility: hidden;\n }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<StyledContentWrapperPropsT>`\n z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledAnimatedPopper = styled.div<StyledAnimatedPopperPropsT>`\n box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 2px 4px rgba(16, 22, 26, 0.2), 0 8px 24px rgba(16, 22, 26, 0.2);\n\n ${({ showPopover, animationDuration, withoutAnimation }) =>\n !withoutAnimation &&\n css`\n animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,+BAAmB;AACnB,uBAA0B;AAY1B,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAatB,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaf,MAAM,8BAA8B,iCAAO;AAAA,aACrC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,uBAAuB,iCAAO;AAAA;AAAA;AAAA,IAGvC,CAAC,EAAE,aAAa,mBAAmB,uBACnC,CAAC,oBACD;AAAA,mBACe,cAAc,gBAAgB,iBAAiB;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,29 +1,51 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
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 useOnClickOutside_exports = {};
|
|
29
|
+
__export(useOnClickOutside_exports, {
|
|
30
|
+
useOnClickOutside: () => useOnClickOutside
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_react = require("react");
|
|
7
34
|
function useOnClickOutside(ref, cb) {
|
|
8
|
-
|
|
9
|
-
const listener = event => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
// Do nothing if clicking ref's element or descendent elements
|
|
13
|
-
if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
|
|
35
|
+
(0, import_react.useEffect)(() => {
|
|
36
|
+
const listener = (event) => {
|
|
37
|
+
if (!ref || ref?.contains?.(event.target)) {
|
|
14
38
|
return;
|
|
15
39
|
}
|
|
16
|
-
|
|
17
40
|
cb(event);
|
|
18
41
|
};
|
|
19
|
-
|
|
20
|
-
document.addEventListener(
|
|
21
|
-
document.addEventListener('touchstart', listener);
|
|
42
|
+
document.addEventListener("mousedown", listener);
|
|
43
|
+
document.addEventListener("touchstart", listener);
|
|
22
44
|
return () => {
|
|
23
|
-
document.removeEventListener(
|
|
24
|
-
document.removeEventListener(
|
|
45
|
+
document.removeEventListener("mousedown", listener);
|
|
46
|
+
document.removeEventListener("touchstart", listener);
|
|
25
47
|
};
|
|
26
48
|
}, [ref, cb]);
|
|
27
49
|
}
|
|
28
|
-
|
|
29
|
-
|
|
50
|
+
module.exports = __toCommonJS(useOnClickOutside_exports);
|
|
51
|
+
//# sourceMappingURL=useOnClickOutside.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/utils/hooks/useOnClickOutside.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { useEffect } from 'react';\n\ntype defaultCbt = (e: React.MouseEvent) => void;\nexport function useOnClickOutside<T extends Node, cbT extends defaultCbt>(ref: T, cb: cbT): void {\n useEffect(() => {\n const listener = (event) => {\n // Do nothing if clicking ref's element or descendent elements\n if (!ref || ref?.contains?.(event.target)) {\n return;\n }\n cb(event);\n };\n document.addEventListener('mousedown', listener);\n document.addEventListener('touchstart', listener);\n return () => {\n document.removeEventListener('mousedown', listener);\n document.removeEventListener('touchstart', listener);\n };\n }, [ref, cb]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAG1B,2BAAmE,KAAQ,IAAe;AAC/F,8BAAU,MAAM;AACd,UAAM,WAAW,CAAC,UAAU;AAE1B,UAAI,CAAC,OAAO,KAAK,WAAW,MAAM,SAAS;AACzC;AAAA;AAEF,SAAG;AAAA;AAEL,aAAS,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,cAAc;AACxC,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa;AAC1C,eAAS,oBAAoB,cAAc;AAAA;AAAA,KAE5C,CAAC,KAAK;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/PopoverArrow.js
CHANGED
|
@@ -1,45 +1,62 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import styled from
|
|
4
|
-
import { jsx } from 'react/jsx-runtime';
|
|
5
|
-
|
|
6
|
-
var _svg;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import styled from "styled-components";
|
|
7
4
|
const arrowWidth = 18;
|
|
8
5
|
const arrowHeight = 18;
|
|
9
|
-
const StyledArrow =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
const PopoverArrow = _ref3 => {
|
|
23
|
-
let {
|
|
24
|
-
placement,
|
|
25
|
-
style,
|
|
26
|
-
arrowElementRef
|
|
27
|
-
} = _ref3;
|
|
28
|
-
return /*#__PURE__*/jsx(StyledArrow, {
|
|
29
|
-
"data-placement": placement,
|
|
30
|
-
style: style,
|
|
31
|
-
ref: arrowElementRef,
|
|
32
|
-
"data-testid": "ds-tooltip-arrow",
|
|
33
|
-
children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
|
|
34
|
-
viewBox: "0 0 30 30"
|
|
35
|
-
}, void 0, /*#__PURE__*/_jsx("path", {
|
|
36
|
-
className: "stroke",
|
|
37
|
-
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"
|
|
38
|
-
}), /*#__PURE__*/_jsx("path", {
|
|
39
|
-
className: "fill",
|
|
40
|
-
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"
|
|
41
|
-
})))
|
|
42
|
-
}, "popper-arrow");
|
|
43
|
-
};
|
|
6
|
+
const StyledArrow = styled.div`
|
|
7
|
+
position: absolute;
|
|
8
|
+
width: ${arrowWidth}px;
|
|
9
|
+
height: ${arrowHeight}px;
|
|
10
|
+
pointer-events: none;
|
|
11
|
+
background-color: transparent;
|
|
12
|
+
& .stroke {
|
|
13
|
+
fill: ${({ theme }) => theme.colors.neutral["500"]};
|
|
14
|
+
fill-opacity: 0.4;
|
|
15
|
+
}
|
|
16
|
+
& .fill {
|
|
17
|
+
fill: ${({ theme }) => theme.colors.neutral["000"]};
|
|
18
|
+
}
|
|
44
19
|
|
|
45
|
-
|
|
20
|
+
&[data-placement^='top'] {
|
|
21
|
+
svg {
|
|
22
|
+
transform: rotateZ(180deg);
|
|
23
|
+
}
|
|
24
|
+
bottom: -${arrowHeight}px;
|
|
25
|
+
}
|
|
26
|
+
&[data-placement^='right'] {
|
|
27
|
+
svg {
|
|
28
|
+
transform: rotateZ(-90deg);
|
|
29
|
+
}
|
|
30
|
+
left: -${arrowWidth}px;
|
|
31
|
+
}
|
|
32
|
+
&[data-placement^='bottom'] {
|
|
33
|
+
top: -${arrowHeight}px;
|
|
34
|
+
}
|
|
35
|
+
&[data-placement^='left'] {
|
|
36
|
+
svg {
|
|
37
|
+
transform: rotateZ(90deg);
|
|
38
|
+
}
|
|
39
|
+
right: -${arrowWidth}px;
|
|
40
|
+
}
|
|
41
|
+
margin-left: ${(props) => props["data-placement"].startsWith("top") || props["data-placement"].startsWith("bottom") ? `-${arrowWidth / 2}px;` : "0;"};
|
|
42
|
+
margin-top: ${(props) => props["data-placement"].startsWith("left") || props["data-placement"].startsWith("right") ? `-${arrowHeight / 2}px;` : "0;"};
|
|
43
|
+
`;
|
|
44
|
+
const PopoverArrow = ({ placement, style, arrowElementRef }) => /* @__PURE__ */ React2.createElement(StyledArrow, {
|
|
45
|
+
key: "popper-arrow",
|
|
46
|
+
"data-placement": placement,
|
|
47
|
+
style,
|
|
48
|
+
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
|
+
})));
|
|
59
|
+
export {
|
|
60
|
+
PopoverArrow
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=PopoverArrow.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverArrow.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAMA,MAAM,aAAa;AACnB,MAAM,cAAc;AAEpB,MAAM,cAAc,OAAO;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,qCAAC,aAAD;AAAA,EACE,KAAI;AAAA,EACJ,kBAAgB;AAAA,EAChB;AAAA,EACA,KAAK;AAAA,EACL,eAAY;AAAA,GAEZ,qCAAC,OAAD;AAAA,EAAK,SAAQ;AAAA,GACX,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA,IAGJ,qCAAC,QAAD;AAAA,EACE,WAAU;AAAA,EACV,GAAE;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/PopoverContent.js
CHANGED
|
@@ -1,62 +1,47 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
popperStyles,
|
|
20
|
-
popperAttributes,
|
|
21
|
-
children,
|
|
22
|
-
showPopover,
|
|
23
|
-
setArrowElement,
|
|
24
|
-
setIsAnimating,
|
|
25
|
-
arrowStyle,
|
|
26
|
-
withoutArrow,
|
|
27
|
-
withoutAnimation,
|
|
28
|
-
animationDuration,
|
|
29
|
-
zIndex
|
|
30
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useCallback, useMemo } from "react";
|
|
3
|
+
import { PopoverArrow } from "./PopoverArrow";
|
|
4
|
+
import { StyledPopoverContentWrapper, StyledAnimatedPopper } from "./styled";
|
|
5
|
+
const PopoverContent = ({
|
|
6
|
+
setPopperElement,
|
|
7
|
+
popperStyles,
|
|
8
|
+
popperAttributes,
|
|
9
|
+
children,
|
|
10
|
+
showPopover,
|
|
11
|
+
setArrowElement,
|
|
12
|
+
setIsAnimating,
|
|
13
|
+
arrowStyle,
|
|
14
|
+
withoutArrow,
|
|
15
|
+
withoutAnimation,
|
|
16
|
+
animationDuration,
|
|
17
|
+
zIndex
|
|
18
|
+
}) => {
|
|
31
19
|
const checkAnimationStatus = useCallback(() => {
|
|
32
20
|
if (!showPopover && !withoutAnimation) {
|
|
33
21
|
setIsAnimating(false);
|
|
34
22
|
}
|
|
35
23
|
}, [showPopover, withoutAnimation, setIsAnimating]);
|
|
36
|
-
const popperContent = useMemo(() =>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}) : null]
|
|
47
|
-
}), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
|
|
48
|
-
return /*#__PURE__*/jsx(StyledPopoverContentWrapper, _objectSpread(_objectSpread({
|
|
49
|
-
zIndex: zIndex,
|
|
24
|
+
const popperContent = useMemo(() => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children, withoutArrow === false ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(PopoverArrow, {
|
|
25
|
+
arrowElementRef: setArrowElement,
|
|
26
|
+
style: arrowStyle,
|
|
27
|
+
placement: popperAttributes ? popperAttributes["data-popper-placement"] : "bottom"
|
|
28
|
+
}), /* @__PURE__ */ React2.createElement("div", {
|
|
29
|
+
ref: setArrowElement,
|
|
30
|
+
style: arrowStyle
|
|
31
|
+
})) : null), [children, withoutArrow, arrowStyle, popperAttributes, setArrowElement]);
|
|
32
|
+
return /* @__PURE__ */ React2.createElement(StyledPopoverContentWrapper, {
|
|
33
|
+
zIndex,
|
|
50
34
|
ref: setPopperElement,
|
|
51
|
-
style: popperStyles
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
35
|
+
style: popperStyles,
|
|
36
|
+
...popperAttributes
|
|
37
|
+
}, /* @__PURE__ */ React2.createElement(StyledAnimatedPopper, {
|
|
38
|
+
showPopover,
|
|
39
|
+
animationDuration,
|
|
40
|
+
withoutAnimation,
|
|
41
|
+
onAnimationEnd: checkAnimationStatus
|
|
42
|
+
}, popperContent));
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
PopoverContent
|
|
60
46
|
};
|
|
61
|
-
|
|
62
|
-
export { PopoverContent };
|
|
47
|
+
//# sourceMappingURL=PopoverContent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverContent.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA;AAEO,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,YAAY,MAAM;AAC7C,QAAI,CAAC,eAAe,CAAC,kBAAkB;AACrC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa,kBAAkB;AAEnC,QAAM,gBAAgB,QACpB,MACE,4DACG,UACA,iBAAiB,QAChB,4DACE,qCAAC,cAAD;AAAA,IACE,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,WAAW,mBAAmB,iBAAiB,2BAA2B;AAAA,MAE5E,qCAAC,OAAD;AAAA,IAAK,KAAK;AAAA,IAAiB,OAAO;AAAA,QAElC,OAGR,CAAC,UAAU,cAAc,YAAY,kBAAkB;AAEzD,SACE,qCAAC,6BAAD;AAAA,IAA6B;AAAA,IAAgB,KAAK;AAAA,IAAkB,OAAO;AAAA,OAAkB;AAAA,KAC3F,qCAAC,sBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,KAEf;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,42 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { usePopper } from
|
|
4
|
-
import { useConfiguredMergedProps } from
|
|
5
|
-
import { useOnClickOutside } from
|
|
6
|
-
|
|
7
|
-
const useConfigDSPopperjs = appProps => {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useMemo, useState, useEffect } from "react";
|
|
3
|
+
import { usePopper } from "react-popper";
|
|
4
|
+
import { useConfiguredMergedProps } from "./useConfiguredMergedProps";
|
|
5
|
+
import { useOnClickOutside } from "../utils/hooks/useOnClickOutside";
|
|
6
|
+
const useConfigDSPopperjs = (appProps) => {
|
|
8
7
|
const [popperElement, setPopperElement] = useState(null);
|
|
9
8
|
const [arrowElement, setArrowElement] = useState(null);
|
|
10
9
|
const [isAnimating, setIsAnimating] = useState(false);
|
|
11
|
-
const props = useConfiguredMergedProps({
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
});
|
|
15
|
-
const {
|
|
16
|
-
referenceElement,
|
|
17
|
-
closeContextMenu,
|
|
18
|
-
onClickOutside,
|
|
19
|
-
modifiers,
|
|
20
|
-
startPlacementPreference
|
|
21
|
-
} = props;
|
|
22
|
-
const popperExtraOpts = useMemo(() => ({
|
|
23
|
-
placement: startPlacementPreference,
|
|
24
|
-
modifiers
|
|
25
|
-
}), [modifiers, startPlacementPreference]);
|
|
10
|
+
const props = useConfiguredMergedProps({ props: appProps, arrowElement });
|
|
11
|
+
const { referenceElement, closeContextMenu, onClickOutside, modifiers, startPlacementPreference } = props;
|
|
12
|
+
const popperExtraOpts = useMemo(() => ({ placement: startPlacementPreference, modifiers }), [modifiers, startPlacementPreference]);
|
|
26
13
|
const popoverHelper = usePopper(referenceElement, popperElement, popperExtraOpts);
|
|
27
|
-
const {
|
|
28
|
-
showPopover,
|
|
29
|
-
withoutAnimation
|
|
30
|
-
} = props;
|
|
14
|
+
const { showPopover, withoutAnimation } = props;
|
|
31
15
|
useEffect(() => {
|
|
32
16
|
if (showPopover && !withoutAnimation) {
|
|
33
17
|
setIsAnimating(true);
|
|
34
18
|
}
|
|
35
19
|
}, [showPopover, withoutAnimation]);
|
|
36
|
-
useOnClickOutside(popperElement, e => {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
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))) {
|
|
20
|
+
useOnClickOutside(popperElement, (e) => {
|
|
21
|
+
if (!referenceElement?.contains?.(e?.target)) {
|
|
40
22
|
onClickOutside(e);
|
|
41
23
|
closeContextMenu();
|
|
42
24
|
}
|
|
@@ -52,5 +34,7 @@ const useConfigDSPopperjs = appProps => {
|
|
|
52
34
|
setIsAnimating
|
|
53
35
|
}), [arrowElement, popoverHelper, popperElement, isAnimating, props]);
|
|
54
36
|
};
|
|
55
|
-
|
|
56
|
-
|
|
37
|
+
export {
|
|
38
|
+
useConfigDSPopperjs
|
|
39
|
+
};
|
|
40
|
+
//# sourceMappingURL=useConfigDSPopperjs.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfigDSPopperjs.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAGA;AAEO,MAAM,sBAAsB,CAAC,aAAsD;AACxF,QAAM,CAAC,eAAe,oBAAoB,SAAS;AACnD,QAAM,CAAC,cAAc,mBAAmB,SAAS;AACjD,QAAM,CAAC,aAAa,kBAAkB,SAAkB;AAExD,QAAM,QAAQ,yBAAyB,EAAE,OAAO,UAAU;AAC1D,QAAM,EAAE,kBAAkB,kBAAkB,gBAAgB,WAAW,6BAA6B;AACpG,QAAM,kBAAkB,QACtB,MAAO,GAAE,WAAW,0BAA0B,cAC9C,CAAC,WAAW;AAGd,QAAM,gBAAgB,UAAU,kBAAkB,eAAe;AAEjE,QAAM,EAAE,aAAa,qBAAqB;AAE1C,YAAU,MAAM;AACd,QAAI,eAAe,CAAC,kBAAkB;AACpC,qBAAe;AAAA;AAAA,KAEhB,CAAC,aAAa;AAEjB,oBAAkB,eAAe,CAAC,MAAM;AACtC,QAAI,CAAC,kBAAkB,WAAW,GAAG,SAAS;AAC5C,qBAAe;AACf;AAAA;AAAA;AAIJ,SAAO,QACL,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,66 +1,60 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
const useConfiguredDefaultModifiers =
|
|
4
|
-
let {
|
|
5
|
-
props,
|
|
6
|
-
arrowElement
|
|
7
|
-
} = _ref;
|
|
8
|
-
// we destructure explicit app definitions before merge
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
const useConfiguredDefaultModifiers = ({ props, arrowElement }) => {
|
|
9
4
|
const {
|
|
10
5
|
boundaryElement: explicitAppBoundaryElement,
|
|
11
6
|
withoutArrow: explicitAppWithoutArrow = false,
|
|
12
|
-
placementOrderPreference: explicitPlacementOrderPreference = [
|
|
13
|
-
customOffset: explictAppOffset =
|
|
14
|
-
} = props;
|
|
15
|
-
|
|
7
|
+
placementOrderPreference: explicitPlacementOrderPreference = ["top", "bottom", "left", "right"],
|
|
8
|
+
customOffset: explictAppOffset = void 0
|
|
9
|
+
} = props;
|
|
16
10
|
const defaultModifiers = useMemo(() => {
|
|
17
11
|
const mod = [];
|
|
12
|
+
mod.push({ name: "hide", enabled: true });
|
|
18
13
|
mod.push({
|
|
19
|
-
name:
|
|
20
|
-
enabled: true
|
|
21
|
-
});
|
|
22
|
-
mod.push({
|
|
23
|
-
name: 'flip',
|
|
14
|
+
name: "flip",
|
|
24
15
|
options: {
|
|
25
16
|
fallbackPlacements: explicitPlacementOrderPreference
|
|
26
17
|
}
|
|
27
|
-
});
|
|
28
|
-
|
|
18
|
+
});
|
|
29
19
|
if (!explicitAppWithoutArrow || explictAppOffset) {
|
|
30
20
|
const defaultOffset = explictAppOffset || [0, 14];
|
|
31
21
|
mod.push({
|
|
32
|
-
name:
|
|
22
|
+
name: "offset",
|
|
33
23
|
enabled: true,
|
|
34
24
|
options: {
|
|
35
25
|
offset: defaultOffset
|
|
36
26
|
}
|
|
37
27
|
});
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
}
|
|
54
|
-
});
|
|
28
|
+
}
|
|
29
|
+
if (!explicitAppWithoutArrow)
|
|
30
|
+
mod.push({
|
|
31
|
+
name: "arrow",
|
|
32
|
+
options: {
|
|
33
|
+
element: arrowElement,
|
|
34
|
+
padding: 18
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
if (explicitAppBoundaryElement)
|
|
38
|
+
mod.push({
|
|
39
|
+
name: "preventOverflow",
|
|
40
|
+
options: {
|
|
41
|
+
boundary: explicitAppBoundaryElement
|
|
42
|
+
}
|
|
43
|
+
});
|
|
55
44
|
return mod;
|
|
56
|
-
}, [
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
45
|
+
}, [
|
|
46
|
+
arrowElement,
|
|
47
|
+
explicitAppBoundaryElement,
|
|
48
|
+
explicitAppWithoutArrow,
|
|
49
|
+
explicitPlacementOrderPreference,
|
|
50
|
+
explictAppOffset
|
|
51
|
+
]);
|
|
52
|
+
const { modifiers: explicitAppModifiers = defaultModifiers } = props;
|
|
61
53
|
return useMemo(() => ({
|
|
62
54
|
modifiers: explicitAppModifiers
|
|
63
55
|
}), [explicitAppModifiers]);
|
|
64
56
|
};
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
export {
|
|
58
|
+
useConfiguredDefaultModifiers
|
|
59
|
+
};
|
|
60
|
+
//# sourceMappingURL=useConfiguredDefaultModifiers.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useConfiguredDefaultModifiers.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AAEO,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,QAAQ,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,QACL,MAAO;AAAA,IACL,WAAW;AAAA,MAEb,CAAC;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|