@superblocksteam/library 2.0.41-next.1 → 2.0.41-next.11

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 * as Popover from "@radix-ui/react-popover";
 import { DndContext, DragOverlay, PointerSensor, rectIntersection, useDndMonitor, useDraggable, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import * as Popover from "@radix-ui/react-popover";
 import { snapCenterToCursor } from "@dnd-kit/modifiers";
 import { Root, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "@radix-ui/react-tooltip";
 import tinycolor from "tinycolor2";
@@ -2200,6 +2200,97 @@ 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 (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;
@@ -3172,6 +3263,33 @@ 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) {
@@ -3399,45 +3517,6 @@ 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 }) {
@@ -4561,18 +4640,6 @@ 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) => {
@@ -4592,13 +4659,10 @@ 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} ${draggableClassName}`;
+		const componentClassName = `${CSS_CLASSES.ANCHOR_NAME}`;
 		const componentStyle = createAnchorNameStyle({ instanceId: props.identifier.instanceId });
 		return {
 			[INSTANCE_ID_ATTRIBUTE$1]: identifier.instanceId,
@@ -4608,23 +4672,18 @@ const EditWrapper = observer(function EditWrapper$1(props) {
 			"data-sb-selector": getEditWrapperId(props.identifier.instanceId),
 			onClick: handleClick,
 			onContextMenu,
-			ref: handleRef,
-			...testProps,
-			...draggableProps
+			...testProps
 		};
 	}, [
 		identifier,
-		draggableProps,
-		draggableClassName,
 		handleClick,
-		handleRef,
 		onContextMenu,
 		props.identifier.instanceId,
 		isEmpty$1
 	]);
 	const node = /* @__PURE__ */ jsx(ParentIdentifierProvider, {
 		identifier,
-		children: /* @__PURE__ */ jsxs(reactive_component_default, {
+		children: /* @__PURE__ */ jsxs(EditorReactiveComponent, {
 			Component: props.component,
 			identifier,
 			widgetProps: props.widgetProps,
@@ -4646,6 +4705,11 @@ 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,