dirk-cfx-react 1.1.65 → 1.1.67

package/dist/index.cjs

@@ -2,7 +2,7 @@
 
 var core = require('@mantine/core');
 var jsxRuntime = require('react/jsx-runtime');
-var React5 = require('react');
+var React6 = require('react');
 var zustand = require('zustand');
 var axios = require('axios');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
@@ -24,7 +24,7 @@ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React6__default = /*#__PURE__*/_interopDefault(React6);
 var axios__default = /*#__PURE__*/_interopDefault(axios);
 var clickSoundUrl__default = /*#__PURE__*/_interopDefault(clickSoundUrl);
 var hoverSoundUrl__default = /*#__PURE__*/_interopDefault(hoverSoundUrl);
@@ -1362,7 +1362,7 @@ async function runFetches() {
   );
 }
 var useAutoFetcher = () => {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (isEnvBrowser()) return;
     runFetches().catch(() => {
     });
@@ -1858,7 +1858,7 @@ function createSkill(defaultSettings) {
   }));
   const useSkill = (xp) => {
     const { settings, levelMap } = useStore4();
-    return React5.useMemo(() => {
+    return React6.useMemo(() => {
       const currentLevel = getLevelFromXP(xp, levelMap, settings);
       const nextLevel = Math.min(currentLevel + 1, settings.maxLevel);
       const currentLevelXP = levelMap[currentLevel.toString()] || 0;
@@ -1946,6 +1946,23 @@ registerInitialFetch("FETCH_ALL_ITEMS", null, {
   useItems.setState(fetchedItems);
 }).catch(() => {
 });
+var useFrameworkGroups = zustand.create(() => ({
+  jobs: [],
+  gangs: [],
+  loaded: false
+}));
+registerInitialFetch("GET_FRAMEWORK_GROUPS", void 0).then((data) => {
+  useFrameworkGroups.setState({
+    jobs: Array.isArray(data?.jobs) ? data.jobs : [],
+    gangs: Array.isArray(data?.gangs) ? data.gangs : [],
+    loaded: true
+  });
+}).catch(() => {
+  useFrameworkGroups.setState({ loaded: true });
+});
+function selectAllGroups(state) {
+  return [...state.jobs, ...state.gangs];
+}
 
 // src/utils/inputMapper.ts
 var INPUT_MAPPER_PRIMARY_OPTIONS = [
@@ -2315,8 +2332,8 @@ var FloatingParticles = ({
   mouseRepelStrength = 50,
   backgroundColor = "transparent"
 }) => {
-  const containerRef = React5.useRef(null);
-  const [particles, setParticles] = React5.useState([]);
+  const containerRef = React6.useRef(null);
+  const [particles, setParticles] = React6.useState([]);
   const mouseX = framerMotion.useMotionValue(0);
   const mouseY = framerMotion.useMotionValue(0);
   const durationMap = {
@@ -2329,7 +2346,7 @@ var FloatingParticles = ({
     const x = Math.sin(seed) * 1e4;
     return x - Math.floor(x);
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!containerRef.current) return;
     const bounds = containerRef.current.getBoundingClientRect();
     const newParticles = [...Array(particleCount)].map((_, i) => {
@@ -2350,7 +2367,7 @@ var FloatingParticles = ({
     });
     setParticles(newParticles);
   }, [particleCount, icons.length, duration.base, duration.variance]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!containerRef.current) return;
     const handleMouseMove = (e) => {
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2399,7 +2416,7 @@ var FloatingParticles = ({
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [mouseX, mouseY, mouseRepelDistance, mouseRepelStrength]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const handleResize = () => {
       if (!containerRef.current) return;
       const bounds = containerRef.current.getBoundingClientRect();
@@ -2835,23 +2852,23 @@ function Segment(props) {
     }
   );
 }
-var NavigationContext = React5.createContext(null);
+var NavigationContext = React6.createContext(null);
 function useNavigation(selector) {
-  const navigation = React5.useContext(NavigationContext);
+  const navigation = React6.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigation must be used within a NavigationProvider");
   }
   return zustand.useStore(navigation, selector);
 }
 function useNavigationStore() {
-  const navigation = React5.useContext(NavigationContext);
+  const navigation = React6.useContext(NavigationContext);
   if (!navigation) {
     throw new Error("useNavigationStore must be used within a NavigationProvider");
   }
   return navigation;
 }
 function NavigationProvider({ children, defaultPage }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     zustand.create(() => ({
       pageId: defaultPage || "home"
     }))
@@ -3208,7 +3225,7 @@ function Modal({
   children
 }) {
   const theme2 = core.useMantineTheme();
-  const pointerDownOnOverlay = React5.useRef(false);
+  const pointerDownOnOverlay = React6.useRef(false);
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -3389,9 +3406,9 @@ function PromptModal(props) {
     }
   );
 }
-var ModalContext = React5.createContext(null);
+var ModalContext = React6.createContext(null);
 function useModal(selector) {
-  const modal = React5.useContext(ModalContext);
+  const modal = React6.useContext(ModalContext);
   if (!modal) {
     throw new Error("useModal must be used within a ModalProvider");
   }
@@ -3419,7 +3436,7 @@ function StoreModal() {
   ) });
 }
 function ModalProvider({ children }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     zustand.create(() => ({
       active: null
     }))
@@ -3430,7 +3447,7 @@ function ModalProvider({ children }) {
   ] });
 }
 function useModalActions() {
-  const modal = React5.useContext(ModalContext);
+  const modal = React6.useContext(ModalContext);
   if (!modal) throw new Error("useModalActions must be used within a ModalProvider");
   const showModal = (openModal) => {
     modal.setState({ active: openModal });
@@ -3450,7 +3467,7 @@ function ConfirmModal({
   zIndex = 200
 }) {
   const theme2 = core.useMantineTheme();
-  const [typed, setTyped] = React5.useState("");
+  const [typed, setTyped] = React6.useState("");
   const canConfirm = !confirmText || typed === confirmText;
   return /* @__PURE__ */ jsxRuntime.jsx(core.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
@@ -3928,38 +3945,38 @@ function createFormStore(initialValues, validationRules, onSubmit) {
     }
   }));
 }
-var FormContext = React5.createContext(null);
+var FormContext = React6.createContext(null);
 function FormProvider({
   initialValues,
   validate,
   onSubmit,
   children
 }) {
-  const storeRef = React5.useRef(
+  const storeRef = React6.useRef(
     createFormStore(initialValues, validate, onSubmit)
   );
   return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: storeRef.current, children });
 }
 function useForm() {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useForm must be used inside <FormProvider>");
   }
   const state = zustand.useStore(store);
-  const changedFields = React5.useMemo(() => {
+  const changedFields = React6.useMemo(() => {
     return collectChangedPaths(state.values, state.initialValues);
   }, [state.values, state.initialValues]);
   return { ...state, changedFields, changedCount: changedFields.length };
 }
 function useFormField(path) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormField must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => getNested(s.values, path));
 }
 function useFormFields(...paths) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormFields must be used inside <FormProvider>");
   }
@@ -3972,14 +3989,14 @@ function useFormFields(...paths) {
   });
 }
 function useFormError(path) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormError must be used inside <FormProvider>");
   }
   return zustand.useStore(store, (s) => s.errors[path]);
 }
 function useFormErrors(...paths) {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormErrors must be used inside <FormProvider>");
   }
