@wix/editor-react-components 1.2526.0 → 1.2527.0

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants21.js";
+import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants19.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 const displayConfig = {

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

@@ -1,5 +1,5 @@
 import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { D as DesignStates, b as DisplayNames } from "../chunks/constants20.js";
+import { D as DesignStates, b as DisplayNames } from "../chunks/constants21.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants19.js";
+import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants20.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
-import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants19.js";
+import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants20.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

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

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { MenuItemType } from '../Menu/Menu.types';
 import { A11y, Direction } from '@wix/editor-react-types';
+import { AnimatedIconBuilderProps } from '../AnimatedIcon/types';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 type TestCompProps = {
     id: string;
@@ -26,6 +27,7 @@ type TestCompProps = {
         errorText?: {
             text?: string;
         };
+        dummyAnimatedIcon?: AnimatedIconBuilderProps;
     };
     a11y?: A11y;
     isEnabled?: boolean;

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 const semanticClassNames = {
   root: "test-comp-card"
 };
@@ -38,7 +39,7 @@ const styles = {
   functionBtn
 };
 const TestComp = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     id,
     className,
@@ -143,13 +144,23 @@ const TestComp = (props) => {
           }
         ),
         isError && /* @__PURE__ */ jsx("p", { className: "card-error-text", children: ((_e = elementProps.errorText) == null ? void 0 : _e.text) || "Something went wrong" }),
-        ((_f = elementProps.image) == null ? void 0 : _f.src) && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
+          AnimatedIconWithReducedMotion,
+          {
+            ...elementProps.dummyAnimatedIcon,
+            className: clsx(
+              "dummy-animated-icon",
+              (_f = elementProps.dummyAnimatedIcon) == null ? void 0 : _f.className
+            )
+          }
+        ),
+        ((_g = elementProps.image) == null ? void 0 : _g.src) && /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
               styles.imageWrapper,
               "card-image",
