@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/utilities/dom/useFixedColumns.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFixedColumns = void 0;
+const react_1 = require("react");
+/**
+ * A hook to calculate the position of fixed columns in the DataGrid component.
+ */
+const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
+    const cellRef = (0, react_1.useRef)(null);
+    const [fixedPositionStyles, setFixedPositionStyles] = (0, react_1.useState)();
+    const isCheckboxColumn = enableRowSelection && columnIndex === 0;
+    // Adjust column index when row selection is enabled to account for the checkbox column
+    const actualColumnIndex = (0, react_1.useMemo)(() => {
+        if (columnIndex === undefined)
+            return;
+        return enableRowSelection && !isCheckboxColumn ? columnIndex - 1 : columnIndex;
+    }, [columnIndex, enableRowSelection, isCheckboxColumn]);
+    // Determine if this cell should be fixed
+    const fixedDirection = (0, react_1.useMemo)(() => {
+        if (columnIndex === undefined)
+            return;
+        // Fix checkbox column only when leftFixedColumnIndex is defined
+        if (isCheckboxColumn && leftFixedColumnIndex !== undefined)
+            return 'left';
+        if (leftFixedColumnIndex !== undefined &&
+            actualColumnIndex !== undefined &&
+            actualColumnIndex <= leftFixedColumnIndex)
+            return 'left';
+        if (rightFixedColumnIndex !== undefined &&
+            actualColumnIndex !== undefined &&
+            actualColumnIndex >= rightFixedColumnIndex)
+            return 'right';
+        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
+        // eslint-disable-next-line no-useless-return
+        return;
+    }, [columnIndex, actualColumnIndex, leftFixedColumnIndex, rightFixedColumnIndex, isCheckboxColumn]);
+    const [cellRect, setCellRect] = (0, react_1.useState)();
+    // Calculate the position of the cell in the fixed direction
+    (0, react_1.useLayoutEffect)(() => {
+        if (!cellRef.current)
+            return;
+        const cell = cellRef.current;
+        const table = cell.closest('table');
+        if (!table)
+            return;
+        const tableRect = table.getBoundingClientRect();
+        const cellRect = cell.getBoundingClientRect();
+        // Calculate distance from left edge
+        const leftPosition = cellRect.left - tableRect.left;
+        // Calculate distance from right edge
+        const rightPosition = tableRect.right - cellRect.right;
+        setCellRect({
+            left: leftPosition,
+            right: rightPosition,
+        });
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {
+            setFixedPositionStyles({
+                left: 0,
+            });
+            return;
+        }
+        if (!cellRect)
+            return;
+        setFixedPositionStyles({
+            left: fixedDirection === 'left' ? cellRect.left : undefined,
+            right: fixedDirection === 'right' ? cellRect.right : undefined,
+        });
+    }, [cellRect, fixedDirection, isCheckboxColumn, leftFixedColumnIndex]);
+    const isFixedColumn = (0, react_1.useMemo)(() => fixedDirection !== undefined, [fixedDirection]);
+    const isEdgeFixedColumn = (0, react_1.useMemo)(() => {
+        if (!isFixedColumn)
+            return;
+        if (leftFixedColumnIndex !== undefined && actualColumnIndex === leftFixedColumnIndex)
+            return 'left';
+        if (rightFixedColumnIndex !== undefined && actualColumnIndex === rightFixedColumnIndex)
+            return 'right';
+        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
+        // eslint-disable-next-line no-useless-return
+        return;
+    }, [actualColumnIndex, isFixedColumn, leftFixedColumnIndex, rightFixedColumnIndex]);
+    return {
+        cellRef,
+        isFixedColumn,
+        isEdgeFixedColumn,
+        fixedPositionStyles,
+    };
+};
+exports.useFixedColumns = useFixedColumns;

