@superblocksteam/library 2.0.41-next.29 → 2.0.41-next.3

package/dist/index.js

@@ -15,8 +15,8 @@ import { trace } from "@opentelemetry/api";
 import { observer } from "mobx-react-lite";
 import { compile, middleware, prefixer, serialize, stringify } from "stylis";
 import polyfill from "@oddbird/css-anchor-positioning/fn";
-import { DndContext, DragOverlay, PointerSensor, rectIntersection, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import * as Popover from "@radix-ui/react-popover";
+import { DndContext, DragOverlay, PointerSensor, rectIntersection, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
 import { snapCenterToCursor } from "@dnd-kit/modifiers";
 import { Root, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
 import tinycolor from "tinycolor2";
@@ -2200,98 +2200,6 @@ const CSS_CLASSES = {
 	ANCHOR_NAME: "sb-anchor-name"
 };
 
-//#endregion
-//#region src/edit-mode/dnd/hooks/use-component-draggable.ts
-function useComponentDraggable({ instanceId, disableDrag }) {
-	return useDraggable({
-		id: instanceId,
-		disabled: disableDrag,
-		data: { instanceId }
-	});
-}
-
-//#endregion
-//#region src/edit-mode/dnd/use-draggable-widget.ts
-function useDraggableWidget(props) {
-	const editStore = getEditStore();
-	const disableDrag = props.disableDrag || editStore.ui.dnd.isDraggingNewComponent;
-	const specificWidgetDragDisabled = !editStore.ui.dnd.canDragWidget(props.instanceId);
-	const { setNodeRef, isDragging, listeners, attributes } = useComponentDraggable({
-		instanceId: props.instanceId,
-		disableDrag: disableDrag ?? false
-	});
-	const onPointerDown = useCallback((e) => {
-		if (e.target instanceof HTMLElement && e.target.dataset.ignoreDnd) return;
-		if (specificWidgetDragDisabled) e.stopPropagation();
-		else listeners?.onPointerDown(e);
-	}, [specificWidgetDragDisabled, listeners]);
-	const onPointerMove = useCallback((e) => {
-		if (specificWidgetDragDisabled) e.stopPropagation();
-		else listeners?.onPointerMove(e);
-	}, [specificWidgetDragDisabled, listeners]);
-	return useMemo(() => {
-		return {
-			...listeners,
-			...attributes,
-			className: "sb-draggable-wrapper",
-			"data-is-dragged": isDragging,
-			onPointerDown,
-			onPointerMove,
-			setNodeRef
-		};
-	}, [
-		listeners,
-		attributes,
-		isDragging,
-		onPointerDown,
-		onPointerMove,
-		setNodeRef
-	]);
-}
-
-//#endregion
-//#region src/lib/internal-details/draggable-context-provider.tsx
-const DraggablePropsContext = createContext({
-	instanceId: void 0,
-	props: {
-		className: void 0,
-		ref: null
-	}
-});
-const DraggablePropsProvider = ({ identifier, disableDrag, children }) => {
-	const draggableWidgetProps = useDraggableWidget({
-		instanceId: identifier.instanceId,
-		disableDrag
-	});
-	const setNodeRef = draggableWidgetProps.setNodeRef;
-	const handleRef = useCallback((el) => {
-		setNodeRef(el);
-	}, [setNodeRef]);
-	const value = useMemo(() => {
-		return {
-			instanceId: identifier.instanceId,
-			props: {
-				...draggableWidgetProps,
-				ref: handleRef
-			}
-		};
-	}, [
-		draggableWidgetProps,
-		handleRef,
-		identifier.instanceId
-	]);
-	return /* @__PURE__ */ jsx(DraggablePropsContext.Provider, {
-		value,
-		children
-	});
-};
-const EMPTY_PROPS = {};
-const useMyDraggableProps = (instanceId) => {
-	const contextValue = useContext(DraggablePropsContext);
-	if (contextValue.instanceId !== instanceId) return EMPTY_PROPS;
-	return contextValue.props;
-};
-
 //#endregion
 //#region src/lib/user-facing/assets/icons/close.svg
 var _path$4;
@@ -3264,33 +3172,6 @@ const WrappedReactiveComponent = (props) => {
 };
 var reactive_component_default = WrappedReactiveComponent;
 
-//#endregion
-//#region src/lib/internal-details/editor-reactive-component.tsx
-const mergeProps = (props1, props2) => {
-	const mergedClassName = props1.className && props2.className ? `${props1.className} ${props2.className}` : props1.className || props2.className;
-	const mergedStyle = {
-		...props1.style,
-		...props2.style
-	};
-	return {
-		...props1,
-		...props2,
-		style: mergedStyle,
-		className: mergedClassName
-	};
-};
-const EditorReactiveComponent = (props) => {
-	const { editorProps,...restProps } = props;
-	const myDraggableProps = useMyDraggableProps(props.identifier.instanceId);
-	const mergedEditorProps = useMemo(() => {
-		return mergeProps(editorProps ?? {}, myDraggableProps);
-	}, [editorProps, myDraggableProps]);
-	return /* @__PURE__ */ jsx(reactive_component_default, {
-		...restProps,
-		editorProps: mergedEditorProps
-	});
-};
-
 //#endregion
 //#region src/lib/utils/is-component-type-detached.ts
 function isComponentTypeDetached(componentType) {
@@ -3518,6 +3399,45 @@ const DroppableWidget = observer((props) => {
 });
 var droppable_widget_default = DroppableWidget;
 
+//#endregion
+//#region src/edit-mode/dnd/hooks/use-component-draggable.ts
+function useComponentDraggable({ instanceId, disableDrag }) {
+	return useDraggable({
+		id: instanceId,
+		disabled: disableDrag,
+		data: { instanceId }
+	});
+}
+
+//#endregion
+//#region src/edit-mode/dnd/use-draggable-widget.ts
+function useDraggableWidget(props) {
+	const editStore = getEditStore();
+	const disableDrag = props.disableDrag || editStore.ui.dnd.isDraggingNewComponent;
+	const specificWidgetDragDisabled = !editStore.ui.dnd.canDragWidget(props.instanceId);
+	const { setNodeRef, isDragging, listeners, attributes } = useComponentDraggable({
+		instanceId: props.instanceId,
+		disableDrag: disableDrag ?? false
+	});
+	const onPointerDown = useCallback((e) => {
+		if (specificWidgetDragDisabled) e.stopPropagation();
+		else listeners?.onPointerDown(e);
+	}, [specificWidgetDragDisabled, listeners]);
+	const onPointerMove = useCallback((e) => {
+		if (specificWidgetDragDisabled) e.stopPropagation();
+		else listeners?.onPointerMove(e);
+	}, [specificWidgetDragDisabled, listeners]);
+	return {
+		...listeners,
+		...attributes,
+		className: "sb-draggable-wrapper",
+		"data-is-dragged": isDragging,
+		onPointerDown,
+		onPointerMove,
+		setNodeRef
+	};
+}
+
 //#endregion
 //#region src/edit-mode/hooks/use-right-click-menu.ts
 function useRightClickMenu({ sourceId }) {
@@ -4641,6 +4561,18 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 	});
 	const isDroppable = isEntityDroppable({ type: props.type });
 	const disableDrag = !isDraggable || !isContentDraggable(props.type);
+	const draggableWidgetProps = useDraggableWidget({
+		instanceId: props.identifier.instanceId,
+		disableDrag
+	});
+	const { setDraggableNodeRef, draggableClassName, draggableProps } = useMemo(() => {
+		const { setNodeRef: setDraggableNodeRef$1, className: draggableClassName$1,...draggableProps$1 } = draggableWidgetProps;
+		return {
+			setDraggableNodeRef: setDraggableNodeRef$1,
+			draggableClassName: draggableClassName$1,
+			draggableProps: draggableProps$1
+		};
+	}, [draggableWidgetProps]);
 	const { onContextMenu } = useRightClickMenu({ sourceId: props.identifier.sourceId });
 	const showVisibilityBackground = props.widgetProps.isVisible === false && !editStore.ui.getSelectedSourceIds().includes(props.identifier.sourceId);
 	const handleClick = useCallback((ev) => {
@@ -4660,10 +4592,13 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		stopPropagation();
 	}, [props.identifier.sourceId, props.identifier.instanceId]);
 	const [dropTargetElem, setDropTargetElem] = useState(null);
+	const handleRef = useCallback((el) => {
+		setDraggableNodeRef(el);
+	}, [setDraggableNodeRef]);
 	const isEmpty$1 = React.Children.count(children) === 0;
 	const editorProps = useMemo(() => {
 		const testProps = identifier.name.isAnonymous ? {} : { "data-test": `component-${identifier.name.value}` };
-		const componentClassName = `${CSS_CLASSES.ANCHOR_NAME}`;
+		const componentClassName = `${CSS_CLASSES.ANCHOR_NAME} ${draggableClassName}`;
 		const componentStyle = createAnchorNameStyle({ instanceId: props.identifier.instanceId });
 		return {
 			[INSTANCE_ID_ATTRIBUTE$1]: identifier.instanceId,
@@ -4673,18 +4608,23 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 			"data-sb-selector": getEditWrapperId(props.identifier.instanceId),
 			onClick: handleClick,
 			onContextMenu,
-			...testProps
+			ref: handleRef,
+			...testProps,
+			...draggableProps
 		};
 	}, [
 		identifier,
+		draggableProps,
+		draggableClassName,
 		handleClick,
+		handleRef,
 		onContextMenu,
 		props.identifier.instanceId,
 		isEmpty$1
 	]);
 	const node = /* @__PURE__ */ jsx(ParentIdentifierProvider, {
 		identifier,
-		children: /* @__PURE__ */ jsxs(EditorReactiveComponent, {
+		children: /* @__PURE__ */ jsxs(reactive_component_default, {
 			Component: props.component,
 			identifier,
 			widgetProps: props.widgetProps,
@@ -4706,11 +4646,6 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 		widgetProps: props.widgetProps,
 		children: node
 	}) : node;
-	if (isDraggable) content = /* @__PURE__ */ jsx(DraggablePropsProvider, {
-		identifier: props.identifier,
-		disableDrag,
-		children: content
-	});
 	if (isDroppable) content = /* @__PURE__ */ jsx(droppable_widget_default, {
 		instanceId: props.identifier.instanceId,
 		dropTargetElem,
@@ -6014,10 +5949,7 @@ async function connectSocket(serverUrl, { peerId, userId, applicationId, onClose
 			clientImport: [async (payload) => {
 				const { importPath } = payload;
 				try {
-					await import(
-						/* @vite-ignore */
-						`${importPath}?v=${Date.now()}`
-);
+					await import(`${importPath}?v=${Date.now()}`);
 					return;
 				} catch (error) {
 					const err = error;
@@ -6457,11 +6389,11 @@ const propertiesDefinition$2 = {
 		})
 	}),
 	functions: Section.category(PropsPanelCategory.Functions).children({
-		set: Prop.function(function(value) {
+		set: Prop.function(function(_s, value) {
 			const widget = this;
 			widget.value = value;
 		}),
-		reset: Prop.function(function() {
+		reset: Prop.function(function(_s) {
 			const widget = this;
 			widget.value = widget.defaultValue;
 		})
@@ -6608,7 +6540,7 @@ const propertiesDefinition = {
 		}).readable()
 	}),
 	functions: Section.category("Derived").children({
-		run: Prop.function(async function(traceHeaders) {
+		run: Prop.function(async function(_s, traceHeaders) {
 			const api = this;
 			try {
 				const result = await api._suspensibleApi.run(traceHeaders);
@@ -6619,7 +6551,7 @@ const propertiesDefinition = {
 				throw error;
 			}
 		}),
-		cancel: Prop.function(async function() {
+		cancel: Prop.function(async function(_s) {
 			await this._suspensibleApi.cancel();
 		})
 	}),