@wix/editor-react-components 1.2355.0 → 1.2356.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,7 +4,7 @@ import React__default, { createContext, useEffect, useMemo, useRef, useState, us
4
4
  import { c as clsx } from "../chunks/clsx.js";
5
5
  import { v as $fe16bffc7a557bf0$export$7f54fc3180508a52, H as $390e54f620492c70$export$b4cc09c592e8fdb8, B as $e8ac3c3f5d4bae7f$export$d6875122194c7b44, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, y as $d27d541f9569d26d$export$45712eceda6fad21, N as $1969ac565cfec8d0$export$de79e2c695e052f3, u as $8f5a2122b0992be3$export$630ff653c5ada6a9, l as $23f2114a1b82827e$export$cd4e5573fbe2b576, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, k as $23f2114a1b82827e$export$4282f70798064fe0, K as $23f2114a1b82827e$export$b4f377a2b6254582, r as $d447af545b77c9f1$export$f21a1ffae260145a, j as $6a20a7989e6c817a$export$98658e8c59125e6a, m as $d447af545b77c9f1$export$b204af158042fbac, A as $390e54f620492c70$export$f680877a34711e37, z as $2c9edc598a03d523$export$420e68273165f4ec, O as $24f9a20f226ad820$export$5165eccb35aaadb5, q as $c4867b2f328c2698$export$e5c5a5f917a5871c, p as $f192c2f16961cbe0$export$80f3e147d781571c, w as $2add3ce32c6007eb$export$fedb369cb70207f1, P as $2b2d34ff061957fb$export$2b85b721e524d74b, Q as $a4e76a5424781910$export$e08e3b67e392101e, c as $3e6197669829fe11$export$40bfa8c7b0832715, R as $d2b4bc8c273e7be6$export$24d547caef80ccd1, E as $e969f22b6713ca4a$export$ae780daf29e6d456, D as $0c4a58759813079a$export$4e328f61c538687f, i as $a049562f99e7db0e$export$f9c6924e160136d1, h as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
6
6
  import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, k as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, n as $c7eafbbe1ea5834e$export$535bd6ca7f90a273, c as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a, d as $64fa3d84918910a7$export$fabf2dc03a41866e, o as $f39a9eba43920ace$export$b5d7cc18bb8d2b59, m as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, p as $3ef42575df84b30b$export$9d1611c77c2fe928, q as $64fa3d84918910a7$export$c62b8e45d58ddad9, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/filterDOMProps.js";
7
- import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, n as $fd2148440a13ec26$export$a763b9476acd3eb, o as $fd2148440a13ec26$export$dad6ae84456c676a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, p as $72abaeab4d80592f$export$9fc1347d4195ccb3, q as $b3526bc71400be8d$export$d39e1813b3bdd0e1, r as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, i as $514c0188e459b4c0$export$9afb8bc826b033ea, s as $d3f049242431219c$export$45fda7c47f93fd48, t as $d3f049242431219c$export$6d3443f2c48bfc20, v as $44f671af83e7d9e0$export$2de4954e8ae13b9f, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, u as useValidatedField, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/useValidatedField.js";
7
+ import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, n as $fd2148440a13ec26$export$a763b9476acd3eb, o as $fd2148440a13ec26$export$dad6ae84456c676a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, p as $72abaeab4d80592f$export$9fc1347d4195ccb3, q as $b3526bc71400be8d$export$d39e1813b3bdd0e1, r as $f11fb0bcf1b2687a$export$61c6a8c84e605fb6, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, i as $514c0188e459b4c0$export$9afb8bc826b033ea, s as $d3f049242431219c$export$45fda7c47f93fd48, t as $d3f049242431219c$export$6d3443f2c48bfc20, u as $44f671af83e7d9e0$export$2de4954e8ae13b9f, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/Tooltip.js";
8
8
  import { d as $60f33508b4cd9d3b$export$85fd5fdf27bacc79, e as $ad063034c8620db8$export$ea39ec197993aef0, f as $ad063034c8620db8$export$a5a3b454ada2268e, g as $ad063034c8620db8$export$a2258d9c4118825c, h as $a46cf152bb926da5$export$a9b970dcc4ae71a9, i as $9c268ab73a5d55e5$export$722debc0e56fea39, j as $ad063034c8620db8$export$91b62ebf2ba703ee, k as $ad063034c8620db8$export$629b0a497aa65267, l as $121970af65029459$export$f8aeda7b10753fa1, m as $51a3e22a5186a962$export$c826860796309d1b, n as $3578607fe3d4b096$export$cfa2225e87938781, o as $ad063034c8620db8$export$42c81a444fbfb5d4, p as $ad063034c8620db8$export$d0bdf45af03a6ea3, q as $ad063034c8620db8$export$ccc1b2479e7dd654, r as $600b3cf69ae46262$export$90fc3a17d93f704c, s as $654b97e09f2a30c1$export$4d0f8be8b12a7ef6, t as $6a440d0e2d99dd46$export$4a931266a3838b86, u as $535772f9d2c1f38d$export$c5251b9e124bf29, v as $7541913c0284d84b$export$300019f83c56d282, w as $0014db39426443c5$exports, x as $7541913c0284d84b$export$7b3062cd49e80452, y as $535772f9d2c1f38d$export$20e40289641fbbb6, z as $535772f9d2c1f38d$export$1258395f99bf9cbf, A as $901761b40e390936$export$2bb74740c4e19def, B as $ad063034c8620db8$export$a75f2bff57811055, C as $d07e34cce18680fd$export$93522d1a439f3617, D as $ad063034c8620db8$export$5c333a116e949cdd, E as $ad063034c8620db8$export$f91e89d3d0406102, F as $12a3c853105e5a70$export$ad991b66133851cf, G as $d07e34cce18680fd$export$b4a036af3fc0b032, H as $ad063034c8620db8$export$dbc69fd56b53d5e, I as $ad063034c8620db8$export$2061056d06d7cdf7, J as $ad063034c8620db8$export$ef8b6d9133084f4e, K as $93635573935797de$export$80ee6245ec4f29ec, L as $8b141f2f71e88f85$export$2440da353cedad43, M as $8b141f2f71e88f85$export$f18627323ab57ac0, N as $8b141f2f71e88f85$export$7e319ea407e63bc0, O as $8b141f2f71e88f85$export$c5221a78ef73c5e9, P as $d07e34cce18680fd$export$b21e0b124e224484, Q as $8b141f2f71e88f85$export$80ff8fc0ae339c13, R as $84102b64e5ca022f$export$dd0bbc9b26defe37, S as $ad063034c8620db8$export$a18c89cbd24170ff, T as $58246871e4652552$export$588937bcd60ade55, U as $58246871e4652552$export$6b862160d295c8e, V as $40825cdb76e74f70$export$7b3e670c86da5fe8, W as $ad063034c8620db8$export$aa8b41735afcabd2, X as $2aaf608024c21ca1$export$680ea196effce5f, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f } from "../chunks/DateField.js";
9
9
  import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1 } from "../chunks/useLocalizedStringFormatter.js";
10
10
  import { $ as $ea3928288112382f$export$439d29a4e110a164, a as $ea3928288112382f$export$a966af930f325cab } from "../chunks/VisuallyHidden.js";
@@ -16,6 +16,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
16
16
  import { d as directionStyles } from "../chunks/direction.module.js";
17
17
  import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
18
18
  import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
19
+ import { u as useValidatedField } from "../chunks/useValidatedField.js";
19
20
  import { I as InfoCircleSmall_default, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
20
21
  import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
21
22
  createContext(null);
@@ -1,6 +1,7 @@
1
1
  import { A11y, Direction } from '@wix/editor-react-types';
2
2
  import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
3
- export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & {
3
+ import { FieldValidationProps } from '../../../utils/validation/types';
4
+ export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & FieldValidationProps<string> & {
4
5
  id: string;
5
6
  className: string;
6
7
  value?: string;
@@ -1,7 +1,7 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { useState } from "react";
2
3
  import { c as clsx } from "../chunks/clsx.js";
3
4
  import { F as Field, T as Tooltip, I as Input_Input_Input } from "../chunks/index10.js";
4
- import "react";
5
5
  import { useService } from "@wix/services-manager-react";
6
6
  import { E as EnvironmentDefinition } from "../chunks/index2.js";
7
7
  import { f as formatClassNames } from "../chunks/classNames.js";
@@ -9,9 +9,11 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
9
9
  import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
10
10
  import { d as directionStyles } from "../chunks/direction.module.js";
11
11
  import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
12
- import { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants18.js";
12
+ import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
13
+ import { u as useValidatedField } from "../chunks/useValidatedField.js";
13
14
  const root = "root__dlp5n";
14
15
  const field = "field__i7dfL";
16
+ const errorMessage = "errorMessage__K0qsG";
15
17
  const labelRow = "labelRow__qwrwd";
16
18
  const label = "label__GIRwe";
17
19
  const description = "description__--0WR";
@@ -21,6 +23,7 @@ const input = "input__JG8Be";
21
23
  const styles = {
22
24
  root,
23
25
  field,
26
+ errorMessage,
24
27
  labelRow,
25
28
  label,
26
29
  description,
@@ -46,14 +49,61 @@ function TextBoxComponent(props) {
46
49
  maxLength,
47
50
  direction,
48
51
  a11y,
52
+ fieldValidity,
53
+ showValidityIndication,
49
54
  onChange = noop,
50
55
  onFocus = noop,
51
56
  onBlur = noop,
57
+ onValidate,
58
+ onValidityChange,
52
59
  wix
53
60
  } = props;
54
61
  const isControlled = props.value !== void 0;
55
62
  const defaultValue = props.defaultValue ?? defaultValues.defaultValue;
56
- const handleValueChange = (next) => onChange(next);
63
+ const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
64
+ const value = isControlled ? props.value ?? "" : uncontrolledValue;
65
+ const handleValueChange = (next) => {
66
+ if (!isControlled) {
67
+ setUncontrolledValue(next);
68
+ }
69
+ onChange(next);
70
+ };
71
+ let intrinsic = { valid: true, validationMessage: "" };
72
+ if (disabled || readOnly) {
73
+ intrinsic = { valid: true, validationMessage: "" };
74
+ } else if (required && value.length === 0) {
75
+ intrinsic = {
76
+ valid: false,
77
+ validationMessage: VALIDATION_MESSAGES.valueMissing
78
+ };
79
+ } else if (minLength != null && value.length > 0 && value.length < minLength) {
80
+ intrinsic = {
81
+ valid: false,
82
+ validationMessage: VALIDATION_MESSAGES.tooShort(minLength)
83
+ };
84
+ } else if (maxLength != null && value.length > maxLength) {
85
+ intrinsic = {
86
+ valid: false,
87
+ validationMessage: VALIDATION_MESSAGES.tooLong(maxLength)
88
+ };
89
+ }
90
+ const {
91
+ validity,
92
+ showValidityIndication: showIndication,
93
+ handleBlur: handleValidationBlur
94
+ } = useValidatedField({
95
+ value,
96
+ intrinsic,
97
+ fieldValidity,
98
+ showValidityIndication,
99
+ onValidate,
100
+ onValidityChange
101
+ });
102
+ const isInvalid = showIndication && !validity.valid;
103
+ const handleBlur = (event) => {
104
+ onBlur(event);
105
+ handleValidationBlur();
106
+ };
57
107
  const hasLabel = !!label2;
58
108
  const hasTooltip = !!tooltip2;
59
109
  const ariaLabel = !hasLabel ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
@@ -73,80 +123,100 @@ function TextBoxComponent(props) {
73
123
  dir: direction,
74
124
  lang: environmentService.language,
75
125
  "data-testid": TestIds.root,
76
- children: /* @__PURE__ */ jsxs(Field.Root, { className: styles.field, disabled, children: [
77
- (hasLabel || hasTooltip) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
78
- hasLabel && /* @__PURE__ */ jsxs(
79
- Field.Label,
80
- {
81
- className: clsx(
82
- styles.label,
83
- selectors.label,
84
- formatClassNames(semanticClassNames.label)
126
+ children: /* @__PURE__ */ jsxs(
127
+ Field.Root,
128
+ {
129
+ className: styles.field,
130
+ disabled,
131
+ invalid: isInvalid,
132
+ children: [
133
+ (hasLabel || hasTooltip) && /* @__PURE__ */ jsxs("div", { className: styles.labelRow, children: [
134
+ hasLabel && /* @__PURE__ */ jsxs(
135
+ Field.Label,
136
+ {
137
+ className: clsx(
138
+ styles.label,
139
+ selectors.label,
140
+ formatClassNames(semanticClassNames.label)
141
+ ),
142
+ "data-testid": TestIds.label,
143
+ children: [
144
+ label2,
145
+ required && /* @__PURE__ */ jsx(
146
+ RequiredIndicator,
147
+ {
148
+ className: formatClassNames(
149
+ semanticClassNames.requiredIndicator
150
+ ),
151
+ "data-testid": TestIds.requiredIndicator
152
+ }
153
+ )
154
+ ]
155
+ }
85
156
  ),
86
- "data-testid": TestIds.label,
87
- children: [
88
- label2,
89
- required && /* @__PURE__ */ jsx(
90
- RequiredIndicator,
157
+ hasTooltip && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
158
+ /* @__PURE__ */ jsx(
159
+ Tooltip.Trigger,
91
160
  {
92
- className: formatClassNames(
93
- semanticClassNames.requiredIndicator
94
- ),
95
- "data-testid": TestIds.requiredIndicator
161
+ type: "button",
162
+ className: styles.tooltipButton,
163
+ "data-testid": TestIds.tooltipButton,
164
+ "aria-label": tooltip2,
165
+ children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
96
166
  }
97
- )
98
- ]
99
- }
100
- ),
101
- hasTooltip && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
167
+ ),
168
+ /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
169
+ ] }) })
170
+ ] }),
102
171
  /* @__PURE__ */ jsx(
103
- Tooltip.Trigger,
172
+ Input_Input_Input,
104
173
  {
105
- type: "button",
106
- className: styles.tooltipButton,
107
- "data-testid": TestIds.tooltipButton,
108
- "aria-label": tooltip2,
109
- children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
174
+ render: /* @__PURE__ */ jsx("textarea", {}),
175
+ className: clsx(
176
+ styles.input,
177
+ selectors.input,
178
+ formatClassNames(semanticClassNames.input)
179
+ ),
180
+ ...isControlled ? { value: props.value } : { defaultValue },
181
+ onValueChange: handleValueChange,
182
+ readOnly,
183
+ required,
184
+ placeholder,
185
+ minLength: minLength ?? void 0,
186
+ maxLength: maxLength ?? void 0,
187
+ "aria-label": ariaLabel,
188
+ "data-testid": TestIds.input,
189
+ onFocus,
190
+ onBlur: handleBlur
110
191
  }
111
192
  ),
112
- /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
113
- ] }) })
114
- ] }),
115
- /* @__PURE__ */ jsx(
116
- Input_Input_Input,
117
- {
118
- render: /* @__PURE__ */ jsx("textarea", {}),
119
- className: clsx(
120
- styles.input,
121
- selectors.input,
122
- formatClassNames(semanticClassNames.input)
123
- ),
124
- ...isControlled ? { value: props.value } : { defaultValue },
125
- onValueChange: handleValueChange,
126
- readOnly,
127
- required,
128
- placeholder,
129
- minLength: minLength ?? void 0,
130
- maxLength: maxLength ?? void 0,
131
- "aria-label": ariaLabel,
132
- "data-testid": TestIds.input,
133
- onFocus,
134
- onBlur
135
- }
136
- ),
137
- description2 && /* @__PURE__ */ jsx(
138
- Field.Description,
139
- {
140
- className: clsx(
141
- styles.description,
142
- selectors.description,
143
- formatClassNames(semanticClassNames.description)
193
+ description2 && /* @__PURE__ */ jsx(
194
+ Field.Description,
195
+ {
196
+ className: clsx(
197
+ styles.description,
198
+ selectors.description,
199
+ formatClassNames(semanticClassNames.description)
200
+ ),
201
+ "data-testid": TestIds.description,
202
+ children: description2
203
+ }
144
204
  ),
145
- "data-testid": TestIds.description,
146
- children: description2
147
- }
148
- )
149
- ] })
205
+ isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
206
+ Field.Error,
207
+ {
208
+ match: true,
209
+ className: clsx(
210
+ styles.errorMessage,
211
+ formatClassNames(semanticClassNames.errorMessage)
212
+ ),
213
+ "data-testid": TestIds.errorMessage,
214
+ children: validity.validationMessage
215
+ }
216
+ )
217
+ ]
218
+ }
219
+ )
150
220
  }
