@wix/editor-react-components 1.2439.0 → 1.2441.0

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

@@ -6,8 +6,7 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants37.js";

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

@@ -1,8 +1,9 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { FieldValidationProps } from '../../../utils/validation/types';
 import { CheckboxGroupOption } from './constants';
 export type { CheckboxGroupOption } from './constants';
-export type CheckboxGroupProps = SdkFunctionFocusableProps & {
+export type CheckboxGroupProps = SdkFunctionFocusableProps & FieldValidationProps<Array<string>> & {
     id: string;
     className: string;
     options: Array<CheckboxGroupOption>;

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

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { a as Fieldset, T as Tooltip, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, e as Checkbox } from "../chunks/index11.js";
-import "react";
+import { a as Fieldset, T as Tooltip, d as CheckboxGroup_CheckboxGroup_CheckboxGroup, c as InfoCircle_default, e as Checkbox } from "../chunks/index11.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants36.js";
+import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants36.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__raraS";
 const fieldset = "fieldset__pDERL";
@@ -23,6 +23,7 @@ const control = "control__MMIkR";
 const indicator = "indicator__mDg93";
 const checkmark = "checkmark__YItvi";
 const label = "label__aznPH";
+const errorMessage = "errorMessage__tlSBa";
 const styles = {
   root,
   fieldset,
@@ -35,10 +36,12 @@ const styles = {
   control,
   indicator,
   checkmark,
-  label
+  label,
+  errorMessage
 };
 const noop = () => {
 };
+const arraysEqual = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
 const CheckmarkIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -68,6 +71,10 @@ function CheckboxGroupComponent(props) {
     onChange = noop,
     onFocus = noop,
     onBlur = noop,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange,
     wix
   } = props;
   const sourceOptions = Array.isArray(props.options) && props.options.length ? props.options : defaultOptions;
@@ -78,10 +85,46 @@ function CheckboxGroupComponent(props) {
   const allValues = options.map((option2) => option2.value);
   const keepKnownOptions = (values) => values.filter((optionValue) => allValues.includes(optionValue));
   const defaultChecked = options.filter((option2) => option2.checked).map((option2) => option2.value);
-  const valueProps = value !== void 0 ? { value: keepKnownOptions(value) } : { defaultValue: keepKnownOptions(defaultChecked) };
+  const controlledValues = value !== void 0 ? keepKnownOptions(value) : void 0;
+  const isControlled = controlledValues !== void 0;
+  const valueProps = controlledValues !== void 0 ? { value: controlledValues } : { defaultValue: keepKnownOptions(defaultChecked) };
+  const [uncontrolledValues, setUncontrolledValues] = useState(
+    keepKnownOptions(defaultChecked)
+  );
+  const rawValues = controlledValues ?? uncontrolledValues;
+  const stableValuesRef = useRef(rawValues);
+  if (!arraysEqual(stableValuesRef.current, rawValues)) {
+    stableValuesRef.current = rawValues;
+  }
+  const currentValues = stableValuesRef.current;
   const handleValueChange = (next) => {
+    if (!isControlled) {
+      setUncontrolledValues(next);
+    }
     onChange(next);
   };
+  const intrinsic = required && !disabled && !readOnly && currentValues.length === 0 ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: handleValidationBlur
+  } = useValidatedField({
+    value: currentValues,
+    intrinsic,
+    fieldValidity,
+    showValidityIndication,
+    onValidate,
+    onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const showErrorMessage = isInvalid && !!validity.validationMessage;
+  const errorId = `${id}-error`;
+  const handleBlur = (event) => {
+    onBlur(event);
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      handleValidationBlur();
+    }
+  };
   const hasLegend = displayLabel && !!label2;
   const showLabelRow = hasLegend || !!tooltip2;
   const ariaLabel = !hasLegend ? (a11y == null ? void 0 : a11y.ariaLabel) || void 0 : void 0;
@@ -180,11 +223,13 @@ function CheckboxGroupComponent(props) {
             allValues,
             disabled,
             "aria-required": required || void 0,
+            "aria-invalid": isInvalid || void 0,
+            "aria-describedby": showErrorMessage ? errorId : void 0,
             "aria-label": ariaLabel,
             className: styles.group,
             "data-testid": TestIds.group,
             onFocus,
-            onBlur,
+            onBlur: handleBlur,
             children: [
               selectAll && /* @__PURE__ */ jsxs(
                 "label",
@@ -241,6 +286,21 @@ function CheckboxGroupComponent(props) {
               ))
             ]
           }
+        ),
+        showErrorMessage && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: errorId,
+            className: clsx(
+              styles.errorMessage,
+              formatClassNames(semanticClassNames.errorMessage)
+            ),
+            "data-testid": TestIds.errorMessage,
+            children: [
+              /* @__PURE__ */ jsx(InfoCircle_default, { "aria-hidden": "true" }),
+              validity.validationMessage
+            ]
+          }
         )
       ] })
     }

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

