@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.
Files changed (58) hide show
  1. package/cjs/PopoverArrow.js +25 -32
  2. package/cjs/PopoverContent.js +38 -32
  3. package/cjs/config/useConfigDSPopperjs.js +30 -53
  4. package/cjs/config/useConfiguredDefaultModifiers.js +20 -22
  5. package/cjs/config/useConfiguredDefaultProps.js +30 -36
  6. package/cjs/config/useConfiguredMergedProps.js +8 -11
  7. package/cjs/index.d.js +0 -1
  8. package/cjs/index.js +43 -46
  9. package/cjs/propTypes.js +1 -2
  10. package/cjs/utils/hooks/useOnClickOutside.js +4 -5
  11. package/esm/PopoverArrow.js +24 -31
  12. package/esm/PopoverContent.js +36 -30
  13. package/esm/config/useConfigDSPopperjs.js +27 -46
  14. package/esm/config/useConfiguredDefaultModifiers.js +19 -21
  15. package/esm/config/useConfiguredDefaultProps.js +27 -33
  16. package/esm/config/useConfiguredMergedProps.js +7 -10
  17. package/esm/index.d.js +0 -1
  18. package/esm/index.js +39 -42
  19. package/esm/propTypes.js +1 -2
  20. package/esm/utils/hooks/useOnClickOutside.js +3 -4
  21. package/package.json +60 -11
  22. package/types/PopoverArrow.d.ts +8 -0
  23. package/types/PopoverContent.d.ts +3 -0
  24. package/types/config/useConfigDSPopperjs.d.ts +2 -0
  25. package/types/config/useConfiguredDefaultModifiers.d.ts +6 -0
  26. package/types/config/useConfiguredDefaultProps.d.ts +16 -0
  27. package/types/config/useConfiguredMergedProps.d.ts +16 -0
  28. package/types/index.d.ts +23 -0
  29. package/types/propTypes.d.ts +54 -0
  30. package/types/utils/hooks/useOnClickOutside.d.ts +4 -0
  31. package/PopoverArrow/package.json +0 -10
  32. package/PopoverContent/package.json +0 -10
  33. package/cjs/PopoverArrow.js.map +0 -1
  34. package/cjs/PopoverContent.js.map +0 -1
  35. package/cjs/config/useConfigDSPopperjs.js.map +0 -1
  36. package/cjs/config/useConfiguredDefaultModifiers.js.map +0 -1
  37. package/cjs/config/useConfiguredDefaultProps.js.map +0 -1
  38. package/cjs/config/useConfiguredMergedProps.js.map +0 -1
  39. package/cjs/index.d.js.map +0 -1
  40. package/cjs/index.js.map +0 -1
  41. package/cjs/propTypes.js.map +0 -1
  42. package/cjs/utils/hooks/useOnClickOutside.js.map +0 -1
  43. package/config/useConfigDSPopperjs/package.json +0 -10
  44. package/config/useConfiguredDefaultModifiers/package.json +0 -10
  45. package/config/useConfiguredDefaultProps/package.json +0 -10
  46. package/config/useConfiguredMergedProps/package.json +0 -10
  47. package/esm/PopoverArrow.js.map +0 -1
  48. package/esm/PopoverContent.js.map +0 -1
  49. package/esm/config/useConfigDSPopperjs.js.map +0 -1
  50. package/esm/config/useConfiguredDefaultModifiers.js.map +0 -1
  51. package/esm/config/useConfiguredDefaultProps.js.map +0 -1
  52. package/esm/config/useConfiguredMergedProps.js.map +0 -1
  53. package/esm/index.d.js.map +0 -1
  54. package/esm/index.js.map +0 -1
  55. package/esm/propTypes.js.map +0 -1
  56. package/esm/utils/hooks/useOnClickOutside.js.map +0 -1
  57. package/propTypes/package.json +0 -10
  58. package/utils/hooks/useOnClickOutside/package.json +0 -10
@@ -2,49 +2,42 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var React = require('react');
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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
+ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
11
13
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
12
14
 
