@micromag/screen-ranking 0.4.70 → 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 +4 -2
  2. package/es/index.js +524 -286
  3. package/package.json +18 -17
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HeadingElement, TextElement, TextStyle, BackgroundElement, Header, Footer } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { HeadingElement, TextElement, TextStyle, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface RankingScreenProps {
5
6
  layout?: 'side' | 'over';
@@ -16,9 +17,10 @@ interface RankingScreenProps {
16
17
  current?: boolean;
17
18
  preload?: boolean;
18
19
  type?: string | null;
20
+ mediaRef?: ForwardedRef<MediaElement> | null;
19
21
  className?: string | null;
20
22
  }
21
- declare function RankingScreen({ layout, title, items, itemTitleStyle, itemDescriptionStyle, numbersStyle, ascending, spacing, background, header, footer, current, preload, type, className, }: RankingScreenProps): react_jsx_runtime.JSX.Element;
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;
22
24
 
23
25
  declare const _default: {
24
26
  id: string;
package/es/index.js CHANGED
@@ -1,14 +1,11 @@
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';
11
- import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
8
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
12
9
  import Background from '@micromag/element-background';
13
10
  import Container from '@micromag/element-container';
14
11
  import Footer from '@micromag/element-footer';
@@ -21,238 +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$className = _ref.className,
55
- className = _ref$className === void 0 ? null : _ref$className;
56
- var trackScreenEvent = useTrackScreenEvent(type);
57
- var _useScreenSize = useScreenSize(),
58
- width = _useScreenSize.width,
59
- height = _useScreenSize.height,
60
- resolution = _useScreenSize.resolution;
61
- var _useViewerContext = useViewerContext(),
62
- viewerTopHeight = _useViewerContext.topHeight,
63
- viewerBottomHeight = _useViewerContext.bottomHeight,
64
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
65
- var _useViewerWebView = useViewerWebView(),
66
- openWebView = _useViewerWebView.open;
67
- var _usePlaybackContext = usePlaybackContext(),
68
- muted = _usePlaybackContext.muted;
69
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
70
- mediaRef = _usePlaybackMediaRef.ref,
71
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
72
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
73
- var _useScreenRenderConte = useScreenRenderContext(),
74
- isView = _useScreenRenderConte.isView,
75
- isPreview = _useScreenRenderConte.isPreview,
76
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
77
- isEdit = _useScreenRenderConte.isEdit,
78
- isStatic = _useScreenRenderConte.isStatic,
79
- isCapture = _useScreenRenderConte.isCapture;
80
- var finalItems = isPlaceholder ? _toConsumableArray(new Array(10)).map(function () {
81
- return {};
82
- }) : items || [null];
83
- var itemsCount = finalItems !== null ? finalItems.length : 0;
84
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
85
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
86
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
87
- var mediaShouldLoad = current || preload;
88
- var hasTitle = isTextFilled(title);
89
- var titleElement = /*#__PURE__*/jsx(ScreenElement, {
90
- placeholder: "Title",
91
- 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, {
92
116
  id: "BSTWf8",
93
- defaultMessage: [{
94
- "type": 0,
95
- "value": "Title"
96
- }]
97
- }),
98
- emptyClassName: classNames([styles.empty, styles.emptyTitle]),
99
- isEmpty: !hasTitle,
100
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
101
- className: styles.title
102
- }, title)) : null
103
- });
104
- var elements = (finalItems || []).map(function (item, itemI) {
105
- var _ref2 = item || {},
106
- _ref2$title = _ref2.title,
107
- itemTitle = _ref2$title === void 0 ? null : _ref2$title,
108
- _ref2$description = _ref2.description,
109
- description = _ref2$description === void 0 ? null : _ref2$description;
110
- var hasItemTitle = isTextFilled(itemTitle);
111
- var hasDescription = isTextFilled(description);
112
- var _ref3 = itemTitle || {},
113
- _ref3$textStyle = _ref3.textStyle,
114
- titleTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
115
- var _ref4 = description || {},
116
- _ref4$textStyle = _ref4.textStyle,
117
- descriptionTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
118
- var itemTitleElement = /*#__PURE__*/jsx("div", {
119
- className: styles.itemTitle,
120
- children: /*#__PURE__*/jsx(ScreenElement, {
121
- placeholder: "title",
122
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
123
- id: "bmO4Ss",
124
- defaultMessage: [{
125
- "type": 0,
126
- "value": "Entry Title"
127
- }]
128
- }),
129
- emptyClassName: styles.empty,
130
- isEmpty: !hasItemTitle,
131
- children: hasItemTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, itemTitle), {}, {
132
- textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
133
- })) : null
134
- })
117
+ defaultMessage: "Title"
135
118
  });
