@wix/editor-react-components 1.2280.0 → 1.2282.0

package/dist/site/components/TextBox/css.css

@@ -0,0 +1,137 @@
+.root__dlp5n {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+
+.field__i7dfL {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.root__dlp5n .field__i7dfL {
+  gap: var(--gap, 8px);
+}
+
+.labelRow__qwrwd {
+  display: inline-flex;
+  align-items: center;
+  align-self: var(--labelAlignment, flex-start);
+  gap: 6px;
+  max-width: 100%;
+}
+
+.label__GIRwe {
+  margin: 0;
+  padding: 0;
+}
+
+.tooltipButton__tOobd {
+  flex: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  opacity: 0.65;
+}
+.tooltipButton__tOobd:hover, .tooltipButton__tOobd:focus-visible {
+  opacity: 1;
+}
+.tooltipButton__tOobd:focus-visible {
+  outline: none;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #116dff;
+}
+.tooltipButton__tOobd svg {
+  width: 16px;
+  height: 16px;
+}
+
+.tooltip__6OlB9 {
+  max-width: 220px;
+  padding: 6px 10px;
+  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
+  color: var(--wst-primary-background-color, #fff);
+  background: var(--wst-paragraph-2-color, #2b2b2b);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}
+
+.input__JG8Be {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 0;
+  margin: 0;
+  resize: none;
+  border-style: solid;
+  border-color: var(--input-border);
+  border-width: var(--borderWidth, 1px);
+  font: inherit;
+  transition: border-color 0.2s linear;
+  --input-border: var(--borderColor, color-mix(in srgb, #000 60%, transparent));
+}
+.input__JG8Be::placeholder {
+  color: var(--placeholderTextColor, #939393);
+  opacity: 1;
+}
+.input__JG8Be:focus {
+  outline: none;
+}
+.input__JG8Be[data-readonly] {
+  cursor: default;
+}
+
+.input__JG8Be:hover,
+.root__dlp5n.textbox--hover .input__JG8Be {
+  --input-border: var(--borderColor, #000);
+}
+
+.input__JG8Be:focus,
+.root__dlp5n.textbox--focus .input__JG8Be {
+  --input-border: var(--borderColor, #116dff);
+}
+
+.input__JG8Be[data-invalid],
+.root__dlp5n.textbox--invalid .input__JG8Be {
+  --input-border: var(--borderColor, #e62214);
+}
+
+.input__JG8Be[data-disabled] {
+  cursor: default;
+  --input-border: var(
+    --borderColor,
+    color-mix(
+      in srgb,
+      var(--wst-system-disabled-color, #939393) 60%,
+      transparent
+    )
+  );
+}.textbox {
+  --gap: 8px;
+}
+
+.textbox__input {
+  border-radius: 4px;
+  padding: 8px 12px;
+  background-color: #fff;
+  color: #000;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/TextBox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as TextBox } from './component';

package/dist/site/components/TextBox/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import TextBox from './component.js';
+
+export { TextBox };
+export default TextBox;

package/dist/site/components/TextBox/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

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

@@ -0,0 +1,219 @@
+import { E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, N as NativeStateType, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DisplayNames, d as defaultValues, b as DesignStates, s as selectors } from "../chunks/constants17.js";
+import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+const manifest = {
+  id: "002d94d7-bec7-4082-8d00-fe4ede12024d",
+  type: "wixEditorElements.TextBox__DEV__v3",
+  description: "A multi-line text field where visitors can enter longer, free-form text. The value can be set in the editor or bound to a text data-context field.",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 280
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 100
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.TextInput,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: false,
+      disablePositioning: false
+    },
+    data: {
+      value: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.value,
+        defaultValue: defaultValues.value,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 4e3
+        }
+      },
+      label: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.label,
+        defaultValue: defaultValues.label,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 400
+        }
+      },
+      tooltip: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.tooltip,
+        defaultValue: defaultValues.tooltip,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 400
+        }
+      },
+      placeholder: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.placeholder,
+        defaultValue: defaultValues.placeholder,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 4e3
+        }
+      },
+      minLength: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.root.data.minLength
+      },
+      maxLength: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.root.data.maxLength
+      },
+      required: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.required,
+        defaultValue: defaultValues.required
+      },
+      readOnly: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.readOnly,
+        defaultValue: defaultValues.readOnly
+      },
+      disabled: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.disabled,
+        defaultValue: defaultValues.disabled
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      ...manifestFocusable()
+    },
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.hover.displayName,
+        className: DesignStates.root.hover.className,
+        pseudoClass: NativeStateType.hover
+      }),
+      focus: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.focus.displayName,
+        className: DesignStates.root.focus.className,
+        pseudoClass: NativeStateType.focus
+      }),
+      disabled: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.disabled.displayName,
+        className: DesignStates.root.disabled.className,
+        pseudoClass: NativeStateType.disabled,
+        props: { disabled: true }
+      }),
+      invalid: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.invalid.displayName,
+        className: DesignStates.root.invalid.className,
+        pseudoClass: NativeStateType.invalid
+      })
+    },
+    cssCustomProperties: {
+      gap: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties.gap,
+        defaultValue: "8px"
+      },
+      labelAlignment: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: DisplayNames.root.cssCustomProperties.labelAlignment
+      }
+    },
+    elements: {
+      input: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.input.elementDisplayName,
+          selector: getSelector(selectors.input),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {},
+            background: {},
+            borderRadius: {
+              defaultValue: "4px"
+            },
+            boxShadow: {}
+          },
+          cssCustomProperties: {
+            placeholderTextColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.input.cssCustomProperties.placeholderTextColor
+            },
+            borderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.input.cssCustomProperties.borderColor
+            },
+            borderWidth: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+              displayName: DisplayNames.input.cssCustomProperties.borderWidth,
+              defaultValue: "1px"
+            }
+          },
+          displayGroups: {
+            borderGroup: {
+              displayName: DisplayNames.input.displayGroups.borderGroup,
+              groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+              border: {
+                color: "borderColor",
+                width: "borderWidth"
+              }
+            }
+          }
+        }
+      },
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.label.elementDisplayName,
+          selector: getSelector(selectors.label),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            color: {},
+            font: {}
+          }
+        }
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/TextBox/component.tsx",
+      dependencies: {
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/TextBox/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/TextBox" }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -74,7 +74,9 @@ const manifest = {
         INTERACTIONS.TRIGGER_TYPE.pageVisible,
         INTERACTIONS.TRIGGER_TYPE.animationEnd,
         INTERACTIONS.TRIGGER_TYPE.viewProgress,
-        INTERACTIONS.TRIGGER_TYPE.pointerMove
+        INTERACTIONS.TRIGGER_TYPE.pointerMove,
+        INTERACTIONS.TRIGGER_TYPE.click,
+        INTERACTIONS.TRIGGER_TYPE.hover
       ],
       effectGroups: [INTERACTIONS.EFFECT_GROUP.UNKNOWN_EFFECT_GROUP]
     },

