@wix/editor-react-components 1.2861.0 → 1.2862.0

package/dist/site/components/Checkbox/component.js

@@ -7,7 +7,7 @@ import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { u as useCurrentLanguage } from "../chunks/useCurrentLanguage.js";
-import { d as defaultValues, s as selectors, T as TestIds, D as DesignStates, E as ERROR_MESSAGE_PREVIEW_TEXT } from "../chunks/constants40.js";
+import { d as defaultValues, s as selectors, T as TestIds, D as DesignStates } from "../chunks/constants40.js";
 const root = "root__0DpH8";
 const field = "field__R0D8f";
 const item = "item__EzhwB";
@@ -159,7 +159,7 @@ function CheckboxComponent(props) {
                 ),
                 "data-testid": TestIds.errorMessage,
                 id: errorMessageId,
-                children: errorMessage2 || ERROR_MESSAGE_PREVIEW_TEXT
+                children: errorMessage2
               }
             )
           ]

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

@@ -60,7 +60,6 @@ export declare const DesignStates: {
 export declare const FunctionalStateKeys: {
     readonly previewError: "previewError";
 };
-export declare const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 export declare const defaultValues: {
     readonly label: "Label";
     readonly checked: false;

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

@@ -59,6 +59,12 @@ export type DatePickerProps = SdkFunctionFocusableProps & SdkFunctionKeyboardPro
      * design parts are editable on the canvas. Set by the manifest `visibleState`.
      */
     previewCalendarOpen?: boolean;
+    /**
+     * Editor-only: forces the error state so the Date input's Error design state
+     * and the Error message part can be styled on the canvas. No message text is
+     * shown unless `errorMessage` is set.
+     */
+    previewError?: boolean;
     /** Accessibility attributes. `ariaLabel` labels the date picker for assistive tech. */
     a11y?: A11y;
     /** Platform-provided props. */

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

@@ -4351,6 +4351,7 @@ function DatePicker2(props) {
     direction,
     a11y,
     previewCalendarOpen,
+    previewError,
     onValueChange = noop,
     onOpenChange,
     onKeyDown,
@@ -4368,6 +4369,8 @@ function DatePicker2(props) {
   const handleChange = (date) => {
     onValueChange(toLocalDate(date));
   };
+  const hasError = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = hasError || Boolean(previewError);
   const handleKeyDown = onKeyDown && ((event) => {
     const wasPrevented = event.defaultPrevented;
     onKeyDown(event);
@@ -4412,7 +4415,7 @@ function DatePicker2(props) {
               onChange: handleChange,
               isDisabled: disabled,
               isReadOnly: readOnly,
-              isInvalid: !!errorMessage2,
+              isInvalid: inErrorState,
               "aria-label": ariaLabel,
               isOpen: previewCalendarOpen || void 0,
               onOpenChange: focusUnit.onOpenChange,
@@ -4448,7 +4451,7 @@ function DatePicker2(props) {
                     children: helperText2
                   }
                 ) : null,
-                /* @__PURE__ */ jsx("div", { role: "alert", children: /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("div", { role: "alert", children: inErrorState && /* @__PURE__ */ jsx(
                   $ee014567cb39d3f0$export$f551688fc98f2e09,
                   {
                     className: clsx(
@@ -4457,7 +4460,7 @@ function DatePicker2(props) {
                       (_c = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _c.className
                     ),
                     "data-testid": TestIds.errorMessage,
-                    children: errorMessage2
+                    children: errorMessage2 ?? ""
                   }
                 ) }),
                 /* @__PURE__ */ jsx(

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

@@ -55,8 +55,6 @@ export declare const defaultValues: {
     readonly readOnly: false;
     readonly disabled: false;
 };
-/** Shown on stage while the Error design state is selected. */
-export declare const PREVIEW_ERROR_MESSAGE = "Error message";
 /**
  * BEM classNames are the editor's preview hooks; the live site uses the matching
  * native pseudo-classes.
@@ -119,7 +117,10 @@ export declare const DesignStates: {
         };
     };
 };
-export declare const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
+export declare const FunctionalStateKeys: {
+    readonly previewCalendarOpen: "previewCalendarOpen";
+    readonly previewError: "previewError";
+};
 export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
 /**
  * Viewer-facing aria labels: each entry is the `legacyKey` in the legacy

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

@@ -1,6 +1,6 @@
 import { D as DomEventType } from "../chunks/types.impl.js";
 import { C as CSS_PROPERTIES, N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
-import { P as PREVIEW_CALENDAR_OPEN, D as DesignStates, d as defaultValues, b as DisplayNames, c as Descriptions, e as PREVIEW_ERROR_MESSAGE, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants37.js";
+import { F as FunctionalStateKeys, D as DesignStates, d as defaultValues, b as DisplayNames, c as Descriptions, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants37.js";
 import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
 import { b as manifestFocusable } from "../chunks/manifestSdkMixins.js";
 const basePresetName = "baseDatePicker";
@@ -46,7 +46,7 @@ const textShadow = {
   }
 };
 const openWhileDesigning = {
-  stateKey: PREVIEW_CALENDAR_OPEN,
+  stateKey: FunctionalStateKeys.previewCalendarOpen,
   elementPath: ".root"
 };
 const boxBorder = {
@@ -208,7 +208,7 @@ const manifest = {
             focus: designState(DesignStates.dateInput.focus),
             error: {
               ...designState(DesignStates.dateInput.error),
-              props: { errorMessage: PREVIEW_ERROR_MESSAGE }
+              props: { previewError: true }
             },
             disabled: {
               ...designState(DesignStates.dateInput.disabled),
@@ -304,7 +304,11 @@ const manifest = {
           selector: getSelector(selectors.errorMessage),
           behaviors: { selectable: false },
           cssProperties: { marginTop: {}, ...alignedTypography },
-          cssCustomProperties: textShadow
+          cssCustomProperties: textShadow,
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewError,
+            elementPath: ".root"
+          }
         }
       }
     },
@@ -447,15 +451,21 @@ const manifest = {
       },
       // Editor-only: activating this state passes `previewCalendarOpen` so the
       // overlay parts (referenced via `visibleState`) are editable on canvas.
-      [PREVIEW_CALENDAR_OPEN]: {
-        props: {
-          [PREVIEW_CALENDAR_OPEN]: true
-        }
+      [FunctionalStateKeys.previewCalendarOpen]: {
+        props: { previewCalendarOpen: true }
+      },
+      // Editor-only: forces the Error message part visible while it is being
+      // designed (referenced by the element's visibleState).
+      [FunctionalStateKeys.previewError]: {
+        props: { previewError: true }
       }
     },
     displayFilters: {
       states: {
-        hide: [PREVIEW_CALENDAR_OPEN]
+        hide: [
+          FunctionalStateKeys.previewCalendarOpen,
+          FunctionalStateKeys.previewError
+        ]
       }
     }
   },

package/dist/site/components/Dropdown/component.js

@@ -72,8 +72,8 @@ function Dropdown({
     }
     onValueChange == null ? void 0 : onValueChange(option2.value);
   };
-  const invalid = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
-  const inErrorState = invalid || Boolean(previewError);
+  const hasError = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = hasError || Boolean(previewError);
   const { language } = useCurrentLanguage();
   const { translate } = useService(TranslationsDefinition);
   const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || (label2 ? void 0 : translate("ariaLabels")(

package/dist/site/components/TextInput/component.js

@@ -7,7 +7,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { a as accessibilityStyles } from "../chunks/accessibility.module.js";
-import { c as componentClassNames, D as DesignStates, E as ERROR_MESSAGE_PREVIEW_TEXT } from "../chunks/constants3.js";
+import { c as componentClassNames, D as DesignStates } from "../chunks/constants3.js";
 import { b as $fd2148440a13ec26$export$fc1a364ae1f3ff10, c as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, d as $860f7da480e22816$export$b8473d3665f3a75a, e as $d3e0e05bdfcf66bd$export$c24727297075ec6a, f as $3985021b0ad6602f$export$37fb8590cf2c088c, g as $514c0188e459b4c0$export$9afb8bc826b033ea, h as $ee014567cb39d3f0$export$ff05c3ac10437e03, i as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Input.js";
 import { b as $3e6197669829fe11$export$40bfa8c7b0832715, c as $3274bf1495747a7b$export$5add1d006293d136, d as $bbaa08b3cd72f041$export$9d1611c77c2fe928, e as $23f2114a1b82827e$export$e58f029f0fbfdb29, f as $01b77f81d0f07f68$export$75b6ee27786ba447, g as $a049562f99e7db0e$export$f9c6924e160136d1, a as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../chunks/Group.js";
 import { $ as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, a as $f39a9eba43920ace$export$86427a43e3e48ebb, b as $64fa3d84918910a7$export$29f1550f4b0d4415, c as $64fa3d84918910a7$export$fabf2dc03a41866e, d as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, e as $64fa3d84918910a7$export$ef03459518577ad4, f as $64fa3d84918910a7$export$4d86445c2cf5e3, g as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, h as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
@@ -233,8 +233,8 @@ const TextInput = (props) => {
     var _a2;
     handleValueChange(((_a2 = inputRef.current) == null ? void 0 : _a2.value) ?? "");
   }, []);
-  const hasError = !!errorMessage2;
-  const showErrorMessage = previewError === true || hasError;
+  const hasError = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = hasError || Boolean(previewError);
   const containerClasses = clsx(
     style.root,
     componentClassNames.root,
@@ -242,16 +242,16 @@ const TextInput = (props) => {
     !direction && directionStyles.fallbackDirection
   );
   const ariaLabel = a11y == null ? void 0 : a11y.ariaLabel;
-  const ariaInvalid = hasError ? true : (a11y == null ? void 0 : a11y.ariaInvalid) ?? false;
+  const ariaInvalid = inErrorState ? true : (a11y == null ? void 0 : a11y.ariaInvalid) ?? false;
   const customAccessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
   const helperTextId = helperText2 ? `helper_${id}` : void 0;
-  const errorMessageId = showErrorMessage ? `error_${id}` : void 0;
+  const errorMessageId = inErrorState ? `error_${id}` : void 0;
   const inputClasses = clsx(
     style.input,
     componentClassNames.input,
     (_a = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _a.className,
     {
-      [DesignStates.input.error.className]: hasError
+      [DesignStates.input.error.className]: inErrorState
     }
   );
   const labelClasses = clsx(
@@ -329,7 +329,7 @@ const TextInput = (props) => {
                 children: helperText2
               }
             ),
-            showErrorMessage && /* @__PURE__ */ jsx(
+            inErrorState && /* @__PURE__ */ jsx(
               "p",
               {
                 id: errorMessageId,
@@ -339,7 +339,7 @@ const TextInput = (props) => {
                   (_d = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _d.className
                 ),
                 "data-testid": "error-message",
-                children: errorMessage2 || ERROR_MESSAGE_PREVIEW_TEXT
+                children: errorMessage2
               }
             )
           ] })

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

@@ -8,7 +8,6 @@ export declare const componentClassNames: {
 export declare const FunctionalStateKeys: {
     readonly previewError: "previewError";
 };
-export declare const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 export declare const DesignStates: {
     readonly input: {
         readonly hover: {

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

@@ -34,6 +34,12 @@ export type TimePickerProps = {
     helperText?: string;
     /** Message shown below the field when the selected value is invalid. */
     errorMessage?: string;
+    /**
+     * Editor-only: forces the error state so the Time input's Error design state
+     * and the Error message part can be styled on the canvas. No message text is
+     * shown unless `errorMessage` is set.
+     */
+    previewError?: boolean;
     /** Shows the time but blocks editing. */
     readOnly?: boolean;
     /** Disables interaction with the time picker. */

package/dist/site/components/TimePicker/component.js

@@ -111,6 +111,7 @@ function TimePicker(props) {
     id,
     className = "",
     readOnly = false,
+    previewError,
     direction,
     a11y,
     onValueChange = noop,
@@ -125,7 +126,8 @@ function TimePicker(props) {
     value: props.value,
     onValueChange
   });
-  const isInvalid = Boolean(errorMessage2);
+  const hasError = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = hasError || Boolean(previewError);
   let ariaLabel = a11y == null ? void 0 : a11y.ariaLabel;
   if (!ariaLabel && !label2) {
     ariaLabel = translate("ariaLabels")(
@@ -161,7 +163,7 @@ function TimePicker(props) {
               granularity: "minute",
               isDisabled: disabled,
               isReadOnly: readOnly,
-              isInvalid,
+              isInvalid: inErrorState,
               "aria-label": ariaLabel,
               children: [
                 label2 ? /* @__PURE__ */ jsx(
@@ -188,7 +190,7 @@ function TimePicker(props) {
                     children: helperText
                   }
                 ) : null,
-                errorMessage2 ? /* @__PURE__ */ jsx(
+                inErrorState ? /* @__PURE__ */ jsx(
                   $ee014567cb39d3f0$export$f551688fc98f2e09,
                   {
                     className: clsx(

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

@@ -1,7 +1 @@
-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 {};
+export { default } from './TimePicker';

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

@@ -42,7 +42,9 @@ export declare const Descriptions: {
         };
     };
 };
-export declare const PREVIEW_ERROR_MESSAGE = "Error message";
+export declare const FunctionalStateKeys: {
+    readonly previewError: "previewError";
+};
 export declare const DesignStates: {
     timeInput: {
         hover: {

package/dist/site/components/TimePicker/manifest.js

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
-import { b as DisplayNames, c as Descriptions, D as DesignStates, P as PREVIEW_ERROR_MESSAGE, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants2.js";
+import { b as DisplayNames, c as Descriptions, F as FunctionalStateKeys, D as DesignStates, C as COMPONENT_TYPE, s as selectors } from "../chunks/constants2.js";
 import { T as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, g as getSelector } from "../chunks/manifest.js";
 const basePresetName = "baseTimePicker";
 const manifest = {
@@ -137,9 +137,9 @@ const manifest = {
       disablePositioning: false
     },
     states: {
-      previewError: { props: { previewError: true } }
+      [FunctionalStateKeys.previewError]: { props: { previewError: true } }
     },
-    displayFilters: { states: { hide: ["previewError"] } },
+    displayFilters: { states: { hide: [FunctionalStateKeys.previewError] } },
     elements: {
       label: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
@@ -195,7 +195,7 @@ const manifest = {
             focus: DesignStates.timeInput.focus,
             error: {
               ...DesignStates.timeInput.error,
-              props: { errorMessage: PREVIEW_ERROR_MESSAGE }
+              props: { previewError: true }
             },
             disabled: DesignStates.timeInput.disabled
           }
@@ -252,7 +252,10 @@ const manifest = {
             textTransform: {},
             textShadow: {}
           },
-          visibleState: { stateKey: "previewError", elementPath: ".root" }
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewError,
+            elementPath: ".root"
+          }
         }
       }
     },

package/dist/site/components/chunks/constants2.js

@@ -42,7 +42,9 @@ const Descriptions = {
     }
   }
 };
-const PREVIEW_ERROR_MESSAGE = "Error message";
+const FunctionalStateKeys = {
+  previewError: "previewError"
+};
 const DesignStates = {
   timeInput: {
     hover: {
@@ -95,7 +97,7 @@ export {
   AriaLabels as A,
   COMPONENT_TYPE as C,
   DesignStates as D,
-  PREVIEW_ERROR_MESSAGE as P,
+  FunctionalStateKeys as F,
   TestIds as T,
   DEFAULT_LOCALE as a,
   DisplayNames as b,

package/dist/site/components/chunks/constants3.js

@@ -8,7 +8,6 @@ const componentClassNames = {
 const FunctionalStateKeys = {
   previewError: "previewError"
 };
-const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 const DesignStates = {
   input: {
     hover: { displayName: "Hover", className: "textInput__input--hover" },
@@ -50,7 +49,6 @@ const DisplayNames = {
 };
 export {
   DesignStates as D,
-  ERROR_MESSAGE_PREVIEW_TEXT as E,
   FunctionalStateKeys as F,
   DisplayNames as a,
   componentClassNames as c

package/dist/site/components/chunks/constants37.js

@@ -55,7 +55,6 @@ const defaultValues = {
   readOnly: false,
   disabled: false
 };
-const PREVIEW_ERROR_MESSAGE = "Error message";
 const DesignStates = {
   root: {
     disabled: {
@@ -114,7 +113,10 @@ const DesignStates = {
     }
   }
 };
-const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
+const FunctionalStateKeys = {
+  previewCalendarOpen: "previewCalendarOpen",
+  previewError: "previewError"
+};
 const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const AriaLabels = {
   root: {
@@ -153,12 +155,11 @@ export {
   ARIA_LABEL_NAMESPACE as A,
   COMPONENT_TYPE as C,
   DesignStates as D,
-  PREVIEW_CALENDAR_OPEN as P,
+  FunctionalStateKeys as F,
   TestIds as T,
   AriaLabels as a,
   DisplayNames as b,
   Descriptions as c,
   defaultValues as d,
-  PREVIEW_ERROR_MESSAGE as e,
   selectors as s
 };

package/dist/site/components/chunks/constants40.js

@@ -54,7 +54,6 @@ const DesignStates = {
 const FunctionalStateKeys = {
   previewError: "previewError"
 };
-const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 const defaultValues = {
   label: "Label",
   checked: false,
@@ -77,7 +76,6 @@ const selectors = {
 };
 export {
   DesignStates as D,
-  ERROR_MESSAGE_PREVIEW_TEXT as E,
   FunctionalStateKeys as F,
   TestIds as T,
   DisplayNames as a,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2861.0",
+  "version": "1.2862.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -228,5 +228,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "ef63c01f36ade5f01806be99e40f2814e2103f0c05ec10fc1bcaee3b"
+  "falconPackageHash": "61657244a9e1204e2d1db24d635cda45c7e8e26952e99ce32340b182"
 }