reshaped 3.9.0-canary.2 → 3.9.0-canary.4

package/dist/components/Autocomplete/Autocomplete.js

@@ -11,7 +11,7 @@ import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js"
 import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {
-    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, ...textFieldProps } = props;
+    const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, contentMaxHeight, ...textFieldProps } = props;
     const [highlightedId, setHighlightedId] = React.useState();
     const onBackspaceRef = useHandlerRef(onBackspace);
     const contentRef = React.useRef(null);
@@ -120,7 +120,7 @@ const Autocomplete = (props) => {
         highlightedId,
         setHighlightedId,
     }), [highlightedId, handleItemClick]);
-    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
+    return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, fallbackAdjustLayout: fallbackAdjustLayout, fallbackMinWidth: fallbackMinWidth, fallbackMinHeight: fallbackMinHeight, contentMaxHeight: contentMaxHeight, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
                             ...textFieldProps.attributes,
                             // Ignoring the type check since TS can't infer the correct html element type
                             // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -7,7 +7,7 @@ type SelectArgs = {
     /** Additional data that will be passed to the onItemSelect callback */
     data?: unknown;
 };
-export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight"> & {
+export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "instanceRef" | "active" | "onOpen" | "onClose" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentMaxHeight"> & {
     /** Callback for when value changes from user input */
     onInput?: TextFieldProps["onChange"];
     /** Callback for when an item is selected in the dropdown */

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

@@ -1,19 +1,31 @@
 export type SelectionMode = "date" | "month";
 export type BaseProps = {
-    /** Default month to display
+    /** Default month to display. Used in uncontrolled mode to provide the initial month and then updated by the component internally
      * @default Date.now()
      */
     defaultMonth?: Date;
+    /** Month to display. Used in controlled mode and should be updated using the `onMonthChange` callback */
+    month?: Date;
+    /** Callback when the month changes */
+    onMonthChange?: (args: {
+        date: Date;
+    }) => void;
     /** Minimum date that can be selected */
     min?: Date;
     /** Maximum date that can be selected */
     max?: Date;
+    /** Number of months to render at the same time
+     * @default 1
+     */
+    monthsToRender?: number;
     /** First day of the week
      * @default 1, Monday
      */
     firstWeekDay?: number;
     /** Dates that are selected */
     selectedDates?: Date[];
+    /** Dates that are disabled */
+    disabledDates?: Date[];
     /** Render a custom weekday label, can be used for localization */
     renderWeekDay?: (args: {
         weekDay: number;
@@ -111,7 +123,7 @@ export type MonthProps = {
     hoveredDate: Date | null;
     onDateHover: (date: Date) => void;
     onDateHoverEnd: (date: Date) => void;
-} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel" | "renderDateSlot"> & Pick<ControlledProps, "value" | "onChange" | "range">;
+} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "selectedDates" | "disabledDates" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel" | "renderDateSlot"> & Pick<ControlledProps, "value" | "onChange" | "range">;
 export type YearProps = {
     monthDate: Date;
     onMonthClick: (month: number) => void;
@@ -126,15 +138,16 @@ export type DateProps = {
     renderAriaLabel?: MonthProps["renderDateAriaLabel"];
     renderSlot?: MonthProps["renderDateSlot"];
     onDateFocus: (date: Date) => void;
-} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates">;
+} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max" | "selectedDates" | "disabledDates">;
 export type ControlsProps = {
     selectionMode: SelectionMode;
+    monthsToRender: number;
     onMonthTitleClick: () => void;
-    monthTitleRef: React.MutableRefObject<HTMLButtonElement | null>;
+    monthTitleRef?: React.RefObject<HTMLButtonElement | null>;
     monthDate: Date;
     renderSelectedMonthLabel?: BaseProps["renderSelectedMonthLabel"];
-    isFirstMonth?: boolean;
-    isLastMonth?: boolean;
+    hidePrevious?: boolean;
+    hideNext?: boolean;
     onNextClick: () => void;
     onPreviousClick: () => void;
 } & Pick<BaseProps, "nextMonthAriaLabel" | "nextYearAriaLabel" | "previousMonthAriaLabel" | "previousYearAriaLabel" | "monthSelectionAriaLabel">;

package/dist/components/Calendar/CalendarControlled.js

@@ -9,9 +9,9 @@ import CalendarMonth from "./CalendarMonth.js";
 import CalendarYear from "./CalendarYear.js";
 import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
 const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, selectedDates, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, } = props;
+    const { value, onChange, defaultMonth, month, onMonthChange, min, max, range, firstWeekDay, selectedDates, disabledDates, monthsToRender = 1, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, renderDateSlot, } = props;
     const [selectionMode, setSelectionMode] = React.useState("date");
-    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
+    const [monthDate, setMonthDate] = React.useState(month || defaultMonth || new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
     const monthTitleRef = React.useRef(null);
     const prevSelectionModeRef = React.useRef(selectionMode);
@@ -19,23 +19,38 @@ const CalendarControlled = (props) => {
     const selectionRootRef = React.useRef(null);
     const handlePreviousClick = () => {
         if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToPrevious(prev));
+            const updatedMonth = setYearToPrevious(monthDate);
+            onMonthChange?.({ date: updatedMonth });
+            if (month === undefined)
+                setMonthDate(updatedMonth);
             return;
         }
-        setMonthDate((prev) => setMonthToPrevious(prev));
+        const updatedMonth = setMonthToPrevious(monthDate);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
     };
     const handleNextClick = () => {
         if (selectionMode === "month") {
-            setMonthDate((prev) => setYearToNext(prev));
+            const updatedMonth = setYearToNext(monthDate);
+            onMonthChange?.({ date: updatedMonth });
+            if (month === undefined)
+                setMonthDate(updatedMonth);
             return;
         }
-        setMonthDate((prev) => setMonthToNext(prev));
+        const updatedMonth = setMonthToNext(monthDate);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
     };
     const handleMonthTitleClick = () => {
         setSelectionMode("month");
     };
     const handleMonthClick = (i) => {
-        setMonthDate((prev) => setMonthTo(prev, i));
+        const updatedMonth = setMonthTo(monthDate, i);
+        onMonthChange?.({ date: updatedMonth });
+        if (month === undefined)
+            setMonthDate(updatedMonth);
         setSelectionMode("date");
     };
     const handleDateHover = (date) => {
@@ -53,6 +68,14 @@ const CalendarControlled = (props) => {
         }
         prevSelectionModeRef.current = selectionMode;
     }, [selectionMode]);
