@wix/editor-react-components 1.2348.0 → 1.2349.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/Checkbox/component.js +1 -2
- package/dist/site/components/CheckboxGroup/component.js +1 -2
- package/dist/site/components/DatePicker/component.js +1 -2
- package/dist/site/components/TextBox/TextBox.types.d.ts +2 -0
- package/dist/site/components/TextBox/component.js +26 -18
- package/dist/site/components/TextBox/constants.d.ts +23 -5
- package/dist/site/components/TextBox/css.css +26 -16
- package/dist/site/components/TextBox/manifest.js +99 -33
- package/dist/site/components/TextInput/component.js +1 -2
- package/dist/site/components/TimePicker/component.js +1 -2
- package/dist/site/components/chunks/RequiredIndicator.js +5 -1
- package/dist/site/components/chunks/constants18.js +33 -13
- package/package.json +2 -2
- package/dist/site/components/chunks/InfoCircleSmall.js +0 -7
|
@@ -6,11 +6,10 @@ 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";
|
|
8
8
|
import { a as getDataAttributes } from "../chunks/dataUtils.js";
|
|
9
|
-
import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
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
12
|
import { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants36.js";
|
|
13
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
14
13
|
const root = "root__0DpH8";
|
|
15
14
|
const field = "field__R0D8f";
|
|
16
15
|
const item = "item__EzhwB";
|
|
@@ -6,11 +6,10 @@ 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";
|
|
8
8
|
import { a as getDataAttributes } from "../chunks/dataUtils.js";
|
|
9
|
-
import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
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
12
|
import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants35.js";
|
|
13
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
14
13
|
const root = "root__raraS";
|
|
15
14
|
const fieldset = "fieldset__pDERL";
|
|
16
15
|
const labelRow = "labelRow__CTw2X";
|
|
@@ -16,8 +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/constants33.js";
|
|
19
|
-
import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
20
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
19
|
+
import { I as InfoCircleSmall_default, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
21
20
|
import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
|
|
22
21
|
createContext(null);
|
|
23
22
|
createContext(null);
|
|
@@ -4,10 +4,12 @@ export type TextBoxProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFun
|
|
|
4
4
|
id: string;
|
|
5
5
|
className: string;
|
|
6
6
|
value?: string;
|
|
7
|
+
defaultValue?: string;
|
|
7
8
|
onChange?: (value: string) => void;
|
|
8
9
|
label: string;
|
|
9
10
|
tooltip?: string;
|
|
10
11
|
placeholder?: string;
|
|
12
|
+
description?: string;
|
|
11
13
|
required?: boolean;
|
|
12
14
|
readOnly?: boolean;
|
|
13
15
|
disabled?: boolean;
|
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
2
|
import { c as clsx } from "../chunks/clsx.js";
|
|
4
3
|
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";
|
|
8
8
|
import { a as getDataAttributes } from "../chunks/dataUtils.js";
|
|
9
|
+
import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
|
|
9
10
|
import { d as directionStyles } from "../chunks/direction.module.js";
|
|
10
11
|
import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
|
|
11
12
|
import { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants18.js";
|
|
12
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
13
13
|
const root = "root__dlp5n";
|
|
14
14
|
const field = "field__i7dfL";
|
|
15
15
|
const labelRow = "labelRow__qwrwd";
|
|
16
16
|
const label = "label__GIRwe";
|
|
17
|
+
const description = "description__--0WR";
|
|
17
18
|
const tooltipButton = "tooltipButton__tOobd";
|
|
18
19
|
const tooltip = "tooltip__6OlB9";
|
|
19
20
|
const input = "input__JG8Be";
|
|
@@ -22,6 +23,7 @@ const styles = {
|
|
|
22
23
|
field,
|
|
23
24
|
labelRow,
|
|
24
25
|
label,
|
|
26
|
+
description,
|
|
25
27
|
tooltipButton,
|
|
26
28
|
tooltip,
|
|
27
29
|
input
|
|
@@ -36,6 +38,7 @@ function TextBoxComponent(props) {
|
|
|
36
38
|
label: label2 = defaultValues.label,
|
|
37
39
|
tooltip: tooltip2 = defaultValues.tooltip,
|
|
38
40
|
placeholder = defaultValues.placeholder,
|
|
41
|
+
description: description2 = defaultValues.description,
|
|
39
42
|
required = defaultValues.required,
|
|
40
43
|
readOnly = defaultValues.readOnly,
|
|
41
44
|
disabled = defaultValues.disabled,
|
|
@@ -48,17 +51,9 @@ function TextBoxComponent(props) {
|
|
|
48
51
|
onBlur = noop,
|
|
49
52
|
wix
|
|
50
53
|
} = props;
|
|
51
|
-
const
|
|
52
|
-
const
|
|
53
|
-
const
|
|
54
|
-
if (prevValue !== incomingValue) {
|
|
55
|
-
setPrevValue(incomingValue);
|
|
56
|
-
setValue(incomingValue);
|
|
57
|
-
}
|
|
58
|
-
const handleValueChange = (next) => {
|
|
59
|
-
setValue(next);
|
|
60
|
-
onChange(next);
|
|
61
|
-
};
|
|
54
|
+
const isControlled = props.value !== void 0;
|
|
55
|
+
const defaultValue = props.defaultValue ?? defaultValues.defaultValue;
|
|
56
|
+
const handleValueChange = (next) => onChange(next);
|
|
62
57
|
const hasLabel = !!label2;
|
|
63
58
|
const hasTooltip = !!tooltip2;
|
|
64
59
|
const ariaLabel = !hasLabel ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
|
|
@@ -92,11 +87,12 @@ function TextBoxComponent(props) {
|
|
|
92
87
|
children: [
|
|
93
88
|
label2,
|
|
94
89
|
required && /* @__PURE__ */ jsx(
|
|
95
|
-
|
|
90
|
+
RequiredIndicator,
|
|
96
91
|
{
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
92
|
+
className: formatClassNames(
|
|
93
|
+
semanticClassNames.requiredIndicator
|
|
94
|
+
),
|
|
95
|
+
"data-testid": TestIds.requiredIndicator
|
|
100
96
|
}
|
|
101
97
|
)
|
|
102
98
|
]
|
|
@@ -125,7 +121,7 @@ function TextBoxComponent(props) {
|
|
|
125
121
|
selectors.input,
|
|
126
122
|
formatClassNames(semanticClassNames.input)
|
|
127
123
|
),
|
|
128
|
-
value,
|
|
124
|
+
...isControlled ? { value: props.value } : { defaultValue },
|
|
129
125
|
onValueChange: handleValueChange,
|
|
130
126
|
readOnly,
|
|
131
127
|
required,
|
|
@@ -137,6 +133,18 @@ function TextBoxComponent(props) {
|
|
|
137
133
|
onFocus,
|
|
138
134
|
onBlur
|
|
139
135
|
}
|
|
136
|
+
),
|
|
137
|
+
description2 && /* @__PURE__ */ jsx(
|
|
138
|
+
Field.Description,
|
|
139
|
+
{
|
|
140
|
+
className: clsx(
|
|
141
|
+
styles.description,
|
|
142
|
+
selectors.description,
|
|
143
|
+
formatClassNames(semanticClassNames.description)
|
|
144
|
+
),
|
|
145
|
+
"data-testid": TestIds.description,
|
|
146
|
+
children: description2
|
|
147
|
+
}
|
|
140
148
|
)
|
|
141
149
|
] })
|
|
142
150
|
}
|
|
@@ -3,6 +3,7 @@ export declare const DisplayNames: {
|
|
|
3
3
|
elementDisplayName: string;
|
|
4
4
|
data: {
|
|
5
5
|
value: string;
|
|
6
|
+
defaultValue: string;
|
|
6
7
|
label: string;
|
|
7
8
|
tooltip: string;
|
|
8
9
|
placeholder: string;
|
|
@@ -11,10 +12,12 @@ export declare const DisplayNames: {
|
|
|
11
12
|
disabled: string;
|
|
12
13
|
minLength: string;
|
|
13
14
|
maxLength: string;
|
|
15
|
+
description: string;
|
|
14
16
|
};
|
|
15
17
|
cssCustomProperties: {
|
|
16
18
|
gap: string;
|
|
17
19
|
labelAlignment: string;
|
|
20
|
+
descriptionSpacing: string;
|
|
18
21
|
};
|
|
19
22
|
};
|
|
20
23
|
input: {
|
|
@@ -23,6 +26,12 @@ export declare const DisplayNames: {
|
|
|
23
26
|
placeholderTextColor: string;
|
|
24
27
|
borderColor: string;
|
|
25
28
|
borderWidth: string;
|
|
29
|
+
resize: string;
|
|
30
|
+
};
|
|
31
|
+
options: {
|
|
32
|
+
resizeOff: string;
|
|
33
|
+
resizeVertical: string;
|
|
34
|
+
resizeBoth: string;
|
|
26
35
|
};
|
|
27
36
|
displayGroups: {
|
|
28
37
|
borderGroup: string;
|
|
@@ -31,32 +40,37 @@ export declare const DisplayNames: {
|
|
|
31
40
|
label: {
|
|
32
41
|
elementDisplayName: string;
|
|
33
42
|
};
|
|
43
|
+
description: {
|
|
44
|
+
elementDisplayName: string;
|
|
45
|
+
};
|
|
34
46
|
};
|
|
35
47
|
export declare const DesignStates: {
|
|
36
|
-
readonly
|
|
48
|
+
readonly input: {
|
|
37
49
|
readonly hover: {
|
|
38
50
|
readonly displayName: "Hover";
|
|
39
|
-
readonly className: "
|
|
51
|
+
readonly className: "textbox__input--hover";
|
|
40
52
|
};
|
|
41
53
|
readonly focus: {
|
|
42
54
|
readonly displayName: "Focus";
|
|
43
|
-
readonly className: "
|
|
55
|
+
readonly className: "textbox__input--focus";
|
|
44
56
|
};
|
|
45
57
|
readonly disabled: {
|
|
46
58
|
readonly displayName: "Disabled";
|
|
47
|
-
readonly className: "
|
|
59
|
+
readonly className: "textbox__input--disabled";
|
|
48
60
|
};
|
|
49
61
|
readonly invalid: {
|
|
50
62
|
readonly displayName: "Error";
|
|
51
|
-
readonly className: "
|
|
63
|
+
readonly className: "textbox__input--invalid";
|
|
52
64
|
};
|
|
53
65
|
};
|
|
54
66
|
};
|
|
55
67
|
export declare const defaultValues: {
|
|
56
68
|
readonly value: "";
|
|
69
|
+
readonly defaultValue: "";
|
|
57
70
|
readonly label: "Label";
|
|
58
71
|
readonly tooltip: "";
|
|
59
72
|
readonly placeholder: "Enter your text here...";
|
|
73
|
+
readonly description: "";
|
|
60
74
|
readonly required: false;
|
|
61
75
|
readonly readOnly: false;
|
|
62
76
|
readonly disabled: false;
|
|
@@ -67,14 +81,18 @@ export declare const TestIds: {
|
|
|
67
81
|
readonly label: "textbox-label";
|
|
68
82
|
readonly requiredIndicator: "textbox-required-indicator";
|
|
69
83
|
readonly tooltipButton: "textbox-tooltip-button";
|
|
84
|
+
readonly description: "textbox-description";
|
|
70
85
|
};
|
|
71
86
|
export declare const selectors: {
|
|
72
87
|
readonly root: "textbox";
|
|
73
88
|
readonly input: "textbox__input";
|
|
74
89
|
readonly label: "textbox__label";
|
|
90
|
+
readonly description: "textbox__description";
|
|
75
91
|
};
|
|
76
92
|
export declare const semanticClassNames: {
|
|
77
93
|
readonly root: "textbox";
|
|
78
94
|
readonly input: "textbox__input";
|
|
79
95
|
readonly label: "textbox__label";
|
|
96
|
+
readonly requiredIndicator: "textbox__required-indicator";
|
|
97
|
+
readonly description: "textbox__description";
|
|
80
98
|
};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
display: flex;
|
|
4
4
|
width: 100%;
|
|
5
|
-
height: 100%;
|
|
5
|
+
min-height: 100%;
|
|
6
6
|
max-width: 100%;
|
|
7
7
|
}
|
|
8
8
|
|
|
@@ -10,11 +10,11 @@
|
|
|
10
10
|
display: flex;
|
|
11
11
|
flex-direction: column;
|
|
12
12
|
width: 100%;
|
|
13
|
-
height: 100%;
|
|
13
|
+
min-height: 100%;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
.root__dlp5n .field__i7dfL {
|
|
17
|
-
gap:
|
|
17
|
+
gap: 0;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
.labelRow__qwrwd {
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
align-self: var(--labelAlignment, flex-start);
|
|
24
24
|
gap: 6px;
|
|
25
25
|
max-width: 100%;
|
|
26
|
+
margin-block-end: var(--gap, 8px);
|
|
26
27
|
}
|
|
27
28
|
|
|
28
29
|
.label__GIRwe {
|
|
@@ -30,6 +31,13 @@
|
|
|
30
31
|
padding: 0;
|
|
31
32
|
}
|
|
32
33
|
|
|
34
|
+
.description__--0WR {
|
|
35
|
+
margin: 0;
|
|
36
|
+
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);
|
|
39
|
+
}
|
|
40
|
+
|
|
33
41
|
.tooltipButton__tOobd {
|
|
34
42
|
flex: none;
|
|
35
43
|
box-sizing: border-box;
|
|
@@ -75,7 +83,7 @@
|
|
|
75
83
|
width: 100%;
|
|
76
84
|
min-height: 0;
|
|
77
85
|
margin: 0;
|
|
78
|
-
resize: none;
|
|
86
|
+
resize: var(--textbox-resize, none);
|
|
79
87
|
border-style: solid;
|
|
80
88
|
border-color: var(--input-border);
|
|
81
89
|
border-width: var(--borderWidth, 1px);
|
|
@@ -95,30 +103,24 @@
|
|
|
95
103
|
}
|
|
96
104
|
|
|
97
105
|
.input__JG8Be:hover,
|
|
98
|
-
.
|
|
106
|
+
.input__JG8Be.textbox__input--hover {
|
|
99
107
|
--input-border: var(--borderColor, #000);
|
|
100
108
|
}
|
|
101
109
|
|
|
102
110
|
.input__JG8Be:focus,
|
|
103
|
-
.
|
|
111
|
+
.input__JG8Be.textbox__input--focus {
|
|
104
112
|
--input-border: var(--borderColor, #116dff);
|
|
105
113
|
}
|
|
106
114
|
|
|
107
115
|
.input__JG8Be[data-invalid],
|
|
108
|
-
.
|
|
116
|
+
.input__JG8Be.textbox__input--invalid {
|
|
109
117
|
--input-border: var(--borderColor, #e62214);
|
|
110
118
|
}
|
|
111
119
|
|
|
112
|
-
.input__JG8Be[data-disabled]
|
|
120
|
+
.input__JG8Be[data-disabled],
|
|
121
|
+
.input__JG8Be.textbox__input--disabled {
|
|
113
122
|
cursor: default;
|
|
114
|
-
|
|
115
|
-
--borderColor,
|
|
116
|
-
color-mix(
|
|
117
|
-
in srgb,
|
|
118
|
-
var(--wst-system-disabled-color, #939393) 60%,
|
|
119
|
-
transparent
|
|
120
|
-
)
|
|
121
|
-
);
|
|
123
|
+
opacity: 0.55;
|
|
122
124
|
}.textbox {
|
|
123
125
|
--gap: 8px;
|
|
124
126
|
}
|
|
@@ -129,6 +131,14 @@
|
|
|
129
131
|
background-color: #fff;
|
|
130
132
|
color: #000;
|
|
131
133
|
}
|
|
134
|
+
.requiredIndicator__j5mIH {
|
|
135
|
+
display: inline-block;
|
|
136
|
+
width: 0.6em;
|
|
137
|
+
height: 0.6em;
|
|
138
|
+
margin-inline-start: 0.2em;
|
|
139
|
+
vertical-align: super;
|
|
140
|
+
color: inherit;
|
|
141
|
+
}
|
|
132
142
|
.fallbackDirection__HeRgn:not([dir]) {
|
|
133
143
|
direction: var(--wix-opt-in-direction);
|
|
134
144
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { E as ELEMENTS,
|
|
1
|
+
import { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
|
|
2
2
|
import { D as DesignStates, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants18.js";
|
|
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";
|
|
@@ -11,11 +11,11 @@ const manifest = {
|
|
|
11
11
|
initialSize: {
|
|
12
12
|
width: {
|
|
13
13
|
sizingType: LAYOUT.SIZING_TYPE.pixels,
|
|
14
|
-
pixels:
|
|
14
|
+
pixels: 400
|
|
15
15
|
},
|
|
16
16
|
height: {
|
|
17
17
|
sizingType: LAYOUT.SIZING_TYPE.pixels,
|
|
18
|
-
pixels:
|
|
18
|
+
pixels: 200
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
},
|
|
@@ -25,15 +25,22 @@ const manifest = {
|
|
|
25
25
|
archetype: Archetype.TextInput,
|
|
26
26
|
layout: {
|
|
27
27
|
resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
|
|
28
|
-
contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.
|
|
29
|
-
disableStretching:
|
|
28
|
+
contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
|
|
29
|
+
disableStretching: true,
|
|
30
30
|
disablePositioning: false
|
|
31
31
|
},
|
|
32
32
|
data: {
|
|
33
33
|
value: {
|
|
34
34
|
dataType: DATA.DATA_TYPE.text,
|
|
35
35
|
displayName: DisplayNames.root.data.value,
|
|
36
|
-
|
|
36
|
+
[DATA.DATA_TYPE.text]: {
|
|
37
|
+
maxLength: 4e3
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
defaultValue: {
|
|
41
|
+
dataType: DATA.DATA_TYPE.text,
|
|
42
|
+
displayName: DisplayNames.root.data.defaultValue,
|
|
43
|
+
defaultValue: defaultValues.defaultValue,
|
|
37
44
|
[DATA.DATA_TYPE.text]: {
|
|
38
45
|
maxLength: 4e3
|
|
39
46
|
}
|
|
@@ -62,6 +69,14 @@ const manifest = {
|
|
|
62
69
|
maxLength: 4e3
|
|
63
70
|
}
|
|
64
71
|
},
|
|
72
|
+
description: {
|
|
73
|
+
dataType: DATA.DATA_TYPE.text,
|
|
74
|
+
displayName: DisplayNames.root.data.description,
|
|
75
|
+
defaultValue: defaultValues.description,
|
|
76
|
+
[DATA.DATA_TYPE.text]: {
|
|
77
|
+
maxLength: 4e3
|
|
78
|
+
}
|
|
79
|
+
},
|
|
65
80
|
minLength: {
|
|
66
81
|
dataType: DATA.DATA_TYPE.number,
|
|
67
82
|
displayName: DisplayNames.root.data.minLength
|
|
@@ -97,33 +112,6 @@ const manifest = {
|
|
|
97
112
|
...manifestChangeable(),
|
|
98
113
|
...manifestFocusable()
|
|
99
114
|
},
|
|
100
|
-
states: {
|
|
101
|
-
hover: withSpec({
|
|
102
|
-
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
103
|
-
displayName: DesignStates.root.hover.displayName,
|
|
104
|
-
className: DesignStates.root.hover.className,
|
|
105
|
-
pseudoClass: NativeStateType.hover
|
|
106
|
-
}),
|
|
107
|
-
focus: withSpec({
|
|
108
|
-
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
109
|
-
displayName: DesignStates.root.focus.displayName,
|
|
110
|
-
className: DesignStates.root.focus.className,
|
|
111
|
-
pseudoClass: NativeStateType.focus
|
|
112
|
-
}),
|
|
113
|
-
disabled: withSpec({
|
|
114
|
-
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
115
|
-
displayName: DesignStates.root.disabled.displayName,
|
|
116
|
-
className: DesignStates.root.disabled.className,
|
|
117
|
-
pseudoClass: NativeStateType.disabled,
|
|
118
|
-
props: { disabled: true }
|
|
119
|
-
}),
|
|
120
|
-
invalid: withSpec({
|
|
121
|
-
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
122
|
-
displayName: DesignStates.root.invalid.displayName,
|
|
123
|
-
className: DesignStates.root.invalid.className,
|
|
124
|
-
pseudoClass: NativeStateType.invalid
|
|
125
|
-
})
|
|
126
|
-
},
|
|
127
115
|
cssCustomProperties: {
|
|
128
116
|
gap: {
|
|
129
117
|
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
|
|
@@ -133,6 +121,11 @@ const manifest = {
|
|
|
133
121
|
labelAlignment: {
|
|
134
122
|
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
|
|
135
123
|
displayName: DisplayNames.root.cssCustomProperties.labelAlignment
|
|
124
|
+
},
|
|
125
|
+
descriptionSpacing: {
|
|
126
|
+
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
|
|
127
|
+
displayName: DisplayNames.root.cssCustomProperties.descriptionSpacing,
|
|
128
|
+
defaultValue: "6px"
|
|
136
129
|
}
|
|
137
130
|
},
|
|
138
131
|
elements: {
|
|
@@ -167,6 +160,37 @@ const manifest = {
|
|
|
167
160
|
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
|
|
168
161
|
displayName: DisplayNames.input.cssCustomProperties.borderWidth,
|
|
169
162
|
defaultValue: "1px"
|
|
163
|
+
},
|
|
164
|
+
resize: {
|
|
165
|
+
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
|
|
166
|
+
displayName: DisplayNames.input.cssCustomProperties.resize,
|
|
167
|
+
defaultValue: "none",
|
|
168
|
+
customEnum: {
|
|
169
|
+
cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
|
|
170
|
+
options: [
|
|
171
|
+
{
|
|
172
|
+
value: "none",
|
|
173
|
+
displayName: DisplayNames.input.options.resizeOff,
|
|
174
|
+
appliedStyles: [
|
|
175
|
+
{ property: "--textbox-resize", value: "none" }
|
|
176
|
+
]
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
value: "vertical",
|
|
180
|
+
displayName: DisplayNames.input.options.resizeVertical,
|
|
181
|
+
appliedStyles: [
|
|
182
|
+
{ property: "--textbox-resize", value: "vertical" }
|
|
183
|
+
]
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
value: "both",
|
|
187
|
+
displayName: DisplayNames.input.options.resizeBoth,
|
|
188
|
+
appliedStyles: [
|
|
189
|
+
{ property: "--textbox-resize", value: "both" }
|
|
190
|
+
]
|
|
191
|
+
}
|
|
192
|
+
]
|
|
193
|
+
}
|
|
170
194
|
}
|
|
171
195
|
},
|
|
172
196
|
displayGroups: {
|
|
@@ -178,6 +202,33 @@ const manifest = {
|
|
|
178
202
|
width: "borderWidth"
|
|
179
203
|
}
|
|
180
204
|
}
|
|
205
|
+
},
|
|
206
|
+
states: {
|
|
207
|
+
hover: withSpec({
|
|
208
|
+
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
209
|
+
displayName: DesignStates.input.hover.displayName,
|
|
210
|
+
className: DesignStates.input.hover.className,
|
|
211
|
+
pseudoClass: NativeStateType.hover
|
|
212
|
+
}),
|
|
213
|
+
focus: withSpec({
|
|
214
|
+
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
215
|
+
displayName: DesignStates.input.focus.displayName,
|
|
216
|
+
className: DesignStates.input.focus.className,
|
|
217
|
+
pseudoClass: NativeStateType.focus
|
|
218
|
+
}),
|
|
219
|
+
disabled: withSpec({
|
|
220
|
+
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
221
|
+
displayName: DesignStates.input.disabled.displayName,
|
|
222
|
+
className: DesignStates.input.disabled.className,
|
|
223
|
+
pseudoClass: NativeStateType.disabled,
|
|
224
|
+
props: { disabled: true }
|
|
225
|
+
}),
|
|
226
|
+
invalid: withSpec({
|
|
227
|
+
spec: IS_SUPPORT_DESIGN_STATE_SPEC,
|
|
228
|
+
displayName: DesignStates.input.invalid.displayName,
|
|
229
|
+
className: DesignStates.input.invalid.className,
|
|
230
|
+
pseudoClass: NativeStateType.invalid
|
|
231
|
+
})
|
|
181
232
|
}
|
|
182
233
|
}
|
|
183
234
|
},
|
|
@@ -195,6 +246,21 @@ const manifest = {
|
|
|
195
246
|
font: {}
|
|
196
247
|
}
|
|
197
248
|
}
|
|
249
|
+
},
|
|
250
|
+
description: {
|
|
251
|
+
elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
|
|
252
|
+
inlineElement: {
|
|
253
|
+
displayName: DisplayNames.description.elementDisplayName,
|
|
254
|
+
selector: getSelector(selectors.description),
|
|
255
|
+
behaviors: {
|
|
256
|
+
selectable: false,
|
|
257
|
+
removable: false
|
|
258
|
+
},
|
|
259
|
+
cssProperties: {
|
|
260
|
+
color: {},
|
|
261
|
+
font: {}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
198
264
|
}
|
|
199
265
|
}
|
|
200
266
|
},
|
|
@@ -5,7 +5,7 @@ import { c as clsx } from "../chunks/clsx.js";
|
|
|
5
5
|
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
|
-
import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
8
|
+
import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
|
|
9
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";
|
|
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";
|
|
@@ -13,7 +13,6 @@ 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
14
|
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
15
|
import { S as SdkStateDefinition } from "../chunks/index6.js";
|
|
16
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
17
16
|
const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
|
|
18
17
|
function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
|
|
19
18
|
let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;
|
|
@@ -12,9 +12,8 @@ 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 { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
15
|
+
import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
|
|
16
16
|
import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
|
|
17
|
-
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
18
17
|
const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
|
|
19
18
|
const translationKey = translationKeys[key];
|
|
20
19
|
const translated = translate(translationKey);
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
+
import * as React from "react";
|
|
1
2
|
import { jsx } from "react/jsx-runtime";
|
|
2
3
|
import { c as clsx } from "./clsx.js";
|
|
3
|
-
|
|
4
|
+
const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
|
|
5
|
+
InfoCircleSmall.displayName = "InfoCircleSmall";
|
|
6
|
+
var InfoCircleSmall_default = InfoCircleSmall;
|
|
4
7
|
const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
|
|
5
8
|
Asterisk.displayName = "Asterisk";
|
|
6
9
|
var Asterisk_default = Asterisk;
|
|
@@ -21,5 +24,6 @@ const RequiredIndicator = ({
|
|
|
21
24
|
}
|
|
22
25
|
);
|
|
23
26
|
export {
|
|
27
|
+
InfoCircleSmall_default as I,
|
|
24
28
|
RequiredIndicator as R
|
|
25
29
|
};
|
|
@@ -2,7 +2,8 @@ const DisplayNames = {
|
|
|
2
2
|
root: {
|
|
3
3
|
elementDisplayName: "Text Box",
|
|
4
4
|
data: {
|
|
5
|
-
value: "
|
|
5
|
+
value: "Value",
|
|
6
|
+
defaultValue: "Default text",
|
|
6
7
|
label: "Label",
|
|
7
8
|
tooltip: "Tooltip",
|
|
8
9
|
placeholder: "Placeholder",
|
|
@@ -10,11 +11,13 @@ const DisplayNames = {
|
|
|
10
11
|
readOnly: "Read only",
|
|
11
12
|
disabled: "Disabled",
|
|
12
13
|
minLength: "Minimum characters",
|
|
13
|
-
maxLength: "Maximum characters"
|
|
14
|
+
maxLength: "Maximum characters",
|
|
15
|
+
description: "Helper text"
|
|
14
16
|
},
|
|
15
17
|
cssCustomProperties: {
|
|
16
18
|
gap: "Space between label and field",
|
|
17
|
-
labelAlignment: "Label alignment"
|
|
19
|
+
labelAlignment: "Label alignment",
|
|
20
|
+
descriptionSpacing: "Space between field and helper text"
|
|
18
21
|
}
|
|
19
22
|
},
|
|
20
23
|
input: {
|
|
@@ -22,7 +25,13 @@ const DisplayNames = {
|
|
|
22
25
|
cssCustomProperties: {
|
|
23
26
|
placeholderTextColor: "Placeholder text color",
|
|
24
27
|
borderColor: "Border color",
|
|
25
|
-
borderWidth: "Border width"
|
|
28
|
+
borderWidth: "Border width",
|
|
29
|
+
resize: "Resize"
|
|
30
|
+
},
|
|
31
|
+
options: {
|
|
32
|
+
resizeOff: "Off",
|
|
33
|
+
resizeVertical: "Vertical",
|
|
34
|
+
resizeBoth: "Both"
|
|
26
35
|
},
|
|
27
36
|
displayGroups: {
|
|
28
37
|
borderGroup: "Border"
|
|
@@ -30,21 +39,28 @@ const DisplayNames = {
|
|
|
30
39
|
},
|
|
31
40
|
label: {
|
|
32
41
|
elementDisplayName: "Label"
|
|
42
|
+
},
|
|
43
|
+
description: {
|
|
44
|
+
elementDisplayName: "Helper text"
|
|
33
45
|
}
|
|
34
46
|
};
|
|
35
47
|
const DesignStates = {
|
|
36
|
-
|
|
37
|
-
hover: { displayName: "Hover", className: "
|
|
38
|
-
focus: { displayName: "Focus", className: "
|
|
39
|
-
disabled: {
|
|
40
|
-
|
|
48
|
+
input: {
|
|
49
|
+
hover: { displayName: "Hover", className: "textbox__input--hover" },
|
|
50
|
+
focus: { displayName: "Focus", className: "textbox__input--focus" },
|
|
51
|
+
disabled: {
|
|
52
|
+
displayName: "Disabled",
|
|
53
|
+
className: "textbox__input--disabled"
|
|
54
|
+
},
|
|
55
|
+
invalid: { displayName: "Error", className: "textbox__input--invalid" }
|
|
41
56
|
}
|
|
42
57
|
};
|
|
43
58
|
const defaultValues = {
|
|
44
|
-
|
|
59
|
+
defaultValue: "",
|
|
45
60
|
label: "Label",
|
|
46
61
|
tooltip: "",
|
|
47
62
|
placeholder: "Enter your text here...",
|
|
63
|
+
description: "",
|
|
48
64
|
required: false,
|
|
49
65
|
readOnly: false,
|
|
50
66
|
disabled: false
|
|
@@ -54,16 +70,20 @@ const TestIds = {
|
|
|
54
70
|
input: "textbox-input",
|
|
55
71
|
label: "textbox-label",
|
|
56
72
|
requiredIndicator: "textbox-required-indicator",
|
|
57
|
-
tooltipButton: "textbox-tooltip-button"
|
|
73
|
+
tooltipButton: "textbox-tooltip-button",
|
|
74
|
+
description: "textbox-description"
|
|
58
75
|
};
|
|
59
76
|
const selectors = {
|
|
60
77
|
root: "textbox",
|
|
61
78
|
input: "textbox__input",
|
|
62
|
-
label: "textbox__label"
|
|
79
|
+
label: "textbox__label",
|
|
80
|
+
description: "textbox__description"
|
|
63
81
|
};
|
|
64
82
|
const semanticClassNames = {
|
|
65
83
|
input: "textbox__input",
|
|
66
|
-
label: "textbox__label"
|
|
84
|
+
label: "textbox__label",
|
|
85
|
+
requiredIndicator: "textbox__required-indicator",
|
|
86
|
+
description: "textbox__description"
|
|
67
87
|
};
|
|
68
88
|
export {
|
|
69
89
|
DesignStates as D,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2349.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -199,5 +199,5 @@
|
|
|
199
199
|
"registry": "https://registry.npmjs.org/",
|
|
200
200
|
"access": "public"
|
|
201
201
|
},
|
|
202
|
-
"falconPackageHash": "
|
|
202
|
+
"falconPackageHash": "ec50b6ff91a415fcdc5b6b5e9da57d635f690ba9631f96bc4d21fb8a"
|
|
203
203
|
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
|
|
3
|
-
InfoCircleSmall.displayName = "InfoCircleSmall";
|
|
4
|
-
var InfoCircleSmall_default = InfoCircleSmall;
|
|
5
|
-
export {
|
|
6
|
-
InfoCircleSmall_default as I
|
|
7
|
-
};
|