@micromag/screen-ranking 0.4.71 → 0.4.74

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.
Files changed (3) hide show
  1. package/es/index.d.ts +2 -2
  2. package/es/index.js +522 -286
  3. package/package.json +18 -17
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ForwardedRef } from 'react';
3
- import { HeadingElement, TextElement, TextStyle, BackgroundElement, Header, Footer } from '@micromag/core';
3
+ import { HeadingElement, TextElement, TextStyle, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface RankingScreenProps {
6
6
  layout?: 'side' | 'over';
@@ -17,7 +17,7 @@ interface RankingScreenProps {
17
17
  current?: boolean;
18
18
  preload?: boolean;
19
19
  type?: string | null;
20
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
20
+ mediaRef?: ForwardedRef<MediaElement> | null;
21
21
  className?: string | null;
22
22
  }
23
23
  declare function RankingScreen({ layout, title, items, itemTitleStyle, itemDescriptionStyle, numbersStyle, ascending, spacing, background, header, footer, current, preload, type, mediaRef: customMediaRef, className, }: RankingScreenProps): react_jsx_runtime.JSX.Element;
package/es/index.js CHANGED
@@ -1,10 +1,7 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
2
+ import { c } from 'react/compiler-runtime';
6
3
  import classNames from 'classnames';
7
- import { useState, useCallback } from 'react';
4
+ import { useState } from 'react';
8
5
  import { ScreenElement } from '@micromag/core/components';
9
6
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
7
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -21,240 +18,486 @@ import { jsx, jsxs } from 'react/jsx-runtime';
21
18
 
22
19
  var styles = {"container":"micromag-screen-ranking-container","background":"micromag-screen-ranking-background","content":"micromag-screen-ranking-content","empty":"micromag-screen-ranking-empty","emptyTitle":"micromag-screen-ranking-emptyTitle","item":"micromag-screen-ranking-item","rankText":"micromag-screen-ranking-rankText","itemTitle":"micromag-screen-ranking-itemTitle","description":"micromag-screen-ranking-description","callToAction":"micromag-screen-ranking-callToAction","disabled":"micromag-screen-ranking-disabled","sideLayout":"micromag-screen-ranking-sideLayout","elementsContainer":"micromag-screen-ranking-elementsContainer","rank":"micromag-screen-ranking-rank","label":"micromag-screen-ranking-label","isPlaceholder":"micromag-screen-ranking-isPlaceholder","scroll":"micromag-screen-ranking-scroll"};
23
20
 
24
- var emptyItems = [null];
25
- function RankingScreen(_ref) {
26
- var _ref$layout = _ref.layout,
27
- layout = _ref$layout === void 0 ? 'side' : _ref$layout,
28
- _ref$title = _ref.title,
29
- title = _ref$title === void 0 ? null : _ref$title,
30
- _ref$items = _ref.items,
31
- items = _ref$items === void 0 ? emptyItems : _ref$items,
32
- _ref$itemTitleStyle = _ref.itemTitleStyle,
33
- itemTitleStyle = _ref$itemTitleStyle === void 0 ? null : _ref$itemTitleStyle,
34
- _ref$itemDescriptionS = _ref.itemDescriptionStyle,
35
- itemDescriptionStyle = _ref$itemDescriptionS === void 0 ? null : _ref$itemDescriptionS,
36
- _ref$numbersStyle = _ref.numbersStyle,
37
- numbersStyle = _ref$numbersStyle === void 0 ? null : _ref$numbersStyle,
38
- _ref$ascending = _ref.ascending,
39
- ascending = _ref$ascending === void 0 ? false : _ref$ascending,
40
- _ref$spacing = _ref.spacing,
41
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
42
- _ref$background = _ref.background,
43
- background = _ref$background === void 0 ? null : _ref$background,
44
- _ref$header = _ref.header,
45
- header = _ref$header === void 0 ? null : _ref$header,
46
- _ref$footer = _ref.footer,
47
- footer = _ref$footer === void 0 ? null : _ref$footer,
48
- _ref$current = _ref.current,
49
- current = _ref$current === void 0 ? true : _ref$current,
50
- _ref$preload = _ref.preload,
51
- preload = _ref$preload === void 0 ? true : _ref$preload,
52
- _ref$type = _ref.type,
53
- type = _ref$type === void 0 ? null : _ref$type,
54
- _ref$mediaRef = _ref.mediaRef,
55
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
56
- _ref$className = _ref.className,
57
- className = _ref$className === void 0 ? null : _ref$className;
58
- var trackScreenEvent = useTrackScreenEvent(type);
59
- var _useScreenSize = useScreenSize(),
60
- width = _useScreenSize.width,
61
- height = _useScreenSize.height,
62
- resolution = _useScreenSize.resolution;
63
- var _useViewerContext = useViewerContext(),
64
- viewerTopHeight = _useViewerContext.topHeight,
65
- viewerBottomHeight = _useViewerContext.bottomHeight,
66
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
67
- var _useViewerWebView = useViewerWebView(),
68
- openWebView = _useViewerWebView.open;
69
- var _usePlaybackContext = usePlaybackContext(),
70
- muted = _usePlaybackContext.muted;
71
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
72
- mediaRef = _usePlaybackMediaRef.ref,
73
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
74
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
75
- var _useScreenRenderConte = useScreenRenderContext(),
76
- isView = _useScreenRenderConte.isView,
77
- isPreview = _useScreenRenderConte.isPreview,
78
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
79
- isEdit = _useScreenRenderConte.isEdit,
80
- isStatic = _useScreenRenderConte.isStatic,
81
- isCapture = _useScreenRenderConte.isCapture;
82
- var finalItems = isPlaceholder ? _toConsumableArray(new Array(10)).map(function () {
83
- return {};
84
- }) : items || [null];
85
- var itemsCount = finalItems !== null ? finalItems.length : 0;
86
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
87
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
88
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
89
- var mediaShouldLoad = current || preload;
90
- var hasTitle = isTextFilled(title);
91
- var titleElement = /*#__PURE__*/jsx(ScreenElement, {
92
- placeholder: "Title",
93
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
21
+ const emptyItems = [null];
22
+ function RankingScreen(t0) {
23
+ const $ = c(109);
24
+ const {
25
+ layout: t1,
26
+ title: t2,
27
+ items: t3,
28
+ itemTitleStyle: t4,
29
+ itemDescriptionStyle: t5,
30
+ numbersStyle: t6,
31
+ ascending: t7,
32
+ spacing: t8,
33
+ background: t9,
34
+ header: t10,
35
+ footer: t11,
36
+ current: t12,
37
+ preload: t13,
38
+ type: t14,
39
+ mediaRef: t15,
40
+ className: t16
41
+ } = t0;
42
+ const layout = t1 === undefined ? "side" : t1;
43
+ const title = t2 === undefined ? null : t2;
44
+ const items = t3 === undefined ? emptyItems : t3;
45
+ const itemTitleStyle = t4 === undefined ? null : t4;
46
+ const itemDescriptionStyle = t5 === undefined ? null : t5;
47
+ const numbersStyle = t6 === undefined ? null : t6;
48
+ const ascending = t7 === undefined ? false : t7;
49
+ const spacing = t8 === undefined ? 20 : t8;
50
+ const background = t9 === undefined ? null : t9;
51
+ const header = t10 === undefined ? null : t10;
52
+ const footer = t11 === undefined ? null : t11;
53
+ const current = t12 === undefined ? true : t12;
54
+ const preload = t13 === undefined ? true : t13;
55
+ const type = t14 === undefined ? null : t14;
56
+ const customMediaRef = t15 === undefined ? null : t15;
57
+ const className = t16 === undefined ? null : t16;
58
+ const trackScreenEvent = useTrackScreenEvent(type);
59
+ const {
60
+ width,
61
+ height,
62
+ resolution
63
+ } = useScreenSize();
64
+ const {
65
+ topHeight: viewerTopHeight,
66
+ bottomHeight: viewerBottomHeight,
67
+ bottomSidesWidth: viewerBottomSidesWidth
68
+ } = useViewerContext();
69
+ const {
70
+ open: openWebView
71
+ } = useViewerWebView();
72
+ const {
73
+ muted
74
+ } = usePlaybackContext();
75
+ const {
76
+ ref: mediaRef,
77
+ isCurrent: t17
78
+ } = usePlaybackMediaRef(current, true);
79
+ const isCurrentMedia = t17 === undefined ? false : t17;
80
+ const {
81
+ isView,
82
+ isPreview,
83
+ isPlaceholder,
84
+ isEdit,
85
+ isStatic,
86
+ isCapture
87
+ } = useScreenRenderContext();
88
+ let t18;
89
+ if ($[0] !== isPlaceholder || $[1] !== items) {
90
+ t18 = isPlaceholder ? [...new Array(10)].map(_temp) : items || [null];
91
+ $[0] = isPlaceholder;
92
+ $[1] = items;
93
+ $[2] = t18;
94
+ } else {
95
+ t18 = $[2];
96
+ }
97
+ const finalItems = t18;
98
+ const itemsCount = finalItems !== null ? finalItems.length : 0;
99
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
100
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
101
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
102
+ const mediaShouldLoad = current || preload;
103
+ let t19;
104
+ if ($[3] !== title) {
105
+ t19 = isTextFilled(title);
106
+ $[3] = title;
107
+ $[4] = t19;
108
+ } else {
109
+ t19 = $[4];
110
+ }
111
+ const hasTitle = t19;
112
+ let t20;
113
+ let t21;
114
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
115
+ t20 = /*#__PURE__*/jsx(FormattedMessage, {
94
116
  id: "BSTWf8",
95
- defaultMessage: [{
96
- "type": 0,
97
- "value": "Title"
98
- }]
99
- }),
100
- emptyClassName: classNames([styles.empty, styles.emptyTitle]),
101
- isEmpty: !hasTitle,
102
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
103
- className: styles.title
104
- }, title)) : null
105
- });
106
- var elements = (finalItems || []).map(function (item, itemI) {
107
- var _ref2 = item || {},
108
- _ref2$title = _ref2.title,
109
- itemTitle = _ref2$title === void 0 ? null : _ref2$title,
110
- _ref2$description = _ref2.description,
111
- description = _ref2$description === void 0 ? null : _ref2$description;
112
- var hasItemTitle = isTextFilled(itemTitle);
113
- var hasDescription = isTextFilled(description);
114
- var _ref3 = itemTitle || {},
115
- _ref3$textStyle = _ref3.textStyle,
116
- titleTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
117
- var _ref4 = description || {},
118
- _ref4$textStyle = _ref4.textStyle,
119
- descriptionTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
120
- var itemTitleElement = /*#__PURE__*/jsx("div", {
121
- className: styles.itemTitle,
122
- children: /*#__PURE__*/jsx(ScreenElement, {
123
- placeholder: "title",
124
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
125
- id: "bmO4Ss",
126
- defaultMessage: [{
127
- "type": 0,
128
- "value": "Entry Title"
129
- }]
130
- }),
131
- emptyClassName: styles.empty,
132
- isEmpty: !hasItemTitle,
133
- children: hasItemTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, itemTitle), {}, {
134
- textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
135
- })) : null
136
- })
117
+ defaultMessage: "Title"
137
118
  });
