@redocly/theme 0.31.2 → 0.32.0

package/lib/components/CopyButton/CopyButton.d.ts

@@ -5,7 +5,7 @@ export interface CopyButtonProps {
     data: unknown;
     type?: ControlItemType;
     toasterPlacement?: TooltipProps['placement'];
-    toasterText?: TooltipProps['tip'];
+    toasterText?: string;
     toasterDuration?: number;
     buttonText?: string;
     tooltipText?: string;

package/lib/components/Search/SuggestedPages.js

@@ -40,11 +40,11 @@ function SuggestedPages({ className }) {
         return null;
     return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
         React.createElement(Title, { "data-translation-key": "theme.search.suggested" }, translate('theme.search.suggested', 'Suggested pages')),
-        React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
+        React.createElement(SuggestedItems, null, pages.map((page) => page.link ? (React.createElement(Item, { key: page.label },
             React.createElement(PageLink, Object.assign({ to: page.link }, page),
                 React.createElement(Group, null,
                     React.createElement(ClockBackwardsIcon, null),
-                    page.label))))))));
+                    page.label)))) : null))));
 }
 exports.SuggestedPages = SuggestedPages;
 const Wrapper = styled_components_1.default.div `

package/lib/globalStyle.js

@@ -12,7 +12,7 @@ const Tag_1 = require("./components/Tag");
 const TableOfContent_1 = require("./components/TableOfContent");
 const Navbar_1 = require("./components/Navbar");
 const Search_1 = require("./components/Search");
-const Catalog_1 = require("./components/Catalog");
+const styledVariables_1 = require("./components/Catalog/styledVariables"); // NOTE: For some reason only direct import works here
 const Filter_1 = require("./components/Filter");
 const Menu_1 = require("./components/Menu");
 const Panel_1 = require("./components/Panel");
@@ -927,7 +927,7 @@ exports.styles = (0, styled_components_1.css) `
     ${borders}
     ${Breadcrumbs_1.breadcrumbs}
     ${Button_1.button}
-    ${Catalog_1.catalog}
+    ${styledVariables_1.catalog}
     ${CodeBlock_1.code}
     ${docsDropdown}
     ${Dropdown_1.dropdown}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.31.2",
+  "version": "0.32.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -21,10 +21,10 @@
   "peerDependencies": {
     "lodash.throttle": "^4.1.1",
     "prismjs": "^1.28.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^6.10.0",
-    "styled-components": "^5.3.7",
+    "styled-components": "^4.1.1 || ^5.3.11",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -40,21 +40,19 @@
     "@storybook/react-webpack5": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.5.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/highlight-words-core": "^1.2.1",
     "@types/jest": "^29.2.1",
     "@types/jest-when": "^3.5.2",
     "@types/lodash.throttle": "^4.1.7",
     "@types/node": "^18.11.18",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.26",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
+    "@types/styled-components": "^5.1.30",
     "@types/styled-system": "^5.1.13",
-    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "chromatic": "^6.10.2",
@@ -71,7 +69,7 @@
     "storybook": "^7.5.0",
     "storybook-addon-pseudo-states": "^2.1.2",
     "storybook-design-token": "3.0.0-beta.6",
-    "styled-components": "^5.3.7",
+    "styled-components": "^5.3.11",
     "styled-system": "^5.1.5",
     "ts-jest": "^29.0.3",
     "ts-node": "^10.7.0",
@@ -81,7 +79,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^5.2.2",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.2.0"
+    "@redocly/portal-types": "1.2.1"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Catalog/useCatalog.ts

@@ -42,7 +42,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
     [items, config, customFields],
   );
 
-  const toggleOption = React.useCallback((filterIdx, option) => {
+  const toggleOption = React.useCallback((filterIdx: number, option: any) => {
     setFiltersState((prev) => {
       const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set<string>();
       if (!(newFilterOptions instanceof Set)) return prev;
@@ -58,7 +58,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
   }, []);
 
   const selectOption = React.useCallback(
-    (filterIdx, option) => {
+    (filterIdx: number, option: any) => {
       setFiltersState((prev) => {
         const newFilterOptions =
           prev[filterIdx] instanceof Set

package/src/components/CopyButton/CopyButton.tsx

@@ -13,7 +13,7 @@ export interface CopyButtonProps {
   data: unknown;
   type?: ControlItemType;
   toasterPlacement?: TooltipProps['placement'];
-  toasterText?: TooltipProps['tip'];
+  toasterText?: string;
   toasterDuration?: number;
   buttonText?: string;
   tooltipText?: string;

package/src/components/Search/SuggestedPages.tsx

@@ -17,18 +17,17 @@ export function SuggestedPages({ className }: { className?: string }) {
         {translate('theme.search.suggested', 'Suggested pages')}
       </Title>
       <SuggestedItems>
-        {pages.map(
-          (page) =>
-            page.link && (
-              <Item key={page.label}>
-                <PageLink to={page.link} {...page}>
-                  <Group>
-                    <ClockBackwardsIcon />
-                    {page.label}
-                  </Group>
-                </PageLink>
-              </Item>
-            ),
+        {pages.map((page) =>
+          page.link ? (
+            <Item key={page.label}>
+              <PageLink to={page.link} {...page}>
+                <Group>
+                  <ClockBackwardsIcon />
+                  {page.label}
+                </Group>
+              </PageLink>
+            </Item>
+          ) : null,
         )}
       </SuggestedItems>
     </Wrapper>

package/src/globalStyle.ts

@@ -10,7 +10,7 @@ import { tag } from '@theme/components/Tag';
 import { toc } from '@theme/components/TableOfContent';
 import { navbar } from '@theme/components/Navbar';
 import { search } from '@theme/components/Search';
-import { catalog } from '@theme/components/Catalog';
+import { catalog } from '@theme/components/Catalog/styledVariables'; // NOTE: For some reason only direct import works here
 import { filter } from '@theme/components/Filter';
 import { menu, mobileMenu } from '@theme/components/Menu';
 import { apiReferencePanels, responsePanelColors } from '@theme/components/Panel';