@redocly/theme 0.13.1 → 0.14.1

package/src/components/Search/Search.tsx

@@ -1,51 +1,49 @@
-import * as React from 'react';
+import React, { useEffect, useCallback, useState } from 'react';
 import styled from 'styled-components';
+import { useLocation } from 'react-router-dom';
+import hotkeys from 'hotkeys-js';
 
-import { useFuseSearch } from '@portal/search';
-import { Autocomplete } from '@theme/components/Search/Autocomplete';
-import { SearchItem } from '@theme/components/Search/SearchItem';
+import { SearchTrigger } from '@theme/components/Search/SearchTrigger';
+import { MobileSearchTrigger } from '@theme/components/Search/MobileSearchTrigger';
+import { SearchDialog } from '@theme/components/Search/SearchDialog';
 import { useThemeConfig } from '@theme/hooks';
-import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
-import { usePreloadHistory } from '@portal/usePreloadHistory';
-import { useTranslate } from '@portal/hooks';
 
 export function Search(): JSX.Element {
-  const history = usePreloadHistory();
-  const { query, setQuery, items, isLoading } = useFuseSearch();
+  const [isOpen, setIsOpen] = useState(false);
   const themeSettings = useThemeConfig();
-  const { translate } = useTranslate();
-
-  // TODO: ask somebody about typings
-  const navigate = (item: SearchDocument) => history.push(item.url);
-
-  const renderAutocomplete = () => (
-    <Autocomplete
-      items={items}
-      value={query}
-      change={setQuery}
-      select={navigate}
-      placeholder={translate('theme.search.label', 'Search the docs')}
-      keyShortcuts={themeSettings?.search?.shortcuts ?? ['/']}
-      renderItem={(item) => <SearchItem key={item.id} item={item} />}
-      isLoading={isLoading}
-    />
+  const location = useLocation();
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+  const hotkeysKeys = keyShortcuts?.join(',');
+
+  useEffect(() => {
+    if (hotkeysKeys) {
+      hotkeys(hotkeysKeys, (ev) => {
+        setIsOpen(true);
+        ev.preventDefault();
+      });
+
+      return () => hotkeys.unbind(hotkeysKeys as string);
+    }
+  }, [hotkeysKeys]);
+
+  const onClose = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  useEffect(onClose, [location, onClose]);
+
+  return (
+    <Wrapper data-component-name="Search/Search">
+      <SearchTrigger onClick={() => setIsOpen(true)} />
+      <MobileSearchTrigger onClick={() => setIsOpen(true)} />
+
+      {isOpen && <SearchDialog onClose={onClose} />}
+    </Wrapper>
   );
-
-  return <Wrapper data-component-name="Search/Search">{renderAutocomplete()}</Wrapper>;
 }
 
 const Wrapper = styled.div`
   margin-left: auto;
 
   padding: 0 var(--navbar-item-padding-horizontal);
-
-  display: none;
-
-  ${({ theme }) => theme.mediaQueries?.small} {
-    display: block;
-  }
-
-  ${({ theme }) => theme.mediaQueries?.medium} {
-    margin: 0 auto;
-  }
 `;

package/src/components/Search/SearchDialog.tsx

@@ -0,0 +1,162 @@
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+
+import type { MouseEvent } from 'react';
+
+import { useFuseSearch } from '@portal/search';
+import { InputWrapper } from '@theme/components/Search/InputWrapper';
+import { SearchItem } from '@theme/components/Search/SearchItem';
+import { useTranslate } from '@portal/hooks';
+import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
+import { Shortcut } from '@theme/components/Search/Shortcut';
+import { RecentSearches } from '@theme/components/Search/RecentSearches';
+import { SuggestedPages } from '@theme/components/Search/SuggestedPages';
+import { CancelSearch } from '@theme/components/Search/CancelSearch';
+import { useDialogHotKeys } from '@theme/hooks/useDialogHotKeys';
+
+export const SearchDialog = ({ onClose }: { onClose: () => void }): JSX.Element => {
+  const { query, setQuery, items, isLoading } = useFuseSearch();
+  const modalRef = useRef<HTMLDivElement>(null);
+  const { translate } = useTranslate();
+
+  useDialogHotKeys(modalRef, onClose);
+
+  const handleOverlayClick = (event: MouseEvent<HTMLElement>) => {
+    const target = event.target as HTMLElement;
+    if (typeof target.className !== 'string') return;
+    if (target.className?.includes(' overlay')) {
+      onClose();
+    }
+  };
+
+  const translationKeys = {
+    noResults: 'theme.search.noResults',
+    navigate: 'theme.search.keys.navigate',
+    select: 'theme.search.keys.select',
+    exit: 'theme.search.keys.exit',
+  };
+
+  const mapItem = (item: SearchDocument) => {
+    return <SearchItem key={item.id} item={item} />;
+  };
+
+  return (
+    <Overlay
+      data-component-name="Search/SearchDialog"
+      ref={modalRef}
+      onClick={handleOverlayClick}
+      className="overlay"
+    >
+      <Container>
+        <TopContainer>
+          <InputWrapper
+            value={query}
+            change={setQuery}
+            placeholder={translate('theme.search.label', 'Search docs...')}
+            isLoading={isLoading}
+          />
+        </TopContainer>
+        <Results>
+          {items !== null ? (
+            items.length ? (
+              items.map(mapItem)
+            ) : (
+              <Message data-translation-key={translationKeys.noResults}>
+                {translate(translationKeys.noResults, 'No results')}
+              </Message>
+            )
+          ) : (
+            <>
+              <RecentSearches onSelect={setQuery} />
+              <SuggestedPages />
+            </>
+          )}
+        </Results>
+        <BottomContainer>
+          <Shortcuts>
+            <Shortcut
+              data-translation-key={translationKeys.navigate}
+              combination="Tab"
+              text={translate(translationKeys.navigate, 'to navigate')}
+            />
+            <Shortcut
+              data-translation-key={translationKeys.select}
+              combination="↵"
+              text={translate(translationKeys.select, 'to select')}
+            />
+            <Shortcut
+              data-translation-key={translationKeys.exit}
+              combination="Esc"
+              text={translate(translationKeys.exit, 'to exit')}
+            />
+          </Shortcuts>
+          <CancelSearch onClick={onClose} />
+        </BottomContainer>
+      </Container>
+    </Overlay>
+  );
+};
+
+const Overlay = styled.div`
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    border-radius: 0;
+    width: 100vw;
+    height: 100vh;
+
+    ${({ theme }) => theme.mediaQueries.small} {
+      border-radius: 8px;
+      width: 600px;
+      height: auto;
+    }
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Results = styled.div`
+  flex-grow: 1;
+  overflow-y: scroll;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    height: 224px;
+  }
+`;
+
+const BottomContainer = styled.footer``;
+
+const Shortcuts = styled.div`
+  display: none;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 16px 12px;
+  gap: 16px;
+
+  ${({ theme }) => theme.mediaQueries?.small} {
+    display: flex;
+  }
+`;
+
+const Message = styled.div`
+  padding: 24px;
+  color: var(--search-item-title-text-color);
+`;
+
+const TopContainer = styled.header``;

package/src/components/Search/SearchIcon.tsx

@@ -20,13 +20,11 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
 export const SearchIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'Search/SearchIcon',
 }))`
