@micromag/screen-game-sort 0.4.49 → 0.4.50

package/es/index.js

@@ -8,7 +8,7 @@ import { useDrag } from '@use-gesture/react';
 import classNames from 'classnames';
 import isString from 'lodash/isString';
 import shuffle from 'lodash/shuffle';
-import React, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
@@ -22,6 +22,7 @@ import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-game-sort-container","background":"micromag-screen-game-sort-background","content":"micromag-screen-game-sort-content","heading":"micromag-screen-game-sort-heading","layout":"micromag-screen-game-sort-layout","emptyHeading":"micromag-screen-game-sort-emptyHeading","emptyItems":"micromag-screen-game-sort-emptyItems","header":"micromag-screen-game-sort-header","footer":"micromag-screen-game-sort-footer","items":"micromag-screen-game-sort-items","item":"micromag-screen-game-sort-item","itemInner":"micromag-screen-game-sort-itemInner","thumbnail":"micromag-screen-game-sort-thumbnail","sorted":"micromag-screen-game-sort-sorted","draggable":"micromag-screen-game-sort-draggable","button":"micromag-screen-game-sort-button","buttonLabel":"micromag-screen-game-sort-buttonLabel","buttonResults":"micromag-screen-game-sort-buttonResults","label":"micromag-screen-game-sort-label","isEmpty":"micromag-screen-game-sort-isEmpty","valid":"micromag-screen-game-sort-valid","invalid":"micromag-screen-game-sort-invalid","resultsVisible":"micromag-screen-game-sort-resultsVisible","layoutLabelTop":"micromag-screen-game-sort-layoutLabelTop","layoutNoLabel":"micromag-screen-game-sort-layoutNoLabel","layoutLabelOver":"micromag-screen-game-sort-layoutLabelOver","buttonVisual":"micromag-screen-game-sort-buttonVisual","submitButton":"micromag-screen-game-sort-submitButton","results":"micromag-screen-game-sort-results"};
 
@@ -350,160 +351,172 @@ function GameSort(_ref) {
       clearTimeout(timeout);
     };
   }, [validated]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.sorted, initialSorted || !isView), styles.draggable, dragEnabled), styles.resultsVisible, resultsVisible), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    verticalAlign: layout,
