@apify/ui-library 1.156.15 → 1.157.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.156.15",
+    "version": "1.157.1",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -75,7 +75,7 @@
         "styled-components": "^6.1.19"
     },
     "devDependencies": {
-        "@apify-packages/types": "^3.405.1",
+        "@apify-packages/types": "^3.406.1",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "cc8ce675a2a47fa412de932ac1e08e7832e3a663"
+    "gitHead": "620ceb2f2c491291e5c77f187fbc1a4fef001146"
 }

package/src/components/breadcrumb/breadcrumb.tsx

@@ -26,6 +26,24 @@ const StyledBreadcrumbLink = styled(Link)`
     border-radius: ${theme.radius.radius6};
     color: ${theme.color.neutral.textSubtle};
 
+    /* Reserve the bolder hover width via a hidden ::after copy of the label on the same span, so it
+       inherits identical font-size/line-height and (with height: 0) adds no height — hovering changes
+       the weight without widening the label or shifting the rest of the row. */
+    > span {
+        display: inline-block;
+        /* Center the label within its reserved (bold) width so it grows symmetrically on hover. */
+        text-align: center;
+
+        &::after {
+            content: attr(data-label);
+            display: block;
+            height: 0;
+            overflow: hidden;
+            visibility: hidden;
+            font-weight: 500;
+        }
+    }
+
     &:hover {
         color: ${theme.color.neutral.textMuted};
         span {
@@ -70,7 +88,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ items, className }) =>
                     <span className={clsx(breadcrumbClassNames.ITEM, isActive && breadcrumbClassNames.ITEM_ACTIVE)}>
                         {!isActive && item.url ? (
                             <StyledBreadcrumbLink to={item.url}>
-                                <Text as="span" size="small" weight="normal">
+                                <Text as="span" size="small" weight="normal" data-label={item.label}>
                                     {item.label}
                                 </Text>
                             </StyledBreadcrumbLink>

package/src/components/floating/menu_components.tsx

@@ -119,7 +119,7 @@ type DropdownMenuBaseComponentWithCountProps = {
  */
 export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, DropdownMenuBaseComponentWithCountProps>(
     ({ children, onClear, selectedCount, ...props }, ref) => {
-        const showCount = onClear && selectedCount !== undefined;
+        const showCount = onClear && selectedCount !== undefined && selectedCount > 0;
 
         return (
             <PlainMenuBaseComponent {...props} ref={ref}>
@@ -130,7 +130,7 @@ export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, Dropdo
                     </Badge>
                 )}
                 {showCount && <VerticalDivider />}
-                {onClear ? (
+                {showCount ? (
                     <CrossIcon
                         size="16"
                         color={theme.color.neutral.icon}