@wix/editor-react-components 1.2434.0 → 1.2436.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 +33 -29
- package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts +1 -2
- package/dist/site/components/DatePicker/constants.d.ts +2 -0
- package/dist/site/components/DatePicker/css.css +34 -22
- package/dist/site/components/DatePicker/manifest.js +33 -6
- package/dist/site/components/chunks/constants34.js +2 -0
- package/package.json +3 -3
|
@@ -4226,6 +4226,7 @@ const Date = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg",
|
|
|
4226
4226
|
Date.displayName = "Date";
|
|
4227
4227
|
var Date_default = Date;
|
|
4228
4228
|
const root = "root__l0Qv-";
|
|
4229
|
+
const popover = "popover__JAzkr";
|
|
4229
4230
|
const datePicker = "datePicker__n-7WW";
|
|
4230
4231
|
const labelRow = "labelRow__pUSW5";
|
|
4231
4232
|
const label = "label__YTX1z";
|
|
@@ -4242,7 +4243,6 @@ const clearButton = "clearButton__NdcRh";
|
|
|
4242
4243
|
const clearIcon = "clearIcon__Klxmr";
|
|
4243
4244
|
const calendarButton = "calendarButton__s-QAb";
|
|
4244
4245
|
const calendarIcon = "calendarIcon__CYg1H";
|
|
4245
|
-
const popover = "popover__JAzkr";
|
|
4246
4246
|
const dialog = "dialog__XWvmP";
|
|
4247
4247
|
const calendar = "calendar__dQLez";
|
|
4248
4248
|
const calendarHeader = "calendarHeader__h7CtJ";
|
|
@@ -4253,6 +4253,7 @@ const calendarGrid = "calendarGrid__7hp87";
|
|
|
4253
4253
|
const calendarCell = "calendarCell__Pjcxr";
|
|
4254
4254
|
const styles = {
|
|
4255
4255
|
root,
|
|
4256
|
+
popover,
|
|
4256
4257
|
datePicker,
|
|
4257
4258
|
labelRow,
|
|
4258
4259
|
label,
|
|
@@ -4269,7 +4270,6 @@ const styles = {
|
|
|
4269
4270
|
clearIcon,
|
|
4270
4271
|
calendarButton,
|
|
4271
4272
|
calendarIcon,
|
|
4272
|
-
popover,
|
|
4273
4273
|
dialog,
|
|
4274
4274
|
calendar,
|
|
4275
4275
|
calendarHeader,
|
|
@@ -4470,31 +4470,28 @@ const calendarBody = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
|
4470
4470
|
] }),
|
|
4471
4471
|
/* @__PURE__ */ jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { className: styles.calendarGrid, children: (date) => /* @__PURE__ */ jsx($dfd62f934fc76fed$export$5d847498420df57b, { date, className: dayClassName }) })
|
|
4472
4472
|
] });
|
|
4473
|
-
const DatePickerCalendar = ({
|
|
4474
|
-
|
|
4475
|
-
|
|
4476
|
-
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
4481
|
-
|
|
4482
|
-
|
|
4483
|
-
|
|
4484
|
-
|
|
4485
|
-
|
|
4486
|
-
|
|
4487
|
-
|
|
4488
|
-
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
}
|
|
4496
|
-
) })
|
|
4497
|
-
}
|
|
4473
|
+
const DatePickerCalendar = ({ isRange }) => {
|
|
4474
|
+
return (
|
|
4475
|
+
// Portals to <body> (react-aria default) so the calendar escapes the page
|
|
4476
|
+
// section's stacking context — otherwise the section below paints over the
|
|
4477
|
+
// part of the popover that overflows past it. The theme CSS vars are applied
|
|
4478
|
+
// to `.popover` directly (see defaults.css) since it no longer inherits them
|
|
4479
|
+
// from the root; `dir`/locale still flow through the React portal.
|
|
4480
|
+
/* @__PURE__ */ jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: clsx(styles.popover, selectors.popover), children: /* @__PURE__ */ jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: styles.dialog, children: isRange ? /* @__PURE__ */ jsx(
|
|
4481
|
+
$dfd62f934fc76fed$export$a4f5c8b89d277a8d,
|
|
4482
|
+
{
|
|
4483
|
+
className: clsx(styles.calendar, selectors.calendar),
|
|
4484
|
+
"data-testid": TestIds.calendar,
|
|
4485
|
+
children: calendarBody
|
|
4486
|
+
}
|
|
4487
|
+
) : /* @__PURE__ */ jsx(
|
|
4488
|
+
$dfd62f934fc76fed$export$e1aef45b828286de,
|
|
4489
|
+
{
|
|
4490
|
+
className: clsx(styles.calendar, selectors.calendar),
|
|
4491
|
+
"data-testid": TestIds.calendar,
|
|
4492
|
+
children: calendarBody
|
|
4493
|
+
}
|
|
4494
|
+
) }) })
|
|
4498
4495
|
);
|
|
4499
4496
|
};
|
|
4500
4497
|
const DatePickerTooltip = ({
|
|
@@ -4663,7 +4660,14 @@ function DatePicker2(props) {
|
|
|
4663
4660
|
calendarButtonLabel: t(AriaLabels.openCalendar)
|
|
4664
4661
|
}
|
|
4665
4662
|
),
|
|
4666
|
-
description2 ? /* @__PURE__ */ jsx(
|
|
4663
|
+
description2 ? /* @__PURE__ */ jsx(
|
|
4664
|
+
$514c0188e459b4c0$export$5f1af8db9871e1d6,
|
|
4665
|
+
{
|
|
4666
|
+
slot: "description",
|
|
4667
|
+
className: clsx(styles.description, selectors.description),
|
|
4668
|
+
children: description2
|
|
4669
|
+
}
|
|
4670
|
+
) : null,
|
|
4667
4671
|
isInvalid && validity.validationMessage ? /* @__PURE__ */ jsx(
|
|
4668
4672
|
$ee014567cb39d3f0$export$f551688fc98f2e09,
|
|
4669
4673
|
{
|
|
@@ -4672,7 +4676,7 @@ function DatePicker2(props) {
|
|
|
4672
4676
|
children: validity.validationMessage
|
|
4673
4677
|
}
|
|
4674
4678
|
) : null,
|
|
4675
|
-
/* @__PURE__ */ jsx(DatePickerCalendar, { isRange
|
|
4679
|
+
/* @__PURE__ */ jsx(DatePickerCalendar, { isRange })
|
|
4676
4680
|
] });
|
|
4677
4681
|
const sharedProps = {
|
|
4678
4682
|
granularity,
|
|
@@ -45,6 +45,7 @@ export declare const DisplayNames: {
|
|
|
45
45
|
};
|
|
46
46
|
elements: {
|
|
47
47
|
label: string;
|
|
48
|
+
description: string;
|
|
48
49
|
dateInput: string;
|
|
49
50
|
calendarButton: string;
|
|
50
51
|
popover: string;
|
|
@@ -173,6 +174,7 @@ export declare const TestIds: {
|
|
|
173
174
|
export declare const selectors: {
|
|
174
175
|
readonly root: "datePicker";
|
|
175
176
|
readonly label: "datePicker__label";
|
|
177
|
+
readonly description: "datePicker__description";
|
|
176
178
|
readonly requiredIndicator: "datePicker__required-indicator";
|
|
177
179
|
readonly group: "datePicker__group";
|
|
178
180
|
readonly calendarButton: "datePicker__calendar-button";
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/* Applied to `.popover` too because the calendar is portaled to <body> (to escape
|
|
2
|
+
section stacking), where it no longer inherits these vars from `.root`. */
|
|
3
|
+
.root__l0Qv-,
|
|
4
|
+
.popover__JAzkr {
|
|
2
5
|
--font: var(
|
|
3
6
|
--wst-paragraph-2-font,
|
|
4
7
|
normal normal normal 16px/1.5em madefor-text,
|
|
@@ -19,13 +22,7 @@
|
|
|
19
22
|
);
|
|
20
23
|
--label-text-color: var(--wst-paragraph-2-color, #2b2b2b);
|
|
21
24
|
|
|
22
|
-
--field-background-color: var(--wst-primary-background-color, #ffffff);
|
|
23
25
|
--borderColor: var(--wst-system-line-1-color, #dfe5eb);
|
|
24
|
-
--borderWidth: 1px;
|
|
25
|
-
--borderStartStartRadius: 6px;
|
|
26
|
-
--borderStartEndRadius: 6px;
|
|
27
|
-
--borderEndStartRadius: 6px;
|
|
28
|
-
--borderEndEndRadius: 6px;
|
|
29
26
|
|
|
30
27
|
--selected-date-background-color: var(--wst-links-and-actions-color, #116dff);
|
|
31
28
|
--selected-date-text-color: var(--wst-primary-background-color, #ffffff);
|
|
@@ -57,9 +54,9 @@
|
|
|
57
54
|
}
|
|
58
55
|
.root__l0Qv- {
|
|
59
56
|
box-sizing: border-box;
|
|
60
|
-
display:
|
|
57
|
+
display: flex;
|
|
61
58
|
flex-direction: column;
|
|
62
|
-
min-width:
|
|
59
|
+
min-width: 0;
|
|
63
60
|
max-width: 100%;
|
|
64
61
|
font: var(--font);
|
|
65
62
|
color: var(--text-color);
|
|
@@ -67,17 +64,23 @@
|
|
|
67
64
|
.datePicker__n-7WW {
|
|
68
65
|
display: flex;
|
|
69
66
|
flex-direction: column;
|
|
67
|
+
min-width: 0;
|
|
70
68
|
}
|
|
71
69
|
.labelRow__pUSW5 {
|
|
72
70
|
display: flex;
|
|
73
|
-
align-items:
|
|
71
|
+
align-items: flex-start;
|
|
74
72
|
gap: 6px;
|
|
75
73
|
margin: 0 0 6px;
|
|
74
|
+
min-width: 0;
|
|
76
75
|
}
|
|
77
76
|
.label__YTX1z {
|
|
78
77
|
margin: 0;
|
|
78
|
+
min-width: 0;
|
|
79
|
+
max-width: 100%;
|
|
79
80
|
font: var(--labelFont);
|
|
80
81
|
color: var(--label-text-color);
|
|
82
|
+
overflow-wrap: break-word;
|
|
83
|
+
word-break: break-word;
|
|
81
84
|
}
|
|
82
85
|
.tooltipButton__4-ns8 {
|
|
83
86
|
flex: none;
|
|
@@ -119,19 +122,24 @@
|
|
|
119
122
|
box-sizing: border-box;
|
|
120
123
|
display: flex;
|
|
121
124
|
align-items: center;
|
|
122
|
-
gap: 8px;
|
|
123
125
|
width: 100%;
|
|
124
|
-
|
|
126
|
+
column-gap: 8px;
|
|
127
|
+
padding-top: 8px;
|
|
128
|
+
padding-bottom: 8px;
|
|
129
|
+
padding-inline-start: 12px;
|
|
130
|
+
padding-inline-end: 12px;
|
|
125
131
|
font: inherit;
|
|
126
132
|
color: inherit;
|
|
127
|
-
background: var(--
|
|
128
|
-
|
|
129
|
-
border-
|
|
130
|
-
border-
|
|
131
|
-
border-
|
|
132
|
-
border-
|
|
133
|
-
border-
|
|
134
|
-
border-
|
|
133
|
+
background: var(--wst-primary-background-color, #ffffff);
|
|
134
|
+
box-shadow: none;
|
|
135
|
+
border-top: 1px solid var(--borderColor);
|
|
136
|
+
border-bottom: 1px solid var(--borderColor);
|
|
137
|
+
border-inline-start: 1px solid var(--borderColor);
|
|
138
|
+
border-inline-end: 1px solid var(--borderColor);
|
|
139
|
+
border-start-start-radius: 6px;
|
|
140
|
+
border-start-end-radius: 6px;
|
|
141
|
+
border-end-start-radius: 6px;
|
|
142
|
+
border-end-end-radius: 6px;
|
|
135
143
|
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
|
136
144
|
}
|
|
137
145
|
.group__2UIvk:focus-within {
|
|
@@ -158,6 +166,7 @@
|
|
|
158
166
|
flex: 1;
|
|
159
167
|
min-width: 0;
|
|
160
168
|
gap: 1px;
|
|
169
|
+
overflow: hidden;
|
|
161
170
|
font: inherit;
|
|
162
171
|
color: inherit;
|
|
163
172
|
white-space: nowrap;
|
|
@@ -253,6 +262,8 @@
|
|
|
253
262
|
}
|
|
254
263
|
.popover__JAzkr {
|
|
255
264
|
box-sizing: border-box;
|
|
265
|
+
font: var(--font);
|
|
266
|
+
color: var(--text-color);
|
|
256
267
|
background: var(--calendar-background-color);
|
|
257
268
|
border: 1px solid var(--borderColor);
|
|
258
269
|
border-radius: 8px;
|
|
@@ -315,10 +326,11 @@
|
|
|
315
326
|
}
|
|
316
327
|
.calendarCell__Pjcxr {
|
|
317
328
|
box-sizing: border-box;
|
|
329
|
+
display: flex;
|
|
330
|
+
align-items: center;
|
|
331
|
+
justify-content: center;
|
|
318
332
|
width: 34px;
|
|
319
333
|
height: 34px;
|
|
320
|
-
text-align: center;
|
|
321
|
-
vertical-align: middle;
|
|
322
334
|
border-radius: 8px;
|
|
323
335
|
font-size: 13px;
|
|
324
336
|
outline: none;
|
|
@@ -34,6 +34,26 @@ const boxPadding = {
|
|
|
34
34
|
paddingInlineStart: {},
|
|
35
35
|
paddingInlineEnd: {}
|
|
36
36
|
};
|
|
37
|
+
const fieldBorder = "1px solid var(--wst-system-line-1-color, #dfe5eb)";
|
|
38
|
+
const dateInputCssProperties = {
|
|
39
|
+
background: {
|
|
40
|
+
defaultValue: "var(--wst-primary-background-color, #ffffff)"
|
|
41
|
+
},
|
|
42
|
+
boxShadow: { defaultValue: "none" },
|
|
43
|
+
columnGap: { defaultValue: "8px" },
|
|
44
|
+
borderTop: { defaultValue: fieldBorder },
|
|
45
|
+
borderBottom: { defaultValue: fieldBorder },
|
|
46
|
+
borderInlineStart: { defaultValue: fieldBorder },
|
|
47
|
+
borderInlineEnd: { defaultValue: fieldBorder },
|
|
48
|
+
borderStartStartRadius: { defaultValue: "6px" },
|
|
49
|
+
borderStartEndRadius: { defaultValue: "6px" },
|
|
50
|
+
borderEndStartRadius: { defaultValue: "6px" },
|
|
51
|
+
borderEndEndRadius: { defaultValue: "6px" },
|
|
52
|
+
paddingTop: { defaultValue: "8px" },
|
|
53
|
+
paddingBottom: { defaultValue: "8px" },
|
|
54
|
+
paddingInlineStart: { defaultValue: "12px" },
|
|
55
|
+
paddingInlineEnd: { defaultValue: "12px" }
|
|
56
|
+
};
|
|
37
57
|
const manifest = {
|
|
38
58
|
id: "293335cb-3dd0-4747-95dd-8903894beab0",
|
|
39
59
|
type: "wixEditorElements.DatePicker__DEV__v3",
|
|
@@ -69,18 +89,22 @@ const manifest = {
|
|
|
69
89
|
cssProperties: { font: {}, color: {} }
|
|
70
90
|
}
|
|
71
91
|
},
|
|
92
|
+
description: {
|
|
93
|
+
elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
|
|
94
|
+
inlineElement: {
|
|
95
|
+
displayName: DisplayNames.root.elements.description,
|
|
96
|
+
selector: getSelector(selectors.description),
|
|
97
|
+
behaviors: { selectable: false },
|
|
98
|
+
cssProperties: { font: {}, color: {} }
|
|
99
|
+
}
|
|
100
|
+
},
|
|
72
101
|
dateInput: {
|
|
73
102
|
elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
|
|
74
103
|
inlineElement: {
|
|
75
104
|
displayName: DisplayNames.root.elements.dateInput,
|
|
76
105
|
selector: getSelector(selectors.group),
|
|
77
106
|
behaviors: { selectable: false },
|
|
78
|
-
cssProperties:
|
|
79
|
-
background: {},
|
|
80
|
-
columnGap: {},
|
|
81
|
-
...boxBorder,
|
|
82
|
-
...boxPadding
|
|
83
|
-
},
|
|
107
|
+
cssProperties: dateInputCssProperties,
|
|
84
108
|
states: {
|
|
85
109
|
hover: designState(DesignStates.dateInput.hover),
|
|
86
110
|
focus: designState(DesignStates.dateInput.focus),
|
|
@@ -353,6 +377,9 @@ const manifest = {
|
|
|
353
377
|
displayFilters: {
|
|
354
378
|
states: {
|
|
355
379
|
hide: [PREVIEW_CALENDAR_OPEN]
|
|
380
|
+
},
|
|
381
|
+
actions: {
|
|
382
|
+
hide: ["manageItems"]
|
|
356
383
|
}
|
|
357
384
|
},
|
|
358
385
|
cssProperties
|
|
@@ -45,6 +45,7 @@ const DisplayNames = {
|
|
|
45
45
|
},
|
|
46
46
|
elements: {
|
|
47
47
|
label: "Label",
|
|
48
|
+
description: "Helper text",
|
|
48
49
|
dateInput: "Date input",
|
|
49
50
|
calendarButton: "Calendar button",
|
|
50
51
|
popover: "Popover",
|
|
@@ -155,6 +156,7 @@ const TestIds = {
|
|
|
155
156
|
const selectors = {
|
|
156
157
|
root: "datePicker",
|
|
157
158
|
label: "datePicker__label",
|
|
159
|
+
description: "datePicker__description",
|
|
158
160
|
requiredIndicator: "datePicker__required-indicator",
|
|
159
161
|
group: "datePicker__group",
|
|
160
162
|
calendarButton: "datePicker__calendar-button",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2436.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"@wix/sdk": "^1.21.13",
|
|
83
83
|
"@wix/services-manager-react": "^0.1.27",
|
|
84
84
|
"@wix/site-service-rendering-context": "^1.0.1",
|
|
85
|
-
"@wix/site-ui": "1.
|
|
85
|
+
"@wix/site-ui": "1.190.0",
|
|
86
86
|
"@wix/video": "^1.85.0",
|
|
87
87
|
"@wix/viewer-service-consent-policy": "^1.0.100",
|
|
88
88
|
"@wix/web-bi-logger": "^2.1.26",
|
|
@@ -197,5 +197,5 @@
|
|
|
197
197
|
"registry": "https://registry.npmjs.org/",
|
|
198
198
|
"access": "public"
|
|
199
199
|
},
|
|
200
|
-
"falconPackageHash": "
|
|
200
|
+
"falconPackageHash": "d82d11b87fcf12780a9013df58b95f5dabccd3ac2828ca6e58fa3e19"
|
|
201
201
|
}
|