@oneplatformdev/hooks 0.0.1-beta.7 → 0.1.1-1

package/useReadLocalStorage/useReadLocalStorage.mjs

@@ -1,48 +0,0 @@
-import { useCallback as a, useState as S, useEffect as w } from "react";
-import { useEventListener as d } from "../useEventListener/useEventListener.mjs";
-const c = typeof window > "u";
-function m(e, t = {}) {
-  let { initializeWithValue: o = !0 } = t;
-  c && (o = !1);
-  const l = a(
-    (r) => {
-      if (t.deserializer)
-        return t.deserializer(r);
-      if (r === "undefined")
-        return;
-      let s;
-      try {
-        s = JSON.parse(r);
-      } catch (g) {
-        return console.error("Error parsing JSON:", g), null;
-      }
-      return s;
-    },
-    [t]
-  ), n = a(() => {
-    if (c)
-      return null;
-    try {
-      const r = window.localStorage.getItem(e);
-      return r ? l(r) : null;
-    } catch (r) {
-      return console.warn(`Error reading localStorage key “${e}”:`, r), null;
-    }
-  }, [e, l]), [f, u] = S(() => {
-    if (o)
-      return n();
-  });
-  w(() => {
-    u(n());
-  }, [e]);
-  const i = a(
-    (r) => {
-      r.key && r.key !== e || u(n());
-    },
-    [e, n]
-  );
-  return d("storage", i), d("local-storage", i), f;
-}
-export {
-  m as useReadLocalStorage
-};

package/useResizeObserver/index.d.ts

@@ -1 +0,0 @@
-export * from './useResizeObserver';

package/useResizeObserver/index.mjs

@@ -1,4 +0,0 @@
-import { useResizeObserver as s } from "./useResizeObserver.mjs";
-export {
-  s as useResizeObserver
-};

package/useResizeObserver/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useResizeObserver/useResizeObserver.d.ts

@@ -1,44 +0,0 @@
-import { RefObject } from 'react';
-
-/** The size of the observed element. */
-type Size = {
-    /** The width of the observed element. */
-    width: number | undefined;
-    /** The height of the observed element. */
-    height: number | undefined;
-};
-/** The options for the ResizeObserver. */
-type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
-    /** The ref of the element to observe. */
-    ref: RefObject<T>;
-    /**
-     * When using `onResize`, the hook doesn't re-render on element size changes; it delegates handling to the provided callback.
-     * @default undefined
-     */
-    onResize?: (size: Size) => void;
-    /**
-     * The box model to use for the ResizeObserver.
-     * @default 'content-box'
-     */
-    box?: 'border-box' | 'content-box' | 'device-pixel-content-box';
-};
-/**
- * Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
- * @template T - The type of the element to observe.
- * @param {UseResizeObserverOptions<T>} options - The options for the ResizeObserver.
- * @returns {Size} - The size of the observed element.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-resize-observer)
- * @example
- * ```tsx
- * const myRef = useRef(null);
- * const { width = 0, height = 0 } = useResizeObserver({
- *   ref: myRef,
- *   box: 'content-box',
- * });
- *
- * <div ref={myRef}>Hello, world!</div>
- * ```
- */
-export declare function useResizeObserver<T extends HTMLElement = HTMLElement>(options: UseResizeObserverOptions<T>): Size;
-export {};

package/useResizeObserver/useResizeObserver.mjs

@@ -1,31 +0,0 @@
-import { useState as x, useRef as z, useEffect as v } from "react";
-import { useIsMounted as l } from "../useIsMounted/useIsMounted.mjs";
-const w = {
-  width: void 0,
-  height: void 0
-};
-function B(n) {
-  const { ref: e, box: t = "content-box" } = n, [{ width: a, height: b }, g] = x(w), s = l(), i = z({ ...w }), r = z(void 0);
-  return r.current = n.onResize, v(() => {
-    if (!e.current || typeof window > "u" || !("ResizeObserver" in window)) return;
-    const u = new ResizeObserver(([d]) => {
-      const h = t === "border-box" ? "borderBoxSize" : t === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize", o = S(d, h, "inlineSize"), c = S(d, h, "blockSize");
-      if (i.current.width !== o || i.current.height !== c) {
-        const f = { width: o, height: c };
-        i.current.width = o, i.current.height = c, r.current ? r.current(f) : s() && g(f);
-      }
-    });
-    return u.observe(e.current, { box: t }), () => {
-      u.disconnect();
-    };
-  }, [t, e, s]), { width: a, height: b };
-}
-function S(n, e, t) {
-  return n[e] ? Array.isArray(n[e]) ? n[e][0][t] : (
-    // @ts-ignore Support Firefox's non-standard behavior
-    n[e][t]
-  ) : e === "contentBoxSize" ? n.contentRect[t === "inlineSize" ? "width" : "height"] : void 0;
-}
-export {
-  B as useResizeObserver
-};

