@alfalab/core-components 19.11.1 → 20.2.0

package/base-modal/esm/index.css

@@ -1,9 +1,6 @@
-/* hash: nnjeq */
+/* hash: 1pbe4 */
 :root {
     --color-light-bg-primary: #fff;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 
@@ -13,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_nnjeq {
+.base-modal__component_1pbe4 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_nnjeq {
+.base-modal__wrapper_1pbe4 {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_nnjeq {
+.base-modal__content_1pbe4 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_nnjeq {
+.base-modal__hidden_1pbe4 {
     display: none;
 }
-.base-modal__backdrop_nnjeq {
-    z-index: -1;
+.base-modal__backdrop_1pbe4 {
+    z-index: 0;
 }
-.base-modal__appear_nnjeq,
-.base-modal__enter_nnjeq {
+.base-modal__appear_1pbe4,
+.base-modal__enter_1pbe4 {
     opacity: 0;
 }
-.base-modal__appearActive_nnjeq,
-.base-modal__enterActive_nnjeq {
+.base-modal__appearActive_1pbe4,
+.base-modal__enterActive_1pbe4 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_nnjeq {
+.base-modal__exit_1pbe4 {
     opacity: 1;
 }
-.base-modal__exitActive_nnjeq,
-.base-modal__exitDone_nnjeq {
+.base-modal__exitActive_1pbe4,
+.base-modal__exitDone_1pbe4 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/esm/index.js

@@ -7,5 +7,5 @@ import 'react-focus-lock';
 import '../../portal/esm';
 import '../../backdrop/esm';
 import '../../stack/esm';
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop } from './utils.js';
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
 export { BaseModal, BaseModalContext } from './Component.js';

package/base-modal/esm/utils.d.ts

@@ -1,5 +1,6 @@
 declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/esm/utils.js

@@ -28,12 +28,39 @@ var isOverflowing = function (container) {
 var getPaddingRight = function (node) {
     return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
 };
+var restoreStylesStore = [];
+var restoreContainerStyles = function (container) {
+    var index = restoreStylesStore.findIndex(function (s) { return s.container === container; });
+    var existingStyles = restoreStylesStore[index];
+    if (!existingStyles)
+        return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        restoreStylesStore.splice(index, 1);
+        existingStyles.styles.forEach(function (_a) {
+            var value = _a.value, el = _a.el, key = _a.key;
+            if (value) {
+                el.style.setProperty(key, value);
+            }
+            else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
 var handleContainer = function (container) {
-    var restoreStyle = [];
+    if (!container)
+        return;
+    var existingStyles = restoreStylesStore.find(function (s) { return s.container === container; });
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    var containerStyles = [];
     if (isOverflowing(container)) {
         // Вычисляет размер до применения `overflow hidden` для избежания скачков
         var scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
+        containerStyles.push({
             value: container.style.paddingRight,
             key: 'padding-right',
             el: container,
@@ -52,24 +79,18 @@ var handleContainer = function (container) {
         : container;
     // Блокируем скролл даже если отсутствует скроллбар
     if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
+        containerStyles.push({
             value: scrollContainer.style.overflow,
             key: 'overflow',
             el: scrollContainer,
         });
     }
     scrollContainer.style.overflow = 'hidden';
-    return function () {
-        restoreStyle.forEach(function (_a) {
-            var value = _a.value, el = _a.el, key = _a.key;
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
+    restoreStylesStore.push({
+        container: container,
+        modals: 1,
+        styles: containerStyles,
+    });
 };
 
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop };
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };

package/base-modal/index.css

@@ -1,9 +1,6 @@
-/* hash: nnjeq */
+/* hash: 1pbe4 */
 :root {
     --color-light-bg-primary: #fff;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 
@@ -13,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_nnjeq {
+.base-modal__component_1pbe4 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_nnjeq {
+.base-modal__wrapper_1pbe4 {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_nnjeq {
+.base-modal__content_1pbe4 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_nnjeq {
+.base-modal__hidden_1pbe4 {
     display: none;
 }
-.base-modal__backdrop_nnjeq {
-    z-index: -1;
+.base-modal__backdrop_1pbe4 {
+    z-index: 0;
 }
-.base-modal__appear_nnjeq,
-.base-modal__enter_nnjeq {
+.base-modal__appear_1pbe4,
+.base-modal__enter_1pbe4 {
     opacity: 0;
 }
-.base-modal__appearActive_nnjeq,
-.base-modal__enterActive_nnjeq {
+.base-modal__appearActive_1pbe4,
+.base-modal__enterActive_1pbe4 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_nnjeq {
+.base-modal__exit_1pbe4 {
     opacity: 1;
 }
-.base-modal__exitActive_nnjeq,
-.base-modal__exitDone_nnjeq {
+.base-modal__exitActive_1pbe4,
+.base-modal__exitDone_1pbe4 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/index.js

@@ -20,3 +20,4 @@ exports.handleContainer = utils.handleContainer;
 exports.hasScrollbar = utils.hasScrollbar;
 exports.isScrolledToBottom = utils.isScrolledToBottom;
 exports.isScrolledToTop = utils.isScrolledToTop;
+exports.restoreContainerStyles = utils.restoreContainerStyles;

package/base-modal/modern/Component.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import React, { forwardRef, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import cn from 'classnames';
 import mergeRefs from 'react-merge-refs';
 import { ResizeObserver } from 'resize-observer';
@@ -7,9 +7,9 @@ import FocusLock from 'react-focus-lock';
 import { Portal } from '../../portal/modern';
 import { Backdrop } from '../../backdrop/modern';
 import { stackingOrder, Stack } from '../../stack/modern';
-import { isScrolledToTop, isScrolledToBottom, handleContainer, hasScrollbar } from './utils.js';
+import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
 
-var styles = {"component":"base-modal__component_nnjeq","wrapper":"base-modal__wrapper_nnjeq","content":"base-modal__content_nnjeq","hidden":"base-modal__hidden_nnjeq","backdrop":"base-modal__backdrop_nnjeq","appear":"base-modal__appear_nnjeq","enter":"base-modal__enter_nnjeq","appearActive":"base-modal__appearActive_nnjeq","enterActive":"base-modal__enterActive_nnjeq","exit":"base-modal__exit_nnjeq","exitActive":"base-modal__exitActive_nnjeq","exitDone":"base-modal__exitDone_nnjeq"};
+var styles = {"component":"base-modal__component_1pbe4","wrapper":"base-modal__wrapper_1pbe4","content":"base-modal__content_1pbe4","hidden":"base-modal__hidden_1pbe4","backdrop":"base-modal__backdrop_1pbe4","appear":"base-modal__appear_1pbe4","enter":"base-modal__enter_1pbe4","appearActive":"base-modal__appearActive_1pbe4","enterActive":"base-modal__enterActive_1pbe4","exit":"base-modal__exit_1pbe4","exitActive":"base-modal__exitActive_1pbe4","exitDone":"base-modal__exitDone_1pbe4"};
 require('./index.css');
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -35,7 +35,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     const wrapperRef = useRef(null);
     const scrollableNodeRef = useRef(null);
     const contentNodeRef = useRef(null);
-    const restoreContainerStyles = useRef(null);
+    const restoreContainerStylesRef = useRef(null);
     const checkToHasScrollBar = () => {
         if (scrollableNodeRef.current) {
             const scrollExists = hasScrollbar(scrollableNodeRef.current);
@@ -44,6 +44,9 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
     };
     const shouldRender = keepMounted || open || !exited;
+    const getContainer = useCallback(() => {
+        return (container ? container() : document.body);
+    }, [container]);
     const resizeObserver = useMemo(() => new ResizeObserver(checkToHasScrollBar), []);
     const addResizeHandle = useCallback(() => {
         if (scrollableNodeRef.current)
@@ -86,7 +89,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         return null;
     }, [onBackdropClick, onClose, onEscapeKeyDown]);
     const handleBackdropClick = (event) => {
-        if (!disableBackdropClick) {
+        if (!disableBackdropClick && event.target === wrapperRef.current) {
             handleClose(event, 'backdropClick');
         }
     };
@@ -135,27 +138,29 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
         }
         if (onUnmount)
             onUnmount();
-        if (restoreContainerStyles.current) {
-            restoreContainerStyles.current();
-            restoreContainerStyles.current = null;
+        if (restoreContainerStylesRef.current) {
+            restoreContainerStylesRef.current();
         }
     }, [handleScroll, onUnmount, removeResizeHandle, transitionProps]);
     useEffect(() => {
         if (open) {
-            restoreContainerStyles.current = handleContainer((container ? container() : document.body));
+            handleContainer(getContainer());
+            restoreContainerStylesRef.current = () => {
+                restoreContainerStylesRef.current = null;
+                restoreContainerStyles(getContainer());
+            };
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
+    }, [getContainer, open]);
     useEffect(() => {
         if (open)
             setExited(false);
     }, [open]);
     useEffect(() => {
         return () => {
-            resizeObserver.disconnect();
-            if (restoreContainerStyles.current) {
-                restoreContainerStyles.current();
+            if (restoreContainerStylesRef.current) {
+                restoreContainerStylesRef.current();
             }
+            resizeObserver.disconnect();
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -183,12 +188,14 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
     return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: container },
         React.createElement(BaseModalContext.Provider, { value: contextValue },
             React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
+                Backdrop$1 && (React.createElement(Backdrop$1, Object.assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
+                        zIndex: computedZIndex,
+                    } }))),
                 React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
                         [styles.hidden]: !open && exited,
-                    }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, tabIndex: -1, "data-test-id": dataTestId, style: {
+                    }), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onClick: handleBackdropClick, tabIndex: -1, "data-test-id": dataTestId, style: {
                         zIndex: computedZIndex,
                     } },
-                    Backdrop$1 && (React.createElement(Backdrop$1, Object.assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, onClick: handleBackdropClick }))),
                     React.createElement(CSSTransition, Object.assign({ appear: true, timeout: 200, classNames: styles }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
                         React.createElement("div", { className: cn(styles.component, className), ref: componentRef },
                             React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))))));

package/base-modal/modern/index.css

@@ -1,9 +1,6 @@
-/* hash: nnjeq */
+/* hash: 1pbe4 */
 :root {
     --color-light-bg-primary: #fff;
-
-    /* TODO: цвета добавлены руками. Обновить токены */
-    --color-light-text-secondary-inverted-transparent: rgba(255, 255, 255, 0.7);
 }
 :root {
 
@@ -13,14 +10,14 @@
 
     /* Hard up */
 }
-.base-modal__component_nnjeq {
+.base-modal__component_1pbe4 {
     position: relative;
     box-sizing: border-box;
     background: var(--color-light-bg-primary);
     margin: auto;
     flex-shrink: 0;
 }
-.base-modal__wrapper_nnjeq {
+.base-modal__wrapper_1pbe4 {
     position: fixed;
     top: 0;
     left: 0;
@@ -33,33 +30,33 @@
     align-items: center;
     outline: 0;
 }
-.base-modal__content_nnjeq {
+.base-modal__content_1pbe4 {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     flex: 1;
 }
-.base-modal__hidden_nnjeq {
+.base-modal__hidden_1pbe4 {
     display: none;
 }
-.base-modal__backdrop_nnjeq {
-    z-index: -1;
+.base-modal__backdrop_1pbe4 {
+    z-index: 0;
 }
-.base-modal__appear_nnjeq,
-.base-modal__enter_nnjeq {
+.base-modal__appear_1pbe4,
+.base-modal__enter_1pbe4 {
     opacity: 0;
 }
-.base-modal__appearActive_nnjeq,
-.base-modal__enterActive_nnjeq {
+.base-modal__appearActive_1pbe4,
+.base-modal__enterActive_1pbe4 {
     opacity: 1;
     transition: opacity 200ms ease-in;
 }
-.base-modal__exit_nnjeq {
+.base-modal__exit_1pbe4 {
     opacity: 1;
 }
-.base-modal__exitActive_nnjeq,
-.base-modal__exitDone_nnjeq {
+.base-modal__exitActive_1pbe4,
+.base-modal__exitDone_1pbe4 {
     opacity: 0;
     transition: opacity 200ms ease-out;
 }

package/base-modal/modern/index.js

@@ -7,5 +7,5 @@ import 'react-focus-lock';
 import '../../portal/modern';
 import '../../backdrop/modern';
 import '../../stack/modern';
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop } from './utils.js';
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
 export { BaseModal, BaseModalContext } from './Component.js';

package/base-modal/modern/utils.d.ts

@@ -1,5 +1,6 @@
 declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/modern/utils.js

@@ -28,12 +28,38 @@ const isOverflowing = (container) => {
 const getPaddingRight = (node) => {
     return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
 };
+const restoreStylesStore = [];
+const restoreContainerStyles = (container) => {
+    const index = restoreStylesStore.findIndex(s => s.container === container);
+    const existingStyles = restoreStylesStore[index];
+    if (!existingStyles)
+        return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        restoreStylesStore.splice(index, 1);
+        existingStyles.styles.forEach(({ value, el, key }) => {
+            if (value) {
+                el.style.setProperty(key, value);
+            }
+            else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
 const handleContainer = (container) => {
-    const restoreStyle = [];
+    if (!container)
+        return;
+    const existingStyles = restoreStylesStore.find(s => s.container === container);
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    const containerStyles = [];
     if (isOverflowing(container)) {
         // Вычисляет размер до применения `overflow hidden` для избежания скачков
         const scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
+        containerStyles.push({
             value: container.style.paddingRight,
             key: 'padding-right',
             el: container,
@@ -52,23 +78,18 @@ const handleContainer = (container) => {
         : container;
     // Блокируем скролл даже если отсутствует скроллбар
     if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
+        containerStyles.push({
             value: scrollContainer.style.overflow,
             key: 'overflow',
             el: scrollContainer,
         });
     }
     scrollContainer.style.overflow = 'hidden';
-    return () => {
-        restoreStyle.forEach(({ value, el, key }) => {
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
+    restoreStylesStore.push({
+        container,
+        modals: 1,
+        styles: containerStyles,
+    });
 };
 
-export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop };
+export { handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles };

package/base-modal/utils.d.ts

@@ -1,5 +1,6 @@
 declare function isScrolledToTop(target: HTMLElement): boolean;
 declare function isScrolledToBottom(target: HTMLElement): boolean;
 declare function hasScrollbar(target: HTMLElement): boolean;
-declare const handleContainer: (container: HTMLElement) => () => void;
-export { isScrolledToTop, isScrolledToBottom, hasScrollbar, handleContainer };
+declare const restoreContainerStyles: (container: HTMLElement) => void;
+declare const handleContainer: (container?: HTMLElement | undefined) => void;
+export { isScrolledToTop, isScrolledToBottom, hasScrollbar, restoreContainerStyles, handleContainer };

package/base-modal/utils.js

@@ -30,12 +30,39 @@ var isOverflowing = function (container) {
 var getPaddingRight = function (node) {
     return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
 };
+var restoreStylesStore = [];
+var restoreContainerStyles = function (container) {
+    var index = restoreStylesStore.findIndex(function (s) { return s.container === container; });
+    var existingStyles = restoreStylesStore[index];
+    if (!existingStyles)
+        return;
+    existingStyles.modals -= 1;
+    if (existingStyles.modals <= 0) {
+        restoreStylesStore.splice(index, 1);
+        existingStyles.styles.forEach(function (_a) {
+            var value = _a.value, el = _a.el, key = _a.key;
+            if (value) {
+                el.style.setProperty(key, value);
+            }
+            else {
+                el.style.removeProperty(key);
+            }
+        });
+    }
+};
 var handleContainer = function (container) {
-    var restoreStyle = [];
+    if (!container)
+        return;
+    var existingStyles = restoreStylesStore.find(function (s) { return s.container === container; });
+    if (existingStyles) {
+        existingStyles.modals += 1;
+        return;
+    }
+    var containerStyles = [];
     if (isOverflowing(container)) {
         // Вычисляет размер до применения `overflow hidden` для избежания скачков
         var scrollbarSize = getScrollbarSize();
-        restoreStyle.push({
+        containerStyles.push({
             value: container.style.paddingRight,
             key: 'padding-right',
             el: container,
@@ -54,27 +81,22 @@ var handleContainer = function (container) {
         : container;
     // Блокируем скролл даже если отсутствует скроллбар
     if (scrollContainer.style.overflow !== 'hidden') {
-        restoreStyle.push({
+        containerStyles.push({
             value: scrollContainer.style.overflow,
             key: 'overflow',
             el: scrollContainer,
         });
     }
     scrollContainer.style.overflow = 'hidden';
-    return function () {
-        restoreStyle.forEach(function (_a) {
-            var value = _a.value, el = _a.el, key = _a.key;
-            if (value) {
-                el.style.setProperty(key, value);
-            }
-            else {
-                el.style.removeProperty(key);
-            }
-        });
-    };
+    restoreStylesStore.push({
+        container: container,
+        modals: 1,
+        styles: containerStyles,
+    });
 };
 
 exports.handleContainer = handleContainer;
 exports.hasScrollbar = hasScrollbar;
 exports.isScrolledToBottom = isScrolledToBottom;
 exports.isScrolledToTop = isScrolledToTop;
+exports.restoreContainerStyles = restoreContainerStyles;

package/bottom-sheet/Component-d29b1169.js

@@ -0,0 +1,53 @@
+var React = require('react');
+var coreComponentsBackdrop = require('../backdrop');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+exports.__assign = function () {
+    exports.__assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return exports.__assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var SwipeableBackdrop = function (_a) {
+    var opacity = _a.opacity, handlers = _a.handlers, opacityTimeout = _a.opacityTimeout, style = _a.style, backdropProps = __rest(_a, ["opacity", "handlers", "opacityTimeout", "style"]);
+    return (React__default['default'].createElement("div", exports.__assign({}, handlers, { style: exports.__assign({ opacity: opacity, transition: opacity === 1 ? "opacity " + opacityTimeout + "ms ease-in-out" : '', position: 'relative' }, style) }),
+        React__default['default'].createElement(coreComponentsBackdrop.Backdrop, exports.__assign({}, backdropProps))));
+};
+
+exports.SwipeableBackdrop = SwipeableBackdrop;