@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.
Files changed (57) hide show
  1. package/dist/cjs/Arrow.js +88 -0
  2. package/dist/cjs/Arrow.js.map +7 -0
  3. package/dist/cjs/DSPopover.js +169 -0
  4. package/dist/cjs/DSPopover.js.map +7 -0
  5. package/dist/cjs/Popover.js +107 -0
  6. package/dist/cjs/Popover.js.map +7 -0
  7. package/dist/cjs/PopoverTrigger.js +100 -0
  8. package/dist/cjs/PopoverTrigger.js.map +7 -0
  9. package/dist/cjs/index.js +36 -0
  10. package/dist/cjs/index.js.map +7 -0
  11. package/dist/cjs/usePopover.js +71 -0
  12. package/dist/cjs/usePopover.js.map +7 -0
  13. package/dist/cjs/usePopoverProviderState.js +98 -0
  14. package/dist/cjs/usePopoverProviderState.js.map +7 -0
  15. package/dist/cjs/usePopper.js +151 -0
  16. package/dist/cjs/usePopper.js.map +7 -0
  17. package/dist/esm/Arrow.js +61 -0
  18. package/dist/esm/Arrow.js.map +7 -0
  19. package/dist/esm/DSPopover.js +142 -0
  20. package/dist/esm/DSPopover.js.map +7 -0
  21. package/dist/esm/Popover.js +80 -0
  22. package/dist/esm/Popover.js.map +7 -0
  23. package/dist/esm/PopoverTrigger.js +73 -0
  24. package/dist/esm/PopoverTrigger.js.map +7 -0
  25. package/dist/esm/index.js +7 -0
  26. package/dist/esm/index.js.map +7 -0
  27. package/dist/esm/usePopover.js +44 -0
  28. package/dist/esm/usePopover.js.map +7 -0
  29. package/dist/esm/usePopoverProviderState.js +71 -0
  30. package/dist/esm/usePopoverProviderState.js.map +7 -0
  31. package/dist/esm/usePopper.js +124 -0
  32. package/dist/esm/usePopper.js.map +7 -0
  33. package/package.json +43 -34
  34. package/cjs/Arrow.js +0 -63
  35. package/cjs/DSPopover.js +0 -167
  36. package/cjs/Popover.js +0 -66
  37. package/cjs/PopoverTrigger.js +0 -68
  38. package/cjs/index.js +0 -23
  39. package/cjs/usePopover.js +0 -41
  40. package/cjs/usePopoverProviderState.js +0 -75
  41. package/cjs/usePopper.js +0 -123
  42. package/esm/Arrow.js +0 -55
  43. package/esm/DSPopover.js +0 -148
  44. package/esm/Popover.js +0 -57
  45. package/esm/PopoverTrigger.js +0 -58
  46. package/esm/index.js +0 -4
  47. package/esm/usePopover.js +0 -34
  48. package/esm/usePopoverProviderState.js +0 -69
  49. package/esm/usePopper.js +0 -116
  50. package/types/Arrow.d.ts +0 -3
  51. package/types/DSPopover.d.ts +0 -167
  52. package/types/Popover.d.ts +0 -13
  53. package/types/PopoverTrigger.d.ts +0 -10
  54. package/types/index.d.ts +0 -2
  55. package/types/usePopover.d.ts +0 -21
  56. package/types/usePopoverProviderState.d.ts +0 -19
  57. 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
+ 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
@@ -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.2",
3
+ "version": "3.0.0-next.3",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Popover",
6
- "module": "./esm/index.js",
7
- "main": "./cjs/index.js",
8
- "types": "./types/index.d.ts",
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
- "npm": ">=7",
53
- "node": ">=14"
55
+ "pnpm": ">=6",
56
+ "node": ">=16"
54
57
  },
55
58
  "author": "ICE MT",
56
- "scripts": {
57
- "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
58
- "prebuild": "exit 0",
59
- "predev": "exit 0",
60
- "build": "node ../../scripts/build/build.js"
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.2",
64
- "@elliemae/ds-hidden": "3.0.0-next.2",
65
- "@elliemae/ds-popper": "3.0.0-next.2",
66
- "@elliemae/ds-portal": "3.0.0-next.2",
67
- "@elliemae/ds-utilities": "3.0.0-next.2",
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
- "directory": "dist",
79
- "generateSubmodules": true
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;