@redocly/theme 0.33.2 → 0.74.2-pingfed.1

package/lib/components/Button/Button.js

@@ -148,7 +148,7 @@ const ButtonComponent = (props) => {
         props.icon ? react_1.default.createElement(StyledIcon, null, props.icon) : null,
         props.children));
     if (props.to) {
-        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
     }
     else {
         return button;

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

@@ -15,6 +15,7 @@ export interface CodeBlockProps {
     codeBlockRef?: (instance: HTMLPreElement | null) => void;
     codeBlockMaxHeight?: string;
     hideCodeColors?: boolean;
+    wrapContents?: boolean;
 }
 export interface Sample {
     lang: string;
@@ -37,4 +38,4 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }: CodeBlockProps): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, }: CodeBlockProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlock.js

@@ -32,7 +32,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../utils");
 const Feedback_1 = require("../../components/Feedback");
 const CodeBlock_1 = require("../../components/CodeBlock");
-function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, }) {
+function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, }) {
     var _a;
     const [sourceCode, setSourceCode] = (0, react_1.useState)(source !== null && source !== void 0 ? source : '');
     const highlightedCode = highlightedHtml || (0, utils_1.highlight)(sourceCode, lang);
@@ -48,7 +48,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
     }, [source, externalSource]);
     const { reportDialog, reportButton } = (0, Feedback_1.useReportDialog)();
     const controls = Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: ((_a = header === null || header === void 0 ? void 0 : header.controls) === null || _a === void 0 ? void 0 : _a.report)
-            ? Object.assign(Object.assign({}, header.controls.report), { props: reportButton.props }) : { props: reportButton.props } });
+            ? Object.assign(Object.assign({}, header.controls.report), { props: Object.assign(Object.assign({}, reportButton.props), header.controls.report.props) }) : { props: reportButton.props } });
     if (controls.copy && !controls.copy.handleOutside) {
         controls.copy.data = sourceCode;
     }
@@ -59,7 +59,7 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
                     __html: withLineNumbers
                         ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
                         : highlightedCode,
-                }, "data-cy": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, withControls: true }),
+                }, "data-cy": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, withControls: true, wrapContents: wrapContents }),
             reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
 }
 exports.CodeBlock = CodeBlock;

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

@@ -2,4 +2,5 @@ export declare const CodeBlockContainer: import("styled-components").StyledCompo
     withControls?: boolean | undefined;
     maxHeight?: string | undefined;
     hideCodeColors?: boolean | undefined;
+    wrapContents?: boolean | undefined;
 }, never>;

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -40,7 +40,7 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: var(--code-wrap, pre);
+    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ maxHeight }) => maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 

package/lib/components/CopyButton/CopyButton.js

