@wix/editor-react-components 1.2288.0 → 1.2290.0

package/dist/site/components/DatePicker/component.preview.d.ts

@@ -0,0 +1,2 @@
+import { default as DatePicker } from './DatePicker';
+export default DatePicker;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const DatePickerCalendar: ({ isRange, portalContainer, }: {
+    isRange: boolean;
+    portalContainer: HTMLElement | null;
+}) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const DatePickerField: ({ isRange, clearButton, calendarButtonLabel, }: {
+    isRange: boolean;
+    clearButton: React.ReactNode;
+    calendarButtonLabel: string;
+}) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare const DatePickerLabel: ({ label, tooltip, portalContainer, }: {
+    label: string;
+    tooltip: string;
+    portalContainer: HTMLElement | null;
+}) => React.JSX.Element | null;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const DatePickerTooltip: ({ text, portalContainer, }: {
+    text: string;
+    portalContainer: HTMLElement | null;
+}) => React.JSX.Element;

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

@@ -0,0 +1,177 @@
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            value: string;
+            endValue: string;
+            onEndChange: string;
+            selectionMode: {
+                displayName: string;
+                options: {
+                    single: string;
+                    range: string;
+                };
+            };
+            granularity: {
+                displayName: string;
+                options: {
+                    day: string;
+                    hour: string;
+                    minute: string;
+                };
+            };
+            tooltip: string;
+            label: string;
+            description: string;
+            minDate: string;
+            maxDate: string;
+            unavailableDates: string;
+            unavailableFrom: string;
+            unavailableTo: string;
+            allowPastDates: string;
+            allowFutureDates: string;
+            required: string;
+            readOnly: string;
+            disabled: string;
+            clearable: string;
+        };
+        designStates: {
+            hover: string;
+            focus: string;
+            disabled: string;
+            selected: string;
+        };
+        elements: {
+            label: string;
+            dateInput: string;
+            calendarButton: string;
+            popover: string;
+            calendar: string;
+            calendarDay: string;
+            today: 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 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"
+}
+/**
+ * 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
+ * editor's preview hooks; the live site uses the matching native pseudo-classes.
+ */
+export declare const DesignStates: {
+    root: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        focus: {
+            displayName: string;
+            className: string;
+        };
+        disabled: {
+            displayName: string;
+            className: string;
+        };
+    };
+    dateInput: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        focus: {
+            displayName: string;
+            className: string;
+        };
+        disabled: {
+            displayName: string;
+            className: string;
+        };
+    };
+    calendarButton: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        selected: {
+            displayName: string;
+            className: string;
+        };
+    };
+    calendarDay: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        selected: {
+            displayName: string;
+            className: string;
+        };
+        disabled: {
+            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
+ * `default` fallback. Referenced from constants (never as inline string keys).
+ */
+export declare const AriaLabels: {
+    readonly root: {
+        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";
+    };
+};
+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";
+};
+export declare const selectors: {
+    readonly root: "datePicker";
+    readonly label: "datePicker__label";
+    readonly group: "datePicker__group";
+    readonly calendarButton: "datePicker__calendar-button";
+    readonly popover: "datePicker__popover";
+    readonly calendar: "datePicker__calendar";
+    readonly day: "datePicker__day";
+};

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

@@ -0,0 +1,349 @@
+.root__l0Qv- {
+  --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);
+
+  --field-background-color: var(--wst-primary-background-color, #ffffff);
+  --borderColor: var(--wst-system-line-1-color, #dfe5eb);
+  --borderWidth: 1px;
+  --borderStartStartRadius: 6px;
+  --borderStartEndRadius: 6px;
+  --borderEndStartRadius: 6px;
+  --borderEndEndRadius: 6px;
+
+  --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: inline-flex;
+  flex-direction: column;
+  min-width: 200px;
+  max-width: 100%;
+  font: var(--font);
+  color: var(--text-color);
+}
+.datePicker__n-7WW {
+  display: flex;
+  flex-direction: column;
+}
+.labelRow__pUSW5 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 6px;
+}
+.label__YTX1z {
+  margin: 0;
+  font: var(--labelFont);
+  color: var(--label-text-color);
+}
+.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;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  font: inherit;
+  color: inherit;
+  background: var(--field-background-color);
+  border-style: solid;
+  border-width: var(--borderWidth);
+  border-color: var(--borderColor);
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  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;
+  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;
+}
+.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);
+}
+.clearButton__NdcRh {
+  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);
+}
+.clearIcon__Klxmr {
+  width: 18px;
+  height: 18px;
+}
+.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);
+}
+.calendarButton__s-QAb[data-disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+.calendarIcon__CYg1H {
+  width: 20px;
+  height: 20px;
+}
+.popover__JAzkr {
+  box-sizing: border-box;
+  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 {
+  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;
+}
+.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;
+  width: 34px;
+  height: 34px;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: 8px;
+  font-size: 13px;
+  outline: none;
+  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;
+}

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

@@ -0,0 +1,26 @@
+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;

package/dist/site/components/DatePicker/hooks/useDateConstraints.d.ts

@@ -0,0 +1,12 @@
+import { DateValue } from 'react-aria-components';
+import { DatePickerProps } from '../DatePicker.types';
+export declare const useDateConstraints: (params: {
+    minDate: DatePickerProps["minDate"];
+    maxDate: DatePickerProps["maxDate"];
+    allowPastDates: boolean;
+    allowFutureDates: boolean;
+    withTime: boolean;
+}) => {
+    minValue: DateValue | undefined;
+    maxValue: DateValue | undefined;
+};

package/dist/site/components/DatePicker/hooks/useDatePickerValue.d.ts

@@ -0,0 +1,15 @@
+import { DateValue } from 'react-aria-components';
+import { DatePickerProps, DateRangeValue } from '../DatePicker.types';
+export declare const useDatePickerValue: (params: {
+    value: DatePickerProps["value"];
+    endValue: DatePickerProps["endValue"];
+    onChange: NonNullable<DatePickerProps["onChange"]>;
+    onEndChange: NonNullable<DatePickerProps["onEndChange"]>;
+    withTime: boolean;
+}) => {
+    dateValue: DateValue | null;
+    rangeValue: DateRangeValue;
+    handleSingleChange: (next: DateValue | null) => void;
+    handleRangeChange: (next: DateRangeValue) => void;
+    hasValue: (isRange: boolean) => boolean;
+};

package/dist/site/components/DatePicker/hooks/useUnavailableDates.d.ts

@@ -0,0 +1,3 @@
+import { DateValue } from 'react-aria-components';
+import { UnavailableDateRange } from '../DatePicker.types';
+export declare const useUnavailableDates: (unavailableDates: ReadonlyArray<UnavailableDateRange> | undefined) => ((date: DateValue) => boolean) | undefined;

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

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as DatePicker } from './component';

package/dist/site/components/DatePicker/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import DatePicker from './component.js';
+
+export { DatePicker };
+export default DatePicker;

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

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;