@alfalab/core-components 45.6.0-beta.2 → 45.6.1

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

@@ -1,16 +1,15 @@
-import React, { forwardRef } from 'react';
-import { BasePlate } from '../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';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"bold":"bold","description":"description","footer":"footer"};
-require('./mobile.css');
+var tslib = require('tslib');
+var React = require('react');
+var components_basePlate_Component = require('../components/base-plate/Component.js');
+var styles = require('./mobile.module.css');
 
-const PlateMobile = forwardRef((restProps, ref) => (React.createElement(BasePlate, { ...restProps, styles: styles, ref: ref })));
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-export { PlateMobile };
+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,10 +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';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var mobile_Component_mobile = require('./Component.mobile.js');
+
+
+
+exports.PlateMobile = mobile_Component_mobile.PlateMobile;

package/plate/cssm/mobile/mobile.module.css

@@ -0,0 +1,27 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+    --gap-2xs: 4px;
+    --gap-s: 12px;
+} :root {
+} :root {
+} .bold {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 600;
+    padding: 6px var(--gap-s) 6px var(--gap-2xs);
+} .description {
+    padding: 0 var(--gap-s) var(--gap-2xs) var(--gap-2xs);
+} .footer {
+    padding: var(--gap-s) 0 var(--gap-2xs) var(--gap-2xs);
+}

package/popover/cssm/Component.js

@@ -1,43 +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';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"component":"component","inner":"inner","scrollableContent":"scrollableContent","arrow":"arrow","enter":"enter","enterActive":"enterActive","exit":"exit","exitActive":"exitActive"};
-require('./index.css');
+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');
 
-const DEFAULT_TRANSITION = {
+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 };
     }
@@ -52,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',
@@ -74,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;
     }, [
@@ -93,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,11 +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';
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Component = require('./Component.js');
+
+
+
+exports.Popover = Component.Popover;

package/popover/cssm/index.module.css

@@ -0,0 +1,98 @@
+:root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} /* deprecated */ :root {
+    --color-light-modal-bg-primary: #fff;
+    --color-light-text-primary: #0e0e0e; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
+} :root {
+} :root {
+    --shadow-m: 0 20px 24px rgba(0, 0, 0, 0.08), 0 12px 16px rgba(0, 0, 0, 0.04),
+        0 4px 8px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.04);
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+} :root {
+} :root {
+} :root {
+} :root {
+} :root {
+    --popover-border-color: transparent;
+} .component {
+    background-color: transparent;
+    color: var(--color-light-text-primary);
+} .inner {
+    position: relative;
+    background-color: var(--color-light-modal-bg-primary);
+    box-shadow: var(--shadow-m);
+    border: 1px solid var(--popover-border-color);
+    box-sizing: border-box;
+    will-change: transform;
+} .scrollableContent {
+    position: relative;
+    z-index: 2;
+    overflow-y: auto;
+} .arrow {
+    z-index: 1;
+} .arrow:after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: var(--color-light-modal-bg-primary);
+    border: 1px solid var(--popover-border-color);
+    box-sizing: border-box;
+    transform: rotate(45deg);
+} .component[data-popper-placement='left'] .arrow,
+.component[data-popper-placement='left-start'] .arrow,
+.component[data-popper-placement='left-end'] .arrow {
+    right: 5px
+} .component[data-popper-placement='left'] .arrow:after, .component[data-popper-placement='left-start'] .arrow:after, .component[data-popper-placement='left-end'] .arrow:after {
+        top: -6px;
+        border-bottom: none;
+        border-left: none;
+    } .component[data-popper-placement='right'] .arrow,
+.component[data-popper-placement='right-start'] .arrow,
+.component[data-popper-placement='right-end'] .arrow {
+    left: -7px
+} .component[data-popper-placement='right'] .arrow:after, .component[data-popper-placement='right-start'] .arrow:after, .component[data-popper-placement='right-end'] .arrow:after {
+        top: -6px;
+        border-top: none;
+        border-right: none;
+    } .component[data-popper-placement='top'] .arrow,
+.component[data-popper-placement='top-start'] .arrow,
+.component[data-popper-placement='top-end'] .arrow {
+    bottom: 5px
+} .component[data-popper-placement='top'] .arrow:after, .component[data-popper-placement='top-start'] .arrow:after, .component[data-popper-placement='top-end'] .arrow:after {
+        left: -6px;
+        border-top: none;
+        border-left: none;
+    } .component[data-popper-placement='bottom'] .arrow,
+.component[data-popper-placement='bottom-start'] .arrow,
+.component[data-popper-placement='bottom-end'] .arrow {
+    top: -7px
+} .component[data-popper-placement='bottom'] .arrow:after, .component[data-popper-placement='bottom-start'] .arrow:after, .component[data-popper-placement='bottom-end'] .arrow:after {
+        left: -6px;
+        border-bottom: none;
+        border-right: none;
+    } .enter .inner {
+    opacity: 0;
+    transform: scale(0.98);
+} .enterActive .inner {
+    opacity: 1;
+    transform: scale(1);
+    transition-property: opacity, transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 150ms;
+} .exit .inner {
+    opacity: 1;
+    transform: scale(1);
+} .exitActive .inner {
+    opacity: 0;
+    transform: scale(0.98);
+    transition-property: opacity, transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 150ms;
+}

package/popup-sheet/cssm/Component.js

@@ -1,136 +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 '../../backdrop/cssm';
+Object.defineProperty(exports, '__esModule', { value: true });
 
-const styles = {"component":"component","closer":"closer","content":"content","appear":"appear","enter":"enter","appearActive":"appearActive","enterActive":"enterActive","exit":"exit","exitBySwipe":"exitBySwipe","exitActiveBySwipe":"exitActiveBySwipe","exitActive":"exitActive","exitDone":"exitDone"};
-require('./index.css');
+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');
 
-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);
+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;