@redocly/theme 0.42.2 → 0.43.0

package/lib/core/types/select.d.ts

@@ -0,0 +1,31 @@
+import type React from 'react';
+export type SelectOption<T> = {
+    value: T;
+    element?: React.ReactNode | JSX.Element | string;
+    label?: string;
+};
+export type SelectProps<T = any> = {
+    value?: SelectOption<T> | SelectOption<T>[] | T | T[];
+    options: SelectOption<T>[];
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    onlyIcon?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    hideCheckmarkIcon?: boolean;
+    checkmarkIconPosition?: 'start' | 'end';
+    dataTestId?: string;
+    icon?: React.ReactNode;
+    footer?: React.ReactNode;
+    onChange?: (value: T | T[]) => void;
+    renderInput?: () => React.ReactElement;
+    renderDivider?: () => React.ReactElement;
+    onSearch?: (value: T | null) => void;
+};

package/lib/core/types/{select-option.js → select.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=select-option.js.map
+//# sourceMappingURL=select.js.map

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

@@ -24,3 +24,4 @@ export * from '../../core/utils/format-date-without-timezone';
 export * from '../../core/utils/details';
 export * from '../../core/utils/get-navbar-element';
 export * from '../../core/utils/with-load-progress';
+export * from '../../core/utils/text-trimmer';

package/lib/core/utils/index.js

@@ -40,4 +40,5 @@ __exportStar(require("../../core/utils/format-date-without-timezone"), exports);
 __exportStar(require("../../core/utils/details"), exports);
 __exportStar(require("../../core/utils/get-navbar-element"), exports);
 __exportStar(require("../../core/utils/with-load-progress"), exports);
+__exportStar(require("../../core/utils/text-trimmer"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/text-trimmer.d.ts

@@ -0,0 +1 @@
+export declare function trimText(text: string | string[], maxLength?: number): string | string[];

package/lib/core/utils/text-trimmer.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.trimText = void 0;
+function trimText(text, maxLength = 150) {
+    if (typeof text === 'string') {
+        if (text.length <= maxLength) {
+            return text;
+        }
+        else
+            return `${text.slice(0, maxLength)}...`;
+    }
+    else
+        return text;
+}
+exports.trimText = trimText;
+//# sourceMappingURL=text-trimmer.js.map

package/lib/icons/ResetIcon/ResetIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ResetIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ResetIcon/ResetIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z", fill: "#1A1C21" })));
+exports.ResetIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ResetIcon/ResetIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ResetIcon.js.map

package/lib/icons/SettingsIcon/SettingsIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const SettingsIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/SettingsIcon/SettingsIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M15.875 2.5H13.5687C13.2875 1.20625 12.1625 0.25 10.8125 0.25C9.4625 0.25 8.3375 1.20625 8.05625 2.5H0.125V3.625H8.05625C8.3375 4.91875 9.4625 5.875 10.8125 5.875C12.1625 5.875 13.2875 4.91875 13.5687 3.625H15.875V2.5ZM10.8125 4.75C9.85625 4.75 9.125 4.01875 9.125 3.0625C9.125 2.10625 9.85625 1.375 10.8125 1.375C11.7688 1.375 12.5 2.10625 12.5 3.0625C12.5 4.01875 11.7688 4.75 10.8125 4.75Z", fill: "#22242B" }),
+    react_1.default.createElement("path", { d: "M0.125 11.5H2.43125C2.7125 12.7937 3.8375 13.75 5.1875 13.75C6.5375 13.75 7.6625 12.7937 7.94375 11.5H15.875V10.375H7.94375C7.6625 9.08125 6.5375 8.125 5.1875 8.125C3.8375 8.125 2.7125 9.08125 2.43125 10.375H0.125V11.5ZM5.1875 9.25C6.14375 9.25 6.875 9.98125 6.875 10.9375C6.875 11.8938 6.14375 12.625 5.1875 12.625C4.23125 12.625 3.5 11.8938 3.5 10.9375C3.5 9.98125 4.23125 9.25 5.1875 9.25Z", fill: "#22242B" })));
+exports.SettingsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/SettingsIcon/SettingsIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=SettingsIcon.js.map

package/lib/index.d.ts

@@ -11,7 +11,7 @@ export * from './components/Badge/Badge';
 export * from './components/Dropdown/Dropdown';
 export * from './components/Dropdown/DropdownMenu';
 export * from './components/Dropdown/DropdownMenuItem';
-export * from './components/Loading/Loading';
+export * from './components/Loaders/Loading';
 export * from './components/Link/Link';
 export * from './components/Portal/Portal';
 export * from './components/Segmented/Segmented';
@@ -112,6 +112,11 @@ export * from './components/Search/SearchShortcut';
 export * from './components/Search/SearchTrigger';
 export * from './components/Search/SearchRecent';
 export * from './components/Search/SearchSuggestedPages';
+export * from './components/Search/SearchGroups';
+export * from './components/Search/SearchFilter';
+export * from './components/Search/SearchFilterField';
+export * from './components/Search/FilterFields/SearchFilterFieldSelect';
+export * from './components/Search/FilterFields/SearchFilterFieldTags';
 export * from './icons/ArrowRightIcon/ArrowRightIcon';
 export * from './icons/ArrowUpRightIcon/ArrowUpRightIcon';
 export * from './icons/ArrowLeftIcon/ArrowLeftIcon';
@@ -126,6 +131,7 @@ export * from './icons/FolderAddIcon/FolderAddIcon';
 export * from './icons/FolderIcon/FolderIcon';
 export * from './icons/FolderMoveToIcon/FolderMoveToIcon';
 export * from './icons/SelectIcon/SelectIcon';
+export * from './icons/SettingsIcon/SettingsIcon';
 export * from './icons/CloseIcon/CloseIcon';
 export * from './icons/CloseOutlineIcon/CloseOutlineIcon';
 export * from './icons/CloseFilledIcon/CloseFilledIcon';
@@ -173,6 +179,7 @@ export * from './icons/MobileSidebarIcon/MobileSidebarIcon';
 export * from './icons/CopyLinkIcon/CopyLinkIcon';
 export * from './icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon';
 export * from './icons/RenewIcon/RenewIcon';
+export * from './icons/ResetIcon/ResetIcon';
 export * from './icons/WarningAltIcon/WarningAltIcon';
 export * from './icons/MoonIcon/MoonIcon';
 export * from './icons/SunIcon/SunIcon';

package/lib/index.js

@@ -41,7 +41,7 @@ __exportStar(require("./components/Badge/Badge"), exports);
 __exportStar(require("./components/Dropdown/Dropdown"), exports);
 __exportStar(require("./components/Dropdown/DropdownMenu"), exports);
 __exportStar(require("./components/Dropdown/DropdownMenuItem"), exports);
-__exportStar(require("./components/Loading/Loading"), exports);
+__exportStar(require("./components/Loaders/Loading"), exports);
 __exportStar(require("./components/Link/Link"), exports);
 __exportStar(require("./components/Portal/Portal"), exports);
 __exportStar(require("./components/Segmented/Segmented"), exports);
@@ -163,6 +163,11 @@ __exportStar(require("./components/Search/SearchShortcut"), exports);
 __exportStar(require("./components/Search/SearchTrigger"), exports);
 __exportStar(require("./components/Search/SearchRecent"), exports);
 __exportStar(require("./components/Search/SearchSuggestedPages"), exports);
+__exportStar(require("./components/Search/SearchGroups"), exports);
+__exportStar(require("./components/Search/SearchFilter"), exports);
+__exportStar(require("./components/Search/SearchFilterField"), exports);
+__exportStar(require("./components/Search/FilterFields/SearchFilterFieldSelect"), exports);
+__exportStar(require("./components/Search/FilterFields/SearchFilterFieldTags"), exports);
 /* Icons */
 __exportStar(require("./icons/ArrowRightIcon/ArrowRightIcon"), exports);
 __exportStar(require("./icons/ArrowUpRightIcon/ArrowUpRightIcon"), exports);
@@ -178,6 +183,7 @@ __exportStar(require("./icons/FolderAddIcon/FolderAddIcon"), exports);
 __exportStar(require("./icons/FolderIcon/FolderIcon"), exports);
 __exportStar(require("./icons/FolderMoveToIcon/FolderMoveToIcon"), exports);
 __exportStar(require("./icons/SelectIcon/SelectIcon"), exports);
+__exportStar(require("./icons/SettingsIcon/SettingsIcon"), exports);
 __exportStar(require("./icons/CloseIcon/CloseIcon"), exports);
 __exportStar(require("./icons/CloseOutlineIcon/CloseOutlineIcon"), exports);
 __exportStar(require("./icons/CloseFilledIcon/CloseFilledIcon"), exports);
@@ -225,6 +231,7 @@ __exportStar(require("./icons/MobileSidebarIcon/MobileSidebarIcon"), exports);
 __exportStar(require("./icons/CopyLinkIcon/CopyLinkIcon"), exports);
 __exportStar(require("./icons/OverflowMenuHorizontalIcon/OverflowMenuHorizontalIcon"), exports);
 __exportStar(require("./icons/RenewIcon/RenewIcon"), exports);
+__exportStar(require("./icons/ResetIcon/ResetIcon"), exports);
 __exportStar(require("./icons/WarningAltIcon/WarningAltIcon"), exports);
 __exportStar(require("./icons/MoonIcon/MoonIcon"), exports);
 __exportStar(require("./icons/SunIcon/SunIcon"), exports);

package/lib/markdoc/components/Cards/Card.js

@@ -17,10 +17,10 @@ function Card({ title, image, icon, iconRawContent, imagePosition = 'start', lay
     const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
     iconVariant = iconVariant !== null && iconVariant !== void 0 ? iconVariant : (variant === 'ghost' ? 'filled' : 'ghost');
-    return (react_1.default.createElement(CardWrapper, { as: to ? Link_1.Link : 'div', to: to, "aria-labelledby": cardTitleId, variant: variant, layout: layout, isCardLink: !!to },
+    return (react_1.default.createElement(CardWrapper, { as: to ? Link_1.Link : 'div', to: to, "aria-labelledby": cardTitleId, "$variant": variant, "$layout": layout, "$isCardLink": !!to },
         react_1.default.createElement(react_1.default.Fragment, null,
             image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
-            react_1.default.createElement(CardContentWrapper, { layout: layout, alignItems: alignItems, textAlign: textAlign, hasImage: image !== undefined },
+            react_1.default.createElement(CardContentWrapper, { "$layout": layout, "$alignItems": alignItems, "$textAlign": textAlign, "$hasImage": image !== undefined },
                 icon && react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent }),
                 react_1.default.createElement(ContentWrapper, null,
                     react_1.default.createElement(Title, { id: cardTitleId, "$isCardLink": !!to, "$justifyContent": justifyContent },
@@ -31,13 +31,13 @@ function Card({ title, image, icon, iconRawContent, imagePosition = 'start', lay
 exports.Card = Card;
 const CardContentWrapper = styled_components_1.default.div `
   display: flex;
-  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  flex-direction: ${({ $layout }) => ($layout === 'horizontal' ? 'row' : 'column')};
   gap: var(--card-icon-gap);
-  align-items: ${({ alignItems }) => alignItems};
-  text-align: ${({ textAlign }) => textAlign};
+  align-items: ${({ $alignItems }) => $alignItems};
+  text-align: ${({ $textAlign }) => $textAlign};
   flex-grow: 1;
   padding: var(--card-padding);
-  height: ${({ hasImage }) => (hasImage ? 'auto' : '100%')};
+  height: ${({ $hasImage }) => ($hasImage ? 'auto' : '100%')};
 `;
 const ContentWrapper = styled_components_1.default.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.42.2",
+  "version": "0.43.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -88,7 +88,7 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.91.0"
+    "webpack": "5.94.0"
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
@@ -99,7 +99,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.11.0"
+    "@redocly/config": "0.12.0"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Dropdown/DropdownMenu.tsx

@@ -7,7 +7,7 @@ import type { DropdownMenuItemProps } from '@redocly/theme/components/Dropdown/D
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 
 export type DropdownMenuProps =
-  | { className?: string; role?: string } & (
+  | { className?: string; role?: string; footer?: React.ReactNode } & (
       | {
           items: DropdownMenuItemProps[];
         }
@@ -37,6 +37,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
       role={props.role || 'menu'}
     >
       {content}
+      {props.footer || null}
     </DropdownMenuWrapper>
   );
 }

package/src/components/Filter/FilterSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { FilterProps } from '@redocly/theme/core/types';
+import type { FilterProps, SelectProps, SelectOption } from '@redocly/theme/core/types';
 
 import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
 import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
@@ -15,7 +15,7 @@ export function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.E
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  let selectOptions: { value: string; element: React.ReactNode }[] = [];
+  let selectOptions: SelectOption<string>[] = [];
 
   const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
 
@@ -64,7 +64,7 @@ const FilterSelectWrapper = styled.div`
   gap: var(--filter-select-wrapper-gap);
 `;
 
-const StyledSelect = styled(Select)`
+const StyledSelect = styled(Select)<SelectProps>`
   --select-list-max-width: var(--filter-select-max-width);
 
   min-height: var(--filter-select-min-height);

package/src/components/Loaders/SpinnerLoader.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export type LoadingProps = {
+  color: string;
+  size: string;
+};
+
+export function SpinnerLoader({ color, size }: LoadingProps): JSX.Element {
+  return <Spinner color={color} size={size} />;
+}
+
+const Spinner = styled.div<{ color: string; size: string }>`
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border: 3px solid ${({ color }) => color};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Select } from '@redocly/theme/components/Select/Select';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+
+type SearchFilterFieldSelectProps = {
+  className?: string;
+  facet: SearchFacet;
+  filter: SearchFilterItem[];
+  query: string;
+  selectedValues: string[];
+  onChange: (value: string | string[]) => void;
+};
+
+export function SearchFilterFieldSelect({
+  facet,
+  filter,
+  query,
+  selectedValues,
+  onChange,
+}: SearchFilterFieldSelectProps) {
+  const MAX_SELECT_OPTIONS = 20;
+  const { useFacetQuery, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  const [selectOptions, setSelectOptions] = useState<any[]>([]);
+  const isMultiple = facet.type === 'multi-select';
+
+  useEffect(() => {
+    setSelectOptions(getSelectOptions());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFacet, facet]);
+
+  const onSearch = (value: string | null) => {
+    if (value === null) {
+      setSearchFacet(null);
+      setSearchFacetQuery(null);
+    } else if (typeof value === 'string') {
+      setSearchFacetQuery({
+        query,
+        filter,
+        facetQuery: value,
+      });
+    }
+  };
+
+  const getSelectOptions = () => {
+    return searchFacet
+      ? searchFacet.values.map(facetValueToSelectOption)
+      : facet.values.map(facetValueToSelectOption);
+  };
+
+  const facetValueToSelectOption = (facetValue?: SearchFacetCount | string) => {
+    if (!facetValue) {
+      return { element: null, value: '' };
+    }
+    if (typeof facetValue === 'string') {
+      return {
+        element: (
+          <FilterSelectOptionWrapper>
+            <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
+          </FilterSelectOptionWrapper>
+        ),
+        value: facetValue,
+      };
+    } else {
+      const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+      return {
+        element: (
+          <FilterSelectOptionWrapper>
+            <FilterSelectOptionText>{value}</FilterSelectOptionText>
+            {isCounterVisible && <CounterTag>{count}</CounterTag>}
+          </FilterSelectOptionWrapper>
+        ),
+        value: value,
+      };
+    }
+  };
+
+  return (
+    <Select
+      value={
+        selectedValues.length
+          ? isMultiple
+            ? selectedValues.map((value) => facetValueToSelectOption(value))
+            : facetValueToSelectOption(selectedValues[0])
+          : undefined
+      }
+      options={selectOptions}
+      onChange={onChange}
+      placeholder={`${translate(
+        'theme.search.filter.field.placeholder',
+        'Search',
+      )} ${facet.name.toLowerCase()}...`}
+      alignment="start"
+      multiple={isMultiple}
+      searchable={true}
+      footer={
+        selectOptions.length === MAX_SELECT_OPTIONS ? (
+          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+        ) : null
+      }
+      onSearch={onSearch}
+      checkmarkIconPosition="start"
+    />
+  );
+}
+
+const FilterSelectOptionWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--search-filter-field-select-option-gap);
+`;
+
+const FilterSelectOptionText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--search-filter-field-select-option-text-padding);
+`;
+
+const FilterSelectFooter = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-filter-field-select-footer-padding);
+  color: var(--search-filter-field-select-footer-text-color);
+`;

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
+
+import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+
+type SearchFilterFieldTagsProps = {
+  className?: string;
+  facet: SearchFacet;
+  selectedValues: string[];
+  onChange: (value: string | string[]) => void;
+};
+
+export function SearchFilterFieldTags({
+  className,
+  facet,
+  selectedValues,
+  onChange,
+}: SearchFilterFieldTagsProps) {
+  return (
+    <FilterTagsWrapper
+      data-component-name="Search/FilterFields/SearchFilterFieldTags"
+      className={className}
+    >
+      {facet.values.map((facetCount, index) => {
+        const { value, count, isCounterVisible } = facetCount as SearchFacetCount;
+        const active = selectedValues.includes(value);
+        return (
+          <FilterTagWrapper
+            key={`${count}-${index}`}
+            color={value}
+            onClick={() => {
+              const values = active
+                ? selectedValues.filter((item) => item !== value)
+                : [...selectedValues, value];
+              onChange(values);
+            }}
+            active={active}
+            borderless
+          >
+            {value} {isCounterVisible && <span>{count}</span>}
+          </FilterTagWrapper>
+        );
+      })}
+    </FilterTagsWrapper>
+  );
+}
+
+const FilterTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-filter-field-tags-gap);
+`;
+
+const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+  text-transform: uppercase;
+  cursor: pointer;
+  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
+  margin: var(--search-filter-field-tags-tag-margin);
+`;

package/src/components/Search/Search.tsx

@@ -3,14 +3,14 @@ import styled from 'styled-components';
 
 import { SearchTrigger } from '@redocly/theme/components/Search/SearchTrigger';
 import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
-import { useSearch } from '@redocly/theme/core/hooks';
+import { useSearchDialog } from '@redocly/theme/core/hooks';
 
 export type SearchProps = {
   className?: string;
 };
 
 export function Search({ className }: SearchProps): JSX.Element {
-  const { isOpen, onOpen, onClose } = useSearch();
+  const { isOpen, onOpen, onClose } = useSearchDialog();
 
   return (
     <SearchWrapper data-component-name="Search/Search" className={className}>