@elliemae/ds-popover 2.2.0-next.4 → 2.3.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/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/esm/Popover.js
CHANGED
|
@@ -1,57 +1,44 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
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; }
|
|
22
|
-
const blockName = 'popover';
|
|
23
|
-
const PopoverComponent = aggregatedClasses('div')(blockName);
|
|
24
|
-
|
|
25
|
-
function Popover(_ref) {
|
|
26
|
-
let {
|
|
27
|
-
containerProps,
|
|
28
|
-
destroyOnHidden = true,
|
|
29
|
-
renderer = undefined,
|
|
30
|
-
popperProps = {},
|
|
31
|
-
visible = false,
|
|
32
|
-
content = undefined,
|
|
33
|
-
onClickOutside = () => null,
|
|
34
|
-
style
|
|
35
|
-
} = _ref,
|
|
36
|
-
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
-
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import React2, { useRef } from "react";
|
|
3
|
+
import { omit } from "lodash";
|
|
4
|
+
import { aggregatedClasses } from "@elliemae/ds-classnames";
|
|
5
|
+
import { isFunction, removeUndefinedProperties, useOnClickOutside } from "@elliemae/ds-utilities";
|
|
6
|
+
import { useHiddenTransition } from "@elliemae/ds-hidden";
|
|
7
|
+
import DSPortal from "@elliemae/ds-portal";
|
|
8
|
+
const blockName = "popover";
|
|
9
|
+
const PopoverComponent = aggregatedClasses("div")(blockName);
|
|
10
|
+
function Popover({
|
|
11
|
+
containerProps,
|
|
12
|
+
destroyOnHidden = true,
|
|
13
|
+
renderer = void 0,
|
|
14
|
+
popperProps = {},
|
|
15
|
+
visible = false,
|
|
16
|
+
content = void 0,
|
|
17
|
+
onClickOutside = () => null,
|
|
18
|
+
style,
|
|
19
|
+
...otherProps
|
|
20
|
+
}) {
|
|
38
21
|
const popoverRef = useRef();
|
|
39
|
-
const hiddenTransitionProps = useHiddenTransition({
|
|
40
|
-
|
|
41
|
-
});
|
|
42
|
-
const popoverProps = removeUndefinedProperties(_objectSpread(_objectSpread({
|
|
22
|
+
const hiddenTransitionProps = useHiddenTransition({ visible });
|
|
23
|
+
const popoverProps = removeUndefinedProperties({
|
|
43
24
|
containerprops: containerProps,
|
|
44
25
|
content,
|
|
45
|
-
ref: popoverRef
|
|
46
|
-
|
|
26
|
+
ref: popoverRef,
|
|
27
|
+
...otherProps,
|
|
28
|
+
...hiddenTransitionProps
|
|
29
|
+
});
|
|
47
30
|
useOnClickOutside(popoverRef, onClickOutside);
|
|
48
|
-
const wrapStyle = omit(style,
|
|
49
|
-
return destroyOnHidden && !hiddenTransitionProps.destroyed &&
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
31
|
+
const wrapStyle = omit(style, "zIndex") || {};
|
|
32
|
+
return destroyOnHidden && !hiddenTransitionProps.destroyed && /* @__PURE__ */ React2.createElement(DSPortal, null, /* @__PURE__ */ React2.createElement("div", {
|
|
33
|
+
...popperProps,
|
|
34
|
+
style: { ...style, ...popperProps.style }
|
|
35
|
+
}, isFunction(renderer) ? renderer(popoverProps) : /* @__PURE__ */ React2.createElement(PopoverComponent, {
|
|
36
|
+
...popoverProps,
|
|
37
|
+
style: wrapStyle
|
|
54
38
|
})));
|
|
55
39
|
}
|
|
56
|
-
|
|
57
|
-
export {
|
|
40
|
+
var Popover_default = Popover;
|
|
41
|
+
export {
|
|
42
|
+
Popover_default as default
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=Popover.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Popover.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef } from 'react';\nimport { omit } from 'lodash';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { isFunction, removeUndefinedProperties, useOnClickOutside } from '@elliemae/ds-utilities';\nimport { useHiddenTransition } from '@elliemae/ds-hidden';\nimport DSPortal from '@elliemae/ds-portal';\n\nconst blockName = 'popover';\nconst PopoverComponent = aggregatedClasses('div')(blockName);\n\nfunction Popover({\n containerProps,\n destroyOnHidden = true,\n renderer = undefined,\n popperProps = {},\n visible = false,\n content = undefined,\n onClickOutside = () => null,\n style,\n ...otherProps\n}) {\n const popoverRef = useRef();\n const hiddenTransitionProps = useHiddenTransition({ visible });\n const popoverProps = removeUndefinedProperties({\n containerprops: containerProps,\n content,\n ref: popoverRef,\n ...otherProps,\n ...hiddenTransitionProps,\n });\n\n useOnClickOutside(popoverRef, onClickOutside);\n\n const wrapStyle = omit(style, 'zIndex') || {};\n return (\n destroyOnHidden &&\n !hiddenTransitionProps.destroyed && (\n <DSPortal>\n <div {...popperProps} style={{ ...style, ...popperProps.style }}>\n {isFunction(renderer) ? renderer(popoverProps) : <PopoverComponent {...popoverProps} style={wrapStyle} />}\n </div>\n </DSPortal>\n )\n );\n}\n\nexport default Popover;\n"],
|
|
5
|
+
"mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,YAAY;AAClB,MAAM,mBAAmB,kBAAkB,OAAO;AAElD,iBAAiB;AAAA,EACf;AAAA,EACA,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,cAAc;AAAA,EACd,UAAU;AAAA,EACV,UAAU;AAAA,EACV,iBAAiB,MAAM;AAAA,EACvB;AAAA,KACG;AAAA,GACF;AACD,QAAM,aAAa;AACnB,QAAM,wBAAwB,oBAAoB,EAAE;AACpD,QAAM,eAAe,0BAA0B;AAAA,IAC7C,gBAAgB;AAAA,IAChB;AAAA,IACA,KAAK;AAAA,OACF;AAAA,OACA;AAAA;AAGL,oBAAkB,YAAY;AAE9B,QAAM,YAAY,KAAK,OAAO,aAAa;AAC3C,SACE,mBACA,CAAC,sBAAsB,aACrB,qCAAC,UAAD,MACE,qCAAC,OAAD;AAAA,OAAS;AAAA,IAAa,OAAO,KAAK,UAAU,YAAY;AAAA,KACrD,WAAW,YAAY,SAAS,gBAAgB,qCAAC,kBAAD;AAAA,OAAsB;AAAA,IAAc,OAAO;AAAA;AAAA;AAOtG,IAAO,kBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/PopoverTrigger.js
CHANGED
|
@@ -1,34 +1,19 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import 'core-js/modules/esnext.iterator.filter.js';
|
|
4
|
-
import 'core-js/modules/esnext.async-iterator.for-each.js';
|
|
5
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
7
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
-
import 'react';
|
|
9
|
-
import { jsx } from 'react/jsx-runtime';
|
|
10
|
-
|
|
11
|
-
const _excluded = ["as"];
|
|
12
|
-
|
|
13
|
-
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; }
|
|
14
|
-
|
|
15
|
-
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";
|
|
16
3
|
const Interaction = {
|
|
17
|
-
CLICK:
|
|
18
|
-
HOVER:
|
|
4
|
+
CLICK: "click",
|
|
5
|
+
HOVER: "hover"
|
|
19
6
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
onHide = noop
|
|
31
|
-
} = _ref;
|
|
7
|
+
const noop = () => {
|
|
8
|
+
};
|
|
9
|
+
function useHiddenTrigger({
|
|
10
|
+
hiddenId,
|
|
11
|
+
visible = false,
|
|
12
|
+
interaction = "click",
|
|
13
|
+
onToggle = noop,
|
|
14
|
+
onShow = noop,
|
|
15
|
+
onHide = noop
|
|
16
|
+
}) {
|
|
32
17
|
const handlers = {
|
|
33
18
|
[Interaction.CLICK]: {
|
|
34
19
|
onClick: onToggle
|
|
@@ -38,21 +23,21 @@ function useHiddenTrigger(_ref) {
|
|
|
38
23
|
onMouseLeave: onHide
|
|
39
24
|
}
|
|
40
25
|
};
|
|
41
|
-
return
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
26
|
+
return {
|
|
27
|
+
"aria-expanded": visible,
|
|
28
|
+
...handlers[interaction],
|
|
29
|
+
"aria-controls": hiddenId
|
|
30
|
+
};
|
|
46
31
|
}
|
|
47
|
-
|
|
48
|
-
function PopoverTrigger(_ref2) {
|
|
49
|
-
let {
|
|
50
|
-
as: Component
|
|
51
|
-
} = _ref2,
|
|
52
|
-
props = _objectWithoutProperties(_ref2, _excluded);
|
|
53
|
-
|
|
32
|
+
function PopoverTrigger({ as: Component, ...props }) {
|
|
54
33
|
const hiddenTriggerProps = useHiddenTrigger(props);
|
|
55
|
-
return
|
|
34
|
+
return /* @__PURE__ */ React2.createElement(Component, {
|
|
35
|
+
...hiddenTriggerProps
|
|
36
|
+
});
|
|
56
37
|
}
|
|
57
|
-
|
|
58
|
-
export {
|
|
38
|
+
var PopoverTrigger_default = PopoverTrigger;
|
|
39
|
+
export {
|
|
40
|
+
Interaction,
|
|
41
|
+
PopoverTrigger_default as default
|
|
42
|
+
};
|
|
43
|
+
//# 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,OACd,SAAS;AAAA,IACZ,iBAAiB;AAAA;AAAA;AAIrB,wBAAwB,EAAE,IAAI,cAAc,SAAS;AACnD,QAAM,qBAAqB,iBAAiB;AAE5C,SAAO,qCAAC,WAAD;AAAA,OAAe;AAAA;AAAA;AAGxB,IAAO,yBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/esm/index.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
export * from
|
|
3
|
-
|
|
4
|
-
export {
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export * from "./DSPopover";
|
|
3
|
+
import { default as default2 } from "./DSPopover";
|
|
4
|
+
export {
|
|
5
|
+
default2 as default
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
package/esm/index.js.map
ADDED
|
@@ -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
|
+
}
|
package/esm/usePopover.js
CHANGED
|
@@ -1,34 +1,16 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
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; }
|
|
13
|
-
|
|
14
|
-
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; }
|
|
15
|
-
|
|
16
|
-
function usePopover(_ref) {
|
|
17
|
-
let otherProps = Object.assign({}, _ref);
|
|
18
|
-
|
|
19
|
-
const _usePopper = usePopper(otherProps),
|
|
20
|
-
{
|
|
21
|
-
reference,
|
|
22
|
-
popper,
|
|
23
|
-
arrow
|
|
24
|
-
} = _usePopper,
|
|
25
|
-
popperProps = _objectWithoutProperties(_usePopper, _excluded);
|
|
26
|
-
|
|
27
|
-
return _objectSpread({
|
|
28
|
-
triggerProps: _objectSpread({}, reference),
|
|
29
|
-
popoverProps: _objectSpread({}, popper),
|
|
30
|
-
arrowProps: _objectSpread({}, arrow)
|
|
31
|
-
}, popperProps);
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import usePopper from "./usePopper";
|
|
3
|
+
function usePopover({ ...otherProps }) {
|
|
4
|
+
const { reference, popper, arrow, ...popperProps } = usePopper(otherProps);
|
|
5
|
+
return {
|
|
6
|
+
triggerProps: { ...reference },
|
|
7
|
+
popoverProps: { ...popper },
|
|
8
|
+
arrowProps: { ...arrow },
|
|
9
|
+
...popperProps
|
|
10
|
+
};
|
|
32
11
|
}
|
|
33
|
-
|
|
34
|
-
export {
|
|
12
|
+
var usePopover_default = usePopover;
|
|
13
|
+
export {
|
|
14
|
+
usePopover_default as default
|
|
15
|
+
};
|
|
16
|
+
//# 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,KAAK,cAAc;AACrC,QAAM,EAAE,WAAW,QAAQ,UAAU,gBAAgB,UAAU;AAE/D,SAAO;AAAA,IACL,cAAc,KAAK;AAAA,IACnB,cAAc,KAAK;AAAA,IACnB,YAAY,KAAK;AAAA,OACd;AAAA;AAAA;AAIP,IAAO,qBAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,62 +1,46 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
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; }
|
|
15
|
-
|
|
16
|
-
function usePopoverProviderState(_ref) {
|
|
17
|
-
let {
|
|
18
|
-
initialState = {
|
|
19
|
-
reference: null,
|
|
20
|
-
visible: false,
|
|
21
|
-
value: '',
|
|
22
|
-
options: {}
|
|
23
|
-
},
|
|
24
|
-
delay
|
|
25
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useState, useEffect, useRef } from "react";
|
|
3
|
+
import { throttle } from "lodash";
|
|
4
|
+
import { useExecutionTimer } from "@elliemae/ds-utilities";
|
|
5
|
+
function usePopoverProviderState({
|
|
6
|
+
initialState = {
|
|
7
|
+
reference: null,
|
|
8
|
+
visible: false,
|
|
9
|
+
value: "",
|
|
10
|
+
options: {}
|
|
11
|
+
},
|
|
12
|
+
delay
|
|
13
|
+
}) {
|
|
26
14
|
const triggerRef = useRef();
|
|
27
15
|
const [tooltipState, setTooltipState] = useState(initialState);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
16
|
+
const show = (state) => {
|
|
17
|
+
setTooltipState((prevState) => ({
|
|
18
|
+
...prevState,
|
|
19
|
+
...state,
|
|
31
20
|
visible: true
|
|
32
21
|
}));
|
|
33
22
|
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
23
|
+
const hide = (state) => {
|
|
24
|
+
setTooltipState((prevState) => ({
|
|
25
|
+
...prevState,
|
|
26
|
+
...state,
|
|
37
27
|
visible: false
|
|
38
28
|
}));
|
|
39
29
|
};
|
|
40
|
-
|
|
41
30
|
const [showTooltip, hideTooltip] = useExecutionTimer(show, hide, delay);
|
|
42
|
-
|
|
43
31
|
const handleShowTooltip = (state, e) => {
|
|
44
32
|
triggerRef.current = e.target;
|
|
45
|
-
showTooltip(
|
|
46
|
-
reference: e.target
|
|
47
|
-
}));
|
|
33
|
+
showTooltip({ ...state, reference: e.target });
|
|
48
34
|
};
|
|
49
|
-
|
|
50
|
-
const handleHideTooltip = state => {
|
|
35
|
+
const handleHideTooltip = (state) => {
|
|
51
36
|
hideTooltip(state);
|
|
52
37
|
};
|
|
53
|
-
|
|
54
38
|
useEffect(() => {
|
|
55
|
-
window.addEventListener(
|
|
56
|
-
window.addEventListener(
|
|
39
|
+
window.addEventListener("scroll", throttle(handleHideTooltip, 300), true);
|
|
40
|
+
window.addEventListener("click", handleHideTooltip, true);
|
|
57
41
|
return () => {
|
|
58
|
-
window.removeEventListener(
|
|
59
|
-
window.addEventListener(
|
|
42
|
+
window.removeEventListener("scroll", throttle(handleHideTooltip, 300), true);
|
|
43
|
+
window.addEventListener("click", handleHideTooltip, true);
|
|
60
44
|
};
|
|
61
45
|
}, [tooltipState.reference]);
|
|
62
46
|
return {
|
|
@@ -65,5 +49,8 @@ function usePopoverProviderState(_ref) {
|
|
|
65
49
|
state: tooltipState
|
|
66
50
|
};
|
|
67
51
|
}
|
|
68
|
-
|
|
69
|
-
export {
|
|
52
|
+
var usePopoverProviderState_default = usePopoverProviderState;
|
|
53
|
+
export {
|
|
54
|
+
usePopoverProviderState_default as default
|
|
55
|
+
};
|
|
56
|
+
//# 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;AAAA,SAC3B;AAAA,SACA;AAAA,MACH,SAAS;AAAA;AAAA;AAGb,QAAM,OAAO,CAAC,UAAU;AACtB,oBAAgB,CAAC,cAAe;AAAA,SAC3B;AAAA,SACA;AAAA,MACH,SAAS;AAAA;AAAA;AAIb,QAAM,CAAC,aAAa,eAAe,kBAAkB,MAAM,MAAM;AAEjE,QAAM,oBAAoB,CAAC,OAAO,MAAM;AACtC,eAAW,UAAU,EAAE;AACvB,gBAAY,KAAK,OAAO,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
|
+
}
|
package/esm/usePopper.js
CHANGED
|
@@ -1,50 +1,31 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import 'core-js/modules/esnext.iterator.for-each.js';
|
|
6
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
8
|
-
import Popper from 'popper.js';
|
|
9
|
-
import { useState, useRef, useEffect } from 'react';
|
|
10
|
-
|
|
11
|
-
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; }
|
|
12
|
-
|
|
13
|
-
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; }
|
|
14
|
-
|
|
15
|
-
function calculateOffset(_ref) {
|
|
16
|
-
let {
|
|
17
|
-
offset,
|
|
18
|
-
showArrow
|
|
19
|
-
} = _ref;
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import Popper from "popper.js";
|
|
3
|
+
import { useEffect, useRef, useState } from "react";
|
|
4
|
+
function calculateOffset({ offset, showArrow }) {
|
|
20
5
|
const arrowSize = 10;
|
|
21
6
|
const defaultPadding = 3;
|
|
22
7
|
return {
|
|
23
8
|
enabled: showArrow || offset,
|
|
24
|
-
offset: Array.isArray(offset) ?
|
|
9
|
+
offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
|
|
25
10
|
};
|
|
26
11
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
} = _ref2;
|
|
40
|
-
const [popperData, setPopperData] = useState({}); // this is util for deferred rendering like with portals
|
|
41
|
-
|
|
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({});
|
|
42
24
|
const [dynamicPopperNode, setPopperNode] = useState(null);
|
|
43
25
|
const referenceRef = useRef();
|
|
44
26
|
const popperRef = useRef();
|
|
45
27
|
const arrowRef = useRef();
|
|
46
|
-
const popper = useRef();
|
|
47
|
-
|
|
28
|
+
const popper = useRef();
|
|
48
29
|
useEffect(() => {
|
|
49
30
|
const referenceEl = refEl || referenceRef.current;
|
|
50
31
|
const popperEl = dynamicPopperNode || popperRef.current;
|
|
@@ -54,40 +35,48 @@ function usePopper(_ref2) {
|
|
|
54
35
|
isOpen,
|
|
55
36
|
eventsEnabled,
|
|
56
37
|
positionFixed,
|
|
57
|
-
modifiers:
|
|
58
|
-
preventOverflow:
|
|
38
|
+
modifiers: {
|
|
39
|
+
preventOverflow: {
|
|
59
40
|
padding: 0,
|
|
60
|
-
boundariesElement: boundaries
|
|
61
|
-
|
|
41
|
+
boundariesElement: boundaries,
|
|
42
|
+
...modifiers.preventOverflow
|
|
43
|
+
},
|
|
62
44
|
offset: calculateOffset({
|
|
63
45
|
offset,
|
|
64
46
|
showArrow
|
|
65
|
-
})
|
|
66
|
-
|
|
47
|
+
}),
|
|
48
|
+
...modifiers,
|
|
67
49
|
arrow: {
|
|
68
50
|
enabled: !!arrowEl,
|
|
69
51
|
element: arrowEl
|
|
70
52
|
},
|
|
71
|
-
applyStyle: {
|
|
72
|
-
enabled: false
|
|
73
|
-
},
|
|
53
|
+
applyStyle: { enabled: false },
|
|
74
54
|
updateStateModifier: {
|
|
75
55
|
order: 900,
|
|
76
56
|
enabled: true,
|
|
77
|
-
fn: data => {
|
|
57
|
+
fn: (data) => {
|
|
78
58
|
setPopperData(data);
|
|
79
59
|
return data;
|
|
80
60
|
}
|
|
81
61
|
}
|
|
82
|
-
}
|
|
62
|
+
}
|
|
83
63
|
});
|
|
84
64
|
return () => {
|
|
85
|
-
if (popper.current)
|
|
65
|
+
if (popper.current)
|
|
66
|
+
popper.current.destroy();
|
|
86
67
|
};
|
|
87
|
-
}, [
|
|
88
|
-
|
|
68
|
+
}, [
|
|
69
|
+
refEl,
|
|
70
|
+
dynamicPopperNode,
|
|
71
|
+
placement,
|
|
72
|
+
showArrow,
|
|
73
|
+
offset,
|
|
74
|
+
popperRef,
|
|
75
|
+
eventsEnabled
|
|
76
|
+
]);
|
|
89
77
|
useEffect(() => {
|
|
90
|
-
if (!popper.current)
|
|
78
|
+
if (!popper.current)
|
|
79
|
+
return;
|
|
91
80
|
popper.current.update();
|
|
92
81
|
}, [popper.current]);
|
|
93
82
|
const arrow = {
|
|
@@ -98,7 +87,7 @@ function usePopper(_ref2) {
|
|
|
98
87
|
style: popperData.styles,
|
|
99
88
|
ref: setPopperNode,
|
|
100
89
|
placement: popperData.placement,
|
|
101
|
-
|
|
90
|
+
"data-testid": "popover-container"
|
|
102
91
|
};
|
|
103
92
|
const reference = {
|
|
104
93
|
ref: referenceRef
|
|
@@ -108,9 +97,10 @@ function usePopper(_ref2) {
|
|
|
108
97
|
popper: popperProps,
|
|
109
98
|
arrow,
|
|
110
99
|
reference,
|
|
111
|
-
// setPopperNode,
|
|
112
100
|
popperData
|
|
113
101
|
};
|
|
114
102
|
}
|
|
115
|
-
|
|
116
|
-
|
|
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
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-popover",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.0-alpha.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Popover",
|
|
6
6
|
"module": "./esm/index.js",
|
|
@@ -60,11 +60,11 @@
|
|
|
60
60
|
"build": "node ../../scripts/build/build.js"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@elliemae/ds-classnames": "2.
|
|
64
|
-
"@elliemae/ds-hidden": "2.
|
|
65
|
-
"@elliemae/ds-popper": "2.
|
|
66
|
-
"@elliemae/ds-portal": "2.
|
|
67
|
-
"@elliemae/ds-utilities": "2.
|
|
63
|
+
"@elliemae/ds-classnames": "2.3.0-alpha.2",
|
|
64
|
+
"@elliemae/ds-hidden": "2.3.0-alpha.2",
|
|
65
|
+
"@elliemae/ds-popper": "2.3.0-alpha.2",
|
|
66
|
+
"@elliemae/ds-portal": "2.3.0-alpha.2",
|
|
67
|
+
"@elliemae/ds-utilities": "2.3.0-alpha.2",
|
|
68
68
|
"popper.js": "~1.16.1",
|
|
69
69
|
"react-desc": "~4.1.3"
|
|
70
70
|
},
|
package/types/DSPopover.d.ts
CHANGED
|
@@ -142,24 +142,7 @@ declare const DSPopover: {
|
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
144
|
declare const PopoverWithSchema: {
|
|
145
|
-
(props?:
|
|
146
|
-
containerProps: any;
|
|
147
|
-
content: any;
|
|
148
|
-
renderer: any;
|
|
149
|
-
visible: any;
|
|
150
|
-
offset: any;
|
|
151
|
-
showArrow: any;
|
|
152
|
-
placement: any;
|
|
153
|
-
boundaries: any;
|
|
154
|
-
modifiers: any;
|
|
155
|
-
referenceEl: any;
|
|
156
|
-
renderTrigger: any;
|
|
157
|
-
onClickOutside: any;
|
|
158
|
-
destroyOnHidden: any;
|
|
159
|
-
interactionType: any;
|
|
160
|
-
isOpen: any;
|
|
161
|
-
style: any;
|
|
162
|
-
} | undefined): JSX.Element;
|
|
145
|
+
(props?: unknown): JSX.Element;
|
|
163
146
|
propTypes: unknown;
|
|
164
147
|
toTypescript: () => import("react-desc").TypescriptSchema;
|
|
165
148
|
};
|