@redocly/theme 0.4.10 → 0.4.12

package/Markdown/CodeSample/CodeSample.js

@@ -70,7 +70,7 @@ function CodeSample(_a) {
     var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
     var langClassName = language ? "language-".concat(language) : '';
     var copyCodeSnippet = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)().copyCodeSnippet;
-    var copyCodeProps = __assign(__assign({}, copyCodeSnippet), defaultCopyCodeSnippet);
+    var copyCodeProps = __assign(__assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
     var _b = __read((0, react_1.useState)(false), 2), isCopied = _b[0], setIsCopied = _b[1];
     var copyCode = function (code) {
         ClipboardService_1.ClipboardService.copyCustom(code);

package/hooks/useActiveHeading.js

@@ -23,7 +23,7 @@ function useActiveHeading(contentElement, displayedHeaders) {
     var _a = __read((0, react_1.useState)(undefined), 2), heading = _a[0], setHeading = _a[1];
     var _b = __read((0, react_1.useState)([]), 2), headingElements = _b[0], setHeadingElements = _b[1];
     var headingElementsRef = (0, react_1.useRef)({});
-    var history = (0, react_router_dom_1.useHistory)();
+    var location = (0, react_router_dom_1.useLocation)();
     var getVisibleHeadings = function () {
         var visibleHeadings = [];
         for (var key in headingElementsRef.current) {
@@ -72,12 +72,9 @@ function useActiveHeading(contentElement, displayedHeaders) {
             return;
         }
         setHeadingElements(findHeaders(contentElement));
-        var unlisten = history.listen(function () {
-            setHeadingElements(findHeaders(contentElement));
-        });
-        return function () { return unlisten(); };
+        return function () { return setHeadingElements(findHeaders(contentElement)); };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [contentElement]);
+    }, [location.pathname, contentElement]);
     (0, react_1.useEffect)(function () {
         if (!(headingElements === null || headingElements === void 0 ? void 0 : headingElements.length)) {
             return;

package/hooks/useMobileMenu.js

@@ -21,7 +21,7 @@ var react_1 = require("react");
 var react_router_dom_1 = require("react-router-dom");
 function useMobileMenu(initialState) {
     if (initialState === void 0) { initialState = false; }
-    var location = (0, react_router_dom_1.useHistory)().location;
+    var location = (0, react_router_dom_1.useLocation)();
     var _a = __read((0, react_1.useState)(initialState), 2), isOpen = _a[0], setIsOpen = _a[1];
     (0, react_1.useEffect)(function () { return setIsOpen(false); }, [location.pathname]);
     return [isOpen, setIsOpen];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "Shared UI components",
   "author": "team@redocly.com",
   "license": "SEE LICENSE IN LICENSE",
@@ -11,7 +11,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.4.1",
     "styled-components": "^5.3.1",
     "styled-system": "^5.1.5"
   },

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -21,7 +21,7 @@ const defaultCopyCodeSnippet = {
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
   const { copyCodeSnippet } = useDefaultThemeSettings();
-  const copyCodeProps = { ...copyCodeSnippet, ...defaultCopyCodeSnippet };
+  const copyCodeProps = { ...defaultCopyCodeSnippet, ...copyCodeSnippet };
 
   const [isCopied, setIsCopied] = useState(false);
 

package/src/hooks/useActiveHeading.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 export type UseActiveHeadingReturnType = string | undefined;
 
@@ -15,7 +15,7 @@ export function useActiveHeading(
   const [headingElements, setHeadingElements] = useState<HTMLElement[]>([]);
   const headingElementsRef = useRef<HeadingEntry>({});
 
-  const history = useHistory();
+  const location = useLocation();
 
   const getVisibleHeadings = () => {
     const visibleHeadings: IntersectionObserverEntry[] = [];
@@ -85,13 +85,9 @@ export function useActiveHeading(
     }
     setHeadingElements(findHeaders(contentElement));
 
-    const unlisten = history.listen(() => {
-      setHeadingElements(findHeaders(contentElement));
-    });
-
-    return () => unlisten();
+    return () => setHeadingElements(findHeaders(contentElement));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentElement]);
+  }, [location.pathname, contentElement]);
 
   useEffect(() => {
     if (!headingElements?.length) {

package/src/hooks/useMobileMenu.ts

@@ -1,9 +1,9 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
-  const { location } = useHistory();
+  const location = useLocation();
   const [isOpen, setIsOpen] = useState(initialState);
 
   useEffect(() => setIsOpen(false), [location.pathname]);

package/src/ui/UniversalLink.tsx

@@ -52,7 +52,7 @@ export const withPropsFilter =
       return <WrappedComponent {...filteredProps} />;
     };
 
-export interface PortalLinkProps<TState> extends LinkProps<TState> {
+export interface PortalLinkProps<TState> extends LinkProps {
   activeClassName?: string;
   activeStyle?: object;
   onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;

package/ui/UniversalLink.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { LinkProps } from 'react-router-dom';
 export declare const withPropsFilter: (filterList: string[]) => (WrappedComponent: React.FunctionComponent) => (props: React.PropsWithChildren<object>) => JSX.Element;
-export interface PortalLinkProps<TState> extends LinkProps<TState> {
+export interface PortalLinkProps<TState> extends LinkProps {
     activeClassName?: string;
     activeStyle?: object;
     onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;