13
- var arrowWidth = 18;
14
- var arrowHeight = 18;
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:", "px;height:", "px;pointer-events:none;background-color:transparent;& .stroke{fill:", ";fill-opacity:0.4;}& .fill{fill:", ";}&[data-placement^='top']{svg{transform:rotateZ(180deg);}bottom:-", "px;}&[data-placement^='right']{svg{transform:rotateZ(-90deg);}left:-", "px;}&[data-placement^='bottom']{top:-", "px;}&[data-placement^='left']{svg{transform:rotateZ(90deg);}right:-", "px;}margin-left:", " margin-top:", ""], arrowWidth, arrowHeight, function (_ref) {
18
- var theme = _ref.theme;
19
- return theme.colors.neutral['500'];
20
- }, function (_ref2) {
21
- var theme = _ref2.theme;
22
- return theme.colors.neutral['000'];
23
- }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, function (props) {
24
- return props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? "-".concat(arrowWidth / 2, "px;") : '0;';
25
- }, function (props) {
26
- return props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? "-".concat(arrowHeight / 2, "px;") : '0;';
27
- });
28
- var PopoverArrow = function PopoverArrow(_ref3) {
29
- var placement = _ref3.placement,
30
- style = _ref3.style,
31
- arrowElementRef = _ref3.arrowElementRef;
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__*/React__default['default'].createElement("path", {
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__*/React__default['default'].createElement("path", {
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
@@ -2,45 +2,51 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _extends = require('@babel/runtime/helpers/extends');
6
- var React = require('react');
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 _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
13
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
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 StyledPopoverContentWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
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:", ";"], function (_ref) {
19
- var zIndex = _ref.zIndex;
20
- return zIndex;
21
- });
22
- var PopoverContent = function PopoverContent(_ref2) {
23
- var setPopperElement = _ref2.setPopperElement,
24
- popperStyles = _ref2.popperStyles,
25
- popperAttributes = _ref2.popperAttributes,
26
- children = _ref2.children,
27
- setArrowElement = _ref2.setArrowElement,
28
- arrowStyle = _ref2.arrowStyle,
29
- withoutArrow = _ref2.withoutArrow,
30
- zIndex = _ref2.zIndex;
31
- return /*#__PURE__*/React__default['default'].createElement(StyledPopoverContentWrapper, _extends__default['default']({
32
- zIndex: zIndex,
33
- ref: setPopperElement,
34
- style: popperStyles
35
- }, popperAttributes), children, withoutArrow === false ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PopoverArrow.PopoverArrow, {
36
- arrowElementRef: setArrowElement,
37
- style: arrowStyle,
38
- placement: popperAttributes ? popperAttributes['data-popper-placement'] : 'bottom'
39
- }), /*#__PURE__*/React__default['default'].createElement("div", {
40
- ref: setArrowElement,
41
- style: arrowStyle
42
- })) : null);
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
- var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
6
- var React = require('react');
5
+ require('core-js/modules/web.dom-collections.iterator.js');
6
+ var react = require('react');
7
7
  var reactPopper = require('react-popper');
8
- var config_useConfiguredMergedProps = require('./useConfiguredMergedProps.js');
9
- var utils_hooks_useOnClickOutside = require('../utils/hooks/useOnClickOutside.js');
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
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
-
17
- var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
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: arrowElement
16
+ arrowElement
33
17
  });
