diff --git a/package.json b/package.json index 2cbd446d7..a97e12020 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "@types/mustache": "^4.1.1", "@types/node": "^22.15.19", "@types/react": "^18.3.10", - "@types/rimraf": "^4.0.5", "@types/tar": "^6.1.13", "adm-zip": "^0.5.16", "autoprefixer": "10.4.21", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f505abe5b..3ae360ca8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -81,9 +81,6 @@ importers: '@types/react': specifier: ^18.3.10 version: 18.3.22 - '@types/rimraf': - specifier: ^4.0.5 - version: 4.0.5 '@types/tar': specifier: ^6.1.13 version: 6.1.13 @@ -851,10 +848,6 @@ packages: resolution: {integrity: sha512-909rVuj3phpjW6y0MCXAZ5iNeORePa6ldJvp2baWGcTjwqbBDDz6xoS5JHJ7lS88NlwLYj07ImL/8IUMtDZzTA==} engines: {node: '>=6.9.0'} - '@babel/runtime@7.27.1': - resolution: {integrity: sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==} - engines: {node: '>=6.9.0'} - '@babel/runtime@7.28.6': resolution: {integrity: sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==} engines: {node: '>=6.9.0'} @@ -2191,10 +2184,6 @@ packages: '@types/retry@0.12.0': resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==} - '@types/rimraf@4.0.5': - resolution: {integrity: sha512-DTCZoIQotB2SUJnYgrEx43cQIUYOlNZz0AZPbKU4PSLYTUdML5Gox0++z4F9kQocxStrCmRNhi4x5x/UlwtKUA==} - deprecated: This is a stub types definition. rimraf provides its own type definitions, so you do not need this installed. - '@types/sax@1.2.7': resolution: {integrity: sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==} @@ -7122,8 +7111,6 @@ snapshots: dependencies: core-js-pure: 3.42.0 - '@babel/runtime@7.27.1': {} - '@babel/runtime@7.28.6': {} '@babel/template@7.27.2': @@ -7446,7 +7433,7 @@ snapshots: '@babel/preset-env': 7.27.2(@babel/core@7.27.1) '@babel/preset-react': 7.27.1(@babel/core@7.27.1) '@babel/preset-typescript': 7.27.1(@babel/core@7.27.1) - '@babel/runtime': 7.27.1 + '@babel/runtime': 7.28.6 '@babel/runtime-corejs3': 7.27.1 '@babel/traverse': 7.27.1 '@docusaurus/logger': 3.7.0 @@ -9122,10 +9109,6 @@ snapshots: '@types/retry@0.12.0': {} - '@types/rimraf@4.0.5': - dependencies: - rimraf: 6.0.1 - '@types/sax@1.2.7': dependencies: '@types/node': 22.15.21 @@ -12646,7 +12629,7 @@ snapshots: react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.3.1))(webpack@5.99.8): dependencies: - '@babel/runtime': 7.27.1 + '@babel/runtime': 7.28.6 react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.3.1)' webpack: 5.99.8 @@ -12672,13 +12655,13 @@ snapshots: react-router-config@5.1.1(react-router@5.3.4(react@18.3.1))(react@18.3.1): dependencies: - '@babel/runtime': 7.27.1 + '@babel/runtime': 7.28.6 react: 18.3.1 react-router: 5.3.4(react@18.3.1) react-router-dom@5.3.4(react@18.3.1): dependencies: - '@babel/runtime': 7.27.1 + '@babel/runtime': 7.28.6 history: 4.10.1 loose-envify: 1.4.0 prop-types: 15.8.1 @@ -12689,7 +12672,7 @@ snapshots: react-router@5.3.4(react@18.3.1): dependencies: - '@babel/runtime': 7.27.1 + '@babel/runtime': 7.28.6 history: 4.10.1 hoist-non-react-statics: 3.3.2 loose-envify: 1.4.0 diff --git a/src/components/theme/VersionSelection/VersionSelection.module.css b/src/components/theme/VersionSelection/VersionSelection.module.css index 35637abfb..6dae6ea2d 100644 --- a/src/components/theme/VersionSelection/VersionSelection.module.css +++ b/src/components/theme/VersionSelection/VersionSelection.module.css @@ -9,10 +9,12 @@ .versionSelection { cursor: pointer; + padding: 0; + height: 2.5rem; } -.versionSelection ix-icon { - margin-inline-start: 0.25rem; - margin-block-start: 0.125rem; - vertical-align: top; +.versionSelection span { + display: flex; + align-items: center; + gap: 0.25rem; } diff --git a/src/components/theme/VersionSelection/index.tsx b/src/components/theme/VersionSelection/index.tsx index 070839da3..6596349de 100644 --- a/src/components/theme/VersionSelection/index.tsx +++ b/src/components/theme/VersionSelection/index.tsx @@ -6,14 +6,16 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -import { IxDropdown, IxDropdownItem, IxIcon } from '@siemens/ix-react'; import { - iconChevronDown, - iconOpenExternal, - iconVersionHistory, -} from '@siemens/ix-icons/icons'; + IxButton, + IxDropdown, + IxDropdownItem, + IxIcon, + IxTypography, +} from '@siemens/ix-react'; +import { iconChevronDown } from '@siemens/ix-icons/icons'; import BrowserOnly from '@docusaurus/BrowserOnly'; -import { useMemo } from 'react'; +import { useCallback, useMemo, useRef } from 'react'; import clsx from 'clsx'; import styles from './VersionSelection.module.css'; @@ -37,33 +39,68 @@ export default function VersionSelection({ value }: { value: VersionFile }) { () => value.versions.find((v) => v.id === value.currentVersion), [value] ); + + const dropdownListenerRef = useRef<{ + el: HTMLIxDropdownElement; + handler: (e: Event) => void; + } | null>(null); + + const dropdownRef = useCallback((el: HTMLIxDropdownElement | null) => { + if (dropdownListenerRef.current) { + const { el: prevEl, handler } = dropdownListenerRef.current; + prevEl.removeEventListener('itemClick', handler); + dropdownListenerRef.current = null; + } + if (el) { + const handler = (e: Event) => { + (e.target as HTMLElement).querySelector('a[href]')?.click(); + }; + el.addEventListener('itemClick', handler); + dropdownListenerRef.current = { el, handler }; + } + }, []); + return ( {() => ( <> - - {currentVersion.label} - - - + + + {currentVersion?.label} + + + + + {value.versions.map((version) => ( - - {currentVersion.id === version.id ? ( + + {currentVersion?.id === version.id ? ( - {currentVersion.dropdownLabel ?? currentVersion.label} + {currentVersion?.dropdownLabel ?? currentVersion?.label} ) : ( - + {version.dropdownLabel ?? version.label} )} ))} - - + + Show versioning