@teamturing/react-kit 2.53.0 → 2.53.2

package/dist/index.js

@@ -4023,7 +4023,9 @@ const BaseIconButton = styled__default.default(UnstyledButton)(({
 
 const MotionView = framerMotion.motion(View);
 
-const UnstyledDialogBody = styled__default.default.div`
+const UnstyledDialogBody = styled__default.default.div.attrs({
+  className: 'trk-dialog_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
@@ -4045,7 +4047,9 @@ const DialogBody = ({
   children: children
 });
 
-const UnstyledDialogFooter = styled__default.default.div`
+const UnstyledDialogFooter = styled__default.default.div.attrs({
+  className: 'trk-dialog_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4076,7 +4080,9 @@ const DialogFooter = ({
   children: children
 });
 
-const UnstyledDialogHeader = styled__default.default.div`
+const UnstyledDialogHeader = styled__default.default.div.attrs({
+  className: 'trk-dialog_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4106,6 +4112,7 @@ const DialogHeaderSubtitle = ({
   color = 'text/neutral/subtler',
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(Text, {
+  className: 'trk-dialog_header_subtitle',
   typography: typography,
   color: color,
   ...props
@@ -4116,6 +4123,7 @@ const DialogHeaderTitle = ({
   color = 'text/neutral',
   ...props
 }) => /*#__PURE__*/jsxRuntime.jsx(Text, {
+  className: 'trk-dialog_header_title',
   typography: typography,
   color: color,
   ...props
@@ -4198,6 +4206,7 @@ const Dialog = ({
           width: '100%',
           height: '100%',
           children: /*#__PURE__*/jsxRuntime.jsxs(BaseDialog, {
+            className: `rkt-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
             role: 'dialog',
@@ -4242,6 +4251,7 @@ const Dialog = ({
                 right: 3
               },
               children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+                className: 'trk-dialog__close_button',
                 ref: closeButtonRef,
                 icon: icons.CloseIcon,
                 variant: 'plain',
@@ -4293,7 +4303,9 @@ var index$8 = Object.assign( /*#__PURE__*/React.forwardRef(Dialog), {
   Footer: DialogFooter
 });
 
-const UnstyledDrawerBody = styled__default.default.div`
+const UnstyledDrawerBody = styled__default.default.div.attrs({
+  className: 'trk-drawer_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
@@ -4315,7 +4327,9 @@ const DrawerBody = ({
   children: children
 });
 
-const UnstyledDrawerFooter = styled__default.default.div`
+const UnstyledDrawerFooter = styled__default.default.div.attrs({
+  className: 'trk-drawer_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4346,7 +4360,9 @@ const DrawerFooter = ({
   children: children
 });
 
-const UnstyledDrawerHeader = styled__default.default.div`
+const UnstyledDrawerHeader = styled__default.default.div.attrs({
+  className: 'trk-drawer_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
@@ -4498,6 +4514,7 @@ const Drawer = ({
           } : {})
         },
         children: /*#__PURE__*/jsxRuntime.jsxs(BaseDrawer, {
+          className: `trk-drawer--${size}`,
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
@@ -4513,6 +4530,7 @@ const Drawer = ({
               right: 5
             },
             children: /*#__PURE__*/jsxRuntime.jsx(IconButton, {
+              className: 'trk-drawer__close_button',
               ref: closeButtonRef,
               icon: icons.CloseIcon,
               variant: 'plain-bold',
@@ -4730,11 +4748,12 @@ const FileItem = ({
   const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : icons.DocumentIcon;
   const [objectUrl, setObjectUrl] = React.useState('');
   React.useEffect(() => {
-    setObjectUrl(URL.createObjectURL(file));
+    const url = URL.createObjectURL(file);
+    setObjectUrl(url);
     return () => {
-      URL.revokeObjectURL(objectUrl);
+      URL.revokeObjectURL(url);
     };
-  }, []);
+  }, [file]);
   return /*#__PURE__*/jsxRuntime.jsx(BaseFile, {
     variant: variant,
     disabled: disabled,
@@ -4754,7 +4773,9 @@ const FileItem = ({
         height: 24
       }) : null, trailingAction]
     }) : variant === 'thumbnail' ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx("img", {
+      children: [!objectUrl ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: 'file__thumbnail__empty'
+      }) : fileType === 'image' ? /*#__PURE__*/jsxRuntime.jsx("img", {
         src: objectUrl
       }) : fileType === 'video' ? /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: 'file__thumbnail__video',
@@ -4856,6 +4877,11 @@ const BaseFile = styled__default.default.div({
         pointerEvents: 'none',
         backgroundColor: 'bg/neutral'
       },
+      '& > .file__thumbnail__empty': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral'
+      },
       '& > img': {
         width: '100%',
         height: '100%',

package/esm/core/Dialog/DialogHeaderSubtitle.js

@@ -6,6 +6,7 @@ const DialogHeaderSubtitle = ({
   color = 'text/neutral/subtler',
   ...props
 }) => /*#__PURE__*/jsx(Text, {
+  className: 'trk-dialog_header_subtitle',
   typography: typography,
   color: color,
   ...props

package/esm/core/Dialog/DialogHeaderTitle.js

@@ -6,6 +6,7 @@ const DialogHeaderTitle = ({
   color = 'text/neutral',
   ...props
 }) => /*#__PURE__*/jsx(Text, {
+  className: 'trk-dialog_header_title',
   typography: typography,
   color: color,
   ...props

package/esm/core/Dialog/_UnstyledDialogBody.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogBody = styled.div`
+const UnstyledDialogBody = styled.div.attrs({
+  className: 'trk-dialog_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;

package/esm/core/Dialog/_UnstyledDialogFooter.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogFooter = styled.div`
+const UnstyledDialogFooter = styled.div.attrs({
+  className: 'trk-dialog_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Dialog/_UnstyledDialogHeader.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDialogHeader = styled.div`
+const UnstyledDialogHeader = styled.div.attrs({
+  className: 'trk-dialog_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Dialog/index.js

@@ -94,6 +94,7 @@ const Dialog = ({
           width: '100%',
           height: '100%',
           children: /*#__PURE__*/jsxs(BaseDialog, {
+            className: `rkt-dialog--${size}`,
             ref: dialogRef,
             "aria-modal": 'true',
             role: 'dialog',
@@ -138,6 +139,7 @@ const Dialog = ({
                 right: 3
               },
               children: /*#__PURE__*/jsx(IconButton, {
+                className: 'trk-dialog__close_button',
                 ref: closeButtonRef,
                 icon: CloseIcon,
                 variant: 'plain',

package/esm/core/Drawer/_UnstyledDrawerBody.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerBody = styled.div`
+const UnstyledDrawerBody = styled.div.attrs({
+  className: 'trk-drawer_body'
+})`
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;

package/esm/core/Drawer/_UnstyledDrawerFooter.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerFooter = styled.div`
+const UnstyledDrawerFooter = styled.div.attrs({
+  className: 'trk-drawer_footer'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Drawer/_UnstyledDrawerHeader.js

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 import { sx } from '../../utils/styled-system/index.js';
 
-const UnstyledDrawerHeader = styled.div`
+const UnstyledDrawerHeader = styled.div.attrs({
+  className: 'trk-drawer_header'
+})`
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;

package/esm/core/Drawer/index.js

@@ -129,6 +129,7 @@ const Drawer = ({
           } : {})
         },
         children: /*#__PURE__*/jsxs(BaseDrawer, {
+          className: `trk-drawer--${size}`,
           ref: drawerRef,
           "aria-modal": 'true',
           role: 'dialog',
@@ -144,6 +145,7 @@ const Drawer = ({
               right: 5
             },
             children: /*#__PURE__*/jsx(IconButton, {
+              className: 'trk-drawer__close_button',
               ref: closeButtonRef,
               icon: CloseIcon,
               variant: 'plain-bold',

package/esm/core/FileItem/index.js

@@ -23,11 +23,12 @@ const FileItem = ({
   const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : DocumentIcon;
   const [objectUrl, setObjectUrl] = useState('');
   useEffect(() => {
-    setObjectUrl(URL.createObjectURL(file));
+    const url = URL.createObjectURL(file);
+    setObjectUrl(url);
     return () => {
-      URL.revokeObjectURL(objectUrl);
+      URL.revokeObjectURL(url);
     };
-  }, []);
+  }, [file]);
   return /*#__PURE__*/jsx(BaseFile, {
     variant: variant,
     disabled: disabled,
@@ -47,7 +48,9 @@ const FileItem = ({
         height: 24
       }) : null, trailingAction]
     }) : variant === 'thumbnail' ? /*#__PURE__*/jsxs(Fragment, {
-      children: [fileType === 'image' ? /*#__PURE__*/jsx("img", {
+      children: [!objectUrl ? /*#__PURE__*/jsx("div", {
+        className: 'file__thumbnail__empty'
+      }) : fileType === 'image' ? /*#__PURE__*/jsx("img", {
         src: objectUrl
       }) : fileType === 'video' ? /*#__PURE__*/jsxs("div", {
         className: 'file__thumbnail__video',
@@ -149,6 +152,11 @@ const BaseFile = styled.div({
         pointerEvents: 'none',
         backgroundColor: 'bg/neutral'
       },
+      '& > .file__thumbnail__empty': {
+        width: '100%',
+        height: '100%',
+        backgroundColor: 'bg/neutral'
+      },
       '& > img': {
         width: '100%',
         height: '100%',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.53.0",
+  "version": "2.53.2",
   "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": "abcc2cc8d11799d8c8895282864db9a41b34bb57"
+  "gitHead": "38ac054ca771d2974d3b1ec8bbbc4c22094d8b52"
 }