+    /**
+     * Handle rendering in controlled mode
+     */
+    React.useEffect(() => {
+        if (!month)
+            return;
+        setMonthDate(month);
+    }, [month]);
     useCalendarKeyboardNavigation({
         monthDate,
         rootRef: selectionRootRef,
@@ -63,7 +86,19 @@ const CalendarControlled = (props) => {
         min,
         max,
     });
-    return (_jsxs(View, { gap: 2, children: [_jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }), _jsxs(View.Item, { attributes: { ref: selectionRootRef }, children: [selectionMode === "date" && (_jsx(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel, renderDateSlot: renderDateSlot })), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
+    return (_jsxs(View, { gap: 2, children: [_jsx(View, { direction: "row", gap: 4, children: Array.from({ length: selectionMode === "date" ? monthsToRender : 1 }).map((_, index) => {
+                    const hidePrevious = bounds.isFirstMonth || (monthsToRender > 0 && index > 0);
+                    const hideNext = bounds.isLastMonth ||
+                        (selectionMode === "date" && monthsToRender > 0 && index < monthsToRender - 1);
+                    const currentMonthDate = new Date(monthDate);
+                    currentMonthDate.setMonth(currentMonthDate.getMonth() + index);
+                    return (_jsx(View.Item, { grow: true, children: _jsx(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: currentMonthDate, selectionMode: selectionMode, hidePrevious: hidePrevious, hideNext: hideNext, monthTitleRef: index === 0 ? monthTitleRef : undefined, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel, monthsToRender: monthsToRender }) }, index));
+                }) }), _jsxs(View, { direction: "row", gap: 4, attributes: { ref: selectionRootRef }, children: [selectionMode === "date" &&
+                        Array.from({ length: monthsToRender }).map((_, index) => {
+                            const currentMonthDate = new Date(monthDate);
+                            currentMonthDate.setMonth(currentMonthDate.getMonth() + index);
+                            return (_jsx(View.Item, { grow: true, children: _jsx(CalendarMonth, { date: currentMonthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, selectedDates: selectedDates, disabledDates: disabledDates, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel, renderDateSlot: renderDateSlot }) }, index));
+                        }), selectionMode === "month" && (_jsx(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max }))] })] }));
 };
 CalendarControlled.displayName = "CalendarControlled";
 export default CalendarControlled;

package/dist/components/Calendar/CalendarControls.js

@@ -10,35 +10,35 @@ import IconChevronRight from "../../icons/ChevronRight.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import s from "./Calendar.module.css";
 const CalendarControls = (props) => {
-    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
+    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, hidePrevious, hideNext, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
     const prevRef = React.useRef(null);
     const nextRef = React.useRef(null);
     React.useEffect(() => {
-        if (!isFirstMonth)
+        if (!hidePrevious)
             return;
         if (document.activeElement !== prevRef.current)
             return;
-        const targetEl = nextRef.current || monthTitleRef.current;
+        const targetEl = nextRef.current || monthTitleRef?.current;
         onNextFrame(() => {
             targetEl?.focus();
         });
-    }, [isFirstMonth, monthTitleRef]);
+    }, [hidePrevious, monthTitleRef]);
     React.useEffect(() => {
-        if (!isLastMonth)
+        if (!hideNext)
             return;
         if (document.activeElement !== nextRef.current)
             return;
-        const targetEl = prevRef.current || monthTitleRef.current;
+        const targetEl = prevRef.current || monthTitleRef?.current;
         onNextFrame(() => {
             targetEl?.focus();
         });
-    }, [isLastMonth, monthTitleRef]);
-    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: isFirstMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
+    }, [hideNext, monthTitleRef]);
+    return (_jsxs(View, { direction: "row", gap: 2, align: "center", children: [_jsx(Hidden, { visibility: true, hide: hidePrevious, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
                             ref: prevRef,
                             "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
                         } }) }) }), _jsxs(View.Item, { grow: true, children: [selectionMode === "date" && (_jsxs(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef }, children: [renderSelectedMonthLabel
                                 ? renderSelectedMonthLabel({ date: monthDate })
-                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: isLastMonth, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
+                                : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }), _jsx(HiddenVisually, { children: monthSelectionAriaLabel })] })), selectionMode === "month" && (_jsx(Text, { align: "center", weight: "medium", children: monthDate.toLocaleDateString("en-US", { year: "numeric" }) }))] }), _jsx(Hidden, { visibility: true, hide: hideNext, children: _jsx("div", { className: s.control, children: _jsx(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
                             ref: nextRef,
                             "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
                         } }) }) })] }));

