@redocly/theme 0.42.2 → 0.43.0

package/src/components/Select/SelectInput.tsx

@@ -0,0 +1,201 @@
+import styled from 'styled-components';
+import React, { useRef } from 'react';
+
+import type { SelectOption } from '@redocly/theme/core/types/select';
+
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+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;
+  clearable?: boolean;
+  clearHandler?: (value?: any) => void;
+  inputBlurHandler?: (e?: any) => void;
+  inputFocusHandler?: (e?: any) => void;
+  searchHandler?: (e?: any) => void;
+  clickHandler?: (e?: any) => void;
+};
+
+export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
+  const {
+    id,
+    onlyIcon,
+    icon,
+    customIcon,
+    selectedOptions,
+    placeholder,
+    stickyValue,
+    multiple,
+    searchable,
+    clearable,
+    clearHandler,
+    searchHandler,
+    clickHandler,
+    searchValue,
+    inputBlurHandler,
+    inputFocusHandler,
+  } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const onChangeHandler = (e: any) => {
+    searchHandler?.(e);
+    inputRef.current?.focus();
+  };
+
+  const onKeyDownHandler = (e: any) => {
+    e.stopPropagation();
+    if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {
+      clearHandler?.(selectedOptions[selectedOptions.length - 1]);
+      inputRef.current?.focus();
+    }
+  };
+
+  const onClickHandler = (e: React.MouseEvent) => {
+    clickHandler?.(e);
+  };
+
+  const onFocusHandler = (e: React.FocusEvent<HTMLDivElement>) => {
+    inputFocusHandler?.(e);
+    inputRef.current?.focus();
+  };
+
+  const onBlurHandler = (e: React.FocusEvent<HTMLDivElement>) => {
+    inputBlurHandler?.(e);
+  };
+
+  const onClearAllHandler = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    clearHandler?.();
+  };
+
+  const selectTags = selectedOptions.map((option, index) => (
+    <SelectInputTag
+      closable
+      key={index}
+      onClose={() => {
+        clearHandler?.(option);
+        inputRef.current?.focus();
+      }}
+    >
+      {option.label || (option.value as string) || option.element}
+    </SelectInputTag>
+  ));
+
+  const selectInput = (
+    <SelectInternalInput
+      value={
+        searchValue ||
+        (!multiple && !stickyValue && selectedOptions.length
+          ? selectedOptions[0].label || 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 || (selectedOptions[0].value as string)
+  ) : (
+    <SelectInternalInputPlaceholder>{placeholder}</SelectInternalInputPlaceholder>
+  );
+
+  const multipleValues = selectedOptions.length ? (
+    selectTags
+  ) : (
+    <SelectInternalInputPlaceholder>{placeholder}</SelectInternalInputPlaceholder>
+  );
+
+  return (
+    <SelectInputWrapper {...props} id={id} onFocus={onFocusHandler} onClick={onClickHandler}>
+      {!onlyIcon && (
+        <>
+          <SelectInputValue>
+            {multiple ? (
+              searchable ? (
+                <>
+                  {selectTags}
+                  {selectInput}
+                </>
+              ) : (
+                multipleValues
+              )
+            ) : searchable ? (
+              selectInput
+            ) : (
+              simpleValue
+            )}
+          </SelectInputValue>
+          {!!(clearable && selectedOptions.length) && (
+            <Button size="small" variant="text" icon={<CloseIcon />} onClick={onClearAllHandler} />
+          )}
+        </>
+      )}
+      {customIcon || icon}
+    </SelectInputWrapper>
+  );
+}
+
+export const SelectInputWrapper = styled.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.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 SelectInputTag = styled(Tag)`
+  --tag-content-padding: 0;
+`;
+
+const SelectInternalInput = styled.input.attrs(() => ({
+  type: 'text',
+}))<{ width?: string }>`
+  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 SelectInternalInputPlaceholder = styled.div`
+  color: var(--select-input-placeholder-color);
+  padding-left: 8px;
+`;

package/src/components/Select/variables.ts

@@ -9,10 +9,19 @@ export const select = 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-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
+  
   --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;
@@ -30,5 +39,7 @@ export const select = 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
 `;

package/src/components/Tag/Tag.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+
 type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'default';
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
@@ -35,14 +38,19 @@ 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 function Tag({
   children,
   color,
   icon,
+  active,
+  closable,
   onClick,
+  onClose,
   size,
   borderless,
   withStatusDot,
@@ -50,31 +58,66 @@ export function Tag({
   ...otherProps
 }: TagProps): JSX.Element {
   return (
-    <TagContainer
+    <TagWrapper
       data-component-name="Tag/Tag"
       borderless={borderless}
       color={color}
       size={size}
       onClick={onClick}
+      hasCloseButton={closable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
-      {children}
-    </TagContainer>
+      <ContentWrapper>{children}</ContentWrapper>
+      {closable && (
+        <CloseButton
+          onClick={(event) => {
+            onClose?.(event);
+          }}
+        >
+          <CloseIcon />
+        </CloseButton>
+      )}
+      {active && <ActiveIcon />}
+    </TagWrapper>
   );
 }
 
-const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) => ({
+const ContentWrapper = styled.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.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.div.attrs(({ className, color, size }: TagProps) => ({
   className:
     (className || '') +
     ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
-}))<TagProps>`
+}))<TagProps & { hasCloseButton?: boolean }>`
   display: inline-flex;
   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 {
@@ -107,3 +150,11 @@ const StatusDot = styled.div<{ color: string }>`
   border-radius: 50%;
   background-color: ${({ color }) => color};
 `;
+
+const ActiveIcon = styled(CheckmarkFilledIcon)`
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+`;

package/src/components/Tag/variables.dark.ts

@@ -1,11 +1,26 @@
 import { css } from 'styled-components';
 
 export const tagDarkMode = 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/src/components/Tag/variables.ts

@@ -7,7 +7,7 @@ export const tag = 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);
@@ -20,8 +20,17 @@ export const tag = 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
 
@@ -31,6 +40,7 @@ export const tag = 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);
   }
 
@@ -65,6 +75,7 @@ export const tag = 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,
@@ -73,6 +84,7 @@ export const tag = 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,
@@ -81,6 +93,7 @@ export const tag = 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,
@@ -89,6 +102,7 @@ export const tag = 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,
@@ -96,6 +110,7 @@ export const tag = 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,
@@ -103,26 +118,24 @@ export const tag = 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,
@@ -130,18 +143,21 @@ export const tag = 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
   }
 
   /**
@@ -156,12 +172,28 @@ export const tag = 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/src/components/VersionPicker/VersionPicker.tsx

@@ -2,17 +2,11 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { Version } from '@redocly/config';
+import type { SelectProps } from '@redocly/theme/core/types/select';
 
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
-import {
-  Select,
-  SelectInput,
-  SelectList,
-  SelectListItem,
-  type SelectProps,
-} from '@redocly/theme/components/Select/Select';
-
-export interface VersionPickerProps extends SelectProps {}
+import { Select } from '@redocly/theme/components/Select/Select';
+import { SelectInputWrapper } from '@redocly/theme/components/Select/SelectInput';
 
 export function VersionPicker(props: { versions?: Version[]; onChange: (v: Version) => void }) {
   const themeConfig = useThemeConfig();
@@ -22,19 +16,21 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
   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 = options.find((item) => item.active)?.value;
 
   if (versionPicker?.hide) {
     return null;
   }
 
-  const value = options.find((item) => item.active)?.value;
+  const handleOnChange = (value: SelectProps['value']) => {
+    const selectedVersion = versions.find((v) => v.version === value);
+    onChange(selectedVersion as Version);
+  };
 
   if (!options.length && !versionPicker?.showForUnversioned) return null;
 
@@ -48,7 +44,7 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
         disabled={!options.length}
         options={options}
         value={value}
-        onChange={onChange}
+        onChange={handleOnChange}
       />
     </VersionsPickerWrapper>
   );
@@ -71,32 +67,12 @@ export const VersionPickerSelect = styled(Select)<SelectProps>`
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
 
-  ${SelectInput} {
+  ${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);
   }
-
-  ${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);
-  }
-
-  ${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.div`

package/src/core/hooks/__mocks__/index.ts

@@ -4,6 +4,7 @@ export * from '@redocly/theme/core/hooks/__mocks__/use-mobile-menu';
 export * from '@redocly/theme/core/hooks/__mocks__/use-controlled-state';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-recent-searches';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-suggested-pages';
+export * from '@redocly/theme/core/hooks/__mocks__/search/use-search-filter';
 export * from '@redocly/theme/core/hooks/menu/__mocks__/use-mobile-menu-items';
 export * from '@redocly/theme/core/hooks/menu/use-collapse';
 export * from '@redocly/theme/core/hooks/use-active-heading';
@@ -20,5 +21,5 @@ export * from '@redocly/theme/core/hooks/menu/use-menu-item-expanded';
 export * from '@redocly/theme/core/hooks/menu/use-mobile-menu-levels';
 export * from '@redocly/theme/core/hooks/feedback/use-report-dialog';
 export * from '@redocly/theme/core/hooks/use-product-picker';
-export * from '@redocly/theme/core/hooks/use-search';
+export * from '@redocly/theme/core/hooks/search/use-search-dialog';
 export * from '@redocly/theme/core/hooks/use-language-picker';

package/src/core/hooks/__mocks__/search/use-search-filter.ts

@@ -0,0 +1,10 @@
+export const useSearchFilter = jest.fn(() => {
+  return {
+    isFilterOpen: false,
+    onFacetReset: () => {},
+    onFilterChange: () => {},
+    onFilterToggle: () => {},
+    onFilterReset: () => {},
+    onTopFacetsReset: () => {},
+  };
+});

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -36,12 +36,17 @@ export const useThemeHooks = jest.fn(() => ({
   })),
   useCurrentProduct: jest.fn(),
   useProducts: jest.fn(() => []),
-  useFuseSearch: jest.fn(() => ({
+  useSearch: jest.fn(() => ({
     query: jest.fn().mockReturnValue(''),
     setQuery: jest.fn(),
     items: [],
     isLoading: false,
   })),
+  useFacetQuery: jest.fn(() => ({
+    searchFacet: null,
+    setSearchFacet: jest.fn(),
+    setSearchFacetQuery: jest.fn(),
+  })),
   useUserMenu: jest.fn(() => ({
     userData: {
       isAuthenticated: true,