@uxf/core-react 11.20.0

package/README.md

@@ -0,0 +1,247 @@
+# UXF Core-React
+
+## Hooks
+
+```tsx
+import { useBodyScrollLock } from "@uxf/core-react/hooks/use-body-scroll-lock";
+import { useState } from "react";
+
+const innerRef = useRef<HTMLDivElement>(null);
+const [isOpen, setIsOpen] = useState<boolean>();
+
+const clearAllOnclose = false;
+
+useBodyScrollLock<HTMLDivElement>(innerRef, isOpen, {
+  allowTouchMove: undefined, // https://github.com/willmcpo/body-scroll-lock#allowtouchmove
+  clearAllOnClose: false, // optionally call clearAllBodyScrollLocks method on unmount
+  reserveScrollBarGap: undefined, // https://github.com/willmcpo/body-scroll-lock#reservescrollbargap
+});
+
+<div ref={innerRef}>Element which activates scroll lock on its parent elements.</div>
+```
+```tsx
+import { useIsMounted } from "@uxf/core-react/hooks/use-is-mounted";
+
+const isMounted = useIsMounted();
+```
+```tsx
+import { useIsomorphicLayoutEffect } from "@uxf/core-react/hooks/use-isomorphic-layout-effect";
+
+useIsomorphicLayoutEffect(() => {/* code */}, [/* deps */]);
+```
+
+```tsx
+import { useKey } from "@uxf/core-react/hooks/use-key";
+import { useRef } from "react";
+
+const targetRef = useRef<HTMLDivElement>(null);
+const disabled = false; // eg. for passing disabled state
+
+useKey<HTMLDivElement>("Enter", () => console.log("callback"), {
+  disabled,
+  targetRef, // if not provided, then `document` will be used
+  type: "keydown"
+});
+
+<div ref={targetRef} tabIndex={0}>Element with callback triggerable by enter key.</div>
+```
+```tsx
+import { useMinWindowWidth } from "@uxf/core-react/hooks/use-min-window-width";
+
+const isDesktop = useMinWindowWidth(1200);
+const isDesktopWithDebounce = useMinWindowWidth(1200, 200); // will be updated every 200 ms
+
+const example = isDesktop ? "desktop" : "tablet";
+const debouncedExample = isDesktopWithDebounce ? "debouncedDesktop" : "debouncedTablet";
+```
+
+```ts
+import { usePagination } from "@uxf/core-react/hooks/use-pagination";
+
+const paginationItems = usePagination({ page: 1, count: 10 })
+```
+
+```tsx
+import { useRafState } from "@uxf/core-react/hooks/use-raf-state";
+
+const [state, setState] = useRafState<boolean>(false);
+```
+```tsx
+import { useOnUnmount } from "@uxf/core-react/hooks/use-on-unmount";
+
+const exampleCallback = () => {};
+
+useOnUnmount(exampleCallback());
+```
+```tsx
+import { useOnUpdate } from "@uxf/core-react/hooks/use-on-update";
+
+useOnUpdate(() => {/* code */}, [/* deps */]);
+```
+```tsx
+import { useWindowScroll } from "@uxf/core-react/hooks/use-window-scroll";
+
+const windowScroll = useWindowScroll();
+
+const example = windowScroll && windowScroll.y > 100 ? "scroled" : "on top";
+```
+```tsx
+import { useWindowSize } from "@uxf/core-react/hooks/use-window-size";
+
+const windowSize = useWindowSize();
+
+const example = windowSize && windowSize.width > 1200 ? "desktop" : "tablet";
+```
+```tsx
+import { useFocusTrap } from "@uxf/core-react/hooks/use-focus-trap";
+import { useState } from "react";
+
+const [active, setActive] = useState<boolean>();
+
+const focusTrapRef = useFocusTrap(active);
+
+<div ref={focusTrapRef}>Element which trap focus inside if `active` is truthy.</div>
+```
+```tsx
+import { useFocusReturn } from "@uxf/core-react/hooks/use-focus-return";
+import { useState } from "react";
+
+const [active, setActive] = useState<boolean>();
+
+// Returns focus to last active element, e.g. in Modal or Popover
+useFocusReturn(active);
+```
+```tsx
+import { useAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { AnchorHTMLAttributes } from "react";
+
+// extends <a /> by `analyticsCallback`, `disabled`, `loading`, `submit` props
+const anchorProps = useAnchorProps<AnchorHTMLAttributes<HTMLAnchorElement>>({
+  analyticsCallback: () => console.log("analytics"),
+  disabled: false,
+  href: "https://www.google.com/",
+  loading: false,
+  onClick: () => console.log("success"),
+  type: "submit", // simulate <button type="submit" /> function
+});
+
+<a {...anchorProps}>Click me</a>
+
+// example with generics
+import { UseAnchorProps, useAnchorProps } from "@uxf/core-react/hooks/use-anchor-props";
+import { AnchorHTMLAttributes } from "react";
+
+interface Props extends UseAnchorProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+  customProp?: boolean;
+}
+
+const anchorProps = useAnchorProps<Props>({
+  customProp: true,
+  loading: false,
+  href: "https://www.google.com/",
+});
+
+<a {...anchorProps}>Click me</a>
+
+```
+```tsx
+import { useButtonProps } from "@uxf/core-react/hooks/use-button-props";
+import { ButtonHTMLAttributes } from "react";
+
+// extends <button /> by `analyticsCallback` and `loading` props
+const buttonProps = useButtonProps<ButtonHTMLAttributes<HTMLButtonElement>>({
+  analyticsCallback: () => console.log("analytics"),
+  disabled: false,
+  loading: false,
+  onClick: () => console.log("success"),
+  type: "submit",
+});
+
+<button {...buttonProps}>Click me</button>
+
+// example with generics
+import { UseButtonProps, useButtonProps } from "@uxf/core-react/hooks/use-button-props";
+import { ButtonHTMLAttributes } from "react";
+
+interface Props extends UseButtonProps, ButtonHTMLAttributes<HTMLButtonElement> {
+  customProp?: boolean;
+}
+
+const buttonProps = useButtonProps<Props>({
+  customProp: true,
+  loading: false,
+  type: "submit",
+});
+
+<button {...buttonProps}>Click me</button>
+```
+```tsx
+import { useClickableProps } from "@uxf/core-react/hooks/use-clickable-props";
+import { HTMLAttributes } from "react";
+
+// extends any HTML element by `analyticsCallback`, `disabled`, `loading`, `submit` props
+const clickableProps = useClickableProps<HTMLAttributes<HTMLDivElement>>({
+  analyticsCallback: () => console.log("analytics"),
+  disabled: false,
+  loading: false,
+  onClick: () => console.log("success"),
+  type: "submit", // simulate <button type="submit" /> function
+});
+
+<div {...clickableProps}>Click me</div>
+
+// example with generics
+import { UseClickableProps, useClickableProps } from "@uxf/core-react/hooks/use-clickable-props";
+import { HTMLAttributes } from "react";
+
+interface Props extends UseClickableProps, HTMLAttributes<HTMLDivElement> {
+  customProp?: boolean;
+}
+
+const buttonProps = useClickableProps<Props>({
+  customProp: true,
+  hidden: false,
+  loading: false,
+});
+
+<button {...buttonProps}>Click me</button>
+```
+```tsx
+import { useMouseDragToScroll } from "@uxf/core-react/hooks/use-mouse-drag-to-scroll";
+
+const targetRef = useRef<HTMLDivElement>(null);
+
+const style = useMouseDragToScroll(scrollRef);
+
+<div style={style}>Drag to scroll</div>
+```
+```tsx
+import { useInputFocus } from "@uxf/core-react/hooks/use-input-focus";
+
+const focusRef = useRef<HTMLInputElement>(null); // or HTMLTextAreaElement
+const { onBlur, onFocus } = props;
+
+const input = useInputFocus(focusRef, onBlur, onFocus);
+
+<div>Input is {input.focused}</div>
+<button onClick={input.focus}>Focus input</button>
+<input onBlur={input.onBlur} onFocus={input.onFocus} ref={focusRef} />
+```
+```tsx
+import { useLatest } from "@uxf/core-react/hooks/use-latest";
+
+const latestState = useLatest(someUnstableWhatever);
+
+useEffect(() => {
+  latestState.current(); // use newest state of 'someUnstableWhatever' without affecting this effetct update
+}, [latestState])
+```
+```tsx
+import { usePrevious } from "@uxf/core-react/hooks/use-previous";
+
+const previousState = usePrevious(someUnstableWhatever);
+
+useEffect(() => {
+  previousState.current(); // use state of 'someUnstableWhatever' from previous render without affecting this effetct update
+}, [previousState])
+```

