@apify/ui-library 1.104.1-featurereact19upgrade-8b5553.33 → 1.105.0

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 (89) hide show
  1. package/dist/src/components/badge.d.ts.map +1 -1
  2. package/dist/src/components/badge.js.map +1 -1
  3. package/dist/src/components/button.d.ts +2 -2
  4. package/dist/src/components/button.d.ts.map +1 -1
  5. package/dist/src/components/code/code_block/code_block.styled.d.ts +3 -3
  6. package/dist/src/components/code/code_block/code_block.styled.d.ts.map +1 -1
  7. package/dist/src/components/code/inline_code/inline_code.d.ts +1 -1
  8. package/dist/src/components/code/inline_code/inline_code.d.ts.map +1 -1
  9. package/dist/src/components/code/one_line_code/one_line_code.d.ts +2 -3
  10. package/dist/src/components/code/one_line_code/one_line_code.d.ts.map +1 -1
  11. package/dist/src/components/code/one_line_code/one_line_code.js +1 -0
  12. package/dist/src/components/code/one_line_code/one_line_code.js.map +1 -1
  13. package/dist/src/components/code/prism_highlighter.d.ts +6 -19
  14. package/dist/src/components/code/prism_highlighter.d.ts.map +1 -1
  15. package/dist/src/components/color_wheel_gradient.d.ts +1 -1
  16. package/dist/src/components/color_wheel_gradient.d.ts.map +1 -1
  17. package/dist/src/components/floating/floating_component_base.d.ts +1 -1
  18. package/dist/src/components/floating/floating_component_base.d.ts.map +1 -1
  19. package/dist/src/components/floating/menu_components.d.ts +7 -3
  20. package/dist/src/components/floating/menu_components.d.ts.map +1 -1
  21. package/dist/src/components/floating/tooltip.d.ts +3 -3
  22. package/dist/src/components/floating/tooltip.d.ts.map +1 -1
  23. package/dist/src/components/floating/tooltip.js.map +1 -1
  24. package/dist/src/components/readme_renderer/table_of_contents.d.ts +1 -1
  25. package/dist/src/components/readme_renderer/table_of_contents.d.ts.map +1 -1
  26. package/dist/src/components/readme_renderer/table_of_contents.js +1 -1
  27. package/dist/src/components/readme_renderer/table_of_contents.js.map +1 -1
  28. package/dist/src/components/readme_renderer/utils.d.ts +1 -1
  29. package/dist/src/components/readme_renderer/utils.d.ts.map +1 -1
  30. package/dist/src/components/readme_renderer/utils.js +5 -8
  31. package/dist/src/components/readme_renderer/utils.js.map +1 -1
  32. package/dist/src/components/shortcut.d.ts +1 -2
  33. package/dist/src/components/shortcut.d.ts.map +1 -1
  34. package/dist/src/components/shortcut.js.map +1 -1
  35. package/dist/src/components/simple_markdown/simple_markdown.d.ts +3 -7
  36. package/dist/src/components/simple_markdown/simple_markdown.d.ts.map +1 -1
  37. package/dist/src/components/simple_markdown/simple_markdown.js +12 -23
  38. package/dist/src/components/simple_markdown/simple_markdown.js.map +1 -1
  39. package/dist/src/components/simple_markdown/simple_markdown_components.d.ts +11 -9
  40. package/dist/src/components/simple_markdown/simple_markdown_components.d.ts.map +1 -1
  41. package/dist/src/components/simple_markdown/simple_markdown_components.js +4 -5
  42. package/dist/src/components/simple_markdown/simple_markdown_components.js.map +1 -1
  43. package/dist/src/components/spinner.d.ts +3 -3
  44. package/dist/src/components/spinner.d.ts.map +1 -1
  45. package/dist/src/components/tabs/tab.d.ts.map +1 -1
  46. package/dist/src/components/tabs/tab.js.map +1 -1
  47. package/dist/src/components/tabs/tabs.js +3 -3
  48. package/dist/src/components/tabs/tabs.js.map +1 -1
  49. package/dist/src/components/tag.d.ts.map +1 -1
  50. package/dist/src/components/tag.js.map +1 -1
  51. package/dist/src/components/text/text_content.js.map +1 -1
  52. package/dist/src/components/text/text_marketing.js.map +1 -1
  53. package/dist/src/components/tile/shared.d.ts +1 -1
  54. package/dist/src/components/tile/shared.d.ts.map +1 -1
  55. package/dist/src/components/to_consolidate/card.d.ts +1 -1
  56. package/dist/src/components/to_consolidate/card.d.ts.map +1 -1
  57. package/dist/src/components/to_consolidate/markdown.d.ts +2 -2
  58. package/dist/src/components/to_consolidate/markdown.d.ts.map +1 -1
  59. package/dist/src/components/to_consolidate/markdown.js +2 -10
  60. package/dist/src/components/to_consolidate/markdown.js.map +1 -1
  61. package/dist/src/utils/css_utils.d.ts +1 -1
  62. package/dist/src/utils/css_utils.d.ts.map +1 -1
  63. package/dist/src/utils/index.d.ts +0 -1
  64. package/dist/src/utils/index.d.ts.map +1 -1
  65. package/dist/src/utils/index.js +0 -1
  66. package/dist/src/utils/index.js.map +1 -1
  67. package/dist/tsconfig.build.tsbuildinfo +1 -1
  68. package/package.json +14 -14
  69. package/src/components/badge.tsx +1 -2
  70. package/src/components/code/one_line_code/one_line_code.tsx +4 -2
  71. package/src/components/floating/floating_component_base.tsx +1 -1
  72. package/src/components/floating/tooltip.tsx +4 -4
  73. package/src/components/readme_renderer/table_of_contents.tsx +2 -1
  74. package/src/components/readme_renderer/utils.tsx +6 -9
  75. package/src/components/shortcut.tsx +1 -2
  76. package/src/components/simple_markdown/simple_markdown.tsx +18 -37
  77. package/src/components/simple_markdown/simple_markdown_components.tsx +7 -13
  78. package/src/components/tabs/tab.tsx +1 -1
  79. package/src/components/tabs/tabs.tsx +4 -4
  80. package/src/components/tag.tsx +1 -2
  81. package/src/components/text/text_content.tsx +1 -1
  82. package/src/components/text/text_marketing.tsx +1 -1
  83. package/src/components/to_consolidate/markdown.tsx +11 -20
  84. package/src/utils/index.ts +0 -1
  85. package/dist/src/utils/type_utils.d.ts +0 -3
  86. package/dist/src/utils/type_utils.d.ts.map +0 -1
  87. package/dist/src/utils/type_utils.js +0 -2
  88. package/dist/src/utils/type_utils.js.map +0 -1
  89. package/src/utils/type_utils.ts +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apify/ui-library",
