@alfalab/core-components-popover 6.0.5 → 6.0.7

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 (12) hide show
  1. package/Component.js +18 -34
  2. package/cssm/Component.js +17 -33
  3. package/cssm/index.js +1 -0
  4. package/cssm/index.module.css +40 -56
  5. package/esm/Component.js +16 -32
  6. package/esm/index.css +49 -65
  7. package/esm/index.js +1 -0
  8. package/index.css +49 -65
  9. package/index.js +1 -0
  10. package/modern/Component.js +13 -4
  11. package/modern/index.css +49 -65
  12. package/package.json +6 -5
package/Component.js CHANGED
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var tslib = require('tslib');
3
4
  var React = require('react');
4
5
  var mergeRefs = require('react-merge-refs');
5
6
  var reactPopper = require('react-popper');
@@ -17,34 +18,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
18
19
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
19
20
 
20
- /******************************************************************************
21
- Copyright (c) Microsoft Corporation.
22
-
23
- Permission to use, copy, modify, and/or distribute this software for any
24
- purpose with or without fee is hereby granted.
25
-
26
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
27
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
28
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
29
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
30
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
31
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
32
- PERFORMANCE OF THIS SOFTWARE.
33
- ***************************************************************************** */
34
- var __assign = function () {
35
- __assign = Object.assign || function __assign(t) {
36
- for (var s, i = 1, n = arguments.length; i < n; i++) {
37
- s = arguments[i];
38
- for (var p in s)
39
- if (Object.prototype.hasOwnProperty.call(s, p))
40
- t[p] = s[p];
41
- }
42
- return t;
43
- };
44
- return __assign.apply(this, arguments);
45
- };
46
-
47
- var styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
21
+ var styles = {"component":"popover__component_1r45r","inner":"popover__inner_1r45r","scrollableContent":"popover__scrollableContent_1r45r","arrow":"popover__arrow_1r45r","arrowShift":"popover__arrowShift_1r45r","enter":"popover__enter_1r45r","enterActive":"popover__enterActive_1r45r","exit":"popover__exit_1r45r","exitActive":"popover__exitActive_1r45r"};
48
22
  require('./index.css')
49
23
 
50
24
  var DEFAULT_TRANSITION = {
@@ -82,6 +56,8 @@ var Popover = React.forwardRef(function (_a, ref) {
82
56
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
83
57
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
84
58
  var updatePopperRef = React.useRef();
59
+ var popperRef = React.useRef(null);
60
+ var innerRef = React.useRef(null);
85
61
  var popperModifiers = React.useMemo(function () {
86
62
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
87
63
  if (withArrow) {
@@ -97,8 +73,8 @@ var Popover = React.forwardRef(function (_a, ref) {
97
73
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
98
74
  }
99
75
  if (availableHeight) {
100
- modifiers.push(__assign(__assign({}, maxSize__default.default), { options: {} }));
101
- modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
76
+ modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
77
+ modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
102
78
  }
103
79
  return modifiers;
104
80
  }, [
@@ -159,17 +135,25 @@ var Popover = React.forwardRef(function (_a, ref) {
159
135
  }
160
136
  }
161
137
  }, [referenceElement, position]);
162
- var renderContent = function (computedZIndex, style) {
138
+ var renderContent = function (computedZIndex) {
163
139
  var _a, _b;
164
140
  var _c;
165
- return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
141
+ return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
166
142
  _a[styles.arrowShift] = arrowShift,
167
143
  _a)) }, attributes.popper),
168
- React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), style: style },
144
+ React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
169
145
  React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
170
146
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
171
147
  };
172
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
148
+ return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
149
+ var _a;
150
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
151
+ if (innerRef.current &&
152
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
153
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
154
+ }
155
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
156
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
173
157
  });
174
158
 
175
159
  exports.Popover = Popover;
package/cssm/Component.js CHANGED
@@ -1,5 +1,6 @@
1
1
  'use strict';
2
2
 
3
+ var tslib = require('tslib');
3
4
  var React = require('react');
4
5
  var mergeRefs = require('react-merge-refs');
5
6
  var reactPopper = require('react-popper');
