@webstudio-is/sdk-components-react-remix 0.145.0 → 0.151.0

package/lib/components.js

@@ -42,7 +42,7 @@ var Link = wrapLinkComponent(BaseLink);
 import { RichTextLink as BaseLink2 } from "@webstudio-is/sdk-components-react";
 var RichTextLink = wrapLinkComponent(BaseLink2);
 
-// src/server-form.tsx
+// src/webhook-form.tsx
 import {
   forwardRef as forwardRef3,
   useRef,
@@ -63,7 +63,7 @@ var useOnFetchEnd = (fetcher, handler) => {
     prevFetcher.current = fetcher;
   }, [fetcher]);
 };
-var ServerForm = forwardRef3(
+var WebhookForm = forwardRef3(
   ({ children, action, method, state = "initial", onStateChange, ...rest }, ref) => {
     const fetcher = useFetcher();
     const instanceId = getInstanceIdFromComponentProps(rest);
@@ -77,19 +77,22 @@ var ServerForm = forwardRef3(
     ] });
   }
 );
-ServerForm.displayName = "Form";
+WebhookForm.displayName = "WebhookForm";
 
 // src/remix-form.tsx
 import { forwardRef as forwardRef4 } from "react";
 import { Form } from "@remix-run/react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var RemixForm = forwardRef4((props, ref) => {
