@alfalab/core-components-popover 7.0.0 → 7.1.0-snapshot-92b8690
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.
- package/dynamic-mixins/Component.d.ts +102 -0
- package/dynamic-mixins/Component.js +167 -0
- package/dynamic-mixins/Component.js.map +1 -0
- package/dynamic-mixins/index.css +85 -0
- package/dynamic-mixins/index.d.ts +1 -0
- package/dynamic-mixins/index.js +10 -0
- package/dynamic-mixins/index.js.map +1 -0
- package/dynamic-mixins/index.module.css.js +8 -0
- package/dynamic-mixins/index.module.css.js.map +1 -0
- package/esm/index.css +25 -25
- package/esm/index.module.css.js +1 -1
- package/esm/index.module.css.js.map +1 -1
- package/index.css +25 -25
- package/index.module.css.js +1 -1
- package/index.module.css.js.map +1 -1
- package/modern/index.css +25 -25
- package/modern/index.module.css.js +1 -1
- package/modern/index.module.css.js.map +1 -1
- package/moderncssm/index.module.css +2 -0
- package/package.json +7 -7
- package/src/index.module.css +1 -1
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React, { CSSProperties, MutableRefObject, ReactNode } from 'react';
|
|
2
|
+
import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
|
|
3
|
+
import { BasePlacement, VariationPlacement } from '@popperjs/core';
|
|
4
|
+
declare type RefElement = HTMLElement | null;
|
|
5
|
+
export declare type Position = BasePlacement | VariationPlacement;
|
|
6
|
+
export declare type PopoverProps = {
|
|
7
|
+
/**
|
|
8
|
+
* Управление состоянием поповера (открыт/закрыт)
|
|
9
|
+
*/
|
|
10
|
+
open: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Элемент, относительного которого появляется поповер
|
|
13
|
+
*/
|
|
14
|
+
anchorElement: RefElement;
|
|
15
|
+
/**
|
|
16
|
+
* Использовать ширину родительского элемента
|
|
17
|
+
*/
|
|
18
|
+
useAnchorWidth?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Позиционирование поповера
|
|
21
|
+
*/
|
|
22
|
+
position?: Position;
|
|
23
|
+
/**
|
|
24
|
+
* Запрещает поповеру менять свою позицию.
|
|
25
|
+
* Например, если места снизу недостаточно, то он все равно будет показан снизу
|
|
26
|
+
*/
|
|
27
|
+
preventFlip?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
|
|
30
|
+
*/
|
|
31
|
+
preventOverflow?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента
|
|
34
|
+
*/
|
|
35
|
+
availableHeight?: boolean | (() => Element | null | undefined);
|
|
36
|
+
/**
|
|
37
|
+
* Если `true`, будет отрисована стрелочка
|
|
38
|
+
*/
|
|
39
|
+
withArrow?: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Смещение поповера.
|
|
42
|
+
* Если позиционирование top, bottom, то [x, y].
|
|
43
|
+
* Если позиционирование left, right то [y, x].
|
|
44
|
+
*/
|
|
45
|
+
offset?: [number, number];
|
|
46
|
+
/**
|
|
47
|
+
* Дополнительный класс для поповера
|
|
48
|
+
*/
|
|
49
|
+
popperClassName?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Дополнительный класс для стрелочки
|
|
52
|
+
*/
|
|
53
|
+
arrowClassName?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Функция, возвращающая контейнер, в который будет рендериться поповер
|
|
56
|
+
*/
|
|
57
|
+
getPortalContainer?: () => HTMLElement;
|
|
58
|
+
/**
|
|
59
|
+
* CSSTransitionProps, прокидываются в компонент CSSTransitionProps.
|
|
60
|
+
*/
|
|
61
|
+
transition?: CSSTransitionProps;
|
|
62
|
+
/**
|
|
63
|
+
* Выставляет кастомное свойство transition-duration
|
|
64
|
+
*/
|
|
65
|
+
transitionDuration?: CSSProperties['transitionDuration'];
|
|
66
|
+
/**
|
|
67
|
+
* Рендерит компонент, обернутый в Transition
|
|
68
|
+
*/
|
|
69
|
+
withTransition?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Идентификатор для систем автоматизированного тестирования
|
|
72
|
+
*/
|
|
73
|
+
dataTestId?: string;
|
|
74
|
+
/**
|
|
75
|
+
* Хранит функцию, с помощью которой можно обновить положение компонента
|
|
76
|
+
*/
|
|
77
|
+
update?: MutableRefObject<(() => void) | undefined>;
|
|
78
|
+
/**
|
|
79
|
+
* Дополнительный класс
|
|
80
|
+
*/
|
|
81
|
+
className?: string;
|
|
82
|
+
/**
|
|
83
|
+
* z-index компонента
|
|
84
|
+
*/
|
|
85
|
+
zIndex?: number;
|
|
86
|
+
/**
|
|
87
|
+
* Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,
|
|
88
|
+
* по очереди для каждой позиции из этого списка.
|
|
89
|
+
* Если не передавать, то поповер открывается в противоположном направлении от переданного position.
|
|
90
|
+
*/
|
|
91
|
+
fallbackPlacements?: Position[];
|
|
92
|
+
/**
|
|
93
|
+
* Контент
|
|
94
|
+
*/
|
|
95
|
+
children?: ReactNode;
|
|
96
|
+
/**
|
|
97
|
+
* Класс для скролл контейнера
|
|
98
|
+
*/
|
|
99
|
+
scrollableContentClassName?: string;
|
|
100
|
+
};
|
|
101
|
+
export declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
export {};
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var mergeRefs = require('react-merge-refs');
|
|
8
|
+
var reactPopper = require('react-popper');
|
|
9
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
10
|
+
var resizeObserver = require('@juggle/resize-observer');
|
|
11
|
+
var cn = require('classnames');
|
|
12
|
+
var maxSize = require('popper-max-size-modifier');
|
|
13
|
+
var dynamicMixins$3 = require('@alfalab/core-components-portal/dynamic-mixins');
|
|
14
|
+
var dynamicMixins$1 = require('@alfalab/core-components-shared/dynamic-mixins');
|
|
15
|
+
var dynamicMixins$2 = require('@alfalab/core-components-stack/dynamic-mixins');
|
|
16
|
+
var dynamicMixins = require('@alfalab/core-components-stack-context/dynamic-mixins');
|
|
17
|
+
var hooks = require('@alfalab/hooks');
|
|
18
|
+
var index_module = require('./index.module.css.js');
|
|
19
|
+
|
|
20
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
21
|
+
|
|
22
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
23
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
|
|
24
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
25
|
+
var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
|
|
26
|
+
|
|
27
|
+
var DEFAULT_TRANSITION = {
|
|
28
|
+
timeout: 150,
|
|
29
|
+
};
|
|
30
|
+
var CSS_TRANSITION_CLASS_NAMES = {
|
|
31
|
+
enter: index_module.enter,
|
|
32
|
+
enterActive: index_module.enterActive,
|
|
33
|
+
exit: index_module.exit,
|
|
34
|
+
exitActive: index_module.exitActive,
|
|
35
|
+
};
|
|
36
|
+
var DEFAULT_OFFSET = [0, 0];
|
|
37
|
+
// Минимальное расстояние стрелки до края поповера
|
|
38
|
+
var MIN_DISTANCE_TO_EDGE = 24;
|
|
39
|
+
function getArrowPadding(_a) {
|
|
40
|
+
var placement = _a.placement;
|
|
41
|
+
if (placement === 'right-end' || placement === 'left-end') {
|
|
42
|
+
return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
|
|
43
|
+
}
|
|
44
|
+
if (placement === 'top-start' || placement === 'bottom-start') {
|
|
45
|
+
return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };
|
|
46
|
+
}
|
|
47
|
+
if (placement === 'right-start' || placement === 'left-start') {
|
|
48
|
+
return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };
|
|
49
|
+
}
|
|
50
|
+
if (placement === 'top-end' || placement === 'bottom-end') {
|
|
51
|
+
return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };
|
|
52
|
+
}
|
|
53
|
+
return 0;
|
|
54
|
+
}
|
|
55
|
+
var Popover = React.forwardRef(function (_a, ref) {
|
|
56
|
+
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 ? dynamicMixins.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;
|
|
57
|
+
var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
|
|
58
|
+
var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
|
|
59
|
+
var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
|
|
60
|
+
var _p = React.useState(function () { return ({}); }), maxSizeOptions = _p[0], setMaxSizeOptions = _p[1];
|
|
61
|
+
var updatePopperRef = React.useRef();
|
|
62
|
+
var popperRef = React.useRef(null);
|
|
63
|
+
var innerRef = React.useRef(null);
|
|
64
|
+
var popperModifiers = React.useMemo(function () {
|
|
65
|
+
var modifiers = [{ name: 'offset', options: { offset: offset } }];
|
|
66
|
+
if (withArrow) {
|
|
67
|
+
modifiers.push({
|
|
68
|
+
name: 'arrow',
|
|
69
|
+
options: {
|
|
70
|
+
element: arrowElement,
|
|
71
|
+
padding: getArrowPadding,
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
if (preventFlip) {
|
|
76
|
+
modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
|
|
77
|
+
}
|
|
78
|
+
if (fallbackPlacements) {
|
|
79
|
+
modifiers.push({ name: 'flip', options: { fallbackPlacements: fallbackPlacements } });
|
|
80
|
+
}
|
|
81
|
+
if (preventOverflow) {
|
|
82
|
+
modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
|
|
83
|
+
}
|
|
84
|
+
if (dynamicMixins$1.isFn(availableHeight) || availableHeight) {
|
|
85
|
+
modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: maxSizeOptions }));
|
|
86
|
+
}
|
|
87
|
+
return modifiers;
|
|
88
|
+
}, [
|
|
89
|
+
offset,
|
|
90
|
+
withArrow,
|
|
91
|
+
preventFlip,
|
|
92
|
+
fallbackPlacements,
|
|
93
|
+
preventOverflow,
|
|
94
|
+
availableHeight,
|
|
95
|
+
arrowElement,
|
|
96
|
+
maxSizeOptions,
|
|
97
|
+
]);
|
|
98
|
+
var _q = reactPopper.usePopper(referenceElement, popperElement, {
|
|
99
|
+
placement: position,
|
|
100
|
+
modifiers: popperModifiers,
|
|
101
|
+
}), popperStyles = _q.styles, attributes = _q.attributes, updatePopper = _q.update, state = _q.state;
|
|
102
|
+
if (updatePopper) {
|
|
103
|
+
updatePopperRef.current = updatePopper;
|
|
104
|
+
}
|
|
105
|
+
hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
|
|
106
|
+
var _a;
|
|
107
|
+
var nextBoundry = dynamicMixins$1.isFn(availableHeight) ? (_a = availableHeight()) !== null && _a !== void 0 ? _a : undefined : undefined;
|
|
108
|
+
if (!(maxSizeOptions.boundary === nextBoundry)) {
|
|
109
|
+
setMaxSizeOptions({ boundary: nextBoundry });
|
|
110
|
+
}
|
|
111
|
+
});
|
|
112
|
+
hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
|
|
113
|
+
setReferenceElement(anchorElement);
|
|
114
|
+
}, [anchorElement]);
|
|
115
|
+
React.useEffect(function () {
|
|
116
|
+
if (updatePopper) {
|
|
117
|
+
updatePopper();
|
|
118
|
+
}
|
|
119
|
+
}, [updatePopper, arrowElement, children]);
|
|
120
|
+
React.useEffect(function () {
|
|
121
|
+
if (update && updatePopper) {
|
|
122
|
+
// eslint-disable-next-line no-param-reassign
|
|
123
|
+
update.current = updatePopper;
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
React.useEffect(function () {
|
|
127
|
+
if (useAnchorWidth) {
|
|
128
|
+
var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
|
|
129
|
+
var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
|
|
130
|
+
var observer_1 = new ResizeObserver_1(updatePopoverWidth);
|
|
131
|
+
if (anchorElement) {
|
|
132
|
+
observer_1.observe(anchorElement);
|
|
133
|
+
}
|
|
134
|
+
return function () {
|
|
135
|
+
observer_1.disconnect();
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
return function () { return ({}); };
|
|
139
|
+
}, [anchorElement, useAnchorWidth]);
|
|
140
|
+
var renderContent = function (computedZIndex) {
|
|
141
|
+
var _a;
|
|
142
|
+
var _b, _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), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(index_module.component, className) }, attributes.popper),
|
|
144
|
+
React__default.default.createElement("div", { className: cn__default.default(index_module.inner, popperClassName), ref: innerRef, style: {
|
|
145
|
+
maxHeight: dynamicMixins$1.isFn(availableHeight) || availableHeight
|
|
146
|
+
? (_c = state === null || state === void 0 ? void 0 : state.modifiersData.maxSize) === null || _c === void 0 ? void 0 : _c.height
|
|
147
|
+
: undefined,
|
|
148
|
+
} },
|
|
149
|
+
React__default.default.createElement("div", { className: cn__default.default(scrollableContentClassName, (_a = {},
|
|
150
|
+
_a[index_module.scrollableContent] = dynamicMixins$1.isFn(availableHeight) || availableHeight,
|
|
151
|
+
_a)) }, children),
|
|
152
|
+
withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(index_module.arrow, arrowClassName) })))));
|
|
153
|
+
};
|
|
154
|
+
return (React__default.default.createElement(dynamicMixins$2.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(dynamicMixins$3.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) {
|
|
155
|
+
var _a;
|
|
156
|
+
// Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
|
|
157
|
+
if (innerRef.current &&
|
|
158
|
+
transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
|
|
159
|
+
innerRef.current.style.setProperty('transition-duration', transitionDuration);
|
|
160
|
+
}
|
|
161
|
+
(_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
|
|
162
|
+
} }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
|
|
163
|
+
});
|
|
164
|
+
Popover.displayName = 'Popover';
|
|
165
|
+
|
|
166
|
+
exports.Popover = Popover;
|
|
167
|
+
//# sourceMappingURL=Component.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../src/Component.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n forwardRef,\n MutableRefObject,\n ReactNode,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport { usePopper } from 'react-popper';\nimport { CSSTransition } from 'react-transition-group';\nimport { CSSTransitionProps } from 'react-transition-group/CSSTransition';\nimport { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';\nimport { BasePlacement, Modifier, Obj, VariationPlacement } from '@popperjs/core';\nimport cn from 'classnames';\nimport maxSize from 'popper-max-size-modifier';\n\nimport { Portal } from '@alfalab/core-components-portal';\nimport { isFn } from '@alfalab/core-components-shared';\nimport { Stack } from '@alfalab/core-components-stack';\nimport { stackingOrder } from '@alfalab/core-components-stack-context';\nimport { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';\n\nimport styles from './index.module.css';\n\ntype RefElement = HTMLElement | null;\n\ntype ModifierOptions<T> = T extends Modifier<unknown, infer V> ? V : never;\n\nexport type Position = BasePlacement | VariationPlacement;\n\ntype PopperModifier = {\n name: string;\n options: Obj;\n};\n\nexport type PopoverProps = {\n /**\n * Управление состоянием поповера (открыт/закрыт)\n */\n open: boolean;\n\n /**\n * Элемент, относительного которого появляется поповер\n */\n anchorElement: RefElement;\n\n /**\n * Использовать ширину родительского элемента\n */\n useAnchorWidth?: boolean;\n\n /**\n * Позиционирование поповера\n */\n position?: Position;\n\n /**\n * Запрещает поповеру менять свою позицию.\n * Например, если места снизу недостаточно, то он все равно будет показан снизу\n */\n preventFlip?: boolean;\n\n /**\n * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.\n */\n preventOverflow?: boolean;\n\n /**\n * Позволяет поповеру подствраивать свою высоту под границы экрана/элемента, если из-за величины контента он выходит за рамки области экрана/элемента\n */\n availableHeight?: boolean | (() => Element | null | undefined);\n\n /**\n * Если `true`, будет отрисована стрелочка\n */\n withArrow?: boolean;\n\n /**\n * Смещение поповера.\n * Если позиционирование top, bottom, то [x, y].\n * Если позиционирование left, right то [y, x].\n */\n offset?: [number, number];\n\n /**\n * Дополнительный класс для поповера\n */\n popperClassName?: string;\n\n /**\n * Дополнительный класс для стрелочки\n */\n arrowClassName?: string;\n\n /**\n * Функция, возвращающая контейнер, в который будет рендериться поповер\n */\n getPortalContainer?: () => HTMLElement;\n\n /**\n * CSSTransitionProps, прокидываются в компонент CSSTransitionProps.\n */\n transition?: CSSTransitionProps;\n\n /**\n * Выставляет кастомное свойство transition-duration\n */\n transitionDuration?: CSSProperties['transitionDuration'];\n\n /**\n * Рендерит компонент, обернутый в Transition\n */\n withTransition?: boolean;\n\n /**\n * Идентификатор для систем автоматизированного тестирования\n */\n dataTestId?: string;\n\n /**\n * Хранит функцию, с помощью которой можно обновить положение компонента\n */\n update?: MutableRefObject<(() => void) | undefined>;\n\n /**\n * Дополнительный класс\n */\n className?: string;\n\n /**\n * z-index компонента\n */\n zIndex?: number;\n\n /**\n * Если поповер не помещается в переданной позиции (position), он попробует открыться в другой позиции,\n * по очереди для каждой позиции из этого списка.\n * Если не передавать, то поповер открывается в противоположном направлении от переданного position.\n */\n fallbackPlacements?: Position[];\n\n /**\n * Контент\n */\n children?: ReactNode;\n\n /**\n * Класс для скролл контейнера\n */\n scrollableContentClassName?: string;\n};\n\nconst DEFAULT_TRANSITION: PopoverProps['transition'] = {\n timeout: 150,\n};\n\nconst CSS_TRANSITION_CLASS_NAMES = {\n enter: styles.enter,\n enterActive: styles.enterActive,\n exit: styles.exit,\n exitActive: styles.exitActive,\n};\n\nconst DEFAULT_OFFSET = [0, 0];\n\n// Минимальное расстояние стрелки до края поповера\nconst MIN_DISTANCE_TO_EDGE = 24;\n\nfunction getArrowPadding({\n placement,\n}: {\n popper: { height: number; width: number };\n reference: { height: number; width: number };\n placement: Position;\n}) {\n if (placement === 'right-end' || placement === 'left-end') {\n return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };\n }\n\n if (placement === 'top-start' || placement === 'bottom-start') {\n return { top: 0, right: MIN_DISTANCE_TO_EDGE, bottom: 0, left: 0 };\n }\n\n if (placement === 'right-start' || placement === 'left-start') {\n return { top: 0, right: 0, bottom: MIN_DISTANCE_TO_EDGE, left: 0 };\n }\n\n if (placement === 'top-end' || placement === 'bottom-end') {\n return { top: 0, right: 0, bottom: 0, left: MIN_DISTANCE_TO_EDGE };\n }\n\n return 0;\n}\n\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n (\n {\n children,\n getPortalContainer,\n transition = DEFAULT_TRANSITION,\n anchorElement,\n useAnchorWidth,\n offset = DEFAULT_OFFSET,\n withArrow = false,\n withTransition = true,\n position = 'left',\n preventFlip,\n popperClassName,\n arrowClassName,\n className,\n open,\n dataTestId,\n update,\n transitionDuration = `${transition.timeout}ms`,\n zIndex = stackingOrder.POPOVER,\n fallbackPlacements,\n preventOverflow = true,\n availableHeight = false,\n scrollableContentClassName,\n },\n ref,\n ) => {\n const [referenceElement, setReferenceElement] = useState<RefElement>(anchorElement);\n const [popperElement, setPopperElement] = useState<RefElement>(null);\n const [arrowElement, setArrowElement] = useState<RefElement>(null);\n const [maxSizeOptions, setMaxSizeOptions] = useState<\n Partial<ModifierOptions<typeof maxSize>>\n >(() => ({}));\n\n const updatePopperRef = useRef<() => void>();\n\n const popperRef = useRef<HTMLDivElement>(null);\n const innerRef = useRef<HTMLDivElement>(null);\n\n const popperModifiers = useMemo(() => {\n const modifiers: PopperModifier[] = [{ name: 'offset', options: { offset } }];\n\n if (withArrow) {\n modifiers.push({\n name: 'arrow',\n options: {\n element: arrowElement,\n padding: getArrowPadding,\n },\n });\n }\n\n if (preventFlip) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });\n }\n\n if (fallbackPlacements) {\n modifiers.push({ name: 'flip', options: { fallbackPlacements } });\n }\n\n if (preventOverflow) {\n modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });\n }\n\n if (isFn(availableHeight) || availableHeight) {\n modifiers.push({ ...maxSize, options: maxSizeOptions });\n }\n\n return modifiers;\n }, [\n offset,\n withArrow,\n preventFlip,\n fallbackPlacements,\n preventOverflow,\n availableHeight,\n arrowElement,\n maxSizeOptions,\n ]);\n\n const {\n styles: popperStyles,\n attributes,\n update: updatePopper,\n state,\n } = usePopper(referenceElement, popperElement, {\n placement: position,\n modifiers: popperModifiers,\n });\n\n if (updatePopper) {\n updatePopperRef.current = updatePopper;\n }\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n const nextBoundry = isFn(availableHeight) ? availableHeight() ?? undefined : undefined;\n\n if (!(maxSizeOptions.boundary === nextBoundry)) {\n setMaxSizeOptions({ boundary: nextBoundry });\n }\n });\n\n useLayoutEffect_SAFE_FOR_SSR(() => {\n setReferenceElement(anchorElement);\n }, [anchorElement]);\n\n useEffect(() => {\n if (updatePopper) {\n updatePopper();\n }\n }, [updatePopper, arrowElement, children]);\n\n useEffect(() => {\n if (update && updatePopper) {\n // eslint-disable-next-line no-param-reassign\n update.current = updatePopper;\n }\n });\n\n useEffect(() => {\n if (useAnchorWidth) {\n const updatePopoverWidth = () => updatePopperRef.current?.();\n const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;\n const observer = new ResizeObserver(updatePopoverWidth);\n\n if (anchorElement) {\n observer.observe(anchorElement);\n }\n\n return () => {\n observer.disconnect();\n };\n }\n\n return () => ({});\n }, [anchorElement, useAnchorWidth]);\n\n const renderContent = (computedZIndex: number) => (\n <div\n ref={mergeRefs([ref, popperRef, setPopperElement])}\n style={{\n zIndex: computedZIndex,\n width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,\n ...popperStyles.popper,\n ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),\n }}\n data-test-id={dataTestId}\n className={cn(styles.component, className)}\n {...attributes.popper}\n >\n <div\n className={cn(styles.inner, popperClassName)}\n ref={innerRef}\n style={{\n maxHeight:\n isFn(availableHeight) || availableHeight\n ? state?.modifiersData.maxSize?.height\n : undefined,\n }}\n >\n <div\n className={cn(scrollableContentClassName, {\n [styles.scrollableContent]: isFn(availableHeight) || availableHeight,\n })}\n >\n {children}\n </div>\n\n {withArrow && (\n <div\n ref={setArrowElement}\n style={popperStyles.arrow}\n className={cn(styles.arrow, arrowClassName)}\n />\n )}\n </div>\n </div>\n );\n\n return (\n <Stack value={zIndex}>\n {(computedZIndex) => (\n <Portal getPortalContainer={getPortalContainer}>\n {withTransition ? (\n <CSSTransition\n unmountOnExit={true}\n classNames={CSS_TRANSITION_CLASS_NAMES}\n nodeRef={popperRef}\n {...transition}\n in={open}\n onEntering={(node: HTMLElement, isAppearing: boolean) => {\n // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.\n if (\n innerRef.current &&\n transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`\n ) {\n innerRef.current.style.setProperty(\n 'transition-duration',\n transitionDuration,\n );\n }\n transition?.onEntering?.(node, isAppearing);\n }}\n >\n {renderContent(computedZIndex)}\n </CSSTransition>\n ) : (\n open && renderContent(computedZIndex)\n )}\n </Portal>\n )}\n </Stack>\n );\n },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["styles","forwardRef","stackingOrder","useState","useRef","useMemo","isFn","__assign","maxSize","usePopper","useLayoutEffect_SAFE_FOR_SSR","useEffect","ResizeObserverPolyfill","React","mergeRefs","cn","Stack","Portal","CSSTransition"],"mappings":"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"}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--color-light-modal-bg-primary: #fff;
|
|
3
|
+
--color-light-text-primary: rgba(3, 3, 6, 0.88);
|
|
4
|
+
} :root {
|
|
5
|
+
--shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
|
|
6
|
+
0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
|
|
7
|
+
} :root {
|
|
8
|
+
--popover-border-color: transparent;
|
|
9
|
+
} .popover__component_1dhes {
|
|
10
|
+
background-color: transparent;
|
|
11
|
+
color: var(--color-light-text-primary);
|
|
12
|
+
} .popover__inner_1dhes {
|
|
13
|
+
position: relative;
|
|
14
|
+
background-color: var(--color-light-modal-bg-primary);
|
|
15
|
+
box-shadow: var(--shadow-m);
|
|
16
|
+
border: 1px solid var(--popover-border-color);
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
will-change: transform;
|
|
19
|
+
} .popover__scrollableContent_1dhes {
|
|
20
|
+
position: relative;
|
|
21
|
+
z-index: 2;
|
|
22
|
+
overflow-y: auto;
|
|
23
|
+
} .popover__arrow_1dhes {
|
|
24
|
+
z-index: 1;
|
|
25
|
+
} .popover__arrow_1dhes:after {
|
|
26
|
+
content: '';
|
|
27
|
+
display: block;
|
|
28
|
+
position: absolute;
|
|
29
|
+
width: 12px;
|
|
30
|
+
height: 12px;
|
|
31
|
+
background-color: var(--color-light-modal-bg-primary);
|
|
32
|
+
border: 1px solid var(--popover-border-color);
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
transform: rotate(45deg);
|
|
35
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes,
|
|
36
|
+
.popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes,
|
|
37
|
+
.popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes {
|
|
38
|
+
right: 5px
|
|
39
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes:after {
|
|
40
|
+
top: -6px;
|
|
41
|
+
border-bottom: none;
|
|
42
|
+
border-left: none;
|
|
43
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes,
|
|
44
|
+
.popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes,
|
|
45
|
+
.popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes {
|
|
46
|
+
left: -7px
|
|
47
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes:after {
|
|
48
|
+
top: -6px;
|
|
49
|
+
border-top: none;
|
|
50
|
+
border-right: none;
|
|
51
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes,
|
|
52
|
+
.popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes,
|
|
53
|
+
.popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes {
|
|
54
|
+
bottom: 5px
|
|
55
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes:after {
|
|
56
|
+
left: -6px;
|
|
57
|
+
border-top: none;
|
|
58
|
+
border-left: none;
|
|
59
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes,
|
|
60
|
+
.popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes,
|
|
61
|
+
.popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes {
|
|
62
|
+
top: -7px
|
|
63
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes:after {
|
|
64
|
+
left: -6px;
|
|
65
|
+
border-bottom: none;
|
|
66
|
+
border-right: none;
|
|
67
|
+
} .popover__enter_1dhes .popover__inner_1dhes {
|
|
68
|
+
opacity: 0;
|
|
69
|
+
transform: scale(0.98);
|
|
70
|
+
} .popover__enterActive_1dhes .popover__inner_1dhes {
|
|
71
|
+
opacity: 1;
|
|
72
|
+
transform: scale(1);
|
|
73
|
+
transition-property: opacity, transform;
|
|
74
|
+
transition-timing-function: ease-in-out;
|
|
75
|
+
transition-duration: 150ms;
|
|
76
|
+
} .popover__exit_1dhes .popover__inner_1dhes {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
transform: scale(1);
|
|
79
|
+
} .popover__exitActive_1dhes .popover__inner_1dhes {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
transform: scale(0.98);
|
|
82
|
+
transition-property: opacity, transform;
|
|
83
|
+
transition-timing-function: ease-in-out;
|
|
84
|
+
transition-duration: 150ms;
|
|
85
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Component';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./index.css');
|
|
4
|
+
|
|
5
|
+
var styles = {"component":"popover__component_1dhes","inner":"popover__inner_1dhes","scrollableContent":"popover__scrollableContent_1dhes","arrow":"popover__arrow_1dhes","enter":"popover__enter_1dhes","enterActive":"popover__enterActive_1dhes","exit":"popover__exit_1dhes","exitActive":"popover__exitActive_1dhes"};
|
|
6
|
+
|
|
7
|
+
module.exports = styles;
|
|
8
|
+
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
package/esm/index.css
CHANGED
|
@@ -6,23 +6,23 @@
|
|
|
6
6
|
0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
|
|
7
7
|
} :root {
|
|
8
8
|
--popover-border-color: transparent;
|
|
9
|
-
} .
|
|
9
|
+
} .popover__component_1dhes {
|
|
10
10
|
background-color: transparent;
|
|
11
11
|
color: var(--color-light-text-primary);
|
|
12
|
-
} .
|
|
12
|
+
} .popover__inner_1dhes {
|
|
13
13
|
position: relative;
|
|
14
14
|
background-color: var(--color-light-modal-bg-primary);
|
|
15
15
|
box-shadow: var(--shadow-m);
|
|
16
16
|
border: 1px solid var(--popover-border-color);
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
will-change: transform;
|
|
19
|
-
} .
|
|
19
|
+
} .popover__scrollableContent_1dhes {
|
|
20
20
|
position: relative;
|
|
21
21
|
z-index: 2;
|
|
22
22
|
overflow-y: auto;
|
|
23
|
-
} .
|
|
23
|
+
} .popover__arrow_1dhes {
|
|
24
24
|
z-index: 1;
|
|
25
|
-
} .
|
|
25
|
+
} .popover__arrow_1dhes:after {
|
|
26
26
|
content: '';
|
|
27
27
|
display: block;
|
|
28
28
|
position: absolute;
|
|
@@ -32,51 +32,51 @@
|
|
|
32
32
|
border: 1px solid var(--popover-border-color);
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
transform: rotate(45deg);
|
|
35
|
-
} .
|
|
36
|
-
.
|
|
37
|
-
.
|
|
35
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes,
|
|
36
|
+
.popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes,
|
|
37
|
+
.popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes {
|
|
38
38
|
right: 5px
|
|
39
|
-
} .
|
|
39
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes:after {
|
|
40
40
|
top: -6px;
|
|
41
41
|
border-bottom: none;
|
|
42
42
|
border-left: none;
|
|
43
|
-
} .
|
|
44
|
-
.
|
|
45
|
-
.
|
|
43
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes,
|
|
44
|
+
.popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes,
|
|
45
|
+
.popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes {
|
|
46
46
|
left: -7px
|
|
47
|
-
} .
|
|
47
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes:after {
|
|
48
48
|
top: -6px;
|
|
49
49
|
border-top: none;
|
|
50
50
|
border-right: none;
|
|
51
|
-
} .
|
|
52
|
-
.
|
|
53
|
-
.
|
|
51
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes,
|
|
52
|
+
.popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes,
|
|
53
|
+
.popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes {
|
|
54
54
|
bottom: 5px
|
|
55
|
-
} .
|
|
55
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes:after {
|
|
56
56
|
left: -6px;
|
|
57
57
|
border-top: none;
|
|
58
58
|
border-left: none;
|
|
59
|
-
} .
|
|
60
|
-
.
|
|
61
|
-
.
|
|
59
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes,
|
|
60
|
+
.popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes,
|
|
61
|
+
.popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes {
|
|
62
62
|
top: -7px
|
|
63
|
-
} .
|
|
63
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes:after {
|
|
64
64
|
left: -6px;
|
|
65
65
|
border-bottom: none;
|
|
66
66
|
border-right: none;
|
|
67
|
-
} .
|
|
67
|
+
} .popover__enter_1dhes .popover__inner_1dhes {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transform: scale(0.98);
|
|
70
|
-
} .
|
|
70
|
+
} .popover__enterActive_1dhes .popover__inner_1dhes {
|
|
71
71
|
opacity: 1;
|
|
72
72
|
transform: scale(1);
|
|
73
73
|
transition-property: opacity, transform;
|
|
74
74
|
transition-timing-function: ease-in-out;
|
|
75
75
|
transition-duration: 150ms;
|
|
76
|
-
} .
|
|
76
|
+
} .popover__exit_1dhes .popover__inner_1dhes {
|
|
77
77
|
opacity: 1;
|
|
78
78
|
transform: scale(1);
|
|
79
|
-
} .
|
|
79
|
+
} .popover__exitActive_1dhes .popover__inner_1dhes {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
transform: scale(0.98);
|
|
82
82
|
transition-property: opacity, transform;
|
package/esm/index.module.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"
|
|
3
|
+
var styles = {"component":"popover__component_1dhes","inner":"popover__inner_1dhes","scrollableContent":"popover__scrollableContent_1dhes","arrow":"popover__arrow_1dhes","enter":"popover__enter_1dhes","enterActive":"popover__enterActive_1dhes","exit":"popover__exit_1dhes","exitActive":"popover__exitActive_1dhes"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
package/index.css
CHANGED
|
@@ -6,23 +6,23 @@
|
|
|
6
6
|
0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
|
|
7
7
|
} :root {
|
|
8
8
|
--popover-border-color: transparent;
|
|
9
|
-
} .
|
|
9
|
+
} .popover__component_1dhes {
|
|
10
10
|
background-color: transparent;
|
|
11
11
|
color: var(--color-light-text-primary);
|
|
12
|
-
} .
|
|
12
|
+
} .popover__inner_1dhes {
|
|
13
13
|
position: relative;
|
|
14
14
|
background-color: var(--color-light-modal-bg-primary);
|
|
15
15
|
box-shadow: var(--shadow-m);
|
|
16
16
|
border: 1px solid var(--popover-border-color);
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
will-change: transform;
|
|
19
|
-
} .
|
|
19
|
+
} .popover__scrollableContent_1dhes {
|
|
20
20
|
position: relative;
|
|
21
21
|
z-index: 2;
|
|
22
22
|
overflow-y: auto;
|
|
23
|
-
} .
|
|
23
|
+
} .popover__arrow_1dhes {
|
|
24
24
|
z-index: 1;
|
|
25
|
-
} .
|
|
25
|
+
} .popover__arrow_1dhes:after {
|
|
26
26
|
content: '';
|
|
27
27
|
display: block;
|
|
28
28
|
position: absolute;
|
|
@@ -32,51 +32,51 @@
|
|
|
32
32
|
border: 1px solid var(--popover-border-color);
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
transform: rotate(45deg);
|
|
35
|
-
} .
|
|
36
|
-
.
|
|
37
|
-
.
|
|
35
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes,
|
|
36
|
+
.popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes,
|
|
37
|
+
.popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes {
|
|
38
38
|
right: 5px
|
|
39
|
-
} .
|
|
39
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes:after {
|
|
40
40
|
top: -6px;
|
|
41
41
|
border-bottom: none;
|
|
42
42
|
border-left: none;
|
|
43
|
-
} .
|
|
44
|
-
.
|
|
45
|
-
.
|
|
43
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes,
|
|
44
|
+
.popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes,
|
|
45
|
+
.popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes {
|
|
46
46
|
left: -7px
|
|
47
|
-
} .
|
|
47
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes:after {
|
|
48
48
|
top: -6px;
|
|
49
49
|
border-top: none;
|
|
50
50
|
border-right: none;
|
|
51
|
-
} .
|
|
52
|
-
.
|
|
53
|
-
.
|
|
51
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes,
|
|
52
|
+
.popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes,
|
|
53
|
+
.popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes {
|
|
54
54
|
bottom: 5px
|
|
55
|
-
} .
|
|
55
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes:after {
|
|
56
56
|
left: -6px;
|
|
57
57
|
border-top: none;
|
|
58
58
|
border-left: none;
|
|
59
|
-
} .
|
|
60
|
-
.
|
|
61
|
-
.
|
|
59
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes,
|
|
60
|
+
.popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes,
|
|
61
|
+
.popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes {
|
|
62
62
|
top: -7px
|
|
63
|
-
} .
|
|
63
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes:after {
|
|
64
64
|
left: -6px;
|
|
65
65
|
border-bottom: none;
|
|
66
66
|
border-right: none;
|
|
67
|
-
} .
|
|
67
|
+
} .popover__enter_1dhes .popover__inner_1dhes {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transform: scale(0.98);
|
|
70
|
-
} .
|
|
70
|
+
} .popover__enterActive_1dhes .popover__inner_1dhes {
|
|
71
71
|
opacity: 1;
|
|
72
72
|
transform: scale(1);
|
|
73
73
|
transition-property: opacity, transform;
|
|
74
74
|
transition-timing-function: ease-in-out;
|
|
75
75
|
transition-duration: 150ms;
|
|
76
|
-
} .
|
|
76
|
+
} .popover__exit_1dhes .popover__inner_1dhes {
|
|
77
77
|
opacity: 1;
|
|
78
78
|
transform: scale(1);
|
|
79
|
-
} .
|
|
79
|
+
} .popover__exitActive_1dhes .popover__inner_1dhes {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
transform: scale(0.98);
|
|
82
82
|
transition-property: opacity, transform;
|
package/index.module.css.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"
|
|
5
|
+
var styles = {"component":"popover__component_1dhes","inner":"popover__inner_1dhes","scrollableContent":"popover__scrollableContent_1dhes","arrow":"popover__arrow_1dhes","enter":"popover__enter_1dhes","enterActive":"popover__enterActive_1dhes","exit":"popover__exit_1dhes","exitActive":"popover__exitActive_1dhes"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
package/index.module.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
package/modern/index.css
CHANGED
|
@@ -6,23 +6,23 @@
|
|
|
6
6
|
0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
|
|
7
7
|
} :root {
|
|
8
8
|
--popover-border-color: transparent;
|
|
9
|
-
} .
|
|
9
|
+
} .popover__component_1dhes {
|
|
10
10
|
background-color: transparent;
|
|
11
11
|
color: var(--color-light-text-primary);
|
|
12
|
-
} .
|
|
12
|
+
} .popover__inner_1dhes {
|
|
13
13
|
position: relative;
|
|
14
14
|
background-color: var(--color-light-modal-bg-primary);
|
|
15
15
|
box-shadow: var(--shadow-m);
|
|
16
16
|
border: 1px solid var(--popover-border-color);
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
will-change: transform;
|
|
19
|
-
} .
|
|
19
|
+
} .popover__scrollableContent_1dhes {
|
|
20
20
|
position: relative;
|
|
21
21
|
z-index: 2;
|
|
22
22
|
overflow-y: auto;
|
|
23
|
-
} .
|
|
23
|
+
} .popover__arrow_1dhes {
|
|
24
24
|
z-index: 1;
|
|
25
|
-
} .
|
|
25
|
+
} .popover__arrow_1dhes:after {
|
|
26
26
|
content: '';
|
|
27
27
|
display: block;
|
|
28
28
|
position: absolute;
|
|
@@ -32,51 +32,51 @@
|
|
|
32
32
|
border: 1px solid var(--popover-border-color);
|
|
33
33
|
box-sizing: border-box;
|
|
34
34
|
transform: rotate(45deg);
|
|
35
|
-
} .
|
|
36
|
-
.
|
|
37
|
-
.
|
|
35
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes,
|
|
36
|
+
.popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes,
|
|
37
|
+
.popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes {
|
|
38
38
|
right: 5px
|
|
39
|
-
} .
|
|
39
|
+
} .popover__component_1dhes[data-popper-placement='left'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='left-end'] .popover__arrow_1dhes:after {
|
|
40
40
|
top: -6px;
|
|
41
41
|
border-bottom: none;
|
|
42
42
|
border-left: none;
|
|
43
|
-
} .
|
|
44
|
-
.
|
|
45
|
-
.
|
|
43
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes,
|
|
44
|
+
.popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes,
|
|
45
|
+
.popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes {
|
|
46
46
|
left: -7px
|
|
47
|
-
} .
|
|
47
|
+
} .popover__component_1dhes[data-popper-placement='right'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='right-end'] .popover__arrow_1dhes:after {
|
|
48
48
|
top: -6px;
|
|
49
49
|
border-top: none;
|
|
50
50
|
border-right: none;
|
|
51
|
-
} .
|
|
52
|
-
.
|
|
53
|
-
.
|
|
51
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes,
|
|
52
|
+
.popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes,
|
|
53
|
+
.popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes {
|
|
54
54
|
bottom: 5px
|
|
55
|
-
} .
|
|
55
|
+
} .popover__component_1dhes[data-popper-placement='top'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='top-end'] .popover__arrow_1dhes:after {
|
|
56
56
|
left: -6px;
|
|
57
57
|
border-top: none;
|
|
58
58
|
border-left: none;
|
|
59
|
-
} .
|
|
60
|
-
.
|
|
61
|
-
.
|
|
59
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes,
|
|
60
|
+
.popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes,
|
|
61
|
+
.popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes {
|
|
62
62
|
top: -7px
|
|
63
|
-
} .
|
|
63
|
+
} .popover__component_1dhes[data-popper-placement='bottom'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-start'] .popover__arrow_1dhes:after, .popover__component_1dhes[data-popper-placement='bottom-end'] .popover__arrow_1dhes:after {
|
|
64
64
|
left: -6px;
|
|
65
65
|
border-bottom: none;
|
|
66
66
|
border-right: none;
|
|
67
|
-
} .
|
|
67
|
+
} .popover__enter_1dhes .popover__inner_1dhes {
|
|
68
68
|
opacity: 0;
|
|
69
69
|
transform: scale(0.98);
|
|
70
|
-
} .
|
|
70
|
+
} .popover__enterActive_1dhes .popover__inner_1dhes {
|
|
71
71
|
opacity: 1;
|
|
72
72
|
transform: scale(1);
|
|
73
73
|
transition-property: opacity, transform;
|
|
74
74
|
transition-timing-function: ease-in-out;
|
|
75
75
|
transition-duration: 150ms;
|
|
76
|
-
} .
|
|
76
|
+
} .popover__exit_1dhes .popover__inner_1dhes {
|
|
77
77
|
opacity: 1;
|
|
78
78
|
transform: scale(1);
|
|
79
|
-
} .
|
|
79
|
+
} .popover__exitActive_1dhes .popover__inner_1dhes {
|
|
80
80
|
opacity: 0;
|
|
81
81
|
transform: scale(0.98);
|
|
82
82
|
transition-property: opacity, transform;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"
|
|
3
|
+
const styles = {"component":"popover__component_1dhes","inner":"popover__inner_1dhes","scrollableContent":"popover__scrollableContent_1dhes","arrow":"popover__arrow_1dhes","enter":"popover__enter_1dhes","enterActive":"popover__enterActive_1dhes","exit":"popover__exit_1dhes","exitActive":"popover__exitActive_1dhes"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["src/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/no-dynamic-mixins-index.css';\n\n:root {\n --popover-border-color: transparent;\n}\n\n.component {\n background-color: transparent;\n color: var(--color-light-text-primary);\n}\n\n.inner {\n position: relative;\n background-color: var(--color-light-modal-bg-primary);\n box-shadow: var(--shadow-m);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n will-change: transform;\n}\n\n.scrollableContent {\n position: relative;\n z-index: 2;\n overflow-y: auto;\n}\n\n.arrow {\n z-index: 1;\n}\n\n.arrow:after {\n content: '';\n display: block;\n position: absolute;\n width: 12px;\n height: 12px;\n background-color: var(--color-light-modal-bg-primary);\n border: 1px solid var(--popover-border-color);\n box-sizing: border-box;\n transform: rotate(45deg);\n}\n\n.component[data-popper-placement='left'] .arrow,\n.component[data-popper-placement='left-start'] .arrow,\n.component[data-popper-placement='left-end'] .arrow {\n right: 5px;\n\n &:after {\n top: -6px;\n border-bottom: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='right'] .arrow,\n.component[data-popper-placement='right-start'] .arrow,\n.component[data-popper-placement='right-end'] .arrow {\n left: -7px;\n\n &:after {\n top: -6px;\n border-top: none;\n border-right: none;\n }\n}\n\n.component[data-popper-placement='top'] .arrow,\n.component[data-popper-placement='top-start'] .arrow,\n.component[data-popper-placement='top-end'] .arrow {\n bottom: 5px;\n\n &:after {\n left: -6px;\n border-top: none;\n border-left: none;\n }\n}\n\n.component[data-popper-placement='bottom'] .arrow,\n.component[data-popper-placement='bottom-start'] .arrow,\n.component[data-popper-placement='bottom-end'] .arrow {\n top: -7px;\n\n &:after {\n left: -6px;\n border-bottom: none;\n border-right: none;\n }\n}\n\n.enter .inner {\n opacity: 0;\n transform: scale(0.98);\n}\n\n.enterActive .inner {\n opacity: 1;\n transform: scale(1);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n\n.exit .inner {\n opacity: 1;\n transform: scale(1);\n}\n\n.exitActive .inner {\n opacity: 0;\n transform: scale(0.98);\n transition-property: opacity, transform;\n transition-timing-function: ease-in-out;\n transition-duration: 150ms;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,0BAA0B,CAAC,OAAO,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,kCAAkC,CAAC,OAAO,CAAC,sBAAsB,CAAC,OAAO,CAAC,sBAAsB,CAAC,aAAa,CAAC,4BAA4B,CAAC,MAAM,CAAC,qBAAqB,CAAC,YAAY,CAAC,2BAA2B,CAAC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-popover",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.1.0-snapshot-92b8690",
|
|
4
4
|
"description": "Popover component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"main": "index.js",
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@alfalab/core-components-portal": "
|
|
14
|
-
"@alfalab/core-components-shared": "
|
|
15
|
-
"@alfalab/core-components-stack": "
|
|
13
|
+
"@alfalab/core-components-portal": "4.1.0-snapshot-92b8690",
|
|
14
|
+
"@alfalab/core-components-shared": "1.1.0-snapshot-92b8690",
|
|
15
|
+
"@alfalab/core-components-stack": "6.1.0-snapshot-92b8690",
|
|
16
16
|
"@alfalab/hooks": "^1.13.1",
|
|
17
17
|
"@juggle/resize-observer": "^3.3.1",
|
|
18
18
|
"@popperjs/core": "^2.11.8",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"tslib": "^2.4.0"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
|
-
"@alfalab/core-components-stack-context": "
|
|
28
|
+
"@alfalab/core-components-stack-context": "1.1.0-snapshot-92b8690",
|
|
29
29
|
"react": "^16.9.0 || ^17.0.1 || ^18.0.0",
|
|
30
30
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
31
31
|
},
|
|
@@ -33,6 +33,6 @@
|
|
|
33
33
|
"access": "public",
|
|
34
34
|
"directory": "dist"
|
|
35
35
|
},
|
|
36
|
-
"themesVersion": "14.
|
|
37
|
-
"varsVersion": "10.
|
|
36
|
+
"themesVersion": "14.1.0-snapshot-92b8690",
|
|
37
|
+
"varsVersion": "10.1.0-snapshot-92b8690"
|
|
38
38
|
}
|
package/src/index.module.css
CHANGED