@@ -19,33 +20,6 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
20
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
20
21
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
21
22
 
22
- /******************************************************************************
23
- Copyright (c) Microsoft Corporation.
24
-
25
- Permission to use, copy, modify, and/or distribute this software for any
26
- purpose with or without fee is hereby granted.
27
-
28
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
29
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
30
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
31
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
32
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
33
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
34
- PERFORMANCE OF THIS SOFTWARE.
35
- ***************************************************************************** */
36
- var __assign = function () {
37
- __assign = Object.assign || function __assign(t) {
38
- for (var s, i = 1, n = arguments.length; i < n; i++) {
39
- s = arguments[i];
40
- for (var p in s)
41
- if (Object.prototype.hasOwnProperty.call(s, p))
42
- t[p] = s[p];
43
- }
44
- return t;
45
- };
46
- return __assign.apply(this, arguments);
47
- };
48
-
49
23
  var DEFAULT_TRANSITION = {
50
24
  timeout: 150,
51
25
  };
@@ -81,6 +55,8 @@ var Popover = React.forwardRef(function (_a, ref) {
81
55
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
82
56
  var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
83
57
  var updatePopperRef = React.useRef();
58
+ var popperRef = React.useRef(null);
59
+ var innerRef = React.useRef(null);
84
60
  var popperModifiers = React.useMemo(function () {
85
61
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
86
62
  if (withArrow) {
@@ -96,8 +72,8 @@ var Popover = React.forwardRef(function (_a, ref) {
96
72
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
97
73
  }
98
74
  if (availableHeight) {
99
- modifiers.push(__assign(__assign({}, maxSize__default.default), { options: {} }));
100
- modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
75
+ modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
76
+ modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
101
77
  }
102
78
  return modifiers;
103
79
  }, [
@@ -158,17 +134,25 @@ var Popover = React.forwardRef(function (_a, ref) {
158
134
  }
159
135
  }
160
136
  }, [referenceElement, position]);
161
- var renderContent = function (computedZIndex, style) {
137
+ var renderContent = function (computedZIndex) {
162
138
  var _a, _b;
163
139
  var _c;
164
- return (React__default.default.createElement("div", __assign({ ref: mergeRefs__default.default([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
140
+ return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
165
141
  _a[styles__default.default.arrowShift] = arrowShift,
166
142
  _a)) }, attributes.popper),
167
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), style: style },
143
+ React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
168
144
  React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.scrollableContent] = availableHeight, _b)) }, children),
169
145
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
170
146
  };
171
- return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
147
+ return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
148
+ var _a;
149
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
150
+ if (innerRef.current &&
151
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
152
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
153
+ }
154
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
155
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
172
156
  });
173
157
 
174
158
  exports.Popover = Popover;
package/cssm/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Component = require('./Component.js');
4
+ require('tslib');
4
5
  require('react');
5
6
  require('react-merge-refs');
6
7
  require('react-popper');
package/cssm/index.module.css CHANGED
@@ -1,8 +1,10 @@
1
1
  :root {
2
+ } /* deprecated */ :root {
2
3
  --color-light-bg-primary: #fff;
3
4
  --color-light-text-primary: #0b1f35;
4
- }
5
- :root {
5
+ } :root {
6
+ } :root {
7
+ } :root {
6
8
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
7
9
 
8
10
  /* Hard */
@@ -10,33 +12,29 @@
10
12
  /* Up */
11
13
 
12
14
  /* Hard up */
13
- }
14
- :root {
15
+ } :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
15
20
  --popover-border-color: transparent;
