@teamturing/react-kit 2.51.5 → 2.51.6

package/dist/index.js

@@ -4023,6 +4023,8 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
   }
 }));
 
+const MotionView = framerMotion.motion(View);
+
 const UnstyledDialogBody = styled__default.default.div`
   flex-grow: 1;
   flex-shrink: 1;
@@ -4131,15 +4133,15 @@ const Dialog = ({
   sx
 }, ref) => {
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
-  const overlayRef = React.useRef(null);
+  const blanketRef = React.useRef(null);
   const dialogRef = React.useRef(null);
   const closeButtonRef = React.useRef(null);
   React.useImperativeHandle(ref, () => dialogRef.current);
   const handleOutsideClick = React.useCallback(e => {
-    if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
+    if (dialogRef.current && blanketRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
       handleDismiss?.();
     }
-  }, [handleDismiss, dialogRef, overlayRef]);
+  }, [handleDismiss, dialogRef, blanketRef]);
   const handleKeyDown = React.useCallback(event => {
     switch (event.key) {
       case 'Escape':
@@ -4161,72 +4163,124 @@ const Dialog = ({
       };
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
-  return isOpen ? /*#__PURE__*/jsxRuntime.jsxs(View, {
-    sx: {
-      position: 'fixed',
-      display: 'flex',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      zIndex: 9999
-    },
-    children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
-      ref: overlayRef
-    }), /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
-      ref: dialogRef,
-      "aria-modal": 'true',
-      role: 'dialog',
-      tabIndex: -1,
-      sx: {
-        ...(size === 's' ? {
-          maxHeight: 'calc(100dvh - 64px)',
-          width: ['calc(100% - 64px)', 400, 400],
-          marginX: 'auto',
-          marginY: 'auto',
-          borderRadius: 'l'
-        } : size === 'm' ? {
-          maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
-          height: ['100%', '100%', 'auto'],
-          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-          width: ['100%', '100%', 640],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : size === 'l' ? {
-          maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
-          height: ['100%', '100%', 'auto'],
-          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-          width: ['100%', '100%', 860],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : size === 'full' ? {
-          height: ['100%', '100%', 'calc(100dvh - 40px)'],
-          width: ['100%', '100%', 'calc(100vw - 40px)'],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : {}),
-        ...sx
-      },
-      onKeyDown: handleKeyDown,
-      children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+  return /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(MotionView, {
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        },
+        transition: {
+          duration: 0.25,
+          /**
+           * easeOutQuad by https://easings.net/ko#easeOutQuad
+           */
+          ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
+        },
         sx: {
-          position: 'absolute',
-          top: 3,
-          right: 3
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
-          ref: closeButtonRef,
-          icon: icons.CloseIcon,
-          variant: 'plain',
-          size: 'm',
-          onClick: handleDismiss
+        children: /*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
+          ref: blanketRef
         })
-      }), children]
-    })]
-  }) : null;
+      }), /*#__PURE__*/jsxRuntime.jsx(MotionView, {
+        initial: {
+          opacity: 0,
+          scale: 1.1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        exit: {
+          opacity: 0,
+          scale: 1.1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        transition: {
+          duration: 0.25,
+          /**
+           * easeOutQuad by https://easings.net/ko#easeOutQuad
+           */
+          ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
+        },
+        sx: {
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
+          ref: dialogRef,
+          "aria-modal": 'true',
+          role: 'dialog',
+          tabIndex: -1,
+          sx: {
+            ...(size === 's' ? {
+              maxHeight: 'calc(100dvh - 64px)',
+              width: ['calc(100% - 64px)', 400, 400],
+              marginX: 'auto',
+              marginY: 'auto',
+              borderRadius: 'l'
+            } : size === 'm' ? {
+              maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
+              height: ['100%', '100%', 'auto'],
+              minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+              width: ['100%', '100%', 640],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : size === 'l' ? {
+              maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
+              height: ['100%', '100%', 'auto'],
+              minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+              width: ['100%', '100%', 860],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : size === 'full' ? {
+              height: ['100%', '100%', 'calc(100dvh - 40px)'],
+              width: ['100%', '100%', 'calc(100vw - 40px)'],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : {}),
+            ...sx
+          },
+          onKeyDown: handleKeyDown,
+          children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 3,
+              right: 3
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+              ref: closeButtonRef,
+              icon: icons.CloseIcon,
+              variant: 'plain',
+              size: 'm',
+              onClick: handleDismiss
+            })
+          }), children]
+        })
+      })]
+    }) : null
+  });
 };
 const Blanket$1 = styled__default.default.span`
   &:before {
@@ -4266,8 +4320,6 @@ var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   Footer: DialogFooter
 });
 
