reshaped 1.0.1 → 2.1.0

package/components/_private/HiddenInput/HiddenInput.types.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import type * as G from "../../../types/global";
+export type Props = {
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    type: "checkbox" | "radio";
+    className?: G.ClassName;
+    attributes?: G.Attributes<"input">;
+};

package/components/_private/HiddenInput/HiddenInput.types.js

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

package/components/_private/HiddenInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./HiddenInput";
+export type { Props as HiddenInputProps } from "./HiddenInput.types";

package/components/_private/HiddenInput/index.js

@@ -0,0 +1 @@
+export { default } from "./HiddenInput.js";

package/components/_private/Portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import type * as T from "./Portal.types";
+export declare const usePortal: () => T.Context;
+/**
+ * Disclaimer: Works only for components that don't show the portal immediately
+ * That gives Portal time to receive scope on first render
+ */
+declare const PortalProvider: (props: T.Props) => JSX.Element;
+export default PortalProvider;

package/components/_private/Portal/Portal.js

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+import ReactDOM from "react-dom";
+import Theme from "../../Theme/index.js";
+const PortalContext = React.createContext({ scopeRef: undefined });
+export const usePortal = () => {
+    return React.useContext(PortalContext);
+};
+/**
+ * Disclaimer: Works only for components that don't show the portal immediately
+ * That gives Portal time to receive scope on first render
+ */
+const PortalProvider = (props) => {
+    var _a;
+    const { children, scopeRef } = props;
+    const portal = usePortal();
+    const nextScopeRef = scopeRef || portal.scopeRef;
+    return ReactDOM.createPortal(React.createElement(PortalContext.Provider, { value: { scopeRef: nextScopeRef } },
+        React.createElement(Theme, null, children)), ((_a = portal.scopeRef) === null || _a === void 0 ? void 0 : _a.current) || document.body);
+};
+export default PortalProvider;

package/components/_private/Portal/Portal.types.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export type Props = {
+    children?: React.ReactNode;
+    scopeRef?: React.RefObject<HTMLElement | null>;
+};
+export type Context = Pick<Props, "scopeRef">;

package/components/_private/Portal/Portal.types.js

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

package/components/_private/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { default, usePortal } from "./Portal";
+export type { Props as PortalProps } from "./Portal.types";

package/components/_private/Portal/index.js

@@ -0,0 +1 @@
+export { default, usePortal } from "./Portal.js";

package/components/_private/Portal/tests/Portal.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;

package/components/_private/Portal/tests/Portal.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import Portal from "../index.js";
+export default { title: "Utilities/Internal/Portal" };
+export const base = () => {
+    const ref = React.useRef(null);
+    return (<div style={{ border: "2px solid #333", padding: 16 }}>
+			App
+			<Portal scopeRef={ref}>
+				<div ref={ref} style={{ border: "2px solid green", padding: 16 }}>
+					Portal scope
+					<div style={{ border: "2px solid red", padding: 16 }}>
+						Stays in red
+						<Portal>Ported to green</Portal>
+					</div>
+				</div>
+			</Portal>
+		</div>);
+};

package/config/postcss.d.ts

@@ -0,0 +1,13 @@
+export declare const config: {
+    plugins: {
+        "postcss-custom-media": {
+            importFrom: string;
+        };
+        autoprefixer: {};
+        cssnano: {
+            preset: (string | {
+                calc: boolean;
+            })[];
+        };
+    };
+};

package/config/postcss.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.config = void 0;
+const path_1 = __importDefault(require("path"));
+// Using [plugin]: { ...options } format here because it's supported by the most frameworks
+// - require('plugin') is not supported by Next
+// - ['plugin', options] is not supported by Vite
+exports.config = {
+    plugins: {
+        "postcss-custom-media": {
+            importFrom: path_1.default.resolve(__dirname, "../themes/media.css"),
+        },
+        autoprefixer: {},
+        cssnano: { preset: ["default", { calc: false }] },
+    },
+};

package/config/tailwind.d.ts

