@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/hooks/use-form.d.ts

@@ -0,0 +1,50 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { JSX, PropsWithChildren } from 'react';
+import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
+import { FormFieldProps } from '../components/form-field/FormField.js';
+import { FormProps } from '../components/form/Form.js';
+import { Schema } from './use-form.types.js';
+export type UseUnityFormReturn<TSchema extends Schema> = {
+    methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
+    Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
+    FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
+};
+/**
+ * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
+ * @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
+ * @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
+ * @returns an object containing the bounded  `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
+ * @example
+ * ```tsx
+ * import { useUnityForm } from '@payfit/unity-components'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({
+ *  foo: z.string().min(3),
+ *  bar: z.string().optional(),
+ * })
+ *
+ * function DemoForm() {
+ *   const { Form, FormField } = useUnityForm(schema, {
+ *     defaultValues: { foo: 'Hello world', bar: '' },
+ *   })
+ *
+ *   return (
+ *    <Form action={() => ...}>
+ *      <FormField name="foo" type="text">
+ *        // ...
+ *      </FormField>
+ *      // Type Error: "baz" is not assignable to "foo" | "bar".
+ *      <FormField name="baz" type="text">
+ *        // ...
+ *      </FormField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API]() • [Demo]()
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as n } from "react";
+import { standardSchemaResolver as l } from "@hookform/resolvers/standard-schema";
+import { useForm as c } from "react-hook-form";
+import { FormField as a } from "../components/form-field/FormField.js";
+import { Form as u } from "../components/form/Form.js";
+function S(m, i = {
+  mode: "onTouched",
+  reValidateMode: "onChange"
+}) {
+  const r = c({
+    ...i,
+    resolver: l(m)
+  }), d = n(() => {
+    const o = (e) => /* @__PURE__ */ t(u, { ...e, form: r, schema: m, children: e.children });
+    return o.displayName = "FormWithSchema", o;
+  }, [r, m]), F = n(() => {
+    const o = (e) => (
+      // @ts-expect-error: REACT-18-MIGRATION
+      /* @__PURE__ */ t(a, { ...e, control: r.control, children: e.children })
+    );
+    return o.displayName = "FormFieldWithSchema", o;
+  }, [r]);
+  return {
+    methods: r,
+    Form: d,
+    FormField: F
+  };
+}
+export {
+  S as useUnityForm
+};

package/dist/esm/hooks/use-form.types.d.ts

@@ -0,0 +1,3 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+export type TFormValues = Record<string, unknown>;
+export type Schema = StandardSchemaV1<TFormValues>;

package/dist/esm/hooks/use-has-scroll.d.ts

@@ -0,0 +1,71 @@
+import { RefObject } from 'react';
+import { ScrollDetectionResult, ScrollDetectionStrategy } from '../utils/scroll-detection.js';
+/**
+ * Configuration options for the useHasScroll hook
+ */
+export interface UseHasScrollOptions {
+    /**
+     * Detection strategy to use:
+     * - 'size': Compare scrollHeight/scrollWidth vs clientHeight/clientWidth (default)
+     *   Use when you need to detect actual scrollable content
+     * - 'style': Check computed overflow styles (overflow, overflowX, overflowY)
+     *   Use when you need to check if element is configured for scrolling
+     * - 'both': Element must satisfy both size and style conditions
+     *   Use for strict validation that element both has overflow style AND exceeds bounds
+     * @default 'size'
+     */
+    strategy?: ScrollDetectionStrategy;
+    /**
+     * Debounce delay in milliseconds for scroll detection updates
+     * Higher values improve performance but reduce responsiveness
+     * Set to 0 to disable debouncing
+     * @default 100
+     */
+    debounceMs?: number;
+    /**
+     * Watch for DOM mutations (content changes) in the element
+     * Disable for static content to improve performance
+     * @default true
+     */
+    watchMutations?: boolean;
+    /**
+     * Watch for element resize events
+     * Disable if element size is fixed to improve performance
+     * @default true
+     */
+    watchResize?: boolean;
+}
+/**
+ * React hook to detect if an element has scrollable content
+ * This hook monitors a DOM element and determines whether it has scrollable content
+ * using configurable detection strategies. It automatically updates when the element's
+ * size changes or its content is modified.
+ * @param {RefObject<HTMLElement>} ref - React ref to the element to monitor
+ * @param {UseHasScrollOptions} options - Configuration options
+ * @returns {ScrollDetectionResult} Current scroll detection state
+ * @example
+ * ```tsx
+ * // Basic usage with default size-based detection
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const { hasVerticalScroll } = useHasScroll(containerRef);
+ * ```
+ * @example
+ * ```tsx
+ * // Style-based detection
+ * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'style' });
+ * ```
+ * @example
+ * ```tsx
+ * // Strict detection with both methods
+ * const { hasVerticalScroll } = useHasScroll(containerRef, { strategy: 'both' });
+ * ```
+ * @example
+ * ```tsx
+ * // Performance optimized for static content
+ * const scrollState = useHasScroll(containerRef, {
+ *   watchMutations: false,
+ *   debounceMs: 0
+ * });
+ * ```
+ */
+export declare function useHasScroll(ref: RefObject<HTMLElement>, options?: UseHasScrollOptions): ScrollDetectionResult;

