@micromag/core 0.4.40 → 0.4.41

package/es/components.js

@@ -673,9 +673,7 @@ function Card(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['card-footer', footerClassName])
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
-  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    className: className
-  }, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary')]);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className]);
   if (href !== null) {
     return /*#__PURE__*/React.createElement(Link, {
       href: href,
@@ -1011,9 +1009,7 @@ function Dropdown(_ref) {
     };
   }, [visible, setEnabled]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({
-      className: className
-    }, "dropdown-menu-".concat(align), align !== null), "show", visible)]),
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _it$type = it.type,
@@ -1221,7 +1217,7 @@ function Navbar(_ref) {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "className", className), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap)])
+    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['container-fluid', {
       'px-0': compact

package/es/contexts.js

@@ -1023,23 +1023,45 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
+
   useEffect(function () {
     return function () {
       if (active) {
+        console.log('clear media');
         setMedia(null);
         setIsBackground(false);
       }
     };
-  }, [active, setMedia, setIsBackground]);
+  }, [active, setMedia, setIsBackground, updateKey]);
+
+  // useEffect(() => {
+  //     if (!active) {
+  //         console.log('unset media');
+  //         setMedia(null);
+  //         setIsBackground(false);
+  //     }
+  //     return () => {
+  //         if (active) {
+  //             console.log('clear media');
+  //             setMedia(null);
+  //             setIsBackground(false);
+  //         }
+  //     };
+  // }, [active, setMedia, setIsBackground]);
 
   // Register media with context when active and no media is registered
   useEffect(function () {
+    console.log('try to register media');
     if (!active || mediaRef.current === null || media !== null) {
       return;
     }
+    console.log('register media');
     setIsBackground(background);
     setMedia(mediaRef.current);
   }, [active, background, media, updateKey, setMedia, setIsBackground]);
+
+  // console.log('playback', mediaRef.current, media);
+
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/lib/components.js

@@ -675,9 +675,7 @@ function Card(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['card-footer', footerClassName])
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
-  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    className: className
-  }, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary')]);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className]);
   if (href !== null) {
     return /*#__PURE__*/React.createElement(Link, {
       href: href,
@@ -1013,9 +1011,7 @@ function Dropdown(_ref) {
     };
   }, [visible, setEnabled]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({
-      className: className
-    }, "dropdown-menu-".concat(align), align !== null), "show", visible)]),
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _it$type = it.type,
@@ -1223,7 +1219,7 @@ function Navbar(_ref) {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "className", className), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap)])
+    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['container-fluid', {
       'px-0': compact

package/lib/contexts.js

@@ -1023,23 +1023,45 @@ var usePlaybackMediaRef = function usePlaybackMediaRef() {
   // Cleanup: clear media registration when this screen deactivates or unmounts.
   // Note: we cannot check mediaRef.current here because React clears callback refs
   // before running effect cleanups, so mediaRef.current is always null at this point.
+
   React.useEffect(function () {
     return function () {
       if (active) {
+        console.log('clear media');
         setMedia(null);
         setIsBackground(false);
       }
     };
-  }, [active, setMedia, setIsBackground]);
+  }, [active, setMedia, setIsBackground, updateKey]);
+
+  // useEffect(() => {
+  //     if (!active) {
+  //         console.log('unset media');
+  //         setMedia(null);
+  //         setIsBackground(false);
+  //     }
+  //     return () => {
+  //         if (active) {
+  //             console.log('clear media');
+  //             setMedia(null);
+  //             setIsBackground(false);
+  //         }
+  //     };
+  // }, [active, setMedia, setIsBackground]);
 
   // Register media with context when active and no media is registered
   React.useEffect(function () {
+    console.log('try to register media');
     if (!active || mediaRef.current === null || media !== null) {
       return;
     }
+    console.log('register media');
     setIsBackground(background);
     setMedia(mediaRef.current);
   }, [active, background, media, updateKey, setMedia, setIsBackground]);
+
+  // console.log('playback', mediaRef.current, media);
+
   return {
     ref: mediaRef,
     isCurrent: mediaRef.current === media

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.4.40",
+    "version": "0.4.41",
     "private": false,
     "description": "",
     "keywords": [
@@ -161,6 +161,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6a9ff6e196a972abfd617f49353862cf445b0e83",
+    "gitHead": "c7856a747ba0a4466f4b63bc29e31003275ac6e0",
     "types": "es/index.d.ts"
 }