@micromag/core 0.3.673 → 0.3.679

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;
@@ -3087,6 +3090,12 @@ var badge = PropTypes.shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+PropTypes.shape({
+  active: PropTypes.bool,
+  placeholder: textElement,
+  textStyle: textStyle,
+  boxStyle: boxStyle
+});
 PropTypes.shape({
   badge: badge
 });
@@ -3593,7 +3602,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 +3675,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 +4387,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 +4413,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

@@ -1915,6 +1915,10 @@ var useParsedStory = function useParsedStory(story) {
   return newStory;
 };
 
+var usePlaceholderStyle = function usePlaceholderStyle(className, placeholderStyle) {
+  return "\n            .".concat(className, "::placeholder {\n                ").concat(placeholderStyle.color ? "color: ".concat(placeholderStyle.color, ";") : '', "\n                ").concat(placeholderStyle.fontSize ? "font-size: ".concat(placeholderStyle.fontSize, ";") : '', "\n                ").concat(placeholderStyle.fontStyle ? "font-style: ".concat(placeholderStyle.fontStyle, ";") : '', "\n                ").concat(placeholderStyle.fontWeight ? "font-weight: ".concat(placeholderStyle.fontWeight, ";") : '', "\n                ").concat(placeholderStyle.fontFamily ? "font-family: ".concat(placeholderStyle.fontFamily, ";") : '', "\n                ").concat(placeholderStyle.textAlign ? "text-align: ".concat(placeholderStyle.textAlign, ";") : '', "\n            }\n        ");
+};
+
 function useProgressSteps() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$disabled = _ref.disabled,
@@ -1948,7 +1952,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 +1979,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 +2020,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 +2083,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());
@@ -2340,7 +2355,7 @@ var useTrackScreenEvent = function useTrackScreenEvent() {
   return useCallback(function () {
     var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var label = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var opts = arguments.length > 2 ? arguments[2] : undefined;
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     if (type !== null && action !== null) {
       tracking.trackEvent("screen_".concat(type), action, label, _objectSpread(_objectSpread({}, opts), getScreenOptions(screenContext, opts)));
     }
@@ -2374,7 +2389,7 @@ var useTrackEvent = function useTrackEvent() {
     var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var opts = arguments.length > 3 ? arguments[3] : undefined;
+    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
     if (category !== null && action !== null) {
       tracking.trackEvent(category, action, label, opts);
     }
@@ -2389,7 +2404,7 @@ var useTrackMedia = function useTrackMedia() {
   return useCallback(function () {
     var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var opts = arguments.length > 2 ? arguments[2] : undefined;
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     if (type !== null && media !== null && action !== null) {
       tracking.trackMedia(type, media, action, opts);
     }
@@ -2399,4 +2414,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, usePlaceholderStyle, useProgressSteps, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSpringValue, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/index.js

@@ -612,6 +612,12 @@ var badge = PropTypes$1.shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+var customAnswer = PropTypes$1.shape({
+  active: PropTypes$1.bool,
+  placeholder: textElement,
+  textStyle: textStyle,
+  boxStyle: boxStyle
+});
 var header = PropTypes$1.shape({
   badge: badge
 });
@@ -664,6 +670,7 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     conversation: conversation,
     conversationMessage: conversationMessage,
     conversationMessages: conversationMessages,
+    customAnswer: customAnswer,
     customFont: customFont,
     defaultMessage: defaultMessage,
     defaultMessageContent: defaultMessageContent,

package/package.json

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