@elliemae/ds-popover 2.3.0-next.0 → 3.0.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/cjs/Arrow.js +62 -0
  2. package/dist/cjs/Arrow.js.map +7 -0
  3. package/dist/cjs/DSPopover.js +155 -0
  4. package/dist/cjs/DSPopover.js.map +7 -0
  5. package/dist/cjs/Popover.js +73 -0
  6. package/dist/cjs/Popover.js.map +7 -0
  7. package/dist/cjs/PopoverTrigger.js +72 -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 +45 -0
  12. package/dist/cjs/usePopover.js.map +7 -0
  13. package/dist/cjs/usePopoverProviderState.js +85 -0
  14. package/dist/cjs/usePopoverProviderState.js.map +7 -0
  15. package/dist/cjs/usePopper.js +135 -0
  16. package/dist/cjs/usePopper.js.map +7 -0
  17. package/dist/esm/Arrow.js +33 -0
  18. package/dist/esm/Arrow.js.map +7 -0
  19. package/dist/esm/DSPopover.js +126 -0
  20. package/dist/esm/DSPopover.js.map +7 -0
  21. package/dist/esm/Popover.js +44 -0
  22. package/dist/esm/Popover.js.map +7 -0
  23. package/dist/esm/PopoverTrigger.js +43 -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 +16 -0
  28. package/dist/esm/usePopover.js.map +7 -0
  29. package/dist/esm/usePopoverProviderState.js +56 -0
  30. package/dist/esm/usePopoverProviderState.js.map +7 -0
  31. package/dist/esm/usePopper.js +106 -0
  32. package/dist/esm/usePopper.js.map +7 -0
  33. package/{types → dist/types}/Arrow.d.ts +0 -0
  34. package/{types → dist/types}/DSPopover.d.ts +0 -0
  35. package/{types → dist/types}/Popover.d.ts +0 -0
  36. package/{types → dist/types}/PopoverTrigger.d.ts +0 -0
  37. package/{types → dist/types}/index.d.ts +0 -0
  38. package/{types → dist/types}/usePopover.d.ts +0 -0
  39. package/{types → dist/types}/usePopoverProviderState.d.ts +0 -0
  40. package/{types → dist/types}/usePopper.d.ts +0 -0
  41. package/package.json +42 -34
  42. package/cjs/Arrow.js +0 -63
  43. package/cjs/DSPopover.js +0 -167
  44. package/cjs/Popover.js +0 -66
  45. package/cjs/PopoverTrigger.js +0 -68
  46. package/cjs/index.js +0 -23
  47. package/cjs/usePopover.js +0 -41
  48. package/cjs/usePopoverProviderState.js +0 -75
  49. package/cjs/usePopper.js +0 -123
  50. package/esm/Arrow.js +0 -55
  51. package/esm/DSPopover.js +0 -148
  52. package/esm/Popover.js +0 -57
  53. package/esm/PopoverTrigger.js +0 -58
  54. package/esm/index.js +0 -4
  55. package/esm/usePopover.js +0 -34
  56. package/esm/usePopoverProviderState.js +0 -69
  57. package/esm/usePopper.js +0 -116
