@uxf/core-react 11.74.0 → 11.74.4

package/README.md

@@ -7,7 +7,7 @@
 
 Conditionally hide some jsx content.
 ```tsx
-const { Hide } from "@uxf/core-react/components/hide";
+import { Hide } from "@uxf/core-react/components/hide";
 
 <Hide when={SOME_CONDITION}>
     ...some content
@@ -18,7 +18,7 @@ const { Hide } from "@uxf/core-react/components/hide";
 
 Conditionally show some jsx content.
 ```tsx
-const { Show } from "@uxf/core-react/components/show";
+import { Show } from "@uxf/core-react/components/show";
 
 <Show when={SOME_CONDITION}>
     ...some content
@@ -31,7 +31,7 @@ Polyfill for custom css variable `--viewport-height` to mimic functionality of b
 
 Add component to react app root (eg. `_app.tsx`).
 ```tsx
-const { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
+import { ViewportHeightPolyfill } from "@uxf/core-react/components/viewport-height-polyfill";
 
 <ViewportHeightPolyfill />
 ```

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

@@ -0,0 +1,17 @@
+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>;
+    isSubmitType?: boolean;
+}
+export declare function _useSimulatedButton<T extends HTMLAnchorElement>({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }: Props<T>): {
+    onClick: MouseEventHandler<T>;
+    onKeyDown: KeyboardEventHandler<T>;
+    onKeyUp: KeyboardEventHandler<T>;
+    isBusy: boolean | undefined;
+};
+export {};

package/clickable/_use-simulated-button.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._useSimulatedButton = _useSimulatedButton;
+const react_1 = require("react");
+function _useSimulatedButton({ analyticsCallback, isClickable, isHyperlink, onClick, onKeyDown, onKeyUp, isSubmitType, }) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [isBusy, setIsBusy] = (0, react_1.useState)(false);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const _onClick = (0, react_1.useCallback)((e) => {
+        var _a;
+        if ((isClickable || isHyperlink) && analyticsCallback) {
+            analyticsCallback();
+        }
+        if (isClickable) {
+            if (isSubmitType) {
+                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 }));
+                }
+            }
+            // TODO @vejvis - jaktože tady je onclick který vrací void a ne Promise<void> ?
+            const clickResult = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+            if (clickResult instanceof Promise) {
+                setIsBusy(true);
+                clickResult.finally(() => setIsBusy(false));
+            }
+        }
+        else {
+            e.preventDefault();
+        }
+    }, [analyticsCallback, isClickable, isHyperlink, onClick, isSubmitType]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    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,
+        isBusy: isBusy ? true : undefined,
+    };
+}

package/clickable/add-busy-and-disabled-classnames.d.ts

@@ -0,0 +1,9 @@
+import { Nullish } from "@uxf/core/types";
+import { CxClassValue } from "@uxf/core/utils/cx";
+import { Options } from "./types";
+interface State {
+    isBusy: boolean | Nullish;
+    isDisabled: boolean | Nullish;
+}
+export declare function addBusyAndDisabledClassnames(className: string | Nullish, state: State, options: Options): CxClassValue[];
+export {};

