@elliemae/ds-popover 2.2.0-alpha.3 → 2.2.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/Arrow.js +59 -58
- package/cjs/DSPopover.js +138 -126
- package/cjs/Popover.js +62 -69
- package/cjs/PopoverTrigger.js +54 -58
- package/cjs/index.js +22 -35
- package/cjs/usePopover.js +40 -44
- package/cjs/usePopoverProviderState.js +55 -65
- package/cjs/usePopper.js +70 -82
- package/esm/Arrow.js +51 -29
- package/esm/DSPopover.js +117 -95
- package/esm/Popover.js +51 -38
- package/esm/PopoverTrigger.js +44 -29
- package/esm/index.js +4 -7
- package/esm/usePopover.js +33 -15
- package/esm/usePopoverProviderState.js +45 -32
- package/esm/usePopper.js +56 -46
- package/package.json +6 -6
- package/cjs/Arrow.js.map +0 -7
- package/cjs/DSPopover.js.map +0 -7
- package/cjs/Popover.js.map +0 -7
- package/cjs/PopoverTrigger.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/usePopover.js.map +0 -7
- package/cjs/usePopoverProviderState.js.map +0 -7
- package/cjs/usePopper.js.map +0 -7
- package/esm/Arrow.js.map +0 -7
- package/esm/DSPopover.js.map +0 -7
- package/esm/Popover.js.map +0 -7
- package/esm/PopoverTrigger.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/usePopover.js.map +0 -7
- package/esm/usePopoverProviderState.js.map +0 -7
- package/esm/usePopper.js.map +0 -7
package/esm/Arrow.js
CHANGED
|
@@ -1,33 +1,55 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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,
|
|
8
26
|
className,
|
|
9
|
-
"data-placement": placement,
|
|
10
|
-
...otherProps,
|
|
11
27
|
innerRef,
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
+
}));
|
|
25
49
|
}
|
|
26
|
-
|
|
27
|
-
|
|
50
|
+
|
|
51
|
+
var Arrow$1 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/jsx(Arrow, _objectSpread(_objectSpread({}, props), {}, {
|
|
28
52
|
innerRef: ref || props.innerRef
|
|
29
|
-
}));
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
//# sourceMappingURL=Arrow.js.map
|
|
53
|
+
})));
|
|
54
|
+
|
|
55
|
+
export { Arrow$1 as default };
|
package/esm/DSPopover.js
CHANGED
|
@@ -1,37 +1,67 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
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; }
|
|
11
24
|
const Interaction = {
|
|
12
|
-
CLICK:
|
|
13
|
-
HOVER:
|
|
25
|
+
CLICK: 'click',
|
|
26
|
+
HOVER: 'hover'
|
|
14
27
|
};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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({
|
|
35
65
|
placement,
|
|
36
66
|
showArrow,
|
|
37
67
|
boundaries,
|
|
@@ -46,81 +76,73 @@ const DSPopover = ({
|
|
|
46
76
|
onMouseLeave: onHide
|
|
47
77
|
});
|
|
48
78
|
const isPopoverVisible = visible || isOpen;
|
|
49
|
-
return
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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,
|
|
79
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
80
|
+
children: [renderTrigger(_objectSpread(_objectSpread({}, reference), {}, {
|
|
81
|
+
handlers: interactionType === 'click' ? {
|
|
82
|
+
onClick: onToggle
|
|
83
|
+
} : hoverHandlers,
|
|
70
84
|
onShow,
|
|
71
85
|
onToggle,
|
|
72
|
-
onHide
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
+
});
|
|
80
110
|
};
|
|
111
|
+
|
|
81
112
|
DSPopover.defaultProps = {
|
|
82
113
|
containerProps: {},
|
|
83
|
-
renderer:
|
|
84
|
-
visible:
|
|
85
|
-
offset:
|
|
114
|
+
renderer: undefined,
|
|
115
|
+
visible: undefined,
|
|
116
|
+
offset: undefined,
|
|
86
117
|
showArrow: false,
|
|
87
|
-
placement:
|
|
118
|
+
placement: 'top',
|
|
88
119
|
modifiers: {},
|
|
89
120
|
renderTrigger: () => null,
|
|
90
121
|
onClickOutside: () => null,
|
|
91
122
|
destroyOnHidden: true,
|
|
92
|
-
isOpen:
|
|
123
|
+
isOpen: undefined
|
|
93
124
|
};
|
|
94
125
|
const popoverProps = {
|
|
95
|
-
containerProps: PropTypes.shape({}).description(
|
|
96
|
-
destroyOnHidden: PropTypes.bool.description(
|
|
97
|
-
renderer: PropTypes.func.description(
|
|
98
|
-
popperProps: PropTypes.object.description(
|
|
99
|
-
visible: PropTypes.bool.description(
|
|
100
|
-
content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]).description(
|
|
101
|
-
onClickOutside: PropTypes.func.description(
|
|
102
|
-
interaction: PropTypes.string.description(
|
|
103
|
-
offset: PropTypes.object.description(
|
|
104
|
-
showArrow: PropTypes.bool.description(
|
|
105
|
-
placement: PropTypes.string.description(
|
|
106
|
-
boundaries: PropTypes.string.description(
|
|
107
|
-
modifiers: PropTypes.object.description(
|
|
108
|
-
style: PropTypes.object.description(
|
|
109
|
-
referenceEl: PropTypes.element.description(
|
|
110
|
-
renderTrigger: PropTypes.func.description(
|
|
111
|
-
interactionType: PropTypes.string.description(
|
|
112
|
-
isOpen: PropTypes.bool.description(
|
|
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)
|
|
113
144
|
};
|
|
114
|
-
DSPopover.propTypes = popoverProps;
|
|
115
145
|
const PopoverWithSchema = describe(DSPopover);
|
|
116
146
|
PopoverWithSchema.propTypes = popoverProps;
|
|
117
|
-
|
|
118
|
-
export {
|
|
119
|
-
DSPopover,
|
|
120
|
-
Interaction,
|
|
121
|
-
PopoverWithSchema,
|
|
122
|
-
DSPopover_default as default,
|
|
123
|
-
usePopoverProviderState,
|
|
124
|
-
usePopper
|
|
125
|
-
};
|
|
126
|
-
//# sourceMappingURL=DSPopover.js.map
|
|
147
|
+
|
|
148
|
+
export { DSPopover, Interaction, PopoverWithSchema, DSPopover as default };
|
package/esm/Popover.js
CHANGED
|
@@ -1,44 +1,57 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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 { useRef } from 'react';
|
|
10
|
+
import { omit } from 'lodash';
|
|
11
|
+
import { aggregatedClasses } from '@elliemae/ds-classnames';
|
|
12
|
+
import { removeUndefinedProperties, useOnClickOutside, isFunction } from '@elliemae/ds-utilities';
|
|
13
|
+
import { useHiddenTransition } from '@elliemae/ds-hidden';
|
|
14
|
+
import DSPortal from '@elliemae/ds-portal';
|
|
15
|
+
import { jsx } from 'react/jsx-runtime';
|
|
16
|
+
|
|
17
|
+
const _excluded = ["containerProps", "destroyOnHidden", "renderer", "popperProps", "visible", "content", "onClickOutside", "style"];
|
|
18
|
+
|
|
19
|
+
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; }
|
|
20
|
+
|
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
22
|
+
const blockName = 'popover';
|
|
23
|
+
const PopoverComponent = aggregatedClasses('div')(blockName);
|
|
24
|
+
|
|
25
|
+
function Popover(_ref) {
|
|
26
|
+
let {
|
|
27
|
+
containerProps,
|
|
28
|
+
destroyOnHidden = true,
|
|
29
|
+
renderer = undefined,
|
|
30
|
+
popperProps = {},
|
|
31
|
+
visible = false,
|
|
32
|
+
content = undefined,
|
|
33
|
+
onClickOutside = () => null,
|
|
34
|
+
style
|
|
35
|
+
} = _ref,
|
|
36
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
37
|
+
|
|
21
38
|
const popoverRef = useRef();
|
|
22
|
-
const hiddenTransitionProps = useHiddenTransition({
|
|
23
|
-
|
|
39
|
+
const hiddenTransitionProps = useHiddenTransition({
|
|
40
|
+
visible
|
|
41
|
+
});
|
|
42
|
+
const popoverProps = removeUndefinedProperties(_objectSpread(_objectSpread({
|
|
24
43
|
containerprops: containerProps,
|
|
25
44
|
content,
|
|
26
|
-
ref: popoverRef
|
|
27
|
-
|
|
28
|
-
...hiddenTransitionProps
|
|
29
|
-
});
|
|
45
|
+
ref: popoverRef
|
|
46
|
+
}, otherProps), hiddenTransitionProps));
|
|
30
47
|
useOnClickOutside(popoverRef, onClickOutside);
|
|
31
|
-
const wrapStyle = omit(style,
|
|
32
|
-
return destroyOnHidden && !hiddenTransitionProps.destroyed &&
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
style: wrapStyle
|
|
48
|
+
const wrapStyle = omit(style, 'zIndex') || {};
|
|
49
|
+
return destroyOnHidden && !hiddenTransitionProps.destroyed && /*#__PURE__*/_jsx(DSPortal, {}, void 0, /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, popperProps), {}, {
|
|
50
|
+
style: _objectSpread(_objectSpread({}, style), popperProps.style),
|
|
51
|
+
children: isFunction(renderer) ? renderer(popoverProps) : /*#__PURE__*/jsx(PopoverComponent, _objectSpread(_objectSpread({}, popoverProps), {}, {
|
|
52
|
+
style: wrapStyle
|
|
53
|
+
}))
|
|
38
54
|
})));
|
|
39
55
|
}
|
|
40
|
-
|
|
41
|
-
export {
|
|
42
|
-
Popover_default as default
|
|
43
|
-
};
|
|
44
|
-
//# sourceMappingURL=Popover.js.map
|
|
56
|
+
|
|
57
|
+
export { Popover as default };
|
package/esm/PopoverTrigger.js
CHANGED
|
@@ -1,19 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
7
|
+
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
8
|
+
import 'react';
|
|
9
|
+
import { jsx } from 'react/jsx-runtime';
|
|
10
|
+
|
|
11
|
+
const _excluded = ["as"];
|
|
12
|
+
|
|
13
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
+
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
16
|
const Interaction = {
|
|
4
|
-
CLICK:
|
|
5
|
-
HOVER:
|
|
17
|
+
CLICK: 'click',
|
|
18
|
+
HOVER: 'hover'
|
|
6
19
|
};
|
|
7
|
-
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
20
|
+
|
|
21
|
+
const noop = () => {};
|
|
22
|
+
|
|
23
|
+
function useHiddenTrigger(_ref) {
|
|
24
|
+
let {
|
|
25
|
+
hiddenId,
|
|
26
|
+
visible = false,
|
|
27
|
+
interaction = 'click',
|
|
28
|
+
onToggle = noop,
|
|
29
|
+
onShow = noop,
|
|
30
|
+
onHide = noop
|
|
31
|
+
} = _ref;
|
|
17
32
|
const handlers = {
|
|
18
33
|
[Interaction.CLICK]: {
|
|
19
34
|
onClick: onToggle
|
|
@@ -23,21 +38,21 @@ function useHiddenTrigger({
|
|
|
23
38
|
onMouseLeave: onHide
|
|
24
39
|
}
|
|
25
40
|
};
|
|
26
|
-
return {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
};
|
|
41
|
+
return _objectSpread(_objectSpread({
|
|
42
|
+
'aria-expanded': visible
|
|
43
|
+
}, handlers[interaction]), {}, {
|
|
44
|
+
'aria-controls': hiddenId
|
|
45
|
+
});
|
|
31
46
|
}
|
|
32
|
-
|
|
47
|
+
|
|
48
|
+
function PopoverTrigger(_ref2) {
|
|
49
|
+
let {
|
|
50
|
+
as: Component
|
|
51
|
+
} = _ref2,
|
|
52
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
53
|
+
|
|
33
54
|
const hiddenTriggerProps = useHiddenTrigger(props);
|
|
34
|
-
return
|
|
35
|
-
...hiddenTriggerProps
|
|
36
|
-
});
|
|
55
|
+
return /*#__PURE__*/jsx(Component, _objectSpread({}, hiddenTriggerProps));
|
|
37
56
|
}
|
|
38
|
-
|
|
39
|
-
export {
|
|
40
|
-
Interaction,
|
|
41
|
-
PopoverTrigger_default as default
|
|
42
|
-
};
|
|
43
|
-
//# sourceMappingURL=PopoverTrigger.js.map
|
|
57
|
+
|
|
58
|
+
export { Interaction, PopoverTrigger as default };
|
package/esm/index.js
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
export * from
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
default2 as default
|
|
6
|
-
};
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
1
|
+
export { DSPopover, Interaction, PopoverWithSchema, DSPopover as default } from './DSPopover.js';
|
|
2
|
+
export * from '@elliemae/ds-popper';
|
|
3
|
+
export { default as usePopper } from './usePopper.js';
|
|
4
|
+
export { default as usePopoverProviderState } from './usePopoverProviderState.js';
|
package/esm/usePopover.js
CHANGED
|
@@ -1,16 +1,34 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
8
|
+
import usePopper from './usePopper.js';
|
|
9
|
+
|
|
10
|
+
const _excluded = ["reference", "popper", "arrow"];
|
|
11
|
+
|
|
12
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
+
|
|
14
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
+
|
|
16
|
+
function usePopover(_ref) {
|
|
17
|
+
let otherProps = Object.assign({}, _ref);
|
|
18
|
+
|
|
19
|
+
const _usePopper = usePopper(otherProps),
|
|
20
|
+
{
|
|
21
|
+
reference,
|
|
22
|
+
popper,
|
|
23
|
+
arrow
|
|
24
|
+
} = _usePopper,
|
|
25
|
+
popperProps = _objectWithoutProperties(_usePopper, _excluded);
|
|
26
|
+
|
|
27
|
+
return _objectSpread({
|
|
28
|
+
triggerProps: _objectSpread({}, reference),
|
|
29
|
+
popoverProps: _objectSpread({}, popper),
|
|
30
|
+
arrowProps: _objectSpread({}, arrow)
|
|
31
|
+
}, popperProps);
|
|
11
32
|
}
|
|
12
|
-
|
|
13
|
-
export {
|
|
14
|
-
usePopover_default as default
|
|
15
|
-
};
|
|
16
|
-
//# sourceMappingURL=usePopover.js.map
|
|
33
|
+
|
|
34
|
+
export { usePopover as default };
|