@@ -82,6 +82,7 @@ export declare const defaultValues: {
     readonly disabled: false;
     readonly selectAll: false;
 };
+export declare const VALUE_MISSING_MESSAGE = "This field is required";
 export declare const TestIds: {
     readonly root: "checkbox-group-root";
     readonly group: "checkbox-group-group";
@@ -93,6 +94,7 @@ export declare const TestIds: {
     readonly indicator: "checkbox-group-indicator";
     readonly optionLabel: "checkbox-group-option-label";
     readonly tooltipButton: "checkbox-group-tooltip-button";
+    readonly errorMessage: "checkbox-group-error-message";
 };
 export declare const selectors: {
     readonly root: "checkbox-group";
@@ -108,4 +110,5 @@ export declare const semanticClassNames: {
     readonly indicator: "checkbox-group__indicator";
     readonly label: "checkbox-group__label";
     readonly requiredIndicator: "checkbox-group__required-indicator";
+    readonly errorMessage: "checkbox-group__error-message";
 };

package/dist/site/components/CheckboxGroup/css.css

@@ -64,9 +64,9 @@
 .tooltip__xXd2k {
   max-width: 220px;
   padding: 6px 10px;
-  font: var(--wst-paragraph-2-font, normal normal normal 12px/1.4em madefor-text, sans-serif);
-  color: var(--wst-primary-background-color, #fff);
-  background: var(--wst-paragraph-2-color, #2b2b2b);
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: #fff;
+  background: #2b2b2b;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
 }
@@ -164,14 +164,17 @@
 }
 
 .control__MMIkR:not([data-checked]):not([data-indeterminate])[data-invalid] .indicator__mDg93,
-.control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--invalid {
+.control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93.checkbox-group__indicator--invalid,
+.group__5et8j[aria-invalid=true] .control__MMIkR:not([data-checked]):not([data-indeterminate]) .indicator__mDg93 {
   --indicator-border: var(--uncheckedBorderColor, #e62214);
 }
 
 .control__MMIkR[data-checked][data-invalid] .indicator__mDg93,
 .control__MMIkR[data-indeterminate][data-invalid] .indicator__mDg93,
 .control__MMIkR[data-checked] .indicator__mDg93.checkbox-group__indicator--invalid,
-.control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--invalid {
+.control__MMIkR[data-indeterminate] .indicator__mDg93.checkbox-group__indicator--invalid,
+.group__5et8j[aria-invalid=true] .control__MMIkR[data-checked] .indicator__mDg93,
+.group__5et8j[aria-invalid=true] .control__MMIkR[data-indeterminate] .indicator__mDg93 {
   --indicator-border: var(--checkedBorderColor, #e62214);
 }
 
@@ -207,6 +210,20 @@
 .label__aznPH {
   cursor: pointer;
   margin-bottom: 0;
+}
+
+.errorMessage__tlSBa {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 4px;
+  font: normal normal normal 12px/1.4em madefor-text, sans-serif;
+  color: var(--errorTextColor, #ff4040);
+}
+.errorMessage__tlSBa svg {
+  flex: none;
+  width: 18px;
+  height: 18px;
 }.checkbox-group {
   --checkboxesSpacing: 6px;
   --labelSpacing: 16px;

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

@@ -3,6 +3,7 @@ import { D as DesignStates, c as DisplayNames, d as defaultValues, s as selector
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "aa224b85-e2af-462b-9a15-5de3a753bea8",
   type: "wixEditorElements.CheckboxGroup__DEV__v3",
@@ -128,7 +129,21 @@ const manifest = {
         dataType: DATA.DATA_TYPE.direction
       },
       ...manifestChangeable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      // `item` is proto-correct for a function-param array but currently fails
+      // enrichment (SPI validates it with the data-field ArrayItems schema).
+      // Do NOT switch to `dataItem` — it is stripped in serialization and fails
+      // identically. Blocked on a component-protocol platform fix.
+      ...manifestValidation({
+        valueParameter: {
+          dataType: DATA.DATA_TYPE.arrayItems,
+          [DATA.DATA_TYPE.arrayItems]: {
+            item: {
+              dataType: DATA.DATA_TYPE.text
+            }
+          }
+        }
+      })
     },
     displayGroups: {
       optionsGroup: {

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

@@ -16,8 +16,7 @@ import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator, u as useValidatedField } from "../chunks/RequiredIndicator.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 createContext(null);

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

@@ -8,11 +8,10 @@ import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants33.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";

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

@@ -1,6 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key2, value2) => key2 in obj ? __defProp(obj, key2, { enumerable: true, configurable: true, writable: true, value: value2 }) : obj[key2] = value2;
-var __publicField = (obj, key2, value2) => __defNormalProp(obj, typeof key2 !== "symbol" ? key2 + "" : key2, value2);
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { useService } from "@wix/services-manager-react";
@@ -8,11 +5,12 @@ import { T as TranslationsDefinition } from "../chunks/index6.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { g as getTranslation } from "../chunks/getTranslation.js";
 import { B as Button } from "../chunks/Button.js";
-import { s as semanticSelectors, r as rootDataDefaults, d as displayPropertyToObserve, A as ARIA_LABEL_NAMESPACE, t as testIds, p as pauseIconSvg, a as playIconSvg, b as showButtonOnHoverDefaults, D as DefaultTranslations, T as TranslationKeys } from "../chunks/constants28.js";
+import { r as rootDataDefaults, s as semanticSelectors, A as ARIA_LABEL_NAMESPACE, t as testIds, p as pauseIconSvg, a as playIconSvg, b as showButtonOnHoverDefaults, D as DefaultTranslations, T as TranslationKeys } from "../chunks/constants28.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import React__default, { useEffect, useState, useRef, useMemo } from "react";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
+import { u as useHasDisplayedElement } from "../chunks/useHasDisplayedElement.js";
 var lottie$2 = { exports: {} };
 var lottie$1 = lottie$2.exports;
 var hasRequiredLottie;
@@ -16773,189 +16771,11 @@ const LottieAnimation = ({ a11y, animationData, ...playerProps }) => animationDa
     ...a11y && convertA11yKeysToHtmlFormat(a11y)
   }
 ) : null;
-class StyleObserver {
-  /**
-   * Create a new (detached) instance of CSS variable observer.
-   *
-   * @param observedVariables list of CSS variables to observe
-   * @param callback callback that will be invoked every time any of listed CSS variables change
-   * @param options configuration options
-   */
-  constructor(callback, config = { propertiesToObserve: [] }) {
-    // List of elements that are being observed
-    __publicField(this, "_observedElements", /* @__PURE__ */ new Set());
-    // Value cache per observed element
-    __publicField(this, "_cachedValues", /* @__PURE__ */ new WeakMap());
-    /*
-     * Observer CSS variables and their internal identifiers.
-     */
-    __publicField(this, "_observedVariables");
-    /*
-     * User supplied callback that receives CSS variable values.
-     */
-    __publicField(this, "_callback");
-    /*
-     * Event handler that is used to invoke callback.
-     */
-    __publicField(this, "_eventHandler", this._handleUpdate.bind(this));
-    /*
-     * Mode to determine whether to observe all properties or only the changed ones
-     */
-    __publicField(this, "_notificationMode");
-    /*
-     * Format to determine how to return the observed values
-     */
-    __publicField(this, "_returnFormat");
-    this._callback = callback;
-    this._observedVariables = config.propertiesToObserve;
-    this._notificationMode = config.notificationMode ?? "changed_only";
-    this._returnFormat = config.returnFormat ?? "object";
-  }
-  setPropertiesToObserve(propertiesToObserve) {
-    this._observedVariables = propertiesToObserve;
-  }
-  /**
-   * Attach observer to target element. Callback will be invoked immediately with the current assigned values.
-   *
-   * @param targetElement target element
-   */
-  observe(targetElement) {
-    if (!this._observedElements.has(targetElement)) {
-      this._observedElements.add(targetElement);
-      this._cachedValues.set(targetElement, {});
-      this._setTargetElementStyles(targetElement);
-      targetElement.addEventListener("transitionrun", this._eventHandler);
-    }
-  }
-  /**
-   * Detach observer from given targetElement
-   * If no argument is passed, then all are detached
-   */
-  unobserve(targetElement) {
-    let elementsToUnobserve;
-    if (targetElement) {
-      if (this._observedElements.has(targetElement)) {
-        elementsToUnobserve = /* @__PURE__ */ new Set([targetElement]);
-      } else {
-        elementsToUnobserve = /* @__PURE__ */ new Set();
-      }
-    } else {
-      elementsToUnobserve = this._observedElements;
-    }
-    if (!elementsToUnobserve.size) {
-      return;
-    }
-    elementsToUnobserve.forEach((elementToUnobserve) => {
-      this._unsetTargetElementStyles(elementToUnobserve);
-      elementToUnobserve.removeEventListener(
-        "transitionrun",
-        this._eventHandler
-      );
-      this._observedElements.delete(elementToUnobserve);
-      this._cachedValues.delete(elementToUnobserve);
-    });
-  }
-  /**
-   * Attach the styles necessary to track the changes to the given element
-   *
-   * @param targetElement The element to track
-   */
-  _setTargetElementStyles(targetElement) {
-    const cssTransitionValue = this._observedVariables.map((value2) => `${value2} 0.001ms step-start`).join(", ");
-    targetElement.style.setProperty("transition", cssTransitionValue);
-    targetElement.style.setProperty("transition-behavior", "allow-discrete");
-  }
-  /**
-   * Remove the styles that track the property changes
-   *
-   * @param targetElement The element to track
-   */
-  _unsetTargetElementStyles(targetElement) {
-    targetElement.style.removeProperty("transition");
-    targetElement.style.removeProperty("transition-behavior");
-  }
-  /**
-   * Process the computed style and collect the changes
-   *
-   * @param computedStyle The computed style of the target element
-   * @returns Collected changes
-   */
-  _processComputedStyle(computedStyle, targetElement) {
-    const changes = {};
-    const cachedValuesForElement = this._cachedValues.get(targetElement) ?? {};
-    this._observedVariables.forEach((propertyName) => {
-      const currentValue = computedStyle.getPropertyValue(propertyName);
-      const previousValue = cachedValuesForElement[propertyName];
-      const hasChanged = currentValue !== previousValue;
-      if (this._notificationMode === "all" || hasChanged) {
-        changes[propertyName] = {
-          value: currentValue,
-          previousValue,
-          changed: hasChanged,
-          element: targetElement
-        };
-        cachedValuesForElement[propertyName] = currentValue;
-      }
-    });
-    return changes;
-  }
-  /**
-   * Returns the formatter to use
-   */
-  _getFormatter(format) {
-    switch (format) {
-      case "object":
-        return (changes) => {
-          return changes;
-        };
-      case "value_only":
-      default:
-        return (changes) => {
-          const formattedChanges = {};
-          Object.keys(changes).forEach((key2) => {
-            formattedChanges[key2] = changes[key2].value;
-          });
-          return formattedChanges;
-        };
-    }
-  }
-  /**
-   * Collect CSS variable values and invoke callback.
-   */
-  _handleUpdate(e) {
-    const targetElement = e instanceof HTMLElement ? e : e.target;
-    if (this._observedElements.has(targetElement)) {
-      const computedStyle = getComputedStyle(targetElement);
-      const changes = this._processComputedStyle(computedStyle, targetElement);
-      if (Object.keys(changes).length === 0) {
-        return;
-      }
-      const formatter = this._getFormatter(this._returnFormat);
-      this._callback(formatter(changes));
-    }
-  }
-}
-function useStyleRefreshKey(element, propertiesToObserve = []) {
-  const [refreshKey, setRefreshKey] = useState(0);
-  const refreshComponent = () => setRefreshKey((oldRefreshKey) => oldRefreshKey + 1);
-  const styleObserverRef = useRef(
-    new StyleObserver(refreshComponent, { propertiesToObserve })
-  );
-  useEffect(() => {
-    const styleObserver = styleObserverRef.current;
-    styleObserver.setPropertiesToObserve(propertiesToObserve);
-    if (!element) {
-      return;
-    }
-    styleObserver.observe(element);
-    return () => styleObserver.unobserve(element);
-  }, [element, propertiesToObserve]);
-  return refreshKey;
-}
 function useLottie({
   animationUrl,
   autoplay = true,
-  speed = rootDataDefaults.speed
+  speed = rootDataDefaults.speed,
+  allowClickToStop = rootDataDefaults.allowClickToStop
 }) {
   var _a;
   const environment = useService(EnvironmentDefinition);
@@ -16967,19 +16787,11 @@ function useLottie({
     []
   );
   const containerRef = useRef(null);
-  const [playButtonElement, setPlayButtonElement] = useState(null);
-  useEffect(() => {
-    var _a2;
-    const el = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
-      `.${semanticSelectors.playButton}`
-    );
-    setPlayButtonElement(el ?? null);
-  }, []);
-  useStyleRefreshKey(
-    playButtonElement,
-    displayPropertyToObserve
+  const isPlayButtonHidden = !useHasDisplayedElement(
+    containerRef,
+    [`.${semanticSelectors.playButton}`],
+    allowClickToStop
   );
-  const isPlayButtonHidden = !isSSR && playButtonElement ? window.getComputedStyle(playButtonElement).display === "none" : false;
   const lottieRef = useRef(null);
   const [animationData, setAnimationData] = useState(null);
   const [isPlaying, setIsPlaying] = useState(
@@ -17127,7 +16939,7 @@ const Lottie = (props) => {
     handleComplete,
     handlePause,
     handleResume
-  } = useLottie({ animationUrl, autoplay, speed });
+  } = useLottie({ animationUrl, autoplay, speed, allowClickToStop });
   return /* @__PURE__ */ jsx(
     "div",
     {

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

@@ -47,7 +47,6 @@ export declare const editorOverrides: {
     readonly showButtonOnHover: "always";
     readonly allowClickToStop: false;
 };
-export declare const displayPropertyToObserve: string[];
 export declare const testIds: {
     readonly animationClickWrapper: "lottie-animation-click-wrapper";
 };

package/dist/site/components/Lottie/hooks/useLottie.d.ts

@@ -1,6 +1,6 @@
 import { LottieRefCurrentProps } from 'lottie-react';
 import { UseLottieParams } from '../types';
-export declare function useLottie({ animationUrl, autoplay, speed, }: UseLottieParams): {
+export declare function useLottie({ animationUrl, autoplay, speed, allowClickToStop, }: UseLottieParams): {
     containerRef: import('react').RefObject<HTMLDivElement>;
     lottieRef: import('react').MutableRefObject<LottieRefCurrentProps | null>;
     animationData: unknown;

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

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-V7QOLP3D.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { c as speedConstraints, e as playButtonDefaults, f as DisplayNames, r as rootDataDefaults, b as showButtonOnHoverDefaults, g as borderDefaultValue, i as initialSize, s as semanticSelectors } from "../chunks/constants28.js";
+import { c as speedConstraints, d as playButtonDefaults, e as DisplayNames, r as rootDataDefaults, b as showButtonOnHoverDefaults, f as borderDefaultValue, i as initialSize, s as semanticSelectors } from "../chunks/constants28.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "13165477-8205-4050-b078-424a1479159e",

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

@@ -29,6 +29,7 @@ export interface UseLottieParams {
     animationUrl?: string;
     autoplay?: boolean;
     speed?: number;
+    allowClickToStop?: boolean;
 }
 export type LottiePlayerAnyRendererProps = Omit<LottieComponentProps, 'renderer' | 'rendererSettings'> & {
     renderer?: RendererType;

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

@@ -6,8 +6,7 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useCallback, useMemo } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { M as MOVEMENT_DIRECTION, A as AUTOPLAY_STATE, s as slideshowDataDefaults, a as semanticClassNames, b as ARIA_LABEL_NAMESPACE, S as SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT, D as DefaultTranslations, T as TranslationKeys } from "../chunks/Slideshow.semanticClassNames.js";
-import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
+import { u as useHasDisplayedElement } from "../chunks/useHasDisplayedElement.js";
 import { B as Button } from "../chunks/Button.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
@@ -515,7 +515,11 @@ const PauseButton = ({
     }
   );
 };
-const isDisplayed = (element) => !!element && getComputedStyle(element).display !== "none";
+const SLIDE_CHANGING_CONTROL_SELECTORS = [
+  ".animated-icon",
+  ".label",
+  `.${semanticClassNames.pagination}`
+];
 const Slideshow = (props) => {
   var _a, _b;
   const {
@@ -562,30 +566,11 @@ const Slideshow = (props) => {
   const navigationButtonsProps = elementProps == null ? void 0 : elementProps.navigationButtons;
   const slideIndicatorsProps = elementProps == null ? void 0 : elementProps.slideIndicators;
   const controlsRef = useRef(null);
-  const [forcePauseButton, setForcePauseButton] = useState(false);
-  const evaluateSlideChangingControls = useCallback(() => {
-    const container = controlsRef.current;
-    if (!reducedMotion || !container) {
-      setForcePauseButton(false);
-      return;
-    }
-    const icon = container.querySelector(".animated-icon");
-    const label = container.querySelector(".label");
-    const indicators = container.querySelector(
-      `.${semanticClassNames.pagination}`
-    );
-    setForcePauseButton(
-      !isDisplayed(icon) && !isDisplayed(label) && !isDisplayed(indicators)
-    );
-  }, [reducedMotion]);
-  useResizeObserver({
-    callback: evaluateSlideChangingControls,
-    ref: controlsRef,
-    enabled: reducedMotion
-  });
-  useEffect(() => {
-    evaluateSlideChangingControls();
-  }, [evaluateSlideChangingControls]);
+  const forcePauseButton = !useHasDisplayedElement(
+    controlsRef,
+    SLIDE_CHANGING_CONTROL_SELECTORS,
+    reducedMotion
+  );
   const [autoplayState, setAutoplayState] = useState(
     autoplay ? AUTOPLAY_STATE.RUNNING : AUTOPLAY_STATE.PAUSED
   );

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

@@ -6,11 +6,10 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";

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

@@ -5,8 +5,7 @@ import { c as clsx } from "../chunks/clsx.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
 import { T as TranslationsDefinition } from "../chunks/index6.js";

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

@@ -13,8 +13,7 @@ import { g as getTranslation } from "../chunks/getTranslation.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
-import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { u as useValidatedField, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dzkbY";

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

@@ -1,6 +1,83 @@
+import * as React from "react";
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
-import * as React from "react";
+const sameValidity = (a, b) => a !== null && a.valid === b.valid && a.validationMessage === b.validationMessage;
+function useValidatedField({
+  value,
+  valueKey,
+  intrinsic,
+  fieldValidity,
+  showValidityIndication,
+  onValidate,
+  onValidityChange
+}) {
+  const isGateControlled = showValidityIndication !== void 0;
+  const [touched, setTouched] = useState(false);
+  const showIndication = isGateControlled ? Boolean(showValidityIndication) : touched;
+  const changeKey = valueKey === void 0 ? value : valueKey;
+  const customInvalid = (fieldValidity == null ? void 0 : fieldValidity.valid) === false;
+  const customMessage = (fieldValidity == null ? void 0 : fieldValidity.validationMessage) ?? "";
+  const validity = useMemo(() => {
+    const valid = intrinsic.valid && !customInvalid;
+    let validationMessage = "";
+    if (!intrinsic.valid) {
+      validationMessage = intrinsic.validationMessage;
+    } else if (customInvalid) {
+      validationMessage = customMessage;
+    }
+    return { valid, validationMessage };
+  }, [
+    intrinsic.valid,
+    intrinsic.validationMessage,
+    customInvalid,
+    customMessage
+  ]);
+  const onValidateRef = useRef(onValidate);
+  onValidateRef.current = onValidate;
+  const onValidityChangeRef = useRef(onValidityChange);
+  onValidityChangeRef.current = onValidityChange;
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const lastEmittedRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (sameValidity(lastEmittedRef.current, validity)) {
+      return;
+    }
+    lastEmittedRef.current = validity;
+    (_a = onValidityChangeRef.current) == null ? void 0 : _a.call(onValidityChangeRef, validity);
+  }, [validity]);
+  const mountedRef = useRef(false);
+  const prevKeyRef = useRef(changeKey);
+  useEffect(() => {
+    var _a;
+    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "mount");
+    mountedRef.current = true;
+    prevKeyRef.current = changeKey;
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!mountedRef.current) {
+      return;
+    }
+    if (prevKeyRef.current === changeKey) {
+      return;
+    }
+    prevKeyRef.current = changeKey;
+    if (showIndication) {
+      (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "change");
+    }
+  }, [changeKey, showIndication]);
+  const handleBlur = useCallback(() => {
+    var _a;
+    if (!isGateControlled) {
+      setTouched(true);
+    }
+    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "blur");
+  }, [isGateControlled]);
+  return { validity, showValidityIndication: showIndication, handleBlur };
+}
 const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
 Asterisk.displayName = "Asterisk";
 var Asterisk_default = Asterisk;
@@ -21,5 +98,6 @@ const RequiredIndicator = ({
   }
 );
 export {
-  RequiredIndicator as R
+  RequiredIndicator as R,
+  useValidatedField as u
 };

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

@@ -42,7 +42,6 @@ const showButtonOnHoverDefaults = {
     displayName: "On hover"
   }
 };
-const displayPropertyToObserve = ["display"];
 const testIds = {
   animationClickWrapper: "lottie-animation-click-wrapper"
 };
@@ -83,10 +82,9 @@ export {
   playIconSvg as a,
   showButtonOnHoverDefaults as b,
   speedConstraints as c,
-  displayPropertyToObserve as d,
-  playButtonDefaults as e,
-  DisplayNames as f,
-  borderDefaultValue as g,
+  playButtonDefaults as d,
+  DisplayNames as e,
+  borderDefaultValue as f,
   initialSize as i,
   pauseIconSvg as p,
   rootDataDefaults as r,

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

@@ -79,6 +79,7 @@ const defaultValues = {
   disabled: false,
   selectAll: false
 };
+const VALUE_MISSING_MESSAGE = "This field is required";
 const TestIds = {
   root: "checkbox-group-root",
   group: "checkbox-group-group",
@@ -89,7 +90,8 @@ const TestIds = {
   control: "checkbox-group-control",
   indicator: "checkbox-group-indicator",
   optionLabel: "checkbox-group-option-label",
-  tooltipButton: "checkbox-group-tooltip-button"
+  tooltipButton: "checkbox-group-tooltip-button",
+  errorMessage: "checkbox-group-error-message"
 };
 const selectors = {
   root: "checkbox-group",
@@ -103,11 +105,13 @@ const semanticClassNames = {
   control: "checkbox-group__control",
   indicator: "checkbox-group__indicator",
   label: "checkbox-group__label",
-  requiredIndicator: "checkbox-group__required-indicator"
+  requiredIndicator: "checkbox-group__required-indicator",
+  errorMessage: "checkbox-group__error-message"
 };
 export {
   DesignStates as D,
   TestIds as T,
+  VALUE_MISSING_MESSAGE as V,
   defaultOptions as a,
   semanticClassNames as b,
   DisplayNames as c,

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

@@ -9,12 +9,14 @@ const MANIFEST_DEFAULT_VALIDATION_DISPLAY_NAMES = {
 };
 function manifestValidation({
   valueDataType = DATA.DATA_TYPE.text,
+  valueParameter,
   displayNames = {}
 } = {}) {
   const names = {
     ...MANIFEST_DEFAULT_VALIDATION_DISPLAY_NAMES,
     ...displayNames
   };
+  const valueParam = valueParameter ?? { dataType: valueDataType };
   const fieldValidityItems = {
     valid: {
       dataType: DATA.DATA_TYPE.booleanValue,
@@ -46,7 +48,7 @@ function manifestValidation({
       displayName: names.onValidate,
       [DATA.DATA_TYPE.function]: {
         parameters: [
-          { dataType: valueDataType },
+          valueParam,
           // value
           {
             // cause: 'mount' | 'change' | 'blur'

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

@@ -0,0 +1,26 @@
+import { useState, useCallback, useEffect } from "react";
+import { u as useResizeObserver } from "./useResizeObserver.js";
+const isDisplayed = (element) => getComputedStyle(element).display !== "none";
+function useHasDisplayedElement(containerRef, selectors, enabled = true) {
+  const [hasDisplayedElement, setHasDisplayedElement] = useState(true);
+  const selectorList = selectors.join(", ");
+  const evaluate = useCallback(() => {
+    const container = containerRef.current;
+    if (!enabled || !container) {
+      setHasDisplayedElement(true);
+      return;
+    }
+    const elements = Array.from(
+      container.querySelectorAll(selectorList)
+    );
+    setHasDisplayedElement(elements.some(isDisplayed));
+  }, [containerRef, selectorList, enabled]);
+  useResizeObserver({ callback: evaluate, ref: containerRef, enabled });
+  useEffect(() => {
+    evaluate();
+  }, [evaluate]);
+  return hasDisplayedElement;
+}
+export {
+  useHasDisplayedElement as u
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2439.0",
+  "version": "1.2441.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "323c22f6f5cfb91586f845bc87846711d77dc53164daf7c8d8cc86d2"
+  "falconPackageHash": "46ae1fbe924e1d979e3e1f23fc20a16506c636ffa2f9b369b56f2aa3"
 }

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

@@ -1,80 +0,0 @@
-import { useState, useMemo, useRef, useEffect, useCallback } from "react";
-const sameValidity = (a, b) => a !== null && a.valid === b.valid && a.validationMessage === b.validationMessage;
-function useValidatedField({
-  value,
-  valueKey,
-  intrinsic,
-  fieldValidity,
-  showValidityIndication,
-  onValidate,
-  onValidityChange
-}) {
-  const isGateControlled = showValidityIndication !== void 0;
-  const [touched, setTouched] = useState(false);
-  const showIndication = isGateControlled ? Boolean(showValidityIndication) : touched;
-  const changeKey = valueKey === void 0 ? value : valueKey;
-  const customInvalid = (fieldValidity == null ? void 0 : fieldValidity.valid) === false;
-  const customMessage = (fieldValidity == null ? void 0 : fieldValidity.validationMessage) ?? "";
-  const validity = useMemo(() => {
-    const valid = intrinsic.valid && !customInvalid;
-    let validationMessage = "";
-    if (!intrinsic.valid) {
-      validationMessage = intrinsic.validationMessage;
-    } else if (customInvalid) {
-      validationMessage = customMessage;
-    }
-    return { valid, validationMessage };
-  }, [
-    intrinsic.valid,
-    intrinsic.validationMessage,
-    customInvalid,
-    customMessage
-  ]);
-  const onValidateRef = useRef(onValidate);
-  onValidateRef.current = onValidate;
-  const onValidityChangeRef = useRef(onValidityChange);
-  onValidityChangeRef.current = onValidityChange;
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  const lastEmittedRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (sameValidity(lastEmittedRef.current, validity)) {
-      return;
-    }
-    lastEmittedRef.current = validity;
-    (_a = onValidityChangeRef.current) == null ? void 0 : _a.call(onValidityChangeRef, validity);
-  }, [validity]);
-  const mountedRef = useRef(false);
-  const prevKeyRef = useRef(changeKey);
-  useEffect(() => {
-    var _a;
-    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "mount");
-    mountedRef.current = true;
-    prevKeyRef.current = changeKey;
-  }, []);
-  useEffect(() => {
-    var _a;
-    if (!mountedRef.current) {
-      return;
-    }
-    if (prevKeyRef.current === changeKey) {
-      return;
-    }
-    prevKeyRef.current = changeKey;
-    if (showIndication) {
-      (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "change");
-    }
-  }, [changeKey, showIndication]);
-  const handleBlur = useCallback(() => {
-    var _a;
-    if (!isGateControlled) {
-      setTouched(true);
-    }
-    (_a = onValidateRef.current) == null ? void 0 : _a.call(onValidateRef, valueRef.current, "blur");
-  }, [isGateControlled]);
-  return { validity, showValidityIndication: showIndication, handleBlur };
-}
-export {
-  useValidatedField as u
-};