@webstudio-is/react-sdk 0.9.0 → 0.10.0

package/lib/cjs/components/text-block.ws.cjs

@@ -1,23 +1,47 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const icons_1 = require("@webstudio-is/icons");
-const text_block_1 = require("./text-block");
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_block_ws_exports = {};
+__export(text_block_ws_exports, {
+  default: () => text_block_ws_default
+});
+module.exports = __toCommonJS(text_block_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_text_block_props = __toESM(require("./__generated__/text-block.props.json"), 1);
 const defaultStyle = {
-    minHeight: {
-        type: "unit",
-        unit: "em",
-        value: 1,
-    },
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1
+  }
 };
 const meta = {
-    Icon: icons_1.TextIcon,
-    Component: text_block_1.TextBlock,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Text Block",
-    children: ["Block of text you can edit"],
+  type: "rich-text",
+  label: "Text Block",
+  Icon: import_icons.TextIcon,
+  defaultStyle,
+  children: ["Block of text you can edit"],
+  props: import_text_block_props.default
 };
-exports.default = meta;
+var text_block_ws_default = meta;

package/lib/cjs/css/breakpoints.cjs

@@ -1,9 +1,29 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialBreakpoints = void 0;
-exports.initialBreakpoints = [
-    { label: "Mobile", minWidth: 360 },
-    { label: "Tablet", minWidth: 768 },
-    { label: "Laptop", minWidth: 1024 },
-    { label: "Desktop", minWidth: 1280 },
+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: 360 },
+  { label: "Tablet", minWidth: 768 },
+  { label: "Laptop", minWidth: 1024 },
+  { label: "Desktop", minWidth: 1280 }
 ];

package/lib/cjs/css/categories.cjs