@@ -0,0 +1,2 @@
+import { UserThemeDefinition } from "../cli/theming/tokens/types";
+export declare const getTheme: (theme?: UserThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/config/tailwind.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTheme = void 0;
+const reshaped_1 = __importDefault(require("../cli/theming/definitions/reshaped"));
+const base_1 = __importDefault(require("../cli/theming/definitions/base"));
+const string_1 = require("../cli/utilities/string");
+const color_1 = require("../cli/utilities/color");
+const mergeDefinitions_1 = __importDefault(require("../cli/theming/utilities/mergeDefinitions"));
+const getTheme = (theme) => {
+    const config = {
+        backgroundColor: {},
+        textColor: {},
+        borderColor: {},
+        colors: {},
+        borderRadius: {},
+        spacing: {},
+        boxShadow: {},
+        screens: {},
+    };
+    const definition = theme
+        ? (0, mergeDefinitions_1.default)(reshaped_1.default, theme)
+        : reshaped_1.default;
+    Object.keys(definition.color).forEach((tokenName) => {
+        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
+        const cssVariable = ["rs", "color", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        if (tokenName.startsWith("background")) {
+            const name = cssTokenName.replace("background-", "");
+            config.backgroundColor[name] = configValue;
+            if (color_1.bgWithDynamicForeground.includes(tokenName)) {
+                const cssVariable = ["rs", "color", "on", cssTokenName].join("-");
+                const configValue = `var(--${cssVariable})`;
+                config.textColor[`on-${name}`] = configValue;
+            }
+            return;
+        }
+        if (tokenName.startsWith("foreground")) {
+            const name = cssTokenName.replace("foreground-", "");
+            config.textColor[name] = configValue;
+            return;
+        }
+        if (tokenName.startsWith("border")) {
+            const name = cssTokenName.replace("border-", "");
+            config.borderColor[name] = configValue;
+            return;
+        }
+        config.backgroundColor[cssTokenName] = configValue;
+        config.borderColor[cssTokenName] = configValue;
+        config.textColor[cssTokenName] = configValue;
+        config.colors[cssTokenName] = configValue;
+    });
+    Object.keys(definition.unit).forEach((tokenName) => {
+        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
+        const cssVariable = ["rs", "unit", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        if (tokenName.startsWith("radius")) {
+            const name = cssTokenName.replace("radius-", "");
+            config.borderRadius[name] = configValue;
+            return;
+        }
+        if (tokenName.startsWith("base")) {
+            [...Array(11).keys()].forEach((i) => {
+                if (i === 0) {
+                    config.spacing["0"] = "0px";
+                }
+                else {
+                    config.spacing[`x${i}`] = `var(--rs-unit-x${i})`;
+                }
+            });
+            return;
+        }
+    });
+    Object.keys(definition.shadow).forEach((tokenName) => {
+        const cssTokenName = (0, string_1.camelToKebab)(tokenName);
+        const cssVariable = ["rs", "shadow", cssTokenName].join("-");
+        const configValue = `var(--${cssVariable})`;
+        const name = cssTokenName.replace("shadow-", "");
+        config.boxShadow[name] = configValue;
+        return;
+    });
+    Object.entries(base_1.default.viewport).forEach(([tokenName, tokenValue]) => {
+        if (!tokenValue.minPx)
+            return;
+        config.screens[tokenName] = `${tokenValue.minPx}px`;
+    });
+    return config;
+};
+exports.getTheme = getTheme;

package/constants/attributes.d.ts

@@ -0,0 +1,2 @@
+export declare const keyboardModeAttribute = "data-rs-keyboard";
+export declare const pseudoFocusAttribute = "data-rs-focus";

package/constants/attributes.js

@@ -0,0 +1,2 @@
+export const keyboardModeAttribute = "data-rs-keyboard";
+export const pseudoFocusAttribute = "data-rs-focus";

package/constants/keys.d.ts

@@ -0,0 +1,10 @@
+export declare const ESC = "Escape";
+export declare const SPACE = " ";
+export declare const ENTER = "Enter";
+export declare const TAB = "Tab";
+export declare const UP = "ArrowUp";
+export declare const DOWN = "ArrowDown";
+export declare const RIGHT = "ArrowRight";
+export declare const LEFT = "ArrowLeft";
+export declare const HOME = "Home";
+export declare const END = "End";

package/constants/keys.js

@@ -0,0 +1,10 @@
+export const ESC = "Escape";
+export const SPACE = " ";
+export const ENTER = "Enter";
+export const TAB = "Tab";
+export const UP = "ArrowUp";
+export const DOWN = "ArrowDown";
+export const RIGHT = "ArrowRight";
+export const LEFT = "ArrowLeft";
+export const HOME = "Home";
+export const END = "End";

package/constants/timeouts.d.ts

@@ -0,0 +1,2 @@
+export declare const mouseEnter = 100;
+export declare const mouseLeave = 150;

package/constants/timeouts.js

@@ -0,0 +1,2 @@
+export const mouseEnter = 100;
+export const mouseLeave = 150;

package/hooks/_private/useFlyout.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+/**
+ * Typings
+ */
+export type FlyoutPosition = "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "start" | "start-top" | "start-bottom" | "end" | "end-top" | "end-bottom";
+export type FlyoutWidth = "trigger" | string;
+type ElementRef = React.RefObject<HTMLElement>;
+type PassedFlyoutOptions = {
+    width?: FlyoutWidth;
+    position?: FlyoutPosition;
+    defaultActive?: boolean;
+    forcePosition?: boolean;
+};
+type FlyoutStyles = React.CSSProperties;
+type FlyoutState = {
+    styles: FlyoutStyles;
+    position?: FlyoutPosition;
+    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
+};
+type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<FlyoutState, "styles" | "position" | "status"> & {
+    updatePosition: () => void;
+    render: () => void;
+    hide: () => void;
+    remove: () => void;
+};
+declare const useFlyout: UseFlyout;
+export default useFlyout;

package/hooks/_private/useFlyout.js

@@ -0,0 +1,269 @@
+import React from "react";
+import useRTL from "../useRTL.js";
+import { usePortal } from "../../components/_private/Portal/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+const SCREEN_OFFSET = 16;
+const topPos = ["top-start", "top", "top-end"];
+const bottomPos = ["bottom-start", "bottom", "bottom-end"];
+const startPos = ["start", "start-bottom", "start-top"];
+const endPos = ["end", "end-bottom", "end-top"];
+const order = {
+    top: [...topPos, ...bottomPos, ...endPos, ...startPos],
+    bottom: [...bottomPos, ...topPos, ...endPos, ...startPos],
+    start: [...startPos, ...endPos, ...topPos, ...bottomPos],
+    end: [...endPos, ...startPos, ...topPos, ...bottomPos],
+};
+const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};
+/**
+ * Get an order of positions to try to fit popover on the screen based on its starting position
+ */
+const getPositionOrder = (position) => {
+    const types = ["top", "bottom", "start", "end"];
+    const type = types.find((type) => position.startsWith(type)) || "bottom";
+    return order[type];
+};
+/**
+ * Check if element visually fits on the screen
+ */
+const fullyVisible = (bounds) => {
+    const htmlEl = document.documentElement;
+    const pageLeft = htmlEl.scrollLeft;
+    const pageRight = pageLeft + htmlEl.clientWidth;
+    const pageTop = htmlEl.scrollTop;
+    const pageBottom = pageTop + htmlEl.clientHeight;
+    return (bounds.left >= pageLeft &&
+        bounds.left + bounds.width <= pageRight &&
+        bounds.top >= pageTop &&
+        bounds.top + bounds.height <= pageBottom);
+};
+/**
+ * Calculate styles for the current position
+ */
+const calculatePosition = (originBounds, targetBounds, options) => {
+    const { position: passedPosition, rtl, width, isInsidePortal } = options;
+    let left = 0;
+    let top = 0;
+    let position = passedPosition;
+    if (rtl)
+        position = getRTLPosition(position);
+    if (width === "full" || width === "trigger") {
+        position = position.includes("top") ? "top" : "bottom";
+    }
+    switch (position) {
+        case "bottom":
+        case "top":
+            left = centerBySize(originBounds.width, targetBounds.width) + originBounds.left;
+            break;
+        case "start":
+        case "start-top":
+        case "start-bottom":
+            left = originBounds.left - targetBounds.width;
+            break;
+        case "end":
+        case "end-top":
+        case "end-bottom":
+            left = originBounds.right;
+            break;
+        case "top-start":
+        case "bottom-start":
+            left = originBounds.left;
+            break;
+        case "top-end":
+        case "bottom-end":
+            left = originBounds.right - targetBounds.width;
+            break;
+        default:
+            break;
+    }
+    switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+            top = originBounds.top - targetBounds.height;
+            break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            top = originBounds.bottom;
+            break;
+        case "start":
+        case "end":
+            top = centerBySize(originBounds.height, targetBounds.height) + originBounds.top;
+            break;
+        case "start-top":
+        case "end-top":
+            top = originBounds.top;
+            break;
+        case "start-bottom":
+        case "end-bottom":
+            top = originBounds.bottom - targetBounds.height;
+            break;
+        default:
+            break;
+    }
+    if (top === undefined || left === undefined) {
+        throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
+    }
+    // When rendered inside portal, we don't need to accommodate for the page scroll
+    top = Math.round(top + (isInsidePortal ? 0 : window.pageYOffset || 0));
+    left = Math.round(left + (isInsidePortal ? 0 : window.pageXOffset || 0));
+    let widthStyle = Math.ceil(targetBounds.width);
+    const height = Math.ceil(targetBounds.height);
+    if (width === "full") {
+        left = SCREEN_OFFSET;
+        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
+    }
+    else if (width === "trigger") {
+        widthStyle = originBounds.width;
+    }
+    const styles = { left, top, width: widthStyle, height };
+    return { styles, position };
+};
+/**
+ * Order of keys here is responsible for the order of styles applied
+ */
+const defaultStyles = {
+    left: 0,
+    top: 0,
+    width: "auto",
+    height: "auto",
+    position: "absolute",
+    // z-index doesn't accept strings
+    zIndex: "var(--rs-z-index-flyout)",
+};
+const resetStyles = {
+    left: 0,
+    top: 0,
+    position: "fixed",
+    opacity: 0,
+    animation: "none",
+    transition: "none",
+    zIndex: "var(--rs-z-index-tooltip)",
+};
+/**
+ * Set position of the target element to fit on the screen
+ */
+const flyout = (origin, target, options) => {
+    const { position, forcePosition, width } = options;
+    const targetClone = target.cloneNode(true);
+    const originBounds = origin.getBoundingClientRect();
+    // Reset all styles applied on the previous hook execution
+    targetClone.style = "";
+    Object.keys(resetStyles).forEach((key) => {
+        const value = resetStyles[key];
+        targetClone.style[key] = value.toString();
+    });
+    if (width) {
+        if (width === "trigger") {
+            targetClone.style.width = `${originBounds.width}px`;
+        }
+        else if (width !== "full") {
+            targetClone.style.width = width;
+        }
+    }
+    document.body.appendChild(targetClone);
+    const targetBounds = targetClone.getBoundingClientRect();
+    let calculated = calculatePosition(originBounds, targetBounds, options);
+    if (!fullyVisible(calculated.styles) && !forcePosition) {
+        const order = getPositionOrder(position);
+        const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
+        const test = (testOrder, extraOptions = {}) => {
+            const { fullWidth } = extraOptions;
+            testOrder.some((currentPosition) => {
+                const calculateOptions = Object.assign(Object.assign({}, options), { width: fullWidth ? "full" : options.width, position: currentPosition });
+                const tested = calculatePosition(originBounds, targetBounds, calculateOptions);
+                if (fullyVisible(tested.styles)) {
+                    calculated = tested;
+                    return true;
+                }
+                return false;
+            });
+        };
+        test(order);
+        if (!fullyVisible(calculated.styles)) {
+            test(mobileOrder, { fullWidth: true });
+        }
+    }
+    targetClone.parentNode.removeChild(targetClone);
+    return calculated;
+};
+const flyoutReducer = (state, action) => {
+    switch (action.type) {
+        case "render":
+            return Object.assign(Object.assign({}, state), { status: "rendered" });
+        case "position":
+            return Object.assign(Object.assign({}, state), { status: state.status === "visible" ? "visible" : "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
+        case "show":
+            return Object.assign(Object.assign({}, state), { status: "visible" });
+        case "hide":
+            return Object.assign(Object.assign({}, state), { status: state.status === "idle" ? "idle" : "hidden" });
+        case "remove":
+            return Object.assign(Object.assign({}, state), { status: "idle", styles: resetStyles });
+        default:
+            throw new Error("Invalid reducer type");
+    }
+};
+const useFlyout = (originRef, targetRef, options) => {
+    const { position: defaultPosition = "bottom", forcePosition, width } = options;
+    const { scopeRef } = usePortal();
+    const isInsidePortal = !!(scopeRef === null || scopeRef === void 0 ? void 0 : scopeRef.current);
+    const [isRTL] = useRTL();
+    const [state, dispatch] = React.useReducer(flyoutReducer, {
+        position: defaultPosition,
+        styles: defaultStyles,
+        status: "idle",
+    });
+    const render = React.useCallback(() => {
+        dispatch({ type: "render" });
+    }, []);
+    const show = React.useCallback(() => {
+        dispatch({ type: "show" });
+    }, []);
+    const hide = React.useCallback(() => {
+        dispatch({ type: "hide" });
+    }, []);
+    const remove = React.useCallback(() => {
+        dispatch({ type: "remove" });
+    }, []);
+    const updatePosition = React.useCallback(() => {
+        if (!originRef.current || !targetRef.current)
+            return;
+        const nextFlyoutData = flyout(originRef.current, targetRef.current, {
+            width,
+            position: defaultPosition,
+            forcePosition,
+            rtl: isRTL,
+            isInsidePortal,
+        });
+        dispatch({ type: "position", payload: nextFlyoutData });
+    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width, isInsidePortal]);
+    React.useEffect(() => {
+        if (state.status === "rendered")
+            updatePosition();
+        // Wait after positioning before show is triggered to animate flyout from the right side
+        if (state.status === "positioned")
+            onNextFrame(() => show());
+    }, [state.status, updatePosition, show]);
+    return React.useMemo(() => ({
+        position: state.position,
+        styles: state.styles,
+        status: state.status,
+        updatePosition,
+        render,
+        hide,
+        remove,
+    }), [render, updatePosition, hide, remove, state.position, state.styles, state.status]);
+};
+export default useFlyout;

package/hooks/_private/useIsDismissible.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Singleton hook to check if multiple elements can be dismissed and returns flag only for the latest one
+ * Example: Use to only close the latest opened Flyout/Modal
+ */
+import React from "react";
+type Ref = React.RefObject<HTMLElement>;
+declare const useIsDismissible: (active: boolean | undefined, contentRef: Ref, triggerRef?: Ref) => () => boolean;
+export default useIsDismissible;

package/hooks/_private/useIsDismissible.js

@@ -0,0 +1,45 @@
+/**
+ * Singleton hook to check if multiple elements can be dismissed and returns flag only for the latest one
+ * Example: Use to only close the latest opened Flyout/Modal
+ */
+import React from "react";
+import useElementId from "../useElementId.js";
+let queue = {};
+let latestId = null;
+const removeFromQueue = (id) => {
+    // Ignore removal of non-existing ids when called on component mount with active: false
+    if (!queue[id])
+        return;
+    if (id === latestId)
+        latestId = queue[id].parentId;
+    delete queue[id];
+    // Clear up all unused ids after the queue is resolved
+    if (latestId === null)
+        queue = {};
+};
+const addToQueue = (id, contentRef, triggerRef) => {
+    var _a;
+    const parentItem = latestId ? queue[latestId] : undefined;
+    const insideParent = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) &&
+        parentItem &&
+        ((_a = parentItem.contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(triggerRef.current));
+    if (!insideParent && triggerRef && latestId) {
+        removeFromQueue(latestId);
+    }
+    queue[id] = { parentId: latestId, triggerRef, contentRef };
+    latestId = id;
+};
+const useIsDismissible = (active = false, contentRef, triggerRef) => {
+    const id = useElementId();
+    const isDismissible = React.useCallback(() => latestId === id, [id]);
+    React.useEffect(() => {
+        if (active) {
+            addToQueue(id, contentRef, triggerRef);
+        }
+        else {
+            removeFromQueue(id);
+        }
+    }, [active, id, contentRef, triggerRef]);
+    return isDismissible;
+};
+export default useIsDismissible;

package/hooks/_private/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useOnClickOutside: (refs: React.RefObject<HTMLElement>[], handler: (event: Event) => void) => void;
+export default useOnClickOutside;

package/hooks/_private/useOnClickOutside.js

@@ -0,0 +1,29 @@
+import React from "react";
+const useOnClickOutside = (refs, handler) => {
+    React.useEffect(() => {
+        if (!handler)
+            return;
+        const handleClick = (event) => {
+            let isInside = false;
+            refs.forEach((elRef) => {
+                if (!elRef.current ||
+                    elRef.current === event.target ||
+                    elRef.current.contains(event.target)) {
+                    isInside = true;
+                }
+            });
+            if (isInside)
+                return;
+            handler(event);
+        };
+        // Using events that happen before click to handle cases when element is hidden on click
+        document.addEventListener("mousedown", handleClick);
+        document.addEventListener("touchstart", handleClick);
+        return () => {
+            document.removeEventListener("mousedown", handleClick);
+            document.removeEventListener("touchstart", handleClick);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handler, ...refs]);
+};
+export default useOnClickOutside;