@redocly/theme 0.19.6 → 0.19.8

package/lib/components/Button/Button.js

@@ -51,7 +51,7 @@ const getSize = (size = 'default') => (0, styled_components_1.css) `
   min-width: var(--button-${size}-min-width);
 `;
 exports.baseButtonStyles = (0, styled_components_1.css) `
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
@@ -74,6 +74,7 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
     background-color: var(--button-hover-background-color);
+    color: var(--button-hover-color, var(--button-color));
     border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 

package/lib/components/Button/styledVariables.js

@@ -52,12 +52,16 @@ exports.button = (0, styled_components_1.css) `
     --button-color: var(--text-primary); // @presenter Color
     --button-background-color: var(--bg-overlay); // @presenter Color
     --button-border-color: var(--bg-overlay);
+    --button-outlined-color: var(--text-primary);
+
 
     --button-hover-background-color: var(--bg-overlay); // @presenter Color
     --button-hover-border-color: var(--border-primary); // @presenter Color
+    --button-outlined-hover-color: var(--text-primary); // @presenter Color
 
     --button-active-background-color: var(--bg-overlay); // @presenter Color
     --button-active-border-color: var(--button-color); // @presenter Color
+    --button-outlined-active-color: var(--bg-overlay); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -72,12 +76,15 @@ exports.button = (0, styled_components_1.css) `
     --button-background-color: var(--color-primary); // @presenter Color
     --button-border-color: var(--color-primary); // @presenter Color
     --button-border: 1px solid var(--button-border-color);
+    --button-outlined-color: var(--color-primary);
 
     --button-hover-background-color: var(--color-primary-hover); // @presenter Color
     --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+    --button-outlined-hover-color: var(--color-primary-hover);
 
     --button-active-background-color: var(--color-primary-active); // @presenter Color
     --button-active-border-color: var(--color-primary-active); // @presenter Color
+    --button-outlined-active-color: var(--color-primary-active); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -88,7 +95,9 @@ exports.button = (0, styled_components_1.css) `
     * @tokens Button outline
     */
   .button-outlined {
-    --button-background-color: transparent; // @presenter Color
+    background-color: transparent;
+    --button-color: var(--button-outlined-color); // @presenter Color
+    --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
   }
 
   /**

package/lib/components/Menu/MobileMenu.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { MobileMenuProps } from '../../components/Menu/types';
-export declare function MobileMenu({ className }: MobileMenuProps): JSX.Element | null;
+export declare function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null;
 export declare const ControlButton: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/components/Menu/MobileMenu.js

@@ -38,7 +38,7 @@ const icons_1 = require("../../icons");
 const Product_1 = require("../../components/Product/Product");
 const use_mobile_menu_levels_1 = require("../../components/Menu/hooks/use-mobile-menu-levels");
 const use_mobile_menu_items_1 = require("../../components/Menu/hooks/use-mobile-menu-items");
-function MobileMenu({ className }) {
+function MobileMenu({ className, hideUserProfile }) {
     var _a, _b, _c;
     const location = (0, react_router_dom_1.useLocation)();
     const product = (0, hooks_1.useCurrentProduct)();
@@ -65,7 +65,7 @@ function MobileMenu({ className }) {
                 react_1.default.createElement(Product_1.Product, { product: product }))) : null,
             react_1.default.createElement(MenuWrapper, null,
                 react_1.default.createElement(index_1.Menu, { items: menuItems, isMobile: true }))),
-        react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
+        hideUserProfile ? null : react_1.default.createElement(MobileUserProfile_1.MobileUserProfile, null)));
 }
 exports.MobileMenu = MobileMenu;
 const MobileMenuWrapper = styled_components_1.default.div `

package/lib/components/Menu/types.d.ts

@@ -1,3 +1,4 @@
 export interface MobileMenuProps {
     className?: string;
+    hideUserProfile?: boolean;
 }

package/lib/components/Navbar/Navbar.js

@@ -81,7 +81,7 @@ function NavbarPresentational(props) {
     const themeConfig = (0, useThemeConfig_1.useThemeConfig)();
     const menu = (_a = themeConfig.navbar) === null || _a === void 0 ? void 0 : _a.items;
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar", className: className },
-        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, null),
+        isOpen && react_1.default.createElement(MobileMenu_1.MobileMenu, { hideUserProfile: !!hideUserProfile }),
         react_1.default.createElement(exports.NavbarRow, null,
             react_1.default.createElement(BurgerButton_1.BurgerButton, { onClick: isOpen ? closeMobileMenu : openMobileMenu, isOpen: isOpen }),
             react_1.default.createElement(NavbarLogo_1.NavbarLogo, { logo: logo }),

package/lib/components/Select/Select.d.ts

@@ -16,9 +16,12 @@ export interface SelectProps<T = any> {
     icon?: React.ReactNode;
     onlyIcon?: boolean;
     placeholder?: string;
+    disabled?: boolean;
 }
-export declare function Select<T>({ className, value, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, placeholder, }: SelectProps<T>): JSX.Element;
-export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare function Select<T>({ className, value, options, dataAttributes, withArrow, triggerEvent, onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, }: SelectProps<T>): JSX.Element;
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
 export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {

package/lib/components/Select/Select.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const icons_1 = require("../../icons");
 const hooks_1 = require("../../hooks");
-function Select({ className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, placeholder, }) {
+function Select({ className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', onChange, placement, alignment, icon, onlyIcon, disabled, placeholder, }) {
     const containerRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     // const [selectedIdx, setSelectedIdx] = useState<React.ReactNode | string>(selected);
@@ -55,7 +55,7 @@ function Select({ className, value, options, dataAttributes, withArrow = true, t
     //   // eslint-disable-next-line react-hooks/exhaustive-deps
     // }, [selected]);
     const selectedOption = options.find((option) => option.value === value);
-    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
+    return (react_1.default.createElement(exports.SelectContainer, Object.assign({}, dataAttributes, { disabled: disabled, "data-testid": "select", className: className, ref: containerRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: triggerEvent === 'click' ? handleToggle : undefined }),
         react_1.default.createElement(exports.SelectInput, null,
             !onlyIcon && (react_1.default.createElement(exports.SelectInputValue, null, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.element) || placeholder)),
             icon,
@@ -70,6 +70,13 @@ exports.SelectContainer = styled_components_1.default.div `
   line-height: var(--select-line-height);
   border-radius: var(--select-border-radius);
   color: var(--select-text-color);
+  min-width: 0;
+
+  ${({ disabled }) => disabled &&
+    `
+    opacity: 0.59;
+    pointer-events: none;
+  `}
 
   a {
     display: block;
@@ -89,6 +96,8 @@ exports.SelectInput = styled_components_1.default.div `
 exports.SelectInputValue = styled_components_1.default.div `
   pointer-events: none;
   min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 exports.SelectList = styled_components_1.default.ul `
   position: absolute;
@@ -114,6 +123,8 @@ exports.SelectListItem = styled_components_1.default.li `
 
   & > * {
     padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :hover {

package/lib/components/Sidebar/VersionPicker.d.ts

@@ -1,7 +1,11 @@
+/// <reference types="react" />
 import type { SelectProps } from '../Select';
+import type { Version } from '../../types/portal';
 import { Select } from '../Select';
-export declare const VersionPicker: import("styled-components").StyledComponent<typeof Select, any, {
-    dataAttributes: {
-        'data-component-name': string;
-    };
-} & SelectProps<any>, "dataAttributes">;
+export interface VersionPickerProps extends SelectProps {
+}
+export declare function VersionPicker(props: {
+    versions?: Version[];
+    onChange: (v: Version) => void;
+}): JSX.Element | null;
+export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps<any>, never>;

package/lib/components/Sidebar/VersionPicker.js

@@ -1,27 +1,82 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VersionPicker = void 0;
+exports.VersionPickerSelect = exports.VersionPicker = void 0;
+const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../mocks/hooks");
 const Select_1 = require("../Select");
-exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(() => ({
-    dataAttributes: {
-        'data-component-name': 'Sidebar/VersionPicker',
-    },
-})) `
+function VersionPicker(props) {
+    var _a;
+    const themeConfig = (0, hooks_1.useThemeConfig)();
+    const { versionPicker } = themeConfig;
+    const { translate } = (0, hooks_2.useTranslate)();
+    const translationKeys = {
+        label: 'theme.versionPicker.label',
+        unversioned: 'theme.versionPicker.unversioned',
+    };
+    const { versions = [], onChange } = props;
+    const options = versions.map((version) => {
+        return {
+            element: version.label || version.version,
+            value: version,
+            active: version.active,
+        };
+    });
+    if (versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.hide) {
+        return null;
+    }
+    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
+    if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
+        return null;
+    return (React.createElement(VersionsPickerWrapper, null,
+        React.createElement(VersionPickerLabel, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Version:')),
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate(translationKeys.unversioned, 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+}
+exports.VersionPicker = VersionPicker;
+const VersionPickerLabel = styled_components_1.default.label `
+  font-size: var(--version-picker-label-font-size);
+  font-weight: var(--version-picker-label-font-weight);
+`;
+exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select) `
   --select-list-item-active-background-color: var(
     --version-picker-list-item-active-background-color
   );
   --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
 
+  flex: 1;
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
-  margin: var(--version-picker-margin-vertical) var(--version-picker-margin-horizontal);
 
   ${Select_1.SelectInput} {
     border: var(--version-picker-input-border);
@@ -50,4 +105,17 @@ exports.VersionPicker = (0, styled_components_1.default)(Select_1.Select).attrs(
     }
   }
 `;
+const VersionsPickerWrapper = styled_components_1.default.div.attrs(() => ({
+    dataAttributes: {
+        'data-component-name': 'Sidebar/VersionPicker',
+    },
+})) `
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
+  border-bottom: var(--version-picker-border-bottom);
+`;
 //# sourceMappingURL=VersionPicker.js.map

package/lib/components/Sidebar/styledVariables.js

@@ -190,8 +190,12 @@ exports.versionPicker = (0, styled_components_1.css) `
   --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
   --version-picker-text-color: var(--select-text-color); // @presenter Color
   --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
-  --version-picker-margin-vertical: 10px; // @presenter Spacing
-  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+  --version-picker-padding-vertical: 10px; // @presenter Spacing
+  --version-picker-padding-horizontal: calc(var(--sidebar-margin-horizontal) + var(--sidebar-item-padding-horizontal)); // @presenter Spacing
+  --version-picker-border-bottom: 1px solid var(--border-primary); // @presenter Border
+
+  --version-picker-label-font-size: var(--font-size-base);
+  --version-picker-label-font-weight: var(--font-weight-bold);
 
   --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
   --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing

package/lib/config.d.ts

@@ -1555,6 +1555,17 @@ export declare const themeConfigSchema: {
             readonly additionalProperties: false;
             readonly default: {};
         };
+        readonly versionPicker: {
+            readonly type: "object";
+            readonly properties: {
+                readonly hide: {
+                    readonly type: "boolean";
+                };
+                readonly showForUnversioned: {
+                    readonly type: "boolean";
+                };
+            };
+        };
         readonly breadcrumbs: {
             readonly type: "object";
             readonly properties: {

package/lib/config.js

@@ -535,6 +535,15 @@ exports.themeConfigSchema = {
             additionalProperties: false,
             default: {},
         },
+        versionPicker: {
+            type: 'object',
+            properties: {
+                hide: { type: 'boolean' },
+                showForUnversioned: {
+                    type: 'boolean',
+                },
+            },
+        },
         breadcrumbs: {
             type: 'object',
             properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.19.6",
+  "version": "0.19.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Button/Button.tsx

@@ -47,7 +47,7 @@ const getSize = (size: ButtonSize = 'default'): FlattenSimpleInterpolation => cs
 `;
 
 export const baseButtonStyles = css`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-xs);
@@ -70,6 +70,7 @@ export const baseButtonStyles = css`
   &:hover {
     box-shadow: var(--button-hover-box-shadow);
     background-color: var(--button-hover-background-color);
+    color: var(--button-hover-color, var(--button-color));
     border: var(--button-border-width) var(--button-border-style) var(--button-hover-border-color);
   }
 

package/src/components/Button/styledVariables.ts

@@ -50,12 +50,16 @@ export const button = css`
     --button-color: var(--text-primary); // @presenter Color
     --button-background-color: var(--bg-overlay); // @presenter Color
     --button-border-color: var(--bg-overlay);
+    --button-outlined-color: var(--text-primary);
+
 
     --button-hover-background-color: var(--bg-overlay); // @presenter Color
     --button-hover-border-color: var(--border-primary); // @presenter Color
+    --button-outlined-hover-color: var(--text-primary); // @presenter Color
 
     --button-active-background-color: var(--bg-overlay); // @presenter Color
     --button-active-border-color: var(--button-color); // @presenter Color
+    --button-outlined-active-color: var(--bg-overlay); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -70,12 +74,15 @@ export const button = css`
     --button-background-color: var(--color-primary); // @presenter Color
     --button-border-color: var(--color-primary); // @presenter Color
     --button-border: 1px solid var(--button-border-color);
+    --button-outlined-color: var(--color-primary);
 
     --button-hover-background-color: var(--color-primary-hover); // @presenter Color
     --button-hover-border-color: var(--color-primary-hover); // @presenter Color
+    --button-outlined-hover-color: var(--color-primary-hover);
 
     --button-active-background-color: var(--color-primary-active); // @presenter Color
     --button-active-border-color: var(--color-primary-active); // @presenter Color
+    --button-outlined-active-color: var(--color-primary-active); // @presenter Color
 
     --button-disabled-color: var(--text-placeholder); // @presenter Color
     --button-disabled-background-color: var(--bg-raised); // @presenter Color
@@ -86,7 +93,9 @@ export const button = css`
     * @tokens Button outline
     */
   .button-outlined {
-    --button-background-color: transparent; // @presenter Color
+    background-color: transparent;
+    --button-color: var(--button-outlined-color); // @presenter Color
+    --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
   }
 
   /**

package/src/components/Menu/MobileMenu.tsx

@@ -12,7 +12,7 @@ import { Product } from '@theme/components/Product/Product';
 import { useMobileMenuLevels } from '@theme/components/Menu/hooks/use-mobile-menu-levels';
 import { useMobileMenuItems } from '@theme/components/Menu/hooks/use-mobile-menu-items';
 
-export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
+export function MobileMenu({ className, hideUserProfile }: MobileMenuProps): JSX.Element | null {
   const location = useLocation();
   const product = useCurrentProduct();
 
@@ -66,7 +66,7 @@ export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
           <Menu items={menuItems} isMobile />
         </MenuWrapper>
       </ScrollableArea>
-      <MobileUserProfile />
+      {hideUserProfile ? null : <MobileUserProfile />}
     </MobileMenuWrapper>
   );
 }

package/src/components/Menu/types.ts

@@ -1,3 +1,4 @@
 export interface MobileMenuProps {
   className?: string;
+  hideUserProfile?: boolean;
 }

package/src/components/Navbar/Navbar.tsx

@@ -89,7 +89,7 @@ export function NavbarPresentational(props: NavbarPresentationalProps): JSX.Elem
 
   return (
     <NavbarContainer data-component-name="Navbar/Navbar" className={className}>
-      {isOpen && <MobileMenu />}
+      {isOpen && <MobileMenu hideUserProfile={!!hideUserProfile} />}
       <NavbarRow>
         <BurgerButton onClick={isOpen ? closeMobileMenu : openMobileMenu} isOpen={isOpen} />
         <NavbarLogo logo={logo} />

package/src/components/Select/Select.tsx

@@ -21,6 +21,7 @@ export interface SelectProps<T = any> {
   icon?: React.ReactNode;
   onlyIcon?: boolean;
   placeholder?: string;
+  disabled?: boolean;
 }
 
 export function Select<T>({
@@ -35,6 +36,7 @@ export function Select<T>({
   alignment,
   icon,
   onlyIcon,
+  disabled,
   placeholder,
 }: SelectProps<T>) {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -72,6 +74,7 @@ export function Select<T>({
   return (
     <SelectContainer
       {...dataAttributes}
+      disabled={disabled}
       data-testid="select"
       className={className}
       ref={containerRef}
@@ -105,13 +108,21 @@ export function Select<T>({
   );
 }
 
-export const SelectContainer = styled.div`
+export const SelectContainer = styled.div<{ disabled?: boolean }>`
   position: relative;
   font-size: var(--select-font-size);
   font-weight: var(--select-font-weight);
   line-height: var(--select-line-height);
   border-radius: var(--select-border-radius);
   color: var(--select-text-color);
+  min-width: 0;
+
+  ${({ disabled }) =>
+    disabled &&
+    `
+    opacity: 0.59;
+    pointer-events: none;
+  `}
 
   a {
     display: block;
@@ -133,6 +144,8 @@ export const SelectInput = styled.div`
 export const SelectInputValue = styled.div`
   pointer-events: none;
   min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
@@ -160,6 +173,8 @@ export const SelectListItem = styled.li<{ selected: boolean }>`
 
   & > * {
     padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   :hover {

package/src/components/Sidebar/VersionPicker.tsx

@@ -1,25 +1,77 @@
+import * as React from 'react';
 import styled from 'styled-components';
 
 import type { SelectProps } from '../Select';
 
+import { useThemeConfig } from '@theme/hooks';
+import { useTranslate } from '@portal/hooks';
+import type { Version } from '@theme/types/portal';
+
 import { Select, SelectInput, SelectList, SelectListItem } from '../Select';
 
-export const VersionPicker = styled(Select).attrs(() => ({
-  dataAttributes: {
-    'data-component-name': 'Sidebar/VersionPicker',
-  },
-}))<SelectProps>`
+export interface VersionPickerProps extends SelectProps {}
+
+export function VersionPicker(props: { versions?: Version[]; onChange: (v: Version) => void }) {
+  const themeConfig = useThemeConfig();
+  const { versionPicker } = themeConfig;
+
+  const { translate } = useTranslate();
+  const translationKeys = {
+    label: 'theme.versionPicker.label',
+    unversioned: 'theme.versionPicker.unversioned',
+  };
+
+  const { versions = [], onChange } = props;
+  const options = versions.map((version) => {
+    return {
+      element: version.label || version.version,
+      value: version,
+      active: version.active,
+    };
+  });
+
+  if (versionPicker?.hide) {
+    return null;
+  }
+
+  const value = options.find((item) => item.active)?.value;
+
+  if (!options.length && !versionPicker?.showForUnversioned) return null;
+
+  return (
+    <VersionsPickerWrapper>
+      <VersionPickerLabel data-translation-key={translationKeys.label}>
+        {translate(translationKeys.label, 'Version:')}
+      </VersionPickerLabel>
+      <VersionPickerSelect
+        placeholder={translate(translationKeys.unversioned, 'All versions')}
+        disabled={!options.length}
+        options={options}
+        value={value}
+        onChange={onChange}
+      />
+    </VersionsPickerWrapper>
+  );
+}
+
+const VersionPickerLabel = styled.label`
+  font-size: var(--version-picker-label-font-size);
+  font-weight: var(--version-picker-label-font-weight);
+`;
+
+export const VersionPickerSelect = styled(Select)<SelectProps>`
   --select-list-item-active-background-color: var(
     --version-picker-list-item-active-background-color
   );
   --select-list-item-hover-background-color: var(--version-picker-list-item-hover-background-color);
 
+  flex: 1;
+
   font-size: var(--version-picker-font-size);
   font-weight: var(--version-picker-font-weight);
   border-radius: var(--version-picker-border-radius);
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
-  margin: var(--version-picker-margin-vertical) var(--version-picker-margin-horizontal);
 
   ${SelectInput} {
     border: var(--version-picker-input-border);
@@ -48,3 +100,17 @@ export const VersionPicker = styled(Select).attrs(() => ({
     }
   }
 `;
+
+const VersionsPickerWrapper = styled.div.attrs(() => ({
+  dataAttributes: {
+    'data-component-name': 'Sidebar/VersionPicker',
+  },
+}))`
+  display: flex;
+  gap: 10px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--version-picker-padding-vertical) var(--version-picker-padding-horizontal);
+  border-bottom: var(--version-picker-border-bottom);
+`;

package/src/components/Sidebar/styledVariables.ts

@@ -189,8 +189,12 @@ export const versionPicker = css`
   --version-picker-line-height: var(--select-line-height); // @presenter LineHeight
   --version-picker-text-color: var(--select-text-color); // @presenter Color
   --version-picker-border-radius: var(--select-border-radius); // @presenter BorderRadius
-  --version-picker-margin-vertical: 10px; // @presenter Spacing
-  --version-picker-margin-horizontal: 15px; // @presenter Spacing
+  --version-picker-padding-vertical: 10px; // @presenter Spacing
+  --version-picker-padding-horizontal: calc(var(--sidebar-margin-horizontal) + var(--sidebar-item-padding-horizontal)); // @presenter Spacing
+  --version-picker-border-bottom: 1px solid var(--border-primary); // @presenter Border
+
+  --version-picker-label-font-size: var(--font-size-base);
+  --version-picker-label-font-weight: var(--font-weight-bold);
 
   --version-picker-input-padding-horizontal: var(--select-input-padding-horizontal); // @presenter Spacing
   --version-picker-input-padding-vertical: var(--select-input-padding-vertical); // @presenter Spacing

package/src/config.ts

@@ -622,6 +622,15 @@ export const themeConfigSchema = {
       additionalProperties: false,
       default: {},
     },
+    versionPicker: {
+      type: 'object',
+      properties: {
+        hide: { type: 'boolean' },
+        showForUnversioned: {
+          type: 'boolean',
+        },
+      },
+    },
     breadcrumbs: {
       type: 'object',
       properties: {