@xsolla/xui-status-dropdown 0.170.6 → 0.171.0

package/web/index.mjs

@@ -322,7 +322,7 @@ var isWeb = true;
 
 // src/StatusDropdown.tsx
 import { useResolvedTheme } from "@xsolla/xui-core";
-import { Dropdown } from "@xsolla/xui-dropdown";
+import { ContextMenu } from "@xsolla/xui-context-menu";
 
 // ../../foundation/icons-base/dist/web/index.mjs
 import styled4 from "styled-components";
@@ -1096,44 +1096,48 @@ var ChevronDown = (props) => /* @__PURE__ */ jsx127(BaseIcon, { ...props, solidC
 
 // src/StatusDropdown.tsx
 import { jsx as jsx722, jsxs } from "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
       };
   }
 };
@@ -1141,9 +1145,9 @@ var StatusDropdown = forwardRef(
   ({
     label,
     palette = "Neutral",
+    size = "xs",
     dot = false,
     children,
-    onSelect,
     isOpen: propIsOpen,
     onOpenChange,
     "aria-label": ariaLabel,
@@ -1154,8 +1158,13 @@ var StatusDropdown = forwardRef(
   }, ref) => {
     const { theme } = 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] = useState(false);
     const isOpen = propIsOpen !== void 0 ? propIsOpen : internalIsOpen;
+    const [isFocusVisible, setIsFocusVisible] = useState(false);
     const handleOpenChange = (open) => {
       if (onOpenChange) onOpenChange(open);
       if (propIsOpen === void 0) {
@@ -1165,26 +1174,64 @@ var StatusDropdown = forwardRef(
     const trigger = /* @__PURE__ */ 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__ */ jsx722(
+            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__ */ jsx722(
             Box,
             {
-              width: 14,
-              height: 14,
+              width: sizeStyles.iconSize,
+              height: sizeStyles.iconSize,
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
@@ -1192,63 +1239,62 @@ var StatusDropdown = 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__ */ jsx722(Box, { paddingHorizontal: 2, flexShrink: 0, children: /* @__PURE__ */ jsx722(
+          /* @__PURE__ */ jsx722(Box, { paddingHorizontal: gap, flexShrink: 0, children: /* @__PURE__ */ jsx722(
             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__ */ jsx722(Box, { width: 14, height: 14, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsx722(
-            Icon,
+          /* @__PURE__ */ jsx722(
+            Box,
             {
-              size: 14,
-              color: paletteColors.content,
-              style: {
-                transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
-                ...isWeb ? { transition: "transform 0.2s ease-in-out" } : {}
-              },
-              children: /* @__PURE__ */ jsx722(ChevronDown, {})
+              width: sizeStyles.iconSize,
+              height: sizeStyles.iconSize,
+              alignItems: "center",
+              justifyContent: "center",
+              children: /* @__PURE__ */ jsx722(
+                Icon,
+                {
+                  size: sizeStyles.iconSize,
+                  color: contentColor,
+                  style: {
+                    transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+                    ...isWeb ? { transition: "transform 0.2s ease-in-out" } : {}
+                  },
+                  children: /* @__PURE__ */ jsx722(ChevronDown, {})
+                }
+              )
             }
-          ) })
+          )
         ]
       }
     );
     return /* @__PURE__ */ jsx722(
-      Dropdown,
+      ContextMenu,
       {
-        ref,
-        id,
         trigger,
         isOpen,
         onOpenChange: handleOpenChange,
+        "aria-label": "Change status",
         testID,
         themeMode,
         themeProductContext,
-        children: /* @__PURE__ */ jsx722(
-          Box,
-          {
-            onPress: (e) => {
-              if (onSelect) {
-              }
-            },
-            children
-          }
-        )
+        children
       }
     );
   }