@wix/editor-react-components 1.2528.0 → 1.2529.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  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";
2
- import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants19.js";
2
+ import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants21.js";
3
3
  import { w as withSpec } from "../chunks/manifest.js";
4
4
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
5
5
  const displayConfig = {
@@ -1,5 +1,5 @@
1
1
  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";
2
- import { D as DesignStates, b as DisplayNames } from "../chunks/constants21.js";
2
+ import { D as DesignStates, b as DisplayNames } from "../chunks/constants20.js";
3
3
  import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
4
4
  import { w as withSpec } from "../chunks/manifest.js";
5
5
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
3
3
  import { c as clsx } from "../chunks/clsx.js";
4
- import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants20.js";
4
+ import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants19.js";
5
5
  import { d as debounce } from "../chunks/performanceUtils.js";
6
6
  import { useService } from "@wix/services-manager-react";
7
7
  import { E as EnvironmentDefinition } from "../chunks/index2.js";
@@ -1,5 +1,5 @@
1
1
  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";
2
- 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";
2
+ 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";
3
3
  import { w as withSpec } from "../chunks/manifest.js";
4
4
  import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
5
5
  import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
@@ -1,7 +1,6 @@
1
1
  import { default as React } from 'react';
2
2
  import { MenuItemType } from '../Menu/Menu.types';
3
3
  import { A11y, Direction } from '@wix/editor-react-types';
4
- import { AnimatedIconBuilderProps } from '../AnimatedIcon/types';
5
4
  import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
6
5
  type TestCompProps = {
7
6
  id: string;
@@ -27,7 +26,6 @@ type TestCompProps = {
27
26
  errorText?: {
28
27
  text?: string;
29
28
  };
30
- dummyAnimatedIcon?: AnimatedIconBuilderProps;
31
29
  };
32
30
  a11y?: A11y;
33
31
  isEnabled?: boolean;
@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import { c as clsx } from "../chunks/clsx.js";
3
3
  import { f as formatClassNames } from "../chunks/classNames.js";
4
4
  import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
5
- import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
6
5
  const semanticClassNames = {
7
6
  root: "test-comp-card"
8
7
  };
@@ -39,7 +38,7 @@ const styles = {
39
38
  functionBtn
40
39
  };
41
40
  const TestComp = (props) => {
42
- var _a, _b, _c, _d, _e, _f, _g, _h;
41
+ var _a, _b, _c, _d, _e, _f, _g;
43
42
  const {
44
43
  id,
45
44
  className,
@@ -144,23 +143,13 @@ const TestComp = (props) => {
144
143
  }
145
144
  ),
146
145
  isError && /* @__PURE__ */ jsx("p", { className: "card-error-text", children: ((_e = elementProps.errorText) == null ? void 0 : _e.text) || "Something went wrong" }),
147
- /* @__PURE__ */ jsx(
148
- AnimatedIconWithReducedMotion,
149
- {
150
- ...elementProps.dummyAnimatedIcon,
151
- className: clsx(
152
- "dummy-animated-icon",
153
- (_f = elementProps.dummyAnimatedIcon) == null ? void 0 : _f.className
154
- )
155
- }
156
- ),
157
- ((_g = elementProps.image) == null ? void 0 : _g.src) && /* @__PURE__ */ jsx(
146
+ ((_f = elementProps.image) == null ? void 0 : _f.src) && /* @__PURE__ */ jsx(
158
147
  "div",
159
148
  {
160
149
  className: clsx(
161
150
  styles.imageWrapper,
162
151
  "card-image",
163
- (_h = elementProps.image) == null ? void 0 : _h.className
152
+ (_g = elementProps.image) == null ? void 0 : _g.className
164
153
  ),
165
154
  children: /* @__PURE__ */ jsx(
166
155
  "img",
@@ -205,28 +205,4 @@
205
205
  }
206
206
  .presetWrapper__J1yzj {
207
207
  display: contents;
208
- }
209
- .animatedIcon__3o5ii {
210
- --size: 16px;
211
- --fill: #000000;
212
- --rotation: 0deg;
213
- }
214
- .animatedIcon__3o5ii {
215
- display: block;
216
- width: inherit;
217
- height: inherit;
218
- width: var(--size);
219
- height: var(--size);
220
- }
221
- .animatedIcon__3o5ii svg {
222
- width: var(--size);
223
- height: var(--size);
224
- display: block;
225
- fill: var(--fill);
226
- transform: rotate(var(--rotation));
227
- }
228
- @media (forced-colors: active) {
229
- .animatedIcon__3o5ii svg {
230
- fill: currentColor;
231
- }
232
208
  }
@@ -1,4 +1,4 @@
1
- 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";
1
+ 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";
2
2
  import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
3
3
  const DesignStates = {
4
4
  testCompCard: {
@@ -31,10 +31,7 @@ const manifest = {
31
31
  resources: {
32
32
  client: {
33
33
  componentUrl: "./site/components/TestComp/component.tsx",
34
- moduleSpecifier: "@wix/editor-react-components/TestComp",
35
- dependencies: {
36
- componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
37
- }
34
+ moduleSpecifier: "@wix/editor-react-components/TestComp"
38
35
  }
39
36
  },
40
37
  editorElement: {
@@ -546,15 +543,6 @@ const manifest = {
546
543
  color: {}
547
544
  }
548
545
  }
549
- },
550
- dummyAnimatedIcon: {
551
- spec: "sp.erc.testCompAnimatedIcon",
552
- elementType: ELEMENTS.ELEMENT_TYPE.refElement,
553
- refElement: {
554
- selector: ".dummy-animated-icon",
555
- displayName: "Dummy Animated Icon",
556
- type: "wixEditorElements.AnimatedIcon"
557
- }
558
546
  }
559
547
  },
560
548
  states: {
@@ -1,7 +1,7 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
2
  import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
3
3
  import { p as parseSvg } from "./parseSvg.js";
4
- import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants19.js";
4
+ import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
5
5
  import { c as cn } from "./index9.js";
6
6
  const AnimatedSvg = forwardRef(
7
7
  ({ svgContent, reducedMotion = false, duration }, ref) => {
@@ -7,7 +7,7 @@ import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js
7
7
  import { f as formatClassNames } from "./classNames.js";
8
8
  import { I as IconAnimationTriggers } from "./Button.types.js";
9
9
  import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
10
- import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants21.js";
10
+ import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants20.js";
11
11
  import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
12
12
  import { i as isValidLink } from "./Link.js";
13
13
  const root = "root__IB9QF";
@@ -1,61 +1,56 @@
1
- const DEFAULT_ANIMATION_DURATION = 0.2;
2
- const AnimatedSvgIds = {
3
- animatedSvg: "animatedSvg",
4
- animatedTagPath: "animatedPath",
5
- animateTagForward: "animateForward",
6
- animateTagBackward: "animateBackward"
1
+ const classes = {
2
+ tabs: "tabs",
3
+ tabMenu: "tab-menu",
4
+ tabMenuItemsWrapper: "tab-menu-items-wrapper",
5
+ tabMenuItems: "tab-menu-items",
6
+ menuItem: "menu-item",
7
+ scrollButton: "scroll-button",
8
+ tabContentContainer: "tab-content-container",
9
+ tabContentItem: "tab-content-item"
7
10
  };
8
- var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
9
- AnimationDirection2["FORWARD"] = "Forward";
10
- AnimationDirection2["BACKWARD"] = "Backward";
11
- return AnimationDirection2;
12
- })(AnimationDirection || {});
13
- const AnimatedDataAttributes = {
14
- [
15
- "Forward"
16
- /* FORWARD */
17
- ]: "data-animated-end-path",
18
- [
19
- "Backward"
20
- /* BACKWARD */
21
- ]: "data-animated-start-path"
22
- };
23
- const TestIds = {
24
- animatedSvg: "animated-svg",
25
- animateTagForward: "animate-tag-forward",
26
- animateTagBackward: "animate-tag-backward"
11
+ const OVERFLOW_BEHAVIOR = {
12
+ WRAP: "wrap"
27
13
  };
28
14
  const DesignStates = {
29
- root: {
30
- hover: { displayName: "Hover", className: "animated-icon--hover" },
31
- disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
32
- selected: { displayName: "Selected", className: "animated-icon--selected" }
33
- }
34
- };
35
- const DisplayNames = {
36
- root: {
37
- elementDisplayName: "Animated Icon",
38
- customActions: {
39
- animatedIcon: {
40
- displayName: "Icon"
41
- }
42
- },
43
- data: {
44
- duration: "Duration"
45
- },
46
- cssCustomProperties: {
47
- size: "Size",
48
- fill: "Color",
49
- rotation: "Rotation"
50
- }
15
+ menuItem: {
16
+ hover: { displayName: "Hover", className: "tabs__item--hover" }
51
17
  }
52
18
  };
19
+ const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
20
+ "menu-item-background",
21
+ "menu-item-box-shadow",
22
+ "menu-item-color",
23
+ "menu-item-text-decoration-line",
24
+ "menu-item-letter-spacing",
25
+ "menu-item-text-shadow",
26
+ "menu-item-text-align",
27
+ "menu-item-flex",
28
+ "menu-item-border-width-top",
29
+ "menu-item-border-width-bottom",
30
+ "menu-item-border-width-inline-start",
31
+ "menu-item-border-width-inline-end",
32
+ "menu-item-border-style-top",
33
+ "menu-item-border-style-bottom",
34
+ "menu-item-border-style-inline-start",
35
+ "menu-item-border-style-inline-end",
36
+ "menu-item-border-color-top",
37
+ "menu-item-border-color-bottom",
38
+ "menu-item-border-color-inline-start",
39
+ "menu-item-border-color-inline-end",
40
+ "menu-item-border-radius-start-start",
41
+ "menu-item-border-radius-start-end",
42
+ "menu-item-border-radius-end-start",
43
+ "menu-item-border-radius-end-end",
44
+ "menu-item-padding-top",
45
+ "menu-item-padding-bottom",
46
+ "menu-item-padding-inline-start",
47
+ "menu-item-padding-inline-end"
48
+ ];
49
+ const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
53
50
  export {
54
- AnimatedSvgIds as A,
55
- DEFAULT_ANIMATION_DURATION as D,
56
- TestIds as T,
57
- AnimatedDataAttributes as a,
58
- AnimationDirection as b,
59
- DesignStates as c,
60
- DisplayNames as d
51
+ DesignStates as D,
52
+ OVERFLOW_BEHAVIOR as O,
53
+ ROOT_MENU_ITEM_CSS_PROPERTIES as R,
54
+ ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
55
+ classes as c
61
56
  };
@@ -1,56 +1,59 @@
1
- const classes = {
2
- tabs: "tabs",
3
- tabMenu: "tab-menu",
4
- tabMenuItemsWrapper: "tab-menu-items-wrapper",
5
- tabMenuItems: "tab-menu-items",
6
- menuItem: "menu-item",
7
- scrollButton: "scroll-button",
8
- tabContentContainer: "tab-content-container",
9
- tabContentItem: "tab-content-item"
1
+ const TestIds = {
2
+ buttonContent: "buttonContent",
3
+ buttonLabel: "stylablebutton-label"
10
4
  };
11
- const OVERFLOW_BEHAVIOR = {
12
- WRAP: "wrap"
5
+ const TRANSITION_DURATION = 400;
6
+ const SEMANTIC_CLASS_NAMES = {
7
+ root: "button",
8
+ buttonLabel: "button__label"
13
9
  };
14
10
  const DesignStates = {
15
- menuItem: {
16
- hover: { displayName: "Hover", className: "tabs__item--hover" }
11
+ root: {
12
+ hover: { displayName: "Hover", className: "button--hover" },
13
+ disabled: { displayName: "Disabled", className: "button--disabled" }
14
+ },
15
+ label: {
16
+ hover: { displayName: "Hover", className: "button__label--hover" },
17
+ disabled: { displayName: "Disabled", className: "button__label--disabled" }
18
+ }
19
+ };
20
+ const DisplayNames = {
21
+ root: {
22
+ elementDisplayName: "Button",
23
+ data: {
24
+ disabled: "Disabled"
25
+ },
26
+ cssProperties: {
27
+ gap: "Space between text and icon"
28
+ },
29
+ cssCustomProperties: {
30
+ "content-horizontal-alignment": "Alignment",
31
+ "icon-position": "Icon position"
32
+ },
33
+ presets: {
34
+ baseButton: "Base Button"
35
+ },
36
+ iconPosition: {
37
+ beforeText: "Before text",
38
+ afterText: "After text",
39
+ belowText: "Below text",
40
+ aboveText: "Above text"
41
+ }
42
+ },
43
+ label: {
44
+ elementDisplayName: "Text",
45
+ cssProperties: {
46
+ font: "Typography"
47
+ }
48
+ },
49
+ data: {
50
+ iconCollapsed: "Display icon"
17
51
  }
18
52
  };
19
- const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
20
- "menu-item-background",
21
- "menu-item-box-shadow",
22
- "menu-item-color",
23
- "menu-item-text-decoration-line",
24
- "menu-item-letter-spacing",
25
- "menu-item-text-shadow",
26
- "menu-item-text-align",
27
- "menu-item-flex",
28
- "menu-item-border-width-top",
29
- "menu-item-border-width-bottom",
30
- "menu-item-border-width-inline-start",
31
- "menu-item-border-width-inline-end",
32
- "menu-item-border-style-top",
33
- "menu-item-border-style-bottom",
34
- "menu-item-border-style-inline-start",
35
- "menu-item-border-style-inline-end",
36
- "menu-item-border-color-top",
37
- "menu-item-border-color-bottom",
38
- "menu-item-border-color-inline-start",
39
- "menu-item-border-color-inline-end",
40
- "menu-item-border-radius-start-start",
41
- "menu-item-border-radius-start-end",
42
- "menu-item-border-radius-end-start",
43
- "menu-item-border-radius-end-end",
44
- "menu-item-padding-top",
45
- "menu-item-padding-bottom",
46
- "menu-item-padding-inline-start",
47
- "menu-item-padding-inline-end"
48
- ];
49
- const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
50
53
  export {
51
54
  DesignStates as D,
52
- OVERFLOW_BEHAVIOR as O,
53
- ROOT_MENU_ITEM_CSS_PROPERTIES as R,
54
- ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
55
- classes as c
55
+ SEMANTIC_CLASS_NAMES as S,
56
+ TRANSITION_DURATION as T,
57
+ TestIds as a,
58
+ DisplayNames as b
56
59
  };
@@ -1,59 +1,61 @@
1
- const TestIds = {
2
- buttonContent: "buttonContent",
3
- buttonLabel: "stylablebutton-label"
1
+ const DEFAULT_ANIMATION_DURATION = 0.2;
2
+ const AnimatedSvgIds = {
3
+ animatedSvg: "animatedSvg",
4
+ animatedTagPath: "animatedPath",
5
+ animateTagForward: "animateForward",
6
+ animateTagBackward: "animateBackward"
7
+ };
8
+ var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
9
+ AnimationDirection2["FORWARD"] = "Forward";
10
+ AnimationDirection2["BACKWARD"] = "Backward";
11
+ return AnimationDirection2;
12
+ })(AnimationDirection || {});
13
+ const AnimatedDataAttributes = {
14
+ [
15
+ "Forward"
16
+ /* FORWARD */
17
+ ]: "data-animated-end-path",
18
+ [
19
+ "Backward"
20
+ /* BACKWARD */
21
+ ]: "data-animated-start-path"
4
22
  };
5
- const TRANSITION_DURATION = 400;
6
- const SEMANTIC_CLASS_NAMES = {
7
- root: "button",
8
- buttonLabel: "button__label"
23
+ const TestIds = {
24
+ animatedSvg: "animated-svg",
25
+ animateTagForward: "animate-tag-forward",
26
+ animateTagBackward: "animate-tag-backward"
9
27
  };
10
28
  const DesignStates = {
11
29
  root: {
12
- hover: { displayName: "Hover", className: "button--hover" },
13
- disabled: { displayName: "Disabled", className: "button--disabled" }
14
- },
15
- label: {
16
- hover: { displayName: "Hover", className: "button__label--hover" },
17
- disabled: { displayName: "Disabled", className: "button__label--disabled" }
30
+ hover: { displayName: "Hover", className: "animated-icon--hover" },
31
+ disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
32
+ selected: { displayName: "Selected", className: "animated-icon--selected" }
18
33
  }
19
34
  };
20
35
  const DisplayNames = {
21
36
  root: {
22
- elementDisplayName: "Button",
23
- data: {
24
- disabled: "Disabled"
37
+ elementDisplayName: "Animated Icon",
38
+ customActions: {
39
+ animatedIcon: {
40
+ displayName: "Icon"
41
+ }
25
42
  },
26
- cssProperties: {
27
- gap: "Space between text and icon"
43
+ data: {
44
+ duration: "Duration"
28
45
  },
29
46
  cssCustomProperties: {
30
- "content-horizontal-alignment": "Alignment",
31
- "icon-position": "Icon position"
32
- },
33
- presets: {
34
- baseButton: "Base Button"
35
- },
36
- iconPosition: {
37
- beforeText: "Before text",
38
- afterText: "After text",
39
- belowText: "Below text",
40
- aboveText: "Above text"
41
- }
42
- },
43
- label: {
44
- elementDisplayName: "Text",
45
- cssProperties: {
46
- font: "Typography"
47
+ size: "Size",
48
+ fill: "Color",
49
+ rotation: "Rotation"
47
50
  }
48
- },
49
- data: {
50
- iconCollapsed: "Display icon"
51
51
  }
52
52
  };
53
53
  export {
54
- DesignStates as D,
55
- SEMANTIC_CLASS_NAMES as S,
56
- TRANSITION_DURATION as T,
57
- TestIds as a,
58
- DisplayNames as b
54
+ AnimatedSvgIds as A,
55
+ DEFAULT_ANIMATION_DURATION as D,
56
+ TestIds as T,
57
+ AnimatedDataAttributes as a,
58
+ AnimationDirection as b,
59
+ DesignStates as c,
60
+ DisplayNames as d
59
61
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/editor-react-components",
3
- "version": "1.2528.0",
3
+ "version": "1.2529.0",
4
4
  "description": "React components for the Wix Editor",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -197,5 +197,5 @@
197
197
  "registry": "https://registry.npmjs.org/",
198
198
  "access": "public"
199
199
  },
200
- "falconPackageHash": "becdd5fff4e65482490358dd76ed274a1fd206d85354caa8cb82ff3e"
200
+ "falconPackageHash": "61729e1850309a23091648246790b9c0fb8f4f415912733ba5e1adb6"
201
201
  }