package/dist/site/components/chunks/AnimatedIcon.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
 import { p as parseSvg } from "./parseSvg.js";
-import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants19.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants20.js";
 import { c as cn } from "./index8.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

package/dist/site/components/chunks/Button.js

@@ -7,7 +7,7 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
 import { f as formatClassNames } from "./classNames.js";
 import { I as IconAnimationTriggers } from "./Button.types.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants18.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants19.js";
 import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 const root = "root__IB9QF";

package/dist/site/components/chunks/constants17.js

@@ -1,24 +1,74 @@
-const classes = {
-  tabs: "tabs",
-  tabMenu: "tab-menu",
-  tabMenuItemsWrapper: "tab-menu-items-wrapper",
-  tabMenuItems: "tab-menu-items",
-  menuItem: "menu-item",
-  scrollButton: "scroll-button",
-  tabContentContainer: "tab-content-container",
-  tabContentItem: "tab-content-item"
-};
-const OVERFLOW_BEHAVIOR = {
-  WRAP: "wrap"
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Text Box",
+    data: {
+      value: "Default text",
+      label: "Label",
+      tooltip: "Tooltip",
+      placeholder: "Placeholder",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      minLength: "Minimum characters",
+      maxLength: "Maximum characters"
+    },
+    cssCustomProperties: {
+      gap: "Space between label and field",
+      labelAlignment: "Label alignment"
+    }
+  },
+  input: {
+    elementDisplayName: "Input",
+    cssCustomProperties: {
+      placeholderTextColor: "Placeholder text color",
+      borderColor: "Border color",
+      borderWidth: "Border width"
+    },
+    displayGroups: {
+      borderGroup: "Border"
+    }
+  },
+  label: {
+    elementDisplayName: "Label"
+  }
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "tabs--hover" },
-    disabled: { displayName: "Disabled", className: "tabs--disabled" }
+    hover: { displayName: "Hover", className: "textbox--hover" },
+    focus: { displayName: "Focus", className: "textbox--focus" },
+    disabled: { displayName: "Disabled", className: "textbox--disabled" },
+    invalid: { displayName: "Error", className: "textbox--invalid" }
   }
 };
+const defaultValues = {
+  value: "",
+  label: "Label",
+  tooltip: "",
+  placeholder: "Enter your text here...",
+  required: false,
+  readOnly: false,
+  disabled: false
+};
+const TestIds = {
+  root: "textbox-root",
+  input: "textbox-input",
+  label: "textbox-label",
+  tooltipButton: "textbox-tooltip-button"
+};
+const selectors = {
+  root: "textbox",
+  input: "textbox__input",
+  label: "textbox__label"
+};
+const semanticClassNames = {
+  input: "textbox__input",
+  label: "textbox__label"
+};
 export {
-  DesignStates as D,
-  OVERFLOW_BEHAVIOR as O,
-  classes as c
+  DisplayNames as D,
+  TestIds as T,
+  semanticClassNames as a,
+  DesignStates as b,
+  defaultValues as d,
+  selectors as s
 };

package/dist/site/components/chunks/constants18.js

@@ -1,59 +1,24 @@
-const TestIds = {
-  buttonContent: "buttonContent",
-  buttonLabel: "stylablebutton-label"
+const classes = {
+  tabs: "tabs",
+  tabMenu: "tab-menu",
+  tabMenuItemsWrapper: "tab-menu-items-wrapper",
+  tabMenuItems: "tab-menu-items",
+  menuItem: "menu-item",
+  scrollButton: "scroll-button",
+  tabContentContainer: "tab-content-container",
+  tabContentItem: "tab-content-item"
 };
-const TRANSITION_DURATION = 400;
-const SEMANTIC_CLASS_NAMES = {
-  root: "button",
-  buttonLabel: "button__label"
+const OVERFLOW_BEHAVIOR = {
+  WRAP: "wrap"
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "button--hover" },
-    disabled: { displayName: "Disabled", className: "button--disabled" }
-  },
-  label: {
-    hover: { displayName: "Hover", className: "button__label--hover" },
-    disabled: { displayName: "Disabled", className: "button__label--disabled" }
-  }
-};
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Button",
-    data: {
-      disabled: "Disabled"
-    },
-    cssProperties: {
-      gap: "Space between text and icon"
-    },
-    cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "icon-position": "Icon position"
-    },
-    presets: {
-      baseButton: "Base Button"
-    },
-    iconPosition: {
-      beforeText: "Before text",
-      afterText: "After text",
-      belowText: "Below text",
-      aboveText: "Above text"
-    }
-  },
-  label: {
-    elementDisplayName: "Text",
-    cssProperties: {
-      font: "Typography"
-    }
-  },
-  data: {
-    iconCollapsed: "Display icon"
+    hover: { displayName: "Hover", className: "tabs--hover" },
+    disabled: { displayName: "Disabled", className: "tabs--disabled" }
   }
 };
 export {
   DesignStates as D,
-  SEMANTIC_CLASS_NAMES as S,
-  TRANSITION_DURATION as T,
-  TestIds as a,
-  DisplayNames as b
+  OVERFLOW_BEHAVIOR as O,
+  classes as c
 };

package/dist/site/components/chunks/constants19.js

@@ -1,61 +1,59 @@
-const DEFAULT_ANIMATION_DURATION = 0.2;
-const AnimatedSvgIds = {
-  animatedSvg: "animatedSvg",
-  animatedTagPath: "animatedPath",
-  animateTagForward: "animateForward",
-  animateTagBackward: "animateBackward"
-};
-var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
-  AnimationDirection2["FORWARD"] = "Forward";
-  AnimationDirection2["BACKWARD"] = "Backward";
-  return AnimationDirection2;
-})(AnimationDirection || {});
-const AnimatedDataAttributes = {
-  [
-    "Forward"
-    /* FORWARD */
-  ]: "data-animated-end-path",
-  [
-    "Backward"
-    /* BACKWARD */
-  ]: "data-animated-start-path"
-};
 const TestIds = {
-  animatedSvg: "animated-svg",
-  animateTagForward: "animate-tag-forward",
-  animateTagBackward: "animate-tag-backward"
+  buttonContent: "buttonContent",
+  buttonLabel: "stylablebutton-label"
+};
+const TRANSITION_DURATION = 400;
+const SEMANTIC_CLASS_NAMES = {
+  root: "button",
+  buttonLabel: "button__label"
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "animated-icon--hover" },
-    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
-    selected: { displayName: "Selected", className: "animated-icon--selected" }
+    hover: { displayName: "Hover", className: "button--hover" },
+    disabled: { displayName: "Disabled", className: "button--disabled" }
+  },
+  label: {
+    hover: { displayName: "Hover", className: "button__label--hover" },
+    disabled: { displayName: "Disabled", className: "button__label--disabled" }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Animated Icon",
-    customActions: {
-      animatedIcon: {
-        displayName: "Icon"
-      }
-    },
+    elementDisplayName: "Button",
     data: {
-      duration: "Duration"
+      disabled: "Disabled"
+    },
+    cssProperties: {
+      gap: "Space between text and icon"
     },
     cssCustomProperties: {
-      size: "Size",
-      fill: "Color",
-      rotation: "Rotation"
+      "content-horizontal-alignment": "Alignment",
+      "icon-position": "Icon position"
+    },
+    presets: {
+      baseButton: "Base Button"
+    },
+    iconPosition: {
+      beforeText: "Before text",
+      afterText: "After text",
+      belowText: "Below text",
+      aboveText: "Above text"
+    }
+  },
+  label: {
+    elementDisplayName: "Text",
+    cssProperties: {
+      font: "Typography"
     }
+  },
+  data: {
+    iconCollapsed: "Display icon"
   }
 };
 export {
-  AnimatedSvgIds as A,
-  DEFAULT_ANIMATION_DURATION as D,
-  TestIds as T,
-  AnimatedDataAttributes as a,
-  AnimationDirection as b,
-  DesignStates as c,
-  DisplayNames as d
+  DesignStates as D,
+  SEMANTIC_CLASS_NAMES as S,
+  TRANSITION_DURATION as T,
+  TestIds as a,
+  DisplayNames as b
 };