chore(select): move ChangeHistory to Dropdown

apps/site/components/withNavBar.tsx

@@ -70,7 +70,7 @@ const WithNavBar: FC = () => {
           onChange={changeLanguage}
           availableLanguages={availableLocales}
           currentLanguage={locale}
-          ariaLabel={t('components.common.languageDropdown.label')}
+          aria-label={t('components.common.languageDropdown.label')}
         />
 
         <Link

apps/site/next.config.mjs

@@ -81,7 +81,6 @@ const nextConfig = {
     // @see https://vercel.com/blog/how-we-optimized-package-imports-in-next-js
     optimizePackageImports: [
       '@radix-ui/react-accessible-icon',
-      '@radix-ui/react-dropdown-menu',
       '@radix-ui/react-label',
       '@radix-ui/react-select',
       '@radix-ui/react-slot',

apps/site/tests/e2e/general-behavior.spec.ts

@@ -12,7 +12,6 @@ const locators = {
     englishLocale.components.containers.navBar.controls.toggle,
   navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`,
   // Global UI controls
-  languageDropdownName: englishLocale.components.common.languageDropdown.label,
   themeToggleName: englishLocale.components.common.themeToggle.label,
 
   // Search components (from Orama library)
@@ -24,17 +23,6 @@ const locators = {
 const getTheme = (page: Page) =>
   page.evaluate(() => document.documentElement.dataset.theme);
 
-const openLanguageMenu = async (page: Page) => {
-  const button = page.getByRole('button', {
-    name: locators.languageDropdownName,
-  });
-  const selector = `[aria-labelledby=${await button.getAttribute('id')}]`;
-  await button.click();
-
-  await page.waitForSelector(selector);
-  return page.locator(selector);
-};
-
 const verifyTranslation = async (page: Page, locale: Locale | string) => {
   // Load locale data if string code provided (e.g., 'es', 'fr')
   const localeData =
@@ -105,11 +93,7 @@ test.describe('Node.js Website', () => {
     }) => {
       await verifyTranslation(page, englishLocale);
 
-      // Change to Spanish and verify translations
-      const menu = await openLanguageMenu(page);
-      await menu.getByText(/español/i).click();
-      await page.waitForURL(/\/es$/);
-
+      await page.goto('/es');
       await verifyTranslation(page, 'es');
     });
   });

packages/ui-components/Common/ChangeHistory/index.module.css → packages/ui-components/Common/Dropdown/index.module.css

@@ -67,17 +67,3 @@
       text-white;
   }
 }
-
-.dropdownLabel {
-  @apply block
-    text-sm
-    font-medium
-    leading-tight;
-}
-
-.dropdownVersions {
-  @apply block
-    text-xs
-    leading-tight
-    opacity-75;
-}

packages/ui-components/Common/Dropdown/index.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Dropdown from '.';
+
+type Story = StoryObj<typeof Dropdown>;
+type Meta = MetaObj<typeof Dropdown>;
+
+// Basic example with default anchor links
+export const Default: Story = {
+  args: {
+    values: [
+      { href: '#item1', children: 'Item 1' },
+      { href: '#item2', children: 'Item 2' },
+      { href: '#item3', children: 'Item 3' },
+    ],
+    children: <span>Select Option</span>,
+  },
+};
+
+export default {
+  component: Dropdown,
+  decorators: [
+    Story => (
+      <div className="flex h-screen items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta;

packages/ui-components/Common/Dropdown/index.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import type { FC, ComponentProps, PropsWithChildren, HTMLProps } from 'react';
+
+import type { LinkLike } from '#ui/types.js';
+
+import styles from './index.module.css';
+
+type DropdownProps = ComponentProps<'div'> & {
+  values: Array<HTMLProps<HTMLAnchorElement | HTMLDivElement>>;
+  as?: LinkLike;
+};
+
+const Dropdown: FC<PropsWithChildren<DropdownProps>> = ({
+  values = [],
+  className,
+  as: As = 'a',
+  'aria-label': ariaLabel,
+  children,
+  ...props
+}) => (
+  <div className={classNames('relative', 'inline-block', className)} {...props}>
+    <details className="group">
+      <summary className={styles.summary} role="button" aria-haspopup="menu">
+        {children}
+      </summary>
+      <div
+        className={styles.dropdownContentWrapper}
+        role="menu"
+        aria-label={ariaLabel}
+      >
+        <div className={styles.dropdownContentInner}>
+          {values.map((value, index) => {
+            if (value.href) {
+              return (
+                <As
+                  key={index}
+                  role="menuitem"
+                  tabIndex={0}
+                  {...(value as ComponentProps<LinkLike>)}
+                  className={classNames(styles.dropdownItem, value.className)}
+                />
+              );
+            } else {
+              return (
+                <div
+                  key={index}
+                  role="menuitem"
+                  tabIndex={0}
+                  {...(value as HTMLProps<HTMLDivElement>)}
+                  className={classNames(styles.dropdownItem, value.className)}
+                />
+              );
+            }
+          })}
+        </div>
+      </div>
+    </details>
+  </div>
+);
+
+export default Dropdown;