@teamturing/react-kit 2.67.1 → 2.69.0

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type DialogContextValue = {
+    titleId?: string;
+};
+declare const DialogContext: import("react").Context<DialogContextValue>;
+export default DialogContext;
+export type { DialogContextValue };

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

@@ -1,16 +1,17 @@
 import { SpaceKey } from '@teamturing/token-studio';
 import { PropsWithChildren, RefObject } from 'react';
 import { ResponsiveValue } from 'styled-system';
+import { SxProp } from '../../utils/styled-system';
 type Props = {
     variant?: 'plain' | 'outlined' | 'underline';
     size?: ResponsiveValue<'l' | 'm' | 's'>;
     gap?: ResponsiveValue<SpaceKey>;
-};
+} & SxProp;
 type TabContextValue = {
     containerRef?: RefObject<HTMLElement>;
 } & Props;
 declare const TabContext: import("react").Context<TabContextValue>;
-declare const _default: (({ variant, size, gap, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
+declare const _default: (({ variant, size, gap, sx, children }: PropsWithChildren<Props>) => import("react/jsx-runtime").JSX.Element) & {
     Item: ({ children, leadingIcon: LeadingIcon, selected, onClick, size: propSize, variant: propVariant, }: PropsWithChildren<import("./TabItem").TabItemProps>) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;

package/dist/index.js

@@ -5436,6 +5436,8 @@ const DialogBody = ({
   children: children
 });
 
+const DialogContext = /*#__PURE__*/React.createContext({});
+
 const UnstyledDialogFooter = /*#__PURE__*/styled__default.default.div.attrs({
   className: 'trk-dialog_footer'
 }).withConfig({
@@ -5482,6 +5484,7 @@ const DialogHeader = ({
   sx: {
     px: 5,
     py: 4,
+    minHeight: utils.forcePixelValue(63),
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: 'border/neutral',
@@ -5505,12 +5508,18 @@ const DialogHeaderTitle = ({
   typography = 'm/bold',
   color = 'text/neutral',
   ...props
-}) => /*#__PURE__*/jsxRuntime.jsx(Text, {
-  className: 'trk-dialog_header_title',
-  typography: typography,
-  color: color,
-  ...props
-});
+}) => {
+  const {
+    titleId
+  } = React.useContext(DialogContext);
+  return /*#__PURE__*/jsxRuntime.jsx(Text, {
+    id: titleId,
+    className: 'trk-dialog_header_title',
+    typography: typography,
+    color: color,
+    ...props
+  });
+};
 
 const Dialog = ({
   children,
@@ -5522,6 +5531,7 @@ const Dialog = ({
   sx
 }, ref) => {
   const theme = styled.useTheme();
+  const titleId = React.useId();
   const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = React.useRef(null);
   const dialogRef = React.useRef(null);
@@ -5543,7 +5553,8 @@ const Dialog = ({
   useFocusTrap({
     containerRef: dialogRef,
     initialFocusRef: initialFocusRef || closeButtonRef,
-    disabled: !isOpen
+    disabled: !isOpen,
+    restoreFocusOnCleanUp: true
   });
   React.useEffect(() => {
     if (isOpen && isOutsideClickDismissable) {
@@ -5593,6 +5604,7 @@ const Dialog = ({
             className: `trk-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
+            "aria-labelledby": titleId,
             role: 'dialog',
             tabIndex: -1,
             sx: {
@@ -5642,7 +5654,12 @@ const Dialog = ({
                 size: 'm',
                 onClick: handleDismiss
               })
-            }), children]
+            }), /*#__PURE__*/jsxRuntime.jsx(DialogContext.Provider, {
+              value: {
+                titleId
+              },
+              children: children
+            })]
           })
         })]
       })
@@ -7055,6 +7072,7 @@ const TabItem = ({
     onClick?.(e);
   };
   return /*#__PURE__*/jsxRuntime.jsx(BaseTabItem, {
+    className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
     ref: ref,
@@ -7064,6 +7082,7 @@ const TabItem = ({
     selected: selected,
     onClick: handleClick,
     children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      className: 'trk-tab_item__content',
       sx: {
         display: 'flex',
         flexDirection: 'row',
@@ -7072,6 +7091,7 @@ const TabItem = ({
         columnGap: 1
       },
       children: [LeadingIcon ? /*#__PURE__*/jsxRuntime.jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsxRuntime.jsx(View, {
+        className: 'trk-tab_item__label',
         children: children
       })]
     })
@@ -7241,6 +7261,7 @@ const Tab = ({
   variant = 'plain',
   size = 'm',
   gap = 2,
+  sx,
   children
 }) => {
   const theme = styled.useTheme();
@@ -7282,8 +7303,11 @@ const Tab = ({
       containerRef: rootRef
     },
     children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+      className: 'trk-tab__wrapper',
       position: 'relative',
+      sx: sx,
       children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+        className: 'trk-tab__list',
         ref: rootRef,
         role: 'tablist',
         sx: {
@@ -7301,9 +7325,11 @@ const Tab = ({
         onScroll: throttle__default.default(handleScrollButtonVisibility, 150),
         children: children
       }), /*#__PURE__*/jsxRuntime.jsxs(View, {
+        className: 'trk-tab__navigation',
         display: ['none', 'initial', 'initial'],
         children: [isLeftButtonVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__left_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -7315,6 +7341,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__left_button',
             sx: {
               position: 'absolute',
               display: 'flex',
@@ -7333,6 +7360,7 @@ const Tab = ({
           })]
         }) : null, isRightButtonVisible ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
           children: [/*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__right_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -7344,6 +7372,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsxRuntime.jsx(View, {
+            className: 'trk-tab__right_button',
             sx: {
               position: 'absolute',
               display: 'flex',

package/esm/core/Dialog/DialogContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const DialogContext = /*#__PURE__*/createContext({});
+
+export { DialogContext as default };

package/esm/core/Dialog/DialogHeader.js

@@ -1,3 +1,4 @@
+import { forcePixelValue } from '@teamturing/utils';
 import UnstyledDialogHeader from './_UnstyledDialogHeader.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -10,6 +11,7 @@ const DialogHeader = ({
   sx: {
     px: 5,
     py: 4,
+    minHeight: forcePixelValue(63),
     borderBottomWidth: 1,
     borderBottomStyle: 'solid',
     borderBottomColor: 'border/neutral',

package/esm/core/Dialog/DialogHeaderTitle.js

@@ -1,15 +1,23 @@
+import { useContext } from 'react';
 import Text from '../Text/index.js';
+import DialogContext from './DialogContext.js';
 import { jsx } from 'react/jsx-runtime';
 
 const DialogHeaderTitle = ({
   typography = 'm/bold',
   color = 'text/neutral',
   ...props
-}) => /*#__PURE__*/jsx(Text, {
-  className: 'trk-dialog_header_title',
-  typography: typography,
-  color: color,
-  ...props
-});
+}) => {
+  const {
+    titleId
+  } = useContext(DialogContext);
+  return /*#__PURE__*/jsx(Text, {
+    id: titleId,
+    className: 'trk-dialog_header_title',
+    typography: typography,
+    color: color,
+    ...props
+  });
+};
 
 export { DialogHeaderTitle as default };

package/esm/core/Dialog/index.js

@@ -1,7 +1,7 @@
 import { CloseIcon } from '@teamturing/icons';
 import { forcePixelValue } from '@teamturing/utils';
 import { AnimatePresence, cubicBezier } from 'framer-motion';
-import { forwardRef, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
+import { forwardRef, useId, useCallback, useRef, useImperativeHandle, useEffect } from 'react';
 import styled, { useTheme } from 'styled-components';
 import IconButton from '../IconButton/index.js';
 import View from '../View/index.js';
@@ -9,6 +9,7 @@ import useFocusTrap from '../../hook/useFocusTrap.js';
 import { sx } from '../../utils/styled-system/index.js';
 import MotionView from '../MotionView/index.js';
 import DialogBody from './DialogBody.js';
+import DialogContext from './DialogContext.js';
 import DialogFooter from './DialogFooter.js';
 import DialogHeader from './DialogHeader.js';
 import DialogHeaderSubtitle from './DialogHeaderSubtitle.js';
@@ -28,6 +29,7 @@ const Dialog = ({
   sx
 }, ref) => {
   const theme = useTheme();
+  const titleId = useId();
   const handleDismiss = useCallback(() => onDismiss?.(), [onDismiss]);
   const blanketRef = useRef(null);
   const dialogRef = useRef(null);
@@ -49,7 +51,8 @@ const Dialog = ({
   useFocusTrap({
     containerRef: dialogRef,
     initialFocusRef: initialFocusRef || closeButtonRef,
-    disabled: !isOpen
+    disabled: !isOpen,
+    restoreFocusOnCleanUp: true
   });
   useEffect(() => {
     if (isOpen && isOutsideClickDismissable) {
@@ -99,6 +102,7 @@ const Dialog = ({
             className: `trk-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
+            "aria-labelledby": titleId,
             role: 'dialog',
             tabIndex: -1,
             sx: {
@@ -148,7 +152,12 @@ const Dialog = ({
                 size: 'm',
                 onClick: handleDismiss
               })
-            }), children]
+            }), /*#__PURE__*/jsx(DialogContext.Provider, {
+              value: {
+                titleId
+              },
+              children: children
+            })]
           })
         })]
       })

package/esm/core/Tab/TabItem.js

@@ -38,6 +38,7 @@ const TabItem = ({
     onClick?.(e);
   };
   return /*#__PURE__*/jsx(BaseTabItem, {
+    className: 'trk-tab_item',
     type: 'button',
     role: 'tab',
     ref: ref,
@@ -47,6 +48,7 @@ const TabItem = ({
     selected: selected,
     onClick: handleClick,
     children: /*#__PURE__*/jsxs(View, {
+      className: 'trk-tab_item__content',
       sx: {
         display: 'flex',
         flexDirection: 'row',
@@ -55,6 +57,7 @@ const TabItem = ({
         columnGap: 1
       },
       children: [LeadingIcon ? /*#__PURE__*/jsx(LeadingIcon, {}) : null, /*#__PURE__*/jsx(View, {
+        className: 'trk-tab_item__label',
         children: children
       })]
     })

package/esm/core/Tab/index.js

@@ -14,6 +14,7 @@ const Tab = ({
   variant = 'plain',
   size = 'm',
   gap = 2,
+  sx,
   children
 }) => {
   const theme = useTheme();
@@ -55,8 +56,11 @@ const Tab = ({
       containerRef: rootRef
     },
     children: /*#__PURE__*/jsxs(View, {
+      className: 'trk-tab__wrapper',
       position: 'relative',
+      sx: sx,
       children: [/*#__PURE__*/jsx(View, {
+        className: 'trk-tab__list',
         ref: rootRef,
         role: 'tablist',
         sx: {
@@ -74,9 +78,11 @@ const Tab = ({
         onScroll: throttle(handleScrollButtonVisibility, 150),
         children: children
       }), /*#__PURE__*/jsxs(View, {
+        className: 'trk-tab__navigation',
         display: ['none', 'initial', 'initial'],
         children: [isLeftButtonVisible ? /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(View, {
+            className: 'trk-tab__left_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -88,6 +94,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsx(View, {
+            className: 'trk-tab__left_button',
             sx: {
               position: 'absolute',
               display: 'flex',
@@ -106,6 +113,7 @@ const Tab = ({
           })]
         }) : null, isRightButtonVisible ? /*#__PURE__*/jsxs(Fragment, {
           children: [/*#__PURE__*/jsx(View, {
+            className: 'trk-tab__right_gradient',
             sx: {
               position: 'absolute',
               top: 0,
@@ -117,6 +125,7 @@ const Tab = ({
               pointerEvents: 'none'
             }
           }), /*#__PURE__*/jsx(View, {
+            className: 'trk-tab__right_button',
             sx: {
               position: 'absolute',
               display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.67.1",
+  "version": "2.69.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": "3c0e01658258a289c7cf02291609a90b166588ba"
+  "gitHead": "116ff31ab9416028bc458439c710c91122326fee"
 }