package/useScreen/index.d.ts

@@ -1 +0,0 @@
-export * from './useScreen';

package/useScreen/index.mjs

@@ -1,4 +0,0 @@
-import { useScreen as o } from "./useScreen.mjs";
-export {
-  o as useScreen
-};

package/useScreen/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useScreen/useScreen.d.ts

@@ -1,19 +0,0 @@
-/**
- * The hooks options.
- * @template InitializeWithValue - If `true` (default), the hook will initialize reading the screen dimensions. In SSR, you should set it to `false`, returning `undefined` initially.
- */
-type UseScreenOptions<InitializeWithValue extends boolean | undefined> = {
-    /**
-     * If `true` (default), the hook will initialize reading the screen dimensions. In SSR, you should set it to `false`, returning `undefined` initially.
-     * @default true
-     */
-    initializeWithValue: InitializeWithValue;
-    /**
-     * The delay in milliseconds before the state is updated (disabled by default for retro-compatibility).
-     * @default undefined
-     */
-    debounceDelay?: number;
-};
-export declare function useScreen(options: UseScreenOptions<false>): Screen | undefined;
-export declare function useScreen(options?: Partial<UseScreenOptions<true>>): Screen;
-export {};

package/useScreen/useScreen.mjs

@@ -1,48 +0,0 @@
-import { useState as w } from "react";
-import { useDebounceCallback as b } from "../useDebounceCallback/useDebounceCallback.mjs";
-import { useEventListener as D } from "../useEventListener/useEventListener.mjs";
-import { useIsomorphicLayoutEffect as y } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-const c = typeof window > "u";
-function x(e = {}) {
-  let { initializeWithValue: n = !0 } = e;
-  c && (n = !1);
-  const t = () => {
-    if (!c)
-      return window.screen;
-  }, [u, r] = w(() => {
-    if (n)
-      return t();
-  }), s = b(
-    r,
-    e.debounceDelay
-  );
-  function i() {
-    const o = t(), f = e.debounceDelay ? s : r;
-    if (o) {
-      const {
-        width: a,
-        height: d,
-        availHeight: l,
-        availWidth: S,
-        colorDepth: h,
-        orientation: m,
-        pixelDepth: p
-      } = o;
-      f({
-        width: a,
-        height: d,
-        availHeight: l,
-        availWidth: S,
-        colorDepth: h,
-        orientation: m,
-        pixelDepth: p
-      });
-    }
-  }
-  return D("resize", i), y(() => {
-    i();
-  }, []), u;
-}
-export {
-  x as useScreen
-};

package/useScript/index.d.ts

@@ -1 +0,0 @@
-export * from './useScript';

package/useScript/index.mjs

@@ -1,4 +0,0 @@
-import { useScript as o } from "./useScript.mjs";
-export {
-  o as useScript
-};

package/useScript/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useScript/useScript.d.ts

@@ -1,23 +0,0 @@
-/** Script loading status. */
-type UseScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
-/** Hook options. */
-type UseScriptOptions = {
-    /** If `true`, prevents the script from being loaded (optional). */
-    shouldPreventLoad?: boolean;
-    /** If `true`, removes the script from the DOM when the component unmounts (optional). */
-    removeOnUnmount?: boolean;
-    /** Script's `id` (optional). */
-    id?: string;
-};
-/**
- * Custom hook that dynamically loads scripts and tracking their loading status.
- * @param {string | null} src - The source URL of the script to load. Set to `null` or omit to prevent loading (optional).
- * @param {UseScriptOptions} [options] - Additional options for controlling script loading (optional).
- * @returns {UseScriptStatus} The status of the script loading, which can be one of 'idle', 'loading', 'ready', or 'error'.
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-script)
- * @example
- * const scriptStatus = useScript('https://example.com/script.js', { removeOnUnmount: true });
- * // Access the status of the script loading (e.g., 'loading', 'ready', 'error').
- */
-export declare function useScript(src: string | null, options?: UseScriptOptions): UseScriptStatus;
-export {};

