@wix/editor-react-components 1.2410.0 → 1.2412.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/Checkbox.types.d.ts +2 -1
- package/dist/site/components/Checkbox/component.js +129 -82
- package/dist/site/components/Checkbox/constants.d.ts +3 -0
- package/dist/site/components/Checkbox/css.css +13 -5
- package/dist/site/components/Checkbox/manifest.js +3 -1
- package/dist/site/components/chunks/constants37.js +6 -2
- package/package.json +3 -3
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { A11y, Direction } from '@wix/editor-react-types';
|
|
2
2
|
import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
|
|
3
|
-
|
|
3
|
+
import { FieldValidationProps } from '../../../utils/validation/types';
|
|
4
|
+
export type CheckboxProps = SdkFunctionFocusableProps & FieldValidationProps<boolean> & {
|
|
4
5
|
id: string;
|
|
5
6
|
className: string;
|
|
6
7
|
label: string;
|
|
@@ -1,15 +1,16 @@
|
|
|
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, d as Checkbox, T as Tooltip } 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
9
|
import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
|
|
10
|
+
import { u as useValidatedField } from "../chunks/useValidatedField.js";
|
|
10
11
|
import { d as directionStyles } from "../chunks/direction.module.js";
|
|
11
12
|
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/constants37.js";
|
|
13
|
+
import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants37.js";
|
|
13
14
|
import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
|
|
14
15
|
const root = "root__0DpH8";
|
|
15
16
|
const field = "field__R0D8f";
|
|
@@ -18,6 +19,7 @@ const control = "control__7-RJh";
|
|
|
18
19
|
const indicator = "indicator__dzBy2";
|
|
19
20
|
const checkmark = "checkmark__SY2jU";
|
|
20
21
|
const label = "label__Y3ciV";
|
|
22
|
+
const errorMessage = "errorMessage__PtMqM";
|
|
21
23
|
const tooltipButton = "tooltipButton__EXd4N";
|
|
22
24
|
const tooltip = "tooltip__Eudyd";
|
|
23
25
|
const styles = {
|
|
@@ -28,6 +30,7 @@ const styles = {
|
|
|
28
30
|
indicator,
|
|
29
31
|
checkmark,
|
|
30
32
|
label,
|
|
33
|
+
errorMessage,
|
|
31
34
|
tooltipButton,
|
|
32
35
|
tooltip
|
|
33
36
|
};
|
|
@@ -50,9 +53,39 @@ function CheckboxComponent(props) {
|
|
|
50
53
|
onChange = noop,
|
|
51
54
|
onFocus = noop,
|
|
52
55
|
onBlur = noop,
|
|
56
|
+
fieldValidity,
|
|
57
|
+
showValidityIndication,
|
|
58
|
+
onValidate,
|
|
59
|
+
onValidityChange,
|
|
53
60
|
wix
|
|
54
61
|
} = props;
|
|
55
62
|
const isControlled = props.checked !== void 0;
|
|
63
|
+
const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
|
|
64
|
+
const checked = isControlled ? Boolean(props.checked) : uncontrolledChecked;
|
|
65
|
+
const intrinsic = required && !checked && !disabled && !readOnly ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
|
|
66
|
+
const {
|
|
67
|
+
validity,
|
|
68
|
+
showValidityIndication: showIndication,
|
|
69
|
+
handleBlur: handleValidationBlur
|
|
70
|
+
} = useValidatedField({
|
|
71
|
+
value: checked,
|
|
72
|
+
intrinsic,
|
|
73
|
+
fieldValidity,
|
|
74
|
+
showValidityIndication,
|
|
75
|
+
onValidate,
|
|
76
|
+
onValidityChange
|
|
77
|
+
});
|
|
78
|
+
const isInvalid = showIndication && !validity.valid;
|
|
79
|
+
const handleCheckedChange = (next) => {
|
|
80
|
+
if (!isControlled) {
|
|
81
|
+
setUncontrolledChecked(next);
|
|
82
|
+
}
|
|
83
|
+
onChange(next);
|
|
84
|
+
};
|
|
85
|
+
const handleBlur = (event) => {
|
|
86
|
+
onBlur(event);
|
|
87
|
+
handleValidationBlur();
|
|
88
|
+
};
|
|
56
89
|
const ariaLabel = !label2 ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
|
|
57
90
|
const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
|
|
58
91
|
const rootClassName = clsx(
|
|
@@ -70,94 +103,108 @@ function CheckboxComponent(props) {
|
|
|
70
103
|
dir: direction,
|
|
71
104
|
lang: environmentService.language,
|
|
72
105
|
"data-testid": TestIds.root,
|
|
73
|
-
children: /* @__PURE__ */
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
children: [
|
|
81
|
-
/* @__PURE__ */ jsx(
|
|
82
|
-
Checkbox.Root,
|
|
83
|
-
{
|
|
84
|
-
...isControlled ? { checked: props.checked } : { defaultChecked },
|
|
85
|
-
onCheckedChange: (checked) => onChange(checked),
|
|
86
|
-
required,
|
|
87
|
-
readOnly,
|
|
88
|
-
disabled,
|
|
89
|
-
indeterminate,
|
|
90
|
-
className: clsx(
|
|
91
|
-
styles.control,
|
|
92
|
-
formatClassNames(semanticClassNames.control)
|
|
93
|
-
),
|
|
94
|
-
"data-testid": TestIds.control,
|
|
95
|
-
"aria-label": ariaLabel,
|
|
96
|
-
onFocus,
|
|
97
|
-
onBlur,
|
|
98
|
-
children: /* @__PURE__ */ jsx(
|
|
99
|
-
Checkbox.Indicator,
|
|
100
|
-
{
|
|
101
|
-
keepMounted: true,
|
|
102
|
-
className: clsx(
|
|
103
|
-
styles.indicator,
|
|
104
|
-
selectors.indicator,
|
|
105
|
-
formatClassNames(semanticClassNames.indicator)
|
|
106
|
-
),
|
|
107
|
-
"data-testid": TestIds.indicator,
|
|
108
|
-
children: /* @__PURE__ */ jsx(
|
|
109
|
-
"svg",
|
|
110
|
-
{
|
|
111
|
-
className: styles.checkmark,
|
|
112
|
-
viewBox: "0 0 16 16",
|
|
113
|
-
"aria-hidden": "true",
|
|
114
|
-
focusable: "false",
|
|
115
|
-
children: /* @__PURE__ */ jsx("path", { d: "M6.667 11.333 3.333 8l1.18-1.18 2.154 2.146 4.82-4.819 1.18 1.187z" })
|
|
116
|
-
}
|
|
117
|
-
)
|
|
118
|
-
}
|
|
119
|
-
)
|
|
120
|
-
}
|
|
106
|
+
children: /* @__PURE__ */ jsxs(Field.Root, { className: styles.field, invalid: isInvalid, children: [
|
|
107
|
+
/* @__PURE__ */ jsxs(
|
|
108
|
+
Field.Item,
|
|
109
|
+
{
|
|
110
|
+
className: clsx(
|
|
111
|
+
styles.item,
|
|
112
|
+
formatClassNames(semanticClassNames.root)
|
|
121
113
|
),
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
Checkbox.Root,
|
|
117
|
+
{
|
|
118
|
+
...isControlled ? { checked: props.checked } : { defaultChecked },
|
|
119
|
+
onCheckedChange: handleCheckedChange,
|
|
120
|
+
required,
|
|
121
|
+
readOnly,
|
|
122
|
+
disabled,
|
|
123
|
+
indeterminate,
|
|
124
|
+
className: clsx(
|
|
125
|
+
styles.control,
|
|
126
|
+
formatClassNames(semanticClassNames.control)
|
|
127
|
+
),
|
|
128
|
+
"data-testid": TestIds.control,
|
|
129
|
+
"aria-label": ariaLabel,
|
|
130
|
+
onFocus,
|
|
131
|
+
onBlur: handleBlur,
|
|
132
|
+
children: /* @__PURE__ */ jsx(
|
|
133
|
+
Checkbox.Indicator,
|
|
135
134
|
{
|
|
136
|
-
|
|
137
|
-
|
|
135
|
+
keepMounted: true,
|
|
136
|
+
className: clsx(
|
|
137
|
+
styles.indicator,
|
|
138
|
+
selectors.indicator,
|
|
139
|
+
formatClassNames(semanticClassNames.indicator)
|
|
138
140
|
),
|
|
139
|
-
"data-testid": TestIds.
|
|
141
|
+
"data-testid": TestIds.indicator,
|
|
142
|
+
children: /* @__PURE__ */ jsx(
|
|
143
|
+
"svg",
|
|
144
|
+
{
|
|
145
|
+
className: styles.checkmark,
|
|
146
|
+
viewBox: "0 0 16 16",
|
|
147
|
+
"aria-hidden": "true",
|
|
148
|
+
focusable: "false",
|
|
149
|
+
children: /* @__PURE__ */ jsx("path", { d: "M6.667 11.333 3.333 8l1.18-1.18 2.154 2.146 4.82-4.819 1.18 1.187z" })
|
|
150
|
+
}
|
|
151
|
+
)
|
|
140
152
|
}
|
|
141
153
|
)
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
/* @__PURE__ */ jsx(
|
|
147
|
-
Tooltip.Trigger,
|
|
154
|
+
}
|
|
155
|
+
),
|
|
156
|
+
label2 && /* @__PURE__ */ jsxs(
|
|
157
|
+
Field.Label,
|
|
148
158
|
{
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
159
|
+
className: clsx(
|
|
160
|
+
styles.label,
|
|
161
|
+
selectors.label,
|
|
162
|
+
formatClassNames(semanticClassNames.label)
|
|
163
|
+
),
|
|
164
|
+
"data-testid": TestIds.label,
|
|
165
|
+
children: [
|
|
166
|
+
label2,
|
|
167
|
+
required && /* @__PURE__ */ jsx(
|
|
168
|
+
RequiredIndicator,
|
|
169
|
+
{
|
|
170
|
+
className: formatClassNames(
|
|
171
|
+
semanticClassNames.requiredIndicator
|
|
172
|
+
),
|
|
173
|
+
"data-testid": TestIds.requiredIndicator
|
|
174
|
+
}
|
|
175
|
+
)
|
|
176
|
+
]
|
|
154
177
|
}
|
|
155
178
|
),
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
179
|
+
tooltip2 && /* @__PURE__ */ jsx(Tooltip.Provider, { delay: 0, children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [
|
|
180
|
+
/* @__PURE__ */ jsx(
|
|
181
|
+
Tooltip.Trigger,
|
|
182
|
+
{
|
|
183
|
+
type: "button",
|
|
184
|
+
className: styles.tooltipButton,
|
|
185
|
+
"data-testid": TestIds.tooltipButton,
|
|
186
|
+
"aria-label": tooltip2,
|
|
187
|
+
children: /* @__PURE__ */ jsx(InfoCircleSmall_default, { "aria-hidden": "true" })
|
|
188
|
+
}
|
|
189
|
+
),
|
|
190
|
+
/* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, { sideOffset: 6, children: /* @__PURE__ */ jsx(Tooltip.Popup, { className: styles.tooltip, children: tooltip2 }) }) })
|
|
191
|
+
] }) })
|
|
192
|
+
]
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
|
|
196
|
+
Field.Error,
|
|
197
|
+
{
|
|
198
|
+
match: true,
|
|
199
|
+
className: clsx(
|
|
200
|
+
styles.errorMessage,
|
|
201
|
+
formatClassNames(semanticClassNames.errorMessage)
|
|
202
|
+
),
|
|
203
|
+
"data-testid": TestIds.errorMessage,
|
|
204
|
+
children: validity.validationMessage
|
|
205
|
+
}
|
|
206
|
+
)
|
|
207
|
+
] })
|
|
161
208
|
}
|
|
162
209
|
) });
|
|
163
210
|
}
|
|
@@ -62,6 +62,7 @@ export declare const defaultValues: {
|
|
|
62
62
|
readonly indeterminate: false;
|
|
63
63
|
readonly tooltip: "";
|
|
64
64
|
};
|
|
65
|
+
export declare const VALUE_MISSING_MESSAGE = "This field is required";
|
|
65
66
|
export declare const TestIds: {
|
|
66
67
|
readonly root: "checkbox-root";
|
|
67
68
|
readonly control: "checkbox-control";
|
|
@@ -69,6 +70,7 @@ export declare const TestIds: {
|
|
|
69
70
|
readonly label: "checkbox-label";
|
|
70
71
|
readonly requiredIndicator: "checkbox-required-indicator";
|
|
71
72
|
readonly tooltipButton: "checkbox-tooltip-button";
|
|
73
|
+
readonly errorMessage: "checkbox-error-message";
|
|
72
74
|
};
|
|
73
75
|
export declare const selectors: {
|
|
74
76
|
readonly root: "checkbox";
|
|
@@ -81,4 +83,5 @@ export declare const semanticClassNames: {
|
|
|
81
83
|
readonly indicator: "checkbox__indicator";
|
|
82
84
|
readonly label: "checkbox__label";
|
|
83
85
|
readonly requiredIndicator: "checkbox__required-indicator";
|
|
86
|
+
readonly errorMessage: "checkbox__error-message";
|
|
84
87
|
};
|
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
|
|
8
8
|
.field__R0D8f {
|
|
9
9
|
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
row-gap: 4px;
|
|
10
13
|
}
|
|
11
14
|
|
|
12
15
|
.item__EzhwB {
|
|
@@ -95,14 +98,14 @@
|
|
|
95
98
|
|
|
96
99
|
.control__7-RJh:not([data-checked]):not([data-indeterminate])[data-invalid] .indicator__dzBy2,
|
|
97
100
|
.control__7-RJh:not([data-checked]):not([data-indeterminate]) .indicator__dzBy2.checkbox__indicator--invalid {
|
|
98
|
-
--indicator-border: var(--uncheckedBorderColor, #
|
|
101
|
+
--indicator-border: var(--uncheckedBorderColor, #ff4040);
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
.control__7-RJh[data-checked][data-invalid] .indicator__dzBy2,
|
|
102
105
|
.control__7-RJh[data-indeterminate][data-invalid] .indicator__dzBy2,
|
|
103
106
|
.control__7-RJh[data-checked] .indicator__dzBy2.checkbox__indicator--invalid,
|
|
104
107
|
.control__7-RJh[data-indeterminate] .indicator__dzBy2.checkbox__indicator--invalid {
|
|
105
|
-
--indicator-border: var(--checkedBorderColor, #
|
|
108
|
+
--indicator-border: var(--checkedBorderColor, #ff4040);
|
|
106
109
|
}
|
|
107
110
|
|
|
108
111
|
.checkmark__SY2jU {
|
|
@@ -142,6 +145,11 @@
|
|
|
142
145
|
margin-bottom: 0;
|
|
143
146
|
}
|
|
144
147
|
|
|
148
|
+
.errorMessage__PtMqM {
|
|
149
|
+
font: normal normal normal 12px/1.4em madefor-text, sans-serif;
|
|
150
|
+
color: var(--errorTextColor, #ff4040);
|
|
151
|
+
}
|
|
152
|
+
|
|
145
153
|
.tooltipButton__EXd4N {
|
|
146
154
|
flex: none;
|
|
147
155
|
box-sizing: border-box;
|
|
@@ -174,9 +182,9 @@
|
|
|
174
182
|
.tooltip__Eudyd {
|
|
175
183
|
max-width: 220px;
|
|
176
184
|
padding: 6px 10px;
|
|
177
|
-
font:
|
|
178
|
-
color:
|
|
179
|
-
background:
|
|
185
|
+
font: normal normal normal 12px/1.4em madefor-text, sans-serif;
|
|
186
|
+
color: #fff;
|
|
187
|
+
background: #2b2b2b;
|
|
180
188
|
border-radius: 6px;
|
|
181
189
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
|
182
190
|
}.checkbox {
|
|
@@ -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: "fcdba628-aba7-4d3d-9eac-deeef69fe3fe",
|
|
8
9
|
type: "wixEditorElements.Checkbox__DEV__v3",
|
|
@@ -79,7 +80,8 @@ const manifest = {
|
|
|
79
80
|
dataType: DATA.DATA_TYPE.direction
|
|
80
81
|
},
|
|
81
82
|
...manifestChangeable(),
|
|
82
|
-
...manifestFocusable()
|
|
83
|
+
...manifestFocusable(),
|
|
84
|
+
...manifestValidation({ valueDataType: DATA.DATA_TYPE.booleanValue })
|
|
83
85
|
},
|
|
84
86
|
cssCustomProperties: {
|
|
85
87
|
gap: {
|
|
@@ -56,13 +56,15 @@ const defaultValues = {
|
|
|
56
56
|
indeterminate: false,
|
|
57
57
|
tooltip: ""
|
|
58
58
|
};
|
|
59
|
+
const VALUE_MISSING_MESSAGE = "This field is required";
|
|
59
60
|
const TestIds = {
|
|
60
61
|
root: "checkbox-root",
|
|
61
62
|
control: "checkbox-control",
|
|
62
63
|
indicator: "checkbox-indicator",
|
|
63
64
|
label: "checkbox-label",
|
|
64
65
|
requiredIndicator: "checkbox-required-indicator",
|
|
65
|
-
tooltipButton: "checkbox-tooltip-button"
|
|
66
|
+
tooltipButton: "checkbox-tooltip-button",
|
|
67
|
+
errorMessage: "checkbox-error-message"
|
|
66
68
|
};
|
|
67
69
|
const selectors = {
|
|
68
70
|
root: "checkbox",
|
|
@@ -74,11 +76,13 @@ const semanticClassNames = {
|
|
|
74
76
|
control: "checkbox__control",
|
|
75
77
|
indicator: "checkbox__indicator",
|
|
76
78
|
label: "checkbox__label",
|
|
77
|
-
requiredIndicator: "checkbox__required-indicator"
|
|
79
|
+
requiredIndicator: "checkbox__required-indicator",
|
|
80
|
+
errorMessage: "checkbox__error-message"
|
|
78
81
|
};
|
|
79
82
|
export {
|
|
80
83
|
DesignStates as D,
|
|
81
84
|
TestIds as T,
|
|
85
|
+
VALUE_MISSING_MESSAGE as V,
|
|
82
86
|
semanticClassNames as a,
|
|
83
87
|
DisplayNames as b,
|
|
84
88
|
defaultValues 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.2412.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"@wix/design-system-illustrations": "^2.19.0",
|
|
82
82
|
"@wix/sdk": "^1.21.13",
|
|
83
83
|
"@wix/services-manager-react": "^0.1.27",
|
|
84
|
-
"@wix/site-ui": "1.
|
|
84
|
+
"@wix/site-ui": "1.181.0",
|
|
85
85
|
"@wix/video": "^1.85.0",
|
|
86
86
|
"@wix/viewer-service-consent-policy": "^1.0.100",
|
|
87
87
|
"@wix/web-bi-logger": "^2.1.26",
|
|
@@ -196,5 +196,5 @@
|
|
|
196
196
|
"registry": "https://registry.npmjs.org/",
|
|
197
197
|
"access": "public"
|
|
198
198
|
},
|
|
199
|
-
"falconPackageHash": "
|
|
199
|
+
"falconPackageHash": "7a51f09a003b3c22471d131ac6f241bdac6536ffed1e46cb6637d5f7"
|
|
200
200
|
}
|