-  return /* @__PURE__ */ jsx4(Form, { ...props, ref });
+  if (props.action === "" || props.action?.startsWith("/")) {
+    return /* @__PURE__ */ jsx4(Form, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx4("form", { ...props, ref });
 });
 RemixForm.displayName = "Form";
 export {
   Body,
-  ServerForm as Form,
+  WebhookForm as Form,
   Link,
   RemixForm,
   RichTextLink

package/lib/metas.js

@@ -31,50 +31,50 @@ var props = {
     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.",
+    description: "Defines a string value that labels the current element, which is intended to be converted into Braille.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-brailleroledescription": {
-    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription.",
+    description: "Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-busy": { required: false, control: "boolean", type: "boolean" },
   "aria-checked": {
-    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected.',
+    description: 'Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.',
     required: false,
     control: "text",
     type: "string"
   },
   "aria-colcount": {
-    description: "Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex.",
+    description: "Defines the total number of columns in a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-colindex": {
-    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan.",
+    description: "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-colindextext": {
-    description: "Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext.",
+    description: "Defines a human readable text alternative of aria-colindex.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-colspan": {
-    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan.",
+    description: "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-controls": {
-    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns.",
+    description: "Identifies the element (or elements) whose contents or presence are controlled by the current element.",
     required: false,
     control: "text",
     type: "string"
@@ -86,38 +86,38 @@ var props = {
     type: "string"
   },
   "aria-describedby": {
-    description: "Identifies the element (or elements) that describes the object.\n@see aria-labelledby",
+    description: "Identifies the element (or elements) that describes the object.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-description": {
-    description: "Defines a string value that describes or annotates the current element.\n@see related aria-describedby.",
+    description: "Defines a string value that describes or annotates the current element.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-details": {
-    description: "Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby.",
+    description: "Identifies the element that provides a detailed, extended description for the object.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-disabled": {
-    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly.",
+    description: "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.",
     required: false,
     control: "boolean",
     type: "boolean"
   },
   "aria-dropeffect": {
-    description: "Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1",
+    description: "Indicates what functions can be performed when a dragged object is released on the drop target.",
     required: false,
     control: "select",
     type: "string",
     options: ["link", "none", "copy", "execute", "move", "popup"]
   },
   "aria-errormessage": {
-    description: "Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby.",
+    description: "Identifies the element that provides an error message for the object.",
     required: false,
     control: "text",
     type: "string"
@@ -135,8 +135,7 @@ var props = {
     type: "string"
   },
   "aria-grabbed": {
-    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.
-@deprecated in ARIA 1.1`,
+    description: `Indicates an element's "grabbed" state in a drag-and-drop operation.`,
     required: false,
     control: "boolean",
     type: "boolean"
@@ -148,13 +147,13 @@ var props = {
     type: "string"
   },
   "aria-hidden": {
-    description: "Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled.",
+    description: "Indicates whether the element is exposed to an accessibility API.",
     required: false,
     control: "boolean",
     type: "boolean"
   },
   "aria-invalid": {
-    description: "Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage.",
+    description: "Indicates the entered value does not conform to the format expected by the application.",
     required: false,
     control: "text",
     type: "string"
@@ -172,7 +171,7 @@ var props = {
     type: "string"
   },
   "aria-labelledby": {
-    description: "Identifies the element (or elements) that labels the current element.\n@see aria-describedby.",
+    description: "Identifies the element (or elements) that labels the current element.",
     required: false,
     control: "text",
     type: "string"
@@ -216,7 +215,7 @@ var props = {
     options: ["horizontal", "vertical"]
   },
   "aria-owns": {
-    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls.",
+    description: "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.",
     required: false,
     control: "text",
     type: "string"
@@ -228,25 +227,25 @@ var props = {
     type: "string"
   },
   "aria-posinset": {
-    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize.",
+    description: "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-pressed": {
-    description: 'Indicates the current "pressed" state of toggle buttons.\n@see aria-checked\n@see aria-selected.',
+    description: 'Indicates the current "pressed" state of toggle buttons.',
     required: false,
     control: "text",
     type: "string"
   },
   "aria-readonly": {
-    description: "Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled.",
+    description: "Indicates that the element is not editable, but is otherwise operable.",
     required: false,
     control: "boolean",
     type: "boolean"
   },
   "aria-relevant": {
-    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic.",
+    description: "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.",
     required: false,
     control: "select",
     type: "string",
@@ -276,37 +275,37 @@ var props = {
     type: "string"
   },
   "aria-rowcount": {
-    description: "Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex.",
+    description: "Defines the total number of rows in a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-rowindex": {
-    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan.",
+    description: "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-rowindextext": {
-    description: "Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext.",
+    description: "Defines a human readable text alternative of aria-rowindex.",
     required: false,
     control: "text",
     type: "string"
   },
   "aria-rowspan": {
-    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan.",
+    description: "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.",
     required: false,
     control: "number",
     type: "number"
   },
   "aria-selected": {
-    description: 'Indicates the current "selected" state of various widgets.\n@see aria-checked\n@see aria-pressed.',
+    description: 'Indicates the current "selected" state of various widgets.',
     required: false,
     control: "boolean",
     type: "boolean"
   },
   "aria-setsize": {
-    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset.",
+    description: "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.",
     required: false,
     control: "number",
     type: "number"
@@ -331,7 +330,7 @@ var props = {
     type: "number"
   },
   "aria-valuenow": {
-    description: "Defines the current value for a range widget.\n@see aria-valuetext.",
+    description: "Defines the current value for a range widget.",
     required: false,
     control: "number",
     type: "number"
@@ -414,7 +413,7 @@ var props = {
     description: "Often used with CSS to style a specific element. The value of this attribute must be unique."
   },
   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",
+    description: "Hints at the type of data that might be entered by the user while editing the element or its contents",
     required: false,
     control: "select",
     type: "string",
@@ -430,7 +429,7 @@ var props = {
     ]
   },
   is: {
-    description: "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    description: "Specify that a standard HTML element should behave like a defined custom built-in element",
     required: false,
     control: "text",
     type: "string"
@@ -459,12 +458,6 @@ var props = {
     type: "string",
     description: "The ping attribute specifies a space-separated list of URLs to be notified if a user follows the hyperlink."
   },
-  placeholder: {
-    required: false,
-    control: "text",
-    type: "string",
-    description: "Provides a hint to the user of what can be entered in the field."
-  },
   prefetch: {
     required: false,
     control: "select",
@@ -592,14 +585,19 @@ var propsMeta = {
 // src/rich-text-link.ws.ts
 import { RichTextLink } from "@webstudio-is/sdk-components-react/metas";
 
-// src/server-form.ws.ts
+// src/webhook-form.ws.ts
 import { Form as baseMeta } from "@webstudio-is/sdk-components-react/metas";
 import {
   showAttribute
 } from "@webstudio-is/react-sdk";
+import { WebhookFormIcon } from "@webstudio-is/icons/svg";
 var meta = {
   ...baseMeta,
-  label: "Form",
+  category: "data",
+  label: "Webhook Form",
+  description: "Collect user data and send it to any webhook.",
+  order: 1,
+  icon: WebhookFormIcon,
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }
@@ -701,29 +699,12 @@ var meta = {
 };
 
 // src/remix-form.ws.ts
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
-import { FormIcon } from "@webstudio-is/icons/svg";
-var presetStyle = {
-  form
-};
-var meta2 = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Form", "Button", "Link"],
-  label: "Form",
-  description: "Form control.",
-  icon: FormIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0
-};
+import { Form } from "@webstudio-is/sdk-components-react/metas";
+import { Form as Form2 } from "@webstudio-is/sdk-components-react/props";
 export {
   Body,
   meta as Form,
   Link,
-  meta2 as RemixForm,
+  Form as RemixForm,
   RichTextLink
 };