package/dist/esm/hooks/use-has-scroll.js

@@ -0,0 +1,75 @@
+import { useState as p, useCallback as z, useLayoutEffect as F, useEffect as y } from "react";
+import { detectScroll as A } from "../utils/scroll-detection.js";
+function E(r, b = {}) {
+  const {
+    strategy: a = "size",
+    debounceMs: u = 100,
+    watchMutations: i = !0,
+    watchResize: m = !0
+  } = b, [d, v] = p({
+    hasVerticalScroll: !1,
+    hasHorizontalScroll: !1,
+    hasAnyScroll: !1,
+    detectionMethod: {
+      size: { vertical: !1, horizontal: !1 },
+      style: { vertical: !1, horizontal: !1 }
+    }
+  }), e = z(() => {
+    const s = r.current;
+    if (!s)
+      return;
+    const o = A(s, a);
+    v(o);
+  }, [r, a]);
+  return F(() => {
+    if (!r.current) return;
+    e();
+    const o = requestAnimationFrame(() => {
+      e();
+    });
+    return () => {
+      cancelAnimationFrame(o);
+    };
+  }, [e]), y(() => {
+    let s = !0, o;
+    const S = () => {
+      const n = r.current;
+      if (!n) return;
+      let c;
+      const h = () => {
+        clearTimeout(c), c = setTimeout(e, u);
+      };
+      e(), requestAnimationFrame(() => {
+        e();
+      });
+      const l = [];
+      if (m) {
+        const t = new ResizeObserver(h);
+        t.observe(n), l.push(t);
+      }
+      if (i) {
+        const t = new MutationObserver(h);
+        t.observe(n, {
+          childList: !0,
+          subtree: !0,
+          characterData: !0,
+          attributes: !0,
+          attributeFilter: ["style", "class"]
+        }), l.push(t);
+      }
+      o = () => {
+        clearTimeout(c), l.forEach((t) => {
+          t.disconnect();
+        });
+      };
+    }, f = () => {
+      s && (r.current ? S() : requestAnimationFrame(f));
+    };
+    return f(), () => {
+      s = !1, o?.();
+    };
+  }, [r, e, u, m, i]), d;
+}
+export {
+  E as useHasScroll
+};

package/dist/esm/hooks/use-id.d.ts

@@ -0,0 +1,2 @@
+declare function useId(): string;
+export default useId;

package/dist/esm/hooks/use-id.js

