@apify/ui-library 1.153.2-featureexposetestids-bd5e63.21 → 1.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.153.2-featureexposetestids-bd5e63.21+d086d94f166",
+    "version": "1.154.0",
     "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.392.1",
+        "@apify-packages/types": "^3.393.0",
         "@storybook/react-vite": "^10.3.5",
         "@testing-library/react": "^16.3.2",
         "@types/hast": "^3.0.4",
@@ -95,5 +95,5 @@
         "src",
         "style"
     ],
-    "gitHead": "d086d94f166a86fee89868e4c9df887fb49577fd"
+    "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/components/select/select.tsx

@@ -26,6 +26,11 @@ export type SelectOption = {
     label: ReactNode;
     value: SelectOptionValue;
     description?: string;
+    /**
+     * When `true`, the option is greyed out and cannot be selected (react-select reads this natively via
+     * its default `isOptionDisabled`). Use it to keep unavailable options visible instead of hiding them.
+     */
+    isDisabled?: boolean;
 };
 
 // There is a prop collision in styled-components@6 and react-select. react-select uses `theme` prop but
@@ -87,8 +92,14 @@ const selectStyles: StylesConfig<SelectOption> = {
     }),
     option: (base, state) => ({
         ...base,
-        color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.text,
+        // Disabled options stay visible but greyed out and non-selectable ("disable, don't hide").
+        color: state.isDisabled
+            ? theme.color.neutral.textDisabled
+            : state.isSelected
+              ? theme.color.neutral.textOnPrimary
+              : theme.color.neutral.text,
         backgroundColor: state.isSelected ? theme.color.primary.action : theme.color.neutral.background,
+        cursor: state.isDisabled ? 'not-allowed' : 'default',
         '& > p': {
             color: state.isSelected ? theme.color.neutral.textOnPrimary : theme.color.neutral.textSubtle,
             a: {
@@ -101,7 +112,11 @@ const selectStyles: StylesConfig<SelectOption> = {
         },
 
         '&:hover': {
-            backgroundColor: state.isSelected ? undefined : theme.color.neutral.hover,
+            backgroundColor: state.isDisabled
+                ? theme.color.neutral.background
+                : state.isSelected
+                  ? undefined
+                  : theme.color.neutral.hover,
         },
     }),
     noOptionsMessage: (base) => ({