@redocly/theme 0.31.3 → 0.32.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/lib/components/CodeBlock/CodeBlock.js +10 -6
  2. package/lib/components/CopyButton/CopyButton.d.ts +1 -1
  3. package/lib/components/Markdown/Admonition.js +1 -0
  4. package/lib/components/Search/SuggestedPages.js +2 -2
  5. package/lib/components/Typography/CompactTypography.d.ts +1 -1
  6. package/lib/components/Typography/Typography.d.ts +1 -1
  7. package/lib/components/Typography/Typography.js +1 -1
  8. package/package.json +55 -57
  9. package/src/components/Catalog/useCatalog.ts +2 -2
  10. package/src/components/CodeBlock/CodeBlock.tsx +23 -17
  11. package/src/components/CopyButton/CopyButton.tsx +1 -1
  12. package/src/components/Markdown/Admonition.tsx +1 -0
  13. package/src/components/Search/SuggestedPages.tsx +11 -12
  14. package/src/components/Typography/Typography.ts +1 -1
package/lib/components/CodeBlock/CodeBlock.js CHANGED
@@ -54,13 +54,17 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
54
54
  }
55
55
  return (react_1.default.createElement(Wrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
56
56
  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 }),
57
- react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
58
- __html: withLineNumbers
59
- ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
60
- : highlightedCode,
61
- }, "data-cy": dataTestId, withControls: true }),
62
- reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang })))));
57
+ react_1.default.createElement(ContainerWrapper, null,
58
+ react_1.default.createElement(CodeBlock_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: {
59
+ __html: withLineNumbers
60
+ ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
61
+ : highlightedCode,
62
+ }, "data-cy": dataTestId, withControls: true }),
63
+ reportDialog.visible && (react_1.default.createElement(Feedback_1.ReportDialog, Object.assign({}, reportDialog.props, { location: sourceCode, lang: lang }))))));
63
64
  }
64
65
  exports.CodeBlock = CodeBlock;
66
+ const ContainerWrapper = styled_components_1.default.div `
67
+ display: grid; // prevents content to overstretch
68
+ `;
65
69
  const Wrapper = styled_components_1.default.div ``;
66
70
  //# sourceMappingURL=CodeBlock.js.map