@@ -0,0 +1,106 @@
1
+ import * as React from "react";
2
+ import Popper from "popper.js";
3
+ import { useEffect, useRef, useState } from "react";
4
+ function calculateOffset({ offset, showArrow }) {
5
+ const arrowSize = 10;
6
+ const defaultPadding = 3;
7
+ return {
8
+ enabled: showArrow || offset,
9
+ offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
10
+ };
11
+ }
12
+ function usePopper({
13
+ offset,
14
+ showArrow,
15
+ placement,
16
+ isOpen,
17
+ modifiers,
18
+ eventsEnabled = true,
19
+ positionFixed,
20
+ boundaries = "scrollParent",
21
+ referenceEl: refEl
22
+ }) {
23
+ const [popperData, setPopperData] = useState({});
24
+ const [dynamicPopperNode, setPopperNode] = useState(null);
25
+ const referenceRef = useRef();
26
+ const popperRef = useRef();
27
+ const arrowRef = useRef();
28
+ const popper = useRef();
29
+ useEffect(() => {
30
+ const referenceEl = refEl || referenceRef.current;
31
+ const popperEl = dynamicPopperNode || popperRef.current;
32
+ const arrowEl = arrowRef.current;
33
+ popper.current = referenceEl && popperEl && new Popper(referenceEl, popperEl, {
34
+ placement,
35
+ isOpen,
36
+ eventsEnabled,
37
+ positionFixed,
38
+ modifiers: {
39
+ preventOverflow: {
40
+ padding: 0,
41
+ boundariesElement: boundaries,
42
+ ...modifiers.preventOverflow
43
+ },
44
+ offset: calculateOffset({
45
+ offset,
46
+ showArrow
47
+ }),
48
+ ...modifiers,
49
+ arrow: {
50
+ enabled: !!arrowEl,
51
+ element: arrowEl
52
+ },
53
+ applyStyle: { enabled: false },
54
+ updateStateModifier: {
55
+ order: 900,
56
+ enabled: true,
57
+ fn: (data) => {
58
+ setPopperData(data);
59
+ return data;
60
+ }
61
+ }
62
+ }
63
+ });
64
+ return () => {
65
+ if (popper.current)
66
+ popper.current.destroy();
67
+ };
68
+ }, [
69
+ refEl,
70
+ dynamicPopperNode,
71
+ placement,
72
+ showArrow,
73
+ offset,
74
+ popperRef,
75
+ eventsEnabled
76
+ ]);
77
+ useEffect(() => {
78
+ if (!popper.current)
79
+ return;
80
+ popper.current.update();
81
+ }, [popper.current]);
82
+ const arrow = {
83
+ ref: arrowRef,
84
+ style: popperData.arrowStyles
85
+ };
86
+ const popperProps = {
87
+ style: popperData.styles,
88
+ ref: setPopperNode,
89
+ placement: popperData.placement,
90
+ "data-testid": "popover-container"
91
+ };
92
+ const reference = {
93
+ ref: referenceRef
94
+ };
95
+ return {
96
+ popperInstance: popper.current,
97
+ popper: popperProps,
98
+ arrow,
99
+ reference,
100
+ popperData
101
+ };
102
+ }
103
+ export {
104
+ usePopper as default
105
+ };
106
+ //# sourceMappingURL=usePopper.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/usePopper.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import Popper from 'popper.js';\nimport { useEffect, useRef, useState } from 'react';\n\nfunction calculateOffset({ offset, showArrow }) {\n const arrowSize = 10;\n const defaultPadding = 3;\n return {\n enabled: showArrow || offset,\n offset: Array.isArray(offset)\n ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}`\n : `0, ${arrowSize + defaultPadding}`,\n };\n}\n\nexport default function usePopper({\n offset,\n showArrow,\n placement,\n isOpen,\n modifiers,\n eventsEnabled = true,\n positionFixed,\n boundaries = 'scrollParent',\n referenceEl: refEl,\n}) {\n const [popperData, setPopperData] = useState({});\n // this is util for deferred rendering like with portals\n const [dynamicPopperNode, setPopperNode] = useState(null);\n const referenceRef = useRef();\n const popperRef = useRef();\n const arrowRef = useRef();\n const popper = useRef();\n\n // initialize popper with refs and options\n useEffect(() => {\n const referenceEl = refEl || referenceRef.current;\n const popperEl = dynamicPopperNode || popperRef.current;\n const arrowEl = arrowRef.current;\n\n popper.current =\n referenceEl &&\n popperEl &&\n new Popper(referenceEl, popperEl, {\n placement,\n isOpen,\n eventsEnabled,\n positionFixed,\n modifiers: {\n preventOverflow: {\n padding: 0,\n boundariesElement: boundaries,\n ...modifiers.preventOverflow,\n },\n offset: calculateOffset({\n offset,\n showArrow,\n }),\n ...modifiers,\n arrow: {\n enabled: !!arrowEl,\n element: arrowEl,\n },\n applyStyle: { enabled: false },\n updateStateModifier: {\n order: 900,\n enabled: true,\n fn: (data) => {\n setPopperData(data);\n return data;\n },\n },\n },\n });\n\n return () => {\n if (popper.current) popper.current.destroy();\n };\n }, [\n refEl,\n dynamicPopperNode,\n placement,\n showArrow,\n offset,\n popperRef,\n eventsEnabled,\n ]);\n\n // update popper instance after initialization\n useEffect(() => {\n if (!popper.current) return;\n popper.current.update();\n }, [popper.current]);\n\n const arrow = {\n ref: arrowRef,\n style: popperData.arrowStyles,\n };\n const popperProps = {\n style: popperData.styles,\n ref: setPopperNode,\n placement: popperData.placement,\n 'data-testid': 'popover-container',\n };\n const reference = {\n ref: referenceRef,\n };\n return {\n popperInstance: popper.current,\n popper: popperProps,\n arrow,\n reference,\n // setPopperNode,\n popperData,\n };\n}\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AAEA,yBAAyB,EAAE,QAAQ,aAAa;AAC9C,QAAM,YAAY;AAClB,QAAM,iBAAiB;AACvB,SAAO;AAAA,IACL,SAAS,aAAa;AAAA,IACtB,QAAQ,MAAM,QAAQ,UAClB,GAAG,OAAO,OAAQ,QAAO,MAAM,OAAO,MAAM,YAAY,mBACxD,MAAM,YAAY;AAAA;AAAA;AAIX,mBAAmB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,GACZ;AACD,QAAM,CAAC,YAAY,iBAAiB,SAAS;AAE7C,QAAM,CAAC,mBAAmB,iBAAiB,SAAS;AACpD,QAAM,eAAe;AACrB,QAAM,YAAY;AAClB,QAAM,WAAW;AACjB,QAAM,SAAS;AAGf,YAAU,MAAM;AACd,UAAM,cAAc,SAAS,aAAa;AAC1C,UAAM,WAAW,qBAAqB,UAAU;AAChD,UAAM,UAAU,SAAS;AAEzB,WAAO,UACL,eACA,YACA,IAAI,OAAO,aAAa,UAAU;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,SAAS;AAAA,UACT,mBAAmB;AAAA,aAChB,UAAU;AAAA;AAAA,QAEf,QAAQ,gBAAgB;AAAA,UACtB;AAAA,UACA;AAAA;AAAA,WAEC;AAAA,QACH,OAAO;AAAA,UACL,SAAS,CAAC,CAAC;AAAA,UACX,SAAS;AAAA;AAAA,QAEX,YAAY,EAAE,SAAS;AAAA,QACvB,qBAAqB;AAAA,UACnB,OAAO;AAAA,UACP,SAAS;AAAA,UACT,IAAI,CAAC,SAAS;AACZ,0BAAc;AACd,mBAAO;AAAA;AAAA;AAAA;AAAA;AAMjB,WAAO,MAAM;AACX,UAAI,OAAO;AAAS,eAAO,QAAQ;AAAA;AAAA,KAEpC;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAIF,YAAU,MAAM;AACd,QAAI,CAAC,OAAO;AAAS;AACrB,WAAO,QAAQ;AAAA,KACd,CAAC,OAAO;AAEX,QAAM,QAAQ;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,WAAW;AAAA;AAEpB,QAAM,cAAc;AAAA,IAClB,OAAO,WAAW;AAAA,IAClB,KAAK;AAAA,IACL,WAAW,WAAW;AAAA,IACtB,eAAe;AAAA;AAEjB,QAAM,YAAY;AAAA,IAChB,KAAK;AAAA;AAEP,SAAO;AAAA,IACL,gBAAgB,OAAO;AAAA,IACvB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IAEA;AAAA;AAAA;",
6
+ "names": []
7
+ }
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
package/package.json CHANGED
@@ -1,43 +1,46 @@
1
1
  {
2
2
  "name": "@elliemae/ds-popover",
3
- "version": "2.3.0-next.0",
3
+ "version": "3.0.0-alpha.0",
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": "2.3.0-next.0",
64
- "@elliemae/ds-hidden": "2.3.0-next.0",
65
- "@elliemae/ds-popper": "2.3.0-next.0",
66
- "@elliemae/ds-portal": "2.3.0-next.0",
67
- "@elliemae/ds-utilities": "2.3.0-next.0",
66
+ "@elliemae/ds-classnames": "3.0.0-alpha.0",
67
+ "@elliemae/ds-hidden": "3.0.0-alpha.0",
68
+ "@elliemae/ds-popper": "3.0.0-alpha.0",
69
+ "@elliemae/ds-portal": "3.0.0-alpha.0",
70
+ "@elliemae/ds-utilities": "3.0.0-alpha.0",
68
71
  "popper.js": "~1.16.1",
69
72
  "react-desc": "~4.1.3"
70
73
  },
