@teamturing/react-kit 2.67.0 → 2.68.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/index.js

@@ -1686,7 +1686,7 @@ const BaseActionListSectionHeader = /*#__PURE__*/styled__default.default.div.wit
   theme
 }) => theme.lineHeights[2], ({
   theme
-}) => `${utils.forcePixelValue(theme.space[1])} ${utils.forcePixelValue(theme.space[3])}}`, sx);
+}) => `${utils.forcePixelValue(theme.space[1])} ${utils.forcePixelValue(theme.space[3])}`, sx);
 
 const ActionListContext = /*#__PURE__*/React.createContext({});
 const ActionList = ({
@@ -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
+            })]
           })
         })]
       })

package/esm/core/ActionList/ActionListSectionHeader.js

@@ -25,6 +25,6 @@ const BaseActionListSectionHeader = /*#__PURE__*/styled.div.withConfig({
   theme
 }) => theme.lineHeights[2], ({
   theme
-}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[3])}}`, sx);
+}) => `${forcePixelValue(theme.space[1])} ${forcePixelValue(theme.space[3])}`, sx);
 
 export { ActionListSectionHeader as default };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.67.0",
+  "version": "2.68.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": "4cbea2311c3a6e06924ab571b29c4d35de67f507"
+  "gitHead": "367ba22b7504f2ac19a89ca49cf5deeeb8034592"
 }