-    fullscreen: true,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: styles.header,
-    ref: headerRef,
-    style: {
-      paddingTop: spacing / 2,
-      paddingBottom: spacing,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      transform: "translate(0px, ".concat(viewerTopHeight, "px)")
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "X7kRRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Heading"
-      }]
-    }),
-    emptyClassName: styles.emptyHeading,
-    isEmpty: !heading || (heading === null || heading === void 0 ? void 0 : heading.body) === ''
-  }, heading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: classNames([styles.heading])
-  }, heading)) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles.items,
-    ref: itemsRef
-  }, /*#__PURE__*/React.createElement(Spacer, {
-    key: "spacer",
-    size: 5
-  }), /*#__PURE__*/React.createElement(ScreenElement, {
-    key: "items",
-    placeholder: "items",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "03U69o",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Buttons"
-      }]
-    }),
-    emptyClassName: styles.emptyItems,
-    isEmpty: (items || []).length === 0
-  }, springs.map(function (_ref6, itemIndex) {
-    var y = _ref6.y,
-      scale = _ref6.scale;
-    var item = items[itemIndex] || {};
-    var _ref7 = item || {},
-      _ref7$id = _ref7.id,
-      id = _ref7$id === void 0 ? null : _ref7$id,
-      _ref7$visual = _ref7.visual,
-      visual = _ref7$visual === void 0 ? null : _ref7$visual,
-      itemLabel = _ref7.label,
-      _ref7$boxStyle = _ref7.boxStyle,
-      boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle,
-      _ref7$results = _ref7.results,
-      itemResults = _ref7$results === void 0 ? null : _ref7$results;
-    var finalLabel = isString(itemLabel) ? {
-      body: itemLabel
-    } : itemLabel || {};
-    var _ref8 = finalLabel || {},
-      _ref8$body = _ref8.body,
-      label = _ref8$body === void 0 ? null : _ref8$body,
-      labelTextStyle = _ref8.textStyle;
-    var isEmpty = label === null && visual === null;
-    var isValid = validated !== null && validated[itemIndex];
-    return /*#__PURE__*/React.createElement(animated.div, Object.assign({
-      key: "button-".concat(itemIndex),
-      className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({
-        clickable: dragEnabled
-      }, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
-      ref: function ref(_ref1) {
-        elementsRef.current[id] = _ref1;
-      },
-      style: _objectSpread(_objectSpread({
-        transform: y.to(function (yValue) {
-          return "translateY(".concat(yValue, ")");
-        })
-      }, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
-    }, bind(itemIndex)), /*#__PURE__*/React.createElement("div", {
-      className: styles.itemInner
-    }, /*#__PURE__*/React.createElement(animated.div, {
-      className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, itemsLayout === 'label-bottom'), styles.layoutLabelTop, itemsLayout === 'label-top'), styles.layoutNoLabel, itemsLayout === 'no-label'), styles.layoutLabelOver, itemsLayout === 'label-over')]),
-      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-        transform: scale.to(function (scaleValue) {
-          return "scale(".concat(scaleValue, ")");
-        })
-      }, getStyleFromBox(itemsBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
-      // onClick={(e) => onItemClick(e, item, itemIndex)}
-    }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
-      className: styles.buttonVisual,
-      imageClassName: styles.thumbnail,
-      media: visual,
-      width: "auto"
-    }) : null, label !== null || itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement("div", {
-      className: styles.buttonLabel
-    }, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({}, finalLabel, {
-      textStyle: _objectSpread(_objectSpread({}, itemsTextStyle), labelTextStyle),
-      className: styles.label
-    })) : null, itemResults !== null && resultsVisible ? /*#__PURE__*/React.createElement(Text, Object.assign({}, itemResults, {
-      className: styles.buttonResults,
-      textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
-    })) : null) : null)));
-  }))), resultsVisible && results !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles.results,
-    style: _objectSpread({}, getStyleFromBox(resultsBoxStyle))
-  }, /*#__PURE__*/React.createElement(Text, results)) : !isPlaceholder ? /*#__PURE__*/React.createElement(Button, {
-    className: styles.submitButton,
-    disabled: validated !== null,
-    type: "button",
-    onClick: onClickSubmit,
-    style: _objectSpread(_objectSpread({}, getStyleFromBox(submitBoxStyle)), getStyleFromText(submitTextStyle))
-  }, submitButtonLabel || intl.formatMessage({
-    id: "IbZVf0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Submit"
-    }]
-  })) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: styles.footer,
-    ref: footerRef,
-    style: {
-      paddingTop: spacing,
-      paddingBottom: spacing / 2,
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
+    "data-screen-ready": true,
+    children: [/*#__PURE__*/jsx(Container, {
+      width: width,
+      height: height,
+      className: styles.content,
+      children: /*#__PURE__*/jsxs(Layout, {
+        className: styles.layout,
+        verticalAlign: layout,
+        fullscreen: true,
+        style: !isPlaceholder ? {
+          padding: spacing,
+          paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
+        } : null,
+        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+          className: styles.header,
+          ref: headerRef,
+          style: {
+            paddingTop: spacing / 2,
+            paddingBottom: spacing,
+            paddingLeft: spacing,
+            paddingRight: spacing,
+            transform: "translate(0px, ".concat(viewerTopHeight, "px)")
+          },
+          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+        }) : null, /*#__PURE__*/jsx(ScreenElement, {
+          placeholder: "title",
+          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+            id: "X7kRRa",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Heading"
+            }]
+          }),
+          emptyClassName: styles.emptyHeading,
+          isEmpty: !heading || (heading === null || heading === void 0 ? void 0 : heading.body) === '',
+          children: heading ? /*#__PURE__*/jsx(Heading, _objectSpread({
+            className: classNames([styles.heading])
+          }, heading)) : null
+        }, "title"), /*#__PURE__*/jsxs("div", {
+          className: styles.items,
+          ref: itemsRef,
+          children: [/*#__PURE__*/jsx(Spacer, {
+            size: 5
+          }, "spacer"), /*#__PURE__*/jsx(ScreenElement, {
+            placeholder: "items",
+            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+              id: "03U69o",
+              defaultMessage: [{
+                "type": 0,
+                "value": "Buttons"
+              }]
+            }),
+            emptyClassName: styles.emptyItems,
+            isEmpty: (items || []).length === 0,
+            children: springs.map(function (_ref6, itemIndex) {
+              var y = _ref6.y,
+                scale = _ref6.scale;
+              var item = items[itemIndex] || {};
+              var _ref7 = item || {},
+                _ref7$id = _ref7.id,
+                id = _ref7$id === void 0 ? null : _ref7$id,
+                _ref7$visual = _ref7.visual,
+                visual = _ref7$visual === void 0 ? null : _ref7$visual,
+                itemLabel = _ref7.label,
+                _ref7$boxStyle = _ref7.boxStyle,
+                boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle,
+                _ref7$results = _ref7.results,
+                itemResults = _ref7$results === void 0 ? null : _ref7$results;
+              var finalLabel = isString(itemLabel) ? {
+                body: itemLabel
+              } : itemLabel || {};
+              var _ref8 = finalLabel || {},
+                _ref8$body = _ref8.body,
+                label = _ref8$body === void 0 ? null : _ref8$body,
+                labelTextStyle = _ref8.textStyle;
+              var isEmpty = label === null && visual === null;
+              var isValid = validated !== null && validated[itemIndex];
+              return /*#__PURE__*/jsx(animated.div, _objectSpread(_objectSpread({
+                className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({
+                  clickable: dragEnabled
+                }, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
+                ref: function ref(_ref1) {
+                  elementsRef.current[id] = _ref1;
+                },
+                style: _objectSpread(_objectSpread({
+                  transform: y.to(function (yValue) {
+                    return "translateY(".concat(yValue, ")");
+                  })
+                }, getStyleFromText(itemsTextStyle)), getStyleFromText(labelTextStyle))
+              }, bind(itemIndex)), {}, {
+                children: /*#__PURE__*/jsx("div", {
+                  className: styles.itemInner,
+                  children: /*#__PURE__*/jsxs(animated.div, {
+                    className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, itemsLayout === 'label-bottom'), styles.layoutLabelTop, itemsLayout === 'label-top'), styles.layoutNoLabel, itemsLayout === 'no-label'), styles.layoutLabelOver, itemsLayout === 'label-over')]),
+                    style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+                      transform: scale.to(function (scaleValue) {
+                        return "scale(".concat(scaleValue, ")");
+                      })
+                    }, getStyleFromBox(itemsBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
+                    // onClick={(e) => onItemClick(e, item, itemIndex)}
+                    ,
+                    children: [visual !== null ? /*#__PURE__*/jsx(Visual, {
+                      className: styles.buttonVisual,
+                      imageClassName: styles.thumbnail,
+                      media: visual,
+                      width: "auto"
+                    }) : null, label !== null || itemResults !== null && resultsVisible ? /*#__PURE__*/jsxs("div", {
+                      className: styles.buttonLabel,
+                      children: [label !== null ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalLabel), {}, {
+                        textStyle: _objectSpread(_objectSpread({}, itemsTextStyle), labelTextStyle),
+                        className: styles.label
+                      })) : null, itemResults !== null && resultsVisible ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, itemResults), {}, {
+                        className: styles.buttonResults,
+                        textStyle: _objectSpread(_objectSpread({}, itemsResultsTextStyle), itemResults.textStyle)
+                      })) : null]
+                    }) : null]
+                  })
+                })
+              }), "button-".concat(itemIndex));
+            })
+          }, "items")]
+        }), resultsVisible && results !== null ? /*#__PURE__*/jsx("div", {
+          className: styles.results,
+          style: _objectSpread({}, getStyleFromBox(resultsBoxStyle)),
+          children: /*#__PURE__*/jsx(Text, _objectSpread({}, results))
+        }) : !isPlaceholder ? /*#__PURE__*/jsx(Button, {
+          className: styles.submitButton,
+          disabled: validated !== null,
+          type: "button",
+          onClick: onClickSubmit,
+          style: _objectSpread(_objectSpread({}, getStyleFromBox(submitBoxStyle)), getStyleFromText(submitTextStyle)),
+          children: submitButtonLabel || intl.formatMessage({
+            id: "IbZVf0",
+            defaultMessage: [{
+              "type": 0,
+              "value": "Submit"
+            }]
+          })
+        }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+          className: styles.footer,
+          ref: footerRef,
+          style: {
+            paddingTop: spacing,
+            paddingBottom: spacing / 2,
+            paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+            paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
+          },
+          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+        }) : null]
+      })
+    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: backgroundShouldLoad,
+      mediaRef: mediaRef,
+      withoutVideo: isPreview,
+      className: styles.background
+    }) : null]
+  });
 }
 
 // import * as transforms from './transforms/index';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-game-sort",
-    "version": "0.4.49",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -65,17 +65,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.49",
-        "@micromag/element-background": "^0.4.49",
-        "@micromag/element-button": "^0.4.49",
-        "@micromag/element-container": "^0.4.49",
-        "@micromag/element-footer": "^0.4.49",
-        "@micromag/element-header": "^0.4.49",
-        "@micromag/element-heading": "^0.4.49",
-        "@micromag/element-layout": "^0.4.49",
-        "@micromag/element-text": "^0.4.49",
-        "@micromag/element-visual": "^0.4.49",
-        "@micromag/transforms": "^0.4.49",
+        "@micromag/core": "^0.4.50",
+        "@micromag/element-background": "^0.4.50",
+        "@micromag/element-button": "^0.4.50",
+        "@micromag/element-container": "^0.4.50",
+        "@micromag/element-footer": "^0.4.50",
+        "@micromag/element-header": "^0.4.50",
+        "@micromag/element-heading": "^0.4.50",
+        "@micromag/element-layout": "^0.4.50",
+        "@micromag/element-text": "^0.4.50",
+        "@micromag/element-visual": "^0.4.50",
+        "@micromag/transforms": "^0.4.50",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
         "classnames": "^2.2.6",
@@ -87,6 +87,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }