@redocly/theme 0.19.0 → 0.19.2

package/lib/components/Catalog/useCatalog.js

@@ -27,10 +27,13 @@ exports.useCatalog = void 0;
 const React = __importStar(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const telemetry_1 = require("../../mocks/telemetry");
+const usePageData_1 = require("../../mocks/hooks/usePageData");
 const utils_1 = require("../../utils");
 function useCatalog(items, config) {
+    var _a;
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
+    const pageData = (0, usePageData_1.usePageData)();
     const searchParams = useSearchParams(location);
     const [filtersState, setFiltersState] = React.useState(() => {
         var _a;
@@ -47,7 +50,8 @@ function useCatalog(items, config) {
     });
     const [filterTerm, setFilterTerm] = React.useState(() => searchParams.get('filter') || '');
     const filtersWithOptions = React.useMemo(() => collectFilterOptions(items, config.filters), [items, config.filters]);
-    const normalizedItems = React.useMemo(() => normalizeItems(items, config), [items, config]);
+    const customFields = (_a = pageData === null || pageData === void 0 ? void 0 : pageData.props) === null || _a === void 0 ? void 0 : _a.customFields;
+    const normalizedItems = React.useMemo(() => normalizeItems(items, config, customFields || {}), [items, config, customFields]);
     const toggleOption = React.useCallback((filterIdx, option) => {
         setFiltersState((prev) => {
             const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set();
@@ -178,7 +182,7 @@ function groupByFirstFilter(filters, filteredItems) {
 function useSearchParams(location) {
     return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
 }
-function normalizeItems(items, config) {
+function normalizeItems(items, config, customFields) {
     // because of RBAC some versions can be missing so we need to pick up other default version
     const hasDeafultVersion = {};
     for (const item of items) {
@@ -203,9 +207,10 @@ function normalizeItems(items, config) {
     return items.map((item) => {
         var _a, _b, _c;
         const metadata = item.metadata || {};
+        const apiCustomFields = customFields[item.fsPath || ''] || {};
         const link = item.link || ((_a = (0, utils_1.findDeepFirst)(item.items || [], (i) => 'link' in i && !!i.link)) === null || _a === void 0 ? void 0 : _a.link);
         const firstSidebarItem = (_b = item.sidebar) === null || _b === void 0 ? void 0 : _b[0];
-        return Object.assign(Object.assign({}, metadata), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
+        return Object.assign(Object.assign(Object.assign({}, metadata), apiCustomFields), { publishedAt: metadata.publishedAt || metadata.createdAt, title: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.title) || item.label || 'Untitled', description: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.description), link: (_c = (0, utils_1.withoutHash)(link)) !== null && _c !== void 0 ? _c : '#', docsLink: (0, utils_1.withoutHash)(firstSidebarItem === null || firstSidebarItem === void 0 ? void 0 : firstSidebarItem.link), image: (0, utils_1.toStringIfDefined)(metadata === null || metadata === void 0 ? void 0 : metadata.image) });
     });
 }
 function collectFilterParents(filtersWithOptions) {

package/lib/components/Sidebar/SidebarLayout.js

@@ -35,7 +35,6 @@ const HeaderWrapper_1 = require("../../components/Sidebar/HeaderWrapper");
 const useMobileMenu_1 = require("../../hooks/useMobileMenu");
 const MobileSidebarButton_1 = require("../../components/Sidebar/MobileSidebarButton");
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
-const SidebarSearch_1 = require("../../components/Search/SidebarSearch");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const telemetry_1 = require("../../mocks/telemetry");
 const MobileSidebarIcon_1 = require("./MobileSidebarIcon");
@@ -56,7 +55,7 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
         onToggleMenu === null || onToggleMenu === void 0 ? void 0 : onToggleMenu(!isOpen);
         setIsOpen(!isOpen);
     };
-    const { search, sidebar } = (0, useThemeConfig_1.useThemeConfig)();
+    const { sidebar } = (0, useThemeConfig_1.useThemeConfig)();
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;
     }
@@ -64,7 +63,6 @@ function SidebarLayout({ versions, menu, footer, header, growContent, collapsed,
         react_1.default.createElement(StyledFooterWrapper, { "data-component-name": "Sidebar/FooterWrapper", collapsed: true }, footer),
         react_1.default.createElement(MobileSidebarButton_1.MobileSidebarButton, { opened: isOpen, onClick: toggleMenu },
             react_1.default.createElement(MobileSidebarIcon_1.MobileSidebarIcon, null)))) : null) : (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/SidebarLayout", className: className },
-        !(search === null || search === void 0 ? void 0 : search.hide) && (search === null || search === void 0 ? void 0 : search.placement) === 'sidebar' ? react_1.default.createElement(SidebarSearch_1.SidebarSearch, null) : null,
         react_1.default.createElement(Sidebar_1.Sidebar, { animate: true, opened: isOpen },
             header ? (react_1.default.createElement(HeaderWrapper_1.HeaderWrapper, { onClick: () => telemetry_1.telemetry.send('back_to_catalog_button_clicked', {}) }, header)) : null,
             versions ? react_1.default.createElement(react_1.default.Fragment, null, versions) : null,

package/lib/mocks/hooks/usePageData.d.ts

@@ -2,4 +2,5 @@ import type { ResolvedNavLinkItem } from '../../types/portal';
 export declare function usePageData(): {
     prevPage: ResolvedNavLinkItem | null;
     nextPage: ResolvedNavLinkItem | null;
+    props?: any;
 } | null;

package/lib/types/portal/src/shared/types/nav.d.ts

@@ -17,6 +17,7 @@ export type ResolvedNavLinkItem = {
     httpVerb?: string;
     separatorLine?: boolean;
     routeSlug?: string;
+    fsPath?: string;
     active?: boolean;
     icon?: string;
     srcSet?: string;
@@ -41,6 +42,7 @@ export type ResolvedNavGroupItem = {
     menuStyle?: MenuStyle;
     separatorLine?: boolean;
     routeSlug?: string;
+    fsPath?: string;
     active?: boolean;
     icon?: string;
     srcSet?: string;
@@ -52,6 +54,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     label?: string;
     labelTranslationKey?: string;
     routeSlug?: never;
+    fsPath?: never;
     version?: string;
     isDefault?: boolean;
     versionFolderId?: string;
@@ -70,6 +73,7 @@ export type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
     versionFolderId?: string;
     metadata?: Record<string, unknown>;
     routeSlug?: never;
+    fsPath?: never;
     label: string;
     labelTranslationKey?: string;
     link?: undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Catalog/useCatalog.ts

@@ -4,6 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 
 import { telemetry } from '@portal/telemetry';
+import { usePageData } from '@portal/hooks/usePageData';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -16,6 +17,7 @@ import type { CatalogConfig, CatalogFilterConfig } from '@theme/config';
 export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): FilteredCatalog {
   const location = useLocation();
   const navigate = useNavigate();
+  const pageData = usePageData();
   const searchParams = useSearchParams(location);
   const [filtersState, setFiltersState] = React.useState(() =>
     (config.filters ?? []).map((f) => {
@@ -33,7 +35,12 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     () => collectFilterOptions(items, config.filters),
     [items, config.filters],
   );
-  const normalizedItems = React.useMemo(() => normalizeItems(items, config), [items, config]);
+
+  const customFields = pageData?.props?.customFields;
+  const normalizedItems = React.useMemo(
+    () => normalizeItems(items, config, customFields || ({} as any)),
+    [items, config, customFields],
+  );
 
   const toggleOption = React.useCallback((filterIdx, option) => {
     setFiltersState((prev) => {
@@ -198,7 +205,11 @@ function useSearchParams(location: Location) {
   return React.useMemo(() => new URLSearchParams(location.search), [location.search]);
 }
 
-function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): CatalogItem[] {
+function normalizeItems(
+  items: ResolvedNavItem[],
+  config: CatalogConfig,
+  customFields: Record<string, Record<string, unknown>>,
+): CatalogItem[] {
   // because of RBAC some versions can be missing so we need to pick up other default version
   const hasDeafultVersion: Record<string, boolean> = {};
   for (const item of items) {
@@ -223,10 +234,12 @@ function normalizeItems(items: ResolvedNavItem[], config: CatalogConfig): Catalo
 
   return items.map((item) => {
     const metadata = item.metadata || {};
+    const apiCustomFields = customFields[item.fsPath || ''] || {};
     const link = item.link || findDeepFirst(item.items || [], (i) => 'link' in i && !!i.link)?.link;
     const firstSidebarItem = (item as any).sidebar?.[0];
     return {
       ...metadata,
+      ...apiCustomFields,
       publishedAt: metadata.publishedAt || metadata.createdAt,
       title: toStringIfDefined(metadata?.title) || item.label || 'Untitled',
       description: toStringIfDefined(metadata?.description),

package/src/components/Sidebar/SidebarLayout.tsx

@@ -7,7 +7,6 @@ import { HeaderWrapper } from '@theme/components/Sidebar/HeaderWrapper';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/components/Menu/MenuContainer';
-import { SidebarSearch } from '@theme/components/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { telemetry } from '@portal/telemetry';
 
@@ -59,7 +58,7 @@ export function SidebarLayout({
     setIsOpen(!isOpen);
   };
 
-  const { search, sidebar } = useThemeConfig();
+  const { sidebar } = useThemeConfig();
 
   if (sidebar?.hide) {
     return null;
@@ -80,7 +79,6 @@ export function SidebarLayout({
         ) : null
       ) : (
         <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
-          {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
             {header ? (
               <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>

package/src/mocks/hooks/usePageData.ts

@@ -3,6 +3,7 @@ import type { ResolvedNavLinkItem } from '@theme/types/portal';
 export function usePageData(): {
   prevPage: ResolvedNavLinkItem | null;
   nextPage: ResolvedNavLinkItem | null;
+  props?: any;
 } | null {
   return {
     prevPage: { label: 'Intro', type: 'link', link: '#prev' },

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

@@ -20,6 +20,7 @@ export type ResolvedNavLinkItem = {
   httpVerb?: string;
   separatorLine?: boolean;
   routeSlug?: string;
+  fsPath?: string
   active?: boolean;
   icon?: string;
   srcSet?: string;
@@ -47,6 +48,7 @@ export type ResolvedNavGroupItem = {
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
   routeSlug?: string;
+  fsPath?: string
   active?: boolean;
   icon?: string;
   srcSet?: string;
@@ -62,6 +64,7 @@ export type ResolvedNavItem =
     label?: string;
     labelTranslationKey?: string;
     routeSlug?: never;
+    fsPath?: never
 
     version?: string;
     isDefault?: boolean;
@@ -84,6 +87,7 @@ export type ResolvedNavItem =
     versionFolderId?: string;
     metadata?: Record<string, unknown>;
     routeSlug?: never;
+    fsPath?: never
 
     label: string;
     labelTranslationKey?: string;

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

@@ -1,2 +0,0 @@
-import { Search } from '../../components/Search/Search';
-export declare const SidebarSearch: import("styled-components").StyledComponent<typeof Search, any, {}, never>;

package/lib/components/Search/SidebarSearch.js

@@ -1,21 +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.SidebarSearch = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
-const Search_1 = require("../../components/Search/Search");
-const Popover_1 = require("../../components/Search/Popover");
-exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search).attrs(({ className }) => ({
-    'data-component-name': 'Search/SidebarSearch',
-    className,
-})) `
-  --search-input-text-color: var(--sidebar-item-active-color);
-
-  ${Popover_1.Popover} {
-    right: unset;
-    top: 100%;
-  }
-`;
-//# sourceMappingURL=SidebarSearch.js.map

package/src/components/Search/SidebarSearch.tsx

@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-import { Search } from '@theme/components/Search/Search';
-import { Popover } from '@theme/components/Search/Popover';
-
-export const SidebarSearch = styled(Search).attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'Search/SidebarSearch',
-  className,
-}))`
-  --search-input-text-color: var(--sidebar-item-active-color);
-
-  ${Popover} {
-    right: unset;
-    top: 100%;
-  }
-`;