@apify/ui-library 0.63.2-featcodeblockwithtabs-5a4360.38 → 0.64.1-featcodeblockwithtabs-5a4360.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.63.2-featcodeblockwithtabs-5a4360.38+7660e9dd669",
+    "version": "0.64.1-featcodeblockwithtabs-5a4360.30+e5db735eb87",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,6 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/log": "^2.5.11",
         "@apify/ui-icons": "^0.9.0",
         "@floating-ui/react": "^0.26.2",
         "clsx": "^2.0.0",
@@ -66,5 +65,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "7660e9dd669289ecd48e71c385b1ebc013b8b80f"
+    "gitHead": "e5db735eb871d1296037d5e73adae45604b3c4d8"
 }

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

@@ -95,12 +95,36 @@ const CodeBlockWithTabsWrapper = styled(Box)`
         border-bottom: none;
         border-top-right-radius: ${theme.radius.radius12};
         border-top-left-radius: ${theme.radius.radius12};
+        position: relative;
+
+        & > [role="tabpanel"] {
+            position: sticky;
+            right: 0;
+            top: 0;
+            height: 100%;
+            width: 0;
+
+            &::after {
+                right: -${theme.space.space8};
+                height: 100%;
+                width: ${theme.space.space16};
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.backgroundSubtle} 100%);
+                content: ' ';
+                pointer-events: none;
+                position: absolute;
+            }
+        }
 
         @media ${theme.device.tablet} {
             height: 88px;
             justify-content: center;
             gap: ${theme.space.space24};
             padding-inline: ${theme.space.space24};
+
+            & > [role="tabpanel"]::after {
+                right: -${theme.space.space24};
+                width: ${theme.space.space32};
+            }
         }
     }
 
@@ -210,6 +234,8 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
                         </div>
                     );
                 })}
+
+                <div role="tabpanel" />
             </div>
             <CodeBlock
                 bashCommandsStart={currentTab?.bashCommandsStart}

package/src/utils/image_color.ts

@@ -3,8 +3,6 @@ import { FastAverageColor } from 'fast-average-color';
 import type { RefCallback } from 'react';
 import { useCallback, useState } from 'react';
 
-import log from '@apify/log';
-
 // Uses Luma (Y component of YIQ) computed from RGB to determine whether the color is dark.
 // See https://en.wikipedia.org/wiki/YIQ
 const isDark = (rgb: number[]): boolean => {
@@ -33,7 +31,7 @@ export const useImageColor = () => {
             try {
                 setColor(patchDarknessInfo(await fac.getColorAsync(element)));
             } catch (error) {
-                log.error('Failed to determine the image color.', { error });
+                console.error('Failed to determine the image color.', { error });
             }
         };