@@ -47,7 +47,7 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick();
     };
     return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: translate('theme.codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
-        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), "data-cy": dataTestId, asIcon: type === 'icon', title: translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')))));
+        react_1.default.createElement(CodeBlock_1.CodeBlockControlButton, { onClick: () => copy(toasterDuration), type: "button", "data-cy": dataTestId, asIcon: type === 'icon', title: translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard'), "data-testid": dataTestId }, type === 'icon' ? (react_1.default.createElement(icons_1.CopyIcon, null)) : (translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/Markdown/Admonition.js

@@ -39,7 +39,7 @@ const TextContainer = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   gap: var(--spacing-unit);
-  width: 100%;
+  flex: 1;
 `;
 const Heading = styled_components_1.default.div `
   letter-spacing: var(--admonition-heading-letter-spacing);

package/lib/components/Select/Select.js

@@ -125,6 +125,7 @@ exports.SelectListItem = styled_components_1.default.li `
     padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
     overflow: hidden;
     text-overflow: ellipsis;
+    display: block;
   }
 
   :hover {

package/lib/config.d.ts

@@ -192,6 +192,34 @@ declare const gtmAnalyticsConfigSchema: {
     readonly additionalProperties: false;
     readonly required: readonly ["trackingId"];
 };
+declare const productGoogleAnalyticsConfigSchema: {
+    readonly type: "object";
+    readonly properties: {
+        readonly includeInDevelopment: {
+            readonly type: "boolean";
+        };
+        readonly trackingId: {
+            readonly type: "string";
+        };
+        readonly conversionId: {
+            readonly type: "string";
+        };
+        readonly floodlightId: {
+            readonly type: "string";
+        };
+        readonly optimizeId: {
+            readonly type: "string";
+        };
+        readonly exclude: {
+            readonly type: "array";
+            readonly items: {
+                readonly type: "string";
+            };
+        };
+    };
+    readonly additionalProperties: false;
+    readonly required: readonly ["trackingId"];
+};
 declare const googleAnalyticsConfigSchema: {
     readonly type: "object";
     readonly properties: {
@@ -228,6 +256,37 @@ declare const googleAnalyticsConfigSchema: {
         readonly cookieExpires: {
             readonly type: "number";
         };
+        readonly trackers: {
+            readonly type: "object";
+            readonly additionalProperties: {
+                readonly type: "object";
+                readonly properties: {
+                    readonly includeInDevelopment: {
+                        readonly type: "boolean";
+                    };
+                    readonly trackingId: {
+                        readonly type: "string";
+                    };
+                    readonly conversionId: {
+                        readonly type: "string";
+                    };
+                    readonly floodlightId: {
+                        readonly type: "string";
+                    };
+                    readonly optimizeId: {
+                        readonly type: "string";
+                    };
+                    readonly exclude: {
+                        readonly type: "array";
+                        readonly items: {
+                            readonly type: "string";
+                        };
+                    };
+                };
+                readonly additionalProperties: false;
+                readonly required: readonly ["trackingId"];
+            };
+        };
     };
     readonly additionalProperties: false;
     readonly required: readonly ["trackingId"];
@@ -1585,6 +1644,37 @@ export declare const themeConfigSchema: {
                         readonly cookieExpires: {
                             readonly type: "number";
                         };
+                        readonly trackers: {
+                            readonly type: "object";
+                            readonly additionalProperties: {
+                                readonly type: "object";
+                                readonly properties: {
+                                    readonly includeInDevelopment: {
+                                        readonly type: "boolean";
+                                    };
+                                    readonly trackingId: {
+                                        readonly type: "string";
+                                    };
+                                    readonly conversionId: {
+                                        readonly type: "string";
+                                    };
+                                    readonly floodlightId: {
+                                        readonly type: "string";
+                                    };
+                                    readonly optimizeId: {
+                                        readonly type: "string";
+                                    };
+                                    readonly exclude: {
+                                        readonly type: "array";
+                                        readonly items: {
+                                            readonly type: "string";
+                                        };
+                                    };
+                                };
+                                readonly additionalProperties: false;
+                                readonly required: readonly ["trackingId"];
+                            };
+                        };
                     };
                     readonly additionalProperties: false;
                     readonly required: readonly ["trackingId"];
@@ -2393,6 +2483,39 @@ export declare const productThemeOverrideSchema: {
             readonly additionalProperties: false;
             readonly default: {};
         };
+        readonly analytics: {
+            readonly type: "object";
+            readonly properties: {
+                readonly ga: {
+                    readonly type: "object";
+                    readonly properties: {
+                        readonly includeInDevelopment: {
+                            readonly type: "boolean";
+                        };
+                        readonly trackingId: {
+                            readonly type: "string";
+                        };
+                        readonly conversionId: {
+                            readonly type: "string";
+                        };
+                        readonly floodlightId: {
+                            readonly type: "string";
+                        };
+                        readonly optimizeId: {
+                            readonly type: "string";
+                        };
+                        readonly exclude: {
+                            readonly type: "array";
+                            readonly items: {
+                                readonly type: "string";
+                            };
+                        };
+                    };
+                    readonly additionalProperties: false;
+                    readonly required: readonly ["trackingId"];
+                };
+            };
+        };
     };
     readonly additionalProperties: true;
     readonly default: {};
@@ -2420,7 +2543,12 @@ export type ThemeUIConfig = ThemeConfig & {
     };
 };
 export type ProductConfig = FromSchema<typeof productConfigSchema>;
-export type ProductThemeOverrideConfig = Pick<ThemeUIConfig, 'logo' | 'navbar' | 'footer' | 'sidebar' | 'search' | 'codeSnippet' | 'breadcrumbs'>;
+export type ProductGoogleAnalyticsConfig = FromSchema<typeof productGoogleAnalyticsConfigSchema>;
+export type ProductThemeOverrideConfig = Pick<ThemeUIConfig, 'logo' | 'navbar' | 'footer' | 'sidebar' | 'search' | 'codeSnippet' | 'breadcrumbs'> & {
+    analytics?: {
+        ga?: ProductGoogleAnalyticsConfig;
+    };
+};
 export type ProductUiConfig = ProductConfig & {
     slug: string;
     link: string;

package/lib/config.js

@@ -173,6 +173,19 @@ const gtmAnalyticsConfigSchema = {
     additionalProperties: false,
     required: ['trackingId'],
 };
+const productGoogleAnalyticsConfigSchema = {
+    type: 'object',
+    properties: {
+        includeInDevelopment: { type: 'boolean' },
+        trackingId: { type: 'string' },
+        conversionId: { type: 'string' },
+        floodlightId: { type: 'string' },
+        optimizeId: { type: 'string' },
+        exclude: { type: 'array', items: { type: 'string' } },
+    },
+    additionalProperties: false,
+    required: ['trackingId'],
+};
 const googleAnalyticsConfigSchema = {
     type: 'object',
     properties: {
@@ -186,6 +199,11 @@ const googleAnalyticsConfigSchema = {
         optimizeId: { type: 'string' },
         anonymizeIp: { type: 'boolean' },
         cookieExpires: { type: 'number' },
+        // All enabled tracking configs
+        trackers: {
+            type: 'object',
+            additionalProperties: productGoogleAnalyticsConfigSchema,
+        },
     },
     additionalProperties: false,
     required: ['trackingId'],
@@ -607,6 +625,12 @@ exports.productThemeOverrideSchema = {
         search: exports.themeConfigSchema.properties.search,
         codeSnippet: exports.themeConfigSchema.properties.codeSnippet,
         breadcrumbs: exports.themeConfigSchema.properties.breadcrumbs,
+        analytics: {
+            type: 'object',
+            properties: {
+                ga: productGoogleAnalyticsConfigSchema,
+            },
+        },
     },
     additionalProperties: true,
     default: {},

package/lib/hooks/useThemeConfig.js

@@ -8,7 +8,9 @@ function useThemeConfig(useProductConfig = true) {
     const themeConfig = (0, react_1.useContext)(exports.ThemeConfigContext) || {};
     const currentProduct = (0, hooks_1.useCurrentProduct)();
     const mergedTheme = useProductConfig && (currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.themeOverride)
-        ? Object.assign(Object.assign({}, themeConfig), currentProduct.themeOverride) : themeConfig;
+        ? Object.assign(Object.assign(Object.assign({}, themeConfig), currentProduct.themeOverride), { 
+            // Do not override analytics config from product
+            analytics: themeConfig.analytics }) : themeConfig;
     return mergedTheme;
 }
 exports.useThemeConfig = useThemeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.33.2",
+  "version": "0.74.2-pingfed.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -23,7 +23,7 @@
     "prismjs": "^1.28.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.10.0",
+    "react-router-dom": "^6.21.1",
     "styled-components": "^4.1.1 || ^5.3.11",
     "styled-system": "^5.1.5"
   },
@@ -65,7 +65,7 @@
     "lodash.throttle": "4.1.1",
     "npm-run-all": "4.1.5",
     "react-refresh": "0.14.0",
-    "react-router-dom": "6.10.0",
+    "react-router-dom": "6.21.1",
     "storybook": "7.6.4",
     "storybook-addon-pseudo-states": "2.1.2",
     "storybook-design-token": "3.0.0-beta.6",

package/src/components/Button/Button.tsx

@@ -161,7 +161,11 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
   );
 
   if (props.to) {
-    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <StyledButtonLink to={props.to} onClick={props.onClick}>
+        {button}
+      </StyledButtonLink>
+    );
   } else {
     return button;
   }

package/src/components/CodeBlock/CodeBlock.tsx

@@ -22,6 +22,7 @@ export interface CodeBlockProps {
   codeBlockRef?: (instance: HTMLPreElement | null) => void;
   codeBlockMaxHeight?: string;
   hideCodeColors?: boolean;
+  wrapContents?: boolean;
 }
 
 export interface Sample {
@@ -61,6 +62,7 @@ export function CodeBlock({
   codeBlockMaxHeight,
   tabs,
   hideCodeColors,
+  wrapContents = false,
 }: CodeBlockProps): JSX.Element {
   const [sourceCode, setSourceCode] = useState<string>(source ?? '');
 
@@ -80,7 +82,13 @@ export function CodeBlock({
   const controls = {
     ...header?.controls,
     report: header?.controls?.report
-      ? { ...header.controls.report, props: reportButton.props }
+      ? {
+          ...header.controls.report,
+          props: {
+            ...reportButton.props,
+            ...header.controls.report.props,
+          },
+        }
       : { props: reportButton.props },
   };
 
@@ -109,6 +117,7 @@ export function CodeBlock({
           hideCodeColors={hideCodeColors}
           maxHeight={codeBlockMaxHeight}
           withControls={true}
+          wrapContents={wrapContents}
         />
         {reportDialog.visible && (
           <ReportDialog

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -5,7 +5,12 @@ import { generateCodeBlockTokens } from '@theme/utils';
 export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'CodeBlock/CodeBlockContainer',
   className,
-}))<{ withControls?: boolean; maxHeight?: string; hideCodeColors?: boolean }>`
+}))<{
+  withControls?: boolean;
+  maxHeight?: string;
+  hideCodeColors?: boolean;
+  wrapContents?: boolean;
+}>`
   && {
     overflow-x: auto;
     font-family: var(--code-block-font-family);
@@ -16,7 +21,7 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: var(--code-wrap, pre);
+    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
     max-height: ${({ maxHeight }) =>
       maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);

package/src/components/CopyButton/CopyButton.tsx

@@ -60,6 +60,7 @@ function CopyButtonComponent({
     >
       <CodeBlockControlButton
         onClick={() => copy(toasterDuration)}
+        type="button"
         data-cy={dataTestId}
         asIcon={type === 'icon'}
         title={translate('theme.codeSnippet.copy.tooltipText', tooltipText || 'Copy to clipboard')}

package/src/components/Markdown/Admonition.tsx

@@ -64,7 +64,7 @@ const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-unit);
-  width: 100%;
+  flex: 1;
 `;
 
 const Heading = styled.div<AdmonitionTypeProps>`

package/src/components/Select/Select.tsx

@@ -175,6 +175,7 @@ export const SelectListItem = styled.li<{ selected: boolean }>`
     padding: var(--select-list-item-vertical-padding) var(--select-list-item-horizontal-padding);
     overflow: hidden;
     text-overflow: ellipsis;
