@cleartrip/ct-design-bottomsheet 2.0.0 → 4.0.0-SNAPSHOT-rnfinaltest.0

package/dist/ct-design-bottomsheet.cjs.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var ctDesignContainer = require('@cleartrip/ct-design-container');
 var ctDesignOutsideClickHandler = require('@cleartrip/ct-design-outside-click-handler');
@@ -10,87 +9,225 @@ var ctDesignTransition = require('@cleartrip/ct-design-transition');
 var react = require('react');
 var ctDesignIcons = require('@cleartrip/ct-design-icons');
 var ctDesignTheme = require('@cleartrip/ct-design-theme');
+var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
+var css = require('@emotion/css');
+var ctDesignBaseDragger = require('@cleartrip/ct-design-base-dragger');
 
+exports.BottomSheetSnapPoint = void 0;
+(function (BottomSheetSnapPoint) {
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Hidden"] = 0] = "Hidden";
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Partial"] = 1] = "Partial";
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Full"] = 2] = "Full";
+})(exports.BottomSheetSnapPoint || (exports.BottomSheetSnapPoint = {}));
 exports.DIRECTION = void 0;
 (function (DIRECTION) {
     DIRECTION["DOWN"] = "down";
     DIRECTION["UP"] = "up";
+    DIRECTION["LEFT"] = "left";
+    DIRECTION["RIGHT"] = "right";
 })(exports.DIRECTION || (exports.DIRECTION = {}));
 
-var getCloseButtonStyle = function (_a) {
-    var theme = _a.theme, _b = _a.isTop, isTop = _b === void 0 ? true : _b;
-    return (tslib.__assign({ position: 'absolute', right: '10px', backgroundColor: 'white', height: theme.size[8], width: theme.size[8], display: 'flex', alignItems: 'center', padding: theme.spacing[1], borderRadius: theme.border.radius['50P'], cursor: 'pointer', justifyContent: 'center' }, (isTop ? { top: '-44px' } : { bottom: '-44px' })));
-};
-
 var CLOSE_ICON_TYPE;
 (function (CLOSE_ICON_TYPE) {
     CLOSE_ICON_TYPE["CROSS"] = "CROSS";
     CLOSE_ICON_TYPE["BACK"] = "BACK";
 })(CLOSE_ICON_TYPE || (CLOSE_ICON_TYPE = {}));