136
- var descriptionElement = /*#__PURE__*/jsx("div", {
137
- className: styles.description,
138
- children: /*#__PURE__*/jsx(ScreenElement, {
139
- placeholder: "text",
140
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
141
- id: "507VAi",
142
- defaultMessage: [{
143
- "type": 0,
144
- "value": "Description"
145
- }]
146
- }),
147
- emptyClassName: styles.empty,
148
- isEmpty: !hasDescription,
149
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
150
- textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
151
- })) : null
152
- })
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
153
147
  });
154
- var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
155
- return /*#__PURE__*/jsxs("div", {
156
- className: styles.item,
157
- children: [/*#__PURE__*/jsx("div", {
158
- className: styles.rank,
159
- children: isPlaceholder ? rankText : /*#__PURE__*/jsx(Text, {
160
- className: styles.rankText,
161
- body: rankText,
162
- textStyle: numbersStyle
163
- })
164
- }), /*#__PURE__*/jsxs("div", {
165
- className: styles.label,
166
- children: [itemTitleElement, descriptionElement]
167
- })]
168
- }, "item-".concat(itemI));
169
- });
170
-
171
- // Call to Action
172
-
173
- var hasHeader = isHeaderFilled(header);
174
- var hasFooter = isFooterFilled(footer);
175
- var footerProps = getFooterProps(footer, {
176
- isView: isView,
177
- current: current,
178
- openWebView: openWebView,
179
- isPreview: isPreview
180
- });
181
- var _useState = useState(false),
182
- _useState2 = _slicedToArray(_useState, 2),
183
- scrolledBottom = _useState2[0],
184
- setScrolledBottom = _useState2[1];
185
- var _useDimensionObserver = useDimensionObserver(),
186
- footerRef = _useDimensionObserver.ref,
187
- _useDimensionObserver2 = _useDimensionObserver.height,
188
- foterHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
189
- var onScrolledBottom = useCallback(function (_ref5) {
190
- var initial = _ref5.initial;
191
- if (initial) {
192
- trackScreenEvent('scroll', 'Screen');
193
- }
194
- setScrolledBottom(true);
195
- }, [trackScreenEvent]);
196
- var onScrolledNotBottom = useCallback(function () {
197
- setScrolledBottom(false);
198
- }, [setScrolledBottom]);
199
- var onScrolledTrigger = useCallback(function () {
200
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
201
- if (trigger !== null) {
202
- var scrollPercent = Math.round(trigger * 100);
203
- trackScreenEvent('scroll', scrollPercent, {
204
- scrollPercent: scrollPercent
205
- });
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];
206
247
  }
207
- }, [trackScreenEvent]);
208
- return /*#__PURE__*/jsxs("div", {
209
- className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles["".concat(layout, "Layout")], layout !== null), styles.isPlaceholder, isPlaceholder)]),
210
- "data-screen-ready": true,
211
- 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, {
212
485
  width: width,
213
486
  height: height,
214
487
  className: styles.content,
215
- children: [/*#__PURE__*/jsxs(Scroll, {
216
- className: styles.scroll,
217
- verticalAlign: "middle",
218
- disabled: scrollingDisabled,
219
- onScrolledTrigger: onScrolledTrigger,
220
- onScrolledBottom: onScrolledBottom,
221
- onScrolledNotBottom: onScrolledNotBottom,
222
- withShadow: true,
223
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
224
- style: {
225
- paddingTop: spacing / 2 + viewerTopHeight,
226
- paddingLeft: spacing,
227
- paddingRight: spacing
228
- },
229
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
230
- }) : null, /*#__PURE__*/jsxs(Layout, {
231
- className: styles.layout,
232
- style: !isPlaceholder ? {
233
- paddingLeft: spacing,
234
- paddingRight: spacing,
235
- paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
236
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
237
- } : null,
238
- children: [titleElement, /*#__PURE__*/jsx("div", {
239
- className: styles.elementsContainer,
240
- children: elements
241
- })]
242
- })]
243
- }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
244
- ref: footerRef,
245
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
246
- style: {
247
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
248
- paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
249
- paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
250
- paddingTop: spacing / 2,
251
- paddingBottom: spacing / 2
252
- },
253
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
254
- }) : null]
255
- }), !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, {
256
501
  background: background,
257
502
  width: width,
258
503
  height: height,
@@ -260,11 +505,43 @@ function RankingScreen(_ref) {
260
505
  playing: backgroundPlaying,
261
506
  muted: muted,
262
507
  shouldLoad: mediaShouldLoad,
263
- mediaRef: mediaRef,
508
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
264
509
  withoutVideo: isPreview,
265
510
  className: styles.background
266
- }) : null]
267
- });
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 {};
268
545
  }
269
546
 
270
547
  // import * as transforms from './transforms/index';
