@redocly/theme 0.61.0-next.1 → 0.61.0-next.3

package/lib/components/Catalog/CatalogEntity/CatalogEntityMetadata.js

@@ -50,11 +50,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityMetadata = CatalogEntityMetadata;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
 const utils_1 = require("../../../core/utils");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityInfoBar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityInfoBar");
+const ShowMoreButton_1 = require("../../../components/Catalog/CatalogEntity/ShowMoreButton");
 const MAX_INITIAL_ITEMS = 4;
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function renderMetadataValue(value) {
@@ -82,10 +82,7 @@ function CatalogEntityMetadata({ entity }) {
         visibleMetadata.map(([key, value]) => (react_1.default.createElement(CatalogEntityInfoBar_1.CatalogEntityInfoBar, { key: key, leftContent: react_1.default.createElement(Label, null,
                 (0, utils_1.capitalize)(key),
                 ":"), rightContent: react_1.default.createElement(Value, null, renderMetadataValue(value)), hoverEffect: false, isCodeBlock: (0, utils_1.isPlainObject)(value) || Array.isArray(value) }))),
-        hasMoreItems && (react_1.default.createElement(ShowMoreButton, { onClick: () => setIsOn(!isOn) },
-            isOn ? 'Show less' : 'Show more',
-            " ",
-            react_1.default.createElement(ChevronIcon, { "$isExpanded": isOn })))));
+        hasMoreItems && (react_1.default.createElement(ShowMoreButton_1.ShowMoreButton, { onClick: () => setIsOn(!isOn), isExpanded: isOn }, isOn ? 'Show less' : 'Show more'))));
 }
 const JsonViewerWrapper = (0, styled_components_1.default)(JsonViewer_1.JsonViewer) `
   text-align: left;
@@ -115,24 +112,4 @@ const Heading = styled_components_1.default.h2 `
   margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
-const ChevronIcon = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
-  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
-  transition: transform 0.2s ease;
-`;
-const ShowMoreButton = styled_components_1.default.button `
-  background: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  gap: var(--catalog-metadata-button-gap, 0.5rem);
-  cursor: pointer;
-  color: var(--catalog-metadata-button-color);
-  padding: 0;
-  font-weight: var(--font-weight-medium);
-  margin-top: var(--spacing-unit);
-
-  &:hover {
-    color: var(--catalog-metadata-button-color-hover);
-  }
-`;
 //# sourceMappingURL=CatalogEntityMetadata.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.js

@@ -51,11 +51,22 @@ function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelation
     (0, react_1.useEffect)(() => {
         setFilter(ENTITY_DEFAULT_FILTERS[entity.key]);
     }, [entity.key]);
+    const combinedFilter = (0, react_1.useMemo)(() => {
+        const baseFilter = filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type];
+        if (entity.version && entity.revision) {
+            const versionFilter = `version:"${entity.version}"`;
+            const revisionFilter = `revision:"${entity.revision}"`;
+            return baseFilter
+                ? `${baseFilter} AND ${versionFilter} AND ${revisionFilter}`
+                : `${versionFilter} AND ${revisionFilter}`;
+        }
+        return baseFilter;
+    }, [filter, entity.version, entity.type, entity.revision]);
     const { items: relations, query } = useFetchCatalogEntitiesRelations({
         entityKey: entity.key,
         search: searchQuery,
         sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined,
-        filter: filter !== null && filter !== void 0 ? filter : ENTITY_DEFAULT_FILTERS[entity.type],
+        filter: combinedFilter,
         limit: 10,
     }, initialRelations);
     const shouldShowLoadMore = query.hasNextPage ||

package/lib/components/Catalog/CatalogEntity/ShowMoreButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type ShowMoreButtonProps = {
+    onClick: () => void;
+    children: React.ReactNode;
+    className?: string;
+    isExpanded?: boolean;
+};
+export declare function ShowMoreButton({ onClick, children, className, isExpanded, }: ShowMoreButtonProps): React.ReactElement;

package/lib/components/Catalog/CatalogEntity/ShowMoreButton.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShowMoreButton = ShowMoreButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChevronDownIcon_1 = require("../../../icons/ChevronDownIcon/ChevronDownIcon");
+function ShowMoreButton({ onClick, children, className, isExpanded = false, }) {
+    return (react_1.default.createElement(BaseShowMoreButton, { type: "button", onClick: onClick, className: className },
+        children,
+        react_1.default.createElement(ChevronIcon, { "$isExpanded": isExpanded })));
+}
+const BaseShowMoreButton = styled_components_1.default.button `
+  all: unset;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: none;
+  border: none;
+  gap: var(--catalog-show-more-button-gap);
+  color: var(--catalog-show-more-button-color);
+  padding: 0;
+  margin-top: var(--spacing-unit);
+
+  &:hover {
+    color: var(--catalog-show-more-button-color-hover);
+  }
+`;
+const ChevronIcon = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
+  transition: transform 0.2s ease;
+`;
+//# sourceMappingURL=ShowMoreButton.js.map

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.d.ts

