@redocly/theme 0.19.7 → 0.19.9

package/lib/components/Filter/FilterContent.js

@@ -19,6 +19,8 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
         clearAll: 'theme.catalog.filters.clearAll',
     };
     const hasActiveFilters = filters.some((filter) => {
+        if (filterTerm)
+            return true;
         if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
             return filter.selectedOptions.size;
         }
@@ -28,12 +30,14 @@ function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, filterVal
     });
     const handleClearAll = () => {
         filters.forEach((filter) => filter.selectOption(''));
+        setFilterTerm('');
     };
     return (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
         react_1.default.createElement(Catalog_1.FilterControls, null,
             react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
         react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing })))),
-        hasActiveFilters && (react_1.default.createElement(Button_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
+        hasActiveFilters && (react_1.default.createElement(ActionsContainer, null,
+            react_1.default.createElement(ClearAllButton, { size: "default", variant: "outlined", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters'))))));
 }
 exports.FilterContent = FilterContent;
 const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
@@ -42,11 +46,10 @@ const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar)
 
   ${Button_1.Button} {
     width: var(--filter-content-clear-button-width);
-    margin: var(--filter-content-clear-button-margin);
   }
 
   ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
-    display: block;
+    display: flex;
     border-right: 1px solid var(--filter-content-border-color);
 
     ${Catalog_1.FilterControls} {
@@ -55,6 +58,16 @@ const FilterContentWrapper = (0, styled_components_1.default)(Sidebar_1.Sidebar)
   }
 `;
 exports.FilterItems = styled_components_1.default.div `
+  overflow: scroll;
   padding: var(--filter-content-items-padding);
 `;
+const ActionsContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-base) var(--spacing-lg);
+  margin-top: auto;
+`;
+const ClearAllButton = (0, styled_components_1.default)(Button_1.Button) `
+  width: var(--filter-content-clear-button-width);
+`;
 //# sourceMappingURL=FilterContent.js.map

package/lib/components/Filter/styledVariables.js

@@ -33,8 +33,7 @@ exports.filter = (0, styled_components_1.css) `
 
   --filter-content-border-color: var(--border-secondary);
   --filter-content-items-padding: 0 var(--spacing-lg);
-  --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
-  --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
+  --filter-content-clear-button-width: 100%;
   --filter-controls-background-color: var(--bg-base);
 
   --filter-popover-background-color: var(--bg-base);

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.7",
+  "version": "0.19.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Filter/FilterContent.tsx

@@ -32,6 +32,7 @@ export function FilterContent({
   };
 
   const hasActiveFilters = filters.some((filter) => {
+    if (filterTerm) return true;
     if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
       return filter.selectedOptions.size;
     } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
@@ -41,6 +42,7 @@ export function FilterContent({
 
   const handleClearAll = () => {
     filters.forEach((filter) => filter.selectOption(''));
+    setFilterTerm('');
   };
 
   return (
@@ -62,9 +64,11 @@ export function FilterContent({
         ))}
       </FilterItems>
       {hasActiveFilters && (
-        <Button size="small" onClick={handleClearAll}>
-          {translate(translationKeys.placeholder, 'Clear all filters')}
-        </Button>
+        <ActionsContainer>
+          <ClearAllButton size="default" variant="outlined" onClick={handleClearAll}>
+            {translate(translationKeys.placeholder, 'Clear all filters')}
+          </ClearAllButton>
+        </ActionsContainer>
       )}
     </FilterContentWrapper>
   );
@@ -76,11 +80,10 @@ const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
 
   ${Button} {
     width: var(--filter-content-clear-button-width);
-    margin: var(--filter-content-clear-button-margin);
   }
 
   ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
-    display: block;
+    display: flex;
     border-right: 1px solid var(--filter-content-border-color);
 
     ${FilterControls} {
@@ -90,5 +93,17 @@ const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
 `;
 
 export const FilterItems = styled.div`
+  overflow: scroll;
   padding: var(--filter-content-items-padding);
 `;
+
+const ActionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-base) var(--spacing-lg);
+  margin-top: auto;
+`;
+
+const ClearAllButton = styled(Button)`
+  width: var(--filter-content-clear-button-width);
+`;

package/src/components/Filter/styledVariables.ts

@@ -31,8 +31,7 @@ export const filter = css`
 
   --filter-content-border-color: var(--border-secondary);
   --filter-content-items-padding: 0 var(--spacing-lg);
-  --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
-  --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
+  --filter-content-clear-button-width: 100%;
   --filter-controls-background-color: var(--bg-base);
 
   --filter-popover-background-color: var(--bg-base);

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: {