@teamturing/react-kit 2.28.1 → 2.29.0

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

@@ -8,11 +8,13 @@ import { UnstyledDrawerBodyProps } from './_UnstyledDrawerBody';
 import { UnstyledDrawerFooterProps } from './_UnstyledDrawerFooter';
 import { UnstyledDrawerHeaderProps } from './_UnstyledDrawerHeader';
 type DrawerSizeType = 'full' | 'l' | 'm' | 's';
+type DrawerDirectionType = 'right' | 'bottom';
 type Props = {
     isOpen?: boolean;
     onDismiss?: () => void;
     isOutsideClickDismissable?: boolean;
     size?: DrawerSizeType;
+    direction?: DrawerDirectionType;
     initialFocusRef?: RefObject<HTMLElement>;
 } & SxProp;
 declare const _default: import("react").ForwardRefExoticComponent<{
@@ -20,6 +22,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     onDismiss?: (() => void) | undefined;
     isOutsideClickDismissable?: boolean | undefined;
     size?: DrawerSizeType | undefined;
+    direction?: DrawerDirectionType | undefined;
     initialFocusRef?: RefObject<HTMLElement> | undefined;
 } & SxProp & {
     children?: import("react").ReactNode;

package/dist/index.js

@@ -19081,6 +19081,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -19143,15 +19144,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -19159,29 +19172,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -19231,6 +19242,52 @@ const BaseDrawer = styled__default.default.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index$7 = Object.assign( /*#__PURE__*/React.forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,
@@ -34685,7 +34742,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/esm/core/Drawer/index.js

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import SvgClose from '../../packages/icons/esm/Close.js';
 import styled from 'styled-components';
+import '../../node_modules/styled-system/dist/index.esm.js';
 import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import IconButton from '../IconButton/index.js';
@@ -14,6 +15,7 @@ import UnstyledDrawerBody from './_UnstyledDrawerBody.js';
 import UnstyledDrawerFooter from './_UnstyledDrawerFooter.js';
 import UnstyledDrawerHeader from './_UnstyledDrawerHeader.js';
 import { j as jsxRuntimeExports } from '../../node_modules/react/jsx-runtime.js';
+import { variant } from '../../node_modules/@styled-system/variant/dist/index.esm.js';
 import { AnimatePresence } from '../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
 import { easeInOut } from '../../node_modules/framer-motion/dist/es/easing/ease.js';
 
@@ -23,6 +25,7 @@ const Drawer = ({
   onDismiss,
   isOutsideClickDismissable = true,
   size = 'm',
+  direction = 'right',
   initialFocusRef,
   sx
 }, ref) => {
@@ -85,15 +88,27 @@ const Drawer = ({
           ref: blanketRef
         })
       }), /*#__PURE__*/jsxRuntimeExports.jsx(MotionView, {
-        initial: {
-          x: '100%'
-        },
-        animate: {
-          x: 0
-        },
-        exit: {
-          x: '100%'
-        },
+        ...(direction === 'right' ? {
+          initial: {
+            x: '100%'
+          },
+          animate: {
+            x: 0
+          },
+          exit: {
+            x: '100%'
+          }
+        } : direction === 'bottom' ? {
+          initial: {
+            y: '100%'
+          },
+          animate: {
+            y: 0
+          },
+          exit: {
+            y: '100%'
+          }
+        } : {}),
         transition: {
           duration: 0.25,
           ease: easeInOut
@@ -101,29 +116,27 @@ const Drawer = ({
         sx: {
           position: 'fixed',
           display: 'flex',
-          top: 0,
-          right: 0,
-          bottom: 0,
           zIndex: 9999,
-          width: ['100%', '100%', 'fit-content']
+          ...(direction === 'right' ? {
+            top: 0,
+            right: 0,
+            bottom: 0,
+            width: ['100%', '100%', 'fit-content']
+          } : direction === 'bottom' ? {
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%'
+          } : {})
         },
         children: /*#__PURE__*/jsxRuntimeExports.jsxs(BaseDrawer, {
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
           tabIndex: -1,
-          sx: {
-            ...(size === 's' ? {
-              width: ['calc(100% - 32px)', 400, 400]
-            } : size === 'm' ? {
-              width: ['100%', '100%', 640]
-            } : size === 'l' ? {
-              width: ['100%', '100%', 860]
-            } : size === 'full' ? {
-              width: ['100%', '100%', 'calc(100vw - 80px)']
-            } : {}),
-            ...sx
-          },
+          size: size,
+          direction: direction,
+          sx: sx,
           onKeyDown: handleKeyDown,
           children: [/*#__PURE__*/jsxRuntimeExports.jsx(View, {
             sx: {
@@ -173,6 +186,52 @@ const BaseDrawer = styled.div(({
   margin: 'auto',
   height: '100%',
   marginRight: 0
+}), ({
+  direction
+}) => direction === 'right' ? variant({
+  prop: 'size',
+  variants: {
+    s: {
+      width: ['calc(100% - 32px)', 400, 400]
+    },
+    m: {
+      width: ['100%', '100%', 640]
+    },
+    l: {
+      width: ['100%', '100%', 860]
+    },
+    full: {
+      width: ['100%', '100%', 'calc(100vw - 80px)']
+    }
+  }
+}) : variant({
+  prop: 'size',
+  variants: {
+    s: {
+      height: '40dvh',
+      maxHeight: '40dvh'
+    },
+    m: {
+      height: '60dvh',
+      maxHeight: '60dvh'
+    },
+    l: {
+      height: '80dvh',
+      maxHeight: '80dvh'
+    },
+    full: {
+      height: 'calc(100dvh - 80px)',
+      maxHeight: 'calc(100dvh - 80px)'
+    }
+  }
+}), variant({
+  prop: 'direction',
+  variants: {
+    right: {},
+    bottom: {
+      width: '100% !important'
+    }
+  }
 }), sx);
 var index = Object.assign( /*#__PURE__*/forwardRef(Drawer), {
   UnstyledHeader: UnstyledDrawerHeader,

package/esm/core/OverlayPopper/index.js

@@ -29,7 +29,9 @@ const OverlayPopper = ({
   } = useFloating({
     placement,
     whileElementsMounted: autoUpdate,
-    middleware: [offset(theme.space[1]), flip(), shift()],
+    middleware: [offset(theme.space[1]), flip(), shift({
+      crossAxis: true
+    })],
     strategy: 'fixed'
   });
   const [isOpen, toggleOverlay, openOverlay, closeOverlay] = useToggleState({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.28.1",
+  "version": "2.29.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",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "49e0faeb615a1860be291a9b7a60ec4201f9b877"
+  "gitHead": "b7418ad2dcfc8309263758233b2711bac6812586"
 }