@@ -0,0 +1,28 @@
+import { useState as o } from "react";
+function* a(n = Date.now()) {
+  let t = n;
+  for (; ; )
+    t = (t * 1664525 + 1013904223) % 2 ** 32, yield t / 2 ** 32;
+}
+const i = a();
+function l(n) {
+  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let e = "";
+  for (let r = 0; r < n; r++)
+    e += t.charAt(Math.floor(i.next().value * t.length));
+  return e;
+}
+let u = 0;
+function c() {
+  return u++;
+}
+function d() {
+  const [n] = o(() => {
+    const t = c().toString(36), e = l(4);
+    return `:r${t}:${e}`;
+  });
+  return n;
+}
+export {
+  d as default
+};

package/dist/esm/hooks/use-media-query.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An hook to create and listen to media query on the fly.
+ * For performance consideration, whenever possible, consume it globally.
+ * @param query A query representing the media to listen
+ * @param fallbackValue A default value used as a fallback in unsupported media query environment (such as server)
+ * @returns Matching state: true if the document matches the media query, false otherwise
+ */
+export declare function useMediaQuery(query: string, fallbackValue?: boolean): boolean;

package/dist/esm/hooks/use-media-query.js

@@ -0,0 +1,19 @@
+import { useMemo as u, useState as i, useCallback as o, useLayoutEffect as d } from "react";
+import { isBrowser as M } from "../utils/platform.js";
+const m = (t) => M() ? window.matchMedia(t) : null, a = (t) => t.matches;
+function l(t, n = !1) {
+  const e = u(() => m(t), [t]), [s, c] = i(
+    e ? a(e) : n
+  ), r = o(() => {
+    e && c(a(e));
+  }, [e]);
+  return d(() => {
+    if (e)
+      return e.addEventListener("change", r), () => {
+        e.removeEventListener("change", r);
+      };
+  }), s;
+}
+export {
+  l as useMediaQuery
+};

package/dist/esm/hooks/use-resizable.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+interface UseResizableOptions {
+    minWidth?: number;
+    minHeight?: number;
+    isDisabled?: boolean;
+}
+interface UseResizableReturn {
+    containerRef: RefObject<HTMLDivElement>;
+    handleResizeStart: (e: React.MouseEvent) => void;
+    isResizing: boolean;
+}
+export declare function useResizable({ isDisabled, minWidth, minHeight, }?: UseResizableOptions): UseResizableReturn;
+export {};

package/dist/esm/hooks/use-resizable.js

@@ -0,0 +1,50 @@
+import { useRef as R, useState as z, useEffect as g } from "react";
+function x({
+  isDisabled: c = !1,
+  minWidth: i,
+  minHeight: a
+} = {}) {
+  const e = R(null), [t, o] = z({
+    isResizing: !1,
+    startX: 0,
+    startY: 0,
+    startWidth: 0,
+    startHeight: 0
+  }), l = (s) => {
+    if (c) return;
+    s.preventDefault();
+    const r = e.current?.querySelector("textarea");
+    !e.current || !r || o({
+      isResizing: !0,
+      startX: s.clientX,
+      startY: s.clientY,
+      startWidth: e.current.offsetWidth,
+      startHeight: r.offsetHeight
+    });
+  };
+  return g(() => {
+    if (!t.isResizing) return;
+    const s = (n) => {
+      if (!e.current) return;
+      const u = e.current.querySelector("textarea");
+      if (!u) return;
+      const d = n.clientX - t.startX, f = n.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
+        t.startHeight + f,
+        a ?? 0
+      );
+      e.current.style.width = `${h}px`, u.style.height = `${m}px`;
+    }, r = () => {
+      o((n) => ({ ...n, isResizing: !1 }));
+    };
+    return document.addEventListener("mousemove", s), document.addEventListener("mouseup", r), () => {
+      document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", r);
+    };
+  }, [t, i, a]), {
+    containerRef: e,
+    handleResizeStart: l,
+    isResizing: t.isResizing
+  };
+}
+export {
+  x as useResizable
+};