package/components/hide.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+interface HideProps {
+    when: boolean;
+    children?: ReactNode;
+}
+export declare function Hide(props: HideProps): React.JSX.Element | null;
+export {};

package/components/hide.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hide = void 0;
+const react_1 = __importDefault(require("react"));
+function Hide(props) {
+    if (props.when) {
+        return null;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+}
+exports.Hide = Hide;

package/components/show.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+interface ShowProps {
+    when: boolean;
+    children?: ReactNode;
+}
+export declare function Show(props: ShowProps): React.JSX.Element | null;
+export {};

package/components/show.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Show = void 0;
+const react_1 = __importDefault(require("react"));
+function Show(props) {
+    if (!props.when) {
+        return null;
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, props.children);
+}
+exports.Show = Show;

package/hooks/_use-simulated-button.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEventHandler, MouseEventHandler } from "react";
+interface Props<T extends HTMLElement> {
+    analyticsCallback?: () => void;
+    isClickable: boolean;
+    isHyperlink: boolean;
+    onClick?: MouseEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<T>;
+    onKeyUp?: KeyboardEventHandler<T>;
+    submit?: boolean;
+}
+export declare function _useSimulatedButton<T extends HTMLElement>({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, submit, }: Props<T>): {
+    onClick: MouseEventHandler<T>;
+    onKeyDown: KeyboardEventHandler<T>;
+    onKeyUp: KeyboardEventHandler<T>;
+};
+export {};

