@bgord/ui 0.8.2 → 0.8.4

package/dist/components/dialog.js

@@ -16,5 +16,5 @@ export function Dialog(props) {
     useShortcuts({ Escape: locked ? noop : dialog.disable });
     useScrollLock(props.on);
     useClickOutside(ref, locked ? noop : dialog.disable);
-    return (_jsx("dialog", { ref: ref, tabIndex: 0, "aria-modal": "true", "data-disp": props.on ? "flex" : "none", "data-dir": "column", "data-mx": "auto", "data-p": "5", "data-position": "fixed", "data-z": "2", "data-bg": "neutral-900", "data-br": "xs", "data-backdrop": "stronger", "data-animation": "grow-fade-in", ...rest }));
+    return (_jsx("dialog", { ref: ref, tabIndex: 0, "aria-modal": "true", "data-disp": props.on ? "flex" : "none", "data-dir": "column", "data-mx": "auto", "data-p": "5", "data-position": "fixed", "data-z": "2", "data-bg": "neutral-900", "data-br": "xs", "data-backdrop": "stronger", "data-animation": "grow-fade-in", ...dialog.props.target, ...rest }));
 }

package/dist/hooks/index.d.ts

@@ -7,6 +7,7 @@ export * from "./use-hover";
 export * from "./use-meta-enter-submit";
 export * from "./use-mutation";
 export * from "./use-number-field";
+export * from "./use-online-status";
 export * from "./use-scroll-lock";
 export * from "./use-shortcuts";
 export * from "./use-text-field";

package/dist/hooks/index.js

@@ -7,6 +7,7 @@ export * from "./use-hover";
 export * from "./use-meta-enter-submit";
 export * from "./use-mutation";
 export * from "./use-number-field";
+export * from "./use-online-status";
 export * from "./use-scroll-lock";
 export * from "./use-shortcuts";
 export * from "./use-text-field";

package/dist/hooks/use-mutation.d.ts

@@ -5,10 +5,13 @@ export declare enum MutationState {
     done = "done"
 }
 type MutationErrorType = unknown;
+type MutationContextType = {
+    form?: HTMLFormElement;
+};
 type UseMutationOptions = {
     perform: () => Promise<Response>;
-    onSuccess?: (response: Response) => void | Promise<void>;
-    onError?: (error: MutationErrorType) => void | Promise<void>;
+    onSuccess?: (response: Response, context: MutationContextType) => void | Promise<void>;
+    onError?: (error: MutationErrorType, context: MutationContextType) => void | Promise<void>;
     autoResetDelayMs?: number;
 };
 type UseMutationReturnType = {
@@ -18,7 +21,7 @@ type UseMutationReturnType = {
     isLoading: boolean;
     isError: boolean;
     isDone: boolean;
-    mutate: () => Promise<Response | undefined>;
+    mutate: (formElement?: HTMLFormElement) => Promise<Response | undefined>;
     handleSubmit: React.FormEventHandler<HTMLFormElement>;
     reset: () => void;
 };

package/dist/hooks/use-mutation.js

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useReducer } from "react";
 export var MutationState;
 (function (MutationState) {
     MutationState["idle"] = "idle";
@@ -6,52 +6,55 @@ export var MutationState;
     MutationState["error"] = "error";
     MutationState["done"] = "done";
 })(MutationState || (MutationState = {}));
