@xsolla/xui-status-dropdown 0.170.6 → 0.171.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-status-dropdown",
-  "version": "0.170.6",
+  "version": "0.171.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,11 +13,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-context-menu": "0.170.6",
-    "@xsolla/xui-core": "0.170.6",
-    "@xsolla/xui-dropdown": "0.170.6",
-    "@xsolla/xui-primitives-core": "0.170.6",
-    "@xsolla/xui-status": "0.170.6"
+    "@xsolla/xui-context-menu": "0.171.0",
+    "@xsolla/xui-core": "0.171.0",
+    "@xsolla/xui-primitives-core": "0.171.0",
+    "@xsolla/xui-status": "0.171.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -2,17 +2,18 @@ import React, { ReactNode } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type StatusDropdownPalette = "Neutral" | "Success" | "Warning" | "Alert" | "Brand";
+type StatusDropdownSize = "xl" | "lg" | "md" | "sm" | "xs";
 interface StatusDropdownProps extends ThemeOverrideProps {
     /** The current status label to display */
     label: string;
     /** Color palette for the status indicator */
     palette?: StatusDropdownPalette;
+    /** Size of the trigger */
+    size?: StatusDropdownSize;
     /** Whether to show the status dot */
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */
     children: ReactNode;
-    /** Callback when a menu item is selected. Value comes from child ContextMenuItem. */
-    onSelect?: (value: any) => void;
     /** Whether the dropdown is open (controlled) */
     isOpen?: boolean;
     /** Callback when the open state changes */
@@ -32,4 +33,4 @@ interface StatusDropdownProps extends ThemeOverrideProps {
  */
 declare const StatusDropdown: React.ForwardRefExoticComponent<StatusDropdownProps & React.RefAttributes<any>>;
 
-export { StatusDropdown, type StatusDropdownPalette, type StatusDropdownProps };
+export { StatusDropdown, type StatusDropdownPalette, type StatusDropdownProps, type StatusDropdownSize };

package/web/index.d.ts

@@ -2,17 +2,18 @@ import React, { ReactNode } from 'react';
 import { ThemeOverrideProps } from '@xsolla/xui-core';
 
 type StatusDropdownPalette = "Neutral" | "Success" | "Warning" | "Alert" | "Brand";
+type StatusDropdownSize = "xl" | "lg" | "md" | "sm" | "xs";
 interface StatusDropdownProps extends ThemeOverrideProps {
     /** The current status label to display */
     label: string;
     /** Color palette for the status indicator */
     palette?: StatusDropdownPalette;
+    /** Size of the trigger */
+    size?: StatusDropdownSize;
     /** Whether to show the status dot */
     dot?: boolean;
     /** Dropdown menu content (usually ContextMenuItem components) */
     children: ReactNode;
-    /** Callback when a menu item is selected. Value comes from child ContextMenuItem. */
-    onSelect?: (value: any) => void;
     /** Whether the dropdown is open (controlled) */
     isOpen?: boolean;
     /** Callback when the open state changes */
@@ -32,4 +33,4 @@ interface StatusDropdownProps extends ThemeOverrideProps {
  */
 declare const StatusDropdown: React.ForwardRefExoticComponent<StatusDropdownProps & React.RefAttributes<any>>;
 
-export { StatusDropdown, type StatusDropdownPalette, type StatusDropdownProps };
+export { StatusDropdown, type StatusDropdownPalette, type StatusDropdownProps, type StatusDropdownSize };

package/web/index.js

@@ -358,7 +358,7 @@ var isWeb = true;
 
 // src/StatusDropdown.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_xui_dropdown = require("@xsolla/xui-dropdown");
+var import_xui_context_menu = require("@xsolla/xui-context-menu");
 
 // ../../foundation/icons-base/dist/web/index.mjs
 var import_styled_components4 = __toESM(require("styled-components"), 1);
@@ -1132,44 +1132,48 @@ var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Base
 
 // src/StatusDropdown.tsx
 var import_jsx_runtime725 = require("react/jsx-runtime");
+var gapMap = {
+  xl: 4,
+  lg: 4,
+  md: 2,
+  sm: 2,
+  xs: 2
+};
+var dotSizeMap = {
+  xl: 8,
+  lg: 8,
+  md: 8,
+  sm: 4,
+  xs: 4
+};
 var getPaletteColors = (palette, theme) => {
   const colors = theme.colors;
   switch (palette) {
     case "Success":
       return {
-        background: colors.background.success.primary,
-        border: colors.border.success,
-        content: colors.content.on.success
+        background: colors.background.success.secondary,
+        border: colors.border.success
       };
     case "Warning":
       return {
-        background: colors.background.warning.primary,
-        border: colors.border.warning,
-        content: colors.content.on.warning
+        background: colors.background.warning.secondary,
+        border: colors.border.warning
       };
     case "Alert":
       return {
-        background: colors.background.alert.primary,
-        border: colors.border.alert,
-        content: colors.content.on.alert
-      };
-    case "Neutral":
-      return {
-        background: colors.background.neutral.primary,
-        border: colors.border.neutral,
-        content: colors.content.on.neutral
+        background: colors.background.alert.secondary,
+        border: colors.border.alert
       };
     case "Brand":
       return {
-        background: colors.background.brand.primary,
-        border: colors.border.brand,
-        content: colors.content.on.brand
+        background: colors.background.brand.secondary,
+        border: colors.border.brand
       };
+    case "Neutral":
     default:
       return {
-        background: colors.background.neutral.primary,
-        border: colors.border.neutral,
-        content: colors.content.on.neutral
+        background: colors.background.neutral.secondary,
+        border: colors.border.neutral
       };
   }
 };
@@ -1177,9 +1181,9 @@ var StatusDropdown = (0, import_react3.forwardRef)(
   ({
     label,
     palette = "Neutral",
+    size = "xs",
     dot = false,
     children,
-    onSelect,
     isOpen: propIsOpen,
     onOpenChange,
     "aria-label": ariaLabel,
@@ -1190,8 +1194,13 @@ var StatusDropdown = (0, import_react3.forwardRef)(
   }, ref) => {
     const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
     const paletteColors = getPaletteColors(palette, theme);
+    const contentColor = theme.colors.content.primary;
+    const sizeStyles = theme.sizing.tag(size);
+    const gap = gapMap[size];
+    const dotSize = dotSizeMap[size];
     const [internalIsOpen, setInternalIsOpen] = (0, import_react3.useState)(false);
     const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const [isFocusVisible, setIsFocusVisible] = (0, import_react3.useState)(false);
     const handleOpenChange = (open) => {
       if (onOpenChange) onOpenChange(open);
       if (propIsOpen === void 0) {
@@ -1201,26 +1210,64 @@ var StatusDropdown = (0, import_react3.forwardRef)(
     const trigger = /* @__PURE__ */ (0, import_jsx_runtime725.jsxs)(
       Box,
       {
+        ref,
+        id,
         role: "button",
-        "aria-haspopup": "listbox",
+        tabIndex: 0,
         "aria-label": ariaLabel || `Status: ${label}`,
         testID: testID ? `${testID}-trigger` : void 0,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            handleOpenChange(!isOpen);
+          } else if (event.key === "ArrowDown" && !isOpen) {
+            event.preventDefault();
+            handleOpenChange(true);
+          }
+        },
+        position: "relative",
         flexDirection: "row",
         alignItems: "center",
         backgroundColor: paletteColors.background,
         borderColor: paletteColors.border,
-        borderWidth: 1,
-        borderRadius: 4,
-        height: 20,
-        paddingHorizontal: 3,
-        gap: 2,
-        style: isWeb ? { cursor: "pointer" } : void 0,
+        borderWidth: sizeStyles.borderWidth,
+        borderRadius: sizeStyles.radius,
+        height: sizeStyles.height,
+        paddingHorizontal: sizeStyles.padding,
+        gap,
+        ...isWeb ? {
+          onFocus: (event) => {
+            const target = event?.target;
+            setIsFocusVisible(
+              typeof target?.matches === "function" ? target.matches(":focus-visible") : true
+            );
+          },
+          onBlur: () => setIsFocusVisible(false)
+        } : {},
+        style: isWeb ? {
+          cursor: "pointer",
+          outline: isFocusVisible ? `2px solid ${theme.colors.border.brand}` : "none",
+          outlineOffset: isFocusVisible ? 2 : void 0
+        } : void 0,
         children: [
+          isWeb && /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+            Box,
+            {
+              "aria-hidden": true,
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              borderRadius: sizeStyles.radius,
+              hoverStyle: { backgroundColor: theme.colors.overlay.mono }
+            }
+          ),
           dot && /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
             Box,
             {
-              width: 14,
-              height: 14,
+              width: sizeStyles.iconSize,
+              height: sizeStyles.iconSize,
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
@@ -1228,63 +1275,62 @@ var StatusDropdown = (0, import_react3.forwardRef)(
                 Box,
                 {
                   testID: testID ? `${testID}-dot` : "status-dropdown-dot",
-                  width: 4,
-                  height: 4,
+                  width: dotSize,
+                  height: dotSize,
                   borderRadius: 999,
-                  backgroundColor: paletteColors.content
+                  backgroundColor: contentColor
                 }
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(Box, { paddingHorizontal: 2, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(Box, { paddingHorizontal: gap, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
             Text,
             {
-              color: paletteColors.content,
-              fontSize: 14,
+              color: contentColor,
+              fontSize: sizeStyles.fontSize,
               fontWeight: "500",
               numberOfLines: 1,
               style: {
-                lineHeight: "16px"
+                lineHeight: `${sizeStyles.lineHeight}px`
               },
               children: label
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(Box, { width: 14, height: 14, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
-            Icon,
+          /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+            Box,
             {
-              size: 14,
-              color: paletteColors.content,
-              style: {
-                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                ...isWeb ? { transition: "transform 0.2s ease-in-out" } : {}
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(ChevronDown, {})
+              width: sizeStyles.iconSize,
+              height: sizeStyles.iconSize,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
+                Icon,
+                {
+                  size: sizeStyles.iconSize,
+                  color: contentColor,
+                  style: {
+                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                    ...isWeb ? { transition: "transform 0.2s ease-in-out" } : {}
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(ChevronDown, {})
+                }
+              )
             }
-          ) })
+          )
         ]
       }
     );
     return /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
-      import_xui_dropdown.Dropdown,
+      import_xui_context_menu.ContextMenu,
       {
-        ref,
-        id,
         trigger,
         isOpen,
         onOpenChange: handleOpenChange,
+        "aria-label": "Change status",
         testID,
         themeMode,
         themeProductContext,
-        children: /* @__PURE__ */ (0, import_jsx_runtime725.jsx)(
-          Box,
-          {
-            onPress: (e) => {
-              if (onSelect) {
-              }
-            },
-            children
-          }
-        )
+        children
       }
     );
   }