@wix/editor-react-components 1.2427.0 → 1.2429.0

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

@@ -2,6 +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 { 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";
@@ -514,6 +515,7 @@ const PauseButton = ({
     }
   );
 };
+const isDisplayed = (element) => !!element && getComputedStyle(element).display !== "none";
 const Slideshow = (props) => {
   var _a, _b;
   const {
@@ -549,6 +551,7 @@ const Slideshow = (props) => {
   const { translate } = useService(TranslationsDefinition);
   const translateByKey = translate(ARIA_LABEL_NAMESPACE);
   const t = (key) => getTranslation(translateByKey, key, TranslationKeys, DefaultTranslations);
+  const reducedMotion = environmentService.reducedMotion ?? false;
   const siteDirection = environmentService.getLanguageDirection();
   const isSlideLtrDirectionOpen = ((_a = environmentService == null ? void 0 : environmentService.isExperimentOpen) == null ? void 0 : _a.call(
     environmentService,
@@ -558,10 +561,39 @@ const Slideshow = (props) => {
   const visibilityProps = useVisibilityProps({ isHidden, hidden });
   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 [autoplayState, setAutoplayState] = useState(
     autoplay ? AUTOPLAY_STATE.RUNNING : AUTOPLAY_STATE.PAUSED
   );
   const [isPaused, setIsPaused] = useState(false);
+  useEffect(() => {
+    setIsPaused(reducedMotion);
+  }, [reducedMotion]);
+  const shouldShowPauseButton = rawAutoplay && (showPauseButton || autoplay && forcePauseButton);
   const {
     activeSlideIndex,
     lastActiveSlideIndex,
@@ -718,7 +750,7 @@ const Slideshow = (props) => {
               {
                 className: styles.controlsWrapper,
                 ...direction && { dir: direction },
-                children: /* @__PURE__ */ jsxs("div", { className: styles.controlsWrapperContent, children: [
+                children: /* @__PURE__ */ jsxs("div", { ref: controlsRef, className: styles.controlsWrapperContent, children: [
                   /* @__PURE__ */ jsx(
                     NavigationButtons,
                     {
@@ -747,7 +779,7 @@ const Slideshow = (props) => {
                 ] })
               }
             ),
-            rawAutoplay && showPauseButton && /* @__PURE__ */ jsx(
+            shouldShowPauseButton && /* @__PURE__ */ jsx(
               PauseButton,
               {
                 isPaused,

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

@@ -119,6 +119,12 @@ const manifest = {
         [DATA.DATA_TYPE.text]: {
           maxLength: 256
         }
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
       }
     },
     helpArticle: {

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

@@ -120,6 +120,12 @@ const manifest = {
         [DATA.DATA_TYPE.text]: {
           maxLength: 256
         }
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
       }
     },
     displayFilters: {

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

@@ -120,6 +120,12 @@ const manifest = {
         [DATA.DATA_TYPE.text]: {
           maxLength: 256
         }
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
       }
     },
     displayFilters: {

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

@@ -71,6 +71,12 @@ const manifest = {
           maxLength: 256
         }
       },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
       autoPlay: {
         dataType: DATA.DATA_TYPE.booleanValue,
         displayName: "Play automatically"

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

@@ -71,6 +71,12 @@ const manifest = {
           maxLength: 256
         }
       },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
       autoPlay: {
         dataType: DATA.DATA_TYPE.booleanValue,
         displayName: "Play automatically"

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

@@ -121,6 +121,12 @@ const manifest = {
           maxLength: 256
         }
       },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
       autoPlay: {
         dataType: DATA.DATA_TYPE.booleanValue,
         displayName: "Play automatically"

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

@@ -2,9 +2,13 @@ import { useEffect } from "react";
 const useResizeObserver = ({
   callback,
   ref,
-  elem
+  elem,
+  enabled = true
 }) => {
   useEffect(() => {
+    if (!enabled) {
+      return;
+    }
     const observer = new ResizeObserver(callback);
     if (ref == null ? void 0 : ref.current) {
       observer.observe(ref.current);
@@ -15,7 +19,7 @@ const useResizeObserver = ({
     return () => {
       observer.disconnect();
     };
-  }, [ref, elem, callback]);
+  }, [ref, elem, callback, enabled]);
 };
 export {
   useResizeObserver as u

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2427.0",
+  "version": "1.2429.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -196,5 +196,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "7e5e8f4df3bd40a58ae6e630247200758716ca62abcf9c70ebad8ec7"
+  "falconPackageHash": "8cae54aded15ec7895d83adf7c984948c4f35693fd3cda3b11243737"
 }