package/lib/components/CopyButton/CopyButton.d.ts CHANGED
@@ -5,7 +5,7 @@ export interface CopyButtonProps {
5
5
  data: unknown;
6
6
  type?: ControlItemType;
7
7
  toasterPlacement?: TooltipProps['placement'];
8
- toasterText?: TooltipProps['tip'];
8
+ toasterText?: string;
9
9
  toasterDuration?: number;
10
10
  buttonText?: string;
11
11
  tooltipText?: string;
package/lib/components/Markdown/Admonition.js CHANGED
@@ -39,6 +39,7 @@ const TextContainer = styled_components_1.default.div `
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  gap: var(--spacing-unit);
42
+ width: 100%;
42
43
  `;
43
44
  const Heading = styled_components_1.default.div `
44
45
  letter-spacing: var(--admonition-heading-letter-spacing);
package/lib/components/Search/SuggestedPages.js CHANGED
@@ -40,11 +40,11 @@ function SuggestedPages({ className }) {
40
40
  return null;
41
41
  return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages", className: className },
42
42
  React.createElement(Title, { "data-translation-key": "theme.search.suggested" }, translate('theme.search.suggested', 'Suggested pages')),
43
- React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
43
+ React.createElement(SuggestedItems, null, pages.map((page) => page.link ? (React.createElement(Item, { key: page.label },
44
44
  React.createElement(PageLink, Object.assign({ to: page.link }, page),
45
45
  React.createElement(Group, null,
46
46
  React.createElement(ClockBackwardsIcon, null),
47
- page.label))))))));
47
+ page.label)))) : null))));
48
48
  }
49
49
  exports.SuggestedPages = SuggestedPages;
50
50
  const Wrapper = styled_components_1.default.div `
package/lib/components/Typography/CompactTypography.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const CompactTypography: import("styled-components").StyledComponent<"div", any, import("../../components/Typography/Typography").TypographyProps & {
1
+ export declare const CompactTypography: import("styled-components").StyledComponent<"span", any, import("../../components/Typography/Typography").TypographyProps & {
2
2
  mt: string;
3
3
  mb: string;
4
4
  'data-component-name': string;
package/lib/components/Typography/Typography.d.ts CHANGED
@@ -10,4 +10,4 @@ export interface TypographyProps {
10
10
  marginTop?: string;
11
11
  textAlign?: string;
12
12
  }
13
- export declare const Typography: import("styled-components").StyledComponent<"div", any, TypographyProps, never>;
13
+ export declare const Typography: import("styled-components").StyledComponent<"span", any, TypographyProps, never>;
package/lib/components/Typography/Typography.js CHANGED
@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Typography = void 0;
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
- exports.Typography = styled_components_1.default.div.attrs(({ className }) => ({
8
+ exports.Typography = styled_components_1.default.span.attrs(({ className }) => ({
9
9
  'data-component-name': 'Typography/Typography',
10
10
  className,
11
11
  })) `
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redocly/theme",
3
- "version": "0.31.3",
3
+ "version": "0.32.1",
4
4
  "description": "Shared UI components lib",
5
5
  "keywords": [
6
6
  "theme",
@@ -21,67 +21,65 @@
21
21
  "peerDependencies": {
22
22
  "lodash.throttle": "^4.1.1",
23
23
  "prismjs": "^1.28.0",
24
- "react": "^17.0.2",
25
- "react-dom": "^17.0.2",
24
+ "react": "^17.0.0 || ^18.0.0",
25
+ "react-dom": "^17.0.0 || ^18.0.0",
26
26
  "react-router-dom": "^6.10.0",
27
- "styled-components": "^5.3.7",
27
+ "styled-components": "^4.1.1 || ^5.3.11",
28
28
  "styled-system": "^5.1.5"
29
29
  },
30
30
  "devDependencies": {
31
- "@storybook/addon-actions": "^7.5.0",
32
- "@storybook/addon-essentials": "^7.5.0",
33
- "@storybook/addon-interactions": "^7.5.0",
34
- "@storybook/addon-links": "^7.5.0",
35
- "@storybook/addon-viewport": "^7.5.0",
36
- "@storybook/addons": "^7.5.0",
37
- "@storybook/core-common": "^7.5.0",
38
- "@storybook/node-logger": "^7.5.0",
39
- "@storybook/react": "^7.5.0",
40
- "@storybook/react-webpack5": "^7.5.0",
41
- "@storybook/testing-library": "^0.2.2",
42
- "@storybook/theming": "^7.5.0",
43
- "@testing-library/jest-dom": "^5.16.5",
44
- "@testing-library/react": "^12.1.4",
45
- "@testing-library/react-hooks": "^8.0.1",
46
- "@testing-library/user-event": "^13.5.0",
47
- "@types/highlight-words-core": "^1.2.1",
48
- "@types/jest": "^29.2.1",
49
- "@types/jest-when": "^3.5.2",
50
- "@types/lodash.throttle": "^4.1.7",
51
- "@types/node": "^18.11.18",
52
- "@types/prismjs": "^1.26.0",
53
- "@types/react": "^17.0.43",
54
- "@types/react-dom": "^17.0.11",
55
- "@types/styled-components": "^5.1.26",
56
- "@types/styled-system": "^5.1.13",
57
- "@types/testing-library__jest-dom": "^5.14.5",
58
- "@typescript-eslint/eslint-plugin": "^5.23.0",
59
- "@typescript-eslint/parser": "^5.23.0",
60
- "chromatic": "^6.10.2",
61
- "concurrently": "^7.4.0",
62
- "jest": "^29.2.2",
63
- "jest-environment-jsdom": "^29.2.2",
64
- "jest-styled-components": "^7.1.1",
65
- "jest-when": "^3.5.1",
66
- "json-schema-to-ts": "^2.7.2",
67
- "lodash.throttle": "^4.1.1",
68
- "npm-run-all": "^4.1.5",
69
- "react-refresh": "^0.14.0",
70
- "react-router-dom": "^6.10.0",
71
- "storybook": "^7.5.0",
72
- "storybook-addon-pseudo-states": "^2.1.2",
31
+ "@storybook/addon-actions": "7.6.4",
32
+ "@storybook/addon-essentials": "7.6.4",
33
+ "@storybook/addon-interactions": "7.6.4",
34
+ "@storybook/addon-links": "7.6.4",
35
+ "@storybook/addon-viewport": "7.6.4",
36
+ "@storybook/addons": "7.6.4",
37
+ "@storybook/core-common": "7.6.4",
38
+ "@storybook/node-logger": "7.6.4",
39
+ "@storybook/react": "7.6.4",
40
+ "@storybook/react-webpack5": "7.6.4",
41
+ "@storybook/testing-library": "0.2.2",
42
+ "@storybook/theming": "7.6.4",
43
+ "@testing-library/jest-dom": "6.1.5",
44
+ "@testing-library/react": "14.1.2",
45
+ "@testing-library/user-event": "14.5.1",
46
+ "@types/highlight-words-core": "1.2.3",
47
+ "@types/jest": "29.5.11",
48
+ "@types/jest-when": "3.5.5",
49
+ "@types/lodash.throttle": "4.1.9",
50
+ "@types/node": "18.19.3",
51
+ "@types/prismjs": "1.26.3",
52
+ "@types/react": "18.2.45",
53
+ "@types/react-dom": "18.2.17",
54
+ "@types/styled-components": "5.1.34",
55
+ "@types/styled-system": "5.1.22",
56
+ "@typescript-eslint/eslint-plugin": "5.55.0",
57
+ "@typescript-eslint/parser": "5.55.0",
58
+ "chromatic": "6.17.2",
59
+ "concurrently": "7.6.0",
60
+ "jest": "29.5.0",
61
+ "jest-environment-jsdom": "29.5.0",
62
+ "jest-styled-components": "7.2.0",
63
+ "jest-when": "3.6.0",
64
+ "json-schema-to-ts": "2.7.2",
65
+ "lodash.throttle": "4.1.1",
66
+ "npm-run-all": "4.1.5",
67
+ "react-refresh": "0.14.0",
68
+ "react-router-dom": "6.10.0",
69
+ "storybook": "7.6.4",
70
+ "storybook-addon-pseudo-states": "2.1.2",
73
71
  "storybook-design-token": "3.0.0-beta.6",
74
- "styled-components": "^5.3.7",
75
- "styled-system": "^5.1.5",
76
- "ts-jest": "^29.0.3",
77
- "ts-node": "^10.7.0",
78
- "ts-node-dev": "^2.0.0",
79
- "tsc-alias": "^1.8.2",
80
- "tsconfig-paths": "^4.2.0",
81
- "tsconfig-paths-webpack-plugin": "^3.5.2",
82
- "typescript": "^5.2.2",
83
- "webpack": "^5.72.0",
84
- "@redocly/portal-types": "1.2.0"
72
+ "styled-components": "5.3.11",
73
+ "styled-system": "5.1.5",
74
+ "ts-jest": "29.1.1",
75
+ "ts-node": "10.9.1",
76
+ "ts-node-dev": "2.0.0",
77
+ "tsc-alias": "1.8.3",
78
+ "tsconfig-paths": "4.2.0",
79
+ "tsconfig-paths-webpack-plugin": "3.5.2",
80
+ "typescript": "5.2.2",
81
+ "webpack": "5.88.2",
82
+ "@redocly/portal-types": "1.2.1"
85
83
  },
86
84
  "dependencies": {
87
85
  "@redocly/ajv": "^8.11.0",
package/src/components/Catalog/useCatalog.ts CHANGED
@@ -42,7 +42,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
42
42
  [items, config, customFields],
43
43
  );
44
44
 
45
- const toggleOption = React.useCallback((filterIdx, option) => {
45
+ const toggleOption = React.useCallback((filterIdx: number, option: any) => {
46
46
  setFiltersState((prev) => {
47
47
  const newFilterOptions = prev[filterIdx] ? prev[filterIdx] : new Set<string>();
48
48
  if (!(newFilterOptions instanceof Set)) return prev;
@@ -58,7 +58,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
58
58
  }, []);
59
59
 
60
60
  const selectOption = React.useCallback(
61
- (filterIdx, option) => {
61
+ (filterIdx: number, option: any) => {
62
62
  setFiltersState((prev) => {
63
63
  const newFilterOptions =
64
64
  prev[filterIdx] instanceof Set
package/src/components/CodeBlock/CodeBlock.tsx CHANGED
@@ -79,26 +79,32 @@ export function CodeBlock({
79
79
  return (
80
80
  <Wrapper data-component-name="CodeBlock/CodeBlock" className={className}>
81
81
  <CodeBlockControls className={header?.className} title={header?.title} controls={controls} />
82
- <CodeBlockContainer
83
- ref={codeBlockRef}
84
- className={withLineNumbers ? 'line-numbers' : ''}
85
- dangerouslySetInnerHTML={{
86
- __html: withLineNumbers
87
- ? addLineNumbers(highlightedCode, startLineNumber)
88
- : highlightedCode,
89
- }}
90
- data-cy={dataTestId}
91
- withControls={true}
92
- />
93
- {reportDialog.visible && (
94
- <ReportDialog
95
- {...(reportDialog.props as ReportDialogProps)}
96
- location={sourceCode}
97
- lang={lang}
82
+ <ContainerWrapper>
83
+ <CodeBlockContainer
84
+ ref={codeBlockRef}
85
+ className={withLineNumbers ? 'line-numbers' : ''}
86
+ dangerouslySetInnerHTML={{
87
+ __html: withLineNumbers
88
+ ? addLineNumbers(highlightedCode, startLineNumber)
89
+ : highlightedCode,
90
+ }}
91
+ data-cy={dataTestId}
92
+ withControls={true}
98
93
  />
99
- )}
94
+ {reportDialog.visible && (
95
+ <ReportDialog
96
+ {...(reportDialog.props as ReportDialogProps)}
97
+ location={sourceCode}
98
+ lang={lang}
99
+ />
100
+ )}
101
+ </ContainerWrapper>
100
102
  </Wrapper>
101
103
  );
102
104
  }
103
105
 
106
+ const ContainerWrapper = styled.div`
107
+ display: grid; // prevents content to overstretch
108
+ `;
109
+
104
110
  const Wrapper = styled.div``;
package/src/components/CopyButton/CopyButton.tsx CHANGED
@@ -13,7 +13,7 @@ export interface CopyButtonProps {
13
13
  data: unknown;
14
14
  type?: ControlItemType;
15
15
  toasterPlacement?: TooltipProps['placement'];
16
- toasterText?: TooltipProps['tip'];
16
+ toasterText?: string;
17
17
  toasterDuration?: number;
18
18
  buttonText?: string;
19
19
  tooltipText?: string;
package/src/components/Markdown/Admonition.tsx CHANGED
@@ -64,6 +64,7 @@ const TextContainer = styled.div`
64
64
  display: flex;
65
65
  flex-direction: column;
66
66
  gap: var(--spacing-unit);
67
+ width: 100%;
67
68
  `;
68
69
 
69
70
  const Heading = styled.div<AdmonitionTypeProps>`
package/src/components/Search/SuggestedPages.tsx CHANGED
@@ -17,18 +17,17 @@ export function SuggestedPages({ className }: { className?: string }) {
17
17
  {translate('theme.search.suggested', 'Suggested pages')}
18
18
  </Title>
19
19
  <SuggestedItems>
20
- {pages.map(
21
- (page) =>
22
- page.link && (
23
- <Item key={page.label}>
24
- <PageLink to={page.link} {...page}>
25
- <Group>
26
- <ClockBackwardsIcon />
27
- {page.label}
28
- </Group>
29
- </PageLink>
30
- </Item>
31
- ),
20
+ {pages.map((page) =>
21
+ page.link ? (
22
+ <Item key={page.label}>
23
+ <PageLink to={page.link} {...page}>
24
+ <Group>
25
+ <ClockBackwardsIcon />
26
+ {page.label}
27
+ </Group>
28
+ </PageLink>
29
+ </Item>
30
+ ) : null,
32
31
  )}
33
32
  </SuggestedItems>
34
33
  </Wrapper>
package/src/components/Typography/Typography.ts CHANGED
@@ -13,7 +13,7 @@ export interface TypographyProps {
13
13
  textAlign?: string;
14
14
  }
15
15
 
16
- export const Typography = styled.div.attrs<{ className?: string }>(({ className }) => ({
16
+ export const Typography = styled.span.attrs<{ className?: string }>(({ className }) => ({
17
17
  'data-component-name': 'Typography/Typography',
18
18
  className,
19
19
  }))<TypographyProps>`