-var BottomSheetHeader = function (props) {
-    var handleClose = props.handleClose, styleConfig = props.styleConfig, isBack = props.isBack, children = props.children, _a = props.showBorderRadius, showBorderRadius = _a === void 0 ? true : _a, _b = props.direction, direction = _b === void 0 ? exports.DIRECTION.DOWN : _b;
-    var theme = ctDesignTheme.useTheme();
-    var headerContainer = (styleConfig || {}).headerContainer;
-    var closeButtonStyles = getCloseButtonStyle({ theme: theme, isTop: direction === exports.DIRECTION.DOWN });
-    var getCloseIcon = function (isBack) {
-        if (isBack === void 0) { isBack = false; }
+const staticBottomSheetHeaderStyles = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        headerContainer: {
+            backgroundColor: theme.color.background.neutral,
+            zIndex: theme.zIndex.bottomSheet,
+        },
+        headerContainerWithBorderRadius: {
+            backgroundColor: theme.color.background.neutral,
+            zIndex: theme.zIndex.bottomSheet,
+            borderTopLeftRadius: theme.border.radius[16],
+            borderTopRightRadius: theme.border.radius[16],
+        },
+        closeButton: {
+            position: 'absolute',
+            right: theme.spacing[2],
+            backgroundColor: theme.color.background.neutral,
+            height: theme.size[8],
+            width: theme.size[8],
+            display: 'flex',
+            alignItems: 'center',
+            padding: theme.spacing[1],
+            borderRadius: theme.border.radius[32],
+            cursor: 'pointer',
+            justifyContent: 'center',
+        },
+    };
+});
+const BottomSheetHeader = (props) => {
+    const { handleClose, styleConfig, isBack, children, showBorderRadius = true, hideHeaderDismissIcon = false, direction = exports.DIRECTION.DOWN, } = props;
+    const theme = ctDesignTheme.useTheme();
+    const { headerContainer: customHeaderContainerStyles = [], closeButton: customCloseButtonStyles = [] } = styleConfig || {};
+    const isTop = direction === exports.DIRECTION.DOWN;
+    const dynamicCloseButtonStyles = ctDesignStyleManager.useStyles((theme) => {
+        return {
+            closeButton: Object.assign({}, (isTop ? { top: -theme.spacing[10] } : { bottom: -theme.spacing[10] })),
+        };
+    }, [isTop]);
+    const getCloseIcon = (isBack = false) => {
+        if (hideHeaderDismissIcon) {
+            return null;
+        }
         if (isBack) {
             return jsxRuntime.jsx(ctDesignIcons.ModalBack, {});
         }
         return jsxRuntime.jsx(ctDesignIcons.Cross, { height: 24, width: 24, crossColor: theme.color.background.primary });
     };
-    var CloseIcon = getCloseIcon(isBack);
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.className, css: tslib.__assign(tslib.__assign({ backgroundColor: theme.color.background.neutral, zIndex: theme.zIndex.bottomSheet }, (showBorderRadius &&
-            direction === exports.DIRECTION.DOWN && {
-            borderTopLeftRadius: theme.border.radius[16],
-            borderTopRightRadius: theme.border.radius[16],
-        })), headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.css) }, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ css: tslib.__assign({}, closeButtonStyles), onClick: handleClose }, { children: CloseIcon })), children] })));
+    const CloseIcon = getCloseIcon(isBack);
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+            root: [
+                showBorderRadius && direction === exports.DIRECTION.DOWN
+                    ? staticBottomSheetHeaderStyles.headerContainerWithBorderRadius
+                    : staticBottomSheetHeaderStyles.headerContainer,
+                ...customHeaderContainerStyles,
+            ],
+        }, children: [jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: {
+                    root: [
+                        staticBottomSheetHeaderStyles.closeButton,
+                        dynamicCloseButtonStyles.closeButton,
+                        ...customCloseButtonStyles,
+                    ],
+                }, onClick: handleClose, children: CloseIcon }), children] }));
 };
-BottomSheetHeader.defaultProps = {};
 
-var slideDirection = {
+const slideDirection = {
     up: 'down',
     down: 'up',
 };
-var handleWindowResize = function () {
-    var vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--mvh', "".concat(vh, "px"));
+const staticBottomSheetStyles = ctDesignStyleManager.makeStyles((theme) => {
+    return {
+        bottomSheetContainer: {
+            position: 'relative',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'calc(var(--mvh) * 92)',
+            boxShadow: theme.elevation.bottomE2,
+        },
+        overlayWrapper: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+        },
+    };
+});
+const webStaticBottomSheetStyles = css.css({
+    position: 'fixed',
+});
+const handleWindowResize = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--mvh', `${vh}px`);
 };
