@apify/ui-library 1.87.0 → 1.87.2-fixactorissuescomponentsoncl-2f1509.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.87.0",
+    "version": "1.87.2-fixactorissuescomponentsoncl-2f1509.12+95cb0678c7c",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.15.0",
+        "@apify/ui-icons": "^1.15.1",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "c80be45a31239ca261a853575b916283723a252a"
+    "gitHead": "95cb0678c7c6b046e97e7d2dc3f55395dbe0276e"
 }

package/src/components/action_link.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';

package/src/components/actor_template_card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../design_system/theme.js';

package/src/components/badge.stories.jsx

@@ -1,9 +1,12 @@
-import { PeopleIcon } from '@apify/ui-icons';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from 'styled-components';
-import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge';
-import { SHARED_TEXT_TYPES } from './text';
+
+import { PeopleIcon } from '@apify/ui-icons';
+
+import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge.jsx';
+import { SHARED_TEXT_TYPES } from './text.jsx';
 
 export default {
     title: 'UI-Library/Badge',

package/src/components/badge.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';

package/src/components/banner.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../design_system/theme.js';

package/src/components/blog_article.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { ArrowRightIcon } from '@apify/ui-icons';

package/src/components/box.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../design_system/theme.js';

package/src/components/button.stories.jsx

@@ -1,8 +1,11 @@
-import { X16 } from '@apify/icons';
 import React from 'react';
 import styled from 'styled-components';
-import { Button } from './button';
-import { theme } from '../design_system/theme';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { X16 } from '@apify/icons';
+
+import { theme } from '../design_system/theme.jsx';
+import { Button } from './button.jsx';
 
 export default {
     title: 'UI-Library/Button',

package/src/components/button.tsx

@@ -1,5 +1,6 @@
 import type { AriaAttributes } from 'react';
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ExternalLinkIcon } from '@apify/ui-icons';

package/src/components/chip.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import type { FC } from 'react';
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';

package/src/components/code/action_button.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';

package/src/components/code/code_block/code_block.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React, { useMemo, useRef, useState } from 'react';
+import type React from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import type { RegularBoxProps } from '../../box.js';
 import { ColorWheelGradient } from '../../color_wheel_gradient.js';

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React from 'react';
+import _ from 'lodash';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
@@ -206,7 +207,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     const commonProps = {
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
                         'data-test': `code-block-tab-${tab.key}`,
-                        onClick: tab.onClick,
+                        ..._.omit(tab, ['bashCommandsStart', 'content', 'languageOverride']),
                     };
                     const children = (
                         <>
@@ -221,13 +222,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     // if the tab has a 'to' prop, render a Link component
                     if (tab.to) {
                         return (
-                            <Link
-                                {...commonProps}
-                                to={tab.to}
-                                rel={tab.rel}
-                                target={tab.target}
-                                key={tab.key}
-                            >
+                            <Link {...commonProps} key={tab.key} to={tab.to}>
                                 {children}
                             </Link>
                         );

package/src/components/code/inline_code/inline_code.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import { CheckIcon, CopyIcon } from '@apify/ui-icons';

package/src/components/floating/menu.tsx

@@ -9,7 +9,8 @@ import {
     useTypeahead,
 } from '@floating-ui/react';
 import clsx from 'clsx';
-import React, {
+import type React from 'react';
+import {
     useMemo,
     useRef,
     useState,

package/src/components/link.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { createPath, type Path } from 'history';
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { ExternalLinkIcon } from '@apify/ui-icons';

package/src/components/message.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { IconComponent as IconComponentType } from '@apify/ui-icons';

package/src/components/simple_markdown/simple_markdown.tsx

@@ -1,5 +1,6 @@
 import type { Element, Root, Text as TextNode } from 'hast';
-import React, { useCallback, useMemo, useRef } from 'react';
+import type React from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 import type { Components } from 'react-markdown';
 import ReactMarkdown, { uriTransformer } from 'react-markdown';
 import type { ReactMarkdownOptions } from 'react-markdown/lib/react-markdown.js';

package/src/components/simple_markdown/simple_markdown_components.tsx

@@ -1,5 +1,5 @@
 import qs from 'query-string';
-import React from 'react';
+import type React from 'react';
 import type { CodeProps, ReactMarkdownProps } from 'react-markdown/lib/ast-to-react.js';
 import styled from 'styled-components';
 

package/src/components/tabs/tab.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { createPath } from 'history';
-import React from 'react';
+import type React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 

package/src/components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useRef, useState } from 'react';
+import type React from 'react';
+import { useCallback, useRef, useState } from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 import styled, { css } from 'styled-components';
 

package/src/components/tag.tsx

@@ -1,4 +1,5 @@
-import React, { type ForwardedRef, forwardRef } from 'react';
+import type React from 'react';
+import { type ForwardedRef, forwardRef } from 'react';
 import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
 
 import type { IconComponent, IconSize } from '@apify/ui-icons';

package/src/components/text/heading_content.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/text/heading_marketing.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/text/heading_shared.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/text/text_base.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled, { css } from 'styled-components';
 
 import type { WithTransientProps } from '../../type_utils.js';

package/src/components/tile/horizontal_tile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/tile/vertical_tile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/to_consolidate/card.tsx

@@ -1,5 +1,6 @@
 import clsx from 'clsx';
-import React, { forwardRef } from 'react';
+import type React from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/components/to_consolidate/tab_number_chip.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';

package/src/design_system/colors/colors.stories.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components';
 
-// eslint-disable-next-line import/no-default-export
 export default {
     title: 'Design Tokens/Colors',
 };

package/src/ui_dependency_provider.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react';
+import type React from 'react';
+import { createContext, useContext } from 'react';
 
 import type { UiThemeOption } from './design_system/theme.js';