package/dist/cjs/src/utilities/dom/useFocusTrap.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import { type KeyboardEventHandler } from 'react';
+type Options = {
+    /**
+     * Callback when the key is pressed on the container.
+     * This is called before the focus trap logic, useful when you need to handle some key events before the focus trap.
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    /**
+     * Callback when the Tab key is pressed on a not-focusable element.
+     * Usually used when you need to handle Focus Trap with elements which are focused manually by arrow keys or mouse clicks;
+     *
+     * @param event - The keyboard event.
+     */
+    onPressingTabOnNotFocusableElement?: (event: React.KeyboardEvent) => void;
+};
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - The options for the focus trap.
+ *
+ * @returns The props for the focus trap.
+ */
+export declare function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement }?: Options): {
+    handleOnKeyDown: React.KeyboardEventHandler<HTMLElement>;
+};
+export {};

package/dist/cjs/src/utilities/dom/useFocusTrap.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocusTrap = useFocusTrap;
+const react_1 = require("react");
+const getFocusableNodes_1 = require("./getFocusableNodes");
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - The options for the focus trap.
+ *
+ * @returns The props for the focus trap.
+ */
+function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } = {}) {
+    const handler = (0, react_1.useCallback)((event) => {
+        onKeyDown?.(event);
+        // If prevented by user, we should not do anything
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'Tab')
+            return;
+        const wrapper = event.currentTarget;
+        const focusingElement = wrapper.ownerDocument.activeElement;
+        const focusableNodes = (0, getFocusableNodes_1.getFocusableNodes)(wrapper);
+        const firstFocusableNode = focusableNodes[0];
+        const lastFocusableNode = focusableNodes.at(-1);
+        const focusingOnFirstNode = focusingElement === firstFocusableNode;
+        const focusingOnLastNode = focusingElement === lastFocusableNode;
+        if (event.shiftKey && focusingOnFirstNode) {
+            event.preventDefault();
+            lastFocusableNode?.focus();
+            return;
+        }
+        if (!event.shiftKey && focusingOnLastNode) {
+            event.preventDefault();
+            firstFocusableNode?.focus();
+            return;
+        }
+        const isFocusingOnNotFocusableElement = !focusableNodes.includes(focusingElement);
+        if (isFocusingOnNotFocusableElement) {
+            onPressingTabOnNotFocusableElement?.(event);
+        }
+    }, [onKeyDown, onPressingTabOnNotFocusableElement]);
+    return {
+        handleOnKeyDown: handler,
+    };
+}

package/dist/cjs/src/utilities/dom/useIsTextOverflowed.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to check if text is overflowing a container.
+ *
+ * @param text - The text to check.
+ *
+ * @param ref - The ref of the container.
+ *
+ * @param subtractWidth - The width to subtract from the container width.
+ */
+export declare const useIsTextOverflowed: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number) => boolean;

package/dist/cjs/src/utilities/dom/useIsTextOverflowed.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsTextOverflowed = void 0;
+const react_1 = require("react");
+/**
+ * Hook to check if text is overflowing a container.
+ *
+ * @param text - The text to check.
+ *
+ * @param ref - The ref of the container.
+ *
+ * @param subtractWidth - The width to subtract from the container width.
+ */
+const useIsTextOverflowed = (text, ref, subtractWidth = 0) => {
+    const [isTextOverflowed, setIsTextOverflowed] = (0, react_1.useState)(false);
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const measureTextWidth = () => {
+            if (!ref.current || !text)
+                return;
+            // Create a temporary span for measurement
+            const measurementSpan = document.createElement('span');
+            measurementSpan.style.visibility = 'hidden';
+            measurementSpan.style.position = 'absolute';
+            measurementSpan.style.whiteSpace = 'nowrap';
+            // Copy the computed styles from the actual span
+            const computedStyle = window.getComputedStyle(ref.current);
+            measurementSpan.style.font = computedStyle.font;
+            measurementSpan.style.letterSpacing = computedStyle.letterSpacing;
+            measurementSpan.textContent = text;
+            document.body.append(measurementSpan);
+            const textWidth = measurementSpan.offsetWidth;
+            measurementSpan.remove();
+            // Get container width
+            const containerWidth = ref.current.parentElement?.offsetWidth ?? 0;
+            const availableWidth = containerWidth - subtractWidth;
+            setIsTextOverflowed(textWidth > availableWidth);
+        };
+        // Initial measurement
+        measureTextWidth();
+        // Set up ResizeObserver to handle container size changes
+        if (ref.current?.parentElement) {
+            resizeObserverRef.current = new ResizeObserver(() => {
+                measureTextWidth();
+            });
+            resizeObserverRef.current.observe(ref.current.parentElement);
+        }
+        // Clean up
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [ref, text, subtractWidth]);
+    return isTextOverflowed;
+};
+exports.useIsTextOverflowed = useIsTextOverflowed;

