reshaped 3.8.0-canary.3 → 3.8.0-canary.5

package/dist/components/Modal/tests/Modal.stories.js

@@ -166,6 +166,7 @@ export const containerRef = () => {
 };
 export const edgeCases = () => {
     const menuModalToggle = useToggle();
+    const menuModalToggleInner = useToggle();
     const scrollModalToggle = useToggle();
     const inputRef = React.useRef(null);
     return (<Example>
@@ -233,7 +234,11 @@ export const edgeCases = () => {
 								<DropdownMenu.Item>Item 2</DropdownMenu.Item>
 							</DropdownMenu.Content>
 						</DropdownMenu>
+						<Button onClick={menuModalToggleInner.activate}>Open dialog</Button>
 						<Button onClick={menuModalToggle.deactivate}>Close</Button>
+						<Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>
+							<Button onClick={menuModalToggleInner.deactivate}>Close</Button>
+						</Modal>
 					</View>
 				</Modal>
 			</Example.Item>

package/dist/components/Overlay/Overlay.js

@@ -31,7 +31,7 @@ const Overlay = (props) => {
     // Separating rendered and visible states to make sure animation is triggered only once overlay was added to the dom
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
-    const isDismissible = useIsDismissible({ active, contentRef });
+    const isDismissible = useIsDismissible({ active, contentRef, hasTrigger: false });
     const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -8,5 +8,6 @@ declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;
     triggerRef?: Ref;
+    hasTrigger?: boolean;
 }) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import useElementId from "../useElementId.js";
-import { onNextFrame } from "../../utilities/animation.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {
@@ -23,12 +22,12 @@ const addToQueue = (id, contentRef, triggerRef) => {
     latestId = id;
 };
 const useIsDismissible = (args) => {
-    const { active, contentRef, triggerRef } = args;
+    const { active, contentRef, triggerRef, hasTrigger = true } = args;
     const id = useElementId();
     React.useEffect(() => {
         if (!active)
             return;
-        onNextFrame(() => addToQueue(id, contentRef, triggerRef));
+        addToQueue(id, contentRef, triggerRef);
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
     return React.useCallback(() => {
@@ -38,10 +37,11 @@ const useIsDismissible = (args) => {
         const latestTrigger = latest?.triggerRef?.current;
         const prev = latest?.parentId ? queue[latest.parentId] : undefined;
         const prevContent = prev?.contentRef.current;
+        const nested = prevContent && latestTrigger && prevContent.contains(latestTrigger);
         // Don't block independently rendered components that are not nested in each other
-        if (!prevContent || !latestTrigger || !prevContent.contains(latestTrigger))
+        if (hasTrigger && !nested)
             return true;
-        return latestId === id;
-    }, [id, active]);
+        return !latestId || latestId === id;
+    }, [id, active, hasTrigger]);
 };
 export default useIsDismissible;

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.8.0-canary.3",
+	"version": "3.8.0-canary.5",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -89,7 +89,7 @@
 		"release:minor": "node bin/release.js minor",
 		"release:major": "node bin/release.js major",
 		"release:lib": "pnpm build && pnpm publish",
-		"release:canary": "pnpm build && yarn publish --tag canary && git push --tags",
+		"release:canary": "pnpm build && yarn publish --tag canary && git push --follow-tags",
 		"release:test": "pnpm build && pnpm pack --filename reshaped-test.tgz",
 		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",