@wix/editor-react-components 1.2769.0 → 1.2771.0

package/dist/site/components/DatePicker/components/DatePickerCalendar.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { DatePickerElementProps } from '../DatePicker.types';
-export declare const DatePickerCalendar: ({ isRange, elementProps, }: {
-    isRange: boolean;
+export declare const DatePickerCalendar: ({ portalContainer, isPreviewOpen, elementProps, }: {
+    portalContainer: HTMLElement | null;
+    isPreviewOpen?: boolean;
     elementProps?: DatePickerElementProps;
 }) => React.JSX.Element;

package/dist/site/components/DatePicker/components/DatePickerField.d.ts

@@ -1,7 +1,5 @@
 import { default as React } from 'react';
-export declare const DatePickerField: ({ isRange, clearButton, calendarButtonLabel, elementProps, }: {
-    isRange: boolean;
-    clearButton: React.ReactNode;
+export declare const DatePickerField: ({ calendarButtonLabel, elementProps, }: {
     calendarButtonLabel: string;
     elementProps?: {
         dateInput?: {

package/dist/site/components/DatePicker/constants.d.ts

@@ -3,81 +3,54 @@ export declare const DisplayNames: {
         elementDisplayName: string;
         data: {
             value: string;
-            endValue: string;
-            defaultValue: string;
-            defaultEndValue: string;
-            onEndChange: string;
-            selectionMode: {
-                displayName: string;
-                options: {
-                    single: string;
-                    range: string;
-                };
-            };
-            granularity: {
-                displayName: string;
-                options: {
-                    day: string;
-                    hour: string;
-                    minute: string;
-                };
-            };
-            tooltip: string;
+            onValueChange: string;
             label: string;
-            description: string;
-            minDate: string;
-            maxDate: string;
-            unavailableDates: string;
-            unavailableFrom: string;
-            unavailableTo: string;
-            allowPastDates: string;
-            allowFutureDates: string;
-            required: string;
+            helperText: string;
+            errorMessage: string;
             readOnly: string;
             disabled: string;
-            clearable: string;
+        };
+        presets: {
+            baseDatePicker: string;
         };
         designStates: {
             hover: string;
             focus: string;
             disabled: string;
+            error: string;
             selected: string;
+            today: string;
         };
         elements: {
             label: string;
-            description: string;
+            helperText: string;
+            errorMessage: string;
             dateInput: string;
             calendarButton: string;
             popover: string;
-            calendar: string;
-            calendarDay: string;
-            today: string;
+            calendarHeader: string;
+            weekdays: string;
+            dates: string;
+        };
+    };
+};
+export declare const Descriptions: {
+    root: {
+        data: {
+            value: string;
+            helperText: string;
+            errorMessage: string;
         };
     };
 };
 export declare const defaultValues: {
-    readonly selectionMode: "single";
-    readonly granularity: "day";
-    readonly tooltip: "";
     readonly label: "";
-    readonly description: "";
-    readonly allowPastDates: true;
-    readonly allowFutureDates: true;
-    readonly required: false;
+    readonly helperText: "";
     readonly readOnly: false;
     readonly disabled: false;
-    readonly clearable: false;
 };
-export declare const enum SelectionModeValues {
-    Single = "single",
-    Range = "range"
-}
-/** React Aria `granularity`: the smallest editable time unit. */
-export declare const enum GranularityValues {
-    Day = "day",
-    Hour = "hour",
-    Minute = "minute"
-}
+/** Shown on stage while the Error design state is selected. */
+export declare const PREVIEW_ERROR_MESSAGE = "Error message";
 /**
  * Design states. Wired in the manifest via `withSpec(IS_SUPPORT_DESIGN_STATE_SPEC)`
  * so they stay inert until the Conductor spec is declared. BEM classNames are the
@@ -85,14 +58,6 @@ export declare const enum GranularityValues {
  */
 export declare const DesignStates: {
     root: {
-        hover: {
-            displayName: string;
-            className: string;
-        };
-        focus: {
-            displayName: string;
-            className: string;
-        };
         disabled: {
             displayName: string;
             className: string;
@@ -107,6 +72,10 @@ export declare const DesignStates: {
             displayName: string;
             className: string;
         };
+        error: {
+            displayName: string;
+            className: string;
+        };
         disabled: {
             displayName: string;
             className: string;
@@ -121,8 +90,12 @@ export declare const DesignStates: {
             displayName: string;
             className: string;
         };
+        focus: {
+            displayName: string;
+            className: string;
+        };
     };
-    calendarDay: {
+    dates: {
         hover: {
             displayName: string;
             className: string;
@@ -131,15 +104,17 @@ export declare const DesignStates: {
             displayName: string;
             className: string;
         };
-        disabled: {
+        today: {
+            displayName: string;
+            className: string;
+        };
+        focus: {
             displayName: string;
             className: string;
         };
     };
 };
 export declare const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
-/** The value that represents "no date selected". */
-export declare const EMPTY_VALUE = "";
 export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
 /**
  * Viewer-facing aria labels: each entry is a translation `key` plus an English
@@ -150,10 +125,6 @@ export declare const AriaLabels: {
         readonly key: "datePicker_aria_label";
         readonly default: "Date picker";
     };
-    readonly clear: {
-        readonly key: "datePicker_clear_button";
-        readonly default: "Clear";
-    };
     readonly openCalendar: {
         readonly key: "datePicker_open_calendar";
         readonly default: "Open calendar";
@@ -163,25 +134,22 @@ export declare const TestIds: {
     readonly root: "datepicker-root";
     readonly group: "datepicker-group";
     readonly field: "datepicker-field";
-    readonly endField: "datepicker-end-field";
     readonly calendarButton: "datepicker-calendar-button";
-    readonly clearButton: "datepicker-clear-button";
     readonly calendar: "datepicker-calendar";
-    readonly tooltipButton: "datepicker-tooltip-button";
+    readonly helperText: "datepicker-helper-text";
     readonly errorMessage: "datepicker-error-message";
-    readonly requiredIndicator: "datepicker-required-indicator";
 };
 export declare const selectors: {
     readonly root: "datePicker";
     readonly label: "datePicker__label";
-    readonly description: "datePicker__description";
-    readonly requiredIndicator: "datePicker__required-indicator";
-    readonly group: "datePicker__group";
+    readonly helperText: "datePicker__helper-text";
+    readonly dateInput: "datePicker__date-input";
+    readonly segment: "datePicker__segment";
     readonly calendarButton: "datePicker__calendar-button";
     readonly popover: "datePicker__popover";
-    readonly calendar: "datePicker__calendar";
-    readonly day: "datePicker__day";
+    readonly calendarHeader: "datePicker__calendar-header";
+    readonly navButton: "datePicker__nav-button";
+    readonly weekday: "datePicker__weekday";
+    readonly date: "datePicker__date";
     readonly errorMessage: "datePicker__error-message";
 };
-/** Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO). */
-export declare const VALUE_MISSING_MESSAGE = "This field is required";

package/dist/site/components/DatePicker/css.css

@@ -1,374 +1,147 @@
-/* Applied to `.popover` too because the calendar is portaled to <body> (to escape
-   section stacking), where it no longer inherits these vars from `.root`. */
-.root__l0Qv-,
-.popover__JAzkr {
-  --font: var(
-    --wst-paragraph-2-font,
-    normal normal normal 16px/1.5em madefor-text,
-    helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh,
-    helveticaneuew10-45ligh,
-    sans-serif
-  );
-  --text-color: var(--wst-paragraph-2-color, #2b2b2b);
-
-  --labelFont: var(
-    --wst-paragraph-2-font,
-    normal normal normal 14px/1.4em madefor-text,
-    helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh,
-    helveticaneuew10-45ligh,
-    sans-serif
-  );
-  --label-text-color: var(--wst-paragraph-2-color, #2b2b2b);
-
-  --borderColor: var(--wst-system-line-1-color, #dfe5eb);
-
-  --selected-date-background-color: var(--wst-links-and-actions-color, #116dff);
-  --selected-date-text-color: var(--wst-primary-background-color, #ffffff);
-  --day-hover-background-color: var(--wst-shade-3-color, #f0f4f7);
-  --calendar-background-color: var(--wst-primary-background-color, #ffffff);
-
-  --today-background-color: transparent;
-  --today-outline-color: var(--wst-links-and-actions-color, #116dff);
-  --today-text-color: var(--wst-links-and-actions-color, #116dff);
-
-  --description-font: var(
-    --wst-paragraph-2-font,
-    400 12px/1.4 'Helvetica Neue',
-    Arial,
-    sans-serif
-  );
-  --description-text-color: var(--wst-paragraph-2-color, #2b2b2b);
-
-  --tooltip-font: var(
-    --wst-paragraph-2-font,
-    400 12px/1.4 'Helvetica Neue',
-    Arial,
-    sans-serif
-  );
-  --tooltip-text-color: var(--wst-primary-background-color, #ffffff);
-  --tooltip-background-color: var(--wst-paragraph-2-color, #2b2b2b);
-
-  --accent-color: var(--selected-date-background-color);
-}
 .root__l0Qv- {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-width: 0;
+  min-width: min-content !important;
   max-width: 100%;
-  font: var(--font);
-  color: var(--text-color);
 }
+
 .datePicker__n-7WW {
   display: flex;
   flex-direction: column;
-  min-width: 0;
 }
-.labelRow__pUSW5 {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  margin: 0 0 6px;
-  min-width: 0;
+.datePicker__n-7WW[data-disabled] {
+  cursor: not-allowed;
 }
-.label__YTX1z {
-  margin: 0;
+
+.label__YTX1z,
+.helperText__CKn-5,
+.errorMessage__b9Pp3 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
   min-width: 0;
   max-width: 100%;
-  font: var(--labelFont);
-  color: var(--label-text-color);
   overflow-wrap: break-word;
   word-break: break-word;
 }
-.tooltipButton__4-ns8 {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--label-text-color);
-  cursor: pointer;
-  opacity: 0.65;
-}
-.tooltipButton__4-ns8[data-hovered], .tooltipButton__4-ns8[data-focus-visible] {
-  opacity: 1;
-}
-.tooltipButton__4-ns8[data-focus-visible] {
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px var(--accent-color);
-}
-.infoIcon__zyj7w {
-  width: 16px;
-  height: 16px;
-}
-.tooltip__-Jo2K {
-  max-width: 220px;
-  padding: 6px 10px;
-  font: var(--tooltip-font);
-  color: var(--tooltip-text-color);
-  background: var(--tooltip-background-color);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
-}
+
 .group__2UIvk {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   width: 100%;
-  column-gap: 8px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-inline-start: 12px;
-  padding-inline-end: 12px;
-  font: inherit;
-  color: inherit;
-  background: var(--wst-primary-background-color, #ffffff);
-  box-shadow: none;
-  border-top: 1px solid var(--borderColor);
-  border-bottom: 1px solid var(--borderColor);
-  border-inline-start: 1px solid var(--borderColor);
-  border-inline-end: 1px solid var(--borderColor);
-  border-start-start-radius: 6px;
-  border-start-end-radius: 6px;
-  border-end-start-radius: 6px;
-  border-end-end-radius: 6px;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-.group__2UIvk:focus-within {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 1px var(--accent-color);
-}
-.group__2UIvk:hover:not(:focus-within) {
-  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
-}
-.datePicker--hover .group__2UIvk {
-  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
-}
-.datePicker--focus .group__2UIvk {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 1px var(--accent-color);
-}
-.datePicker__n-7WW[data-disabled],
-.datePicker--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
 }
+
 .field__lHZ2g {
   display: inline-flex;
   flex: 1;
-  min-width: 0;
-  gap: 1px;
-  overflow: hidden;
-  font: inherit;
-  color: inherit;
   white-space: nowrap;
 }
-.rangeSeparator__jAkz- {
-  flex: none;
-  padding: 0 4px;
-  opacity: 0.6;
-}
-.description__nmlkW {
-  margin-top: 4px;
-  font: var(--description-font);
-  color: var(--description-text-color);
-  opacity: 0.7;
-}
-.errorMessage__b9Pp3 {
-  margin-top: 4px;
-  font: var(--description-font);
-  color: var(--errorColor, var(--wst-error-color, #e21c21));
-}
+
 .segment__w-IAO {
-  padding: 0 2px;
-  border-radius: 3px;
   font-variant-numeric: tabular-nums;
   text-align: center;
-  outline: none;
-}
-.segment__w-IAO[data-type=literal] {
-  padding: 0;
-  opacity: 0.5;
 }
-.segment__w-IAO[data-placeholder] {
-  color: color-mix(in srgb, currentColor 45%, transparent);
-}
-.segment__w-IAO[data-focused] {
-  background: var(--accent-color);
-  color: var(--selected-date-text-color);
+
+.datePicker__label,
+.datePicker__helper-text,
+.datePicker__error-message,
+.datePicker__date-input,
+.datePicker__calendar-header,
+.datePicker__weekday,
+.datePicker__date {
+  text-shadow: var(--text-shadow);
 }
-.clearButton__NdcRh {
+
+.calendarButton__s-QAb,
+.navButton__5nJy7 {
   flex: none;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
   margin: 0;
   padding: 0;
   border: none;
-  border-radius: 6px;
   background: transparent;
   color: inherit;
   cursor: pointer;
-  transition: background 0.15s ease;
 }
-.clearButton__NdcRh:hover {
-  background: var(--day-hover-background-color);
+.calendarButton__s-QAb[data-disabled],
+.navButton__5nJy7[data-disabled] {
+  cursor: default;
 }
-.clearIcon__Klxmr {
-  width: 18px;
-  height: 18px;
+
+.calendarIcon__CYg1H {
+  width: 20px;
+  height: 20px;
 }
+
 .calendarButton__s-QAb {
-  flex: none;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
   width: 28px;
   height: 28px;
-  margin: 0;
-  padding: 0;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  transition: background 0.15s ease;
 }
-.calendarButton__s-QAb[data-hovered], .calendarButton__s-QAb[data-pressed] {
-  background: var(--day-hover-background-color);
-}
-.calendarButton__s-QAb[data-focus-visible] {
-  box-shadow: 0 0 0 2px var(--accent-color);
+
+.navButton__5nJy7 {
+  font: inherit;
+  width: 1.5em;
+  height: 1.5em;
 }
-.calendarButton__s-QAb[data-disabled] {
-  cursor: default;
-  opacity: 0.5;
+
+.navIcon__LkD1n {
+  width: 1.5em;
+  height: 1.5em;
 }
-.calendarIcon__CYg1H {
-  width: 20px;
-  height: 20px;
+
+.positioner__38UDd {
+  box-sizing: border-box;
 }
+
 .popover__JAzkr {
   box-sizing: border-box;
-  font: var(--font);
-  color: var(--text-color);
-  background: var(--calendar-background-color);
-  border: 1px solid var(--borderColor);
-  border-radius: 8px;
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-}
-.dialog__XWvmP {
   outline: none;
 }
+
 .calendar__dQLez {
   box-sizing: border-box;
-  padding: 12px;
-  color: inherit;
 }
+
 .calendarHeader__h7CtJ {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
   margin-bottom: 8px;
 }
-.calendarHeading__JLdsJ {
+
+:where(.calendarHeading__JLdsJ) {
   margin: 0;
-  font-size: 14px;
-  font-weight: 600;
-}
-.navButton__5nJy7 {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-.navButton__5nJy7[data-hovered] {
-  background: var(--day-hover-background-color);
-}
-.navButton__5nJy7[data-disabled] {
-  cursor: default;
-  opacity: 0.4;
-}
-.navIcon__LkD1n {
-  width: 18px;
-  height: 18px;
+  font: inherit;
 }
+
 .calendarGrid__7hp87 {
   border-collapse: collapse;
 }
-.calendarGrid__7hp87 th {
-  padding: 6px 0;
-  font-size: 12px;
-  font-weight: 500;
-  color: color-mix(in srgb, currentColor 55%, transparent);
-}
+
 .calendarCell__Pjcxr {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
-  border-radius: 8px;
-  font-size: 13px;
-  outline: none;
+  min-width: 34px;
+  min-height: 34px;
+  width: 1.5em;
+  height: 1.5em;
   cursor: pointer;
 }
 .calendarCell__Pjcxr[data-outside-month] {
   display: none;
 }
-.calendarCell__Pjcxr[data-today] {
-  background: var(--today-background-color);
-  color: var(--today-text-color);
-  box-shadow: inset 0 0 0 1.5px var(--today-outline-color);
-}
-.calendarCell__Pjcxr[data-hovered] {
-  background: var(--day-hover-background-color);
-}
-.calendarCell__Pjcxr[data-selected] {
-  background: var(--accent-color);
-  color: var(--selected-date-text-color);
-}
-.calendarCell__Pjcxr[data-disabled], .calendarCell__Pjcxr[data-unavailable] {
-  color: color-mix(in srgb, currentColor 35%, transparent);
-  cursor: default;
-}
-.calendarCell__Pjcxr[data-focus-visible] {
-  box-shadow: 0 0 0 2px var(--accent-color);
-}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }
 .presetWrapper__J1yzj {
   display: contents;
-}
-.requiredIndicator__j5mIH {
-  display: inline-block;
-  width: 0.6em;
-  height: 0.6em;
-  margin-inline-start: 0.2em;
-  vertical-align: super;
-  color: inherit;
 }

package/dist/site/components/DatePicker/datePickerUtils.d.ts

@@ -1,26 +1,8 @@
-import { DateValue } from 'react-aria-components';
-import { UnavailableDateRange } from './DatePicker.types';
-/** Reads a string prop, defaulting an unset/non-string value to empty. */
-export declare const readString: (prop: string | undefined) => string;
-/** Reads a boolean prop, defaulting an unset/non-boolean value to `fallback`. */
-export declare const readBool: (prop: boolean | undefined, fallback: boolean) => boolean;
-/**
- * Parses an ISO string into a React Aria `DateValue`, or `null` if invalid/empty.
- * The result's type must match the picker's granularity:
- * - `withTime` false → a date-only `CalendarDate` (any time part is dropped).
- * - `withTime` true → a `CalendarDateTime` (a date-only input is widened to
- *   midnight) so the hour/minute segments have a value to edit.
- */
-export declare const toDateValue: (iso: string, withTime: boolean) => DateValue | null;
-/**
- * `DateValue` → ISO string (`YYYY-MM-DD`, or `YYYY-MM-DDTHH:MM` with time); empty
- * for null. Granularity maxes at minute, so seconds (always `:00`) are trimmed.
- */
-export declare const toIso: (date: DateValue | null) => string;
-/**
- * Builds an `isDateUnavailable` predicate from a list of `{ from, to }` ISO ranges
- * (inclusive; a single blocked day has `from === to`, and one endpoint alone is
- * treated as that single day). Returns `undefined` when nothing parses, so the
- * picker leaves every date open. Unparseable/empty items are skipped.
- */
-export declare const buildIsDateUnavailable: (unavailableDates: ReadonlyArray<UnavailableDateRange> | undefined) => ((date: DateValue) => boolean) | undefined;
+import { CalendarDate } from '@internationalized/date';
+import { LocalDate } from './DatePicker.types';
+/** Parses a `localDate` into a React Aria `CalendarDate`, or `null` if unset/invalid. */
+export declare const toCalendarDate: (value: LocalDate | undefined) => CalendarDate | null;
+/** `CalendarDate` → `localDate` (`YYYY-MM-DD`); `undefined` for a cleared date. */
+export declare const toLocalDate: (date: {
+    toString: () => string;
+} | null) => LocalDate | undefined;