feat(UI): migrate DropdownMenu component

packages/renderer/src/lib/compose/ComposeActions.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 import { faArrowsRotate, faFileCode, faPlay, faRocket, faStop, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { DropdownMenu } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
 import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
 
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import type { ComposeInfoUI } from './ComposeInfoUI';

packages/renderer/src/lib/container/ContainerActions.svelte

@@ -11,6 +11,7 @@ import {
   faTerminal,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
+import { DropdownMenu } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -19,7 +20,6 @@ import { exportContainerInfo } from '/@/stores/export-container-store';
 
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import { ContainerGroupInfoTypeUI, type ContainerInfoUI } from './ContainerInfoUI';

packages/renderer/src/lib/image/ActionsMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-import DropdownMenu from '../ui/DropdownMenu.svelte';
+import { DropdownMenu } from '@podman-desktop/ui-svelte';
+
 import FlatMenu from '../ui/FlatMenu.svelte';
 
 export let dropdownMenu = false;

packages/renderer/src/lib/pod/PodActions.svelte

@@ -8,6 +8,7 @@ import {
   faStop,
   faTrash,
 } from '@fortawesome/free-solid-svg-icons';
+import { DropdownMenu } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount } from 'svelte';
 import { router } from 'tinro';
 
@@ -16,7 +17,6 @@ import ContributionActions from '/@/lib/actions/ContributionActions.svelte';
 import type { Menu } from '../../../../main/src/plugin/menu-registry';
 import { MenuContext } from '../../../../main/src/plugin/menu-registry';
 import { ContainerUtils } from '../container/container-utils';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
 import FlatMenu from '../ui/FlatMenu.svelte';
 import ListItemButtonIcon from '../ui/ListItemButtonIcon.svelte';
 import type { PodInfoUI } from './PodInfoUI';

packages/renderer/src/lib/preferences/PreferencesAuthenticationProvidersRendering.svelte

@@ -5,15 +5,13 @@ import {
   faRightFromBracket,
   faRightToBracket,
 } from '@fortawesome/free-solid-svg-icons';
-import { Button, EmptyScreen, Tooltip } from '@podman-desktop/ui-svelte';
+import { Button, DropdownMenu, EmptyScreen, Tooltip } from '@podman-desktop/ui-svelte';
 import Fa from 'svelte-fa';
 
 import EmbeddableCatalogExtensionList from '/@/lib/extensions/EmbeddableCatalogExtensionList.svelte';
 
 import { authenticationProviders } from '../../stores/authenticationProviders';
 import KeyIcon from '../images/KeyIcon.svelte';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
-import DropdownMenuItem from '../ui/DropDownMenuItem.svelte';
 import SettingsPage from './SettingsPage.svelte';
 </script>
 
@@ -151,7 +149,7 @@ import SettingsPage from './SettingsPage.svelte';
               <!-- Authentication Provider Auth Requests DropDown start -->
               <DropdownMenu>
                 {#each sessionRequests as request}
-                  <DropdownMenuItem
+                  <DropdownMenu.Item
                     title="Sign in to use {request.extensionLabel}"
                     onClick="{() => window.requestAuthenticationProviderSignIn(request.id)}"
                     icon="{faArrowRightToBracket}" />

packages/renderer/src/lib/preferences/PreferencesRegistriesEditing.svelte

@@ -1,14 +1,12 @@
 <script lang="ts">
 import { faPlusCircle, faTrash, faUser, faUserPen } from '@fortawesome/free-solid-svg-icons';
 import type * as containerDesktopAPI from '@podman-desktop/api';
-import { Button, Input } from '@podman-desktop/ui-svelte';
+import { Button, DropdownMenu, Input } from '@podman-desktop/ui-svelte';
 import { onMount } from 'svelte';
 
 import PasswordInput from '/@/lib/ui/PasswordInput.svelte';
 
 import { registriesInfos, registriesSuggestedInfos } from '../../stores/registries';
-import DropdownMenu from '../ui/DropdownMenu.svelte';
-import DropdownMenuItem from '../ui/DropDownMenuItem.svelte';
 import SettingsPage from './SettingsPage.svelte';
 
 // contains the original instances of registries when user clicks on `Edit password` menu item
@@ -350,17 +348,17 @@ function removeExistingRegistry(registry: containerDesktopAPI.Registry) {
                 <!-- Show/hide password end -->
                 <!-- containerDesktopAPI.Registry menu start -->
                 <DropdownMenu>
-                  <DropdownMenuItem
+                  <DropdownMenu.Item
                     title="Login"
                     onClick="{() => markRegistryAsModified(registry)}"
                     hidden="{!!registry.username && !!registry.secret}"
                     icon="{faUser}" />
-                  <DropdownMenuItem
+                  <DropdownMenu.Item
                     title="Edit password"
                     onClick="{() => markRegistryAsModified(registry)}"
                     hidden="{!registry.username && !registry.secret}"
                     icon="{faUserPen}" />
-                  <DropdownMenuItem
+                  <DropdownMenu.Item
                     title="Remove"
                     onClick="{() => removeExistingRegistry(registry)}"
                     icon="{faTrash}" />

packages/renderer/src/lib/ui/ListItemButtonIcon.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
-import { isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
+import { DropdownMenu, isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount } from 'svelte';
 import type { Unsubscriber } from 'svelte/motion';
 import Fa from 'svelte-fa';
@@ -9,7 +9,6 @@ import { context as storeContext } from '/@/stores/context';
 
 import type { ContextUI } from '../context/context';
 import { ContextKeyExpr } from '../context/contextKey';
-import DropdownMenuItem from './DropDownMenuItem.svelte';
 
 export let title: string;
 export let icon: IconDefinition | string;
@@ -116,7 +115,7 @@ $: styleClass = detailed
 <!-- If menu = true, use the menu, otherwise implement the button -->
 {#if menu}
   <!-- enabled menu -->
-  <DropdownMenuItem
+  <DropdownMenu.Item
     title="{title}"
     tooltip="{tooltip}"
     icon="{icon}"

packages/ui/package.json

@@ -56,6 +56,10 @@
       "types": "./dist/alert/ErrorMessage.svelte.d.ts",
       "svelte": "./dist/alert/ErrorMessage.svelte"
     },
+    "./DropdownMenu": {
+      "types": "./dist/dropdownMenu/index.d.ts",
+      "svelte": "./dist/dropdownMenu/index.js"
+    },
     "./icons": {
       "types": "./dist/icons/index.d.ts",
       "svelte": "./dist/icons/index.js"

packages/renderer/src/lib/ui/DropdownMenu.svelte → packages/ui/src/lib/dropdownMenu/DropdownMenu.svelte

@@ -5,7 +5,7 @@ import Fa from 'svelte-fa';
 
 import DropDownMenuItems from './DropDownMenuItems.svelte';
 
-export let onBeforeToggle = () => {};
+export let onBeforeToggle = (): void => {};
 export let icon: IconDefinition = faEllipsisVertical;
 export let shownAsMenuActionItem = false;
 export let hidden = false;
@@ -18,23 +18,30 @@ let showMenu = false;
 let outsideWindow: HTMLButtonElement;
 
 // If we hit ESC while the menu is open, close it
-function handleEscape({ key }: any) {
+function handleEscape({ key }: KeyboardEvent): void {
   if (key === 'Escape') {
     showMenu = false;
   }
 }
 
 let clientY: number;
 
-function toggleMenu() {
+function toggleMenu(): void {
   onBeforeToggle();
   showMenu = !showMenu;
 }
 
 // If we click outside the menu, close the menu
-function onWindowClick(e: any) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onWindowClick(e: any): void {
   if (!hidden) showMenu = outsideWindow.contains(e.target);
 }
+
+function onButtonClick(e: MouseEvent): void {
+  // keep track of the cursor position
+  clientY = e.clientY;
+  toggleMenu();
+}
 </script>
 
 <!-- Required in order for Svelte to track all key presses and if you pressed "ESC" -->
@@ -46,11 +53,7 @@ function onWindowClick(e: any) {
     <!-- Button for the dropdown menu -->
     <button
       aria-label="{title.length > 0 ? title : 'kebab menu'}"
-      on:click="{e => {
-        // keep track of the cursor position
-        clientY = e.clientY;
-        toggleMenu();
-      }}"
+      on:click="{onButtonClick}"
       title="{title}"
       bind:this="{outsideWindow}"
       class="text-gray-400 {shownAsMenuActionItem

packages/ui/src/lib/dropdownMenu/index.ts

@@ -0,0 +1,23 @@
+/**********************************************************************
+ * Copyright (C) 2024 Red Hat, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ***********************************************************************/
+import DropdownMenu from './DropdownMenu.svelte';
+import DropDownMenuItem from './DropDownMenuItem.svelte';
+
+export default Object.assign(DropdownMenu, {
+  Item: DropDownMenuItem,
+});

packages/ui/src/lib/index.ts

@@ -19,6 +19,7 @@ import ErrorMessage from './alert/ErrorMessage.svelte';
 import type { ButtonType } from './button/Button';
 import Button from './button/Button.svelte';
 import Checkbox from './checkbox/Checkbox.svelte';
+import DropdownMenu from './dropdownMenu';
 import Input from './inputs/Input.svelte';
 import SearchInput from './inputs/SearchInput.svelte';
 import NavPage from './layouts/NavPage.svelte';
@@ -40,6 +41,7 @@ export type { ButtonType };
 export {
   Button,
   Checkbox,
+  DropdownMenu,
   EmptyScreen,
   ErrorMessage,
   FilteredEmptyScreen,