package/dist/cjs/src/utilities/dom/useIsTouchDevice.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook to detect if the current device is a touch device.
+ * Uses the CSS media query `(pointer: coarse)` to detect coarse pointer devices (typically touch screens).
+ *
+ * Note: To avoid hydration mismatches in SSR environments (e.g., Next.js),
+ * this hook always returns `false` on the initial render (both server and client).
+ * The correct value is set after the first client-side render via useEffect.
+ *
+ * @returns true if the device has a coarse pointer (touch device), false otherwise
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTouchDevice = useIsTouchDevice();
+ *
+ *   return (
+ *     <div>
+ *       {isTouchDevice ? 'Touch Device' : 'Desktop Device'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useIsTouchDevice(): boolean;

package/dist/cjs/src/utilities/dom/useIsTouchDevice.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsTouchDevice = useIsTouchDevice;
+const react_1 = require("react");
+/**
+ * Hook to detect if the current device is a touch device.
+ * Uses the CSS media query `(pointer: coarse)` to detect coarse pointer devices (typically touch screens).
+ *
+ * Note: To avoid hydration mismatches in SSR environments (e.g., Next.js),
+ * this hook always returns `false` on the initial render (both server and client).
+ * The correct value is set after the first client-side render via useEffect.
+ *
+ * @returns true if the device has a coarse pointer (touch device), false otherwise
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTouchDevice = useIsTouchDevice();
+ *
+ *   return (
+ *     <div>
+ *       {isTouchDevice ? 'Touch Device' : 'Desktop Device'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+function useIsTouchDevice() {
+    const [isTouchDevice, setIsTouchDevice] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            setIsTouchDevice(window.matchMedia('(pointer: coarse)').matches);
+        }
+    }, []);
+    return isTouchDevice;
+}

package/dist/cjs/src/utilities/dom/useMiddleTruncatedText.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to return a middle-truncated string that fits within the available width of the span's container.
+ * Truncation respects grapheme cluster boundaries when possible (via Intl.Segmenter),
+ * and falls back to iterating over code points where Segmenter is not available.
+ *
+ * The available width is computed as parentElement.offsetWidth - subtractWidth.
+ * Measurement is done by creating an offscreen span copying relevant computed font styles
+ * from the referenced span to ensure accurate width measurement.
+ *
+ * @param text - The text to truncate.
+ *
+ * @param ref - The ref to the span element.
+ *
+ * @param subtractWidth - The width to subtract from the available width.
+ *
+ * @param ellipsis - The ellipsis to use when truncating.
+ *
+ * @returns The truncated text.
+ */
+export declare const useMiddleTruncatedText: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number, ellipsis?: string) => string;

package/dist/cjs/src/utilities/dom/useMiddleTruncatedText.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMiddleTruncatedText = void 0;
+const react_1 = require("react");
+let cachedMeasurementSpan = null;
+const getOrCreateMeasurementSpan = () => {
+    if (typeof document === 'undefined')
+        return null;
+    if (cachedMeasurementSpan?.isConnected)
+        return cachedMeasurementSpan;
+    const span = document.createElement('span');
+    span.style.visibility = 'hidden';
+    span.style.position = 'absolute';
+    span.style.whiteSpace = 'nowrap';
+    span.style.left = '-9999px';
+    span.style.top = '0';
+    document.body.append(span);
+    cachedMeasurementSpan = span;
+    return cachedMeasurementSpan;
+};
+/**
+ * Hook to return a middle-truncated string that fits within the available width of the span's container.
+ * Truncation respects grapheme cluster boundaries when possible (via Intl.Segmenter),
+ * and falls back to iterating over code points where Segmenter is not available.
+ *
+ * The available width is computed as parentElement.offsetWidth - subtractWidth.
+ * Measurement is done by creating an offscreen span copying relevant computed font styles
+ * from the referenced span to ensure accurate width measurement.
+ *
+ * @param text - The text to truncate.
+ *
+ * @param ref - The ref to the span element.
+ *
+ * @param subtractWidth - The width to subtract from the available width.
+ *
+ * @param ellipsis - The ellipsis to use when truncating.
+ *
+ * @returns The truncated text.
+ */
+const useMiddleTruncatedText = (text, ref, subtractWidth = 0, ellipsis = '…') => {
+    const [truncated, setTruncated] = (0, react_1.useState)(text);
+    const resizeObserverRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        // Type guard to check if Intl.Segmenter is available
+        const hasIntlSegmenter = () => 'Segmenter' in Intl && typeof Intl['Segmenter'] === 'function';
+        const splitIntoGraphemes = (input) => {
+            // Prefer Intl.Segmenter when available for grapheme cluster segmentation
+            if (hasIntlSegmenter()) {
+                const SegmenterConstructor = Intl['Segmenter'];
+                if (SegmenterConstructor) {
+                    const segmenter = new SegmenterConstructor(undefined, { granularity: 'grapheme' });
+                    const segments = [];
+                    for (const { segment } of segmenter.segment(input)) {
+                        segments.push(segment);
+                    }
+                    return segments;
+                }
+            }
+            // Fallback: iterate code points
+            // eslint-disable-next-line unicorn/prefer-spread
+            return Array.from(input);
+        };
+        const measureCandidateWidth = (candidate) => {
+            if (!ref.current)
+                return Number.POSITIVE_INFINITY;
+            const measurementSpan = getOrCreateMeasurementSpan();
+            if (!measurementSpan)
+                return Number.POSITIVE_INFINITY;
+            const target = ref.current;
+            const computedStyle = window.getComputedStyle(target);
+            measurementSpan.style.font = computedStyle.font;
+            measurementSpan.style.letterSpacing = computedStyle.letterSpacing;
+            measurementSpan.style.fontKerning = computedStyle.fontKerning;
+            measurementSpan.style.fontFeatureSettings = computedStyle.fontFeatureSettings;
+            measurementSpan.textContent = candidate;
+            const width = measurementSpan.offsetWidth;
+            return width;
+        };
+        const recompute = () => {
+            if (!ref.current) {
+                setTruncated(text);
+                return;
+            }
+            const parentWidth = ref.current.parentElement?.offsetWidth ?? 0;
+            const availableWidth = Math.max(parentWidth - subtractWidth, 0);
+            // If layout width is unavailable (e.g., SSR/jsdom offsetWidth=0), show full text instead of ellipsis
+            if (availableWidth <= 0) {
+                setTruncated(text);
+                return;
+            }
+            if (!text) {
+                setTruncated('');
+                return;
+            }
+            // Heuristic: avoid truncation for short names to prevent over-aggressive ellipsis
+            if (text.length <= 10) {
+                setTruncated(text);
+                return;
+            }
+            // Early exit: text fits already
+            const fullWidth = measureCandidateWidth(text);
+            if (fullWidth <= availableWidth) {
+                setTruncated(text);
+                return;
+            }
+            const graphemes = splitIntoGraphemes(text);
+            // Binary search for the maximum number of edge graphemes we can keep combined
+            let low = 0;
+            let high = graphemes.length; // inclusive search over count of kept graphemes
+            let best = ellipsis; // default to ellipsis if nothing fits
+            while (low <= high) {
+                const mid = Math.floor((low + high) / 2); // total kept graphemes on both sides
+                const leftCount = Math.ceil(mid / 2);
+                const rightCount = Math.floor(mid / 2);
+                const candidate = graphemes.slice(0, leftCount).join('') + ellipsis + graphemes.slice(graphemes.length - rightCount).join('');
+                const width = measureCandidateWidth(candidate);
+                if (width <= availableWidth) {
+                    best = candidate;
+                    low = mid + 1; // try keeping more
+                }
+                else {
+                    high = mid - 1; // keep fewer
+                }
+            }
+            // If even the computed best does not fit, fall back to ellipsis
+            if (measureCandidateWidth(best) > availableWidth) {
+                setTruncated(ellipsis);
+                return;
+            }
+            setTruncated(best);
+        };
+        // Initial compute
+        recompute();
+        // Observe container size changes
+        if (ref.current?.parentElement) {
+            resizeObserverRef.current = new ResizeObserver(() => {
+                recompute();
+            });
+            resizeObserverRef.current.observe(ref.current.parentElement);
+        }
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [ellipsis, ref, subtractWidth, text]);
+    return truncated;
+};
+exports.useMiddleTruncatedText = useMiddleTruncatedText;

