Integrate breadcrumbs component from UI

Author: Jona-Internxt

package.json

@@ -9,7 +9,7 @@
     "@internxt/inxt-js": "=1.2.21",
     "@internxt/lib": "^1.2.0",
     "@internxt/sdk": "=1.9.1",
-    "@internxt/ui": "^0.0.12",
+    "@internxt/ui": "^0.0.13",
     "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",

src/app/shared/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,12 +1,12 @@
-import { Menu, Transition } from '@headlessui/react';
 import { CaretDown, Trash, DownloadSimple } from '@phosphor-icons/react';
 import { useTranslationContext } from '../../../../i18n/provider/TranslationProvider';
 import { downloadItemsThunk } from '../../../../store/slices/storage/storage.thunks/downloadItemsThunk';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { uiActions } from '../../../../store/slices/ui';
 import { getAppConfig } from '../../../../core/services/config.service';
-import { BreadcrumbsMenuProps } from '../types';
 import { DriveItemData } from '../../../../drive/types';
+import { BreadcrumbsMenuProps } from '@internxt/ui/dist/components/breadcrumbs/BreadcrumbsItem';
+import { Dropdown } from '@internxt/ui';
 
 const BreadcrumbsMenuBackups = (props: BreadcrumbsMenuProps): JSX.Element => {
   const { translate } = useTranslationContext();
@@ -31,61 +31,34 @@ const BreadcrumbsMenuBackups = (props: BreadcrumbsMenuProps): JSX.Element => {
   };
 
   return (
-    <Menu as="div" className="relative">
-      <Menu.Button
-        className="flex max-w-fit flex-1 cursor-pointer flex-row items-center truncate rounded-md p-1 px-1.5 font-medium text-gray-100 outline-none hover:bg-gray-5  
-        focus-visible:bg-gray-5"
-      >
+    <Dropdown
+      classButton="flex max-w-fit flex-1 cursor-pointer flex-row items-center truncate rounded-md p-1 px-1.5 font-medium text-gray-100 outline-none hover:bg-gray-5 focus-visible:bg-gray-5"
+      classMenuItems={`absolute z-10 mt-1 w-56 rounded-md border border-gray-10 bg-surface text-base shadow-subtle-hard outline-none dark:bg-gray-5 ${
+        isSharedView && 'hidden'
+      }`}
+      openDirection="left"
+      dropdownActionsContext={[
+        {
+          icon: DownloadSimple,
+          name: translate('backups.dropdown.download'),
+          action: onDownloadBackupButtonClicked,
+        },
+        {
+          icon: Trash,
+          name: translate('backups.dropdown.delete'),
+          action: onDeleteBackupButtonClicked,
+        },
+      ]}
+      item={props.item.label}
+      children={
         <div className="flex max-w-fit flex-1 flex-row items-center truncate">
           <span title={props.item.label} className="max-w-sm flex-1 truncate">
             {props.item.label}
           </span>
-          <CaretDown weight="fill" className={`ml-1 h-3 w-3 ${isSharedView && 'hidden'}`} />
+          {!isSharedView && <CaretDown weight="fill" className="ml-1 h-3 w-3" />}
         </div>
-      </Menu.Button>
-      <Transition
-        className={'absolute left-0'}
-        enter="transition origin-top-left duration-100 ease-out"
-        enterFrom="scale-95 opacity-0"
-        enterTo="scale-100 opacity-100"
-        leave="transition origin-top-left duration-100 ease-out"
-        leaveFrom="scale-95 opacity-100"
-        leaveTo="scale-100 opacity-0"
-      >
-        <Menu.Items
-          className={`absolute z-10 mt-1 w-56 rounded-md border border-gray-10 bg-surface py-1.5 text-base shadow-subtle-hard outline-none dark:bg-gray-5 ${
-            isSharedView && 'hidden'
-          }`}
-        >
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                onClick={onDownloadBackupButtonClicked}
-                className={`${
-                  active && 'bg-gray-5'
-                } flex w-full cursor-pointer items-center px-3 py-2 text-gray-80 hover:bg-gray-5 dark:hover:bg-gray-10`}
-              >
-                <DownloadSimple size={20} />
-                <p className="ml-3">{translate('backups.dropdown.download')}</p>
-              </button>
-            )}
-          </Menu.Item>
-          <Menu.Item>
-            {({ active }) => (
-              <button
-                onClick={onDeleteBackupButtonClicked}
-                className={`${
-                  active && 'bg-gray-5'
-                } flex w-full cursor-pointer items-center px-3 py-2 text-gray-80 hover:bg-gray-5 dark:hover:bg-gray-10`}
-              >
-                <Trash size={20} />
-                <p className="ml-3">{translate('backups.dropdown.delete')}</p>
-              </button>
-            )}
-          </Menu.Item>
-        </Menu.Items>
-      </Transition>
-    </Menu>
+      }
+    />
   );
 };
 

src/app/shared/components/Breadcrumbs/BreadcrumbsItem/BreadcrumbsItem.tsx

@@ -15,11 +15,10 @@ import { DriveItemData, DriveItemDetails, FolderPath } from '../../../../drive/t
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { uiActions } from '../../../../store/slices/ui';
 import { getAppConfig } from '../../../../core/services/config.service';
-import { BreadcrumbsMenuProps } from '../types';
 import storageThunks from '../../../../store/slices/storage/storage.thunks';
 import { storageActions } from '../../../../store/slices/storage';
 import shareService from '../../../../share/services/share.service';
-import { Dropdown } from '@internxt/ui';
+import { BreadcrumbsMenuProps, Dropdown } from '@internxt/ui';
 
 const BreadcrumbsMenuDrive = (props: BreadcrumbsMenuProps): JSX.Element => {
   const { onItemClicked } = props;