reshaped 3.9.0 → 3.9.1-canary.3

package/dist/components/Accordion/AccordionControlled.js

@@ -14,7 +14,6 @@ const AccordionControlled = (props) => {
         triggerId: `${id}-trigger`,
         contentId: `${id}-content`,
         active,
-        // eslint-disable-next-line react-hooks/refs
         onToggle: onToggleRef.current,
         iconPosition,
         iconSize,

package/dist/components/Actionable/Actionable.d.ts

@@ -1,4 +1,9 @@
-import React from "react";
-import type * as T from "./Actionable.types";
-declare const Actionable: React.ForwardRefExoticComponent<T.Props & React.RefAttributes<T.Ref>>;
+import { type ActionableRef as UnstyledActionableRef } from "../../core/Actionable";
+declare const Actionable: import("react").ForwardRefExoticComponent<import("../../core/Actionable").ActionableProps & {
+    touchHitbox?: boolean;
+    fullWidth?: boolean;
+    insetFocus?: boolean;
+    disableFocusRing?: boolean;
+    borderRadius?: "inherit";
+} & import("react").RefAttributes<UnstyledActionableRef>>;
 export default Actionable;

package/dist/components/Actionable/Actionable.js

@@ -1,77 +1,24 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import * as keys from "../../constants/keys.js";
-import { classNames } from "../../utilities/props.js";
+import UnstyledActionable from "../../core/Actionable/index.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
-    const { children, render, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, touchHitbox, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
-    const rootAttributes = { ...attributes };
-    const hasClickHandler = onClick || attributes?.onClick;
-    const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;
-    const isLink = Boolean(href || attributes?.href);
-    // Including attributes ref for the cases when event listeners are added through it
-    // To make sure it doesn't render a span
-    const isButton = Boolean(hasClickHandler || hasFocusHandler || type || attributes?.ref);
-    const renderedAsButton = !isLink && isButton && (!as || as === "button");
-    // Using any here to let TS save on type resolving, otherwise TS throws an error due to the type complexity
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let TagName;
-    if (isLink) {
-        TagName = "a";
-        rootAttributes.href = disabled ? undefined : href || attributes?.href;
-    }
-    else if (renderedAsButton) {
-        TagName = "button";
-        rootAttributes.type = type || attributes?.type || "button";
-        rootAttributes.disabled = disabled || attributes?.disabled;
-    }
-    else if (isButton) {
-        const isFocusable = as === "label";
-        const simulateButton = !isFocusable || hasClickHandler || hasFocusHandler;
-        TagName = as || "span";
-        rootAttributes.role = simulateButton ? "button" : undefined;
-        rootAttributes.tabIndex = simulateButton ? 0 : undefined;
-    }
-    else {
-        TagName = as || "span";
-    }
-    const handlePress = (event) => {
-        if (disabled)
-            return;
-        if (stopPropagation)
-            event.stopPropagation();
-        onClick?.(event);
-        attributes?.onClick?.(event);
-    };
-    const handleKeyDown = (event) => {
-        const isSpace = event.key === keys.SPACE;
-        const isEnter = event.key === keys.ENTER;
-        if (!isSpace && !isEnter)
-            return;
-        if (rootAttributes.role !== "button")
-            return;
-        if (stopPropagation)
-            event.stopPropagation();
-        event.preventDefault();
-        handlePress(event);
-    };
-    const childrenNode = (_jsxs(_Fragment, { children: [touchHitbox && (isLink || isButton) && !disabled && _jsx("span", { className: s.touch }), children] }));
-    const tagAttributes = {
-        ref: ref,
-        // rootAttributes can receive ref from Flyout
-        ...rootAttributes,
-        className: rootClassNames,
-        onClick: handlePress,
-        onKeyDown: handleKeyDown,
-        "aria-disabled": disabled ? true : undefined,
-        children: childrenNode,
-    };
-    // eslint-disable-next-line react-hooks/refs
-    if (render)
-        return render(tagAttributes);
-    return _jsx(TagName, { ...tagAttributes });
+    const { 
+    // Styled props
+    insetFocus, disableFocusRing, borderRadius, fullWidth, touchHitbox, 
+    // Unstyled props used for internal behavior
+    children, className, disabled, ...unstyledProps } = props;
+    const rootClassNames = [
+        s.root,
+        className,
+        disabled && s["--disabled"],
+        borderRadius && s[`--radius-${borderRadius}`],
+        insetFocus && s["--inset"],
+        disableFocusRing && s["--disabled-focus-ring"],
+        fullWidth && s["--full-width"],
+    ];
+    return (_jsxs(UnstyledActionable, { ...unstyledProps, className: rootClassNames, disabled: disabled, ref: ref, children: [touchHitbox && !disabled && _jsx("span", { className: s.touch }), children] }));
 });
 Actionable.displayName = "Actionable";
 export default Actionable;

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