3
- "version": "1.104.1-featurereact19upgrade-8b5553.33+8a7000c6022",
3
+ "version": "1.105.0",
4
4
  "description": "React UI library used by apify.com",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
@@ -26,7 +26,7 @@
26
26
  "It's not nice, but helps us to get around the problem of multiple react instances."
27
27
  ],
28
28
  "dependencies": {
29
- "@apify/ui-icons": "^1.21.1-featurereact19upgrade-8b5553.130+8a7000c6022",
29
+ "@apify/ui-icons": "^1.21.0",
30
30
  "@floating-ui/react": "^0.26.2",
31
31
  "@react-hook/resize-observer": "^2.0.2",
32
32
  "clsx": "^2.0.0",
@@ -37,32 +37,32 @@
37
37
  "prism-react-renderer": "^2.4.1",
38
38
  "prismjs": "^1.30.0",
39
39
  "query-string": "^8.1.0",
40
- "react-markdown": "^10.1.0",
41
- "rehype-raw": "^7.0.0",
40
+ "react-markdown": "^8.0.5",
41
+ "rehype-raw": "^6.1.1",
42
42
  "rehype-sanitize": "^6.0.0",
43
- "remark-gfm": "^4.0.1",
44
- "remark-toc": "9.0.0",
43
+ "remark-gfm": "^3.0.1",
44
+ "remark-toc": "8.0.1",
45
45
  "slugify": "^1.6.6",
46
+ "unified": "^10.0.0",
46
47
  "unist-util-visit": "^5.0.0"
47
48
  },