-              (_g = elementProps.image) == null ? void 0 : _g.className
+              (_h = elementProps.image) == null ? void 0 : _h.className
             ),
             children: /* @__PURE__ */ jsx(
               "img",

package/dist/site/components/TestComp/css.css

@@ -205,4 +205,28 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
+}
+.animatedIcon__3o5ii {
+  --size: 16px;
+  --fill: #000000;
+  --rotation: 0deg;
+}
+.animatedIcon__3o5ii {
+  display: block;
+  width: inherit;
+  height: inherit;
+  width: var(--size);
+  height: var(--size);
+}
+.animatedIcon__3o5ii svg {
+  width: var(--size);
+  height: var(--size);
+  display: block;
+  fill: var(--fill);
+  transform: rotate(var(--rotation));
+}
+@media (forced-colors: active) {
+  .animatedIcon__3o5ii svg {
+    fill: currentColor;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { L as LAYOUT, N as NativeStateType, D as DATA, E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
+import { L as LAYOUT, N as NativeStateType, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-6KMOHX3X.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const DesignStates = {
   testCompCard: {
@@ -31,7 +31,10 @@ const manifest = {
   resources: {
     client: {
       componentUrl: "./site/components/TestComp/component.tsx",
-      moduleSpecifier: "@wix/editor-react-components/TestComp"
+      moduleSpecifier: "@wix/editor-react-components/TestComp",
+      dependencies: {
+        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
+      }
     }
   },
   editorElement: {
@@ -543,6 +546,15 @@ const manifest = {
             color: {}
           }
         }
+      },
+      dummyAnimatedIcon: {
+        spec: "sp.erc.testCompAnimatedIcon",
+        elementType: ELEMENTS.ELEMENT_TYPE.refElement,
+        refElement: {
+          selector: ".dummy-animated-icon",
+          displayName: "Dummy Animated Icon",
+          type: "wixEditorElements.AnimatedIcon"
+        }
       }
     },
     states: {

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
 import { p as parseSvg } from "./parseSvg.js";
-import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants19.js";
 import { c as cn } from "./index9.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

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

@@ -7,7 +7,7 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
 import { f as formatClassNames } from "./classNames.js";
 import { I as IconAnimationTriggers } from "./Button.types.js";
 import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
-import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants21.js";
 import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
 import { i as isValidLink } from "./Link.js";
 const root = "root__IB9QF";

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

@@ -1,56 +1,61 @@
-const classes = {
-  tabs: "tabs",
-  tabMenu: "tab-menu",
-  tabMenuItemsWrapper: "tab-menu-items-wrapper",
-  tabMenuItems: "tab-menu-items",
-  menuItem: "menu-item",
-  scrollButton: "scroll-button",
-  tabContentContainer: "tab-content-container",
-  tabContentItem: "tab-content-item"
+const DEFAULT_ANIMATION_DURATION = 0.2;
+const AnimatedSvgIds = {
+  animatedSvg: "animatedSvg",
+  animatedTagPath: "animatedPath",
+  animateTagForward: "animateForward",
+  animateTagBackward: "animateBackward"
 };
-const OVERFLOW_BEHAVIOR = {
-  WRAP: "wrap"
+var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
+  AnimationDirection2["FORWARD"] = "Forward";
+  AnimationDirection2["BACKWARD"] = "Backward";
+  return AnimationDirection2;
+})(AnimationDirection || {});
+const AnimatedDataAttributes = {
+  [
+    "Forward"
+    /* FORWARD */
+  ]: "data-animated-end-path",
+  [
+    "Backward"
+    /* BACKWARD */
+  ]: "data-animated-start-path"
+};
+const TestIds = {
+  animatedSvg: "animated-svg",
+  animateTagForward: "animate-tag-forward",
+  animateTagBackward: "animate-tag-backward"
 };
 const DesignStates = {
-  menuItem: {
-    hover: { displayName: "Hover", className: "tabs__item--hover" }
+  root: {
+    hover: { displayName: "Hover", className: "animated-icon--hover" },
+    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
+    selected: { displayName: "Selected", className: "animated-icon--selected" }
+  }
+};
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Animated Icon",
+    customActions: {
+      animatedIcon: {
+        displayName: "Icon"
+      }
+    },
+    data: {
+      duration: "Duration"
+    },
+    cssCustomProperties: {
+      size: "Size",
+      fill: "Color",
+      rotation: "Rotation"
+    }
   }
 };
-const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
-  "menu-item-background",
-  "menu-item-box-shadow",
-  "menu-item-color",
-  "menu-item-text-decoration-line",
-  "menu-item-letter-spacing",
-  "menu-item-text-shadow",
-  "menu-item-text-align",
-  "menu-item-flex",
-  "menu-item-border-width-top",
-  "menu-item-border-width-bottom",
-  "menu-item-border-width-inline-start",
-  "menu-item-border-width-inline-end",
-  "menu-item-border-style-top",
-  "menu-item-border-style-bottom",
-  "menu-item-border-style-inline-start",
-  "menu-item-border-style-inline-end",
-  "menu-item-border-color-top",
-  "menu-item-border-color-bottom",
-  "menu-item-border-color-inline-start",
-  "menu-item-border-color-inline-end",
-  "menu-item-border-radius-start-start",
-  "menu-item-border-radius-start-end",
-  "menu-item-border-radius-end-start",
-  "menu-item-border-radius-end-end",
-  "menu-item-padding-top",
-  "menu-item-padding-bottom",
-  "menu-item-padding-inline-start",
-  "menu-item-padding-inline-end"
-];
-const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
-  DesignStates as D,
-  OVERFLOW_BEHAVIOR as O,
-  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
-  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
-  classes as c
+  AnimatedSvgIds as A,
+  DEFAULT_ANIMATION_DURATION as D,
+  TestIds as T,
+  AnimatedDataAttributes as a,
+  AnimationDirection as b,
+  DesignStates as c,
+  DisplayNames as d
 };

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

@@ -1,59 +1,56 @@
-const TestIds = {
-  buttonContent: "buttonContent",
-  buttonLabel: "stylablebutton-label"
+const classes = {
+  tabs: "tabs",
+  tabMenu: "tab-menu",
+  tabMenuItemsWrapper: "tab-menu-items-wrapper",
+  tabMenuItems: "tab-menu-items",
+  menuItem: "menu-item",
+  scrollButton: "scroll-button",
+  tabContentContainer: "tab-content-container",
+  tabContentItem: "tab-content-item"
 };
-const TRANSITION_DURATION = 400;
-const SEMANTIC_CLASS_NAMES = {
-  root: "button",
-  buttonLabel: "button__label"
+const OVERFLOW_BEHAVIOR = {
+  WRAP: "wrap"
 };
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "button--hover" },
-    disabled: { displayName: "Disabled", className: "button--disabled" }
-  },
-  label: {
-    hover: { displayName: "Hover", className: "button__label--hover" },
-    disabled: { displayName: "Disabled", className: "button__label--disabled" }
-  }
-};
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Button",
-    data: {
-      disabled: "Disabled"
-    },
-    cssProperties: {
-      gap: "Space between text and icon"
-    },
-    cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "icon-position": "Icon position"
-    },
-    presets: {
-      baseButton: "Base Button"
-    },
-    iconPosition: {
-      beforeText: "Before text",
-      afterText: "After text",
-      belowText: "Below text",
-      aboveText: "Above text"
-    }
-  },
-  label: {
-    elementDisplayName: "Text",
-    cssProperties: {
-      font: "Typography"
-    }
-  },
-  data: {
-    iconCollapsed: "Display icon"
+  menuItem: {
+    hover: { displayName: "Hover", className: "tabs__item--hover" }
   }
 };
