Merge pull request #319 from dd3tech/fix/file-item-export

Fix: file item export

Author: Misael840

exports.json

@@ -155,7 +155,7 @@
     "./FileItem": {
       "require": "./dist/cjs/components/Form/File/FileItem.js",
       "module": "./dist/esm/components/Form/File/FileItem.js",
-      "default": "./dist/esm/components/Form/File/FileList.js"
+      "default": "./dist/esm/components/Form/File/FileItem.js"
     },
     "./FileImageItem": {
       "require": "./dist/cjs/components/Form/File/FileImageItem.js",

package.json

@@ -291,7 +291,7 @@
         "./FileItem": {
             "require": "./dist/cjs/components/Form/File/FileItem.js",
             "module": "./dist/esm/components/Form/File/FileItem.js",
-            "default": "./dist/esm/components/Form/File/FileList.js"
+            "default": "./dist/esm/components/Form/File/FileItem.js"
         },
         "./FileImageItem": {
             "require": "./dist/cjs/components/Form/File/FileImageItem.js",

src/components/Form/File/FileItem.test.tsx

@@ -14,12 +14,6 @@ describe('<FileItem>', () => {
     expect(getByRole('file-item')).toBeDefined()
   })
 
-  it('displays file size when provided', () => {
-    const { getByRole } = render(<FileItem {...defaultProps} />)
-
-    expect(getByRole('file-size')).toBeDefined()
-  })
-
   it('renders children components', () => {
     const { getByTestId } = render(
       <FileItem {...defaultProps}>

src/components/Form/File/FileItem.tsx

@@ -1,8 +1,8 @@
 import { CSSProperties, ReactNode } from 'react'
 import { composeClasses } from 'lib/classes'
 import { Flex } from 'components/Layout'
-import ToolTipHover from 'components/ToolTipHover'
 import Text from 'components/Typography'
+import Tooltip from 'components/Tooltip'
 import FileItemButton from './FileItemButton'
 import FileItemDropdown from './FileItemDropdown'
 
@@ -54,22 +54,32 @@ export const FileItem = ({
       }}
     >
       <Flex alignItems="center" gap="2" className="mr-auto overflow-hidden">
-        <ToolTipHover
-          variantPopup="dark"
-          complementPosition={{ top: -15, left: 0 }}
-          element={
-            <Flex alignItems="center" justifyContent="start">
-              <div className="truncate">
-                <Text role="file-title" size="xs">
-                  {name}
-                </Text>
-              </div>
-              {fileSize && (
-                <Text role="file-size" className="mt-0.5 ml-0.5" size="xs">
-                  {fileSize} KB
+        <Tooltip
+          variant="primary"
+          content={
+            <>
+              <Flex alignItems="center" justifyContent="start">
+                <div className="truncate">
+                  <Text role="file-title" size="xs">
+                    {name}
+                  </Text>
+                </div>
+                {fileSize && (
+                  <Text role="file-size" className="mt-0.5 ml-0.5" size="xs">
+                    {fileSize} KB
+                  </Text>
+                )}
+              </Flex>
+              {type && (
+                <Text
+                  role="file-type"
+                  variant="small"
+                  className="block text-left"
+                >
+                  {type}
                 </Text>
               )}
-            </Flex>
+            </>
           }
         >
           <Text
@@ -79,10 +89,7 @@ export const FileItem = ({
           >
             {name}
           </Text>
-          <Text role="file-type" variant="small" className="block text-left">
-            {type}
-          </Text>
-        </ToolTipHover>
+        </Tooltip>
       </Flex>
       <div
         role="file-actions"

src/components/Form/File/FileItemButton.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react'
 import { composeClasses } from 'lib/classes'
 import { Button, IButtonProps } from 'components/Buttons'
 
-export interface FileItemButtonProps {
+export interface FileItemButtonProps extends Omit<IButtonProps, 'children'> {
   /**
    * Content to display inside the button
    */

src/stories/InputFile.stories.tsx

@@ -12,7 +12,6 @@ type Story = StoryObj<typeof InputFile>
 
 export const Default: Story = {
   args: {
-    hintText: 'Subir en formato XML - PDF',
     progressIndicator: 0,
     dragMessage: 'Suelta aquí',
     id: 'upload',