@elliemae/ds-popperjs 2.4.2-rc.9 → 2.4.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.
Files changed (9) hide show
  1. package/cjs/PopoverArrow.js +1 -1
  2. package/cjs/config/useConfigDSPopperjs.js +1 -4
  3. package/cjs/styled.js +27 -6
  4. package/cjs/utils/hooks/useOnClickOutside.js +1 -3
  5. package/esm/PopoverArrow.js +1 -1
  6. package/esm/config/useConfigDSPopperjs.js +1 -4
  7. package/esm/styled.js +27 -5
  8. package/esm/utils/hooks/useOnClickOutside.js +1 -3
  9. package/package.json +3 -3
package/cjs/PopoverArrow.js CHANGED
@@ -27,7 +27,7 @@ const StyledArrow = /*#__PURE__*/styled__default["default"].div.withConfig({
27
27
  theme
28
28
  } = _ref2;
29
29
  return theme.colors.neutral['000'];
30
- }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? "-".concat(arrowWidth / 2, "px;") : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? "-".concat(arrowHeight / 2, "px;") : '0;');
30
+ }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? `-${arrowWidth / 2}px;` : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? `-${arrowHeight / 2}px;` : '0;');
31
31
  const PopoverArrow = _ref3 => {
32
32
  let {
33
33
  placement,
package/cjs/config/useConfigDSPopperjs.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('core-js/modules/web.dom-collections.iterator.js');
6
5
  var react = require('react');
7
6
  var reactPopper = require('react-popper');
8
7
  var useConfiguredMergedProps = require('./useConfiguredMergedProps.js');
@@ -38,9 +37,7 @@ const useConfigDSPopperjs = appProps => {
38
37
  }
39
38
  }, [showPopover, withoutAnimation]);
40
39
  useOnClickOutside.useOnClickOutside(popperElement, e => {
41
- var _referenceElement$con;
42
-
43
- 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))) {
40
+ if (!referenceElement?.contains?.(e?.target)) {
44
41
  onClickOutside(e);
45
42
  closeContextMenu();
46
43
  }
package/cjs/styled.js CHANGED
@@ -2,18 +2,37 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
5
  var styled = require('styled-components');
7
6
  var dsSystem = require('@elliemae/ds-system');
8
7
 
9
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
9
 
11
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
11
 
14
- var _templateObject, _templateObject2, _templateObject3;
15
- const showAnimation = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n"])));
16
- const hideAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.8);\n visibility: hidden;\n }\n"])));
12
+ const showAnimation = dsSystem.kfrm`
13
+ from {
14
+ opacity: 0;
15
+ transform: scale(0.8);
16
+ }
17
+
18
+ to {
19
+ opacity: 1;
20
+ transform: scale(1);
21
+ visibility: visible;
22
+ }
23
+ `;
24
+ const hideAnimation = dsSystem.kfrm`
25
+ from {
26
+ opacity: 1;
27
+ transform: scale(1);
28
+ }
29
+
30
+ to {
31
+ opacity: 0;
32
+ transform: scale(0.8);
33
+ visibility: hidden;
34
+ }
35
+ `;
17
36
  const StyledPopoverContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
18
37
  componentId: "sc-1giz5kx-0"
19
38
  })(["z-index:", ";"], _ref => {
@@ -30,7 +49,9 @@ const StyledAnimatedPopper = /*#__PURE__*/styled__default["default"].div.withCon
30
49
  animationDuration,
31
50
  withoutAnimation
32
51
  } = _ref2;
33
- return !withoutAnimation && dsSystem.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n animation: ", " ", "ms ease-in;\n "])), showPopover ? showAnimation : hideAnimation, animationDuration);
52
+ return !withoutAnimation && dsSystem.css`
53
+ animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
54
+ `;
34
55
  });
35
56
 
36
57
  exports.StyledAnimatedPopper = StyledAnimatedPopper;