package/dist/cjs/src/utilities/dom/useOnClickOutside.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+type UseOnClickOutsideOptions = {
+    /**
+     * Whether or not a click outside the element can be performed
+     */
+    ignoreRefs?: RefObject<HTMLElement | null>[];
+    /**
+     * Elements to Ignore Determination
+     */
+    disabled?: boolean;
+};
+/**
+ * Hooks to detect clicks outside the element specified by ref
+ *
+ * {@link https://usehooks.com/useOnClickOutside/}
+ *
+ * @param ref - target element
+ *
+ * @param handler - Function to be executed when a click is detected
+ *
+ * @param options - An object of the following properties: ignoreRefs, disabled
+ */
+export declare const useOnClickOutside: (ref: RefObject<HTMLElement | null>, handler: EventListener, options?: UseOnClickOutsideOptions) => void;
+export {};

package/dist/cjs/src/utilities/dom/useOnClickOutside.js

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOnClickOutside = void 0;
+const react_1 = require("react");
+const getRootNode_1 = require("./getRootNode");
+/**
+ * Helper function to get the nesting depth of a popover portal element.
+ * Returns the depth stored in the data-mfui-popover-depth attribute.
+ *
+ * @param portalElement - The portal element to get depth from
+ */
+const getPortalNestingDepth = (portalElement) => {
+    const depthAttribute = portalElement.dataset['mfuiPopoverDepth'];
+    return depthAttribute ? Number.parseInt(depthAttribute, 10) : 0;
+};
+/**
+ * Helper function to get the nesting depth of a popover container element.
+ * Looks for the closest popover portal parent and returns its depth.
+ *
+ * @param container - The container element to find parent portal depth for
+ */
+const getContainerNestingDepth = (container) => {
+    const parentPortal = container.closest('[data-mfui-content="popover-portal-content"]');
+    return parentPortal ? getPortalNestingDepth(parentPortal) : 0;
+};
+/**
+ * Helper function to check if a click event is within a nested popover portal
+ * that is deeper than the current popover container.
+ * This prevents outer popovers from closing when interacting with nested popovers.
+ *
+ * @param eventTarget - The target of the click event
+ *
+ * @param container - The container element to check nesting against
+ */
+const isNestedPopoverPortalClick = (eventTarget, container) => {
+    // Find the closest popover portal element from the event target
+    const clickedPortal = eventTarget.closest('[data-mfui-content="popover-portal-content"]');
+    if (!clickedPortal) {
+        return false;
+    }
+    // Get the nesting depths
+    const clickedPortalDepth = getPortalNestingDepth(clickedPortal);
+    const containerDepth = getContainerNestingDepth(container);
+    // IMPORTANT FIX: If the clicked portal is the SAME as our container's portal,
+    // this is an internal click and should NOT be treated as nested.
+    // Only treat as nested if clicked portal is DEEPER than our container's portal.
+    const containerPortal = container.closest('[data-mfui-content="popover-portal-content"]');
+    if (clickedPortal === containerPortal) {
+        // This is a click inside our own popover - let it proceed normally
+        return false;
+    }
+    // If the clicked portal is deeper nested than our container, it's a child portal
+    // In this case, don't close the parent popover
+    return clickedPortalDepth > containerDepth;
+};
+/**
+ * Hooks to detect clicks outside the element specified by ref
+ *
+ * {@link https://usehooks.com/useOnClickOutside/}
+ *
+ * @param ref - target element
+ *
+ * @param handler - Function to be executed when a click is detected
+ *
+ * @param options - An object of the following properties: ignoreRefs, disabled
+ */
+const useOnClickOutside = (ref, handler, options) => {
+    (0, react_1.useEffect)(() => {
+        // Track processed events to prevent duplicate handler calls
+        const processedEvents = new WeakSet();
+        // mousedown or touch listener
+        const listener = (event) => {
+            if (options?.disabled) {
+                return;
+            }
+            // Prevent duplicate handler calls for the same event
+            if (processedEvents.has(event)) {
+                return;
+            }
+            processedEvents.add(event);
+            const eventTargetNode = event.target;
+            if (!ref.current || ref.current.contains(eventTargetNode)) {
+                return;
+            }
+            // Check if this is a click inside a nested popover portal that originated
+            // from content within our popover. If so, don't close the outer popover.
+            if (isNestedPopoverPortalClick(eventTargetNode, ref.current)) {
+                return;
+            }
+            const isEventTargetIgnored = options?.ignoreRefs?.some((value) => value.current?.contains(eventTargetNode));
+            if (isEventTargetIgnored) {
+                return;
+            }
+            handler(event);
+        };
+        const rootNode = (0, getRootNode_1.getRootNode)(ref.current, { allowDetached: true });
+        // When inside a Shadow DOM, we need to listen to both the Shadow DOM root
+        // and the document to catch clicks both inside and outside the Shadow DOM
+        const eventTargets = [];
+        if (rootNode) {
+            eventTargets.push(rootNode);
+            // If we're in a Shadow DOM, also listen to the document for clicks outside the Shadow DOM
+            if (rootNode instanceof ShadowRoot && typeof document !== 'undefined') {
+                eventTargets.push(document);
+            }
+        }
+        // Add event listeners to all targets
+        eventTargets.forEach((target) => {
+            target.addEventListener('mousedown', listener);
+            target.addEventListener('touchstart', listener);
+        });
+        return () => {
+            // Remove event listeners from all targets
+            eventTargets.forEach((target) => {
+                target.removeEventListener('mousedown', listener);
+                target.removeEventListener('touchstart', listener);
+            });
+        };
+    }, [ref, handler, options]);
+};
+exports.useOnClickOutside = useOnClickOutside;

