@teamturing/react-kit 2.58.3 → 2.58.4

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

@@ -1,4 +1,4 @@
-import { HTMLProps } from 'react';
+import { ComponentType, HTMLProps, SVGProps } from 'react';
 import { SxProp } from '../../utils/styled-system';
 type Props = {
     file: File | Blob;
@@ -19,7 +19,11 @@ type Props = {
      * 시각적인 후행 부분에 상호작용할 요소를 정의합니다.
      */
     trailingAction?: React.ReactElement<HTMLProps<HTMLButtonElement>>;
+    /**
+     * file 일 때의 icon을 결정합니다.
+     */
+    renderFileIcon?: (fileType: string, file: Props['file']) => ComponentType<SVGProps<SVGSVGElement>>;
 } & SxProp;
-declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const FileItem: ({ file, variant, disabled, loading, validationStatus, trailingAction, renderFileIcon, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
 export default FileItem;
 export type { Props as FileItemProps };

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

@@ -8,6 +8,7 @@ type Props = {
     size?: ResponsiveValue<OverlaySizeType>;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[];
     dismissFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement>;
 } & MaxHeightProps & SxProp & HTMLAttributes<HTMLElement>;
 declare const _default: import("react").ForwardRefExoticComponent<{
     isOpen?: boolean | undefined;
@@ -15,6 +16,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     size?: ResponsiveValue<OverlaySizeType> | undefined;
     ignoreOutsideClickRefs?: RefObject<HTMLElement>[] | undefined;
     dismissFocusRef?: RefObject<HTMLElement> | undefined;
+    initialFocusRef?: RefObject<HTMLElement> | undefined;
 } & MaxHeightProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.MaxHeight<import("styled-system").TLengthStyledSystem>> & SxProp & HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -1250,10 +1250,12 @@ var Grid$1 = Object.assign(Grid, {
 const StyledIcon = /*#__PURE__*/React.forwardRef(({
   icon: Icon,
   sx,
+  className,
   ...props
 }, ref) => /*#__PURE__*/jsxRuntime.jsx(View, {
   ref: ref,
   ...props,
+  className: `trk-styled_icon__wrapper ${className}`,
   color: props.color,
   sx: {
     '& svg': {
@@ -1876,6 +1878,7 @@ const Overlay = ({
   size = 'm',
   ignoreOutsideClickRefs = [],
   dismissFocusRef,
+  initialFocusRef,
   maxHeight = utils.forcePixelValue(600),
   ...props
 }, ref) => {
@@ -1903,6 +1906,10 @@ const Overlay = ({
     }
   }, [handleDismiss]);
   React.useEffect(() => {
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus();
+      return;
+    }
     if (overlayRef.current) {
       const firstItem = utils$1.iterateFocusableElements(overlayRef.current).next().value;
       firstItem?.focus();
@@ -6880,11 +6887,12 @@ const FileItem = ({
   loading,
   validationStatus,
   trailingAction,
+  renderFileIcon = () => icons.DocumentIcon,
   ...props
 }) => {
   const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
   const fileName = 'name' in file ? file.name : '';
-  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : icons.DocumentIcon;
+  const FileIcon = fileType === 'image' ? icons.PictureIcon : fileType === 'video' ? icons.VideoIcon : renderFileIcon(fileType, file);
   const [objectUrl, setObjectUrl] = React.useState('');
   React.useEffect(() => {
     const url = URL.createObjectURL(file);
@@ -6896,7 +6904,6 @@ const FileItem = ({
   return /*#__PURE__*/jsxRuntime.jsx(BaseFile, {
     variant: variant,
     disabled: disabled,
-    loading: disabled,
     validationStatus: validationStatus,
     trailingAction: trailingAction,
     ...props,
@@ -6923,7 +6930,7 @@ const FileItem = ({
         }), /*#__PURE__*/jsxRuntime.jsx(icons.VideoIcon, {})]
       }) : /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: 'file__thumbnail__whatever',
-        children: [/*#__PURE__*/jsxRuntime.jsx(icons.DocumentIcon, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: [/*#__PURE__*/jsxRuntime.jsx(FileIcon, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
           title: fileName,
           children: fileName
         })]

package/esm/core/FileItem/index.js

@@ -1,4 +1,4 @@
-import { ExclamationPointInCircleIcon, VideoIcon, DocumentIcon, PictureIcon } from '@teamturing/icons';
+import { PictureIcon, VideoIcon, ExclamationPointInCircleIcon, DocumentIcon } from '@teamturing/icons';
 import { forcePixelValue } from '@teamturing/utils';
 import { useState, useEffect } from 'react';
 import styled from 'styled-components';
@@ -16,11 +16,12 @@ const FileItem = ({
   loading,
   validationStatus,
   trailingAction,
+  renderFileIcon = () => DocumentIcon,
   ...props
 }) => {
   const fileType = file.type.match('image/*') ? 'image' : file.type.match('video/*') ? 'video' : 'whatever';
   const fileName = 'name' in file ? file.name : '';
-  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : DocumentIcon;
+  const FileIcon = fileType === 'image' ? PictureIcon : fileType === 'video' ? VideoIcon : renderFileIcon(fileType, file);
   const [objectUrl, setObjectUrl] = useState('');
   useEffect(() => {
     const url = URL.createObjectURL(file);
@@ -32,7 +33,6 @@ const FileItem = ({
   return /*#__PURE__*/jsx(BaseFile, {
     variant: variant,
     disabled: disabled,
-    loading: disabled,
     validationStatus: validationStatus,
     trailingAction: trailingAction,
     ...props,
@@ -59,7 +59,7 @@ const FileItem = ({
         }), /*#__PURE__*/jsx(VideoIcon, {})]
       }) : /*#__PURE__*/jsxs("div", {
         className: 'file__thumbnail__whatever',
-        children: [/*#__PURE__*/jsx(DocumentIcon, {}), /*#__PURE__*/jsx("span", {
+        children: [/*#__PURE__*/jsx(FileIcon, {}), /*#__PURE__*/jsx("span", {
           title: fileName,
           children: fileName
         })]

package/esm/core/Overlay/index.js

@@ -14,6 +14,7 @@ const Overlay = ({
   size = 'm',
   ignoreOutsideClickRefs = [],
   dismissFocusRef,
+  initialFocusRef,
   maxHeight = forcePixelValue(600),
   ...props
 }, ref) => {
@@ -41,6 +42,10 @@ const Overlay = ({
     }
   }, [handleDismiss]);
   useEffect(() => {
+    if (initialFocusRef && initialFocusRef.current) {
+      initialFocusRef.current.focus();
+      return;
+    }
     if (overlayRef.current) {
       const firstItem = iterateFocusableElements(overlayRef.current).next().value;
       firstItem?.focus();

package/esm/core/StyledIcon/index.js

@@ -5,10 +5,12 @@ import { jsx } from 'react/jsx-runtime';
 const StyledIcon = /*#__PURE__*/forwardRef(({
   icon: Icon,
   sx,
+  className,
   ...props
 }, ref) => /*#__PURE__*/jsx(View, {
   ref: ref,
   ...props,
+  className: `trk-styled_icon__wrapper ${className}`,
   color: props.color,
   sx: {
     '& svg': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamturing/react-kit",
-  "version": "2.58.3",
+  "version": "2.58.4",
   "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",
@@ -55,7 +55,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "@primer/behaviors": "^1.3.6",
-    "@teamturing/icons": "^1.62.0",
+    "@teamturing/icons": "^1.63.0",
     "@teamturing/token-studio": "^1.16.3",
     "@teamturing/utils": "^1.5.1",
     "framer-motion": "^10.16.4",
@@ -66,5 +66,5 @@
     "react-textarea-autosize": "^8.5.3",
     "styled-system": "^5.1.5"
   },
-  "gitHead": "bd19fd9b373da3c0e0f5fcd3e2ed665fa361c67f"
+  "gitHead": "4f4dcceba45b60eb183e5f9200b354e484f32879"
 }