reshaped 2.8.0 → 2.8.2

package/dist/components/View/View.js

@@ -0,0 +1,143 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/helpers.js";
+import Divider from "../Divider/index.js";
+import Hidden from "../Hidden/index.js";
+import s from "./View.module.css";
+import getRadiusStyles from "../../styles/radius/index.js";
+import getBleedStyles from "../../styles/bleed/index.js";
+import getWidthStyles from "../../styles/width/index.js";
+import getHeightStyles from "../../styles/height/index.js";
+import getMaxWidthStyles from "../../styles/maxWidth/index.js";
+import getMaxHeightStyles from "../../styles/maxHeight/index.js";
+import getMinWidthStyles from "../../styles/minWidth/index.js";
+import getMinHeightStyles from "../../styles/minHeight/index.js";
+import getPositionStyles from "../../styles/position/index.js";
+import getInsetStyles from "../../styles/inset/index.js";
+import getAspectRatioStyles from "../../styles/aspectRatio/index.js";
+const ViewItem = (props) => {
+    const { columns, grow, gapBefore, as: TagName = "div", order, children, className, attributes, } = props;
+    const itemClassNames = classNames(s.item, className, gapBefore === "auto" && s["item--gap-auto"], gapBefore !== undefined && s["item--gap-before"], columns && s["item--columns"], ...responsiveClassNames(s, "item--grow", grow), ...responsiveClassNames(s, "item--columns", columns));
+    const itemVariables = Object.assign(Object.assign({}, responsiveVariables("--rs-view-item-order", order)), responsiveVariables("--rs-view-item-gap-before", gapBefore));
+    return (_jsx(TagName, Object.assign({}, attributes, { style: Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), itemVariables), className: itemClassNames, children: children })));
+};
+const View = (props) => {
+    const { 
+    /**
+     * Layout props
+     */
+    align, justify, wrap, gap, height, width, aspectRatio, maxHeight, maxWidth, minHeight, minWidth, padding, paddingInline, paddingBlock, paddingBottom, paddingEnd, paddingStart, paddingTop, bleed, 
+    /**
+     * Style props
+     * */
+    animated, backgroundColor, borderColor, borderRadius, shadow, textAlign, overflow, position = "relative", inset, insetTop, insetBottom, insetStart, insetEnd, zIndex, 
+    /**
+     * Item prop
+     */
+    grow, 
+    /**
+     * Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
+     * It still resolves the attributes correctly based on the tag
+     */
+    as: TagName = "div", children, divided, className, attributes, } = props;
+    let isFlex = !!align || !!justify || !!gap || !!props.direction;
+    const direction = props.direction || (isFlex ? "column" : undefined);
+    const radiusStyles = getRadiusStyles(borderRadius);
+    const bleedStyles = getBleedStyles(bleed);
+    const widthStyles = getWidthStyles(width);
+    const heightStyles = getHeightStyles(height);
+    const maxWidthStyles = getMaxWidthStyles(maxWidth);
+    const maxHeightStyles = getMaxHeightStyles(maxHeight);
+    const minWidthStyles = getMinWidthStyles(minWidth);
+    const minHeightStyles = getMinHeightStyles(minHeight);
+    const positionStyles = getPositionStyles(position);
+    const insetStyles = getInsetStyles(inset);
+    const insetTopStyles = getInsetStyles(insetTop, "top");
+    const insetBottomStyles = getInsetStyles(insetBottom, "bottom");
+    const insetStartStyles = getInsetStyles(insetStart, "start");
+    const insetEndStyles = getInsetStyles(insetEnd, "end");
+    const aspectRatioStyles = getAspectRatioStyles(aspectRatio);
+    let renderedItemIndex = 0;
+    // If wrap is not defined, it can be set based on item grow and split usage
+    let nowrap;
+    const renderDivider = ({ className, key }) => {
+        const dividerClassName = classNames(s.divider, className);
+        let isDividerVertical = false;
+        if (typeof direction === "string" && direction.startsWith("row")) {
+            isDividerVertical = true;
+        }
+        else if (direction) {
+            const viewports = Object.keys(direction);
+            isDividerVertical = viewports.reduce((acc, viewport) => {
+                const viewportDirection = direction[viewport];
+                if (!viewportDirection)
+                    return acc;
+                return Object.assign(Object.assign({}, acc), { [viewport]: viewportDirection.startsWith("row") });
+            }, {});
+        }
+        return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
+    };
+    const renderItem = ({ className, child, index }) => {
+        var _a, _b, _c;
+        const isItem = child.type === ViewItem;
+        const isView = child.type === View;
+        const key = child.key || index;
+        const dividerElement = !!index && divided && renderDivider({ className, key });
+        let itemElement;
+        if (isItem) {
+            itemElement = React.cloneElement(child, {
+                className: classNames(className, child.props.className),
+            });
+        }
+        else if (className || !React.isValidElement(child)) {
+            itemElement = (_jsx("div", { className: className, children: child }, key));
+        }
+        else {
+            itemElement = child;
+        }
+        // Passing grow here because it's responsive and nowrap should follow it
+        if (isItem && ((_a = child.props) === null || _a === void 0 ? void 0 : _a.grow))
+            nowrap = child.props.grow;
+        if (isItem && ((_b = child.props) === null || _b === void 0 ? void 0 : _b.gap) === "auto")
+            nowrap = true;
+        if ((isItem || isView) && ((_c = child.props) === null || _c === void 0 ? void 0 : _c.grow))
+            isFlex = true;
+        return [dividerElement, itemElement];
+    };
+    const formattedChildren = React.Children.map(children, (child, index) => {
+        if (!child)
+            return null;
+        // Ignore the indices of the items that rendered nothing
+        const renderedIndex = renderedItemIndex;
+        renderedItemIndex += 1;
+        if (child.type === Hidden && typeof child.props.children !== "function") {
+            const _a = child.props, { children: hiddenChild } = _a, hiddenProps = __rest(_a, ["children"]);
+            const key = child.key || index;
+            return (_createElement(Hidden, Object.assign({}, hiddenProps, { key: key }), (className) => renderItem({ className, child: hiddenChild, index: renderedIndex })));
+        }
+        return renderItem({ child, index: renderedIndex });
+    });
+    // Classnames and attributes are written here so we can assign nowrap to the root element based on the children
+    const rootClassNames = classNames(s.root, className, radiusStyles === null || radiusStyles === void 0 ? void 0 : radiusStyles.classNames, positionStyles === null || positionStyles === void 0 ? void 0 : positionStyles.classNames, bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.classNames, widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.classNames, heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.classNames, aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.classNames, maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.classNames, maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.classNames, minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.classNames, minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.classNames, insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.classNames, insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.classNames, insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.classNames, insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.classNames, insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.classNames, textAlign && s[`--align-text-${textAlign}`], backgroundColor && s[`--bg-${backgroundColor}`], borderColor && s[`--bd-${borderColor}`], borderColor && s["--bd"], shadow && s[`--shadow-${shadow}`], overflow && s[`--overflow-${overflow}`], animated && s["--animated"], divided && s["--divided"], (padding !== undefined || paddingInline !== undefined || paddingBlock !== undefined) &&
+        s["--padding"], paddingBottom !== undefined && s["--padding-bottom"], paddingEnd !== undefined && s["--padding-end"], paddingStart !== undefined && s["--padding-start"], paddingTop !== undefined && s["--padding-top"], (isFlex || nowrap) && s["--flex"], ...responsiveClassNames(s, "--direction", direction), ...responsiveClassNames(s, "--align", align), ...responsiveClassNames(s, "--justify", justify), 
+    // Wrap and nowrap are separate here because inverting any of them could result into a false value which will be ignored by classNames
+    ...responsiveClassNames(s, "--nowrap", nowrap || wrap === false), ...responsiveClassNames(s, "--wrap", wrap), 
+    // Item classnames
+    ...responsiveClassNames(s, "item--grow", grow));
+    const rootVariables = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, attributes === null || attributes === void 0 ? void 0 : attributes.style), responsiveVariables("--rs-view-gap", gap)), responsiveVariables("--rs-view-p-vertical", paddingBlock || padding)), responsiveVariables("--rs-view-p-horizontal", paddingInline || padding)), responsiveVariables("--rs-view-p-bottom", paddingBottom)), responsiveVariables("--rs-view-p-top", paddingTop)), responsiveVariables("--rs-view-p-start", paddingStart)), responsiveVariables("--rs-view-p-end", paddingEnd)), bleedStyles === null || bleedStyles === void 0 ? void 0 : bleedStyles.variables), widthStyles === null || widthStyles === void 0 ? void 0 : widthStyles.variables), heightStyles === null || heightStyles === void 0 ? void 0 : heightStyles.variables), aspectRatioStyles === null || aspectRatioStyles === void 0 ? void 0 : aspectRatioStyles.variables), maxWidthStyles === null || maxWidthStyles === void 0 ? void 0 : maxWidthStyles.variables), maxHeightStyles === null || maxHeightStyles === void 0 ? void 0 : maxHeightStyles.variables), minWidthStyles === null || minWidthStyles === void 0 ? void 0 : minWidthStyles.variables), minHeightStyles === null || minHeightStyles === void 0 ? void 0 : minHeightStyles.variables), insetStyles === null || insetStyles === void 0 ? void 0 : insetStyles.variables), insetTopStyles === null || insetTopStyles === void 0 ? void 0 : insetTopStyles.variables), insetBottomStyles === null || insetBottomStyles === void 0 ? void 0 : insetBottomStyles.variables), insetStartStyles === null || insetStartStyles === void 0 ? void 0 : insetStartStyles.variables), insetEndStyles === null || insetEndStyles === void 0 ? void 0 : insetEndStyles.variables), (zIndex ? { "--rs-view-z": zIndex } : {}));
+    return (_jsx(TagName, Object.assign({}, attributes, { className: rootClassNames, style: rootVariables, children: formattedChildren })));
+};
+View.Item = ViewItem;
+export default View;

