@webstudio-is/sdk-components-react 0.191.5 → 0.192.0

package/lib/button.ws.js

@@ -4,10 +4,9 @@ import { button as o } from "@webstudio-is/sdk/normalize.css";
 import { props as n } from "./__generated__/button.props.js";
 const a = {
   button: o
-}, c = {
+}, p = {
   category: "forms",
   type: "container",
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -34,11 +33,11 @@ const a = {
       ]
     }
   ]
-}, p = {
+}, c = {
   props: n,
   initialProps: ["id", "className", "type", "aria-label"]
 };
 export {
-  c as meta,
-  p as propsMeta
+  p as meta,
+  c as propsMeta
 };

package/lib/checkbox.ws.js

@@ -1,8 +1,8 @@
 import { CheckboxCheckedIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { checkbox as o } from "@webstudio-is/sdk/normalize.css";
-import { props as n } from "./__generated__/checkbox.props.js";
-const r = {
+import { props as r } from "./__generated__/checkbox.props.js";
+const a = {
   input: [
     ...o,
     {
@@ -12,7 +12,6 @@ const r = {
   ]
 }, s = {
   category: "forms",
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -20,7 +19,7 @@ const r = {
   type: "control",
   description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
   icon: e,
-  presetStyle: r,
+  presetStyle: a,
   order: 6,
   states: [
     ...t,
@@ -50,7 +49,7 @@ const r = {
     }
   ]
 }, p = {
-  props: n,
+  props: r,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {

package/lib/code-text.ws.js

@@ -30,12 +30,11 @@ const p = {
       value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
     }
   ]
-}, l = {
+}, d = {
   category: "general",
   type: "embed",
   description: "Use this component when you want to display code as text on the page.",
   icon: e,
-  invalidAncestors: ["CodeText"],
   constraints: {
     relation: "ancestor",
     component: { $neq: "CodeText" }
@@ -55,6 +54,6 @@ const p = {
   initialProps: ["id", "className", "lang", "code"]
 };
 export {
-  l as meta,
+  d as meta,
   s as propsMeta
 };

package/lib/form.ws.js

@@ -11,7 +11,6 @@ const n = {
   category: "forms",
   type: "container",
   label: "Form",
-  invalidAncestors: ["Form", "Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Form", "Button", "Link"] }

package/lib/heading.ws.js

@@ -1,26 +1,25 @@
-import { HeadingIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
+import { HeadingIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/react-sdk";
 import { h1 as n, h2 as o, h3 as a, h4 as r, h5 as i, h6 as s } from "@webstudio-is/sdk/normalize.css";
-import { props as c } from "./__generated__/heading.props.js";
-const p = {
+import { props as p } from "./__generated__/heading.props.js";
+const c = {
   h1: n,
   h2: o,
   h3: a,
   h4: r,
   h5: i,
   h6: s
-}, m = {
+}, l = {
   category: "text",
   type: "container",
   description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  icon: e,
-  invalidAncestors: ["Heading"],
+  icon: t,
   constraints: {
     relation: "ancestor",
     component: { $neq: "Heading" }
   },
-  states: t,
-  presetStyle: p,
+  states: e,
+  presetStyle: c,
   order: 1,
   template: [
     {
@@ -36,10 +35,10 @@ const p = {
     }
   ]
 }, y = {
-  props: c,
+  props: p,
   initialProps: ["id", "className", "tag"]
 };
 export {
-  m as meta,
+  l as meta,
   y as propsMeta
 };

package/lib/input.ws.js

@@ -12,7 +12,6 @@ const r = {
   ]
 }, p = {
   category: "forms",
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }

package/lib/label.ws.js

@@ -7,9 +7,8 @@ const l = {
     ...r,
     { property: "display", value: { type: "keyword", value: "block" } }
   ]
-}, i = {
+}, m = {
   category: "forms",
-  invalidAncestors: ["Button", "Label"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -27,7 +26,7 @@ const l = {
       children: [{ type: "text", value: "Form Label", placeholder: !0 }]
     }
   ]
-}, m = {
+}, i = {
   props: {
     ...t,
     htmlFor: {
@@ -38,6 +37,6 @@ const l = {
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  i as meta,
-  m as propsMeta
+  m as meta,
+  i as propsMeta
 };

package/lib/link.ws.js

@@ -1,10 +1,10 @@
 import { LinkIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { a as o } from "@webstudio-is/sdk/normalize.css";
-import { props as r } from "./__generated__/link.props.js";
+import { a as r } from "@webstudio-is/sdk/normalize.css";
+import { props as o } from "./__generated__/link.props.js";
 const n = {
   a: [
-    ...o,
+    ...r,
     {
       property: "minHeight",
       value: { type: "unit", unit: "em", value: 1 }
@@ -19,7 +19,6 @@ const n = {
   type: "container",
   description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
   icon: e,
-  invalidAncestors: ["Link", "Button"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -53,7 +52,7 @@ const n = {
   ]
 }, c = {
   props: {
-    ...r,
+    ...o,
     href: {
       type: "string",
       control: "url",

package/lib/list-item.ws.js

@@ -2,12 +2,11 @@ import { ListItemIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/react-sdk";
 import { li as o } from "@webstudio-is/sdk/normalize.css";
 import { props as i } from "./__generated__/list-item.props.js";
-const r = {
+const n = {
   li: o
-}, c = {
+}, m = {
   category: "general",
   type: "container",
-  requiredAncestors: ["List"],
   constraints: {
     relation: "parent",
     component: { $eq: "List" }
@@ -15,7 +14,7 @@ const r = {
   description: "Adds a new item to an existing list.",
   icon: t,
   states: e,
-  presetStyle: r,
+  presetStyle: n,
   order: 4,
   template: [
     {
@@ -30,11 +29,11 @@ const r = {
       ]
     }
   ]
-}, m = {
+}, c = {
   props: i,
   initialProps: ["id", "className"]
 };
 export {
-  c as meta,
-  m as propsMeta
+  m as meta,
+  c as propsMeta
 };

package/lib/option.ws.js

@@ -17,8 +17,6 @@ const o = {
   ]
 }, c = {
   category: "hidden",
-  // @todo: requiredAncestors should be ["Select", "Optgroup", "Datalist"] but that gives unreadable error when adding Select onto Canvas
-  requiredAncestors: ["Select"],
   constraints: {
     relation: "parent",
     component: { $eq: "Select" }

package/lib/paragraph.ws.js

@@ -1,15 +1,14 @@
 import { TextAlignLeftIcon as t } from "@webstudio-is/icons/svg";
 import { defaultStates as e } from "@webstudio-is/react-sdk";
-import { p as r } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/paragraph.props.js";
+import { p as o } from "@webstudio-is/sdk/normalize.css";
+import { props as r } from "./__generated__/paragraph.props.js";
 const a = {
-  p: r
+  p: o
 }, s = {
   category: "text",
   type: "container",
   description: "A container for multi-line text.",
   icon: t,
-  invalidAncestors: ["Paragraph"],
   constraints: {
     relation: "ancestor",
     component: { $neq: "Paragraph" }
@@ -30,11 +29,11 @@ const a = {
       ]
     }
   ]
-}, l = {
-  props: o,
+}, m = {
+  props: r,
   initialProps: ["id", "className"]
 };
 export {
   s as meta,
-  l as propsMeta
+  m as propsMeta
 };

package/lib/radio-button.ws.js

@@ -1,8 +1,8 @@
 import { RadioCheckedIcon as e } from "@webstudio-is/icons/svg";
 import { defaultStates as t } from "@webstudio-is/react-sdk";
 import { radio as o } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/radio-button.props.js";
-const a = {
+import { props as a } from "./__generated__/radio-button.props.js";
+const i = {
   input: [
     ...o,
     {
@@ -12,7 +12,6 @@ const a = {
   ]
 }, s = {
   category: "forms",
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
@@ -21,7 +20,7 @@ const a = {
   label: "Radio",
   description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their “Name” properties.",
   icon: e,
-  presetStyle: a,
+  presetStyle: i,
   order: 5,
   states: [
     ...t,
@@ -52,7 +51,7 @@ const a = {
     }
   ]
 }, c = {
-  props: i,
+  props: a,
   initialProps: ["id", "className", "name", "value", "required", "checked"]
 };
 export {

package/lib/select.ws.js

@@ -12,7 +12,6 @@ const o = {
   ]
 }, s = {
   category: "forms",
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }

package/lib/textarea.ws.js

@@ -1,10 +1,10 @@
 import { FormTextAreaIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/react-sdk";
-import { textarea as o } from "@webstudio-is/sdk/normalize.css";
+import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { textarea as t } from "@webstudio-is/sdk/normalize.css";
 import { props as r } from "./__generated__/textarea.props.js";
 const l = {
   textarea: [
-    ...o,
+    ...t,
     // resize doesn't work well while on canvas
     { property: "resize", value: { type: "keyword", value: "none" } },
     {
@@ -20,13 +20,12 @@ const l = {
   icon: e,
   presetStyle: l,
   order: 4,
-  invalidAncestors: ["Button", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link"] }
   },
   states: [
-    ...t,
+    ...o,
     { selector: "::placeholder", label: "Placeholder" },
     { selector: ":valid", label: "Valid" },
     { selector: ":invalid", label: "Invalid" },

package/lib/vimeo-play-button.ws.js

@@ -4,11 +4,9 @@ import { ButtonElementIcon as e } from "@webstudio-is/icons/svg";
 import { button as n } from "@webstudio-is/sdk/normalize.css";
 const r = {
   button: n
-}, m = {
+}, p = {
   category: "hidden",
   type: "container",
-  invalidAncestors: ["Button"],
-  requiredAncestors: ["Vimeo"],
   constraints: [
     {
       relation: "ancestor",
@@ -23,11 +21,11 @@ const r = {
   icon: e,
   presetStyle: r,
   states: t
-}, p = {
+}, c = {
   props: o,
   initialProps: ["id", "className"]
 };
 export {
-  m as meta,
-  p as propsMeta
+  p as meta,
+  c as propsMeta
 };

package/lib/vimeo-preview-image.ws.js

@@ -1,20 +1,19 @@
 import "@webstudio-is/react-sdk";
-import { meta as o, propsOverrides as e, propsMeta as r } from "./image.ws.js";
+import { meta as o, propsOverrides as r, propsMeta as e } from "./image.ws.js";
 import { props as t } from "./__generated__/vimeo-preview-image.props.js";
-const a = {
+const i = {
   ...o,
   category: "hidden",
   label: "Preview Image",
-  requiredAncestors: ["Vimeo"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "Vimeo" }
   }
 }, m = {
-  props: { ...t, ...e },
-  initialProps: r.initialProps
+  props: { ...t, ...r },
+  initialProps: e.initialProps
 };
 export {
-  a as meta,
+  i as meta,
   m as propsMeta
 };

package/lib/vimeo-spinner.ws.js

@@ -2,18 +2,17 @@ import { defaultStates as o } from "@webstudio-is/react-sdk";
 import { props as t } from "./__generated__/vimeo-spinner.props.js";
 import { div as e } from "@webstudio-is/sdk/normalize.css";
 import { BoxIcon as r } from "@webstudio-is/icons/svg";
-const i = {
+const n = {
   div: e
 }, m = {
   type: "container",
-  requiredAncestors: ["Vimeo"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "Vimeo" }
   },
   icon: r,
   states: o,
-  presetStyle: i,
+  presetStyle: n,
   category: "hidden",
   label: "Spinner"
 }, c = {

package/lib/vimeo.ws.js

@@ -12,7 +12,6 @@ const n = {
   icon: e,
   states: o,
   presetStyle: n,
-  invalidAncestors: ["Button", "Heading", "Link"],
   constraints: {
     relation: "ancestor",
     component: { $nin: ["Button", "Link", "Heading"] }
@@ -303,7 +302,7 @@ const n = {
       ]
     }
   ]
-}, i = [
+}, u = [
   "id",
   "className",
   "url",
@@ -322,7 +321,7 @@ const n = {
   "controlsColor"
 ], d = {
   props: a,
-  initialProps: i
+  initialProps: u
 };
 export {
   s as meta,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.191.5",
+  "version": "0.192.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -42,10 +42,10 @@
     "@react-aria/utils": "^3.25.3",
     "colord": "^2.9.3",
     "micromark": "^4.0.0",
-    "@webstudio-is/icons": "0.191.5",
-    "@webstudio-is/image": "0.191.5",
-    "@webstudio-is/sdk": "0.191.5",
-    "@webstudio-is/react-sdk": "0.191.5"
+    "@webstudio-is/icons": "0.192.0",
+    "@webstudio-is/react-sdk": "0.192.0",
+    "@webstudio-is/sdk": "0.192.0",
+    "@webstudio-is/image": "0.192.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.2.2",
@@ -54,8 +54,8 @@
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "vitest": "^2.1.8",
-    "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7"
+    "@webstudio-is/tsconfig": "1.0.7",
+    "@webstudio-is/generate-arg-types": "0.0.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",