@wix/editor-react-components 1.2768.0 → 1.2770.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.
Files changed (35) hide show
  1. package/dist/site/components/AccordionComponent/AccordionItem.d.ts +1 -0
  2. package/dist/site/components/AccordionComponent/component.js +58 -4
  3. package/dist/site/components/AccordionComponent/css.css +1 -0
  4. package/dist/site/components/AccordionComponent/hooks.d.ts +5 -0
  5. package/dist/site/components/AccordionComponent/manifest.js +6 -2
  6. package/dist/site/components/AudioPlayer/component.js +2 -2
  7. package/dist/site/components/Breadcrumbs/component.js +1 -1
  8. package/dist/site/components/DatePicker/DatePicker.types.d.ts +20 -76
  9. package/dist/site/components/DatePicker/component.js +232 -1240
  10. package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts +3 -2
  11. package/dist/site/components/DatePicker/components/DatePickerField.d.ts +1 -3
  12. package/dist/site/components/DatePicker/constants.d.ts +47 -79
  13. package/dist/site/components/DatePicker/css.css +60 -287
  14. package/dist/site/components/DatePicker/datePickerUtils.d.ts +8 -26
  15. package/dist/site/components/DatePicker/manifest.js +234 -207
  16. package/dist/site/components/Menu/component.js +1 -4
  17. package/dist/site/components/Menu/components/MenuContent/MenuItem/updateDropdownDomStyles.d.ts +0 -1
  18. package/dist/site/components/Repeater/component.js +6 -6
  19. package/dist/site/components/TextInput/component.js +2 -2
  20. package/dist/site/components/TimePicker/component.js +350 -3
  21. package/dist/site/components/chunks/Button.js +2 -2
  22. package/dist/site/components/chunks/{DismissSmall.js → DateField.js} +56 -430
  23. package/dist/site/components/chunks/Group.js +44 -44
  24. package/dist/site/components/chunks/I18nProvider.js +1 -1
  25. package/dist/site/components/chunks/Input.js +3 -26
  26. package/dist/site/components/chunks/VisuallyHidden.js +1 -1
  27. package/dist/site/components/chunks/constants37.js +59 -90
  28. package/dist/site/components/chunks/filterDOMProps.js +11 -11
  29. package/dist/site/components/chunks/getWixBannerHeight.js +7 -0
  30. package/package.json +3 -3
  31. package/dist/site/components/DatePicker/components/DatePickerLabel.d.ts +0 -8
  32. package/dist/site/components/DatePicker/components/DatePickerTooltip.d.ts +0 -5
  33. package/dist/site/components/DatePicker/hooks/useDateConstraints.d.ts +0 -12
  34. package/dist/site/components/DatePicker/hooks/useDatePickerValue.d.ts +0 -15
  35. package/dist/site/components/DatePicker/hooks/useUnavailableDates.d.ts +0 -3
@@ -1,6 +1,6 @@
1
- import { H as $c4867b2f328c2698$export$e5c5a5f917a5871c, n as $fe16bffc7a557bf0$export$7f54fc3180508a52, R as $8f5a2122b0992be3$export$8397ddfc504fdb9a, f as $23f2114a1b82827e$export$e58f029f0fbfdb29, S as $0beb20c9744a2065$export$8467354a121f1b9f, T as $390e54f620492c70$export$b4cc09c592e8fdb8, e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, A as $e969f22b6713ca4a$export$ae780daf29e6d456, z as $0c4a58759813079a$export$4e328f61c538687f } from "./Group.js";
1
+ import { K as $c4867b2f328c2698$export$e5c5a5f917a5871c, s as $fe16bffc7a557bf0$export$7f54fc3180508a52, R as $8f5a2122b0992be3$export$8397ddfc504fdb9a, k as $23f2114a1b82827e$export$e58f029f0fbfdb29, S as $0beb20c9744a2065$export$8467354a121f1b9f, T as $390e54f620492c70$export$b4cc09c592e8fdb8, a as $bbaa08b3cd72f041$export$9d1611c77c2fe928, $ as $e969f22b6713ca4a$export$ae780daf29e6d456, E as $0c4a58759813079a$export$4e328f61c538687f } from "./Group.js";
2
2
  import React__default, { useRef, useEffect, useMemo, useContext, useState, createContext, forwardRef } from "react";
