chore(select): move ChangeHistory to Dropdown

packages/ui-components/Common/ChangeHistory/index.module.css → packages/ui-components/Common/StatelessSelect/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/StatelessSelect/index.stories.tsx

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

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

@@ -0,0 +1,62 @@
+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 StatelessSelectProps = ComponentProps<'div'> & {
+  label: string;
+  values: Array<HTMLProps<HTMLAnchorElement | HTMLDivElement>>;
+  as?: LinkLike;
+};
+
+const StatelessSelect: FC<PropsWithChildren<StatelessSelectProps>> = ({
+  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}
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  tabIndex={0}
+                  {...(value as ComponentProps<LinkLike>)}
+                />
+              );
+            } else {
+              return (
+                <div
+                  key={index}
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  tabIndex={0}
+                  {...(value as HTMLProps<HTMLDivElement>)}
+                />
+              );
+            }
+          })}
+        </div>
+      </div>
+    </details>
+  </div>
+);
+
+export default StatelessSelect;