@@ -6,6 +6,8 @@ export type BaseEntity = {
     type: string;
     title: string;
     summary?: string | null;
+    revision?: string | null;
+    version?: string | null;
 };
 export type CatalogTableViewRowProps<T extends BaseEntity> = {
     entity: T;

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -64,8 +64,11 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
     const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
         catalogConfig,
         entitiesCatalogConfig,
+        revision: entity.revision,
+        version: entity.version,
     });
-    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: getEntityDetailsLink(entity) + '?search=', onClick: () => onRowClick(entity), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
+    const link = getEntityDetailsLink({ key: entity.key, type: entity.type });
+    return (react_1.default.createElement(TableRow, { key: entity.id, "$columnsWidths": columns.map((column) => column.width || '1fr'), "$columnsMinWidths": columns.map((column) => column.minWidth || 'auto'), to: link, onClick: () => onRowClick(entity), style: { color: 'var(--catalog-page-wrapper-text-color)' }, "data-component-name": "Catalog/CatalogTableView/CatalogTableViewRow" }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
 const TableRow = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Catalog/variables.js

@@ -237,6 +237,13 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
+  /**
+    * @tokens Catalog show more button
+    */
+  --catalog-show-more-button-gap: 0.5rem;
+  --catalog-show-more-button-color: var(--text-color-primary);
+  --catalog-show-more-button-color-hover: var(--text-color-secondary);
+
   /**
     * @tokens Catalog arrow circle
     */
@@ -429,6 +436,111 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-relations-edge-label-font-size: 12px;
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
+
+  /**
+    * @tokens Catalog history button
+    */
+  --catalog-history-separator-border-color: var(--border-color-secondary);
+  --catalog-history-separator-margin-bottom: var(--spacing-sm);
+  --catalog-history-item-padding: var(--spacing-xxs);
+  --catalog-history-item-margin-bottom: calc(var(--spacing-xxs) * -1);
+  --catalog-history-item-gap: var(--spacing-xxs);
+  --catalog-history-item-border-radius: var(--menu-item-label-border-radius);
+  --catalog-history-item-bg-color-hover: var(--menu-item-bg-color-hover);
+  --catalog-history-icon-size: 16px;
+  --catalog-history-text-font-family: var(--font-family-base);
+  --catalog-history-text-font-size: var(--font-size-base);
+  --catalog-history-text-font-weight: var(--font-weight-regular);
+  --catalog-history-text-line-height: var(--line-height-base);
+  --catalog-history-text-color: var(--text-color-primary);
+  --catalog-history-pill-gap: var(--spacing-xxs);
+  --catalog-history-pill-padding-vertical: 1px;
+  --catalog-history-pill-padding-horizontal: var(--spacing-xs);
+  --catalog-history-pill-border-color: var(--border-color-primary);
+  --catalog-history-pill-border-radius: 12px;
+  --catalog-history-pill-icon-size: 14px;
+  --catalog-history-pill-icon-color: var(--color-green-8);
+  --catalog-history-pill-font-family: var(--font-family-base);
+  --catalog-history-pill-font-size: var(--font-size-base);
+  --catalog-history-pill-line-height: var(--line-height-base);
+  --catalog-history-pill-text-color: var(--text-color-primary);
+  // @tokens End
+
+  /**
+    * @tokens Catalog history sidebar
+    */
+  --catalog-history-sidebar-width: 320px;
+  --catalog-history-sidebar-bg-color: var(--sidebar-bg-color);
+  --catalog-history-sidebar-border-color: var(--border-color-secondary);
+
+  --catalog-history-sidebar-header-padding: var(--spacing-base) var(--spacing-sm) var(--spacing-base);
+  --catalog-history-sidebar-header-font-family: var(--font-family-base);
+  --catalog-history-sidebar-header-font-size: var(--font-size-base);
+  --catalog-history-sidebar-header-font-weight: var(--font-weight-semibold);
+  --catalog-history-sidebar-header-line-height: var(--line-height-base);
+  --catalog-history-sidebar-header-letter-spacing: 0;
+  --catalog-history-sidebar-header-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-close-button-size: 32px;
+  --catalog-history-sidebar-close-button-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-close-button-bg-color-hover: var(--color-hover-base);
+  --catalog-history-sidebar-close-icon-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-content-padding: 0 var(--spacing-sm);
+  --catalog-history-sidebar-content-margin-top: calc(var(--spacing-xxs) * -1);
+
+  --catalog-history-sidebar-version-header-padding: var(--spacing-xs) var(--spacing-xxs);
+  --catalog-history-sidebar-version-header-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-version-header-bg-color-hover: var(--color-hover-base);
+
+  --catalog-history-sidebar-version-icon-size: 32px;
+  --catalog-history-sidebar-version-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-icon-color-current: var(--color-static-white);
+  --catalog-history-sidebar-version-icon-margin-right: var(--spacing-xs);
+  --catalog-history-sidebar-chevron-icon-color: var(--text-color-secondary);
+  --catalog-history-sidebar-version-info-gap: 2px;
+
+  --catalog-history-sidebar-version-title-font-family: var(--font-family-base);
+  --catalog-history-sidebar-version-title-font-size: var(--font-size-base);
+  --catalog-history-sidebar-version-title-font-weight: var(--font-weight-medium);
+  --catalog-history-sidebar-version-title-line-height: var(--line-height-base);
+  --catalog-history-sidebar-version-title-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-version-date-font-family: var(--font-family-base);
+  --catalog-history-sidebar-version-date-font-size: var(--font-size-sm);
+  --catalog-history-sidebar-version-date-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-version-date-line-height: var(--line-height-sm);
+  --catalog-history-sidebar-version-date-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-revisions-padding-left: 40px;
+
+  --catalog-history-sidebar-revision-item-padding: var(--spacing-xs) var(--spacing-sm);
+  --catalog-history-sidebar-revision-item-border-radius: var(--border-radius-md);
+  --catalog-history-sidebar-revision-item-bg-color-hover: var(--bg-color-hover);
+
+  --catalog-history-sidebar-revision-name-font-family: var(--font-family-base);
+  --catalog-history-sidebar-revision-name-font-size: var(--font-size-base);
+  --catalog-history-sidebar-revision-name-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-revision-name-line-height: var(--line-height-base);
+  --catalog-history-sidebar-revision-name-color: var(--text-color-primary);
+
+  --catalog-history-sidebar-revision-date-font-family: var(--font-family-base);
+  --catalog-history-sidebar-revision-date-font-size: var(--font-size-sm);
+  --catalog-history-sidebar-revision-date-font-weight: var(--font-weight-regular);
+  --catalog-history-sidebar-revision-date-line-height: var(--line-height-sm);
+  --catalog-history-sidebar-revision-date-color: var(--color-warm-grey-7);
+
+  --catalog-history-sidebar-revision-line-color: var(--border-color-secondary);
+  --catalog-history-sidebar-revision-item-bg-color-active: var(--bg-color-active);
+
+  --catalog-history-sidebar-revisions-limit-message-color: var(--color-warm-grey-6);
+
+  /**
+   * @tokens Catalog history tag border radius
+   */
+  --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
+  --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
+  // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/components/ColorModeSwitcher/ColorModeIcon.d.ts

@@ -1,6 +1,7 @@
 import type { JSX } from 'react';
+import type { ColorMode } from '../../core/types';
 export type ColorModeIconProps = {
-    mode?: 'dark' | 'light' | string;
+    mode?: ColorMode | string;
     className?: string;
 };
 export declare function ColorModeIcon(props: ColorModeIconProps): JSX.Element;

package/lib/components/ColorModeSwitcher/ColorModeIcon.js

@@ -9,14 +9,15 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const ContrastIcon_1 = require("../../icons/ContrastIcon/ContrastIcon");
 const MoonIcon_1 = require("../../icons/MoonIcon/MoonIcon");
 const SunIcon_1 = require("../../icons/SunIcon/SunIcon");
+const constants_1 = require("../../core/constants");
 function ColorModeIcon(props) {
     return (react_1.default.createElement(ColorModeIconComponent, Object.assign({}, props, { "data-component-name": "ColorModeSwitcher/ColorModeIcon" })));
 }
 function Icon({ mode, className }) {
     switch (mode) {
-        case 'dark':
+        case constants_1.DEFAULT_COLOR_MODES.DARK:
             return react_1.default.createElement(SunIcon_1.SunIcon, { "data-testid": "dark" });
-        case 'light':
+        case constants_1.DEFAULT_COLOR_MODES.LIGHT:
             return react_1.default.createElement(MoonIcon_1.MoonIcon, { "data-testid": "light" });
         default:
             return react_1.default.createElement(ContrastIcon_1.ContrastIcon, { "data-testid": "custom", className: className + (mode ? ' ' + mode : '') });

package/lib/components/ColorModeSwitcher/ColorModeSwitcher.js

@@ -9,10 +9,7 @@ const hooks_1 = require("../../core/hooks");
 const ColorModeIcon_1 = require("../../components/ColorModeSwitcher/ColorModeIcon");
 const Button_1 = require("../../components/Button/Button");
 function ColorModeSwitcher({ className }) {
-    const { isSwitcherHidden, initActiveColorMode, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
-    (0, hooks_1.useMount)(() => {
-        initActiveColorMode();
-    });
+    const { isSwitcherHidden, switchColorMode, activeColorMode } = (0, hooks_1.useColorSwitcher)();
     if (isSwitcherHidden) {
         return null;
     }

package/lib/components/Menu/variables.js

@@ -42,6 +42,7 @@ exports.menu = (0, styled_components_1.css) `
   --menu-item-padding-vertical: var(--spacing-unit); // @presenter Spacing
   --menu-item-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
   --menu-item-nested-offset: var(--spacing-sm); // @presenter Spacing
+  --menu-header-container-gap: var(--spacing-sm); // @presenter Spacing
 
   /**
    * @tokens Menu item label

package/lib/components/Product/utils.d.ts

@@ -0,0 +1 @@
+export declare function getProductClassName(productName: string): string;

package/lib/components/Product/utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProductClassName = getProductClassName;
+function getProductClassName(productName) {
+    return `product-${productName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')}`;
+}
+//# sourceMappingURL=utils.js.map

package/lib/components/Tooltip/Tooltip.js

@@ -113,6 +113,8 @@ function TooltipComponent({ children, isOpen, tip, withArrow = true, placement =
         onMouseEnter: handleOpen,
         onMouseLeave: handleClose,
         onClick: handleClose,
+        onFocus: handleOpen,
+        onBlur: handleClose,
     };
     return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
         children,

package/lib/core/constants/catalog.d.ts

@@ -13,3 +13,4 @@ export declare enum GraphCustomNodeType {
 export declare enum GraphCustomEdgeType {
     CatalogEdge = "catalogEdge"
 }
+export declare const VERSION_NOT_SPECIFIED = "not_specified_version";

package/lib/core/constants/catalog.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.VERSION_NOT_SPECIFIED = exports.GraphCustomEdgeType = exports.GraphCustomNodeType = exports.GraphHandleType = exports.relationTypeMap = exports.reverseRelationMap = exports.PREDEFINED_ENTITY_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
 exports.PREDEFINED_ENTITY_TYPES = [
     'service',
@@ -82,4 +82,5 @@ var GraphCustomEdgeType;
 (function (GraphCustomEdgeType) {
     GraphCustomEdgeType["CatalogEdge"] = "catalogEdge";
 })(GraphCustomEdgeType || (exports.GraphCustomEdgeType = GraphCustomEdgeType = {}));
+exports.VERSION_NOT_SPECIFIED = 'not_specified_version';
 //# sourceMappingURL=catalog.js.map

package/lib/core/constants/common.d.ts

@@ -26,3 +26,7 @@ export declare enum MobileMenuType {
     PRODUCT = "PRODUCT",
     PAGE = "PAGE"
 }
+export declare const DEFAULT_COLOR_MODES: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};

package/lib/core/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
@@ -33,4 +33,8 @@ var MobileMenuType;
     MobileMenuType["PRODUCT"] = "PRODUCT";
     MobileMenuType["PAGE"] = "PAGE";
 })(MobileMenuType || (exports.MobileMenuType = MobileMenuType = {}));
+exports.DEFAULT_COLOR_MODES = {
+    LIGHT: 'light',
+    DARK: 'dark',
+};
 //# sourceMappingURL=common.js.map

package/lib/core/hooks/catalog/use-catalog-entity-details.d.ts

@@ -3,9 +3,11 @@ import type { BffCatalogEntity } from '../../../core/types';
 type Props = {
     catalogConfig: CatalogEntityConfig;
     entitiesCatalogConfig?: EntitiesCatalogConfig;
+    revision?: string | null;
+    version?: string | null;
 };
 type BaseEntity = Pick<BffCatalogEntity, 'key' | 'type'>;
-export declare function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }: Props): {
+export declare function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig, revision, version, }: Props): {
     getEntityDetailsLink: (entity: BaseEntity) => string;
 };
 export {};

package/lib/core/hooks/catalog/use-catalog-entity-details.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCatalogEntityDetails = useCatalogEntityDetails;
 const urls_1 = require("../../utils/urls");
-function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }) {
+function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig, revision, version, }) {
     const getCatalogSpecificConfigByEntityTypeIncluded = (entity) => {
         var _a;
         if (!entitiesCatalogConfig) {
@@ -14,12 +14,19 @@ function useCatalogEntityDetails({ catalogConfig, entitiesCatalogConfig }) {
         });
     };
     const getEntityDetailsLink = (entity) => {
-        const pathPrefix = (0, urls_1.getPathPrefix)();
         const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded(entity);
-        if (!catalogSpecificConfig || !entitiesCatalogConfig) {
-            return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`;
+        const basePath = !catalogSpecificConfig || !entitiesCatalogConfig
+            ? (0, urls_1.withPathPrefix)(`/catalogs/${catalogConfig.slug}/entities/${entity.key}`)
+            : (0, urls_1.withPathPrefix)(`/catalogs/${catalogSpecificConfig.slug}/entities/${entity.key}`);
+        const params = new URLSearchParams();
+        if (revision) {
+            params.set('revision', revision);
         }
-        return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entity.key}`;
+        if (version !== undefined) {
+            params.set('version', version !== null && version !== void 0 ? version : '');
+        }
+        params.set('search', '');
+        return `${basePath}?${params.toString()}`;
     };
     return { getEntityDetailsLink };
 }

package/lib/core/hooks/index.d.ts

@@ -48,3 +48,4 @@ export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
+export * from './use-store';

package/lib/core/hooks/index.js

@@ -64,4 +64,5 @@ __exportStar(require("./use-connect-mcp-button"), exports);
 __exportStar(require("./catalog/use-catalog-entity-details"), exports);
 __exportStar(require("./catalog/use-catalog-entity-schema"), exports);
 __exportStar(require("./catalog/use-catalog-table-header-cell-actions"), exports);
+__exportStar(require("./use-store"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-recent-searches.js

@@ -2,31 +2,19 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRecentSearches = void 0;
 const react_1 = require("react");
+const use_store_1 = require("../use-store");
 const js_utils_1 = require("../../utils/js-utils");
 const RECENT_SEARCHES_KEY = 'recentSearches';
 const RECENT_SEARCHES_LIMIT = 5;
-const createRecentSearchesStore = () => {
-    const subscribers = new Set();
-    let cachedSnapshot;
-    const getSnapshot = () => {
-        if (!(0, js_utils_1.isBrowser)())
-            return [];
-        if (cachedSnapshot)
-            return cachedSnapshot;
-        try {
-            const stored = localStorage.getItem(RECENT_SEARCHES_KEY);
-            cachedSnapshot = stored ? JSON.parse(stored) : [];
-            return cachedSnapshot;
-        }
-        catch (e) {
-            cachedSnapshot = [];
-            return cachedSnapshot;
-        }
-    };
-    const updateItems = (value, isAdd) => {
+const recentSearchesStore = (0, use_store_1.createStore)({
+    storageKey: RECENT_SEARCHES_KEY,
+});
+const useRecentSearches = () => {
+    const [items, setItems] = (0, use_store_1.useStore)(recentSearchesStore, []);
+    const updateItems = (0, react_1.useCallback)((value, isAdd) => {
         if (!(0, js_utils_1.isBrowser)())
             return;
-        const currentItems = getSnapshot();
+        const currentItems = [...items];
         const valueIndex = currentItems.indexOf(value);
         if (valueIndex !== -1) {
             currentItems.splice(valueIndex, 1);
@@ -35,29 +23,14 @@ const createRecentSearchesStore = () => {
             currentItems.unshift(value);
         }
         const limitedItems = currentItems.slice(0, RECENT_SEARCHES_LIMIT);
-        localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(limitedItems));
-        cachedSnapshot = limitedItems;
-        subscribers.forEach((callback) => callback());
-    };
-    const subscribe = (callback) => {
-        subscribers.add(callback);
-        return () => subscribers.delete(callback);
-    };
-    return {
-        getSnapshot,
-        subscribe,
-        updateItems,
-    };
-};
-const recentSearchesStore = createRecentSearchesStore();
-const useRecentSearches = () => {
-    const items = (0, react_1.useSyncExternalStore)(recentSearchesStore.subscribe, recentSearchesStore.getSnapshot, () => []);
+        setItems(limitedItems);
+    }, [items, setItems]);
     const addSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        recentSearchesStore.updateItems(value, true);
-    }, []);
+        updateItems(value, true);
+    }, [updateItems]);
     const removeSearchHistoryItem = (0, react_1.useCallback)((value) => {
-        recentSearchesStore.updateItems(value, false);
-    }, []);
+        updateItems(value, false);
+    }, [updateItems]);
     return { items, addSearchHistoryItem, removeSearchHistoryItem };
 };
 exports.useRecentSearches = useRecentSearches;

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,6 +1,5 @@
 export declare const useColorSwitcher: () => {
     isSwitcherHidden: boolean | undefined;
-    initActiveColorMode: () => void;
     switchColorMode: (mode?: string) => void;
     activeColorMode: string;
 };

