@sqrzro/ui 4.0.0-alpha.0 → 4.0.0-alpha.2

package/dist/forms/hooks/useForm.js

@@ -0,0 +1,209 @@
+'use client';
+import { useRef, useState, useTransition } from 'react';
+import { formatTitle } from '@sqrzro/utility';
+import { useRouter } from 'next/navigation';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+import useToast from '../../hooks/useToast';
+const DEFAULT_TOAST_MESSAGES = {
+    server: 'There was a problem submitting your request. Please try again later.',
+    success: 'Your request was submitted successfully.',
+    validation: 'There was a problem with your submission. Please check the form and try again.',
+};
+function getErrorsForField(errors, name) {
+    if (!errors || Object.keys(errors).length === 0) {
+        return null;
+    }
+    const fieldErrors = Object.entries(errors)
+        .filter(([key]) => key === name || key.startsWith(`${name}.`) || key.startsWith(`${name}[`))
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+    return Object.keys(fieldErrors).length ? fieldErrors : null;
+}
+function getLabel(name, label) {
+    return label || formatTitle(name);
+}
+function getToastMessage(key, toasts) {
+    if (toasts === false || toasts?.[key] === false) {
+        return '';
+    }
+    return toasts?.[key] || DEFAULT_TOAST_MESSAGES[key];
+}
+/**
+ * ## Overview
+ *
+ * `useForm` is a custom React hook that facilitates handling server-side form submission,
+ * including state management, error handling, and form data processing. It's designed to work
+ * with forms where the data is submitted to and validated by a server.
+ *
+ * ## Type Parameters
+ *
+ * - `Request extends object`: The shape of the request data.
+ * - `Response = Request`: The shape of the response data, defaulting to the same type as `Request`.
+ *
+ * ## Arguments
+ *
+ * `useForm` takes an object with the following properties:
+ *
+ * - `defaults`: Initial default values for the form data.
+ * - `hiddenFields`: Fields that should be included in the form submission but not displayed.
+ * - `onError`: Callback function for handling errors during form submission.
+ * - `onSubmit`: Function to handle the form submission. Expected to return a promise.
+ * - `onSuccess`: Callback function to be called upon a successful submission.
+ * - `onValidationError`: Callback function for handling validation errors.
+ * - `toasts`: Configuration for displaying success or error toasts.
+ *
+ * ## Returns
+ *
+ * `useForm` returns an object with the following properties:
+ *
+ * - `errors`: An object containing any form errors.
+ * - `fieldProps`: Function to generate props for a form field.
+ * - `formData`: Current form data.
+ * - `formProps`: Props for the form element including the submit handler.
+ * - `isLoading`: Boolean indicating if the form submission is in progress.
+ * - `resetForm`: Function to reset the form to its initial state.
+ * - `setFormData`: Function to update a specific piece of form data.
+ *
+ * ## Functionality
+ *
+ * - **Form Data Management:**
+ *   - Manages form data state and provides handleChange and setFormData functions to update form
+ *     data.
+ *
+ * - **Form Submission:**
+ *   - Handles form submission, including displaying loading state, submitting data to the provided
+ *     onSubmit function, and handling server-side validation errors or other errors.
+ *
+ * - **Error Handling:**
+ *   - Manages form error state and handles displaying error messages.
+ *
+ * - **Toasts:**
+ *   - Optionally displays success or error toasts based on the form submission outcome.
+ *
+ * - **Reset Form:**
+ *   - Provides a function to reset the form to its default state.
+ *
+ * ## Example
+ *
+ * ```jsx
+ * import React from 'react';
+ * import { useForm } from './path-to-useForm';
+ *
+ * const MyFormComponent = () => {
+ *     const { fieldProps, formProps, isLoading, resetForm } = useForm<MyFormData>({
+ *         defaults: { name: '', email: '' },
+ *         onSubmit: async (formData) => {
+ *             // Submit form data to the server
+ *         },
+ *     });
+ *
+ *     return (
+ *         <form {...formProps}>
+ *             <input {...fieldProps('name', 'Name')} />
+ *             <input {...fieldProps('email', 'Email')} />
+ *             <button type="submit" disabled={isLoading}>Submit</button>
+ *             <button type="button" onClick={resetForm}>Reset</button>
+ *         </form>
+ *     );
+ * };
+ *
+ * export default MyFormComponent;
+ * ```
+ *
+ * In this example, `MyFormComponent` uses the `useForm` hook to manage form state, handle
+ * submissions, display errors, and reset the form.
+ *
+ * ## Notes
+ *
+ * - Ensure proper types are passed to the useForm hook to align with the expected structure
+ *   of your form data and server responses.
+ * - The hook's functionality can be extended or customized based on specific use cases, such as
+ *   handling additional form events or integrating with different server APIs.
+ */
+function useForm({ defaults = {}, onError, onSubmit, onSuccess, onValidation, redirectOnSuccess, refreshOnSuccess, toasts, }) {
+    const innerRef = useRef(null);
+    const router = useRouter();
+    const [isLoading, startTransition] = useTransition();
+    const [errors, setErrors] = useState(null);
+    const [data, setData] = useState(defaults);
+    const { toastError, toastSuccess } = useToast();
+    function setFormData(key, value) {
+        setData((prev) => ({ ...prev, [key]: value }));
+    }
+    function handleChange(event) {
+        setData((prev) => ({ ...prev, [event.target.name]: event.target.value }));
+    }
+    async function handleSuccess(response) {
+        await onSuccess?.(response);
+        if (redirectOnSuccess) {
+            const redirect = typeof redirectOnSuccess === 'function'
+                ? redirectOnSuccess(response)
+                : redirectOnSuccess;
+            if (redirect) {
+                router.push(redirect);
+            }
+        }
+        if (refreshOnSuccess) {
+            router.refresh();
+        }
+        toastSuccess(getToastMessage('success', toasts));
+    }
+    function handleError(message) {
+        onError?.(message);
+        toastError(getToastMessage('server', toasts));
+    }
+    function handleValidation(messages) {
+        onValidation?.(messages);
+        setErrors(messages);
+        toastError(getToastMessage('validation', toasts));
+    }
+    async function handleSubmit() {
+        if (!onSubmit) {
+            return;
+        }
+        setErrors(null);
+        const fnReturn = await onSubmit(data);
+        if (fnReturn.error) {
+            return handleError(fnReturn.error);
+        }
+        if (fnReturn.validation) {
+            return handleValidation(fnReturn.validation);
+        }
+        if (fnReturn.data) {
+            return handleSuccess(fnReturn.data);
+        }
+    }
+    function fieldProps(name, label) {
+        return {
+            error: getErrorsForField(errors, name),
+            label: getLabel(name, label),
+            name: name,
+            onChange: handleChange,
+            value: data[name],
+        };
+    }
+    function resetForm() {
+        setTimeout(() => {
+            setData((defaults || {}));
+            setErrors(null);
+        }, 1);
+    }
+    useDeepCompareEffect(() => {
+        setData({ ...data, ...defaults });
+    }, [defaults]);
+    return {
+        errors,
+        fieldProps,
+        formData: data,
+        formProps: {
+            action: handleSubmit,
+        },
+        isLoading,
+        resetForm,
+        setErrors,
+        setFormData,
+        submitForm: () => {
+            setTimeout(() => innerRef.current?.requestSubmit(), 1);
+        },
+    };
+}
+export default useForm;

