@alfalab/core-components-popover 6.3.11 → 6.4.0

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 (15) hide show
  1. package/Component.d.ts +6 -2
  2. package/Component.js +25 -24
  3. package/cssm/Component.d.ts +6 -2
  4. package/cssm/Component.js +24 -23
  5. package/esm/Component.d.ts +6 -2
  6. package/esm/Component.js +25 -24
  7. package/esm/index.css +26 -26
  8. package/index.css +26 -26
  9. package/modern/Component.d.ts +6 -2
  10. package/modern/Component.js +22 -21
  11. package/modern/index.css +26 -26
  12. package/moderncssm/Component.d.ts +6 -2
  13. package/moderncssm/Component.js +21 -20
  14. package/package.json +3 -2
  15. package/src/Component.tsx +42 -29
package/Component.d.ts CHANGED
@@ -33,9 +33,9 @@ type PopoverProps = {
33
33
  */
34
34
  preventOverflow?: boolean;
35
35
  /**
36
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
37
37
  */
38
- availableHeight?: boolean;
38
+ availableHeight?: boolean | (() => Element | null | undefined);
39
39
  /**
40
40
  * Если `true`, будет отрисована стрелочка
41
41
  */
@@ -96,6 +96,10 @@ type PopoverProps = {
96
96
  * Контент
97
97
  */
98
98
  children?: ReactNode;
99
+ /**
100
+ * Класс для скролл контейнера
101
+ */
102
+ scrollableContentClassName?: string;
99
103
  };
100
104
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
105
  export { Position, PopoverProps, Popover };
package/Component.js CHANGED
@@ -11,6 +11,7 @@ var resizeObserver = require('@juggle/resize-observer');
11
11
  var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal');
14
+ var coreComponentsShared = require('@alfalab/core-components-shared');
14
15
  var coreComponentsStack = require('@alfalab/core-components-stack');
15
16
  var hooks = require('@alfalab/hooks');
16
17
  var stackContext = require('@alfalab/stack-context');
@@ -22,7 +23,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
22
23
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
23
24
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
24
25
 
25
- var styles = {"component":"popover__component_tysut","inner":"popover__inner_tysut","scrollableContent":"popover__scrollableContent_tysut","arrow":"popover__arrow_tysut","enter":"popover__enter_tysut","enterActive":"popover__enterActive_tysut","exit":"popover__exit_tysut","exitActive":"popover__exitActive_tysut"};
26
+ var styles = {"component":"popover__component_aairy","inner":"popover__inner_aairy","scrollableContent":"popover__scrollableContent_aairy","arrow":"popover__arrow_aairy","enter":"popover__enter_aairy","enterActive":"popover__enterActive_aairy","exit":"popover__exit_aairy","exitActive":"popover__exitActive_aairy"};
26
27
  require('./index.css')
27
28
 
28
29
  var DEFAULT_TRANSITION = {
@@ -34,20 +35,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
34
35
  exit: styles.exit,
35
36
  exitActive: styles.exitActive,
36
37
  };
37
- var availableHieghtModifier = {
38
- name: 'availableHeight',
39
- enabled: true,
40
- phase: 'beforeWrite',
41
- requires: ['maxSize'],
42
- fn: function (_a) {
43
- var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
44
- var height = modifiersData.maxSize.height;
45
- var content = popper.querySelector(".".concat(styles.scrollableContent));
46
- if (content && !content.style.maxHeight) {
47
- content.style.maxHeight = "".concat(height, "px");
48
- }
49
- },
50
- };
51
38
  var DEFAULT_OFFSET = [0, 0];
52
39
  // Минимальное расстояние стрелки до края поповера
53
40
  var MIN_DISTANCE_TO_EDGE = 24;
@@ -68,10 +55,11 @@ function getArrowPadding(_a) {
68
55
  return 0;
69
56
  }
70
57
  var Popover = React.forwardRef(function (_a, ref) {
71
- 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 ? DEFAULT_OFFSET : _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 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
58
+ 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 ? DEFAULT_OFFSET : _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 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, scrollableContentClassName = _a.scrollableContentClassName;
72
59
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
73
60
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
74
61
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
62
+ var _p = React.useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
75
63
  var updatePopperRef = React.useRef();
76
64
  var popperRef = React.useRef(null);
77
65
  var innerRef = React.useRef(null);
@@ -95,9 +83,8 @@ var Popover = React.forwardRef(function (_a, ref) {
95
83
  if (preventOverflow) {
96
84
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
97
85
  }
98
- if (availableHeight) {
99
- modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
100
- modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
86
+ if (coreComponentsShared.isFn(availableHeight) || availableHeight) {
87
+ modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: maxSizeOptions }));
101
88
  }
102
89
  return modifiers;
103
90
  }, [
@@ -108,14 +95,22 @@ var Popover = React.forwardRef(function (_a, ref) {
108
95
  preventOverflow,
109
96
  availableHeight,
110
97
  arrowElement,
98
+ maxSizeOptions,
111
99
  ]);
112
- var _p = reactPopper.usePopper(referenceElement, popperElement, {
100
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
113
101
  placement: position,
114
102
  modifiers: popperModifiers,
115
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
103
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
116
104
  if (updatePopper) {
117
105
  updatePopperRef.current = updatePopper;
118
106
  }
107
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
108
+ var _a;
109
+ var nextBoundry = coreComponentsShared.isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
110
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
111
+ setMaxSizeOptions({ boundary: nextBoundry });
112
+ }
113
+ });
119
114
  hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
120
115
  setReferenceElement(anchorElement);
121
116
  }, [anchorElement]);
@@ -146,10 +141,16 @@ var Popover = React.forwardRef(function (_a, ref) {
146
141
  }, [anchorElement, useAnchorWidth]);