package/hooks/_use-simulated-button.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._useSimulatedButton = void 0;
+const react_1 = require("react");
+function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, submit, }) {
+    const _onClick = (0, react_1.useCallback)((e) => {
+        var _a;
+        if ((isClickable || isHyperlink) && analyticsCallback) {
+            analyticsCallback();
+        }
+        if (isClickable) {
+            if (submit) {
+                const closestForm = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest("form");
+                if (closestForm) {
+                    closestForm.dispatchEvent(new Event("submit", { bubbles: true, cancelable: true }));
+                }
+            }
+            if (onClick) {
+                onClick(e);
+            }
+        }
+        else {
+            e.preventDefault();
+        }
+    }, [analyticsCallback, isClickable, isHyperlink, onClick, submit]);
+    const _onKeyUp = (0, react_1.useCallback)((e) => {
+        if (isClickable && (e.key === "Enter" || e.key === " ")) {
+            e.target.dispatchEvent(new MouseEvent("click", {
+                bubbles: true,
+                buttons: 1,
+                cancelable: true,
+                view: window,
+            }));
+            if (onKeyUp) {
+                onKeyUp(e);
+            }
+        }
+    }, [isClickable, onKeyUp]);
+    const _onKeyDown = (0, react_1.useCallback)((e) => {
+        if (isClickable && e.key === " ") {
+            e.preventDefault();
+            if (onKeyDown) {
+                onKeyDown(e);
+            }
+        }
+    }, [isClickable, onKeyDown]);
+    return { onClick: _onClick, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp };
+}
+exports._useSimulatedButton = _useSimulatedButton;

package/hooks/use-anchor-props.d.ts

@@ -0,0 +1,8 @@
+import { AnchorHTMLAttributes } from "react";
+export interface UseAnchorProps {
+    analyticsCallback?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "submit";
+}
+export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, download, href, hrefLang, loading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps }: UseAnchorProps & T): T;

package/hooks/use-anchor-props.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorProps = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const _use_simulated_button_1 = require("./_use-simulated-button");
+function useAnchorProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, download, href, hrefLang, loading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps }) {
+    const isBusy = loading ? loading : Boolean(ariaBusy);
+    const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabled;
+    const submit = type === "submit";
+    const isButton = submit || !!onClick;
+    const tabIndexInteractive = isBusyOrDisabled ? -1 : tabIndex;
+    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, disabled && classes_1.CLASSES.IS_DISABLED, className];
+    const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
+        analyticsCallback,
+        isClickable: !isBusyOrDisabled || isButton,
+        isHyperlink: !isBusyOrDisabled || !!href,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        submit,
+    });
+    if (href) {
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": isDisabled,
+            className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
+            download,
+            href,
+            hrefLang,
+            media,
+            onClick: simulatedButton.onClick,
+            onKeyDown: simulatedButton.onKeyDown,
+            onKeyUp: simulatedButton.onKeyUp,
+            ping,
+            referrerPolicy,
+            rel: target === "_blank" ? (rel ? `noopener noreferrer ${rel}` : "noopener noreferrer") : rel,
+            role: role || (isButton ? "button" : undefined),
+            tabIndex: tabIndexInteractive,
+            target,
+            ...restProps,
+        };
+    }
+    if (isButton) {
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": isDisabled,
+            className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
+            onClick: simulatedButton.onClick,
+            onKeyDown: simulatedButton.onKeyDown,
+            onKeyUp: simulatedButton.onKeyUp,
+            role: role || "button",
+            tabIndex: tabIndexInteractive !== null && tabIndexInteractive !== void 0 ? tabIndexInteractive : 0,
+            ...restProps,
+        };
+    }
+    return {
+        className: (0, cx_1.cx)(..._className),
+        role: role || "none",
+        tabIndex,
+        ...restProps,
+    };
+}
+exports.useAnchorProps = useAnchorProps;

package/hooks/use-body-scroll-lock.d.ts

