@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/src/components/Search/SearchDialog.tsx

@@ -8,6 +8,7 @@ import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
 import { SearchRecent } from '@redocly/theme/components/Search/SearchRecent';
 import { SearchSuggestedPages } from '@redocly/theme/components/Search/SearchSuggestedPages';
@@ -207,149 +208,140 @@ export function SearchDialog({
   const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
 
   return (
-    <SearchOverlay
-      data-component-name="Search/SearchDialog"
-      ref={modalRef}
-      onClick={handleOverlayClick}
-      className={concatClassNames('overlay', className)}
-    >
-      <SearchDialogWrapper className="scroll-lock" role="dialog">
-        <SearchDialogHeader>
-          {product && (
-            <SearchProductTag color="product">
-              {product.name}
-              <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
-            </SearchProductTag>
-          )}
-          {mode === 'search' ? (
-            <>
-              <SearchInput
-                value={query}
-                onChange={setQuery}
-                placeholder={translate('search.label', 'Search docs...')}
-                isLoading={isSearchLoading}
-                inputRef={searchInputRef}
-                onSubmit={() => {
-                  if (isSearchLoading) return;
-
-                  if (showAiSearchButton && aiQueryRef.current) {
-                    aiQueryRef.current.focus();
-                  } else {
-                    firstSearchResultRef.current?.focus();
-                  }
-                }}
-                data-translation-key="search.label"
-              />
-              {showHeaderButtons && (
-                <SearchHeaderButtons>
-                  {showAiSearchButton ? (
-                    <SearchAiButton
-                      icon={<AiStarsGradientIcon color="var(--search-ai-button-icon-color)" />}
-                      onClick={() => {
-                        setMode('ai-dialog');
-                        if (query.trim()) {
-                          aiSearch.askQuestion(query);
-                        }
-                        telemetry.sendSearchAiOpenedMessage([
-                          {
-                            object: 'search',
-                            method: 'ai_search_button',
-                          },
-                        ]);
-                      }}
-                    >
-                      {translate('search.ai.button', 'Search with AI')}
-                    </SearchAiButton>
-                  ) : null}
-                  {showSearchFilterButton && (
-                    <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
-                  )}
-                </SearchHeaderButtons>
-              )}
-            </>
-          ) : (
-            <AiDialogHeaderWrapper>
-              {initialMode === 'ai-dialog' ? (
-                <AiDialogHeaderTitle>
-                  <AiStarsGradientIcon color="var(--search-ai-button-icon-color)" size="1.25rem" />
-                  {translate('search.ai.assistant', 'Assistant')}
-                </AiDialogHeaderTitle>
-              ) : (
-                <Button
-                  variant="secondary"
-                  onClick={() => {
-                    setMode('search');
-                    aiSearch.clearConversation();
-                    focusSearchInput();
-                  }}
-                  tabIndex={0}
-                  icon={<ChevronLeftIcon />}
-                >
-                  {isMobile
-                    ? translate('search.ai.back', 'Back')
-                    : translate('search.ai.backToSearch', 'Back to search')}
-                </Button>
-              )}
-              <AiDialogHeaderActionsWrapper>
-                <Button
-                  variant="secondary"
-                  disabled={!aiSearch.conversation.length}
-                  onClick={() => {
-                    refreshSearchSessionId();
-                    aiSearch.clearConversation();
+    <Portal>
+      <SearchOverlay
+        data-component-name="Search/SearchDialog"
+        ref={modalRef}
+        onClick={handleOverlayClick}
+        className={concatClassNames('overlay', className)}
+      >
+        <SearchDialogWrapper className="scroll-lock" role="dialog">
+          <SearchDialogHeader>
+            {product && (
+              <SearchProductTag color="product">
+                {product.name}
+                <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
+              </SearchProductTag>
+            )}
+            {mode === 'search' ? (
+              <>
+                <SearchInput
+                  value={query}
+                  onChange={setQuery}
+                  placeholder={translate('search.label', 'Search docs...')}
+                  isLoading={isSearchLoading}
+                  inputRef={searchInputRef}
+                  onSubmit={() => {
+                    if (isSearchLoading) return;
+
+                    if (showAiSearchButton && aiQueryRef.current) {
+                      aiQueryRef.current.focus();
+                    } else {
+                      firstSearchResultRef.current?.focus();
+                    }
                   }}
-                  tabIndex={0}
-                  icon={<EditIcon />}
-                >
-                  {translate('search.ai.newConversation', 'New conversation')}
-                </Button>
-                {isMobile && <Button variant="text" icon={<CloseIcon />} onClick={handleClose} />}
-              </AiDialogHeaderActionsWrapper>
-            </AiDialogHeaderWrapper>
-          )}
-        </SearchDialogHeader>
-
-        <SearchDialogBody>
-          {mode === 'search' ? (
-            <>
-              {advancedSearch && isFilterOpen && (
-                <SearchDialogBodyFilterView>
-                  <SearchFilter
+                  data-translation-key="search.label"
+                />
+                {showHeaderButtons && (
+                  <SearchHeaderButtons>
+                    {showAiSearchButton ? (
+                      <SearchAiButton
+                        icon={<AiStarsGradientIcon color="var(--search-ai-button-icon-color)" />}
+                        onClick={() => {
+                          setMode('ai-dialog');
+                          if (query.trim()) {
+                            aiSearch.askQuestion(query);
+                          }
+                          telemetry.sendSearchAiOpenedMessage([
+                            {
+                              object: 'search',
+                              method: 'ai_search_button',
+                            },
+                          ]);
+                        }}
+                      >
+                        {translate('search.ai.button', 'Search with AI')}
+                      </SearchAiButton>
+                    ) : null}
+                    {showSearchFilterButton && (
+                      <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
+                    )}
+                  </SearchHeaderButtons>
+                )}
+              </>
+            ) : (
+              <AiDialogHeaderWrapper>
+                {initialMode === 'ai-dialog' ? (
+                  <AiDialogHeaderTitle>
+                    <AiStarsGradientIcon
+                      color="var(--search-ai-button-icon-color)"
+                      size="1.25rem"
+                    />
+                    {translate('search.ai.assistant', 'Assistant')}
+                  </AiDialogHeaderTitle>
+                ) : (
+                  <Button
+                    variant="secondary"
+                    onClick={() => {
+                      setMode('search');
+                      aiSearch.clearConversation();
+                      focusSearchInput();
+                    }}
+                    tabIndex={0}
+                    icon={<ChevronLeftIcon />}
+                  >
+                    {isMobile
+                      ? translate('search.ai.back', 'Back')
+                      : translate('search.ai.backToSearch', 'Back to search')}
+                  </Button>
+                )}
+                <AiDialogHeaderActionsWrapper>
+                  <Button
+                    variant="secondary"
+                    disabled={!aiSearch.conversation.length}
+                    onClick={() => {
+                      refreshSearchSessionId();
+                      aiSearch.clearConversation();
+                    }}
+                    tabIndex={0}
+                    icon={<EditIcon />}
+                  >
+                    {translate('search.ai.newConversation', 'New conversation')}
+                  </Button>
+                  {isMobile && <Button variant="text" icon={<CloseIcon />} onClick={handleClose} />}
+                </AiDialogHeaderActionsWrapper>
+              </AiDialogHeaderWrapper>
+            )}
+          </SearchDialogHeader>
+
+          <SearchDialogBody>
+            {mode === 'search' ? (
+              <>
+                {advancedSearch && isFilterOpen && (
+                  <SearchDialogBodyFilterView>
+                    <SearchFilter
+                      facets={facets}
+                      filter={filter}
+                      query={query}
+                      quickFilterFields={[groupField]}
+                      onFilterChange={onFilterChange}
+                      onFilterReset={onFilterReset}
+                      onFacetReset={onFacetReset}
+                    />
+                  </SearchDialogBodyFilterView>
+                )}
+                <SearchDialogBodyMainView>
+                  <SearchGroups
                     facets={facets}
-                    filter={filter}
-                    query={query}
-                    quickFilterFields={[groupField]}
+                    searchFilter={filter}
                     onFilterChange={onFilterChange}
-                    onFilterReset={onFilterReset}
-                    onFacetReset={onFacetReset}
+                    onQuickFilterReset={onQuickFilterReset}
+                    groupField={groupField}
                   />
-                </SearchDialogBodyFilterView>
-              )}
-              <SearchDialogBodyMainView>
-                <SearchGroups
-                  facets={facets}
-                  searchFilter={filter}
-                  onFilterChange={onFilterChange}
-                  onQuickFilterReset={onQuickFilterReset}
-                  groupField={groupField}
-                />
 
-                {showAiSearchItem && (
-                  <SearchWithAI
-                    onClick={() => {
-                      setMode('ai-dialog');
-                      if (query.trim()) {
-                        aiSearch.askQuestion(query);
-                      }
-                      telemetry.sendSearchAiOpenedMessage([
-                        {
-                          object: 'search',
-                          method: 'ai_search_input',
-                        },
-                      ]);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
+                  {showAiSearchItem && (
+                    <SearchWithAI
+                      onClick={() => {
                         setMode('ai-dialog');
                         if (query.trim()) {
                           aiSearch.askQuestion(query);
@@ -360,167 +352,181 @@ export function SearchDialog({
                             method: 'ai_search_input',
                           },
                         ]);
-                      }
-                    }}
-                    ref={aiQueryRef}
-                    tabIndex={0}
-                    role="option"
-                    aria-selected="true"
-                  >
-                    <AiStarsIcon
-                      style={{ flexShrink: 0 }}
-                      color="var(--search-ai-icon-color)"
-                      size="36px"
-                      background="var(--search-ai-icon-bg-color)"
-                      margin="0 var(--spacing-md) 0 0"
-                      borderRadius="var(--border-radius-lg)"
-                    />
-                    <QueryWrapper>
-                      <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
-                    </QueryWrapper>
-                    <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
-                    <ReturnKeyIcon color="var(--search-item-text-color)" />
-                  </SearchWithAI>
-                )}
-                {showResults ? (
-                  searchKeysWithResults.length ? (
-                    searchKeysWithResults.map((key, searchGroupKeyIdx) => {
-                      const searchResultItems = items[key];
-
-                      if (searchResultItems?.length) {
-                        return (
-                          <Fragment key={key}>
-                            <SearchGroupTitle data-testid="search-group-title">
-                              {key}
-                            </SearchGroupTitle>
-                            {searchResultItems.map((item, idx, resultsArr) =>
-                              mapItem(
-                                item,
-                                idx,
-                                resultsArr,
-                                searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined,
-                              ),
-                            )}
-                            {showLoadMore(key, searchResultItems.length || 0) && (
-                              <SearchGroupFooter
-                                tabIndex={0}
-                                data-translation-key="search.showMore"
-                                onKeyDown={(e) => {
-                                  if (e.key === 'Enter') {
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          setMode('ai-dialog');
+                          if (query.trim()) {
+                            aiSearch.askQuestion(query);
+                          }
+                          telemetry.sendSearchAiOpenedMessage([
+                            {
+                              object: 'search',
+                              method: 'ai_search_input',
+                            },
+                          ]);
+                        }
+                      }}
+                      ref={aiQueryRef}
+                      tabIndex={0}
+                      role="option"
+                      aria-selected="true"
+                    >
+                      <AiStarsIcon
+                        style={{ flexShrink: 0 }}
+                        color="var(--search-ai-icon-color)"
+                        size="36px"
+                        background="var(--search-ai-icon-bg-color)"
+                        margin="0 var(--spacing-md) 0 0"
+                        borderRadius="var(--border-radius-lg)"
+                      />
+                      <QueryWrapper>
+                        <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                      </QueryWrapper>
+                      <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
+                      <ReturnKeyIcon color="var(--search-item-text-color)" />
+                    </SearchWithAI>
+                  )}
+                  {showResults ? (
+                    searchKeysWithResults.length ? (
+                      searchKeysWithResults.map((key, searchGroupKeyIdx) => {
+                        const searchResultItems = items[key];
+
+                        if (searchResultItems?.length) {
+                          return (
+                            <Fragment key={key}>
+                              <SearchGroupTitle data-testid="search-group-title">
+                                {key}
+                              </SearchGroupTitle>
+                              {searchResultItems.map((item, idx, resultsArr) =>
+                                mapItem(
+                                  item,
+                                  idx,
+                                  resultsArr,
+                                  searchGroupKeyIdx === 0 ? firstSearchResultRef : undefined,
+                                ),
+                              )}
+                              {showLoadMore(key, searchResultItems.length || 0) && (
+                                <SearchGroupFooter
+                                  tabIndex={0}
+                                  data-translation-key="search.showMore"
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter') {
+                                      setLoadMore({
+                                        groupKey: key,
+                                        offset: searchResultItems.length || 0,
+                                      });
+                                    }
+                                  }}
+                                  onClick={() =>
                                     setLoadMore({
                                       groupKey: key,
                                       offset: searchResultItems.length || 0,
-                                    });
+                                    })
                                   }
-                                }}
-                                onClick={() =>
-                                  setLoadMore({
-                                    groupKey: key,
-                                    offset: searchResultItems.length || 0,
-                                  })
-                                }
-                              >
-                                {translate('search.showMore', 'Show more')}
-                              </SearchGroupFooter>
-                            )}
-                          </Fragment>
-                        );
-                      }
-
-                      return null;
-                    })
-                  ) : isSearchLoading ? (
-                    <SearchMessage data-translation-key="search.loading">
-                      <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
-                      {translate('search.loading', 'Loading...')}
-                    </SearchMessage>
+                                >
+                                  {translate('search.showMore', 'Show more')}
+                                </SearchGroupFooter>
+                              )}
+                            </Fragment>
+                          );
+                        }
+
+                        return null;
+                      })
+                    ) : isSearchLoading ? (
+                      <SearchMessage data-translation-key="search.loading">
+                        <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
+                        {translate('search.loading', 'Loading...')}
+                      </SearchMessage>
+                    ) : (
+                      <SearchMessage data-translation-key="search.noResults">
+                        <b>{translate('search.noResults.title', 'No results')}</b>
+                      </SearchMessage>
+                    )
                   ) : (
-                    <SearchMessage data-translation-key="search.noResults">
-                      <b>{translate('search.noResults.title', 'No results')}</b>
-                    </SearchMessage>
-                  )
-                ) : (
-                  <>
-                    <SearchRecent
-                      onSelect={(query, index) => {
-                        telemetry.sendSearchRecentClickedMessage([
-                          {
-                            object: 'search',
-                            query,
-                            index: index.toString(),
-                            searchSessionId,
-                          },
-                        ]);
-                        setQuery(query);
-                        focusSearchInput();
-                      }}
-                    />
-                    <SearchSuggestedPages />
-                  </>
+                    <>
+                      <SearchRecent
+                        onSelect={(query, index) => {
+                          telemetry.sendSearchRecentClickedMessage([
+                            {
+                              object: 'search',
+                              query,
+                              index: index.toString(),
+                              searchSessionId,
+                            },
+                          ]);
+                          setQuery(query);
+                          focusSearchInput();
+                        }}
+                      />
+                      <SearchSuggestedPages />
+                    </>
+                  )}
+                </SearchDialogBodyMainView>
+              </>
+            ) : (
+              <SearchAiDialog
+                initialMessage={query}
+                response={aiSearch.response}
+                isGeneratingResponse={aiSearch.isGeneratingResponse}
+                error={aiSearch.error}
+                resources={aiSearch.resources}
+                conversation={aiSearch.conversation}
+                setConversation={aiSearch.setConversation}
+                onMessageSent={aiSearch.askQuestion}
+                toolCalls={aiSearch.toolCalls}
+                contentSegments={aiSearch.contentSegments}
+              />
+            )}
+          </SearchDialogBody>
+          <SearchDialogFooter>
+            {mode === 'ai-dialog' ? (
+              <AiDisclaimer>
+                {translate(
+                  'search.ai.disclaimer',
+                  'AI search might provide incomplete or incorrect results. Verify important information.',
                 )}
-              </SearchDialogBodyMainView>
-            </>
-          ) : (
-            <SearchAiDialog
-              initialMessage={query}
-              response={aiSearch.response}
-              isGeneratingResponse={aiSearch.isGeneratingResponse}
-              error={aiSearch.error}
-              resources={aiSearch.resources}
-              conversation={aiSearch.conversation}
-              setConversation={aiSearch.setConversation}
-              onMessageSent={aiSearch.askQuestion}
-              toolCalls={aiSearch.toolCalls}
-              contentSegments={aiSearch.contentSegments}
-            />
-          )}
-        </SearchDialogBody>
-        <SearchDialogFooter>
-          {mode === 'ai-dialog' ? (
-            <AiDisclaimer>
-              {translate(
-                'search.ai.disclaimer',
-                'AI search might provide incomplete or incorrect results. Verify important information.',
-              )}
-            </AiDisclaimer>
-          ) : (
-            <>
-              <SearchShortcuts>
-                <SearchShortcut
-                  data-translation-key="search.keys.navigate"
-                  combination="Tab"
-                  text={translate('search.keys.navigate', 'to navigate')}
-                />
-                <SearchShortcut
-                  data-translation-key="search.keys.select"
-                  combination="⏎"
-                  text={translate('search.keys.select', 'to select')}
-                />
-                <SearchShortcut
-                  data-translation-key="search.keys.exit"
-                  combination="Esc"
-                  text={translate('search.keys.exit', 'to exit')}
-                />
-              </SearchShortcuts>
-              {isSearchLoading && (
-                <SearchLoading>
-                  <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-                  {translate('search.loading', 'Loading...')}
-                </SearchLoading>
-              )}
-              <SearchCancelButton
-                data-translation-key="search.cancel"
-                variant="secondary"
-                size="small"
-                onClick={handleClose}
-              >
-                {translate('search.cancel', 'Cancel')}
-              </SearchCancelButton>
-            </>
-          )}
-        </SearchDialogFooter>
-      </SearchDialogWrapper>
-    </SearchOverlay>
+              </AiDisclaimer>
+            ) : (
+              <>
+                <SearchShortcuts>
+                  <SearchShortcut
+                    data-translation-key="search.keys.navigate"
+                    combination="Tab"
+                    text={translate('search.keys.navigate', 'to navigate')}
+                  />
+                  <SearchShortcut
+                    data-translation-key="search.keys.select"
+                    combination="⏎"
+                    text={translate('search.keys.select', 'to select')}
+                  />
+                  <SearchShortcut
+                    data-translation-key="search.keys.exit"
+                    combination="Esc"
+                    text={translate('search.keys.exit', 'to exit')}
+                  />
+                </SearchShortcuts>
+                {isSearchLoading && (
+                  <SearchLoading>
+                    <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
+                    {translate('search.loading', 'Loading...')}
+                  </SearchLoading>
+                )}
+                <SearchCancelButton
+                  data-translation-key="search.cancel"
+                  variant="secondary"
+                  size="small"
+                  onClick={handleClose}
+                >
+                  {translate('search.cancel', 'Cancel')}
+                </SearchCancelButton>
+              </>
+            )}
+          </SearchDialogFooter>
+        </SearchDialogWrapper>
+      </SearchOverlay>
+    </Portal>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const svgViewerDarkMode = css`
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
+  --svg-viewer-bg-color: var(--color-warm-grey-3);
 `;

package/src/core/constants/catalog.ts

@@ -1,6 +1,6 @@
 import type { EntityRelationType } from '../types/catalog';
 
-export const CATALOG_TAG_MAX_LENGTH = 15;
+export const CATALOG_TAG_MAX_LENGTH = 12;
 
 export const PREDEFINED_ENTITY_TYPES = [
   'service',