reshaped 3.9.0-canary.3 → 3.9.0-canary.30

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentCo
 import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -55,12 +55,13 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
     // eslint-disable-next-line react-hooks/refs
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerBoundsRef: originCoordinates ? originCoordinatesRef : triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -103,7 +104,7 @@ const FlyoutControlled = (props) => {
             return;
         onCloseRef.current?.({ reason: options.reason });
         if (options?.closeParents) {
-            parentFlyoutContext?.handleClose?.({});
+            parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
         }
     }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
@@ -143,14 +144,31 @@ const FlyoutControlled = (props) => {
                 cooldown.warm();
             timerRef.current = setTimeout(() => {
                 handleOpen();
-            }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
+            }, groupTimeouts && cooldown.status === "warming"
+                ? timeouts.mouseEnter
+                : isSubmenu
+                    ? timeouts.mouseEnter
+                    : 0);
         }
-    }, [clearTimer, handleOpen, groupTimeouts]);
-    const handleMouseLeave = React.useCallback(() => {
+    }, [clearTimer, handleOpen, groupTimeouts, isSubmenu]);
+    const handleMouseLeave = React.useCallback((e) => {
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
+            return;
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
+            return;
         cooldown.cool();
         clearTimer();
-        handleClose({});
-    }, [clearTimer, handleClose]);
+        if (isSubmenu) {
+            timerRef.current = setTimeout(() => {
+                handleClose({});
+            }, timeouts.mouseLeave);
+        }
+        else {
+            handleClose({});
+        }
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, isSubmenu]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -286,8 +304,10 @@ const FlyoutControlled = (props) => {
         resizeObserver.observe(document.body);
         if (triggerElRef.current)
             resizeObserver.observe(triggerElRef.current);
+        if (flyoutElRef.current)
+            resizeObserver.observe(flyoutElRef.current);
         return () => resizeObserver.disconnect();
-    }, [updatePosition, triggerElRef, isRendered]);
+    }, [updatePosition, triggerElRef, isRendered, flyoutElRef]);
     React.useEffect(() => {
         updatePosition({ sync: true });
     }, [isRTL, updatePosition]);
@@ -332,6 +352,7 @@ const FlyoutControlled = (props) => {
             contentAttributes,
             contentGap,
             contentMaxHeight,
+            contentMaxWidth,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -6,8 +6,8 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
-}) => Pick<T.State, "styles" | "position" | "status"> & {
+    triggerBoundsRef: React.RefObject<DOMRect | G.Coordinates | null>;
+}) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;
     }) => void;

package/dist/components/Flyout/useFlyout.js

@@ -1,43 +1,32 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import { defaultStyles, resetStyles } from "./Flyout.constants.js";
 import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            if (state.status !== "idle")
-                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+            return { ...state, status: "rendered" };
         case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
             return {
                 ...state,
-                status: action.payload.sync ? "visible" : "positioned",
+                status: action.payload.sync ? state.status : "positioned",
                 position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
             };
         case "show":
+            // Checking because we're positioning inside nextAnimationFrame
             if (state.status !== "positioned")
                 return state;
             return { ...state, status: "visible" };
         case "hide":
-            if (state.status !== "visible")
-                return state;
             return { ...state, status: "hidden" };
         case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