@@ -0,0 +1,6 @@
+import { BodyScrollOptions } from "@uxf/core/utils/bodyScrollLock";
+import { RefObject } from "react";
+export interface UseBodyScrollLockOptions extends BodyScrollOptions {
+    clearAllOnClose?: boolean;
+}
+export declare function useBodyScrollLock<T extends HTMLElement>(containerRef: RefObject<T>, isOpen: boolean, { allowTouchMove, clearAllOnClose, reserveScrollBarGap }?: Partial<UseBodyScrollLockOptions>): void;

package/hooks/use-body-scroll-lock.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBodyScrollLock = void 0;
+const bodyScrollLock_1 = require("@uxf/core/utils/bodyScrollLock");
+const react_1 = require("react");
+function useBodyScrollLock(containerRef, isOpen, { allowTouchMove, clearAllOnClose, reserveScrollBarGap } = {}) {
+    (0, react_1.useEffect)(() => {
+        const node = containerRef.current;
+        if (isOpen && node) {
+            (0, bodyScrollLock_1.disableBodyScroll)(node, {
+                allowTouchMove: allowTouchMove ||
+                    ((element) => {
+                        var _a;
+                        while (element !== document.body) {
+                            if (element.getAttribute("data-body-scroll-lock-ignore") !== null) {
+                                return true;
+                            }
+                            element = (_a = element.parentElement) !== null && _a !== void 0 ? _a : element;
+                        }
+                        return false;
+                    }),
+                reserveScrollBarGap,
+            });
+        }
+        return () => {
+            if (node) {
+                (0, bodyScrollLock_1.enableBodyScroll)(node);
+            }
+            if (clearAllOnClose) {
+                (0, bodyScrollLock_1.clearAllBodyScrollLocks)();
+            }
+        };
+    }, [allowTouchMove, clearAllOnClose, containerRef, isOpen, reserveScrollBarGap]);
+}
+exports.useBodyScrollLock = useBodyScrollLock;

package/hooks/use-button-props.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+export interface UseButtonProps {
+    analyticsCallback?: () => void;
+    loading?: boolean;
+}
+export declare function useButtonProps<T extends ButtonHTMLAttributes<HTMLButtonElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps }: UseButtonProps & T): T;

package/hooks/use-button-props.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButtonProps = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = require("react");
+function useButtonProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps }) {
+    const isBusy = loading ? loading : Boolean(ariaBusy);
+    const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabled;
+    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabled && classes_1.CLASSES.IS_DISABLED, className];
+    const _onClick = (0, react_1.useCallback)((e) => {
+        if (isBusyOrDisabled) {
+            e.preventDefault();
+        }
+        else {
+            if (analyticsCallback) {
+                analyticsCallback();
+            }
+            if (onClick) {
+                onClick(e);
+            }
+        }
+    }, [analyticsCallback, isBusyOrDisabled, onClick]);
+    if (onClick || type === "reset" || type === "submit") {
+        let submitProps = {};
+        if (type === "submit") {
+            submitProps = {
+                formAction,
+                formEncType,
+                formMethod,
+                formNoValidate,
+                formTarget,
+                name,
+                value,
+            };
+        }
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": ariaDisabled,
+            autoFocus,
+            className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
+            disabled,
+            onClick: _onClick,
+            role,
+            tabIndex: isBusyOrDisabled ? -1 : tabIndex,
+            type,
+            ...submitProps,
+            ...restProps,
+        };
+    }
+    return {
+        className: (0, cx_1.cx)(..._className),
+        role,
+        tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : -1,
+        ...restProps,
+    };
+}
+exports.useButtonProps = useButtonProps;

package/hooks/use-clickable-props.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+export interface UseClickableProps {
+    analyticsCallback?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "submit";
+}
+export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, loading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps }: UseClickableProps & T): T;

package/hooks/use-clickable-props.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickableProps = void 0;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const _use_simulated_button_1 = require("./_use-simulated-button");
+function useClickableProps({ ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, disabled, loading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps }) {
+    const isBusy = loading ? loading : Boolean(ariaBusy);
+    const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabled;
+    const submit = type === "submit";
+    const isButton = submit || !!onClick;
+    const _className = [isBusy && classes_1.CLASSES.IS_LOADING, isDisabled && classes_1.CLASSES.IS_DISABLED, className];
+    const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
+        analyticsCallback,
+        isClickable: !isBusyOrDisabled || isButton,
+        isHyperlink: false,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        submit,
+    });
+    if (isButton) {
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": isDisabled,
+            className: (0, cx_1.cx)(classes_1.CLASSES.IS_HOVERABLE, ..._className),
+            onClick: simulatedButton.onClick,
+            onKeyDown: simulatedButton.onKeyDown,
+            onKeyUp: simulatedButton.onKeyUp,
+            role: role || "button",
+            tabIndex: isBusyOrDisabled ? -1 : tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0,
+            ...restProps,
+        };
+    }
+    return {
+        className: (0, cx_1.cx)(..._className),
+        role,
+        tabIndex,
+        ...restProps,
+    };
+}
+exports.useClickableProps = useClickableProps;