138
- var descriptionElement = /*#__PURE__*/jsx("div", {
139
- className: styles.description,
140
- children: /*#__PURE__*/jsx(ScreenElement, {
141
- placeholder: "text",
142
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
143
- id: "507VAi",
144
- defaultMessage: [{
145
- "type": 0,
146
- "value": "Description"
147
- }]
148
- }),
149
- emptyClassName: styles.empty,
150
- isEmpty: !hasDescription,
151
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
152
- textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
153
- })) : null
154
- })
119
+ t21 = classNames([styles.empty, styles.emptyTitle]);
120
+ $[5] = t20;
121
+ $[6] = t21;
122
+ } else {
123
+ t20 = $[5];
124
+ t21 = $[6];
125
+ }
126
+ const t22 = !hasTitle;
127
+ let t23;
128
+ if ($[7] !== hasTitle || $[8] !== title) {
129
+ t23 = hasTitle ? /*#__PURE__*/jsx(Heading, {
130
+ className: styles.title,
131
+ ...title
132
+ }) : null;
133
+ $[7] = hasTitle;
134
+ $[8] = title;
135
+ $[9] = t23;
136
+ } else {
137
+ t23 = $[9];
138
+ }
139
+ let t24;
140
+ if ($[10] !== t22 || $[11] !== t23) {
141
+ t24 = /*#__PURE__*/jsx(ScreenElement, {
142
+ placeholder: "Title",
143
+ emptyLabel: t20,
144
+ emptyClassName: t21,
145
+ isEmpty: t22,
146
+ children: t23
155
147
  });
156
- var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
157
- return /*#__PURE__*/jsxs("div", {
158
- className: styles.item,
159
- children: [/*#__PURE__*/jsx("div", {
160
- className: styles.rank,
161
- children: isPlaceholder ? rankText : /*#__PURE__*/jsx(Text, {
162
- className: styles.rankText,
163
- body: rankText,
164
- textStyle: numbersStyle
165
- })
166
- }), /*#__PURE__*/jsxs("div", {
167
- className: styles.label,
168
- children: [itemTitleElement, descriptionElement]
169
- })]
170
- }, "item-".concat(itemI));
171
- });
172
-
173
- // Call to Action
174
-
175
- var hasHeader = isHeaderFilled(header);
176
- var hasFooter = isFooterFilled(footer);
177
- var footerProps = getFooterProps(footer, {
178
- isView: isView,
179
- current: current,
180
- openWebView: openWebView,
181
- isPreview: isPreview
182
- });
183
- var _useState = useState(false),
184
- _useState2 = _slicedToArray(_useState, 2),
185
- scrolledBottom = _useState2[0],
186
- setScrolledBottom = _useState2[1];
187
- var _useDimensionObserver = useDimensionObserver(),
188
- footerRef = _useDimensionObserver.ref,
189
- _useDimensionObserver2 = _useDimensionObserver.height,
190
- foterHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
191
- var onScrolledBottom = useCallback(function (_ref5) {
192
- var initial = _ref5.initial;
193
- if (initial) {
194
- trackScreenEvent('scroll', 'Screen');
195
- }
196
- setScrolledBottom(true);
197
- }, [trackScreenEvent]);
198
- var onScrolledNotBottom = useCallback(function () {
199
- setScrolledBottom(false);
200
- }, [setScrolledBottom]);
201
- var onScrolledTrigger = useCallback(function () {
202
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
203
- if (trigger !== null) {
204
- var scrollPercent = Math.round(trigger * 100);
205
- trackScreenEvent('scroll', scrollPercent, {
206
- scrollPercent: scrollPercent
207
- });
148
+ $[10] = t22;
149
+ $[11] = t23;
150
+ $[12] = t24;
151
+ } else {
152
+ t24 = $[12];
153
+ }
154
+ const titleElement = t24;
155
+ let t25;
156
+ if ($[13] !== finalItems) {
157
+ t25 = finalItems || [];
158
+ $[13] = finalItems;
159
+ $[14] = t25;
160
+ } else {
161
+ t25 = $[14];
162
+ }
163
+ let t26;
164
+ if ($[15] !== ascending || $[16] !== isPlaceholder || $[17] !== itemDescriptionStyle || $[18] !== itemTitleStyle || $[19] !== itemsCount || $[20] !== numbersStyle || $[21] !== t25) {
165
+ let t27;
166
+ if ($[23] !== ascending || $[24] !== isPlaceholder || $[25] !== itemDescriptionStyle || $[26] !== itemTitleStyle || $[27] !== itemsCount || $[28] !== numbersStyle) {
167
+ t27 = (item, itemI) => {
168
+ const {
169
+ title: t28,
170
+ description: t29
171
+ } = item || {};
172
+ const itemTitle = t28 === undefined ? null : t28;
173
+ const description = t29 === undefined ? null : t29;
174
+ const hasItemTitle = isTextFilled(itemTitle);
175
+ const hasDescription = isTextFilled(description);
176
+ const {
177
+ textStyle: t30
178
+ } = itemTitle || {};
179
+ const titleTextStyle = t30 === undefined ? null : t30;
180
+ const {
181
+ textStyle: t31
182
+ } = description || {};
183
+ const descriptionTextStyle = t31 === undefined ? null : t31;
184
+ const itemTitleElement = /*#__PURE__*/jsx("div", {
185
+ className: styles.itemTitle,
186
+ children: /*#__PURE__*/jsx(ScreenElement, {
187
+ placeholder: "title",
188
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
189
+ id: "bmO4Ss",
190
+ defaultMessage: "Entry Title"
191
+ }),
192
+ emptyClassName: styles.empty,
193
+ isEmpty: !hasItemTitle,
194
+ children: hasItemTitle ? /*#__PURE__*/jsx(Heading, {
195
+ ...itemTitle,
196
+ textStyle: {
197
+ ...(itemTitleStyle || null),
198
+ ...titleTextStyle
199
+ }
200
+ }) : null
201
+ })
202
+ });
203
+ const descriptionElement = /*#__PURE__*/jsx("div", {
204
+ className: styles.description,
205
+ children: /*#__PURE__*/jsx(ScreenElement, {
206
+ placeholder: "text",
207
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
208
+ id: "507VAi",
209
+ defaultMessage: "Description"
210
+ }),
211
+ emptyClassName: styles.empty,
212
+ isEmpty: !hasDescription,
213
+ children: hasDescription ? /*#__PURE__*/jsx(Text, {
214
+ ...description,
215
+ textStyle: {
216
+ ...(itemDescriptionStyle || null),
217
+ ...descriptionTextStyle
218
+ }
219
+ }) : null
220
+ })
221
+ });
222
+ const rankText = `${ascending ? itemI + 1 : itemsCount - itemI}`;
223
+ return /*#__PURE__*/jsxs("div", {
224
+ className: styles.item,
225
+ children: [/*#__PURE__*/jsx("div", {
226
+ className: styles.rank,
227
+ children: isPlaceholder ? rankText : /*#__PURE__*/jsx(Text, {
228
+ className: styles.rankText,
229
+ body: rankText,
230
+ textStyle: numbersStyle
231
+ })
232
+ }), /*#__PURE__*/jsxs("div", {
233
+ className: styles.label,
234
+ children: [itemTitleElement, descriptionElement]
235
+ })]
236
+ }, `item-${itemI}`);
237
+ };
238
+ $[23] = ascending;
239
+ $[24] = isPlaceholder;
240
+ $[25] = itemDescriptionStyle;
241
+ $[26] = itemTitleStyle;
242
+ $[27] = itemsCount;
243
+ $[28] = numbersStyle;
244
+ $[29] = t27;
245
+ } else {
246
+ t27 = $[29];
208
247
  }
