@teamturing/react-kit 2.72.0 → 2.73.1

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

@@ -2539,24 +2539,30 @@ const Breadcrumbs = ({
     onClick: () => setIsExpanded(true)
   }, 'collapse'), ...childrenArray.slice(1 + 1 + childrenArray.length - maxItemCount)];
   return /*#__PURE__*/jsxRuntime.jsx(BaseBreadcrumbs, {
+    "aria-label": 'Breadcrumb',
     ...props,
-    children: React.Children.map(breadcrumbsItems, child => /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsItemWrapper, {
-      role: 'listitem',
-      children: child
-    }))
+    children: /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsList, {
+      children: React.Children.map(breadcrumbsItems, child => /*#__PURE__*/jsxRuntime.jsx(BreadcrumbsItemWrapper, {
+        children: child
+      }))
+    })
   });
 };
 const BaseBreadcrumbs = /*#__PURE__*/styled__default.default.nav.withConfig({
   displayName: "Breadcrumbs__BaseBreadcrumbs",
   componentId: "sc-1lwv2x7-0"
-})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:", ";row-gap:", ";"], ({
+})([""]);
+const BreadcrumbsList = /*#__PURE__*/styled__default.default.ol.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsList",
+  componentId: "sc-1lwv2x7-1"
+})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;list-style:none;padding:0;margin:0;column-gap:", ";row-gap:", ";"], ({
   theme
 }) => utils.forcePixelValue(theme.space[2]), ({
   theme
 }) => utils.forcePixelValue(theme.space[1]));
-const BreadcrumbsItemWrapper = /*#__PURE__*/styled__default.default.span.withConfig({
+const BreadcrumbsItemWrapper = /*#__PURE__*/styled__default.default.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItemWrapper",
-  componentId: "sc-1lwv2x7-1"
+  componentId: "sc-1lwv2x7-2"
 })(["display:inline-flex;&::after{content:'/';font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-left:", ";}&:last-child{&::after{content:none;}}"], ({
   theme
 }) => utils.forcePixelValue(theme.fontSizes.xxs), ({
@@ -5643,6 +5649,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 +5672,7 @@ const Dialog = ({
   size = 'm',
   initialFocusRef,
   motionProps,
+  blanketMotionProps,
   sx
 }, ref) => {
   const theme = styled.useTheme();
@@ -5688,8 +5710,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 +5738,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 +5809,8 @@ const Dialog = ({
               children: children
             })]
           })
-        })]
-      })
+        })
+      })]
     }) : null
   });
 };
@@ -5793,7 +5833,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,
@@ -6830,7 +6871,7 @@ const BasePagination = /*#__PURE__*/styled__default.default.nav.withConfig({
 const PaginationPage = /*#__PURE__*/styled__default.default(UnstyledButton).withConfig({
   displayName: "Pagination__PaginationPage",
   componentId: "sc-1fu43y9-1"
-})(["transition:background-color 100ms;height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";", ""], utils.forcePixelValue(32), utils.forcePixelValue(32), ({
+})(["transition:background-color 100ms;display:inline-flex;align-items:center;justify-content:center;height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";", ""], utils.forcePixelValue(32), utils.forcePixelValue(32), ({
   theme
 }) => utils.forcePixelValue(theme.radii.xs), ({
   theme

package/esm/core/Breadcrumbs/index.js

@@ -17,24 +17,30 @@ const Breadcrumbs = ({
     onClick: () => setIsExpanded(true)
   }, 'collapse'), ...childrenArray.slice(1 + 1 + childrenArray.length - maxItemCount)];
   return /*#__PURE__*/jsx(BaseBreadcrumbs, {
+    "aria-label": 'Breadcrumb',
     ...props,
-    children: Children.map(breadcrumbsItems, child => /*#__PURE__*/jsx(BreadcrumbsItemWrapper, {
-      role: 'listitem',
-      children: child
-    }))
+    children: /*#__PURE__*/jsx(BreadcrumbsList, {
+      children: Children.map(breadcrumbsItems, child => /*#__PURE__*/jsx(BreadcrumbsItemWrapper, {
+        children: child
+      }))
+    })
   });
 };
 const BaseBreadcrumbs = /*#__PURE__*/styled.nav.withConfig({
   displayName: "Breadcrumbs__BaseBreadcrumbs",
   componentId: "sc-1lwv2x7-0"
-})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:", ";row-gap:", ";"], ({
+})([""]);
+const BreadcrumbsList = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "Breadcrumbs__BreadcrumbsList",
+  componentId: "sc-1lwv2x7-1"
+})(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;list-style:none;padding:0;margin:0;column-gap:", ";row-gap:", ";"], ({
   theme
 }) => forcePixelValue(theme.space[2]), ({
   theme
 }) => forcePixelValue(theme.space[1]));
-const BreadcrumbsItemWrapper = /*#__PURE__*/styled.span.withConfig({
+const BreadcrumbsItemWrapper = /*#__PURE__*/styled.li.withConfig({
   displayName: "Breadcrumbs__BreadcrumbsItemWrapper",
-  componentId: "sc-1lwv2x7-1"
+  componentId: "sc-1lwv2x7-2"
 })(["display:inline-flex;&::after{content:'/';font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-left:", ";}&:last-child{&::after{content:none;}}"], ({
   theme
 }) => forcePixelValue(theme.fontSizes.xxs), ({

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/esm/core/Pagination/index.js

@@ -132,7 +132,7 @@ const BasePagination = /*#__PURE__*/styled.nav.withConfig({
 const PaginationPage = /*#__PURE__*/styled(UnstyledButton).withConfig({
   displayName: "Pagination__PaginationPage",
   componentId: "sc-1fu43y9-1"
-})(["transition:background-color 100ms;height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";", ""], forcePixelValue(32), forcePixelValue(32), ({
+})(["transition:background-color 100ms;display:inline-flex;align-items:center;justify-content:center;height:", ";min-width:", ";border-radius:", ";padding:", ";background-color:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";", ""], forcePixelValue(32), forcePixelValue(32), ({
   theme
 }) => forcePixelValue(theme.radii.xs), ({
   theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.72.0",
+  "version": "2.73.1",
   "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": "2a6718f0fbab9a0110acf4ec944271a40521b9b2"
 }