@redocly/theme 0.58.0-next.3 → 0.58.0-next.4

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

@@ -13,7 +13,7 @@ const MoleculesIcon_1 = require("../../../../icons/MoleculesIcon/MoleculesIcon")
 const NetworkIcon_1 = require("../../../../icons/NetworkIcon/NetworkIcon");
 function CatalogEntityApiDescriptionRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations" },
-        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+        react_1.default.createElement(Tabs_1.Tabs, { key: entity.id, forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
             react_1.default.createElement(TabItem, { label: "Operations", icon: react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, null), onClick: () => setFilter('type:api-operation') },
                 react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "operations-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false, listType: "api-operation" })),
             react_1.default.createElement(TabItem, { label: "Schemas", icon: react_1.default.createElement(NetworkIcon_1.NetworkIcon, null), onClick: () => setFilter('type:data-schema') },

package/lib/components/Search/SearchDialog.js

@@ -269,10 +269,10 @@ const SearchDialogWrapper = styled_components_1.default.div `
   border-radius: 0;
 
   @media screen and (max-width: ${utils_1.breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
@@ -319,6 +319,8 @@ const SearchDialogBodyMainView = styled_components_1.default.div `
 `;
 const SearchDialogBodyFilterView = styled_components_1.default.div `
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 const SearchDialogFooter = styled_components_1.default.footer `
   display: flex;

package/lib/components/Search/SearchFilter.js

@@ -43,7 +43,8 @@ function SearchFilter({ className, facets, filter, query, quickFilterFields, onF
         React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -57,4 +57,9 @@ export declare const useTelemetryFallback: () => {
     sendAsyncapiDocsMessageClickedMessage: () => void;
     sendAsyncapiDocsServerModalOpenedMessage: () => void;
     sendAsyncapiDocsDownloadDefinitionClickedMessage: () => void;
+    sendGraphqlDocsViewedMessage: () => void;
+    sendGraphqlDocsPerformanceMetricsMessage: () => void;
+    sendGraphqlDocsReferencedInLinkClickedMessage: () => void;
+    sendGraphqlDocsRequiredScopesModalOpenedMessage: () => void;
+    sendGraphqlDocsDownloadDefinitionClickedMessage: () => void;
 };

package/lib/core/hooks/use-telemetry-fallback.js

@@ -61,6 +61,11 @@ const useTelemetryFallback = () => ({
     sendAsyncapiDocsMessageClickedMessage: () => { },
     sendAsyncapiDocsServerModalOpenedMessage: () => { },
     sendAsyncapiDocsDownloadDefinitionClickedMessage: () => { },
+    sendGraphqlDocsViewedMessage: () => { },
+    sendGraphqlDocsPerformanceMetricsMessage: () => { },
+    sendGraphqlDocsReferencedInLinkClickedMessage: () => { },
+    sendGraphqlDocsRequiredScopesModalOpenedMessage: () => { },
+    sendGraphqlDocsDownloadDefinitionClickedMessage: () => { },
 });
 exports.useTelemetryFallback = useTelemetryFallback;
 //# sourceMappingURL=use-telemetry-fallback.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.3",
+  "version": "0.58.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.31.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1"
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1",
+    "@redocly/config": "0.31.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Search/SearchDialog.tsx

@@ -487,10 +487,10 @@ const SearchDialogWrapper = styled.div`
   border-radius: 0;
 
   @media screen and (max-width: ${breakpoints.small}) {
-    min-height: -webkit-fill-available !important;
-    min-height: 100dvh !important;
-    height: auto !important;
-    width: 100vw !important;
+    min-height: -webkit-fill-available;
+    min-height: 100dvh;
+    height: 100dvh;
+    width: 100vw;
   }
 
   @media screen and (min-width: ${breakpoints.small}) {
@@ -542,6 +542,8 @@ const SearchDialogBodyMainView = styled.div`
 
 const SearchDialogBodyFilterView = styled.div`
   overflow: scroll;
+  max-width: var(--search-filter-width);
+  width: 100%;
 `;
 
 const SearchDialogFooter = styled.footer`

package/src/components/Search/SearchFilter.tsx

@@ -66,7 +66,8 @@ export function SearchFilter({
 }
 
 const SearchFilterWrapper = styled.div`
-  width: var(--search-filter-width);
+  width: 100%;
+  max-width: var(--search-filter-width);
   display: flex;
   flex-direction: column;
   padding: var(--search-filter-padding);

package/src/core/hooks/use-telemetry-fallback.ts

@@ -58,4 +58,9 @@ export const useTelemetryFallback = () => ({
   sendAsyncapiDocsMessageClickedMessage: () => {},
   sendAsyncapiDocsServerModalOpenedMessage: () => {},
   sendAsyncapiDocsDownloadDefinitionClickedMessage: () => {},
+  sendGraphqlDocsViewedMessage: () => {},
+  sendGraphqlDocsPerformanceMetricsMessage: () => {},
+  sendGraphqlDocsReferencedInLinkClickedMessage: () => {},
+  sendGraphqlDocsRequiredScopesModalOpenedMessage: () => {},
+  sendGraphqlDocsDownloadDefinitionClickedMessage: () => {},
 });