package/dist/components/View/View.types.d.ts

@@ -0,0 +1,66 @@
+import type React from "react";
+import type * as G from "../../types/global";
+import type * as TStyles from "../../styles/types";
+type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "auto";
+export type Direction = "row" | "column" | "row-reverse" | "column-reverse";
+export type Props<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    children?: React.ReactNode;
+    as?: TagName;
+    divided?: boolean;
+    direction?: G.Responsive<Direction>;
+    gap?: G.Responsive<number>;
+    wrap?: G.Responsive<boolean>;
+    align?: G.Responsive<"center" | "start" | "end" | "stretch" | "baseline">;
+    justify?: G.Responsive<"center" | "start" | "end" | "space-between">;
+    height?: G.Responsive<string | number>;
+    width?: G.Responsive<string | number>;
+    aspectRatio?: G.Responsive<number>;
+    maxHeight?: G.Responsive<string | number>;
+    maxWidth?: G.Responsive<string | number>;
+    minHeight?: G.Responsive<string | number>;
+    minWidth?: G.Responsive<string | number>;
+    padding?: G.Responsive<number>;
+    paddingTop?: G.Responsive<number>;
+    paddingBottom?: G.Responsive<number>;
+    paddingStart?: G.Responsive<number>;
+    paddingEnd?: G.Responsive<number>;
+    paddingInline?: G.Responsive<number>;
+    paddingBlock?: G.Responsive<number>;
+    bleed?: G.Responsive<number>;
+    textAlign?: "center" | "start" | "end";
+    backgroundColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "positive" | "warning" | "warning-faded" | "positive-faded" | "primary" | "primary-faded" | "elevation-base" | "elevation-raised" | "elevation-overlay" | "page" | "page-faded" | "disabled" | "disabled-faded" | "brand" | "white" | "black";
+    borderColor?: "neutral" | "neutral-faded" | "critical" | "critical-faded" | "warning" | "warning-faded" | "positive" | "positive-faded" | "primary" | "primary-faded" | "disabled" | "brand" | "transparent";
+    borderRadius?: G.Responsive<TStyles.Radius>;
+    position?: G.Responsive<TStyles.Position>;
+    inset?: G.Responsive<number>;
+    insetStart?: G.Responsive<number>;
+    insetEnd?: G.Responsive<number>;
+    insetTop?: G.Responsive<number>;
+    insetBottom?: G.Responsive<number>;
+    zIndex?: number;
+    shadow?: "raised" | "overlay";
+    overflow?: "hidden" | "auto";
+    animated?: boolean;
+    className?: G.ClassName;
+    attributes?: G.Attributes<TagName>;
+} & Pick<ItemProps, "grow">;
+export type ItemProps<TagName extends keyof JSX.IntrinsicElements = "div"> = {
+    order?: G.Responsive<number>;
+    columns?: G.Responsive<Columns>;
+    grow?: G.Responsive<boolean>;
+    gapBefore?: G.Responsive<number> | "auto";
+    as?: TagName;
+    attributes?: G.Attributes<TagName>;
+    className?: G.ClassName;
+    children?: React.ReactNode;
+};
+export type RenderItem = (args: {
+    className?: string;
+    child: any;
+    index: number;
+}) => React.ReactNode;
+export type RenderDivider = (args: {
+    className?: string;
+    key: string;
+}) => React.ReactNode;
+export {};