package/dist/forms/hooks/useModalForm.d.ts

@@ -0,0 +1,14 @@
+import type { Action } from '../../utility/interfaces';
+import type { ModalFormProps } from '../components/ModalForm';
+import type { UseFormArgs, UseFormReturn } from './useForm';
+export interface UseModalFormArgs<Request, Response> extends UseFormArgs<Request, Response> {
+    actions?: Action[];
+    icon?: React.ReactNode;
+    submitLabel?: string;
+    title?: string;
+}
+export interface UseModalFormReturn<Request> extends Omit<UseFormReturn<Request>, 'formProps'> {
+    formProps: Omit<ModalFormProps, 'children'>;
+}
+declare function useModalForm<Request extends object, Response = Request>({ actions, icon, submitLabel, title, ...useFormArgs }: UseModalFormArgs<Request, Response>): UseModalFormReturn<Request>;
+export default useModalForm;

package/dist/forms/hooks/useModalForm.js

@@ -0,0 +1,29 @@
+'use client';
+import { useRouter } from 'next/navigation';
+import useSearchParamsHref from '../../hooks/useSearchParamsHref';
+import useForm from './useForm';
+function useModalForm({ actions, icon, submitLabel, title, ...useFormArgs }) {
+    const { setSearchParamsHref } = useSearchParamsHref();
+    const router = useRouter();
+    function handleSuccess(response) {
+        useFormArgs.onSuccess?.(response);
+        setSearchParamsHref('action', null);
+        setTimeout(() => {
+            router.refresh();
+        }, 1);
+    }
+    const useFormReturn = useForm({
+        ...useFormArgs,
+        onSuccess: handleSuccess,
+        toasts: false,
+    });
+    return {
+        ...useFormReturn,
+        formProps: {
+            formProps: useFormReturn.formProps,
+            modalProps: { actions, icon, title },
+            submitLabel,
+        },
+    };
+}
+export default useModalForm;