48
49
  "peerDependencies": {
49
- "react": "17.x || 18.x || 19.x",
50
- "react-dom": "17.x || 18.x || 19.x",
51
- "styled-components": "^6.1.19"
50
+ "react": "17.x || 18.x",
51
+ "react-dom": "17.x || 18.x",
52
+ "styled-components": "^5.3.3"
52
53
  },
53
54
  "devDependencies": {
54
55
  "@storybook/react-vite": "^9.0.16",
55
- "@types/hast": "^3.0.4",
56
56
  "@types/lodash": "^4.14.200",
57
- "@types/react": "19.2.2",
57
+ "@types/react": "^18.2.74",
58
+ "@types/styled-components": "^5.1.34",
58
59
  "recast": "^0.23.9",
59
- "style-dictionary": "^4.4.0",
60
- "styled-components": "^6.1.19"
60
+ "style-dictionary": "^4.4.0"
61
61
  },
62
62
  "files": [
63
63
  "dist",
64
64
  "src",
65
65
  "style"
66
66
  ],
67
- "gitHead": "8a7000c6022cdd83f35d41262d99df060d590049"
67
+ "gitHead": "169dd57050d442647f09346ab9530db038e766bc"
68
68
  }
@@ -1,12 +1,11 @@
1
1
  import type React from 'react';
2
2
  import { forwardRef } from 'react';
3
- import styled, { css } from 'styled-components';
3
+ import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
4
4
 
5
5
  import type { IconComponent, IconSize } from '@apify/ui-icons';
6
6
 
7
7
  import { theme } from '../design_system/theme.js';
8
8
  import type { WithTransientProps } from '../type_utils.js';
9
- import type { FlattenSimpleInterpolation } from '../utils/type_utils.js';
10
9
  import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
11
10
  import { Text } from './text/index.js';
12
11
  import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
@@ -3,6 +3,8 @@ import styled, { css } from 'styled-components';
3
3
 
4
4
  import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
5
5
 
6
+ import type { HttpMethod } from '@apify-packages/types';
7
+
6
8
  import { theme } from '../../../design_system/theme.js';
7
9
  import type { BoxProps } from '../../box.js';
8
10
  import { Text } from '../../text/index.js';
@@ -21,7 +23,6 @@ export const oneLineCodeClassNames = {
21
23
  buttons: 'OneLineCode-Buttons',
22
24
  };
23
25
 
24
- type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'PATCH';
25
26
  type ThemeType = keyof Pick<
26
27
  (typeof theme)['color'],
27
28
  'primary' | 'success' | 'warning' | 'danger' | 'neutral'
@@ -34,6 +35,7 @@ const HTML_METHOD_CHIP_STYLES: Record<HttpMethod, ThemeType> = {
34
35
  DELETE: 'danger',
35
36
  HEAD: 'neutral',
36
37
  PATCH: 'neutral',
38
+ OPTIONS: 'neutral',
37
39
  };
38
40
 
39
41
  function getChipStyles(httpMethod: HttpMethod) {
@@ -135,7 +137,7 @@ const OneLineCodeWrapper = styled(SyntaxHighlighterBaseStylesWrapper)<OneLineCod
135
137
  }
136
138
  `;
137
139
 
138
- export type OneLineCodeProps = Omit<BoxProps, 'children'> & {
140
+ export type OneLineCodeProps = BoxProps & {
139
141
  children: string;
140
142
  language?: string;
141
143
  size?: SharedTextSize;
@@ -49,7 +49,7 @@ export interface FloatingComponentBaseProps {
49
49
  placement?: FloatingPlacement;
50
50
  autoPlacements?: FloatingPlacement[];
51
51
  strategy?: Strategy;
52
- content?: ReactNode;
52
+ content?: ReactNode | string;
53
53
  children?: ReactNode;
54
54
  isOpen?: boolean;
55
55
  triggerRef?: RefObject<HTMLDivElement>;
@@ -3,7 +3,7 @@ import {
3
3
  useHover,
4
4
  useInteractions,
5
5
  } from '@floating-ui/react';
6
- import { type ComponentType, type ElementType, forwardRef, type ReactNode, useState } from 'react';
6
+ import { type ComponentType, forwardRef, useState } from 'react';
7
7
  import styled, { css } from 'styled-components';
8
8
 
9
9
  import { theme } from '../../design_system/theme.js';
@@ -29,7 +29,7 @@ export const TOOLTIP_SIZES = {
29
29
  export type TooltipSize = typeof TOOLTIP_SIZES[keyof typeof TOOLTIP_SIZES];
30
30
 
31
31
  export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size'> {
32
- as?: ElementType;
32
+ as?: keyof JSX.IntrinsicElements | ComponentType<unknown>;
33
33
  className?: string;
34
34
  delayShow?: number;
35
35
  delayHide?: number;
@@ -72,7 +72,7 @@ export const Tooltip = ({
72
72
  size = TOOLTIP_SIZES.SMALL,
73
73
  textAlign = TOOLTIP_TEXT_ALIGNS.LEFT,
74
74
  ...rest
75
- }: TooltipProps): ReactNode => {
75
+ }: TooltipProps) => {
76
76
  const { uiTheme, tooltipSafeHtml } = useSharedUiDependencies();
77
77
  const [open, setOpen] = useState(false);
78
78
 
@@ -107,7 +107,7 @@ export const Tooltip = ({
107
107
 
108
108
  return (
109
109
  <TooltipFocusArea
110
- as={as}
110
+ as={as as keyof JSX.IntrinsicElements}
111
111
  className={className}
112
112
  ref={refs.setReference}
113
113
  {...getReferenceProps()}
@@ -3,7 +3,8 @@ import React, {
3
3
  useCallback,
4
4
  useMemo,
5
5
  } from 'react';
6
- import ReactMarkdown, { type AllowElement } from 'react-markdown';
6
+ import ReactMarkdown from 'react-markdown';
7
+ import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
7
8
  import remarkToc from 'remark-toc';
8
9
  import styled from 'styled-components';
9
10
 
@@ -1,5 +1,5 @@
1
- import React, { type ReactElement, type ReactNode, useCallback } from 'react';
2
- import type { AllowElement } from 'react-markdown';
1
+ import React, { useCallback } from 'react';
2
+ import type { AllowElement } from 'react-markdown/lib/rehype-filter.js';
3
3
  import slugify from 'slugify';
4
4
 
5
5
  export const slugifyHeadingChildren = (
@@ -11,12 +11,9 @@ export const slugifyHeadingChildren = (
11
11
  React.Children.forEach(headingChildren, (child) => {
12
12
  if (typeof child === 'string') {
13
13
  slugs.push(slugify(child, { lower: true, strict: true }));
14
- } else if (React.isValidElement(child)) {
15
- const element = child as ReactElement<{ children?: ReactNode }>;
16
- if (element.props.children) {
17
- const nestedSlugs = slugifyHeadingChildren(element.props.children);
18
- if (nestedSlugs) slugs.push(nestedSlugs);
19
- }
14
+ } else if (React.isValidElement(child) && child.props.children) {
15
+ const nestedSlugs = slugifyHeadingChildren(child.props.children);
16
+ if (nestedSlugs) slugs.push(nestedSlugs);
20
17
  }
21
18
  });
22
19
 
@@ -38,7 +35,7 @@ export const cleanMarkdown = (markdown: string, removeFirstH1?: boolean): string
38
35
  // This removes the first element if it's a `h1` containing exactly the Actor title
39
36
  export const useActorTitleHeadingFilter = (actorTitle: string): AllowElement => {
40
37
  return useCallback((element, index, parent) => {
41
- if (parent?.type === 'root'
38
+ if (parent.type === 'root'
42
39
  && index === 0
43
40
  && element.tagName === 'h1'
44
41
  && element.children.length === 1
@@ -1,11 +1,10 @@
1
- import type { ElementType } from 'react';
2
1
  import styled, { css } from 'styled-components';
3
2
 
4
3
  import { theme } from '../design_system/theme.js';
5
4
  import { Text } from './text/index.js';
6
5
 
7
6
  interface ShortcutProps {
8
- as?: ElementType;
7
+ as?: keyof JSX.IntrinsicElements;
9
8
  className?: string;
10
9
  children: React.ReactNode;
11
10
  /* If true, always use dark mode colors */
@@ -1,12 +1,14 @@
1
1
  import type { Element, Root, Text as TextNode } from 'hast';
2
2
  import type React from 'react';
3
3
  import { useCallback, useMemo, useRef } from 'react';
4
- import type { Components, Options as ReactMarkdownOptions, UrlTransform } from 'react-markdown';
5
- import ReactMarkdown from 'react-markdown';
4
+ import type { Components } from 'react-markdown';
5
+ import ReactMarkdown, { uriTransformer } from 'react-markdown';
6
+ import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown.js';
6
7
  import rehypeRaw from 'rehype-raw';
7
8
  import rehypeSanitize from 'rehype-sanitize';
8
9
  import remarkGfm from 'remark-gfm';
9
10
  import styled from 'styled-components';
11
+ import type { Pluggable, PluggableList } from 'unified';
10
12
  import { visit } from 'unist-util-visit';
11
13
 
12
14
  import { theme } from '../../design_system/theme.js';
@@ -99,7 +101,7 @@ const unwrapUnsupportedElement = (node: Element): (Element | TextNode)[] => {
99
101
 
100
102
  const getUnsupportedRehypeTagsSanitationPlugIn = (
101
103
  allowedElements: string[],
102
- ) => () => (tree: Root) => {
104
+ ): Pluggable<unknown[]> => () => (tree: Root) => {
103
105
  visit(tree, 'element', (node, index, parent) => {
104
106
  if (!allowedElements.includes(node.tagName) && parent && typeof index === 'number') {
105
107
  // Replace unsupported element with its valid children
@@ -151,7 +153,7 @@ const regularMarkdownSizeComponents: Components = {
151
153
  ol: ({ children, start }) => <TextContent as='ol' pl='space32' start={start}>{children}</TextContent>,
152
154
  li: ({ children }) => <TextContent as='li' mt='space4'>{children}</TextContent>,
153
155
  a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
154
- code: ({ children, node }) => <MarkdownCode node={node} size='regular'>{children}</MarkdownCode>,
156
+ code: ({ children, inline }) => <MarkdownCode inline={inline} size='regular'>{children}</MarkdownCode>,
155
157
  img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
156
158
  };
157
159
 
@@ -172,23 +174,17 @@ const smallMarkdownSizeComponents: Components = {
172
174
  ol: ({ children, start }) => <Text as='ol' pl='space32' start={start}>{children}</Text>,
173
175
  li: ({ children }) => <Text as='li' mt='space4'>{children}</Text>,
174
176
  a: ({ children, href }) => <MarkdownLink to={href}>{children}</MarkdownLink>,
175
- code: ({ children, node }) => <MarkdownCode node={node} size='small'>{children}</MarkdownCode>,
177
+ code: ({ children, inline }) => <MarkdownCode inline={inline} size='small'>{children}</MarkdownCode>,
176
178
  img: ({ src, alt, height, width }) => <MarkdownImage src={src} alt={alt} height={height} width={width} />,
177
179
  };
178
180
 
179
181
  type MarkdownSize = 'regular' | 'small';
180
182
 
181
- export type SimpleMarkdownProps = Omit<ReactMarkdownOptions, 'urlTransform' | 'children'> & {
182
- // @deprecated use urlTransform instead
183
- transformLinkUri?: UrlTransform,
184
- // @deprecated use urlTransform instead
185
- transformImageUri?: UrlTransform,
183
+ export type SimpleMarkdownProps = ReactMarkdownOptions & {
186
184
  size?: MarkdownSize,
187
- children: string,
188
- className?: string,
189
185
  }
190
186
 
191
- export const useDefaultUrlTransform = () => {
187
+ const useDefaultUrlTransform = () => {
192
188
  const { windowLocationHost } = useSharedUiDependencies();
193
189
 
194
190
  return useCallback((url: string) => {
@@ -208,7 +204,6 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
208
204
  rehypePlugins,
209
205
  remarkPlugins,
210
206
  transformLinkUri,
211
- transformImageUri,
212
207
  allowedElements,
213
208
  ...rest
214
209
  }) => {
@@ -221,36 +216,22 @@ export const SimpleMarkdown: React.FC<SimpleMarkdownProps> = ({
221
216
  ...components,
222
217
  });
223
218
 
224
- const defaultUrlTransform = useDefaultUrlTransform();
225
-
226
- const effectiveRehypePlugins = useMemo(() => {
227
- const plugins = rehypePlugins ?? [
228
- ...defaultRehypePlugins,
229
- getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current as string[]),
230
- ];
219
+ const rehypePluginsRef = useRef<PluggableList>([
220
+ ...(rehypePlugins || [...defaultRehypePlugins, getUnsupportedRehypeTagsSanitationPlugIn(effectiveAllowedElements.current)]),
221
+ rehypeSanitize, // lets always sanitize the output
222
+ ]);
231
223
 
232
- return [
233
- ...plugins,
234
- rehypeSanitize,
235
- ];
236
- }, [rehypePlugins]);
224
+ const defaultUrlTransform = useDefaultUrlTransform();
237
225
 
238
226
  return (
239
227
  <StyledMarkdown
240
228
  components={effectiveComponents.current}
241
- rehypePlugins={effectiveRehypePlugins}
229
+ rehypePlugins={rehypePluginsRef.current}
242
230
  remarkPlugins={remarkPlugins || defaultRemarkPlugins}
243
231
  allowedElements={effectiveAllowedElements.current}
244
- urlTransform={(href, children, node) => {
245
- if (node.tagName === 'img') {
246
- return transformImageUri ? transformImageUri(href, children, node) : href;
247
- }
248
-
249
- if (node.tagName === 'a') {
250
- return transformLinkUri ? transformLinkUri(href, children, node) : defaultUrlTransform(href);
251
- }
252
-
253
- return href;
232
+ transformLinkUri={(href, children, title) => {
233
+ const transformed = transformLinkUri ? transformLinkUri(href, children, title) : defaultUrlTransform(href);
234
+ return uriTransformer(transformed);
254
235
  }}
255
236
  {...rest}
256
237
  >
@@ -1,6 +1,6 @@
1
1
  import qs from 'query-string';
2
2
  import type React from 'react';
3
- import type { ExtraProps as MarkdownComponentExtraProps } from 'react-markdown';
3
+ import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react.js';
4
4
  import styled from 'styled-components';
5
5
 
6
6
  import { CheckIcon, LinkIcon } from '@apify/ui-icons';
@@ -121,21 +121,15 @@ const StyledInlineCode = styled(InlineCode)`
121
121
  }