147
142
  var renderContent = function (computedZIndex) {
148
143
  var _a;
149
- var _b;
144
+ var _b, _c;
150
145
  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), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className) }, attributes.popper),
151
- React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
152
- React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
146
+ React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef, style: {
147
+ maxHeight: coreComponentsShared.isFn(availableHeight) || availableHeight
148
+ ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
149
+ : undefined,
150
+ } },
151
+ React__default.default.createElement("div", { className: cn__default.default(scrollableContentClassName, (_a = {},
152
+ _a[styles.scrollableContent] = coreComponentsShared.isFn(availableHeight) || availableHeight,
153
+ _a)) }, children),
153
154
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
154
155
  };
155
156
  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) {
package/cssm/Component.d.ts CHANGED
@@ -33,9 +33,9 @@ type PopoverProps = {
33
33
  */
34
34
  preventOverflow?: boolean;
35
35
  /**
36
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
37
37
  */
38
- availableHeight?: boolean;
38
+ availableHeight?: boolean | (() => Element | null | undefined);
39
39
  /**
40
40
  * Если `true`, будет отрисована стрелочка
41
41
  */
@@ -96,6 +96,10 @@ type PopoverProps = {
96
96
  * Контент
97
97
  */
98
98
  children?: ReactNode;
99
+ /**
100
+ * Класс для скролл контейнера
101
+ */
102
+ scrollableContentClassName?: string;
99
103
  };
100
104
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
105
  export { Position, PopoverProps, Popover };
package/cssm/Component.js CHANGED
@@ -11,6 +11,7 @@ var resizeObserver = require('@juggle/resize-observer');
11
11
  var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
14
+ var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
14
15
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
15
16
  var hooks = require('@alfalab/hooks');
16
17
  var stackContext = require('@alfalab/stack-context');
@@ -33,20 +34,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
33
34
  exit: styles__default.default.exit,
34
35
  exitActive: styles__default.default.exitActive,
35
36
  };
36
- var availableHieghtModifier = {
37
- name: 'availableHeight',
38
- enabled: true,
39
- phase: 'beforeWrite',
40
- requires: ['maxSize'],
41
- fn: function (_a) {
42
- var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
43
- var height = modifiersData.maxSize.height;
44
- var content = popper.querySelector(".".concat(styles__default.default.scrollableContent));
45
- if (content && !content.style.maxHeight) {
46
- content.style.maxHeight = "".concat(height, "px");
47
- }
48
- },
49
- };
50
37
  var DEFAULT_OFFSET = [0, 0];
51
38
  // Минимальное расстояние стрелки до края поповера
52
39
  var MIN_DISTANCE_TO_EDGE = 24;
@@ -67,10 +54,11 @@ function getArrowPadding(_a) {
67
54
  return 0;
68
55
  }
69
56
  var Popover = React.forwardRef(function (_a, ref) {
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 ? DEFAULT_OFFSET : _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 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
57
+ 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 ? DEFAULT_OFFSET : _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 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k, scrollableContentClassName = _a.scrollableContentClassName;
71
58
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
72
59
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
73
60
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
61
+ var _p = React.useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
74
62
  var updatePopperRef = React.useRef();
75
63
  var popperRef = React.useRef(null);
76
64
  var innerRef = React.useRef(null);
@@ -94,9 +82,8 @@ var Popover = React.forwardRef(function (_a, ref) {
94
82
  if (preventOverflow) {
95
83
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
96
84
  }
97
- if (availableHeight) {
98
- modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
99
- modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
85
+ if (coreComponentsShared.isFn(availableHeight) || availableHeight) {
86
+ modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: maxSizeOptions }));
100
87
  }
101
88
  return modifiers;
102
89
  }, [
@@ -107,14 +94,22 @@ var Popover = React.forwardRef(function (_a, ref) {
107
94
  preventOverflow,
108
95
  availableHeight,
109
96
  arrowElement,
97
+ maxSizeOptions,
110
98
  ]);
111
- var _p = reactPopper.usePopper(referenceElement, popperElement, {
99
+ var _q = reactPopper.usePopper(referenceElement, popperElement, {
112
100
  placement: position,
113
101
  modifiers: popperModifiers,
114
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
102
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
115
103
  if (updatePopper) {
116
104
  updatePopperRef.current = updatePopper;
117
105
  }
106
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
107
+ var _a;
108
+ var nextBoundry = coreComponentsShared.isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
109
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
110
+ setMaxSizeOptions({ boundary: nextBoundry });
111
+ }
112
+ });
118
113
  hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
119
114
  setReferenceElement(anchorElement);
120
115
  }, [anchorElement]);
@@ -145,10 +140,16 @@ var Popover = React.forwardRef(function (_a, ref) {
145
140
  }, [anchorElement, useAnchorWidth]);
146
141
  var renderContent = function (computedZIndex) {
147
142
  var _a;
148
- var _b;
143
+ var _b, _c;
149
144
  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), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className) }, attributes.popper),
150
- React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
151
- React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, children),
145
+ React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef, style: {
146
+ maxHeight: coreComponentsShared.isFn(availableHeight) || availableHeight
147
+ ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
148
+ : undefined,
149
+ } },
150
+ React__default.default.createElement("div", { className: cn__default.default(scrollableContentClassName, (_a = {},
151
+ _a[styles__default.default.scrollableContent] = coreComponentsShared.isFn(availableHeight) || availableHeight,
152
+ _a)) }, children),
152
153
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
153
154
  };
