@elliemae/ds-popover 2.2.0-next.3 → 2.3.0-alpha.1

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/usePopper.js CHANGED
@@ -1,100 +1,113 @@
1
- 'use strict';
2
-
3
- var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
- require('core-js/modules/web.dom-collections.iterator.js');
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 Popper = require('popper.js');
11
- var react = require('react');
12
-
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
- var Popper__default = /*#__PURE__*/_interopDefaultLegacy(Popper);
17
-
18
- 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; }
19
-
20
- 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; }
21
-
22
- function calculateOffset(_ref) {
23
- let {
24
- offset,
25
- showArrow
26
- } = _ref;
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __reExport = (target, module2, copyDefault, desc) => {
13
+ if (module2 && typeof module2 === "object" || typeof module2 === "function") {
14
+ for (let key of __getOwnPropNames(module2))
15
+ if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
16
+ __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
17
+ }
18
+ return target;
19
+ };
20
+ var __toESM = (module2, isNodeMode) => {
21
+ return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
22
+ };
23
+ var __toCommonJS = /* @__PURE__ */ ((cache) => {
24
+ return (module2, temp) => {
25
+ return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
26
+ };
27
+ })(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
28
+ var usePopper_exports = {};
29
+ __export(usePopper_exports, {
30
+ default: () => usePopper
31
+ });
32
+ var React = __toESM(require("react"));
33
+ var import_popper = __toESM(require("popper.js"));
34
+ var import_react = require("react");
35
+ function calculateOffset({ offset, showArrow }) {
27
36
  const arrowSize = 10;
28
37
  const defaultPadding = 3;
29
38
  return {
30
39
  enabled: showArrow || offset,
31
- offset: Array.isArray(offset) ? "".concat(offset[0], ", ").concat((offset[1] || offset[0]) + arrowSize + defaultPadding) : "0, ".concat(arrowSize + defaultPadding)
40
+ offset: Array.isArray(offset) ? `${offset[0]}, ${(offset[1] || offset[0]) + arrowSize + defaultPadding}` : `0, ${arrowSize + defaultPadding}`
32
41
  };
33
42
  }
34
-
35
- function usePopper(_ref2) {
36
- let {
37
- offset,
38
- showArrow,
39
- placement,
40
- isOpen,
41
- modifiers,
42
- eventsEnabled = true,
43
- positionFixed,
44
- boundaries = 'scrollParent',
45
- referenceEl: refEl
46
- } = _ref2;
47
- const [popperData, setPopperData] = react.useState({}); // this is util for deferred rendering like with portals
48
-
49
- const [dynamicPopperNode, setPopperNode] = react.useState(null);
50
- const referenceRef = react.useRef();
51
- const popperRef = react.useRef();
52
- const arrowRef = react.useRef();
53
- const popper = react.useRef(); // initialize popper with refs and options
54
-
55
- react.useEffect(() => {
43
+ function usePopper({
44
+ offset,
45
+ showArrow,
46
+ placement,
47
+ isOpen,
48
+ modifiers,
49
+ eventsEnabled = true,
50
+ positionFixed,
51
+ boundaries = "scrollParent",
52
+ referenceEl: refEl
53
+ }) {
54
+ const [popperData, setPopperData] = (0, import_react.useState)({});
55
+ const [dynamicPopperNode, setPopperNode] = (0, import_react.useState)(null);
56
+ const referenceRef = (0, import_react.useRef)();
57
+ const popperRef = (0, import_react.useRef)();
58
+ const arrowRef = (0, import_react.useRef)();
59
+ const popper = (0, import_react.useRef)();
60
+ (0, import_react.useEffect)(() => {
56
61
  const referenceEl = refEl || referenceRef.current;
57
62
  const popperEl = dynamicPopperNode || popperRef.current;
58
63
  const arrowEl = arrowRef.current;
59
- popper.current = referenceEl && popperEl && new Popper__default["default"](referenceEl, popperEl, {
64
+ popper.current = referenceEl && popperEl && new import_popper.default(referenceEl, popperEl, {
60
65
  placement,
61
66
  isOpen,
62
67
  eventsEnabled,
63
68
  positionFixed,
64
- modifiers: _objectSpread(_objectSpread({
65
- preventOverflow: _objectSpread({
69
+ modifiers: {
70
+ preventOverflow: {
66
71
  padding: 0,
67
- boundariesElement: boundaries
68
- }, modifiers.preventOverflow),
72
+ boundariesElement: boundaries,
73
+ ...modifiers.preventOverflow
74
+ },
69
75
  offset: calculateOffset({
70
76
  offset,
71
77
  showArrow
72
- })
73
- }, modifiers), {}, {
78
+ }),
79
+ ...modifiers,
74
80
  arrow: {
75
81
  enabled: !!arrowEl,
76
82
  element: arrowEl
77
83
  },
78
- applyStyle: {
79
- enabled: false
80
- },
84
+ applyStyle: { enabled: false },
81
85
  updateStateModifier: {
82
86
  order: 900,
83
87
  enabled: true,
84
- fn: data => {
88
+ fn: (data) => {
85
89
  setPopperData(data);
86
90
  return data;
87
91
  }
88
92
  }
89
- })
93
+ }
90
94
  });
91
95
  return () => {
92
- if (popper.current) popper.current.destroy();
96
+ if (popper.current)
97
+ popper.current.destroy();
93
98
  };
94
- }, [refEl, dynamicPopperNode, placement, showArrow, offset, popperRef, eventsEnabled]); // update popper instance after initialization
95
-
96
- react.useEffect(() => {
97
- if (!popper.current) return;
99
+ }, [
100
+ refEl,
101
+ dynamicPopperNode,
102
+ placement,
103
+ showArrow,
104
+ offset,
105
+ popperRef,
106
+ eventsEnabled
107
+ ]);
108
+ (0, import_react.useEffect)(() => {
109
+ if (!popper.current)
110
+ return;
98
111
  popper.current.update();
99
112
  }, [popper.current]);
100
113
  const arrow = {
@@ -105,7 +118,7 @@ function usePopper(_ref2) {
105
118
  style: popperData.styles,
106
119
  ref: setPopperNode,
107
120
  placement: popperData.placement,
108
- 'data-testid': 'popover-container'
121
+ "data-testid": "popover-container"
109
122
  };
110
123
  const reference = {
111
124
  ref: referenceRef
@@ -115,9 +128,8 @@ function usePopper(_ref2) {
115
128
  popper: popperProps,
116
129
  arrow,
117
130
  reference,
118
- // setPopperNode,
119
131
  popperData
120
132
  };
121
133
  }
122
-
123
- module.exports = usePopper;
134
+ module.exports = __toCommonJS(usePopper_exports);
135
+ //# sourceMappingURL=usePopper.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../src/usePopper.tsx", "../../../../scripts/build/transpile/react-shim.js"],
4
+ "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAmB;AACnB,mBAA4C;AAE5C,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,2BAAS;AAE7C,QAAM,CAAC,mBAAmB,iBAAiB,2BAAS;AACpD,QAAM,eAAe;AACrB,QAAM,YAAY;AAClB,QAAM,WAAW;AACjB,QAAM,SAAS;AAGf,8BAAU,MAAM;AACd,UAAM,cAAc,SAAS,aAAa;AAC1C,UAAM,WAAW,qBAAqB,UAAU;AAChD,UAAM,UAAU,SAAS;AAEzB,WAAO,UACL,eACA,YACA,IAAI,sBAAO,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,8BAAU,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/esm/Arrow.js CHANGED
@@ -1,55 +1,33 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
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 _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
9
- import { forwardRef } from 'react';
10
- import { aggregatedClasses } from '@elliemae/ds-classnames';
11
- import { getArrowStylesBySize } from '@elliemae/ds-popper';
12
- import { jsx } from 'react/jsx-runtime';
13
-
14
- var _svg;
15
-
16
- const _excluded = ["style", "className", "innerRef", "blockName", "placement"];
17
-
18
- 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; }
19
-
20
- 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; }
21
- const ArrowWrapper = aggregatedClasses('span')('popover', 'arrow');
22
-
23
- function Arrow(_ref) {
24
- let {
25
- style,
1
+ import * as React from "react";
2
+ import React2, { forwardRef } from "react";
3
+ import { aggregatedClasses } from "@elliemae/ds-classnames";
4
+ import { getArrowStylesBySize } from "@elliemae/ds-popper";
5
+ const ArrowWrapper = aggregatedClasses("span")("popover", "arrow");
6
+ function Arrow({ style, className, innerRef, blockName = "popover", placement, ...otherProps }) {
7
+ return /* @__PURE__ */ React2.createElement(ArrowWrapper, {
26
8
  className,
9
+ "data-placement": placement,
10
+ ...otherProps,
27
11
  innerRef,
28
- blockName = 'popover',
29
- placement
30
- } = _ref,
31
- otherProps = _objectWithoutProperties(_ref, _excluded);
32
-
33
- return /*#__PURE__*/jsx(ArrowWrapper, _objectSpread(_objectSpread({
34
- className: className,
35
- "data-placement": placement
36
- }, otherProps), {}, {
37
- innerRef: innerRef,
38
- style: _objectSpread(_objectSpread({}, style), getArrowStylesBySize(placement, 25)),
39
- children: _svg || (_svg = /*#__PURE__*/_jsx("svg", {
40
- viewBox: "0 0 30 30"
41
- }, void 0, /*#__PURE__*/_jsx("path", {
42
- className: "stroke",
43
- 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"
44
- }), /*#__PURE__*/_jsx("path", {
45
- className: "fill",
46
- 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"
47
- })))
48
- }));
12
+ style: {
13
+ ...style,
14
+ ...getArrowStylesBySize(placement, 25)
15
+ }
16
+ }, /* @__PURE__ */ React2.createElement("svg", {
17
+ viewBox: "0 0 30 30"
18
+ }, /* @__PURE__ */ React2.createElement("path", {
19
+ className: "stroke",
20
+ 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\n C26.7,29,24.6,28.1,23.7,27.1z"
21
+ }), /* @__PURE__ */ React2.createElement("path", {
22
+ className: "fill",
23
+ 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"
24
+ })));
49
25
  }
50
-
51
- var Arrow$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/jsx(Arrow, _objectSpread(_objectSpread({}, props), {}, {
26
+ var Arrow_default = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(Arrow, {
27
+ ...props,
52
28
  innerRef: ref || props.innerRef
53
- })));
54
-
55
- export { Arrow$1 as default };
29
+ }));
30
+ export {
31
+ Arrow_default as default
32
+ };
33
+ //# sourceMappingURL=Arrow.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/Arrow.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { forwardRef } from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { getArrowStylesBySize } from '@elliemae/ds-popper';\n\nconst ArrowWrapper = aggregatedClasses('span')('popover', 'arrow');\nfunction Arrow({ style, className, innerRef, blockName = 'popover', placement, ...otherProps }) {\n return (\n <ArrowWrapper\n className={className}\n data-placement={placement}\n {...otherProps}\n innerRef={innerRef}\n style={{\n ...style,\n ...getArrowStylesBySize(placement, 25),\n }}\n >\n <svg viewBox=\"0 0 30 30\">\n <path\n className=\"stroke\"\n 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\n C26.7,29,24.6,28.1,23.7,27.1z\"\n />\n <path\n className=\"fill\"\n 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\"\n />\n </svg>\n </ArrowWrapper>\n );\n}\n\nexport default forwardRef((props, ref) => <Arrow {...props} innerRef={ref || props.innerRef} />);\n"],
5
+ "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,eAAe,kBAAkB,QAAQ,WAAW;AAC1D,eAAe,EAAE,OAAO,WAAW,UAAU,YAAY,WAAW,cAAc,cAAc;AAC9F,SACE,qCAAC,cAAD;AAAA,IACE;AAAA,IACA,kBAAgB;AAAA,OACZ;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,SACF;AAAA,SACA,qBAAqB,WAAW;AAAA;AAAA,KAGrC,qCAAC,OAAD;AAAA,IAAK,SAAQ;AAAA,KACX,qCAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAE;AAAA,MAGJ,qCAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,GAAE;AAAA;AAAA;AAOZ,IAAO,gBAAQ,WAAW,CAAC,OAAO,QAAQ,qCAAC,OAAD;AAAA,KAAW;AAAA,EAAO,UAAU,OAAO,MAAM;AAAA;",
6
+ "names": []
7
+ }
package/esm/DSPopover.js CHANGED
@@ -1,67 +1,37 @@
1
- import 'core-js/modules/esnext.async-iterator.filter.js';
2
- import 'core-js/modules/esnext.iterator.constructor.js';
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 _jsx from '@babel/runtime/helpers/esm/jsx';
7
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
8
- import 'core-js/modules/web.dom-collections.iterator.js';
9
- import 'react';
10
- import { PropTypes, describe } from 'react-desc';
11
- import { useHoverHandlersDelay } from '@elliemae/ds-utilities';
12
- import { useHiddenController } from '@elliemae/ds-hidden';
13
- import Popover from './Popover.js';
14
- import usePopper from './usePopper.js';
15
- export { default as usePopper } from './usePopper.js';
16
- import Arrow from './Arrow.js';
17
- export { default as usePopoverProviderState } from './usePopoverProviderState.js';
18
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
19
- export * from '@elliemae/ds-popper';
20
-
21
- 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; }
22
-
23
- 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";
3
+ import { PropTypes, describe } from "react-desc";
4
+ import { useHoverHandlersDelay } from "@elliemae/ds-utilities";
5
+ import { useHiddenController } from "@elliemae/ds-hidden";
6
+ import Popover from "./Popover";
7
+ import usePopper from "./usePopper";
8
+ import Arrow from "./Arrow";
9
+ import usePopoverProviderState from "./usePopoverProviderState";
10
+ export * from "@elliemae/ds-popper";
24
11
  const Interaction = {
25
- CLICK: 'click',
26
- HOVER: 'hover'
12
+ CLICK: "click",
13
+ HOVER: "hover"
27
14
  };
28
- /* Unstable Popover, not yet fully working */
29
-
30
- const DSPopover = _ref => {
31
- let {
32
- containerProps,
33
- content,
34
- // react component inside the popover to render its content
35
- renderer,
36
- // function to render the popover component, ex: (popoverProps) => (<div {...popoverProps}></div>)
37
- visible: visibleProp,
38
- offset,
39
- showArrow,
40
- // popper props options
41
- placement,
42
- boundaries,
43
- // scrollParent | window | viewport
44
- modifiers,
45
- referenceEl,
46
- renderTrigger,
47
- onClickOutside,
48
- destroyOnHidden,
49
- interactionType,
50
- isOpen,
51
- style
52
- } = _ref;
53
- const {
54
- visible,
55
- onShow,
56
- onHide,
57
- onToggle
58
- } = useHiddenController(visibleProp);
59
- const {
60
- reference,
61
- popper,
62
- arrow,
63
- popperData
64
- } = usePopper({
15
+ const DSPopover = ({
16
+ containerProps,
17
+ content,
18
+ renderer,
19
+ visible: visibleProp,
20
+ offset,
21
+ showArrow,
22
+ placement,
23
+ boundaries,
24
+ modifiers,
25
+ referenceEl,
26
+ renderTrigger,
27
+ onClickOutside,
28
+ destroyOnHidden,
29
+ interactionType,
30
+ isOpen,
31
+ style
32
+ }) => {
33
+ const { visible, onShow, onHide, onToggle } = useHiddenController(visibleProp);
34
+ const { reference, popper, arrow, popperData } = usePopper({
65
35
  placement,
66
36
  showArrow,
67
37
  boundaries,
@@ -76,73 +46,81 @@ const DSPopover = _ref => {
76
46
  onMouseLeave: onHide
77
47
  });
78
48
  const isPopoverVisible = visible || isOpen;
79
- return /*#__PURE__*/jsxs(Fragment, {
80
- children: [renderTrigger(_objectSpread(_objectSpread({}, reference), {}, {
81
- handlers: interactionType === 'click' ? {
82
- onClick: onToggle
83
- } : hoverHandlers,
49
+ return /* @__PURE__ */ React2.createElement(React2.Fragment, null, renderTrigger({
50
+ ...reference,
51
+ handlers: interactionType === "click" ? { onClick: onToggle } : hoverHandlers,
52
+ onShow,
53
+ onToggle,
54
+ onHide,
55
+ "aria-haspopup": true,
56
+ "aria-expanded": visible
57
+ }), isPopoverVisible && reference.ref && /* @__PURE__ */ React2.createElement(Popover, {
58
+ containerProps,
59
+ destroyOnHidden,
60
+ interactionType,
61
+ isOpen,
62
+ onClickOutside: (...args) => {
63
+ onClickOutside(...args);
64
+ if (interactionType === "click")
65
+ onHide();
66
+ },
67
+ popperProps: popper,
68
+ renderer: renderer && ((props) => renderer({
69
+ ...props,
84
70
  onShow,
85
71
  onToggle,
86
- onHide,
87
- 'aria-haspopup': true,
88
- 'aria-expanded': visible
89
- })), isPopoverVisible && reference.ref && /*#__PURE__*/_jsx(Popover, {
90
- containerProps: containerProps,
91
- destroyOnHidden: destroyOnHidden,
92
- interactionType: interactionType,
93
- isOpen: isOpen,
94
- onClickOutside: function () {
95
- onClickOutside(...arguments);
96
- if (interactionType === 'click') onHide();
97
- },
98
- popperProps: popper,
99
- renderer: renderer && (props => renderer(_objectSpread(_objectSpread({}, props), {}, {
100
- onShow,
101
- onToggle,
102
- onHide
103
- }))),
104
- style: style,
105
- visible: isPopoverVisible
106
- }, void 0, showArrow && /*#__PURE__*/jsx(Arrow, _objectSpread(_objectSpread({}, arrow), {}, {
107
- placement: popperData.placement
108
- })), isPopoverVisible && content)]
109
- });
72
+ onHide
73
+ })),
74
+ style,
75
+ visible: isPopoverVisible
76
+ }, showArrow && /* @__PURE__ */ React2.createElement(Arrow, {
77
+ ...arrow,
78
+ placement: popperData.placement
79
+ }), isPopoverVisible && content));
110
80
  };
111
-
112
81
  DSPopover.defaultProps = {
113
82
  containerProps: {},
114
- renderer: undefined,
115
- visible: undefined,
116
- offset: undefined,
83
+ renderer: void 0,
84
+ visible: void 0,
85
+ offset: void 0,
117
86
  showArrow: false,
118
- placement: 'top',
87
+ placement: "top",
119
88
  modifiers: {},
120
89
  renderTrigger: () => null,
121
90
  onClickOutside: () => null,
122
91
  destroyOnHidden: true,
123
- isOpen: undefined
92
+ isOpen: void 0
124
93
  };
125
94
  const popoverProps = {
126
- containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),
127
- destroyOnHidden: PropTypes.bool.description('destroy popover on hidden or not').defaultValue(true),
128
- renderer: PropTypes.func.description('custom renderer'),
129
- popperProps: PropTypes.object.description('Popper props attached to container'),
130
- visible: PropTypes.bool.description('is visible or not').defaultValue(false),
131
- content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('popover content'),
132
- onClickOutside: PropTypes.func.description('function called on click outside'),
133
- interaction: PropTypes.string.description('interaction type: hover, click'),
134
- offset: PropTypes.object.description('offset'),
135
- showArrow: PropTypes.bool.description('show tooltip arrow or not'),
136
- placement: PropTypes.string.description('popover placement: top, bottom, right, left'),
137
- boundaries: PropTypes.string.description('popover boundaries'),
138
- modifiers: PropTypes.object.description('modifiers'),
139
- style: PropTypes.object.description('css style object'),
140
- referenceEl: PropTypes.element.description('reference element'),
141
- renderTrigger: PropTypes.func.description('render trigger element'),
142
- interactionType: PropTypes.string.description('interaction type'),
143
- isOpen: PropTypes.bool.description('open or not').defaultValue(false)
95
+ containerProps: PropTypes.shape({}).description("Set of Properties attached to the main container"),
96
+ destroyOnHidden: PropTypes.bool.description("destroy popover on hidden or not").defaultValue(true),
97
+ renderer: PropTypes.func.description("custom renderer"),
98
+ popperProps: PropTypes.object.description("Popper props attached to container"),
99
+ visible: PropTypes.bool.description("is visible or not").defaultValue(false),
100
+ content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description("popover content"),
101
+ onClickOutside: PropTypes.func.description("function called on click outside"),
102
+ interaction: PropTypes.string.description("interaction type: hover, click"),
103
+ offset: PropTypes.object.description("offset"),
104
+ showArrow: PropTypes.bool.description("show tooltip arrow or not"),
105
+ placement: PropTypes.string.description("popover placement: top, bottom, right, left"),
106
+ boundaries: PropTypes.string.description("popover boundaries"),
107
+ modifiers: PropTypes.object.description("modifiers"),
108
+ style: PropTypes.object.description("css style object"),
109
+ referenceEl: PropTypes.element.description("reference element"),
110
+ renderTrigger: PropTypes.func.description("render trigger element"),
111
+ interactionType: PropTypes.string.description("interaction type"),
112
+ isOpen: PropTypes.bool.description("open or not").defaultValue(false)
144
113
  };
114
+ DSPopover.propTypes = popoverProps;
145
115
  const PopoverWithSchema = describe(DSPopover);
146
116
  PopoverWithSchema.propTypes = popoverProps;
147
-
148
- export { DSPopover, Interaction, PopoverWithSchema, DSPopover as default };
117
+ var DSPopover_default = DSPopover;
118
+ export {
119
+ DSPopover,
120
+ Interaction,
121
+ PopoverWithSchema,
122
+ DSPopover_default as default,
123
+ usePopoverProviderState,
124
+ usePopper
125
+ };
126
+ //# sourceMappingURL=DSPopover.js.map
@@ -0,0 +1,7 @@
1
+ {
2
+ "version": 3,
3
+ "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSPopover.tsx"],
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React from 'react';\nimport { PropTypes, describe } from 'react-desc';\nimport { useHoverHandlersDelay } from '@elliemae/ds-utilities';\nimport { useHiddenController } from '@elliemae/ds-hidden';\nimport Popover from './Popover';\nimport usePopper from './usePopper';\nimport Arrow from './Arrow';\nimport usePopoverProviderState from './usePopoverProviderState';\n\nexport * from '@elliemae/ds-popper';\nexport const Interaction = {\n CLICK: 'click',\n HOVER: 'hover',\n};\n\n/* Unstable Popover, not yet fully working */\nconst DSPopover = ({\n containerProps,\n content, // react component inside the popover to render its content\n renderer, // function to render the popover component, ex: (popoverProps) => (<div {...popoverProps}></div>)\n visible: visibleProp,\n offset,\n showArrow,\n // popper props options\n placement,\n boundaries, // scrollParent | window | viewport\n modifiers,\n referenceEl,\n renderTrigger,\n onClickOutside,\n destroyOnHidden,\n interactionType,\n isOpen,\n style,\n}) => {\n const { visible, onShow, onHide, onToggle } = useHiddenController(visibleProp);\n\n const { reference, popper, arrow, popperData } = usePopper({\n placement,\n showArrow,\n boundaries,\n modifiers,\n offset,\n referenceEl,\n eventsEnabled: visible,\n isOpen,\n });\n\n const hoverHandlers = useHoverHandlersDelay({\n onMouseOver: onShow,\n onMouseLeave: onHide,\n });\n const isPopoverVisible = visible || isOpen;\n return (\n <>\n {renderTrigger({\n ...reference,\n handlers: interactionType === 'click' ? { onClick: onToggle } : hoverHandlers,\n onShow,\n onToggle,\n onHide,\n 'aria-haspopup': true,\n 'aria-expanded': visible,\n })}\n {isPopoverVisible && reference.ref && (\n <Popover\n containerProps={containerProps}\n destroyOnHidden={destroyOnHidden}\n interactionType={interactionType}\n isOpen={isOpen}\n onClickOutside={(...args) => {\n onClickOutside(...args);\n if (interactionType === 'click') onHide();\n }}\n popperProps={popper}\n renderer={\n renderer &&\n ((props) =>\n renderer({\n ...props,\n onShow,\n onToggle,\n onHide,\n }))\n }\n style={style}\n visible={isPopoverVisible}\n >\n {showArrow && <Arrow {...arrow} placement={popperData.placement} />}\n {isPopoverVisible && content}\n </Popover>\n )}\n </>\n );\n};\n\nDSPopover.defaultProps = {\n containerProps: {},\n renderer: undefined,\n visible: undefined,\n offset: undefined,\n showArrow: false,\n placement: 'top',\n modifiers: {},\n renderTrigger: () => null,\n onClickOutside: () => null,\n destroyOnHidden: true,\n isOpen: undefined,\n};\n\nconst popoverProps = {\n containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n destroyOnHidden: PropTypes.bool.description('destroy popover on hidden or not').defaultValue(true),\n renderer: PropTypes.func.description('custom renderer'),\n popperProps: PropTypes.object.description('Popper props attached to container'),\n visible: PropTypes.bool.description('is visible or not').defaultValue(false),\n content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description('popover content'),\n onClickOutside: PropTypes.func.description('function called on click outside'),\n interaction: PropTypes.string.description('interaction type: hover, click'),\n offset: PropTypes.object.description('offset'),\n showArrow: PropTypes.bool.description('show tooltip arrow or not'),\n placement: PropTypes.string.description('popover placement: top, bottom, right, left'),\n boundaries: PropTypes.string.description('popover boundaries'),\n modifiers: PropTypes.object.description('modifiers'),\n style: PropTypes.object.description('css style object'),\n referenceEl: PropTypes.element.description('reference element'),\n renderTrigger: PropTypes.func.description('render trigger element'),\n interactionType: PropTypes.string.description('interaction type'),\n isOpen: PropTypes.bool.description('open or not').defaultValue(false),\n};\n\nDSPopover.propTypes = popoverProps;\n\nconst PopoverWithSchema = describe(DSPopover);\nPopoverWithSchema.propTypes = popoverProps;\n\nexport { DSPopover, usePopper, usePopoverProviderState, PopoverWithSchema };\n\nexport default DSPopover;\n"],
5
+ "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACO,MAAM,cAAc;AAAA,EACzB,OAAO;AAAA,EACP,OAAO;AAAA;AAIT,MAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,SAAS,QAAQ,QAAQ,aAAa,oBAAoB;AAElE,QAAM,EAAE,WAAW,QAAQ,OAAO,eAAe,UAAU;AAAA,IACzD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA;AAGF,QAAM,gBAAgB,sBAAsB;AAAA,IAC1C,aAAa;AAAA,IACb,cAAc;AAAA;AAEhB,QAAM,mBAAmB,WAAW;AACpC,SACE,4DACG,cAAc;AAAA,OACV;AAAA,IACH,UAAU,oBAAoB,UAAU,EAAE,SAAS,aAAa;AAAA,IAChE;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,MAElB,oBAAoB,UAAU,OAC7B,qCAAC,SAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB,IAAI,SAAS;AAC3B,qBAAe,GAAG;AAClB,UAAI,oBAAoB;AAAS;AAAA;AAAA,IAEnC,aAAa;AAAA,IACb,UACE,YACC,EAAC,UACA,SAAS;AAAA,SACJ;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAGN;AAAA,IACA,SAAS;AAAA,KAER,aAAa,qCAAC,OAAD;AAAA,OAAW;AAAA,IAAO,WAAW,WAAW;AAAA,MACrD,oBAAoB;AAAA;AAO/B,UAAU,eAAe;AAAA,EACvB,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,WAAW;AAAA,EACX,WAAW;AAAA,EACX,eAAe,MAAM;AAAA,EACrB,gBAAgB,MAAM;AAAA,EACtB,iBAAiB;AAAA,EACjB,QAAQ;AAAA;AAGV,MAAM,eAAe;AAAA,EACnB,gBAAgB,UAAU,MAAM,IAAI,YAAY;AAAA,EAChD,iBAAiB,UAAU,KAAK,YAAY,oCAAoC,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY;AAAA,EACrC,aAAa,UAAU,OAAO,YAAY;AAAA,EAC1C,SAAS,UAAU,KAAK,YAAY,qBAAqB,aAAa;AAAA,EACtE,SAAS,UAAU,UAAU,CAAC,UAAU,SAAS,UAAU,SAAS,YAAY;AAAA,EAChF,gBAAgB,UAAU,KAAK,YAAY;AAAA,EAC3C,aAAa,UAAU,OAAO,YAAY;AAAA,EAC1C,QAAQ,UAAU,OAAO,YAAY;AAAA,EACrC,WAAW,UAAU,KAAK,YAAY;AAAA,EACtC,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,YAAY,UAAU,OAAO,YAAY;AAAA,EACzC,WAAW,UAAU,OAAO,YAAY;AAAA,EACxC,OAAO,UAAU,OAAO,YAAY;AAAA,EACpC,aAAa,UAAU,QAAQ,YAAY;AAAA,EAC3C,eAAe,UAAU,KAAK,YAAY;AAAA,EAC1C,iBAAiB,UAAU,OAAO,YAAY;AAAA,EAC9C,QAAQ,UAAU,KAAK,YAAY,eAAe,aAAa;AAAA;AAGjE,UAAU,YAAY;AAEtB,MAAM,oBAAoB,SAAS;AACnC,kBAAkB,YAAY;AAI9B,IAAO,oBAAQ;",
6
+ "names": []
7
+ }