package/useScript/useScript.mjs

@@ -1,45 +0,0 @@
-import { useState as S, useEffect as s } from "react";
-const c = /* @__PURE__ */ new Map();
-function E(r) {
-  const e = document.querySelector(
-    `script[src="${r}"]`
-  ), l = e == null ? void 0 : e.getAttribute("data-status");
-  return {
-    node: e,
-    status: l
-  };
-}
-function L(r, e) {
-  const [l, v] = S(() => !r || e != null && e.shouldPreventLoad ? "idle" : typeof window > "u" ? "loading" : c.get(r) ?? "loading");
-  return s(() => {
-    if (!r || e != null && e.shouldPreventLoad)
-      return;
-    const d = c.get(r);
-    if (d === "ready" || d === "error") {
-      v(d);
-      return;
-    }
-    const f = E(r);
-    let t = f.node;
-    if (t)
-      v(f.status ?? d ?? "loading");
-    else {
-      t = document.createElement("script"), t.src = r, t.async = !0, e != null && e.id && (t.id = e.id), t.setAttribute("data-status", "loading"), document.body.appendChild(t);
-      const u = (n) => {
-        const m = n.type === "load" ? "ready" : "error";
-        t == null || t.setAttribute("data-status", m);
-      };
-      t.addEventListener("load", u), t.addEventListener("error", u);
-    }
-    const a = (u) => {
-      const n = u.type === "load" ? "ready" : "error";
-      v(n), c.set(r, n);
-    };
-    return t.addEventListener("load", a), t.addEventListener("error", a), () => {
-      t && (t.removeEventListener("load", a), t.removeEventListener("error", a)), t && (e != null && e.removeOnUnmount) && (t.remove(), c.delete(r));
-    };
-  }, [r, e == null ? void 0 : e.shouldPreventLoad, e == null ? void 0 : e.removeOnUnmount, e == null ? void 0 : e.id]), l;
-}
-export {
-  L as useScript
-};

package/useScrollLock/index.d.ts

@@ -1 +0,0 @@
-export * from './useScrollLock';

package/useScrollLock/index.mjs

@@ -1,4 +0,0 @@
-import { useScrollLock as c } from "./useScrollLock.mjs";
-export {
-  c as useScrollLock
-};

package/useScrollLock/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useScrollLock/useScrollLock.d.ts

@@ -1,53 +0,0 @@
-/** Hook options. */
-type UseScrollLockOptions = {
-    /**
-     * Whether to lock the scroll initially.
-     * @default true
-     */
-    autoLock?: boolean;
-    /**
-     * The target element to lock the scroll (default is the body element).
-     * @default document.body
-     */
-    lockTarget?: HTMLElement | string;
-    /**
-     * Whether to prevent width reflow when locking the scroll.
-     * @default true
-     */
-    widthReflow?: boolean;
-};
-/** Hook return type. */
-type UseScrollLockReturn = {
-    /** Whether the scroll is locked. */
-    isLocked: boolean;
-    /** Lock the scroll. */
-    lock: () => void;
-    /** Unlock the scroll. */
-    unlock: () => void;
-};
-/**
- * A custom hook that locks and unlocks scroll.
- * @param {UseScrollLockOptions} [options] - Options to configure the hook, by default it will lock the scroll automatically.
- * @returns {UseScrollLockReturn} - An object containing the lock and unlock functions.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-scroll-lock)
- * @example
- * ```tsx
- * // Lock the scroll when the modal is mounted, and unlock it when it's unmounted
- * useScrollLock()
- * ```
- * @example
- * ```tsx
- * // Manually lock and unlock the scroll
- * const { lock, unlock } = useScrollLock({ autoLock: false })
- *
- * return (
- *  <div>
- *   <button onClick={lock}>Lock</button>
- *   <button onClick={unlock}>Unlock</button>
- *  </div>
- * )
- * ```
- */
-export declare function useScrollLock(options?: UseScrollLockOptions): UseScrollLockReturn;
-export {};

package/useScrollLock/useScrollLock.mjs

