@wix/editor-react-components 1.2763.0 → 1.2765.0

package/dist/site/components/TextInput/component.preview.d.ts

@@ -1,4 +1 @@
-import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
-import { default as TextInput } from './TextInput';
-export default TextInput;
-export declare const resolveManifestOverrides: ResolveManifestOverrides;
+export { default } from './TextInput';

package/dist/site/components/TextInput/constants.d.ts

@@ -1,22 +1,14 @@
-export declare const selectors: {
-    readonly root: "textInput";
-    readonly label: "textInput__label";
-    readonly input: "textInput__input";
-    readonly prefix: "textInput__prefix";
-    readonly helperText: "textInput__helper";
-    readonly requiredIndicator: "textInput__required-indicator";
+export declare const componentClassNames: {
+    readonly root: "text-input";
+    readonly label: "text-input-label";
+    readonly input: "text-input-input";
+    readonly helperText: "text-input-helper";
+    readonly errorMessage: "text-input-error-message";
 };
-export declare const TestIds: {
-    readonly requiredIndicator: "text-input-required-indicator";
-    readonly tooltipButton: "text-input-tooltip-button";
+export declare const FunctionalStateKeys: {
+    readonly previewError: "previewError";
 };
-/**
- * Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO,
- * matching the other validation-contract inputs). `required` is surfaced as
- * `aria-required` (not the native `required` attribute), so the browser never
- * reports `valueMissing` — the empty-required check is computed in JS instead.
- */
-export declare const VALUE_MISSING_MESSAGE = "This field is required";
+export declare const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 export declare const DesignStates: {
     readonly input: {
         readonly hover: {
@@ -43,65 +35,25 @@ export declare const DisplayNames: {
         elements: {
             label: string;
             input: string;
-            prefix: string;
             helperText: string;
+            errorMessage: string;
         };
     };
     cssCustomProperties: {
-        helperFont: string;
-        helperColor: string;
-        textColor: string;
         placeholderTextColor: string;
-        requiredTextColor: string;
-        prefixFont: string;
-        labelFont: string;
-        labelTextColor: string;
-        labelMarginBottom: string;
-        labelPaddingInlineStart: string;
-        labelPaddingInlineEnd: string;
-        labelAlign: string;
-        inputAlign: string;
     };
     data: {
         value: string;
-        defaultValue: string;
-        isDisabled: string;
-        name: string;
-        minLength: string;
-        autocompleteToken: string;
-        numberSpinnerHidden: string;
-        labelDirection: string;
-        inputDirection: string;
-        inputType: string;
-        maxLength: string;
-        min: string;
-        max: string;
-        pattern: string;
-        phoneFormat: string;
+        disabled: string;
         label: string;
         placeholder: string;
-        tooltip: string;
-        description: string;
-        autoComplete: string;
+        helperText: string;
+        errorMessage: string;
         readOnly: string;
-        required: string;
-        errorMessageType: string;
-        prefix: string;
-        step: string;
     };
-    options: {
-        text: string;
-        number: string;
-        email: string;
-        url: string;
-        tel: string;
-        password: string;
-        left: string;
-        center: string;
-        right: string;
-        start: string;
-        end: string;
-        inline: string;
-        tooltip: string;
+    descriptions: {
+        value: string;
+        errorMessage: string;
+        helperText: string;
     };
 };

package/dist/site/components/TextInput/css.css

@@ -1,247 +1,49 @@
-.inlineErrorIndication__3ZgfF {
-  color: rgb(var(--errorTextColor, #ff4040));
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 8px 0px 0px;
-  gap: 4px;
-  display: flex;
-  direction: var(--errorDirection);
-  justify-content: var(--errorAlign, inherit);
-}
-.inlineErrorIndication__3ZgfF .iconErrorMessage__ZKTPr {
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-}
-.inlineErrorIndication__3ZgfF .txtErrMsg__Wqn6o {
-  font: var(--errorTextFont, var(--font_8));
-  word-break: break-word;
-  display: inline-block;
-  line-height: 1;
-  order: 1;
-  flex-grow: 0;
-  word-break: break-word;
-}.root__zQlRz {
-  --align: start;
-  --textPaddingBottom: 0.5rem;
-  --textPaddingInlineStart: 0.75rem;
-  --textPaddingInlineEnd: 0.75rem;
-  --textPaddingTop: 0.5rem;
-  --inputAlign: left;
-  --labelBottomMargin: 0.5rem;
-  --labelPaddingInlineStart: 0;
-  --labelPaddingInlineEnd: 0;
-  --labelAlign: inherit;
-  --requiredTextColor: rgb(0, 0, 0);
-  --prefixFont: normal normal normal 16px/1.4em helvetica-w01-roman;
-  --textColor: #222222;
-  --boxShadow: 0 0 0 rgba(0, 0, 0, 0);
-  --font:
-    normal normal normal 14px/1.6em madefor-text, helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
-  --borderRadius: 0;
-  --background: #ffffff;
-  --borderColor: #e3e3e3;
-  --borderWidth: 1px;
-  --placeholderTextColor: #222222;
-  --labelFont:
-    normal normal normal 14px/1.6em madefor-text, helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
-  --labelTextColor: #222222;
-  --helperFont:
-    normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif;
-  --helperColor: #868686;
-  --prefixWidth: 50px;
-  --inputHeight: 42px;
+.root__zQlRz {
   display: flex;
   flex-direction: column;
-  text-align: var(--align, start);
-  justify-content: var(--align, start);
+  min-width: max-content !important;
 }
 .root__zQlRz .inputWrapper__2KDrH {
   flex: 1;
   display: flex;
-  flex-direction: column;
   position: relative;
 }
-.root__zQlRz .prefix__fIo1S {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: var(--prefixWidth);
-  min-height: 100%;
-  max-height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font: var(--prefixFont);
-  color: var(--textColor);
-}
 .root__zQlRz .input__fyTfx {
-  box-shadow: var(--boxShadow);
-  box-sizing: border-box !important;
+  appearance: none;
   border-style: solid;
-  padding-top: var(--textPaddingTop);
-  padding-bottom: var(--textPaddingBottom);
-  padding-inline-start: var(--textPaddingInlineStart);
-  padding-inline-end: var(--textPaddingInlineEnd);
+  box-sizing: content-box !important;
+  min-width: 40px;
   margin: 0;
-  width: 100%;
+  width: 0;
   flex: 1;
   text-overflow: ellipsis;
-  text-align: var(--inputAlign, "inherit");
-  min-height: var(--inputHeight, 42px);
-  border-radius: var(--borderRadius);
-  background: var(--background);
-  color: var(--textColor);
-  border-color: var(--borderColor);
-  border-width: var(--borderWidth);
-  font: var(--font);
-}
-.root__zQlRz .input__fyTfx[type=number] {
-  appearance: textfield;
 }
 .root__zQlRz .input__fyTfx::placeholder {
   color: var(--placeholderTextColor);
-  opacity: 0.6;
-}
-.root__zQlRz .input__fyTfx:hover {
-  background-color: var(--hoverBackground, #ffffff);
-  border-color: var(--hoverBorderColor, #a3d9f6);
-  border-width: var(--hoverBorderWidth, 1px);
-}
-.root__zQlRz .input__fyTfx:disabled {
-  background-color: var(--disabledBackground, #f5f5f5);
-  color: var(--disabledTextColor, #999);
-  border-color: var(--disabledBorderColor, #e3e3e3);
-  border-width: var(--disabledBorderWidth, 1px);
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.root__zQlRz .input__fyTfx.hideNumberSpinner__nYhia[type=number]::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-.root__zQlRz .input__fyTfx.hasPrefix__RXMKp {
-  padding-inline-start: calc(var(--textPaddingInlineStart) + var(--prefixWidth));
-  padding-inline-end: 3px;
-}
-.root__zQlRz .input__fyTfx.hasPrefix__RXMKp[dir=rtl] {
-  padding-inline-start: 3px;
-  padding-inline-end: calc(var(--textPaddingInlineEnd) + var(--prefixWidth));
-}
-.root__zQlRz:not(.validation-indication__QMvkt) .input__fyTfx:focus {
-  background-color: var(--focusBackground, #ffffff);
-  border-color: var(--focusBorderColor, #a3d9f6);
-  border-width: var(--focusBorderWidth, 1px);
-}
-.root__zQlRz .input__fyTfx.textInput__input--hover {
-  background-color: var(--hoverBackground, #ffffff);
-  border-color: var(--hoverBorderColor, #a3d9f6);
-  border-width: var(--hoverBorderWidth, 1px);
-}
-.root__zQlRz .input__fyTfx.textInput__input--focus {
-  background-color: var(--focusBackground, #ffffff);
-  border-color: var(--focusBorderColor, #a3d9f6);
-  border-width: var(--focusBorderWidth, 1px);
-}
-.root__zQlRz .input__fyTfx.textInput__input--error {
-  background-color: var(--errorBackground, #ffffff);
-  border-color: var(--errorBorderColor, #e3e3e3);
-  border-width: var(--errorBorderWidth, 1px);
-}
-.root__zQlRz .input__fyTfx.textInput__input--disabled {
-  background-color: var(--disabledBackground, #f5f5f5);
-  color: var(--disabledTextColor, #999);
-  border-color: var(--disabledBorderColor, #e3e3e3);
-  border-width: var(--disabledBorderWidth, 1px);
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-.root__zQlRz.validation-indication__QMvkt .input__fyTfx:invalid {
-  background-color: #ffffff;
-  border-color: #e3e3e3;
-  border-width: 1px;
-}
-.root__zQlRz.validation-indication__QMvkt .input__fyTfx:not(:invalid):focus {
-  background-color: #ffffff;
-  border-color: #a3d9f6;
-  border-width: 1px;
-}
-.root__zQlRz .helperText__SfMAH {
-  margin: 0.25rem 0 0;
-  font: var(--helperFont);
-  color: var(--helperColor);
-  text-align: var(--align, start);
-}
-.root__zQlRz .label__mbGIM {
-  display: none;
-}
-.root__zQlRz .labelRow__tN4T- {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-bottom: var(--labelMarginBottom);
-}
-.root__zQlRz .tooltipButton__7D4vU {
-  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: var(--labelTextColor);
-  cursor: pointer;
-  opacity: 0.65;
-}
-.root__zQlRz .tooltipButton__7D4vU[data-hovered], .root__zQlRz .tooltipButton__7D4vU[data-focus-visible] {
   opacity: 1;
 }
-.root__zQlRz .infoIcon__Ksarp {
-  width: 16px;
-  height: 16px;
-}
-.root__zQlRz .tooltip__JnxIe {
-  max-width: 220px;
-  padding: 6px 10px;
-  color: #ffffff;
-  background: #2b2b2b;
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-  font: var(--labelFont);
-}
-.root__zQlRz.hasLabel__AGhlP .label__mbGIM {
-  word-break: break-word;
-  display: inline-block;
-  line-height: 1;
-  padding-inline-start: var(--labelPaddingInlineStart);
-  padding-inline-end: var(--labelPaddingInlineEnd);
-  text-align: var(--labelAlign, inherit);
-  color: var(--labelTextColor);
-  font: var(--labelFont);
+.root__zQlRz .input__fyTfx:disabled, .root__zQlRz .input__fyTfx.textInput__input--disabled {
+  cursor: not-allowed;
 }
-.root__zQlRz.hasLabel__AGhlP .label__mbGIM .requiredIndicator__RyrLe {
-  color: var(--requiredTextColor);
+.root__zQlRz .label__mbGIM,
+.root__zQlRz .helperText__SfMAH,
+.root__zQlRz .errorMessage__4XDzv {
+  contain: inline-size;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  max-height: 2lh;
+  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.root__zQlRz.validationIndication__GE20D .input__fyTfx:invalid {
-  background-color: var(--errorBackground, #ffffff);
-  border-color: var(--errorBorderColor, #e3e3e3);
-  border-width: var(--errorBorderWidth, 1px);
+.root__zQlRz .helperText__SfMAH,
+.root__zQlRz .errorMessage__4XDzv {
+  margin-inline: 0;
+  margin-bottom: 0;
 }
-.requiredIndicator__j5mIH {
-  display: inline-block;
-  width: 0.6em;
-  height: 0.6em;
-  margin-inline-start: 0.2em;
-  vertical-align: super;
-  color: inherit;
+.presetWrapper__J1yzj {
+  display: contents;
 }
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);