@likec4/diagram 1.55.1 → 1.57.0

package/dist/overlays/element-details/actor.js

@@ -1,58 +1,48 @@
-import { setup, assign, sendTo, stopChild, spawnChild } from 'xstate';
-import { relationshipsBrowserLogic } from '../relationships-browser/actor.js';
-
-const _elementDetailsLogic = setup({
-  types: {
-    context: {},
-    input: {},
-    events: {},
-    children: {}
-  },
-  actors: {
-    relationshipsBrowserLogic
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { relationshipsBrowserLogic } from "../relationships-browser/actor.js";
+import { assign, sendTo, setup, spawnChild, stopChild } from "xstate";
+var elementDetailsLogic = setup({
+	types: {
+		context: {},
+		input: {},
+		events: {},
+		children: {}
+	},
+	actors: { relationshipsBrowserLogic }
 }).createMachine({
-  id: "element-details",
-  context: ({ input }) => ({
-    ...input,
-    initiatedFrom: {
-      node: input.initiatedFrom?.node ?? null,
-      clientRect: input.initiatedFrom?.clientRect ?? null
-    }
-  }),
-  initial: "active",
-  states: {
-    "active": {
-      entry: spawnChild("relationshipsBrowserLogic", {
-        id: ({ self }) => `${self.id}-relationships`,
-        input: ({ context }) => ({
-          subject: context.subject,
-          viewId: context.currentView.id,
-          scope: "view",
-          enableSelectSubject: false,
-          enableChangeScope: true,
-          closeable: false
-        })
-      }),
-      exit: [
-        sendTo(({ self }) => `${self.id}-relationships`, { type: "close" }),
-        stopChild(({ self }) => `${self.id}-relationships`)
-      ],
-      on: {
-        "change.subject": {
-          actions: assign({
-            subject: ({ event }) => event.subject
-          })
-        },
-        "close": "closed"
-      }
-    },
-    closed: {
-      id: "closed",
-      type: "final"
-    }
-  }
+	id: "element-details",
+	context: ({ input }) => ({
+		...input,
+		initiatedFrom: {
+			node: input.initiatedFrom?.node ?? null,
+			clientRect: input.initiatedFrom?.clientRect ?? null
+		}
+	}),
+	initial: "active",
+	states: {
+		"active": {
+			entry: spawnChild("relationshipsBrowserLogic", {
+				id: ({ self }) => `${self.id}-relationships`,
+				input: ({ context }) => ({
+					subject: context.subject,
+					viewId: context.currentView.id,
+					scope: "view",
+					enableSelectSubject: false,
+					enableChangeScope: true,
+					closeable: false
+				})
+			}),
+			exit: [sendTo(({ self }) => `${self.id}-relationships`, { type: "close" }), stopChild(({ self }) => `${self.id}-relationships`)],
+			on: {
+				"change.subject": { actions: assign({ subject: ({ event }) => event.subject }) },
+				"close": "closed"
+			}
+		},
+		closed: {
+			id: "closed",
+			type: "final"
+		}
+	}
 });
-const elementDetailsLogic = _elementDetailsLogic;
-
+//#endregion
 export { elementDetailsLogic };

package/dist/overlays/element-details/actorContext.js

@@ -1,13 +1,15 @@
-import { createContext, useContext } from 'react';
-
-const ElementDetailsActorContext = createContext(null);
+import "../../_virtual/_rolldown/runtime.js";
+import { createContext, useContext } from "react";
+//#region src/overlays/element-details/actorContext.tsx
+/**
+* To improve experience with HMR, we use `createSafeContext` as a boundary for hooks
+*/
+var ElementDetailsActorContext = createContext(null);
 ElementDetailsActorContext.displayName = "ElementDetailsActorContext";
-const useElementDetailsActorRef = () => {
-  const ctx = useContext(ElementDetailsActorContext);
-  if (ctx === null) {
-    throw new Error("ElementDetailsActorRef is not provided");
-  }
-  return ctx;
+var useElementDetailsActorRef = () => {
+	const ctx = useContext(ElementDetailsActorContext);
+	if (ctx === null) throw new Error("ElementDetailsActorRef is not provided");
+	return ctx;
 };
-
+//#endregion
 export { ElementDetailsActorContext, useElementDetailsActorRef };

package/dist/overlays/overlay/Overlay.d.ts

@@ -11,7 +11,15 @@ export type OverlayProps = PropsWithChildren<{
     backdrop?: {
         opacity?: number;
     };
+    /**
+     * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+     * Default: `130ms`
+     * If set to `0`, the content will be shown immediately
+     */
     openDelay?: number;
+    /**
+     * Called when the overlay is closed by outside click or escape key
+     */
     onClose: () => void;
     onClick?: never;
 }>;
@@ -27,7 +35,15 @@ export declare const Overlay: ForwardRefExoticComponent<{
     backdrop?: {
         opacity?: number;
     };
+    /**
+     * Delay before showing the overlay content (in milliseconds) - helps to avoid flickering
+     * Default: `130ms`
+     * If set to `0`, the content will be shown immediately
+     */
     openDelay?: number;
+    /**
+     * Called when the overlay is closed by outside click or escape key
+     */
     onClose: () => void;
     onClick?: never;
 } & {

package/dist/overlays/overlay/Overlay.js

@@ -1,154 +1,105 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { cx } from '@likec4/styles/css';
-import { overlay } from '@likec4/styles/recipes';
-import { RemoveScroll } from '@mantine/core';
-import { useFocusTrap, useMergedRef } from '@mantine/hooks';
-import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web';
-import { useReducedMotionConfig, m } from 'motion/react';
-import { forwardRef, useState, useRef, useLayoutEffect } from 'react';
-import { stopPropagation } from '../../utils/xyflow.js';
-
-const backdropBlur = "--_blur";
-const backdropOpacity = "--_opacity";
-const cssVarLevel = "--_level";
-const Overlay = forwardRef(({
-  onClose,
-  className,
-  classes,
-  overlayLevel = 0,
-  children,
-  fullscreen = false,
-  withBackdrop = true,
-  backdrop,
-  openDelay = 130,
-  ...rest
-}, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0);
-  const focusTrapRef = useFocusTrap(opened);
-  const dialogRef = useRef(null);
-  const isClosingRef = useRef(false);
-  const motionNotReduced = useReducedMotionConfig() !== true;
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-  const close = useDebouncedCallback(
-    () => {
-      if (isClosingRef.current) return;
-      isClosingRef.current = true;
-      onCloseRef.current();
-    },
-    [],
-    50
-  );
-  useLayoutEffect(() => {
-    if (!dialogRef.current?.open) {
-      dialogRef.current?.showModal();
-    }
-    const dialog = dialogRef.current;
-    return () => {
-      if (dialog?.open) {
-        isClosingRef.current = true;
-        dialog.close();
-      }
-    };
-  }, []);
-  useTimeoutEffect(() => {
-    setOpened(true);
-  }, openDelay > 0 ? openDelay : void 0);
-  const overlayRecipe = overlay({
-    fullscreen,
-    withBackdrop
-  });
-  let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
-  if (backdrop?.opacity !== void 0) {
-    targetBackdropOpacity = `${backdrop.opacity * 100}%`;
-  }
-  return /* @__PURE__ */ jsx(
-    m.dialog,
-    {
-      ref: useMergedRef(
-        dialogRef,
-        focusTrapRef,
-        ref
-      ),
-      className: cx(
-        classes?.dialog,
-        className,
-        overlayRecipe,
-        // styles.dialog,
-        fullscreen && RemoveScroll.classNames.fullWidth
-      ),
-      layout: true,
-      style: {
-        // @ts-ignore
-        [cssVarLevel]: overlayLevel
-      },
-      ...motionNotReduced ? {
-        initial: {
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%",
-          scale: 0.85,
-          // originY: 0.4,
-          // translateY: -10,
-          opacity: 0
-        },
-        animate: {
-          [backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
-          [backdropOpacity]: targetBackdropOpacity,
-          scale: 1,
-          opacity: 1,
-          translateY: 0
-          // transition: {
-          //   delay: 0.075,
-          // },
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.98,
-          translateY: -20,
-          // transition: {
-          //   duration: 0.1,
-          // },
-          [backdropBlur]: "0px",
-          [backdropOpacity]: "0%"
-        }
-      } : {
-        initial: {
-          [backdropBlur]: "8px",
-          [backdropOpacity]: targetBackdropOpacity
-        }
-      },
-      onClick: (e) => {
-        e.stopPropagation();
-        if (e.target?.nodeName?.toUpperCase() === "DIALOG") {
-          dialogRef.current?.close();
-          return;
-        }
-      },
-      onCancel: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        close();
-      },
-      onDoubleClick: stopPropagation,
-      onPointerDown: stopPropagation,
-      onClose: (e) => {
-        e.stopPropagation();
-        close();
-      },
-      ...rest,
-      children: /* @__PURE__ */ jsx(RemoveScroll, { forwardProps: true, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cx(
-            classes?.body,
-            "likec4-overlay-body"
-          ),
-          children: opened && /* @__PURE__ */ jsx(Fragment, { children })
-        }
-      ) })
-    }
-  );
+import "../../_virtual/_rolldown/runtime.js";
+import { stopPropagation } from "../../utils/xyflow.js";
+import { cx } from "@likec4/styles/css";
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { useTimeoutEffect } from "@react-hookz/web";
+import { RemoveScroll } from "@mantine/core";
+import { m, useIsPresent, useReducedMotionConfig } from "motion/react";
+import { useFocusTrap, useMergedRef } from "@mantine/hooks";
+import { overlay } from "@likec4/styles/recipes";
+//#region src/overlays/overlay/Overlay.tsx
+var backdropBlur = "--_blur";
+var backdropOpacity = "--_opacity";
+var cssVarLevel = "--_level";
+var Overlay = forwardRef(({ onClose, className, classes, overlayLevel = 0, children, fullscreen = false, withBackdrop = true, backdrop, openDelay = 130, ...rest }, ref) => {
+	const [opened, setOpened] = useState(false);
+	const focusTrapRef = useFocusTrap(opened);
+	const dialogRef = useRef(null);
+	const onCloseRef = useRef(null);
+	const motionNotReduced = useReducedMotionConfig() !== true;
+	/**
+	* Close the overlay and call the onClose callback
+	*/
+	const cancelMe = () => {
+		onCloseRef.current = onClose;
+		dialogRef.current?.close();
+	};
+	const isPresent = useIsPresent();
+	useEffect(() => {
+		if (isPresent) return;
+		if (dialogRef.current?.open) {
+			onCloseRef.current = null;
+			dialogRef.current.close();
+		}
+	}, [isPresent]);
+	useLayoutEffect(() => {
+		const dialog = dialogRef.current;
+		if (dialog && !dialog.open) dialog.showModal();
+		if (openDelay === 0) setOpened(true);
+	}, []);
+	useTimeoutEffect(() => {
+		setOpened(true);
+	}, openDelay > 0 ? openDelay : void 0);
+	const overlayRecipe = overlay({
+		fullscreen,
+		withBackdrop
+	});
+	let targetBackdropOpacity = overlayLevel > 0 ? "50%" : "60%";
+	if (backdrop?.opacity !== void 0) targetBackdropOpacity = `${backdrop.opacity * 100}%`;
+	const motionProps = useMemo(() => ({
+		initial: {
+			[backdropBlur]: "1px",
+			[backdropOpacity]: "10%",
+			scale: .95,
+			opacity: 0
+		},
+		animate: {
+			[backdropBlur]: overlayLevel > 0 ? "4px" : "8px",
+			[backdropOpacity]: targetBackdropOpacity,
+			scale: 1,
+			opacity: 1
+		},
+		exit: {
+			opacity: 0,
+			scale: .97,
+			[backdropBlur]: "0px",
+			[backdropOpacity]: "0%"
+		}
+	}), [overlayLevel, targetBackdropOpacity]);
+	return /* @__PURE__ */ jsx(m.dialog, {
+		ref: useMergedRef(dialogRef, focusTrapRef, ref),
+		className: cx(classes?.dialog, className, overlayRecipe, fullscreen && RemoveScroll.classNames.fullWidth),
+		layout: true,
+		style: { [cssVarLevel]: overlayLevel },
+		...motionNotReduced ? motionProps : { initial: {
+			[backdropBlur]: "8px",
+			[backdropOpacity]: targetBackdropOpacity
+		} },
+		onDoubleClick: stopPropagation,
+		onPointerDown: stopPropagation,
+		...rest,
+		onClick: (e) => {
+			e.stopPropagation();
+			if (e.target === e.currentTarget) cancelMe();
+		},
+		onCancel: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			cancelMe();
+		},
+		onClose: () => {
+			onCloseRef.current?.();
+		},
+		children: /* @__PURE__ */ jsx(RemoveScroll, {
+			forwardProps: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cx(classes?.body, "likec4-overlay-body"),
+				children: opened && /* @__PURE__ */ jsx(Fragment$1, { children })
+			})
+		})
+	});
 });
 Overlay.displayName = "Overlay";
-
+//#endregion
 export { Overlay };