@@ -3992,18 +4009,18 @@ function useFormErrors(...paths) {
   });
 }
 function useFormActions() {
-  const store = React5.useContext(FormContext);
+  const store = React6.useContext(FormContext);
   if (!store) {
     throw new Error("useFormActions must be used inside <FormProvider>");
   }
   return store.getState();
 }
 var useNuiEvent = (action, handler) => {
-  const savedHandler = React5.useRef(noop);
-  React5.useEffect(() => {
+  const savedHandler = React6.useRef(noop);
+  React6.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const eventListener = (event) => {
       const { action: eventAction, data } = event.data;
       if (savedHandler.current) {
@@ -4136,8 +4153,8 @@ function ConfigJsonModal({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const form = useForm();
-  const [json, setJson] = React5.useState(() => JSON.stringify(form.values, null, 2));
-  const [error2, setError] = React5.useState(null);
+  const [json, setJson] = React6.useState(() => JSON.stringify(form.values, null, 2));
+  const [error2, setError] = React6.useState(null);
   const handleSave = () => {
     try {
       const parsed = JSON.parse(json);
@@ -4314,14 +4331,14 @@ function ConfigHistoryModal({
   const { getHistory } = getScriptConfigInstance();
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [queryInput, setQueryInput] = React5.useState("");
-  const [pathInput, setPathInput] = React5.useState("");
-  const [adminInput, setAdminInput] = React5.useState("");
-  const [query, setQuery] = React5.useState("");
-  const [path, setPath] = React5.useState("");
-  const [admin, setAdmin] = React5.useState("");
-  const [expandedKey, setExpandedKey] = React5.useState(null);
-  const filters = React5.useMemo(() => ({ query, path, admin }), [query, path, admin]);
+  const [queryInput, setQueryInput] = React6.useState("");
+  const [pathInput, setPathInput] = React6.useState("");
+  const [adminInput, setAdminInput] = React6.useState("");
+  const [query, setQuery] = React6.useState("");
+  const [path, setPath] = React6.useState("");
+  const [admin, setAdmin] = React6.useState("");
+  const [expandedKey, setExpandedKey] = React6.useState(null);
+  const filters = React6.useMemo(() => ({ query, path, admin }), [query, path, admin]);
   const historyQuery = reactQuery.useInfiniteQuery({
     queryKey: ["scriptConfigHistory", filters],
     initialPageParam: 0,
@@ -4415,12 +4432,12 @@ function ConfigPanelInner({
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
   const version = useSettings((s) => s.resourceVersion);
-  const [activeTab, setActiveTab] = React5.useState(navItems[0]?.id ?? "");
-  const firstMountRef = React5.useRef(true);
-  const [jsonOpen, setJsonOpen] = React5.useState(false);
-  const [historyOpen, setHistoryOpen] = React5.useState(false);
-  const [resetOpen, setResetOpen] = React5.useState(false);
-  const [pendingAction, setPendingAction] = React5.useState(null);
+  const [activeTab, setActiveTab] = React6.useState(navItems[0]?.id ?? "");
+  const firstMountRef = React6.useRef(true);
+  const [jsonOpen, setJsonOpen] = React6.useState(false);
+  const [historyOpen, setHistoryOpen] = React6.useState(false);
+  const [resetOpen, setResetOpen] = React6.useState(false);
+  const [pendingAction, setPendingAction] = React6.useState(null);
   const changedCount = form.changedCount ?? 0;
   const isDirty = changedCount > 0;
   const goBack = () => fetchNui("CONFIG_PANEL_BACK");
@@ -4431,7 +4448,7 @@ function ConfigPanelInner({
     }
     goBack();
   };
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     function handleKeyDown(e) {
       if (e.key !== "Escape") return;
       if (isDirty) {
@@ -4654,7 +4671,7 @@ function cloneConfig(value) {
 function ServerOnlyFetcher() {
   const { fetchConfig } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let cancelled = false;
     fetchConfig().then((full) => {
       if (!cancelled && full) reinitialize(full);
@@ -4670,7 +4687,7 @@ var defaultOnClose = () => fetchNui("CLOSE_ADMIN_SECTION");
 function ConfigPanel(props) {
   const { open, onClose = defaultOnClose } = props;
   const { store, updateConfig } = getScriptConfigInstance();
-  const [isSaving, setIsSaving] = React5.useState(false);
+  const [isSaving, setIsSaving] = React6.useState(false);
   if (!open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(reactQuery.QueryClientProvider, { client: configPanelQueryClient, children: /* @__PURE__ */ jsxRuntime.jsxs(
     FormProvider,
@@ -4709,9 +4726,9 @@ function ConfigPanel(props) {
   ) });
 }
 function LazyImage({ src, alt, style }) {
-  const [visible, setVisible] = React5.useState(false);
-  const ref = React5.useRef(null);
-  React5.useEffect(() => {
+  const [visible, setVisible] = React6.useState(false);
+  const ref = React6.useRef(null);
+  React6.useEffect(() => {
     const observer = new IntersectionObserver(([entry]) => {
       if (entry.isIntersecting) {
         setVisible(true);
@@ -4725,7 +4742,7 @@ function LazyImage({ src, alt, style }) {
 }
 function SelectItem(props) {
   const invItems = useItems();
-  const formattedItems = React5.useMemo(() => {
+  const formattedItems = React6.useMemo(() => {
     const seen = /* @__PURE__ */ new Set();
     return useItemsList(props.excludeItemNames ?? []).filter((item) => {
       if (seen.has(item.name)) return false;
@@ -4747,6 +4764,7 @@ function SelectItem(props) {
       data: formattedItems,
       allowDeselect: false,
       searchable: true,
+      comboboxProps: { withinPortal: true, zIndex: 2e3 },
       leftSectionWidth: "4vh",
       leftSection: props.value ? /* @__PURE__ */ jsxRuntime.jsx(
         core.Image,
@@ -4792,9 +4810,9 @@ function PositionPicker(props) {
   } = props;
   const theme2 = core.useMantineTheme();
   const color = theme2.colors[theme2.primaryColor][5];
-  const [previewing, setPreviewing] = React5.useState(false);
-  const previewingRef = React5.useRef(false);
-  React5.useEffect(() => {
+  const [previewing, setPreviewing] = React6.useState(false);
+  const previewingRef = React6.useRef(false);
+  React6.useEffect(() => {
     return () => {
       if (previewingRef.current) {
         fetchNui(stopPreviewEvent, { relativeTo }).catch(() => {
@@ -4990,9 +5008,97 @@ function PickerButton({
     }
   ) });
 }
-var KeyBindContext = React5.createContext(null);
+var GroupSelectContext = React6.createContext(null);
+function GroupSelect({
+  value,
+  onChange,
+  type,
+  children,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(GroupSelectContext.Provider, { value: { value, onChange, type }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.4vh", ...style }, children }) });
+}
+function filterByType(jobs, gangs, type) {
+  if (type === "job") return jobs;
+  if (type === "gang") return gangs;
+  return [...jobs, ...gangs];
+}
+function GroupName(props) {
+  const ctx = React6.useContext(GroupSelectContext);
+  const jobs = useFrameworkGroups((s) => s.jobs);
+  const gangs = useFrameworkGroups((s) => s.gangs);
+  const inCompound = ctx !== null;
+  const currentValue = inCompound ? ctx.value.name : props.value;
+  const filterType = inCompound ? ctx.type : props.type;
+  const list = filterByType(jobs, gangs, filterType);
+  const data = filterType === void 0 ? [
+    { group: locale("Jobs") || "Jobs", items: jobs.map((g) => ({ value: g.name, label: g.label })) },
+    { group: locale("Gangs") || "Gangs", items: gangs.map((g) => ({ value: g.name, label: g.label })) }
+  ] : list.map((g) => ({ value: g.name, label: g.label }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: props.label,
+      description: props.description,
+      placeholder: props.placeholder ?? (locale("SelectGroup") || "Select\u2026"),
+      size: props.size ?? "xs",
+      disabled: props.disabled,
+      style: props.style,
+      data,
+      value: currentValue ?? null,
+      searchable: true,
+      onChange: (v) => {
+        const name = v ?? "";
+        if (inCompound) {
+          ctx.onChange({ name: name || void 0, grade: void 0 });
+        } else if (props.onChange) {
+          props.onChange(name);
+        }
+      },
+      allowDeselect: false
+    }
+  );
+}
+function GroupRank(props) {
+  const ctx = React6.useContext(GroupSelectContext);
+  if (ctx === null) {
+    throw new Error("<GroupRank> must be a child of <GroupSelect>");
+  }
+  const jobs = useFrameworkGroups((s) => s.jobs);
+  const gangs = useFrameworkGroups((s) => s.gangs);
+  const all = [...jobs, ...gangs];
+  const selectedGroup = all.find((g) => g.name === ctx.value.name) ?? null;
+  const grades = selectedGroup?.grades ?? [];
+  const data = grades.map((g) => ({
+    value: String(g.grade),
+    label: `${g.grade} \u2014 ${g.label || g.name}${g.isBoss ? " (boss)" : ""}`
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Select,
+    {
+      label: props.label,
+      description: props.description,
+      placeholder: props.placeholder ?? (locale("SelectGrade") || "Select grade\u2026"),
+      size: props.size ?? "xs",
+      style: props.style,
+      data,
+      value: ctx.value.grade != null ? String(ctx.value.grade) : null,
+      onChange: (v) => {
+        ctx.onChange({
+          ...ctx.value,
+          grade: v != null ? Number(v) : void 0
+        });
+      },
+      disabled: !selectedGroup || grades.length === 0,
+      allowDeselect: false
+    }
+  );
+}
+GroupSelect.Name = GroupName;
+GroupSelect.Rank = GroupRank;
+var KeyBindContext = React6.createContext(null);
 function useKeyBindContext() {
-  const ctx = React5.useContext(KeyBindContext);
+  const ctx = React6.useContext(KeyBindContext);
   if (!ctx) {
     throw new Error("FiveMKeyBindInput.* must be used inside <FiveMKeyBindInput>");
   }
@@ -5071,7 +5177,7 @@ function AsyncSaveButton({
   style
 }) {
   const theme2 = core.useMantineTheme();
-  const [state, setState] = React5.useState("idle");
+  const [state, setState] = React6.useState("idle");
   const handleClick = async () => {
     if (state === "pending") return;
     setState("pending");
@@ -5138,10 +5244,10 @@ function TestBed({
   disablePersistence = false,
   title = "TestBed"
 }) {
-  const [open, setOpen] = React5.useState(false);
-  const itemsRef = React5.useRef(items);
+  const [open, setOpen] = React6.useState(false);
+  const itemsRef = React6.useRef(items);
   itemsRef.current = items;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!isEnvBrowser() || disablePersistence) return;
     const persisted = loadPersistedState(storageKey);
     itemsRef.current.forEach((item) => {
@@ -5467,7 +5573,7 @@ function mergeMantineThemeSafe(base, custom, override) {
     }
   };
 }
-var DirkErrorBoundary = class extends React5__default.default.Component {
+var DirkErrorBoundary = class extends React6__default.default.Component {
   constructor() {
     super(...arguments);
     __publicField(this, "state", { error: null, stack: void 0 });
@@ -5531,12 +5637,12 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     game
   } = useSettings();
   localeStore((s) => s.locales);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     useSettings.setState({
       overideResourceName
     });
   }, [overideResourceName]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     fetchNui("NUI_READY").catch(() => {
     });
     Promise.all([
@@ -5555,7 +5661,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     if (!data || typeof data !== "object") return;
     useSettings.setState(data);
   });
-  const mergedTheme = React5.useMemo(
+  const mergedTheme = React6.useMemo(
     () => mergeMantineThemeSafe(
       { ...theme_default, primaryColor, primaryShade },
       customTheme,
@@ -5563,7 +5669,7 @@ function DirkProvider({ children, overideResourceName, themeOverride }) {
     ),
     [primaryColor, primaryShade, customTheme, themeOverride]
   );
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     document.body.style.fontFamily = game === "rdr3" ? '"Red Dead", sans-serif' : '"Akrobat Regular", sans-serif';
   }, [game]);
   const content = isEnvBrowser() ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -5591,6 +5697,9 @@ exports.DirkProvider = DirkProvider;
 exports.FiveMKeyBindInput = FiveMKeyBindInput;
 exports.FloatingParticles = FloatingParticles;
 exports.FormProvider = FormProvider;
+exports.GroupName = GroupName;
+exports.GroupRank = GroupRank;
+exports.GroupSelect = GroupSelect;
 exports.INPUT_MAPPER_KEYS_BY_PRIMARY = INPUT_MAPPER_KEYS_BY_PRIMARY;
 exports.INPUT_MAPPER_PRIMARY_OPTIONS = INPUT_MAPPER_PRIMARY_OPTIONS;
 exports.InfoBox = InfoBox;
@@ -5642,6 +5751,7 @@ exports.openLink = openLink;
 exports.registerInitialFetch = registerInitialFetch;
 exports.registerInitialLuaTableFetch = registerInitialLuaTableFetch;
 exports.runFetches = runFetches;
+exports.selectAllGroups = selectAllGroups;
 exports.splitFAString = splitFAString;
 exports.updatePresignedURL = updatePresignedURL;
 exports.uploadImage = uploadImage;
@@ -5653,6 +5763,7 @@ exports.useFormError = useFormError;
 exports.useFormErrors = useFormErrors;
 exports.useFormField = useFormField;
 exports.useFormFields = useFormFields;
+exports.useFrameworkGroups = useFrameworkGroups;
 exports.useItems = useItems;
 exports.useItemsList = useItemsList;
 exports.useModal = useModal;