16
- }
17
- .component {
21
+ } .component {
18
22
  background-color: transparent;
19
23
  color: var(--color-light-text-primary);
20
- }
21
- .inner {
24
+ } .inner {
22
25
  position: relative;
23
26
  background-color: var(--color-light-bg-primary);
24
27
  box-shadow: var(--shadow-m);
25
28
  border: 1px solid var(--popover-border-color);
26
- transition-property: opacity, transform;
27
- transition-timing-function: ease-in-out;
28
29
  box-sizing: border-box;
29
30
  will-change: transform;
30
- }
31
- .scrollableContent {
31
+ } .scrollableContent {
32
32
  position: relative;
33
33
  z-index: 2;
34
34
  overflow-y: auto;
35
- }
36
- .arrow {
35
+ } .arrow {
37
36
  z-index: 1;
38
- }
39
- .arrow:after {
37
+ } .arrow:after {
40
38
  content: '';
41
39
  display: block;
42
40
  position: absolute;
@@ -46,84 +44,70 @@
46
44
  border: 1px solid var(--popover-border-color);
47
45
  box-sizing: border-box;
48
46
  transform: rotate(45deg);
49
- }
50
- .component[data-popper-placement='left'] .arrow,
47
+ } .component[data-popper-placement='left'] .arrow,
51
48
  .component[data-popper-placement='left-start'] .arrow,
52
49
  .component[data-popper-placement='left-end'] .arrow {
53
50
  right: 5px
54
- }
55
- .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
51
+ } .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
56
52
  top: -6px;
57
53
  border-bottom: none;
58
54
  border-left: none;
59
- }
60
- .component[data-popper-placement='left-start'].arrowShift .arrow:after {
55
+ } .component[data-popper-placement='left-start'].arrowShift .arrow:after {
61
56
  top: -7px;
62
- }
63
- .component[data-popper-placement='left-end'].arrowShift .arrow:after {
57
+ } .component[data-popper-placement='left-end'].arrowShift .arrow:after {
64
58
  top: -5px;
65
- }
66
- .component[data-popper-placement='right'] .arrow,
59
+ } .component[data-popper-placement='right'] .arrow,
67
60
  .component[data-popper-placement='right-start'] .arrow,
68
61
  .component[data-popper-placement='right-end'] .arrow {
69
62
  left: -7px
70
- }
71
- .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
63
+ } .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
72
64
  top: -6px;
73
65
  border-top: none;
74
66
  border-right: none;
75
- }
76
- .component[data-popper-placement='right-start'].arrowShift .arrow:after {
67
+ } .component[data-popper-placement='right-start'].arrowShift .arrow:after {
77
68
  top: -7px;
78
- }
79
- .component[data-popper-placement='right-end'].arrowShift .arrow:after {
69
+ } .component[data-popper-placement='right-end'].arrowShift .arrow:after {
80
70
  top: -5px;
81
- }
82
- .component[data-popper-placement='top'] .arrow,
71
+ } .component[data-popper-placement='top'] .arrow,
83
72
  .component[data-popper-placement='top-start'] .arrow,
84
73
  .component[data-popper-placement='top-end'] .arrow {
85
74
  bottom: 5px
86
- }
87
- .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
75
+ } .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
88
76
  left: -6px;
89
77
  border-top: none;
90
78
  border-left: none;
91
- }
92
- .component[data-popper-placement='top-start'].arrowShift .arrow:after {
79
+ } .component[data-popper-placement='top-start'].arrowShift .arrow:after {
93
80
  left: -17px;
94
- }
95
- .component[data-popper-placement='top-end'].arrowShift .arrow:after {
81
+ } .component[data-popper-placement='top-end'].arrowShift .arrow:after {
96
82
  left: 5px;
97
- }
98
- .component[data-popper-placement='bottom'] .arrow,
83
+ } .component[data-popper-placement='bottom'] .arrow,
99
84
  .component[data-popper-placement='bottom-start'] .arrow,
100
85
  .component[data-popper-placement='bottom-end'] .arrow {
101
86
  top: -7px
102
- }
103
- .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
87
+ } .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
104
88
  left: -6px;
105
89
  border-bottom: none;
106
90
  border-right: none;
107
- }
108
- .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
91
+ } .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
109
92
  left: -17px;
110
- }
111
- .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
93
+ } .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
112
94
  left: 5px;