-const MotionView = framerMotion.motion(View);
-
 const UnstyledDrawerBody = styled__default.default.div`
   flex-grow: 1;
   flex-shrink: 1;

package/esm/core/Dialog/index.js

@@ -1,10 +1,12 @@
 import { CloseIcon } from '@teamturing/icons';
+import { AnimatePresence, cubicBezier } from 'framer-motion';
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import styled from 'styled-components';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
+import MotionView from '../MotionView/index.js';
 import DialogBody from './DialogBody.js';
 import DialogFooter from './DialogFooter.js';
 import DialogHeader from './DialogHeader.js';
@@ -13,7 +15,7 @@ import DialogHeaderTitle from './DialogHeaderTitle.js';
 import UnstyledDialogBody from './_UnstyledDialogBody.js';
 import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
 import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const Dialog = ({
   children,
@@ -25,15 +27,15 @@ const Dialog = ({
   sx
 }, ref) => {
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
-  const overlayRef = useRef(null);
+  const blanketRef = useRef(null);
   const dialogRef = useRef(null);
   const closeButtonRef = useRef(null);
   useImperativeHandle(ref, () => dialogRef.current);
   const handleOutsideClick = useCallback(e => {
-    if (dialogRef.current && overlayRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && overlayRef.current.contains(e.target)) {
+    if (dialogRef.current && blanketRef.current && e.target instanceof Node && !dialogRef.current.contains(e.target) && blanketRef.current.contains(e.target)) {
       handleDismiss?.();
     }
-  }, [handleDismiss, dialogRef, overlayRef]);
+  }, [handleDismiss, dialogRef, blanketRef]);
   const handleKeyDown = useCallback(event => {
     switch (event.key) {
       case 'Escape':
@@ -55,72 +57,124 @@ const Dialog = ({
       };
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
-  return isOpen ? /*#__PURE__*/jsxs(View, {
-    sx: {
-      position: 'fixed',
-      display: 'flex',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      zIndex: 9999
-    },
-    children: [/*#__PURE__*/jsx(Blanket, {
-      ref: overlayRef
-    }), /*#__PURE__*/jsxs(BaseDialog, {
-      ref: dialogRef,
-      "aria-modal": 'true',
-      role: 'dialog',
-      tabIndex: -1,
-      sx: {
-        ...(size === 's' ? {
-          maxHeight: 'calc(100dvh - 64px)',
-          width: ['calc(100% - 64px)', 400, 400],
-          marginX: 'auto',
-          marginY: 'auto',
-          borderRadius: 'l'
-        } : size === 'm' ? {
-          maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
-          height: ['100%', '100%', 'auto'],
-          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-          width: ['100%', '100%', 640],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : size === 'l' ? {
-          maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
-          height: ['100%', '100%', 'auto'],
-          minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
-          width: ['100%', '100%', 860],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : size === 'full' ? {
-          height: ['100%', '100%', 'calc(100dvh - 40px)'],
-          width: ['100%', '100%', 'calc(100vw - 40px)'],
-          marginX: [0, 0, 'auto'],
-          marginY: 'auto',
-          borderRadius: ['none', 'none', 'l']
-        } : {}),
-        ...sx
-      },
-      onKeyDown: handleKeyDown,
-      children: [/*#__PURE__*/jsx(View, {
+  return /*#__PURE__*/jsx(AnimatePresence, {
+    children: isOpen ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(MotionView, {
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        exit: {
+          opacity: 0
+        },
+        transition: {
+          duration: 0.25,
+          /**
+           * easeOutQuad by https://easings.net/ko#easeOutQuad
+           */
+          ease: cubicBezier(0.5, 1, 0.89, 1)
+        },
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsx(Blanket, {
+          ref: blanketRef
+        })
+      }), /*#__PURE__*/jsx(MotionView, {
+        initial: {
+          opacity: 0,
+          scale: 1.1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        animate: {
+          opacity: 1,
+          scale: 1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        exit: {
+          opacity: 0,
+          scale: 1.1,
+          translateX: '-50%',
+          translateY: '-50%'
+        },
+        transition: {
+          duration: 0.25,
+          /**
+           * easeOutQuad by https://easings.net/ko#easeOutQuad
+           */
+          ease: cubicBezier(0.5, 1, 0.89, 1)
+        },
         sx: {
-          position: 'absolute',
-          top: 3,
-          right: 3
+          position: 'fixed',
+          top: '50%',
+          left: '50%',
+          zIndex: 9999
         },
-        children: /*#__PURE__*/jsx(IconButton, {
-          ref: closeButtonRef,
-          icon: CloseIcon,
-          variant: 'plain',
-          size: 'm',
-          onClick: handleDismiss
+        children: /*#__PURE__*/jsxs(BaseDialog, {
+          ref: dialogRef,
+          "aria-modal": 'true',
+          role: 'dialog',
+          tabIndex: -1,
+          sx: {
+            ...(size === 's' ? {
+              maxHeight: 'calc(100dvh - 64px)',
+              width: ['calc(100% - 64px)', 400, 400],
+              marginX: 'auto',
+              marginY: 'auto',
+              borderRadius: 'l'
+            } : size === 'm' ? {
+              maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
+              height: ['100%', '100%', 'auto'],
+              minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+              width: ['100%', '100%', 640],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : size === 'l' ? {
+              maxHeight: ['100%', '100%', 'calc(100dvh - 64px)'],
+              height: ['100%', '100%', 'auto'],
+              minHeight: ['-webkit-fill-available', '-webkit-fill-available', 'auto'],
+              width: ['100%', '100%', 860],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : size === 'full' ? {
+              height: ['100%', '100%', 'calc(100dvh - 40px)'],
+              width: ['100%', '100%', 'calc(100vw - 40px)'],
+              marginX: [0, 0, 'auto'],
+              marginY: 'auto',
+              borderRadius: ['none', 'none', 'l']
+            } : {}),
+            ...sx
+          },
+          onKeyDown: handleKeyDown,
+          children: [/*#__PURE__*/jsx(View, {
+            sx: {
+              position: 'absolute',
+              top: 3,
+              right: 3
+            },
+            children: /*#__PURE__*/jsx(IconButton, {
+              ref: closeButtonRef,
+              icon: CloseIcon,
+              variant: 'plain',
+              size: 'm',
+              onClick: handleDismiss
+            })
+          }), children]
         })
-      }), children]
-    })]
-  }) : null;
+      })]
+    }) : null
+  });
 };
 const Blanket = styled.span`
   &:before {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.51.5",
+  "version": "2.51.6",
   "description": "React components, hooks for create teamturing web application",
   "author": "Sungchang Park <psch300@gmail.com> (https://github.com/psch300)",
   "homepage": "https://github.com/weareteamturing/bombe#readme",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "96826fb80956fb8f287f2bf85e4272450ba3451a"
+  "gitHead": "b48f843f109e5d541144fd5c3de7f7a7609ac86f"
 }