@wix/editor-react-components 1.2764.0 → 1.2766.0

package/dist/site/components/TextInput/manifest.js

@@ -1,20 +1,18 @@
-import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, E as ELEMENTS, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { D as DesignStates, a as DisplayNames, s as selectors } from "../chunks/constants3.js";
-import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
+import { D as DesignStates, a as DisplayNames, F as FunctionalStateKeys, c as componentClassNames } from "../chunks/constants3.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
-import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
-import { m as manifestValidation } from "../chunks/manifest2.js";
-const designState = (s, pseudoClass) => withSpec({
+const designState = (s, pseudoClass) => ({
   spec: IS_SUPPORT_DESIGN_STATE_SPEC,
   displayName: s.displayName,
   className: s.className,
   ...pseudoClass ? { pseudoClass } : {}
 });
 const manifest = {
-  id: "e95f3cfd-a78d-4d7c-addb-c93182193857",
-  type: "wixEditorElements.TextInput__DEV__v2",
+  id: "3485a1f6-1d51-4e67-92b9-b07603e4e296",
+  type: "wixEditorElements.TextInput__DEV__v4",
   description: "TextInput",
   installation: {
+    presets: { small: "baseTextInput", large: "baseTextInput" },
     initialSize: {
       width: {
         sizingType: LAYOUT.SIZING_TYPE.pixels,
@@ -29,121 +27,110 @@ const manifest = {
     client: {
       componentUrl: "./site/components/TextInput/component.tsx",
       dependencies: {
-        serviceDependencies: [
-          "@wix/viewer-service-environment",
-          "@wix/viewer-service-sdk-state",
-          "@wix/viewer-service-translations"
-        ]
+        serviceDependencies: ["@wix/viewer-service-environment"]
       }
     },
-    sdk: {
-      url: "./site/components/TextInput/sdk.ts"
-    },
     editor: {
       componentUrl: "./site/components/TextInput/component.preview.tsx",
       dependencies: {
-        serviceDependencies: [
-          "@wix/viewer-service-environment",
-          "@wix/viewer-service-sdk-state",
-          "@wix/viewer-service-translations"
-        ]
+        serviceDependencies: ["@wix/viewer-service-environment"]
       }
     }
   },
   editorElement: {
-    selector: getSelector(selectors.root),
+    selector: `.${componentClassNames.root}`,
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.TextInput,
+    presets: {
+      baseTextInput: {
+        displayName: "Base Text Input",
+        presetCssUrl: "./site/components/TextInput/presets/baseTextInput.css",
+        presetDefaults: {
+          elements: {
+            input: {
+              cssProperties: {
+                background: { defaultValue: "#ffffff" },
+                boxShadow: { defaultValue: "none" },
+                paddingTop: { defaultValue: "10px" },
+                paddingBottom: { defaultValue: "10px" },
+                paddingInlineStart: { defaultValue: "12px" },
+                paddingInlineEnd: { defaultValue: "12px" },
+                font: { defaultValue: "16px/1.3 sans-serif" },
+                color: { defaultValue: "#000000" },
+                textAlign: { defaultValue: "start" },
+                borderInlineStart: { defaultValue: "1px solid #000000" },
+                borderInlineEnd: { defaultValue: "1px solid #000000" },
+                borderTop: { defaultValue: "1px solid #000000" },
+                borderBottom: { defaultValue: "1px solid #000000" },
+                borderStartStartRadius: { defaultValue: "0px" },
+                borderStartEndRadius: { defaultValue: "0px" },
+                borderEndStartRadius: { defaultValue: "0px" },
+                borderEndEndRadius: { defaultValue: "0px" }
+              },
+              cssCustomProperties: {
+                placeholderTextColor: { defaultValue: "#595959" }
+              }
+            },
+            label: {
+              cssProperties: {
+                font: { defaultValue: "16px/1.3 sans-serif" },
+                color: { defaultValue: "#000000" },
+                textAlign: { defaultValue: "start" },
+                marginBottom: { defaultValue: "6px" }
+              }
+            },
+            helperText: {
+              cssProperties: {
+                font: { defaultValue: "14px/1.3 sans-serif" },
+                color: { defaultValue: "#595959" },
+                textAlign: { defaultValue: "start" },
+                marginTop: { defaultValue: "6px" }
+              }
+            },
+            errorMessage: {
+              cssProperties: {
+                font: { defaultValue: "14px/1.3 sans-serif" },
+                color: { defaultValue: "#e21c21" },
+                textAlign: { defaultValue: "start" },
+                marginTop: { defaultValue: "6px" }
+              }
+            }
+          }
+        }
+      }
+    },
     layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
       disableStretching: true,
       disablePositioning: false
     },
+    states: {
+      [FunctionalStateKeys.previewError]: {
+        props: { previewError: true }
+      }
+    },
+    displayFilters: {
+      states: { hide: [FunctionalStateKeys.previewError] }
+    },
     elements: {
       label: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.label,
-          selector: getSelector(selectors.label),
+          selector: `.${componentClassNames.label}`,
           behaviors: { selectable: false },
-          displayGroups: {
-            labelPaddingGroup: {
-              groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
-              padding: {
-                left: "labelPaddingInlineStart",
-                right: "labelPaddingInlineEnd"
-              }
-            }
-          },
-          cssCustomProperties: {
-            labelFont: {
-              displayName: DisplayNames.cssCustomProperties.labelFont,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-            },
-            labelTextColor: {
-              displayName: DisplayNames.cssCustomProperties.labelTextColor,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-            },
-            requiredTextColor: {
-              displayName: DisplayNames.cssCustomProperties.requiredTextColor,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-            },
-            labelMarginBottom: {
-              displayName: DisplayNames.cssCustomProperties.labelMarginBottom,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom
-            },
-            labelPaddingInlineStart: {
-              displayName: DisplayNames.cssCustomProperties.labelPaddingInlineStart,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
-            },
-            labelPaddingInlineEnd: {
-              displayName: DisplayNames.cssCustomProperties.labelPaddingInlineEnd,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
+          cssProperties: {
+            font: {
+              displayName: "Typography"
             },
-            labelAlign: {
-              displayName: DisplayNames.cssCustomProperties.labelAlign,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
-              defaultValue: "start",
-              customEnum: {
-                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
-                options: [
-                  {
-                    value: "start",
-                    displayName: DisplayNames.options.start,
-                    appliedStyles: [
-                      { property: "--labelAlign", value: "start" },
-                      {
-                        property: "--labelPadding_start",
-                        value: "var(--labelPadding)"
-                      },
-                      { property: "--labelPadding_end", value: "20" }
-                    ]
-                  },
-                  {
-                    value: "center",
-                    displayName: DisplayNames.options.center,
-                    appliedStyles: [
-                      { property: "--labelAlign", value: "center" },
-                      { property: "--labelPadding_start", value: "0" },
-                      { property: "--labelPadding_end", value: "0" }
-                    ]
-                  },
-                  {
-                    value: "end",
-                    displayName: DisplayNames.options.end,
-                    appliedStyles: [
-                      { property: "--labelAlign", value: "end" },
-                      { property: "--labelPadding_start", value: "20" },
-                      {
-                        property: "--labelPadding_end",
-                        value: "var(--labelPadding)"
-                      }
-                    ]
-                  }
-                ]
-              }
-            }
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textAlign: {},
+            textTransform: {},
+            marginBottom: {}
           }
         }
       },
@@ -151,8 +138,33 @@ const manifest = {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
           displayName: DisplayNames.root.elements.input,
-          selector: getSelector(selectors.input),
+          selector: `.${componentClassNames.input}`,
           behaviors: { selectable: false },
+          cssProperties: {
+            background: {},
+            boxShadow: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {},
+            font: {
+              displayName: "Typography"
+            },
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textAlign: {},
+            textTransform: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderBottom: {},
+            borderTop: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {}
+          },
           states: {
             hover: designState(
               DesignStates.input.hover,
@@ -168,173 +180,89 @@ const manifest = {
                 DesignStates.input.disabled,
                 NativeStateType.disabled
               ),
-              props: { isDisabled: true }
+              props: { disabled: true }
             }
           },
           displayGroups: {
-            textPaddingGroup: {
-              groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
-              padding: {
-                top: "textPaddingTop",
-                bottom: "textPaddingBottom",
-                left: "textPaddingInlineStart",
-                right: "textPaddingInlineEnd"
-              }
-            },
-            borderGroup: {
-              groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
-              border: {
-                width: "borderWidth",
-                color: "borderColor"
+            placeholderTextGroup: {
+              displayName: "Placeholder",
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.text,
+              text: {
+                color: "placeholderTextColor"
               }
             }
           },
           cssCustomProperties: {
-            boxShadow: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow
-            },
-            borderRadius: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius
-            },
-            font: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-            },
-            borderWidth: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth
-            },
-            borderColor: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor
-            },
-            background: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.background
-            },
-            textColor: {
-              displayName: DisplayNames.cssCustomProperties.textColor,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-            },
             placeholderTextColor: {
               displayName: DisplayNames.cssCustomProperties.placeholderTextColor,
               cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-            },
-            textPaddingTop: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop
-            },
-            textPaddingBottom: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom
-            },
-            textPaddingInlineStart: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart
-            },
-            textPaddingInlineEnd: {
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd
-            },
-            inputAlign: {
-              displayName: DisplayNames.cssCustomProperties.inputAlign,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
-              defaultValue: "start",
-              customEnum: {
-                cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
-                options: [
-                  {
-                    value: "start",
-                    displayName: DisplayNames.options.start,
-                    appliedStyles: [
-                      { property: "--inputAlign", value: "left" },
-                      { property: "--textPadding", value: "3" },
-                      { property: "--textPadding_start", value: "3" },
-                      { property: "--textPadding_end", value: "3" }
-                    ]
-                  },
-                  {
-                    value: "center",
-                    displayName: DisplayNames.options.center,
-                    appliedStyles: [
-                      { property: "--inputAlign", value: "center" },
-                      { property: "--textPadding", value: "3" },
-                      {
-                        property: "--textPadding_start",
-                        value: "var(--textPadding)"
-                      },
-                      { property: "--textPadding_end", value: "3" }
-                    ]
-                  },
-                  {
-                    value: "end",
-                    displayName: DisplayNames.options.end,
-                    appliedStyles: [
-                      { property: "--inputAlign", value: "right" },
-                      { property: "--textPadding", value: "3" },
-                      { property: "--textPadding_start", value: "3" },
-                      {
-                        property: "--textPadding_end",
-                        value: "var(--textPadding)"
-                      }
-                    ]
-                  }
-                ]
-              }
             }
           }
         }
       },
