@webstudio-is/sdk-components-react 0.87.1 → 0.88.0

package/lib/__generated__/checkbox.props.js

@@ -344,12 +344,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/__generated__/code-text.props.js

@@ -18,7 +18,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["inline", "list", "none", "both"]
+    options: ["list", "none", "inline", "both"]
   },
   "aria-braillelabel": {
     description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
@@ -346,12 +346,6 @@ const props = {
   draggable: { required: false, control: "boolean", type: "boolean" },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
-  inline: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: false
-  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -380,7 +374,6 @@ const props = {
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
-  meta: { required: false, control: "text", type: "string" },
   nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },

package/lib/__generated__/input.props.js

@@ -344,12 +344,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/__generated__/radio-button.props.js

@@ -344,12 +344,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/__generated__/text.props.js

@@ -400,10 +400,10 @@ const props = {
   tabIndex: { required: false, control: "number", type: "number" },
   tag: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     defaultValue: "div",
-    options: ["div", "figcaption", "span"]
+    options: ["div", "cite", "figcaption", "span"]
   },
   title: { required: false, control: "text", type: "string" },
   translate: {

package/lib/blockquote.ws.js

@@ -69,7 +69,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["id"]
+  initialProps: ["id", "cite"]
 };
 export {
   meta,

package/lib/cjs/__generated__/checkbox.props.js

@@ -367,12 +367,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/cjs/__generated__/code-text.props.js

@@ -41,7 +41,7 @@ const props = {
     required: false,
     control: "select",
     type: "string",
-    options: ["inline", "list", "none", "both"]
+    options: ["list", "none", "inline", "both"]
   },
   "aria-braillelabel": {
     description: "Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label.",
@@ -369,12 +369,6 @@ const props = {
   draggable: { required: false, control: "boolean", type: "boolean" },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
-  inline: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: false
-  },
   inputMode: {
     description: "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
@@ -403,7 +397,6 @@ const props = {
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
-  meta: { required: false, control: "text", type: "string" },
   nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },

package/lib/cjs/__generated__/input.props.js

@@ -367,12 +367,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/cjs/__generated__/radio-button.props.js

@@ -367,12 +367,6 @@ const props = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"]
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/lib/cjs/__generated__/text.props.js

@@ -423,10 +423,10 @@ const props = {
   tabIndex: { required: false, control: "number", type: "number" },
   tag: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     defaultValue: "div",
-    options: ["div", "figcaption", "span"]
+    options: ["div", "cite", "figcaption", "span"]
   },
   title: { required: false, control: "text", type: "string" },
   translate: {

package/lib/cjs/blockquote.ws.js

@@ -91,5 +91,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_blockquote.props,
-  initialProps: ["id"]
+  initialProps: ["id", "cite"]
 };

package/lib/cjs/code-text.js

@@ -19,21 +19,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var code_text_exports = {};
 __export(code_text_exports, {
   CodeText: () => CodeText,
-  defaultTag: () => defaultTag,
-  displayVarNamespace: () => displayVarNamespace
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(code_text_exports);
 var import_react = require("react");
-var import_css_vars = require("@webstudio-is/css-vars");
 const defaultTag = "code";
-const displayVarNamespace = import_css_vars.cssVars.define("code-display");
-const blockStyle = {
-  [import_css_vars.cssVars.define(displayVarNamespace)]: "block"
-};
-const CodeText = (0, import_react.forwardRef)(
-  ({ inline = false, ...props }, ref) => {
-    const style = inline ? void 0 : blockStyle;
-    return (0, import_react.createElement)(defaultTag, { ...props, style, ref });
-  }
-);
+const CodeText = (0, import_react.forwardRef)((props, ref) => {
+  return (0, import_react.createElement)(defaultTag, { ...props, ref });
+});
 CodeText.displayName = "CodeText";

package/lib/cjs/code-text.ws.js

@@ -25,18 +25,17 @@ module.exports = __toCommonJS(code_text_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
 var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var import_code_text = require("./code-text");
-var import_code_text2 = require("./__generated__/code-text.props");
+var import_code_text = require("./__generated__/code-text.props");
 const presetStyle = {
   code: [
     ...import_css_normalize.code,
     {
       property: "display",
-      value: {
-        type: "var",
-        value: import_code_text.displayVarNamespace,
-        fallbacks: [{ type: "keyword", value: "inline-block" }]
-      }
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value: "pre-wrap" }
     },
     {
       property: "paddingLeft",
@@ -69,6 +68,6 @@ const meta = {
   order: 8
 };
 const propsMeta = {
-  props: import_code_text2.props,
-  initialProps: ["id", "inline", "lang", "meta"]
+  props: import_code_text.props,
+  initialProps: ["id", "lang"]
 };

package/lib/code-text.js

@@ -2,21 +2,12 @@ import {
   forwardRef,
   createElement
 } from "react";
-import { cssVars } from "@webstudio-is/css-vars";
 const defaultTag = "code";
-const displayVarNamespace = cssVars.define("code-display");
-const blockStyle = {
-  [cssVars.define(displayVarNamespace)]: "block"
-};
-const CodeText = forwardRef(
-  ({ inline = false, ...props }, ref) => {
-    const style = inline ? void 0 : blockStyle;
-    return createElement(defaultTag, { ...props, style, ref });
-  }
-);
+const CodeText = forwardRef((props, ref) => {
+  return createElement(defaultTag, { ...props, ref });
+});
 CodeText.displayName = "CodeText";
 export {
   CodeText,
-  defaultTag,
-  displayVarNamespace
+  defaultTag
 };

package/lib/code-text.ws.js

@@ -3,18 +3,17 @@ import {
   defaultStates
 } from "@webstudio-is/react-sdk";
 import { code } from "@webstudio-is/react-sdk/css-normalize";
-import { displayVarNamespace } from "./code-text";
 import { props } from "./__generated__/code-text.props";
 const presetStyle = {
   code: [
     ...code,
     {
       property: "display",
-      value: {
-        type: "var",
-        value: displayVarNamespace,
-        fallbacks: [{ type: "keyword", value: "inline-block" }]
-      }
+      value: { type: "keyword", value: "block" }
+    },
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value: "pre-wrap" }
     },
     {
       property: "paddingLeft",
@@ -48,7 +47,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["id", "inline", "lang", "meta"]
+  initialProps: ["id", "lang"]
 };
 export {
   meta,

package/lib/types/code-text.d.ts

@@ -1,9 +1,3 @@
-import { type ComponentProps } from "react";
+/// <reference types="react" />
 export declare const defaultTag = "code";
-export declare const displayVarNamespace: "--code-display-w7ovd";
-type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
-    inline?: boolean;
-    meta?: string;
-};
-export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLElement>>;
-export {};
+export declare const CodeText: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/lib/types/text.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentProps } from "react";
 export declare const defaultTag = "div";
 type Props = ComponentProps<typeof defaultTag> & {
-    tag?: "div" | "span" | "figcaption";
+    tag?: "div" | "span" | "figcaption" | "cite";
 };
 export declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/types/vimeo-preview-image.d.ts

@@ -272,12 +272,12 @@ export declare const VimeoPreviewImage: import("react").ForwardRefExoticComponen
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLImageElement> | undefined;
     height?: string | number | undefined;
     width?: string | number | undefined;
-    alt?: string | undefined;
     src?: string | undefined;
-    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
+    alt?: string | undefined;
     referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     quality?: number | undefined;
     sizes?: string | undefined;
+    crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     decoding?: "auto" | "async" | "sync" | undefined;
     loading?: "eager" | "lazy" | undefined;
     srcSet?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.87.1",
+  "version": "0.88.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,11 +40,11 @@
     "@react-aria/utils": "^3.19.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "^0.87.1",
-    "@webstudio-is/generate-arg-types": "^0.87.1",
-    "@webstudio-is/icons": "^0.87.1",
-    "@webstudio-is/image": "^0.87.1",
-    "@webstudio-is/react-sdk": "^0.87.1"
+    "@webstudio-is/css-vars": "^0.88.0",
+    "@webstudio-is/generate-arg-types": "^0.88.0",
+    "@webstudio-is/icons": "^0.88.0",
+    "@webstudio-is/image": "^0.88.0",
+    "@webstudio-is/react-sdk": "^0.88.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.2.1",

package/src/__generated__/checkbox.props.ts

@@ -394,12 +394,6 @@ export const props: Record<string, PropMeta> = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"],
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/src/__generated__/code-text.props.ts

@@ -23,7 +23,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "select",
     type: "string",
-    options: ["inline", "list", "none", "both"],
+    options: ["list", "none", "inline", "both"],
   },
   "aria-braillelabel": {
     description:
@@ -396,12 +396,6 @@ export const props: Record<string, PropMeta> = {
   draggable: { required: false, control: "boolean", type: "boolean" },
   hidden: { required: false, control: "boolean", type: "boolean" },
   id: { required: false, control: "text", type: "string" },
-  inline: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-    defaultValue: false,
-  },
   inputMode: {
     description:
       "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
@@ -432,7 +426,6 @@ export const props: Record<string, PropMeta> = {
   itemScope: { required: false, control: "boolean", type: "boolean" },
   itemType: { required: false, control: "text", type: "string" },
   lang: { required: false, control: "text", type: "string" },
-  meta: { required: false, control: "text", type: "string" },
   nonce: { required: false, control: "text", type: "string" },
   placeholder: { required: false, control: "text", type: "string" },
   prefix: { required: false, control: "text", type: "string" },

package/src/__generated__/input.props.ts

@@ -394,12 +394,6 @@ export const props: Record<string, PropMeta> = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"],
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/src/__generated__/radio-button.props.ts

@@ -394,12 +394,6 @@ export const props: Record<string, PropMeta> = {
   color: { required: false, control: "color", type: "string" },
   content: { required: false, control: "text", type: "string" },
   contextMenu: { required: false, control: "text", type: "string" },
-  crossOrigin: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["", "anonymous", "use-credentials"],
-  },
   datatype: { required: false, control: "text", type: "string" },
   defaultChecked: { required: false, control: "boolean", type: "boolean" },
   dir: { required: false, control: "text", type: "string" },

package/src/__generated__/text.props.ts

@@ -452,10 +452,10 @@ export const props: Record<string, PropMeta> = {
   tabIndex: { required: false, control: "number", type: "number" },
   tag: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     defaultValue: "div",
-    options: ["div", "figcaption", "span"],
+    options: ["div", "cite", "figcaption", "span"],
   },
   title: { required: false, control: "text", type: "string" },
   translate: {

package/src/blockquote.ws.tsx

@@ -78,5 +78,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["id"],
+  initialProps: ["id", "cite"],
 };

package/src/code-text.tsx

@@ -1,31 +1,17 @@
 import {
-  forwardRef,
-  createElement,
   type ElementRef,
   type ComponentProps,
+  forwardRef,
+  createElement,
 } from "react";
-import { cssVars } from "@webstudio-is/css-vars";
 
 export const defaultTag = "code";
 
-export const displayVarNamespace = cssVars.define("code-display");
-
-const blockStyle = {
-  [cssVars.define(displayVarNamespace)]: "block",
-};
-
-type Props = Omit<ComponentProps<typeof defaultTag>, "inline"> & {
-  inline?: boolean;
-  meta?: string;
-};
-
-export const CodeText = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  ({ inline = false, ...props }, ref) => {
-    // @todo in the future we should expose the inline prop a an attribute
-    // and define the display style in `presetStyle` in meta.
-    const style = inline ? undefined : blockStyle;
-    return createElement(defaultTag, { ...props, style, ref });
-  }
-);
+export const CodeText = forwardRef<
+  ElementRef<typeof defaultTag>,
+  ComponentProps<typeof defaultTag>
+>((props, ref) => {
+  return createElement(defaultTag, { ...props, ref });
+});
 
 CodeText.displayName = "CodeText";

package/src/code-text.ws.tsx

@@ -6,7 +6,7 @@ import {
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
 import { code } from "@webstudio-is/react-sdk/css-normalize";
-import { type defaultTag, displayVarNamespace } from "./code-text";
+import type { defaultTag } from "./code-text";
 import { props } from "./__generated__/code-text.props";
 
 const presetStyle = {
@@ -14,11 +14,11 @@ const presetStyle = {
     ...code,
     {
       property: "display",
-      value: {
-        type: "var",
-        value: displayVarNamespace,
-        fallbacks: [{ type: "keyword", value: "inline-block" }],
-      },
+      value: { type: "keyword", value: "block" },
+    },
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value: "pre-wrap" },
     },
     {
       property: "paddingLeft",
@@ -54,5 +54,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["id", "inline", "lang", "meta"],
+  initialProps: ["id", "lang"],
 };

package/src/text.tsx

@@ -9,7 +9,7 @@ export const defaultTag = "div";
 
 // We don't want to enable all tags because Box is usually a container and we have specific components for many tags.
 type Props = ComponentProps<typeof defaultTag> & {
-  tag?: "div" | "span" | "figcaption";
+  tag?: "div" | "span" | "figcaption" | "cite";
 };
 
 export const Text = forwardRef<ElementRef<typeof defaultTag>, Props>(