@alfalab/core-components-popover 5.6.0 → 5.6.1

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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/Component.js +28 -7
  3. package/dist/cssm/Component.js +27 -6
  4. package/dist/cssm/index.module.css +8 -8
  5. package/dist/esm/Component.js +28 -7
  6. package/dist/esm/index.css +34 -34
  7. package/dist/index.css +34 -34
  8. package/dist/modern/Component.js +26 -6
  9. package/dist/modern/index.css +34 -34
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [5.6.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.6.0...@alfalab/core-components-popover@5.6.1) (2022-02-15)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **gallery:** update header button's tooltip position ([#979](https://github.com/alfa-laboratory/core-components/issues/979)) ([8e2acfc](https://github.com/alfa-laboratory/core-components/commit/8e2acfcb772cf4d8051c185a3f1caaaf507b5bc9))
12
+
13
+
14
+
15
+
16
+
6
17
  # [5.6.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-popover@5.5.0...@alfalab/core-components-popover@5.6.0) (2021-12-01)
7
18
 
8
19
 
package/dist/Component.js CHANGED
@@ -46,7 +46,7 @@ var __assign = function () {
46
46
  return __assign.apply(this, arguments);
47
47
  };
48
48
 
49
- var styles = {"component":"popover__component_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
49
+ var styles = {"component":"popover__component_dvtgo","inner":"popover__inner_dvtgo","scrollableContent":"popover__scrollableContent_dvtgo","arrow":"popover__arrow_dvtgo","arrowShift":"popover__arrowShift_dvtgo","enter":"popover__enter_dvtgo","enterActive":"popover__enterActive_dvtgo","exit":"popover__exit_dvtgo","exitActive":"popover__exitActive_dvtgo"};
50
50
  require('./index.css')
51
51
 
52
52
  var DEFAULT_TRANSITION = {
@@ -72,11 +72,17 @@ var availableHieghtModifier = {
72
72
  }
73
73
  },
74
74
  };
75
+ /**
76
+ * Минимальный размер anchorElement,
77
+ * при котором возможно смещение стрелочки относительно центра
78
+ */
79
+ var MIN_ARROW_SHIFT_SIZE = 75;
75
80
  var Popover = React.forwardRef(function (_a, ref) {
76
81
  var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
77
82
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
78
83
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
79
84
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
85
+ var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
80
86
  var updatePopperRef = React.useRef();
81
87
  var getModifiers = React.useCallback(function () {
82
88
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -106,10 +112,10 @@ var Popover = React.forwardRef(function (_a, ref) {
106
112
  availableHeight,
107
113
  arrowElement,
108
114
  ]);
109
- var _p = reactPopper.usePopper(referenceElement, popperElement, {
115
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
110
116
  placement: position,
111
117
  modifiers: getModifiers(),
112
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
118
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
113
119
  if (updatePopper) {
114
120
  updatePopperRef.current = updatePopper;
115
121
  }
@@ -144,12 +150,27 @@ var Popover = React.forwardRef(function (_a, ref) {
144
150
  }
145
151
  return function () { return ({}); };
146
152
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
153
+ /**
154
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
155
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
156
+ */
157
+ React.useEffect(function () {
158
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
159
+ if (shiftedPosition && referenceElement) {
160
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
161
+ var size = position.includes('left') || position.includes('right') ? height : width;
162
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
163
+ setArrowShift(true);
164
+ }
165
+ }
166
+ }, [referenceElement, position]);
147
167
  var renderContent = function (computedZIndex, style) {
148
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]),
149
- // ref={setPopperElement}
150
- style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className) }, attributes.popper),
168
+ var _a, _b;
169
+ return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles.component, className, (_a = {},
170
+ _a[styles.arrowShift] = arrowShift,
171
+ _a)) }, attributes.popper),
151
172
  React__default['default'].createElement("div", { className: cn__default['default'](styles.inner, popperClassName), style: style },
152
- React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles.scrollableContent : '') }, children),
173
+ React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
153
174
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles.arrow, arrowClassName) })))));
154
175
  };
155
176
  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)))); }));
package/dist/cssm/Component.js CHANGED
@@ -71,11 +71,17 @@ var availableHieghtModifier = {
71
71
  }
72
72
  },
73
73
  };
