@apify/ui-library 1.162.1 → 1.163.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.162.1",
+    "version": "1.163.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1b7ed3e37eae416924c8245dd5b66669512c0489"
+    "gitHead": "ed77920d4063cbbf7f04c953ab2c0dd69d7b8781"
 }

package/src/components/floating/menu_components.tsx

@@ -113,13 +113,14 @@ type DropdownMenuBaseComponentWithCountProps = {
 } & BoxProps;
 
 /**
- * Menu base component WITH dropdown icon and a selected-count badge.
- * Use this variant when the menu supports multi-select and you want to
- * display how many items are selected.
+ * Menu base component WITH dropdown icon, an optional selected-count badge and an optional clear button.
+ * Pass `selectedCount` for multi-select menus to show how many items are selected; single-select menus
+ * can omit it and still get the clear button by passing `onClear`.
  */
 export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, DropdownMenuBaseComponentWithCountProps>(
     ({ children, onClear, selectedCount, ...props }, ref) => {
-        const showCount = onClear && selectedCount !== undefined && selectedCount > 0;
+        const showCount = selectedCount !== undefined && selectedCount > 0;
+        const showClear = !!onClear && (selectedCount === undefined || selectedCount > 0);
 
         return (
             <PlainMenuBaseComponent {...props} ref={ref}>
@@ -129,8 +130,8 @@ export const DropdownMenuBaseComponentWithCount = forwardRef<HTMLElement, Dropdo
                         {selectedCount}
                     </Badge>
                 )}
-                {showCount && <VerticalDivider />}
-                {showCount ? (
+                {showClear && <VerticalDivider />}
+                {showClear ? (
                     <CrossIcon
                         size="16"
                         color={theme.color.neutral.icon}