package/dist/components/_private/Aligner/Aligner.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Aligner is a utility used across multiple components to apply
+ * negative margin based on the component padding to align its text content
+ * visually with the rest of the page
+ *
+ * It relies on using a data-rs-aligner-target attribute in other components and works based
+ * on the --rs-p, --rs-p-v and --rs-p-h css variables
+ */
+import type * as T from "./Aligner.types";
+declare const Aligner: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default Aligner;

package/dist/components/_private/Aligner/Aligner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "../../../utilities/helpers.js";
+import s from "./Aligner.module.css";
+const Aligner = (props) => {
+    const { side: passedSide = "all", children, className, attributes } = props;
+    const sides = typeof passedSide === "string" ? [passedSide] : passedSide;
+    const rootClassNames = classNames(s.root, sides.map((side) => s[`--side-${side}`]), className);
+    return (_jsx("div", Object.assign({}, attributes, { className: rootClassNames, children: children })));
+};
+export default Aligner;

package/dist/components/_private/Expandable/Expandable.d.ts

@@ -0,0 +1,3 @@
+import * as T from "./Expandable.types";
+declare const Expandable: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element;
+export default Expandable;

package/dist/components/_private/Expandable/Expandable.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import { onNextFrame } from "../../../utilities/animation.js";
+import s from "./Expandable.module.css";
+const Expandable = (props) => {
+    const { children, active, attributes } = props;
+    const rootRef = React.useRef(null);
+    const mountedRef = React.useRef(false);
+    const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
+    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const handleTransitionEnd = (e) => {
+        if (e.propertyName !== "height")
+            return;
+        setAnimatedHeight(active ? "auto" : null);
+    };
+    // Avoid animations happening if component is active by default
+    // onNextFrame lets us wait for the component to render first
+    React.useEffect(() => {
+        onNextFrame(() => {
+            mountedRef.current = true;
+        });
+    }, []);
+    React.useEffect(() => {
+        const rootEl = rootRef.current;
+        if (!rootEl || !mountedRef.current)
+            return;
+        let targetHeight = 0;
+        if (active) {
+            rootEl.style.height = "auto";
+            targetHeight = rootEl.clientHeight;
+            rootEl.style.height = "0";
+        }
+        if (!active) {
+            rootEl.style.height = `${rootEl.clientHeight}px`;
+        }
+        setAnimatedHeight(targetHeight);
+    }, [active]);
+    return (_jsx("div", Object.assign({}, attributes, { className: contentClassNames, ref: rootRef, style: animatedHeight !== null
+            ? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }
+            : undefined, onTransitionEnd: handleTransitionEnd, role: "region", hidden: !active && animatedHeight === null, children: children })));
+};
+export default Expandable;

