@redocly/theme 0.32.0 → 0.32.1

package/lib/components/CodeBlock/CodeBlock.js

@@ -54,13 +54,17 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
     }
     return (react_1.default.createElement(Wrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
         react_1.default.createElement(CodeBlock_1.CodeBlockControls, { className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
-        react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
-                __html: withLineNumbers
-                    ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
-                    : highlightedCode,
-            }, "data-cy": dataTestId, withControls: true }),
-        reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))));
+        react_1.default.createElement(ContainerWrapper, null,
+            react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
+                    __html: withLineNumbers
+                        ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
+                        : highlightedCode,
+                }, "data-cy": dataTestId, withControls: true }),
+            reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
 }
 exports.CodeBlock = CodeBlock;
+const ContainerWrapper = styled_components_1.default.div `
+  display: grid; // prevents content to overstretch
+`;
 const Wrapper = styled_components_1.default.div ``;
 //# sourceMappingURL=CodeBlock.js.map

package/lib/components/Markdown/Admonition.js

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

package/lib/components/Typography/CompactTypography.d.ts

@@ -1,4 +1,4 @@
-export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, import("../../components/Typography/Typography").TypographyProps & {
+export declare const CompactTypography: import("styled-components").StyledComponent<"span", any, import("../../components/Typography/Typography").TypographyProps & {
     mt: string;
     mb: string;
     'data-component-name': string;

package/lib/components/Typography/Typography.d.ts

@@ -10,4 +10,4 @@ export interface TypographyProps {
     marginTop?: string;
     textAlign?: string;
 }
-export declare const Typography: import("styled-components").StyledComponent<"div", any, TypographyProps, never>;
+export declare const Typography: import("styled-components").StyledComponent<"span", any, TypographyProps, never>;

package/lib/components/Typography/Typography.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Typography = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Typography = styled_components_1.default.div.attrs(({ className }) => ({
+exports.Typography = styled_components_1.default.span.attrs(({ className }) => ({
     'data-component-name': 'Typography/Typography',
     className,
 })) `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -28,57 +28,57 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.5.0",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-viewport": "^7.5.0",
-    "@storybook/addons": "^7.5.0",
-    "@storybook/core-common": "^7.5.0",
-    "@storybook/node-logger": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.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": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@types/styled-components": "^5.1.30",
-    "@types/styled-system": "^5.1.13",
-    "@typescript-eslint/eslint-plugin": "^5.23.0",
-    "@typescript-eslint/parser": "^5.23.0",
-    "chromatic": "^6.10.2",
-    "concurrently": "^7.4.0",
-    "jest": "^29.2.2",
-    "jest-environment-jsdom": "^29.2.2",
-    "jest-styled-components": "^7.1.1",
-    "jest-when": "^3.5.1",
-    "json-schema-to-ts": "^2.7.2",
-    "lodash.throttle": "^4.1.1",
-    "npm-run-all": "^4.1.5",
-    "react-refresh": "^0.14.0",
-    "react-router-dom": "^6.10.0",
-    "storybook": "^7.5.0",
-    "storybook-addon-pseudo-states": "^2.1.2",
+    "@storybook/addon-actions": "7.6.4",
+    "@storybook/addon-essentials": "7.6.4",
+    "@storybook/addon-interactions": "7.6.4",
+    "@storybook/addon-links": "7.6.4",
+    "@storybook/addon-viewport": "7.6.4",
+    "@storybook/addons": "7.6.4",
+    "@storybook/core-common": "7.6.4",
+    "@storybook/node-logger": "7.6.4",
+    "@storybook/react": "7.6.4",
+    "@storybook/react-webpack5": "7.6.4",
+    "@storybook/testing-library": "0.2.2",
+    "@storybook/theming": "7.6.4",
+    "@testing-library/jest-dom": "6.1.5",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.1",
+    "@types/highlight-words-core": "1.2.3",
+    "@types/jest": "29.5.11",
+    "@types/jest-when": "3.5.5",
+    "@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/styled-components": "5.1.34",
+    "@types/styled-system": "5.1.22",
+    "@typescript-eslint/eslint-plugin": "5.55.0",
+    "@typescript-eslint/parser": "5.55.0",
+    "chromatic": "6.17.2",
+    "concurrently": "7.6.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "jest-styled-components": "7.2.0",
+    "jest-when": "3.6.0",
+    "json-schema-to-ts": "2.7.2",
+    "lodash.throttle": "4.1.1",
+    "npm-run-all": "4.1.5",
+    "react-refresh": "0.14.0",
+    "react-router-dom": "6.10.0",
+    "storybook": "7.6.4",
+    "storybook-addon-pseudo-states": "2.1.2",
     "storybook-design-token": "3.0.0-beta.6",
-    "styled-components": "^5.3.11",
-    "styled-system": "^5.1.5",
-    "ts-jest": "^29.0.3",
-    "ts-node": "^10.7.0",
-    "ts-node-dev": "^2.0.0",
-    "tsc-alias": "^1.8.2",
-    "tsconfig-paths": "^4.2.0",
-    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^5.2.2",
-    "webpack": "^5.72.0",
+    "styled-components": "5.3.11",
+    "styled-system": "5.1.5",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.1",
+    "ts-node-dev": "2.0.0",
+    "tsc-alias": "1.8.3",
+    "tsconfig-paths": "4.2.0",
+    "tsconfig-paths-webpack-plugin": "3.5.2",
+    "typescript": "5.2.2",
+    "webpack": "5.88.2",
     "@redocly/portal-types": "1.2.1"
   },
   "dependencies": {

package/src/components/CodeBlock/CodeBlock.tsx

@@ -79,26 +79,32 @@ export function CodeBlock({
   return (
     <Wrapper data-component-name="CodeBlock/CodeBlock" className={className}>
       <CodeBlockControls className={header?.className} title={header?.title} controls={controls} />
-      <CodeBlockContainer
-        ref={codeBlockRef}
-        className={withLineNumbers ? 'line-numbers' : ''}
-        dangerouslySetInnerHTML={{
-          __html: withLineNumbers
-            ? addLineNumbers(highlightedCode, startLineNumber)
-            : highlightedCode,
-        }}
-        data-cy={dataTestId}
-        withControls={true}
-      />
-      {reportDialog.visible && (
-        <ReportDialog
-          {...(reportDialog.props as ReportDialogProps)}
-          location={sourceCode}
-          lang={lang}
+      <ContainerWrapper>
+        <CodeBlockContainer
+          ref={codeBlockRef}
+          className={withLineNumbers ? 'line-numbers' : ''}
+          dangerouslySetInnerHTML={{
+            __html: withLineNumbers
+              ? addLineNumbers(highlightedCode, startLineNumber)
+              : highlightedCode,
+          }}
+          data-cy={dataTestId}
+          withControls={true}
         />
-      )}
+        {reportDialog.visible && (
+          <ReportDialog
+            {...(reportDialog.props as ReportDialogProps)}
+            location={sourceCode}
+            lang={lang}
+          />
+        )}
+      </ContainerWrapper>
     </Wrapper>
   );
 }
 
+const ContainerWrapper = styled.div`
+  display: grid; // prevents content to overstretch
+`;
+
 const Wrapper = styled.div``;

package/src/components/Markdown/Admonition.tsx

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

package/src/components/Typography/Typography.ts

@@ -13,7 +13,7 @@ export interface TypographyProps {
   textAlign?: string;
 }
 
-export const Typography = styled.div.attrs<{ className?: string }>(({ className }) => ({
+export const Typography = styled.span.attrs<{ className?: string }>(({ className }) => ({
   'data-component-name': 'Typography/Typography',
   className,
 }))<TypographyProps>`