package/clickable/add-busy-and-disabled-classnames.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addBusyAndDisabledClassnames = addBusyAndDisabledClassnames;
+const classes_1 = require("@uxf/core/constants/classes");
+function addBusyAndDisabledClassnames(className, state, options) {
+    return [
+        state.isBusy &&
+            (options.classNamePrefix
+                ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_LOADING} ${classes_1.CLASSES.IS_LOADING}`
+                : classes_1.CLASSES.IS_LOADING),
+        state.isDisabled &&
+            (options.classNamePrefix
+                ? `${options.classNamePrefix}--${classes_1.CLASSES.IS_DISABLED} ${classes_1.CLASSES.IS_DISABLED}`
+                : classes_1.CLASSES.IS_DISABLED),
+        className,
+    ];
+}

package/clickable/types.d.ts

@@ -0,0 +1,3 @@
+export type Options = {
+    classNamePrefix?: string;
+};

package/clickable/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import { AnchorHTMLAttributes } from "react";
+import { Options } from "./types";
+export interface UseAnchorProps {
+    analyticsCallback?: () => void;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    type?: "submit";
+}
+export declare function useAnchorProps<T extends AnchorHTMLAttributes<HTMLAnchorElement>>(props: UseAnchorProps & T, options?: Options): T;

package/clickable/use-anchor-props.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAnchorProps = useAnchorProps;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const _use_simulated_button_1 = require("./_use-simulated-button");
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useAnchorProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, download, href, hrefLang, isLoading, media, onClick, onKeyDown, onKeyUp, ping, referrerPolicy, rel, role, tabIndex, target, type, ...restProps } = props;
+    const isBusy = Boolean(isLoading || ariaBusy);
+    const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
+    const isSubmitType = type === "submit";
+    const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
+    const tabIndexInteractive = isBusyOrDisabled ? -1 : tabIndex;
+    const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
+        analyticsCallback,
+        isClickable: !isBusyOrDisabled || isButton,
+        isHyperlink: !isBusyOrDisabled || Boolean(href),
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        isSubmitType,
+    });
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
+    if (href) {
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": isDisabledOrAriaDisabled,
+            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": isDisabledOrAriaDisabled,
+            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,
+    };
+}

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

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes } from "react";
+import { Options } from "./types";
+export interface UseButtonProps {
+    analyticsCallback?: () => void;
+    loading?: boolean;
+}
+export declare function useButtonProps<T extends ButtonHTMLAttributes<HTMLButtonElement>>(props: UseButtonProps & T, options?: Options): T;

package/clickable/use-button-props.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useButtonProps = useButtonProps;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const react_1 = require("react");
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useButtonProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, autoFocus, analyticsCallback, className, disabled, formAction, formEncType, formMethod, formNoValidate, formTarget, loading, name, onClick, role, tabIndex, type, value, ...restProps } = props;
+    const isBusy = loading ? loading : Boolean(ariaBusy);
+    const isDisabled = disabled ? disabled : Boolean(ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabled;
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy, isDisabled }, options);
+    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,
+    };
+}

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+import { Options } from "./types";
+export interface UseClickableProps {
+    analyticsCallback?: () => void;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    type?: "submit";
+}
+export declare function useClickableProps<T extends HTMLAttributes<HTMLElement>>(props: UseClickableProps & T, options?: Options): T;

package/clickable/use-clickable-props.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickableProps = useClickableProps;
+const classes_1 = require("@uxf/core/constants/classes");
+const cx_1 = require("@uxf/core/utils/cx");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const _use_simulated_button_1 = require("./_use-simulated-button");
+const add_busy_and_disabled_classnames_1 = require("./add-busy-and-disabled-classnames");
+function useClickableProps(props, options = {}) {
+    const { ["aria-busy"]: ariaBusy, ["aria-disabled"]: ariaDisabled, analyticsCallback, className, isDisabled, isLoading, onClick, onKeyDown, onKeyUp, role, tabIndex, type, ...restProps } = props;
+    const isBusy = Boolean(isLoading || ariaBusy);
+    const isDisabledOrAriaDisabled = Boolean(isDisabled || ariaDisabled);
+    const isBusyOrDisabled = isBusy || isDisabledOrAriaDisabled;
+    const isSubmitType = type === "submit";
+    const isButton = isSubmitType || (0, is_not_nil_1.isNotNil)(onClick);
+    const simulatedButton = (0, _use_simulated_button_1._useSimulatedButton)({
+        analyticsCallback,
+        isClickable: !isBusyOrDisabled || isButton,
+        isHyperlink: false,
+        onClick,
+        onKeyDown,
+        onKeyUp,
+        isSubmitType,
+    });
+    const _className = (0, add_busy_and_disabled_classnames_1.addBusyAndDisabledClassnames)(className, { isBusy: isBusy || simulatedButton.isBusy, isDisabled: isDisabledOrAriaDisabled }, options);
+    if (isButton) {
+        return {
+            "aria-busy": isBusy,
+            "aria-disabled": isDisabledOrAriaDisabled,
+            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,
+    };
+}

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,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Hide = Hide;
+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);
+}

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,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Show = Show;
+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);
+}

package/components/viewport-height-polyfill.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from "react";
+export declare function ViewportHeightPolyfill(): ReactNode;

package/components/viewport-height-polyfill.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewportHeightPolyfill = ViewportHeightPolyfill;
+const use_is_mounted_1 = require("@uxf/core-react/hooks/use-is-mounted");
+const use_on_mount_1 = require("@uxf/core-react/hooks/use-on-mount");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const with_unit_1 = require("@uxf/styles/units/with-unit");
+const react_1 = __importStar(require("react"));
+function ViewportHeightPolyfill() {
+    const isMounted = (0, use_is_mounted_1.useIsMounted)();
+    const [viewportHeight, setViewportHeight] = (0, react_1.useState)();
+    (0, use_on_mount_1.useOnMount)(() => {
+        if (!CSS.supports("height: 100dvh")) {
+            return;
+        }
+        const updateViewportHeight = () => setViewportHeight(window.innerHeight);
+        updateViewportHeight();
+        window.addEventListener("resize", updateViewportHeight);
+        return () => window.removeEventListener("resize", updateViewportHeight);
+    });
+    if (isMounted && (0, is_not_nil_1.isNotNil)(viewportHeight)) {
+        return react_1.default.createElement("style", null, `:root { --viewport-height: ${(0, with_unit_1.withUnit)(viewportHeight, "px")}; }`);
+    }
+    return null;
+}

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

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBodyScrollLock = useBodyScrollLock;
+const body_scroll_lock_1 = require("@uxf/core/utils/body-scroll-lock");
+const react_1 = require("react");
+function useBodyScrollLock(containerRef, isOpen, { allowTouchMove, clearAllOnClose, reserveScrollBarGap } = {}) {
+    (0, react_1.useEffect)(() => {
+        const node = containerRef.current;
+        if (isOpen && node) {
+            (0, body_scroll_lock_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, body_scroll_lock_1.enableBodyScroll)(node);
+            }
+            if (clearAllOnClose) {
+                (0, body_scroll_lock_1.clearAllBodyScrollLocks)();
+            }
+        };
+    }, [allowTouchMove, clearAllOnClose, containerRef, isOpen, reserveScrollBarGap]);
+}

package/hooks/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/hooks/use-debounce.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebounce = useDebounce;
+const react_1 = require("react");
+const use_on_update_1 = require("./use-on-update");
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)(value);
+    (0, use_on_update_1.useOnUpdate)(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay !== null && delay !== void 0 ? delay : 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

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,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusReturn = useFocusReturn;
+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, shouldReturnFocus, transitionDuration]);
+    return returnFocus;
+}

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>;