@wix/editor-react-components 1.2863.0 → 1.2865.0

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

@@ -49,6 +49,7 @@ const MultiStateBox = (props) => {
     states = [],
     activeStateIndex,
     activeStateName,
+    keepMounted = false,
     onChange,
     onClick,
     onDblClick,
@@ -95,7 +96,7 @@ const MultiStateBox = (props) => {
       className: clsx(selectors.root, styles.root, className),
       children: states.map((state2, index) => {
         const isActive = index === activeIndex;
-        if (!isActive && !visitedKeys.has(stateKeys[index])) {
+        if (!keepMounted && !isActive && !visitedKeys.has(stateKeys[index])) {
           return null;
         }
         return /* @__PURE__ */ jsx(

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

@@ -9,5 +9,6 @@ export interface MultiStateBoxProps extends SdkFunctionClickableProps, SdkFuncti
     states: ReadonlyArray<MultiStateBoxItem>;
     activeStateIndex?: number;
     activeStateName?: string;
+    keepMounted?: boolean;
     onChange?: () => void;
 }

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

@@ -1,11 +1,14 @@
 import { jsx } from "react/jsx-runtime";
+import { useService } from "@wix/services-manager-react";
+import { E as ExperimentsDefinition } from "../chunks/index7.js";
 import { useState } from "react";
 import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
-import { T as TestIds } from "../chunks/constants7.js";
+import { T as TestIds, a as TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT } from "../chunks/constants7.js";
 import { c as clsx } from "../chunks/clsx.js";
 import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
 import { c as cn } from "../chunks/index8.js";
 const wrapper = "wrapper__pObMN";
+const layerCountClamp = "layerCountClamp__8fNcu";
 const colorAnimation5 = "colorAnimation5__FQZvI";
 const changeColors5 = "change-colors-5__CCuro";
 const colorAnimation4 = "colorAnimation4__HdaHW";
@@ -16,6 +19,7 @@ const text = "text__0sLMq";
 const block = "block__GxL2G";
 const styles = {
   wrapper,
+  layerCountClamp,
   colorAnimation5,
   "change-colors-5": "change-colors-5__CCuro",
   changeColors5,
@@ -28,12 +32,24 @@ const styles = {
   text,
   block
 };
-const TextEffectsRetro$1 = (props) => {
+const MAX_LAYER_COUNT = 4;
+const TextEffectsRetro$1 = ({
+  isLayerCountClampEnabled = false,
+  ...props
+}) => {
   const { content, arePatternsDisabled } = usePatterns(props);
   const [animationClass, setAnimationClass] = useState("");
   const getComputedLayerCountClassName = (event) => {
     const layerCount = window.getComputedStyle(event.currentTarget).getPropertyValue("--layer-count");
-    return `colorAnimation${layerCount}`;
+    if (!isLayerCountClampEnabled) {
+      return `colorAnimation${layerCount}`;
+    }
+    const parsedLayerCount = parseInt(layerCount, 10);
+    const clampedLayerCount = Math.min(
+      Math.max(Number.isNaN(parsedLayerCount) ? 1 : parsedLayerCount, 1),
+      MAX_LAYER_COUNT
+    );
+    return `colorAnimation${clampedLayerCount}`;
   };
   return /* @__PURE__ */ jsx(
     TextEffectsShared,
@@ -59,7 +75,9 @@ const TextEffectsRetro$1 = (props) => {
           arePatternsDisabled,
           patternScope: props.patternScope,
           unitProps: (data) => ({
-            className: clsx(styles.wrapper, styles[animationClass]),
+            className: clsx(styles.wrapper, styles[animationClass], {
+              [styles.layerCountClamp]: isLayerCountClampEnabled
+            }),
             "data-text": data,
             disabledPattern: arePatternsDisabled
           }),
@@ -77,6 +95,7 @@ const TextEffectsRetro$1 = (props) => {
   );
 };
 const TextEffectsRetro = (props) => {
+  var _a;
   const {
     text: text2,
     link,
@@ -85,6 +104,11 @@ const TextEffectsRetro = (props) => {
     patternScope = "none",
     a11y
   } = props;
+  const experimentsService = useService(ExperimentsDefinition);
+  const isLayerCountClampEnabled = ((_a = experimentsService == null ? void 0 : experimentsService.isOpen) == null ? void 0 : _a.call(
+    experimentsService,
+    TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT
+  )) ?? false;
   return /* @__PURE__ */ jsx(
     TextEffectsRetro$1,
     {
@@ -98,7 +122,8 @@ const TextEffectsRetro = (props) => {
       language: "en",
       patternScope,
       initialReducedMotion: false,
-      customClassNames: []
+      customClassNames: [],
+      isLayerCountClampEnabled
     }
   );
 };

package/dist/site/components/TextEffectsRetro/components/TextEffectsRetro.d.ts

@@ -1,5 +1,7 @@
 import { default as React } from 'react';
 import { TextEffectsSharedProps } from '../../TextEffectsShared/TextEffectsShared.types';
-export type TextEffectsRetroProps = TextEffectsSharedProps;
-declare const TextEffectsRetro: React.FC<TextEffectsSharedProps>;
+export type TextEffectsRetroProps = TextEffectsSharedProps & {
+    isLayerCountClampEnabled?: boolean;
+};
+declare const TextEffectsRetro: React.FC<TextEffectsRetroProps>;
 export default TextEffectsRetro;

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

@@ -7,6 +7,7 @@ export declare const TestIds: {
 };
 export declare const COMPONENT_ID = "2f4c7e1a-d8b3-4c5f-a9d2-6b8e3f1a7c4d";
 export declare const TEXT_TWIST_PANEL_ID = "4b11b85b-e246-4c9e-a4da-8334bfeb5748";
+export declare const TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT = "textEffectsRetroLayerCountClamp";
 export declare const DisplayNames: {
     readonly cssCustomProperties: {
         readonly disableInnerAnimation: "Animation";