@teamturing/react-kit 2.71.1 → 2.73.0

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

@@ -1,3 +1,4 @@
+import { HTMLMotionProps } from 'framer-motion';
 import { PropsWithChildren, RefObject } from 'react';
 import { SxProp } from '../../utils/styled-system';
 import { DialogBodyProps } from './DialogBody';
@@ -9,12 +10,15 @@ import { UnstyledDialogBodyProps } from './_UnstyledDialogBody';
 import { UnstyledDialogFooterProps } from './_UnstyledDialogFooter';
 import { UnstyledDialogHeaderProps } from './_UnstyledDialogHeader';
 type DialogSizeType = 'full' | 'l' | 'm' | 's';
+type DialogMotionProps = Partial<Pick<HTMLMotionProps<'div'>, 'initial' | 'animate' | 'exit' | 'transition'>>;
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
     isOutsideClickDismissable?: boolean;
     size?: DialogSizeType;
     initialFocusRef?: RefObject<HTMLElement>;
+    motionProps?: DialogMotionProps;
+    blanketMotionProps?: DialogMotionProps;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
@@ -22,6 +26,8 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     isOutsideClickDismissable?: boolean | undefined;
     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>> & {
@@ -842,4 +848,4 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     Footer: ({ children, sx, ...props }: PropsWithChildren<DialogFooterProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
-export type { Props as DialogProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, };
+export type { Props as DialogProps, DialogMotionProps, UnstyledDialogHeaderProps, UnstyledDialogBodyProps, UnstyledDialogFooterProps, DialogHeaderProps, DialogHeaderTitleProps, DialogHeaderSubtitleProps, DialogBodyProps, DialogFooterProps, };

package/dist/index.js

@@ -5622,6 +5622,42 @@ const DialogHeaderTitle = ({
   });
 };
 
+const DEFAULT_MOTION_PROPS = {
+  initial: {
+    opacity: 0,
+    scale: 1.1
+  },
+  animate: {
+    opacity: 1,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    scale: 1.1
+  },
+  transition: {
+    duration: 0.25,
+    /**
+     * easeOutQuad by https://easings.net/ko#easeOutQuad
+     */
+    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,
@@ -5629,6 +5665,8 @@ const Dialog = ({
   isOutsideClickDismissable = true,
   size = 'm',
   initialFocusRef,
+  motionProps,
+  blanketMotionProps,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -5666,27 +5704,12 @@ const Dialog = ({
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
   return /*#__PURE__*/jsxRuntime.jsx(framerMotion.AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: /*#__PURE__*/jsxRuntime.jsxs(MotionView, {
-        initial: {
-          opacity: 0,
-          scale: 1.1
-        },
-        animate: {
-          opacity: 1,
-          scale: 1
-        },
-        exit: {
-          opacity: 0,
-          scale: 1.1
-        },
-        transition: {
-          duration: 0.25,
-          /**
-           * easeOutQuad by https://easings.net/ko#easeOutQuad
-           */
-          ease: framerMotion.cubicBezier(0.5, 1, 0.89, 1)
-        },
+    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,
@@ -5695,12 +5718,30 @@ const Dialog = ({
           left: 0,
           zIndex: 9999
         },
-        children: [/*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Blanket$1, {
           ref: blanketRef
-        }), /*#__PURE__*/jsxRuntime.jsx(View, {
+        })
+      }), /*#__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,
+        transition: motionProps?.transition ?? DEFAULT_MOTION_PROPS.transition,
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999,
+          pointerEvents: 'none'
+        },
+        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,
@@ -5762,8 +5803,8 @@ const Dialog = ({
               children: children
             })]
           })
-        })]
-      })
+        })
+      })]
     }) : null
   });
 };
@@ -5786,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

@@ -1,6 +1,6 @@
 import { CloseIcon } from '@teamturing/icons';
 import { forcePixelValue } from '@teamturing/utils';
-import { AnimatePresence, cubicBezier } from 'framer-motion';
+import { cubicBezier, AnimatePresence } from 'framer-motion';
 import { forwardRef, useId, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import styled, { useTheme } from 'styled-components';
 import IconButton from '../IconButton/index.js';
@@ -17,8 +17,44 @@ 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: {
+    opacity: 0,
+    scale: 1.1
+  },
+  animate: {
+    opacity: 1,
+    scale: 1
+  },
+  exit: {
+    opacity: 0,
+    scale: 1.1
+  },
+  transition: {
+    duration: 0.25,
+    /**
+     * easeOutQuad by https://easings.net/ko#easeOutQuad
+     */
+    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,
@@ -26,6 +62,8 @@ const Dialog = ({
   isOutsideClickDismissable = true,
   size = 'm',
   initialFocusRef,
+  motionProps,
+  blanketMotionProps,
   sx
 }, ref) => {
   const theme = useTheme();
@@ -63,27 +101,12 @@ const Dialog = ({
     }
   }, [isOpen, isOutsideClickDismissable, handleOutsideClick]);
   return /*#__PURE__*/jsx(AnimatePresence, {
-    children: isOpen ? /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsxs(MotionView, {
-        initial: {
-          opacity: 0,
-          scale: 1.1
-        },
-        animate: {
-          opacity: 1,
-          scale: 1
-        },
-        exit: {
-          opacity: 0,
-          scale: 1.1
-        },
-        transition: {
-          duration: 0.25,
-          /**
-           * easeOutQuad by https://easings.net/ko#easeOutQuad
-           */
-          ease: cubicBezier(0.5, 1, 0.89, 1)
-        },
+    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,
@@ -92,12 +115,30 @@ const Dialog = ({
           left: 0,
           zIndex: 9999
         },
-        children: [/*#__PURE__*/jsx(Blanket, {
+        children: /*#__PURE__*/jsx(Blanket, {
           ref: blanketRef
-        }), /*#__PURE__*/jsx(View, {
+        })
+      }), /*#__PURE__*/jsx(MotionView, {
+        initial: motionProps?.initial ?? DEFAULT_MOTION_PROPS.initial,
+        animate: motionProps?.animate ?? DEFAULT_MOTION_PROPS.animate,
+        exit: motionProps?.exit ?? DEFAULT_MOTION_PROPS.exit,
+        transition: motionProps?.transition ?? DEFAULT_MOTION_PROPS.transition,
+        sx: {
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 9999,
+          pointerEvents: 'none'
+        },
+        children: /*#__PURE__*/jsx(View, {
           display: 'flex',
           width: '100%',
           height: '100%',
+          sx: {
+            pointerEvents: 'none'
+          },
           children: /*#__PURE__*/jsxs(BaseDialog, {
             className: `trk-dialog--${size}`,
             ref: dialogRef,
@@ -159,8 +200,8 @@ const Dialog = ({
               children: children
             })]
           })
-        })]
-      })
+        })
+      })]
     }) : null
   });
 };
@@ -183,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.71.1",
+  "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": "4b2816ef526bcbd79c7fc513ebd1a5698c417302"
+  "gitHead": "b803956a45b587b87b805a0eff212037d35d29fa"
 }