package/lib/core/hooks/use-color-switcher.js

@@ -2,38 +2,44 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColorSwitcher = void 0;
 const react_1 = require("react");
+const hooks_1 = require("../../core/hooks");
 const use_theme_config_1 = require("./use-theme-config");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_store_1 = require("./use-store");
+const constants_1 = require("../constants");
+const COLOR_MODE_KEY = 'colorSchema';
+const colorModeStore = (0, use_store_1.createStore)({
+    storageKey: COLOR_MODE_KEY,
+});
 const useColorSwitcher = () => {
     const themeSettings = (0, use_theme_config_1.useThemeConfig)();
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const colorMode = themeSettings.colorMode;
-    const modes = (colorMode === null || colorMode === void 0 ? void 0 : colorMode.modes) || ['light', 'dark'];
-    const defaultColor = modes[0] || 'light';
-    const [activeColorMode, setActiveColorMode] = (0, react_1.useState)(defaultColor);
-    const initActiveColorMode = () => {
+    const themeColorMode = themeSettings.colorMode;
+    const modes = (0, react_1.useMemo)(() => (themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.modes) || [constants_1.DEFAULT_COLOR_MODES.LIGHT, constants_1.DEFAULT_COLOR_MODES.DARK], [themeColorMode]);
+    const defaultMode = modes[0] || constants_1.DEFAULT_COLOR_MODES.LIGHT;
+    const [activeColorMode, setActiveColorMode] = (0, use_store_1.useStore)(colorModeStore, defaultMode);
+    (0, hooks_1.useMount)(() => {
         const activeMode = Array.from(document.documentElement.classList).find((c) => modes.includes(c));
-        setActiveColorMode(activeMode || defaultColor);
-    };
+        setActiveColorMode(activeMode || defaultMode);
+    });
     const switchColorMode = (mode) => {
         if (mode && !modes.includes(mode)) {
             return;
         }
         const activeIndex = modes.indexOf(activeColorMode);
-        // If specific mode is provided, use it, otherwise cycle through modes
         const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
-        localStorage.setItem('colorSchema', newMode);
-        document.documentElement.className = `${newMode} notransition`;
+        const root = document.documentElement;
+        modes.forEach((mode) => root.classList.remove(mode));
+        root.classList.add(newMode, 'notransition');
         window.requestAnimationFrame(() => {
-            document.documentElement.classList.remove('notransition');
+            root.classList.remove('notransition');
         });
         telemetry.sendColorModeSwitchedMessage({ from: activeColorMode, to: newMode });
         setActiveColorMode(newMode);
     };
     return {
-        isSwitcherHidden: colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide,
-        initActiveColorMode,
+        isSwitcherHidden: themeColorMode === null || themeColorMode === void 0 ? void 0 : themeColorMode.hide,
         switchColorMode,
         activeColorMode,
     };