@@ -1,26 +0,0 @@
-import { useState as y, useRef as d } from "react";
-import { useIsomorphicLayoutEffect as w } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-const R = typeof window > "u";
-function S(s = {}) {
-  const { autoLock: o = !0, lockTarget: e, widthReflow: n = !0 } = s, [l, c] = y(!1), t = d(null), r = d(null), u = () => {
-    if (t.current) {
-      const { overflow: f, paddingRight: g } = t.current.style;
-      if (r.current = { overflow: f, paddingRight: g }, n) {
-        const a = t.current === document.body ? window.innerWidth : t.current.offsetWidth, h = parseInt(window.getComputedStyle(t.current).paddingRight, 10) || 0, p = a - t.current.scrollWidth;
-        t.current.style.paddingRight = `${p + h}px`;
-      }
-      t.current.style.overflow = "hidden", c(!0);
-    }
-  }, i = () => {
-    t.current && r.current && (t.current.style.overflow = r.current.overflow, n && (t.current.style.paddingRight = r.current.paddingRight)), c(!1);
-  };
-  return w(() => {
-    if (!R)
-      return e && (t.current = typeof e == "string" ? document.querySelector(e) : e), t.current || (t.current = document.body), o && u(), () => {
-        i();
-      };
-  }, [o, e, n]), { isLocked: l, lock: u, unlock: i };
-}
-export {
-  S as useScrollLock
-};

package/useSessionStorage/index.d.ts

@@ -1 +0,0 @@
-export * from './useSessionStorage';

package/useSessionStorage/index.mjs

@@ -1,4 +0,0 @@
-import { useSessionStorage as r } from "./useSessionStorage.mjs";
-export {
-  r as useSessionStorage
-};

package/useSessionStorage/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useSessionStorage/useSessionStorage.d.ts

@@ -1,39 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-declare global {
-    interface WindowEventMap {
-        'session-storage': CustomEvent;
-    }
-}
-/**
- * Represents the options for customizing the behavior of serialization and deserialization.
- * @template T - The type of the state to be stored in session storage.
- */
-type UseSessionStorageOptions<T> = {
-    /** A function to serialize the value before storing it. */
-    serializer?: (value: T) => string;
-    /** A function to deserialize the stored value. */
-    deserializer?: (value: string) => T;
-    /**
-     * If `true` (default), the hook will initialize reading the session storage. In SSR, you should set it to `false`, returning the initial value initially.
-     * @default true
-     */
-    initializeWithValue?: boolean;
-};
-/**
- * Custom hook that uses the [`sessionStorage API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) to persist state across page reloads.
- * @template T - The type of the state to be stored in session storage.
- * @param {string} key - The key under which the value will be stored in session storage.
- * @param {T | (() => T)} initialValue - The initial value of the state or a function that returns the initial value.
- * @param {?UseSessionStorageOptions<T>} [options] - Options for customizing the behavior of serialization and deserialization (optional).
- * @returns {[T, Dispatch<SetStateAction<T>>, () => void]} A tuple containing the stored value, a function to set the value and a function to remove the key from storage.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-session-storage)
- * @example
- * ```tsx
- * const [count, setCount, removeCount] = useSessionStorage('count', 0);
- * // Access the `count` value, the `setCount` function to update it and `removeCount` function to remove the key from storage.
- * ```
- */
-export declare function useSessionStorage<T>(key: string, initialValue: T | (() => T), options?: UseSessionStorageOptions<T>): [T, Dispatch<SetStateAction<T>>, () => void];
-export {};

package/useSessionStorage/useSessionStorage.mjs

