@redocly/theme 0.40.6 → 0.41.0-rc.1

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { SelectOption } from '../../core/types/select';
+type SelectInputProps<T> = {
+    id?: string;
+    selectedOptions: SelectOption<T>[];
+    searchValue: any;
+    stickyValue: any;
+    onlyIcon?: boolean;
+    icon?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    clearHandler?: (value: any) => void;
+    inputBlurHandler?: (e?: any) => void;
+    inputFocusHandler?: (e?: any) => void;
+    searchHandler?: (e?: any) => void;
+    clickHandler?: (e?: any) => void;
+};
+export declare function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode;
+export declare const SelectInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Select/SelectInput.js

@@ -0,0 +1,118 @@
+"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.SelectInputWrapper = exports.SelectInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importStar(require("react"));
+const Tag_1 = require("../../components/Tag/Tag");
+function SelectInput(props) {
+    const { id, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
+    const inputRef = (0, react_1.useRef)(null);
+    const onChangeHandler = (e) => {
+        var _a;
+        searchHandler === null || searchHandler === void 0 ? void 0 : searchHandler(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onKeyDownHandler = (e) => {
+        var _a;
+        if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
+            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(selectedOptions[selectedOptions.length - 1]);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const onClickHandler = (e) => {
+        clickHandler === null || clickHandler === void 0 ? void 0 : clickHandler(e);
+    };
+    const onFocusHandler = (e) => {
+        var _a;
+        inputFocusHandler === null || inputFocusHandler === void 0 ? void 0 : inputFocusHandler(e);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const onBlurHandler = (e) => {
+        inputBlurHandler === null || inputBlurHandler === void 0 ? void 0 : inputBlurHandler(e);
+    };
+    const selectTags = selectedOptions.map((option, index) => (react_1.default.createElement(SelectTag, { closable: true, key: index, onClose: () => {
+            var _a;
+            clearHandler === null || clearHandler === void 0 ? void 0 : clearHandler(option);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        } }, option.label || option.element)));
+    const selectInput = (react_1.default.createElement(Input, { value: searchValue ||
+            (!multiple && !stickyValue && selectedOptions.length ? selectedOptions[0].value : ''), placeholder: searchValue || (multiple && selectedOptions.length) ? '' : stickyValue || placeholder, onChange: onChangeHandler, onKeyDown: onKeyDownHandler, onBlur: onBlurHandler, ref: inputRef, width: multiple ? (!searchValue && selectedOptions.length ? '10px' : 'auto') : '100%' }));
+    const simpleValue = selectedOptions.length ? (selectedOptions[0].label || selectedOptions[0].element) : (react_1.default.createElement(Placeholder, null, placeholder));
+    const multipleValues = selectedOptions.length ? (selectTags) : (react_1.default.createElement(Placeholder, null, placeholder));
+    return (react_1.default.createElement(exports.SelectInputWrapper, Object.assign({}, props, { id: id, onFocus: onFocusHandler, onClick: onClickHandler }),
+        !onlyIcon && (react_1.default.createElement(SelectInputValue, null, multiple ? (searchable ? (react_1.default.createElement(react_1.default.Fragment, null,
+            selectTags,
+            selectInput)) : (multipleValues)) : searchable ? (selectInput) : (simpleValue))),
+        customIcon || icon));
+}
+exports.SelectInput = SelectInput;
+exports.SelectInputWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--select-input-border-radius);
+  padding: var(--select-input-padding);
+  cursor: pointer;
+  gap: var(--select-input-gap);
+`;
+const SelectInputValue = styled_components_1.default.div `
+  width: calc(100% - 20px);
+  display: flex;
+  min-width: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex-wrap: wrap;
+  gap: var(--select-input-value-gap);
+`;
+const SelectTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  --tag-content-padding: 0;
+`;
+const Input = styled_components_1.default.input.attrs(() => ({
+    type: 'text',
+})) `
+  outline: none;
+  border-radius: var(--select-input-border-radius);
+  border: none;
+  font-size: var(--select-input-font-size);
+  font-weight: var(--select-input-font-weight);
+  line-height: var(--select-input-line-height);
+  background-color: var(--select-input-bg-color);
+
+  &::placeholder {
+    color: var(--select-input-placeholder-color);
+  }
+
+  width: ${({ width }) => width || 'auto'};
+`;
+const Placeholder = styled_components_1.default.div `
+  color: var(--select-input-placeholder-color);
+  padding-left: 8px;
+`;
+//# sourceMappingURL=SelectInput.js.map

package/lib/components/Select/variables.js

@@ -11,10 +11,18 @@ exports.select = (0, styled_components_1.css) `
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  
   --select-input-padding-vertical: 6px; // @presenter Spacing
-  --select-input-padding-horizontal: 16px; // @presenter Spacing
+  --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
+  --select-input-gap: var(--spacing-xs); // @presenter Spacing
+  --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
   --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-font-size: var(--font-size-base); // @presenter FontSize
+  --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --select-input-line-height: var(--line-height-base); // @presenter LineHeight
+  --select-input-bg-color: var(--bg-color); // @presenter Color
+  --select-input-placeholder-color: var(--input-content-placeholder-color); // @presenter Color
 
   --select-list-min-width: 100px;
   --select-list-max-width: 300px;
@@ -32,6 +40,8 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+
+  --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Tag/Tag.d.ts

@@ -16,7 +16,9 @@ export type TagProps = {
     statusDotColor?: string;
     size?: string;
     icon?: React.ReactNode;
-    onClick?: () => void;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    onClose?: (event: React.MouseEvent) => void;
 };
-export declare function Tag({ children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor, ...otherProps }: TagProps): JSX.Element;
 export {};

package/lib/components/Tag/Tag.js

@@ -17,14 +17,41 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, onClick, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "onClick", "size", "borderless", "withStatusDot", "statusDotColor"]);
-    return (react_1.default.createElement(TagContainer, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick }, otherProps),
+    var { children, color, icon, active, closable, onClick, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)' } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "onClick", "onClose", "size", "borderless", "withStatusDot", "statusDotColor"]);
+    return (react_1.default.createElement(TagWrapper, Object.assign({ "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, hasCloseButton: closable }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
-        children));
+        react_1.default.createElement(ContentWrapper, null, children),
+        closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
+                onClose === null || onClose === void 0 ? void 0 : onClose(event);
+            } },
+            react_1.default.createElement(CloseIcon_1.CloseIcon, null))),
+        active && react_1.default.createElement(ActiveIcon, null)));
 }
 exports.Tag = Tag;
-const TagContainer = styled_components_1.default.div.attrs(({ className, color, size }) => ({
+const ContentWrapper = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-wrap: nowrap;
+
+  padding: var(--tag-content-padding);
+  gap: var(--tag-content-gap);
+`;
+const CloseButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+
+  &:hover {
+    background: var(--tag-close-button-bg-color-hover);
+  }
+`;
+const TagWrapper = styled_components_1.default.div.attrs(({ className, color, size }) => ({
     className: (className || '') +
         ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 })) `
@@ -32,8 +59,10 @@ const TagContainer = styled_components_1.default.div.attrs(({ className, color,
   align-items: center;
   justify-content: center;
   text-wrap: nowrap;
+  position: relative;
 
   padding: var(--tag-padding);
+  ${({ hasCloseButton }) => (hasCloseButton ? 'padding-right: 0;' : '')};
   margin: var(--tag-margin);
 
   &:last-child {
@@ -64,4 +93,11 @@ const StatusDot = styled_components_1.default.div `
   border-radius: 50%;
   background-color: ${({ color }) => color};
 `;
+const ActiveIcon = (0, styled_components_1.default)(CheckmarkFilledIcon_1.CheckmarkFilledIcon) `
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+`;
 //# sourceMappingURL=Tag.js.map

package/lib/components/Tag/variables.dark.js

@@ -3,11 +3,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
 exports.tagDarkMode = (0, styled_components_1.css) `
-  --tag-operation-color-delete: #fa82a2;
-  --tag-operation-color-get: #68cc97;
-  --tag-operation-color-post: #90b0f0;
-  --tag-operation-color-put: #e0a663;
-  --tag-operation-color-patch: #e0c363;
+  --tag-operation-color-delete: #fa82a2; // @presenter Color
+  --tag-operation-bg-color-delete: #77214C; // @presenter Color
+
+  --tag-operation-color-get: #68cc97; // @presenter Color
+  --tag-operation-bg-color-get: #1F4D2D; // @presenter Color
+
+  --tag-operation-color-post: #90b0f0; // @presenter Color
+  --tag-operation-bg-color-post: #233061; // @presenter Color
+
+  --tag-operation-color-put: #e0a663; // @presenter Color
+  --tag-operation-bg-color-put: #612729; // @presenter Color
+
+  --tag-operation-color-patch: #e0c363; // @presenter Color
+  --tag-operation-bg-color-patch: #5C3721; // @presenter Color
+
+  --tag-operation-color-head: #e6e1fe; // @presenter Color
+  --tag-operation-bg-color-head: #5b4ccc; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
   .tag-grey,
   .tag-draft,

package/lib/components/Tag/variables.js

@@ -9,7 +9,7 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
@@ -22,8 +22,17 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag spacing
     */
 
-  --tag-padding: 1px 8px; //@presenter Spacing
-  --tag-large-padding: 4px 16px; //@presenter Spacing
+  --tag-padding-vertical: 1px; //@presenter Spacing
+  --tag-padding-horizontal: 8px; //@presenter Spacing
+  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
+  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
+  --tag-content-gap: 4px; //@presenter Spacing
+
+  --tag-large-padding-vertical: 4px; //@presenter Spacing
+  --tag-large-padding-horizontal: 16px; //@presenter Spacing
+  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
+  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
+  
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -33,6 +42,7 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-size-large {
     --tag-padding: var(--tag-large-padding);
+    --tag-content-padding: var(--tag-large-content-padding);
     --tag-font-size: var(--font-size-base);
   }
 
@@ -67,6 +77,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--text-color-primary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   .tag-green,
@@ -75,6 +86,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-red,
@@ -83,6 +95,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-gold,
@@ -91,6 +104,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-blue,
@@ -98,6 +112,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-purple,
@@ -105,26 +120,24 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
   }
 
   .tag-cyan,
-  .tag-option {
+  .tag-option,
+  .tag-geekblue,
+  .tag-link {
     --tag-color: var(--color-turquoise-7); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
   }
 
   .tag-yellow {
     --tag-color: var(--color-carrot-7); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-border-color: var(--color-carrot-7); // @presenter Color
-  }
-
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
-    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
   }
 
   .tag-magenta,
@@ -132,18 +145,21 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-border-color: var(--color-magenta-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
   }
 
   .tag-lime {
     --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: none; // @presenter Color
     --tag-border-color: var(--color-green-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
   }
 
   .tag-product {
     --tag-color: var(--color-warm-grey-7); // @presenter Color
     --tag-bg-color: transparent; // @presenter Color
     --tag-border-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   /**
@@ -158,12 +174,28 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #E70B46;
-  --tag-operation-color-get: #25B869;
-  --tag-operation-color-post: #1E65F5;
-  --tag-operation-color-put: #F5901D;
-  --tag-operation-color-patch: #F5C31D;
-  --tag-operation-color-deprecated: var(--text-color-disabled);
+  --tag-operation-color-delete: #e70b46; // @presenter Color
+  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
+  
+  --tag-operation-color-get: #25b869; // @presenter Color
+  --tag-operation-bg-color-get: #e5faef; // @presenter Color
+  
+  --tag-operation-color-post: #1e65f5; // @presenter Color
+  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
+  
+  --tag-operation-color-put: #f5901d; // @presenter Color
+  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
+  
+  --tag-operation-color-patch: #f5c31d; // @presenter Color
+  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
+
+  --tag-operation-color-head: #5b4ccc; // @presenter Color
+  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #ededf2; // @presenter Color
+  
+  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { Version } from '@redocly/config';
-import { Select, type SelectProps } from '../../components/Select/Select';
-export interface VersionPickerProps extends SelectProps {
-}
+import type { SelectProps } from '../../core/types/select';
+import { Select } from '../../components/Select/Select';
 export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;

package/lib/components/VersionPicker/VersionPicker.js

@@ -31,6 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Select_1 = require("../../components/Select/Select");
+const SelectInput_1 = require("../../components/Select/SelectInput");
 function VersionPicker(props) {
     var _a;
     const themeConfig = (0, hooks_1.useThemeConfig)();
@@ -38,22 +39,24 @@ function VersionPicker(props) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { versions = [], onChange } = props;
-    const options = versions.map((version) => {
-        return {
-            element: version.label || version.version,
-            value: version,
-            active: version.active,
-        };
-    });
+    const options = versions.map(({ label, version, active }) => ({
+        element: label || version,
+        value: version,
+        active: active,
+    }));
+    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
     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;
+    const handleOnChange = (value) => {
+        const selectedVersion = versions.find((v) => v.version === value);
+        onChange(selectedVersion);
+    };
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
     return (React.createElement(VersionsPickerWrapper, { "data-component-name": "VersionPicker/VersionPicker" },
         React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: handleOnChange })));
 }
 exports.VersionPicker = VersionPicker;
 const VersionPickerLabel = styled_components_1.default.label `
@@ -72,32 +75,12 @@ exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select)
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
 
-  ${Select_1.SelectInput} {
+  ${SelectInput_1.SelectInputWrapper} {
     border: var(--version-picker-input-border);
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
   }
-
-  ${Select_1.SelectList} {
-    right: 0;
-    width: 100%;
-    min-width: var(--version-picker-list-min-width);
-    max-width: var(--version-picker-list-max-width);
-    padding: var(--version-picker-list-padding);
-    background-color: var(--version-picker-list-bg-color);
-    border-radius: var(--version-picker-list-border-radius);
-    box-shadow: var(--version-picker-list-box-shadow);
-  }
-
-  ${Select_1.SelectListItem} {
-    border-radius: var(--version-picker-list-item-border-radius);
-
-    & > * {
-      padding: var(--version-picker-list-item-vertical-padding)
-        var(--version-picker-list-item-horizontal-padding);
-    }
-  }
 `;
 const VersionsPickerWrapper = styled_components_1.default.div `
   display: flex;

package/lib/core/hooks/__mocks__/index.d.ts

@@ -20,5 +20,5 @@ export * from '../../../core/hooks/menu/use-menu-item-expanded';
 export * from '../../../core/hooks/menu/use-mobile-menu-levels';
 export * from '../../../core/hooks/feedback/use-report-dialog';
 export * from '../../../core/hooks/use-product-picker';
-export * from '../../../core/hooks/use-search';
+export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';

package/lib/core/hooks/__mocks__/index.js

@@ -36,6 +36,6 @@ __exportStar(require("../../../core/hooks/menu/use-menu-item-expanded"), exports
 __exportStar(require("../../../core/hooks/menu/use-mobile-menu-levels"), exports);
 __exportStar(require("../../../core/hooks/feedback/use-report-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../../core/hooks/use-search"), exports);
+__exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -30,7 +30,7 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useCurrentProduct: jest.Mock<any, any, any>;
     useProducts: jest.Mock<never[], [], any>;
-    useFuseSearch: jest.Mock<{
+    useSearch: jest.Mock<{
         query: jest.Mock<any, any, any>;
         setQuery: jest.Mock<any, any, any>;
         items: never[];

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -37,7 +37,7 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useCurrentProduct: jest.fn(),
     useProducts: jest.fn(() => []),
-    useFuseSearch: jest.fn(() => ({
+    useSearch: jest.fn(() => ({
         query: jest.fn().mockReturnValue(''),
         setQuery: jest.fn(),
         items: [],

package/lib/core/hooks/index.d.ts

@@ -24,6 +24,7 @@ export * from '../../core/hooks/use-tabs';
 export * from '../../core/hooks/use-focus-trap';
 export * from '../../core/hooks/use-language-picker';
 export * from '../../core/hooks/use-product-picker';
-export * from '../../core/hooks/use-search';
+export * from '../../core/hooks/search/use-search-dialog';
+export * from '../../core/hooks/search/use-search-filter';
 export * from '../../core/hooks/use-controlled-state';
 export * from '../../core/hooks/use-codeblock-tabs-controls';

package/lib/core/hooks/index.js

@@ -40,7 +40,8 @@ __exportStar(require("../../core/hooks/use-tabs"), exports);
 __exportStar(require("../../core/hooks/use-focus-trap"), exports);
 __exportStar(require("../../core/hooks/use-language-picker"), exports);
 __exportStar(require("../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../core/hooks/use-search"), exports);
+__exportStar(require("../../core/hooks/search/use-search-dialog"), exports);
+__exportStar(require("../../core/hooks/search/use-search-filter"), exports);
 __exportStar(require("../../core/hooks/use-controlled-state"), exports);
 __exportStar(require("../../core/hooks/use-codeblock-tabs-controls"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-recent-searches.js

@@ -17,6 +17,8 @@ function updateRecentSearches(value, isAdd) {
     if (!(0, utils_1.isBrowser)())
         return [];
     const recentSearches = getRecentSearches();
+    if (value === '')
+        return recentSearches;
     const valueIndex = recentSearches.indexOf(value);
     if (valueIndex !== -1)
         recentSearches.splice(valueIndex, 1);

package/lib/core/hooks/{use-search.d.ts → search/use-search-dialog.d.ts}

@@ -1,4 +1,4 @@
-export declare function useSearch(): {
+export declare function useSearchDialog(): {
     isOpen: boolean;
     onOpen: () => void;
     onClose: () => void;

package/lib/core/hooks/{use-search.js → search/use-search-dialog.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
+exports.useSearchDialog = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
-const hooks_1 = require("../../core/hooks");
-function useSearch() {
+const hooks_1 = require("../../../core/hooks");
+function useSearchDialog() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -40,5 +40,5 @@ function useSearch() {
     (0, react_1.useEffect)(onClose, [location]);
     return { isOpen, onOpen, onClose };
 }
-exports.useSearch = useSearch;
-//# sourceMappingURL=use-search.js.map
+exports.useSearchDialog = useSearchDialog;
+//# sourceMappingURL=use-search-dialog.js.map

package/lib/core/hooks/search/use-search-filter.d.ts

@@ -0,0 +1,9 @@
+import type { SearchFilterItem } from '../../../core/types';
+export declare function useSearchFilter(filter: SearchFilterItem[], setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>): {
+    onFacetReset: (field: string) => void;
+    onTopFacetsReset: () => void;
+    onFilterChange: (field: string, value: string | string[] | undefined, isTop?: boolean) => void;
+    onFilterReset: () => void;
+    onFilterToggle: () => void;
+    isFilterOpen: boolean;
+};