+const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
+  "menu-item-background",
+  "menu-item-box-shadow",
+  "menu-item-color",
+  "menu-item-text-decoration-line",
+  "menu-item-letter-spacing",
+  "menu-item-text-shadow",
+  "menu-item-text-align",
+  "menu-item-flex",
+  "menu-item-border-width-top",
+  "menu-item-border-width-bottom",
+  "menu-item-border-width-inline-start",
+  "menu-item-border-width-inline-end",
+  "menu-item-border-style-top",
+  "menu-item-border-style-bottom",
+  "menu-item-border-style-inline-start",
+  "menu-item-border-style-inline-end",
+  "menu-item-border-color-top",
+  "menu-item-border-color-bottom",
+  "menu-item-border-color-inline-start",
+  "menu-item-border-color-inline-end",
+  "menu-item-border-radius-start-start",
+  "menu-item-border-radius-start-end",
+  "menu-item-border-radius-end-start",
+  "menu-item-border-radius-end-end",
+  "menu-item-padding-top",
+  "menu-item-padding-bottom",
+  "menu-item-padding-inline-start",
+  "menu-item-padding-inline-end"
+];
+const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
   DesignStates as D,
-  SEMANTIC_CLASS_NAMES as S,
-  TRANSITION_DURATION as T,
-  TestIds as a,
-  DisplayNames as b
+  OVERFLOW_BEHAVIOR as O,
+  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
+  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
+  classes as c
 };

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

@@ -1,61 +1,59 @@
-const DEFAULT_ANIMATION_DURATION = 0.2;
-const AnimatedSvgIds = {
-  animatedSvg: "animatedSvg",
-  animatedTagPath: "animatedPath",
-  animateTagForward: "animateForward",
-  animateTagBackward: "animateBackward"
-};
-var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
-  AnimationDirection2["FORWARD"] = "Forward";
-  AnimationDirection2["BACKWARD"] = "Backward";
-  return AnimationDirection2;
-})(AnimationDirection || {});
-const AnimatedDataAttributes = {
-  [
-    "Forward"
-    /* FORWARD */
-  ]: "data-animated-end-path",
-  [
-    "Backward"
-    /* BACKWARD */
-  ]: "data-animated-start-path"
-};
 const TestIds = {
-  animatedSvg: "animated-svg",
-  animateTagForward: "animate-tag-forward",
-  animateTagBackward: "animate-tag-backward"
+  buttonContent: "buttonContent",
+  buttonLabel: "stylablebutton-label"
+};
+const TRANSITION_DURATION = 400;
+const SEMANTIC_CLASS_NAMES = {
+  root: "button",
+  buttonLabel: "button__label"
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "animated-icon--hover" },
-    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
-    selected: { displayName: "Selected", className: "animated-icon--selected" }
+    hover: { displayName: "Hover", className: "button--hover" },
+    disabled: { displayName: "Disabled", className: "button--disabled" }
+  },
+  label: {
+    hover: { displayName: "Hover", className: "button__label--hover" },
+    disabled: { displayName: "Disabled", className: "button__label--disabled" }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Animated Icon",
-    customActions: {
-      animatedIcon: {
-        displayName: "Icon"
-      }
-    },
+    elementDisplayName: "Button",
     data: {
-      duration: "Duration"
+      disabled: "Disabled"
+    },
+    cssProperties: {
+      gap: "Space between text and icon"
     },
     cssCustomProperties: {
-      size: "Size",
-      fill: "Color",
-      rotation: "Rotation"
+      "content-horizontal-alignment": "Alignment",
+      "icon-position": "Icon position"
+    },
+    presets: {
+      baseButton: "Base Button"
+    },
+    iconPosition: {
+      beforeText: "Before text",
+      afterText: "After text",
+      belowText: "Below text",
+      aboveText: "Above text"
+    }
+  },
+  label: {
+    elementDisplayName: "Text",
+    cssProperties: {
+      font: "Typography"
     }
+  },
+  data: {
+    iconCollapsed: "Display icon"
   }
 };
 export {
-  AnimatedSvgIds as A,
-  DEFAULT_ANIMATION_DURATION as D,
-  TestIds as T,
-  AnimatedDataAttributes as a,
-  AnimationDirection as b,
-  DesignStates as c,
-  DisplayNames as d
+  DesignStates as D,
+  SEMANTIC_CLASS_NAMES as S,
+  TRANSITION_DURATION as T,
+  TestIds as a,
+  DisplayNames as b
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2526.0",
+  "version": "1.2527.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "38ddc39d558aa418307877946fe55390b7b8dc343cf13aa1c24660d8"
+  "falconPackageHash": "fb949b64caf86c17470be85eb593775c1b87250cdd373a6266756f83"
 }