+    display: block;
   }
 
   :hover {

package/src/config.ts

@@ -196,6 +196,21 @@ const gtmAnalyticsConfigSchema = {
   required: ['trackingId'],
 } as const;
 
+const productGoogleAnalyticsConfigSchema = {
+  type: 'object',
+  properties: {
+    includeInDevelopment: { type: 'boolean' },
+    trackingId: { type: 'string' },
+
+    conversionId: { type: 'string' },
+    floodlightId: { type: 'string' },
+    optimizeId: { type: 'string' },
+    exclude: { type: 'array', items: { type: 'string' } },
+  },
+  additionalProperties: false,
+  required: ['trackingId'],
+} as const;
+
 const googleAnalyticsConfigSchema = {
   type: 'object',
   properties: {
@@ -212,6 +227,12 @@ const googleAnalyticsConfigSchema = {
     optimizeId: { type: 'string' },
     anonymizeIp: { type: 'boolean' },
     cookieExpires: { type: 'number' },
+
+    // All enabled tracking configs
+    trackers: {
+      type: 'object',
+      additionalProperties: productGoogleAnalyticsConfigSchema,
+    },
   },
   additionalProperties: false,
   required: ['trackingId'],
@@ -698,6 +719,12 @@ export const productThemeOverrideSchema = {
     search: themeConfigSchema.properties.search,
     codeSnippet: themeConfigSchema.properties.codeSnippet,
     breadcrumbs: themeConfigSchema.properties.breadcrumbs,
+    analytics: {
+      type: 'object',
+      properties: {
+        ga: productGoogleAnalyticsConfigSchema,
+      },
+    },
   },
   additionalProperties: true,
   default: {},
@@ -729,10 +756,12 @@ export type ThemeUIConfig = ThemeConfig & {
 };
 
 export type ProductConfig = FromSchema<typeof productConfigSchema>;
+
+export type ProductGoogleAnalyticsConfig = FromSchema<typeof productGoogleAnalyticsConfigSchema>;
 export type ProductThemeOverrideConfig = Pick<
   ThemeUIConfig,
   'logo' | 'navbar' | 'footer' | 'sidebar' | 'search' | 'codeSnippet' | 'breadcrumbs'
->;
+> & { analytics?: { ga?: ProductGoogleAnalyticsConfig } };
 export type ProductUiConfig = ProductConfig & {
   slug: string;
   link: string;

package/src/hooks/useThemeConfig.ts

@@ -17,6 +17,8 @@ export function useThemeConfig<T extends Record<string, unknown>>(
       ? {
           ...themeConfig,
           ...currentProduct.themeOverride,
+          // Do not override analytics config from product
+          analytics: themeConfig.analytics,
         }
       : themeConfig;