@apify/ui-library 1.90.0 → 1.91.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.90.0",
+    "version": "1.91.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -66,5 +66,5 @@
         "src",
         "style"
     ],
-    "gitHead": "9e6600fd773251daac9236b90a189d6ebbcf1aab"
+    "gitHead": "b3fa3cfa3a161f319afedcd69317e9f153719626"
 }

package/src/components/badge.stories.jsx

@@ -42,6 +42,12 @@ export const Default = () => {
                                             Badge
                                     </Badge>
                                 </td>
+                            </React.Fragment>
+                        );
+                    })}
+                    {BADGE_SIZES.map((size) => {
+                        return (
+                            <React.Fragment key={`code-${size}`}>
                                 <td>
                                     <Badge
                                         size={size}

package/src/components/badge.tsx

@@ -10,17 +10,19 @@ import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
 import { Text } from './text/index.js';
 import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
 
-export type BadgeSize = 'regular' | 'small' | 'extra_small';
-export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
+export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
+export const BADGE_SIZES: BadgeSize[] = ['large', 'regular', 'small', 'extra_small'];
 
 const BADGE_ICON_SIZES = {
-    regular: '16',
+    large: '16',
+    regular: '12',
     small: '12',
     extra_small: '12',
 } satisfies Record<BadgeSize, IconSize>;
 
 const BADGE_TEXT_SIZES = {
-    regular: 'regular',
+    large: 'regular',
+    regular: 'small',
     small: 'small',
     extra_small: 'small',
 } satisfies Record<BadgeSize, SharedTextSize>;
@@ -38,18 +40,21 @@ export type BadgeProps = SharedBadgeProps & {
 };
 
 const badgeSizeStyle = {
-    regular: css`
+    large: css`
         padding: ${theme.space.space4} ${theme.space.space8};
         border-radius: ${theme.radius.radius6};
     `,
+    regular: css`
+        padding: ${theme.space.space4} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+    `,
     small: css`
-        height: 2rem;
         padding: ${theme.space.space2} ${theme.space.space6};
         border-radius: ${theme.radius.radius4};
     `,
     extra_small: css`
         height: ${theme.space.space16};
-        padding: ${theme.space.space2} ${theme.space.space4};
+        padding: 0 ${theme.space.space4};
         border-radius: ${theme.radius.radius4};
     `,
 } satisfies Record<BadgeSize, FlattenSimpleInterpolation>;

package/src/components/floating/menu.tsx

@@ -11,6 +11,7 @@ import {
 import clsx from 'clsx';
 import type React from 'react';
 import {
+    useCallback,
     useMemo,
     useRef,
     useState,
@@ -49,6 +50,7 @@ export interface MenuProps<T = MenuOption> {
     options: T[],
     value?: string,
     onSelect: (newValue: string, selectedBy: SelectActionType) => void,
+    onMenuOpen?: (isOpen: boolean) => void,
     defaultLabel?: React.ReactNode,
     closeOnSelect?: boolean,
     renderOption?: (option: T) => React.ReactNode,
@@ -70,6 +72,7 @@ export const Menu = <T extends MenuOption>({
     options,
     value,
     onSelect,
+    onMenuOpen,
     closeOnSelect = true,
     defaultLabel,
     components,
@@ -77,7 +80,13 @@ export const Menu = <T extends MenuOption>({
     className,
     ...rest
 }: MenuProps<T> & BoxProps) => {
-    const [isOpen, setIsOpen] = useState(false);
+    const [isOpen, setIsOpenState] = useState(false);
+    const setIsOpen = useCallback((newIsOpen: boolean) => {
+        setIsOpenState(newIsOpen);
+        if (onMenuOpen) {
+            onMenuOpen(newIsOpen);
+        }
+    }, [onMenuOpen]);
     const { refs, floatingStyles, context } = useFloatingMenu({
         isOpen,
         setIsOpen,