-      prefix: {
+      helperText: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
-          displayName: DisplayNames.root.elements.prefix,
-          selector: getSelector(selectors.prefix),
+          displayName: DisplayNames.root.elements.helperText,
+          selector: `.${componentClassNames.helperText}`,
           behaviors: { selectable: false },
-          cssCustomProperties: {
-            prefixFont: {
-              displayName: DisplayNames.cssCustomProperties.prefixFont,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
-            }
+          cssProperties: {
+            font: {
+              displayName: "Typography"
+            },
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textAlign: {},
+            textTransform: {},
+            marginTop: {}
           }
         }
       },
-      helperText: {
+      errorMessage: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
-          displayName: DisplayNames.root.elements.helperText,
-          selector: getSelector(selectors.helperText),
-          behaviors: { selectable: false },
-          cssCustomProperties: {
-            helperFont: {
-              displayName: DisplayNames.cssCustomProperties.helperFont,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font
+          displayName: DisplayNames.root.elements.errorMessage,
+          selector: `.${componentClassNames.errorMessage}`,
+          behaviors: { selectable: false, removable: false },
+          cssProperties: {
+            marginTop: {},
+            textAlign: {},
+            font: {
+              displayName: "Typography"
             },
-            helperColor: {
-              displayName: DisplayNames.cssCustomProperties.helperColor,
-              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-            }
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textTransform: {}
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewError,
+            elementPath: ".root"
           }
         }
       }
     },
     displayGroups: {
+      partsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+        elements: {
+          items: ["label", "input", "helperText", "errorMessage"]
+        }
+      },
       orderedDataGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
         data: {
           items: [
-            "required",
-            "readOnly",
-            "isDisabled",
-            "autoComplete",
-            "numberSpinnerHidden",
-            "inputType",
             "label",
             "placeholder",
-            "tooltip",
-            "description",
-            "prefix",
-            "autocompleteToken",
-            "pattern",
-            "minLength",
-            "maxLength",
-            "min",
-            "max",
-            "step",
-            "phoneFormat",
-            "errorMessageType"
+            "value",
+            "helperText",
+            "errorMessage",
+            "readOnly",
+            "disabled"
           ]
         }
       }
