feat: introduce StatelessSelect (#7976)

* feat: introduce StatelessSelect

* refactor: review updates

* chore: review updates

* fix: use conditional rendering for select value display

Author: canerakdas

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Select from '@node-core/ui-components/Common/Select';
+import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext } from 'react';
@@ -51,7 +51,7 @@ const VersionDropdown: FC = () => {
   };
 
   return (
-    <Select
+    <WithNoScriptSelect
       ariaLabel={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,

packages/ui-components/src/Common/Select/NoScriptSelect/index.tsx

@@ -0,0 +1,25 @@
+import { useId } from 'react';
+
+import Select from '#ui/Common/Select';
+import type { StatelessSelectProps } from '#ui/Common/Select/StatelessSelect';
+import StatelessSelect from '#ui/Common/Select/StatelessSelect';
+
+const WithNoScriptSelect = <T extends string>({
+  as,
+  ...props
+}: StatelessSelectProps<T>) => {
+  const id = useId();
+  const selectId = `select-${id.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  return (
+    <>
+      <Select {...props} fallbackClass={selectId} />
+      <noscript>
+        <style>{`.${selectId} { display: none!important; }`}</style>
+        <StatelessSelect {...props} as={as} />
+      </noscript>
+    </>
+  );
+};
+
+export default WithNoScriptSelect;

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

@@ -0,0 +1,128 @@
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import { useId, useMemo } from 'react';
+
+import type { SelectGroup, SelectProps } from '#ui/Common/Select';
+import type { LinkLike } from '#ui/types';
+import { isStringArray, isValuesArray } from '#ui/util/array';
+
+import styles from '../index.module.css';
+
+type StatelessSelectConfig = {
+  as?: LinkLike | 'div';
+};
+
+export type StatelessSelectProps<T extends string> = SelectProps<T> &
+  StatelessSelectConfig;
+
+const StatelessSelect = <T extends string>({
+  values = [],
+  defaultValue,
+  placeholder,
+  label,
+  inline,
+  className,
+  ariaLabel,
+  disabled = false,
+  as: Component = 'div',
+}: StatelessSelectProps<T>) => {
+  const id = useId();
+
+  const mappedValues = useMemo(() => {
+    let mappedValues = values;
+
+    if (isStringArray(mappedValues)) {
+      mappedValues = mappedValues.map(value => ({
+        label: value,
+        value: value,
+      }));
+    }
+
+    if (isValuesArray(mappedValues)) {
+      return [{ items: mappedValues }];
+    }
+
+    return mappedValues as Array<SelectGroup<T>>;
+  }, [values]) as Array<SelectGroup<T>>;
+
+  // Find the current/default item to display in summary
+  const currentItem = useMemo(
+    () =>
+      mappedValues
+        .flatMap(({ items }) => items)
+        .find(item => item.value === defaultValue),
+    [mappedValues, defaultValue]
+  );
+
+  return (
+    <div
+      className={classNames(
+        styles.select,
+        styles.noscript,
+        { [styles.inline]: inline },
+        className
+      )}
+    >
+      {label && (
+        <label className={styles.label} htmlFor={id}>
+          {label}
+        </label>
+      )}
+
+      <details className={styles.trigger} id={id}>
+        <summary
+          className={styles.summary}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+        >
+          {currentItem && (
+            <span className={styles.selectedValue}>
+              {currentItem.iconImage}
+              <span>{currentItem.label}</span>
+            </span>
+          )}
+          {!currentItem && (
+            <span className={styles.placeholder}>{placeholder}</span>
+          )}
+          <ChevronDownIcon className={styles.icon} />
+        </summary>
+
+        <div
+          className={classNames(styles.dropdown, { [styles.inline]: inline })}
+        >
+          {mappedValues.map(({ label: groupLabel, items }, groupKey) => (
+            <div
+              key={groupLabel?.toString() ?? groupKey}
+              className={styles.group}
+            >
+              {groupLabel && (
+                <div className={classNames(styles.item, styles.label)}>
+                  {groupLabel}
+                </div>
+              )}
+
+              {items.map(
+                ({ value, label, iconImage, disabled: itemDisabled }) => (
+                  <Component
+                    key={value}
+                    href={value}
+                    className={classNames(styles.item, styles.text, {
+                      [styles.disabled]: itemDisabled || disabled,
+                      [styles.selected]: value === defaultValue,
+                    })}
+                    aria-disabled={itemDisabled || disabled}
+                  >
+                    {iconImage}
+                    <span>{label}</span>
+                  </Component>
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      </details>
+    </div>
+  );
+};
+
+export default StatelessSelect;

packages/ui-components/src/Common/Select/index.module.css

@@ -159,3 +159,46 @@
     text-neutral-700
     dark:text-neutral-200;
 }
+
+.noscript {
+  @apply relative;
+
+  summary {
+    @apply flex
+      w-full
+      justify-between;
+  }
+
+  .trigger {
+    @apply block;
+  }
+
+  .dropdown {
+    @apply absolute
+      left-0
+      mt-4;
+  }
+
+  .text {
+    @apply hover:outline-hidden
+      block
+      whitespace-normal
+      pl-4
+      text-neutral-800
+      hover:bg-green-500
+      hover:text-white
+      dark:text-neutral-200
+      dark:hover:bg-green-600
+      dark:hover:text-white;
+
+    span {
+      @apply h-auto;
+    }
+  }
+
+  .inline {
+    .text {
+      @apply pl-2.5;
+    }
+  }
+}

packages/ui-components/src/Common/Select/index.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Select from '#ui/Common/Select';
+import StatelessSelect from '#ui/Common/Select/StatelessSelect';
 import * as OSIcons from '#ui/Icons/OperatingSystem';
 
 type Story = StoryObj<typeof Select>;
@@ -108,4 +109,13 @@ export const InlineSelect: Story = {
   },
 };
 
+export const WithNoScriptSelect: Story = {
+  render: () => (
+    <StatelessSelect
+      values={Array.from({ length: 100 }, (_, i) => `Item ${i}`)}
+      defaultValue="Item 50"
+    />
+  ),
+};
+
 export default { component: Select } as Meta;

packages/ui-components/src/Common/Select/index.tsx

@@ -7,7 +7,8 @@ import { useEffect, useId, useMemo, useState } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 
 import Skeleton from '#ui/Common/Skeleton';
-import type { FormattedMessage } from '#ui/types';
+import type { FormattedMessage, LinkLike } from '#ui/types';
+import { isStringArray, isValuesArray } from '#ui/util/array';
 
 import styles from './index.module.css';
 
@@ -23,15 +24,7 @@ export type SelectGroup<T extends string> = {
   items: Array<SelectValue<T>>;
 };
 
-const isStringArray = (values: Array<unknown>): values is Array<string> =>
-  Boolean(values[0] && typeof values[0] === 'string');
-
-const isValuesArray = <T extends string>(
-  values: Array<unknown>
-): values is Array<SelectValue<T>> =>
-  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
-
-type SelectProps<T extends string> = {
+export type SelectProps<T extends string> = {
   values: Array<SelectGroup<T>> | Array<T> | Array<SelectValue<T>>;
   defaultValue?: T;
   placeholder?: string;
@@ -48,6 +41,8 @@ type SelectProps<T extends string> = {
   ariaLabel?: string;
   loading?: boolean;
   disabled?: boolean;
+  fallbackClass?: string;
+  as?: LinkLike | 'div';
 };
 
 const Select = <T extends string>({
@@ -62,6 +57,7 @@ const Select = <T extends string>({
   ariaLabel,
   loading = false,
   disabled = false,
+  fallbackClass = '',
 }: SelectProps<T>): ReactNode => {
   const id = useId();
   const [value, setValue] = useState(defaultValue);
@@ -82,8 +78,8 @@ const Select = <T extends string>({
       return [{ items: mappedValues }];
     }
 
-    return mappedValues as Array<SelectGroup<T>>;
-  }, [values]);
+    return mappedValues;
+  }, [values]) as Array<SelectGroup<T>>;
 
   // We render the actual item slotted to fix/prevent the issue
   // of the tirgger flashing on the initial render
@@ -140,7 +136,8 @@ const Select = <T extends string>({
         className={classNames(
           styles.select,
           { [styles.inline]: inline },
-          className
+          className,
+          fallbackClass
         )}
       >
         {label && (

packages/ui-components/src/Containers/Sidebar/index.module.css

@@ -5,12 +5,12 @@
     w-full
     flex-col
     gap-8
-    overflow-auto
     border-r-0
     border-neutral-200
     bg-white
     px-4
     py-6
+    sm:overflow-auto
     sm:border-r
     md:max-w-xs
     lg:px-6

packages/ui-components/src/Containers/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
-import Select from '#ui/Common/Select';
+import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
 import type { LinkLike } from '#ui/types';
 
@@ -42,13 +42,14 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
       {children}
 
       {selectItems.length > 0 && (
-        <Select
+        <WithNoScriptSelect
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}
           placeholder={placeholder}
           onChange={onSelect}
           className={styles.mobileSelect}
+          as={as}
         />
       )}
 

packages/ui-components/src/util/array.ts

@@ -0,0 +1,7 @@
+export const isStringArray = (
+  values: Array<unknown>
+): values is Array<string> =>
+  Boolean(values[0] && typeof values[0] === 'string');
+
+export const isValuesArray = <T>(values: Array<unknown>): values is Array<T> =>
+  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);