151
221
  ) });
152
222
  }
@@ -75,6 +75,11 @@ export declare const defaultValues: {
75
75
  readonly readOnly: false;
76
76
  readonly disabled: false;
77
77
  };
78
+ export declare const VALIDATION_MESSAGES: {
79
+ readonly valueMissing: "This field is required";
80
+ readonly tooShort: (minLength: number) => string;
81
+ readonly tooLong: (maxLength: number) => string;
82
+ };
78
83
  export declare const TestIds: {
79
84
  readonly root: "textbox-root";
80
85
  readonly input: "textbox-input";
@@ -82,6 +87,7 @@ export declare const TestIds: {
82
87
  readonly requiredIndicator: "textbox-required-indicator";
83
88
  readonly tooltipButton: "textbox-tooltip-button";
84
89
  readonly description: "textbox-description";
90
+ readonly errorMessage: "textbox-error-message";
85
91
  };
86
92
  export declare const selectors: {
87
93
  readonly root: "textbox";
@@ -95,4 +101,5 @@ export declare const semanticClassNames: {
95
101
  readonly label: "textbox__label";
96
102
  readonly requiredIndicator: "textbox__required-indicator";
97
103
  readonly description: "textbox__description";
104
+ readonly errorMessage: "textbox__error-message";
98
105
  };
@@ -13,6 +13,11 @@
13
13
  min-height: 100%;
14
14
  }
15
15
 
16
+ .errorMessage__K0qsG {
17
+ font: normal normal normal 12px/1.4em madefor-text, sans-serif;
18
+ color: var(--errorTextColor, #ff4040);
19
+ }
20
+
16
21
  .root__dlp5n .field__i7dfL {
17
22
  gap: 0;
18
23
  }
@@ -34,8 +39,8 @@
34
39
  .description__--0WR {
35
40
  margin: 0;
36
41
  margin-block-start: var(--descriptionSpacing, 6px);
37
- font: var(--wst-paragraph-3-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
38
- color: var(--wst-paragraph-2-color, #2b2b2b);
42
+ font: normal normal normal 12px/1.4em madefor-text, sans-serif;
43
+ color: #2b2b2b;
39
44
  }
40
45
 
41
46
  .tooltipButton__tOobd {
@@ -70,9 +75,9 @@
70
75
  .tooltip__6OlB9 {
71
76
  max-width: 220px;
72
77
  padding: 6px 10px;
73
- font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
74
- color: var(--wst-primary-background-color, #fff);
75
- background: var(--wst-paragraph-2-color, #2b2b2b);
78
+ font: normal normal normal 12px/1.4em madefor-text, sans-serif;
79
+ color: #fff;
80
+ background: #2b2b2b;
76
81
  border-radius: 6px;
77
82
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
78
83
  }
@@ -114,7 +119,7 @@
114
119
 
115
120
  .input__JG8Be[data-invalid],
116
121
  .input__JG8Be.textbox__input--invalid {
117
- --input-border: var(--borderColor, #e62214);
122
+ --input-border: var(--borderColor, #ff4040);
118
123
  }
119
124
 
120
125
  .input__JG8Be[data-disabled],
@@ -3,6 +3,7 @@ import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selector
3
3
  import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
4
4
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
5
5
  import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
6
+ import { m as manifestValidation } from "../chunks/manifest2.js";
6
7
  const manifest = {
7
8
  id: "002d94d7-bec7-4082-8d00-fe4ede12024d",
8
9
  type: "wixEditorElements.TextBox__DEV__v3",
@@ -110,7 +111,8 @@ const manifest = {
110
111
  dataType: DATA.DATA_TYPE.direction
111
112
  },
112
113
  ...manifestChangeable(),
113
- ...manifestFocusable()
114
+ ...manifestFocusable(),
115
+ ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
114
116
  },
115
117
  cssCustomProperties: {
116
118
  gap: {
@@ -6,11 +6,12 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
6
6
  import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
7
7
  import { a as getDataAttributes } from "../chunks/dataUtils.js";
8
8
  import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
9
- import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/useValidatedField.js";
9
+ import { u as useValidatedField } from "../chunks/useValidatedField.js";
10
10
  import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
11
11
  import { useService } from "@wix/services-manager-react";
12
12
  import { T as TranslationsDefinition } from "../chunks/index5.js";
13
13
  import { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$export$4c014de7c8940b4c, e as $3274bf1495747a7b$export$5add1d006293d136, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, h as $01b77f81d0f07f68$export$75b6ee27786ba447, i as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
14
+ import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Tooltip.js";
14
15
  import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $f39a9eba43920ace$export$86427a43e3e48ebb, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
15
16
  import { S as SdkStateDefinition } from "../chunks/index6.js";
16
17
  const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
@@ -3,7 +3,7 @@ import { useState, useMemo } from "react";
3
3
  import { c as clsx } from "../chunks/clsx.js";
4
4
  import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, a as $01b77f81d0f07f68$export$b04be29aa201d4f5, b as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../chunks/Group.js";
5
5
  import { $ as $58246871e4652552$export$c9698ec7f05a07e1, a as $40825cdb76e74f70$export$7edc06cf1783b30f, b as $40825cdb76e74f70$export$336ab7fa954c4b5f, c as $40825cdb76e74f70$export$5eaee2322dd727eb } from "../chunks/DateField.js";
6
- import { u as useValidatedField, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/useValidatedField.js";
6
+ import { $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, b as $514c0188e459b4c0$export$5f1af8db9871e1d6, c as $ee014567cb39d3f0$export$f551688fc98f2e09 } from "../chunks/Tooltip.js";
7
7
  import { $ as $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 } from "../chunks/filterDOMProps.js";
8
8
  import { useService } from "@wix/services-manager-react";
9
9
  import { E as EnvironmentDefinition } from "../chunks/index2.js";
@@ -12,6 +12,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
12
12
  import { d as directionStyles } from "../chunks/direction.module.js";
13
13
  import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
14
14
  import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
15
+ import { u as useValidatedField } from "../chunks/useValidatedField.js";
15
16
  import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
16
17
  import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
17
18
  const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
@@ -4,7 +4,7 @@ var __typeError = (msg) => {
4
4
  var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
5
5
  var _type, _type2, _type3, _type4;
6
6
  import { k as $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7, a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a, l as $df56164dff5785e2$export$4338b53315abf666 } from "./filterDOMProps.js";
7
- import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, m as $fd2148440a13ec26$export$aca958c65c314e6c, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./useValidatedField.js";
7
+ import { e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, l as $fd2148440a13ec26$export$75ee7c75d68f5b0e, m as $fd2148440a13ec26$export$aca958c65c314e6c, d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "./Tooltip.js";
8
8
  import { j as $6a20a7989e6c817a$export$98658e8c59125e6a, k as $23f2114a1b82827e$export$4282f70798064fe0, l as $23f2114a1b82827e$export$cd4e5573fbe2b576, m as $d447af545b77c9f1$export$b204af158042fbac, n as $3b8b240c1bf84ab9$export$bebd5a1431fec25d, o as $3b8b240c1bf84ab9$export$4c063cf1350e6fed, p as $f192c2f16961cbe0$export$80f3e147d781571c, q as $c4867b2f328c2698$export$e5c5a5f917a5871c, r as $d447af545b77c9f1$export$f21a1ffae260145a, g as $23f2114a1b82827e$export$e58f029f0fbfdb29, s as $2add3ce32c6007eb$export$a11b0059900ceec8, t as $2add3ce32c6007eb$export$6446a186d09e379e, u as $8f5a2122b0992be3$export$630ff653c5ada6a9, v as $fe16bffc7a557bf0$export$7f54fc3180508a52, w as $2add3ce32c6007eb$export$fedb369cb70207f1, x as $48a7d519b337145d$export$4eaf04e54aa8eed6, y as $d27d541f9569d26d$export$45712eceda6fad21, f as $bbaa08b3cd72f041$export$9d1611c77c2fe928, z as $2c9edc598a03d523$export$420e68273165f4ec, e as $3274bf1495747a7b$export$5add1d006293d136, A as $390e54f620492c70$export$f680877a34711e37, B as $e8ac3c3f5d4bae7f$export$d6875122194c7b44, C as $2add3ce32c6007eb$export$9ac100e40613ea10, c as $3e6197669829fe11$export$40bfa8c7b0832715, i as $a049562f99e7db0e$export$f9c6924e160136d1, h as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, D as $0c4a58759813079a$export$4e328f61c538687f, E as $e969f22b6713ca4a$export$ae780daf29e6d456 } from "./Group.js";
9
9
  import React__default, { useRef, useContext, useMemo, useEffect, useState, useCallback, forwardRef, createContext, cloneElement } from "react";
10
10
  import { $ as $cf2482eff2eeeec2$export$f12b703ca79dfbb1, a as $cf2482eff2eeeec2$export$87b761675e8eaa10, b as $a747a10fe70a57da$export$c17fa47878dc55b6, c as $b27c684a33948c64$export$2f817fcdc4b89ae0 } from "./useLocalizedStringFormatter.js";