+            return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -47,7 +36,6 @@ const useFlyout = (args) => {
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
-        styles: defaultStyles,
         status: "idle",
     });
     const render = React.useCallback(() => {
@@ -72,7 +60,7 @@ const useFlyout = (args) => {
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
@@ -100,7 +88,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBounds,
+        triggerBoundsRef,
         width,
         contentGap,
         contentShift,
@@ -114,13 +102,12 @@ const useFlyout = (args) => {
     }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
-        styles: state.styles,
         status: state.status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
 };
 export default useFlyout;

package/dist/components/Flyout/utilities/calculatePosition.d.ts

@@ -13,13 +13,13 @@ declare const calculatePosition: (args: {
 } & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
     position: T.Position;
     styles: {
-        left: number | undefined;
-        right: number | undefined;
-        top: number | undefined;
-        bottom: number | undefined;
+        left: string | null;
+        right: string | null;
+        top: string | null;
+        bottom: string | null;
         transform: string;
-        height: number | undefined;
-        width: string | number | undefined;
+        height: string | null;
+        width: string | null;
     };
     boundaries: {
         left: number;

package/dist/components/Flyout/utilities/calculatePosition.js

@@ -1,10 +1,12 @@
+import { SCREEN_OFFSET } from "./constants.js";
 import { getRTLPosition, centerBySize } from "./helpers.js";
-const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, } = args;
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, 
+    // fallbackMinWidth,
+    fallbackMinHeight, } = args;
     const isFullWidth = passedWidth === "full" || passedWidth === "100%";
     let left = 0;
     let top = 0;
@@ -137,15 +139,20 @@ const calculatePosition = (args) => {
             if (bottom !== null)
                 bottom = bottom + (flyoutHeight - height);
         }
-        if (updatedOverflow.left > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
-            left = left + (flyoutWidth - width);
-        }
-        else if (updatedOverflow.right > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
-            if (right !== null)
-                right = right + (flyoutWidth - width);
-        }
+        // TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
+        // if (updatedOverflow.left > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.left
+        // 	);
+        // 	left = left + (flyoutWidth - width);
+        // } else if (updatedOverflow.right > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.right
+        // 	);
+        // 	if (right !== null) right = right + (flyoutWidth - width);
+        // }
     }
     if (isFullWidth) {
         left = SCREEN_OFFSET;
@@ -159,13 +166,13 @@ const calculatePosition = (args) => {
     return {
         position,
         styles: {
-            left: right === null ? 0 : undefined,
-            right: right === null ? undefined : 0,
-            top: bottom === null ? 0 : undefined,
-            bottom: bottom === null ? undefined : 0,
+            left: right === null ? "0px" : null,
+            right: right === null ? null : "0px",
+            top: bottom === null ? "0px" : null,
+            bottom: bottom === null ? null : "0px",
             transform: `translate(${translateX}px, ${translateY}px)`,
-            height,
-            width: width ?? passedWidth,
+            height: height !== undefined ? `${height}px` : null,
+            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
         },
         boundaries: {
             left,

package/dist/components/Flyout/utilities/constants.d.ts

@@ -0,0 +1 @@
+export declare const SCREEN_OFFSET = 8;

package/dist/components/Flyout/utilities/constants.js

@@ -0,0 +1 @@
+export const SCREEN_OFFSET = 8;

package/dist/components/Flyout/utilities/flyout.js

@@ -1,6 +1,7 @@
 import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
 import { resetStyles } from "../Flyout.constants.js";
 import calculatePosition from "./calculatePosition.js";
+import { SCREEN_OFFSET } from "./constants.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import isFullyVisible from "./isFullyVisible.js";
 /**
@@ -33,16 +34,26 @@ const flyout = (args) => {
     const shadowRoot = triggerEl && getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
-    const cloneRect = targetClone.getBoundingClientRect();
-    const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
     const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
     const container = passedContainer ||
         // Render inside fixed position container automatically to keep their position synced on scroll
         closestFixedContainer ||
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
-    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    const applyPosition = (position) => {
+    const applyPosition = (position, options) => {
+        const widthOption = options?.width || width;
+        // If there is a width override, apply it to calculate the position and the height correctly
+        if (widthOption === "full") {
+            targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
+        }
+        else if (widthOption === "trigger") {
+            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
+        }
+        else {
+            targetClone.style.width = widthOption || "";
+        }
+        const cloneRect = targetClone.getBoundingClientRect();
+        const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
         return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
@@ -51,7 +62,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
-            width,
+            width: widthOption,
             passedContainer: passedContainer ||
                 (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
             fallbackAdjustLayout,
@@ -60,6 +71,12 @@ const flyout = (args) => {
         });
     };
     const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,
@@ -75,10 +92,24 @@ const flyout = (args) => {
             calculated = tested;
         return visible;
     });
+    // Try full width positions in case it doesn't fit on any side
+    if (!calculated) {
+        const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
+        smallScreenFallbackPositions.some((position) => {
+            const tested = applyPosition(position, { width: "full" });
+            const visible = testVisibility(tested);
+            if (visible)
+                calculated = tested;
+            return visible;
+        });
+    }
     if (!calculated)
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
-    return calculated;
+    Object.entries(calculated.styles).forEach(([key, value]) => {
+        flyoutEl.style.setProperty(key, value);
+    });
+    return { position: calculated.position };
 };
 export default flyout;

package/dist/components/Flyout/utilities/isFullyVisible.d.ts

@@ -1,12 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
     /** Bounds of the flyout content */
-    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    flyoutBounds: Bounds;
     /** Bounds of the container where the flyout content should fit */
-    visualContainerBounds: DOMRect;
+    visualContainerBounds: Bounds;
     /** Bounds of the container where flyout content is rendered */
-    renderContainerBounds: DOMRect;
+    renderContainerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

package/dist/components/Flyout/utilities/isFullyVisible.js

@@ -1,20 +1,21 @@
+import { SCREEN_OFFSET } from "./constants.js";
 /**
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.right) {
+        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.bottom) {
+        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
         return false;
     }
     return true;

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

@@ -2,7 +2,7 @@ import type { Property } from "csstype";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;
     /** Horizontal gap between grid items */
@@ -34,13 +34,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom root element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };
-export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Grid area for template syntax */
     area?: string;
     /** Starting column position */
@@ -58,7 +58,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom item element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the item element */
     className?: G.ClassName;
     /** Additional attributes for the item element */

package/dist/components/HiddenInput/HiddenInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useRadioGroup } from "../RadioGroup/index.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./HiddenInput.module.css";
+const HiddenInput = (props) => {
+    const { type, value, className, onBlur, onFocus, onChange, attributes } = props;
+    const rootClassNames = classNames(s.root, className);
+    const checkboxGroup = useCheckboxGroup();
+    const radioGroup = useRadioGroup();
+    const formControl = useFormControl();
+    const name = checkboxGroup?.name ?? radioGroup?.name ?? props.name;
+    const disabled = formControl?.disabled ?? props.disabled ?? checkboxGroup?.disabled ?? radioGroup?.disabled;
+    const checked = (value && (checkboxGroup?.value?.includes(value) ?? radioGroup?.value === value)) ||
+        props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup?.onChange)
+            checkboxGroup.onChange(changeArgs);
+        if (radioGroup?.onChange)
+            radioGroup.onChange(changeArgs);
+    };
+    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur, "data-rs-hidden-input": true }));
+};
+HiddenInput.displayName = "HiddenInput";
+export default HiddenInput;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    /** Name of the input element */
+    name?: string;
+    /** Value of the input element that is used for form submission */
+    value?: string;
+    /** Checked state of the input element, enables controlled mode */
+    checked?: boolean;
+    /** Default checked state of the input element, enables uncontrolled mode */
+    defaultChecked?: boolean;
+    /** Disable the input element */
+    disabled?: boolean;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<boolean>;
+    /** Callback when the input or label is focused */
+    onFocus?: (e: React.FocusEvent) => void;
+    /** Callback when the input or label is blurred */
+    onBlur?: (e: React.FocusEvent) => void;
+    /** Type of the input element */
+    type: "checkbox" | "radio";
+    /** Additional classname for the root element */
+    className?: G.ClassName;
+    /** Additional attributes for the input element */
+    attributes?: G.Attributes<"input">;
+};