-  position: absolute;
   cursor: pointer;
   width: 1em;
   height: 1em;
   left: 0.8em;
   fill: var(--search-input-text-color);
-  z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 1.2em;

package/src/components/Search/SearchItem.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components';
 
 import { OperationBadge } from '@theme/components/OperationBadge';
 import { Link } from '@portal/Link';
-import { Parameters } from '@theme/components/Search/Parameters';
 import { highlight } from '@theme/components/Search/utils';
 import type { ActiveItem } from '@theme/types/portal/src/shared/types/activeItem';
 import type { SearchDocument } from '@theme/types/portal/src/shared/types/searchDocument';
@@ -21,8 +20,8 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
     }
   }, [item.active]);
 
-  return (
-    <SearchLink to={item.url} tabIndex={0} innerRef={ref} data-component-name="Search/SearchItem">
+  const header = (
+    <>
       {item.httpVerb ? (
         <Operation>
           <OperationBadge type={item.httpVerb}>{item.httpVerb}</OperationBadge>
@@ -30,20 +29,57 @@ export function SearchItem({ item }: SearchItemProps): JSX.Element {
         </Operation>
       ) : null}
       <Title>{highlight(item.title)}</Title>
-      <Description>{highlight(item.text)}</Description>
+      {Array.isArray(item.text) ? <Description>{highlight(item.text)}</Description> : null}
+    </>
+  );
 
+  return (
+    <>
       {item.parameters?.length ? (
-        <Parameters parameters={item.parameters} />
+        <>
+          {item.parameters.map((param, index) => {
+            const path = `${param.place} → ${
+              param.path?.length ? param.path?.join(' → ') + ' → ' : ''
+            }`;
+            return (
+              <SearchLink
+                key={`${item.id}-${index}`}
+                to={item.url}
+                tabIndex={0}
+                innerRef={ref}
+                data-component-name="Search/SearchItem"
+              >
+                {header}
+                <Place>
+                  <div>
+                    {path}
+                    {highlight(param.name)}
+                  </div>
+                  <div>{highlight(param.description)}</div>
+                </Place>
+              </SearchLink>
+            );
+          })}
+        </>
       ) : (
-        <Path>{item.path?.join(' → ')}</Path>
+        <SearchLink
+          to={item.url}
+          tabIndex={0}
+          innerRef={ref}
+          data-component-name="Search/SearchItem"
+        >
+          {header}
+          <Path>{item.path?.join(' → ')}</Path>
+        </SearchLink>
       )}
-    </SearchLink>
+    </>
   );
 }
 
 const Title = styled.div`
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-regular);
   color: var(--search-item-title-text-color);
+  padding: 6px 0 2px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--line-height-base);
@@ -71,8 +107,8 @@ const SearchLink = styled(Link)`
 
 const Operation = styled.div`
   font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-small);
-  color: var(--search-item-title-text-color);
+  font-size: var(--font-size-base);
+  color: var(--search-item-path-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
 `;
@@ -89,3 +125,16 @@ const Path = styled.div`
   text-overflow: ellipsis;
   line-height: 22px;
 `;
+
+const Place = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;

package/src/components/Search/SearchTrigger.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { useThemeConfig } from '@theme/hooks';
+import { useTranslate } from '@portal/hooks';
+import { SearchIcon } from '@theme/components/Search/SearchIcon';
+import { ShortcutKey } from '@theme/components/Search/ShortcutKey';
+
+export function SearchTrigger({ onClick }: { onClick: () => void }): JSX.Element {
+  const themeSettings = useThemeConfig();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    label: 'theme.search.navbar.label',
+  };
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['/'];
+
+  return (
+    <Wrapper data-component-name="Search/SearchTrigger" onClick={onClick}>
+      <SearchIconSmall />
+      <Label data-translation-key={translationKeys.label}>
+        {translate(translationKeys.label, 'Search')}
+      </Label>
+      <ShortcutKey keyShortcuts={keyShortcuts} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: none;
+  align-items: center;
+  cursor: pointer;
+  color: var(--search-trigger-text-color);
+  background-color: var(--search-trigger-background-color);
+  border: var(--search-trigger-border);
+  border-radius: var(--search-trigger-border-radius);
+  padding: 5px 10px 5px 14px;
+  user-select: none;
+
+  :hover {
+    background-color: var(--search-trigger-hover-background-color);
+  }
+
+  ${({ theme }) => {
+    return css`
+      ${theme.mediaQueries.small} {
+        display: flex;
+      }
+    `;
+  }}
+`;
+
+const Label = styled.span`
+  padding-left: 10px;
+  padding-right: 16px;
+  font-size: var(--search-trigger-font-size);
+`;
+
+const SearchIconSmall = styled(SearchIcon)`
+  width: 13px;
+  height: 13px;
+  fill: var(--search-trigger-text-color);
+`;

package/src/components/Search/Shortcut.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export function Shortcut({
+  combination,
+  text,
+}: {
+  combination: string;
+  text: string;
+}): JSX.Element {
+  return (
+    <Wrapper data-component-name="Search/Shortcut">
+      <Key>{combination}</Key>
+      {text}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  padding: 2px 4px;
+  gap: 8px;
+  color: var(--search-item-text-color);
+`;
+
+const Key = styled.span`
+  background: rgba(150, 150, 150, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.2);
+  border-radius: 3px;
+  font-size: 12px;
+  padding: 2px 6px;
+`;

package/src/components/Search/ShortcutKey.tsx

@@ -22,14 +22,9 @@ export function ShortcutKey(props: ShortcutKeyProps): JSX.Element {
 }
 
 export const Wrapper = styled.div`
-  position: absolute;
   cursor: pointer;
-  font-size: 0.8em;
-  height: 2em;
-  line-height: 2em;
+  font-size: 0.75em;
   right: 1em;
-  fill: var(--search-input-text-color);
-  color: var(--search-input-placeholder-color);
+  color: var(--search-trigger-shortcut-text-color);
   opacity: 0.5;
-  z-index: -1;
 `;

package/src/components/Search/SuggestedPages.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { ClockBackwardsIcon as ThemeClockBackwardsIcon } from '@theme/components/Search/ClockBackwardsIcon';
+import { useSuggestedPages } from '@portal/search';
+import { Link } from '@portal/Link';
+import { useTranslate } from '@portal/hooks';
+
+export function SuggestedPages() {
+  const pages = useSuggestedPages();
+  const { translate } = useTranslate();
+  const translationKeys = {
+    title: 'theme.search.suggested',
+  };
+
+  if (!pages.length) return null;
+
+  return (
+    <Wrapper data-component-name="Search/SuggestedPages">
+      <Title data-translation-key={translationKeys.title}>
+        {translate(translationKeys.title, 'Suggested pages')}
+      </Title>
+      <SuggestedItems>
+        {pages.map(
+          (page) =>
+            page.link && (
+              <Item key={page.label}>
+                <PageLink to={page.link} {...page}>
+                  <Group>
+                    <ClockBackwardsIcon />
+                    {page.label}
+                  </Group>
+                </PageLink>
+              </Item>
+            ),
+        )}
+      </SuggestedItems>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Title = styled.div`
+  color: var(--search-item-title-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
+  line-height: 20px;
+  padding: 8px 24px;
+`;
+
+const SuggestedItems = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  order: 1;
+`;
+
+const ClockBackwardsIcon = styled(ThemeClockBackwardsIcon)`
+  width: 16px;
+  height: 16px;
+  fill: #8d8d8d;
+`;
+
+const Item = styled.div`
+  display: flex;
+  font-size: var(--font-size-base);
+  align-items: center;
+  padding: 0 12px 4px;
+  width: 100%;
+`;
+
+const PageLink = styled(Link)`
+  text-decoration: none;
+  color: var(--search-item-text-color);
+  width: 100%;
+  padding: 8px 12px;
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--search-item-active-background-color);
+    color: var(--search-item-active-text-color);
+
+    ${ClockBackwardsIcon} {
+      fill: var(--search-item-active-text-color);
+    }
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-primary-200);
+    border-radius: 2px;
+  }
+`;
+
+const Group = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;

package/src/components/Search/index.ts

@@ -1,9 +1,15 @@
-export * from '@theme/components/Search/Autocomplete';
+export * from '@theme/components/Search/InputWrapper';
 export * from '@theme/components/Search/ClearIcon';
 export * from '@theme/components/Search/Input';
-export * from '@theme/components/Search/Parameters';
 export * from '@theme/components/Search/Popover';
 export * from '@theme/components/Search/Search';
 export * from '@theme/components/Search/SearchIcon';
 export * from '@theme/components/Search/SearchItem';
+export * from '@theme/components/Search/SearchTrigger';
+export * from '@theme/components/Search/Shortcut';
+export * from '@theme/components/Search/RecentSearches';
+export * from '@theme/components/Search/ClockBackwardsIcon';
+export * from '@theme/components/Search/SuggestedPages';
+export * from '@theme/components/Search/MobileSearchTrigger';
+export * from '@theme/components/Search/CancelSearch';
 export * from '@theme/components/Search/utils';

package/src/components/Search/utils.tsx

@@ -15,6 +15,6 @@ export const highlight = (text: string | string[]): JSX.Element | string => {
 };
 
 const Highlight = styled.span`
-  background-color: var(--search-highlight-text-color);
-  color: var(--color-emphasis-900);
+  background-color: var(--search-highlight-background-color);
+  color: var(--search-highlight-text-color);
 `;

package/src/components/Tabs/Tab.tsx

@@ -4,16 +4,18 @@ import styled from 'styled-components';
 type TabProps = {
   activeTab: string;
   label: string;
+  className?: string;
   onClick: (e: string) => void;
 };
 
-export function Tab({ activeTab, label, onClick }: TabProps): JSX.Element {
+export function Tab({ activeTab, label, onClick, className }: TabProps): JSX.Element {
   const isActive = activeTab === label;
   return (
     <TabItem
       active={isActive}
       onClick={() => onClick(label)}
       data-component-name="Markdown/Tabs/Tab"
+      className={className}
     >
       {label}
     </TabItem>

package/src/components/Tabs/Tabs.tsx

@@ -6,7 +6,7 @@ import type { PropsWithChildren } from 'react';
 import { Tab } from '@theme/components/Tabs';
 
 type Child = { props: { label: string } & TabsProps };
-type TabsProps = PropsWithChildren<{ children: Child[] }>;
+type TabsProps = PropsWithChildren<{ children: Child[]; className?: string }>;
 
 export function Tabs(props: TabsProps): JSX.Element {
   const children = React.Children.toArray(props.children) as Child[];
@@ -14,7 +14,7 @@ export function Tabs(props: TabsProps): JSX.Element {
   const onTabSelect = (label: string) => setActiveTab(label);
 
   return (
-    <TabsContainer data-component-name="Markdown/Tabs/Tabs">
+    <TabsContainer data-component-name="Markdown/Tabs/Tabs" className={props.className}>
       <TabList>
         {children.map((child) => {
           const { label } = child.props;

package/src/config.ts

@@ -138,6 +138,16 @@ const navItemsSchema = {
   },
 } as const;
 
+const suggestedPageSchema = {
+  type: 'object',
+  properties: {
+    page: { type: 'string' },
+    label: { type: 'string' },
+    labelTranslationKey: { type: 'string' },
+  },
+  required: ['page'],
+} as const;
+
 export const themeConfigSchema = {
   type: 'object',
   properties: {
@@ -235,6 +245,10 @@ export const themeConfigSchema = {
           items: { type: 'string' },
           default: ['/'],
         },
+        suggestedPages: {
+          type: 'array',
+          items: suggestedPageSchema,
+        },
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -356,6 +370,7 @@ export type ThemeUIConfig = ThemeConfig & {
   };
   search?: {
     shortcuts?: string[];
+    suggestedPages?: any[];
   };
 };