react-morpheus 0.1.3 → 0.1.4

package/README.md

@@ -3,11 +3,12 @@
 A controlled React component for morphing one UI state into another.
 
 `Morpheus` does not manage its own open state. Keep the `expanded` boolean in
-your app state, render your trigger wherever it belongs, and pass the same
-source content to `collapsedContent` so Morpheus can measure and morph from it.
-Overlay clicks and Escape key presses call `onCloseIntent`; update your
-controlled state there. Use `afterClose` for work that should run after the
-closing animation completes.
+your app state and pass your trigger to `collapsedContent` so Morpheus can
+render, measure, and morph from it. Opening is the responsibility of the source
+component's own click handler.
+Overlay clicks call `onClose`; update your controlled state there. Use
+`beforeClose` and `afterClose` for work that should run around the closing
+animation.
 
 ```tsx
 import { Morpheus, MorphAnchor } from "react-morpheus";
@@ -22,26 +23,35 @@ function Example() {
   );
 
   return (
-    <>
-      {source}
-      <Morpheus
-        direction="bottom"
-        anchor={MorphAnchor.TopMiddle}
-        expanded={expanded}
-        onCloseIntent={() => setExpanded(false)}
-        afterClose={() => console.log("closed")}
-        collapsedContent={source}
-        expandedContent={<div>Expanded content</div>}
-      />
-    </>
+    <Morpheus
+      direction="bottom"
+      anchor={MorphAnchor.TopMiddle}
+      expanded={expanded}
+      onClose={() => setExpanded(false)}
+      beforeClose={() => console.log("closing")}
+      afterClose={() => console.log("closed")}
+      collapsedContent={source}
+      expandedContent={<div>Expanded content</div>}
+      overlayZIndex={1200}
+    />
   );
 }
 ```
 
+`overlayZIndex` controls the expanded morph surface. The overlay renders one
+layer below it so apps can move the whole morphing stack above their own
+chrome. Without this prop, Morpheus uses surface `1000` and overlay `999`.
+
+Do not place Morpheus inside a container that clips overflow, such as
+`overflow: hidden`, `overflow: clip`, or scroll containers. The expanded surface
+is positioned from the local source element and can extend outside its original
+container while animating.
+
 ## Scripts
 
 - `bun run build` builds declarations and bundled ESM output.
-- `bun run tag` creates an annotated git tag for the current package version.
-- `bun run tag:push` pushes tags to `origin`.
-- `bun run deploy:npm` builds and publishes to npm.
-- `bun run release:npm` builds, creates the version tag, and publishes to npm.
+- `bun run check` runs TypeScript without emitting files.
+- `bun run publish:npm` builds and publishes to npm.
+- `bun run release:patch` bumps the patch version, builds, tags, and publishes.
+- `bun run release:minor` bumps the minor version, builds, tags, and publishes.
+- `bun run release:major` bumps the major version, builds, tags, and publishes.

package/dist/index.d.ts

