dirk-cfx-react 1.1.83 → 1.1.85

package/dist/components/index.js

@@ -4,7 +4,7 @@ import { createContext, useContext, useRef, useState, useEffect, useCallback, us
 import { create, useStore, createStore } from 'zustand';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
-import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, ExternalLink, Search, Filter, User } from 'lucide-react';
+import { Info, X, AlertTriangle, Trash2, RefreshCw, ChevronDown, Check, Copy, MapPin, Crosshair, EyeOff, Eye, RotateCcw, FlaskConical, ChevronUp, Palette, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
 import { notifications } from '@mantine/notifications';
@@ -3084,11 +3084,11 @@ function ConfirmModal({
                     placeholder: confirmText,
                     value: typed,
                     onChange: (e) => setTyped(e.currentTarget.value),
-                    styles: (t) => ({
+                    styles: (t2) => ({
                       input: {
-                        backgroundColor: alpha(t.colors.dark[7], 0.5),
+                        backgroundColor: alpha(t2.colors.dark[7], 0.5),
                         border: `0.1vh solid ${alpha(
-                          typed === confirmText ? "#ef4444" : t.colors.dark[5],
+                          typed === confirmText ? "#ef4444" : t2.colors.dark[5],
                           0.5
                         )}`,
                         color: "rgba(255,255,255,0.85)",
@@ -6197,6 +6197,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");
@@ -6220,30 +6224,8 @@ function RoleOption({ role }) {
     /* @__PURE__ */ jsx(Text, { size: "xs", c: "rgba(255,255,255,0.9)", children: role.name })
   ] });
 }
-function NotConfiguredBanner({ label }) {
-  const theme = useMantineTheme();
-  return /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "xxs", children: [
-    label && /* @__PURE__ */ jsx(Text, { ff: "Akrobat Bold", size: "xxs", tt: "uppercase", lts: "0.05em", c: "rgba(255,255,255,0.55)", children: label }),
-    /* @__PURE__ */ jsxs(
-      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__ */ jsx(ExternalLink, { size: "1.4vh", color: "rgba(255,255,255,0.4)" }),
-          /* @__PURE__ */ jsx(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] = useState(null);
@@ -6283,7 +6265,53 @@ function DiscordRoleSelect(props) {
     return map;
   }, [roles]);
   if (errorCode === "NotConfigured") {
-    return /* @__PURE__ */ 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__ */ jsx(AlertTriangle, { size: "1.2vh", color: NOT_CONFIGURED_TINT.replace(/0\.35\)$/, "0.85)") });
+    if (props.multi) {
+      return /* @__PURE__ */ jsx(
+        MultiSelect,
+        {
+          label,
+          size,
+          placeholder: notConfiguredPlaceholder,
+          data: [],
+          value: [],
+          onChange: () => {
+          },
+          disabled: true,
+          rightSection: warnIcon,
+          style,
+          styles: notConfiguredStyles
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        label,
+        size,
+        placeholder: notConfiguredPlaceholder,
+        data: [],
+        value: null,
+        onChange: () => {
+        },
+        disabled: true,
+        rightSection: warnIcon,
+        style,
+        styles: notConfiguredStyles
+      }
+    );
   }
   const data = (roles ?? []).map((r) => ({
     value: r.id,
@@ -6298,9 +6326,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__ */ jsx(RefreshCw, { size: "1.2vh" })
     }
   );
@@ -6310,7 +6345,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),
@@ -6319,9 +6354,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")
       }
     );
   }
@@ -6330,7 +6366,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),
@@ -6339,9 +6375,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")
     }
   );
 }