113
- }
114
- .enter .inner {
95
+ } .enter .inner {
115
96
  opacity: 0;
116
97
  transform: scale(0.98);
117
- }
118
- .enterActive .inner {
98
+ } .enterActive .inner {
119
99
  opacity: 1;
120
100
  transform: scale(1);
121
- }
122
- .exit .inner {
101
+ transition-property: opacity, transform;
102
+ transition-timing-function: ease-in-out;
103
+ transition-duration: 150ms;
104
+ } .exit .inner {
123
105
  opacity: 1;
124
106
  transform: scale(1);
125
- }
126
- .exitActive .inner {
107
+ } .exitActive .inner {
127
108
  opacity: 0;
128
109
  transform: scale(0.98);
110
+ transition-property: opacity, transform;
111
+ transition-timing-function: ease-in-out;
112
+ transition-duration: 150ms;
129
113
  }
package/esm/Component.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { __assign } from 'tslib';
1
2
  import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
2
3
  import mergeRefs from 'react-merge-refs';
3
4
  import { usePopper } from 'react-popper';
@@ -8,34 +9,7 @@ import maxSize from 'popper-max-size-modifier';
8
9
  import { Portal } from '@alfalab/core-components-portal/esm';
9
10
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
10
11
 
11
- /******************************************************************************
12
- Copyright (c) Microsoft Corporation.
13
-
14
- Permission to use, copy, modify, and/or distribute this software for any
15
- purpose with or without fee is hereby granted.
16
-
17
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
18
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
19
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
20
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
21
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
22
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
23
- PERFORMANCE OF THIS SOFTWARE.
24
- ***************************************************************************** */
25
- var __assign = function () {
26
- __assign = Object.assign || function __assign(t) {
27
- for (var s, i = 1, n = arguments.length; i < n; i++) {
28
- s = arguments[i];
29
- for (var p in s)
30
- if (Object.prototype.hasOwnProperty.call(s, p))
31
- t[p] = s[p];
32
- }
33
- return t;
34
- };
35
- return __assign.apply(this, arguments);
36
- };
37
-
38
- var styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
12
+ var styles = {"component":"popover__component_1r45r","inner":"popover__inner_1r45r","scrollableContent":"popover__scrollableContent_1r45r","arrow":"popover__arrow_1r45r","arrowShift":"popover__arrowShift_1r45r","enter":"popover__enter_1r45r","enterActive":"popover__enterActive_1r45r","exit":"popover__exit_1r45r","exitActive":"popover__exitActive_1r45r"};
39
13
  require('./index.css')
40
14
 
41
15
  var DEFAULT_TRANSITION = {
@@ -73,6 +47,8 @@ var Popover = forwardRef(function (_a, ref) {
73
47
  var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
74
48
  var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
75
49
  var updatePopperRef = useRef();
50
+ var popperRef = useRef(null);
51
+ var innerRef = useRef(null);
76
52
  var popperModifiers = useMemo(function () {
77
53
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
78
54
  if (withArrow) {
@@ -150,17 +126,25 @@ var Popover = forwardRef(function (_a, ref) {
150
126
  }
151
127
  }
152
128
  }, [referenceElement, position]);
153
- var renderContent = function (computedZIndex, style) {
129
+ var renderContent = function (computedZIndex) {
154
130
  var _a, _b;
155
131
  var _c;
156
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
132
+ return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
157
133
  _a[styles.arrowShift] = arrowShift,
158
134
  _a)) }, attributes.popper),
159
- React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
135
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
160
136
  React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
161
137
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
162
138
  };
163
- return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration: transitionDuration }))) : (open && renderContent(computedZIndex)))); }));
139
+ return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
140
+ var _a;
141
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
142
+ if (innerRef.current &&
143
+ transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
144
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
145
+ }
146
+ (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
147
+ } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
164
148
  });
165
149
 
166
150
  export { Popover };