@@ -77,7 +77,8 @@ type MorphProps = {
     direction: MorphDirection;
     anchor?: MorphAnchor | undefined;
     expanded: boolean;
-    onCloseIntent?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    beforeClose?: (() => void) | undefined;
     afterClose?: (() => void) | undefined;
     collapsedContent: ReactNode;
     expandedContent: ReactNode;
@@ -85,14 +86,16 @@ type MorphProps = {
     overlayColor?: string;
     overlayOpacity?: number;
     overlayBlur?: number;
+    overlayZIndex?: number;
     spring?: Transition;
 };
 type MorphOverlayProps = {
     expanded: boolean;
-    onCloseIntent?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
     color: string;
     opacity: number;
     blur: number;
+    zIndex: number;
 };
 type MorphMeasurementNodesProps = {
     collapsedRef: RefObject<HTMLDivElement | null>;
@@ -106,6 +109,7 @@ type MorphShellProps = {
     animatedSize: PanelSize;
     visualStyle: PanelVisualStyle;
     overflowVisible: boolean;
+    zIndex: number;
     spring: Transition;
     onMorphComplete: () => void;
     onMorphStart: () => void;
@@ -128,11 +132,10 @@ type MorphContentLayersProps = {
     targetOpacityTransition: Transition;
 };
 type MorphLayerInteractivityProps = {
-    "aria-hidden": boolean;
     inert?: boolean;
 };
 
-declare function Morpheus({ direction, anchor, expanded, onCloseIntent, afterClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, spring, }: MorphProps): react.JSX.Element;
+declare function Morpheus({ direction, anchor, expanded, onClose, beforeClose, afterClose, collapsedContent, expandedContent, className, overlayColor, overlayOpacity, overlayBlur, overlayZIndex: zIndex, spring, }: MorphProps): react.JSX.Element;
 
 declare const defaultAnchorByDirection: Record<MorphDirection, MorphAnchor>;
 declare const morphSpringPresets: {

package/dist/index.js

@@ -226,7 +226,7 @@ function invertPosition(position) {
   };
 }
 function getLayerInteractivityProps(interactive) {
-  return interactive ? { "aria-hidden": false } : { "aria-hidden": true, inert: true };
+  return interactive ? {} : { inert: true };
 }
 function getMorphMotionState({
   expanded,
@@ -291,17 +291,18 @@ function getOverlayBackgroundColor(color, opacity) {
 }
 function MorphOverlay({
   expanded,
-  onCloseIntent,
+  onClose,
   color,
   opacity,
-  blur
+  blur,
+  zIndex
 }) {
-  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded && onCloseIntent ? /* @__PURE__ */ jsx(
-    motion.button,
+  const MotionOverlay = onClose ? motion.button : motion.div;
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: expanded ? /* @__PURE__ */ jsx(
+    MotionOverlay,
     {
-      type: "button",
-      "aria-label": "Close morph",
-      className: "fixed inset-0 z-40 cursor-default",
+      ...onClose ? { type: "button", "aria-label": "Close morph" } : { "aria-hidden": true },
+      className: "rmorph:fixed rmorph:inset-0 rmorph:cursor-default",
       initial: {
         opacity: 0
       },
@@ -315,16 +316,17 @@ function MorphOverlay({
       style: {
         backdropFilter: `blur(${blur}px)`,
         backgroundColor: getOverlayBackgroundColor(color, opacity),
-        WebkitBackdropFilter: `blur(${blur}px)`
+        WebkitBackdropFilter: `blur(${blur}px)`,
+        zIndex: zIndex - 1
       },
-      onClick: onCloseIntent
+      onClick: onClose
     }
   ) : null });
 }
 
 // src/component.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var liveSurfaceContentClassName = "absolute [&>*:first-child]:!border-transparent [&>*:first-child]:!bg-transparent [&>*:first-child]:!shadow-none";
+var liveSurfaceContentClassName = "rmorph:absolute";
 function MorphMeasurementNodes({
   collapsedRef,
   expandedRef,
@@ -337,7 +339,7 @@ function MorphMeasurementNodes({
       {
         ref: collapsedRef,
         "aria-hidden": "true",
-        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        className: "rmorph:invisible rmorph:absolute rmorph:inset-x-0 rmorph:top-0 rmorph:pointer-events-none",
         children: collapsedContent
       }
     ),
@@ -346,7 +348,7 @@ function MorphMeasurementNodes({
       {
         ref: expandedRef,
         "aria-hidden": "true",
-        className: "invisible absolute inset-x-0 top-0 pointer-events-none",
+        className: "rmorph:invisible rmorph:absolute rmorph:inset-x-0 rmorph:top-0 rmorph:pointer-events-none",
         children: expandedContent
       }
     )
@@ -358,6 +360,7 @@ function MorphShell({
   animatedSize,
   visualStyle,
   overflowVisible,
+  zIndex,
   spring,
   onMorphComplete,
   onMorphStart,
@@ -366,7 +369,7 @@ function MorphShell({
   return /* @__PURE__ */ jsx2(
     motion2.div,
     {
-      className: `absolute shadow-xs ${expanded ? "z-50" : "z-0"}`,
+      className: "rmorph:absolute rmorph:shadow-xs",
       initial: false,
       animate: {
         width: animatedSize.width,
@@ -378,7 +381,8 @@ function MorphShell({
       onAnimationComplete: onMorphComplete,
       onAnimationStart: onMorphStart,
       style: {
-        overflow: overflowVisible ? "visible" : "hidden"
+        overflow: overflowVisible ? "visible" : "hidden",
+        zIndex: expanded ? zIndex : 0
       },
       transition: spring,
       children
@@ -458,20 +462,23 @@ function Morpheus({
   direction,
   anchor,
   expanded,
-  onCloseIntent,
+  onClose,
+  beforeClose,
   afterClose,
   collapsedContent,
   expandedContent,
-  className = "relative inline-block align-top",
+  className = "rmorph:relative rmorph:inline-block rmorph:align-top",
   overlayColor = "#05070a",
   overlayOpacity = 0.54,
   overlayBlur = 0,
+  overlayZIndex: zIndex = 1e3,
   spring = defaultPanelSpring
 }) {
   const measurements = useMorphMeasurements();
   const [animationEnabled, setAnimationEnabled] = useState2(false);
   const [shellOverflowVisible, setShellOverflowVisible] = useState2(false);
   const hasOpenedRef = useRef2(expanded);
+  const beforeCloseCalledRef = useRef2(false);
   useEffect(() => {
     if (!measurements.ready) {
       return;
@@ -479,18 +486,6 @@ function Morpheus({
     const frame = requestAnimationFrame(() => setAnimationEnabled(true));
     return () => cancelAnimationFrame(frame);
   }, [measurements.ready]);
-  useEffect(() => {
-    if (!expanded || !onCloseIntent) {
-      return;
-    }
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape" && !event.repeat) {
-        onCloseIntent();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [expanded, onCloseIntent]);
   const motionState = getMorphMotionState({
     expanded,
     direction,
@@ -507,10 +502,11 @@ function Morpheus({
       MorphOverlay,
       {
         expanded,
-        onCloseIntent,
+        onClose,
         color: overlayColor,
         opacity: overlayOpacity,
-        blur: overlayBlur
+        blur: overlayBlur,
+        zIndex
       }
     ),
     /* @__PURE__ */ jsxs("div", { className, "aria-live": "polite", children: [
@@ -523,7 +519,7 @@ function Morpheus({
           expandedContent
         }
       ),
-      /* @__PURE__ */ jsx2("div", { className: "relative mx-auto block w-fit align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "inline-block align-top", children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "rmorph:relative rmorph:mx-auto rmorph:block rmorph:w-fit rmorph:align-top", children: shouldRenderStaticSource ? /* @__PURE__ */ jsx2("div", { className: "rmorph:inline-block rmorph:align-top", children: collapsedContent }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx2(
           "div",
           {
@@ -543,10 +539,12 @@ function Morpheus({
             animatedSize: motionState.animatedSize,
             visualStyle: motionState.visualStyle,
             overflowVisible,
+            zIndex,
             spring: motionState.activeSpring,
             onMorphComplete: () => {
               if (expanded) {
                 hasOpenedRef.current = true;
+                beforeCloseCalledRef.current = false;
                 setShellOverflowVisible(true);
                 return;
               }
@@ -555,7 +553,13 @@ function Morpheus({
                 afterClose?.();
               }
             },
-            onMorphStart: () => setShellOverflowVisible(false),
+            onMorphStart: () => {
+              if (!expanded && hasOpenedRef.current && !beforeCloseCalledRef.current) {
+                beforeCloseCalledRef.current = true;
+                beforeClose?.();
+              }
+              setShellOverflowVisible(false);
+            },
             children: /* @__PURE__ */ jsx2(
               MorphContentLayers,
               {

package/dist/style.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.inset-x-0{inset-inline:0}.top-0{top:0}.z-0{z-index:0}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-inline:auto}.block{display:block}.hidden{display:none}.inline-block{display:inline-block}.w-fit{width:fit-content}.cursor-default{cursor:default}.align-top{vertical-align:top}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[\&\>\*\:first-child\]\:\!border-transparent>:first-child{border-color:#0000!important}.\[\&\>\*\:first-child\]\:\!bg-transparent>:first-child{background-color:#0000!important}.\[\&\>\*\:first-child\]\:\!shadow-none>:first-child{--tw-shadow:0 0 #0000!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}.rmorph\:pointer-events-none{pointer-events:none}.rmorph\:invisible{visibility:hidden}.rmorph\:absolute{position:absolute}.rmorph\:fixed{position:fixed}.rmorph\:relative{position:relative}.rmorph\:inset-0{inset:0}.rmorph\:inset-x-0{inset-inline:0}.rmorph\:top-0{top:0}.rmorph\:mx-auto{margin-inline:auto}.rmorph\:block{display:block}.rmorph\:inline-block{display:inline-block}.rmorph\:w-fit{width:fit-content}.rmorph\:cursor-default{cursor:default}.rmorph\:align-top{vertical-align:top}.rmorph\:shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-morpheus",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A React component for morphing one surface into other.",
   "type": "module",
   "license": "MIT",
@@ -24,6 +24,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
+    "prepare": "bun run build",
     "build": "bun run build:js && bun run build:css",
     "build:js": "tsup src/index.ts --format esm --dts --external react --external react-dom --external framer-motion --clean",
     "build:css": "tailwindcss -i src/style.css -o dist/style.css --minify",