@apify/ui-library 1.153.2 → 1.154.0

package/package.json

@@ -1,12 +1,24 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.153.2",
+    "version": "1.154.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
     "sideEffects": false,
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "default": "./dist/index.js"
+        },
+        "./test-ids": {
+            "types": "./dist/test_ids.d.ts",
+            "default": "./dist/test_ids.js"
+        },
+        "./style/*": "./style/*",
+        "./package.json": "./package.json"
+    },
     "publishConfig": {
         "registry": "https://registry.npmjs.org",
         "access": "public"
@@ -83,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "1139bba67611929694e7b130d5ff44b8f48d5746"
+    "gitHead": "547111a7e747a305bd93189cc038fef80cf2f56e"
 }

package/src/components/message/message.tsx

@@ -20,9 +20,10 @@ export const messageClassNames = {
     description: 'description',
     dismiss: 'dismiss',
     actionsWrapper: 'actionsWrapper',
+    action: 'action',
 };
 
-const StyledMessage = styled(Box)<{ $boxless?: boolean; $hasCaption?: boolean }>`
+const StyledMessage = styled(Box)<{ $boxless?: boolean; $hasCaption?: boolean; $hasActions?: boolean }>`
     display: flex;
     align-items: center;
     gap: ${theme.space.space8};
@@ -87,6 +88,27 @@ const StyledMessage = styled(Box)<{ $boxless?: boolean; $hasCaption?: boolean }>
         gap: ${theme.space.space8};
     }
 
+    /* With actions on screens below desktop, stack them in a row below the content */
+    ${({ $hasActions }) =>
+        $hasActions &&
+        css`
+            flex-direction: column;
+            align-items: stretch;
+
+            .${messageClassNames.action} {
+                flex: 1;
+            }
+
+            @media ${theme.device.desktop} {
+                flex-direction: row;
+                align-items: center;
+
+                .${messageClassNames.action} {
+                    flex: initial;
+                }
+            }
+        `}
+
     &.borderless {
         border: none !important;
         background-color: transparent !important;
@@ -184,6 +206,7 @@ export const Message: React.FC<MessageProps> = ({
             forwardedAs={as}
             $boxless={boxless}
             $hasCaption={hasCaption}
+            $hasActions={actions.length > 0}
             {...rest}
         >
             <div className={messageClassNames.content}>
@@ -199,8 +222,14 @@ export const Message: React.FC<MessageProps> = ({
                 <div className={messageClassNames.actionsWrapper}>
                     {actions.length > 0 && (
                         <>
-                            {actions.map(({ label, ...action }, index) => (
-                                <Button key={index} size="small" variant="primary" {...action}>
+                            {actions.map(({ label, className: actionClassName, ...action }, index) => (
+                                <Button
+                                    key={index}
+                                    size="small"
+                                    variant="primary"
+                                    className={clsx(messageClassNames.action, actionClassName)}
+                                    {...action}
+                                >
                                     {label}
                                 </Button>
                             ))}

package/src/test_ids.ts

@@ -0,0 +1,3 @@
+// `./test-ids` subpath barrel. Playwright imports test IDs from here to avoid the
+// React/CSS-heavy root barrel (which breaks non-bundler loaders). Add future modules here.
+export { tableTestIds } from './components/table/table.test_ids.js';