package/esm/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: 43xrh */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_1r45r {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_1r45r {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_1r45r {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_1r45r {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_1r45r:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r,
49
+ .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r,
50
+ .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_1r45r[data-popper-placement='left-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_1r45r[data-popper-placement='left-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r,
61
+ .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r,
62
+ .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_1r45r[data-popper-placement='right-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_1r45r[data-popper-placement='right-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r,
73
+ .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r,
74
+ .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_1r45r[data-popper-placement='top-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_1r45r[data-popper-placement='top-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r,
85
+ .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r,
86
+ .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_1r45r[data-popper-placement='bottom-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_1r45r[data-popper-placement='bottom-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_1r45r .popover__inner_1r45r {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_1r45r .popover__inner_1r45r {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_1r45r .popover__inner_1r45r {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_1r45r .popover__inner_1r45r {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/esm/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  export { Popover } from './Component.js';
2
+ import 'tslib';
2
3
  import 'react';
3
4
  import 'react-merge-refs';
4
5
  import 'react-popper';
package/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: 43xrh */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_1r45r {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_1r45r {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_1r45r {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_1r45r {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_1r45r:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r,
49
+ .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r,
50
+ .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_1r45r[data-popper-placement='left-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_1r45r[data-popper-placement='left-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r,
61
+ .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r,
62
+ .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_1r45r[data-popper-placement='right-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_1r45r[data-popper-placement='right-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r,
73
+ .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r,
74
+ .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_1r45r[data-popper-placement='top-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_1r45r[data-popper-placement='top-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r,
85
+ .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r,
86
+ .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_1r45r[data-popper-placement='bottom-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_1r45r[data-popper-placement='bottom-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_1r45r .popover__inner_1r45r {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_1r45r .popover__inner_1r45r {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_1r45r .popover__inner_1r45r {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_1r45r .popover__inner_1r45r {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var Component = require('./Component.js');
4
+ require('tslib');
4
5
  require('react');
5
6
  require('react-merge-refs');
6
7
  require('react-popper');
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
9
  import { Stack, stackingOrder } from '@alfalab/core-components-stack/modern';
10
10
 
11
- const styles = {"component":"popover__component_1bn0c","inner":"popover__inner_1bn0c","scrollableContent":"popover__scrollableContent_1bn0c","arrow":"popover__arrow_1bn0c","arrowShift":"popover__arrowShift_1bn0c","enter":"popover__enter_1bn0c","enterActive":"popover__enterActive_1bn0c","exit":"popover__exit_1bn0c","exitActive":"popover__exitActive_1bn0c"};
11
+ const styles = {"component":"popover__component_1r45r","inner":"popover__inner_1r45r","scrollableContent":"popover__scrollableContent_1r45r","arrow":"popover__arrow_1r45r","arrowShift":"popover__arrowShift_1r45r","enter":"popover__enter_1r45r","enterActive":"popover__enterActive_1r45r","exit":"popover__exit_1r45r","exitActive":"popover__exitActive_1r45r"};
12
12
  require('./index.css')
13
13
 
14
14
  const DEFAULT_TRANSITION = {
@@ -44,6 +44,8 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
44
44
  const [arrowElement, setArrowElement] = useState(null);
45
45
  const [arrowShift, setArrowShift] = useState(false);
46
46
  const updatePopperRef = useRef();
47
+ const popperRef = useRef(null);
48
+ const innerRef = useRef(null);
47
49
  const popperModifiers = useMemo(() => {
48
50
  const modifiers = [{ name: 'offset', options: { offset } }];
49
51
  if (withArrow) {
@@ -121,7 +123,7 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
121
123
  }
122
124
  }
123
125
  }, [referenceElement, position]);
124
- const renderContent = (computedZIndex, style) => (React.createElement("div", { ref: mergeRefs([ref, setPopperElement]), style: {
126
+ const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
125
127
  zIndex: computedZIndex,
126
128
  width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
127
129
  ...popperStyles.popper,
@@ -129,10 +131,17 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
129
131
  }, "data-test-id": dataTestId, className: cn(styles.component, className, {
130
132
  [styles.arrowShift]: arrowShift,
131
133
  }), ...attributes.popper },
132
- React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
134
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
133
135
  React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
134
136
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
135
- return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, ...transition, in: open }, renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
137
+ return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef, ...transition, in: open, onEntering: (node, isAppearing) => {
138
+ // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
139
+ if (innerRef.current &&
140
+ transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
141
+ innerRef.current.style.setProperty('transition-duration', transitionDuration);
142
+ }
143
+ transition?.onEntering?.(node, isAppearing);
144
+ } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
136
145
  });
137
146
 
138
147
  export { Popover };
package/modern/index.css CHANGED
@@ -1,9 +1,11 @@
1
- /* hash: m3scs */
1
+ /* hash: 43xrh */
2
2
  :root {
3
+ } /* deprecated */ :root {
3
4
  --color-light-bg-primary: #fff;
4
5
  --color-light-text-primary: #0b1f35;
5
- }
6
- :root {
6
+ } :root {
7
+ } :root {
8
+ } :root {
7
9
  --shadow-m: 0 0 16px rgba(11, 31, 53, 0.08), 0 8px 16px rgba(11, 31, 53, 0.16);
8
10
 
9
11
  /* Hard */
@@ -11,33 +13,29 @@
11
13
  /* Up */
12
14
 
13
15
  /* Hard up */
14
- }
15
- :root {
16
+ } :root {
17
+ } :root {
18
+ } :root {
19
+ } :root {
20
+ } :root {
16
21
  --popover-border-color: transparent;
17
- }
18
- .popover__component_1bn0c {
22
+ } .popover__component_1r45r {
19
23
  background-color: transparent;
20
24
  color: var(--color-light-text-primary);
21
- }
22
- .popover__inner_1bn0c {
25
+ } .popover__inner_1r45r {
23
26
  position: relative;
24
27
  background-color: var(--color-light-bg-primary);
25
28
  box-shadow: var(--shadow-m);
26
29
  border: 1px solid var(--popover-border-color);
27
- transition-property: opacity, transform;
28
- transition-timing-function: ease-in-out;
29
30
  box-sizing: border-box;
30
31
  will-change: transform;
31
- }
32
- .popover__scrollableContent_1bn0c {
32
+ } .popover__scrollableContent_1r45r {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
- }
37
- .popover__arrow_1bn0c {
36
+ } .popover__arrow_1r45r {
38
37
  z-index: 1;
39
- }
40
- .popover__arrow_1bn0c:after {
38
+ } .popover__arrow_1r45r:after {
41
39
  content: '';
42
40
  display: block;
43
41
  position: absolute;
@@ -47,84 +45,70 @@
47
45
  border: 1px solid var(--popover-border-color);
48
46
  box-sizing: border-box;
49
47
  transform: rotate(45deg);
50
- }
51
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c,
52
- .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c,
53
- .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c {
48
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r,
49
+ .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r,
50
+ .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r {
54
51
  right: 5px
55
- }
56
- .popover__component_1bn0c[data-popper-placement='left'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='left-end'] .popover__arrow_1bn0c:after {
52
+ } .popover__component_1r45r[data-popper-placement='left'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='left-end'] .popover__arrow_1r45r:after {
57
53
  top: -6px;
58
54
  border-bottom: none;
59
55
  border-left: none;
60
- }
61
- .popover__component_1bn0c[data-popper-placement='left-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
56
+ } .popover__component_1r45r[data-popper-placement='left-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
62
57
  top: -7px;
63
- }
64
- .popover__component_1bn0c[data-popper-placement='left-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
58
+ } .popover__component_1r45r[data-popper-placement='left-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
65
59
  top: -5px;
66
- }
67
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c,
68
- .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c,
69
- .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c {
60
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r,
61
+ .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r,
62
+ .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r {
70
63
  left: -7px
71
- }
72
- .popover__component_1bn0c[data-popper-placement='right'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='right-end'] .popover__arrow_1bn0c:after {
64
+ } .popover__component_1r45r[data-popper-placement='right'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='right-end'] .popover__arrow_1r45r:after {
73
65
  top: -6px;
74
66
  border-top: none;
75
67
  border-right: none;
76
- }
77
- .popover__component_1bn0c[data-popper-placement='right-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
68
+ } .popover__component_1r45r[data-popper-placement='right-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
78
69
  top: -7px;
79
- }
80
- .popover__component_1bn0c[data-popper-placement='right-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
70
+ } .popover__component_1r45r[data-popper-placement='right-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
81
71
  top: -5px;
82
- }
83
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c,
84
- .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c,
85
- .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c {
72
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r,
73
+ .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r,
74
+ .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r {
86
75
  bottom: 5px
87
- }
88
- .popover__component_1bn0c[data-popper-placement='top'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='top-end'] .popover__arrow_1bn0c:after {
76
+ } .popover__component_1r45r[data-popper-placement='top'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='top-end'] .popover__arrow_1r45r:after {
89
77
  left: -6px;
90
78
  border-top: none;
91
79
  border-left: none;
92
- }
93
- .popover__component_1bn0c[data-popper-placement='top-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
80
+ } .popover__component_1r45r[data-popper-placement='top-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
94
81
  left: -17px;
95
- }
96
- .popover__component_1bn0c[data-popper-placement='top-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
82
+ } .popover__component_1r45r[data-popper-placement='top-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
97
83
  left: 5px;
98
- }
99
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c,
100
- .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c,
101
- .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c {
84
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r,
85
+ .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r,
86
+ .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r {
102
87
  top: -7px
103
- }
104
- .popover__component_1bn0c[data-popper-placement='bottom'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-start'] .popover__arrow_1bn0c:after, .popover__component_1bn0c[data-popper-placement='bottom-end'] .popover__arrow_1bn0c:after {
88
+ } .popover__component_1r45r[data-popper-placement='bottom'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-start'] .popover__arrow_1r45r:after, .popover__component_1r45r[data-popper-placement='bottom-end'] .popover__arrow_1r45r:after {
105
89
  left: -6px;
106
90
  border-bottom: none;
107
91
  border-right: none;
108
- }
109
- .popover__component_1bn0c[data-popper-placement='bottom-start'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
92
+ } .popover__component_1r45r[data-popper-placement='bottom-start'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
110
93
  left: -17px;
111
- }
112
- .popover__component_1bn0c[data-popper-placement='bottom-end'].popover__arrowShift_1bn0c .popover__arrow_1bn0c:after {
94
+ } .popover__component_1r45r[data-popper-placement='bottom-end'].popover__arrowShift_1r45r .popover__arrow_1r45r:after {
113
95
  left: 5px;
114
- }
115
- .popover__enter_1bn0c .popover__inner_1bn0c {
96
+ } .popover__enter_1r45r .popover__inner_1r45r {
116
97
  opacity: 0;
117
98
  transform: scale(0.98);
118
- }
119
- .popover__enterActive_1bn0c .popover__inner_1bn0c {
99
+ } .popover__enterActive_1r45r .popover__inner_1r45r {
120
100
  opacity: 1;
121
101
  transform: scale(1);
122
- }
123
- .popover__exit_1bn0c .popover__inner_1bn0c {
102
+ transition-property: opacity, transform;
103
+ transition-timing-function: ease-in-out;
104
+ transition-duration: 150ms;
105
+ } .popover__exit_1r45r .popover__inner_1r45r {
124
106
  opacity: 1;
125
107
  transform: scale(1);
126
- }
127
- .popover__exitActive_1bn0c .popover__inner_1bn0c {
108
+ } .popover__exitActive_1r45r .popover__inner_1r45r {
128
109
  opacity: 0;
129
110
  transform: scale(0.98);
111
+ transition-property: opacity, transform;
112
+ transition-timing-function: ease-in-out;
113
+ transition-duration: 150ms;
130
114
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.0.5",
3
+ "version": "6.0.7",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,17 +18,18 @@
18
18
  "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
19
19
  },
20
20
  "dependencies": {
21
- "@alfalab/core-components-portal": "^3.1.2",
22
- "@alfalab/core-components-stack": "^4.0.2",
21
+ "@alfalab/core-components-portal": "^3.1.3",
22
+ "@alfalab/core-components-stack": "^4.0.3",
23
23
  "@juggle/resize-observer": "^3.3.1",
24
24
  "@popperjs/core": "^2.3.3",
25
25
  "classnames": "^2.3.1",
26
26
  "popper-max-size-modifier": "^0.2.0",
27
27
  "react-merge-refs": "^1.1.0",
28
28
  "react-popper": "^2.3.0",
29
- "react-transition-group": "^4.4.1"
29
+ "react-transition-group": "^4.4.5",
30
+ "tslib": "^2.4.0"
30
31
  },
31
32
  "devDependencies": {
32
- "@types/react-transition-group": "^4.2.4"
33
+ "@types/react-transition-group": "^4.4.5"
33
34
  }
34
35
  }