@webstudio-is/react-sdk 0.34.0 → 0.35.0

package/lib/cjs/css/index.cjs

@@ -17,4 +17,3 @@ var css_exports = {};
 module.exports = __toCommonJS(css_exports);
 __reExport(css_exports, require("./get-browser-style"), module.exports);
 __reExport(css_exports, require("./categories"), module.exports);
-__reExport(css_exports, require("./breakpoints"), module.exports);

package/lib/cjs/tree/create-elements-tree.cjs

@@ -31,13 +31,11 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const children = createInstanceChildrenElements({
     Component,
-    children: instance.children,
-    onChangeChildren
+    children: instance.children
   });
   const body = createInstanceElement({
     Component,
@@ -60,8 +58,7 @@ const createElementsTree = ({
 };
 const createInstanceChildrenElements = ({
   children,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const elements = [];
   for (const child of children) {
@@ -71,13 +68,11 @@ const createInstanceChildrenElements = ({
     }
     const children2 = createInstanceChildrenElements({
       children: child.children,
-      Component,
-      onChangeChildren
+      Component
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children: children2
     });
     elements.push(element);
@@ -87,14 +82,12 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
-  children = [],
-  onChangeChildren
+  children = []
 }) => {
   const props = {
     instance,
     children,
-    key: instance.id,
-    onChangeChildren
+    key: instance.id
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props

package/lib/cjs/tree/wrapper-component.cjs

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var wrapper_component_exports = {};
 __export(wrapper_component_exports, {
   WrapperComponent: () => WrapperComponent,
+  collapsedAttribute: () => collapsedAttribute,
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
   renderWrapperComponentChildren: () => renderWrapperComponentChildren
@@ -47,7 +48,6 @@ const renderWrapperComponentChildren = (children) => {
 };
 const WrapperComponent = ({
   instance,
-  onChangeChildren,
   children,
   ...rest
 }) => {
@@ -69,3 +69,4 @@ const WrapperComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const collapsedAttribute = "data-ws-collapsed";

package/lib/css/index.js

@@ -1,3 +1,2 @@
 export * from "./get-browser-style";
 export * from "./categories";
-export * from "./breakpoints";

package/lib/tree/create-elements-tree.js

@@ -8,13 +8,11 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const children = createInstanceChildrenElements({
     Component,
-    children: instance.children,
-    onChangeChildren
+    children: instance.children
   });
   const body = createInstanceElement({
     Component,
@@ -37,8 +35,7 @@ const createElementsTree = ({
 };
 const createInstanceChildrenElements = ({
   children,
-  Component,
-  onChangeChildren
+  Component
 }) => {
   const elements = [];
   for (const child of children) {
@@ -48,13 +45,11 @@ const createInstanceChildrenElements = ({
     }
     const children2 = createInstanceChildrenElements({
       children: child.children,
-      Component,
-      onChangeChildren
+      Component
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children: children2
     });
     elements.push(element);
@@ -64,14 +59,12 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
-  children = [],
-  onChangeChildren
+  children = []
 }) => {
   const props = {
     instance,
     children,
-    key: instance.id,
-    onChangeChildren
+    key: instance.id
   };
   return /* @__PURE__ */ jsx(Component, {
     ...props

package/lib/tree/wrapper-component.js

@@ -21,7 +21,6 @@ const renderWrapperComponentChildren = (children) => {
 };
 const WrapperComponent = ({
   instance,
-  onChangeChildren,
   children,
   ...rest
 }) => {
@@ -43,8 +42,10 @@ const WrapperComponent = ({
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const collapsedAttribute = "data-ws-collapsed";
 export {
   WrapperComponent,
+  collapsedAttribute,
   componentAttribute,
   idAttribute,
   renderWrapperComponentChildren

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -46,13 +46,13 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.34.0",
-    "@webstudio-is/css-data": "^0.34.0",
-    "@webstudio-is/generate-arg-types": "^0.34.0",
-    "@webstudio-is/icons": "^0.34.0",
-    "@webstudio-is/image": "^0.34.0",
-    "@webstudio-is/prisma-client": "^0.34.0",
-    "@webstudio-is/project-build": "^0.34.0"
+    "@webstudio-is/asset-uploader": "^0.35.0",
+    "@webstudio-is/css-data": "^0.35.0",
+    "@webstudio-is/generate-arg-types": "^0.35.0",
+    "@webstudio-is/icons": "^0.35.0",
+    "@webstudio-is/image": "^0.35.0",
+    "@webstudio-is/prisma-client": "^0.35.0",
+    "@webstudio-is/project-build": "^0.35.0"
   },
   "exports": {
     "import": "./lib/index.js",

package/src/css/index.ts

@@ -1,3 +1,2 @@
 export * from "./get-browser-style";
 export * from "./categories";
-export * from "./breakpoints";

package/src/tree/create-elements-tree.tsx

@@ -7,43 +7,22 @@ import type { Assets, PropsByInstanceId } from "../props";
 import type { WrapperComponent } from "./wrapper-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
-export type ChildrenUpdates = Array<
-  | {
-      type: "text";
-      value: string;
-    }
-  | {
-      type: "instance";
-      id: undefined | Instance["id"];
-      component: Instance["component"];
-      children: ChildrenUpdates;
-    }
->;
-
-export type OnChangeChildren = (change: {
-  instanceId: Instance["id"];
-  updates: ChildrenUpdates;
-}) => void;
-
 export const createElementsTree = ({
   sandbox,
   instance,
   propsByInstanceIdStore,
   assetsStore,
   Component,
-  onChangeChildren,
 }: {
   sandbox?: boolean;
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
 }) => {
   const children = createInstanceChildrenElements({
     Component,
     children: instance.children,
-    onChangeChildren,
   });
   const body = createInstanceElement({
     Component,
@@ -67,11 +46,9 @@ export const createElementsTree = ({
 const createInstanceChildrenElements = ({
   children,
   Component,
-  onChangeChildren,
 }: {
   children: Instance["children"];
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
 }) => {
   const elements = [];
   for (const child of children) {
@@ -82,12 +59,10 @@ const createInstanceChildrenElements = ({
     const children = createInstanceChildrenElements({
       children: child.children,
       Component,
-      onChangeChildren,
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
       children,
     });
     elements.push(element);
@@ -99,18 +74,15 @@ const createInstanceElement = ({
   Component,
   instance,
   children = [],
-  onChangeChildren,
 }: {
   instance: Instance;
   Component: (props: ComponentProps<typeof WrapperComponent>) => JSX.Element;
-  onChangeChildren?: OnChangeChildren;
   children?: Array<JSX.Element | string>;
 }) => {
   const props = {
     instance,
     children,
     key: instance.id,
-    onChangeChildren,
   };
 
   return <Component {...props} />;

package/src/tree/wrapper-component.tsx

@@ -2,7 +2,6 @@ import { Fragment } from "react";
 import type { Instance } from "@webstudio-is/project-build";
 import { getComponent } from "../components";
 import { useInstanceProps } from "../props";
-import type { OnChangeChildren } from "./create-elements-tree";
 
 const renderText = (text: string): Array<JSX.Element> => {
   const lines = text.split("\n");
@@ -30,12 +29,10 @@ export const renderWrapperComponentChildren = (
 type WrapperComponentProps = {
   instance: Instance;
   children: Array<JSX.Element | string>;
-  onChangeChildren?: OnChangeChildren;
 };
 
 export const WrapperComponent = ({
   instance,
-  onChangeChildren, // prevent it from passing to sdk component
   children,
   ...rest
 }: WrapperComponentProps) => {
@@ -57,3 +54,4 @@ export const WrapperComponent = ({
 
 export const idAttribute = "data-ws-id";
 export const componentAttribute = "data-ws-component";
+export const collapsedAttribute = "data-ws-collapsed";

package/lib/cjs/css/breakpoints.cjs

@@ -1,29 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var breakpoints_exports = {};
-__export(breakpoints_exports, {
-  initialBreakpoints: () => initialBreakpoints
-});
-module.exports = __toCommonJS(breakpoints_exports);
-const initialBreakpoints = [
-  { label: "Mobile", minWidth: 0 },
-  { label: "Tablet", minWidth: 768 },
-  { label: "Laptop", minWidth: 1024 },
-  { label: "Desktop", minWidth: 1280 }
-];

package/lib/css/breakpoints.js

@@ -1,9 +0,0 @@
-const initialBreakpoints = [
-  { label: "Mobile", minWidth: 0 },
-  { label: "Tablet", minWidth: 768 },
-  { label: "Laptop", minWidth: 1024 },
-  { label: "Desktop", minWidth: 1280 }
-];
-export {
-  initialBreakpoints
-};

package/src/css/breakpoints.ts

@@ -1,10 +0,0 @@
-import type { Breakpoint } from "@webstudio-is/project-build";
-
-export type BaseBreakpoint = Pick<Breakpoint, "label" | "minWidth">;
-
-export const initialBreakpoints: Array<BaseBreakpoint> = [
-  { label: "Mobile", minWidth: 0 },
-  { label: "Tablet", minWidth: 768 },
-  { label: "Laptop", minWidth: 1024 },
-  { label: "Desktop", minWidth: 1280 },
-];