reshaped 3.9.0-canary.1 → 3.9.0-canary.10

package/dist/components/Calendar/CalendarDate.js

@@ -1,21 +1,23 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import { classNames } from "../../utilities/props.js";
-import { getLocalISODate } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getLocalISODate } from "./Calendar.utils.js";
 const CalendarDate = (props) => {
-    const { date, isoDate, startValue, endValue, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, renderAriaLabel, selectedDates, } = props;
+    const { date, isoDate, startValue, endValue, disabled: passedDisabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, onDateFocus, selectedDates, disabledDates, renderAriaLabel, renderSlot, } = props;
     if (!date)
         return _jsx("td", { className: s.cell, "aria-hidden": "true" });
     const isoStartValue = startValue && getLocalISODate({ date: startValue });
     const isoEndValue = endValue && getLocalISODate({ date: endValue });
-    const isStartValue = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
-    const isEndValue = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
-    const isAfterStartValue = startValue && date > startValue;
-    const isBeforeEndValue = endValue && date < endValue;
-    const isInHoveredRange = hoveredDate && !endValue && hoveredDate > date;
-    const isInSelectedDates = !!selectedDates?.find((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
+    const isStartValue = Boolean(isoDate && !!isoStartValue && isoDate === isoStartValue);
+    const isEndValue = Boolean(isoDate && !!isoEndValue && isoDate === isoEndValue);
+    const isAfterStartValue = Boolean(isoDate && isoStartValue && isoDate > isoStartValue);
+    const isBeforeEndValue = Boolean(isoDate && isoEndValue && isoDate < isoEndValue);
+    const isInHoveredRange = Boolean(hoveredDate && !endValue && hoveredDate > date);
+    const isInSelectedDates = !!selectedDates?.some((selectedDate) => getLocalISODate({ date: selectedDate }) === isoDate);
+    const disabled = passedDisabled ||
+        disabledDates?.some((disabledDate) => getLocalISODate({ date: disabledDate }) === isoDate);
     let selection;
     switch (true) {
         case isAfterStartValue && isInHoveredRange:
@@ -61,7 +63,7 @@ const CalendarDate = (props) => {
         handleMouseEnter();
         onDateFocus(date);
     };
-    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsx(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
+    return (_jsx("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell", children: _jsxs(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
                 role: "checkbox",
                 tabIndex: focusable ? 0 : -1,
                 "aria-hidden": disabled,
@@ -74,7 +76,7 @@ const CalendarDate = (props) => {
                 onMouseLeave: handleMouseLeave,
                 onFocus: handleFocus,
                 onBlur: handleMouseLeave,
-            }, children: date.getDate() }) }));
+            }, children: [date.getDate(), renderSlot?.({ date, selected: Boolean(selection && selection !== "range") })] }) }));
 };
 CalendarDate.displayName = "CalendarDate";
 export default CalendarDate;

package/dist/components/Calendar/CalendarMonth.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import s from "./Calendar.module.css";
 import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
 import CalendarDate from "./CalendarDate.js";
-import s from "./Calendar.module.css";
 const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, disabledDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, } = props;
     let foundFocusableDate = false;
     const [lastFocusedDate, setLastFocusedDate] = useState();
     const month = date.getMonth();
@@ -26,7 +26,7 @@ const CalendarMonth = (props) => {
                             // eslint-disable-next-line react-hooks/immutability
                             if (focusable)
                                 foundFocusableDate = true;
-                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates }, index));
+                            return (_jsx(CalendarDate, { date: date, isoDate: isoDate, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, onDateFocus: setLastFocusedDate, renderAriaLabel: renderDateAriaLabel, selectedDates: selectedDates, disabledDates: disabledDates, renderSlot: renderDateSlot }, index));
                         }) }, key));
                 }) })] }));
 };

package/dist/components/Calendar/CalendarYear.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { getMonthNames } from "./Calendar.utils.js";
 import s from "./Calendar.module.css";
