@alfalab/core-components 45.9.0-beta.0 → 45.9.0-beta.1

package/plate/cssm/components/base-plate/Component.js

@@ -1,36 +1,47 @@
-import React, { forwardRef, useRef, useState, useCallback } from 'react';
-import mergeRefs from 'react-merge-refs';
-import cn from 'classnames';
-import { IconButton } from '../../../../icon-button/cssm';
-import { useFocus } from '@alfalab/hooks';
-import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
-import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
-import { ButtonList } from '../button-list/component.js';
-import commonStyles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var cn = require('classnames');
+var coreComponentsIconButton = require('../../../../icon-button/cssm');
+var hooks = require('@alfalab/hooks');
+var ChevronDownMIcon = require('@alfalab/icons-glyph/ChevronDownMIcon');
+var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
+var components_buttonList_component = require('../button-list/component.js');
+var commonStyles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var commonStyles__default = /*#__PURE__*/_interopDefaultCompat(commonStyles);
 
 /* eslint-disable complexity */
-const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folded: foldedProp, defaultFolded = true, rounded = true, limitContentWidth = true, leftAddons, subAddons, children, buttons, title, titleView = 'bold', view = 'common', border = view !== 'custom', shadow = view === 'custom', className, buttonsClassName, contentClassName, subAddonsClassName, dataTestId, onClick, onClose, onToggle, rowLimit, styles = {}, }, ref) => {
-    const plateRef = useRef(null);
-    const contentRef = useRef(null);
-    const subAddonsRef = useRef(null);
-    const [focused] = useFocus(plateRef, 'keyboard');
-    const [isHidden, setIsHidden] = useState(false);
-    const [foldedState, setFoldedState] = useState(defaultFolded);
-    const uncontrolled = foldedProp === undefined;
-    const foldable = !!title && !!children && foldableProp;
-    const folded = uncontrolled ? foldedState : foldedProp;
-    const hasButtons = !!buttons && typeof buttons !== 'boolean';
-    const hasContent = children || hasButtons;
-    const hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
-    const hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
-    const rowLimitStyles = rowLimit && commonStyles[`rowLimit${rowLimit}`];
-    const handleClick = useCallback((event) => {
-        const target = event.target;
-        const eventInsideComponent = plateRef.current && plateRef.current.contains(target);
-        const eventInsideContent = contentRef.current && contentRef.current.contains(target);
-        const eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
-        const clickSimilarKeys = ['Enter', ' '].includes(event.key);
-        const shouldChangeIsFolded = eventInsideComponent &&
+var BasePlate = React.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f;
+    var hasCloser = _a.hasCloser, _g = _a.foldable, foldableProp = _g === void 0 ? false : _g, foldedProp = _a.folded, _h = _a.defaultFolded, defaultFolded = _h === void 0 ? true : _h, _j = _a.rounded, rounded = _j === void 0 ? true : _j, _k = _a.limitContentWidth, limitContentWidth = _k === void 0 ? true : _k, leftAddons = _a.leftAddons, subAddons = _a.subAddons, children = _a.children, buttons = _a.buttons, title = _a.title, _l = _a.titleView, titleView = _l === void 0 ? 'bold' : _l, _m = _a.view, view = _m === void 0 ? 'common' : _m, _o = _a.border, border = _o === void 0 ? view !== 'custom' : _o, _p = _a.shadow, shadow = _p === void 0 ? view === 'custom' : _p, className = _a.className, buttonsClassName = _a.buttonsClassName, contentClassName = _a.contentClassName, subAddonsClassName = _a.subAddonsClassName, dataTestId = _a.dataTestId, onClick = _a.onClick, onClose = _a.onClose, onToggle = _a.onToggle, rowLimit = _a.rowLimit, _q = _a.styles, styles = _q === void 0 ? {} : _q;
+    var plateRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var subAddonsRef = React.useRef(null);
+    var focused = hooks.useFocus(plateRef, 'keyboard')[0];
+    var _r = React.useState(false), isHidden = _r[0], setIsHidden = _r[1];
+    var _s = React.useState(defaultFolded), foldedState = _s[0], setFoldedState = _s[1];
+    var uncontrolled = foldedProp === undefined;
+    var foldable = !!title && !!children && foldableProp;
+    var folded = uncontrolled ? foldedState : foldedProp;
+    var hasButtons = !!buttons && typeof buttons !== 'boolean';
+    var hasContent = children || hasButtons;
+    var hasSubAddons = !!subAddons && typeof subAddons !== 'boolean';
+    var hasAnyAddons = leftAddons || subAddons || foldable || hasCloser;
+    var rowLimitStyles = rowLimit && commonStyles__default.default["rowLimit".concat(rowLimit)];
+    var handleClick = React.useCallback(function (event) {
+        var target = event.target;
+        var eventInsideComponent = plateRef.current && plateRef.current.contains(target);
+        var eventInsideContent = contentRef.current && contentRef.current.contains(target);
+        var eventInsideSubAddons = subAddonsRef.current && subAddonsRef.current.contains(target);
+        var clickSimilarKeys = ['Enter', ' '].includes(event.key);
+        var shouldChangeIsFolded = eventInsideComponent &&
             !eventInsideContent &&
             !eventInsideSubAddons &&
             (event.type === 'click' || clickSimilarKeys);
@@ -46,7 +57,7 @@ const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folde
             onClick(event);
         }
     }, [foldable, onClick, uncontrolled, onToggle, foldedState, foldedProp]);
-    const handleClose = useCallback((event) => {
+    var handleClose = React.useCallback(function (event) {
         setIsHidden(true);
         if (onClose) {
             onClose(event);
@@ -54,42 +65,42 @@ const BasePlate = forwardRef(({ hasCloser, foldable: foldableProp = false, folde
     }, [onClose]);
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("div", { className: cn(commonStyles.component, commonStyles[view], {
-            [commonStyles.foldable]: foldable,
-            [commonStyles.focused]: focused,
-            [commonStyles.isHidden]: hasCloser && isHidden,
-            [commonStyles.isFolded]: foldable && folded,
-            [commonStyles.rounded]: rounded,
-            [commonStyles.rect]: !rounded,
-            [commonStyles.noBorder]: !border,
-            [commonStyles.shadow]: shadow,
-        }, className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs([plateRef, ref]), 
+    React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[view], (_b = {},
+            _b[commonStyles__default.default.foldable] = foldable,
+            _b[commonStyles__default.default.focused] = focused,
+            _b[commonStyles__default.default.isHidden] = hasCloser && isHidden,
+            _b[commonStyles__default.default.isFolded] = foldable && folded,
+            _b[commonStyles__default.default.rounded] = rounded,
+            _b[commonStyles__default.default.rect] = !rounded,
+            _b[commonStyles__default.default.noBorder] = !border,
+            _b[commonStyles__default.default.shadow] = shadow,
+            _b), className), onClick: handleClick, onKeyDown: handleClick, role: 'alert', ref: mergeRefs__default.default([plateRef, ref]), 
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
         tabIndex: foldable ? 0 : -1, "data-test-id": dataTestId },
-        React.createElement("div", { className: commonStyles.inner },
-            leftAddons && React.createElement("div", { className: commonStyles.leftAddons }, leftAddons),
-            React.createElement("div", { className: cn(commonStyles.contentContainer, contentClassName, {
-                    [commonStyles.withoutTitle]: !title && hasAnyAddons,
-                    [commonStyles.limitWidth]: limitContentWidth,
-                }) },
-                title && (React.createElement("div", { className: cn(commonStyles[titleView], {
-                        [styles[titleView]]: Boolean(styles[titleView]),
-                    }) }, title)),
-                hasContent && (React.createElement("div", { ref: contentRef, className: cn(commonStyles.content, {
-                        [commonStyles.isFolded]: foldable && folded,
-                    }) },
-                    children && (React.createElement("div", { className: cn(commonStyles.description, styles.description, rowLimitStyles) }, children)),
-                    hasButtons && (React.createElement("div", { className: styles.footer },
-                        React.createElement(ButtonList, { buttons: buttons, containerClassName: cn(commonStyles.containerButton, buttonsClassName), buttonClassName: cn(commonStyles.button, buttonsClassName) })))))),
-            hasSubAddons && (React.createElement("div", { ref: subAddonsRef, className: commonStyles.subAddons },
-                React.createElement(ButtonList, { buttons: subAddons, containerClassName: cn(subAddonsClassName, commonStyles.rowReverse), buttonClassName: commonStyles.button }))),
-            foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement("div", { className: cn(commonStyles.folder, {
-                        [commonStyles.isFolded]: folded,
-                    }) },
-                    React.createElement(ChevronDownMIcon, null)))),
-            hasCloser && !foldable && (React.createElement("div", { className: commonStyles.rightAddons },
-                React.createElement(IconButton, { className: commonStyles.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon, size: 'xxs', onClick: handleClose }))))));
+        React__default.default.createElement("div", { className: commonStyles__default.default.inner },
+            leftAddons && React__default.default.createElement("div", { className: commonStyles__default.default.leftAddons }, leftAddons),
+            React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.contentContainer, contentClassName, (_c = {},
+                    _c[commonStyles__default.default.withoutTitle] = !title && hasAnyAddons,
+                    _c[commonStyles__default.default.limitWidth] = limitContentWidth,
+                    _c)) },
+                title && (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default[titleView], (_d = {},
+                        _d[styles[titleView]] = Boolean(styles[titleView]),
+                        _d)) }, title)),
+                hasContent && (React__default.default.createElement("div", { ref: contentRef, className: cn__default.default(commonStyles__default.default.content, (_e = {},
+                        _e[commonStyles__default.default.isFolded] = foldable && folded,
+                        _e)) },
+                    children && (React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.description, styles.description, rowLimitStyles) }, children)),
+                    hasButtons && (React__default.default.createElement("div", { className: styles.footer },
+                        React__default.default.createElement(components_buttonList_component.ButtonList, { buttons: buttons, containerClassName: cn__default.default(commonStyles__default.default.containerButton, buttonsClassName), buttonClassName: cn__default.default(commonStyles__default.default.button, buttonsClassName) })))))),
+            hasSubAddons && (React__default.default.createElement("div", { ref: subAddonsRef, className: commonStyles__default.default.subAddons },
+                React__default.default.createElement(components_buttonList_component.ButtonList, { buttons: subAddons, containerClassName: cn__default.default(subAddonsClassName, commonStyles__default.default.rowReverse), buttonClassName: commonStyles__default.default.button }))),
+            foldable && (React__default.default.createElement("div", { className: commonStyles__default.default.rightAddons },
+                React__default.default.createElement("div", { className: cn__default.default(commonStyles__default.default.folder, (_f = {},
+                        _f[commonStyles__default.default.isFolded] = folded,
+                        _f)) },
+                    React__default.default.createElement(ChevronDownMIcon.ChevronDownMIcon, null)))),
+            hasCloser && !foldable && (React__default.default.createElement("div", { className: commonStyles__default.default.rightAddons },
+                React__default.default.createElement(coreComponentsIconButton.IconButton, { className: commonStyles__default.default.closer, "aria-label": '\u0437\u0430\u043A\u0440\u044B\u0442\u044C', icon: CrossMIcon.CrossMIcon, size: 'xxs', onClick: handleClose }))))));
 });
 