package/dist/forms/index.d.ts

@@ -0,0 +1,27 @@
+export * from './interfaces';
+export type { DropdownClassNames, DropdownProps } from './components/Dropdown';
+export { default as Dropdown } from './components/Dropdown';
+export type { EditableFormClassNames, EditableFormProps } from './components/EditableForm';
+export { default as EditableForm } from './components/EditableForm';
+export type { EditableFormFieldProps } from './components/EditableFormField';
+export { default as EditableFormField } from './components/EditableFormField';
+export type { FormClassNames, FormProps } from './components/Form';
+export { default as Form } from './components/Form';
+export type { FormFieldClassNames, FormFieldProps } from './components/FormField';
+export { default as FormField } from './components/FormField';
+export type { FormSubmitProps } from './components/FormSubmit';
+export { default as FormSubmit } from './components/FormSubmit';
+export type { ModalFormProps } from './components/ModalForm';
+export { default as ModalForm } from './components/ModalForm';
+export type { PasswordInputClassNames, PasswordInputProps } from './components/PasswordInput';
+export { default as PasswordInput } from './components/PasswordInput';
+export type { TextInputClassNames, TextInputProps } from './components/TextInput';
+export { default as TextInput } from './components/TextInput';
+export type { EditableDropdownFormFieldProps, EditableTextFormFieldProps, } from './components/EditableFormFields';
+export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
+export type { DropdownFormFieldProps, PasswordFormFieldProps, TextFormFieldProps, } from './components/FormFields';
+export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
+export { default as useDropdown } from './hooks/useDropdown';
+export { default as useEditableForm } from './hooks/useEditableForm';
+export { default as useForm } from './hooks/useForm';
+export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/index.js

@@ -0,0 +1,17 @@
+export * from './interfaces';
+export { default as Dropdown } from './components/Dropdown';
+export { default as EditableForm } from './components/EditableForm';
+export { default as EditableFormField } from './components/EditableFormField';
+export { default as Form } from './components/Form';
+export { default as FormField } from './components/FormField';
+export { default as FormSubmit } from './components/FormSubmit';
+export { default as ModalForm } from './components/ModalForm';
+export { default as PasswordInput } from './components/PasswordInput';
+export { default as TextInput } from './components/TextInput';
+export { EditableDropdownFormField, EditableTextFormField } from './components/EditableFormFields';
+export { DropdownFormField, PasswordFormField, TextFormField } from './components/FormFields';
+// Hooks
+export { default as useDropdown } from './hooks/useDropdown';
+export { default as useEditableForm } from './hooks/useEditableForm';
+export { default as useForm } from './hooks/useForm';
+export { default as useModalForm } from './hooks/useModalForm';

package/dist/forms/interfaces.d.ts

