@webstudio-is/react-sdk 0.145.0 → 0.151.0

package/lib/index.js

@@ -214,7 +214,7 @@ var getPresetStyleRules = (component, presetStyle) => {
 // src/css/css.ts
 import {
   createRegularStyleSheet,
-  createAtomicStyleSheet
+  generateAtomic
 } from "@webstudio-is/css-engine";
 var createImageValueTransformer = (assets, { assetBaseUrl }) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
@@ -242,12 +242,10 @@ var generateCss = ({
   assetBaseUrl,
   atomic
 }) => {
-  const classesMap = /* @__PURE__ */ new Map();
-  const regularSheet = createRegularStyleSheet({ name: "ssr-regular" });
-  const atomicSheet = atomic ? createAtomicStyleSheet({ name: "ssr-atomic" }) : void 0;
-  addGlobalRules(regularSheet, { assets, assetBaseUrl });
+  const sheet = createRegularStyleSheet({ name: "ssr" });
+  addGlobalRules(sheet, { assets, assetBaseUrl });
   for (const breakpoint of breakpoints.values()) {
-    (atomicSheet ?? regularSheet).addMediaRule(breakpoint.id, breakpoint);
+    sheet.addMediaRule(breakpoint.id, breakpoint);
   }
   for (const [component, meta] of componentMetas) {
     const presetStyle = meta.presetStyle;
@@ -256,35 +254,37 @@ var generateCss = ({
     }
     const rules = getPresetStyleRules(component, presetStyle);
     for (const [selector, style] of rules) {
-      regularSheet.addStyleRule({ style }, selector);
+      sheet.addStyleRule({ style }, selector);
     }
   }
-  const styleRules = getStyleRules(styles, styleSourceSelections);
   const imageValueTransformer = createImageValueTransformer(assets, {
     assetBaseUrl
   });
-  for (const { breakpointId, instanceId, state, style } of styleRules) {
-    if (atomicSheet) {
-      const { classes } = atomicSheet.addStyleRule(
-        { breakpoint: breakpointId, style },
-        state,
-        imageValueTransformer
-      );
-      classesMap.set(instanceId, [
-        ...classesMap.get(instanceId) ?? [],
-        ...classes
-      ]);
-      continue;
-    }
-    regularSheet.addStyleRule(
-      { breakpoint: breakpointId, style },
-      `[${idAttribute}="${instanceId}"]${state ?? ""}`,
-      imageValueTransformer
-    );
+  sheet.setTransformer(imageValueTransformer);
+  for (const styleDecl of styles.values()) {
+    const rule = sheet.addMixinRule(styleDecl.styleSourceId);
+    rule.setDeclaration({
+      breakpoint: styleDecl.breakpointId,
+      selector: styleDecl.state ?? "",
+      property: styleDecl.property,
+      value: styleDecl.value
+    });
+  }
+  const instanceByRule = /* @__PURE__ */ new Map();
+  for (const { instanceId, values } of styleSourceSelections.values()) {
+    const rule = sheet.addNestingRule(`[${idAttribute}="${instanceId}"]`);
+    rule.applyMixins(values);
+    instanceByRule.set(rule, instanceId);
+  }
+  if (atomic) {
+    return generateAtomic(sheet, {
+      getKey: (rule) => instanceByRule.get(rule) ?? "",
+      transformValue: imageValueTransformer
+    });
   }
   return {
-    cssText: regularSheet.cssText + (atomicSheet?.cssText ?? ""),
-    classesMap
+    cssText: sheet.cssText,
+    classesMap: /* @__PURE__ */ new Map()
   };
 };
 
@@ -498,12 +498,10 @@ var Code = z.object({
   ...common,
   control: z.literal("code"),
   type: z.literal("string"),
-  defaultValue: z.string().optional(),
-  /**
-   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-   */
-  rows: z.number().optional()
+  defaultValue: z.string().optional()
+});
+var CodeText = Code.extend({
+  control: z.literal("codetext")
 });
 var Color = z.object({
   ...common,
@@ -604,6 +602,7 @@ var PropMeta = z.union([
   Range,
   Text,
   Code,
+  CodeText,
   Color,
   Boolean,
   Radio,
@@ -1011,6 +1010,7 @@ var componentCategories = [
   "media",
   "forms",
   "radix",
+  "xml",
   "hidden"
 ];
 var stateCategories = ["states", "component-states"];

package/lib/types/components/component-meta.d.ts

@@ -73,7 +73,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         control: z.ZodLiteral<"code">;
         type: z.ZodLiteral<"string">;
         defaultValue: z.ZodOptional<z.ZodString>;
-        rows: z.ZodOptional<z.ZodNumber>;
         label: z.ZodOptional<z.ZodString>;
         description: z.ZodOptional<z.ZodString>;
         required: z.ZodBoolean;
@@ -82,7 +81,6 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
     }, {
@@ -90,9 +88,29 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    }>, z.ZodObject<{
+        type: z.ZodLiteral<"string">;
+        required: z.ZodBoolean;
+        description: z.ZodOptional<z.ZodString>;
+        label: z.ZodOptional<z.ZodString>;
+        defaultValue: z.ZodOptional<z.ZodString>;
+        control: z.ZodLiteral<"codetext">;
+    }, "strip", z.ZodTypeAny, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
+    }, {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     }>, z.ZodObject<{
         control: z.ZodLiteral<"color">;
         type: z.ZodLiteral<"string">;
@@ -438,9 +456,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -576,9 +600,15 @@ declare const WsComponentPropsMeta: z.ZodObject<{
         required: boolean;
         control: "code";
         defaultValue?: string | undefined;
-        rows?: number | undefined;
         label?: string | undefined;
         description?: string | undefined;
+    } | {
+        type: "string";
+        required: boolean;
+        control: "codetext";
+        description?: string | undefined;
+        label?: string | undefined;
+        defaultValue?: string | undefined;
     } | {
         type: "string";
         required: boolean;
@@ -688,7 +718,7 @@ declare const WsComponentPropsMeta: z.ZodObject<{
     initialProps?: string[] | undefined;
 }>;
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
-export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "hidden"];
+export declare const componentCategories: readonly ["general", "text", "data", "media", "forms", "radix", "xml", "hidden"];
 export declare const stateCategories: readonly ["states", "component-states"];
 export declare const ComponentState: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["states", "component-states"]>>;
@@ -706,7 +736,7 @@ export declare const ComponentState: z.ZodObject<{
 export type ComponentState = z.infer<typeof ComponentState>;
 export declare const defaultStates: ComponentState[];
 export declare const WsComponentMeta: z.ZodObject<{
-    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "hidden"]>>;
+    category: z.ZodOptional<z.ZodEnum<["general", "text", "data", "media", "forms", "radix", "xml", "hidden"]>>;
     type: z.ZodEnum<["container", "control", "embed", "rich-text-child"]>;
     requiredAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
     invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
@@ -3355,7 +3385,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;
@@ -4248,7 +4278,7 @@ export declare const WsComponentMeta: z.ZodObject<{
 }, {
     type: "embed" | "control" | "container" | "rich-text-child";
     icon: string;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/core-components.d.ts

@@ -33,9 +33,15 @@ export declare const corePropsMetas: {
             required: boolean;
             control: "code";
             defaultValue?: string | undefined;
-            rows?: number | undefined;
             label?: string | undefined;
             description?: string | undefined;
+        } | {
+            type: "string";
+            required: boolean;
+            control: "codetext";
+            description?: string | undefined;
+            label?: string | undefined;
+            defaultValue?: string | undefined;
         } | {
             type: "string";
             required: boolean;

package/lib/types/css/global-rules.d.ts

@@ -1,6 +1,6 @@
-import type { StyleSheetAtomic, StyleSheetRegular } from "@webstudio-is/css-engine";
+import type { StyleSheetRegular } from "@webstudio-is/css-engine";
 import type { Assets } from "@webstudio-is/sdk";
-export declare const addGlobalRules: (sheet: StyleSheetRegular | StyleSheetAtomic, { assets, assetBaseUrl }: {
+export declare const addGlobalRules: (sheet: StyleSheetRegular, { assets, assetBaseUrl }: {
     assets: Assets;
     assetBaseUrl: string;
 }) => void;

package/lib/types/css/style-rules.d.ts

@@ -10,6 +10,8 @@ type StyleRule = {
 /**
  * Merge styles from different style sources
  * and group by instance and breakpoint
+ *
+ * @deprecated
  */
 export declare const getStyleRules: (styles: Styles, styleSourceSelections: Map<string, {
     values: string[];

package/lib/types/embed-template.d.ts

@@ -10706,7 +10706,7 @@ export declare const namespaceMeta: (meta: WsComponentMeta, namespace: string, c
         value: string;
         type: "expression";
     } | EmbedTemplateInstance)[] | undefined;
-    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | undefined;
+    category?: "data" | "text" | "hidden" | "media" | "general" | "forms" | "radix" | "xml" | undefined;
     requiredAncestors?: string[] | undefined;
     invalidAncestors?: string[] | undefined;
     indexWithinAncestor?: string | undefined;

package/lib/types/prop-meta.d.ts

@@ -73,11 +73,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     control: z.ZodLiteral<"code">;
     type: z.ZodLiteral<"string">;
     defaultValue: z.ZodOptional<z.ZodString>;
-    /**
-     * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
-     * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
-     */
-    rows: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
     description: z.ZodOptional<z.ZodString>;
     required: z.ZodBoolean;
@@ -86,7 +81,6 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
 }, {
@@ -94,9 +88,29 @@ export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
     required: boolean;
     control: "code";
     defaultValue?: string | undefined;
-    rows?: number | undefined;
     label?: string | undefined;
     description?: string | undefined;
+}>, z.ZodObject<{
+    type: z.ZodLiteral<"string">;
+    required: z.ZodBoolean;
+    description: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    control: z.ZodLiteral<"codetext">;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    description?: string | undefined;
+    label?: string | undefined;
+    defaultValue?: string | undefined;
 }>, z.ZodObject<{
     control: z.ZodLiteral<"color">;
     type: z.ZodLiteral<"string">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.145.0",
+  "version": "0.151.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -28,11 +28,11 @@
     "html-tags": "^3.3.1",
     "nanoid": "^5.0.1",
     "title-case": "^4.1.0",
-    "@webstudio-is/css-engine": "0.145.0",
-    "@webstudio-is/fonts": "0.145.0",
-    "@webstudio-is/icons": "^0.145.0",
-    "@webstudio-is/image": "0.145.0",
-    "@webstudio-is/sdk": "0.145.0"
+    "@webstudio-is/css-engine": "0.151.0",
+    "@webstudio-is/icons": "^0.151.0",
+    "@webstudio-is/image": "0.151.0",
+    "@webstudio-is/fonts": "0.151.0",
+    "@webstudio-is/sdk": "0.151.0"
   },
   "exports": {
     ".": {