package/hooks/use-focus-return.d.ts

@@ -0,0 +1 @@
+export declare function useFocusReturn(opened: boolean, transitionDuration?: number, shouldReturnFocus?: boolean): () => void;

package/hooks/use-focus-return.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusReturn = void 0;
+const react_1 = require("react");
+const use_on_update_1 = require("./use-on-update");
+function useFocusReturn(opened, transitionDuration = 0, shouldReturnFocus = true) {
+    const lastActiveElement = (0, react_1.useRef)();
+    const returnFocus = () => {
+        const node = lastActiveElement.current;
+        if (node && "focus" in node && typeof node.focus === "function") {
+            node.focus();
+        }
+    };
+    (0, use_on_update_1.useOnUpdate)(() => {
+        let timeout = -1;
+        const clearFocusTimeout = (e) => {
+            if (e.key === "Tab") {
+                clearTimeout(timeout);
+            }
+        };
+        document.addEventListener("keydown", clearFocusTimeout);
+        if (opened) {
+            lastActiveElement.current = document.activeElement;
+        }
+        else if (shouldReturnFocus) {
+            timeout = window.setTimeout(returnFocus, transitionDuration + 10);
+        }
+        return () => {
+            clearTimeout(timeout);
+            document.removeEventListener("keydown", clearFocusTimeout);
+        };
+    }, [opened]);
+    return returnFocus;
+}
+exports.useFocusReturn = useFocusReturn;

package/hooks/use-focus-trap.d.ts

@@ -0,0 +1,2 @@
+import { RefCallback } from "react";
+export declare function useFocusTrap<T extends HTMLElement>(active?: boolean): RefCallback<T>;

package/hooks/use-focus-trap.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = void 0;
+const react_1 = require("react");
+const use_on_unmount_1 = require("./use-on-unmount");
+const TABBABLE_NODES = /input|select|textarea|button|object/;
+const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
+function hidden(element) {
+    return element.style.display === "none";
+}
+function visible(element) {
+    let parentElement = element;
+    while (parentElement) {
+        if (parentElement === document.body) {
+            break;
+        }
+        if (hidden(parentElement)) {
+            return false;
+        }
+        parentElement = parentElement.parentElement;
+    }
+    return true;
+}
+function getElementTabIndex(element) {
+    const tabIndex = element.getAttribute("tabindex");
+    if (tabIndex === null) {
+        return NaN;
+    }
+    return parseInt(tabIndex, 10);
+}
+function focusable(element) {
+    const nodeName = element.nodeName.toLowerCase();
+    const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+    const res = (TABBABLE_NODES.test(nodeName) && !element.disabled) ||
+        (element instanceof HTMLAnchorElement ? Boolean(element.href) || isTabIndexNotNaN : isTabIndexNotNaN);
+    return res && visible(element);
+}
+function tabbable(element) {
+    const tabIndex = getElementTabIndex(element);
+    const isTabIndexNaN = Number.isNaN(tabIndex);
+    return (isTabIndexNaN || tabIndex >= 0) && focusable(element);
+}
+function findTabbableDescendants(element) {
+    return Array.from(element.querySelectorAll(FOCUS_SELECTOR)).filter(tabbable);
+}
+function scopeTab(node, event) {
+    const _tabbable = findTabbableDescendants(node);
+    if (!_tabbable.length) {
+        event.preventDefault();
+        return;
+    }
+    const finalTabbable = _tabbable[event.shiftKey ? 0 : _tabbable.length - 1];
+    const leavingFinalTabbable = finalTabbable === document.activeElement || node === document.activeElement;
+    if (!leavingFinalTabbable) {
+        return;
+    }
+    event.preventDefault();
+    const target = _tabbable[event.shiftKey ? _tabbable.length - 1 : 0];
+    if (target) {
+        target.focus();
+    }
+}
+function createAriaHider(containerNode, selector = "body > :not(script)") {
+    const rootNodes = Array.from(document.querySelectorAll(selector)).map((node) => {
+        if (node.contains(containerNode)) {
+            return;
+        }
+        const ariaHidden = node.getAttribute("aria-hidden");
+        if (ariaHidden === null || ariaHidden === "false") {
+            node.setAttribute("aria-hidden", "true");
+        }
+        return { node, ariaHidden };
+    });
+    return () => {
+        rootNodes.forEach((item) => {
+            if (!item) {
+                return;
+            }
+            if (item.ariaHidden === null) {
+                item.node.removeAttribute("aria-hidden");
+            }
+            else {
+                item.node.setAttribute("aria-hidden", item.ariaHidden);
+            }
+        });
+    };
+}
+function useFocusTrap(active = true) {
+    const ref = (0, react_1.useRef)();
+    const restoreAria = (0, react_1.useRef)();
+    const timer = (0, react_1.useRef)();
+    const setRef = (0, react_1.useCallback)((node) => {
+        if (!active) {
+            ref.current = null;
+            return;
+        }
+        if (restoreAria.current) {
+            restoreAria.current();
+        }
+        if (node) {
+            const processNode = (_node) => {
+                restoreAria.current = createAriaHider(_node);
+                let focusElement = node.querySelector("[data-autofocus]");
+                if (!focusElement) {
+                    const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
+                    focusElement = children.find(tabbable) || children.find(focusable) || null;
+                    if (!focusElement && focusable(node)) {
+                        focusElement = node;
+                    }
+                }
+                if (focusElement) {
+                    focusElement.focus();
+                }
+            };
+            // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+            timer.current = window.setTimeout(() => {
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                if (node.ownerDocument) {
+                    processNode(node);
+                }
+            });
+            ref.current = node;
+        }
+        else {
+            ref.current = null;
+        }
+    }, [active]);
+    (0, react_1.useEffect)(() => {
+        if (!active) {
+            return;
+        }
+        const handler = (e) => {
+            const node = ref.current;
+            if (e.key === "Tab" && node) {
+                scopeTab(node, e);
+            }
+        };
+        document.addEventListener("keydown", handler);
+        return () => {
+            document.removeEventListener("keydown", handler);
+        };
+    }, [active]);
+    (0, use_on_unmount_1.useOnUnmount)(() => clearTimeout(timer.current));
+    return setRef;
+}
+exports.useFocusTrap = useFocusTrap;

