@alfalab/core-components-popover 6.1.0 → 6.2.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 (19) hide show
  1. package/Component.d.ts +2 -2
  2. package/Component.js +37 -33
  3. package/cssm/Component.d.ts +2 -2
  4. package/cssm/Component.js +36 -32
  5. package/cssm/index.js +1 -0
  6. package/cssm/index.module.css +7 -23
  7. package/esm/Component.d.ts +2 -2
  8. package/esm/Component.js +37 -33
  9. package/esm/index.css +29 -45
  10. package/esm/index.js +1 -0
  11. package/index.css +29 -45
  12. package/index.js +1 -0
  13. package/modern/Component.d.ts +2 -2
  14. package/modern/Component.js +31 -28
  15. package/modern/index.css +29 -45
  16. package/modern/index.js +1 -0
  17. package/package.json +3 -2
  18. package/src/Component.tsx +44 -34
  19. package/src/index.module.css +2 -34
package/Component.d.ts CHANGED
@@ -25,7 +25,7 @@ type PopoverProps = {
25
25
  position?: Position;
26
26
  /**
27
27
  * Запрещает поповеру менять свою позицию.
28
- * Например, если места снизу недостаточно,то он все равно будет показан снизу
28
+ * Например, если места снизу недостаточно, то он все равно будет показан снизу
29
29
  */
30
30
  preventFlip?: boolean;
31
31
  /**
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/Component.js CHANGED
@@ -12,6 +12,7 @@ var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack');
15
+ var hooks = require('@alfalab/hooks');
15
16
 
16
17
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
17
18
 
@@ -20,7 +21,7 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
20
21
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
21
22
  var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
22
23
 
23
- var styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
24
+ var styles = {"component":"popover__component_dqu0o","inner":"popover__inner_dqu0o","scrollableContent":"popover__scrollableContent_dqu0o","arrow":"popover__arrow_dqu0o","enter":"popover__enter_dqu0o","enterActive":"popover__enterActive_dqu0o","exit":"popover__exit_dqu0o","exitActive":"popover__exitActive_dqu0o"};
24
25
  require('./index.css')
25
26
 
26
27
  var DEFAULT_TRANSITION = {
@@ -46,24 +47,43 @@ var availableHieghtModifier = {
46
47
  }
47
48
  },
48
49
  };
49
- /**
50
- * Минимальный размер anchorElement,
51
- * при котором возможно смещение стрелочки относительно центра
52
- */
53
- var MIN_ARROW_SHIFT_SIZE = 75;
50
+ var DEFAULT_OFFSET = [0, 0];
51
+ // Минимальное расстояние стрелки до края поповера
52
+ var MIN_DISTANCE_TO_EDGE = 24;
53
+ function getArrowPadding(_a) {
54
+ var placement = _a.placement;
55
+ if (placement === 'right-end' || placement === 'left-end') {
56
+ return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
57
+ }
58
+ if (placement === 'top-start' || placement === 'bottom-start') {
59
+ return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
60
+ }
61
+ if (placement === 'right-start' || placement === 'left-start') {
62
+ return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
63
+ }
64
+ if (placement === 'top-end' || placement === 'bottom-end') {
65
+ return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
66
+ }
67
+ return 0;
68
+ }
54
69
  var Popover = React.forwardRef(function (_a, ref) {
55
- 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 ? "".concat(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;
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 ? 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;
56
71
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
57
72
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
58
73
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
59
- var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
60
74
  var updatePopperRef = React.useRef();
61
75
  var popperRef = React.useRef(null);
62
76
  var innerRef = React.useRef(null);
63
77
  var popperModifiers = React.useMemo(function () {
64
78
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
65
79
  if (withArrow) {
66
- modifiers.push({ name: 'arrow', options: { element: arrowElement } });
80
+ modifiers.push({
81
+ name: 'arrow',
82
+ options: {
83
+ element: arrowElement,
84
+ padding: getArrowPadding,
85
+ },
86
+ });
67
87
  }
68
88
  if (preventFlip) {
69
89
  modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -88,14 +108,14 @@ var Popover = React.forwardRef(function (_a, ref) {
88
108
  availableHeight,
89
109
  arrowElement,
90
110
  ]);
91
- var _q = reactPopper.usePopper(referenceElement, popperElement, {
111
+ var _p = reactPopper.usePopper(referenceElement, popperElement, {
92
112
  placement: position,
93
113
  modifiers: popperModifiers,
94
- }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
114
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
95
115
  if (updatePopper) {
96
116
  updatePopperRef.current = updatePopper;
97
117
  }
98
- React.useEffect(function () {
118
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
99
119
  setReferenceElement(anchorElement);
100
120
  }, [anchorElement]);
101
121
  React.useEffect(function () {
@@ -104,7 +124,7 @@ var Popover = React.forwardRef(function (_a, ref) {
104
124
  }
105
125
  }, [updatePopper, arrowElement, children]);
106
126
  React.useEffect(function () {
107
- if (update && !update.current && updatePopper) {
127
+ if (update && updatePopper) {
108
128
  // eslint-disable-next-line no-param-reassign
109
129
  update.current = updatePopper;
110
130
  }
@@ -123,28 +143,12 @@ var Popover = React.forwardRef(function (_a, ref) {
123
143
  }
124
144
  return function () { return ({}); };
125
145
  }, [anchorElement, useAnchorWidth]);
126
- /**
127
- * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
128
- * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
129
- */
130
- React.useEffect(function () {
131
- var shiftedPosition = position.includes('-start') || position.includes('-end');
132
- if (shiftedPosition && referenceElement) {
133
- var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
134
- var size = position.includes('left') || position.includes('right') ? height : width;
135
- if (size >= MIN_ARROW_SHIFT_SIZE) {
136
- setArrowShift(true);
137
- }
138
- }
139
- }, [referenceElement, position]);
140
146
  var renderContent = function (computedZIndex) {
141
- var _a, _b;
142
- var _c;
143
- return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className, (_a = {},
144
- _a[styles.arrowShift] = arrowShift,
145
- _a)) }, attributes.popper),
147
+ var _a;
148
+ var _b;
149
+ 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),
146
150
  React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
147
- React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
151
+ React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
148
152
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
149
153
  };
150
154
  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
@@ -25,7 +25,7 @@ type PopoverProps = {
25
25
  position?: Position;
26
26
  /**
27
27
  * Запрещает поповеру менять свою позицию.
28
- * Например, если места снизу недостаточно,то он все равно будет показан снизу
28
+ * Например, если места снизу недостаточно, то он все равно будет показан снизу
29
29
  */
30
30
  preventFlip?: boolean;
31
31
  /**
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/cssm/Component.js CHANGED
@@ -12,6 +12,7 @@ var cn = require('classnames');
12
12
  var maxSize = require('popper-max-size-modifier');
13
13
  var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
14
14
  var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
15
+ var hooks = require('@alfalab/hooks');
15
16
  var styles = require('./index.module.css');
16
17
 
17
18
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -45,24 +46,43 @@ var availableHieghtModifier = {
45
46
  }
46
47
  },
47
48
  };
48
- /**
49
- * Минимальный размер anchorElement,
50
- * при котором возможно смещение стрелочки относительно центра
51
- */
52
- var MIN_ARROW_SHIFT_SIZE = 75;
49
+ var DEFAULT_OFFSET = [0, 0];
50
+ // Минимальное расстояние стрелки до края поповера
51
+ var MIN_DISTANCE_TO_EDGE = 24;
52
+ function getArrowPadding(_a) {
53
+ var placement = _a.placement;
54
+ if (placement === 'right-end' || placement === 'left-end') {
55
+ return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
56
+ }
57
+ if (placement === 'top-start' || placement === 'bottom-start') {
58
+ return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
59
+ }
60
+ if (placement === 'right-start' || placement === 'left-start') {
61
+ return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
62
+ }
63
+ if (placement === 'top-end' || placement === 'bottom-end') {
64
+ return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
65
+ }
66
+ return 0;
67
+ }
53
68
  var Popover = React.forwardRef(function (_a, ref) {
54
- 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 ? "".concat(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;
69
+ 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 ? 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;
55
70
  var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
56
71
  var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
57
72
  var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
58
- var _p = React.useState(false), arrowShift = _p[0], setArrowShift = _p[1];
59
73
  var updatePopperRef = React.useRef();
60
74
  var popperRef = React.useRef(null);
61
75
  var innerRef = React.useRef(null);
62
76
  var popperModifiers = React.useMemo(function () {
63
77
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
64
78
  if (withArrow) {
65
- modifiers.push({ name: 'arrow', options: { element: arrowElement } });
79
+ modifiers.push({
80
+ name: 'arrow',
81
+ options: {
82
+ element: arrowElement,
83
+ padding: getArrowPadding,
84
+ },
85
+ });
66
86
  }
67
87
  if (preventFlip) {
68
88
  modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -87,14 +107,14 @@ var Popover = React.forwardRef(function (_a, ref) {
87
107
  availableHeight,
88
108
  arrowElement,
89
109
  ]);
90
- var _q = reactPopper.usePopper(referenceElement, popperElement, {
110
+ var _p = reactPopper.usePopper(referenceElement, popperElement, {
91
111
  placement: position,
92
112
  modifiers: popperModifiers,
93
- }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
113
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
94
114
  if (updatePopper) {
95
115
  updatePopperRef.current = updatePopper;
96
116
  }
97
- React.useEffect(function () {
117
+ hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
98
118
  setReferenceElement(anchorElement);
99
119
  }, [anchorElement]);
100
120
  React.useEffect(function () {
@@ -103,7 +123,7 @@ var Popover = React.forwardRef(function (_a, ref) {
103
123
  }
104
124
  }, [updatePopper, arrowElement, children]);
105
125
  React.useEffect(function () {
106
- if (update && !update.current && updatePopper) {
126
+ if (update && updatePopper) {
107
127
  // eslint-disable-next-line no-param-reassign
108
128
  update.current = updatePopper;
109
129
  }
@@ -122,28 +142,12 @@ var Popover = React.forwardRef(function (_a, ref) {
122
142
  }
123
143
  return function () { return ({}); };
124
144
  }, [anchorElement, useAnchorWidth]);
125
- /**
126
- * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
127
- * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
128
- */
129
- React.useEffect(function () {
130
- var shiftedPosition = position.includes('-start') || position.includes('-end');
131
- if (shiftedPosition && referenceElement) {
132
- var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
133
- var size = position.includes('left') || position.includes('right') ? height : width;
134
- if (size >= MIN_ARROW_SHIFT_SIZE) {
135
- setArrowShift(true);
136
- }
137
- }
138
- }, [referenceElement, position]);
139
145
  var renderContent = function (computedZIndex) {
140
- var _a, _b;
141
- var _c;
142
- return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className, (_a = {},
143
- _a[styles__default.default.arrowShift] = arrowShift,
144
- _a)) }, attributes.popper),
146
+ var _a;
147
+ var _b;
148
+ 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),
145
149
  React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
146
- React__default.default.createElement("div", { className: cn__default.default((_b = {}, _b[styles__default.default.scrollableContent] = availableHeight, _b)) }, children),
150
+ React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, children),
147
151
  withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
148
152
  };
149
153
  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/index.js CHANGED
@@ -13,6 +13,7 @@ require('classnames');
13
13
  require('popper-max-size-modifier');
14
14
  require('@alfalab/core-components-portal/cssm');
15
15
  require('@alfalab/core-components-stack/cssm');
16
+ require('@alfalab/hooks');
16
17
  require('./index.module.css');
17
18
 
18
19
 
package/cssm/index.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-bg-primary: #fff;
3
+ --color-light-modal-bg-primary: #fff;
4
4
  --color-light-text-primary: #0e0e0e; /* 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 */
5
5
  } :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 */
6
6
  } :root {
@@ -24,7 +24,7 @@
24
24
  color: var(--color-light-text-primary);
25
25
  } .inner {
26
26
  position: relative;
27
- background-color: var(--color-light-bg-primary);
27
+ background-color: var(--color-light-modal-bg-primary);
28
28
  box-shadow: var(--shadow-m);
29
29
  border: 1px solid var(--popover-border-color);
30
30
  box-sizing: border-box;
@@ -41,7 +41,7 @@
41
41
  position: absolute;
42
42
  width: 12px;
43
43
  height: 12px;
44
- background-color: var(--color-light-bg-primary);
44
+ background-color: var(--color-light-modal-bg-primary);
45
45
  border: 1px solid var(--popover-border-color);
46
46
  box-sizing: border-box;
47
47
  transform: rotate(45deg);
@@ -53,11 +53,7 @@
53
53
  top: -6px;
54
54
  border-bottom: none;
55
55
  border-left: none;
56
- } .component[data-popper-placement='left-start'].arrowShift .arrow:after {
57
- top: -7px;
58
- } .component[data-popper-placement='left-end'].arrowShift .arrow:after {
59
- top: -5px;
60
- } .component[data-popper-placement='right'] .arrow,
56
+ } .component[data-popper-placement='right'] .arrow,
61
57
  .component[data-popper-placement='right-start'] .arrow,
62
58
  .component[data-popper-placement='right-end'] .arrow {
63
59
  left: -7px
@@ -65,11 +61,7 @@
65
61
  top: -6px;
66
62
  border-top: none;
67
63
  border-right: none;
68
- } .component[data-popper-placement='right-start'].arrowShift .arrow:after {
69
- top: -7px;
70
- } .component[data-popper-placement='right-end'].arrowShift .arrow:after {
71
- top: -5px;
72
- } .component[data-popper-placement='top'] .arrow,
64
+ } .component[data-popper-placement='top'] .arrow,
73
65
  .component[data-popper-placement='top-start'] .arrow,
74
66
  .component[data-popper-placement='top-end'] .arrow {
75
67
  bottom: 5px
@@ -77,11 +69,7 @@
77
69
  left: -6px;
78
70
  border-top: none;
79
71
  border-left: none;
80
- } .component[data-popper-placement='top-start'].arrowShift .arrow:after {
81
- left: -17px;
82
- } .component[data-popper-placement='top-end'].arrowShift .arrow:after {
83
- left: 5px;
84
- } .component[data-popper-placement='bottom'] .arrow,
72
+ } .component[data-popper-placement='bottom'] .arrow,
85
73
  .component[data-popper-placement='bottom-start'] .arrow,
86
74
  .component[data-popper-placement='bottom-end'] .arrow {
87
75
  top: -7px
@@ -89,11 +77,7 @@
89
77
  left: -6px;
90
78
  border-bottom: none;
91
79
  border-right: none;
92
- } .component[data-popper-placement='bottom-start'].arrowShift .arrow:after {
93
- left: -17px;
94
- } .component[data-popper-placement='bottom-end'].arrowShift .arrow:after {
95
- left: 5px;
96
- } .enter .inner {
80
+ } .enter .inner {
97
81
  opacity: 0;
98
82
  transform: scale(0.98);
99
83
  } .enterActive .inner {
package/esm/Component.d.ts CHANGED
@@ -25,7 +25,7 @@ type PopoverProps = {
25
25
  position?: Position;
26
26
  /**
27
27
  * Запрещает поповеру менять свою позицию.
28
- * Например, если места снизу недостаточно,то он все равно будет показан снизу
28
+ * Например, если места снизу недостаточно, то он все равно будет показан снизу
29
29
  */
30
30
  preventFlip?: boolean;
31
31
  /**
@@ -77,7 +77,7 @@ type PopoverProps = {
77
77
  /**
78
78
  * Хранит функцию, с помощью которой можно обновить положение компонента
79
79
  */
80
- update?: MutableRefObject<() => void>;
80
+ update?: MutableRefObject<(() => void) | undefined>;
81
81
  /**
82
82
  * Дополнительный класс
83
83
  */
package/esm/Component.js CHANGED
@@ -8,8 +8,9 @@ import cn from 'classnames';
8
8
  import maxSize from 'popper-max-size-modifier';
9
9
  import { Portal } from '@alfalab/core-components-portal/esm';
10
10
  import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
11
+ import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
11
12
 
12
- var styles = {"component":"popover__component_1mk0m","inner":"popover__inner_1mk0m","scrollableContent":"popover__scrollableContent_1mk0m","arrow":"popover__arrow_1mk0m","arrowShift":"popover__arrowShift_1mk0m","enter":"popover__enter_1mk0m","enterActive":"popover__enterActive_1mk0m","exit":"popover__exit_1mk0m","exitActive":"popover__exitActive_1mk0m"};
13
+ var styles = {"component":"popover__component_dqu0o","inner":"popover__inner_dqu0o","scrollableContent":"popover__scrollableContent_dqu0o","arrow":"popover__arrow_dqu0o","enter":"popover__enter_dqu0o","enterActive":"popover__enterActive_dqu0o","exit":"popover__exit_dqu0o","exitActive":"popover__exitActive_dqu0o"};
13
14
  require('./index.css')
14
15
 
15
16
  var DEFAULT_TRANSITION = {
@@ -35,24 +36,43 @@ var availableHieghtModifier = {
35
36
  }
36
37
  },
37
38
  };
38
- /**
39
- * Минимальный размер anchorElement,
40
- * при котором возможно смещение стрелочки относительно центра
41
- */
42
- var MIN_ARROW_SHIFT_SIZE = 75;
39
+ var DEFAULT_OFFSET = [0, 0];
40
+ // Минимальное расстояние стрелки до края поповера
41
+ var MIN_DISTANCE_TO_EDGE = 24;
42
+ function getArrowPadding(_a) {
43
+ var placement = _a.placement;
44
+ if (placement === 'right-end' || placement === 'left-end') {
45
+ return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
46
+ }
47
+ if (placement === 'top-start' || placement === 'bottom-start') {
48
+ return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
49
+ }
50
+ if (placement === 'right-start' || placement === 'left-start') {
51
+ return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
52
+ }
53
+ if (placement === 'top-end' || placement === 'bottom-end') {
54
+ return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
55
+ }
56
+ return 0;
57
+ }
43
58
  var Popover = forwardRef(function (_a, ref) {
44
- 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 ? "".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;
59
+ 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;
45
60
  var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
46
61
  var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
47
62
  var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
48
- var _p = useState(false), arrowShift = _p[0], setArrowShift = _p[1];
49
63
  var updatePopperRef = useRef();
50
64
  var popperRef = useRef(null);
51
65
  var innerRef = useRef(null);
52
66
  var popperModifiers = useMemo(function () {
53
67
  var modifiers = [{ name: 'offset', options: { offset: offset } }];
54
68
  if (withArrow) {
55
- modifiers.push({ name: 'arrow', options: { element: arrowElement } });
69
+ modifiers.push({
70
+ name: 'arrow',
71
+ options: {
72
+ element: arrowElement,
73
+ padding: getArrowPadding,
74
+ },
75
+ });
56
76
  }
57
77
  if (preventFlip) {
58
78
  modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
@@ -77,14 +97,14 @@ var Popover = forwardRef(function (_a, ref) {
77
97
  availableHeight,
78
98
  arrowElement,
79
99
  ]);
80
- var _q = usePopper(referenceElement, popperElement, {
100
+ var _p = usePopper(referenceElement, popperElement, {
81
101
  placement: position,
82
102
  modifiers: popperModifiers,
83
- }), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update;
103
+ }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
84
104
  if (updatePopper) {
85
105
  updatePopperRef.current = updatePopper;
86
106
  }
87
- useEffect(function () {
107
+ useLayoutEffect_SAFE_FOR_SSR(function () {
88
108
  setReferenceElement(anchorElement);
89
109
  }, [anchorElement]);
90
110
  useEffect(function () {
@@ -93,7 +113,7 @@ var Popover = forwardRef(function (_a, ref) {
93
113
  }
94
114
  }, [updatePopper, arrowElement, children]);
95
115
  useEffect(function () {
96
- if (update && !update.current && updatePopper) {
116
+ if (update && updatePopper) {
97
117
  // eslint-disable-next-line no-param-reassign
98
118
  update.current = updatePopper;
99
119
  }
@@ -112,28 +132,12 @@ var Popover = forwardRef(function (_a, ref) {
112
132
  }
113
133
  return function () { return ({}); };
114
134
  }, [anchorElement, useAnchorWidth]);
115
- /**
116
- * По дизайну, если у тултипа позиционирование -start/-end, то стрелочка немного сдвигается вбок.
117
- * Но если anchorElement слишком маленький, то стрелочка сдвигаться не должна.
118
- */
119
- useEffect(function () {
120
- var shiftedPosition = position.includes('-start') || position.includes('-end');
121
- if (shiftedPosition && referenceElement) {
122
- var _a = referenceElement.getBoundingClientRect(), width = _a.width, height = _a.height;
123
- var size = position.includes('left') || position.includes('right') ? height : width;
124
- if (size >= MIN_ARROW_SHIFT_SIZE) {
125
- setArrowShift(true);
126
- }
127
- }
128
- }, [referenceElement, position]);
129
135
  var renderContent = function (computedZIndex) {
130
- var _a, _b;
131
- var _c;
132
- return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_c = popperStyles.popper) === null || _c === void 0 ? void 0 : _c.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className, (_a = {},
133
- _a[styles.arrowShift] = arrowShift,
134
- _a)) }, attributes.popper),
136
+ var _a;
137
+ var _b;
138
+ 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),
135
139
  React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
136
- React.createElement("div", { className: cn((_b = {}, _b[styles.scrollableContent] = availableHeight, _b)) }, children),
140
+ React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
137
141
  withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
138
142
  };
139
143
  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) {