package/dist/components/_private/Flyout/Flyout.d.ts

@@ -0,0 +1,7 @@
+import type * as T from "./Flyout.types";
+declare const Flyout: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Trigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+};
+export default Flyout;

package/dist/components/_private/Flyout/Flyout.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
+import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
+import FlyoutContent from "./FlyoutContent.js";
+const Flyout = (props) => {
+    const { active } = props;
+    if (typeof active === "boolean")
+        return _jsx(FlyoutControlled, Object.assign({}, props));
+    return _jsx(FlyoutUncontrolled, Object.assign({}, props));
+};
+Flyout.Trigger = FlyoutTrigger;
+Flyout.Content = FlyoutContent;
+export default Flyout;

package/dist/components/_private/Flyout/FlyoutContent.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Flyout.types";
+declare const FlyoutContent: (props: T.ContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default FlyoutContent;

package/dist/components/_private/Flyout/FlyoutContent.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../../utilities/helpers.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import Portal from "../Portal/index.js";
+import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import { useFlyoutContext } from "./Flyout.context.js";
+import s from "./Flyout.module.css";
+const FlyoutContent = (props) => {
+    const { children, className, attributes } = props;
+    const { flyout, id, flyoutElRef, triggerElRef, handleTransitionEnd, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentGap, contentClassName, contentAttributes, trapFocusMode, width, } = useFlyoutContext();
+    const { styles, status, position } = flyout;
+    const [mounted, setMounted] = React.useState(false);
+    useIsomorphicLayoutEffect(() => {
+        setMounted(true);
+    }, []);
+    if (status === "idle" || !mounted)
+        return null;
+    const contentClassNames = classNames(s.content, status === "visible" && s["--visible"], 
+    // Animate after correct position has been assigned
+    ["visible", "hidden"].includes(status) && s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"]);
+    // className is applied to inner element because it has the transform and is treated like a real root element
+    const innerClassNames = classNames(s.inner, className, contentClassName);
+    let role;
+    if (triggerType === "hover") {
+        role = "tooltip";
+    }
+    else if (trapFocusMode === "dialog") {
+        role = "dialog";
+    }
+    else if (trapFocusMode === "selection-menu") {
+        role = "listbox";
+    }
+    else if (trapFocusMode === "action-menu") {
+        role = "menu";
+    }
+    const content = (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", { className: contentClassNames, style: Object.assign(Object.assign({}, styles), { "--rs-flyout-gap": contentGap }), ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", Object.assign({ role: role }, attributes, { id: id, "aria-modal": triggerType === "click", style: contentAttributes === null || contentAttributes === void 0 ? void 0 : contentAttributes.style, className: innerClassNames, children: children })) }));
+    const closestScrollable = getClosestFlyoutTarget(triggerElRef.current);
+    return (_jsx(Portal, { targetRef: closestScrollable === document.body ? undefined : { current: closestScrollable }, children: content }));
+};
+export default FlyoutContent;