package/hooks/use-input-focus.d.ts

@@ -0,0 +1,7 @@
+import { FocusEventHandler, MouseEventHandler, RefObject } from "react";
+export declare function useInputFocus<T extends HTMLInputElement | HTMLTextAreaElement | HTMLElement>(focusRef: RefObject<T>, onBlur?: FocusEventHandler<T>, onFocus?: FocusEventHandler<T>): {
+    focused: boolean;
+    focus: MouseEventHandler<HTMLElement>;
+    onBlur: FocusEventHandler<T>;
+    onFocus: FocusEventHandler<T>;
+};

package/hooks/use-input-focus.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInputFocus = void 0;
+const react_1 = require("react");
+function useInputFocus(focusRef, onBlur, onFocus) {
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const focus = (0, react_1.useCallback)(() => {
+        const node = focusRef.current;
+        if (node) {
+            node.focus();
+        }
+    }, [focusRef]);
+    const _onFocus = (0, react_1.useCallback)((e) => {
+        setFocused(true);
+        if (onFocus) {
+            onFocus(e);
+        }
+    }, [onFocus]);
+    const _onBlur = (0, react_1.useCallback)((e) => {
+        setFocused(false);
+        if (onBlur) {
+            onBlur(e);
+        }
+    }, [onBlur]);
+    return { focused, focus, onBlur: _onBlur, onFocus: _onFocus };
+}
+exports.useInputFocus = useInputFocus;

package/hooks/use-is-mounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsMounted(): boolean;

package/hooks/use-is-mounted.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsMounted = void 0;
+const react_1 = require("react");
+function useIsMounted() {
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    return isMounted;
+}
+exports.useIsMounted = useIsMounted;

package/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+const isBrowser_1 = require("@uxf/core/utils/isBrowser");
+const react_1 = require("react");
+exports.useIsomorphicLayoutEffect = isBrowser_1.isBrowser ? react_1.useLayoutEffect : react_1.useEffect;

package/hooks/use-key.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from "react";
+type KeyPredicate = (e: KeyboardEvent) => boolean;
+export type KeyFilter = null | undefined | string | KeyPredicate;
+export interface UseKeyOptions<T extends HTMLElement> {
+    disabled?: boolean;
+    targetRef?: RefObject<T>;
+    type: "keydown" | "keyup" | "keypress";
+}
+export declare function useKey<T extends HTMLElement>(keyFilter: KeyFilter, callback: (e: KeyboardEvent) => void, { disabled, targetRef, type }?: Partial<UseKeyOptions<T>>): void;
+export {};