@@ -0,0 +1,32 @@
+import type { EditableFormFieldProps } from './components/EditableFormField';
+import type { FormFieldProps } from './components/FormField';
+export type Default<T> = {
+    [K in keyof T]?: T[K] | null;
+};
+export interface DropdownObject<T = string> {
+    $data?: Record<string, string>;
+    details?: string | null;
+    isDisabled?: boolean;
+    label: string;
+    value: T;
+}
+export type EditingStatus = 'CANCELLED' | 'EDITING' | 'SAVED';
+export type EditableFormFieldComponentProps<T, V extends T = T> = Omit<EditableFormFieldProps<T, V>, 'render'>;
+export type FormFieldComponentProps<T, V extends T = T> = Omit<FormFieldProps<T, V>, 'render'>;
+export interface InputEventTarget<T> {
+    name: string;
+    value?: T;
+}
+export interface InputEvent<T = unknown> {
+    $data?: Record<string, string>;
+    target: InputEventTarget<T>;
+}
+export interface InputProps<V, T extends V = V> {
+    hasError?: boolean;
+    id?: string;
+    isDisabled?: boolean;
+    name: string;
+    onChange?: (event: InputEvent<T>) => void;
+    onKeyDown?: React.KeyboardEventHandler;
+    value?: V;
+}

package/dist/forms/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/forms/utility/extract-editable-input-props.d.ts

@@ -0,0 +1,8 @@
+import type { EditableFormFieldComponentProps } from '../interfaces';
+type InferFieldValue<U> = U extends EditableFormFieldComponentProps<infer T> ? T : never;
+export declare function getEditableFieldPropKeys<T>(): (keyof EditableFormFieldComponentProps<T>)[];
+declare function extractEditableInputProps<U extends EditableFormFieldComponentProps<InferFieldValue<U>>>(data: U): {
+    fieldProps: EditableFormFieldComponentProps<InferFieldValue<U>>;
+    inputProps: Omit<U, keyof EditableFormFieldComponentProps<InferFieldValue<U>>>;
+};
+export default extractEditableInputProps;

package/dist/forms/utility/extract-editable-input-props.js

@@ -0,0 +1,19 @@
+import { getFieldPropKeys, hasKey } from './extract-input-props';
+export function getEditableFieldPropKeys() {
+    return [...getFieldPropKeys(), 'renderValue', 'status'];
+}
+function extractEditableInputProps(data) {
+    const fieldPropKeys = getEditableFieldPropKeys();
+    const fieldProps = {};
+    const inputProps = {};
+    for (const key in data) {
+        if (hasKey(fieldPropKeys, key)) {
+            fieldProps[key] = data[key];
+        }
+        else {
+            inputProps[key] = data[key];
+        }
+    }
+    return { fieldProps, inputProps };
+}
+export default extractEditableInputProps;

package/dist/forms/utility/extract-input-props.d.ts

@@ -0,0 +1,9 @@
+import type { FormFieldComponentProps } from '../interfaces';
+type InferFieldValue<U> = U extends FormFieldComponentProps<infer T> ? T : never;
+export declare function getFieldPropKeys<T>(): (keyof FormFieldComponentProps<T>)[];
+export declare function hasKey<K extends PropertyKey>(obj: readonly K[], key: PropertyKey): key is K;
+declare function extractInputProps<U extends FormFieldComponentProps<InferFieldValue<U>>>(data: U): {
+    fieldProps: FormFieldComponentProps<InferFieldValue<U>>;
+    inputProps: Omit<U, keyof FormFieldComponentProps<InferFieldValue<U>>>;
+};
+export default extractInputProps;

package/dist/forms/utility/extract-input-props.js

@@ -0,0 +1,37 @@
+export function getFieldPropKeys() {
+    return [
+        'action',
+        'details',
+        'error',
+        'hasAssistiveError',
+        'hasAssistiveLabel',
+        'hasError',
+        'id',
+        'isContentOnly',
+        'isDisabled',
+        'isOptional',
+        'label',
+        'name',
+        'onChange',
+        'onKeyDown',
+        'value',
+    ];
+}
+export function hasKey(obj, key) {
+    return obj.includes(key);
+}
+function extractInputProps(data) {
+    const fieldPropKeys = getFieldPropKeys();
+    const fieldProps = {};
+    const inputProps = {};
+    for (const key in data) {
+        if (hasKey(fieldPropKeys, key)) {
+            fieldProps[key] = data[key];
+        }
+        else {
+            inputProps[key] = data[key];
+        }
+    }
+    return { fieldProps, inputProps };
+}
+export default extractInputProps;