209
- }, [trackScreenEvent]);
210
- return /*#__PURE__*/jsxs("div", {
211
- className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles["".concat(layout, "Layout")], layout !== null), styles.isPlaceholder, isPlaceholder)]),
212
- "data-screen-ready": true,
213
- children: [/*#__PURE__*/jsxs(Container, {
248
+ t26 = t25.map(t27);
249
+ $[15] = ascending;
250
+ $[16] = isPlaceholder;
251
+ $[17] = itemDescriptionStyle;
252
+ $[18] = itemTitleStyle;
253
+ $[19] = itemsCount;
254
+ $[20] = numbersStyle;
255
+ $[21] = t25;
256
+ $[22] = t26;
257
+ } else {
258
+ t26 = $[22];
259
+ }
260
+ const elements = t26;
261
+ let t27;
262
+ if ($[30] !== header) {
263
+ t27 = isHeaderFilled(header);
264
+ $[30] = header;
265
+ $[31] = t27;
266
+ } else {
267
+ t27 = $[31];
268
+ }
269
+ const hasHeader = t27;
270
+ let t28;
271
+ if ($[32] !== footer) {
272
+ t28 = isFooterFilled(footer);
273
+ $[32] = footer;
274
+ $[33] = t28;
275
+ } else {
276
+ t28 = $[33];
277
+ }
278
+ const hasFooter = t28;
279
+ let t29;
280
+ if ($[34] !== current || $[35] !== footer || $[36] !== isPreview || $[37] !== isView || $[38] !== openWebView) {
281
+ t29 = getFooterProps(footer, {
282
+ isView,
283
+ current,
284
+ openWebView,
285
+ isPreview
286
+ });
287
+ $[34] = current;
288
+ $[35] = footer;
289
+ $[36] = isPreview;
290
+ $[37] = isView;
291
+ $[38] = openWebView;
292
+ $[39] = t29;
293
+ } else {
294
+ t29 = $[39];
295
+ }
296
+ const footerProps = t29;
297
+ const [scrolledBottom, setScrolledBottom] = useState(false);
298
+ const {
299
+ ref: footerRef,
300
+ height: t30
301
+ } = useDimensionObserver();
302
+ const foterHeight = t30 === undefined ? 0 : t30;
303
+ let t31;
304
+ if ($[40] !== trackScreenEvent) {
305
+ t31 = t32 => {
306
+ const {
307
+ initial
308
+ } = t32;
309
+ if (initial) {
310
+ trackScreenEvent("scroll", "Screen");
311
+ }
312
+ setScrolledBottom(true);
313
+ };
314
+ $[40] = trackScreenEvent;
315
+ $[41] = t31;
316
+ } else {
317
+ t31 = $[41];
318
+ }
319
+ const onScrolledBottom = t31;
320
+ let t32;
321
+ if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
322
+ t32 = () => {
323
+ setScrolledBottom(false);
324
+ };
325
+ $[42] = t32;
326
+ } else {
327
+ t32 = $[42];
328
+ }
329
+ const onScrolledNotBottom = t32;
330
+ let t33;
331
+ if ($[43] !== trackScreenEvent) {
332
+ t33 = t34 => {
333
+ const trigger = t34 === undefined ? null : t34;
334
+ if (trigger !== null) {
335
+ const scrollPercent = Math.round(trigger * 100);
336
+ trackScreenEvent("scroll", scrollPercent, {
337
+ scrollPercent
338
+ });
339
+ }
340
+ };
341
+ $[43] = trackScreenEvent;
342
+ $[44] = t33;
343
+ } else {
344
+ t33 = $[44];
345
+ }
346
+ const onScrolledTrigger = t33;
347
+ const t34 = styles[`${layout}Layout`];
348
+ const t35 = layout !== null;
349
+ let t36;
350
+ if ($[45] !== className || $[46] !== isPlaceholder || $[47] !== t34 || $[48] !== t35) {
351
+ t36 = classNames([styles.container, className, {
352
+ [t34]: t35,
353
+ [styles.isPlaceholder]: isPlaceholder
354
+ }]);
355
+ $[45] = className;
356
+ $[46] = isPlaceholder;
357
+ $[47] = t34;
358
+ $[48] = t35;
359
+ $[49] = t36;
360
+ } else {
361
+ t36 = $[49];
362
+ }
363
+ let t37;
364
+ if ($[50] !== hasHeader || $[51] !== header || $[52] !== isPlaceholder || $[53] !== spacing || $[54] !== viewerTopHeight) {
365
+ t37 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
366
+ style: {
367
+ paddingTop: spacing / 2 + viewerTopHeight,
368
+ paddingLeft: spacing,
369
+ paddingRight: spacing
370
+ },
371
+ children: /*#__PURE__*/jsx(Header, {
372
+ ...header
373
+ })
374
+ }) : null;
375
+ $[50] = hasHeader;
376
+ $[51] = header;
377
+ $[52] = isPlaceholder;
378
+ $[53] = spacing;
379
+ $[54] = viewerTopHeight;
380
+ $[55] = t37;
381
+ } else {
382
+ t37 = $[55];
383
+ }
384
+ let t38;
385
+ if ($[56] !== current || $[57] !== foterHeight || $[58] !== hasHeader || $[59] !== isPlaceholder || $[60] !== isPreview || $[61] !== spacing || $[62] !== viewerBottomHeight || $[63] !== viewerTopHeight) {
386
+ t38 = !isPlaceholder ? {
387
+ paddingLeft: spacing,
388
+ paddingRight: spacing,
389
+ paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
390
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
391
+ } : null;
392
+ $[56] = current;
393
+ $[57] = foterHeight;
394
+ $[58] = hasHeader;
395
+ $[59] = isPlaceholder;
396
+ $[60] = isPreview;
397
+ $[61] = spacing;
398
+ $[62] = viewerBottomHeight;
399
+ $[63] = viewerTopHeight;
400
+ $[64] = t38;
401
+ } else {
402
+ t38 = $[64];
403
+ }
404
+ let t39;
405
+ if ($[65] !== elements) {
406
+ t39 = /*#__PURE__*/jsx("div", {
407
+ className: styles.elementsContainer,
408
+ children: elements
409
+ });
410
+ $[65] = elements;
411
+ $[66] = t39;
412
+ } else {
413
+ t39 = $[66];
414
+ }
415
+ let t40;
416
+ if ($[67] !== t38 || $[68] !== t39 || $[69] !== titleElement) {
417
+ t40 = /*#__PURE__*/jsxs(Layout, {
418
+ className: styles.layout,
419
+ style: t38,
420
+ children: [titleElement, t39]
421
+ });
422
+ $[67] = t38;
423
+ $[68] = t39;
424
+ $[69] = titleElement;
425
+ $[70] = t40;
426
+ } else {
427
+ t40 = $[70];
428
+ }
429
+ let t41;
430
+ if ($[71] !== onScrolledBottom || $[72] !== onScrolledTrigger || $[73] !== scrollingDisabled || $[74] !== t37 || $[75] !== t40) {
431
+ t41 = /*#__PURE__*/jsxs(Scroll, {
432
+ className: styles.scroll,
433
+ verticalAlign: "middle",
434
+ disabled: scrollingDisabled,
435
+ onScrolledTrigger: onScrolledTrigger,
436
+ onScrolledBottom: onScrolledBottom,
437
+ onScrolledNotBottom: onScrolledNotBottom,
438
+ withShadow: true,
439
+ children: [t37, t40]
440
+ });
441
+ $[71] = onScrolledBottom;
442
+ $[72] = onScrolledTrigger;
443
+ $[73] = scrollingDisabled;
444
+ $[74] = t37;
445
+ $[75] = t40;
446
+ $[76] = t41;
447
+ } else {
448
+ t41 = $[76];
449
+ }
450
+ let t42;
451
+ if ($[77] !== current || $[78] !== footerProps || $[79] !== footerRef || $[80] !== hasFooter || $[81] !== isPlaceholder || $[82] !== isPreview || $[83] !== scrolledBottom || $[84] !== spacing || $[85] !== viewerBottomHeight || $[86] !== viewerBottomSidesWidth) {
452
+ t42 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
453
+ ref: footerRef,
454
+ className: classNames([styles.callToAction, {
455
+ [styles.disabled]: !scrolledBottom
456
+ }]),
457
+ style: {
458
+ transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
459
+ paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
460
+ paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
461
+ paddingTop: spacing / 2,
462
+ paddingBottom: spacing / 2
463
+ },
464
+ children: /*#__PURE__*/jsx(Footer, {
465
+ ...footerProps
466
+ })
467
+ }) : null;
468
+ $[77] = current;
469
+ $[78] = footerProps;
470
+ $[79] = footerRef;
471
+ $[80] = hasFooter;
472
+ $[81] = isPlaceholder;
473
+ $[82] = isPreview;
474
+ $[83] = scrolledBottom;
475
+ $[84] = spacing;
476
+ $[85] = viewerBottomHeight;
477
+ $[86] = viewerBottomSidesWidth;
478
+ $[87] = t42;
479
+ } else {
480
+ t42 = $[87];
481
+ }
482
+ let t43;
483
+ if ($[88] !== height || $[89] !== t41 || $[90] !== t42 || $[91] !== width) {
484
+ t43 = /*#__PURE__*/jsxs(Container, {
214
485
  width: width,
215
486
  height: height,
216
487
  className: styles.content,
217
- children: [/*#__PURE__*/jsxs(Scroll, {
218
- className: styles.scroll,
219
- verticalAlign: "middle",
220
- disabled: scrollingDisabled,
221
- onScrolledTrigger: onScrolledTrigger,
222
- onScrolledBottom: onScrolledBottom,
223
- onScrolledNotBottom: onScrolledNotBottom,
224
- withShadow: true,
225
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
226
- style: {
227
- paddingTop: spacing / 2 + viewerTopHeight,
228
- paddingLeft: spacing,
229
- paddingRight: spacing
230
- },
231
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
232
- }) : null, /*#__PURE__*/jsxs(Layout, {
233
- className: styles.layout,
234
- style: !isPlaceholder ? {
235
- paddingLeft: spacing,
236
- paddingRight: spacing,
237
- paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
238
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
239
- } : null,
240
- children: [titleElement, /*#__PURE__*/jsx("div", {
241
- className: styles.elementsContainer,
242
- children: elements
243
- })]
244
- })]
245
- }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
246
- ref: footerRef,
247
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
248
- style: {
249
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
250
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
251
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
252
- paddingTop: spacing / 2,
253
- paddingBottom: spacing / 2
254
- },
255
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
256
- }) : null]
257
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
488
+ children: [t41, t42]
489
+ });
490
+ $[88] = height;
491
+ $[89] = t41;
492
+ $[90] = t42;
493
+ $[91] = width;
494
+ $[92] = t43;
495
+ } else {
496
+ t43 = $[92];
497
+ }
498
+ let t44;
499
+ if ($[93] !== background || $[94] !== backgroundPlaying || $[95] !== customMediaRef || $[96] !== height || $[97] !== isPlaceholder || $[98] !== isPreview || $[99] !== mediaRef || $[100] !== mediaShouldLoad || $[101] !== muted || $[102] !== resolution || $[103] !== width) {
500
+ t44 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
258
501
  background: background,
259
502
  width: width,
260
503
  height: height,
@@ -265,8 +508,40 @@ function RankingScreen(_ref) {
265
508
  mediaRef: mergeRefs(mediaRef, customMediaRef),
266
509
  withoutVideo: isPreview,
267
510
  className: styles.background
268
- }) : null]
269
- });
511
+ }) : null;
512
+ $[93] = background;
513
+ $[94] = backgroundPlaying;
514
+ $[95] = customMediaRef;
515
+ $[96] = height;
516
+ $[97] = isPlaceholder;
517
+ $[98] = isPreview;
518
+ $[99] = mediaRef;
519
+ $[100] = mediaShouldLoad;
520
+ $[101] = muted;
521
+ $[102] = resolution;
522
+ $[103] = width;
523
+ $[104] = t44;
524
+ } else {
525
+ t44 = $[104];
526
+ }
527
+ let t45;
528
+ if ($[105] !== t36 || $[106] !== t43 || $[107] !== t44) {
529
+ t45 = /*#__PURE__*/jsxs("div", {
530
+ className: t36,
531
+ "data-screen-ready": true,
532
+ children: [t43, t44]
533
+ });
534
+ $[105] = t36;
535
+ $[106] = t43;
536
+ $[107] = t44;
537
+ $[108] = t45;
538
+ } else {
539
+ t45 = $[108];
540
+ }
541
+ return t45;
542
+ }
543
+ function _temp() {
544
+ return {};
270
545
  }
