From d523ab1b3fe70cde388a85bdcdf79845e6ee90ae Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Mon, 13 Apr 2026 16:15:26 +0200 Subject: [PATCH 1/4] fix: make version selection focusable --- src/components/theme/VersionSelection/index.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/theme/VersionSelection/index.tsx b/src/components/theme/VersionSelection/index.tsx index 070839da3..531092969 100644 --- a/src/components/theme/VersionSelection/index.tsx +++ b/src/components/theme/VersionSelection/index.tsx @@ -7,11 +7,7 @@ * 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'; +import { iconChevronDown } from '@siemens/ix-icons/icons'; import BrowserOnly from '@docusaurus/BrowserOnly'; import { useMemo } from 'react'; import clsx from 'clsx'; @@ -37,6 +33,7 @@ export default function VersionSelection({ value }: { value: VersionFile }) { () => value.versions.find((v) => v.id === value.currentVersion), [value] ); + return ( {() => ( @@ -44,6 +41,8 @@ export default function VersionSelection({ value }: { value: VersionFile }) { {currentVersion.label} From 835c142e0c9472353465ed356ad97aa380589b20 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Tue, 14 Apr 2026 18:05:12 +0200 Subject: [PATCH 2/4] fix: turn version selection into button --- .../VersionSelection.module.css | 10 +-- .../theme/VersionSelection/index.tsx | 65 +++++++++++++++---- 2 files changed, 58 insertions(+), 17 deletions(-) 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 531092969..741b25459 100644 --- a/src/components/theme/VersionSelection/index.tsx +++ b/src/components/theme/VersionSelection/index.tsx @@ -6,10 +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 { + 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'; @@ -34,35 +40,68 @@ export default function VersionSelection({ value }: { value: VersionFile }) { [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.dropdownLabel ?? currentVersion.label} ) : ( - + {version.dropdownLabel ?? version.label} )} ))} - - + + Show versioning From d91cb1327353616c2cc07cfd0e735780646ef517 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Mon, 4 May 2026 16:25:51 +0200 Subject: [PATCH 3/4] fix: version selection arrow down enabled --- .env.production | 2 +- src/components/theme/VersionSelection/index.tsx | 13 ++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/.env.production b/.env.production index a7d0bf9fd..616e331bb 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ -DOCS_BRANCH='@siemens/ix@4.4.0' +DOCS_BRANCH='main' DOCS_BRANCH_TYPE='branch' # Check if the branch is a pull request DOCS_PR_NUMBER='' diff --git a/src/components/theme/VersionSelection/index.tsx b/src/components/theme/VersionSelection/index.tsx index 741b25459..6596349de 100644 --- a/src/components/theme/VersionSelection/index.tsx +++ b/src/components/theme/VersionSelection/index.tsx @@ -68,12 +68,12 @@ export default function VersionSelection({ value }: { value: VersionFile }) { id="custom-version-selection" className={clsx('navbar__item nav-link', styles.versionSelection)} variant="tertiary" - aria-label={`${currentVersion.dropdownLabel ?? currentVersion.label}, select version`} + aria-label={`${currentVersion?.dropdownLabel ?? currentVersion?.label}, select version`} aria-haspopup="listbox" > - {currentVersion.label} + {currentVersion?.label} @@ -82,16 +82,15 @@ export default function VersionSelection({ value }: { value: VersionFile }) { {value.versions.map((version) => ( - {currentVersion.id === version.id ? ( + {currentVersion?.id === version.id ? ( - {currentVersion.dropdownLabel ?? currentVersion.label} + {currentVersion?.dropdownLabel ?? currentVersion?.label} ) : ( @@ -100,7 +99,7 @@ export default function VersionSelection({ value }: { value: VersionFile }) { )} ))} - + Show versioning From 960afefbdbee10e8c67592c023924b1203ae7082 Mon Sep 17 00:00:00 2001 From: Lukas Maurer Date: Thu, 21 May 2026 15:52:36 +0200 Subject: [PATCH 4/4] chore: install ix v5 --- docusaurus.config.ts | 2 +- package.json | 5 ++-- pnpm-lock.yaml | 61 ++++++++++++++++---------------------------- 3 files changed, 25 insertions(+), 43 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 6c025e4dd..f137b482a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -41,7 +41,7 @@ const customCss = [ './node_modules/@siemens/ix/dist/siemens-ix/theme/classic-dark.css', './node_modules/@siemens/ix/dist/siemens-ix/theme/classic-light.css', './src/scss/custom.scss', - './node_modules/@siemens/ix/scss/_common-variables.scss', + './node_modules/@siemens/ix/scss/misc/_common-variables.scss', ]; let withBrandTheme = false; diff --git a/package.json b/package.json index a63b28b86..a97e12020 100644 --- a/package.json +++ b/package.json @@ -24,9 +24,9 @@ "@docusaurus/plugin-client-redirects": "^3.7.0", "@docusaurus/preset-classic": "3.7.0", "@mdx-js/react": "^3.0.0", - "@siemens/ix": "^4.2.0", + "@siemens/ix": "^5.0.0", "@siemens/ix-icons": "^3.4.0", - "@siemens/ix-react": "^4.2.0", + "@siemens/ix-react": "^5.0.0", "@stackblitz/sdk": "^1.11.0", "prism-react-renderer": "^2.3.0", "prismjs": "^1.30.0", @@ -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 41d6ac51b..3ae360ca8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,14 +24,14 @@ importers: specifier: ^3.0.0 version: 3.1.0(@types/react@18.3.22)(react@18.3.1) '@siemens/ix': - specifier: ^4.2.0 - version: 4.2.0(@siemens/ix-icons@3.4.0) + specifier: ^5.0.0 + version: 5.0.0(@siemens/ix-icons@3.4.0) '@siemens/ix-icons': specifier: ^3.4.0 version: 3.4.0 '@siemens/ix-react': - specifier: ^4.2.0 - version: 4.2.0(@siemens/ix-icons@3.4.0)(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^5.0.0 + version: 5.0.0(@siemens/ix-icons@3.4.0)(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@stackblitz/sdk': specifier: ^1.11.0 version: 1.11.0 @@ -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'} @@ -1920,17 +1913,17 @@ packages: resolution: {integrity: sha512-T6maRV+DJ1MjT29phC/miwwc8fP/D8LQGNjc0UlBZnFCLaDMrtasQTREQzff99uROUmHw4nt5A65/ZWnW/j9Pg==} engines: {node: '>=22.19.x', pnpm: '>=10.x.x'} - '@siemens/ix-react@4.2.0': - resolution: {integrity: sha512-bmEBm1faATBhY3MBkwnQqRiaKMnyc0CnsVJHB959k1vTScqi6xvmP0e6EBKD+oV5Xb57E3tH/WQBdH7ryLGbqg==} + '@siemens/ix-react@5.0.0': + resolution: {integrity: sha512-uXE2N1+z4cuZtcHy4392MUqBXQAzXql5dsXJ7Gu6RhH9zzcY+G7ew1ihqQKKW/8RpibSYwQp8GfacApJQCdoLA==} peerDependencies: - '@siemens/ix-icons': ^3.2.0 + '@siemens/ix-icons': ^3.4.0 react: ^18 || ^19 react-dom: ^18 || ^19 - '@siemens/ix@4.2.0': - resolution: {integrity: sha512-FvgKqBdbV1feAf8jI2nBR1/saO4ulsNRYXVmS2qgXzH7Jp1pmdbVlf0hUSQlY8tuk0XWYUPmjdW6kLeyO57o/A==} + '@siemens/ix@5.0.0': + resolution: {integrity: sha512-OpuiXkx8ccLXIh1ZQKt+0KtMqApZOLweUXbTxblDFMHt95V/pOYygISmOatIXCgIhZgqEGYcrWJeVTe5rfTmng==} peerDependencies: - '@siemens/ix-icons': ^3.2.0 + '@siemens/ix-icons': ^3.4.0 '@sinclair/typebox@0.27.8': resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} @@ -1960,8 +1953,8 @@ packages: engines: {node: '>=16.0.0', npm: '>=7.10.0'} hasBin: true - '@stencil/react-output-target@1.2.0': - resolution: {integrity: sha512-xDNpWdRg897T3Diy5V2d8dZUdjhc4QJ/5JZdTVyv3/e9UICdJPfCY6eKp/dWWgYlJ9AUE6GLHOI1iePZmLY12A==} + '@stencil/react-output-target@1.5.2': + resolution: {integrity: sha512-NnzwjHwoHtD/O7uDA7oi/bUCd4McwvWOPrmD5/QJP3h1QoXTGw0hobpCdl5R04zB1xwrP8d4JUaR16DaTD+aAQ==} peerDependencies: '@stencil/core': '>=3 || >= 4.0.0-beta.0 || >= 4.0.0' react: ^18 || ^19 @@ -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 @@ -8790,11 +8777,11 @@ snapshots: '@siemens/ix-icons@3.4.0': {} - '@siemens/ix-react@4.2.0(@siemens/ix-icons@3.4.0)(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@siemens/ix-react@5.0.0(@siemens/ix-icons@3.4.0)(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@siemens/ix': 4.2.0(@siemens/ix-icons@3.4.0) + '@siemens/ix': 5.0.0(@siemens/ix-icons@3.4.0) '@siemens/ix-icons': 3.4.0 - '@stencil/react-output-target': 1.2.0(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@stencil/react-output-target': 1.5.2(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) react: 18.3.1 react-dom: 18.3.1(react@18.3.1) tslib: 2.8.1 @@ -8802,7 +8789,7 @@ snapshots: - '@stencil/core' - '@types/react' - '@siemens/ix@4.2.0(@siemens/ix-icons@3.4.0)': + '@siemens/ix@5.0.0(@siemens/ix-icons@3.4.0)': dependencies: '@floating-ui/dom': 1.7.0 '@siemens/ix-icons': 3.4.0 @@ -8844,7 +8831,7 @@ snapshots: '@rollup/rollup-win32-arm64-msvc': 4.34.9 '@rollup/rollup-win32-x64-msvc': 4.34.9 - '@stencil/react-output-target@1.2.0(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@stencil/react-output-target@1.5.2(@stencil/core@4.31.0)(@types/react@18.3.22)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@lit/react': 1.0.7(@types/react@18.3.22) '@stencil/core': 4.31.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