package/dist/hooks/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,93 @@
+import type { RefObject } from 'react';
+export interface UseClickOutsideOptions {
+    shouldHandleEnterKey?: boolean;
+}
+type UseClickOutsideReturn<T> = [boolean, (bool: boolean) => void, RefObject<T | null>];
+/**
+ * # useClickOutside
+ *
+ * ## Overview
+ *
+ * `useClickOutside` is a custom React hook that provides functionality to detect and respond to
+ * clicks outside a specified element (`ref`). It's commonly used to close modal windows, dropdown
+ * menus, or any other UI elements that should be hidden when the user interacts with the rest of
+ * the application. Additionally, this hook can handle specific keyboard events.
+ *
+ * ## Usage
+ *
+ * This hook is ideal for components that need to react to clicks outside of them or require
+ * specific keyboard navigation like closing a modal on pressing the Escape key.
+ *
+ * ## Type Parameters
+ *
+ * - `T extends HTMLElement = HTMLDivElement`: The generic type `T` is used for the ref's HTML
+ * element type, defaulting to `HTMLDivElement`.
+ *
+ * ## Arguments
+ *
+ * `useClickOutside` takes an optional `options` object with the following property:
+ *
+ * - `shouldHandleEnterKey` (optional): A boolean that indicates whether the hook should also handle
+ * the 'Enter' key, in addition to the 'Escape' key, for closing the component.
+ *
+ * ## Returns
+ *
+ * `useClickOutside` returns a tuple (array with three elements) with the following types:
+ *
+ * 1. `isOpen`: A boolean state indicating whether the component is open.
+ * 2. `setIsOpen`: A function to set the `isOpen` state.
+ * 3. `node`: A ref object to be attached to the component.
+ *
+ * ## Functionality
+ *
+ * - **Click Outside Detection:**
+ * - The `handleClickOutside` function checks if the click event target is outside the `node` (the
+ * element the ref is attached to). If the click is outside, it sets the `isOpen` state to `false`
+ * after a delay.
+ *
+ * - **Keyboard Event Handling:**
+ * - The `handleKeyDown` function listens for keyboard events and closes the component (sets
+ * `isOpen` to `false`) when the 'Escape' key is pressed, or the 'Enter' key if
+ * `shouldHandleEnterKey` is true.
+ *
+ * - **Lifecycle Management:**
+ * - The `mounted` ref tracks if the component is still mounted to prevent state updates on
+ * unmounted components.
+ * - Event listeners for clicks and keyboard events are added on component mount and removed on
+ * component unmount.
+ *
+ * ## Example
+ *
+ * ```jsx
+ * import React, { useRef } from 'react';
+ * import useClickOutside from './path-to-useClickOutside';
+ *
+ * function MyComponent() {
+ *     const [isOpen, setIsOpen, node] = useClickOutside<HTMLDivElement>();
+ *
+ *     return (
+ *         <div ref={node}>
+ *             {isOpen && <div>Content that should close</div>}
+ *             <button onClick={() => setIsOpen(true)}>Open</button>
+ *         </div>
+ *     );
+ * }
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * In this example, `MyComponent` uses the `useClickOutside` hook to control the visibility of its
+ * content. The content is hidden when a click occurs outside the component or when the 'Escape' key
+ * is pressed.
+ *
+ * ## Notes
+ *
+ * - Ensure that the `node` ref is properly attached to the DOM element you want to monitor for
+ * outside clicks.
+ * - This hook manages an `isOpen` state internally but exposes it along with its setter function
+ * for external control.
+ * - The hook adds and removes event listeners for click and keyboard events to avoid memory leaks
+ * and unintended behavior in single-page applications.
+ */
+declare function useClickOutside<T extends HTMLElement = HTMLDivElement>(options?: UseClickOutsideOptions): UseClickOutsideReturn<T>;
+export default useClickOutside;

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'react';
+/**
+ * # useClickOutside
+ *
+ * ## Overview
+ *
+ * `useClickOutside` is a custom React hook that provides functionality to detect and respond to
+ * clicks outside a specified element (`ref`). It's commonly used to close modal windows, dropdown
+ * menus, or any other UI elements that should be hidden when the user interacts with the rest of
+ * the application. Additionally, this hook can handle specific keyboard events.
+ *
+ * ## Usage
+ *
+ * This hook is ideal for components that need to react to clicks outside of them or require
+ * specific keyboard navigation like closing a modal on pressing the Escape key.
+ *
+ * ## Type Parameters
+ *
+ * - `T extends HTMLElement = HTMLDivElement`: The generic type `T` is used for the ref's HTML
+ * element type, defaulting to `HTMLDivElement`.
+ *
+ * ## Arguments
+ *
+ * `useClickOutside` takes an optional `options` object with the following property:
+ *
+ * - `shouldHandleEnterKey` (optional): A boolean that indicates whether the hook should also handle
+ * the 'Enter' key, in addition to the 'Escape' key, for closing the component.
+ *
+ * ## Returns
+ *
+ * `useClickOutside` returns a tuple (array with three elements) with the following types:
+ *
+ * 1. `isOpen`: A boolean state indicating whether the component is open.
+ * 2. `setIsOpen`: A function to set the `isOpen` state.
+ * 3. `node`: A ref object to be attached to the component.
+ *
+ * ## Functionality
+ *
+ * - **Click Outside Detection:**
+ * - The `handleClickOutside` function checks if the click event target is outside the `node` (the
+ * element the ref is attached to). If the click is outside, it sets the `isOpen` state to `false`
+ * after a delay.
+ *
+ * - **Keyboard Event Handling:**
+ * - The `handleKeyDown` function listens for keyboard events and closes the component (sets
+ * `isOpen` to `false`) when the 'Escape' key is pressed, or the 'Enter' key if
+ * `shouldHandleEnterKey` is true.
+ *
+ * - **Lifecycle Management:**
+ * - The `mounted` ref tracks if the component is still mounted to prevent state updates on
+ * unmounted components.
+ * - Event listeners for clicks and keyboard events are added on component mount and removed on
+ * component unmount.
+ *
+ * ## Example
+ *
+ * ```jsx
+ * import React, { useRef } from 'react';
+ * import useClickOutside from './path-to-useClickOutside';
+ *
+ * function MyComponent() {
+ *     const [isOpen, setIsOpen, node] = useClickOutside<HTMLDivElement>();
+ *
+ *     return (
+ *         <div ref={node}>
+ *             {isOpen && <div>Content that should close</div>}
+ *             <button onClick={() => setIsOpen(true)}>Open</button>
+ *         </div>
+ *     );
+ * }
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * In this example, `MyComponent` uses the `useClickOutside` hook to control the visibility of its
+ * content. The content is hidden when a click occurs outside the component or when the 'Escape' key
+ * is pressed.
+ *
+ * ## Notes
+ *
+ * - Ensure that the `node` ref is properly attached to the DOM element you want to monitor for
+ * outside clicks.
+ * - This hook manages an `isOpen` state internally but exposes it along with its setter function
+ * for external control.
+ * - The hook adds and removes event listeners for click and keyboard events to avoid memory leaks
+ * and unintended behavior in single-page applications.
+ */
+function useClickOutside(options) {
+    const mounted = useRef(true);
+    const [isOpen, setIsOpen] = useState(false);
+    const node = useRef(null);
+    function handleClickOutside(event) {
+        if (node.current?.contains(event.target)) {
+            return;
+        }
+        setTimeout(() => {
+            if (mounted) {
+                setIsOpen(false);
+            }
+        });
+    }
+    useEffect(() => {
+        mounted.current = true;
+        function handleKeyDown(event) {
+            const keys = options?.shouldHandleEnterKey ? ['Escape', 'Enter'] : ['Escape'];
+            if (keys.includes(event.key)) {
+                setTimeout(() => {
+                    if (mounted) {
+                        setIsOpen(false);
+                    }
+                });
+            }
+        }
+        document.addEventListener('click', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            mounted.current = false;
+            document.removeEventListener('click', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [options?.shouldHandleEnterKey]);
+    return [isOpen, (bool) => setIsOpen(bool), node];
+}
+export default useClickOutside;

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,17 @@
+export interface UsePaginationArgs {
+    limit: number;
+    page: number;
+    total: number;
+}
+export interface UsePaginationReturn {
+    links: ({
+        href: string;
+        label: string;
+    } | null)[];
+    nextLink?: string | null;
+    pageCount: number;
+    previousLink?: string | null;
+}
+export declare function getLink(pathname: string, searchParams: URLSearchParams, page: number): string;
+declare function usePagination({ limit, page, total }: Readonly<UsePaginationArgs>): UsePaginationReturn;
+export default usePagination;