@@ -1,229 +1,244 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.propertyCategoryMap = exports.categories = void 0;
+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 categories_exports = {};
+__export(categories_exports, {
+  categories: () => categories,
+  propertyCategoryMap: () => propertyCategoryMap
+});
+module.exports = __toCommonJS(categories_exports);
 const layout = [
-    "display",
-    // Flex
-    "flexDirection",
-    "flexWrap",
-    // Flex or grid
-    "alignItems",
-    "justifyContent",
-    "alignContent",
-    // Grid
-    "placeContent",
-    "justifyItems",
-    "rowGap",
-    "columnGap",
-    "gridAutoFlow",
-    "gridAutoRows",
-    "gridAutoColumns",
-    "gridTemplateColumns",
-    "gridTemplateRows",
-    "gridTemplateAreas",
+  "display",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "justifyContent",
+  "alignContent",
+  "placeContent",
+  "justifyItems",
+  "rowGap",
+  "columnGap",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas"
 ];
 const flexChild = [
-    "flexShrink",
-    "flexGrow",
-    "flexBasis",
-    "alignSelf",
-    "order",
+  "flexShrink",
+  "flexGrow",
+  "flexBasis",
+  "alignSelf",
+  "order"
 ];
 const gridChild = [
-    "gridRowEnd",
-    "gridRowStart",
-    "gridColumnStart",
-    "gridColumnEnd",
-    "alignSelf",
-    "justifySelf",
-    "order",
+  "gridRowEnd",
+  "gridRowStart",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "alignSelf",
+  "justifySelf",
+  "order"
 ];
 const spacing = [
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft"
 ];
 const size = [
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "overflow",
-    "objectFit",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "overflow",
+  "objectFit",
+  "aspectRatio"
 ];
 const position = [
-    "position",
-    "top",
-    "right",
-    "bottom",
-    "left",
-    "zIndex",
-    "float",
-    "clear",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "zIndex",
+  "float",
+  "clear"
 ];
 const typography = [
-    "fontFamily",
-    "fontWeight",
-    "fontSize",
-    "lineHeight",
-    "color",
-    "textAlign",
-    "fontStyle",
-    "textDecorationColor",
-    "textDecorationLine",
-    "textDecorationStyle",
-    "letterSpacing",
-    "textIndent",
-    "columnCount",
-    "columnGap",
-    "columnRuleStyle",
-    "columnRuleWidth",
-    "columnRuleColor",
-    "textTransform",
-    "direction",
-    "whiteSpace",
-    "textShadow",
-    // More
-    "fontSizeAdjust",
-    "fontStretch",
-    "fontVariant",
-    "textAlignLast",
-    "textJustify",
-    "textOverflow",
-    "textSizeAdjust",
-    "verticalAlign",
-    "wordSpacing",
-    "wordBreak",
-    "wordWrap",
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "color",
+  "textAlign",
+  "fontStyle",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "letterSpacing",
+  "textIndent",
+  "columnCount",
+  "columnGap",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnRuleColor",
+  "textTransform",
+  "direction",
+  "whiteSpace",
+  "textShadow",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontVariant",
+  "textAlignLast",
+  "textJustify",
+  "textOverflow",
+  "textSizeAdjust",
+  "verticalAlign",
+  "wordSpacing",
+  "wordBreak",
+  "wordWrap"
 ];
 const backgrounds = [
-    "backgroundAttachment",
-    "backgroundClip",
-    "backgroundColor",
-    "backgroundImage",
-    "backgroundOrigin",
-    "backgroundPositionX",
-    "backgroundPositionY",
-    "backgroundRepeat",
-    "backgroundSize",
+  "backgroundAttachment",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPositionX",
+  "backgroundPositionY",
+  "backgroundRepeat",
+  "backgroundSize"
 ];
 const borders = [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomLeftRadius",
-    "borderBottomRightRadius",
-    "borderTopStyle",
-    "borderRightStyle",
-    "borderBottomStyle",
-    "borderLeftStyle",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth",
-    // More
-    "borderImageSlice",
-    "borderImageWidth",
-    "borderImageOutset",
-    "borderImageRepeat",
-    "borderImageSource",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderImageSlice",
+  "borderImageWidth",
+  "borderImageOutset",
+  "borderImageRepeat",
+  "borderImageSource"
 ];
 const effects = [
-    "mixBlendMode",
-    "opacity",
-    "outlineColor",
-    "outlineOffset",
-    "outlineStyle",
-    "outlineWidth",
-    "boxShadow",
-    "transform",
-    "filter",
-    "backdropFilter",
-    "cursor",
-    // More
-    "animationDelay",
-    "animationDirection",
-    "animationDuration",
-    "animationFillMode",
-    "animationIterationCount",
-    "animationName",
-    "animationPlayState",
-    "animationTimingFunction",
-    "transitionDelay",
-    "transitionDuration",
-    "transitionProperty",
-    "transitionTimingFunction",
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "boxShadow",
+  "transform",
+  "filter",
+  "backdropFilter",
+  "cursor",
+  "animationDelay",
+  "animationDirection",
+  "animationDuration",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationName",
+  "animationPlayState",
+  "animationTimingFunction",
+  "transitionDelay",
+  "transitionDuration",
+  "transitionProperty",
+  "transitionTimingFunction"
 ];
 const other = [
-    "resize",
-    "clip",
-    "visibility",
-    "boxSizing",
-    "content",
-    "quotes",
-    "counterReset",
-    "counterIncrement",
-    "inlineSize",
-    "blockSize",
-    "minInlineSize",
-    "minBlockSize",
-    "maxInlineSize",
-    "maxBlockSize",
-    "userSelect",
-    "pointerEvents",
+  "resize",
+  "clip",
+  "visibility",
+  "boxSizing",
+  "content",
+  "quotes",
+  "counterReset",
+  "counterIncrement",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "minBlockSize",
+  "maxInlineSize",
+  "maxBlockSize",
+  "userSelect",
+  "pointerEvents"
 ];
