@wix/editor-react-components 1.2438.0 → 1.2440.0

package/dist/site/components/GoogleMap/css.css

@@ -1,6 +1,20 @@
 .mapContainer__E0LTn {
   width: 100%;
   height: 100%;
+}
+.mapContainer__E0LTn .gm-style a:focus-visible {
+  outline: auto;
+}
+.mapContainer__E0LTn .gm-ui-hover-effect:focus-visible {
+  outline: 2px solid #116dff;
+  outline-offset: 1px;
+  box-shadow: 0 0 1px 2px #ffffff;
+  outline-offset: -4px;
+}
+
+#SITE_CONTAINER.focus-ring-active.keyboard-tabbing-on .mapContainer__E0LTn .gm-style a:focus,
+#SITE_CONTAINER.focus-ring-active.keyboard-tabbing-on .mapContainer__E0LTn .gm-style-iw *:focus {
+  box-shadow: none !important;
 }.title__jE00O {
   font-size: 14px;
   font-weight: 500;
@@ -15,11 +29,25 @@
 
 .link__AM1ap {
   display: block;
+  width: fit-content;
   font-size: 13px;
   font-weight: 400;
   color: var(--wst-links-and-actions-color, #1a73e8);
   text-decoration: underline;
 }
+#SITE_CONTAINER.focus-ring-active.keyboard-tabbing-on .link__AM1ap:focus {
+  outline: 2px solid #116dff;
+  outline-offset: 1px;
+  box-shadow: 0 0 1px 2px #ffffff;
+  outline-offset: -2px;
+}
+@media (forced-colors: active) {
+  .link__AM1ap:focus {
+    outline: 3px solid Highlight !important;
+    outline-offset: -3px !important;
+    box-shadow: none;
+  }
+}
 
 .pinIcon__PgsnW svg {
   width: 32px;

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/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/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/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.2438.0",
+  "version": "1.2440.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "d82d11b87fcf12780a9013df58b95f5dabccd3ac2828ca6e58fa3e19"
+  "falconPackageHash": "05bfdc5d1e1c70b3571049d1109e49b13806fb2867a2430442f10219"
 }