34
- var referenceElement = props.referenceElement,
35
- closeContextMenu = props.closeContextMenu,
36
- onClickOutside = props.onClickOutside,
37
- modifiers = props.modifiers,
38
- startPlacementPreference = props.startPlacementPreference;
39
- var popperExtraOpts = React.useMemo(function () {
40
- return {
41
- placement: startPlacementPreference,
42
- modifiers: modifiers
43
- };
44
- }, [modifiers, startPlacementPreference]);
45
- var popoverHelper = reactPopper.usePopper(referenceElement, popperElement, popperExtraOpts);
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 React.useMemo(function () {
55
- return {
56
- props: props,
57
- popperElement: popperElement,
58
- setPopperElement: setPopperElement,
59
- arrowElement: arrowElement,
60
- setArrowElement: setArrowElement,
61
- popoverHelper: popoverHelper
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 React = require('react');
5
+ var react = require('react');
6
6
 
7
- var useConfiguredDefaultModifiers = function useConfiguredDefaultModifiers(_ref) {
8
- var props = _ref.props,
9
- arrowElement = _ref.arrowElement;
7
+ const useConfiguredDefaultModifiers = ({
8
+ props,
9
+ arrowElement
10
+ }) => {
10
11
  // we destructure explicit app definitions before merge
11
- var explicitAppBoundaryElement = props.boundaryElement,
12
- _props$withoutArrow = props.withoutArrow,
13
- explicitAppWithoutArrow = _props$withoutArrow === void 0 ? false : _props$withoutArrow,
14
- _props$placementOrder = props.placementOrderPreference,
15
- explicitPlacementOrderPreference = _props$placementOrder === void 0 ? ['top', 'bottom', 'left', 'right'] : _props$placementOrder,
16
- _props$customOffset = props.customOffset,
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
- var defaultModifiers = React.useMemo(function () {
20
- var mod = [];
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
- var defaultOffset = explictAppOffset || [0, 14];
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
- var _props$modifiers = props.modifiers,
62
- explicitAppModifiers = _props$modifiers === void 0 ? defaultModifiers : _props$modifiers;
63
- return React.useMemo(function () {
64
- return {
65
- modifiers: explicitAppModifiers
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 React = require('react');
7
- var config_useConfiguredDefaultModifiers = require('./useConfiguredDefaultModifiers.js');
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['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; }
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
- var noop = function noop() {};
17
+ const noop = () => {};
18
18
 
19
- var emptyObj = {};
20
- var useConfiguredDefaultProps = function useConfiguredDefaultProps(_ref) {
21
- var props = _ref.props,
22
- arrowElement = _ref.arrowElement;
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
- var staticDefaultProps = React.useMemo(function () {
25
- return {
26
- referenceElement: null,
27
- showPopover: false,
28
- closeContextMenu: noop,
29
- onClickOutside: noop,
30
- withoutPortal: false,
31
- withoutArrow: false,
32
- portalDOMContainer: document.body,
33
- startPlacementPreference: 'top',
34
- placementOrderPreference: ['top', 'bottom', 'left', 'right'],
35
- zIndex: 1,
36
- extraPopperStyles: emptyObj
37
- };
38
- }, []);
39
-
40
- var _useConfiguredDefault = config_useConfiguredDefaultModifiers.useConfiguredDefaultModifiers({
41
- props: props,
42
- arrowElement: arrowElement
43
- }),
44
- configuredModifiers = _useConfiguredDefault.modifiers;
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 config_useConfiguredDefaultProps = require('./useConfiguredDefaultProps.js');
7
- require('@babel/runtime/helpers/defineProperty');
8
- require('react');
9
- require('./useConfiguredDefaultModifiers.js');
6
+ var useConfiguredDefaultProps = require('./useConfiguredDefaultProps.js');
10
7
 
11
- var useConfiguredMergedProps = function useConfiguredMergedProps(_ref) {
12
- var props = _ref.props,
13
- arrowElement = _ref.arrowElement;
14
- var defaultProps = config_useConfiguredDefaultProps.useConfiguredDefaultProps({
15
- props: props,
16
- arrowElement: arrowElement
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
@@ -1,3 +1,2 @@
1
1
  'use strict';
2
2
 
3
- //# sourceMappingURL=index.d.js.map
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 React = require('react');
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 config_useConfigDSPopperjs = require('./config/useConfigDSPopperjs.js');
12
- require('@babel/runtime/helpers/extends');
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['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; }
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
- var DSPopperJS = function DSPopperJS(props) {
33
- var _useConfigDSPopperjs = config_useConfigDSPopperjs.useConfigDSPopperjs(props),
34
- _useConfigDSPopperjs$ = _useConfigDSPopperjs.props,
35
- showPopover = _useConfigDSPopperjs$.showPopover,
36
- withoutPortal = _useConfigDSPopperjs$.withoutPortal,
37
- withoutArrow = _useConfigDSPopperjs$.withoutArrow,
38
- portalDOMContainer = _useConfigDSPopperjs$.portalDOMContainer,
39
- zIndex = _useConfigDSPopperjs$.zIndex,
40
- extraPopperStyles = _useConfigDSPopperjs$.extraPopperStyles,
41
- setPopperElement = _useConfigDSPopperjs.setPopperElement,
42
- setArrowElement = _useConfigDSPopperjs.setArrowElement,
43
- popoverHelper = _useConfigDSPopperjs.popoverHelper;
44
-
45
- var children = props.children;
46
- var styles = popoverHelper.styles,
47
- attributes = popoverHelper.attributes;
48
- var contentJSX = React.useMemo(function () {
49
- return /*#__PURE__*/React__default['default'].createElement(PopoverContent.PopoverContent, {
50
- setPopperElement: setPopperElement,
51
- popperStyles: _objectSpread(_objectSpread({}, styles.popper), extraPopperStyles),
52
- popperAttributes: attributes.popper,
53
- setArrowElement: setArrowElement,
54
- arrowStyle: styles.arrow,
55
- withoutArrow: withoutArrow,
56
- zIndex: zIndex
57
- }, children);
58
- }, [attributes.popper, children, extraPopperStyles, setArrowElement, setPopperElement, styles.arrow, styles.popper, withoutArrow, zIndex]);
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__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, contentJSX), portalDOMContainer));
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.propTypes = propTypes.dspopperjsPropTypes;
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['default'] = DSPopperJS;
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
- var dspopperjsPropTypes = {
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 React = require('react');
5
+ var react = require('react');
6
6
 
7
7
  function useOnClickOutside(ref, cb) {
8
- React.useEffect(function () {
9
- var listener = function listener(event) {
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 function () {
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