@cryptotaxi247 / documentation-1 / commits / ec0e49c

fix(docs): update VariantItem link implementation and separate CLI version docs Closes npm/cli#8414 (#1659)

<!-- What / Why --> <!-- Describe the request in detail. What it does and why it's being changed. --> ## Description This PR addresses [npm/cli#8414](https://github.com/npm/cli/issues/8414), which reports that switching versions using the CLI version dropdown does not properly update the displayed documentation. ### Changes - **Refactored `VariantItem` component**: These changes ensure that when users switch CLI versions from the dropdown, the documentation updates correctly to display the appropriate content for each version. --- ## Updated https://github.com/user-attachments/assets/8668e308-ac8d-4f09-b6f4-0ddafa67d317 ## References <!-- Examples: Related to #0 Depends on #0 Blocked by #0 Fixes #0 Closes #0 --> Closes npm/cli#8414

Mohit5Upadhyay committed Jul 14, 2025 at 20:07 UTC ec0e49c0e9088b19ea514d31eeb47d0fc918c817
1 file changed +14 -5
src/components/variant-select.js
+14 -5
@@ -14,11 +14,13 @@ const StyledOverlay = styled(ActionMenu.Overlay)`
14 box-shadow: var(--shadow-resting-medium, 0 3px 6px rgba(140, 149, 159, 0.15));
15 `
16
17 -const VariantItem = ({title, shortName, url, active}) => (
18 - <ActionList.Item as={LinkNoUnderline} to={url} state={{scrollUpdate: false}} id={shortName} active={active}>
19 - {title}
20 - </ActionList.Item>
21 -)
17 +const VariantItem = ({title, shortName, url, active}) => {
18 + return (
19 + <ActionList.Item state={{scrollUpdate: false}} id={shortName} active={active}>
20 + <LinkNoUnderline to={url}>{title}</LinkNoUnderline>
21 + </ActionList.Item>
22 + )
23 +}
24
25 const useVariantFocus = () => {
26 const locationChange = useLocationChange()
@@ -37,6 +39,13 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
39 const [open, setOpen] = React.useState(false)
40 const anchorRef = useVariantFocus()
41 const labelId = 'label-versions-list-item'
42 + const locationChange = useLocationChange()
43 +
44 + React.useEffect(() => {
45 + if (locationChange.change && getNav.didVariantChange(locationChange.previous, locationChange.current)) {
46 + setOpen(false)
47 + }
48 + }, [locationChange.change, locationChange.current, locationChange.previous])
49
50 return (
51 <>