package/dist/components/Image/Image.js

@@ -5,12 +5,14 @@ import { resolveMixin } from "../../styles/mixin.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Image.module.css";
 const Image = (props) => {
-    const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
+    const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
     const [status, setStatus] = React.useState("loading");
     const mixinStyles = resolveMixin({ radius: borderRadius, width, height, maxWidth, aspectRatio });
-    const baseClassNames = classNames(s.root, mixinStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
-    const imgClassNames = classNames(s.image, baseClassNames);
-    const fallbackClassNames = classNames(s.fallback, baseClassNames);
+    const rootClassNames = classNames(s.root, mixinStyles.classNames, outline && s["--outline"], className);
+    const imageClassNames = classNames([
+        s.image,
+        displayMode && s[`image--display-mode-${displayMode}`],
+    ]);
     const isFallback = (status === "error" || !src) && !!fallback;
     const style = {
         ...attributes?.style,
@@ -19,10 +21,12 @@ const Image = (props) => {
     const handleLoad = (e) => {
         setStatus("success");
         onLoad?.(e);
+        passedImageAttributes?.onLoad?.(e);
     };
     const handleError = (e) => {
         setStatus("error");
         onError?.(e);
+        passedImageAttributes?.onError?.(e);
     };
     React.useEffect(() => {
         setStatus("loading");
@@ -34,13 +38,13 @@ const Image = (props) => {
                 src: fallback ?? "",
                 alt: alt ?? "",
                 role: alt ? undefined : "presentation",
-                className: fallbackClassNames,
+                className: rootClassNames,
                 style,
             };
             // eslint-disable-next-line jsx-a11y/alt-text
             return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
         }
-        return (_jsx("div", { ...attributes, className: fallbackClassNames, style: style, children: fallback }));
+        return (_jsx("div", { ...attributes, className: classNames([s.fallback, rootClassNames]), style: style, children: fallback }));
     }
     const imageAttributes = {
         ...attributes,
@@ -50,11 +54,12 @@ const Image = (props) => {
         role: alt ? undefined : "presentation",
         onLoad: handleLoad,
         onError: handleError,
-        className: imgClassNames,
+        className: outline ? imageClassNames : classNames([imageClassNames, rootClassNames]),
         style,
     };
     // eslint-disable-next-line jsx-a11y/alt-text
-    return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
+    const imageNode = renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
+    return outline ? (_jsx("div", { ...attributes, className: rootClassNames, style: style, children: imageNode })) : (imageNode);
 };
 Image.displayName = "Image";
 export default Image;

package/dist/components/Image/Image.module.css

@@ -1 +1 @@
-.root{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--display-mode-cover{object-fit:cover!important}.--display-mode-contain{object-fit:scale-down!important}
+.root{position:relative}.root .image{border-radius:inherit;height:100%;width:100%}.image{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--outline:after{border:1px solid var(--rs-color-border-neutral-faded);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.image--display-mode-cover{object-fit:cover!important}.image--display-mode-contain{object-fit:scale-down!important}

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

@@ -15,9 +15,11 @@ export type Props = {
     /** Image aspect ratio, width / height */
     aspectRatio?: G.Responsive<number>;
     /** Image border radius, based on the radius tokens */
-    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large" | "circular">;
     /** Image display mode for controlling how it fits into the provided boundaries */
     displayMode?: "cover" | "contain";
+    /** Add a semi-transparent border on top of the image for better background contrast */
+    outline?: boolean;
     /** Image on load event */
     onLoad?: (e: React.SyntheticEvent) => void;
     /** Image on error event */

package/dist/components/Modal/Modal.js

@@ -7,8 +7,7 @@ import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
-import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
@@ -90,7 +89,6 @@ const Modal = (props) => {
         // Prevent the drag handling when browser is trying to navigate to a previous page
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
-        disableUserSelect();
         disableScroll();
         setDragging(true);
     };
@@ -108,7 +106,6 @@ const Modal = (props) => {
         if (!dragging)
             return;
         const handleDragEnd = () => {
-            enableUserSelect();
             enableScroll();
             setDragging(false);
             // Close only when dragging in the closing direction
@@ -168,7 +165,7 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: responsivePropDependency(position, (p) => (p === "center" ? "auto" : "hidden")), className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: clientPosition === "center" ? "auto" : "hidden", className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
             const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);