package/dist/cjs/src/utilities/dom/usePopoverMenuPlacement.d.ts

@@ -0,0 +1,58 @@
+import { type CSSProperties } from 'react';
+import { type PopoverPlacement } from '../../Popover/Popover.types';
+type Options = {
+    minWidth?: CSSProperties['minWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Allowed placements for the popover menu.
+     * When provided, the popover will try each placement in order until it finds one that fits.
+     *
+     * @default ['bottom-start', 'bottom-end', 'top-start', 'top-end']
+     */
+    allowedPlacements?: PopoverPlacement[];
+    /**
+     * Whether to enable viewport constraint for the popover content.
+     * When enabled, the popover will be constrained to fit within the viewport.
+     * When disabled, the popover content can overflow the viewport boundaries.
+     *
+     * @default true
+     */
+    enableViewportConstraint?: boolean;
+    /**
+     * Whether to constrain the popover width to exactly match the reference element width.
+     * When enabled, both minWidth and maxWidth will be set to the reference width.
+     *
+     * @default false
+     */
+    constrainToTriggerWidth?: boolean;
+    /**
+     * Enable centered layout on narrow viewport (< 600px).
+     * When enabled, the popover will be centered horizontally on the screen
+     * with 14px margins on both sides, instead of being positioned relative to the trigger.
+     *
+     * @default false
+     */
+    enableCenteredLayoutOnNarrowViewport?: boolean;
+};
+/**
+ * Manages the placement of a popover menu relative to a target element and trigger element.
+ *
+ * @param options - Configuration options
+ *
+ * @param options.minWidth - The minimum width of the popover menu. Default is the width of the trigger element.
+ *
+ * @param options.allowedPlacements - The allowed placements for the popover menu. Default is ['bottom-start', 'bottom-end', 'top-start', 'top-end'].
+ *
+ * @param options.enableViewportConstraint - Whether to enable viewport constraint for the popover content. Default is true.
+ */
+export declare function usePopoverMenuPlacement({ minWidth, maxHeight, allowedPlacements, enableViewportConstraint, constrainToTriggerWidth, enableCenteredLayoutOnNarrowViewport, }?: Options): {
+    refs: {
+        reference: import("react").MutableRefObject<HTMLElement | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: HTMLElement | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    };
+    floatingStyles: CSSProperties;
+    update: () => void;
+};
+export {};