@elliemae/ds-popover 2.3.0-next.0 → 3.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/Arrow.js +62 -0
- package/dist/cjs/Arrow.js.map +7 -0
- package/dist/cjs/DSPopover.js +155 -0
- package/dist/cjs/DSPopover.js.map +7 -0
- package/dist/cjs/Popover.js +73 -0
- package/dist/cjs/Popover.js.map +7 -0
- package/dist/cjs/PopoverTrigger.js +72 -0
- package/dist/cjs/PopoverTrigger.js.map +7 -0
- package/dist/cjs/index.js +36 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/usePopover.js +45 -0
- package/dist/cjs/usePopover.js.map +7 -0
- package/dist/cjs/usePopoverProviderState.js +85 -0
- package/dist/cjs/usePopoverProviderState.js.map +7 -0
- package/dist/cjs/usePopper.js +135 -0
- package/dist/cjs/usePopper.js.map +7 -0
- package/dist/esm/Arrow.js +33 -0
- package/dist/esm/Arrow.js.map +7 -0
- package/dist/esm/DSPopover.js +126 -0
- package/dist/esm/DSPopover.js.map +7 -0
- package/dist/esm/Popover.js +44 -0
- package/dist/esm/Popover.js.map +7 -0
- package/dist/esm/PopoverTrigger.js +43 -0
- package/dist/esm/PopoverTrigger.js.map +7 -0
- package/dist/esm/index.js +7 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/usePopover.js +16 -0
- package/dist/esm/usePopover.js.map +7 -0
- package/dist/esm/usePopoverProviderState.js +56 -0
- package/dist/esm/usePopoverProviderState.js.map +7 -0
- package/dist/esm/usePopper.js +106 -0
- package/dist/esm/usePopper.js.map +7 -0
- package/{types → dist/types}/Arrow.d.ts +0 -0
- package/{types → dist/types}/DSPopover.d.ts +0 -0
- package/{types → dist/types}/Popover.d.ts +0 -0
- package/{types → dist/types}/PopoverTrigger.d.ts +0 -0
- package/{types → dist/types}/index.d.ts +0 -0
- package/{types → dist/types}/usePopover.d.ts +0 -0
- package/{types → dist/types}/usePopoverProviderState.d.ts +0 -0
- package/{types → dist/types}/usePopper.d.ts +0 -0
- package/package.json +42 -34
- package/cjs/Arrow.js +0 -63
- package/cjs/DSPopover.js +0 -167
- package/cjs/Popover.js +0 -66
- package/cjs/PopoverTrigger.js +0 -68
- package/cjs/index.js +0 -23
- package/cjs/usePopover.js +0 -41
- package/cjs/usePopoverProviderState.js +0 -75
- package/cjs/usePopper.js +0 -123
- package/esm/Arrow.js +0 -55
- package/esm/DSPopover.js +0 -148
- package/esm/Popover.js +0 -57
- package/esm/PopoverTrigger.js +0 -58
- package/esm/index.js +0 -4
- package/esm/usePopover.js +0 -34
- package/esm/usePopoverProviderState.js +0 -69
- package/esm/usePopper.js +0 -116
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Popper from "popper.js";
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
|
+
function calculateOffset({ offset, showArrow }) {
|
|
5
|
+
const arrowSize = 10;
|
|
6
|
+
const defaultPadding = 3;
|
|
7
|
+
return {
|
|
8
|
+
enabled: showArrow || offset,
|
|
9
|
+
offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
function usePopper({
|
|
13
|
+
offset,
|
|
14
|
+
showArrow,
|
|
15
|
+
placement,
|
|
16
|
+
isOpen,
|
|
17
|
+
modifiers,
|
|
18
|
+
eventsEnabled = true,
|
|
19
|
+
positionFixed,
|
|
20
|
+
boundaries = "scrollParent",
|
|
21
|
+
referenceEl: refEl
|
|
22
|
+
}) {
|
|
23
|
+
const [popperData, setPopperData] = useState({});
|
|
24
|
+
const [dynamicPopperNode, setPopperNode] = useState(null);
|
|
25
|
+
const referenceRef = useRef();
|
|
26
|
+
const popperRef = useRef();
|
|
27
|
+
const arrowRef = useRef();
|
|
28
|
+
const popper = useRef();
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
const referenceEl = refEl || referenceRef.current;
|
|
31
|
+
const popperEl = dynamicPopperNode || popperRef.current;
|
|
32
|
+
const arrowEl = arrowRef.current;
|
|
33
|
+
popper.current = referenceEl && popperEl && new Popper(referenceEl, popperEl, {
|
|
34
|
+
placement,
|
|
35
|
+
isOpen,
|
|
36
|
+
eventsEnabled,
|
|
37
|
+
positionFixed,
|
|
38
|
+
modifiers: {
|
|
39
|
+
preventOverflow: {
|
|
40
|
+
padding: 0,
|
|
41
|
+
boundariesElement: boundaries,
|
|
42
|
+
...modifiers.preventOverflow
|
|
43
|
+
},
|
|
44
|
+
offset: calculateOffset({
|
|
45
|
+
offset,
|
|
46
|
+
showArrow
|
|
47
|
+
}),
|
|
48
|
+
...modifiers,
|
|
49
|
+
arrow: {
|
|
50
|
+
enabled: !!arrowEl,
|
|
51
|
+
element: arrowEl
|
|
52
|
+
},
|
|
53
|
+
applyStyle: { enabled: false },
|
|
54
|
+
updateStateModifier: {
|
|
55
|
+
order: 900,
|
|
56
|
+
enabled: true,
|
|
57
|
+
fn: (data) => {
|
|
58
|
+
setPopperData(data);
|
|
59
|
+
return data;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
return () => {
|
|
65
|
+
if (popper.current)
|
|
66
|
+
popper.current.destroy();
|
|
67
|
+
};
|
|
68
|
+
}, [
|
|
69
|
+
refEl,
|
|
70
|
+
dynamicPopperNode,
|
|
71
|
+
placement,
|
|
72
|
+
showArrow,
|
|
73
|
+
offset,
|
|
74
|
+
popperRef,
|
|
75
|
+
eventsEnabled
|
|
76
|
+
]);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
if (!popper.current)
|
|
79
|
+
return;
|
|
80
|
+
popper.current.update();
|
|
81
|
+
}, [popper.current]);
|
|
82
|
+
const arrow = {
|
|
83
|
+
ref: arrowRef,
|
|
84
|
+
style: popperData.arrowStyles
|
|
85
|
+
};
|
|
86
|
+
const popperProps = {
|
|
87
|
+
style: popperData.styles,
|
|
88
|
+
ref: setPopperNode,
|
|
89
|
+
placement: popperData.placement,
|
|
90
|
+
"data-testid": "popover-container"
|
|
91
|
+
};
|
|
92
|
+
const reference = {
|
|
93
|
+
ref: referenceRef
|
|
94
|
+
};
|
|
95
|
+
return {
|
|
96
|
+
popperInstance: popper.current,
|
|
97
|
+
popper: popperProps,
|
|
98
|
+
arrow,
|
|
99
|
+
reference,
|
|
100
|
+
popperData
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
export {
|
|
104
|
+
usePopper as default
|
|
105
|
+
};
|
|
106
|
+
//# sourceMappingURL=usePopper.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/usePopper.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AAEA,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,SAAS;AAE7C,QAAM,CAAC,mBAAmB,iBAAiB,SAAS;AACpD,QAAM,eAAe;AACrB,QAAM,YAAY;AAClB,QAAM,WAAW;AACjB,QAAM,SAAS;AAGf,YAAU,MAAM;AACd,UAAM,cAAc,SAAS,aAAa;AAC1C,UAAM,WAAW,qBAAqB,UAAU;AAChD,UAAM,UAAU,SAAS;AAEzB,WAAO,UACL,eACA,YACA,IAAI,OAAO,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,YAAU,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
|
+
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/package.json
CHANGED
|
@@ -1,43 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-popover",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0-alpha.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Popover",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"module": "./dist/esm/index.js",
|
|
10
|
+
"main": "./dist/cjs/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
9
12
|
"exports": {
|
|
10
13
|
".": {
|
|
11
|
-
"import": "./esm/index.js",
|
|
12
|
-
"require": "./cjs/index.js"
|
|
14
|
+
"import": "./dist/esm/index.js",
|
|
15
|
+
"require": "./dist/cjs/index.js"
|
|
13
16
|
},
|
|
14
17
|
"./usePopper": {
|
|
15
|
-
"import": "./esm/usePopper.js",
|
|
16
|
-
"require": "./cjs/usePopper.js"
|
|
18
|
+
"import": "./dist/esm/usePopper.js",
|
|
19
|
+
"require": "./dist/cjs/usePopper.js"
|
|
17
20
|
},
|
|
18
21
|
"./usePopoverProviderState": {
|
|
19
|
-
"import": "./esm/usePopoverProviderState.js",
|
|
20
|
-
"require": "./cjs/usePopoverProviderState.js"
|
|
22
|
+
"import": "./dist/esm/usePopoverProviderState.js",
|
|
23
|
+
"require": "./dist/cjs/usePopoverProviderState.js"
|
|
21
24
|
},
|
|
22
25
|
"./usePopover": {
|
|
23
|
-
"import": "./esm/usePopover.js",
|
|
24
|
-
"require": "./cjs/usePopover.js"
|
|
26
|
+
"import": "./dist/esm/usePopover.js",
|
|
27
|
+
"require": "./dist/cjs/usePopover.js"
|
|
25
28
|
},
|
|
26
29
|
"./PopoverTrigger": {
|
|
27
|
-
"import": "./esm/PopoverTrigger.js",
|
|
28
|
-
"require": "./cjs/PopoverTrigger.js"
|
|
30
|
+
"import": "./dist/esm/PopoverTrigger.js",
|
|
31
|
+
"require": "./dist/cjs/PopoverTrigger.js"
|
|
29
32
|
},
|
|
30
33
|
"./Popover": {
|
|
31
|
-
"import": "./esm/Popover.js",
|
|
32
|
-
"require": "./cjs/Popover.js"
|
|
34
|
+
"import": "./dist/esm/Popover.js",
|
|
35
|
+
"require": "./dist/cjs/Popover.js"
|
|
33
36
|
},
|
|
34
37
|
"./DSPopover": {
|
|
35
|
-
"import": "./esm/DSPopover.js",
|
|
36
|
-
"require": "./cjs/DSPopover.js"
|
|
38
|
+
"import": "./dist/esm/DSPopover.js",
|
|
39
|
+
"require": "./dist/cjs/DSPopover.js"
|
|
37
40
|
},
|
|
38
41
|
"./Arrow": {
|
|
39
|
-
"import": "./esm/Arrow.js",
|
|
40
|
-
"require": "./cjs/Arrow.js"
|
|
42
|
+
"import": "./dist/esm/Arrow.js",
|
|
43
|
+
"require": "./dist/cjs/Arrow.js"
|
|
41
44
|
}
|
|
42
45
|
},
|
|
43
46
|
"sideEffects": [
|
|
@@ -49,22 +52,22 @@
|
|
|
49
52
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
50
53
|
},
|
|
51
54
|
"engines": {
|
|
52
|
-
"
|
|
53
|
-
"node": ">=
|
|
55
|
+
"pnpm": ">=6",
|
|
56
|
+
"node": ">=16"
|
|
54
57
|
},
|
|
55
58
|
"author": "ICE MT",
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
"
|
|
59
|
+
"jestSonar": {
|
|
60
|
+
"sonar56x": true,
|
|
61
|
+
"reportPath": "reports",
|
|
62
|
+
"reportFile": "tests.xml",
|
|
63
|
+
"indent": 4
|
|
61
64
|
},
|
|
62
65
|
"dependencies": {
|
|
63
|
-
"@elliemae/ds-classnames": "
|
|
64
|
-
"@elliemae/ds-hidden": "
|
|
65
|
-
"@elliemae/ds-popper": "
|
|
66
|
-
"@elliemae/ds-portal": "
|
|
67
|
-
"@elliemae/ds-utilities": "
|
|
66
|
+
"@elliemae/ds-classnames": "3.0.0-alpha.0",
|
|
67
|
+
"@elliemae/ds-hidden": "3.0.0-alpha.0",
|
|
68
|
+
"@elliemae/ds-popper": "3.0.0-alpha.0",
|
|
69
|
+
"@elliemae/ds-portal": "3.0.0-alpha.0",
|
|
70
|
+
"@elliemae/ds-utilities": "3.0.0-alpha.0",
|
|
68
71
|
"popper.js": "~1.16.1",
|
|
69
72
|
"react-desc": "~4.1.3"
|
|
70
73
|
},
|
|
@@ -75,7 +78,12 @@
|
|
|
75
78
|
},
|
|
76
79
|
"publishConfig": {
|
|
77
80
|
"access": "public",
|
|
78
|
-
"
|
|
79
|
-
|
|
81
|
+
"typeSafety": false
|
|
82
|
+
},
|
|
83
|
+
"scripts": {
|
|
84
|
+
"dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
|
|
85
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
86
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
87
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
80
88
|
}
|
|
81
89
|
}
|
package/cjs/Arrow.js
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
-
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
-
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
-
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
|
-
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
9
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
10
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
11
|
-
var react = require('react');
|
|
12
|
-
var dsClassnames = require('@elliemae/ds-classnames');
|
|
13
|
-
var dsPopper = require('@elliemae/ds-popper');
|
|
14
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
15
|
-
|
|
16
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
-
|
|
18
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
19
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
20
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
21
|
-
|
|
22
|
-
var _svg;
|
|
23
|
-
|
|
24
|
-
const _excluded = ["style", "className", "innerRef", "blockName", "placement"];
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
28
|
-
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; }
|
|
29
|
-
const ArrowWrapper = dsClassnames.aggregatedClasses('span')('popover', 'arrow');
|
|
30
|
-
|
|
31
|
-
function Arrow(_ref) {
|
|
32
|
-
let {
|
|
33
|
-
style,
|
|
34
|
-
className,
|
|
35
|
-
innerRef,
|
|
36
|
-
blockName = 'popover',
|
|
37
|
-
placement
|
|
38
|
-
} = _ref,
|
|
39
|
-
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
40
|
-
|
|
41
|
-
return /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, _objectSpread(_objectSpread({
|
|
42
|
-
className: className,
|
|
43
|
-
"data-placement": placement
|
|
44
|
-
}, otherProps), {}, {
|
|
45
|
-
innerRef: innerRef,
|
|
46
|
-
style: _objectSpread(_objectSpread({}, style), dsPopper.getArrowStylesBySize(placement, 25)),
|
|
47
|
-
children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
|
|
48
|
-
viewBox: "0 0 30 30"
|
|
49
|
-
}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
|
|
50
|
-
className: "stroke",
|
|
51
|
-
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"
|
|
52
|
-
}), /*#__PURE__*/_jsx__default["default"]("path", {
|
|
53
|
-
className: "fill",
|
|
54
|
-
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"
|
|
55
|
-
})))
|
|
56
|
-
}));
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
var Arrow$1 = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(Arrow, _objectSpread(_objectSpread({}, props), {}, {
|
|
60
|
-
innerRef: ref || props.innerRef
|
|
61
|
-
})));
|
|
62
|
-
|
|
63
|
-
module.exports = Arrow$1;
|
package/cjs/DSPopover.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
7
|
-
require('core-js/modules/web.dom-collections.iterator.js');
|
|
8
|
-
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
-
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
-
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
-
require('core-js/modules/esnext.iterator.for-each.js');
|
|
13
|
-
require('react');
|
|
14
|
-
var reactDesc = require('react-desc');
|
|
15
|
-
var dsUtilities = require('@elliemae/ds-utilities');
|
|
16
|
-
var dsHidden = require('@elliemae/ds-hidden');
|
|
17
|
-
var Popover = require('./Popover.js');
|
|
18
|
-
var usePopper = require('./usePopper.js');
|
|
19
|
-
var Arrow = require('./Arrow.js');
|
|
20
|
-
var usePopoverProviderState = require('./usePopoverProviderState.js');
|
|
21
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
22
|
-
var dsPopper = require('@elliemae/ds-popper');
|
|
23
|
-
|
|
24
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
25
|
-
|
|
26
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
27
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
28
|
-
|
|
29
|
-
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; }
|
|
30
|
-
|
|
31
|
-
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; }
|
|
32
|
-
const Interaction = {
|
|
33
|
-
CLICK: 'click',
|
|
34
|
-
HOVER: 'hover'
|
|
35
|
-
};
|
|
36
|
-
/* Unstable Popover, not yet fully working */
|
|
37
|
-
|
|
38
|
-
const DSPopover = _ref => {
|
|
39
|
-
let {
|
|
40
|
-
containerProps,
|
|
41
|
-
content,
|
|
42
|
-
// react component inside the popover to render its content
|
|
43
|
-
renderer,
|
|
44
|
-
// function to render the popover component, ex: (popoverProps) => (<div {...popoverProps}></div>)
|
|
45
|
-
visible: visibleProp,
|
|
46
|
-
offset,
|
|
47
|
-
showArrow,
|
|
48
|
-
// popper props options
|
|
49
|
-
placement,
|
|
50
|
-
boundaries,
|
|
51
|
-
// scrollParent | window | viewport
|
|
52
|
-
modifiers,
|
|
53
|
-
referenceEl,
|
|
54
|
-
renderTrigger,
|
|
55
|
-
onClickOutside,
|
|
56
|
-
destroyOnHidden,
|
|
57
|
-
interactionType,
|
|
58
|
-
isOpen,
|
|
59
|
-
style
|
|
60
|
-
} = _ref;
|
|
61
|
-
const {
|
|
62
|
-
visible,
|
|
63
|
-
onShow,
|
|
64
|
-
onHide,
|
|
65
|
-
onToggle
|
|
66
|
-
} = dsHidden.useHiddenController(visibleProp);
|
|
67
|
-
const {
|
|
68
|
-
reference,
|
|
69
|
-
popper,
|
|
70
|
-
arrow,
|
|
71
|
-
popperData
|
|
72
|
-
} = usePopper({
|
|
73
|
-
placement,
|
|
74
|
-
showArrow,
|
|
75
|
-
boundaries,
|
|
76
|
-
modifiers,
|
|
77
|
-
offset,
|
|
78
|
-
referenceEl,
|
|
79
|
-
eventsEnabled: visible,
|
|
80
|
-
isOpen
|
|
81
|
-
});
|
|
82
|
-
const hoverHandlers = dsUtilities.useHoverHandlersDelay({
|
|
83
|
-
onMouseOver: onShow,
|
|
84
|
-
onMouseLeave: onHide
|
|
85
|
-
});
|
|
86
|
-
const isPopoverVisible = visible || isOpen;
|
|
87
|
-
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
88
|
-
children: [renderTrigger(_objectSpread(_objectSpread({}, reference), {}, {
|
|
89
|
-
handlers: interactionType === 'click' ? {
|
|
90
|
-
onClick: onToggle
|
|
91
|
-
} : hoverHandlers,
|
|
92
|
-
onShow,
|
|
93
|
-
onToggle,
|
|
94
|
-
onHide,
|
|
95
|
-
'aria-haspopup': true,
|
|
96
|
-
'aria-expanded': visible
|
|
97
|
-
})), isPopoverVisible && reference.ref && /*#__PURE__*/_jsx__default["default"](Popover, {
|
|
98
|
-
containerProps: containerProps,
|
|
99
|
-
destroyOnHidden: destroyOnHidden,
|
|
100
|
-
interactionType: interactionType,
|
|
101
|
-
isOpen: isOpen,
|
|
102
|
-
onClickOutside: function () {
|
|
103
|
-
onClickOutside(...arguments);
|
|
104
|
-
if (interactionType === 'click') onHide();
|
|
105
|
-
},
|
|
106
|
-
popperProps: popper,
|
|
107
|
-
renderer: renderer && (props => renderer(_objectSpread(_objectSpread({}, props), {}, {
|
|
108
|
-
onShow,
|
|
109
|
-
onToggle,
|
|
110
|
-
onHide
|
|
111
|
-
}))),
|
|
112
|
-
style: style,
|
|
113
|
-
visible: isPopoverVisible
|
|
114
|
-
}, void 0, showArrow && /*#__PURE__*/jsxRuntime.jsx(Arrow, _objectSpread(_objectSpread({}, arrow), {}, {
|
|
115
|
-
placement: popperData.placement
|
|
116
|
-
})), isPopoverVisible && content)]
|
|
117
|
-
});
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
DSPopover.defaultProps = {
|
|
121
|
-
containerProps: {},
|
|
122
|
-
renderer: undefined,
|
|
123
|
-
visible: undefined,
|
|
124
|
-
offset: undefined,
|
|
125
|
-
showArrow: false,
|
|
126
|
-
placement: 'top',
|
|
127
|
-
modifiers: {},
|
|
128
|
-
renderTrigger: () => null,
|
|
129
|
-
onClickOutside: () => null,
|
|
130
|
-
destroyOnHidden: true,
|
|
131
|
-
isOpen: undefined
|
|
132
|
-
};
|
|
133
|
-
const popoverProps = {
|
|
134
|
-
containerProps: reactDesc.PropTypes.shape({}).description('Set of Properties attached to the main container'),
|
|
135
|
-
destroyOnHidden: reactDesc.PropTypes.bool.description('destroy popover on hidden or not').defaultValue(true),
|
|
136
|
-
renderer: reactDesc.PropTypes.func.description('custom renderer'),
|
|
137
|
-
popperProps: reactDesc.PropTypes.object.description('Popper props attached to container'),
|
|
138
|
-
visible: reactDesc.PropTypes.bool.description('is visible or not').defaultValue(false),
|
|
139
|
-
content: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.string]).description('popover content'),
|
|
140
|
-
onClickOutside: reactDesc.PropTypes.func.description('function called on click outside'),
|
|
141
|
-
interaction: reactDesc.PropTypes.string.description('interaction type: hover, click'),
|
|
142
|
-
offset: reactDesc.PropTypes.object.description('offset'),
|
|
143
|
-
showArrow: reactDesc.PropTypes.bool.description('show tooltip arrow or not'),
|
|
144
|
-
placement: reactDesc.PropTypes.string.description('popover placement: top, bottom, right, left'),
|
|
145
|
-
boundaries: reactDesc.PropTypes.string.description('popover boundaries'),
|
|
146
|
-
modifiers: reactDesc.PropTypes.object.description('modifiers'),
|
|
147
|
-
style: reactDesc.PropTypes.object.description('css style object'),
|
|
148
|
-
referenceEl: reactDesc.PropTypes.element.description('reference element'),
|
|
149
|
-
renderTrigger: reactDesc.PropTypes.func.description('render trigger element'),
|
|
150
|
-
interactionType: reactDesc.PropTypes.string.description('interaction type'),
|
|
151
|
-
isOpen: reactDesc.PropTypes.bool.description('open or not').defaultValue(false)
|
|
152
|
-
};
|
|
153
|
-
const PopoverWithSchema = reactDesc.describe(DSPopover);
|
|
154
|
-
PopoverWithSchema.propTypes = popoverProps;
|
|
155
|
-
|
|
156
|
-
exports.usePopper = usePopper;
|
|
157
|
-
exports.usePopoverProviderState = usePopoverProviderState;
|
|
158
|
-
exports.DSPopover = DSPopover;
|
|
159
|
-
exports.Interaction = Interaction;
|
|
160
|
-
exports.PopoverWithSchema = PopoverWithSchema;
|
|
161
|
-
exports["default"] = DSPopover;
|
|
162
|
-
Object.keys(dsPopper).forEach(function (k) {
|
|
163
|
-
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
164
|
-
enumerable: true,
|
|
165
|
-
get: function () { return dsPopper[k]; }
|
|
166
|
-
});
|
|
167
|
-
});
|
package/cjs/Popover.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
4
|
-
require('core-js/modules/esnext.iterator.constructor.js');
|
|
5
|
-
require('core-js/modules/esnext.iterator.filter.js');
|
|
6
|
-
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
7
|
-
require('core-js/modules/esnext.iterator.for-each.js');
|
|
8
|
-
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
9
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
10
|
-
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
11
|
-
var react = require('react');
|
|
12
|
-
var lodash = require('lodash');
|
|
13
|
-
var dsClassnames = require('@elliemae/ds-classnames');
|
|
14
|
-
var dsUtilities = require('@elliemae/ds-utilities');
|
|
15
|
-
var dsHidden = require('@elliemae/ds-hidden');
|
|
16
|
-
var DSPortal = require('@elliemae/ds-portal');
|
|
17
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
22
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
23
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
24
|
-
var DSPortal__default = /*#__PURE__*/_interopDefaultLegacy(DSPortal);
|
|
25
|
-
|
|
26
|
-
const _excluded = ["containerProps", "destroyOnHidden", "renderer", "popperProps", "visible", "content", "onClickOutside", "style"];
|
|
27
|
-
|
|
28
|
-
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; }
|
|
29
|
-
|
|
30
|
-
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; }
|
|
31
|
-
const blockName = 'popover';
|
|
32
|
-
const PopoverComponent = dsClassnames.aggregatedClasses('div')(blockName);
|
|
33
|
-
|
|
34
|
-
function Popover(_ref) {
|
|
35
|
-
let {
|
|
36
|
-
containerProps,
|
|
37
|
-
destroyOnHidden = true,
|
|
38
|
-
renderer = undefined,
|
|
39
|
-
popperProps = {},
|
|
40
|
-
visible = false,
|
|
41
|
-
content = undefined,
|
|
42
|
-
onClickOutside = () => null,
|
|
43
|
-
style
|
|
44
|
-
} = _ref,
|
|
45
|
-
otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
|
|
46
|
-
|
|
47
|
-
const popoverRef = react.useRef();
|
|
48
|
-
const hiddenTransitionProps = dsHidden.useHiddenTransition({
|
|
49
|
-
visible
|
|
50
|
-
});
|
|
51
|
-
const popoverProps = dsUtilities.removeUndefinedProperties(_objectSpread(_objectSpread({
|
|
52
|
-
containerprops: containerProps,
|
|
53
|
-
content,
|
|
54
|
-
ref: popoverRef
|
|
55
|
-
}, otherProps), hiddenTransitionProps));
|
|
56
|
-
dsUtilities.useOnClickOutside(popoverRef, onClickOutside);
|
|
57
|
-
const wrapStyle = lodash.omit(style, 'zIndex') || {};
|
|
58
|
-
return destroyOnHidden && !hiddenTransitionProps.destroyed && /*#__PURE__*/_jsx__default["default"](DSPortal__default["default"], {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, popperProps), {}, {
|
|
59
|
-
style: _objectSpread(_objectSpread({}, style), popperProps.style),
|
|
60
|
-
children: dsUtilities.isFunction(renderer) ? renderer(popoverProps) : /*#__PURE__*/jsxRuntime.jsx(PopoverComponent, _objectSpread(_objectSpread({}, popoverProps), {}, {
|
|
61
|
-
style: wrapStyle
|
|
62
|
-
}))
|
|
63
|
-
})));
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
module.exports = Popover;
|
package/cjs/PopoverTrigger.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
11
|
-
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
12
|
-
require('react');
|
|
13
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
|
-
|
|
17
|
-
var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
|
|
18
|
-
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
19
|
-
|
|
20
|
-
const _excluded = ["as"];
|
|
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 Interaction = {
|
|
26
|
-
CLICK: 'click',
|
|
27
|
-
HOVER: 'hover'
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const noop = () => {};
|
|
31
|
-
|
|
32
|
-
function useHiddenTrigger(_ref) {
|
|
33
|
-
let {
|
|
34
|
-
hiddenId,
|
|
35
|
-
visible = false,
|
|
36
|
-
interaction = 'click',
|
|
37
|
-
onToggle = noop,
|
|
38
|
-
onShow = noop,
|
|
39
|
-
onHide = noop
|
|
40
|
-
} = _ref;
|
|
41
|
-
const handlers = {
|
|
42
|
-
[Interaction.CLICK]: {
|
|
43
|
-
onClick: onToggle
|
|
44
|
-
},
|
|
45
|
-
[Interaction.HOVER]: {
|
|
46
|
-
onMouseEnter: onShow,
|
|
47
|
-
onMouseLeave: onHide
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
|
-
return _objectSpread(_objectSpread({
|
|
51
|
-
'aria-expanded': visible
|
|
52
|
-
}, handlers[interaction]), {}, {
|
|
53
|
-
'aria-controls': hiddenId
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
function PopoverTrigger(_ref2) {
|
|
58
|
-
let {
|
|
59
|
-
as: Component
|
|
60
|
-
} = _ref2,
|
|
61
|
-
props = _objectWithoutProperties__default["default"](_ref2, _excluded);
|
|
62
|
-
|
|
63
|
-
const hiddenTriggerProps = useHiddenTrigger(props);
|
|
64
|
-
return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, hiddenTriggerProps));
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
exports.Interaction = Interaction;
|
|
68
|
-
exports["default"] = PopoverTrigger;
|
package/cjs/index.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var DSPopover = require('./DSPopover.js');
|
|
6
|
-
var dsPopper = require('@elliemae/ds-popper');
|
|
7
|
-
var usePopper = require('./usePopper.js');
|
|
8
|
-
var usePopoverProviderState = require('./usePopoverProviderState.js');
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
exports.DSPopover = DSPopover.DSPopover;
|
|
13
|
-
exports.Interaction = DSPopover.Interaction;
|
|
14
|
-
exports.PopoverWithSchema = DSPopover.PopoverWithSchema;
|
|
15
|
-
exports["default"] = DSPopover.DSPopover;
|
|
16
|
-
exports.usePopper = usePopper;
|
|
17
|
-
exports.usePopoverProviderState = usePopoverProviderState;
|
|
18
|
-
Object.keys(dsPopper).forEach(function (k) {
|
|
19
|
-
if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () { return dsPopper[k]; }
|
|
22
|
-
});
|
|
23
|
-
});
|