+import { getMonthNames } from "./Calendar.utils.js";
 const MONTHS_PER_ROW = 3;
 const CalendarYear = (props) => {
     const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;

package/dist/components/Calendar/useCalendarKeyboardNavigation.js

@@ -1,6 +1,6 @@
 import React from "react";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import * as keys from "../../constants/keys.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
 import { getFocusableDates } from "./Calendar.utils.js";
 const useCalendarKeyboardNavigation = (props) => {
     const { rootRef, changeToNextMonth, changeToPreviousMonth, monthDate, verticalDelta, min, max } = props;

package/dist/components/Card/Card.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
-import s from "./Card.module.css";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;
     const { selected, elevated, bleed, height, onClick, href, children, className, attributes, 

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Component padding, base unit multiplier */

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 import View from "../View/index.js";
-import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import CarouselControl from "./CarouselControl.js";
+import useRTL from "../../hooks/useRTL.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
+import CarouselControl from "./CarouselControl.js";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
     const currentIndexRef = React.useRef(0);

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

@@ -1,6 +1,6 @@
+import type { ActionableRef } from "../Actionable";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { ActionableRef } from "../Actionable";
 export type Instance = {
     /** Scroll to the previous item */
     navigateBack: () => void;

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,4 +1,4 @@
-import type { ActionableRef } from "../Actionable";
 import * as T from "./Carousel.types";
+import type { ActionableRef } from "../Actionable";
 declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
 const CarouselControl = forwardRef((props, ref) => {
     const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import { useFormControl } from "../FormControl/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import HiddenInput from "../HiddenInput/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
     const { children, value, onChange, onFocus, onBlur, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;
@@ -21,20 +21,10 @@ const Checkbox = (props) => {
     const name = checkboxGroup ? checkboxGroup.name : props.name;
     const inputRef = React.useRef(null);
     const rootClassName = classNames(s.root, className, size && hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    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);
-    };
     useIsomorphicLayoutEffect(() => {
         inputRef.current.indeterminate = indeterminate || false;
     }, [indeterminate, checked]);
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "checkbox", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: {
                             ...inputAttributes,
                             ref: inputRef,
                         } }), _jsx("div", { className: s.decorator, children: _jsx(Icon, { svg: IconCheckmark, className: s.icon, size: responsivePropDependency(size, (size) => {

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

@@ -1,6 +1,6 @@
+import type { CheckboxProps } from "../Checkbox";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { CheckboxProps } from "../Checkbox";
 type BaseProps = {
     /** Component id attribute */
     id?: string;

package/dist/components/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Container.module.css";
 const Container = (props) => {
     const { children, padding = 4, width, align, justify, height, maxHeight, className, attributes, } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
     /** Component inline padding */

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ContextMenu = (props) => {
     const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();

package/dist/components/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
 import IconClose from "../../icons/Close.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Dismissible.module.css";
 const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
 import type * as T from "./Divider.types";
+import type React from "react";
 declare const Divider: React.FC<T.Props>;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import Text from "../Text/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
     const { vertical, blank, children, contentPosition = "center", color, offset, className, attributes, } = props;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Popover from "../Popover/index.js";
-import MenuItem from "../MenuItem/index.js";
-import Icon from "../Icon/index.js";
 import { useFlyoutContext } from "../Flyout/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Icon from "../Icon/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Popover from "../Popover/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useRTL from "../../hooks/useRTL.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import { classNames } from "../../utilities/props.js";
-import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);

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

@@ -1,9 +1,9 @@
-import type React from "react";
-import type { PopoverProps, PopoverInstance } from "../Popover";
-import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
+import type { MenuItemProps } from "../MenuItem";
+import type { PopoverProps, PopoverInstance } from "../Popover";
+import type React from "react";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

package/dist/components/FileUpload/FileUpload.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import View from "../View/index.js";
 import useToggle from "../../hooks/useToggle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./FileUpload.module.css";
 export const FileUploadTrigger = (props) => {
     const { children } = props;
     return _jsx("span", { className: s.trigger, children: children });
 };
 const FileUpload = (props) => {
-    const { name, children, height, variant = "outline", inline, className, attributes, inputAttributes, onChange, } = props;
+    const { name, children, height, variant = "outline", inline, className, disabled, attributes, inputAttributes, onChange, } = props;
     const highlightToggle = useToggle();
-    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], className);
+    const rootClassNames = classNames(s.root, variant && s[`--variant-${variant}`], inline && s[`--inline`], highlightToggle.active && s["--highlighted"], disabled && s["--disabled"], className);
     const handleDragOver = (event) => {
         event.preventDefault();
         attributes?.onDragOver?.(event);
@@ -41,15 +41,17 @@ const FileUpload = (props) => {
         onChange?.({ name, event, value: Array.from(nextValue) });
         inputAttributes?.onChange?.(event);
     };
-    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, onChange: handleChange }) }));
+    const inputNode = (_jsx(HiddenVisually, { children: _jsx("input", { ...inputAttributes, type: "file", className: s.field, name: name, disabled: disabled, onChange: handleChange }) }));
     const childrenNode = typeof children === "function" ? children({ highlighted: highlightToggle.active }) : children;
-    return (_jsx(View, { className: rootClassNames, height: height, attributes: {
+    return (_jsx(View, { className: rootClassNames, height: height, 
+        // For the focus ring radius
+        borderRadius: "medium", attributes: {
             ...attributes,
             onDragOver: handleDragOver,
             onDragEnter: handleDragEnter,
             onDragLeave: handleDragLeave,
             onDrop: handleDrop,
-        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", animated: true, height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
+        }, children: variant === "outline" && !inline ? (_jsxs(View, { as: "label", className: s.triggerLayer, padding: 6, borderRadius: "medium", gap: 2, align: "center", justify: "center", textAlign: "center", height: "100%", children: [inputNode, _jsx(View.Item, { children: childrenNode })] })) : (_jsxs("label", { className: s.triggerLayer, children: [inputNode, childrenNode] })) }));
 };
 FileUpload.displayName = "FileUpload";
 FileUploadTrigger.displayName = "FileUpload.Trigger";

package/dist/components/FileUpload/FileUpload.module.css

@@ -1 +1 @@
-.root{--rs-file-upload-radius:var(--rs-radius-medium);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-color-border-neutral);border-radius:var(--rs-file-upload-radius)}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:rgba(var(--rs-color-rgb-background-neutral),.16)}}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger{pointer-events:all}.trigger{display:contents}
+.root{--rs-file-upload-radius:var(--rs-radius-medium);--rs-file-upload-border-color:var(--rs-color-border-neutral);--rs-file-upload-hover-background-color:rgba(var(--rs-color-rgb-background-neutral),0.16);display:block}[data-rs-keyboard] .root:focus-within{box-shadow:var(--rs-shadow-focus)}.triggerLayer:has(.trigger){pointer-events:none}.triggerLayer:has(.trigger) .trigger,.triggerLayer:has(.trigger) a,.triggerLayer:has(.trigger) button{pointer-events:all}.trigger{display:contents}.--inline{--rs-file-upload-radius:var(--rs-radius-small)}.--inline,.--inline .triggerLayer{display:inline-block;vertical-align:top}[data-rs-keyboard] .--inline:focus-within{box-shadow:none}[data-rs-keyboard] .--inline:focus-within .triggerLayer>*{box-shadow:var(--rs-shadow-focus)}.--variant-outline .triggerLayer{border:1px dashed var(--rs-file-upload-border-color);border-radius:var(--rs-file-upload-radius);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color}.--highlighted.--variant-outline .triggerLayer{background:rgba(var(--rs-color-rgb-background-primary),.08);border-color:var(--rs-color-border-primary)}@media (hover:hover) and (pointer:fine){.--variant-outline .triggerLayer:hover:not(:has(.trigger)){background:var(--rs-file-upload-hover-background-color)}}.--disabled{--rs-file-upload-border-color:var(--rs-color-border-disabled);--rs-file-upload-hover-background-color:transparent}.--disabled .triggerLayer{cursor:not-allowed;opacity:.4}

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

@@ -1,9 +1,11 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */
     name: string;
+    /** Disable the file upload input */
+    disabled?: boolean;
     /** Node for inserting children, can be a render function that receives component state */
     children?: React.ReactNode | ((props: {
         highlighted?: boolean;

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

@@ -1,4 +1,3 @@
-import type * as T from "./Flyout.types";
 export declare const mouseEnter = 600;
-export declare const defaultStyles: T.Styles;
-export declare const resetStyles: T.Styles;
+export declare const defaultStyles: React.CSSProperties;
+export declare const resetStyles: React.CSSProperties;

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 const Flyout = (props) => {
     const { active } = props;
     if (typeof active === "boolean")

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

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:100%;max-width:100%;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-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position: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:100%;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)}

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

@@ -23,17 +23,14 @@ export type Options = Pick<BaseProps, "width" | "fallbackAdjustLayout" | "fallba
     lastUsedPosition: Position;
     onPositionChoose: (position: Position) => void;
 };
-export type Styles = React.CSSProperties;
 export type State = {
-    styles: Styles;
     position?: Position;
     status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
 };
 export type FlyoutData = {
-    styles: Styles;
     position: Position;
 };
-export type UseFlyoutData = Pick<State, "styles" | "position" | "status"> & {
+export type UseFlyoutData = Pick<State, "position" | "status"> & {
     updatePosition: (args?: {
         sync?: boolean;
         fallback?: boolean;
@@ -72,7 +69,7 @@ export type TriggerAttributes = {
     onFocus?: () => void;
     onMouseDown?: () => void;
     onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
     onTouchStart?: () => void;
     onClick?: () => void;
     "aria-describedby"?: string;
@@ -132,6 +129,8 @@ type BaseProps = {
     contentGap?: number;
     /** Shift the content on the secondary axis, relative to its original position */
     contentShift?: number;
+    /** Maximum height for the content */
+    contentMaxHeight?: string;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
@@ -178,7 +177,7 @@ export type ContextProps = {
     }) => void;
     handleOpen: () => void;
     handleMouseEnter: () => void;
-    handleMouseLeave: () => void;
+    handleMouseLeave: (e: React.MouseEvent) => void;
     handleMouseDown: () => void;
     handleTransitionEnd: (e: React.TransitionEvent) => void;
     handleTransitionStart: (e: TransitionEvent) => void;
@@ -189,7 +188,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../_private/Portal/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
-import cooldown from "./utilities/cooldown.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, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
         if (!mounted)
@@ -95,8 +95,8 @@ const FlyoutContent = (props) => {
         role = "menubar";
     }
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
-                ...styles,
                 "--rs-flyout-gap": contentGap,
+                "--rs-flyout-max-h": contentMaxHeight,
             }, 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 });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../hooks/useElementId.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useOnClickOutside from "../../hooks/useOnClickOutside.js";
 import useRTL from "../../hooks/useRTL.js";
+import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
-import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
-import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
+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, 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, 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);
@@ -146,11 +146,15 @@ const FlyoutControlled = (props) => {
             }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
         }
     }, [clearTimer, handleOpen, groupTimeouts]);
-    const handleMouseLeave = React.useCallback(() => {
+    const handleMouseLeave = React.useCallback((e) => {
+        if (e.relatedTarget === flyoutElRef.current)
+            return;
+        if (e.relatedTarget === triggerElRef.current)
+            return;
         cooldown.cool();
         clearTimer();
         handleClose({});
-    }, [clearTimer, handleClose]);
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -305,7 +309,7 @@ const FlyoutControlled = (props) => {
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
     }, {
-        disabled: Boolean(status !== "visible" || disableCloseOnOutsideClick),
+        disabled: !isRendered || disableCloseOnOutsideClick,
     });
     return (_jsx(Provider, { value: {
             id,
@@ -331,6 +335,7 @@ const FlyoutControlled = (props) => {
             contentClassName,
             contentAttributes,
             contentGap,
+            contentMaxHeight,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout";
-import FlyoutTrigger from "./FlyoutTrigger";
 import FlyoutContent from "./FlyoutContent";
+import FlyoutTrigger from "./FlyoutTrigger";
 declare const FlyoutRoot: typeof Flyout & {
     Trigger: typeof FlyoutTrigger;
     Content: typeof FlyoutContent;

package/dist/components/Flyout/index.js

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout.js";
-import FlyoutTrigger from "./FlyoutTrigger.js";
 import FlyoutContent from "./FlyoutContent.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
 const FlyoutRoot = Flyout;
 FlyoutRoot.Trigger = FlyoutTrigger;
 FlyoutRoot.Content = FlyoutContent;

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

@@ -1,13 +1,13 @@
 import React from "react";
-import type * as G from "../../types/global";
 import type * as T from "./Flyout.types";
+import type * as G from "../../types/global";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
     triggerBounds?: DOMRect | G.Coordinates | null;
-}) => Pick<T.State, "styles" | "position" | "status"> & {
+}) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;
     }) => void;