122
122
  `;
123
123
 
124
- type MarkdownCodeProps = {
125
- size: SharedTextSize,
126
- className?: string,
127
- children: React.ReactNode,
128
- } & MarkdownComponentExtraProps;
124
+ type MarkdownCodeProps = Pick<CodeProps, 'inline' | 'className' | 'children'>
129
125
 
130
- export const MarkdownCode: React.FC<MarkdownCodeProps> = ({
126
+ export const MarkdownCode: React.FC<MarkdownCodeProps & { size: SharedTextSize }> = ({
127
+ inline,
131
128
  className,
132
129
  children,
133
130
  size,
134
- node,
135
131
  }) => {
136
- const isInline = node?.position?.start?.line === node?.position?.end?.line;
137
-
138
- if (isInline) {
132
+ if (inline) {
139
133
  return <StyledInlineCode size={size} className={className}>{children}</StyledInlineCode>;
140
134
  }
141
135
 
@@ -282,11 +276,11 @@ export const MarkdownTable = styled.table`
282
276
  `;
283
277
 
284
278
  // TODO: This should be used for readmes
285
- export const MarkdownParagraphContent: React.FC<SharedTextProps & MarkdownComponentExtraProps> = async ({
279
+ export const MarkdownParagraphContent: React.FC<SharedTextProps & Pick<ReactMarkdownProps, 'node'>> = ({
286
280
  children,
287
281
  node,
288
282
  }) => {
289
- const child = node?.children[0];
283
+ const child = node.children[0];
290
284
  const isText = child?.type === 'text';
291
285
 
292
286
  const videoSrc = isText && getVideoSrc(child.value);
@@ -1,13 +1,13 @@
1
1
  import clsx from 'clsx';
2
2
  import { createPath } from 'history';
3
3
  import type React from 'react';
4
+ import type { FlattenSimpleInterpolation } from 'styled-components';
4
5
  import styled, { css } from 'styled-components';
5
6
 
6
7
  import type { IconComponent } from '@apify/ui-icons';
7
8
 
8
9
  import { theme } from '../../design_system/theme.js';
9
10
  import type { WithTransientProps } from '../../type_utils.js';
10
- import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
11
11
  import type { BadgeSize } from '../badge.js';
12
12
  import { Badge } from '../badge.js';
13
13
  import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
@@ -1,11 +1,11 @@
1
1
  import type React from 'react';
2
2
  import { useCallback, useRef, useState } from 'react';
3
+ import type { FlattenSimpleInterpolation } from 'styled-components';
3
4
  import styled, { css } from 'styled-components';
4
5
 
5
6
  import { theme } from '../../design_system/theme.js';
6
7
  import type { WithTransientProps } from '../../type_utils.js';
7
8
  import { useResizeObserverSsr } from '../../utils/resize_observer.js';
8
- import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
9
9
  import type { MarginSpacingProps, RegularBoxProps } from '../box.js';
10
10
  import { Box } from '../box.js';
11
11
  import type { TabData, TabVariant } from './tab.js';
@@ -77,7 +77,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
77
77
  /* Scrollbar */
78
78
  -ms-overflow-style: none;
79
79
  scrollbar-width: none;
80
-
80
+
81
81
  &::-webkit-scrollbar {
82
82
  display: none; /* Chrome, Safari, Opera */
83
83
  }
@@ -107,7 +107,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
107
107
 
108
108
  &:first-of-type {
109
109
  left: 0;
110
-
110
+
111
111
  &::after {
112
112
  left: 0;
113
113
  background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
@@ -116,7 +116,7 @@ const TabsWrapper = styled(Box)<TabsWrapperProps>`
116
116
 