@@ -275,19 +552,13 @@ var definition = {
275
552
  group: {
276
553
  label: defineMessage({
277
554
  id: "cGItoy",
278
- defaultMessage: [{
279
- "type": 0,
280
- "value": "List"
281
- }]
555
+ defaultMessage: "List"
282
556
  }),
283
557
  order: 8
284
558
  },
285
559
  title: defineMessage({
286
560
  id: "17BMn2",
287
- defaultMessage: [{
288
- "type": 0,
289
- "value": "Ranking"
290
- }]
561
+ defaultMessage: "Ranking"
291
562
  }),
292
563
  component: RankingScreen,
293
564
  layouts: ['side', 'over'],
@@ -298,10 +569,7 @@ var definition = {
298
569
  defaultValue: 'side',
299
570
  label: defineMessage({
300
571
  id: "4iBXj2",
301
- defaultMessage: [{
302
- "type": 0,
303
- "value": "Layout"
304
- }]
572
+ defaultMessage: "Layout"
305
573
  })
306
574
  }, {
307
575
  name: 'title',
@@ -312,10 +580,7 @@ var definition = {
312
580
  },
313
581
  label: defineMessage({
314
582
  id: "N25iDO",
315
- defaultMessage: [{
316
- "type": 0,
317
- "value": "Title"
318
- }]
583
+ defaultMessage: "Title"
319
584
  })
320
585
  }, {
321
586
  name: 'items',
@@ -330,19 +595,13 @@ var definition = {
330
595
  },
331
596
  label: defineMessage({
332
597
  id: "sESmah",
333
- defaultMessage: [{
334
- "type": 0,
335
- "value": "Entries"
336
- }]
598
+ defaultMessage: "Entries"
337
599
  })
338
600
  }, {
339
601
  type: 'fields',
340
602
  label: defineMessage({
341
603
  id: "xac4z/",
342
- defaultMessage: [{
343
- "type": 0,
344
- "value": "Entry styles"
345
- }]
604
+ defaultMessage: "Entry styles"
346
605
  }),
347
606
  isList: true,
348
607
  fields: [{
@@ -350,20 +609,14 @@ var definition = {
350
609
  type: 'text-style-form',
351
610
  label: defineMessage({
352
611
  id: "+AEVbJ",
353
- defaultMessage: [{
354
- "type": 0,
355
- "value": "Title"
356
- }]
612
+ defaultMessage: "Title"
357
613
  })
358
614
  }, {
359
615
  name: 'itemDescriptionStyle',
360
616
  type: 'text-style-form',
361
617
  label: defineMessage({
362
618
  id: "ZCe0r4",
363
- defaultMessage: [{
364
- "type": 0,
365
- "value": "Description"
366
- }]
619
+ defaultMessage: "Description"
367
620
  })
368
621
  }, {
369
622
  name: 'numbersStyle',
@@ -373,10 +626,7 @@ var definition = {
373
626
  },
374
627
  label: defineMessage({
375
628
  id: "UdrdRF",
376
- defaultMessage: [{
377
- "type": 0,
378
- "value": "Numbers style"
379
- }]
629
+ defaultMessage: "Numbers style"
380
630
  })
381
631
  }]
382
632
  }, {
@@ -384,30 +634,21 @@ var definition = {
384
634
  type: 'toggle',
385
635
  label: defineMessage({
386
636
  id: "9DhYaZ",
387
- defaultMessage: [{
388
- "type": 0,
389
- "value": "Ascending"
390
- }]
637
+ defaultMessage: "Ascending"
391
638
  })
392
639
  }, {
393
640
  name: 'background',
394
641
  type: 'background',
395
642
  label: defineMessage({
396
643
  id: "+MPZRu",
397
- defaultMessage: [{
398
- "type": 0,
399
- "value": "Background"
400
- }]
644
+ defaultMessage: "Background"
401
645
  })
402
646
  }, {
403
647
  name: 'header',
404
648
  type: 'header',
405
649
  label: defineMessage({
406
650
  id: "rhuDxI",
407
- defaultMessage: [{
408
- "type": 0,
409
- "value": "Header"
410
- }]
651
+ defaultMessage: "Header"
411
652
  }),
412
653
  theme: {
413
654
  badge: {
@@ -422,10 +663,7 @@ var definition = {
422
663
  type: 'footer',
423
664
  label: defineMessage({
424
665
  id: "g4nybp",
425
- defaultMessage: [{
426
- "type": 0,
427
- "value": "Footer"
428
- }]
666
+ defaultMessage: "Footer"
429
667
  }),
430
668
  theme: {
431
669
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-ranking",
3
- "version": "0.4.70",
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.69",
65
- "@micromag/data": "^0.4.69",
66
- "@micromag/element-background": "^0.4.70",
67
- "@micromag/element-container": "^0.4.69",
68
- "@micromag/element-footer": "^0.4.70",
69
- "@micromag/element-header": "^0.4.69",
70
- "@micromag/element-heading": "^0.4.69",
71
- "@micromag/element-layout": "^0.4.69",
72
- "@micromag/element-scroll": "^0.4.69",
73
- "@micromag/element-text": "^0.4.69",
74
- "@micromag/transforms": "^0.4.69",
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": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }