reshaped 3.9.0-canary.14 → 3.9.0-canary.16

package/dist/components/Flyout/FlyoutControlled.js

@@ -55,12 +55,13 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
     // eslint-disable-next-line react-hooks/refs
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerBoundsRef: originCoordinates ? originCoordinatesRef : triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -147,9 +148,11 @@ const FlyoutControlled = (props) => {
         }
     }, [clearTimer, handleOpen, groupTimeouts]);
     const handleMouseLeave = React.useCallback((e) => {
-        if (e.relatedTarget === flyoutElRef.current)
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
             return;
-        if (e.relatedTarget === triggerElRef.current)
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
             return;
         cooldown.cool();
         clearTimer();

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

@@ -6,7 +6,7 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
+    triggerBoundsRef: React.RefObject<DOMRect | G.Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

package/dist/components/Flyout/useFlyout.js

@@ -26,7 +26,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -60,7 +60,7 @@ const useFlyout = (args) => {
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
@@ -88,7 +88,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBounds,
+        triggerBoundsRef,
         width,
         contentGap,
         contentShift,

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

@@ -1,10 +1,12 @@
+import { SCREEN_OFFSET } from "./constants.js";
 import { getRTLPosition, centerBySize } from "./helpers.js";
-const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, } = args;
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, 
+    // fallbackMinWidth,
+    fallbackMinHeight, } = args;
     const isFullWidth = passedWidth === "full" || passedWidth === "100%";
     let left = 0;
     let top = 0;
@@ -137,15 +139,20 @@ const calculatePosition = (args) => {
             if (bottom !== null)
                 bottom = bottom + (flyoutHeight - height);
         }
-        if (updatedOverflow.left > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
-            left = left + (flyoutWidth - width);
-        }
-        else if (updatedOverflow.right > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
-            if (right !== null)
-                right = right + (flyoutWidth - width);
-        }
+        // TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
+        // if (updatedOverflow.left > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.left
+        // 	);
+        // 	left = left + (flyoutWidth - width);
+        // } else if (updatedOverflow.right > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.right
+        // 	);
+        // 	if (right !== null) right = right + (flyoutWidth - width);
+        // }
     }
     if (isFullWidth) {
         left = SCREEN_OFFSET;

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

@@ -0,0 +1 @@
+export declare const SCREEN_OFFSET = 8;

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

@@ -0,0 +1 @@
+export const SCREEN_OFFSET = 8;

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

@@ -41,7 +41,6 @@ const flyout = (args) => {
         closestFixedContainer ||
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
-    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
     const applyPosition = (position, options) => {
         return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
@@ -60,6 +59,12 @@ const flyout = (args) => {
         });
     };
     const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,

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

@@ -1,12 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
     /** Bounds of the flyout content */
-    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    flyoutBounds: Bounds;
     /** Bounds of the container where the flyout content should fit */
-    visualContainerBounds: DOMRect;
+    visualContainerBounds: Bounds;
     /** Bounds of the container where flyout content is rendered */
-    renderContainerBounds: DOMRect;
+    renderContainerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

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

@@ -1,20 +1,21 @@
+import { SCREEN_OFFSET } from "./constants.js";
 /**
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.right) {
+        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.bottom) {
+        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
         return false;
     }
     return true;

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