117
117
  &:last-of-type {
118
118
  right: 0;
119
-
119
+
120
120
  &::after {
121
121
  right: 0;
122
122
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
@@ -1,12 +1,11 @@
1
1
  import type React from 'react';
2
2
  import { type ForwardedRef, forwardRef } from 'react';
3
- import styled, { css } from 'styled-components';
3
+ import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
4
4
 
5
5
  import type { IconComponent, IconSize } from '@apify/ui-icons';
6
6
 
7
7
  import { theme } from '../design_system/theme.js';
8
8
  import type { WithTransientProps } from '../type_utils.js';
9
- import type { FlattenSimpleInterpolation } from '../utils/type_utils.js';
10
9
  import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
11
10
  import type { RegularButtonProps } from './button.js';
12
11
  import { Link, type RegularLinkProps } from './link.js';
@@ -1,9 +1,9 @@
1
1
  import { forwardRef } from 'react';
2
+ import type { FlattenSimpleInterpolation } from 'styled-components';
2
3
  import styled, { css } from 'styled-components';
3
4
 
4
5
  import { theme } from '../../design_system/theme.js';
5
6
  import type { WithTransientProps } from '../../type_utils.js';
6
- import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
7
7
  import type { TextBaseProps } from './text_base.js';
8
8
  import { TextBaseComponent } from './text_base.js';
9
9
 
@@ -1,9 +1,9 @@
1
1
  import { forwardRef } from 'react';
2
+ import type { FlattenSimpleInterpolation } from 'styled-components';
2
3
  import styled, { css } from 'styled-components';
3
4
 
4
5
  import { theme } from '../../design_system/theme.js';
5
6
  import type { WithTransientProps } from '../../type_utils.js';
6
- import type { FlattenSimpleInterpolation } from '../../utils/type_utils.js';
7
7
  import type { TextBaseProps } from './text_base.js';
8
8
  import { TextBaseComponent } from './text_base.js';
9
9
 
@@ -1,9 +1,10 @@
1
1
  import clsx from 'clsx';
2
2
  import _ from 'lodash';
3
3
  import qs from 'query-string';
4
- import React, { type ElementType, useMemo } from 'react';
5
- import type { AllowElement, Components } from 'react-markdown';
6
- import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
4
+ import React, { useMemo } from 'react';
5
+ import type { Components } from 'react-markdown';
6
+ import ReactMarkdown, { uriTransformer } from 'react-markdown';
7
+ import type { AllowElement, Node } from 'react-markdown/lib/rehype-filter.js';
7
8
  import rehypeRaw from 'rehype-raw';
8
9
  import remarkGfm from 'remark-gfm';
9
10
  import styled from 'styled-components';
@@ -19,7 +20,6 @@ import { cleanMarkdown, slugifyHeadingChildren } from '../readme_renderer/utils.
19
20
 
20
21
  interface StyledReadmeProps {
21
22
  $scrollMarginTopPx: number;
22
- className?: string;
23
23
  }
24
24
 
25
25
  const markdownClassNames = {
@@ -31,7 +31,7 @@ const markdownClassNames = {
31
31
  INLINE_CODE: 'Markdown-InlineCode',
32
32
  } as const;
33
33
 
34
- const StyledMarkdown = styled(ReactMarkdown)<StyledReadmeProps>`
34
+ const StyledMarkdown = styled(ReactMarkdown) <StyledReadmeProps>`
35
35
  @font-face {
36
36
  font-family: "ellipsis-font";
37
37
  src: local("Courier");
@@ -313,7 +313,7 @@ const StyledMarkdown = styled(ReactMarkdown)<StyledReadmeProps>`
313
313
 
314
314
  export interface HeadingRendererProps {
315
315
  node: {
316
- tagName: keyof React.ElementType;
316
+ tagName: keyof JSX.IntrinsicElements;
317
317
  };
318
318
  children: React.ReactNode;
319
319
  }
@@ -322,7 +322,7 @@ export interface HeadingRendererProps {
322
322
  * Adds ids to headings
323
323
  */
324
324
  const DefaultHeadingRenderer = ({ node, children }: HeadingRendererProps) => {
325
- const Tag = node.tagName as ElementType;
325
+ const Tag = node.tagName;
326
326
  const id = slugifyHeadingChildren(children);
327
327
  return <Tag id={id}>{children}</Tag>;
328
328
  };
@@ -478,7 +478,7 @@ const DefaultLinkRenderer = ({ node, href, ...props }: LinkRendererProps, { host
478
478
  interface ParagraphRendererProps extends React.HTMLAttributes<HTMLParagraphElement> {
479
479
  node?: {
480
480
  children: {
481
- tagName: keyof React.ElementType;
481
+ tagName: keyof JSX.IntrinsicElements;
482
482
  type: string;
483
483
  value: string;
484
484
  properties: {
@@ -505,7 +505,7 @@ const ParagraphRenderer = ({ node, ...props }: ParagraphRendererProps) => {
505
505
  };
506
506
 
507
507
  const HeadingRendererWithAnchor = ({ node, children }: HeadingRendererProps) => {
508
- const Tag = node.tagName as ElementType;
508
+ const Tag = node.tagName;
509
509
  const id = slugifyHeadingChildren(children);
510
510
 
511
511
  const { isCopied, copyToClipboard } = useCopyToClipboard();
@@ -619,17 +619,8 @@ const Markdown = ({
619
619
  <img {...imageProps} {...(lazyLoadImages ? { loading: 'lazy' } : {})} /> // node is injected by rehype-raw plugin and causing invalid prop
620
620
  ),
621
621
  } as unknown as Components}
622
- urlTransform={(href, children, node) => {
623
- if (node.tagName === 'img') {
624
- return transformImageUri ? transformImageUri(href) : href;
625
- }
626
-
627
- if (node.tagName === 'a') {
628
- return transformLinkUri ? defaultUrlTransform(transformLinkUri(href)) : defaultUrlTransform(href);
629
- }
630
-
631
- return href;
632
- }}
622
+ transformLinkUri={(href) => (transformLinkUri ? uriTransformer(transformLinkUri(href)) : uriTransformer(href))}
623
+ transformImageUri={transformImageUri}
633
624
  >
634
625
  {cleanedMarkdown}
635
626
  </StyledMarkdown>
@@ -3,4 +3,3 @@ export * from './sanitization.js';
3
3
  export * from './image_color.js';
4
4
  export * from './resize_observer.js';
5
5
  export * from './css_utils.js';
6
- export * from './type_utils.js';
@@ -1,3 +0,0 @@
1
- import type { css } from 'styled-components';
2
- export type FlattenSimpleInterpolation = ReturnType<typeof css>;
3
- //# sourceMappingURL=type_utils.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../../../src/utils/type_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,MAAM,0BAA0B,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=type_utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"type_utils.js","sourceRoot":"","sources":["../../../src/utils/type_utils.ts"],"names":[],"mappings":""}
@@ -1,3 +0,0 @@
1
- import type { css } from 'styled-components';
2
-
3
- export type FlattenSimpleInterpolation = ReturnType<typeof css>;