@xsolla/xui-status-dropdown 0.216.1 → 0.217.0

package/README.md

@@ -86,6 +86,7 @@ const [status, setStatus] = useState('Success');
 | `palette` | `'Neutral' \| 'Success' \| 'Warning' \| 'Alert' \| 'Brand'` | `'Neutral'` | Colour palette for the trigger. |
 | `dot` | `boolean` | `false` | Show a small status dot before the label. |
 | `children` | `ReactNode` | — | Menu content; typically `ContextMenuItem` elements. |
+| `triggerThemeMode` | `ThemeMode` | — | Theme mode for the trigger only, overriding `themeMode` for the trigger. When omitted, the trigger falls back to `themeMode` (which inherits from `XUIProvider`). Set `triggerThemeMode="light"` to keep the trigger light while the menu is dark (FEP-898). |
 | `placement` | `ContextMenuPlacement` | `'bottom-start'` | Menu placement relative to the trigger. |
 | `onSelect` | `(value: any) => void` | — | Fired when a menu item is selected. |
 | `isOpen` | `boolean` | — | Controlled open state. |
@@ -94,7 +95,7 @@ const [status, setStatus] = useState('Success');
 | `id` | `string` | — | HTML id on the underlying dropdown. |
 | `testID` | `string` | — | Test identifier; suffixed for inner trigger and dot. |
 
-Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`). `themeMode` styles both the trigger and the menu; use `triggerThemeMode` to override the trigger's theme independently (e.g. a light trigger over a dark menu).
 
 ### Types
 

package/native/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { ThemeOverrideProps, ThemeMode } from '@xsolla/xui-core';
 import { ContextMenuPlacement } from '@xsolla/xui-context-menu';
 
 type StatusDropdownPalette = "Neutral" | "Success" | "Warning" | "Alert" | "Brand";
@@ -17,6 +17,14 @@ interface StatusDropdownProps extends ThemeOverrideProps {
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */
     children: ReactNode;
+    /**
+     * Theme mode for the trigger only, overriding the context menu's `themeMode`
+     * for the trigger. When omitted, the trigger falls back to `themeMode` (which
+     * inherits from XUIProvider), so trigger and menu match by default. Set
+     * `triggerThemeMode="light"` to keep the trigger light while the menu is dark,
+     * matching Figma (FEP-898).
+     */
+    triggerThemeMode?: ThemeMode;
     /** Menu placement relative to the trigger. Defaults to `"bottom-start"`. */
     placement?: ContextMenuPlacement;
     /** Whether the dropdown is open (controlled) */

package/native/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ThemeOverrideProps } from '@xsolla/xui-core';
+import { ThemeOverrideProps, ThemeMode } from '@xsolla/xui-core';
 import { ContextMenuPlacement } from '@xsolla/xui-context-menu';
 
 type StatusDropdownPalette = "Neutral" | "Success" | "Warning" | "Alert" | "Brand";
@@ -17,6 +17,14 @@ interface StatusDropdownProps extends ThemeOverrideProps {
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */
     children: ReactNode;
+    /**
+     * Theme mode for the trigger only, overriding the context menu's `themeMode`
+     * for the trigger. When omitted, the trigger falls back to `themeMode` (which
+     * inherits from XUIProvider), so trigger and menu match by default. Set
+     * `triggerThemeMode="light"` to keep the trigger light while the menu is dark,
+     * matching Figma (FEP-898).
+     */
+    triggerThemeMode?: ThemeMode;
     /** Menu placement relative to the trigger. Defaults to `"bottom-start"`. */
     placement?: ContextMenuPlacement;
     /** Whether the dropdown is open (controlled) */

package/native/index.js

@@ -1213,6 +1213,7 @@ var StatusDropdown = (0, import_react2.forwardRef)(
     maxWidth,
     dot = false,
     children,
+    triggerThemeMode,
     placement = "bottom-start",
     isOpen: propIsOpen,
     onOpenChange,
@@ -1223,7 +1224,7 @@ var StatusDropdown = (0, import_react2.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme: rawTheme } = (0, import_xui_core.useResolvedTheme)({
-      themeMode,
+      themeMode: triggerThemeMode ?? themeMode,
       themeProductContext
     });
     const theme = rawTheme;