package/dist/components/Calendar/CalendarDate.js

@@ -5,17 +5,19 @@ import { classNames } from "../../utilities/props.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, selectedDates, renderAriaLabel, renderSlot, } = 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:

package/dist/components/Calendar/CalendarMonth.js

@@ -5,7 +5,7 @@ import s from "./Calendar.module.css";
 import { getMonthWeeks, getWeekdayNames, getLocalISODate, isDateFocusable } from "./Calendar.utils.js";
 import CalendarDate from "./CalendarDate.js";
 const CalendarMonth = (props) => {
-    const { date, value, onChange, min, max, range, firstWeekDay, selectedDates, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, renderDateSlot, } = 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, renderSlot: renderDateSlot }, 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/DropdownMenu/DropdownMenu.types.d.ts

@@ -3,7 +3,7 @@ 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/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%;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: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

@@ -132,6 +132,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 */
@@ -189,7 +191,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

@@ -11,7 +11,7 @@ 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 { 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 { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -97,6 +97,7 @@ const FlyoutContent = (props) => {
     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

@@ -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, 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);
@@ -305,7 +305,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 +331,7 @@ const FlyoutControlled = (props) => {
             contentClassName,
             contentAttributes,
             contentGap,
+            contentMaxHeight,
             containerRef,
             disableContentHover,
             autoFocus,

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

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

@@ -1,7 +1,7 @@
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 import type React from "react";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "contentMaxHeight" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reshaped",
   "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-  "version": "3.9.0-canary.2",
+  "version": "3.9.0-canary.4",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",