@elliemae/ds-popover 2.2.0-next.3 → 2.3.0-alpha.1
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/Arrow.js +58 -59
- package/cjs/Arrow.js.map +7 -0
- package/cjs/DSPopover.js +126 -138
- package/cjs/DSPopover.js.map +7 -0
- package/cjs/Popover.js +69 -62
- package/cjs/Popover.js.map +7 -0
- package/cjs/PopoverTrigger.js +58 -54
- package/cjs/PopoverTrigger.js.map +7 -0
- package/cjs/index.js +35 -22
- package/cjs/index.js.map +7 -0
- package/cjs/usePopover.js +44 -40
- package/cjs/usePopover.js.map +7 -0
- package/cjs/usePopoverProviderState.js +65 -55
- package/cjs/usePopoverProviderState.js.map +7 -0
- package/cjs/usePopper.js +82 -70
- package/cjs/usePopper.js.map +7 -0
- package/esm/Arrow.js +29 -51
- package/esm/Arrow.js.map +7 -0
- package/esm/DSPopover.js +95 -117
- package/esm/DSPopover.js.map +7 -0
- package/esm/Popover.js +38 -51
- package/esm/Popover.js.map +7 -0
- package/esm/PopoverTrigger.js +29 -44
- package/esm/PopoverTrigger.js.map +7 -0
- package/esm/index.js +7 -4
- package/esm/index.js.map +7 -0
- package/esm/usePopover.js +15 -33
- package/esm/usePopover.js.map +7 -0
- package/esm/usePopoverProviderState.js +32 -45
- package/esm/usePopoverProviderState.js.map +7 -0
- package/esm/usePopper.js +46 -56
- package/esm/usePopper.js.map +7 -0
- package/package.json +6 -6
- package/types/DSPopover.d.ts +1 -18
package/cjs/usePopper.js
CHANGED
|
@@ -1,100 +1,113 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
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 usePopper_exports = {};
|
|
29
|
+
__export(usePopper_exports, {
|
|
30
|
+
default: () => usePopper
|
|
31
|
+
});
|
|
32
|
+
var React = __toESM(require("react"));
|
|
33
|
+
var import_popper = __toESM(require("popper.js"));
|
|
34
|
+
var import_react = require("react");
|
|
35
|
+
function calculateOffset({ offset, showArrow }) {
|
|
27
36
|
const arrowSize = 10;
|
|
28
37
|
const defaultPadding = 3;
|
|
29
38
|
return {
|
|
30
39
|
enabled: showArrow || offset,
|
|
31
|
-
offset: Array.isArray(offset) ?
|
|
40
|
+
offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
|
|
32
41
|
};
|
|
33
42
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
const
|
|
48
|
-
|
|
49
|
-
const
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
const arrowRef = react.useRef();
|
|
53
|
-
const popper = react.useRef(); // initialize popper with refs and options
|
|
54
|
-
|
|
55
|
-
react.useEffect(() => {
|
|
43
|
+
function usePopper({
|
|
44
|
+
offset,
|
|
45
|
+
showArrow,
|
|
46
|
+
placement,
|
|
47
|
+
isOpen,
|
|
48
|
+
modifiers,
|
|
49
|
+
eventsEnabled = true,
|
|
50
|
+
positionFixed,
|
|
51
|
+
boundaries = "scrollParent",
|
|
52
|
+
referenceEl: refEl
|
|
53
|
+
}) {
|
|
54
|
+
const [popperData, setPopperData] = (0, import_react.useState)({});
|
|
55
|
+
const [dynamicPopperNode, setPopperNode] = (0, import_react.useState)(null);
|
|
56
|
+
const referenceRef = (0, import_react.useRef)();
|
|
57
|
+
const popperRef = (0, import_react.useRef)();
|
|
58
|
+
const arrowRef = (0, import_react.useRef)();
|
|
59
|
+
const popper = (0, import_react.useRef)();
|
|
60
|
+
(0, import_react.useEffect)(() => {
|
|
56
61
|
const referenceEl = refEl || referenceRef.current;
|
|
57
62
|
const popperEl = dynamicPopperNode || popperRef.current;
|
|
58
63
|
const arrowEl = arrowRef.current;
|
|
59
|
-
popper.current = referenceEl && popperEl && new
|
|
64
|
+
popper.current = referenceEl && popperEl && new import_popper.default(referenceEl, popperEl, {
|
|
60
65
|
placement,
|
|
61
66
|
isOpen,
|
|
62
67
|
eventsEnabled,
|
|
63
68
|
positionFixed,
|
|
64
|
-
modifiers:
|
|
65
|
-
preventOverflow:
|
|
69
|
+
modifiers: {
|
|
70
|
+
preventOverflow: {
|
|
66
71
|
padding: 0,
|
|
67
|
-
boundariesElement: boundaries
|
|
68
|
-
|
|
72
|
+
boundariesElement: boundaries,
|
|
73
|
+
...modifiers.preventOverflow
|
|
74
|
+
},
|
|
69
75
|
offset: calculateOffset({
|
|
70
76
|
offset,
|
|
71
77
|
showArrow
|
|
72
|
-
})
|
|
73
|
-
|
|
78
|
+
}),
|
|
79
|
+
...modifiers,
|
|
74
80
|
arrow: {
|
|
75
81
|
enabled: !!arrowEl,
|
|
76
82
|
element: arrowEl
|
|
77
83
|
},
|
|
78
|
-
applyStyle: {
|
|
79
|
-
enabled: false
|
|
80
|
-
},
|
|
84
|
+
applyStyle: { enabled: false },
|
|
81
85
|
updateStateModifier: {
|
|
82
86
|
order: 900,
|
|
83
87
|
enabled: true,
|
|
84
|
-
fn: data => {
|
|
88
|
+
fn: (data) => {
|
|
85
89
|
setPopperData(data);
|
|
86
90
|
return data;
|
|
87
91
|
}
|
|
88
92
|
}
|
|
89
|
-
}
|
|
93
|
+
}
|
|
90
94
|
});
|
|
91
95
|
return () => {
|
|
92
|
-
if (popper.current)
|
|
96
|
+
if (popper.current)
|
|
97
|
+
popper.current.destroy();
|
|
93
98
|
};
|
|
94
|
-
}, [
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
99
|
+
}, [
|
|
100
|
+
refEl,
|
|
101
|
+
dynamicPopperNode,
|
|
102
|
+
placement,
|
|
103
|
+
showArrow,
|
|
104
|
+
offset,
|
|
105
|
+
popperRef,
|
|
106
|
+
eventsEnabled
|
|
107
|
+
]);
|
|
108
|
+
(0, import_react.useEffect)(() => {
|
|
109
|
+
if (!popper.current)
|
|
110
|
+
return;
|
|
98
111
|
popper.current.update();
|
|
99
112
|
}, [popper.current]);
|
|
100
113
|
const arrow = {
|
|
@@ -105,7 +118,7 @@ function usePopper(_ref2) {
|
|
|
105
118
|
style: popperData.styles,
|
|
106
119
|
ref: setPopperNode,
|
|
107
120
|
placement: popperData.placement,
|
|
108
|
-
|
|
121
|
+
"data-testid": "popover-container"
|
|
109
122
|
};
|
|
110
123
|
const reference = {
|
|
111
124
|
ref: referenceRef
|
|
@@ -115,9 +128,8 @@ function usePopper(_ref2) {
|
|
|
115
128
|
popper: popperProps,
|
|
116
129
|
arrow,
|
|
117
130
|
reference,
|
|
118
|
-
// setPopperNode,
|
|
119
131
|
popperData
|
|
120
132
|
};
|
|
121
133
|
}
|
|
122
|
-
|
|
123
|
-
|
|
134
|
+
module.exports = __toCommonJS(usePopper_exports);
|
|
135
|
+
//# sourceMappingURL=usePopper.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/usePopper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import Popper from 'popper.js';\nimport { useEffect, useRef, useState } from 'react';\n\nfunction calculateOffset({ offset, showArrow }) {\n const arrowSize = 10;\n const defaultPadding = 3;\n return {\n enabled: showArrow || offset,\n offset: Array.isArray(offset)\n ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}`\n : `0, ${arrowSize + defaultPadding}`,\n };\n}\n\nexport default function usePopper({\n offset,\n showArrow,\n placement,\n isOpen,\n modifiers,\n eventsEnabled = true,\n positionFixed,\n boundaries = 'scrollParent',\n referenceEl: refEl,\n}) {\n const [popperData, setPopperData] = useState({});\n // this is util for deferred rendering like with portals\n const [dynamicPopperNode, setPopperNode] = useState(null);\n const referenceRef = useRef();\n const popperRef = useRef();\n const arrowRef = useRef();\n const popper = useRef();\n\n // initialize popper with refs and options\n useEffect(() => {\n const referenceEl = refEl || referenceRef.current;\n const popperEl = dynamicPopperNode || popperRef.current;\n const arrowEl = arrowRef.current;\n\n popper.current =\n referenceEl &&\n popperEl &&\n new Popper(referenceEl, popperEl, {\n placement,\n isOpen,\n eventsEnabled,\n positionFixed,\n modifiers: {\n preventOverflow: {\n padding: 0,\n boundariesElement: boundaries,\n ...modifiers.preventOverflow,\n },\n offset: calculateOffset({\n offset,\n showArrow,\n }),\n ...modifiers,\n arrow: {\n enabled: !!arrowEl,\n element: arrowEl,\n },\n applyStyle: { enabled: false },\n updateStateModifier: {\n order: 900,\n enabled: true,\n fn: (data) => {\n setPopperData(data);\n return data;\n },\n },\n },\n });\n\n return () => {\n if (popper.current) popper.current.destroy();\n };\n }, [\n refEl,\n dynamicPopperNode,\n placement,\n showArrow,\n offset,\n popperRef,\n eventsEnabled,\n ]);\n\n // update popper instance after initialization\n useEffect(() => {\n if (!popper.current) return;\n popper.current.update();\n }, [popper.current]);\n\n const arrow = {\n ref: arrowRef,\n style: popperData.arrowStyles,\n };\n const popperProps = {\n style: popperData.styles,\n ref: setPopperNode,\n placement: popperData.placement,\n 'data-testid': 'popover-container',\n };\n const reference = {\n ref: referenceRef,\n };\n return {\n popperInstance: popper.current,\n popper: popperProps,\n arrow,\n reference,\n // setPopperNode,\n popperData,\n };\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAmB;AACnB,mBAA4C;AAE5C,yBAAyB,EAAE,QAAQ,aAAa;AAC9C,QAAM,YAAY;AAClB,QAAM,iBAAiB;AACvB,SAAO;AAAA,IACL,SAAS,aAAa;AAAA,IACtB,QAAQ,MAAM,QAAQ,UAClB,GAAG,OAAO,OAAQ,QAAO,MAAM,OAAO,MAAM,YAAY,mBACxD,MAAM,YAAY;AAAA;AAAA;AAIX,mBAAmB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,GACZ;AACD,QAAM,CAAC,YAAY,iBAAiB,2BAAS;AAE7C,QAAM,CAAC,mBAAmB,iBAAiB,2BAAS;AACpD,QAAM,eAAe;AACrB,QAAM,YAAY;AAClB,QAAM,WAAW;AACjB,QAAM,SAAS;AAGf,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS,aAAa;AAC1C,UAAM,WAAW,qBAAqB,UAAU;AAChD,UAAM,UAAU,SAAS;AAEzB,WAAO,UACL,eACA,YACA,IAAI,sBAAO,aAAa,UAAU;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,SAAS;AAAA,UACT,mBAAmB;AAAA,aAChB,UAAU;AAAA;AAAA,QAEf,QAAQ,gBAAgB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,WAEC;AAAA,QACH,OAAO;AAAA,UACL,SAAS,CAAC,CAAC;AAAA,UACX,SAAS;AAAA;AAAA,QAEX,YAAY,EAAE,SAAS;AAAA,QACvB,qBAAqB;AAAA,UACnB,OAAO;AAAA,UACP,SAAS;AAAA,UACT,IAAI,CAAC,SAAS;AACZ,0BAAc;AACd,mBAAO;AAAA;AAAA;AAAA;AAAA;AAMjB,WAAO,MAAM;AACX,UAAI,OAAO;AAAS,eAAO,QAAQ;AAAA;AAAA,KAEpC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,8BAAU,MAAM;AACd,QAAI,CAAC,OAAO;AAAS;AACrB,WAAO,QAAQ;AAAA,KACd,CAAC,OAAO;AAEX,QAAM,QAAQ;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,WAAW;AAAA;AAEpB,QAAM,cAAc;AAAA,IAClB,OAAO,WAAW;AAAA,IAClB,KAAK;AAAA,IACL,WAAW,WAAW;AAAA,IACtB,eAAe;AAAA;AAEjB,QAAM,YAAY;AAAA,IAChB,KAAK;AAAA;AAEP,SAAO;AAAA,IACL,gBAAgB,OAAO;AAAA,IACvB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IAEA;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/Arrow.js
CHANGED
|
@@ -1,55 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
9
|
-
import { forwardRef } from 'react';
|
|
10
|
-
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
11
|
-
import { getArrowStylesBySize } from '@elliemae/ds-popper';
|
|
12
|
-
import { jsx } from 'react/jsx-runtime';
|
|
13
|
-
|
|
14
|
-
var _svg;
|
|
15
|
-
|
|
16
|
-
const _excluded = ["style", "className", "innerRef", "blockName", "placement"];
|
|
17
|
-
|
|
18
|
-
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; }
|
|
19
|
-
|
|
20
|
-
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(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; }
|
|
21
|
-
const ArrowWrapper = aggregatedClasses('span')('popover', 'arrow');
|
|
22
|
-
|
|
23
|
-
function Arrow(_ref) {
|
|
24
|
-
let {
|
|
25
|
-
style,
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { forwardRef } from "react";
|
|
3
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
4
|
+
import { getArrowStylesBySize } from "@elliemae/ds-popper";
|
|
5
|
+
const ArrowWrapper = aggregatedClasses("span")("popover", "arrow");
|
|
6
|
+
function Arrow({ style, className, innerRef, blockName = "popover", placement, ...otherProps }) {
|
|
7
|
+
return /* @__PURE__ */ React2.createElement(ArrowWrapper, {
|
|
26
8
|
className,
|
|
9
|
+
"data-placement": placement,
|
|
10
|
+
...otherProps,
|
|
27
11
|
innerRef,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
}, void 0, /*#__PURE__*/_jsx("path", {
|
|
42
|
-
className: "stroke",
|
|
43
|
-
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"
|
|
44
|
-
}), /*#__PURE__*/_jsx("path", {
|
|
45
|
-
className: "fill",
|
|
46
|
-
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"
|
|
47
|
-
})))
|
|
48
|
-
}));
|
|
12
|
+
style: {
|
|
13
|
+
...style,
|
|
14
|
+
...getArrowStylesBySize(placement, 25)
|
|
15
|
+
}
|
|
16
|
+
}, /* @__PURE__ */ React2.createElement("svg", {
|
|
17
|
+
viewBox: "0 0 30 30"
|
|
18
|
+
}, /* @__PURE__ */ React2.createElement("path", {
|
|
19
|
+
className: "stroke",
|
|
20
|
+
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"
|
|
21
|
+
}), /* @__PURE__ */ React2.createElement("path", {
|
|
22
|
+
className: "fill",
|
|
23
|
+
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"
|
|
24
|
+
})));
|
|
49
25
|
}
|
|
50
|
-
|
|
51
|
-
|
|
26
|
+
var Arrow_default = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(Arrow, {
|
|
27
|
+
...props,
|
|
52
28
|
innerRef: ref || props.innerRef
|
|
53
|
-
}))
|
|
54
|
-
|
|
55
|
-
|
|
29
|
+
}));
|
|
30
|
+
export {
|
|
31
|
+
Arrow_default as default
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=Arrow.js.map
|
package/esm/Arrow.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Arrow.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { forwardRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getArrowStylesBySize } from '@elliemae/ds-popper';\n\nconst ArrowWrapper = aggregatedClasses('span')('popover', 'arrow');\nfunction Arrow({ style, className, innerRef, blockName = 'popover', placement, ...otherProps }) {\n return (\n <ArrowWrapper\n className={className}\n data-placement={placement}\n {...otherProps}\n innerRef={innerRef}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n d=\"M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n d=\"M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z\"\n />\n </svg>\n </ArrowWrapper>\n );\n}\n\nexport default forwardRef((props, ref) => <Arrow {...props} innerRef={ref || props.innerRef} />);\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,eAAe,kBAAkB,QAAQ,WAAW;AAC1D,eAAe,EAAE,OAAO,WAAW,UAAU,YAAY,WAAW,cAAc,cAAc;AAC9F,SACE,qCAAC,cAAD;AAAA,IACE;AAAA,IACA,kBAAgB;AAAA,OACZ;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,SACF;AAAA,SACA,qBAAqB,WAAW;AAAA;AAAA,KAGrC,qCAAC,OAAD;AAAA,IAAK,SAAQ;AAAA,KACX,qCAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAE;AAAA,MAGJ,qCAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAE;AAAA;AAAA;AAOZ,IAAO,gBAAQ,WAAW,CAAC,OAAO,QAAQ,qCAAC,OAAD;AAAA,KAAW;AAAA,EAAO,UAAU,OAAO,MAAM;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/DSPopover.js
CHANGED
|
@@ -1,67 +1,37 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
import { useHoverHandlersDelay } from '@elliemae/ds-utilities';
|
|
12
|
-
import { useHiddenController } from '@elliemae/ds-hidden';
|
|
13
|
-
import Popover from './Popover.js';
|
|
14
|
-
import usePopper from './usePopper.js';
|
|
15
|
-
export { default as usePopper } from './usePopper.js';
|
|
16
|
-
import Arrow from './Arrow.js';
|
|
17
|
-
export { default as usePopoverProviderState } from './usePopoverProviderState.js';
|
|
18
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
19
|
-
export * from '@elliemae/ds-popper';
|
|
20
|
-
|
|
21
|
-
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; }
|
|
22
|
-
|
|
23
|
-
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(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; }
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
import { PropTypes, describe } from "react-desc";
|
|
4
|
+
import { useHoverHandlersDelay } from "@elliemae/ds-utilities";
|
|
5
|
+
import { useHiddenController } from "@elliemae/ds-hidden";
|
|
6
|
+
import Popover from "./Popover";
|
|
7
|
+
import usePopper from "./usePopper";
|
|
8
|
+
import Arrow from "./Arrow";
|
|
9
|
+
import usePopoverProviderState from "./usePopoverProviderState";
|
|
10
|
+
export * from "@elliemae/ds-popper";
|
|
24
11
|
const Interaction = {
|
|
25
|
-
CLICK:
|
|
26
|
-
HOVER:
|
|
12
|
+
CLICK: "click",
|
|
13
|
+
HOVER: "hover"
|
|
27
14
|
};
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
destroyOnHidden,
|
|
49
|
-
interactionType,
|
|
50
|
-
isOpen,
|
|
51
|
-
style
|
|
52
|
-
} = _ref;
|
|
53
|
-
const {
|
|
54
|
-
visible,
|
|
55
|
-
onShow,
|
|
56
|
-
onHide,
|
|
57
|
-
onToggle
|
|
58
|
-
} = useHiddenController(visibleProp);
|
|
59
|
-
const {
|
|
60
|
-
reference,
|
|
61
|
-
popper,
|
|
62
|
-
arrow,
|
|
63
|
-
popperData
|
|
64
|
-
} = usePopper({
|
|
15
|
+
const DSPopover = ({
|
|
16
|
+
containerProps,
|
|
17
|
+
content,
|
|
18
|
+
renderer,
|
|
19
|
+
visible: visibleProp,
|
|
20
|
+
offset,
|
|
21
|
+
showArrow,
|
|
22
|
+
placement,
|
|
23
|
+
boundaries,
|
|
24
|
+
modifiers,
|
|
25
|
+
referenceEl,
|
|
26
|
+
renderTrigger,
|
|
27
|
+
onClickOutside,
|
|
28
|
+
destroyOnHidden,
|
|
29
|
+
interactionType,
|
|
30
|
+
isOpen,
|
|
31
|
+
style
|
|
32
|
+
}) => {
|
|
33
|
+
const { visible, onShow, onHide, onToggle } = useHiddenController(visibleProp);
|
|
34
|
+
const { reference, popper, arrow, popperData } = usePopper({
|
|
65
35
|
placement,
|
|
66
36
|
showArrow,
|
|
67
37
|
boundaries,
|
|
@@ -76,73 +46,81 @@ const DSPopover = _ref => {
|
|
|
76
46
|
onMouseLeave: onHide
|
|
77
47
|
});
|
|
78
48
|
const isPopoverVisible = visible || isOpen;
|
|
79
|
-
return
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
49
|
+
return /* @__PURE__ */ React2.createElement(React2.Fragment, null, renderTrigger({
|
|
50
|
+
...reference,
|
|
51
|
+
handlers: interactionType === "click" ? { onClick: onToggle } : hoverHandlers,
|
|
52
|
+
onShow,
|
|
53
|
+
onToggle,
|
|
54
|
+
onHide,
|
|
55
|
+
"aria-haspopup": true,
|
|
56
|
+
"aria-expanded": visible
|
|
57
|
+
}), isPopoverVisible && reference.ref && /* @__PURE__ */ React2.createElement(Popover, {
|
|
58
|
+
containerProps,
|
|
59
|
+
destroyOnHidden,
|
|
60
|
+
interactionType,
|
|
61
|
+
isOpen,
|
|
62
|
+
onClickOutside: (...args) => {
|
|
63
|
+
onClickOutside(...args);
|
|
64
|
+
if (interactionType === "click")
|
|
65
|
+
onHide();
|
|
66
|
+
},
|
|
67
|
+
popperProps: popper,
|
|
68
|
+
renderer: renderer && ((props) => renderer({
|
|
69
|
+
...props,
|
|
84
70
|
onShow,
|
|
85
71
|
onToggle,
|
|
86
|
-
onHide
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
onClickOutside: function () {
|
|
95
|
-
onClickOutside(...arguments);
|
|
96
|
-
if (interactionType === 'click') onHide();
|
|
97
|
-
},
|
|
98
|
-
popperProps: popper,
|
|
99
|
-
renderer: renderer && (props => renderer(_objectSpread(_objectSpread({}, props), {}, {
|
|
100
|
-
onShow,
|
|
101
|
-
onToggle,
|
|
102
|
-
onHide
|
|
103
|
-
}))),
|
|
104
|
-
style: style,
|
|
105
|
-
visible: isPopoverVisible
|
|
106
|
-
}, void 0, showArrow && /*#__PURE__*/jsx(Arrow, _objectSpread(_objectSpread({}, arrow), {}, {
|
|
107
|
-
placement: popperData.placement
|
|
108
|
-
})), isPopoverVisible && content)]
|
|
109
|
-
});
|
|
72
|
+
onHide
|
|
73
|
+
})),
|
|
74
|
+
style,
|
|
75
|
+
visible: isPopoverVisible
|
|
76
|
+
}, showArrow && /* @__PURE__ */ React2.createElement(Arrow, {
|
|
77
|
+
...arrow,
|
|
78
|
+
placement: popperData.placement
|
|
79
|
+
}), isPopoverVisible && content));
|
|
110
80
|
};
|
|
111
|
-
|
|
112
81
|
DSPopover.defaultProps = {
|
|
113
82
|
containerProps: {},
|
|
114
|
-
renderer:
|
|
115
|
-
visible:
|
|
116
|
-
offset:
|
|
83
|
+
renderer: void 0,
|
|
84
|
+
visible: void 0,
|
|
85
|
+
offset: void 0,
|
|
117
86
|
showArrow: false,
|
|
118
|
-
placement:
|
|
87
|
+
placement: "top",
|
|
119
88
|
modifiers: {},
|
|
120
89
|
renderTrigger: () => null,
|
|
121
90
|
onClickOutside: () => null,
|
|
122
91
|
destroyOnHidden: true,
|
|
123
|
-
isOpen:
|
|
92
|
+
isOpen: void 0
|
|
124
93
|
};
|
|
125
94
|
const popoverProps = {
|
|
126
|
-
containerProps: PropTypes.shape({}).description(
|
|
127
|
-
destroyOnHidden: PropTypes.bool.description(
|
|
128
|
-
renderer: PropTypes.func.description(
|
|
129
|
-
popperProps: PropTypes.object.description(
|
|
130
|
-
visible: PropTypes.bool.description(
|
|
131
|
-
content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description(
|
|
132
|
-
onClickOutside: PropTypes.func.description(
|
|
133
|
-
interaction: PropTypes.string.description(
|
|
134
|
-
offset: PropTypes.object.description(
|
|
135
|
-
showArrow: PropTypes.bool.description(
|
|
136
|
-
placement: PropTypes.string.description(
|
|
137
|
-
boundaries: PropTypes.string.description(
|
|
138
|
-
modifiers: PropTypes.object.description(
|
|
139
|
-
style: PropTypes.object.description(
|
|
140
|
-
referenceEl: PropTypes.element.description(
|
|
141
|
-
renderTrigger: PropTypes.func.description(
|
|
142
|
-
interactionType: PropTypes.string.description(
|
|
143
|
-
isOpen: PropTypes.bool.description(
|
|
95
|
+
containerProps: PropTypes.shape({}).description("Set of Properties attached to the main container"),
|
|
96
|
+
destroyOnHidden: PropTypes.bool.description("destroy popover on hidden or not").defaultValue(true),
|
|
97
|
+
renderer: PropTypes.func.description("custom renderer"),
|
|
98
|
+
popperProps: PropTypes.object.description("Popper props attached to container"),
|
|
99
|
+
visible: PropTypes.bool.description("is visible or not").defaultValue(false),
|
|
100
|
+
content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description("popover content"),
|
|
101
|
+
onClickOutside: PropTypes.func.description("function called on click outside"),
|
|
102
|
+
interaction: PropTypes.string.description("interaction type: hover, click"),
|
|
103
|
+
offset: PropTypes.object.description("offset"),
|
|
104
|
+
showArrow: PropTypes.bool.description("show tooltip arrow or not"),
|
|
105
|
+
placement: PropTypes.string.description("popover placement: top, bottom, right, left"),
|
|
106
|
+
boundaries: PropTypes.string.description("popover boundaries"),
|
|
107
|
+
modifiers: PropTypes.object.description("modifiers"),
|
|
108
|
+
style: PropTypes.object.description("css style object"),
|
|
109
|
+
referenceEl: PropTypes.element.description("reference element"),
|
|
110
|
+
renderTrigger: PropTypes.func.description("render trigger element"),
|
|
111
|
+
interactionType: PropTypes.string.description("interaction type"),
|
|
112
|
+
isOpen: PropTypes.bool.description("open or not").defaultValue(false)
|
|
144
113
|
};
|
|
114
|
+
DSPopover.propTypes = popoverProps;
|
|
145
115
|
const PopoverWithSchema = describe(DSPopover);
|
|
146
116
|
PopoverWithSchema.propTypes = popoverProps;
|
|
147
|
-
|
|
148
|
-
export {
|
|
117
|
+
var DSPopover_default = DSPopover;
|
|
118
|
+
export {
|
|
119
|
+
DSPopover,
|
|
120
|
+
Interaction,
|
|
121
|
+
PopoverWithSchema,
|
|
122
|
+
DSPopover_default as default,
|
|
123
|
+
usePopoverProviderState,
|
|
124
|
+
usePopper
|
|
125
|
+
};
|
|
126
|
+
//# sourceMappingURL=DSPopover.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPopover.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useHoverHandlersDelay } from '@elliemae/ds-utilities';\nimport { useHiddenController } from '@elliemae/ds-hidden';\nimport Popover from './Popover';\nimport usePopper from './usePopper';\nimport Arrow from './Arrow';\nimport usePopoverProviderState from './usePopoverProviderState';\n\nexport * from '@elliemae/ds-popper';\nexport const Interaction = {\n CLICK: 'click',\n HOVER: 'hover',\n};\n\n/* Unstable Popover, not yet fully working */\nconst DSPopover = ({\n containerProps,\n content, // react component inside the popover to render its content\n renderer, // function to render the popover component, ex: (popoverProps) => (<div {...popoverProps}></div>)\n visible: visibleProp,\n offset,\n showArrow,\n // popper props options\n placement,\n boundaries, // scrollParent | window | viewport\n modifiers,\n referenceEl,\n renderTrigger,\n onClickOutside,\n destroyOnHidden,\n interactionType,\n isOpen,\n style,\n}) => {\n const { visible, onShow, onHide, onToggle } = useHiddenController(visibleProp);\n\n const { reference, popper, arrow, popperData } = usePopper({\n placement,\n showArrow,\n boundaries,\n modifiers,\n offset,\n referenceEl,\n eventsEnabled: visible,\n isOpen,\n });\n\n const hoverHandlers = useHoverHandlersDelay({\n onMouseOver: onShow,\n onMouseLeave: onHide,\n });\n const isPopoverVisible = visible || isOpen;\n return (\n <>\n {renderTrigger({\n ...reference,\n handlers: interactionType === 'click' ? { onClick: onToggle } : hoverHandlers,\n onShow,\n onToggle,\n onHide,\n 'aria-haspopup': true,\n 'aria-expanded': visible,\n })}\n {isPopoverVisible && reference.ref && (\n <Popover\n containerProps={containerProps}\n destroyOnHidden={destroyOnHidden}\n interactionType={interactionType}\n isOpen={isOpen}\n onClickOutside={(...args) => {\n onClickOutside(...args);\n if (interactionType === 'click') onHide();\n }}\n popperProps={popper}\n renderer={\n renderer &&\n ((props) =>\n renderer({\n ...props,\n onShow,\n onToggle,\n onHide,\n }))\n }\n style={style}\n visible={isPopoverVisible}\n >\n {showArrow && <Arrow {...arrow} placement={popperData.placement} />}\n {isPopoverVisible && content}\n </Popover>\n )}\n </>\n );\n};\n\nDSPopover.defaultProps = {\n containerProps: {},\n renderer: undefined,\n visible: undefined,\n offset: undefined,\n showArrow: false,\n placement: 'top',\n modifiers: {},\n renderTrigger: () => null,\n onClickOutside: () => null,\n destroyOnHidden: true,\n isOpen: undefined,\n};\n\nconst popoverProps = {\n containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n destroyOnHidden: PropTypes.bool.description('destroy popover on hidden or not').defaultValue(true),\n renderer: PropTypes.func.description('custom renderer'),\n popperProps: PropTypes.object.description('Popper props attached to container'),\n visible: PropTypes.bool.description('is visible or not').defaultValue(false),\n content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('popover content'),\n onClickOutside: PropTypes.func.description('function called on click outside'),\n interaction: PropTypes.string.description('interaction type: hover, click'),\n offset: PropTypes.object.description('offset'),\n showArrow: PropTypes.bool.description('show tooltip arrow or not'),\n placement: PropTypes.string.description('popover placement: top, bottom, right, left'),\n boundaries: PropTypes.string.description('popover boundaries'),\n modifiers: PropTypes.object.description('modifiers'),\n style: PropTypes.object.description('css style object'),\n referenceEl: PropTypes.element.description('reference element'),\n renderTrigger: PropTypes.func.description('render trigger element'),\n interactionType: PropTypes.string.description('interaction type'),\n isOpen: PropTypes.bool.description('open or not').defaultValue(false),\n};\n\nDSPopover.propTypes = popoverProps;\n\nconst PopoverWithSchema = describe(DSPopover);\nPopoverWithSchema.propTypes = popoverProps;\n\nexport { DSPopover, usePopper, usePopoverProviderState, PopoverWithSchema };\n\nexport default DSPopover;\n"],
|
|
5
|
+
"mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AAAA;AAIT,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,SAAS,QAAQ,QAAQ,aAAa,oBAAoB;AAElE,QAAM,EAAE,WAAW,QAAQ,OAAO,eAAe,UAAU;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA;AAGF,QAAM,gBAAgB,sBAAsB;AAAA,IAC1C,aAAa;AAAA,IACb,cAAc;AAAA;AAEhB,QAAM,mBAAmB,WAAW;AACpC,SACE,4DACG,cAAc;AAAA,OACV;AAAA,IACH,UAAU,oBAAoB,UAAU,EAAE,SAAS,aAAa;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,MAElB,oBAAoB,UAAU,OAC7B,qCAAC,SAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI,SAAS;AAC3B,qBAAe,GAAG;AAClB,UAAI,oBAAoB;AAAS;AAAA;AAAA,IAEnC,aAAa;AAAA,IACb,UACE,YACC,EAAC,UACA,SAAS;AAAA,SACJ;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAGN;AAAA,IACA,SAAS;AAAA,KAER,aAAa,qCAAC,OAAD;AAAA,OAAW;AAAA,IAAO,WAAW,WAAW;AAAA,MACrD,oBAAoB;AAAA;AAO/B,UAAU,eAAe;AAAA,EACvB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe,MAAM;AAAA,EACrB,gBAAgB,MAAM;AAAA,EACtB,iBAAiB;AAAA,EACjB,QAAQ;AAAA;AAGV,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAChD,iBAAiB,UAAU,KAAK,YAAY,oCAAoC,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,OAAO,YAAY;AAAA,EAC1C,SAAS,UAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACtE,SAAS,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,SAAS,YAAY;AAAA,EAChF,gBAAgB,UAAU,KAAK,YAAY;AAAA,EAC3C,aAAa,UAAU,OAAO,YAAY;AAAA,EAC1C,QAAQ,UAAU,OAAO,YAAY;AAAA,EACrC,WAAW,UAAU,KAAK,YAAY;AAAA,EACtC,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,YAAY,UAAU,OAAO,YAAY;AAAA,EACzC,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,aAAa,UAAU,QAAQ,YAAY;AAAA,EAC3C,eAAe,UAAU,KAAK,YAAY;AAAA,EAC1C,iBAAiB,UAAU,OAAO,YAAY;AAAA,EAC9C,QAAQ,UAAU,KAAK,YAAY,eAAe,aAAa;AAAA;AAGjE,UAAU,YAAY;AAEtB,MAAM,oBAAoB,SAAS;AACnC,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|