@teamturing/react-kit 2.72.0 → 2.73.0

package/dist/core/Dialog/index.d.ts

@@ -18,6 +18,7 @@ type Props = {
     size?: DialogSizeType;
     initialFocusRef?: RefObject<HTMLElement>;
     motionProps?: DialogMotionProps;
+    blanketMotionProps?: DialogMotionProps;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
@@ -26,6 +27,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     size?: DialogSizeType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
     motionProps?: Partial<Pick<HTMLMotionProps<"div">, "transition" | "initial" | "animate" | "exit">> | undefined;
+    blanketMotionProps?: Partial<Pick<HTMLMotionProps<"div">, "transition" | "initial" | "animate" | "exit">> | undefined;
 } & SxProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {

package/dist/index.js

@@ -5643,6 +5643,21 @@ const DEFAULT_MOTION_PROPS = {
     ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
   }
 };
+const DEFAULT_BLANKET_MOTION_PROPS = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  },
+  transition: {
+    duration: 0.25,
+    ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
+  }
+};
 const Dialog = ({
   children,
   isOpen,
@@ -5651,6 +5666,7 @@ const Dialog = ({
   size = 'm',
   initialFocusRef,
   motionProps,
+  blanketMotionProps,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -5688,8 +5704,24 @@ const Dialog = ({
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
   return /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(MotionView, {
+    children: isOpen ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(MotionView, {
+        initial: blanketMotionProps?.initial ?? DEFAULT_BLANKET_MOTION_PROPS.initial,
+        animate: blanketMotionProps?.animate ?? DEFAULT_BLANKET_MOTION_PROPS.animate,
+        exit: blanketMotionProps?.exit ?? DEFAULT_BLANKET_MOTION_PROPS.exit,
+        transition: blanketMotionProps?.transition ?? DEFAULT_BLANKET_MOTION_PROPS.transition,
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
+          ref: blanketRef
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(MotionView, {
         initial: motionProps?.initial ?? DEFAULT_MOTION_PROPS.initial,
         animate: motionProps?.animate ?? DEFAULT_MOTION_PROPS.animate,
         exit: motionProps?.exit ?? DEFAULT_MOTION_PROPS.exit,
@@ -5700,14 +5732,16 @@ const Dialog = ({
           right: 0,
           bottom: 0,
           left: 0,
-          zIndex: 9999
+          zIndex: 9999,
+          pointerEvents: 'none'
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
-          ref: blanketRef
-        }), /*#__PURE__*/jsxRuntime.jsx(View, {
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
           display: 'flex',
           width: '100%',
           height: '100%',
+          sx: {
+            pointerEvents: 'none'
+          },
           children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
             className: `trk-dialog--${size}`,
             ref: dialogRef,
@@ -5769,8 +5803,8 @@ const Dialog = ({
               children: children
             })]
           })
-        })]
-      })
+        })
+      })]
     }) : null
   });
 };
@@ -5793,7 +5827,8 @@ const BaseDialog = /*#__PURE__*/styled__default.default.div.withConfig({
   backgroundColor: theme.colors['surface'],
   outline: 'none',
   overflow: 'hidden',
-  margin: 'auto'
+  margin: 'auto',
+  pointerEvents: 'auto'
 }), sx);
 var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   UnstyledHeader: UnstyledDialogHeader,

package/esm/core/Dialog/index.js

@@ -17,7 +17,7 @@ import DialogHeaderTitle from './DialogHeaderTitle.js';
 import UnstyledDialogBody from './_UnstyledDialogBody.js';
 import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
 import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 const DEFAULT_MOTION_PROPS = {
   initial: {
@@ -40,6 +40,21 @@ const DEFAULT_MOTION_PROPS = {
     ease: cubicBezier(0.5, 1, 0.89, 1)
   }
 };
+const DEFAULT_BLANKET_MOTION_PROPS = {
+  initial: {
+    opacity: 0
+  },
+  animate: {
+    opacity: 1
+  },
+  exit: {
+    opacity: 0
+  },
+  transition: {
+    duration: 0.25,
+    ease: cubicBezier(0.5, 1, 0.89, 1)
+  }
+};
 const Dialog = ({
   children,
   isOpen,
@@ -48,6 +63,7 @@ const Dialog = ({
   size = 'm',
   initialFocusRef,
   motionProps,
+  blanketMotionProps,
   sx
 }, ref) => {
   const theme = useTheme();
@@ -85,8 +101,24 @@ const Dialog = ({
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
   return /*#__PURE__*/jsx(AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsxs(MotionView, {
+    children: isOpen ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(MotionView, {
+        initial: blanketMotionProps?.initial ?? DEFAULT_BLANKET_MOTION_PROPS.initial,
+        animate: blanketMotionProps?.animate ?? DEFAULT_BLANKET_MOTION_PROPS.animate,
+        exit: blanketMotionProps?.exit ?? DEFAULT_BLANKET_MOTION_PROPS.exit,
+        transition: blanketMotionProps?.transition ?? DEFAULT_BLANKET_MOTION_PROPS.transition,
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999
+        },
+        children: /*#__PURE__*/jsx(Blanket, {
+          ref: blanketRef
+        })
+      }), /*#__PURE__*/jsx(MotionView, {
         initial: motionProps?.initial ?? DEFAULT_MOTION_PROPS.initial,
         animate: motionProps?.animate ?? DEFAULT_MOTION_PROPS.animate,
         exit: motionProps?.exit ?? DEFAULT_MOTION_PROPS.exit,
@@ -97,14 +129,16 @@ const Dialog = ({
           right: 0,
           bottom: 0,
           left: 0,
-          zIndex: 9999
+          zIndex: 9999,
+          pointerEvents: 'none'
         },
-        children: [/*#__PURE__*/jsx(Blanket, {
-          ref: blanketRef
-        }), /*#__PURE__*/jsx(View, {
+        children: /*#__PURE__*/jsx(View, {
           display: 'flex',
           width: '100%',
           height: '100%',
+          sx: {
+            pointerEvents: 'none'
+          },
           children: /*#__PURE__*/jsxs(BaseDialog, {
             className: `trk-dialog--${size}`,
             ref: dialogRef,
@@ -166,8 +200,8 @@ const Dialog = ({
               children: children
             })]
           })
-        })]
-      })
+        })
+      })]
     }) : null
   });
 };
@@ -190,7 +224,8 @@ const BaseDialog = /*#__PURE__*/styled.div.withConfig({
   backgroundColor: theme.colors['surface'],
   outline: 'none',
   overflow: 'hidden',
-  margin: 'auto'
+  margin: 'auto',
+  pointerEvents: 'auto'
 }), sx);
 var index = Object.assign( /*#__PURE__*/forwardRef(Dialog), {
   UnstyledHeader: UnstyledDialogHeader,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.72.0",
+  "version": "2.73.0",
   "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",
@@ -65,5 +65,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "edc5ac0a6961a8ee1a543659662dcfd8b2e4980f"
+  "gitHead": "b803956a45b587b87b805a0eff212037d35d29fa"
 }