@@ -342,93 +270,19 @@ const manifest = {
     data: {
       value: {
         displayName: DisplayNames.data.value,
+        description: DisplayNames.descriptions.value,
         dataType: DATA.DATA_TYPE.text
       },
-      defaultValue: {
-        displayName: DisplayNames.data.defaultValue,
-        dataType: DATA.DATA_TYPE.text
-      },
-      isDisabled: {
-        displayName: DisplayNames.data.isDisabled,
+      disabled: {
+        displayName: DisplayNames.data.disabled,
         dataType: DATA.DATA_TYPE.booleanValue,
         defaultValue: false
       },
-      name: {
-        displayName: DisplayNames.data.name,
-        dataType: DATA.DATA_TYPE.text
-      },
-      // Direction properties
+      // One direction for the whole component — label, input and messages alike
       direction: {
         dataType: DATA.DATA_TYPE.direction
       },
-      labelDirection: {
-        displayName: DisplayNames.data.labelDirection,
-        dataType: DATA.DATA_TYPE.direction
-      },
-      inputDirection: {
-        displayName: DisplayNames.data.inputDirection,
-        dataType: DATA.DATA_TYPE.direction
-      },
-      // Text input type
-      inputType: {
-        displayName: DisplayNames.data.inputType,
-        dataType: DATA.DATA_TYPE.textEnum,
-        defaultValue: "text",
-        [DATA.DATA_TYPE.textEnum]: {
-          options: [
-            { value: "text", displayName: DisplayNames.options.text },
-            { value: "number", displayName: DisplayNames.options.number },
-            { value: "email", displayName: DisplayNames.options.email },
-            { value: "url", displayName: DisplayNames.options.url },
-            { value: "tel", displayName: DisplayNames.options.tel },
-            { value: "password", displayName: DisplayNames.options.password }
-          ]
-        }
-      },
-      // Validation properties
-      minLength: {
-        displayName: DisplayNames.data.minLength,
-        dataType: DATA.DATA_TYPE.number,
-        [DATA.DATA_TYPE.number]: {
-          min: "0"
-        }
-      },
-      maxLength: {
-        displayName: DisplayNames.data.maxLength,
-        dataType: DATA.DATA_TYPE.number
-      },
-      min: {
-        displayName: DisplayNames.data.min,
-        dataType: DATA.DATA_TYPE.number,
-        [DATA.DATA_TYPE.number]: {
-          min: "-2147483648",
-          max: "2147483647"
-        }
-      },
-      max: {
-        displayName: DisplayNames.data.max,
-        dataType: DATA.DATA_TYPE.number,
-        [DATA.DATA_TYPE.number]: {
-          min: "-2147483648",
-          max: "2147483647"
-        }
-      },
-      pattern: {
-        displayName: DisplayNames.data.pattern,
-        dataType: DATA.DATA_TYPE.text,
-        [DATA.DATA_TYPE.text]: {
-          maxLength: 500
-        }
-      },
-      phoneFormat: {
-        displayName: DisplayNames.data.phoneFormat,
-        dataType: DATA.DATA_TYPE.text,
-        [DATA.DATA_TYPE.text]: {
-          maxLength: 100,
-          pattern: "^#*(((#+-)*)#+$)"
-        }
-      },
-      // Label and placeholder
+      // Label, placeholder and the two messages
       label: {
         displayName: DisplayNames.data.label,
         dataType: DATA.DATA_TYPE.text,
@@ -440,20 +294,21 @@ const manifest = {
         displayName: DisplayNames.data.placeholder,
         dataType: DATA.DATA_TYPE.text,
         [DATA.DATA_TYPE.text]: {
-          maxLength: 4e3
+          maxLength: 400
         }
       },
-      tooltip: {
-        displayName: DisplayNames.data.tooltip,
+      helperText: {
+        displayName: DisplayNames.data.helperText,
+        description: DisplayNames.descriptions.helperText,
         dataType: DATA.DATA_TYPE.text,
         [DATA.DATA_TYPE.text]: {
           maxLength: 400
         }
       },
-      description: {
-        displayName: DisplayNames.data.description,
+      errorMessage: {
+        displayName: DisplayNames.data.errorMessage,
+        description: DisplayNames.descriptions.errorMessage,
         dataType: DATA.DATA_TYPE.text,
-        defaultValue: "",
         [DATA.DATA_TYPE.text]: {
           maxLength: 400
         }
@@ -466,62 +321,21 @@ const manifest = {
             DATA.A11Y_ATTRIBUTES.tabIndex,
             DATA.A11Y_ATTRIBUTES.ariaLabel,
             DATA.A11Y_ATTRIBUTES.ariaDescribedby,
-            // 'ariaRequired',
             DATA.A11Y_ATTRIBUTES.ariaInvalid
           ]
         }
       },
-      // Additional properties
-      autoComplete: {
-        displayName: DisplayNames.data.autoComplete,
-        dataType: DATA.DATA_TYPE.booleanValue
-      },
       readOnly: {
         displayName: DisplayNames.data.readOnly,
         dataType: DATA.DATA_TYPE.booleanValue
       },
-      required: {
-        displayName: DisplayNames.data.required,
-        dataType: DATA.DATA_TYPE.booleanValue
-      },
-      errorMessageType: {
-        displayName: DisplayNames.data.errorMessageType,
-        dataType: DATA.DATA_TYPE.textEnum,
-        defaultValue: "inline",
-        [DATA.DATA_TYPE.textEnum]: {
-          options: [
-            { value: "inline", displayName: DisplayNames.options.inline },
-            { value: "tooltip", displayName: DisplayNames.options.tooltip }
-          ]
+      onValueChange: {
+        displayName: "On Value Change",
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ dataType: DATA.DATA_TYPE.text }]
         }
-      },
-      prefix: {
-        displayName: DisplayNames.data.prefix,
-        dataType: DATA.DATA_TYPE.text,
-        [DATA.DATA_TYPE.text]: {
-          maxLength: 10
-        }
-      },
-      step: {
-        displayName: DisplayNames.data.step,
-        dataType: DATA.DATA_TYPE.number
-      },
-      autocompleteToken: {
-        displayName: DisplayNames.data.autocompleteToken,
-        dataType: DATA.DATA_TYPE.text,
-        [DATA.DATA_TYPE.text]: {
-          maxLength: 50
-        }
-      },
-      numberSpinnerHidden: {
-        displayName: DisplayNames.data.numberSpinnerHidden,
-        dataType: DATA.DATA_TYPE.booleanValue,
-        defaultValue: false
-      },
-      ...manifestChangeable(),
-      ...manifestInputable(),
-      ...manifestFocusable(),
-      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
+      }
     },
     interactions: {
       triggers: [