154
155
  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) {
package/esm/Component.d.ts CHANGED
@@ -33,9 +33,9 @@ type PopoverProps = {
33
33
  */
34
34
  preventOverflow?: boolean;
35
35
  /**
36
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
37
37
  */
38
- availableHeight?: boolean;
38
+ availableHeight?: boolean | (() => Element | null | undefined);
39
39
  /**
40
40
  * Если `true`, будет отрисована стрелочка
41
41
  */
@@ -96,6 +96,10 @@ type PopoverProps = {
96
96
  * Контент
97
97
  */
98
98
  children?: ReactNode;
99
+ /**
100
+ * Класс для скролл контейнера
101
+ */
102
+ scrollableContentClassName?: string;
99
103
  };
100
104
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
105
  export { Position, PopoverProps, Popover };
package/esm/Component.js CHANGED
@@ -7,11 +7,12 @@ import { ResizeObserver } from '@juggle/resize-observer';
7
7
  import cn from 'classnames';
8
8
  import maxSize from 'popper-max-size-modifier';
9
9
  import { Portal } from '@alfalab/core-components-portal/esm';
10
+ import { isFn } from '@alfalab/core-components-shared/esm';
10
11
  import { Stack } from '@alfalab/core-components-stack/esm';
11
12
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
12
13
  import { stackingOrder } from '@alfalab/stack-context';
13
14
 
14
- var styles = {"component":"popover__component_tysut","inner":"popover__inner_tysut","scrollableContent":"popover__scrollableContent_tysut","arrow":"popover__arrow_tysut","enter":"popover__enter_tysut","enterActive":"popover__enterActive_tysut","exit":"popover__exit_tysut","exitActive":"popover__exitActive_tysut"};
15
+ var styles = {"component":"popover__component_aairy","inner":"popover__inner_aairy","scrollableContent":"popover__scrollableContent_aairy","arrow":"popover__arrow_aairy","enter":"popover__enter_aairy","enterActive":"popover__enterActive_aairy","exit":"popover__exit_aairy","exitActive":"popover__exitActive_aairy"};
15
16
  require('./index.css')
16
17
 
17
18
  var DEFAULT_TRANSITION = {
@@ -23,20 +24,6 @@ var CSS_TRANSITION_CLASS_NAMES = {
23
24
  exit: styles.exit,
24
25
  exitActive: styles.exitActive,
25
26
  };
26
- var availableHieghtModifier = {
27
- name: 'availableHeight',
28
- enabled: true,
29
- phase: 'beforeWrite',
30
- requires: ['maxSize'],
31
- fn: function (_a) {
32
- var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
33
- var height = modifiersData.maxSize.height;
34
- var content = popper.querySelector(".".concat(styles.scrollableContent));
35
- if (content && !content.style.maxHeight) {
36
- content.style.maxHeight = "".concat(height, "px");
37
- }
38
- },
39
- };
40
27
  var DEFAULT_OFFSET = [0, 0];
41
28
  // Минимальное расстояние стрелки до края поповера
42
29
  var MIN_DISTANCE_TO_EDGE = 24;
@@ -57,10 +44,11 @@ function getArrowPadding(_a) {
57
44
  return 0;
58
45
  }
59
46
  var Popover = forwardRef(function (_a, ref) {
60
- 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 ? DEFAULT_OFFSET : _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 ? "".concat(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;
47
+ 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 ? DEFAULT_OFFSET : _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 ? "".concat(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, scrollableContentClassName = _a.scrollableContentClassName;
61
48
  var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
62
49
  var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
63
50
  var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
51
+ var _p = useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
64
52
  var updatePopperRef = useRef();
65
53
  var popperRef = useRef(null);
66
54
  var innerRef = useRef(null);
@@ -84,9 +72,8 @@ var Popover = forwardRef(function (_a, ref) {
84
72
  if (preventOverflow) {
85
73
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
86
74
  }
87
- if (availableHeight) {
88
- modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
89
- modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
75
+ if (isFn(availableHeight) || availableHeight) {
76
+ modifiers.push(__assign(__assign({}, maxSize), { options: maxSizeOptions }));
90
77
  }
91
78
  return modifiers;
92
79
  }, [
@@ -97,14 +84,22 @@ var Popover = forwardRef(function (_a, ref) {
97
84
  preventOverflow,
98
85
  availableHeight,
99
86
  arrowElement,
87
+ maxSizeOptions,
100
88
  ]);
101
- var _p = usePopper(referenceElement, popperElement, {
89
+ var _q = usePopper(referenceElement, popperElement, {
102
90
  placement: position,
103
91
  modifiers: popperModifiers,
104
- }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
92
+ }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
105
93
  if (updatePopper) {
106
94
  updatePopperRef.current = updatePopper;
107
95
  }
96
+ useLayoutEffect_SAFE_FOR_SSR(function () {
97
+ var _a;
98
+ var nextBoundry = isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
99
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
100
+ setMaxSizeOptions({ boundary: nextBoundry });
101
+ }
102
+ });
108
103
  useLayoutEffect_SAFE_FOR_SSR(function () {
109
104
  setReferenceElement(anchorElement);
110
105
  }, [anchorElement]);
@@ -135,10 +130,16 @@ var Popover = forwardRef(function (_a, ref) {
135
130
  }, [anchorElement, useAnchorWidth]);
136
131
  var renderContent = function (computedZIndex) {
137
132
  var _a;
138
- var _b;
133
+ var _b, _c;
139
134
  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), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
140
- React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
141
- React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
135
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef, style: {
136
+ maxHeight: isFn(availableHeight) || availableHeight
137
+ ? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
138
+ : undefined,
139
+ } },
140
+ React.createElement("div", { className: cn(scrollableContentClassName, (_a = {},
141
+ _a[styles.scrollableContent] = isFn(availableHeight) || availableHeight,
142
+ _a)) }, children),
142
143
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
143
144
  };
144
145
  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) {
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1as32 */
1
+ /* hash: 19p96 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -27,23 +27,23 @@
27
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
28
28
  } /* сбрасывает синюю подсветку при нажатии */ :root {
29
29
  --popover-border-color: transparent;
30
- } .popover__component_tysut {
30
+ } .popover__component_aairy {
31
31
  background-color: transparent;
32
32
  color: var(--color-light-text-primary);
33
- } .popover__inner_tysut {
33
+ } .popover__inner_aairy {
34
34
  position: relative;
35
35
  background-color: var(--color-light-modal-bg-primary);
36
36
  box-shadow: var(--shadow-m);
37
37
  border: 1px solid var(--popover-border-color);
38
38
  box-sizing: border-box;
39
39
  will-change: transform;
40
- } .popover__scrollableContent_tysut {
40
+ } .popover__scrollableContent_aairy {
41
41
  position: relative;
42
42
  z-index: 2;
43
43
  overflow-y: auto;
44
- } .popover__arrow_tysut {
44
+ } .popover__arrow_aairy {
45
45
  z-index: 1;
46
- } .popover__arrow_tysut:after {
46
+ } .popover__arrow_aairy:after {
47
47
  content: '';
48
48
  display: block;
49
49
  position: absolute;
@@ -53,51 +53,51 @@
53
53
  border: 1px solid var(--popover-border-color);
54
54
  box-sizing: border-box;
55
55
  transform: rotate(45deg);
56
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut,
57
- .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut,
58
- .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut {
56
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy,
57
+ .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy,
58
+ .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy {
59
59
  right: 5px
60
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut:after {
60
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy:after {
61
61
  top: -6px;
62
62
  border-bottom: none;
63
63
  border-left: none;
64
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut,
65
- .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut,
66
- .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut {
64
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy,
65
+ .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy,
66
+ .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy {
67
67
  left: -7px
68
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut:after {
68
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy:after {
69
69
  top: -6px;
70
70
  border-top: none;
71
71
  border-right: none;
72
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut,
73
- .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut,
74
- .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut {
72
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy,
73
+ .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy,
74
+ .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy {
75
75
  bottom: 5px
76
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut:after {
76
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy:after {
77
77
  left: -6px;
78
78
  border-top: none;
79
79
  border-left: none;
80
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut,
81
- .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut,
82
- .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut {
80
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy,
81
+ .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy,
82
+ .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy {
83
83
  top: -7px
84
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut:after {
84
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy:after {
85
85
  left: -6px;
86
86
  border-bottom: none;
87
87
  border-right: none;
88
- } .popover__enter_tysut .popover__inner_tysut {
88
+ } .popover__enter_aairy .popover__inner_aairy {
89
89
  opacity: 0;
90
90
  transform: scale(0.98);
91
- } .popover__enterActive_tysut .popover__inner_tysut {
91
+ } .popover__enterActive_aairy .popover__inner_aairy {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
- } .popover__exit_tysut .popover__inner_tysut {
97
+ } .popover__exit_aairy .popover__inner_aairy {
98
98
  opacity: 1;
99
99
  transform: scale(1);
100
- } .popover__exitActive_tysut .popover__inner_tysut {
100
+ } .popover__exitActive_aairy .popover__inner_aairy {
101
101
  opacity: 0;
102
102
  transform: scale(0.98);
103
103
  transition-property: opacity, transform;
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1as32 */
1
+ /* hash: 19p96 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -27,23 +27,23 @@
27
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
28
28
  } /* сбрасывает синюю подсветку при нажатии */ :root {
29
29
  --popover-border-color: transparent;
30
- } .popover__component_tysut {
30
+ } .popover__component_aairy {
31
31
  background-color: transparent;
32
32
  color: var(--color-light-text-primary);
33
- } .popover__inner_tysut {
33
+ } .popover__inner_aairy {
34
34
  position: relative;
35
35
  background-color: var(--color-light-modal-bg-primary);
36
36
  box-shadow: var(--shadow-m);
37
37
  border: 1px solid var(--popover-border-color);
38
38
  box-sizing: border-box;
39
39
  will-change: transform;
40
- } .popover__scrollableContent_tysut {
40
+ } .popover__scrollableContent_aairy {
41
41
  position: relative;
42
42
  z-index: 2;
43
43
  overflow-y: auto;
44
- } .popover__arrow_tysut {
44
+ } .popover__arrow_aairy {
45
45
  z-index: 1;
46
- } .popover__arrow_tysut:after {
46
+ } .popover__arrow_aairy:after {
47
47
  content: '';
48
48
  display: block;
49
49
  position: absolute;
@@ -53,51 +53,51 @@
53
53
  border: 1px solid var(--popover-border-color);
54
54
  box-sizing: border-box;
55
55
  transform: rotate(45deg);
56
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut,
57
- .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut,
58
- .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut {
56
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy,
57
+ .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy,
58
+ .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy {
59
59
  right: 5px
60
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut:after {
60
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy:after {
61
61
  top: -6px;
62
62
  border-bottom: none;
63
63
  border-left: none;
64
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut,
65
- .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut,
66
- .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut {
64
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy,
65
+ .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy,
66
+ .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy {
67
67
  left: -7px
68
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut:after {
68
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy:after {
69
69
  top: -6px;
70
70
  border-top: none;
71
71
  border-right: none;
72
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut,
73
- .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut,
74
- .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut {
72
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy,
73
+ .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy,
74
+ .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy {
75
75
  bottom: 5px
76
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut:after {
76
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy:after {
77
77
  left: -6px;
78
78
  border-top: none;
79
79
  border-left: none;
80
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut,
81
- .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut,
82
- .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut {
80
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy,
81
+ .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy,
82
+ .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy {
83
83
  top: -7px
84
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut:after {
84
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy:after {
85
85
  left: -6px;
86
86
  border-bottom: none;
87
87
  border-right: none;
88
- } .popover__enter_tysut .popover__inner_tysut {
88
+ } .popover__enter_aairy .popover__inner_aairy {
89
89
  opacity: 0;
90
90
  transform: scale(0.98);
91
- } .popover__enterActive_tysut .popover__inner_tysut {
91
+ } .popover__enterActive_aairy .popover__inner_aairy {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
- } .popover__exit_tysut .popover__inner_tysut {
97
+ } .popover__exit_aairy .popover__inner_aairy {
98
98
  opacity: 1;
99
99
  transform: scale(1);
100
- } .popover__exitActive_tysut .popover__inner_tysut {
100
+ } .popover__exitActive_aairy .popover__inner_aairy {
101
101
  opacity: 0;
102
102
  transform: scale(0.98);
103
103
  transition-property: opacity, transform;
package/modern/Component.d.ts CHANGED
@@ -33,9 +33,9 @@ type PopoverProps = {
33
33
  */
34
34
  preventOverflow?: boolean;
35
35
  /**
36
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
37
37
  */
38
- availableHeight?: boolean;
38
+ availableHeight?: boolean | (() => Element | null | undefined);
39
39
  /**
40
40
  * Если `true`, будет отрисована стрелочка
41
41
  */
@@ -96,6 +96,10 @@ type PopoverProps = {
96
96
  * Контент
97
97
  */
98
98
  children?: ReactNode;
99
+ /**
100
+ * Класс для скролл контейнера
101
+ */
102
+ scrollableContentClassName?: string;
99
103
  };
100
104
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
105
  export { Position, PopoverProps, Popover };
package/modern/Component.js CHANGED
@@ -6,11 +6,12 @@ import { ResizeObserver } from '@juggle/resize-observer';
6
6
  import cn from 'classnames';
7
7
  import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/modern';
9
+ import { isFn } from '@alfalab/core-components-shared/modern';
9
10
  import { Stack } from '@alfalab/core-components-stack/modern';
10
11
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
12
  import { stackingOrder } from '@alfalab/stack-context';
12
13
 
13
- const styles = {"component":"popover__component_tysut","inner":"popover__inner_tysut","scrollableContent":"popover__scrollableContent_tysut","arrow":"popover__arrow_tysut","enter":"popover__enter_tysut","enterActive":"popover__enterActive_tysut","exit":"popover__exit_tysut","exitActive":"popover__exitActive_tysut"};
14
+ const styles = {"component":"popover__component_aairy","inner":"popover__inner_aairy","scrollableContent":"popover__scrollableContent_aairy","arrow":"popover__arrow_aairy","enter":"popover__enter_aairy","enterActive":"popover__enterActive_aairy","exit":"popover__exit_aairy","exitActive":"popover__exitActive_aairy"};
14
15
  require('./index.css')
15
16
 
16
17
  const DEFAULT_TRANSITION = {
@@ -22,19 +23,6 @@ const CSS_TRANSITION_CLASS_NAMES = {
22
23
  exit: styles.exit,
23
24
  exitActive: styles.exitActive,
24
25
  };
25
- const availableHieghtModifier = {
26
- name: 'availableHeight',
27
- enabled: true,
28
- phase: 'beforeWrite',
29
- requires: ['maxSize'],
30
- fn({ state: { modifiersData, elements: { popper }, }, }) {
31
- const { height } = modifiersData.maxSize;
32
- const content = popper.querySelector(`.${styles.scrollableContent}`);
33
- if (content && !content.style.maxHeight) {
34
- content.style.maxHeight = `${height}px`;
35
- }
36
- },
37
- };
38
26
  const DEFAULT_OFFSET = [0, 0];
39
27
  // Минимальное расстояние стрелки до края поповера
40
28
  const MIN_DISTANCE_TO_EDGE = 24;
@@ -53,10 +41,11 @@ function getArrowPadding({ placement, }) {
53
41
  }
54
42
  return 0;
55
43
  }
56
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, 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) => {
44
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, 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, scrollableContentClassName, }, ref) => {
57
45
  const [referenceElement, setReferenceElement] = useState(anchorElement);
58
46
  const [popperElement, setPopperElement] = useState(null);
59
47
  const [arrowElement, setArrowElement] = useState(null);
48
+ const [maxSizeOptions, setMaxSizeOptions] = useState(() => ({}));
60
49
  const updatePopperRef = useRef();
61
50
  const popperRef = useRef(null);
62
51
  const innerRef = useRef(null);
@@ -80,9 +69,8 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
80
69
  if (preventOverflow) {
81
70
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
82
71
  }
83
- if (availableHeight) {
84
- modifiers.push({ ...maxSize, options: {} });
85
- modifiers.push({ ...availableHieghtModifier, options: {} });
72
+ if (isFn(availableHeight) || availableHeight) {
73
+ modifiers.push({ ...maxSize, options: maxSizeOptions });
86
74
  }
87
75
  return modifiers;
88
76
  }, [
@@ -93,14 +81,21 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
93
81
  preventOverflow,
94
82
  availableHeight,
95
83
  arrowElement,
84
+ maxSizeOptions,
96
85
  ]);
97
- const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
86
+ const { styles: popperStyles, attributes, update: updatePopper, state, } = usePopper(referenceElement, popperElement, {
98
87
  placement: position,
99
88
  modifiers: popperModifiers,
100
89
  });
101
90
  if (updatePopper) {
102
91
  updatePopperRef.current = updatePopper;
103
92
  }
93
+ useLayoutEffect_SAFE_FOR_SSR(() => {
94
+ const nextBoundry = isFn(availableHeight) ? availableHeight() ?? undefined : undefined;
95
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
96
+ setMaxSizeOptions({ boundary: nextBoundry });
97
+ }
98
+ });
104
99
  useLayoutEffect_SAFE_FOR_SSR(() => {
105
100
  setReferenceElement(anchorElement);
106
101
  }, [anchorElement]);
@@ -135,8 +130,14 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
135
130
  ...popperStyles.popper,
136
131
  ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
137
132
  }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
138
- React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
139
- React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
133
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef, style: {
134
+ maxHeight: isFn(availableHeight) || availableHeight
135
+ ? state?.modifiersData.maxSize?.height
136
+ : undefined,
137
+ } },
138
+ React.createElement("div", { className: cn(scrollableContentClassName, {
139
+ [styles.scrollableContent]: isFn(availableHeight) || availableHeight,
140
+ }) }, children),
140
141
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
141
142
  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) => {
142
143
  // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1as32 */
1
+ /* hash: 19p96 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff;
@@ -27,23 +27,23 @@
27
27
  } /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ /* @deprecated */ :root {
28
28
  } /* сбрасывает синюю подсветку при нажатии */ :root {
29
29
  --popover-border-color: transparent;
30
- } .popover__component_tysut {
30
+ } .popover__component_aairy {
31
31
  background-color: transparent;
32
32
  color: var(--color-light-text-primary);
33
- } .popover__inner_tysut {
33
+ } .popover__inner_aairy {
34
34
  position: relative;
35
35
  background-color: var(--color-light-modal-bg-primary);
36
36
  box-shadow: var(--shadow-m);
37
37
  border: 1px solid var(--popover-border-color);
38
38
  box-sizing: border-box;
39
39
  will-change: transform;
40
- } .popover__scrollableContent_tysut {
40
+ } .popover__scrollableContent_aairy {
41
41
  position: relative;
42
42
  z-index: 2;
43
43
  overflow-y: auto;
44
- } .popover__arrow_tysut {
44
+ } .popover__arrow_aairy {
45
45
  z-index: 1;
46
- } .popover__arrow_tysut:after {
46
+ } .popover__arrow_aairy:after {
47
47
  content: '';
48
48
  display: block;
49
49
  position: absolute;
@@ -53,51 +53,51 @@
53
53
  border: 1px solid var(--popover-border-color);
54
54
  box-sizing: border-box;
55
55
  transform: rotate(45deg);
56
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut,
57
- .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut,
58
- .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut {
56
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy,
57
+ .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy,
58
+ .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy {
59
59
  right: 5px
60
- } .popover__component_tysut[data-popper-placement='left'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='left-end'] .popover__arrow_tysut:after {
60
+ } .popover__component_aairy[data-popper-placement='left'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='left-end'] .popover__arrow_aairy:after {
61
61
  top: -6px;
62
62
  border-bottom: none;
63
63
  border-left: none;
64
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut,
65
- .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut,
66
- .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut {
64
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy,
65
+ .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy,
66
+ .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy {
67
67
  left: -7px
68
- } .popover__component_tysut[data-popper-placement='right'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='right-end'] .popover__arrow_tysut:after {
68
+ } .popover__component_aairy[data-popper-placement='right'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='right-end'] .popover__arrow_aairy:after {
69
69
  top: -6px;
70
70
  border-top: none;
71
71
  border-right: none;
72
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut,
73
- .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut,
74
- .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut {
72
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy,
73
+ .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy,
74
+ .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy {
75
75
  bottom: 5px
76
- } .popover__component_tysut[data-popper-placement='top'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='top-end'] .popover__arrow_tysut:after {
76
+ } .popover__component_aairy[data-popper-placement='top'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='top-end'] .popover__arrow_aairy:after {
77
77
  left: -6px;
78
78
  border-top: none;
79
79
  border-left: none;
80
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut,
81
- .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut,
82
- .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut {
80
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy,
81
+ .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy,
82
+ .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy {
83
83
  top: -7px
84
- } .popover__component_tysut[data-popper-placement='bottom'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-start'] .popover__arrow_tysut:after, .popover__component_tysut[data-popper-placement='bottom-end'] .popover__arrow_tysut:after {
84
+ } .popover__component_aairy[data-popper-placement='bottom'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-start'] .popover__arrow_aairy:after, .popover__component_aairy[data-popper-placement='bottom-end'] .popover__arrow_aairy:after {
85
85
  left: -6px;
86
86
  border-bottom: none;
87
87
  border-right: none;
88
- } .popover__enter_tysut .popover__inner_tysut {
88
+ } .popover__enter_aairy .popover__inner_aairy {
89
89
  opacity: 0;
90
90
  transform: scale(0.98);
91
- } .popover__enterActive_tysut .popover__inner_tysut {
91
+ } .popover__enterActive_aairy .popover__inner_aairy {
92
92
  opacity: 1;
93
93
  transform: scale(1);
94
94
  transition-property: opacity, transform;
95
95
  transition-timing-function: ease-in-out;
96
96
  transition-duration: 150ms;
97
- } .popover__exit_tysut .popover__inner_tysut {
97
+ } .popover__exit_aairy .popover__inner_aairy {
98
98
  opacity: 1;
99
99
  transform: scale(1);
100
- } .popover__exitActive_tysut .popover__inner_tysut {
100
+ } .popover__exitActive_aairy .popover__inner_aairy {
101
101
  opacity: 0;
102
102
  transform: scale(0.98);
103
103
  transition-property: opacity, transform;
package/moderncssm/Component.d.ts CHANGED
@@ -33,9 +33,9 @@ type PopoverProps = {
33
33
  */
34
34
  preventOverflow?: boolean;
35
35
  /**
36
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
36
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
37
37
  */
38
- availableHeight?: boolean;
38
+ availableHeight?: boolean | (() => Element | null | undefined);
39
39
  /**
40
40
  * Если `true`, будет отрисована стрелочка
41
41
  */
@@ -96,6 +96,10 @@ type PopoverProps = {
96
96
  * Контент
97
97
  */
98
98
  children?: ReactNode;
99
+ /**
100
+ * Класс для скролл контейнера
101
+ */
102
+ scrollableContentClassName?: string;
99
103
  };
100
104
  declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
101
105
  export { Position, PopoverProps, Popover };
package/moderncssm/Component.js CHANGED
@@ -6,6 +6,7 @@ import { ResizeObserver } from '@juggle/resize-observer';
6
6
  import cn from 'classnames';
7
7
  import maxSize from 'popper-max-size-modifier';
8
8
  import { Portal } from '@alfalab/core-components-portal/moderncssm';
9
+ import { isFn } from '@alfalab/core-components-shared/moderncssm';
9
10
  import { Stack } from '@alfalab/core-components-stack/moderncssm';
10
11
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
12
  import { stackingOrder } from '@alfalab/stack-context';
@@ -20,19 +21,6 @@ const CSS_TRANSITION_CLASS_NAMES = {
20
21
  exit: styles.exit,
21
22
  exitActive: styles.exitActive,
22
23
  };
23
- const availableHieghtModifier = {
24
- name: 'availableHeight',
25
- enabled: true,
26
- phase: 'beforeWrite',
27
- requires: ['maxSize'],
28
- fn({ state: { modifiersData, elements: { popper }, }, }) {
29
- const { height } = modifiersData.maxSize;
30
- const content = popper.querySelector(`.${styles.scrollableContent}`);
31
- if (content && !content.style.maxHeight) {
32
- content.style.maxHeight = `${height}px`;
33
- }
34
- },
35
- };
36
24
  const DEFAULT_OFFSET = [0, 0];
37
25
  // Минимальное расстояние стрелки до края поповера
38
26
  const MIN_DISTANCE_TO_EDGE = 24;
@@ -51,10 +39,11 @@ function getArrowPadding({ placement, }) {
51
39
  }
52
40
  return 0;
53
41
  }
54
- const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, 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) => {
42
+ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, 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, scrollableContentClassName, }, ref) => {
55
43
  const [referenceElement, setReferenceElement] = useState(anchorElement);
56
44
  const [popperElement, setPopperElement] = useState(null);
57
45
  const [arrowElement, setArrowElement] = useState(null);
46
+ const [maxSizeOptions, setMaxSizeOptions] = useState(() => ({}));
58
47
  const updatePopperRef = useRef();
59
48
  const popperRef = useRef(null);
60
49
  const innerRef = useRef(null);
@@ -78,9 +67,8 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
78
67
  if (preventOverflow) {
79
68
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
80
69
  }
81
- if (availableHeight) {
82
- modifiers.push({ ...maxSize, options: {} });
83
- modifiers.push({ ...availableHieghtModifier, options: {} });
70
+ if (isFn(availableHeight) || availableHeight) {
71
+ modifiers.push({ ...maxSize, options: maxSizeOptions });
84
72
  }
85
73
  return modifiers;
86
74
  }, [
@@ -91,14 +79,21 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
91
79
  preventOverflow,
92
80
  availableHeight,
93
81
  arrowElement,
82
+ maxSizeOptions,
94
83
  ]);
95
- const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
84
+ const { styles: popperStyles, attributes, update: updatePopper, state, } = usePopper(referenceElement, popperElement, {
96
85
  placement: position,
97
86
  modifiers: popperModifiers,
98
87
  });
99
88
  if (updatePopper) {
100
89
  updatePopperRef.current = updatePopper;
101
90
  }
91
+ useLayoutEffect_SAFE_FOR_SSR(() => {
92
+ const nextBoundry = isFn(availableHeight) ? availableHeight() ?? undefined : undefined;
93
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
94
+ setMaxSizeOptions({ boundary: nextBoundry });
95
+ }
96
+ });
102
97
  useLayoutEffect_SAFE_FOR_SSR(() => {
103
98
  setReferenceElement(anchorElement);
104
99
  }, [anchorElement]);
@@ -133,8 +128,14 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
133
128
  ...popperStyles.popper,
134
129
  ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
135
130
  }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
136
- React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
137
- React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
131
+ React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef, style: {
132
+ maxHeight: isFn(availableHeight) || availableHeight
133
+ ? state?.modifiersData.maxSize?.height
134
+ : undefined,
135
+ } },
136
+ React.createElement("div", { className: cn(scrollableContentClassName, {
137
+ [styles.scrollableContent]: isFn(availableHeight) || availableHeight,
138
+ }) }, children),
138
139
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
139
140
  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) => {
140
141
  // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-popover",
3
- "version": "6.3.11",
3
+ "version": "6.4.0",
4
4
  "description": "Popover component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -18,6 +18,7 @@
18
18
  "dependencies": {
19
19
  "@alfalab/core-components-portal": "^3.3.10",
20
20
  "@alfalab/core-components-stack": "^5.0.1",
21
+ "@alfalab/core-components-shared": "^0.18.0",
21
22
  "@alfalab/hooks": "^1.13.1",
22
23
  "@juggle/resize-observer": "^3.3.1",
23
24
  "@popperjs/core": "^2.11.8",
@@ -32,5 +33,5 @@
32
33
  "@types/react-transition-group": "^4.4.5"
33
34
  },
34
35
  "themesVersion": "13.7.4",
35
- "varsVersion": "9.20.1"
36
+ "varsVersion": "9.21.0"
36
37
  }
package/src/Component.tsx CHANGED
@@ -13,11 +13,12 @@ import { usePopper } from 'react-popper';
13
13
  import { CSSTransition } from 'react-transition-group';
14
14
  import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
15
15
  import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
16
- import { BasePlacement, ModifierArguments, Obj, VariationPlacement } from '@popperjs/core';
16
+ import { BasePlacement, Modifier, Obj, VariationPlacement } from '@popperjs/core';
17
17
  import cn from 'classnames';
18
18
  import maxSize from 'popper-max-size-modifier';
19
19
 
20
20
  import { Portal } from '@alfalab/core-components-portal';
21
+ import { isFn } from '@alfalab/core-components-shared';
21
22
  import { Stack } from '@alfalab/core-components-stack';
22
23
  import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
23
24
  import { stackingOrder } from '@alfalab/stack-context';
@@ -26,6 +27,8 @@ import styles from './index.module.css';
26
27
 
27
28
  type RefElement = HTMLElement | null;
28
29
 
30
+ type ModifierOptions<T> = T extends Modifier<unknown, infer V> ? V : never;
31
+
29
32
  export type Position = BasePlacement | VariationPlacement;
30
33
 
31
34
  type PopperModifier = {
@@ -66,9 +69,9 @@ export type PopoverProps = {
66
69
  preventOverflow?: boolean;
67
70
 
68
71
  /**
69
- * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
72
+ * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
70
73
  */
71
- availableHeight?: boolean;
74
+ availableHeight?: boolean | (() => Element | null | undefined);
72
75
 
73
76
  /**
74
77
  * Если `true`, будет отрисована стрелочка
@@ -143,6 +146,11 @@ export type PopoverProps = {
143
146
  * Контент
144
147
  */
145
148
  children?: ReactNode;
149
+
150
+ /**
151
+ * Класс для скролл контейнера
152
+ */
153
+ scrollableContentClassName?: string;
146
154
  };
147
155
 
148
156
  const DEFAULT_TRANSITION: PopoverProps['transition'] = {
@@ -156,27 +164,6 @@ const CSS_TRANSITION_CLASS_NAMES = {
156
164
  exitActive: styles.exitActive,
157
165
  };
158
166
 
159
- const availableHieghtModifier = {
160
- name: 'availableHeight',
161
- enabled: true,
162
- phase: 'beforeWrite',
163
- requires: ['maxSize'],
164
- fn({
165
- state: {
166
- modifiersData,
167
- elements: { popper },
168
- },
169
- }: ModifierArguments<Obj>) {
170
- const { height } = modifiersData.maxSize;
171
-
172
- const content = popper.querySelector(`.${styles.scrollableContent}`) as HTMLElement;
173
-
174
- if (content && !content.style.maxHeight) {
175
- content.style.maxHeight = `${height}px`;
176
- }
177
- },
178
- };
179
-
180
167
  const DEFAULT_OFFSET = [0, 0];
181
168
 
182
169
  // Минимальное расстояние стрелки до края поповера
@@ -232,12 +219,16 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
232
219
  fallbackPlacements,
233
220
  preventOverflow = true,
234
221
  availableHeight = false,
222
+ scrollableContentClassName,
235
223
  },
236
224
  ref,
237
225
  ) => {
238
226
  const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);
239
227
  const [popperElement, setPopperElement] = useState<RefElement>(null);
240
228
  const [arrowElement, setArrowElement] = useState<RefElement>(null);
229
+ const [maxSizeOptions, setMaxSizeOptions] = useState<
230
+ Partial<ModifierOptions<typeof maxSize>>
231
+ >(() => ({}));
241
232
 
242
233
  const updatePopperRef = useRef<() => void>();
243
234
 
@@ -269,9 +260,8 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
269
260
  modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
270
261
  }
271
262
 
272
- if (availableHeight) {
273
- modifiers.push({ ...maxSize, options: {} });
274
- modifiers.push({ ...availableHieghtModifier, options: {} });
263
+ if (isFn(availableHeight) || availableHeight) {
264
+ modifiers.push({ ...maxSize, options: maxSizeOptions });
275
265
  }
276
266
 
277
267
  return modifiers;
@@ -283,12 +273,14 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
283
273
  preventOverflow,
284
274
  availableHeight,
285
275
  arrowElement,
276
+ maxSizeOptions,
286
277
  ]);
287
278
 
288
279
  const {
289
280
  styles: popperStyles,
290
281
  attributes,
291
282
  update: updatePopper,
283
+ state,
292
284
  } = usePopper(referenceElement, popperElement, {
293
285
  placement: position,
294
286
  modifiers: popperModifiers,
@@ -298,6 +290,14 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
298
290
  updatePopperRef.current = updatePopper;
299
291
  }
300
292
 
293
+ useLayoutEffect_SAFE_FOR_SSR(() => {
294
+ const nextBoundry = isFn(availableHeight) ? availableHeight() ?? undefined : undefined;
295
+
296
+ if (!(maxSizeOptions.boundary === nextBoundry)) {
297
+ setMaxSizeOptions({ boundary: nextBoundry });
298
+ }
299
+ });
300
+
301
301
  useLayoutEffect_SAFE_FOR_SSR(() => {
302
302
  setReferenceElement(anchorElement);
303
303
  }, [anchorElement]);
@@ -346,8 +346,21 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
346
346
  className={cn(styles.component, className)}
347
347
  {...attributes.popper}
348
348
  >
349
- <div className={cn(styles.inner, popperClassName)} ref={innerRef}>
350
- <div className={cn({ [styles.scrollableContent]: availableHeight })}>
349
+ <div
350
+ className={cn(styles.inner, popperClassName)}
351
+ ref={innerRef}
352
+ style={{
353
+ maxHeight:
354
+ isFn(availableHeight) || availableHeight
355
+ ? state?.modifiersData.maxSize?.height
356
+ : undefined,
357
+ }}
358
+ >
359
+ <div
360
+ className={cn(scrollableContentClassName, {
361
+ [styles.scrollableContent]: isFn(availableHeight) || availableHeight,
362
+ })}
363
+ >
351
364
  {children}
352
365
  </div>
353
366