@@ -1,29 +1,5 @@
-import type React from "react";
-import type * as G from "../../types/global";
-export type AttributesRef = React.RefObject<HTMLButtonElement | null>;
-type Attributes = G.Attributes<"button"> & Omit<React.JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {
-    ref?: AttributesRef;
-};
-export type Props = {
-    /** Node for inserting the content */
-    children?: React.ReactNode;
-    /** Render a custom root element, useful for integrating with routers */
-    render?: (attributes: Attributes & {
-        ref: AttributesRef;
-        className: string;
-        onClick: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-        "aria-disabled"?: boolean;
-        children: React.ReactNode;
-    }) => React.ReactNode;
-    /** Callback when clicked, renders it as a button tag if href is not provided */
-    onClick?: (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
-    /** URL, renders it as an anchor tag */
-    href?: string;
-    /** Type attribute, renders it as a button tag */
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>["type"];
-    /** Disable from user interaction */
-    disabled?: boolean;
+import type { ActionableProps as UnstyledActionableProps } from "../../core/Actionable";
+export type Props = UnstyledActionableProps & {
     /** Enable a minimum required touch hitbox */
     touchHitbox?: boolean;
     /** Take up the full width of its parent */
@@ -34,14 +10,4 @@ export type Props = {
     disableFocusRing?: boolean;
     /** Apply the focus ring to the child and rely on its border radius */
     borderRadius?: "inherit";
-    /** Prevent the event from bubbling up to the parent */
-    stopPropagation?: boolean;
-    /** Render as a different element */
-    as?: keyof React.JSX.IntrinsicElements;
-    /** Additional classname for the root element */
-    className?: G.ClassName;
-    /** Additional attributes for the root element */
-    attributes?: Attributes;
 };
-export type Ref = HTMLButtonElement | HTMLAnchorElement;
-export {};

package/dist/components/Actionable/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./Actionable";
-export type { Props as ActionableProps, Ref as ActionableRef } from "./Actionable.types";
+export type { Props as ActionableProps } from "./Actionable.types";
+export type { ActionableRef } from "../../core/Actionable";

package/dist/components/Badge/Badge.js

@@ -10,14 +10,15 @@ const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;
     const isActionable = !!(onClick || href);
     const iconSize = size === "small" ? 3 : 4;
-    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"]);
-    const hnadleDismiss = (e) => {
+    const empty = !children && !icon && !endIcon;
+    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"], empty && s["--empty"]);
+    const handleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
                     "aria-hidden": hidden ? "true" : undefined,
-                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
+                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: handleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });
 Badge.displayName = "Badge";
 export default Badge;

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root.--empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

package/dist/components/Calendar/Calendar.utils.js

@@ -108,6 +108,9 @@ export const applyNavigationBounds = (args) => {
         isLastMonth: max && max < nextMonthFirstDate,
     };
 };
+const isMonthMatch = (date1, date2) => {
+    return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
+};
 /**
  * Decide if date has to be focusable with Tab (only one date should be)
  * 1. If there is a selected value - it's focusable
@@ -117,19 +120,15 @@ export const applyNavigationBounds = (args) => {
 export const isDateFocusable = (args) => {
     const { date, startValue, lastFocusedDate } = args;
     const today = new Date();
-    const renderedMonth = date.getMonth();
-    const valueMonth = startValue?.getMonth();
-    const todayMonth = today.getMonth();
-    const lastFocusedMonth = lastFocusedDate?.getMonth();
     const isoDate = getLocalISODate({ date });
     const isoToday = getLocalISODate({ date: today });
     const isoValueDate = startValue && getLocalISODate({ date: startValue });
     const isoLastFocusedDate = lastFocusedDate && getLocalISODate({ date: lastFocusedDate });
-    if (lastFocusedDate && renderedMonth === lastFocusedMonth)
+    if (lastFocusedDate && isMonthMatch(date, lastFocusedDate))
         return isoDate === isoLastFocusedDate;
-    if (startValue && renderedMonth === valueMonth)
+    if (startValue && isMonthMatch(date, startValue))
         return isoDate === isoValueDate;
-    if (renderedMonth === todayMonth)
+    if (isMonthMatch(date, today))
         return isoDate === isoToday;
     return true;
 };

package/dist/components/Card/Card.d.ts

@@ -9,7 +9,7 @@ declare const Card: React.ForwardRefExoticComponent<{
     href?: string;
     className?: import("../../types/global").ClassName;
     attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
-        ref?: import("../Actionable/Actionable.types").AttributesRef;
+        ref?: import("../../core/Actionable/Actionable.types").AttributesRef;
     }) | undefined)) | undefined;
     as?: keyof React.JSX.IntrinsicElements | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;

package/dist/components/Carousel/Carousel.js

@@ -32,7 +32,6 @@ const Carousel = (props) => {
         // 	itemRefs.current[index] = null;
         // };
     };
-    // eslint-disable-next-line react-hooks/refs
     const handleScroll = rafThrottle((event) => {
         const el = event.target;
         const firstVisibleIndex = getFirstVisibleIndex();

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-z-index-absolute)}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-z-index-absolute)}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-start,.content.--position-start-bottom,.content.--position-start-top,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -15,7 +15,7 @@ export type CloseReason = "escape-key" | "outside-click"
  | "item-selection" | "close-button";
 export type Position = `${YSide}` | `${YSide}-${XSide}` | `${XSide}` | `${XSide}-${YSide}`;
 export type Width = "trigger" | string;
-export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
+export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     position: Position;
     fallbackPositions?: Position[];
     container?: HTMLElement | null;
@@ -25,7 +25,7 @@ export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallba
 };
 export type State = {
     position?: Position;
-    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
+    status: "idle" | "rendered" | "visible" | "hidden";
 };
 export type FlyoutData = {
     position: Position;
@@ -68,7 +68,7 @@ export type TriggerAttributes = {
     onBlur?: (e: React.FocusEvent) => void;
     onFocus?: () => void;
     onMouseDown?: () => void;
-    onMouseEnter?: () => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
     onMouseLeave?: (e: React.MouseEvent) => void;
     onTouchStart?: () => void;
     onClick?: () => void;
@@ -77,6 +77,7 @@ export type TriggerAttributes = {
     "aria-autocomplete"?: "list";
     "aria-expanded"?: boolean;
     "aria-controls"?: string;
+    "data-rs-flyout-active"?: boolean;
 };
 type BaseProps = {
     /** Unique id for the flyout content and trigger */
@@ -95,7 +96,7 @@ type BaseProps = {
     fallbackPositions?: Position[] | false;
     /** Adjust the content size and shift its position to fit into the container when none of the fallback positions work */
     fallbackAdjustLayout?: boolean;
-    /** Minimum width for the content when fallbackAdjustLayout is true */
+    /** @deprecated Minimum width for the content when fallbackAdjustLayout is true */
     fallbackMinWidth?: string;
     /** Minimum height for the content when fallbackAdjustLayout is true */
     fallbackMinHeight?: string;
@@ -178,11 +179,10 @@ export type ContextProps = {
         reason?: CloseReason;
     }) => void;
     handleOpen: () => void;
-    handleMouseEnter: () => void;
+    handleTriggerMouseEnter: (e: React.MouseEvent) => void;
+    handleContentMouseEnter: (e: React.MouseEvent) => void;
     handleMouseLeave: (e: React.MouseEvent) => void;
-    handleMouseDown: () => void;
     handleTransitionEnd: (e: React.TransitionEvent) => void;
-    handleTransitionStart: (e: TransitionEvent) => void;
     handleClick: () => void;
     handleBlur: (e: React.FocusEvent) => void;
     handleFocus: () => void;

package/dist/components/Flyout/FlyoutContent.js

@@ -3,72 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 import { classNames } from "../../utilities/props.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
-    const closestFixedContainer = React.useMemo(() => {
-        if (!mounted)
-            return null;
-        if (!triggerElRef)
-            return null;
-        // eslint-disable-next-line react-hooks/refs
-        return findClosestPositionContainer({ el: triggerElRef.current });
-    }, [mounted, triggerElRef]);
-    const closestScrollableContainer = React.useMemo(() => {
-        if (!mounted)
-            return;
-        // eslint-disable-next-line react-hooks/refs
-        if (!triggerElRef?.current)
-            return;
-        // eslint-disable-next-line react-hooks/refs
-        return findClosestScrollableContainer({ el: triggerElRef.current });
-    }, [mounted, triggerElRef]);
-    const containerRef = passedContainerRef || { current: closestFixedContainer };
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
-    /**
-     * transitionStart doesn't exist as a jsx event handler and needs to be handled with vanilla js
-     */
-    React.useEffect(() => {
-        const el = flyoutElRef.current;
-        if (!el)
-            return;
-        el.addEventListener("transitionstart", handleTransitionStart);
-        return () => el.removeEventListener("transitionstart", handleTransitionStart);
-    }, [handleTransitionStart, flyoutElRef, status]);
-    React.useEffect(() => {
-        if (status !== "visible")
-            return;
-        if (!closestScrollableContainer)
-            return;
-        const triggerEl = triggerElRef?.current;
-        const containerEl = closestScrollableContainer;
-        const handleScroll = rafThrottle(() => {
-            const triggerBounds = triggerEl?.getBoundingClientRect();
-            const containerBounds = containerEl.getBoundingClientRect();
-            if (triggerBounds &&
-                (triggerBounds.top < containerBounds.top ||
-                    triggerBounds.left < containerBounds.left ||
-                    triggerBounds.right > containerBounds.right ||
-                    triggerBounds.bottom > containerBounds.bottom)) {
-                handleClose({});
-            }
-            else {
-                flyout.updatePosition({ sync: true, fallback: false });
-            }
-        });
-        closestScrollableContainer.addEventListener("scroll", handleScroll, { passive: true });
-        return () => closestScrollableContainer.removeEventListener("scroll", handleScroll);
-    }, [closestScrollableContainer, flyout, status, handleClose, triggerElRef]);
     if (status === "idle" || !mounted)
         return null;
     const rootClassNames = classNames(s.content, triggerType === "hover" && s["--hover"], status === "visible" && s["--visible"], 
@@ -95,11 +41,10 @@ const FlyoutContent = (props) => {
         role = "menubar";
     }
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
-                "--rs-flyout-gap": contentGap,
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
-            }, 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", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
-    return _jsx(Portal, { targetRef: containerRef, children: content });
+            }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
+    return _jsx(Portal, { children: content });
 };
 FlyoutContent.displayName = "Flyout.Content";
 export default FlyoutContent;