feat: introduce StatelessSelect

[canerakdas]

Description

For users visiting the site with JavaScript disabled, navigating through pages and downloading the desired version should remain one of the website’s core capabilities.

To support this, I’ve implemented a fallback version of our current select component using native HTML <details> and <summary> elements. While this version is less accessible than the JavaScript-enhanced version, it remains functional without relying on JavaScript

Validation

In the preview, with JavaScript disabled on mobile viewports:

• The navigation select on the Learn pages should correctly redirect to the appropriate pages.

• Similarly, the version select on the Download page should be properly rendered, but should not perform any redirection.

Related Issues

Unblock #7794

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jul 13, 2025 4:17pm

[Copilot]

Pull Request Overview

Introduce a noscript-compatible fallback for the existing Select component so that users without JavaScript can still choose navigation or version options via native HTML.

• Added a new StatelessSelect component wrapping <details>/<summary> for non-JS environments
• Updated the main Select to render StatelessSelect under <noscript> and generated a dynamic class hook
• Extended Sidebar and CSS modules to support the fallback markup and styling

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/ui-components/src/Containers/Sidebar/index.tsx	Forwarded the new as prop into the mobile Select invocation
packages/ui-components/src/Common/Select/index.tsx	Exported helpers, added an as prop, generated a unique class, and integrated StatelessSelect
packages/ui-components/src/Common/Select/index.module.css	Added .noscript styles and nested rules for the fallback UI
packages/ui-components/src/Common/Select/StatelessSelect/index.tsx	New component implementing a native <details>/<summary> fallback

Comments suppressed due to low confidence (3)

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

• This new StatelessSelect component does not appear to have any unit tests. Consider adding tests to cover its rendering and behavior (e.g., mapping values, default selection, and correct markup in a <noscript> environment).

import { ChevronDownIcon } from '@heroicons/react/24/solid';

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

• The as prop is being passed to the Select component but isn’t being destructured from props in this component. You should include as in the function’s parameters (e.g., ({ as, ... })) so it’s defined.

          as={as}

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

• This always passes an href attribute to Component, even if as is 'div'. Rendering a href on a <div> is invalid HTML and can cause React warnings. Consider conditionally adding href only when Component supports it or restrict as to anchor-like elements.

                    <Component

[codecov]

Codecov Report

Attention: Patch coverage is 64.70588% with 6 lines in your changes missing coverage. Please review.

Project coverage is 73.01%. Comparing base (cc36077) to head (8372085).
Report is 1 commits behind head on main.

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
packages/ui-components/src/Common/Select/index.tsx	40.00%	6 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7976      +/-   ##
==========================================
- Coverage   73.07%   73.01%   -0.07%     
==========================================
  Files          95       96       +1     
  Lines        8358     8359       +1     
  Branches      218      218              
==========================================
- Hits         6108     6103       -5     
- Misses       2249     2255       +6     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[AugustinMauroy]

is it possible to have a story for statelessSelect ?

[ovflowd]

is it possible to have a story for statelessSelect ?

No, or at least not on its current code, that's why IMO the <noscript><syle> coode should be on a withNoScriptSelect

[avivkeller]

LGTM, under the conditions that a story is added.

[AugustinMauroy]

LGMT ! that's clean