@wix/editor-react-components 1.2354.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.
- package/dist/site/components/DatePicker/component.js +2 -1
- package/dist/site/components/DatePicker/manifest.js +2 -2
- package/dist/site/components/TextBox/TextBox.types.d.ts +2 -1
- package/dist/site/components/TextBox/component.js +139 -69
- package/dist/site/components/TextBox/constants.d.ts +7 -0
- package/dist/site/components/TextBox/css.css +11 -6
- package/dist/site/components/TextBox/manifest.js +3 -1
- package/dist/site/components/TextInput/component.js +2 -1
- package/dist/site/components/TextInput/manifest.js +3 -4
- package/dist/site/components/TimePicker/component.js +2 -1
- package/dist/site/components/TimePicker/manifest.js +2 -2
- package/dist/site/components/chunks/DateField.js +1 -1
- package/dist/site/components/chunks/Tooltip.js +1334 -0
- package/dist/site/components/chunks/constants18.js +10 -2
- package/dist/site/components/chunks/manifest2.js +11 -2
- package/dist/site/components/chunks/useValidatedField.js +2 -1333
- package/package.json +2 -2
|
@@ -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,
|
|
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);
|
|
@@ -35,8 +35,8 @@ const boxPadding = {
|
|
|
35
35
|
paddingInlineEnd: {}
|
|
36
36
|
};
|
|
37
37
|
const manifest = {
|
|
38
|
-
id: "
|
|
39
|
-
type: "wixEditorElements.
|
|
38
|
+
id: "293335cb-3dd0-4747-95dd-8903894beab0",
|
|
39
|
+
type: "wixEditorElements.DatePicker__DEV__v3",
|
|
40
40
|
description: "A date picker input. Visitors pick a date from a segmented field or a calendar popover. The selected date is exposed as an ISO string and can be connected to a data field.",
|
|
41
41
|
installation: {
|
|
42
42
|
initialSize: {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { A11y, Direction } from '@wix/editor-react-types';
|
|
2
2
|
import { SdkFunctionChangeableProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
|
|
3
|
-
|
|
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
|
|
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(
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
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
|
-
|
|
87
|
-
|
|
88
|
-
|
|
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
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"
|
|
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
|
-
|
|
172
|
+
Input_Input_Input,
|
|
104
173
|
{
|
|
105
|
-
|
|
106
|
-
className:
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
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
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
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
|
-
|
|
146
|
-
|
|
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:
|
|
38
|
-
color:
|
|
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:
|
|
74
|
-
color:
|
|
75
|
-
background:
|
|
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, #
|
|
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 {
|
|
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);
|
|
@@ -5,8 +5,8 @@ import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
|
|
|
5
5
|
import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
|
|
6
6
|
import { m as manifestValidation } from "../chunks/manifest2.js";
|
|
7
7
|
const manifest = {
|
|
8
|
-
id: "
|
|
9
|
-
type: "wixEditorElements.
|
|
8
|
+
id: "e95f3cfd-a78d-4d7c-addb-c93182193857",
|
|
9
|
+
type: "wixEditorElements.TextInput__DEV__v2",
|
|
10
10
|
description: "TextInput",
|
|
11
11
|
installation: {
|
|
12
12
|
initialSize: {
|
|
@@ -22,8 +22,7 @@ const manifest = {
|
|
|
22
22
|
},
|
|
23
23
|
resources: {
|
|
24
24
|
client: {
|
|
25
|
-
componentUrl: "./site/components/TextInput/component.tsx"
|
|
26
|
-
moduleSpecifier: "@wix/editor-react-components/TextInput"
|
|
25
|
+
componentUrl: "./site/components/TextInput/component.tsx"
|
|
27
26
|
},
|
|
28
27
|
sdk: {
|
|
29
28
|
url: "./site/components/TextInput/sdk.ts"
|
|
@@ -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 {
|
|
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) => {
|
|
@@ -49,8 +49,8 @@ const timeInputCssProperties = {
|
|
|
49
49
|
paddingInlineEnd: { defaultValue: "12px" }
|
|
50
50
|
};
|
|
51
51
|
const manifest = {
|
|
52
|
-
id: "
|
|
53
|
-
type: "wixEditorElements.
|
|
52
|
+
id: "1b7d0433-671f-4068-b3ba-d6e7a6443833",
|
|
53
|
+
type: "wixEditorElements.TimePicker__DEV__v3",
|
|
54
54
|
description: "A time picker input. Visitors type a time into hour/minute segments or step them with arrow keys. The selected time is exposed as an ISO string and can be connected to a data field.",
|
|
55
55
|
installation: {
|
|
56
56
|
initialSize: {
|
|
@@ -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 "./
|
|
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";
|