@teamturing/react-kit 2.71.1 → 2.72.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,14 @@ 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;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
@@ -22,6 +25,7 @@ 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;
 } & SxProp & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>> & {
@@ -842,4 +846,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,27 @@ 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 Dialog = ({
   children,
   isOpen,
@@ -5629,6 +5650,7 @@ const Dialog = ({
   isOutsideClickDismissable = true,
   size = 'm',
   initialFocusRef,
+  motionProps,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -5668,25 +5690,10 @@ const Dialog = ({
   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)
-        },
+        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,

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';
@@ -19,6 +19,27 @@ import UnstyledDialogFooter from './_UnstyledDialogFooter.js';
 import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
 import { jsx, Fragment, jsxs } 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 Dialog = ({
   children,
   isOpen,
@@ -26,6 +47,7 @@ const Dialog = ({
   isOutsideClickDismissable = true,
   size = 'm',
   initialFocusRef,
+  motionProps,
   sx
 }, ref) => {
   const theme = useTheme();
@@ -65,25 +87,10 @@ const Dialog = ({
   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)
-        },
+        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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.71.1",
+  "version": "2.72.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": "edc5ac0a6961a8ee1a543659662dcfd8b2e4980f"
 }