@wix/editor-react-components 1.2775.0 → 1.2776.0

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

@@ -1,2 +1,7 @@
-import { default as TimePicker } from './TimePicker';
-export default TimePicker;
+import { default as React } from 'react';
+import { TimePickerProps } from './TimePicker.types';
+type TimePickerPreviewProps = TimePickerProps & {
+    previewError?: boolean;
+};
+export default function TimePickerPreview({ previewError, ...props }: TimePickerPreviewProps): React.JSX.Element;
+export {};

package/dist/site/components/TimePicker/components/TimePickerField.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
 import { TimePickerElementProps } from '../TimePicker.types';
-export declare const TimePickerField: ({ clearButton, elementProps, }: {
-    clearButton: React.ReactNode;
+export declare const TimePickerField: ({ elementProps, }: {
     elementProps?: TimePickerElementProps;
 }) => React.JSX.Element;

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

@@ -1,76 +1,48 @@
+export declare const TEXT_PROP_STATIC_VALUE_MAX_LENGTH = 400;
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;
         data: {
             value: string;
-            defaultValue: string;
-            granularity: {
-                displayName: string;
-                options: {
-                    hour: string;
-                    minute: string;
-                    second: string;
-                };
-            };
-            hourCycle: {
-                displayName: string;
-                options: {
-                    auto: string;
-                    h12: string;
-                    h24: string;
-                };
-            };
-            shouldForceLeadingZeros: string;
-            tooltip: string;
+            onValueChange: string;
             label: string;
-            description: string;
-            minTime: string;
-            maxTime: string;
-            required: string;
+            helperText: string;
+            errorMessage: string;
             readOnly: string;
             disabled: string;
-            clearable: string;
+        };
+        parameters: {
+            value: string;
         };
         designStates: {
             hover: string;
             focus: string;
+            error: string;
             disabled: string;
         };
         elements: {
             label: string;
             timeInput: string;
-            description: string;
+            helperText: string;
+            errorMessage: string;
             segment: string;
         };
-        cssCustomProperties: {
-            labelSpacing: string;
+        presets: {
+            baseTimePicker: string;
         };
     };
 };
-export declare const defaultValues: {
-    readonly granularity: "minute";
-    readonly hourCycle: "auto";
-    readonly shouldForceLeadingZeros: false;
-    readonly tooltip: "";
-    readonly label: "";
-    readonly description: "";
-    readonly required: false;
-    readonly readOnly: false;
-    readonly disabled: false;
-    readonly clearable: false;
+export declare const Descriptions: {
+    component: string;
+    root: {
+        data: {
+            value: string;
+            helperText: string;
+            errorMessage: string;
+        };
+    };
 };
-/** React Aria `granularity`: the smallest editable time unit. */
-export declare const enum GranularityValues {
-    Hour = "hour",
-    Minute = "minute",
-    Second = "second"
-}
-/** `auto` defers to the locale; `12`/`24` force the hour cycle. */
-export declare const enum HourCycleValues {
-    Auto = "auto",
-    H12 = "12",
-    H24 = "24"
-}
+export declare const PREVIEW_ERROR_MESSAGE = "Error message";
 export declare const DesignStates: {
     timeInput: {
         hover: {
@@ -81,9 +53,16 @@ export declare const DesignStates: {
             displayName: string;
             className: string;
         };
+        error: {
+            displayName: string;
+            className: string;
+        };
         disabled: {
             displayName: string;
             className: string;
+            props: {
+                disabled: boolean;
+            };
         };
     };
     segment: {
@@ -93,36 +72,24 @@ export declare const DesignStates: {
         };
     };
 };
-/** The value that represents "no time selected". */
-export declare const EMPTY_VALUE = "";
-export declare const TRANSLATIONS_NAMESPACE = "timePicker";
-/** Viewer-facing string keys (translated via the Translations service). */
-export declare const TranslationKeys: {
-    readonly ariaLabel: "timePicker_aria_label";
-    readonly clearButton: "timePicker_clear_button";
-};
-/** English fallbacks used when a translation is missing. */
-export declare const DefaultTranslations: {
-    readonly ariaLabel: "Time picker";
-    readonly clearButton: "Clear";
+export declare const AriaLabels: {
+    readonly root: {
+        readonly key: "TimePicker_AriaLabel";
+        readonly default: "Time picker";
+    };
 };
+export declare const DEFAULT_LOCALE = "en-US";
 export declare const TestIds: {
     readonly root: "timepicker-root";
     readonly group: "timepicker-group";
     readonly field: "timepicker-field";
-    readonly clearButton: "timepicker-clear-button";
-    readonly tooltipButton: "timepicker-tooltip-button";
     readonly errorMessage: "timepicker-error-message";
-    readonly requiredIndicator: "timepicker-required-indicator";
 };
 export declare const selectors: {
     readonly root: "timePicker";
     readonly label: "timePicker__label";
-    readonly requiredIndicator: "timePicker__required-indicator";
     readonly group: "timePicker__group";
     readonly description: "timePicker__description";
     readonly segment: "timePicker__segment";
     readonly errorMessage: "timePicker__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/TimePicker/css.css

@@ -1,167 +1,51 @@
-/* :global() required: this file is @import'ed into the .module.scss; without it the vars scope to the module hash and shadow the editor's root overrides. */
-.timePicker {
-  --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);
-
-  --label-spacing: 6px;
-
-  --accent-color: var(--wst-links-and-actions-color, #116dff);
-
-  --tooltip-font: var(
-    --wst-paragraph-2-font,
-    normal normal normal 12px/1.4em madefor-text,
-    helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh,
-    helveticaneuew10-45ligh,
-    sans-serif
-  );
-  --tooltip-text-color: var(--wst-primary-background-color, #ffffff);
-  --tooltip-background-color: var(--wst-paragraph-2-color, #2b2b2b);
-
-  --descriptionFont: var(
-    --wst-paragraph-3-font,
-    normal normal normal 12px/1.4em madefor-text,
-    helveticaneuew01-45ligh,
-    helveticaneuew02-45ligh,
-    helveticaneuew10-45ligh,
-    sans-serif
-  );
-  --description-text-color: var(--wst-paragraph-2-color, #6b6b6b);
-}
 .root__dzkbY {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
-  min-width: 120px;
+  min-width: min-content !important;
   max-width: 100%;
-  font: var(--font, normal normal normal 16px/1.5em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif);
-  color: var(--color, #2b2b2b);
-  text-align: start;
 }
+
 .timePicker__j78My {
   display: flex;
   flex-direction: column;
-  row-gap: var(--label-spacing, 6px);
-}
-.labelRow__qoC8g {
-  display: flex;
-  align-items: flex-start;
-  gap: 6px;
-  margin: 0;
   min-width: 0;
 }
-.label__THO5j {
-  margin: 0;
+
+.label__THO5j,
+.description__ePprf,
+.errorMessage__zxbOJ {
+  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__ISWIR {
-  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__ISWIR[data-hovered], .tooltipButton__ISWIR[data-focus-visible] {
-  opacity: 1;
-}
-.tooltipButton__ISWIR[data-focus-visible] {
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px var(--accent-color);
-}
-.tooltipButton__ISWIR svg {
-  width: 16px;
-  height: 16px;
-}
-.tooltip__FTZhM {
-  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__6HZy7 {
   box-sizing: border-box;
-  display: flex;
-  align-items: center;
+  display: block;
   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__6HZy7:focus-within, .group__6HZy7.timePicker__group--focus {
-  border-color: var(--accent-color);
-  box-shadow: 0 0 0 1px var(--accent-color);
-}
-.group__6HZy7:hover:not(:focus-within), .group__6HZy7.timePicker__group--hover {
-  border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
-}
-.group__6HZy7[data-disabled], .group__6HZy7.timePicker__group--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
+
 .field__mnQwh {
   display: inline-flex;
-  flex: 1;
   min-width: 0;
   gap: 1px;
   font: inherit;
   color: inherit;
+  text-decoration-line: inherit;
   white-space: nowrap;
 }
-.description__ePprf {
-  font: var(--descriptionFont);
-  color: var(--description-text-color);
-}
-.errorMessage__zxbOJ {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--errorColor, var(--wst-error-color, #e21c21));
-}
+
 .segment__OtazP {
-  padding: 0 2px;
-  border-radius: 3px;
   font-variant-numeric: tabular-nums;
-  text-align: center;
+  text-decoration-line: inherit;
   outline: none;
 }
 .segment__OtazP[data-type=literal] {
@@ -171,45 +55,9 @@
 .segment__OtazP[data-placeholder] {
   color: color-mix(in srgb, currentColor 45%, transparent);
 }
-.segment__OtazP[data-focused], .segment__OtazP.timePicker__segment--focus {
-  background: var(--wst-links-and-actions-color, #116dff);
-  color: var(--wst-primary-background-color, #ffffff);
-}
-.clearButton__Bto7s {
-  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__Bto7s:hover {
-  background: color-mix(in srgb, currentColor 12%, transparent);
-}
-.clearIcon__x11eI {
-  width: 18px;
-  height: 18px;
-}
 .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/TimePicker/hooks/useTimePickerValue.d.ts

@@ -1,11 +1,9 @@
 import { TimeValue } from 'react-aria-components';
-import { TimePickerGranularity, TimePickerProps } from '../TimePicker.types';
+import { TimePickerProps } from '../TimePicker.types';
 export declare const useTimePickerValue: (params: {
-    value: TimePickerProps["value"] | undefined;
-    onChange: NonNullable<TimePickerProps["onChange"]>;
-    granularity: TimePickerGranularity;
+    value: TimePickerProps["value"];
+    onValueChange: NonNullable<TimePickerProps["onValueChange"]>;
 }) => {
     timeValue: TimeValue | null;
     handleChange: (next: TimeValue | null) => void;
-    hasValue: boolean;
 };