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

package/popover/cssm/Component.js

@@ -1,41 +1,54 @@
-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 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 +63,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 ? 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 _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 +86,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 +105,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;

package/popover/cssm/index.js

@@ -1,12 +1,7 @@
-export { Popover } from './Component.js';
-import 'react';
-import 'react-merge-refs';
-import 'react-popper';
-import 'react-transition-group';
-import '@juggle/resize-observer';
-import 'classnames';
-import 'popper-max-size-modifier';
-import '../../portal/cssm';
-import '../../stack/cssm';
-import '@alfalab/hooks';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Popover = Component.Popover;

package/popup-sheet/cssm/Component.js

@@ -1,135 +1,135 @@
-import React, { forwardRef, useState, useRef } from 'react';
-import { useSwipeable } from 'react-swipeable';
-import cn from 'classnames';
-import { BaseModal } from '../../base-modal/cssm';
-import { Closer } from '../../navigation-bar/cssm/shared';
-import { createPaddingStyle, getDataTestId, easingFns } from '../../shared/cssm';
-import { PopupBackdrop } from './components/backdrop/Component.js';
-import styles from './index.module.css';
-import '../../backdrop/cssm';
-import './components/backdrop/index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const SWIPE_VELOCITY = 0.3;
-const CLOSE_OFFSET = 0.3;
-const ANIMATION_DURATION = 350;
-const DEFAULT_PADDING = 32;
-const PopupSheet = forwardRef(({ children, hasCloser, className, onClose, transitionProps, contentProps, swipeable, dataTestId, backdropProps, padding = DEFAULT_PADDING, ...restProps }, ref) => {
-    const [sheetOffset, setSheetOffset] = useState(0);
-    const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const sheetHeight = useRef(0);
-    const sheetRef = useRef(null);
-    const bySwipeCloseAnimation = useRef(false);
-    const getSheetOffset = (deltaY) => Math.max(0, deltaY);
-    const getBackdropOpacity = (offset) => Math.max(0, 1 - offset / sheetHeight.current);
-    const getSwipeStyles = () => sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
-    const handleSwiping = ({ deltaY }) => {
-        const offset = getSheetOffset(deltaY);
+var tslib = require('tslib');
+var React = require('react');
+var reactSwipeable = require('react-swipeable');
+var cn = require('classnames');
+var coreComponentsBaseModal = require('../../base-modal/cssm');
+var shared = require('../../navigation-bar/cssm/shared');
+var coreComponentsShared = require('../../shared/cssm');
+var components_backdrop_Component = require('./components/backdrop/Component.js');
+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 cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var SWIPE_VELOCITY = 0.3;
+var CLOSE_OFFSET = 0.3;
+var ANIMATION_DURATION = 350;
+var DEFAULT_PADDING = 32;
+var PopupSheet = React.forwardRef(function (_a, ref) {
+    var children = _a.children, hasCloser = _a.hasCloser, className = _a.className, onClose = _a.onClose, transitionProps = _a.transitionProps, contentProps = _a.contentProps, swipeable = _a.swipeable, dataTestId = _a.dataTestId, backdropProps = _a.backdropProps, _b = _a.padding, padding = _b === void 0 ? DEFAULT_PADDING : _b, restProps = tslib.__rest(_a, ["children", "hasCloser", "className", "onClose", "transitionProps", "contentProps", "swipeable", "dataTestId", "backdropProps", "padding"]);
+    var _c = React.useState(0), sheetOffset = _c[0], setSheetOffset = _c[1];
+    var _d = React.useState(1), backdropOpacity = _d[0], setBackdropOpacity = _d[1];
+    var sheetHeight = React.useRef(0);
+    var sheetRef = React.useRef(null);
+    var bySwipeCloseAnimation = React.useRef(false);
+    var getSheetOffset = function (deltaY) { return Math.max(0, deltaY); };
+    var getBackdropOpacity = function (offset) {
+        return Math.max(0, 1 - offset / sheetHeight.current);
+    };
+    var getSwipeStyles = function () {
+        return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
+    };
+    var handleSwiping = function (_a) {
+        var deltaY = _a.deltaY;
+        var offset = getSheetOffset(deltaY);
         setSheetOffset(offset);
         setBackdropOpacity(getBackdropOpacity(offset));
     };
-    const handleSwiped = ({ deltaY, velocity, event }) => {
-        const shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
-        const shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
-        const offset = sheetOffset;
-        const animDuration = ANIMATION_DURATION / 2;
-        let start;
+    var handleSwiped = function (_a) {
+        var deltaY = _a.deltaY, velocity = _a.velocity, event = _a.event;
+        var shouldCloseByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
+        var shouldCloseByOffset = deltaY >= sheetHeight.current * CLOSE_OFFSET;
+        var offset = sheetOffset;
+        var animDuration = ANIMATION_DURATION / 2;
+        var start;
         if (shouldCloseByVelocity || shouldCloseByOffset) {
             bySwipeCloseAnimation.current = true;
-            onClose?.(event, 'swipe');
-            const runLoop = (timeStamp) => {
+            onClose === null || onClose === void 0 ? void 0 : onClose(event, 'swipe');
+            var runLoop_1 = function (timeStamp) {
                 if (!start)
                     start = timeStamp;
-                const elapsedTime = timeStamp - start;
+                var elapsedTime = timeStamp - start;
                 if (elapsedTime <= animDuration) {
-                    const nextOffset = offset +
+                    var nextOffset = offset +
                         (sheetHeight.current - offset) *
-                            easingFns.easeInOutQuad(elapsedTime / animDuration);
+                            coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
                     if (nextOffset > 0) {
                         setSheetOffset(nextOffset);
                     }
-                    requestAnimationFrame(runLoop);
+                    requestAnimationFrame(runLoop_1);
                 }
                 else {
                     setSheetOffset(0);
                     bySwipeCloseAnimation.current = false;
                 }
             };
-            requestAnimationFrame(runLoop);
+            requestAnimationFrame(runLoop_1);
         }
         else {
-            const runLoop = (timeStamp) => {
+            var runLoop_2 = function (timeStamp) {
                 if (!start)
                     start = timeStamp;
-                const elapsedTime = timeStamp - start;
+                var elapsedTime = timeStamp - start;
                 if (elapsedTime <= animDuration) {
-                    const nextOffset = offset - offset * easingFns.easeInOutQuad(elapsedTime / animDuration);
+                    var nextOffset = offset - offset * coreComponentsShared.easingFns.easeInOutQuad(elapsedTime / animDuration);
                     if (nextOffset > 0) {
                         setSheetOffset(nextOffset);
                         setBackdropOpacity(getBackdropOpacity(nextOffset));
                     }
-                    requestAnimationFrame(runLoop);
+                    requestAnimationFrame(runLoop_2);
                 }
                 else {
                     setSheetOffset(0);
                     setBackdropOpacity(1);
                 }
             };
-            requestAnimationFrame(runLoop);
+            requestAnimationFrame(runLoop_2);
         }
     };
-    const handleEntered = (node, isAppearing) => {
+    var handleEntered = function (node, isAppearing) {
         bySwipeCloseAnimation.current = false;
         if (sheetRef.current) {
             sheetHeight.current = sheetRef.current.offsetHeight;
         }
-        if (transitionProps?.onEntered) {
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
     };
-    const handleExited = (node) => {
+    var handleExited = function (node) {
         bySwipeCloseAnimation.current = false;
         setSheetOffset(0);
         setBackdropOpacity(1);
-        if (transitionProps?.onExited) {
+        if (transitionProps === null || transitionProps === void 0 ? void 0 : transitionProps.onExited) {
             transitionProps.onExited(node);
         }
     };
-    const sheetSwipeableHandlers = useSwipeable({
+    var sheetSwipeableHandlers = reactSwipeable.useSwipeable({
         onSwiping: handleSwiping,
         onSwiped: handleSwiped,
         trackMouse: swipeable,
         trackTouch: swipeable,
         delta: 5,
     });
-    return (React.createElement(BaseModal, { ...restProps, onClose: onClose, ref: ref, className: cn(styles.component, className), dataTestId: dataTestId, Backdrop: PopupBackdrop, backdropProps: {
-            ...backdropProps,
-            opacity: backdropOpacity,
-        }, transitionProps: {
-            classNames: {
-                enter: styles.enter,
-                appear: styles.appear,
-                enterActive: styles.enterActive,
-                appearActive: styles.appearActive,
-                exit: bySwipeCloseAnimation.current ? styles.exitBySwipe : styles.exit,
+    return (React__default.default.createElement(coreComponentsBaseModal.BaseModal, tslib.__assign({}, restProps, { onClose: onClose, ref: ref, className: cn__default.default(styles__default.default.component, className), dataTestId: dataTestId, Backdrop: components_backdrop_Component.PopupBackdrop, backdropProps: tslib.__assign(tslib.__assign({}, backdropProps), { opacity: backdropOpacity }), transitionProps: tslib.__assign(tslib.__assign({ classNames: {
+                enter: styles__default.default.enter,
+                appear: styles__default.default.appear,
+                enterActive: styles__default.default.enterActive,
+                appearActive: styles__default.default.appearActive,
+                exit: bySwipeCloseAnimation.current ? styles__default.default.exitBySwipe : styles__default.default.exit,
                 exitActive: bySwipeCloseAnimation.current
-                    ? styles.exitActiveBySwipe
-                    : styles.exitActive,
-            },
-            timeout: ANIMATION_DURATION,
-            ...transitionProps,
-            onEntered: handleEntered,
-            onExited: handleExited,
-        }, componentDivProps: {
+                    ? styles__default.default.exitActiveBySwipe
+                    : styles__default.default.exitActive,
+            }, timeout: ANIMATION_DURATION }, transitionProps), { onEntered: handleEntered, onExited: handleExited }), componentDivProps: {
             ref: sheetRef,
             style: getSwipeStyles(),
-        }, contentProps: {
-            style: createPaddingStyle(padding),
-            ...contentProps,
-            ...sheetSwipeableHandlers,
-            className: cn(styles.content, contentProps?.className),
-        } },
-        hasCloser && (React.createElement(Closer, { view: 'mobile', className: styles.closer, onClick: onClose, dataTestId: getDataTestId(dataTestId, 'closer') })),
+        }, contentProps: tslib.__assign(tslib.__assign(tslib.__assign({ style: coreComponentsShared.createPaddingStyle(padding) }, contentProps), sheetSwipeableHandlers), { className: cn__default.default(styles__default.default.content, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }) }),
+        hasCloser && (React__default.default.createElement(shared.Closer, { view: 'mobile', className: styles__default.default.closer, onClick: onClose, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'closer') })),
         children));
 });
 
-export { PopupSheet };
+exports.PopupSheet = PopupSheet;

package/popup-sheet/cssm/components/backdrop/Component.js

@@ -1,13 +1,19 @@
-import React from 'react';
-import { Backdrop } from '../../../../backdrop/cssm';
-import styles from './index.module.css';
-
-const PopupBackdrop = ({ opacity, opacityTimeout, style, ...backdropProps }) => (React.createElement("div", { style: {
-        opacity,
-        transition: opacity === 1 ? `opacity ${opacityTimeout}ms ease-in-out` : '',
-        position: 'relative',
-        ...style,
-    } },
-    React.createElement(Backdrop, { transitionClassNames: styles, ...backdropProps })));
-
-export { PopupBackdrop };
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var coreComponentsBackdrop = require('../../../../backdrop/cssm');
+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 styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var PopupBackdrop = function (_a) {
+    var opacity = _a.opacity, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = tslib.__rest(_a, ["opacity", "opacityTimeout", "style"]);
+    return (React__default.default.createElement("div", { style: tslib.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity ".concat(opacityTimeout, "ms ease-in-out") : '', position: 'relative' }, style) },
+        React__default.default.createElement(coreComponentsBackdrop.Backdrop, tslib.__assign({ transitionClassNames: styles__default.default }, backdropProps))));
+};
+
+exports.PopupBackdrop = PopupBackdrop;

package/popup-sheet/cssm/components/backdrop/index.js

@@ -1,4 +1,7 @@
-export { PopupBackdrop } from './Component.js';
-import 'react';
-import '../../../../backdrop/cssm';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var components_backdrop_Component = require('./Component.js');
+
+
+
+exports.PopupBackdrop = components_backdrop_Component.PopupBackdrop;

package/popup-sheet/cssm/index.js

@@ -1,11 +1,7 @@
-export { PopupSheet } from './Component.js';
-import 'react';
-import 'react-swipeable';
-import 'classnames';
-import '../../base-modal/cssm';
-import '../../navigation-bar/cssm/shared';
-import '../../shared/cssm';
-import './components/backdrop/Component.js';
-import '../../backdrop/cssm';
-import './components/backdrop/index.module.css';
-import './index.module.css';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.PopupSheet = Component.PopupSheet;

package/popup-sheet/cssm/shared/index.js

@@ -1,2 +1,7 @@
-export { getPopupSheetTestIds } from '../utils.js';
-import '../../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getPopupSheetTestIds = utils.getPopupSheetTestIds;

package/popup-sheet/cssm/utils.js

@@ -1,10 +1,12 @@
-import { getDataTestId } from '../../shared/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var coreComponentsShared = require('../../shared/cssm');
 
 function getPopupSheetTestIds(dataTestId) {
     return {
         popupSheet: dataTestId,
-        closer: getDataTestId(dataTestId, 'closer'),
+        closer: coreComponentsShared.getDataTestId(dataTestId, 'closer'),
     };
 }
 
-export { getPopupSheetTestIds };
+exports.getPopupSheetTestIds = getPopupSheetTestIds;

package/portal/cssm/Component.js

@@ -1,22 +1,27 @@
-import { forwardRef, useState, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { setRef, getDefaultPortalContainer } from './utils.js';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const Portal = forwardRef(({ getPortalContainer = getDefaultPortalContainer, immediateMount = false, children }, ref) => {
-    const [mountNode, setMountNode] = useState(() => typeof window !== 'undefined' && immediateMount ? getPortalContainer() : null);
-    useEffect(() => {
+var react = require('react');
+var reactDom = require('react-dom');
+var utils = require('./utils.js');
+
+var Portal = react.forwardRef(function (_a, ref) {
+    var _b = _a.getPortalContainer, getPortalContainer = _b === void 0 ? utils.getDefaultPortalContainer : _b, _c = _a.immediateMount, immediateMount = _c === void 0 ? false : _c, children = _a.children;
+    var _d = react.useState(function () {
+        return typeof window !== 'undefined' && immediateMount ? getPortalContainer() : null;
+    }), mountNode = _d[0], setMountNode = _d[1];
+    react.useEffect(function () {
         setMountNode(getPortalContainer());
     }, [getPortalContainer]);
-    useEffect(() => {
+    react.useEffect(function () {
         if (mountNode) {
-            setRef(ref, mountNode);
-            return () => {
-                setRef(ref, null);
+            utils.setRef(ref, mountNode);
+            return function () {
+                utils.setRef(ref, null);
             };
         }
-        return () => null;
+        return function () { return null; };
     }, [ref, mountNode]);
-    return mountNode ? createPortal(children, mountNode) : mountNode;
+    return mountNode ? reactDom.createPortal(children, mountNode) : mountNode;
 });
 
-export { Portal };
+exports.Portal = Portal;

package/portal/cssm/index.js

@@ -1,4 +1,7 @@
-export { Portal } from './Component.js';
-import 'react';
-import 'react-dom';
-import './utils.js';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Portal = Component.Portal;

package/portal/cssm/utils.js

@@ -1,11 +1,15 @@
-const PORTAL_CONTAINER_ATTRIBUTE = 'alfa-portal-container';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PORTAL_CONTAINER_ATTRIBUTE = 'alfa-portal-container';
 function createPortalContainer() {
-    const portalContainer = document.createElement('div');
+    var portalContainer = document.createElement('div');
     portalContainer.setAttribute(PORTAL_CONTAINER_ATTRIBUTE, '');
     document.body.appendChild(portalContainer);
     return portalContainer;
 }
-const getDefaultPortalContainer = () => document.querySelector(`[${PORTAL_CONTAINER_ATTRIBUTE}]`) || createPortalContainer();
+var getDefaultPortalContainer = function () {
+    return document.querySelector("[".concat(PORTAL_CONTAINER_ATTRIBUTE, "]")) || createPortalContainer();
+};
 function setRef(ref, value) {
     if (typeof ref === 'function') {
         ref(value);
@@ -16,4 +20,6 @@ function setRef(ref, value) {
     }
 }
 
-export { PORTAL_CONTAINER_ATTRIBUTE, getDefaultPortalContainer, setRef };
+exports.PORTAL_CONTAINER_ATTRIBUTE = PORTAL_CONTAINER_ATTRIBUTE;
+exports.getDefaultPortalContainer = getDefaultPortalContainer;
+exports.setRef = setRef;