@wix/editor-react-components 1.2443.0 → 1.2445.0

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

@@ -6,8 +6,8 @@ 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 { 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 { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { u as useHasDisplayedElement } from "../chunks/useHasDisplayedElement.js";
@@ -16747,6 +16747,31 @@ var Lottie$1 = function Lottie2(props) {
     mode: (_c = interactivity === null || interactivity === void 0 ? void 0 : interactivity.mode) !== null && _c !== void 0 ? _c : "scroll"
   });
 };
+const applyLottieA11y = (container, a11y) => {
+  const animEl = (container == null ? void 0 : container.querySelector("svg")) ?? (container == null ? void 0 : container.querySelector("canvas"));
+  if (!animEl) {
+    return;
+  }
+  if (a11y == null ? void 0 : a11y.ariaLabel) {
+    animEl.setAttribute("aria-label", a11y.ariaLabel);
+    animEl.setAttribute("role", "img");
+  } else {
+    animEl.removeAttribute("role");
+    animEl.removeAttribute("aria-label");
+  }
+  if (a11y == null ? void 0 : a11y.ariaHidden) {
+    animEl.setAttribute("aria-hidden", "true");
+  } else {
+    animEl.removeAttribute("aria-hidden");
+  }
+};
+const toContainerA11y = (a11y) => {
+  const attrs = convertA11yKeysToHtmlFormat(a11y);
+  delete attrs["aria-label"];
+  delete attrs["aria-hidden"];
+  delete attrs["role"];
+  return attrs;
+};
 const root = "root__qcSXu";
 const lottieContainer = "lottieContainer__2ucBB";
 const animation = "animation__x5-6f";
@@ -16762,15 +16787,28 @@ const styles = {
   animationClickWrapper
 };
 const TypedLottiePlayer = Lottie$1;
-const LottieAnimation = ({ a11y, animationData, ...playerProps }) => animationData !== null ? /* @__PURE__ */ jsx(
-  TypedLottiePlayer,
-  {
-    className: styles.animation,
-    animationData,
-    ...playerProps,
-    ...a11y && convertA11yKeysToHtmlFormat(a11y)
-  }
-) : null;
+const LottieAnimation = ({ a11y, animationData, lottieRef, onDOMLoaded, ...playerProps }) => {
+  const handleDOMLoaded = (event) => {
+    var _a, _b;
+    applyLottieA11y((_b = (_a = lottieRef == null ? void 0 : lottieRef.current) == null ? void 0 : _a.animationContainerRef) == null ? void 0 : _b.current, a11y);
+    onDOMLoaded == null ? void 0 : onDOMLoaded(event);
+  };
+  useEffect(() => {
+    var _a, _b;
+    applyLottieA11y((_b = (_a = lottieRef == null ? void 0 : lottieRef.current) == null ? void 0 : _a.animationContainerRef) == null ? void 0 : _b.current, a11y);
+  }, [a11y, lottieRef]);
+  return animationData !== null ? /* @__PURE__ */ jsx(
+    TypedLottiePlayer,
+    {
+      className: styles.animation,
+      animationData,
+      lottieRef,
+      onDOMLoaded: handleDOMLoaded,
+      ...playerProps,
+      ...a11y && toContainerA11y(a11y)
+    }
+  ) : null;
+};
 function useLottie({
   animationUrl,
   autoplay = true,

package/dist/site/components/Lottie/utils/lottieA11y.d.ts

@@ -0,0 +1,3 @@
+import { LottieProps } from '../types';
+export declare const applyLottieA11y: (container: HTMLDivElement | null | undefined, a11y: LottieProps["a11y"]) => void;
+export declare const toContainerA11y: (a11y: NonNullable<LottieProps["a11y"]>) => Record<string, string | number | boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2443.0",
+  "version": "1.2445.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -82,7 +82,7 @@
     "@wix/sdk": "^1.21.13",
     "@wix/services-manager-react": "^0.1.27",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.191.0",
+    "@wix/site-ui": "1.192.0",
     "@wix/video": "^1.85.0",
     "@wix/viewer-service-consent-policy": "^1.0.100",
     "@wix/web-bi-logger": "^2.1.26",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "46ae1fbe924e1d979e3e1f23fc20a16506c636ffa2f9b369b56f2aa3"
+  "falconPackageHash": "fb22e8c05ce26a57255ba8adfa67c91f00ae3d1a19b7ff0f710a37b0"
 }