-export { BasePlate };
+exports.BasePlate = BasePlate;

package/plate/cssm/components/base-plate/index.js

@@ -1,10 +1,7 @@
-export { BasePlate } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../button-list/component.js';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_basePlate_Component = require('./Component.js');
+
+
+
+exports.BasePlate = components_basePlate_Component.BasePlate;

package/plate/cssm/components/button-list/component.js

@@ -1,20 +1,30 @@
-import React from 'react';
-import cn from 'classnames';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const ButtonList = ({ buttons, buttonClassName, containerClassName, }) => {
-    const buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var ButtonList = function (_a) {
+    var buttons = _a.buttons, buttonClassName = _a.buttonClassName, containerClassName = _a.containerClassName;
+    var buttonsIsArray = Array.isArray(buttons) && buttons.length > 0;
     if (buttonsIsArray) {
-        return (React.createElement("div", { className: containerClassName }, buttons.map((button, index) => button
-            ? React.cloneElement(button, {
-                // eslint-disable-next-line react/no-array-index-key
-                key: index,
-                size: 'xxs',
-                view: index === 0 ? 'secondary' : 'link',
-                className: cn(button.props.className, buttonClassName),
-            })
-            : null)));
+        return (React__default.default.createElement("div", { className: containerClassName }, buttons.map(function (button, index) {
+            return button
+                ? React__default.default.cloneElement(button, {
+                    // eslint-disable-next-line react/no-array-index-key
+                    key: index,
+                    size: 'xxs',
+                    view: index === 0 ? 'secondary' : 'link',
+                    className: cn__default.default(button.props.className, buttonClassName),
+                })
+                : null;
+        })));
     }
-    return React.createElement("div", { className: containerClassName }, buttons);
+    return React__default.default.createElement("div", { className: containerClassName }, buttons);
 };
 
-export { ButtonList };
+exports.ButtonList = ButtonList;

package/plate/cssm/desktop/Component.desktop.js

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePlate } from '../components/base-plate/Component.js';
-import styles from './desktop.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-
-const PlateDesktop = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));
-
-export { PlateDesktop };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePlate_Component = require('../components/base-plate/Component.js');
+var styles = require('./desktop.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PlateDesktop = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_basePlate_Component.BasePlate, tslib.__assign({}, restProps, { styles: styles__default.default, ref: ref }))); });
+
+exports.PlateDesktop = PlateDesktop;

package/plate/cssm/desktop/index.js

@@ -1,12 +1,7 @@
-export { PlateDesktop } from './Component.desktop.js';
-import 'react';
-import '../components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-import './desktop.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var desktop_Component_desktop = require('./Component.desktop.js');
+
+
+
+exports.PlateDesktop = desktop_Component_desktop.PlateDesktop;

package/plate/cssm/index.js

@@ -1,16 +1,7 @@
-export { Plate } from './Component.responsive.js';
-import 'react';
-import '../../mq/cssm';
-import './desktop/Component.desktop.js';
-import './components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import './components/button-list/component.js';
-import './components/base-plate/index.module.css';
-import './desktop/desktop.module.css';
-import './mobile/Component.mobile.js';
-import './mobile/mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component_responsive = require('./Component.responsive.js');
+
+
+
+exports.Plate = Component_responsive.Plate;

package/plate/cssm/mobile/Component.mobile.js

@@ -1,15 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePlate } from '../components/base-plate/Component.js';
-import styles from './mobile.module.css';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-
-const PlateMobile = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));
-
-export { PlateMobile };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var components_basePlate_Component = require('../components/base-plate/Component.js');
+var styles = require('./mobile.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PlateMobile = React.forwardRef(function (restProps, ref) { return (React__default.default.createElement(components_basePlate_Component.BasePlate, tslib.__assign({}, restProps, { styles: styles__default.default, ref: ref }))); });
+
+exports.PlateMobile = PlateMobile;

package/plate/cssm/mobile/index.js

@@ -1,12 +1,7 @@
-export { PlateMobile } from './Component.mobile.js';
-import 'react';
-import '../components/base-plate/Component.js';
-import 'react-merge-refs';
-import 'classnames';
-import '../../../icon-button/cssm';
-import '@alfalab/hooks';
-import '@alfalab/icons-glyph/ChevronDownMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '../components/button-list/component.js';
-import '../components/base-plate/index.module.css';
-import './mobile.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PlateMobile = mobile_Component_mobile.PlateMobile;

package/popover/Component.js

@@ -11,6 +11,7 @@ var maxSize = require('popper-max-size-modifier');
 var coreComponentsPortal = require('../portal');
 var coreComponentsStack = require('../stack');
 var hooks = require('@alfalab/hooks');
+var stackContext = require('@alfalab/stack-context');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -65,7 +66,7 @@ function getArrowPadding(_a) {
     return 0;
 }
 var Popover = React.forwardRef(function (_a, ref) {
-    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;
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
     var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
     var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
     var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];

package/popover/cssm/Component.js

@@ -1,41 +1,55 @@
-import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
-import mergeRefs from 'react-merge-refs';
-import { usePopper } from 'react-popper';
-import { CSSTransition } from 'react-transition-group';
-import { ResizeObserver } from '@juggle/resize-observer';
-import cn from 'classnames';
-import maxSize from 'popper-max-size-modifier';
-import { Portal } from '../../portal/cssm';
-import { Stack, stackingOrder } from '../../stack/cssm';
-import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
-import styles from './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const DEFAULT_TRANSITION = {
+var tslib = require('tslib');
+var React = require('react');
+var mergeRefs = require('react-merge-refs');
+var reactPopper = require('react-popper');
+var reactTransitionGroup = require('react-transition-group');
+var resizeObserver = require('@juggle/resize-observer');
+var cn = require('classnames');
+var maxSize = require('popper-max-size-modifier');
+var coreComponentsPortal = require('../../portal/cssm');
+var coreComponentsStack = require('../../stack/cssm');
+var hooks = require('@alfalab/hooks');
+var stackContext = require('@alfalab/stack-context');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var DEFAULT_TRANSITION = {
     timeout: 150,
 };
-const CSS_TRANSITION_CLASS_NAMES = {
-    enter: styles.enter,
-    enterActive: styles.enterActive,
-    exit: styles.exit,
-    exitActive: styles.exitActive,
+var CSS_TRANSITION_CLASS_NAMES = {
+    enter: styles__default.default.enter,
+    enterActive: styles__default.default.enterActive,
+    exit: styles__default.default.exit,
+    exitActive: styles__default.default.exitActive,
 };
-const availableHieghtModifier = {
+var availableHieghtModifier = {
     name: 'availableHeight',
     enabled: true,
     phase: 'beforeWrite',
     requires: ['maxSize'],
-    fn({ state: { modifiersData, elements: { popper }, }, }) {
-        const { height } = modifiersData.maxSize;
-        const content = popper.querySelector(`.${styles.scrollableContent}`);
+    fn: function (_a) {
+        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
+        var height = modifiersData.maxSize.height;
+        var content = popper.querySelector(".".concat(styles__default.default.scrollableContent));
         if (content && !content.style.maxHeight) {
-            content.style.maxHeight = `${height}px`;
+            content.style.maxHeight = "".concat(height, "px");
         }
     },
 };
-const DEFAULT_OFFSET = [0, 0];
+var DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
-const MIN_DISTANCE_TO_EDGE = 24;
-function getArrowPadding({ placement, }) {
+var MIN_DISTANCE_TO_EDGE = 24;
+function getArrowPadding(_a) {
+    var placement = _a.placement;
     if (placement === 'right-end' || placement === 'left-end') {
         return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
     }
@@ -50,15 +64,16 @@ function getArrowPadding({ placement, }) {
     }
     return 0;
 }
-const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
-    const [referenceElement, setReferenceElement] = useState(anchorElement);
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const updatePopperRef = useRef();
-    const popperRef = useRef(null);
-    const innerRef = useRef(null);
-    const popperModifiers = useMemo(() => {
-        const modifiers = [{ name: 'offset', options: { offset } }];
+var Popover = React.forwardRef(function (_a, ref) {
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackContext.stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
+    var _l = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var updatePopperRef = React.useRef();
+    var popperRef = React.useRef(null);
+    var innerRef = React.useRef(null);
+    var popperModifiers = React.useMemo(function () {
+        var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
             modifiers.push({
                 name: 'arrow',
@@ -72,14 +87,14 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
             modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
         }
         if (fallbackPlacements) {
-            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: fallbackPlacements } });
         }
         if (preventOverflow) {
             modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
         if (availableHeight) {
-            modifiers.push({ ...maxSize, options: {} });
-            modifiers.push({ ...availableHieghtModifier, options: {} });
+            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
+            modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
         }
         return modifiers;
     }, [
@@ -91,58 +106,58 @@ const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT
         availableHeight,
         arrowElement,
     ]);
-    const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
         modifiers: popperModifiers,
-    });
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
     if (updatePopper) {
         updatePopperRef.current = updatePopper;
     }
-    useLayoutEffect_SAFE_FOR_SSR(() => {
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
         setReferenceElement(anchorElement);
     }, [anchorElement]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (updatePopper) {
             updatePopper();
         }
     }, [updatePopper, arrowElement, children]);
-    useEffect(() => {
+    React.useEffect(function () {
         if (update && updatePopper) {
             // eslint-disable-next-line no-param-reassign
             update.current = updatePopper;
         }
     });
-    useEffect(() => {
+    React.useEffect(function () {
         if (useAnchorWidth) {
-            const updatePopoverWidth = () => updatePopperRef.current?.();
-            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
-            const observer = new ResizeObserver$1(updatePopoverWidth);
+            var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
+            var ResizeObserver_1 = window.ResizeObserver || resizeObserver.ResizeObserver;
+            var observer_1 = new ResizeObserver_1(updatePopoverWidth);
             if (anchorElement) {
-                observer.observe(anchorElement);
+                observer_1.observe(anchorElement);
             }
-            return () => {
-                observer.disconnect();
+            return function () {
+                observer_1.disconnect();
             };
         }
-        return () => ({});
+        return function () { return ({}); };
     }, [anchorElement, useAnchorWidth]);
-    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
-            zIndex: computedZIndex,
-            width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
-            ...popperStyles.popper,
-            ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
-        }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
-        React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
-            React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
-            withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
-    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef, ...transition, in: open, onEntering: (node, isAppearing) => {
+    var renderContent = function (computedZIndex) {
+        var _a;
+        var _b;
+        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),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
+                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, children),
+                withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
+    };
+    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) {
+            var _a;
             // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
             if (innerRef.current &&
-                transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
+                transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
                 innerRef.current.style.setProperty('transition-duration', transitionDuration);
             }
-            transition?.onEntering?.(node, isAppearing);
-        } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
+            (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
+        } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
 });
 
-export { Popover };
+exports.Popover = Popover;