74
+ /**
75
+ * Минимальный размер anchorElement,
76
+ * при котором возможно смещение стрелочки относительно центра
77
+ */
78
+ var MIN_ARROW_SHIFT_SIZE = 75;
74
79
  var Popover = React.forwardRef(function (_a, ref) {
75
80
  var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? coreComponentsStack.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
76
81
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
77
82
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
78
83
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
84
+ var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
79
85
  var updatePopperRef = React.useRef();
80
86
  var getModifiers = React.useCallback(function () {
81
87
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -105,10 +111,10 @@ var Popover = React.forwardRef(function (_a, ref) {
105
111
  availableHeight,
106
112
  arrowElement,
107
113
  ]);
108
- var _p = reactPopper.usePopper(referenceElement, popperElement, {
114
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
109
115
  placement: position,
110
116
  modifiers: getModifiers(),
111
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
117
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
112
118
  if (updatePopper) {
113
119
  updatePopperRef.current = updatePopper;
114
120
  }
@@ -143,12 +149,27 @@ var Popover = React.forwardRef(function (_a, ref) {
143
149
  }
144
150
  return function () { return ({}); };
145
151
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
152
+ /**
153
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
154
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
155
+ */
156
+ React.useEffect(function () {
157
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
158
+ if (shiftedPosition && referenceElement) {
159
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
160
+ var size = position.includes('left') || position.includes('right') ? height : width;
161
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
162
+ setArrowShift(true);
163
+ }
164
+ }
165
+ }, [referenceElement, position]);
146
166
  var renderContent = function (computedZIndex, style) {
147
- return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]),
148
- // ref={setPopperElement}
149
- style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className) }, attributes.popper),
167
+ var _a, _b;
168
+ return (React__default['default'].createElement("div", __assign({ ref: mergeRefs__default['default']([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn__default['default'](styles__default['default'].component, className, (_a = {},
169
+ _a[styles__default['default'].arrowShift] = arrowShift,
170
+ _a)) }, attributes.popper),
150
171
  React__default['default'].createElement("div", { className: cn__default['default'](styles__default['default'].inner, popperClassName), style: style },
151
- React__default['default'].createElement("div", { className: cn__default['default'](availableHeight ? styles__default['default'].scrollableContent : '') }, children),
172
+ React__default['default'].createElement("div", { className: cn__default['default']((_b = {}, _b[styles__default['default'].scrollableContent] = availableHeight, _b)) }, children),
152
173
  withArrow && (React__default['default'].createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default['default'](styles__default['default'].arrow, arrowClassName) })))));
153
174
  };
154
175
  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)))); }));
package/dist/cssm/index.module.css CHANGED
@@ -57,10 +57,10 @@
57
57
  border-bottom: none;
58
58
  border-left: none;
59
59
  }
