reshaped 3.9.0-canary.3 → 3.9.0-canary.5

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

@@ -24,6 +24,8 @@ export type BaseProps = {
     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;
@@ -121,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;
@@ -136,7 +138,7 @@ 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;

package/dist/components/Calendar/CalendarControlled.js

@@ -9,7 +9,7 @@ import CalendarMonth from "./CalendarMonth.js";
 import CalendarYear from "./CalendarYear.js";
 import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
 const CalendarControlled = (props) => {
-    const { value, onChange, defaultMonth, month, onMonthChange, min, max, range, firstWeekDay, selectedDates, monthsToRender = 1, 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(month || defaultMonth || new Date());
     const [hoveredDate, setHoveredDate] = React.useState(null);
@@ -97,7 +97,7 @@ const CalendarControlled = (props) => {
                         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, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel, renderDateSlot: renderDateSlot }) }, 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";

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/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.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;
@@ -180,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;

package/dist/components/Flyout/FlyoutContent.js

@@ -12,7 +12,7 @@ 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, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
-    const { styles, status, position } = flyout;
+    const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
         if (!mounted)
@@ -95,7 +95,6 @@ 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 }) }) }));

package/dist/components/Flyout/FlyoutControlled.js

@@ -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();

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

@@ -7,7 +7,7 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     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;

package/dist/components/Flyout/useFlyout.js

@@ -1,6 +1,5 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import { defaultStyles, resetStyles } from "./Flyout.constants.js";
 import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
@@ -8,7 +7,7 @@ const flyoutReducer = (state, action) => {
             if (state.status !== "idle")
                 return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+            return { ...state, status: "rendered" };
         case "position":
             if (!action.payload.sync && state.status !== "rendered")
                 return state;
@@ -18,7 +17,6 @@ const flyoutReducer = (state, action) => {
                 ...state,
                 status: action.payload.sync ? "visible" : "positioned",
                 position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
             };
         case "show":
             if (state.status !== "positioned")
@@ -31,7 +29,7 @@ const flyoutReducer = (state, action) => {
         case "remove":
             if (state.status !== "hidden" && state.status !== "visible")
                 return state;
-            return { ...state, status: "idle", styles: resetStyles };
+            return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");
     }
@@ -47,7 +45,6 @@ const useFlyout = (args) => {
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
-        styles: defaultStyles,
         status: "idle",
     });
     const render = React.useCallback(() => {
@@ -114,13 +111,12 @@ const useFlyout = (args) => {
     }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
-        styles: state.styles,
         status: state.status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
 };
 export default useFlyout;

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

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

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

@@ -159,13 +159,13 @@ const calculatePosition = (args) => {
     return {
         position,
         styles: {
-            left: right === null ? 0 : undefined,
-            right: right === null ? undefined : 0,
-            top: bottom === null ? 0 : undefined,
-            bottom: bottom === null ? undefined : 0,
+            left: right === null ? "0px" : null,
+            right: right === null ? null : "0px",
+            top: bottom === null ? "0px" : null,
+            bottom: bottom === null ? null : "0px",
             transform: `translate(${translateX}px, ${translateY}px)`,
-            height,
-            width: width ?? passedWidth,
+            height: height !== undefined ? `${height}px` : null,
+            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
         },
         boundaries: {
             left,

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

@@ -79,6 +79,9 @@ const flyout = (args) => {
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
-    return calculated;
+    Object.entries(calculated.styles).forEach(([key, value]) => {
+        flyoutEl.style.setProperty(key, value);
+    });
+    return { position: calculated.position };
 };
 export default flyout;

package/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.3",
+  "version": "3.9.0-canary.5",
   "license": "MIT",
   "email": "hello@reshaped.so",
   "homepage": "https://reshaped.so",