@elliemae/ds-popover 3.0.0-next.2 → 3.0.0-next.3
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 +88 -0
- package/dist/cjs/Arrow.js.map +7 -0
- package/dist/cjs/DSPopover.js +169 -0
- package/dist/cjs/DSPopover.js.map +7 -0
- package/dist/cjs/Popover.js +107 -0
- package/dist/cjs/Popover.js.map +7 -0
- package/dist/cjs/PopoverTrigger.js +100 -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 +71 -0
- package/dist/cjs/usePopover.js.map +7 -0
- package/dist/cjs/usePopoverProviderState.js +98 -0
- package/dist/cjs/usePopoverProviderState.js.map +7 -0
- package/dist/cjs/usePopper.js +151 -0
- package/dist/cjs/usePopper.js.map +7 -0
- package/dist/esm/Arrow.js +61 -0
- package/dist/esm/Arrow.js.map +7 -0
- package/dist/esm/DSPopover.js +142 -0
- package/dist/esm/DSPopover.js.map +7 -0
- package/dist/esm/Popover.js +80 -0
- package/dist/esm/Popover.js.map +7 -0
- package/dist/esm/PopoverTrigger.js +73 -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 +44 -0
- package/dist/esm/usePopover.js.map +7 -0
- package/dist/esm/usePopoverProviderState.js +71 -0
- package/dist/esm/usePopoverProviderState.js.map +7 -0
- package/dist/esm/usePopper.js +124 -0
- package/dist/esm/usePopper.js.map +7 -0
- package/package.json +43 -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
- package/types/Arrow.d.ts +0 -3
- package/types/DSPopover.d.ts +0 -167
- package/types/Popover.d.ts +0 -13
- package/types/PopoverTrigger.d.ts +0 -10
- package/types/index.d.ts +0 -2
- package/types/usePopover.d.ts +0 -21
- package/types/usePopoverProviderState.d.ts +0 -19
- package/types/usePopper.d.ts +0 -28
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
import * as React from "react";
|
|
33
|
+
import React2 from "react";
|
|
34
|
+
const Interaction = {
|
|
35
|
+
CLICK: "click",
|
|
36
|
+
HOVER: "hover"
|
|
37
|
+
};
|
|
38
|
+
const noop = () => {
|
|
39
|
+
};
|
|
40
|
+
function useHiddenTrigger({
|
|
41
|
+
hiddenId,
|
|
42
|
+
visible = false,
|
|
43
|
+
interaction = "click",
|
|
44
|
+
onToggle = noop,
|
|
45
|
+
onShow = noop,
|
|
46
|
+
onHide = noop
|
|
47
|
+
}) {
|
|
48
|
+
const handlers = {
|
|
49
|
+
[Interaction.CLICK]: {
|
|
50
|
+
onClick: onToggle
|
|
51
|
+
},
|
|
52
|
+
[Interaction.HOVER]: {
|
|
53
|
+
onMouseEnter: onShow,
|
|
54
|
+
onMouseLeave: onHide
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
return __spreadProps(__spreadValues({
|
|
58
|
+
"aria-expanded": visible
|
|
59
|
+
}, handlers[interaction]), {
|
|
60
|
+
"aria-controls": hiddenId
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
function PopoverTrigger(_a) {
|
|
64
|
+
var _b = _a, { as: Component } = _b, props = __objRest(_b, ["as"]);
|
|
65
|
+
const hiddenTriggerProps = useHiddenTrigger(props);
|
|
66
|
+
return /* @__PURE__ */ React2.createElement(Component, __spreadValues({}, hiddenTriggerProps));
|
|
67
|
+
}
|
|
68
|
+
var PopoverTrigger_default = PopoverTrigger;
|
|
69
|
+
export {
|
|
70
|
+
Interaction,
|
|
71
|
+
PopoverTrigger_default as default
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=PopoverTrigger.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/PopoverTrigger.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nexport const Interaction = {\n CLICK: 'click',\n HOVER: 'hover',\n};\n\nconst noop = () => {};\n\nfunction useHiddenTrigger({\n hiddenId,\n visible = false,\n interaction = 'click',\n onToggle = noop,\n onShow = noop,\n onHide = noop,\n}) {\n const handlers = {\n [Interaction.CLICK]: {\n onClick: onToggle,\n },\n [Interaction.HOVER]: {\n onMouseEnter: onShow,\n onMouseLeave: onHide,\n },\n };\n return {\n 'aria-expanded': visible,\n ...handlers[interaction],\n 'aria-controls': hiddenId,\n };\n}\n\nfunction PopoverTrigger({ as: Component, ...props }) {\n const hiddenTriggerProps = useHiddenTrigger(props);\n\n return <Component {...hiddenTriggerProps} />;\n}\n\nexport default PopoverTrigger;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AAAA;AAGT,MAAM,OAAO,MAAM;AAAA;AAEnB,0BAA0B;AAAA,EACxB;AAAA,EACA,UAAU;AAAA,EACV,cAAc;AAAA,EACd,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,GACR;AACD,QAAM,WAAW;AAAA,KACd,YAAY,QAAQ;AAAA,MACnB,SAAS;AAAA;AAAA,KAEV,YAAY,QAAQ;AAAA,MACnB,cAAc;AAAA,MACd,cAAc;AAAA;AAAA;AAGlB,SAAO;AAAA,IACL,iBAAiB;AAAA,KACd,SAAS,eAFP;AAAA,IAGL,iBAAiB;AAAA;AAAA;AAIrB,wBAAwB,IAA6B;AAA7B,eAAE,MAAI,cAAN,IAAoB,kBAApB,IAAoB,CAAlB;AACxB,QAAM,qBAAqB,iBAAiB;AAE5C,SAAO,qCAAC,WAAD,mBAAe;AAAA;AAGxB,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSPopover';\nexport { default } from './DSPopover';\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
var __objRest = (source, exclude) => {
|
|
18
|
+
var target = {};
|
|
19
|
+
for (var prop in source)
|
|
20
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
21
|
+
target[prop] = source[prop];
|
|
22
|
+
if (source != null && __getOwnPropSymbols)
|
|
23
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
24
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
}
|
|
27
|
+
return target;
|
|
28
|
+
};
|
|
29
|
+
import * as React from "react";
|
|
30
|
+
import usePopper from "./usePopper";
|
|
31
|
+
function usePopover(_a) {
|
|
32
|
+
var otherProps = __objRest(_a, []);
|
|
33
|
+
const _a2 = usePopper(otherProps), { reference, popper, arrow } = _a2, popperProps = __objRest(_a2, ["reference", "popper", "arrow"]);
|
|
34
|
+
return __spreadValues({
|
|
35
|
+
triggerProps: __spreadValues({}, reference),
|
|
36
|
+
popoverProps: __spreadValues({}, popper),
|
|
37
|
+
arrowProps: __spreadValues({}, arrow)
|
|
38
|
+
}, popperProps);
|
|
39
|
+
}
|
|
40
|
+
var usePopover_default = usePopover;
|
|
41
|
+
export {
|
|
42
|
+
usePopover_default as default
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=usePopover.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/usePopover.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import usePopper from './usePopper';\n\nfunction usePopover({ ...otherProps }) {\n const { reference, popper, arrow, ...popperProps } = usePopper(otherProps);\n\n return {\n triggerProps: { ...reference },\n popoverProps: { ...popper },\n arrowProps: { ...arrow },\n ...popperProps,\n };\n}\n\nexport default usePopover;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA;AAEA,oBAAoB,IAAmB;AAAnB,MAAK,uBAAL,IAAK;AACvB,QAAqD,gBAAU,aAAvD,aAAW,QAAQ,UAA0B,KAAhB,wBAAgB,KAAhB,CAA7B,aAAW,UAAQ;AAE3B,SAAO;AAAA,IACL,cAAc,mBAAK;AAAA,IACnB,cAAc,mBAAK;AAAA,IACnB,YAAY,mBAAK;AAAA,KACd;AAAA;AAIP,IAAO,qBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import * as React from "react";
|
|
21
|
+
import { useState, useEffect, useRef } from "react";
|
|
22
|
+
import { throttle } from "lodash";
|
|
23
|
+
import { useExecutionTimer } from "@elliemae/ds-utilities";
|
|
24
|
+
function usePopoverProviderState({
|
|
25
|
+
initialState = {
|
|
26
|
+
reference: null,
|
|
27
|
+
visible: false,
|
|
28
|
+
value: "",
|
|
29
|
+
options: {}
|
|
30
|
+
},
|
|
31
|
+
delay
|
|
32
|
+
}) {
|
|
33
|
+
const triggerRef = useRef();
|
|
34
|
+
const [tooltipState, setTooltipState] = useState(initialState);
|
|
35
|
+
const show = (state) => {
|
|
36
|
+
setTooltipState((prevState) => __spreadProps(__spreadValues(__spreadValues({}, prevState), state), {
|
|
37
|
+
visible: true
|
|
38
|
+
}));
|
|
39
|
+
};
|
|
40
|
+
const hide = (state) => {
|
|
41
|
+
setTooltipState((prevState) => __spreadProps(__spreadValues(__spreadValues({}, prevState), state), {
|
|
42
|
+
visible: false
|
|
43
|
+
}));
|
|
44
|
+
};
|
|
45
|
+
const [showTooltip, hideTooltip] = useExecutionTimer(show, hide, delay);
|
|
46
|
+
const handleShowTooltip = (state, e) => {
|
|
47
|
+
triggerRef.current = e.target;
|
|
48
|
+
showTooltip(__spreadProps(__spreadValues({}, state), { reference: e.target }));
|
|
49
|
+
};
|
|
50
|
+
const handleHideTooltip = (state) => {
|
|
51
|
+
hideTooltip(state);
|
|
52
|
+
};
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
window.addEventListener("scroll", throttle(handleHideTooltip, 300), true);
|
|
55
|
+
window.addEventListener("click", handleHideTooltip, true);
|
|
56
|
+
return () => {
|
|
57
|
+
window.removeEventListener("scroll", throttle(handleHideTooltip, 300), true);
|
|
58
|
+
window.addEventListener("click", handleHideTooltip, true);
|
|
59
|
+
};
|
|
60
|
+
}, [tooltipState.reference]);
|
|
61
|
+
return {
|
|
62
|
+
show: handleShowTooltip,
|
|
63
|
+
hide: handleHideTooltip,
|
|
64
|
+
state: tooltipState
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
var usePopoverProviderState_default = usePopoverProviderState;
|
|
68
|
+
export {
|
|
69
|
+
usePopoverProviderState_default as default
|
|
70
|
+
};
|
|
71
|
+
//# sourceMappingURL=usePopoverProviderState.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/usePopoverProviderState.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useState, useEffect, useRef } from 'react';\nimport { throttle } from 'lodash';\nimport { useExecutionTimer } from '@elliemae/ds-utilities';\n\nfunction usePopoverProviderState({\n initialState = {\n reference: null,\n visible: false,\n value: '',\n options: {},\n },\n delay,\n}) {\n const triggerRef = useRef();\n const [tooltipState, setTooltipState] = useState(initialState);\n\n const show = (state) => {\n setTooltipState((prevState) => ({\n ...prevState,\n ...state,\n visible: true,\n }));\n };\n const hide = (state) => {\n setTooltipState((prevState) => ({\n ...prevState,\n ...state,\n visible: false,\n }));\n };\n\n const [showTooltip, hideTooltip] = useExecutionTimer(show, hide, delay);\n\n const handleShowTooltip = (state, e) => {\n triggerRef.current = e.target;\n showTooltip({ ...state, reference: e.target });\n };\n\n const handleHideTooltip = (state) => {\n hideTooltip(state);\n };\n\n useEffect(() => {\n window.addEventListener('scroll', throttle(handleHideTooltip, 300), true);\n window.addEventListener('click', handleHideTooltip, true);\n return () => {\n window.removeEventListener('scroll', throttle(handleHideTooltip, 300), true);\n window.addEventListener('click', handleHideTooltip, true);\n };\n }, [tooltipState.reference]);\n\n return {\n show: handleShowTooltip,\n hide: handleHideTooltip,\n state: tooltipState,\n };\n}\n\nexport default usePopoverProviderState;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACAA;AACA;AACA;AAEA,iCAAiC;AAAA,EAC/B,eAAe;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,SAAS;AAAA;AAAA,EAEX;AAAA,GACC;AACD,QAAM,aAAa;AACnB,QAAM,CAAC,cAAc,mBAAmB,SAAS;AAEjD,QAAM,OAAO,CAAC,UAAU;AACtB,oBAAgB,CAAC,cAAe,gDAC3B,YACA,QAF2B;AAAA,MAG9B,SAAS;AAAA;AAAA;AAGb,QAAM,OAAO,CAAC,UAAU;AACtB,oBAAgB,CAAC,cAAe,gDAC3B,YACA,QAF2B;AAAA,MAG9B,SAAS;AAAA;AAAA;AAIb,QAAM,CAAC,aAAa,eAAe,kBAAkB,MAAM,MAAM;AAEjE,QAAM,oBAAoB,CAAC,OAAO,MAAM;AACtC,eAAW,UAAU,EAAE;AACvB,gBAAY,iCAAK,QAAL,EAAY,WAAW,EAAE;AAAA;AAGvC,QAAM,oBAAoB,CAAC,UAAU;AACnC,gBAAY;AAAA;AAGd,YAAU,MAAM;AACd,WAAO,iBAAiB,UAAU,SAAS,mBAAmB,MAAM;AACpE,WAAO,iBAAiB,SAAS,mBAAmB;AACpD,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,SAAS,mBAAmB,MAAM;AACvE,aAAO,iBAAiB,SAAS,mBAAmB;AAAA;AAAA,KAErD,CAAC,aAAa;AAEjB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA;AAAA;AAIX,IAAO,kCAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
import * as React from "react";
|
|
21
|
+
import Popper from "popper.js";
|
|
22
|
+
import { useEffect, useRef, useState } from "react";
|
|
23
|
+
function calculateOffset({ offset, showArrow }) {
|
|
24
|
+
const arrowSize = 10;
|
|
25
|
+
const defaultPadding = 3;
|
|
26
|
+
return {
|
|
27
|
+
enabled: showArrow || offset,
|
|
28
|
+
offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
function usePopper({
|
|
32
|
+
offset,
|
|
33
|
+
showArrow,
|
|
34
|
+
placement,
|
|
35
|
+
isOpen,
|
|
36
|
+
modifiers,
|
|
37
|
+
eventsEnabled = true,
|
|
38
|
+
positionFixed,
|
|
39
|
+
boundaries = "scrollParent",
|
|
40
|
+
referenceEl: refEl
|
|
41
|
+
}) {
|
|
42
|
+
const [popperData, setPopperData] = useState({});
|
|
43
|
+
const [dynamicPopperNode, setPopperNode] = useState(null);
|
|
44
|
+
const referenceRef = useRef();
|
|
45
|
+
const popperRef = useRef();
|
|
46
|
+
const arrowRef = useRef();
|
|
47
|
+
const popper = useRef();
|
|
48
|
+
useEffect(() => {
|
|
49
|
+
const referenceEl = refEl || referenceRef.current;
|
|
50
|
+
const popperEl = dynamicPopperNode || popperRef.current;
|
|
51
|
+
const arrowEl = arrowRef.current;
|
|
52
|
+
popper.current = referenceEl && popperEl && new Popper(referenceEl, popperEl, {
|
|
53
|
+
placement,
|
|
54
|
+
isOpen,
|
|
55
|
+
eventsEnabled,
|
|
56
|
+
positionFixed,
|
|
57
|
+
modifiers: __spreadProps(__spreadValues({
|
|
58
|
+
preventOverflow: __spreadValues({
|
|
59
|
+
padding: 0,
|
|
60
|
+
boundariesElement: boundaries
|
|
61
|
+
}, modifiers.preventOverflow),
|
|
62
|
+
offset: calculateOffset({
|
|
63
|
+
offset,
|
|
64
|
+
showArrow
|
|
65
|
+
})
|
|
66
|
+
}, modifiers), {
|
|
67
|
+
arrow: {
|
|
68
|
+
enabled: !!arrowEl,
|
|
69
|
+
element: arrowEl
|
|
70
|
+
},
|
|
71
|
+
applyStyle: { enabled: false },
|
|
72
|
+
updateStateModifier: {
|
|
73
|
+
order: 900,
|
|
74
|
+
enabled: true,
|
|
75
|
+
fn: (data) => {
|
|
76
|
+
setPopperData(data);
|
|
77
|
+
return data;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
})
|
|
81
|
+
});
|
|
82
|
+
return () => {
|
|
83
|
+
if (popper.current)
|
|
84
|
+
popper.current.destroy();
|
|
85
|
+
};
|
|
86
|
+
}, [
|
|
87
|
+
refEl,
|
|
88
|
+
dynamicPopperNode,
|
|
89
|
+
placement,
|
|
90
|
+
showArrow,
|
|
91
|
+
offset,
|
|
92
|
+
popperRef,
|
|
93
|
+
eventsEnabled
|
|
94
|
+
]);
|
|
95
|
+
useEffect(() => {
|
|
96
|
+
if (!popper.current)
|
|
97
|
+
return;
|
|
98
|
+
popper.current.update();
|
|
99
|
+
}, [popper.current]);
|
|
100
|
+
const arrow = {
|
|
101
|
+
ref: arrowRef,
|
|
102
|
+
style: popperData.arrowStyles
|
|
103
|
+
};
|
|
104
|
+
const popperProps = {
|
|
105
|
+
style: popperData.styles,
|
|
106
|
+
ref: setPopperNode,
|
|
107
|
+
placement: popperData.placement,
|
|
108
|
+
"data-testid": "popover-container"
|
|
109
|
+
};
|
|
110
|
+
const reference = {
|
|
111
|
+
ref: referenceRef
|
|
112
|
+
};
|
|
113
|
+
return {
|
|
114
|
+
popperInstance: popper.current,
|
|
115
|
+
popper: popperProps,
|
|
116
|
+
arrow,
|
|
117
|
+
reference,
|
|
118
|
+
popperData
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
export {
|
|
122
|
+
usePopper as default
|
|
123
|
+
};
|
|
124
|
+
//# 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,WAChB,UAAU;AAAA,QAEf,QAAQ,gBAAgB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,SAEC,YAVM;AAAA,QAWT,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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,43 +1,46 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-popover",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.3",
|
|
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": "3.0.0-next.
|
|
64
|
-
"@elliemae/ds-hidden": "3.0.0-next.
|
|
65
|
-
"@elliemae/ds-popper": "3.0.0-next.
|
|
66
|
-
"@elliemae/ds-portal": "3.0.0-next.
|
|
67
|
-
"@elliemae/ds-utilities": "3.0.0-next.
|
|
66
|
+
"@elliemae/ds-classnames": "3.0.0-next.3",
|
|
67
|
+
"@elliemae/ds-hidden": "3.0.0-next.3",
|
|
68
|
+
"@elliemae/ds-popper": "3.0.0-next.3",
|
|
69
|
+
"@elliemae/ds-portal": "3.0.0-next.3",
|
|
70
|
+
"@elliemae/ds-utilities": "3.0.0-next.3",
|
|
68
71
|
"popper.js": "~1.16.1",
|
|
69
72
|
"react-desc": "~4.1.3"
|
|
70
73
|
},
|
|
@@ -75,7 +78,13 @@
|
|
|
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
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
88
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
|
|
80
89
|
}
|
|
81
90
|
}
|
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;
|