60
- .component[data-popper-placement='left-start'] .arrow:after {
60
+ .component[data-popper-placement='left-start'].arrowShift .arrow:after {
61
61
  top: -7px;
62
62
  }
63
- .component[data-popper-placement='left-end'] .arrow:after {
63
+ .component[data-popper-placement='left-end'].arrowShift .arrow:after {
64
64
  top: -5px;
65
65
  }
66
66
  .component[data-popper-placement='right'] .arrow,
@@ -73,10 +73,10 @@
73
73
  border-top: none;
74
74
  border-right: none;
75
75
  }
76
- .component[data-popper-placement='right-start'] .arrow:after {
76
+ .component[data-popper-placement='right-start'].arrowShift .arrow:after {
77
77
  top: -7px;
78
78
  }
79
- .component[data-popper-placement='right-end'] .arrow:after {
79
+ .component[data-popper-placement='right-end'].arrowShift .arrow:after {
80
80
  top: -5px;
81
81
  }
82
82
  .component[data-popper-placement='top'] .arrow,
@@ -89,10 +89,10 @@
89
89
  border-top: none;
90
90
  border-left: none;
91
91
  }
92
- .component[data-popper-placement='top-start'] .arrow:after {
92
+ .component[data-popper-placement='top-start'].arrowShift .arrow:after {
93
93
  left: -17px;
94
94
  }
95
- .component[data-popper-placement='top-end'] .arrow:after {
95
+ .component[data-popper-placement='top-end'].arrowShift .arrow:after {
96
96
  left: 5px;
97
97
  }
98
98
  .component[data-popper-placement='bottom'] .arrow,
@@ -105,10 +105,10 @@
105
105
  border-bottom: none;
106
106
  border-right: none;
107
107
  }
108
- .component[data-popper-placement='bottom-start'] .arrow:after {
108
+ .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
109
109
  left: -17px;
110
110
  }
111
- .component[data-popper-placement='bottom-end'] .arrow:after {
111
+ .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
112
112
  left: 5px;
113
113
  }
114
114
  .enter .inner {
package/dist/esm/Component.js CHANGED
@@ -35,7 +35,7 @@ var __assign = function () {
35
35
  return __assign.apply(this, arguments);
36
36
  };
37
37
 
38
- var styles = {"component":"popover__component_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
38
+ var styles = {"component":"popover__component_dvtgo","inner":"popover__inner_dvtgo","scrollableContent":"popover__scrollableContent_dvtgo","arrow":"popover__arrow_dvtgo","arrowShift":"popover__arrowShift_dvtgo","enter":"popover__enter_dvtgo","enterActive":"popover__enterActive_dvtgo","exit":"popover__exit_dvtgo","exitActive":"popover__exitActive_dvtgo"};
39
39
  require('./index.css')
40
40
 
41
41
  var DEFAULT_TRANSITION = {
@@ -61,11 +61,17 @@ var availableHieghtModifier = {
61
61
  }
62
62
  },
63
63
  };
64
+ /**
65
+ * Минимальный размер anchorElement,
66
+ * при котором возможно смещение стрелочки относительно центра
67
+ */
68
+ var MIN_ARROW_SHIFT_SIZE = 75;
64
69
  var Popover = forwardRef(function (_a, ref) {
65
70
  var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? [0, 0] : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? transition.timeout + "ms" : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
66
71
  var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
67
72
  var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
68
73
  var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
74
+ var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
69
75
  var updatePopperRef = useRef();
70
76
  var getModifiers = useCallback(function () {
71
77
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
@@ -95,10 +101,10 @@ var Popover = forwardRef(function (_a, ref) {
95
101
  availableHeight,
96
102
  arrowElement,
97
103
  ]);
98
- var _p = usePopper(referenceElement, popperElement, {
104
+ var _q = usePopper(referenceElement, popperElement, {
99
105
  placement: position,
100
106
  modifiers: getModifiers(),
101
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
107
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
102
108
  if (updatePopper) {
103
109
  updatePopperRef.current = updatePopper;
104
110
  }
@@ -133,12 +139,27 @@ var Popover = forwardRef(function (_a, ref) {
133
139
  }
134
140
  return function () { return ({}); };
135
141
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
142
+ /**
143
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
144
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
145
+ */
146
+ useEffect(function () {
147
+ var shiftedPosition = position.includes('-start') || position.includes('-end');
148
+ if (shiftedPosition && referenceElement) {
149
+ var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
150
+ var size = position.includes('left') || position.includes('right') ? height : width;
151
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
152
+ setArrowShift(true);
153
+ }
154
+ }
155
+ }, [referenceElement, position]);
136
156
  var renderContent = function (computedZIndex, style) {
137
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]),
138
- // ref={setPopperElement}
139
- style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
157
+ var _a, _b;
158
+ return (React.createElement("div", __assign({ ref: mergeRefs([ref, setPopperElement]), style: __assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
159
+ _a[styles.arrowShift] = arrowShift,
160
+ _a)) }, attributes.popper),
140
161
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
141
- React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
162
+ React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
142
163
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
143
164
  };
144
165
  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)))); }));
package/dist/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1x604 */
1
+ /* hash: 5ddm6 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_bivb4 {
18
+ .popover__component_dvtgo {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_bivb4 {
22
+ .popover__inner_dvtgo {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_bivb4 {
32
+ .popover__scrollableContent_dvtgo {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_bivb4 {
37
+ .popover__arrow_dvtgo {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_bivb4:after {
40
+ .popover__arrow_dvtgo:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
51
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
52
+ .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
53
+ .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
54
54
  right: 5px
55
55
  }
56
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
56
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
61
+ .popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
64
+ .popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
67
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
68
+ .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
69
+ .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
70
70
  left: -7px
71
71
  }
72
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
72
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
77
+ .popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
80
+ .popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
83
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
84
+ .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
85
+ .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
88
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
93
+ .popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
96
+ .popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
99
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
100
+ .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
101
+ .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
102
102
  top: -7px
103
103
  }
104
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
104
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
109
+ .popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
112
+ .popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_bivb4 .popover__inner_bivb4 {
115
+ .popover__enter_dvtgo .popover__inner_dvtgo {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_bivb4 .popover__inner_bivb4 {
119
+ .popover__enterActive_dvtgo .popover__inner_dvtgo {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_bivb4 .popover__inner_bivb4 {
123
+ .popover__exit_dvtgo .popover__inner_dvtgo {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_bivb4 .popover__inner_bivb4 {
127
+ .popover__exitActive_dvtgo .popover__inner_dvtgo {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1x604 */
1
+ /* hash: 5ddm6 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_bivb4 {
18
+ .popover__component_dvtgo {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_bivb4 {
22
+ .popover__inner_dvtgo {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_bivb4 {
32
+ .popover__scrollableContent_dvtgo {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_bivb4 {
37
+ .popover__arrow_dvtgo {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_bivb4:after {
40
+ .popover__arrow_dvtgo:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
51
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
52
+ .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
53
+ .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
54
54
  right: 5px
55
55
  }
56
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
56
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
61
+ .popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
64
+ .popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
67
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
68
+ .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
69
+ .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
70
70
  left: -7px
71
71
  }
72
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
72
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
77
+ .popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
80
+ .popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
83
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
84
+ .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
85
+ .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
88
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
93
+ .popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
96
+ .popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
99
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
100
+ .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
101
+ .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
102
102
  top: -7px
103
103
  }
104
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
104
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
109
+ .popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
112
+ .popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_bivb4 .popover__inner_bivb4 {
115
+ .popover__enter_dvtgo .popover__inner_dvtgo {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_bivb4 .popover__inner_bivb4 {
119
+ .popover__enterActive_dvtgo .popover__inner_dvtgo {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_bivb4 .popover__inner_bivb4 {
123
+ .popover__exit_dvtgo .popover__inner_dvtgo {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_bivb4 .popover__inner_bivb4 {
127
+ .popover__exitActive_dvtgo .popover__inner_dvtgo {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/dist/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import { ResizeObserver } from 'resize-observer';
8
8
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/dist/modern';
9
9
  import { Portal } from '@alfalab/core-components-portal/dist/modern';
10
10
 
11
- var styles = {"component":"popover__component_bivb4","inner":"popover__inner_bivb4","scrollableContent":"popover__scrollableContent_bivb4","arrow":"popover__arrow_bivb4","enter":"popover__enter_bivb4","enterActive":"popover__enterActive_bivb4","exit":"popover__exit_bivb4","exitActive":"popover__exitActive_bivb4"};
11
+ var styles = {"component":"popover__component_dvtgo","inner":"popover__inner_dvtgo","scrollableContent":"popover__scrollableContent_dvtgo","arrow":"popover__arrow_dvtgo","arrowShift":"popover__arrowShift_dvtgo","enter":"popover__enter_dvtgo","enterActive":"popover__enterActive_dvtgo","exit":"popover__exit_dvtgo","exitActive":"popover__exitActive_dvtgo"};
12
12
  require('./index.css')
13
13
 
14
14
  const DEFAULT_TRANSITION = {
@@ -33,10 +33,16 @@ const availableHieghtModifier = {
33
33
  }
34
34
  },
35
35
  };
36
+ /**
37
+ * Минимальный размер anchorElement,
38
+ * при котором возможно смещение стрелочки относительно центра
39
+ */
40
+ const MIN_ARROW_SHIFT_SIZE = 75;
36
41
  const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = [0, 0], withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
37
42
  const [referenceElement, setReferenceElement] = useState(anchorElement);
38
43
  const [popperElement, setPopperElement] = useState(null);
39
44
  const [arrowElement, setArrowElement] = useState(null);
45
+ const [arrowShift, setArrowShift] = useState(false);
40
46
  const updatePopperRef = useRef();
41
47
  const getModifiers = useCallback(() => {
42
48
  const modifiers = [{ name: 'offset', options: { offset } }];
@@ -104,16 +110,30 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
104
110
  }
105
111
  return () => ({});
106
112
  }, [anchorElement, updatePopoverWidth, useAnchorWidth]);
113
+ /**
114
+ * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
115
+ * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
116
+ */
117
+ useEffect(() => {
118
+ const shiftedPosition = position.includes('-start') || position.includes('-end');
119
+ if (shiftedPosition && referenceElement) {
120
+ const { width, height } = referenceElement.getBoundingClientRect();
121
+ const size = position.includes('left') || position.includes('right') ? height : width;
122
+ if (size >= MIN_ARROW_SHIFT_SIZE) {
123
+ setArrowShift(true);
124
+ }
125
+ }
126
+ }, [referenceElement, position]);
107
127
  const renderContent = (computedZIndex, style) => {
108
- return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]),
109
- // ref={setPopperElement}
110
- style: {
128
+ return (React.createElement("div", Object.assign({ ref: mergeRefs([ref, setPopperElement]), style: {
111
129
  zIndex: computedZIndex,
112
130
  width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
113
131
  ...popperStyles.popper,
114
- }, "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
132
+ }, "data-test-id": dataTestId, className: cn(styles.component, className, {
133
+ [styles.arrowShift]: arrowShift,
134
+ }) }, attributes.popper),
115
135
  React.createElement("div", { className: cn(styles.inner, popperClassName), style: style },
116
- React.createElement("div", { className: cn(availableHeight ? styles.scrollableContent : '') }, children),
136
+ React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
117
137
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
118
138
  };
119
139
  return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, Object.assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES }, transition, { in: open }), renderContent(computedZIndex, { transitionDuration }))) : (open && renderContent(computedZIndex))))));
