reshaped 3.9.0-canary.4 → 3.9.0-canary.6

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,37 +1,26 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import { defaultStyles, resetStyles } from "./Flyout.constants.js";
 import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            if (state.status !== "idle")
-                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+            return { ...state, status: "rendered" };
         case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
             return {
                 ...state,
-                status: action.payload.sync ? "visible" : "positioned",
+                status: action.payload.sync ? state.status : "positioned",
                 position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
             };
         case "show":
+            // Checking because we're positioning inside nextAnimationFrame
             if (state.status !== "positioned")
                 return state;
             return { ...state, status: "visible" };
         case "hide":
-            if (state.status !== "visible")
-                return state;
             return { ...state, status: "hidden" };
         case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
+            return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");
     }
@@ -47,7 +36,6 @@ const useFlyout = (args) => {
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
-        styles: defaultStyles,
         status: "idle",
     });
     const render = React.useCallback(() => {
@@ -114,13 +102,12 @@ const useFlyout = (args) => {
     }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
-        styles: state.styles,
         status: state.status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
 };
 export default useFlyout;

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

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

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

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