@apify/ui-library 0.67.0 → 0.67.2

package/eslint.config.mjs

@@ -10,14 +10,21 @@ export default [
     { ignores: ['**/dist'] }, // Ignores need to happen first
     ...apifyTypescriptConfig,
     ...apifyJestConfig,
-    {
 
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        ...react.configs.flat.recommended,
+    },
+    {
         plugins: {
             sonarjs,
-            react,
             'react-hooks': reactHooks,
         },
-
         languageOptions: {
             sourceType: 'module',
 
@@ -31,6 +38,7 @@ export default [
             'no-void': 'off',
             'react/display-name': 'off',
             'react-hooks/exhaustive-deps': 'error',
+            ...reactHooks.configs.recommended.rules,
         },
     },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.67.0",
+    "version": "0.67.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -65,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "fa29d195388b9162560e580b4cd125d75366027a"
+    "gitHead": "f42c29b074c4c31495fea789871887dcb72dd977"
 }

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

@@ -201,7 +201,6 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                     const selected = tab.key === currentTab?.key;
 
                     const commonProps = {
-                        key: tab.key,
                         className: clsx(CODE_BLOCK_WITH_TABS_CLASSNAMES.TAB, { selected }),
                         'data-test': `code-block-tab-${tab.key}`,
                         onClick: tab.onClick,
@@ -224,6 +223,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                                 to={tab.to}
                                 rel={tab.rel}
                                 target={tab.target}
+                                key={tab.key}
                             >
                                 {children}
                             </Link>
@@ -234,6 +234,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                         <div
                             {...commonProps}
                             role="button"
+                            key={tab.key}
                         >
                             {children}
                         </div>

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

@@ -27,18 +27,29 @@ export const getBashLinePrefixes = (
 
         if (bashCommandsStart.includes(i + 1)) {
             return (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>$</CodeHighlighterLineBashPrefix>
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    color={theme.color.lavender.base}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                >$</CodeHighlighterLineBashPrefix>
             );
         }
 
         if (isEmptyLine) {
             return (
-                <CodeHighlighterLineBashPrefix $isOneLine={isOneLine}/>
+                <CodeHighlighterLineBashPrefix
+                    $isOneLine={isOneLine}
+                    key={`code-highlighter-line-bash-prefix-${i}`}
+                />
             );
         }
 
         return (
-            <CodeHighlighterLineBashPrefix $isOneLine={isOneLine} color={theme.color.lavender.base}>&lt;</CodeHighlighterLineBashPrefix>
+            <CodeHighlighterLineBashPrefix
+                $isOneLine={isOneLine}
+                color={theme.color.lavender.base}
+                key={`code-highlighter-line-bash-prefix-${i}`}
+            >&lt;</CodeHighlighterLineBashPrefix>
         );
     });
 
@@ -49,5 +60,8 @@ export const getNumberLinePrefixes = (code: string): Record<number, ReactNode> =
     const numberOfLines = code.split('\n').length;
     const numbersArray = Array.from({ length: numberOfLines }, (_, i) => i + 1);
 
-    return Object.fromEntries(numbersArray.map((number) => [number, <CodeHighlighterLinePrefix>{number}</CodeHighlighterLinePrefix>]));
+    return Object.fromEntries(numbersArray.map((number) => [
+        number,
+        <CodeHighlighterLinePrefix key={`code-highlighter-line-prefix-${number}`}>{number}</CodeHighlighterLinePrefix>,
+    ]));
 };