package/dist/esm/hooks/use-responsive-value.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from './use-breakpoint-listener.js';
+/**
+ * A value that can be specified per breakpoint.
+ * At minimum, `base` (the mobile-first default) must be provided.
+ * @example
+ * { base: 1, md: 2, lg: 3 }
+ */
+export type ResponsiveValue<TValue> = {
+    base: TValue;
+} & Partial<Record<Exclude<Breakpoint, 'xs'>, TValue>>;
+export declare function useResponsiveValue<TValue>(value: TValue | ResponsiveValue<TValue>): TValue;

package/dist/esm/hooks/use-responsive-value.js

@@ -0,0 +1,29 @@
+import { useBreakpointListener as s } from "./use-breakpoint-listener.js";
+function p(n) {
+  return typeof n == "object" && n !== null && "base" in n;
+}
+const i = [
+  "sm",
+  "md",
+  "lg",
+  "xl"
+];
+function c(n) {
+  const r = s();
+  if (!p(n))
+    return n;
+  if (r === "xs")
+    return n.base;
+  if (r in n)
+    return n[r];
+  const o = i.indexOf(r);
+  for (let t = o; t >= 0; t--) {
+    const e = i[t];
+    if (e && e in n)
+      return n[e];
+  }
+  return n.base;
+}
+export {
+  c as useResponsiveValue
+};

package/dist/esm/hooks/use-scroll-direction.d.ts

@@ -0,0 +1,13 @@
+import { MutableRefObject, RefObject } from 'react';
+export type ScrollDirection = 'up' | 'down' | 'idle';
+/**
+ * Detects the scroll direction from the nearest scrollable ancestor.
+ * @param scrollContainerRef - Optional explicit scroll container. If omitted, the
+ *   hook walks the DOM from the returned `elementRef` to find the nearest scrollable
+ *   ancestor, falling back to `window`.
+ * @returns A tuple of `[elementRef, direction]`. Attach `elementRef` to the
+ *   component's root element to enable auto-detection.
+ * @remarks
+ * - When `prefers-reduced-motion` is active, direction is always `'idle'`.
+ */
+export declare function useScrollDirection(scrollContainerRef?: RefObject<Element | null>): [MutableRefObject<Element | null>, ScrollDirection];

package/dist/esm/hooks/use-scroll-direction.js

@@ -0,0 +1,56 @@
+import { useState as m, useRef as s, useEffect as a } from "react";
+import { useMediaQuery as S } from "./use-media-query.js";
+const f = 10;
+function E(r) {
+  let e = r.parentElement;
+  for (; e; ) {
+    const c = getComputedStyle(e).overflowY;
+    if (c === "auto" || c === "scroll")
+      return e;
+    e = e.parentElement;
+  }
+  return null;
+}
+function p(r) {
+  return r === window ? window.scrollY : r.scrollTop;
+}
+function h(r) {
+  if (r === window)
+    return window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 1;
+  const e = r;
+  return e.scrollTop + e.clientHeight >= e.scrollHeight - 1;
+}
+function T(r) {
+  const e = S("(prefers-reduced-motion: reduce)"), [c, u] = m("idle"), i = s(null), l = s(0), t = s(0);
+  return a(() => {
+    if (e) {
+      u("idle");
+      return;
+    }
+    const o = (() => {
+      if (r?.current) return r.current;
+      if (i.current) {
+        const n = E(i.current);
+        if (n) return n;
+      }
+      return window;
+    })();
+    l.current = p(o), t.current = 0;
+    const d = () => {
+      const n = p(o);
+      if (n < 0) return;
+      if (h(o)) {
+        t.current = 0, l.current = n, u("up");
+        return;
+      }
+      const w = n - l.current;
+      t.current += w, l.current = n, t.current > f ? (t.current = 0, u("down")) : t.current < -f && (t.current = 0, u("up"));
+    };
+    return o.addEventListener("scroll", d, { passive: !0 }), () => {
+      o.removeEventListener("scroll", d);
+    };
+  }, [e, r]), [i, e ? "idle" : c];
+}
+export {
+  T as useScrollDirection
+};