+function mutationReducer(_state, action) {
+    if (action.type === "START")
+        return { state: MutationState.loading, error: null };
+    if (action.type === "ERROR")
+        return { state: MutationState.error, error: action.error };
+    if (action.type === "DONE")
+        return { state: MutationState.done, error: null };
+    if (action.type === "RESET")
+        return { state: MutationState.idle, error: null };
+    throw new Error("Unknown useMutation action type");
+}
 export function useMutation(options) {
-    const [state, setState] = useState(MutationState.idle);
-    const [error, setError] = useState(null);
-    const reset = useCallback(() => {
-        setError(null);
-        setState(MutationState.idle);
-    }, []);
-    const mutate = useCallback(async () => {
-        if (state === MutationState.loading)
+    const [mutation, dispatch] = useReducer(mutationReducer, { state: MutationState.idle, error: null });
+    const mutate = async (form) => {
+        if (mutation.state === MutationState.loading)
             return;
-        setError(null);
-        setState(MutationState.loading);
+        dispatch({ type: "START" });
         try {
             const response = await options.perform();
             if (!response.ok) {
-                setState(MutationState.error);
-                setError(null);
-                await options.onError?.(null);
+                dispatch({ type: "ERROR", error: null });
+                await options.onError?.(null, { form: form });
                 return;
             }
-            setState(MutationState.done);
-            await options.onSuccess?.(response);
+            dispatch({ type: "DONE" });
+            await options.onSuccess?.(response, { form: form });
             if (options.autoResetDelayMs) {
-                setTimeout(() => setState(MutationState.idle), options.autoResetDelayMs);
+                setTimeout(() => dispatch({ type: "RESET" }), options.autoResetDelayMs);
             }
             return response;
         }
         catch (error) {
-            setState(MutationState.error);
-            setError(error);
-            await options.onError?.(error);
+            dispatch({ type: "ERROR", error });
+            await options.onError?.(error, { form: form });
         }
-    }, [state, options]);
-    const handleSubmit = useCallback(async (event) => {
+    };
+    const handleSubmit = async (event) => {
         event.preventDefault();
-        await mutate();
-    }, [mutate]);
+        await mutate(event.currentTarget);
+    };
     return {
-        state,
-        error,
-        isIdle: state === MutationState.idle,
-        isLoading: state === MutationState.loading,
-        isError: state === MutationState.error,
-        isDone: state === MutationState.done,
+        state: mutation.state,
+        error: mutation.error,
+        isIdle: mutation.state === MutationState.idle,
+        isLoading: mutation.state === MutationState.loading,
+        isError: mutation.state === MutationState.error,
+        isDone: mutation.state === MutationState.done,
         mutate,
         handleSubmit,
-        reset,
+        reset: () => dispatch({ type: "RESET" }),
     };
 }

package/dist/hooks/use-online-status.d.ts

@@ -0,0 +1,5 @@
+export declare enum OnlineStatus {
+    online = "online",
+    offline = "offline"
+}
+export declare function useOnlineStatus(): OnlineStatus;

package/dist/hooks/use-online-status.js

@@ -0,0 +1,28 @@
+import { useSyncExternalStore } from "react";
+export var OnlineStatus;
+(function (OnlineStatus) {
+    OnlineStatus["online"] = "online";
+    OnlineStatus["offline"] = "offline";
+})(OnlineStatus || (OnlineStatus = {}));
+const OnlineStatusStore = {
+    subscribe: (callback) => {
+        if (typeof window === "undefined")
+            return () => { };
+        window.addEventListener("online", callback);
+        window.addEventListener("offline", callback);
+        return () => {
+            window.removeEventListener("online", callback);
+            window.removeEventListener("offline", callback);
+        };
+    },
+    getSnapshot: () => {
+        if (typeof navigator === "undefined")
+            return OnlineStatus.online;
+        return navigator.onLine ? OnlineStatus.online : OnlineStatus.offline;
+    },
+    getServerSnapshot: () => OnlineStatus.online,
+};
+export function useOnlineStatus() {
+    const status = useSyncExternalStore(OnlineStatusStore.subscribe, OnlineStatusStore.getSnapshot, OnlineStatusStore.getServerSnapshot);
+    return status;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bgord/ui",
-  "version": "0.8.2",
+  "version": "0.8.4",
   "type": "module",
   "exports": {
     ".": {
@@ -23,7 +23,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.2",
+    "@biomejs/biome": "2.3.4",
     "@commitlint/cli": "20.1.0",
     "@commitlint/config-conventional": "20.0.0",
     "@happy-dom/global-registrator": "20.0.10",
@@ -35,8 +35,8 @@
     "@types/js-cookie": "3.0.6",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "cspell": "9.2.2",
-    "knip": "5.66.4",
+    "cspell": "9.3.0",
+    "knip": "5.68.0",
     "lefthook": "2.0.2",
     "only-allow": "1.2.1",
     "shellcheck": "4.1.0"

package/readme.md

@@ -36,6 +36,7 @@ src/
 │   ├── use-meta-enter-submit.ts
 │   ├── use-mutation.ts
 │   ├── use-number-field.ts
+│   ├── use-online-status.ts
 │   ├── use-scroll-lock.ts
 │   ├── use-shortcuts.ts
 │   ├── use-text-field.ts