package/dist/components/_private/Flyout/FlyoutControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Flyout.types";
+declare const FlyoutRoot: (props: T.ControlledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+export default FlyoutRoot;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -0,0 +1,223 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { debounce } from "../../../utilities/helpers.js";
+import { trapFocus } from "../../../utilities/a11y.js";
+import * as timeouts from "../../../constants/timeouts.js";
+import useIsDismissible from "../../../hooks/_private/useIsDismissible.js";
+import useElementId from "../../../hooks/useElementId.js";
+import useIsomorphicLayoutEffect from "../../../hooks/useIsomorphicLayoutEffect.js";
+import useHotkeys from "../../../hooks/useHotkeys.js";
+import useFlyout from "../../../hooks/_private/useFlyout.js";
+import useOnClickOutside from "../../../hooks/_private/useOnClickOutside.js";
+import useRTL from "../../../hooks/useRTL.js";
+import { checkTransitions } from "../../../utilities/animation.js";
+import { Provider, useFlyoutContext } from "./Flyout.context.js";
+const FlyoutRoot = (props) => {
+    const { triggerType = "click", onOpen, onClose, children, forcePosition, trapFocusMode, width, disableHideAnimation, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, } = props;
+    const [isRTL] = useRTL();
+    const triggerElRef = React.useRef(null);
+    const flyoutElRef = React.useRef(null);
+    const id = useElementId(passedId);
+    const timerRef = React.useRef();
+    const releaseFocusRef = React.useRef(null);
+    const lockedRef = React.useRef(false);
+    const lockedBlurEffects = React.useRef(false);
+    const shouldReturnFocusRef = React.useRef(true);
+    const flyout = useFlyout(triggerElRef, flyoutElRef, {
+        width,
+        position: passedPosition,
+        defaultActive: passedActive,
+        forcePosition,
+    });
+    const parentFlyoutContext = useFlyoutContext();
+    const { status, updatePosition, render, hide, remove } = flyout;
+    // Don't create dismissible queue for hover flyout because they close all together on mouseout
+    const isDismissible = useIsDismissible(triggerType !== "hover" && status !== "idle", flyoutElRef, triggerElRef);
+    const clearTimer = React.useCallback(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+    }, [timerRef]);
+    /**
+     * Component open/close handlers
+     * Called from the internal actions
+     */
+    const handleOpen = React.useCallback(() => {
+        const canOpen = !lockedRef.current && status === "idle";
+        if (!canOpen)
+            return;
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [status]);
+    const handleClose = React.useCallback((options) => {
+        var _a;
+        const isLocked = triggerType === "click" && !isDismissible();
+        const canClose = !isLocked && status !== "idle";
+        if (!canClose)
+            return;
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+        if (options === null || options === void 0 ? void 0 : options.closeParents) {
+            (_a = parentFlyoutContext === null || parentFlyoutContext === void 0 ? void 0 : parentFlyoutContext.handleClose) === null || _a === void 0 ? void 0 : _a.call(parentFlyoutContext);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [status, isDismissible, triggerType]);
+    /**
+     * Trigger event handlers
+     */
+    const handleBlur = React.useCallback((e) => {
+        var _a;
+        const focusedContent = (_a = flyoutElRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget);
+        if (
+        // Empty flyouts don't move the focus so they have to be closed on blur
+        focusedContent ||
+            // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
+            (triggerType === "hover" && trapFocusMode === "content-menu") ||
+            // Prevent from closing in case user interacts with items inside content
+            lockedBlurEffects.current) {
+            return;
+        }
+        handleClose();
+    }, [handleClose, triggerType, trapFocusMode]);
+    const handleFocus = React.useCallback(() => {
+        handleOpen();
+    }, [handleOpen]);
+    const handleMouseEnter = React.useCallback(() => {
+        clearTimer();
+        timerRef.current = setTimeout(handleOpen, timeouts.mouseEnter);
+    }, [clearTimer, timerRef, handleOpen]);
+    const handleMouseLeave = React.useCallback(() => {
+        clearTimer();
+        timerRef.current = setTimeout(() => handleClose(), timeouts.mouseLeave);
+    }, [clearTimer, timerRef, handleClose]);
+    const handleTriggerClick = React.useCallback(() => {
+        if (status === "idle") {
+            handleOpen();
+        }
+        else {
+            handleClose();
+        }
+    }, [status, handleOpen, handleClose]);
+    const handleContentMouseDown = () => (lockedBlurEffects.current = true);
+    const handleContentMouseUp = () => (lockedBlurEffects.current = false);
+    /**
+     * Control the display based on the props
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (passedActive) {
+            render();
+            return;
+        }
+        if (checkTransitions() && !disableHideAnimation) {
+            hide();
+            // In case transitions are disabled globally - remove from the DOM immediately
+        }
+        else {
+            remove();
+        }
+    }, [passedActive, render, hide, disableHideAnimation]);
+    const handleTransitionEnd = React.useCallback((e) => {
+        if (flyoutElRef.current !== e.currentTarget || e.propertyName !== "transform")
+            return;
+        if (status === "hidden")
+            remove();
+    }, [remove, status]);
+    /**
+     * Handle focus trap
+     *
+     * We release focus on visible change to not wait till animation ends
+     * so if we click outside the flyout, it won't focus the trigger
+     * after the animation and open it again
+     *
+     * Trap focus on visible to avoid scroll jumping, position is defined only when flyout is visible
+     */
+    useIsomorphicLayoutEffect(() => {
+        if (status !== "visible" || !flyoutElRef.current)
+            return;
+        releaseFocusRef.current = trapFocus(flyoutElRef.current, {
+            mode: trapFocusMode,
+            includeTrigger: triggerType === "hover" && trapFocusMode === "content-menu",
+            onNavigateOutside: () => {
+                releaseFocusRef.current = null;
+                handleClose();
+            },
+        });
+    }, [status, triggerType, handleClose, trapFocusMode]);
+    React.useEffect(() => {
+        if (!disableHideAnimation && status !== "hidden")
+            return;
+        if (disableHideAnimation && status !== "idle")
+            return;
+        if (releaseFocusRef.current) {
+            /* Locking the popover to not open it again on trigger focus */
+            if (triggerType === "hover") {
+                lockedRef.current = true;
+                setTimeout(() => {
+                    lockedRef.current = false;
+                }, 100);
+            }
+            releaseFocusRef.current({
+                withoutFocusReturn: !shouldReturnFocusRef.current,
+            });
+            releaseFocusRef.current = null;
+            shouldReturnFocusRef.current = true;
+        }
+    }, [status, triggerType, disableHideAnimation]);
+    /**
+     * Release focus trapping on unmount
+     */
+    React.useEffect(() => {
+        return () => {
+            if (releaseFocusRef.current)
+                releaseFocusRef.current();
+            releaseFocusRef.current = null;
+        };
+    }, []);
+    /**
+     * Update position on resize or RTL
+     */
+    React.useEffect(() => {
+        const update = debounce(updatePosition, 10);
+        window.addEventListener("resize", update);
+        return () => window.removeEventListener("resize", update);
+    }, [updatePosition]);
+    React.useEffect(() => {
+        updatePosition();
+    }, [isRTL, updatePosition]);
+    /**
+     * Imperative methods for controlling Flyout
+     */
+    React.useImperativeHandle(instanceRef, () => ({
+        open: handleOpen,
+        close: handleClose,
+    }), [handleOpen, handleClose]);
+    useHotkeys({ Escape: () => handleClose() }, [handleClose]);
+    useOnClickOutside([flyoutElRef, triggerElRef], () => {
+        // Clicking outside changes focused element so we don't need to set it back ourselves
+        shouldReturnFocusRef.current = false;
+        handleClose();
+    });
+    return (_jsx(Provider, { value: {
+            id,
+            flyout,
+            width,
+            triggerElRef,
+            flyoutElRef,
+            handleClose,
+            handleOpen,
+            handleFocus,
+            handleBlur,
+            handleMouseEnter,
+            handleMouseLeave,
+            handleTransitionEnd,
+            handleClick: handleTriggerClick,
+            handleContentMouseDown,
+            handleContentMouseUp,
+            triggerType,
+            trapFocusMode,
+            contentGap,
+            contentClassName,
+            contentAttributes,
+        }, children: children }));
+};
+export default FlyoutRoot;

package/dist/components/_private/Flyout/FlyoutTrigger.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Flyout.types";
+declare const FlyoutTrigger: (props: T.TriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default FlyoutTrigger;

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -0,0 +1,38 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useFlyoutContext } from "./Flyout.context.js";
+const FlyoutTrigger = (props) => {
+    const { children } = props;
+    const { id, triggerElRef, triggerType, flyout, handleFocus, handleBlur, handleMouseEnter, handleMouseLeave, handleClick, trapFocusMode, } = useFlyoutContext();
+    let childrenAttributes = {
+        onBlur: handleBlur,
+        ref: triggerElRef,
+    };
+    if (triggerType === "click" || trapFocusMode === "action-menu") {
+        childrenAttributes.onClick = handleClick;
+    }
+    if (triggerType === "hover") {
+        childrenAttributes.onMouseEnter = handleMouseEnter;
+        childrenAttributes.onMouseLeave = handleMouseLeave;
+    }
+    if ((triggerType === "hover" && trapFocusMode !== "action-menu") || triggerType === "focus") {
+        childrenAttributes.onFocus = handleFocus;
+        childrenAttributes["aria-describedby"] = id;
+    }
+    if (triggerType === "click" || triggerType === "focus" || trapFocusMode === "action-menu") {
+        if (trapFocusMode === "dialog") {
+            childrenAttributes["aria-haspopup"] = "dialog";
+        }
+        else if (trapFocusMode === "selection-menu") {
+            childrenAttributes["aria-haspopup"] = "listbox";
+            childrenAttributes["aria-autocomplete"] = "list";
+        }
+        else {
+            childrenAttributes["aria-haspopup"] = "menu";
+        }
+        childrenAttributes["aria-expanded"] = flyout.status !== "idle";
+        childrenAttributes["aria-controls"] = flyout.status !== "idle" ? id : undefined;
+    }
+    return _jsx(_Fragment, { children: children(childrenAttributes) });
+};
+export default FlyoutTrigger;

package/dist/components/_private/Flyout/FlyoutUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./Flyout.types";
+declare const FlyoutUncontrolled: (props: T.UncontrolledProps & T.DefaultProps) => import("react/jsx-runtime").JSX.Element;
+export default FlyoutUncontrolled;