@@ -75,7 +78,12 @@
75
78
  },
76
79
  "publishConfig": {
77
80
  "access": "public",
78
- "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
+ "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
80
88
  }
81
89
  }
package/cjs/Arrow.js DELETED
@@ -1,63 +0,0 @@
1
- 'use strict';
2
-
3
- require('core-js/modules/esnext.async-iterator.filter.js');
4
- require('core-js/modules/esnext.iterator.constructor.js');
5
- require('core-js/modules/esnext.iterator.filter.js');
6
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
- require('core-js/modules/esnext.iterator.for-each.js');
8
- var _jsx = require('@babel/runtime/helpers/jsx');
9
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
10
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
11
- var react = require('react');
12
- var dsClassnames = require('@elliemae/ds-classnames');
13
- var dsPopper = require('@elliemae/ds-popper');
14
- var jsxRuntime = require('react/jsx-runtime');
15
-
16
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
-
18
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
19
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
20
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
21
-
22
- var _svg;
23
-
24
- const _excluded = ["style", "className", "innerRef", "blockName", "placement"];
25
-
26
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
27
-
28
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
29
- const ArrowWrapper = dsClassnames.aggregatedClasses('span')('popover', 'arrow');
30
-
31
- function Arrow(_ref) {
32
- let {
33
- style,
34
- className,
35
- innerRef,
36
- blockName = 'popover',
37
- placement
38
- } = _ref,
39
- otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
40
-
41
- return /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, _objectSpread(_objectSpread({
42
- className: className,
43
- "data-placement": placement
44
- }, otherProps), {}, {
45
- innerRef: innerRef,
46
- style: _objectSpread(_objectSpread({}, style), dsPopper.getArrowStylesBySize(placement, 25)),
47
- children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
48
- viewBox: "0 0 30 30"
49
- }, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
50
- className: "stroke",
51
- d: "M23.7,27.1L17,19.9C16.5,19.3,15.8,19,15,19s-1.6,0.3-2.1,0.9l-6.6,7.2C5.3,28.1,3.4,29,2,29h26 C26.7,29,24.6,28.1,23.7,27.1z"
52
- }), /*#__PURE__*/_jsx__default["default"]("path", {
53
- className: "fill",
54
- d: "M23,27.8c1.1,1.2,3.4,2.2,5,2.2h2H0h2c1.7,0,3.9-1,5-2.2l6.6-7.2c0.7-0.8,2-0.8,2.7,0L23,27.8L23,27.8z"
55
- })))
56
- }));
57
- }
58
-
59
- var Arrow$1 = /*#__PURE__*/react.forwardRef((props, ref) => /*#__PURE__*/jsxRuntime.jsx(Arrow, _objectSpread(_objectSpread({}, props), {}, {
60
- innerRef: ref || props.innerRef
61
- })));
62
-
63
- module.exports = Arrow$1;
package/cjs/DSPopover.js DELETED
@@ -1,167 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _jsx = require('@babel/runtime/helpers/jsx');
6
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
- require('core-js/modules/web.dom-collections.iterator.js');
8
- require('core-js/modules/esnext.async-iterator.filter.js');
9
- require('core-js/modules/esnext.iterator.constructor.js');
10
- require('core-js/modules/esnext.iterator.filter.js');
11
- require('core-js/modules/esnext.async-iterator.for-each.js');
12
- require('core-js/modules/esnext.iterator.for-each.js');
13
- require('react');
14
- var reactDesc = require('react-desc');
15
- var dsUtilities = require('@elliemae/ds-utilities');
16
- var dsHidden = require('@elliemae/ds-hidden');
17
- var Popover = require('./Popover.js');
18
- var usePopper = require('./usePopper.js');
19
- var Arrow = require('./Arrow.js');
20
- var usePopoverProviderState = require('./usePopoverProviderState.js');
21
- var jsxRuntime = require('react/jsx-runtime');
22
- var dsPopper = require('@elliemae/ds-popper');
23
-
24
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
25
-
26
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
27
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
28
-
29
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
30
-
31
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
32
- const Interaction = {
33
- CLICK: 'click',
34
- HOVER: 'hover'
35
- };
36
- /* Unstable Popover, not yet fully working */
37
-
38
- const DSPopover = _ref => {
39
- let {
40
- containerProps,
41
- content,
42
- // react component inside the popover to render its content
43
- renderer,
44
- // function to render the popover component, ex: (popoverProps) => (<div {...popoverProps}></div>)
45
- visible: visibleProp,
46
- offset,
47
- showArrow,
48
- // popper props options
49
- placement,
50
- boundaries,
51
- // scrollParent | window | viewport
52
- modifiers,
53
- referenceEl,
54
- renderTrigger,
55
- onClickOutside,
56
- destroyOnHidden,
57
- interactionType,
58
- isOpen,
59
- style
60
- } = _ref;
61
- const {
62
- visible,
63
- onShow,
64
- onHide,
65
- onToggle
66
- } = dsHidden.useHiddenController(visibleProp);
67
- const {
68
- reference,
69
- popper,
70
- arrow,
71
- popperData
72
- } = usePopper({
73
- placement,
74
- showArrow,
75
- boundaries,
76
- modifiers,
77
- offset,
78
- referenceEl,
79
- eventsEnabled: visible,
80
- isOpen
81
- });
82
- const hoverHandlers = dsUtilities.useHoverHandlersDelay({
83
- onMouseOver: onShow,
84
- onMouseLeave: onHide
85
- });
86
- const isPopoverVisible = visible || isOpen;
87
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
88
- children: [renderTrigger(_objectSpread(_objectSpread({}, reference), {}, {
89
- handlers: interactionType === 'click' ? {
90
- onClick: onToggle
91
- } : hoverHandlers,
92
- onShow,
93
- onToggle,
94
- onHide,
95
- 'aria-haspopup': true,
96
- 'aria-expanded': visible
97
- })), isPopoverVisible && reference.ref && /*#__PURE__*/_jsx__default["default"](Popover, {
98
- containerProps: containerProps,
99
- destroyOnHidden: destroyOnHidden,
100
- interactionType: interactionType,
101
- isOpen: isOpen,
102
- onClickOutside: function () {
103
- onClickOutside(...arguments);
104
- if (interactionType === 'click') onHide();
105
- },
106
- popperProps: popper,
107
- renderer: renderer && (props => renderer(_objectSpread(_objectSpread({}, props), {}, {
108
- onShow,
109
- onToggle,
110
- onHide
111
- }))),
112
- style: style,
113
- visible: isPopoverVisible
114
- }, void 0, showArrow && /*#__PURE__*/jsxRuntime.jsx(Arrow, _objectSpread(_objectSpread({}, arrow), {}, {
115
- placement: popperData.placement
116
- })), isPopoverVisible && content)]
117
- });
118
- };
119
-
120
- DSPopover.defaultProps = {
121
- containerProps: {},
122
- renderer: undefined,
123
- visible: undefined,
124
- offset: undefined,
125
- showArrow: false,
126
- placement: 'top',
127
- modifiers: {},
128
- renderTrigger: () => null,
129
- onClickOutside: () => null,
130
- destroyOnHidden: true,
131
- isOpen: undefined
132
- };
133
- const popoverProps = {
134
- containerProps: reactDesc.PropTypes.shape({}).description('Set of Properties attached to the main container'),
135
- destroyOnHidden: reactDesc.PropTypes.bool.description('destroy popover on hidden or not').defaultValue(true),
136
- renderer: reactDesc.PropTypes.func.description('custom renderer'),
137
- popperProps: reactDesc.PropTypes.object.description('Popper props attached to container'),
138
- visible: reactDesc.PropTypes.bool.description('is visible or not').defaultValue(false),
139
- content: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.string]).description('popover content'),
140
- onClickOutside: reactDesc.PropTypes.func.description('function called on click outside'),
141
- interaction: reactDesc.PropTypes.string.description('interaction type: hover, click'),
142
- offset: reactDesc.PropTypes.object.description('offset'),
143
- showArrow: reactDesc.PropTypes.bool.description('show tooltip arrow or not'),
144
- placement: reactDesc.PropTypes.string.description('popover placement: top, bottom, right, left'),
145
- boundaries: reactDesc.PropTypes.string.description('popover boundaries'),
146
- modifiers: reactDesc.PropTypes.object.description('modifiers'),
147
- style: reactDesc.PropTypes.object.description('css style object'),
148
- referenceEl: reactDesc.PropTypes.element.description('reference element'),
149
- renderTrigger: reactDesc.PropTypes.func.description('render trigger element'),
150
- interactionType: reactDesc.PropTypes.string.description('interaction type'),
151
- isOpen: reactDesc.PropTypes.bool.description('open or not').defaultValue(false)
152
- };
153
- const PopoverWithSchema = reactDesc.describe(DSPopover);
154
- PopoverWithSchema.propTypes = popoverProps;
155
-
156
- exports.usePopper = usePopper;
157
- exports.usePopoverProviderState = usePopoverProviderState;
158
- exports.DSPopover = DSPopover;
159
- exports.Interaction = Interaction;
160
- exports.PopoverWithSchema = PopoverWithSchema;
161
- exports["default"] = DSPopover;
162
- Object.keys(dsPopper).forEach(function (k) {
163
- if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
164
- enumerable: true,
165
- get: function () { return dsPopper[k]; }
166
- });
167
- });
package/cjs/Popover.js DELETED
@@ -1,66 +0,0 @@
1
- 'use strict';
2
-
3
- require('core-js/modules/esnext.async-iterator.filter.js');
4
- require('core-js/modules/esnext.iterator.constructor.js');
5
- require('core-js/modules/esnext.iterator.filter.js');
6
- require('core-js/modules/esnext.async-iterator.for-each.js');
7
- require('core-js/modules/esnext.iterator.for-each.js');
8
- var _jsx = require('@babel/runtime/helpers/jsx');
9
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
10
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
11
- var react = require('react');
12
- var lodash = require('lodash');
13
- var dsClassnames = require('@elliemae/ds-classnames');
14
- var dsUtilities = require('@elliemae/ds-utilities');
15
- var dsHidden = require('@elliemae/ds-hidden');
16
- var DSPortal = require('@elliemae/ds-portal');
17
- var jsxRuntime = require('react/jsx-runtime');
18
-
19
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
20
-
21
- var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
22
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
23
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
24
- var DSPortal__default = /*#__PURE__*/_interopDefaultLegacy(DSPortal);
25
-
26
- const _excluded = ["containerProps", "destroyOnHidden", "renderer", "popperProps", "visible", "content", "onClickOutside", "style"];
27
-
28
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
-
30
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
31
- const blockName = 'popover';
32
- const PopoverComponent = dsClassnames.aggregatedClasses('div')(blockName);
33
-
34
- function Popover(_ref) {
35
- let {
36
- containerProps,
37
- destroyOnHidden = true,
38
- renderer = undefined,
39
- popperProps = {},
40
- visible = false,
41
- content = undefined,
42
- onClickOutside = () => null,
43
- style
44
- } = _ref,
45
- otherProps = _objectWithoutProperties__default["default"](_ref, _excluded);
46
-
47
- const popoverRef = react.useRef();
48
- const hiddenTransitionProps = dsHidden.useHiddenTransition({
49
- visible
50
- });
51
- const popoverProps = dsUtilities.removeUndefinedProperties(_objectSpread(_objectSpread({
52
- containerprops: containerProps,
53
- content,
54
- ref: popoverRef
55
- }, otherProps), hiddenTransitionProps));
56
- dsUtilities.useOnClickOutside(popoverRef, onClickOutside);
57
- const wrapStyle = lodash.omit(style, 'zIndex') || {};
58
- return destroyOnHidden && !hiddenTransitionProps.destroyed && /*#__PURE__*/_jsx__default["default"](DSPortal__default["default"], {}, void 0, /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, popperProps), {}, {
59
- style: _objectSpread(_objectSpread({}, style), popperProps.style),
60
- children: dsUtilities.isFunction(renderer) ? renderer(popoverProps) : /*#__PURE__*/jsxRuntime.jsx(PopoverComponent, _objectSpread(_objectSpread({}, popoverProps), {}, {
61
- style: wrapStyle
62
- }))
63
- })));
64
- }
65
-
66
- module.exports = Popover;
@@ -1,68 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- require('core-js/modules/esnext.async-iterator.filter.js');
6
- require('core-js/modules/esnext.iterator.constructor.js');
7
- require('core-js/modules/esnext.iterator.filter.js');
8
- require('core-js/modules/esnext.async-iterator.for-each.js');
9
- require('core-js/modules/esnext.iterator.for-each.js');
10
- var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
11
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
12
- require('react');
13
- var jsxRuntime = require('react/jsx-runtime');
14
-
15
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
18
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
19
-
20
- const _excluded = ["as"];
21
-
22
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
23
-
24
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
25
- const Interaction = {
26
- CLICK: 'click',
27
- HOVER: 'hover'
28
- };
29
-
30
- const noop = () => {};
31
-
32
- function useHiddenTrigger(_ref) {
33
- let {
34
- hiddenId,
35
- visible = false,
36
- interaction = 'click',
37
- onToggle = noop,
38
- onShow = noop,
39
- onHide = noop
40
- } = _ref;
41
- const handlers = {
42
- [Interaction.CLICK]: {
43
- onClick: onToggle
44
- },
45
- [Interaction.HOVER]: {
46
- onMouseEnter: onShow,
47
- onMouseLeave: onHide
48
- }
49
- };
50
- return _objectSpread(_objectSpread({
51
- 'aria-expanded': visible
52
- }, handlers[interaction]), {}, {
53
- 'aria-controls': hiddenId
54
- });
55
- }
56
-
57
- function PopoverTrigger(_ref2) {
58
- let {
59
- as: Component
60
- } = _ref2,
61
- props = _objectWithoutProperties__default["default"](_ref2, _excluded);
62
-
63
- const hiddenTriggerProps = useHiddenTrigger(props);
64
- return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, hiddenTriggerProps));
65
- }
66
-
67
- exports.Interaction = Interaction;
68
- exports["default"] = PopoverTrigger;
package/cjs/index.js DELETED
@@ -1,23 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var DSPopover = require('./DSPopover.js');
6
- var dsPopper = require('@elliemae/ds-popper');
7
- var usePopper = require('./usePopper.js');
8
- var usePopoverProviderState = require('./usePopoverProviderState.js');
9
-
10
-
11
-
12
- exports.DSPopover = DSPopover.DSPopover;
13
- exports.Interaction = DSPopover.Interaction;
14
- exports.PopoverWithSchema = DSPopover.PopoverWithSchema;
15
- exports["default"] = DSPopover.DSPopover;
16
- exports.usePopper = usePopper;
17
- exports.usePopoverProviderState = usePopoverProviderState;
18
- Object.keys(dsPopper).forEach(function (k) {
19
- if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
20
- enumerable: true,
21
- get: function () { return dsPopper[k]; }
22
- });
23
- });