package/hooks/use-key.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKey = void 0;
+const react_1 = require("react");
+const createKeyPredicate = (keyFilter) => typeof keyFilter === "function"
+    ? keyFilter
+    : typeof keyFilter === "string"
+        ? (e) => e.key === keyFilter
+        : () => false;
+function useKey(keyFilter, callback, { disabled, targetRef, type = "keydown" } = {}) {
+    (0, react_1.useEffect)(() => {
+        if (disabled) {
+            return;
+        }
+        const thisNode = (targetRef ? targetRef.current : document);
+        const predicate = createKeyPredicate(keyFilter);
+        const handler = (e) => {
+            if (predicate(e)) {
+                callback(e);
+            }
+        };
+        thisNode === null || thisNode === void 0 ? void 0 : thisNode.addEventListener(type, handler);
+        return () => {
+            thisNode === null || thisNode === void 0 ? void 0 : thisNode.removeEventListener(type, handler);
+        };
+    }, [callback, disabled, keyFilter, targetRef, type]);
+}
+exports.useKey = useKey;

package/hooks/use-latest.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useLatest<T>(current: T): import("react").MutableRefObject<T>;

package/hooks/use-latest.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLatest = void 0;
+const react_1 = require("react");
+function useLatest(current) {
+    const storedValue = (0, react_1.useRef)(current);
+    storedValue.current = current;
+    return storedValue;
+}
+exports.useLatest = useLatest;

package/hooks/use-min-window-width.d.ts

@@ -0,0 +1 @@
+export declare function useMinWindowWidth(minWidth: number, debounce?: number): boolean | undefined;

package/hooks/use-min-window-width.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMinWindowWidth = void 0;
+const react_1 = require("react");
+const use_raf_state_1 = require("./use-raf-state");
+function useMinWindowWidth(minWidth, debounce = 0) {
+    const [state, setState] = (0, use_raf_state_1.useRafState)();
+    (0, react_1.useEffect)(() => {
+        const stateHandler = () => setState(window.innerWidth >= minWidth);
+        let timer;
+        const handler = () => {
+            if (debounce > 0) {
+                window.clearTimeout(timer);
+                timer = window.setTimeout(stateHandler, debounce);
+            }
+            else {
+                stateHandler();
+            }
+        };
+        stateHandler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+            window.clearTimeout(timer);
+        };
+    }, [debounce, minWidth, setState]);
+    return state;
+}
+exports.useMinWindowWidth = useMinWindowWidth;

package/hooks/use-mouse-drag-to-scroll.d.ts

@@ -0,0 +1,2 @@
+import { CSSProperties, RefObject } from "react";
+export declare function useMouseDragToScroll<T extends HTMLElement>(containerRef: RefObject<T>): CSSProperties | undefined;

package/hooks/use-mouse-drag-to-scroll.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMouseDragToScroll = void 0;
+const react_1 = require("react");
+function useMouseDragToScroll(containerRef) {
+    const position = (0, react_1.useRef)({ left: 0, top: 0, x: 0, y: 0 });
+    const [style, setStyle] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        const mouseMoveHandler = (e) => {
+            const dx = e.clientX - position.current.x;
+            const dy = e.clientY - position.current.y;
+            node.scrollLeft = position.current.left - dx;
+            node.scrollTop = position.current.top - dy;
+        };
+        const mouseUpHandler = () => {
+            setStyle((prev) => ({ ...prev, cursor: "grab", userSelect: "unset" }));
+            document.removeEventListener("mousemove", mouseMoveHandler);
+            document.removeEventListener("mouseup", mouseUpHandler);
+        };
+        const mouseDownHandler = (e) => {
+            position.current = { left: node.scrollLeft, top: node.scrollTop, x: e.clientX, y: e.clientY };
+            setStyle((prev) => ({ ...prev, cursor: "grabbing", userSelect: "none" }));
+            document.addEventListener("mousemove", mouseMoveHandler);
+            document.addEventListener("mouseup", mouseUpHandler);
+        };
+        node.addEventListener("mousedown", mouseDownHandler);
+        return () => {
+            node.removeEventListener("mousedown", mouseDownHandler);
+            document.removeEventListener("mousedown", mouseMoveHandler);
+            document.removeEventListener("mousedown", mouseUpHandler);
+        };
+    }, [containerRef]);
+    return style;
+}
+exports.useMouseDragToScroll = useMouseDragToScroll;

package/hooks/use-on-mount.d.ts

@@ -0,0 +1,2 @@
+import { EffectCallback } from "react";
+export declare function useOnMount(effect: EffectCallback): void;