@@ -1,65 +0,0 @@
-import { useCallback as i, useState as F, useEffect as p } from "react";
-import { useEventCallback as u } from "../useEventCallback/useEventCallback.mjs";
-import { useEventListener as w } from "../useEventListener/useEventListener.mjs";
-const a = typeof window > "u";
-function J(n, r, o = {}) {
-  const { initializeWithValue: S = !0 } = o, m = i(
-    (e) => o.serializer ? o.serializer(e) : JSON.stringify(e),
-    [o]
-  ), d = i(
-    (e) => {
-      if (o.deserializer)
-        return o.deserializer(e);
-      if (e === "undefined")
-        return;
-      const t = r instanceof Function ? r() : r;
-      let g;
-      try {
-        g = JSON.parse(e);
-      } catch (z) {
-        return console.error("Error parsing JSON:", z), t;
-      }
-      return g;
-    },
-    [o, r]
-  ), s = i(() => {
-    const e = r instanceof Function ? r() : r;
-    if (a)
-      return e;
-    try {
-      const t = window.sessionStorage.getItem(n);
-      return t ? d(t) : e;
-    } catch (t) {
-      return console.warn(`Error reading sessionStorage key “${n}”:`, t), e;
-    }
-  }, [r, n, d]), [h, c] = F(() => S ? s() : r instanceof Function ? r() : r), E = u((e) => {
-    a && console.warn(
-      `Tried setting sessionStorage key “${n}” even though environment is not a client`
-    );
-    try {
-      const t = e instanceof Function ? e(s()) : e;
-      window.sessionStorage.setItem(n, m(t)), c(t), window.dispatchEvent(new StorageEvent("session-storage", { key: n }));
-    } catch (t) {
-      console.warn(`Error setting sessionStorage key “${n}”:`, t);
-    }
-  }), v = u(() => {
-    a && console.warn(
-      `Tried removing sessionStorage key “${n}” even though environment is not a client`
-    );
-    const e = r instanceof Function ? r() : r;
-    window.sessionStorage.removeItem(n), c(e), window.dispatchEvent(new StorageEvent("session-storage", { key: n }));
-  });
-  p(() => {
-    c(s());
-  }, [n]);
-  const f = i(
-    (e) => {
-      e.key && e.key !== n || c(s());
-    },
-    [n, s]
-  );
-  return w("storage", f), w("session-storage", f), [h, E, v];
-}
-export {
-  J as useSessionStorage
-};

package/useStep/index.d.ts

@@ -1 +0,0 @@
-export * from './useStep';

package/useStep/index.mjs

@@ -1,4 +0,0 @@
-import { useStep as p } from "./useStep.mjs";
-export {
-  p as useStep
-};

package/useStep/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}

package/useStep/useStep.d.ts

@@ -1,31 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-/** Represents the second element of the output of the `useStep` hook. */
-type UseStepActions = {
-    /** Go to the next step in the process. */
-    goToNextStep: () => void;
-    /** Go to the previous step in the process. */
-    goToPrevStep: () => void;
-    /** Reset the step to the initial step. */
-    reset: () => void;
-    /** Check if the next step is available. */
-    canGoToNextStep: boolean;
-    /** Check if the previous step is available. */
-    canGoToPrevStep: boolean;
-    /** Set the current step to a specific value. */
-    setStep: Dispatch<SetStateAction<number>>;
-};
-/**
- * Custom hook that manages and navigates between steps in a multi-step process.
- * @param {number} maxStep - The maximum step in the process.
- * @returns {[number, UseStepActions]} An tuple containing the current step and helper functions for navigating steps.
- * @public
- * @see [Documentation](https://usehooks-ts.com/react-hook/use-step)
- * @example
- * ```tsx
- * const [currentStep, { goToNextStep, goToPrevStep, reset, canGoToNextStep, canGoToPrevStep, setStep }] = useStep(3);
- * // Access and use the current step and provided helper functions.
- * ```
- */
-export declare function useStep(maxStep: number): [number, UseStepActions];
-export {};

package/useStep/useStep.mjs

@@ -1,34 +0,0 @@
-import { useState as a, useCallback as n } from "react";
-function l(r) {
-  const [e, o] = a(1), c = e + 1 <= r, s = e - 1 > 0, S = n(
-    (t) => {
-      const u = t instanceof Function ? t(e) : t;
-      if (u >= 1 && u <= r) {
-        o(u);
-        return;
-      }
-      throw new Error("Step not valid");
-    },
-    [r, e]
-  ), i = n(() => {
-    c && o((t) => t + 1);
-  }, [c]), p = n(() => {
-    s && o((t) => t - 1);
-  }, [s]), f = n(() => {
-    o(1);
-  }, []);
-  return [
-    e,
-    {
-      goToNextStep: i,
-      goToPrevStep: p,
-      canGoToNextStep: c,
-      canGoToPrevStep: s,
-      setStep: S,
-      reset: f
-    }
-  ];
-}
-export {
-  l as useStep
-};

package/useTernaryDarkMode/index.d.ts

@@ -1 +0,0 @@
-export * from './useTernaryDarkMode';

package/useTernaryDarkMode/index.mjs

@@ -1,4 +0,0 @@
-import { useTernaryDarkMode as o } from "./useTernaryDarkMode.mjs";
-export {
-  o as useTernaryDarkMode
-};

package/useTernaryDarkMode/package.json

@@ -1,7 +0,0 @@
-{
-  "sideEffects": false,
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
-  "types": "./index.d.ts"
-}