271
546
 
272
547
  // import * as transforms from './transforms/index';
@@ -277,19 +552,13 @@ var definition = {
277
552
  group: {
278
553
  label: defineMessage({
279
554
  id: "cGItoy",
280
- defaultMessage: [{
281
- "type": 0,
282
- "value": "List"
283
- }]
555
+ defaultMessage: "List"
284
556
  }),
285
557
  order: 8
286
558
  },
287
559
  title: defineMessage({
288
560
  id: "17BMn2",
289
- defaultMessage: [{
290
- "type": 0,
291
- "value": "Ranking"
292
- }]
561
+ defaultMessage: "Ranking"
293
562
  }),
294
563
  component: RankingScreen,
295
564
  layouts: ['side', 'over'],
@@ -300,10 +569,7 @@ var definition = {
300
569
  defaultValue: 'side',
301
570
  label: defineMessage({
302
571
  id: "4iBXj2",
303
- defaultMessage: [{
304
- "type": 0,
305
- "value": "Layout"
306
- }]
572
+ defaultMessage: "Layout"
307
573
  })
308
574
  }, {
309
575
  name: 'title',
@@ -314,10 +580,7 @@ var definition = {
314
580
  },
315
581
  label: defineMessage({
316
582
  id: "N25iDO",
317
- defaultMessage: [{
318
- "type": 0,
319
- "value": "Title"
320
- }]
583
+ defaultMessage: "Title"
321
584
  })
322
585
  }, {
323
586
  name: 'items',
@@ -332,19 +595,13 @@ var definition = {
332
595
  },
333
596
  label: defineMessage({
334
597
  id: "sESmah",
335
- defaultMessage: [{
336
- "type": 0,
337
- "value": "Entries"
338
- }]
598
+ defaultMessage: "Entries"
339
599
  })
340
600
  }, {
341
601
  type: 'fields',
342
602
  label: defineMessage({
343
603
  id: "xac4z/",
344
- defaultMessage: [{
345
- "type": 0,
346
- "value": "Entry styles"
347
- }]
604
+ defaultMessage: "Entry styles"
348
605
  }),
349
606
  isList: true,
350
607
  fields: [{
@@ -352,20 +609,14 @@ var definition = {
352
609
  type: 'text-style-form',
353
610
  label: defineMessage({
354
611
  id: "+AEVbJ",
355
- defaultMessage: [{
356
- "type": 0,
357
- "value": "Title"
358
- }]
612
+ defaultMessage: "Title"
359
613
  })
360
614
  }, {
361
615
  name: 'itemDescriptionStyle',
362
616
  type: 'text-style-form',
363
617
  label: defineMessage({
364
618
  id: "ZCe0r4",
365
- defaultMessage: [{
366
- "type": 0,
367
- "value": "Description"
368
- }]
619
+ defaultMessage: "Description"
369
620
  })
370
621
  }, {
371
622
  name: 'numbersStyle',
@@ -375,10 +626,7 @@ var definition = {
375
626
  },
376
627
  label: defineMessage({
377
628
  id: "UdrdRF",
378
- defaultMessage: [{
379
- "type": 0,
380
- "value": "Numbers style"
381
- }]
629
+ defaultMessage: "Numbers style"
382
630
  })
383
631
  }]
384
632
  }, {
@@ -386,30 +634,21 @@ var definition = {
386
634
  type: 'toggle',
387
635
  label: defineMessage({
388
636
  id: "9DhYaZ",
389
- defaultMessage: [{
390
- "type": 0,
391
- "value": "Ascending"
392
- }]
637
+ defaultMessage: "Ascending"
393
638
  })
394
639
  }, {
395
640
  name: 'background',
396
641
  type: 'background',
397
642
  label: defineMessage({
398
643
  id: "+MPZRu",
399
- defaultMessage: [{
400
- "type": 0,
401
- "value": "Background"
402
- }]
644
+ defaultMessage: "Background"
403
645
  })
404
646
  }, {
405
647
  name: 'header',
406
648
  type: 'header',
407
649
  label: defineMessage({
408
650
  id: "rhuDxI",
409
- defaultMessage: [{
410
- "type": 0,
411
- "value": "Header"
412
- }]
651
+ defaultMessage: "Header"
413
652
  }),
414
653
  theme: {
415
654
  badge: {
@@ -424,10 +663,7 @@ var definition = {
424
663
  type: 'footer',
425
664
  label: defineMessage({
426
665
  id: "g4nybp",
427
- defaultMessage: [{
428
- "type": 0,
429
- "value": "Footer"
430
- }]
666
+ defaultMessage: "Footer"
431
667
  }),
432
668
  theme: {
433
669
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-ranking",
3
- "version": "0.4.71",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,26 +53,26 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.71",
65
- "@micromag/data": "^0.4.71",
66
- "@micromag/element-background": "^0.4.71",
67
- "@micromag/element-container": "^0.4.71",
68
- "@micromag/element-footer": "^0.4.71",
69
- "@micromag/element-header": "^0.4.71",
70
- "@micromag/element-heading": "^0.4.71",
71
- "@micromag/element-layout": "^0.4.71",
72
- "@micromag/element-scroll": "^0.4.71",
73
- "@micromag/element-text": "^0.4.71",
74
- "@micromag/transforms": "^0.4.71",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/data": "^0.4.74",
67
+ "@micromag/element-background": "^0.4.74",
68
+ "@micromag/element-container": "^0.4.74",
69
+ "@micromag/element-footer": "^0.4.74",
70
+ "@micromag/element-header": "^0.4.74",
71
+ "@micromag/element-heading": "^0.4.74",
72
+ "@micromag/element-layout": "^0.4.74",
73
+ "@micromag/element-scroll": "^0.4.74",
74
+ "@micromag/element-text": "^0.4.74",
75
+ "@micromag/transforms": "^0.4.74",
75
76
  "classnames": "^2.2.6",
76
77
  "lodash": "^4.17.23",
77
78
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
81
82
  "access": "public",
82
83
  "registry": "https://registry.npmjs.org/"
83
84
  },
84
- "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }