@redocly/theme 0.13.0 → 0.14.0

package/src/globalStyle.ts

@@ -1839,24 +1839,26 @@ const search = css`
       * @tokens Search
       */
 
-  --search-highlight-text-color: #ffff03; // @presenter Color
+  --search-highlight-background-color: none; // @presenter Color
+  --search-highlight-text-color: #1677FF; // @presenter Color
 
   /**
       * @tokens Portal Search
       */
 
-  --search-input-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
-  --search-input-text-color: #fff; // @presenter Color
+  --search-input-background-color: #fafafa; // @presenter Color
+  --search-input-text-color: var(--text-color); // @presenter Color
 
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
-  --search-input-font-size: var(--navbar-item-font-size); // @presenter FontSize
+  --search-input-font-size: 14px; // @presenter FontSize
   --search-input-font-family: var(--font-family-base); // @presenter FontFamily
   --search-input-line-height: 1.15em; // @presenter LineHeight
 
-  --search-input-hover-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-input-hover-background-color: #fafafa; // @presenter Color
   --search-input-hover-border: none; // @presenter Color
-  --search-input-placeholder-color: var(--search-input-text-color);
+  --search-input-placeholder-color: #a8a8a8;
+  --search-input-icons-color: #a8a8a8;
 
   --search-popover-background-color: var(--background-color); // @presenter Color
   --search-popover-border-radius: var(--search-input-border-radius); // @presenter BorderRadius
@@ -1865,12 +1867,21 @@ const search = css`
   --search-popover-border: none;
 
   --search-item-padding: 8px 24px;
-  --search-item-text-color: var(--text-color-secondary); // @presenter Color
-  --search-item-title-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-text-color: #525252; // @presenter Color
+  --search-item-title-text-color: #161616; // @presenter Color
+  --search-item-path-text-color: #8d8d8d; // @presenter Color
   --search-item-background-color: transparent; // @presenter Color
-  --search-item-active-text-color: var(--text-color-secondary); // @presenter Color
+  --search-item-active-text-color: var(--text-color); // @presenter Color
   --search-item-active-title-text-color: var(--text-color); // @presenter Color
-  --search-item-active-background-color: rgba(0, 68, 212, 0.1); // @presenter Color
+  --search-item-active-background-color: #fafafa; // @presenter Color
+
+  --search-trigger-background-color: rgba(255, 255, 255, 0.1); // @presenter Color
+  --search-trigger-hover-background-color: var(--navbar-item-hover-background-color); // @presenter Color
+  --search-trigger-border: none; // @presenter Border
+  --search-trigger-border-radius: 6px; // @presenter BorderRadius
+  --search-trigger-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-shortcut-text-color: var(--navbar-text-color); // @presenter Color
+  --search-trigger-font-size: var(--navbar-item-font-size); // @presenter FontSize
 
   /**
     * @tokens Sidebar Search
@@ -2045,7 +2056,7 @@ const modal = css`
     overflow: hidden;
   }
 
-  --modal-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
+  --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
   --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
   --modal-background-color: var(--background-color);
 `

package/src/hooks/useDialogHotKeys.ts

@@ -0,0 +1,48 @@
+import { useEffect, useRef } from 'react';
+
+import type { MutableRefObject } from 'react';
+
+export function useDialogHotKeys(
+  ref: MutableRefObject<HTMLElement | null>,
+  onClose: () => void,
+): void {
+  const firstFocusableRef = useRef<HTMLElement>();
+  const lastFocusableRef = useRef<HTMLElement>();
+
+  const onKeyDownHandler = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onClose();
+    } else if (event.key === 'Tab') {
+      if (!event.shiftKey && document.activeElement === lastFocusableRef.current) {
+        event.preventDefault();
+        firstFocusableRef.current?.focus();
+      } else if (event.shiftKey && document.activeElement === firstFocusableRef.current) {
+        event.preventDefault();
+        lastFocusableRef.current?.focus();
+      }
+    }
+  };
+
+  const onFocusableElementsHandler = () => {
+    const focusableElements = ref.current?.querySelectorAll(
+      'input, [href], [tabindex]:not([tabindex="-1"])',
+    );
+    if (focusableElements && focusableElements.length > 0) {
+      firstFocusableRef.current = focusableElements[0] as HTMLElement;
+      lastFocusableRef.current = focusableElements[focusableElements.length - 1] as HTMLElement;
+      firstFocusableRef.current?.focus();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDownHandler);
+    return () => {
+      document.removeEventListener('keydown', onKeyDownHandler);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    onFocusableElementsHandler();
+  });
+}

package/src/icons/SpinnerIcon/SpinnerIcon.tsx

@@ -27,13 +27,11 @@ export const Icon = ({ className }: SpinnerIconProps) => (
 export const SpinnerIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/AnchorIcon/AnchorIcon',
 }))`
-  position: absolute;
   cursor: pointer;
   width: 1em;
   height: 1em;
   left: 0.8em;
   stroke: var(--search-input-text-color);
-  z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 1.2em;

package/src/mocks/search.ts

@@ -21,7 +21,7 @@ interface SearchDocument {
 export function useFuseSearch(): {
   query: string;
   setQuery: (val: string) => void;
-  items: SearchDocument[];
+  items: SearchDocument[] | null;
   isLoading: boolean;
 } {
   const [query, setQuery] = useState('');
@@ -46,3 +46,21 @@ export function useFuseSearch(): {
     ],
   };
 }
+
+export const useRecentSearches = () => {
+  const items = ['test'];
+  return {
+    items,
+    addSearchHistoryItem: (value: string) => value,
+    removeSearchHistoryItem: (value: string) => value,
+  };
+};
+
+export const useSuggestedPages = () => {
+  return [
+    {
+      link: '/',
+      label: 'some page',
+    },
+  ];
+};

package/src/types/portal/src/shared/types/activeItem.ts

@@ -1 +1 @@
-export type ActiveItem<T> = T & { active: boolean };
+export type ActiveItem<T> = T & { active?: boolean };

package/src/ui/darkColors.tsx

@@ -45,9 +45,14 @@ export const darkMode = css`
   --button-border-color: #0065fb;
   --button-hover-background-color: #2b4cc4;
   --button-hover-border-color: #2b4cc4;
+  --search-input-background-color: #1b2738;
   --search-popover-background-color: #1b2738;
   --search-highlight-text-color: #ffff03;
-  --search-item-active-background-color: #1f3559;
+  --search-item-text-color: #ffffffcf;
+  --search-item-title-text-color: #ffffff;
+  --search-item-active-text-color: var(--text-color);
+  --search-item-active-title-text-color: var(--text-color);
+  --search-item-active-background-color: #1b2738;
   --panel-try-it-nested-body-background-color: #263041;
   --panel-try-it-tabs-active-background-color: #11151d;
   --panel-try-it-tabs-hover-background-color: #141a26;

package/lib/components/Search/Autocomplete.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import type { ReactNode } from 'react';
-import type { ActiveItem } from '../../types/portal/src/shared/types/activeItem';
-interface AutocompleteProps<T> {
-    placeholder?: string;
-    value: string;
-    items: T[] | null;
-    renderItem(item: ActiveItem<T>): ReactNode;
-    change(value: string): void;
-    select(item: T): void;
-    inputRef?: React.RefObject<HTMLInputElement>;
-    keyShortcuts?: string[];
-    isLoading: boolean;
-}
-export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, keyShortcuts, isLoading, }: AutocompleteProps<T>): JSX.Element;
-export {};

package/lib/components/Search/Autocomplete.js

@@ -1,132 +0,0 @@
-"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.Autocomplete = void 0;
-const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const styled_components_1 = __importDefault(require("styled-components"));
-const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
-const Input_1 = require("../../components/Search/Input");
-const Popover_1 = require("../../components/Search/Popover");
-const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
-const hooks_1 = require("../../mocks/hooks");
-const SearchIcon_1 = require("../../components/Search/SearchIcon");
-const SpinnerIcon_1 = require("../../icons/SpinnerIcon");
-const ClearIcon_1 = require("../../components/Search/ClearIcon");
-function Autocomplete({ placeholder, value, items, change, select, renderItem, keyShortcuts, isLoading, }) {
-    const location = (0, react_router_dom_1.useLocation)();
-    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
-    const [activeIdx, setActiveIdx] = (0, react_1.useState)(-1);
-    const refInput = (0, react_1.useRef)(null);
-    const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        noResults: 'theme.search.noResults',
-    };
-    const hotkeysKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
-    (0, react_1.useEffect)(() => {
-        if (hotkeysKeys) {
-            (0, hotkeys_js_1.default)(hotkeysKeys, (ev) => {
-                var _a;
-                (_a = refInput.current) === null || _a === void 0 ? void 0 : _a.focus();
-                ev.preventDefault();
-            });
-            return () => hotkeys_js_1.default.unbind(hotkeysKeys);
-        }
-    }, [hotkeysKeys]);
-    const onFocus = () => setIsFocused(true);
-    const close = () => {
-        setIsFocused(false);
-        setActiveIdx(-1);
-    };
-    const reset = () => {
-        change('');
-        close();
-    };
-    const stopPropagation = (event) => event.stopPropagation();
-    const onChange = (event) => {
-        setActiveIdx(-1);
-        setIsFocused(true);
-        change(event.target.value);
-    };
-    const onKeydown = (event) => {
-        if (items === null)
-            return;
-        switch (event.code) {
-            case 'Escape':
-                close();
-                event.currentTarget.blur();
-                break;
-            case 'ArrowDown':
-                setActiveIdx(Math.min(activeIdx + 1, items.length - 1));
-                event.preventDefault();
-                break;
-            case 'ArrowUp':
-                setActiveIdx(Math.max(0, activeIdx - 1));
-                break;
-            case 'Enter':
-                if (activeIdx > -1) {
-                    reset();
-                    select(items[activeIdx]);
-                }
-                break;
-        }
-    };
-    const mapItem = (item, idx) => {
-        const active = idx === activeIdx;
-        return renderItem(Object.assign(Object.assign({}, item), { active }));
-    };
-    (0, react_1.useEffect)(close, [location]);
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Autocomplete" },
-        isFocused ? react_1.default.createElement(Overlay, { onClick: close }) : null,
-        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown },
-            isFocused && isLoading ? react_1.default.createElement(SpinnerIcon_1.SpinnerIcon, null) : react_1.default.createElement(SearchIcon_1.SearchIcon, null),
-            react_1.default.createElement(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: onFocus, onClick: stopPropagation, ref: refInput }),
-            isFocused ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts }),
-            isFocused && items !== null && value && (react_1.default.createElement(Popover_1.Popover, null, items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": translationKeys.noResults }, translate(translationKeys.noResults, 'No results'))))))));
-}
-exports.Autocomplete = Autocomplete;
-const Wrapper = styled_components_1.default.div ``;
-const AutocompleteBox = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 1;
-`;
-const Overlay = styled_components_1.default.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-`;
-const Message = styled_components_1.default.div `
-  padding: 24px;
-  color: var(--search-item-title-text-color);
-`;
-//# sourceMappingURL=Autocomplete.js.map

package/lib/components/Search/Parameters.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { OperationParameter } from '../../types/portal/src/shared/types/searchDocument';
-interface ParametersProps {
-    parameters: OperationParameter[];
-}
-export declare function Parameters({ parameters }: ParametersProps): JSX.Element;
-export {};

package/lib/components/Search/Parameters.js

@@ -1,55 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Parameters = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../components/Search/utils");
-const MAX_ITEMS = 2;
-function Parameters({ parameters = [] }) {
-    const moreItems = Math.max(0, parameters.length - MAX_ITEMS);
-    if (moreItems) {
-        parameters.length = MAX_ITEMS;
-    }
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Parameters" },
-        parameters.map((param) => {
-            var _a, _b;
-            const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(Place, null,
-                    path,
-                    (0, utils_1.highlight)(param.name),
-                    " ",
-                    react_1.default.createElement("br", null),
-                    (0, utils_1.highlight)(param.description))));
-        }),
-        moreItems ? react_1.default.createElement(MoreText, null,
-            "and ",
-            moreItems,
-            " more...") : null));
-}
-exports.Parameters = Parameters;
-const Wrapper = styled_components_1.default.div `
-  border-left: 1px solid var(--border-color);
-  padding: 0 12px;
-  margin-top: 8px;
-  margin-bottom: 4px;
-`;
-const Place = styled_components_1.default.div `
-  font-size: var(--font-size-small);
-  padding-top: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:first-child {
-    padding-top: 0;
-  }
-`;
-const MoreText = styled_components_1.default.div `
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-regular);
-  padding-top: 4px;
-`;
-//# sourceMappingURL=Parameters.js.map

package/src/components/Search/Autocomplete.tsx

@@ -1,162 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import styled from 'styled-components';
-import hotkeys from 'hotkeys-js';
-
-import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
-
-import { FormInput } from '@theme/components/Search/Input';
-import { Popover } from '@theme/components/Search/Popover';
-import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
-import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
-import { useTranslate } from '@portal/hooks';
-import { SearchIcon } from '@theme/components/Search/SearchIcon';
-import { SpinnerIcon } from '@theme/icons/SpinnerIcon';
-import { ClearIcon } from '@theme/components/Search/ClearIcon';
-
-interface AutocompleteProps<T> {
-  placeholder?: string;
-  value: string;
-  items: T[] | null;
-  renderItem(item: ActiveItem<T>): ReactNode;
-  change(value: string): void;
-  select(item: T): void;
-  inputRef?: React.RefObject<HTMLInputElement>;
-  keyShortcuts?: string[];
-  isLoading: boolean;
-}
-
-export function Autocomplete<T>({
-  placeholder,
-  value,
-  items,
-  change,
-  select,
-  renderItem,
-  keyShortcuts,
-  isLoading,
-}: AutocompleteProps<T>): JSX.Element {
-  const location = useLocation();
-  const [isFocused, setIsFocused] = useState(false);
-  const [activeIdx, setActiveIdx] = useState(-1);
-  const refInput = useRef<HTMLInputElement>(null);
-  const { translate } = useTranslate();
-  const translationKeys = {
-    noResults: 'theme.search.noResults',
-  };
-
-  const hotkeysKeys = keyShortcuts?.join(',');
-
-  useEffect(() => {
-    if (hotkeysKeys) {
-      hotkeys(hotkeysKeys, (ev) => {
-        refInput.current?.focus();
-        ev.preventDefault();
-      });
-
-      return () => hotkeys.unbind(hotkeysKeys as string);
-    }
-  }, [hotkeysKeys]);
-
-  const onFocus = () => setIsFocused(true);
-
-  const close = () => {
-    setIsFocused(false);
-    setActiveIdx(-1);
-  };
-
-  const reset = () => {
-    change('');
-    close();
-  };
-
-  const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
-
-  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setActiveIdx(-1);
-    setIsFocused(true);
-    change(event.target.value);
-  };
-
-  const onKeydown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (items === null) return;
-    switch (event.code) {
-      case 'Escape':
-        close();
-        event.currentTarget.blur();
-        break;
-      case 'ArrowDown':
-        setActiveIdx(Math.min(activeIdx + 1, items.length - 1));
-        event.preventDefault();
-        break;
-      case 'ArrowUp':
-        setActiveIdx(Math.max(0, activeIdx - 1));
-        break;
-      case 'Enter':
-        if (activeIdx > -1) {
-          reset();
-          select(items[activeIdx]);
-        }
-        break;
-    }
-  };
-
-  const mapItem = (item: T, idx: number) => {
-    const active = idx === activeIdx;
-    return renderItem({ ...item, active });
-  };
-
-  useEffect(close, [location]);
-
-  return (
-    <Wrapper data-component-name="Search/Autocomplete">
-      {isFocused ? <Overlay onClick={close} /> : null}
-      <AutocompleteBox onKeyDown={onKeydown}>
-        {isFocused && isLoading ? <SpinnerIcon /> : <SearchIcon />}
-        <FormInput
-          value={value}
-          placeholder={placeholder}
-          onChange={onChange}
-          onFocus={onFocus}
-          onClick={stopPropagation}
-          ref={refInput}
-        />
-        {isFocused ? <ClearIcon onClick={reset} /> : <ShortcutKey keyShortcuts={keyShortcuts} />}
-        {isFocused && items !== null && value && (
-          <Popover>
-            {items.length ? (
-              items.map(mapItem)
-            ) : (
-              <Message data-translation-key={translationKeys.noResults}>
-                {translate(translationKeys.noResults, 'No results')}
-              </Message>
-            )}
-          </Popover>
-        )}
-      </AutocompleteBox>
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div``;
-
-const AutocompleteBox = styled.div`
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 1;
-`;
-
-const Overlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1;
-`;
-
-const Message = styled.div`
-  padding: 24px;
-  color: var(--search-item-title-text-color);
-`;

package/src/components/Search/Parameters.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { highlight } from '@theme/components/Search/utils';
-import type { OperationParameter } from '@theme/types/portal/src/shared/types/searchDocument';
-interface ParametersProps {
-  parameters: OperationParameter[];
-}
-
-const MAX_ITEMS = 2;
-
-export function Parameters({ parameters = [] }: ParametersProps): JSX.Element {
-  const moreItems = Math.max(0, parameters.length - MAX_ITEMS);
-  if (moreItems) {
-    parameters.length = MAX_ITEMS;
-  }
-
-  return (
-    <Wrapper data-component-name="Search/Parameters">
-      {parameters.map((param) => {
-        const path = `${param.place} → ${
-          param.path?.length ? param.path?.join(' → ') + ' → ' : ''
-        }`;
-        return (
-          <>
-            <Place>
-              {path}
-              {highlight(param.name)} <br />
-              {highlight(param.description)}
-            </Place>
-          </>
-        );
-      })}
-      {moreItems ? <MoreText>and {moreItems} more...</MoreText> : null}
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  border-left: 1px solid var(--border-color);
-  padding: 0 12px;
-  margin-top: 8px;
-  margin-bottom: 4px;
-`;
-
-const Place = styled.div`
-  font-size: var(--font-size-small);
-  padding-top: 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  &:first-child {
-    padding-top: 0;
-  }
-`;
-
-const MoreText = styled.div`
-  font-size: var(--font-size-small);
-  font-weight: var(--font-weight-regular);
-  padding-top: 4px;
-`;