@redocly/theme 0.81.2-rc.1 → 0.81.2-rc.2

package/lib/components/Breadcrumbs/Breadcrumb.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type BreadcrumbProps = {
     label: string;
     link?: string;

package/lib/components/Buttons/EditPageButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type EditPageButtonProps = {
     to: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogConfig } from '../../config';
 export default function Catalog(props: {
     pageProps: {

package/lib/components/Catalog/CatalogActions.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 type CatalogActionsProps = {
     onOpenFilter: () => void;

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogItem } from '../../core/types';
 type CatalogCardProps = {
     item: CatalogItem;

package/lib/components/Catalog/CatalogInfoBlock.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type CatalogInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { FileTabs } from '../../components/CodeBlock/CodeBlock';
 type CodeBlockTabsProps = {
     tabs: FileTabs;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type ColorModeSwitcherProps = {
     className?: string;
 };

package/lib/components/Feedback/Comment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type CommentProps = {
     onSubmit: (value: {
         comment: string;

package/lib/components/Feedback/Mood.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",

package/lib/components/Feedback/Rating.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Reasons.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type ReasonsProps = {
     onChange: (value: string[]) => void;
     settings: {

package/lib/components/Feedback/ReportDialog.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SubmitFeedbackParams } from '../../core/types';
 export type ReportDialogProps = {
     location: string;

package/lib/components/Feedback/Scale.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;

package/lib/components/Feedback/Stars.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type StarsProps = {
     max?: number;
     name?: string;

package/lib/components/Filter/Filter.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function Filter({ filter, filterValuesCasing }: FilterProps): JSX.Element | null;

package/lib/components/Filter/FilterCheckboxes.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterCheckboxes({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 type FilterContentProps = {

package/lib/components/Filter/FilterDateRange.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterDateRange({ filter }: FilterProps): JSX.Element;

package/lib/components/Filter/FilterInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FilterInputProps = {
     value: string;
     onChange: (newValue: string) => void;

package/lib/components/Filter/FilterPopover.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '../../core/types';
 import type { ThemeConfig } from '../../config';
 type FilterPopoverProps = {

package/lib/components/Filter/FilterSelect.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { FilterProps } from '../../core/types';
 export declare function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.Element;

package/lib/components/Footer/Footer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FooterProps = {
     className?: string;
 };

package/lib/components/Footer/FooterColumn.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type FooterColumnProps = {
     column: ResolvedNavItem;

package/lib/components/Footer/FooterCopyright.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type FooterCopyrightProps = {
     copyrightText: string;
     className?: string;

package/lib/components/Footer/FooterItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type FooterItemProps = {
     item: ResolvedNavItem;

package/lib/components/LanguagePicker/LanguagePicker.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type LanguagePickerProps = {
     onChangeLanguage: (newLang: string) => void;
     onlyIcon?: boolean;

package/lib/components/LastUpdated/LastUpdated.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const FORMATS: {
     timeago: (date: Date, locale: string) => string;
     iso: (date: Date) => string;

package/lib/components/Loading/Loading.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface LoadingProps {
     color: string;
 }

package/lib/components/Logo/Logo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LogoConfig } from '../../core/types';
 type LogoProps = {
     config: LogoConfig;

package/lib/components/Menu/Menu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DrilldownMenuItemDetails, ItemState } from '../../core/types';
 type MenuListProps = {
     items: ItemState[];

package/lib/components/Menu/MenuMobile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type MobileMenuProps = {
     className?: string;
     hideUserProfile?: boolean;

package/lib/components/Navbar/Navbar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type NavbarProps = {
     className?: string;
 };

package/lib/components/Navbar/NavbarItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@redocly/config';
 type NavbarItemProps = {
     navItem: ResolvedNavItem;

package/lib/components/Navbar/NavbarMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedConfigLinks } from '@redocly/config';
 type NavbarMenuProps = {
     menuItems: ResolvedConfigLinks;

package/lib/components/PageNavigation/NextButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type NextPageType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PageNavigation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type PageNavigationType = {
     nextPage?: ResolvedNavItemWithLink | null;

package/lib/components/PageNavigation/PreviousButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItemWithLink } from '@redocly/config';
 type PreviousPageType = {
     prevPage?: ResolvedNavItemWithLink | null;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ProductConfig } from '../../config';
 type ProductProps = {
     product: ProductConfig;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function ProductPicker(): JSX.Element | null;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchProps = {
     className?: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchDialogProps = {
     onClose: () => void;
     className?: string;

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function highlight(text: string | string[]): JSX.Element | string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchRecentProps = {
     onSelect: (value: string) => void;
     className?: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchShortcutProps = {
     combination: string;
     text: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchSuggestedPagesProps = {
     className?: string;
 };

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type SearchTriggerProps = {
     onClick: () => void;
     className?: string;

package/lib/components/SidebarActions/ChangeViewButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LayoutVariant } from '../../components/SidebarActions/SidebarActions';
 interface ChangeViewButtonProps {
     layout: LayoutVariant;

package/lib/components/SidebarLogo/SidebarLogo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface LogoProps {
     imageUrl?: string;
     href?: string;

package/lib/components/TableOfContent/TableOfContent.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { MdHeading } from '../../core/types';
 type TableOfContentProps = {
     headings?: Array<MdHeading | null> | null | undefined;

package/lib/components/UserMenu/LoginButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type LoginButtonProps = {
     href: string;
     className?: string;

package/lib/components/UserMenu/LogoutMenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type LogoutMenuItemProps = {
     iconOnly?: boolean;
     className?: string;

package/lib/components/UserMenu/UserAvatar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserAvatarProps = {
     picture?: string;
     className?: string;

package/lib/components/UserMenu/UserInfoMenuItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserInfoMenuItemProps = {
     name: string;
     email?: string;

package/lib/components/UserMenu/UserMenuMobile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type UserMenuMobileProps = {
     className?: string;
 };

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

@@ -1,6 +1,7 @@
 export * from '../../../core/hooks/__mocks__/use-theme-config';
 export * from '../../../core/hooks/__mocks__/use-theme-hooks';
 export * from '../../../core/hooks/__mocks__/use-mobile-menu';
+export * from '../../../core/hooks/__mocks__/use-controlled-state';
 export * from '../../../core/hooks/__mocks__/search/use-recent-searches';
 export * from '../../../core/hooks/__mocks__/search/use-suggested-pages';
 export * from '../../../core/hooks/menu/__mocks__/use-mobile-menu-items';

package/lib/core/hooks/__mocks__/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../../core/hooks/__mocks__/use-theme-config"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-theme-hooks"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/use-mobile-menu"), exports);
+__exportStar(require("../../../core/hooks/__mocks__/use-controlled-state"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-recent-searches"), exports);
 __exportStar(require("../../../core/hooks/__mocks__/search/use-suggested-pages"), exports);
 __exportStar(require("../../../core/hooks/menu/__mocks__/use-mobile-menu-items"), exports);

package/lib/core/hooks/__mocks__/use-controlled-state.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="jest" />
+export declare const useControlledState: () => (boolean | jest.Mock<any, any, any>)[];

package/lib/core/hooks/__mocks__/use-controlled-state.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useControlledState = void 0;
+const useControlledState = () => [false, jest.fn()];
+exports.useControlledState = useControlledState;
+//# sourceMappingURL=use-controlled-state.js.map

package/lib/core/hooks/menu/use-menu-item-expanded.js

@@ -18,6 +18,7 @@ function useMenuItemExpanded(item) {
         setIsExpanded(newValue);
         setControlledValue(newValue);
         // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
     return [isExpanded, setControlledValue];
 }

package/lib/core/hooks/use-codeblock-tabs-controls.js

@@ -10,7 +10,9 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
         return ((_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.reduce((acc, tabRef) => {
             return tabRef ? acc + tabRef.offsetWidth : acc;
         }, 0)) || 0;
-    }, [(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [(_a = tabRefs === null || tabRefs === void 0 ? void 0 : tabRefs.current) === null || _a === void 0 ? void 0 : _a.length]);
     const { currentIndex, isFirstTab, isLastTab } = (0, react_1.useMemo)(() => {
         const currentIndex = tabs.files.findIndex((file) => file.name === tabs.activeTabName);
         return {
@@ -18,30 +20,35 @@ function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }) {
             isFirstTab: currentIndex === 0,
             isLastTab: currentIndex === tabs.files.length - 1,
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [tabs]);
     (0, react_1.useEffect)(() => {
         if (containerRef.current) {
+            const container = containerRef.current;
             const resizeObserver = new ResizeObserver((entries) => {
                 const containerWidth = entries[0].contentRect.width;
                 setShowControls(tabsWidth > containerWidth);
             });
-            resizeObserver.observe(containerRef.current);
+            resizeObserver.observe(container);
             return () => {
-                resizeObserver.unobserve(containerRef.current);
+                resizeObserver.unobserve(container);
             };
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [containerRef.current]);
     const handlePrevTab = (0, react_1.useCallback)(() => {
         if (!isFirstTab) {
             const prevTab = tabs.files[currentIndex - 1].name;
             tabs.handleTabSwitch(prevTab);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);
     const handleNextTab = (0, react_1.useCallback)(() => {
         if (!isLastTab) {
             const nextTab = tabs.files[currentIndex + 1].name;
             tabs.handleTabSwitch(nextTab);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentIndex]);
     return { showControls, handlePrevTab, handleNextTab };
 }

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

@@ -31,6 +31,7 @@ function useSearch() {
     const onOpen = (0, react_1.useCallback)(function () {
         telemetry.send('search_opened', { method: 'click' });
         setIsOpen(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const onClose = (0, react_1.useCallback)(() => {
         setIsOpen(false);

package/lib/layouts/Forbidden.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function Forbidden(): JSX.Element;

package/lib/layouts/NotFound.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function NotFound(): JSX.Element;

package/lib/layouts/OIDCForbidden.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function OIDCForbidden(): JSX.Element;

package/lib/markdoc/components/Mermaid/Mermaid.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
     'data-source'?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.81.2-rc.1",
+  "version": "0.81.2-rc.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -56,8 +56,8 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "18.19.3",
     "@types/prismjs": "1.26.3",
-    "@types/react": "18.2.45",
-    "@types/react-dom": "18.2.17",
+    "@types/react": "18.2.79",
+    "@types/react-dom": "18.2.25",
     "@types/styled-components": "5.1.34",
     "@types/styled-system": "5.1.22",
     "@types/nprogress": "^0.2.0",

package/src/core/hooks/__mocks__/index.ts

@@ -1,6 +1,7 @@
 export * from '@redocly/theme/core/hooks/__mocks__/use-theme-config';
 export * from '@redocly/theme/core/hooks/__mocks__/use-theme-hooks';
 export * from '@redocly/theme/core/hooks/__mocks__/use-mobile-menu';
+export * from '@redocly/theme/core/hooks/__mocks__/use-controlled-state';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-recent-searches';
 export * from '@redocly/theme/core/hooks/__mocks__/search/use-suggested-pages';
 export * from '@redocly/theme/core/hooks/menu/__mocks__/use-mobile-menu-items';

package/src/core/hooks/__mocks__/use-controlled-state.ts

@@ -0,0 +1 @@
+export const useControlledState = () => [false, jest.fn()];

package/src/core/hooks/menu/use-menu-item-expanded.ts

@@ -24,6 +24,7 @@ export function useMenuItemExpanded(item: ItemState): [boolean, Dispatch<SetStat
     setIsExpanded(newValue);
     setControlledValue(newValue);
     // we have different sensitivity to changes for items from openapi-docs sidebar and for items from portal sidebar
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [!item.modified ? item : item.active, item.hasActiveSubItem, item.expanded]);
 
   return [isExpanded, setControlledValue];

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -16,6 +16,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       tabRefs?.current?.reduce((acc, tabRef) => {
         return tabRef ? acc + tabRef.offsetWidth : acc;
       }, 0) || 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [tabRefs?.current?.length],
   );
 
@@ -26,22 +27,25 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       isFirstTab: currentIndex === 0,
       isLastTab: currentIndex === tabs.files.length - 1,
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tabs]);
 
   useEffect(() => {
     if (containerRef.current) {
+      const container = containerRef.current;
       const resizeObserver = new ResizeObserver((entries) => {
         const containerWidth = entries[0].contentRect.width;
 
         setShowControls(tabsWidth > containerWidth);
       });
 
-      resizeObserver.observe(containerRef.current);
+      resizeObserver.observe(container);
 
       return () => {
-        resizeObserver.unobserve(containerRef.current as HTMLDivElement);
+        resizeObserver.unobserve(container as HTMLDivElement);
       };
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [containerRef.current]);
 
   const handlePrevTab = useCallback(() => {
@@ -49,6 +53,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       const prevTab = tabs.files[currentIndex - 1].name;
       tabs.handleTabSwitch(prevTab);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentIndex]);
 
   const handleNextTab = useCallback(() => {
@@ -56,6 +61,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       const nextTab = tabs.files[currentIndex + 1].name;
       tabs.handleTabSwitch(nextTab);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentIndex]);
 
   return { showControls, handlePrevTab, handleNextTab };

package/src/core/hooks/use-search.ts

@@ -29,6 +29,7 @@ export function useSearch() {
   const onOpen = useCallback(function () {
     telemetry.send('search_opened', { method: 'click' });
     setIsOpen(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onClose = useCallback(() => {