-var BottomSheet = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, children = _a.children, header = _a.header, onClose = _a.onClose, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.transitionDuration, timeout = _d === void 0 ? 200 : _d, overlayCloseIcon = _a.overlayCloseIcon, _e = _a.allowedBackdropClose, allowedBackdropClose = _e === void 0 ? true : _e, _f = _a.showBorderRadius, showBorderRadius = _f === void 0 ? true : _f, _g = _a.styleConfig, styleConfig = _g === void 0 ? {} : _g, _h = _a.disableOutSideClick, disableOutSideClick = _h === void 0 ? false : _h;
-    var _j = react.useState(isOpen), isVisible = _j[0], setIsVisible = _j[1];
-    var theme = ctDesignTheme.useTheme();
-    react.useEffect(function () {
+const BottomSheet = ({ open, onDismiss, backgroundColor: backdropColor, containerSheetBackgroundColor = 'white', cornerRadius = 16, showCloseButton = true, showBackButton = false, showBackdrop = true, children, header, direction = exports.DIRECTION.DOWN, transitionDuration: timeout = 250, allowedBackdropClose = true, styleConfig = {}, disableOutSideClick = false, disablePortal = false, draggableConfig, }) => {
+    const [isVisible, setIsVisible] = react.useState(open);
+    react.useEffect(() => {
         handleWindowResize();
         window.addEventListener('resize', handleWindowResize);
-        return function () {
+        return () => {
             window.removeEventListener('resize', handleWindowResize);
         };
     }, []);
-    var _k = overlayCloseIcon || {}, _l = _k.show, show = _l === void 0 ? false : _l, _m = _k.isBack, isBack = _m === void 0 ? false : _m;
-    var _o = styleConfig || {}, bottomSheetContainer = _o.bottomSheetContainer, overlayWrapper = _o.overlayWrapper;
-    var handleCloseBottomSheet = function (event) {
+    const { bottomSheetContainer: customBottomSheetContainerStyles = [], overlayWrapper: customOverlayWrapperStyles = [], } = styleConfig || {};
+    const handleCloseBottomSheet = (event) => {
         if (disableOutSideClick)
             return;
         event.preventDefault();
-        if (allowedBackdropClose && onClose) {
-            onClose({ isClosedByOutSideClick: true });
+        if (allowedBackdropClose && onDismiss) {
+            onDismiss({ isClosedByOutSideClick: true });
         }
     };
-    var handleExited = function () {
+    const handleExited = () => {
         setIsVisible(false);
     };
-    react.useEffect(function () {
-        if (isOpen) {
+    const handleClose = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    react.useEffect(() => {
+        if (open) {
             setIsVisible(true);
         }
-    }, [isOpen]);
+    }, [open]);
+    const dynamicBottomSheetContainerStyles = ctDesignStyleManager.useStyles(() => {
+        return {
+            bottomSheetContainer: Object.assign(Object.assign({}, ((draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) ? { height: undefined } : {})), { backgroundColor: containerSheetBackgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius }),
+        };
+    }, [draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable, containerSheetBackgroundColor, cornerRadius]);
+    const dynamicOverlayWrapperStyles = ctDesignStyleManager.useStyles((theme) => {
+        return {
+            overlayWrapper: Object.assign({ zIndex: theme.zIndex.bottomSheet, alignItems: exports.DIRECTION.DOWN ? 'flex-end' : 'flex-start', backgroundColor: backdropColor || (!showBackdrop ? 'transparent' : undefined) }, (!showBackdrop
+                ? {
+                    boxShadow: '0px -4px 16px 0px rgba(26, 26, 26, 0.08)',
+                }
+                : {})),
+        };
+    }, [showBackdrop, backdropColor, direction]);
+    const renderBottomsheetHeader = () => {
+        const headerComponent = (jsxRuntime.jsx(BottomSheetHeader, { direction: direction, showBorderRadius: cornerRadius > 0, handleClose: handleClose, isBack: showBackButton, children: header, hideHeaderDismissIcon: !showCloseButton }));
+        if (draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) {
+            return jsxRuntime.jsx(ctDesignBaseDragger.BaseDraggerHeader, { children: headerComponent });
+        }
+        return headerComponent;
+    };
+    const renderBottomsheetWithTransition = ({ ref, onReactTransitionGroupEnd, }) => {
+        return (jsxRuntime.jsx(ctDesignTransition.Transition, { type: 'slide', slideDirection: slideDirection[direction], timeout: timeout, mountOnEnter: true, unmountOnExit: true, appear: true, in: open, onExited: handleExited, onEntered: () => {
+                onReactTransitionGroupEnd && onReactTransitionGroupEnd();
+            }, children: jsxRuntime.jsx("div", { ref: ref, children: jsxRuntime.jsxs(ctDesignContainer.Container, { styleConfig: {
+                        root: [
+                            staticBottomSheetStyles.bottomSheetContainer,
+                            dynamicBottomSheetContainerStyles.bottomSheetContainer,
+                            ...customBottomSheetContainerStyles,
+                        ],
+                    }, children: [showCloseButton && renderBottomsheetHeader(), children] }) }) }));
+    };
+    const renderBottomsheetWithDragger = () => {
+        if (draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) {
+            return (jsxRuntime.jsx(ctDesignBaseDragger.BaseDragger, Object.assign({ isWrappedWithTransitionGroup: true }, draggableConfig, { isVisible: open, children: ({ ref, onReactTransitionGroupEnd }) => {
+                    return renderBottomsheetWithTransition({ ref, onReactTransitionGroupEnd });
+                } })));
+        }
+        return renderBottomsheetWithTransition({});
+    };
+    const renderBottomsheetWithOutsideClickHandler = () => {
+        return (jsxRuntime.jsx(ctDesignOutsideClickHandler.OutsideClickHandler, { disabled: disableOutSideClick, onOutsideClick: handleCloseBottomSheet, wrapperProps: { style: { width: '100%' } }, children: renderBottomsheetWithDragger() }));
+    };
+    const renderBottomsheetWithOverlay = () => {
+        return (jsxRuntime.jsx(ctDesignOverlay.Overlay, { blur: showBackdrop, styleConfig: {
+                root: [
+                    staticBottomSheetStyles.overlayWrapper,
+                    webStaticBottomSheetStyles,
+                    dynamicOverlayWrapperStyles.overlayWrapper,
+                    ...customOverlayWrapperStyles,
+                ],
+            }, children: renderBottomsheetWithOutsideClickHandler() }));
+    };
     if (isVisible) {
-        return (jsxRuntime.jsx(ctDesignPortal.Portal, { children: jsxRuntime.jsx(ctDesignOverlay.Overlay, tslib.__assign({ blur: true, customOverlayWrapperClass: overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.className, css: tslib.__assign({ position: 'fixed', bottom: 0, justifyContent: 'center', zIndex: theme.zIndex.bottomSheet, alignItems: "".concat(direction === 'down' ? 'flex-end' : 'flex-start') }, overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.css) }, { children: jsxRuntime.jsx(ctDesignOutsideClickHandler.OutsideClickHandler, tslib.__assign({ disabled: disableOutSideClick, onOutsideClick: handleCloseBottomSheet, wrapperProps: { style: { width: '100%' } } }, { children: jsxRuntime.jsx(ctDesignTransition.Transition, tslib.__assign({ type: 'slide', slideDirection: slideDirection[direction], timeout: timeout, mountOnEnter: true, unmountOnExit: true, appear: true, in: isOpen, onExited: handleExited }, { children: jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ className: bottomSheetContainer === null || bottomSheetContainer === void 0 ? void 0 : bottomSheetContainer.className, css: tslib.__assign({ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'white', borderTopLeftRadius: 16, borderTopRightRadius: 16, maxHeight: 'calc(var(--mvh) * 90)', boxShadow: theme.elevation.bottomE2 }, bottomSheetContainer === null || bottomSheetContainer === void 0 ? void 0 : bottomSheetContainer.css) }, { children: [show && (jsxRuntime.jsx(BottomSheetHeader, { direction: direction, showBorderRadius: showBorderRadius, handleClose: onClose, isBack: isBack, children: header })), children] })) })) })) })) }));
+        if (disablePortal) {
+            return renderBottomsheetWithOverlay();
+        }
+        return jsxRuntime.jsx(ctDesignPortal.Portal, { id: 'bottomsheet', children: renderBottomsheetWithOverlay() });
     }
     return null;
 };
+class BottomSheetComponent extends react.Component {
+    dismiss() {
+        var _a, _b;
+        (_b = (_a = this.props).onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    render() {
+        return jsxRuntime.jsx(BottomSheet, Object.assign({}, this.props));
+    }
+}
 
 exports.BottomSheet = BottomSheet;
+exports.BottomSheetComponent = BottomSheetComponent;
 exports.BottomSheetHeader = BottomSheetHeader;
 //# sourceMappingURL=ct-design-bottomsheet.cjs.js.map

package/dist/ct-design-bottomsheet.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-bottomsheet.cjs.js","sources":["../packages/components/Bottomsheet/src/type.ts","../packages/components/Bottomsheet/src/style.ts","../packages/components/Bottomsheet/src/BottomSheetHeader/BottomSheetHeader.tsx","../packages/components/Bottomsheet/src/BottomSheet.tsx"],"sourcesContent":[null,null,null,null],"names":["DIRECTION","useTheme","_jsx","ModalBack","Cross","_jsxs","Container","__assign","useState","useEffect","Portal","Overlay","OutsideClickHandler","Transition"],"mappings":"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"}
+{"version":3,"file":"ct-design-bottomsheet.cjs.js","sources":["../packages/components/Bottomsheet/src/type.ts","../packages/components/Bottomsheet/src/BottomSheetHeader/BottomSheetHeader.tsx","../packages/components/Bottomsheet/src/BottomSheet.tsx"],"sourcesContent":[null,null,null],"names":["BottomSheetSnapPoint","DIRECTION","makeStyles","useTheme","useStyles","_jsx","ModalBack","Cross","_jsxs","Container","css","useState","useEffect","BaseDraggerHeader","Transition","BaseDragger","OutsideClickHandler","Overlay","Portal","Component"],"mappings":"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"}

package/dist/ct-design-bottomsheet.esm.js

@@ -1,93 +1,229 @@
-import { __assign } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Container } from '@cleartrip/ct-design-container';
 import { OutsideClickHandler } from '@cleartrip/ct-design-outside-click-handler';
 import { Overlay } from '@cleartrip/ct-design-overlay';
 import { Portal } from '@cleartrip/ct-design-portal';
 import { Transition } from '@cleartrip/ct-design-transition';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Component } from 'react';
 import { ModalBack, Cross } from '@cleartrip/ct-design-icons';
 import { useTheme } from '@cleartrip/ct-design-theme';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { css } from '@emotion/css';
+import { BaseDragger, BaseDraggerHeader } from '@cleartrip/ct-design-base-dragger';
 
+var BottomSheetSnapPoint;
+(function (BottomSheetSnapPoint) {
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Hidden"] = 0] = "Hidden";
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Partial"] = 1] = "Partial";
+    BottomSheetSnapPoint[BottomSheetSnapPoint["Full"] = 2] = "Full";
+})(BottomSheetSnapPoint || (BottomSheetSnapPoint = {}));
 var DIRECTION;
 (function (DIRECTION) {
     DIRECTION["DOWN"] = "down";
     DIRECTION["UP"] = "up";
+    DIRECTION["LEFT"] = "left";
+    DIRECTION["RIGHT"] = "right";
 })(DIRECTION || (DIRECTION = {}));
 
-var getCloseButtonStyle = function (_a) {
-    var theme = _a.theme, _b = _a.isTop, isTop = _b === void 0 ? true : _b;
-    return (__assign({ position: 'absolute', right: '10px', backgroundColor: 'white', height: theme.size[8], width: theme.size[8], display: 'flex', alignItems: 'center', padding: theme.spacing[1], borderRadius: theme.border.radius['50P'], cursor: 'pointer', justifyContent: 'center' }, (isTop ? { top: '-44px' } : { bottom: '-44px' })));
-};
-
 var CLOSE_ICON_TYPE;
 (function (CLOSE_ICON_TYPE) {
     CLOSE_ICON_TYPE["CROSS"] = "CROSS";
     CLOSE_ICON_TYPE["BACK"] = "BACK";
 })(CLOSE_ICON_TYPE || (CLOSE_ICON_TYPE = {}));
-var BottomSheetHeader = function (props) {
-    var handleClose = props.handleClose, styleConfig = props.styleConfig, isBack = props.isBack, children = props.children, _a = props.showBorderRadius, showBorderRadius = _a === void 0 ? true : _a, _b = props.direction, direction = _b === void 0 ? DIRECTION.DOWN : _b;
-    var theme = useTheme();
-    var headerContainer = (styleConfig || {}).headerContainer;
-    var closeButtonStyles = getCloseButtonStyle({ theme: theme, isTop: direction === DIRECTION.DOWN });
-    var getCloseIcon = function (isBack) {
-        if (isBack === void 0) { isBack = false; }
+const staticBottomSheetHeaderStyles = makeStyles((theme) => {
+    return {
+        headerContainer: {
+            backgroundColor: theme.color.background.neutral,
+            zIndex: theme.zIndex.bottomSheet,
+        },
+        headerContainerWithBorderRadius: {
+            backgroundColor: theme.color.background.neutral,
+            zIndex: theme.zIndex.bottomSheet,
+            borderTopLeftRadius: theme.border.radius[16],
+            borderTopRightRadius: theme.border.radius[16],
+        },
+        closeButton: {
+            position: 'absolute',
+            right: theme.spacing[2],
+            backgroundColor: theme.color.background.neutral,
+            height: theme.size[8],
+            width: theme.size[8],
+            display: 'flex',
+            alignItems: 'center',
+            padding: theme.spacing[1],
+            borderRadius: theme.border.radius[32],
+            cursor: 'pointer',
+            justifyContent: 'center',
+        },
+    };
+});
+const BottomSheetHeader = (props) => {
+    const { handleClose, styleConfig, isBack, children, showBorderRadius = true, hideHeaderDismissIcon = false, direction = DIRECTION.DOWN, } = props;
+    const theme = useTheme();
+    const { headerContainer: customHeaderContainerStyles = [], closeButton: customCloseButtonStyles = [] } = styleConfig || {};
+    const isTop = direction === DIRECTION.DOWN;
+    const dynamicCloseButtonStyles = useStyles((theme) => {
+        return {
+            closeButton: Object.assign({}, (isTop ? { top: -theme.spacing[10] } : { bottom: -theme.spacing[10] })),
+        };
+    }, [isTop]);
+    const getCloseIcon = (isBack = false) => {
+        if (hideHeaderDismissIcon) {
+            return null;
+        }
         if (isBack) {
             return jsx(ModalBack, {});
         }
         return jsx(Cross, { height: 24, width: 24, crossColor: theme.color.background.primary });
     };
-    var CloseIcon = getCloseIcon(isBack);
-    return (jsxs(Container, __assign({ className: headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.className, css: __assign(__assign({ backgroundColor: theme.color.background.neutral, zIndex: theme.zIndex.bottomSheet }, (showBorderRadius &&
-            direction === DIRECTION.DOWN && {
-            borderTopLeftRadius: theme.border.radius[16],
-            borderTopRightRadius: theme.border.radius[16],
-        })), headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.css) }, { children: [jsx(Container, __assign({ css: __assign({}, closeButtonStyles), onClick: handleClose }, { children: CloseIcon })), children] })));
+    const CloseIcon = getCloseIcon(isBack);
+    return (jsxs(Container, { styleConfig: {
+            root: [
+                showBorderRadius && direction === DIRECTION.DOWN
+                    ? staticBottomSheetHeaderStyles.headerContainerWithBorderRadius
+                    : staticBottomSheetHeaderStyles.headerContainer,
+                ...customHeaderContainerStyles,
+            ],
+        }, children: [jsx(Container, { styleConfig: {
+                    root: [
+                        staticBottomSheetHeaderStyles.closeButton,
+                        dynamicCloseButtonStyles.closeButton,
+                        ...customCloseButtonStyles,
+                    ],
+                }, onClick: handleClose, children: CloseIcon }), children] }));
 };
-BottomSheetHeader.defaultProps = {};
 
-var slideDirection = {
+const slideDirection = {
     up: 'down',
     down: 'up',
 };
-var handleWindowResize = function () {
-    var vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--mvh', "".concat(vh, "px"));
+const staticBottomSheetStyles = makeStyles((theme) => {
+    return {
+        bottomSheetContainer: {
+            position: 'relative',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'calc(var(--mvh) * 92)',
+            boxShadow: theme.elevation.bottomE2,
+        },
+        overlayWrapper: {
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'flex-end',
+        },
+    };
+});
+const webStaticBottomSheetStyles = css({
+    position: 'fixed',
+});
+const handleWindowResize = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--mvh', `${vh}px`);
 };
-var BottomSheet = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'down' : _b, children = _a.children, header = _a.header, onClose = _a.onClose, _c = _a.isOpen, isOpen = _c === void 0 ? false : _c, _d = _a.transitionDuration, timeout = _d === void 0 ? 200 : _d, overlayCloseIcon = _a.overlayCloseIcon, _e = _a.allowedBackdropClose, allowedBackdropClose = _e === void 0 ? true : _e, _f = _a.showBorderRadius, showBorderRadius = _f === void 0 ? true : _f, _g = _a.styleConfig, styleConfig = _g === void 0 ? {} : _g, _h = _a.disableOutSideClick, disableOutSideClick = _h === void 0 ? false : _h;
-    var _j = useState(isOpen), isVisible = _j[0], setIsVisible = _j[1];
-    var theme = useTheme();
-    useEffect(function () {
+const BottomSheet = ({ open, onDismiss, backgroundColor: backdropColor, containerSheetBackgroundColor = 'white', cornerRadius = 16, showCloseButton = true, showBackButton = false, showBackdrop = true, children, header, direction = DIRECTION.DOWN, transitionDuration: timeout = 250, allowedBackdropClose = true, styleConfig = {}, disableOutSideClick = false, disablePortal = false, draggableConfig, }) => {
+    const [isVisible, setIsVisible] = useState(open);
+    useEffect(() => {
         handleWindowResize();
         window.addEventListener('resize', handleWindowResize);
-        return function () {
+        return () => {
             window.removeEventListener('resize', handleWindowResize);
         };
     }, []);
-    var _k = overlayCloseIcon || {}, _l = _k.show, show = _l === void 0 ? false : _l, _m = _k.isBack, isBack = _m === void 0 ? false : _m;
-    var _o = styleConfig || {}, bottomSheetContainer = _o.bottomSheetContainer, overlayWrapper = _o.overlayWrapper;
-    var handleCloseBottomSheet = function (event) {
+    const { bottomSheetContainer: customBottomSheetContainerStyles = [], overlayWrapper: customOverlayWrapperStyles = [], } = styleConfig || {};
+    const handleCloseBottomSheet = (event) => {
         if (disableOutSideClick)
             return;
         event.preventDefault();
-        if (allowedBackdropClose && onClose) {
-            onClose({ isClosedByOutSideClick: true });
+        if (allowedBackdropClose && onDismiss) {
+            onDismiss({ isClosedByOutSideClick: true });
         }
     };
-    var handleExited = function () {
+    const handleExited = () => {
         setIsVisible(false);
     };
-    useEffect(function () {
-        if (isOpen) {
+    const handleClose = () => {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    useEffect(() => {
+        if (open) {
             setIsVisible(true);
         }
-    }, [isOpen]);
+    }, [open]);
+    const dynamicBottomSheetContainerStyles = useStyles(() => {
+        return {
+            bottomSheetContainer: Object.assign(Object.assign({}, ((draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) ? { height: undefined } : {})), { backgroundColor: containerSheetBackgroundColor, borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius }),
+        };
+    }, [draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable, containerSheetBackgroundColor, cornerRadius]);
+    const dynamicOverlayWrapperStyles = useStyles((theme) => {
+        return {
+            overlayWrapper: Object.assign({ zIndex: theme.zIndex.bottomSheet, alignItems: DIRECTION.DOWN ? 'flex-end' : 'flex-start', backgroundColor: backdropColor || (!showBackdrop ? 'transparent' : undefined) }, (!showBackdrop
+                ? {
+                    boxShadow: '0px -4px 16px 0px rgba(26, 26, 26, 0.08)',
+                }
+                : {})),
+        };
+    }, [showBackdrop, backdropColor, direction]);
+    const renderBottomsheetHeader = () => {
+        const headerComponent = (jsx(BottomSheetHeader, { direction: direction, showBorderRadius: cornerRadius > 0, handleClose: handleClose, isBack: showBackButton, children: header, hideHeaderDismissIcon: !showCloseButton }));
+        if (draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) {
+            return jsx(BaseDraggerHeader, { children: headerComponent });
+        }
+        return headerComponent;
+    };
+    const renderBottomsheetWithTransition = ({ ref, onReactTransitionGroupEnd, }) => {
+        return (jsx(Transition, { type: 'slide', slideDirection: slideDirection[direction], timeout: timeout, mountOnEnter: true, unmountOnExit: true, appear: true, in: open, onExited: handleExited, onEntered: () => {
+                onReactTransitionGroupEnd && onReactTransitionGroupEnd();
+            }, children: jsx("div", { ref: ref, children: jsxs(Container, { styleConfig: {
+                        root: [
+                            staticBottomSheetStyles.bottomSheetContainer,
+                            dynamicBottomSheetContainerStyles.bottomSheetContainer,
+                            ...customBottomSheetContainerStyles,
+                        ],
+                    }, children: [showCloseButton && renderBottomsheetHeader(), children] }) }) }));
+    };
+    const renderBottomsheetWithDragger = () => {
+        if (draggableConfig === null || draggableConfig === void 0 ? void 0 : draggableConfig.isDraggable) {
+            return (jsx(BaseDragger, Object.assign({ isWrappedWithTransitionGroup: true }, draggableConfig, { isVisible: open, children: ({ ref, onReactTransitionGroupEnd }) => {
+                    return renderBottomsheetWithTransition({ ref, onReactTransitionGroupEnd });
+                } })));
+        }
+        return renderBottomsheetWithTransition({});
+    };
+    const renderBottomsheetWithOutsideClickHandler = () => {
+        return (jsx(OutsideClickHandler, { disabled: disableOutSideClick, onOutsideClick: handleCloseBottomSheet, wrapperProps: { style: { width: '100%' } }, children: renderBottomsheetWithDragger() }));
+    };
+    const renderBottomsheetWithOverlay = () => {
+        return (jsx(Overlay, { blur: showBackdrop, styleConfig: {
+                root: [
+                    staticBottomSheetStyles.overlayWrapper,
+                    webStaticBottomSheetStyles,
+                    dynamicOverlayWrapperStyles.overlayWrapper,
+                    ...customOverlayWrapperStyles,
+                ],
+            }, children: renderBottomsheetWithOutsideClickHandler() }));
+    };
     if (isVisible) {
-        return (jsx(Portal, { children: jsx(Overlay, __assign({ blur: true, customOverlayWrapperClass: overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.className, css: __assign({ position: 'fixed', bottom: 0, justifyContent: 'center', zIndex: theme.zIndex.bottomSheet, alignItems: "".concat(direction === 'down' ? 'flex-end' : 'flex-start') }, overlayWrapper === null || overlayWrapper === void 0 ? void 0 : overlayWrapper.css) }, { children: jsx(OutsideClickHandler, __assign({ disabled: disableOutSideClick, onOutsideClick: handleCloseBottomSheet, wrapperProps: { style: { width: '100%' } } }, { children: jsx(Transition, __assign({ type: 'slide', slideDirection: slideDirection[direction], timeout: timeout, mountOnEnter: true, unmountOnExit: true, appear: true, in: isOpen, onExited: handleExited }, { children: jsxs(Container, __assign({ className: bottomSheetContainer === null || bottomSheetContainer === void 0 ? void 0 : bottomSheetContainer.className, css: __assign({ position: 'relative', width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'white', borderTopLeftRadius: 16, borderTopRightRadius: 16, maxHeight: 'calc(var(--mvh) * 90)', boxShadow: theme.elevation.bottomE2 }, bottomSheetContainer === null || bottomSheetContainer === void 0 ? void 0 : bottomSheetContainer.css) }, { children: [show && (jsx(BottomSheetHeader, { direction: direction, showBorderRadius: showBorderRadius, handleClose: onClose, isBack: isBack, children: header })), children] })) })) })) })) }));
+        if (disablePortal) {
+            return renderBottomsheetWithOverlay();
+        }
+        return jsx(Portal, { id: 'bottomsheet', children: renderBottomsheetWithOverlay() });
     }
     return null;
 };
+class BottomSheetComponent extends Component {
+    dismiss() {
+        var _a, _b;
+        (_b = (_a = this.props).onDismiss) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    render() {
+        return jsx(BottomSheet, Object.assign({}, this.props));
+    }
+}
 
-export { BottomSheet, BottomSheetHeader, DIRECTION };
+export { BottomSheet, BottomSheetComponent, BottomSheetHeader, BottomSheetSnapPoint, DIRECTION };
 //# sourceMappingURL=ct-design-bottomsheet.esm.js.map