@micromag/core 0.3.673 → 0.3.676

package/es/components.js

@@ -12,7 +12,7 @@ import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver } from '@micromag/core/hooks';
+import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver, useDevicePixelRatio } from '@micromag/core/hooks';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
@@ -2447,8 +2447,11 @@ var FontFaces = function FontFaces(_ref4) {
     return it !== null;
   });
   return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
-    type: "text/css"
-  }, fontFaces.join('\n')) : null;
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: fontFaces.join('\n')
+    }
+  }) : null;
 };
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
@@ -3593,7 +3596,6 @@ var VideoLoop = function VideoLoop(_ref) {
 
 var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
-var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 var propTypes$a = {
   width: PropTypes.number,
   height: PropTypes.number,
@@ -3667,6 +3669,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
     frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
     _useMemo$transform = _useMemo.transform,
     screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
+  var devicePixelRatio = useDevicePixelRatio();
   var screenSize = useMemo(function () {
     return {
       screen: 'mobile',
@@ -4378,10 +4381,13 @@ var HighlightStyle = function HighlightStyle(_ref) {
     highlightSelector = _ref.highlightSelector,
     style = _ref.style;
   return style !== null ? /*#__PURE__*/React.createElement("style", {
-    type: "text/css"
-  }, "".concat([selector, highlightSelector].filter(function (it) {
-    return it !== null;
-  }).join(' '), "{").concat(convertStyleToString(style), "}")) : null;
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: "".concat([selector, highlightSelector].filter(function (it) {
+        return it !== null;
+      }).join(' '), "{").concat(convertStyleToString(style), "}")
+    }
+  }) : null;
 };
 HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
@@ -4401,10 +4407,13 @@ var LinkStyle = function LinkStyle(_ref) {
     linkSelector = _ref.linkSelector,
     style = _ref.style;
   return style !== null ? /*#__PURE__*/React.createElement("style", {
-    type: "text/css"
-  }, "".concat([selector, linkSelector].filter(function (it) {
-    return it !== null;
-  }).join(' '), "{").concat(convertStyleToString(style), "}")) : null;
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: "".concat([selector, linkSelector].filter(function (it) {
+        return it !== null;
+      }).join(' '), "{").concat(convertStyleToString(style), "}")
+    }
+  }) : null;
 };
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;

package/es/hooks.js

@@ -1948,7 +1948,16 @@ function useProgressSteps() {
 }
 
 var _excluded = ["width", "height"];
-var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+var useDevicePixelRatio = function useDevicePixelRatio() {
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    pixelRatio = _useState2[0],
+    setPixelRatio = _useState2[1];
+  useEffect(function () {
+    setPixelRatio(typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1);
+  }, [setPixelRatio]);
+  return pixelRatio;
+};
 var useScreenSize = function useScreenSize(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? null : _ref$width,
@@ -1966,6 +1975,7 @@ var useScreenSize = function useScreenSize(_ref) {
     providedMedia = _ref$media === void 0 ? null : _ref$media,
     _ref$scale = _ref.scale,
     scale = _ref$scale === void 0 ? null : _ref$scale;
+  var devicePixelRatio = useDevicePixelRatio();
   var screenSize = useMemo(function () {
     var media = providedMedia !== null ? providedMedia : {
       type: mediaType,
@@ -2006,6 +2016,7 @@ var useScreenSizeFromElement = function useScreenSizeFromElement() {
     calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
     _useDimensionObserver3 = _useDimensionObserver.height,
     calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
+  var devicePixelRatio = useDevicePixelRatio();
   var fullWidth = width !== null ? width : calculatedWidth;
   var fullHeight = height !== null ? height : calculatedHeight;
   var _ref5 = opts || {},
@@ -2068,10 +2079,10 @@ var getWindowSize = function getWindowSize() {
   };
 };
 var useScreenSizeFromWindow = function useScreenSizeFromWindow(opts) {
-  var _useState = useState(getWindowSize()),
-    _useState2 = _slicedToArray(_useState, 2),
-    windowSize = _useState2[0],
-    setWindowSize = _useState2[1];
+  var _useState3 = useState(getWindowSize()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowSize = _useState4[0],
+    setWindowSize = _useState4[1];
   useEffect(function () {
     var onResize = function onResize() {
       return setWindowSize(getWindowSize());
@@ -2399,4 +2410,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useActivityDetector, useAnimationFrame, useDebounced as useDebounce, useDevicePixelRatio, useDimensionObserver, useDocumentEvent, useDragProgress, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaBuffering, useMediaCurrentTime, useMediaDuration, useMediaLoad, useMediaProgress, useMediaReady, useMediaState, useMediaThumbnail, useMediaTimestampOffset, useMediaWaveform, useMediasParser, useObserver, useParsedStory, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.673",
+    "version": "0.3.676",
     "private": false,
     "description": "",
     "keywords": [
@@ -144,5 +144,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6bcd614e97a55a542e28528433b2815be9c487fc"
+    "gitHead": "941f3a10c4de917c02ca81f39e6d15a85094e289"
 }