@elliemae/ds-popperjs 1.57.0 → 2.0.0-alpha.11
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/PopoverArrow.js +25 -32
- package/cjs/PopoverContent.js +38 -32
- package/cjs/config/useConfigDSPopperjs.js +30 -53
- package/cjs/config/useConfiguredDefaultModifiers.js +20 -22
- package/cjs/config/useConfiguredDefaultProps.js +30 -36
- package/cjs/config/useConfiguredMergedProps.js +8 -11
- package/cjs/index.d.js +0 -1
- package/cjs/index.js +43 -46
- package/cjs/propTypes.js +1 -2
- package/cjs/utils/hooks/useOnClickOutside.js +4 -5
- package/esm/PopoverArrow.js +24 -31
- package/esm/PopoverContent.js +36 -30
- package/esm/config/useConfigDSPopperjs.js +27 -46
- package/esm/config/useConfiguredDefaultModifiers.js +19 -21
- package/esm/config/useConfiguredDefaultProps.js +27 -33
- package/esm/config/useConfiguredMergedProps.js +7 -10
- package/esm/index.d.js +0 -1
- package/esm/index.js +39 -42
- package/esm/propTypes.js +1 -2
- package/esm/utils/hooks/useOnClickOutside.js +3 -4
- package/package.json +60 -11
- package/types/PopoverArrow.d.ts +8 -0
- package/types/PopoverContent.d.ts +3 -0
- package/types/config/useConfigDSPopperjs.d.ts +2 -0
- package/types/config/useConfiguredDefaultModifiers.d.ts +6 -0
- package/types/config/useConfiguredDefaultProps.d.ts +16 -0
- package/types/config/useConfiguredMergedProps.d.ts +16 -0
- package/types/index.d.ts +23 -0
- package/types/propTypes.d.ts +54 -0
- package/types/utils/hooks/useOnClickOutside.d.ts +4 -0
- package/PopoverArrow/package.json +0 -10
- package/PopoverContent/package.json +0 -10
- package/cjs/PopoverArrow.js.map +0 -1
- package/cjs/PopoverContent.js.map +0 -1
- package/cjs/config/useConfigDSPopperjs.js.map +0 -1
- package/cjs/config/useConfiguredDefaultModifiers.js.map +0 -1
- package/cjs/config/useConfiguredDefaultProps.js.map +0 -1
- package/cjs/config/useConfiguredMergedProps.js.map +0 -1
- package/cjs/index.d.js.map +0 -1
- package/cjs/index.js.map +0 -1
- package/cjs/propTypes.js.map +0 -1
- package/cjs/utils/hooks/useOnClickOutside.js.map +0 -1
- package/config/useConfigDSPopperjs/package.json +0 -10
- package/config/useConfiguredDefaultModifiers/package.json +0 -10
- package/config/useConfiguredDefaultProps/package.json +0 -10
- package/config/useConfiguredMergedProps/package.json +0 -10
- package/esm/PopoverArrow.js.map +0 -1
- package/esm/PopoverContent.js.map +0 -1
- package/esm/config/useConfigDSPopperjs.js.map +0 -1
- package/esm/config/useConfiguredDefaultModifiers.js.map +0 -1
- package/esm/config/useConfiguredDefaultProps.js.map +0 -1
- package/esm/config/useConfiguredMergedProps.js.map +0 -1
- package/esm/index.d.js.map +0 -1
- package/esm/index.js.map +0 -1
- package/esm/propTypes.js.map +0 -1
- package/esm/utils/hooks/useOnClickOutside.js.map +0 -1
- package/propTypes/package.json +0 -10
- package/utils/hooks/useOnClickOutside/package.json +0 -10
package/cjs/PopoverArrow.js
CHANGED
|
@@ -2,49 +2,42 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
6
|
+
require('react');
|
|
6
7
|
var styled = require('styled-components');
|
|
8
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
7
9
|
|
|
8
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
11
|
|
|
10
|
-
var
|
|
12
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
11
13
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
14
|
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
var StyledArrow = /*#__PURE__*/styled__default['default'].div.withConfig({
|
|
15
|
+
var _svg;
|
|
16
|
+
const StyledArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
16
17
|
componentId: "sc-olcdf1-0"
|
|
17
|
-
})(["position:absolute;width:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/React__default['default'].createElement(StyledArrow, {
|
|
33
|
-
key: "popper-arrow",
|
|
34
|
-
"data-placement": placement,
|
|
35
|
-
style: style,
|
|
36
|
-
ref: arrowElementRef,
|
|
37
|
-
"data-testid": "ds-tooltip-arrow"
|
|
38
|
-
}, /*#__PURE__*/React__default['default'].createElement("svg", {
|
|
18
|
+
})(["position:absolute;width:18px;height:18px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-18px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-18px;}&[data-placement^='bottom']{top:-18px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-18px;}"], ({
|
|
19
|
+
theme
|
|
20
|
+
}) => theme.colors.neutral['500'], ({
|
|
21
|
+
theme
|
|
22
|
+
}) => theme.colors.neutral['000']);
|
|
23
|
+
const PopoverArrow = ({
|
|
24
|
+
placement,
|
|
25
|
+
style,
|
|
26
|
+
arrowElementRef
|
|
27
|
+
}) => /*#__PURE__*/jsxRuntime.jsx(StyledArrow, {
|
|
28
|
+
"data-placement": placement,
|
|
29
|
+
style: style,
|
|
30
|
+
ref: arrowElementRef,
|
|
31
|
+
"data-testid": "ds-tooltip-arrow",
|
|
32
|
+
children: _svg || (_svg = /*#__PURE__*/_jsx__default["default"]("svg", {
|
|
39
33
|
viewBox: "0 0 30 30"
|
|
40
|
-
}, /*#__PURE__*/
|
|
34
|
+
}, void 0, /*#__PURE__*/_jsx__default["default"]("path", {
|
|
41
35
|
className: "stroke",
|
|
42
36
|
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"
|
|
43
|
-
}), /*#__PURE__*/
|
|
37
|
+
}), /*#__PURE__*/_jsx__default["default"]("path", {
|
|
44
38
|
className: "fill",
|
|
45
39
|
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"
|
|
46
|
-
})))
|
|
47
|
-
};
|
|
40
|
+
})))
|
|
41
|
+
}, "popper-arrow");
|
|
48
42
|
|
|
49
43
|
exports.PopoverArrow = PopoverArrow;
|
|
50
|
-
//# sourceMappingURL=PopoverArrow.js.map
|
package/cjs/PopoverContent.js
CHANGED
|
@@ -2,45 +2,51 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('react');
|
|
7
8
|
var styled = require('styled-components');
|
|
8
9
|
var PopoverArrow = require('./PopoverArrow.js');
|
|
10
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
9
11
|
|
|
10
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
13
|
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
15
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
14
16
|
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
15
17
|
|
|
16
|
-
var
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
21
|
+
const StyledPopoverContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
17
22
|
componentId: "sc-1gxm7np-0"
|
|
18
|
-
})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);z-index:", ";"],
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
23
|
+
})(["box-shadow:0 0 0 1px rgba(16,22,26,0.1),0 2px 4px rgba(16,22,26,0.2),0 8px 24px rgba(16,22,26,0.2);z-index:", ";"], ({
|
|
24
|
+
zIndex
|
|
25
|
+
}) => zIndex);
|
|
26
|
+
const PopoverContent = ({
|
|
27
|
+
setPopperElement,
|
|
28
|
+
popperStyles,
|
|
29
|
+
popperAttributes,
|
|
30
|
+
children,
|
|
31
|
+
setArrowElement,
|
|
32
|
+
arrowStyle,
|
|
33
|
+
withoutArrow,
|
|
34
|
+
zIndex
|
|
35
|
+
}) => /*#__PURE__*/jsxRuntime.jsxs(StyledPopoverContentWrapper, _objectSpread(_objectSpread({
|
|
36
|
+
zIndex: zIndex,
|
|
37
|
+
ref: setPopperElement,
|
|
38
|
+
style: popperStyles
|
|
39
|
+
}, popperAttributes), {}, {
|
|
40
|
+
children: [children, withoutArrow === false ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
41
|
+
children: [/*#__PURE__*/_jsx__default["default"](PopoverArrow.PopoverArrow, {
|
|
42
|
+
arrowElementRef: setArrowElement,
|
|
43
|
+
style: arrowStyle,
|
|
44
|
+
placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
|
|
45
|
+
}), /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
46
|
+
ref: setArrowElement,
|
|
47
|
+
style: arrowStyle
|
|
48
|
+
})]
|
|
49
|
+
}) : null]
|
|
50
|
+
}));
|
|
44
51
|
|
|
45
52
|
exports.PopoverContent = PopoverContent;
|
|
46
|
-
//# sourceMappingURL=PopoverContent.js.map
|
|
@@ -2,66 +2,43 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
var
|
|
5
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
6
|
+
var react = require('react');
|
|
7
7
|
var reactPopper = require('react-popper');
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
require('@elliemae/ds-props-helpers');
|
|
11
|
-
require('./useConfiguredDefaultProps.js');
|
|
12
|
-
require('@babel/runtime/helpers/defineProperty');
|
|
13
|
-
require('./useConfiguredDefaultModifiers.js');
|
|
8
|
+
var useConfiguredMergedProps = require('./useConfiguredMergedProps.js');
|
|
9
|
+
var useOnClickOutside = require('../utils/hooks/useOnClickOutside.js');
|
|
14
10
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
var useConfigDSPopperjs = function useConfigDSPopperjs(appProps) {
|
|
20
|
-
var _useState = React.useState(null),
|
|
21
|
-
_useState2 = _slicedToArray__default['default'](_useState, 2),
|
|
22
|
-
popperElement = _useState2[0],
|
|
23
|
-
setPopperElement = _useState2[1];
|
|
24
|
-
|
|
25
|
-
var _useState3 = React.useState(null),
|
|
26
|
-
_useState4 = _slicedToArray__default['default'](_useState3, 2),
|
|
27
|
-
arrowElement = _useState4[0],
|
|
28
|
-
setArrowElement = _useState4[1];
|
|
29
|
-
|
|
30
|
-
var props = config_useConfiguredMergedProps.useConfiguredMergedProps({
|
|
11
|
+
const useConfigDSPopperjs = appProps => {
|
|
12
|
+
const [popperElement, setPopperElement] = react.useState(null);
|
|
13
|
+
const [arrowElement, setArrowElement] = react.useState(null);
|
|
14
|
+
const props = useConfiguredMergedProps.useConfiguredMergedProps({
|
|
31
15
|
props: appProps,
|
|
32
|
-
arrowElement
|
|
16
|
+
arrowElement
|
|
33
17
|
});
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
utils_hooks_useOnClickOutside.useOnClickOutside(popperElement, function (e) {
|
|
18
|
+
const {
|
|
19
|
+
referenceElement,
|
|
20
|
+
closeContextMenu,
|
|
21
|
+
modifiers,
|
|
22
|
+
startPlacementPreference
|
|
23
|
+
} = props;
|
|
24
|
+
const popperExtraOpts = react.useMemo(() => ({
|
|
25
|
+
placement: startPlacementPreference,
|
|
26
|
+
modifiers
|
|
27
|
+
}), [modifiers, startPlacementPreference]);
|
|
28
|
+
const popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
|
|
29
|
+
useOnClickOutside.useOnClickOutside(popperElement, e => {
|
|
47
30
|
var _referenceElement$con;
|
|
48
31
|
|
|
49
|
-
if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target)))
|
|
50
|
-
closeContextMenu();
|
|
51
|
-
onClickOutside(e);
|
|
52
|
-
}
|
|
32
|
+
if (!(referenceElement !== null && referenceElement !== void 0 && (_referenceElement$con = referenceElement.contains) !== null && _referenceElement$con !== void 0 && _referenceElement$con.call(referenceElement, e === null || e === void 0 ? void 0 : e.target))) closeContextMenu();
|
|
53
33
|
});
|
|
54
|
-
return
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
};
|
|
63
|
-
}, [arrowElement, popoverHelper, popperElement, props]);
|
|
34
|
+
return react.useMemo(() => ({
|
|
35
|
+
props,
|
|
36
|
+
popperElement,
|
|
37
|
+
setPopperElement,
|
|
38
|
+
arrowElement,
|
|
39
|
+
setArrowElement,
|
|
40
|
+
popoverHelper
|
|
41
|
+
}), [arrowElement, popoverHelper, popperElement, props]);
|
|
64
42
|
};
|
|
65
43
|
|
|
66
44
|
exports.useConfigDSPopperjs = useConfigDSPopperjs;
|
|
67
|
-
//# sourceMappingURL=useConfigDSPopperjs.js.map
|
|
@@ -2,22 +2,22 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var react = require('react');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
const useConfiguredDefaultModifiers = ({
|
|
8
|
+
props,
|
|
9
|
+
arrowElement
|
|
10
|
+
}) => {
|
|
10
11
|
// we destructure explicit app definitions before merge
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
explictAppOffset = _props$customOffset === void 0 ? undefined : _props$customOffset; // to build default modifiers on top of it
|
|
12
|
+
const {
|
|
13
|
+
boundaryElement: explicitAppBoundaryElement,
|
|
14
|
+
withoutArrow: explicitAppWithoutArrow = false,
|
|
15
|
+
placementOrderPreference: explicitPlacementOrderPreference = ['top', 'bottom', 'left', 'right'],
|
|
16
|
+
customOffset: explictAppOffset = undefined
|
|
17
|
+
} = props; // to build default modifiers on top of it
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
19
|
+
const defaultModifiers = react.useMemo(() => {
|
|
20
|
+
const mod = [];
|
|
21
21
|
mod.push({
|
|
22
22
|
name: 'hide',
|
|
23
23
|
enabled: true
|
|
@@ -30,7 +30,7 @@ var useConfiguredDefaultModifiers = function useConfiguredDefaultModifiers(_ref)
|
|
|
30
30
|
}); // we apply an offset if the app defines one or if the app wants the arrow
|
|
31
31
|
|
|
32
32
|
if (!explicitAppWithoutArrow || explictAppOffset) {
|
|
33
|
-
|
|
33
|
+
const defaultOffset = explictAppOffset || [0, 14];
|
|
34
34
|
mod.push({
|
|
35
35
|
name: 'offset',
|
|
36
36
|
enabled: true,
|
|
@@ -58,14 +58,12 @@ var useConfiguredDefaultModifiers = function useConfiguredDefaultModifiers(_ref)
|
|
|
58
58
|
return mod;
|
|
59
59
|
}, [arrowElement, explicitAppBoundaryElement, explicitAppWithoutArrow, explicitPlacementOrderPreference, explictAppOffset]); // if the app pass custom modifier, we don't use "default modifiers"
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}, [explicitAppModifiers]);
|
|
61
|
+
const {
|
|
62
|
+
modifiers: explicitAppModifiers = defaultModifiers
|
|
63
|
+
} = props;
|
|
64
|
+
return react.useMemo(() => ({
|
|
65
|
+
modifiers: explicitAppModifiers
|
|
66
|
+
}), [explicitAppModifiers]);
|
|
68
67
|
};
|
|
69
68
|
|
|
70
69
|
exports.useConfiguredDefaultModifiers = useConfiguredDefaultModifiers;
|
|
71
|
-
//# sourceMappingURL=useConfiguredDefaultModifiers.js.map
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
-
var
|
|
7
|
-
var
|
|
6
|
+
var react = require('react');
|
|
7
|
+
var useConfiguredDefaultModifiers = require('./useConfiguredDefaultModifiers.js');
|
|
8
8
|
|
|
9
9
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
10
|
|
|
@@ -12,44 +12,38 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
|
|
|
12
12
|
|
|
13
13
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
14
14
|
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default[
|
|
15
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
const noop = () => {};
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
const emptyObj = {};
|
|
20
|
+
const useConfiguredDefaultProps = ({
|
|
21
|
+
props,
|
|
22
|
+
arrowElement
|
|
23
|
+
}) => {
|
|
23
24
|
// don't move this out of the hook or `document.body` will explode
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
var defaultProps = React.useMemo(function () {
|
|
47
|
-
return _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
|
|
48
|
-
modifiers: configuredModifiers
|
|
49
|
-
});
|
|
50
|
-
}, [configuredModifiers, staticDefaultProps]);
|
|
25
|
+
const staticDefaultProps = react.useMemo(() => ({
|
|
26
|
+
referenceElement: null,
|
|
27
|
+
showPopover: false,
|
|
28
|
+
closeContextMenu: noop,
|
|
29
|
+
withoutPortal: false,
|
|
30
|
+
withoutArrow: false,
|
|
31
|
+
portalDOMContainer: document.body,
|
|
32
|
+
startPlacementPreference: 'top',
|
|
33
|
+
placementOrderPreference: ['top', 'bottom', 'left', 'right'],
|
|
34
|
+
zIndex: 1,
|
|
35
|
+
extraPopperStyles: emptyObj
|
|
36
|
+
}), []);
|
|
37
|
+
const {
|
|
38
|
+
modifiers: configuredModifiers
|
|
39
|
+
} = useConfiguredDefaultModifiers.useConfiguredDefaultModifiers({
|
|
40
|
+
props,
|
|
41
|
+
arrowElement
|
|
42
|
+
});
|
|
43
|
+
const defaultProps = react.useMemo(() => _objectSpread(_objectSpread({}, staticDefaultProps), {}, {
|
|
44
|
+
modifiers: configuredModifiers
|
|
45
|
+
}), [configuredModifiers, staticDefaultProps]);
|
|
51
46
|
return defaultProps;
|
|
52
47
|
};
|
|
53
48
|
|
|
54
49
|
exports.useConfiguredDefaultProps = useConfiguredDefaultProps;
|
|
55
|
-
//# sourceMappingURL=useConfiguredDefaultProps.js.map
|
|
@@ -3,20 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var dsPropsHelpers = require('@elliemae/ds-props-helpers');
|
|
6
|
-
var
|
|
7
|
-
require('@babel/runtime/helpers/defineProperty');
|
|
8
|
-
require('react');
|
|
9
|
-
require('./useConfiguredDefaultModifiers.js');
|
|
6
|
+
var useConfiguredDefaultProps = require('./useConfiguredDefaultProps.js');
|
|
10
7
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
const useConfiguredMergedProps = ({
|
|
9
|
+
props,
|
|
10
|
+
arrowElement
|
|
11
|
+
}) => {
|
|
12
|
+
const defaultProps = useConfiguredDefaultProps.useConfiguredDefaultProps({
|
|
13
|
+
props,
|
|
14
|
+
arrowElement
|
|
17
15
|
});
|
|
18
16
|
return dsPropsHelpers.useMemoMergePropsWithDefault(props, defaultProps);
|
|
19
17
|
};
|
|
20
18
|
|
|
21
19
|
exports.useConfiguredMergedProps = useConfiguredMergedProps;
|
|
22
|
-
//# sourceMappingURL=useConfiguredMergedProps.js.map
|
package/cjs/index.d.js
CHANGED
package/cjs/index.js
CHANGED
|
@@ -2,74 +2,71 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
5
6
|
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
-
var
|
|
7
|
+
var react = require('react');
|
|
7
8
|
var reactDom = require('react-dom');
|
|
8
9
|
var reactDesc = require('react-desc');
|
|
9
10
|
var propTypes = require('./propTypes.js');
|
|
10
11
|
var PopoverContent = require('./PopoverContent.js');
|
|
11
|
-
var
|
|
12
|
-
require('
|
|
13
|
-
require('styled-components');
|
|
14
|
-
require('./PopoverArrow.js');
|
|
15
|
-
require('@babel/runtime/helpers/slicedToArray');
|
|
16
|
-
require('react-popper');
|
|
17
|
-
require('./config/useConfiguredMergedProps.js');
|
|
18
|
-
require('@elliemae/ds-props-helpers');
|
|
19
|
-
require('./config/useConfiguredDefaultProps.js');
|
|
20
|
-
require('./config/useConfiguredDefaultModifiers.js');
|
|
21
|
-
require('./utils/hooks/useOnClickOutside.js');
|
|
12
|
+
var useConfigDSPopperjs = require('./config/useConfigDSPopperjs.js');
|
|
13
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
22
14
|
|
|
23
15
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
24
16
|
|
|
17
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
25
18
|
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
26
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
27
19
|
|
|
28
20
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
29
21
|
|
|
30
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default[
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
31
23
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
showPopover
|
|
36
|
-
withoutPortal
|
|
37
|
-
withoutArrow
|
|
38
|
-
portalDOMContainer
|
|
39
|
-
zIndex
|
|
40
|
-
extraPopperStyles
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
24
|
+
const DSPopperJS = props => {
|
|
25
|
+
const {
|
|
26
|
+
props: {
|
|
27
|
+
showPopover,
|
|
28
|
+
withoutPortal,
|
|
29
|
+
withoutArrow,
|
|
30
|
+
portalDOMContainer,
|
|
31
|
+
zIndex,
|
|
32
|
+
extraPopperStyles
|
|
33
|
+
},
|
|
34
|
+
setPopperElement,
|
|
35
|
+
setArrowElement,
|
|
36
|
+
popoverHelper
|
|
37
|
+
} = useConfigDSPopperjs.useConfigDSPopperjs(props);
|
|
38
|
+
const {
|
|
39
|
+
children
|
|
40
|
+
} = props;
|
|
41
|
+
const {
|
|
42
|
+
styles,
|
|
43
|
+
attributes
|
|
44
|
+
} = popoverHelper;
|
|
45
|
+
const contentJSX = react.useMemo(() => /*#__PURE__*/_jsx__default["default"](PopoverContent.PopoverContent, {
|
|
46
|
+
setPopperElement: setPopperElement,
|
|
47
|
+
popperStyles: _objectSpread(_objectSpread({}, styles.popper), extraPopperStyles),
|
|
48
|
+
popperAttributes: attributes.popper,
|
|
49
|
+
setArrowElement: setArrowElement,
|
|
50
|
+
arrowStyle: styles.arrow,
|
|
51
|
+
withoutArrow: withoutArrow,
|
|
52
|
+
zIndex: zIndex
|
|
53
|
+
}, void 0, children), [attributes.popper, children, extraPopperStyles, setArrowElement, setPopperElement, styles.arrow, styles.popper, withoutArrow, zIndex]);
|
|
59
54
|
|
|
60
55
|
if (showPopover) {
|
|
61
56
|
if (withoutPortal === true) return contentJSX;
|
|
62
|
-
if (withoutPortal === false) return /*#__PURE__*/
|
|
57
|
+
if (withoutPortal === false) return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
58
|
+
children: /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
59
|
+
children: contentJSX
|
|
60
|
+
}), portalDOMContainer)
|
|
61
|
+
});
|
|
63
62
|
}
|
|
64
63
|
|
|
65
64
|
return null;
|
|
66
65
|
};
|
|
67
66
|
|
|
68
|
-
DSPopperJS.
|
|
69
|
-
var DSPopperJSWithSchema = reactDesc.describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
|
|
67
|
+
const DSPopperJSWithSchema = reactDesc.describe(DSPopperJS).description('A dimsum custom styling wrapper on top of popperjs');
|
|
70
68
|
DSPopperJSWithSchema.propTypes = propTypes.dspopperjsPropTypes;
|
|
71
69
|
|
|
72
70
|
exports.DSPopperJS = DSPopperJS;
|
|
73
71
|
exports.DSPopperJSWithSchema = DSPopperJSWithSchema;
|
|
74
|
-
exports[
|
|
75
|
-
//# sourceMappingURL=index.js.map
|
|
72
|
+
exports["default"] = DSPopperJS;
|
package/cjs/propTypes.js
CHANGED
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var reactDesc = require('react-desc');
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
const dspopperjsPropTypes = {
|
|
8
8
|
/**
|
|
9
9
|
* React ref to popperjs referenceElement
|
|
10
10
|
*/
|
|
@@ -71,4 +71,3 @@ var dspopperjsPropTypes = {
|
|
|
71
71
|
};
|
|
72
72
|
|
|
73
73
|
exports.dspopperjsPropTypes = dspopperjsPropTypes;
|
|
74
|
-
//# sourceMappingURL=propTypes.js.map
|
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
5
|
+
var react = require('react');
|
|
6
6
|
|
|
7
7
|
function useOnClickOutside(ref, cb) {
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
react.useEffect(() => {
|
|
9
|
+
const listener = event => {
|
|
10
10
|
var _ref$contains;
|
|
11
11
|
|
|
12
12
|
// Do nothing if clicking ref's element or descendent elements
|
|
@@ -19,7 +19,7 @@ function useOnClickOutside(ref, cb) {
|
|
|
19
19
|
|
|
20
20
|
document.addEventListener('mousedown', listener);
|
|
21
21
|
document.addEventListener('touchstart', listener);
|
|
22
|
-
return
|
|
22
|
+
return () => {
|
|
23
23
|
document.removeEventListener('mousedown', listener);
|
|
24
24
|
document.removeEventListener('touchstart', listener);
|
|
25
25
|
};
|
|
@@ -27,4 +27,3 @@ function useOnClickOutside(ref, cb) {
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
exports.useOnClickOutside = useOnClickOutside;
|
|
30
|
-
//# sourceMappingURL=useOnClickOutside.js.map
|