reshaped 3.3.0 → 3.3.2

package/dist/components/_private/Flyout/Flyout.context.d.ts

@@ -2,10 +2,10 @@ import React from "react";
 import type * as T from "./Flyout.types";
 declare const FlyoutContext: React.Context<T.ContextProps>;
 declare const useFlyoutContext: () => T.ContextProps;
-declare const useFlyoutTriggerContext: () => T.TriggerContextProps;
-declare const useFlyoutContentContext: () => boolean;
+declare const useFlyoutTriggerContext: () => T.TriggerContextProps | null;
+declare const useFlyoutContentContext: () => T.ContentContextProps | null;
 declare const Provider: React.Provider<T.ContextProps>;
-declare const TriggerProvider: React.Provider<T.TriggerContextProps>;
-declare const ContentProvider: React.Provider<boolean>;
+declare const TriggerProvider: React.Provider<T.TriggerContextProps | null>;
+declare const ContentProvider: React.Provider<T.ContentContextProps | null>;
 export { Provider, TriggerProvider, ContentProvider, useFlyoutContext, useFlyoutTriggerContext, useFlyoutContentContext, };
 export default FlyoutContext;

package/dist/components/_private/Flyout/Flyout.context.js

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 const FlyoutContext = React.createContext({});
-const FlyoutTriggerContext = React.createContext({});
-const FlyoutContentContext = React.createContext(false);
+const FlyoutTriggerContext = React.createContext(null);
+const FlyoutContentContext = React.createContext(null);
 const useFlyoutContext = () => React.useContext(FlyoutContext);
 const useFlyoutTriggerContext = () => React.useContext(FlyoutTriggerContext);
 const useFlyoutContentContext = () => React.useContext(FlyoutContentContext);

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

@@ -134,5 +134,10 @@ export type ContextProps = {
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
 } & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "contentShift" | "containerRef" | "disableContentHover">;
-export type TriggerContextProps = Pick<ContextProps, "triggerElRef">;
+export type TriggerContextProps = {
+    elRef?: ContextProps["triggerElRef"];
+};
+export type ContentContextProps = {
+    elRef?: ContextProps["flyoutElRef"];
+};
 export {};

package/dist/components/_private/Flyout/FlyoutContent.js

@@ -48,7 +48,7 @@ const FlyoutContent = (props) => {
     else if (trapFocusMode === "action-menu") {
         role = "menu";
     }
-    const content = (_jsx(ContentProvider, { value: true, children: _jsx("div", { className: contentClassNames, style: {
+    const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: contentClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
             }, 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, "aria-modal": triggerType === "click", style: contentAttributes?.style, className: innerClassNames, children: children }) }) }));

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -21,8 +21,8 @@ const FlyoutRoot = (props) => {
     const onCloseRef = useHandlerRef(onClose);
     const resolvedActive = disabled === true ? false : passedActive;
     const parentFlyoutContext = useFlyoutContext();
-    const parentFlyoutTriggerContext = useFlyoutTriggerContext();
-    const parentFlyoutContentContext = useFlyoutContentContext();
+    const { elRef: parentTriggerRef } = useFlyoutTriggerContext() || {};
+    const { elRef: parentContentRef } = useFlyoutContentContext() || {};
     const isSubmenu = parentFlyoutContext.trapFocusMode === "action-menu" ||
         parentFlyoutContext.trapFocusMode === "content-menu";
     const [isRTL] = useRTL();
@@ -30,9 +30,13 @@ const FlyoutRoot = (props) => {
     /**
      * Reuse the parent trigger ref in case we render nested triggers
      * For example, when we apply tooltip and popover to the same button
+     *
+     * Resolving the same inside another Flyout.Content should reset the inheritance
+     * For example, if you have a tooltip -> popover inside another popover.content, tooltip shouldn't use its parent context anymore
      */
-    const triggerElRef = (!parentFlyoutContentContext && parentFlyoutTriggerContext?.triggerElRef) ||
-        internalTriggerElRef;
+    const isParentTriggerInsideFlyout = !!parentTriggerRef?.current && parentContentRef?.current?.contains(parentTriggerRef.current);
+    const tryParentTrigger = !parentContentRef || isParentTriggerInsideFlyout;
+    const triggerElRef = (tryParentTrigger && parentTriggerRef) || internalTriggerElRef;
     const triggerBoundsRef = React.useRef();
     const flyoutElRef = React.useRef(null);
     const id = useElementId(passedId);

package/dist/components/_private/Flyout/FlyoutTrigger.js

@@ -36,6 +36,6 @@ const FlyoutTrigger = (props) => {
         childrenAttributes["aria-expanded"] = flyout.status !== "idle";
         childrenAttributes["aria-controls"] = flyout.status !== "idle" ? id : undefined;
     }
-    return (_jsx(TriggerProvider, { value: { triggerElRef }, children: children(childrenAttributes) }));
+    return (_jsx(TriggerProvider, { value: { elRef: triggerElRef }, children: children(childrenAttributes) }));
 };
 export default FlyoutTrigger;

package/dist/utilities/a11y/TrapFocus.js

@@ -21,7 +21,8 @@ class TrapFocus {
      * Handle keyboard navigation while focus is trapped
      */
     handleKeyDown = (event) => {
-        // if (event.defaultPrevented) return;
+        if (event.defaultPrevented)
+            return;
         if (TrapFocus.chain.tailId !== this.chainId)
             return;
         const { mode, onNavigateOutside, pseudoFocus, includeTrigger } = this.options;

package/dist/utilities/scroll/lock.js

@@ -1,21 +1,17 @@
 import { isIOS } from "../platform.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
-import { findClosestRenderContainer } from "../dom/index.js";
 let lockedCount = 0;
 let reset = () => { };
 export const lockScroll = (args) => {
     lockedCount += 1;
     if (lockedCount > 1)
         return;
-    const customLockTargetEl = args.containerEl
-        ? findClosestRenderContainer({ el: args.containerEl, overflowOnly: true })
-        : undefined;
     if (isIOS()) {
-        reset = lockSafariScroll(customLockTargetEl);
+        reset = lockSafariScroll(args.containerEl);
     }
     else {
-        reset = lockStandardScroll(customLockTargetEl);
+        reset = lockStandardScroll(args.containerEl);
     }
     args.cb?.();
 };

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