dirk-cfx-react 1.1.83 → 1.1.85

package/dist/components/index.cjs

@@ -3091,11 +3091,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t) => ({
+                    styles: (t2) => ({
                       input: {
-                        backgroundColor: core.alpha(t.colors.dark[7], 0.5),
+                        backgroundColor: core.alpha(t2.colors.dark[7], 0.5),
                         border: `0.1vh solid ${core.alpha(
-                          typed === confirmText ? "#ef4444" : t.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -6204,6 +6204,10 @@ function ScenarioSelect({
     }
   );
 }
+var t = (key, fallback) => {
+  const v = locale(key);
+  return v === key ? fallback : v;
+};
 function decimalToHex(color) {
   if (!color || color === 0) return null;
   return "#" + color.toString(16).padStart(6, "0");
@@ -6227,30 +6231,8 @@ function RoleOption({ role }) {
     /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "rgba(255,255,255,0.9)", children: role.name })
   ] });
 }
-function NotConfiguredBanner({ label }) {
-  const theme = core.useMantineTheme();
-  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.55)", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      core.Flex,
-      {
-        align: "center",
-        gap: "xs",
-        px: "xs",
-        py: "xxs",
-        style: {
-          background: "rgba(0,0,0,0.3)",
-          border: "0.1vh dashed rgba(255,255,255,0.12)",
-          borderRadius: theme.radius.xs
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { size: "1.4vh", color: "rgba(255,255,255,0.4)" }),
-          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.55)", style: { flex: 1 }, children: locale("DiscordNotConfigured") || "Discord bot not configured \u2014 run /dirk_lib and set a bot token + guild ID." })
-        ]
-      }
-    )
-  ] });
-}
+var NOT_CONFIGURED_TINT = "rgba(255,184,0,0.35)";
+var NOT_CONFIGURED_FILL = "rgba(255,184,0,0.05)";
 function DiscordRoleSelect(props) {
   const { endpoint, label, size = "xs", placeholder, disabled, style, styles } = props;
   const [roles, setRoles] = react.useState(null);
@@ -6290,7 +6272,53 @@ function DiscordRoleSelect(props) {
     return map;
   }, [roles]);
   if (errorCode === "NotConfigured") {
-    return /* @__PURE__ */ jsxRuntime.jsx(NotConfiguredBanner, { label });
+    const notConfiguredPlaceholder = t(
+      "DiscordNotConfigured",
+      "Not configured \u2014 set in /dirk_lib"
+    );
+    const notConfiguredStyles = {
+      ...styles,
+      input: {
+        ...styles?.input ?? {},
+        borderColor: NOT_CONFIGURED_TINT,
+        backgroundColor: NOT_CONFIGURED_FILL
+      }
+    };
+    const warnIcon = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { size: "1.2vh", color: NOT_CONFIGURED_TINT.replace(/0\.35\)$/, "0.85)") });
+    if (props.multi) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        core.MultiSelect,
+        {
+          label,
+          size,
+          placeholder: notConfiguredPlaceholder,
+          data: [],
+          value: [],
+          onChange: () => {
+          },
+          disabled: true,
+          rightSection: warnIcon,
+          style,
+          styles: notConfiguredStyles
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Select,
+      {
+        label,
+        size,
+        placeholder: notConfiguredPlaceholder,
+        data: [],
+        value: null,
+        onChange: () => {
+        },
+        disabled: true,
+        rightSection: warnIcon,
+        style,
+        styles: notConfiguredStyles
+      }
+    );
   }
   const data = (roles ?? []).map((r) => ({
     value: r.id,
@@ -6305,9 +6333,16 @@ function DiscordRoleSelect(props) {
     {
       size: "xs",
       variant: "subtle",
-      onClick: refresh,
-      title: locale("Refresh") || "Refresh",
+      onMouseDown: (e) => {
+        e.stopPropagation();
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        refresh();
+      },
+      title: t("Refresh", "Refresh"),
       loading,
+      "aria-label": t("Refresh", "Refresh"),
       children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: "1.2vh" })
     }
   );
@@ -6317,7 +6352,7 @@ function DiscordRoleSelect(props) {
       {
         label,
         size,
-        placeholder: placeholder || locale("PickRoles") || "Pick roles...",
+        placeholder: placeholder || t("PickRoles", "Pick roles..."),
         data,
         value: props.value || [],
         onChange: (ids) => props.onChange(ids),
@@ -6326,9 +6361,10 @@ function DiscordRoleSelect(props) {
         clearable: true,
         disabled: disabled || loading && !roles,
         rightSection: refreshButton,
+        rightSectionPointerEvents: "all",
         style,
         styles,
-        nothingFoundMessage: errorCode ? `${locale("Error") || "Error"} (${errorCode})` : locale("NoRoles") || "No roles found"
+        nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
       }
     );
   }
@@ -6337,7 +6373,7 @@ function DiscordRoleSelect(props) {
     {
       label,
       size,
-      placeholder: placeholder || locale("PickRole") || "Pick a role...",
+      placeholder: placeholder || t("PickRole", "Pick a role..."),
       data,
       value: props.value || null,
       onChange: (id) => props.onChange(id),
@@ -6346,9 +6382,10 @@ function DiscordRoleSelect(props) {
       clearable: true,
       disabled: disabled || loading && !roles,
       rightSection: refreshButton,
+      rightSectionPointerEvents: "all",
       style,
       styles,
-      nothingFoundMessage: errorCode ? `${locale("Error") || "Error"} (${errorCode})` : locale("NoRoles") || "No roles found"
+      nothingFoundMessage: errorCode ? `${t("Error", "Error")} (${errorCode})` : t("NoRoles", "No roles found")
     }
   );
 }