3
- import { b as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, f as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./filterDOMProps.js";
3
+ import { c as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, d as $64fa3d84918910a7$export$4d86445c2cf5e3, f as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./filterDOMProps.js";
4
4
  function $860f7da480e22816$export$b8473d3665f3a75a(props, state, ref) {
5
5
  let { validationBehavior, focus } = props;
6
6
  $c4867b2f328c2698$export$e5c5a5f917a5871c(() => {
@@ -223,26 +223,6 @@ function $fd2148440a13ec26$var$isEqualValidation(a, b) {
223
223
  if (a === b) return true;
224
224
  return !!a && !!b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a2, i) => a2 === b.validationErrors[i]) && Object.entries(a.validationDetails).every(([k, v]) => b.validationDetails[k] === v);
225
225
  }
226
- function $fd2148440a13ec26$export$75ee7c75d68f5b0e(...results) {
227
- let errors = /* @__PURE__ */ new Set();
228
- let isInvalid = false;
229
- let validationDetails = {
230
- ...$fd2148440a13ec26$export$aca958c65c314e6c
231
- };
232
- for (let v of results) {
233
- for (let e of v.validationErrors) errors.add(e);
234
- isInvalid || (isInvalid = v.isInvalid);
235
- for (let key in validationDetails) validationDetails[key] || (validationDetails[key] = v.validationDetails[key]);
236
- }
237
- validationDetails.valid = !isInvalid;
238
- return {
239
- isInvalid,
240
- validationErrors: [
241
- ...errors
242
- ],
243
- validationDetails
244
- };
245
- }
246
226
  function $191c9b6d48a0a4e2$export$294aa081a6c6f55d(props) {
247
227
  let { description, errorMessage, isInvalid, validationState } = props;
248
228
  let { labelProps, fieldProps } = $0beb20c9744a2065$export$8467354a121f1b9f(props);
@@ -362,8 +342,5 @@ export {
362
342
  $514c0188e459b4c0$export$9afb8bc826b033ea as g,
363
343
  $ee014567cb39d3f0$export$ff05c3ac10437e03 as h,
364
344
  $3985021b0ad6602f$export$f5b8910cec6cf069 as i,
365
- $fd2148440a13ec26$export$75ee7c75d68f5b0e as j,
366
- $fd2148440a13ec26$export$aca958c65c314e6c as k,
367
- $fd2148440a13ec26$export$a763b9476acd3eb as l,
368
- $fd2148440a13ec26$export$dad6ae84456c676a as m
345
+ $fd2148440a13ec26$export$a763b9476acd3eb as j
369
346
  };
@@ -1,4 +1,4 @@
1
- import { e as $bbaa08b3cd72f041$export$9d1611c77c2fe928, L as $2c9edc598a03d523$export$420e68273165f4ec } from "./Group.js";
1
+ import { a as $bbaa08b3cd72f041$export$9d1611c77c2fe928, N as $2c9edc598a03d523$export$420e68273165f4ec } from "./Group.js";
2
2
  import React__default, { useState, useMemo } from "react";
3
3
  const $ea3928288112382f$var$styles = {
4
4
  border: 0,
@@ -3,92 +3,55 @@ const DisplayNames = {
3
3
  elementDisplayName: "Date Picker",
4
4
  data: {
5
5
  value: "Selected date",
6
- endValue: "Selected end date",
7
- defaultValue: "Default date",
8
- defaultEndValue: "Default end date",
9
- onEndChange: "On End Change",
10
- selectionMode: {
11
- displayName: "Selection",
12
- options: {
13
- single: "Single date",
14
- range: "Date range"
15
- }
16
- },
17
- granularity: {
18
- displayName: "Time precision",
19
- options: {
20
- day: "Date only",
21
- hour: "Date and hour",
22
- minute: "Date and time"
23
- }
24
- },
25
- tooltip: "Tooltip",
6
+ onValueChange: "On Value Change",
26
7
  label: "Label",
27
- description: "Helper text",
28
- minDate: "Earliest date",
29
- maxDate: "Latest date",
30
- unavailableDates: "Unavailable dates",
31
- unavailableFrom: "From",
32
- unavailableTo: "To",
33
- allowPastDates: "Allow past dates",
34
- allowFutureDates: "Allow future dates",
35
- required: "Required",
8
+ helperText: "Helper text",
9
+ errorMessage: "Error message",
36
10
  readOnly: "Read only",
37
- disabled: "Disabled",
38
- clearable: "Show clear button"
11
+ disabled: "Disabled"
12
+ },
13
+ presets: {
14
+ baseDatePicker: "Base Date Picker"
39
15
  },
40
16
  designStates: {
41
17
  hover: "Hover",
42
18
  focus: "Focus",
43
19
  disabled: "Disabled",
44
- selected: "Selected"
20
+ error: "Error",
21
+ selected: "Selected",
22
+ today: "Today"
45
23
  },
46
24
  elements: {
47
25
  label: "Label",
48
- description: "Helper text",
26
+ helperText: "Helper text",
27
+ errorMessage: "Error message",
49
28
  dateInput: "Date input",
50
29
  calendarButton: "Calendar button",
51
30
  popover: "Popover",
52
- calendar: "Calendar",
53
- calendarDay: "Calendar day",
54
- today: "Today"
31
+ calendarHeader: "Calendar header",
32
+ weekdays: "Weekdays",
33
+ dates: "Dates"
34
+ }
35
+ }
36
+ };
37
+ const Descriptions = {
38
+ root: {
39
+ data: {
40
+ value: "This field's current value. Connect it to your context to save the data your visitors provide. A value typed in this panel stays fixed.",
41
+ helperText: "A hint shown under this field, like a format example. It's always visible, so keep it short.",
42
+ errorMessage: "The message shown when this field is invalid. Connect it to your context so it appears only when something's wrong. A message typed in this panel always shows."
55
43
  }
56
44
  }
57
45
  };
58
46
  const defaultValues = {
59
- selectionMode: "single",
60
- granularity: "day",
61
- tooltip: "",
62
47
  label: "",
63
- description: "",
64
- allowPastDates: true,
65
- allowFutureDates: true,
66
- required: false,
48
+ helperText: "",
67
49
  readOnly: false,
68
- disabled: false,
69
- clearable: false
50
+ disabled: false
70
51
  };
71
- var SelectionModeValues = /* @__PURE__ */ ((SelectionModeValues2) => {
72
- SelectionModeValues2["Single"] = "single";
73
- SelectionModeValues2["Range"] = "range";
74
- return SelectionModeValues2;
75
- })(SelectionModeValues || {});
76
- var GranularityValues = /* @__PURE__ */ ((GranularityValues2) => {
77
- GranularityValues2["Day"] = "day";
78
- GranularityValues2["Hour"] = "hour";
79
- GranularityValues2["Minute"] = "minute";
80
- return GranularityValues2;
81
- })(GranularityValues || {});
52
+ const PREVIEW_ERROR_MESSAGE = "Error message";
82
53
  const DesignStates = {
83
54
  root: {
84
- hover: {
85
- displayName: DisplayNames.root.designStates.hover,
86
- className: "datePicker--hover"
87
- },
88
- focus: {
89
- displayName: DisplayNames.root.designStates.focus,
90
- className: "datePicker--focus"
91
- },
92
55
  disabled: {
93
56
  displayName: DisplayNames.root.designStates.disabled,
94
57
  className: "datePicker--disabled"
@@ -97,15 +60,19 @@ const DesignStates = {
97
60
  dateInput: {
98
61
  hover: {
99
62
  displayName: DisplayNames.root.designStates.hover,
100
- className: "datePicker__group--hover"
63
+ className: "datePicker__date-input--hover"
101
64
  },
102
65
  focus: {
103
66
  displayName: DisplayNames.root.designStates.focus,
104
- className: "datePicker__group--focus"
67
+ className: "datePicker__date-input--focus"
68
+ },
69
+ error: {
70
+ displayName: DisplayNames.root.designStates.error,
71
+ className: "datePicker__date-input--error"
105
72
  },
106
73
  disabled: {
107
74
  displayName: DisplayNames.root.designStates.disabled,
108
- className: "datePicker__group--disabled"
75
+ className: "datePicker__date-input--disabled"
109
76
  }
110
77
  },
111
78
  calendarButton: {
@@ -116,67 +83,69 @@ const DesignStates = {
116
83
  selected: {
117
84
  displayName: DisplayNames.root.designStates.selected,
118
85
  className: "datePicker__calendar-button--selected"
86
+ },
87
+ focus: {
88
+ displayName: DisplayNames.root.designStates.focus,
89
+ className: "datePicker__calendar-button--focus"
119
90
  }
120
91
  },
121
- calendarDay: {
92
+ dates: {
122
93
  hover: {
123
94
  displayName: DisplayNames.root.designStates.hover,
124
- className: "datePicker__day--hover"
95
+ className: "datePicker__date--hover"
125
96
  },
126
97
  selected: {
127
98
  displayName: DisplayNames.root.designStates.selected,
128
- className: "datePicker__day--selected"
99
+ className: "datePicker__date--selected"
129
100
  },
130
- disabled: {
131
- displayName: DisplayNames.root.designStates.disabled,
132
- className: "datePicker__day--disabled"
101
+ today: {
102
+ displayName: DisplayNames.root.designStates.today,
103
+ className: "datePicker__date--today"
104
+ },
105
+ focus: {
106
+ displayName: DisplayNames.root.designStates.focus,
107
+ className: "datePicker__date--focus"
133
108
  }
134
109
  }
135
110
  };
136
111
  const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
137
- const EMPTY_VALUE = "";
138
112
  const ARIA_LABEL_NAMESPACE = "ariaLabels";
139
113
  const AriaLabels = {
140
114
  root: { key: "datePicker_aria_label", default: "Date picker" },
141
- clear: { key: "datePicker_clear_button", default: "Clear" },
142
115
  openCalendar: { key: "datePicker_open_calendar", default: "Open calendar" }
143
116
  };
144
117
  const TestIds = {
145
118
  root: "datepicker-root",
146
119
  group: "datepicker-group",
147
120
  field: "datepicker-field",
148
- endField: "datepicker-end-field",
149
121
  calendarButton: "datepicker-calendar-button",
150
- clearButton: "datepicker-clear-button",
151
122
  calendar: "datepicker-calendar",
152
- tooltipButton: "datepicker-tooltip-button",
153
- errorMessage: "datepicker-error-message",
154
- requiredIndicator: "datepicker-required-indicator"
123
+ helperText: "datepicker-helper-text",
124
+ errorMessage: "datepicker-error-message"
155
125
  };
156
126
  const selectors = {
157
127
  root: "datePicker",
158
128
  label: "datePicker__label",
159
- description: "datePicker__description",
160
- requiredIndicator: "datePicker__required-indicator",
161
- group: "datePicker__group",
129
+ helperText: "datePicker__helper-text",
130
+ dateInput: "datePicker__date-input",
131
+ segment: "datePicker__segment",
162
132
  calendarButton: "datePicker__calendar-button",
163
133
  popover: "datePicker__popover",
164
- calendar: "datePicker__calendar",
165
- day: "datePicker__day",
134
+ calendarHeader: "datePicker__calendar-header",
135
+ navButton: "datePicker__nav-button",
136
+ weekday: "datePicker__weekday",
137
+ date: "datePicker__date",
166
138
  errorMessage: "datePicker__error-message"
167
139
  };
168
- const VALUE_MISSING_MESSAGE = "This field is required";
169
140
  export {
170
141
  ARIA_LABEL_NAMESPACE as A,
171
142
  DesignStates as D,
172
- EMPTY_VALUE as E,
173
- GranularityValues as G,
174
143
  PREVIEW_CALENDAR_OPEN as P,
175
- SelectionModeValues as S,
176
144
  TestIds as T,
177
- VALUE_MISSING_MESSAGE as V,
178
145
  AriaLabels as a,
179
146
  DisplayNames as b,
147
+ Descriptions as c,
180
148
  defaultValues as d,
149
+ PREVIEW_ERROR_MESSAGE as e,
181
150
  selectors as s
182
151
  };
@@ -465,17 +465,17 @@ function $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, opts = {}) {
465
465
  return filteredProps;
466
466
  }
467
467
  export {
468
- $8e9d2fae0ecb9001$export$457c3d6518dd4c6f as $,
469
- $f39a9eba43920ace$export$86427a43e3e48ebb as a,
470
- $64fa3d84918910a7$export$29f1550f4b0d4415 as b,
471
- $64fa3d84918910a7$export$fabf2dc03a41866e as c,
472
- $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 as d,
473
- $64fa3d84918910a7$export$ef03459518577ad4 as e,
474
- $64fa3d84918910a7$export$4d86445c2cf5e3 as f,
475
- $65484d02dcb7eb3e$export$457c3d6518dd4c6f as g,
476
- $64fa3d84918910a7$export$2881499e37b75b9a as h,
477
- $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c as i,
478
- $c7eafbbe1ea5834e$export$535bd6ca7f90a273 as j,
468
+ $c7eafbbe1ea5834e$export$535bd6ca7f90a273 as $,
469
+ $8e9d2fae0ecb9001$export$457c3d6518dd4c6f as a,
470
+ $64fa3d84918910a7$export$2881499e37b75b9a as b,
471
+ $64fa3d84918910a7$export$29f1550f4b0d4415 as c,
472
+ $64fa3d84918910a7$export$4d86445c2cf5e3 as d,
473
+ $65484d02dcb7eb3e$export$457c3d6518dd4c6f as e,
474
+ $f39a9eba43920ace$export$86427a43e3e48ebb as f,
475
+ $64fa3d84918910a7$export$fabf2dc03a41866e as g,
476
+ $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 as h,
477
+ $64fa3d84918910a7$export$ef03459518577ad4 as i,
478
+ $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c as j,
479
479
  $df56164dff5785e2$export$4338b53315abf666 as k,
480
480
  $c7eafbbe1ea5834e$export$619500959fc48b26 as l,
481
481
  $f39a9eba43920ace$export$b5d7cc18bb8d2b59 as m,
@@ -0,0 +1,7 @@
1
+ const getWixBannerHeight = () => {
2
+ const cssVarHeight = window.getComputedStyle(document.documentElement).getPropertyValue("--wix-ads-height");
3
+ return Number.parseInt(cssVarHeight, 10) || 0;
4
+ };
5
+ export {
6
+ getWixBannerHeight as g
7
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/editor-react-components",
3
- "version": "1.2768.0",
3
+ "version": "1.2770.0",
4
4
  "description": "React components for the Wix Editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -121,7 +121,7 @@
121
121
  "@wix/component-protocol": "^1.253.0",
122
122
  "@wix/components-infra": "^1.0.0",
123
123
  "@wix/design-system": "^1.297.0",
124
- "@wix/design-system-illustrations": "^2.37.2",
124
+ "@wix/design-system-illustrations": "^2.40.1",
125
125
  "@wix/editor": "^1.726.0",
126
126
  "@wix/editor-elements-scripts": "^1.0.0",
127
127
  "@wix/editor-elements-test-utils": "^1.0.0",
@@ -222,5 +222,5 @@
222
222
  "registry": "https://registry.npmjs.org/",
223
223
  "access": "public"
224
224
  },
225
- "falconPackageHash": "afbba857ef069859ac2a1e7d19bad5e7364a541ca416e236d8c54e4c"
225
+ "falconPackageHash": "74e4b900032554d6ae702f50baf1a873806919dc8951187976791512"
226
226
  }
@@ -1,8 +0,0 @@
1
- import { default as React } from 'react';
2
- export declare const DatePickerLabel: ({ label, tooltip, required, portalContainer, className, }: {
3
- label: string;
4
- tooltip: string;
5
- required: boolean;
6
- portalContainer: HTMLElement | null;
7
- className?: string;
8
- }) => React.JSX.Element | null;
@@ -1,5 +0,0 @@
1
- import { default as React } from 'react';
2
- export declare const DatePickerTooltip: ({ text, portalContainer, }: {
3
- text: string;
4
- portalContainer: HTMLElement | null;
5
- }) => React.JSX.Element;
@@ -1,12 +0,0 @@
1
- import { DateValue } from 'react-aria-components';
2
- import { DatePickerProps } from '../DatePicker.types';
3
- export declare const useDateConstraints: (params: {
4
- minDate: DatePickerProps["minDate"];
5
- maxDate: DatePickerProps["maxDate"];
6
- allowPastDates: boolean;
7
- allowFutureDates: boolean;
8
- withTime: boolean;
9
- }) => {
10
- minValue: DateValue | undefined;
11
- maxValue: DateValue | undefined;
12
- };
@@ -1,15 +0,0 @@
1
- import { DateValue } from 'react-aria-components';
2
- import { DatePickerProps, DateRangeValue } from '../DatePicker.types';
3
- export declare const useDatePickerValue: (params: {
4
- value: DatePickerProps["value"] | undefined;
5
- endValue: DatePickerProps["endValue"];
6
- onChange: NonNullable<DatePickerProps["onChange"]>;
7
- onEndChange: NonNullable<DatePickerProps["onEndChange"]>;
8
- withTime: boolean;
9
- }) => {
10
- dateValue: DateValue | null;
11
- rangeValue: DateRangeValue;
12
- handleSingleChange: (next: DateValue | null) => void;
13
- handleRangeChange: (next: DateRangeValue) => void;
14
- hasValue: (isRange: boolean) => boolean;
15
- };
@@ -1,3 +0,0 @@
1
- import { DateValue } from 'react-aria-components';
2
- import { UnavailableDateRange } from '../DatePicker.types';
3
- export declare const useUnavailableDates: (unavailableDates: ReadonlyArray<UnavailableDateRange> | undefined) => ((date: DateValue) => boolean) | undefined;