@wix/editor-react-components 1.2862.0 → 1.2864.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.
@@ -136,7 +136,7 @@
136
136
  .emptyStateBanner__W741Z {
137
137
  box-sizing: border-box;
138
138
  width: 100%;
139
- padding: 16px;
139
+ padding: 42px;
140
140
  text-align: center;
141
141
  direction: var(--wix-opt-in-direction, ltr);
142
142
  }
@@ -1,11 +1,14 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import { useService } from "@wix/services-manager-react";
3
+ import { E as ExperimentsDefinition } from "../chunks/index7.js";
2
4
  import { useState } from "react";
3
5
  import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
4
- import { T as TestIds } from "../chunks/constants7.js";
6
+ import { T as TestIds, a as TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT } from "../chunks/constants7.js";
5
7
  import { c as clsx } from "../chunks/clsx.js";
6
8
  import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
7
9
  import { c as cn } from "../chunks/index8.js";
8
10
  const wrapper = "wrapper__pObMN";
11
+ const layerCountClamp = "layerCountClamp__8fNcu";
9
12
  const colorAnimation5 = "colorAnimation5__FQZvI";
10
13
  const changeColors5 = "change-colors-5__CCuro";
11
14
  const colorAnimation4 = "colorAnimation4__HdaHW";
@@ -16,6 +19,7 @@ const text = "text__0sLMq";
16
19
  const block = "block__GxL2G";
17
20
  const styles = {
18
21
  wrapper,
22
+ layerCountClamp,
19
23
  colorAnimation5,
20
24
  "change-colors-5": "change-colors-5__CCuro",
21
25
  changeColors5,
@@ -28,12 +32,24 @@ const styles = {
28
32
  text,
29
33
  block
30
34
  };
31
- const TextEffectsRetro$1 = (props) => {
35
+ const MAX_LAYER_COUNT = 4;
36
+ const TextEffectsRetro$1 = ({
37
+ isLayerCountClampEnabled = false,
38
+ ...props
39
+ }) => {
32
40
  const { content, arePatternsDisabled } = usePatterns(props);
33
41
  const [animationClass, setAnimationClass] = useState("");
34
42
  const getComputedLayerCountClassName = (event) => {
35
43
  const layerCount = window.getComputedStyle(event.currentTarget).getPropertyValue("--layer-count");
36
- return `colorAnimation${layerCount}`;
44
+ if (!isLayerCountClampEnabled) {
45
+ return `colorAnimation${layerCount}`;
46
+ }
47
+ const parsedLayerCount = parseInt(layerCount, 10);
48
+ const clampedLayerCount = Math.min(
49
+ Math.max(Number.isNaN(parsedLayerCount) ? 1 : parsedLayerCount, 1),
50
+ MAX_LAYER_COUNT
51
+ );
52
+ return `colorAnimation${clampedLayerCount}`;
37
53
  };
38
54
  return /* @__PURE__ */ jsx(
39
55
  TextEffectsShared,
@@ -59,7 +75,9 @@ const TextEffectsRetro$1 = (props) => {
59
75
  arePatternsDisabled,
60
76
  patternScope: props.patternScope,
61
77
  unitProps: (data) => ({
62
- className: clsx(styles.wrapper, styles[animationClass]),
78
+ className: clsx(styles.wrapper, styles[animationClass], {
79
+ [styles.layerCountClamp]: isLayerCountClampEnabled
80
+ }),
63
81
  "data-text": data,
64
82
  disabledPattern: arePatternsDisabled
65
83
  }),
@@ -77,6 +95,7 @@ const TextEffectsRetro$1 = (props) => {
77
95
  );
78
96
  };
79
97
  const TextEffectsRetro = (props) => {
98
+ var _a;
80
99
  const {
81
100
  text: text2,
82
101
  link,
@@ -85,6 +104,11 @@ const TextEffectsRetro = (props) => {
85
104
  patternScope = "none",
86
105
  a11y
87
106
  } = props;
107
+ const experimentsService = useService(ExperimentsDefinition);
108
+ const isLayerCountClampEnabled = ((_a = experimentsService == null ? void 0 : experimentsService.isOpen) == null ? void 0 : _a.call(
109
+ experimentsService,
110
+ TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT
111
+ )) ?? false;
88
112
  return /* @__PURE__ */ jsx(
89
113
  TextEffectsRetro$1,
90
114
  {
@@ -98,7 +122,8 @@ const TextEffectsRetro = (props) => {
98
122
  language: "en",
99
123
  patternScope,
100
124
  initialReducedMotion: false,
101
- customClassNames: []
125
+ customClassNames: [],
126
+ isLayerCountClampEnabled
102
127
  }
103
128
  );
104
129
  };
@@ -1,5 +1,7 @@
1
1
  import { default as React } from 'react';
2
2
  import { TextEffectsSharedProps } from '../../TextEffectsShared/TextEffectsShared.types';
3
- export type TextEffectsRetroProps = TextEffectsSharedProps;
4
- declare const TextEffectsRetro: React.FC<TextEffectsSharedProps>;
3
+ export type TextEffectsRetroProps = TextEffectsSharedProps & {
4
+ isLayerCountClampEnabled?: boolean;
5
+ };
6
+ declare const TextEffectsRetro: React.FC<TextEffectsRetroProps>;
5
7
  export default TextEffectsRetro;
@@ -7,6 +7,7 @@ export declare const TestIds: {
7
7
  };
8
8
  export declare const COMPONENT_ID = "2f4c7e1a-d8b3-4c5f-a9d2-6b8e3f1a7c4d";
9
9
  export declare const TEXT_TWIST_PANEL_ID = "4b11b85b-e246-4c9e-a4da-8334bfeb5748";
10
+ export declare const TEXT_EFFECTS_RETRO_LAYER_COUNT_CLAMP_EXPERIMENT = "textEffectsRetroLayerCountClamp";
10
11
  export declare const DisplayNames: {
11
12
  readonly cssCustomProperties: {
12
13
  readonly disableInnerAnimation: "Animation";