package/cjs/utils/hooks/useOnClickOutside.js CHANGED
@@ -7,10 +7,8 @@ var react = require('react');
7
7
  function useOnClickOutside(ref, cb) {
8
8
  react.useEffect(() => {
9
9
  const listener = event => {
10
- var _ref$contains;
11
-
12
10
  // Do nothing if clicking ref's element or descendent elements
13
- if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
11
+ if (!ref || ref?.contains?.(event.target)) {
14
12
  return;
15
13
  }
16
14
 
package/esm/PopoverArrow.js CHANGED
@@ -18,7 +18,7 @@ const StyledArrow = /*#__PURE__*/styled.div.withConfig({
18
18
  theme
19
19
  } = _ref2;
20
20
  return theme.colors.neutral['000'];
21
- }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? "-".concat(arrowWidth / 2, "px;") : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? "-".concat(arrowHeight / 2, "px;") : '0;');
21
+ }, arrowHeight, arrowWidth, arrowHeight, arrowWidth, props => props['data-placement'].startsWith('top') || props['data-placement'].startsWith('bottom') ? `-${arrowWidth / 2}px;` : '0;', props => props['data-placement'].startsWith('left') || props['data-placement'].startsWith('right') ? `-${arrowHeight / 2}px;` : '0;');
22
22
  const PopoverArrow = _ref3 => {
23
23
  let {
24
24
  placement,
package/esm/config/useConfigDSPopperjs.js CHANGED
@@ -1,4 +1,3 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
1
  import { useState, useMemo, useEffect } from 'react';
3
2
  import { usePopper } from 'react-popper';
4
3
  import { useConfiguredMergedProps } from './useConfiguredMergedProps.js';
@@ -34,9 +33,7 @@ const useConfigDSPopperjs = appProps => {
34
33
  }
35
34
  }, [showPopover, withoutAnimation]);
36
35
  useOnClickOutside(popperElement, e => {
37
- var _referenceElement$con;
38
-
39
- 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))) {
36
+ if (!referenceElement?.contains?.(e?.target)) {
40
37
  onClickOutside(e);
41
38
  closeContextMenu();
42
39
  }
package/esm/styled.js CHANGED
@@ -1,10 +1,30 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
1
  import styled from 'styled-components';
3
2
  import { kfrm, css } from '@elliemae/ds-system';
4
3
 
5
- var _templateObject, _templateObject2, _templateObject3;
6
- const showAnimation = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: scale(0.8);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n visibility: visible;\n }\n"])));
7
- const hideAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0.8);\n visibility: hidden;\n }\n"])));
4
+ const showAnimation = kfrm`
5
+ from {
6
+ opacity: 0;
7
+ transform: scale(0.8);
8
+ }
9
+
10
+ to {
11
+ opacity: 1;
12
+ transform: scale(1);
13
+ visibility: visible;
14
+ }
15
+ `;
16
+ const hideAnimation = kfrm`
17
+ from {
18
+ opacity: 1;
19
+ transform: scale(1);
20
+ }
21
+
22
+ to {
23
+ opacity: 0;
24
+ transform: scale(0.8);
25
+ visibility: hidden;
26
+ }
27
+ `;
8
28
  const StyledPopoverContentWrapper = /*#__PURE__*/styled.div.withConfig({
9
29
  componentId: "sc-1giz5kx-0"
10
30
  })(["z-index:", ";"], _ref => {
@@ -21,7 +41,9 @@ const StyledAnimatedPopper = /*#__PURE__*/styled.div.withConfig({
21
41
  animationDuration,
22
42
  withoutAnimation
23
43
  } = _ref2;
24
- return !withoutAnimation && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " ", "ms ease-in;\n "])), showPopover ? showAnimation : hideAnimation, animationDuration);
44
+ return !withoutAnimation && css`
45
+ animation: ${showPopover ? showAnimation : hideAnimation} ${animationDuration}ms ease-in;
46
+ `;
25
47
  });
26
48
 
27
49
  export { StyledAnimatedPopper, StyledPopoverContentWrapper };
package/esm/utils/hooks/useOnClickOutside.js CHANGED
@@ -3,10 +3,8 @@ import { useEffect } from 'react';
3
3
  function useOnClickOutside(ref, cb) {
4
4
  useEffect(() => {
5
5
  const listener = event => {
6
- var _ref$contains;
7
-
8
6
  // Do nothing if clicking ref's element or descendent elements
9
- if (!ref || ref !== null && ref !== void 0 && (_ref$contains = ref.contains) !== null && _ref$contains !== void 0 && _ref$contains.call(ref, event.target)) {
7
+ if (!ref || ref?.contains?.(event.target)) {
10
8
  return;
11
9
  }
12
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-popperjs",
3
- "version": "2.4.2-rc.9",
3
+ "version": "2.4.2",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Popper JS Wrapper",
6
6
  "module": "./esm/index.js",
@@ -68,8 +68,8 @@
68
68
  "build": "node ../../scripts/build/build.js"
69
69
  },
70
70
  "dependencies": {
71
- "@elliemae/ds-props-helpers": "2.4.2-rc.9",
72
- "@elliemae/ds-system": "2.4.2-rc.9",
71
+ "@elliemae/ds-props-helpers": "2.4.2",
72
+ "@elliemae/ds-system": "2.4.2",
73
73
  "react-desc": "~4.1.3",
74
74
  "react-popper": "~2.2.5"
75
75
  },