package/hooks/use-on-mount.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnMount = void 0;
+const react_1 = require("react");
+function useOnMount(effect) {
+    (0, react_1.useEffect)(() => {
+        return effect();
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+}
+exports.useOnMount = useOnMount;

package/hooks/use-on-unmount.d.ts

@@ -0,0 +1,2 @@
+import { EffectCallback } from "react";
+export declare function useOnUnmount(effect: EffectCallback): void;

package/hooks/use-on-unmount.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnUnmount = void 0;
+const react_1 = require("react");
+function useOnUnmount(effect) {
+    const effectRef = (0, react_1.useRef)(effect);
+    // update the ref each render so if it changed the newest callback will be invoked
+    effectRef.current = effect;
+    (0, react_1.useEffect)(() => {
+        return () => {
+            effectRef.current();
+        };
+    }, []);
+}
+exports.useOnUnmount = useOnUnmount;

package/hooks/use-on-update.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from "react";
+export declare function useOnUpdate(effect: EffectCallback, deps: DependencyList): void;

package/hooks/use-on-update.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnUpdate = void 0;
+const react_1 = require("react");
+function useOnUpdate(effect, deps) {
+    const firstRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (firstRun.current) {
+            firstRun.current = false;
+            return;
+        }
+        return effect();
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+}
+exports.useOnUpdate = useOnUpdate;

package/hooks/use-pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationConfig, PaginationItem } from "@uxf/core/utils/pagination";
+export declare const usePagination: (config: PaginationConfig) => PaginationItem[];

package/hooks/use-pagination.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePagination = void 0;
+const pagination_1 = require("@uxf/core/utils/pagination");
+const react_1 = require("react");
+const usePagination = (config) => {
+    return (0, react_1.useMemo)(() => (0, pagination_1.paginationGenerate)(config), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        config.boundaryCount,
+        config.siblingCount,
+        config.count,
+        config.page,
+        config.hideNextButton,
+        config.hidePrevButton,
+        config.showFirstButton,
+        config.showLastButton,
+    ]);
+};
+exports.usePagination = usePagination;

package/hooks/use-previous.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function usePrevious<T>(current: T): import("react").MutableRefObject<T>;

package/hooks/use-previous.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+const react_1 = require("react");
+function usePrevious(current) {
+    const storedValue = (0, react_1.useRef)(current);
+    (0, react_1.useEffect)(() => {
+        storedValue.current = current;
+    });
+    return storedValue;
+}
+exports.usePrevious = usePrevious;

package/hooks/use-raf-state.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from "react";
+export declare function useRafState<S = undefined>(initialState?: S | (() => S)): [S | undefined, Dispatch<SetStateAction<S | undefined>>];

package/hooks/use-raf-state.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRafState = void 0;
+const react_1 = require("react");
+const use_on_unmount_1 = require("./use-on-unmount");
+function useRafState(initialState) {
+    const frame = (0, react_1.useRef)(0);
+    const [state, setState] = (0, react_1.useState)(initialState);
+    const setRafState = (0, react_1.useCallback)((value) => {
+        cancelAnimationFrame(frame.current);
+        frame.current = requestAnimationFrame(() => {
+            setState(value);
+        });
+    }, []);
+    (0, use_on_unmount_1.useOnUnmount)(() => cancelAnimationFrame(frame.current));
+    return [state, setRafState];
+}
+exports.useRafState = useRafState;

package/hooks/use-window-scroll.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowScroll(): {
+    x: number;
+    y: number;
+} | undefined;

package/hooks/use-window-scroll.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowScroll = void 0;
+const react_1 = require("react");
+const use_raf_state_1 = require("./use-raf-state");
+function useWindowScroll() {
+    const [state, setState] = (0, use_raf_state_1.useRafState)();
+    (0, react_1.useEffect)(() => {
+        const handler = () => setState({
+            x: window.scrollX,
+            y: window.scrollY,
+        });
+        handler();
+        window.addEventListener("scroll", handler, {
+            capture: false,
+            passive: true,
+        });
+        return () => window.removeEventListener("scroll", handler);
+    }, [setState]);
+    return state;
+}
+exports.useWindowScroll = useWindowScroll;

package/hooks/use-window-size.d.ts

@@ -0,0 +1,4 @@
+export declare function useWindowSize(): {
+    width: number;
+    height: number;
+} | undefined;

package/hooks/use-window-size.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWindowSize = void 0;
+const react_1 = require("react");
+const use_raf_state_1 = require("./use-raf-state");
+function useWindowSize() {
+    const [state, setState] = (0, use_raf_state_1.useRafState)();
+    (0, react_1.useEffect)(() => {
+        const handler = () => setState({
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+        handler();
+        window.addEventListener("resize", handler);
+        return () => window.removeEventListener("resize", handler);
+    }, [setState]);
+    return state;
+}
+exports.useWindowSize = useWindowSize;

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@uxf/core-react",
+  "version": "11.20.0",
+  "description": "UXF Core",
+  "author": "UX Fans s.r.o",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -P tsconfig.json",
+    "typecheck": "tsc --noEmit --skipLibCheck"
+  },
+  "dependencies": {
+    "@uxf/core": "11.20.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.63",
+    "react": "18.2.0"
+  }
+}