-exports.categories = {
-    layout: {
-        label: "Layout",
-        properties: layout,
-        moreFrom: "",
-    },
-    flexChild: {
-        label: "Flex Child",
-        properties: flexChild,
-        moreFrom: "",
-    },
-    gridChild: {
-        label: "Grid Child",
-        properties: gridChild,
-        moreFrom: "",
-    },
-    spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
-    size: { label: "Size", properties: size, moreFrom: "" },
-    position: { label: "Position", properties: position, moreFrom: "" },
-    typography: {
-        label: "Typography",
-        properties: typography,
-        moreFrom: "fontSizeAdjust",
-    },
-    backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
-    borders: {
-        label: "Borders",
-        properties: borders,
-        moreFrom: "borderImageSlice",
-    },
-    effects: {
-        label: "Effects",
-        properties: effects,
-        moreFrom: "animationDelay",
-    },
-    other: { label: "Other", properties: other, moreFrom: "" },
+const categories = {
+  layout: {
+    label: "Layout",
+    properties: layout,
+    moreFrom: ""
+  },
+  flexChild: {
+    label: "Flex Child",
+    properties: flexChild,
+    moreFrom: ""
+  },
+  gridChild: {
+    label: "Grid Child",
+    properties: gridChild,
+    moreFrom: ""
+  },
+  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  size: { label: "Size", properties: size, moreFrom: "" },
+  position: { label: "Position", properties: position, moreFrom: "" },
+  typography: {
+    label: "Typography",
+    properties: typography,
+    moreFrom: "fontSizeAdjust"
+  },
+  backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
+  borders: {
+    label: "Borders",
+    properties: borders,
+    moreFrom: "borderImageSlice"
+  },
+  effects: {
+    label: "Effects",
+    properties: effects,
+    moreFrom: "animationDelay"
+  },
+  other: { label: "Other", properties: other, moreFrom: "" }
 };
-exports.propertyCategoryMap = {};
+const propertyCategoryMap = {};
 let category;
-for (category in exports.categories) {
-    for (const property of exports.categories[category].properties) {
-        // We are widening the type here
-        exports.propertyCategoryMap[property] = category;
-    }
+for (category in categories) {
+  for (const property of categories[category].properties) {
+    propertyCategoryMap[property] = category;
+  }
 }

package/lib/cjs/css/get-browser-style.cjs

@@ -1,49 +1,64 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBrowserStyle = void 0;
-const detect_font_1 = require("detect-font");
-const css_data_1 = require("@webstudio-is/css-data");
-const unitRegex = new RegExp(`${css_data_1.units.join("|")}`);
-// @todo use a parser
+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 get_browser_style_exports = {};
+__export(get_browser_style_exports, {
+  getBrowserStyle: () => getBrowserStyle
+});
+module.exports = __toCommonJS(get_browser_style_exports);
+var import_detect_font = require("detect-font");
+var import_css_data = require("@webstudio-is/css-data");
+const unitRegex = new RegExp(`${import_css_data.units.join("|")}`);
 const parseValue = (property, value) => {
-    const number = parseFloat(value);
-    const parsedUnit = unitRegex.exec(value);
-    if (value === "rgba(0, 0, 0, 0)")
-        value = "transparent";
-    if (isNaN(number) || parsedUnit === null) {
-        return {
-            type: "keyword",
-            value,
-        };
-    }
-    if (number === 0 && property in css_data_1.properties) {
-        // @todo
-        return css_data_1.properties[property].initial;
-    }
+  const number = parseFloat(value);
+  const parsedUnit = unitRegex.exec(value);
+  if (value === "rgba(0, 0, 0, 0)")
+    value = "transparent";
+  if (isNaN(number) || parsedUnit === null) {
     return {
-        type: "unit",
-        unit: parsedUnit[0],
-        value: number,
+      type: "keyword",
+      value
     };
+  }
+  if (number === 0 && property in import_css_data.properties) {
+    return import_css_data.properties[property].initial;
+  }
+  return {
+    type: "unit",
+    unit: parsedUnit[0],
+    value: number
+  };
 };
 const getBrowserStyle = (element) => {
-    const browserStyle = {};
-    if (element === undefined)
-        return browserStyle;
-    let knownProperty;
-    const computedStyle = getComputedStyle(element);
-    for (knownProperty in css_data_1.properties) {
-        if (knownProperty in computedStyle === false)
-            continue;
-        // Typescript doesn't know we can access CSSStyleDeclaration properties by keys
-        const computedValue = computedStyle[knownProperty];
-        browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
-    }
-    // We need a single font-family that is actually rendered. Computed style will return a list of potential fonts.
-    browserStyle.fontFamily = {
-        type: "fontFamily",
-        value: [(0, detect_font_1.detectFont)(element)],
-    };
+  const browserStyle = {};
+  if (element === void 0)
     return browserStyle;
+  let knownProperty;
+  const computedStyle = getComputedStyle(element);
+  for (knownProperty in import_css_data.properties) {
+    if (knownProperty in computedStyle === false)
+      continue;
+    const computedValue = computedStyle[knownProperty];
+    browserStyle[knownProperty] = parseValue(knownProperty, computedValue);
+  }
+  browserStyle.fontFamily = {
+    type: "fontFamily",
+    value: [(0, import_detect_font.detectFont)(element)]
+  };
+  return browserStyle;
 };
-exports.getBrowserStyle = getBrowserStyle;