package/dist/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1x604 */
1
+ /* hash: 5ddm6 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-text-primary: #0b1f35;
@@ -15,11 +15,11 @@
15
15
  :root {
16
16
  --popover-border-color: transparent;
17
17
  }
18
- .popover__component_bivb4 {
18
+ .popover__component_dvtgo {
19
19
  background-color: transparent;
20
20
  color: var(--color-light-text-primary);
21
21
  }
22
- .popover__inner_bivb4 {
22
+ .popover__inner_dvtgo {
23
23
  position: relative;
24
24
  background-color: var(--color-light-bg-primary);
25
25
  box-shadow: var(--shadow-m);
@@ -29,15 +29,15 @@
29
29
  box-sizing: border-box;
30
30
  will-change: transform;
31
31
  }
32
- .popover__scrollableContent_bivb4 {
32
+ .popover__scrollableContent_dvtgo {
33
33
  position: relative;
34
34
  z-index: 2;
35
35
  overflow-y: auto;
36
36
  }
37
- .popover__arrow_bivb4 {
37
+ .popover__arrow_dvtgo {
38
38
  z-index: 1;
39
39
  }
40
- .popover__arrow_bivb4:after {
40
+ .popover__arrow_dvtgo:after {
41
41
  content: '';
42
42
  display: block;
43
43
  position: absolute;
@@ -48,83 +48,83 @@
48
48
  box-sizing: border-box;
49
49
  transform: rotate(45deg);
50
50
  }
51
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4,
52
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4,
53
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4 {
51
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo,
52
+ .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo,
53
+ .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo {
54
54
  right: 5px
55
55
  }
56
- .popover__component_bivb4[data-popper-placement='left'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
56
+ .popover__component_dvtgo[data-popper-placement='left'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='left-end'] .popover__arrow_dvtgo:after {
57
57
  top: -6px;
58
58
  border-bottom: none;
59
59
  border-left: none;
60
60
  }
61
- .popover__component_bivb4[data-popper-placement='left-start'] .popover__arrow_bivb4:after {
61
+ .popover__component_dvtgo[data-popper-placement='left-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
62
62
  top: -7px;
63
63
  }
64
- .popover__component_bivb4[data-popper-placement='left-end'] .popover__arrow_bivb4:after {
64
+ .popover__component_dvtgo[data-popper-placement='left-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
65
65
  top: -5px;
66
66
  }
67
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4,
68
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4,
69
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4 {
67
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo,
68
+ .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo,
69
+ .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo {
70
70
  left: -7px
71
71
  }
72
- .popover__component_bivb4[data-popper-placement='right'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
72
+ .popover__component_dvtgo[data-popper-placement='right'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='right-end'] .popover__arrow_dvtgo:after {
73
73
  top: -6px;
74
74
  border-top: none;
75
75
  border-right: none;
76
76
  }
77
- .popover__component_bivb4[data-popper-placement='right-start'] .popover__arrow_bivb4:after {
77
+ .popover__component_dvtgo[data-popper-placement='right-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
78
78
  top: -7px;
79
79
  }
80
- .popover__component_bivb4[data-popper-placement='right-end'] .popover__arrow_bivb4:after {
80
+ .popover__component_dvtgo[data-popper-placement='right-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
81
81
  top: -5px;
82
82
  }
83
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4,
84
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4,
85
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4 {
83
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo,
84
+ .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo,
85
+ .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo {
86
86
  bottom: 5px
87
87
  }
88
- .popover__component_bivb4[data-popper-placement='top'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
88
+ .popover__component_dvtgo[data-popper-placement='top'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='top-end'] .popover__arrow_dvtgo:after {
89
89
  left: -6px;
90
90
  border-top: none;
91
91
  border-left: none;
92
92
  }
93
- .popover__component_bivb4[data-popper-placement='top-start'] .popover__arrow_bivb4:after {
93
+ .popover__component_dvtgo[data-popper-placement='top-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
94
94
  left: -17px;
95
95
  }
96
- .popover__component_bivb4[data-popper-placement='top-end'] .popover__arrow_bivb4:after {
96
+ .popover__component_dvtgo[data-popper-placement='top-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
97
97
  left: 5px;
98
98
  }
99
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4,
100
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4,
101
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4 {
99
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo,
100
+ .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo,
101
+ .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo {
102
102
  top: -7px
103
103
  }
104
- .popover__component_bivb4[data-popper-placement='bottom'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after, .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
104
+ .popover__component_dvtgo[data-popper-placement='bottom'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-start'] .popover__arrow_dvtgo:after, .popover__component_dvtgo[data-popper-placement='bottom-end'] .popover__arrow_dvtgo:after {
105
105
  left: -6px;
106
106
  border-bottom: none;
107
107
  border-right: none;
108
108
  }
109
- .popover__component_bivb4[data-popper-placement='bottom-start'] .popover__arrow_bivb4:after {
109
+ .popover__component_dvtgo[data-popper-placement='bottom-start'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
110
110
  left: -17px;
111
111
  }
112
- .popover__component_bivb4[data-popper-placement='bottom-end'] .popover__arrow_bivb4:after {
112
+ .popover__component_dvtgo[data-popper-placement='bottom-end'].popover__arrowShift_dvtgo .popover__arrow_dvtgo:after {
113
113
  left: 5px;
114
114
  }
115
- .popover__enter_bivb4 .popover__inner_bivb4 {
115
+ .popover__enter_dvtgo .popover__inner_dvtgo {
116
116
  opacity: 0;
117
117
  transform: scale(0.98);
118
118
  }
119
- .popover__enterActive_bivb4 .popover__inner_bivb4 {
119
+ .popover__enterActive_dvtgo .popover__inner_dvtgo {
120
120
  opacity: 1;
121
121
  transform: scale(1);
122
122
  }
123
- .popover__exit_bivb4 .popover__inner_bivb4 {
123
+ .popover__exit_dvtgo .popover__inner_dvtgo {
124
124
  opacity: 1;
125
125
  transform: scale(1);
126
126
  }
127
- .popover__exitActive_bivb4 .popover__inner_bivb4 {
127
+ .popover__exitActive_dvtgo .popover__inner_dvtgo {
128
128
  opacity: 0;
129
129
  transform: scale(0.98);
130
130
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "5.6.0",
3
+ "version": "5.6.1",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -33,5 +33,5 @@
33
33
  "devDependencies": {
34
34
  "@types/react-transition-group": "^4.2.4"
35
35
  },
36
- "gitHead": "43754f9b8715fe0bd1c0829be9304d78dd923481"
36
+ "gitHead": "07e0a3991a53623ef78766790ea2c1b06049f31f"
37
37
  }