@wix/editor-react-components 1.2173.0 → 1.2174.0

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

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { s as selectors } from "../chunks/constants22.js";
 const root = "root__zTlgX";
@@ -63,13 +63,25 @@ const MultiStateBox = (props) => {
     activeStateName
   );
   const stateKeys = getStateKeys(states);
+  const activeKey = stateKeys[activeIndex];
+  const [visitedKeys, setVisitedKeys] = useState(
+    () => activeKey === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([activeKey])
+  );
   const prevActiveIndexRef = useRef(activeIndex);
   useEffect(() => {
     if (prevActiveIndexRef.current !== activeIndex) {
       prevActiveIndexRef.current = activeIndex;
       onChange == null ? void 0 : onChange();
+      setVisitedKeys((prev) => {
+        if (activeKey === void 0 || prev.has(activeKey)) {
+          return prev;
+        }
+        const next = new Set(prev);
+        next.add(activeKey);
+        return next;
+      });
     }
-  }, [activeIndex, onChange]);
+  }, [activeIndex, activeKey, onChange]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -83,13 +95,16 @@ 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])) {
+          return null;
+        }
         return /* @__PURE__ */ jsx(
           "div",
           {
+            "data-state-index": index,
             className: clsx(selectors.stateContainer, styles.state, {
               [styles["is-active"]]: isActive
             }),
-            ...!isActive && { inert: "" },
             children: state2.content
           },
           stateKeys[index]

package/dist/site/components/MultiStateBox/css.css

@@ -4,10 +4,8 @@
 }
 
 .state__BCzGt {
-  grid-area: 1/1;
   display: grid;
-  opacity: 0;
 }
-.state__BCzGt.is-active__8ZJqC {
-  opacity: 1;
+.state__BCzGt:not(.is-active__8ZJqC) {
+  display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2173.0",
+  "version": "1.2174.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -189,5 +189,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "75674f4d1c7bb2c295aa5487b02255d0127bab9bd2b5f70eead3e598"
+  "falconPackageHash": "077ac90001681d86c1baea7cf9f284f4d42f7c8782e19c2e4b0f4734"
 }