@micromag/core 0.4.46 → 0.4.49

package/es/contexts.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import isString from 'lodash/isString';
-import React, { useContext, useMemo, useState, useCallback, useEffect, useRef } from 'react';
+import React$1, { useContext, useMemo, useState, useCallback, useEffect, createContext, useRef } from 'react';
 import { ComponentsManager, FieldsManager, ScreensManager, ColorsParser, Tracking } from '@micromag/core';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import JSCookie from 'js-cookie';
@@ -24,7 +24,7 @@ var FIELDS_NAMESPACE = 'fields';
 var FORMS_NAMESPACE = 'forms';
 var SCREENS_NAMESPACE = 'screens';
 var ELEMENTS_NAMESPACE = 'elements';
-var ComponentsContext = /*#__PURE__*/React.createContext(null);
+var ComponentsContext = /*#__PURE__*/React$1.createContext(null);
 var emptyComponents = {};
 
 /**
@@ -147,7 +147,7 @@ function ComponentsProvider(_ref) {
   var finalManager = useMemo(function () {
     return new ComponentsManager(_objectSpread(_objectSpread(_objectSpread({}, previousManager !== null ? previousManager.getComponents() : null), manager !== null ? manager.getComponents() : null), new ComponentsManager(components).addNamespace(namespace).getComponents()));
   }, [previousManager, manager, components, namespace]);
-  return /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ComponentsContext.Provider, {
     value: finalManager
   }, children);
 }
@@ -289,7 +289,7 @@ var consentStates = [{
   description: messages.ad_user_data_description,
   value: false
 }];
-var ConsentContext = /*#__PURE__*/React.createContext({
+var ConsentContext = /*#__PURE__*/React$1.createContext({
   consent: null,
   setConsent: function setConsent() {}
 });
@@ -392,12 +392,12 @@ function ConsentProvider(_ref) {
       setConsented: setConsented
     };
   }, [consent, setConsent, consented, setConsented]);
-  return /*#__PURE__*/React.createElement(ConsentContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ConsentContext.Provider, {
     value: value
   }, children);
 }
 
-var FieldsContext = /*#__PURE__*/React.createContext(null);
+var FieldsContext = /*#__PURE__*/React$1.createContext(null);
 var useFieldsManager = function useFieldsManager() {
   return useContext(FieldsContext);
 };
@@ -426,15 +426,15 @@ function FieldsProvider(_ref) {
       return isString(component) ? map : _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, id, component));
     }, {});
   }, [finalManager]);
-  return /*#__PURE__*/React.createElement(FieldsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(FieldsContext.Provider, {
     value: finalManager
-  }, /*#__PURE__*/React.createElement(ComponentsProvider, {
+  }, /*#__PURE__*/React$1.createElement(ComponentsProvider, {
     namespace: FIELDS_NAMESPACE,
     components: components
   }, children));
 }
 
-var ScreensContext = /*#__PURE__*/React.createContext(new ScreensManager());
+var ScreensContext = /*#__PURE__*/React$1.createContext(new ScreensManager());
 var useScreensManager = function useScreensManager() {
   return useContext(ScreensContext);
 };
@@ -481,15 +481,15 @@ function ScreensProvider(_ref) {
       finalManager.off('change', onChange);
     };
   }, [finalManager, setComponents]);
-  return /*#__PURE__*/React.createElement(ScreensContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ScreensContext.Provider, {
     value: finalManager
-  }, /*#__PURE__*/React.createElement(ComponentsProvider, {
+  }, /*#__PURE__*/React$1.createElement(ComponentsProvider, {
     namespace: SCREENS_NAMESPACE,
     components: components
   }, children));
 }
 
-var StoryContext = /*#__PURE__*/React.createContext(null);
+var StoryContext = /*#__PURE__*/createContext(null);
 var useStoryContext = function useStoryContext() {
   return useContext(StoryContext);
 };
@@ -506,7 +506,7 @@ function StoryProvider(_ref) {
   }, children);
 }
 
-var EditorContext = /*#__PURE__*/React.createContext(null);
+var EditorContext = /*#__PURE__*/React$1.createContext(null);
 var useEditor = function useEditor() {
   return useContext(EditorContext);
 };
@@ -537,7 +537,7 @@ function EditorProvider(_ref2) {
   }, [parse, story]);
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
-  return /*#__PURE__*/React.createElement(EditorContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(EditorContext.Provider, {
     value: {
       getColors: getColors
     }
@@ -545,7 +545,7 @@ function EditorProvider(_ref2) {
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-var FieldsValueContext = /*#__PURE__*/React.createContext(null);
+var FieldsValueContext = /*#__PURE__*/React$1.createContext(null);
 var useFieldsValue = function useFieldsValue() {
   return useContext(FieldsValueContext);
 };
@@ -553,13 +553,13 @@ function FieldsValueContextProvider(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? null : _ref$value,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(FieldsValueContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(FieldsValueContext.Provider, {
     value: value
   }, children);
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-var FieldContext = /*#__PURE__*/React.createContext(null);
+var FieldContext = /*#__PURE__*/React$1.createContext(null);
 var useFieldContext = function useFieldContext() {
   return useContext(FieldContext);
 };
@@ -567,12 +567,12 @@ function FieldContextProvider(_ref) {
   var _ref$context = _ref.context,
     context = _ref$context === void 0 ? null : _ref$context,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(FieldContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(FieldContext.Provider, {
     value: context
   }, children);
 }
 
-var SettingsContext = /*#__PURE__*/React.createContext({});
+var SettingsContext = /*#__PURE__*/React$1.createContext({});
 var useSettings = function useSettings() {
   return useContext(SettingsContext);
 };
@@ -592,13 +592,13 @@ function SettingsProvider(_ref2) {
   var value = useMemo(function () {
     return _objectSpread(_objectSpread({}, previousSettings), settings);
   }, [settings, previousSettings]);
-  return /*#__PURE__*/React.createElement(SettingsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(SettingsContext.Provider, {
     value: value
   }, children);
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-var GoogleKeysContext = /*#__PURE__*/React.createContext({
+var GoogleKeysContext = /*#__PURE__*/React$1.createContext({
   apiKey: null
 });
 var useGoogleKeys = function useGoogleKeys() {
@@ -616,12 +616,12 @@ function GoogleKeysProvider(_ref) {
       apiKey: apiKey || previousApiKey || settingApiKey
     };
   }, [apiKey, previousApiKey, settingApiKey]);
-  return /*#__PURE__*/React.createElement(GoogleKeysContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(GoogleKeysContext.Provider, {
     value: value
   }, children);
 }
 
-var FontsContext = /*#__PURE__*/React.createContext({
+var FontsContext = /*#__PURE__*/React$1.createContext({
   systemFonts: null,
   googleFonts: null,
   customFonts: null
@@ -722,12 +722,12 @@ function FontsProvider(_ref4) {
       setGoogleFonts: setGoogleFonts
     };
   }, [previousSystemFonts, previousGoogleFonts, previousCustomFonts, customFonts, systemFonts, googleFonts, setGoogleFonts]);
-  return /*#__PURE__*/React.createElement(FontsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(FontsContext.Provider, {
     value: fonts
   }, children);
 }
 
-var GoogleApiClientContext = /*#__PURE__*/React.createContext(null);
+var GoogleApiClientContext = /*#__PURE__*/React$1.createContext(null);
 var useGoogleApiClient = function useGoogleApiClient() {
   return useContext(GoogleApiClientContext);
 };
@@ -740,8 +740,8 @@ var withGoogleApiClient = function withGoogleApiClient(WrappedComponent) {
     return displayName || name || 'Component';
   };
   function WithGoogleApiClientComponent(props) {
-    return /*#__PURE__*/React.createElement(GoogleApiClientContext.Consumer, null, function (client) {
-      return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
+    return /*#__PURE__*/React$1.createElement(GoogleApiClientContext.Consumer, null, function (client) {
+      return /*#__PURE__*/React$1.createElement(WrappedComponent, Object.assign({
         googleApiClient: client
       }, props));
     });
@@ -768,12 +768,12 @@ function GoogleApiClientProvider(_ref2) {
       return setClient(gapi);
     });
   }, [apiKey, setClient]);
-  return /*#__PURE__*/React.createElement(GoogleApiClientContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(GoogleApiClientContext.Provider, {
     value: client
   }, children);
 }
 
-var GoogleMapsClientContext = /*#__PURE__*/React.createContext(null);
+var GoogleMapsClientContext = /*#__PURE__*/React$1.createContext(null);
 var useGoogleMapsClient = function useGoogleMapsClient() {
   return useContext(GoogleMapsClientContext);
 };
@@ -786,8 +786,8 @@ var withGoogleMapsClient = function withGoogleMapsClient(WrappedComponent) {
     return displayName || name || 'Component';
   };
   function WithGoogleMapsClientComponent(props) {
-    return /*#__PURE__*/React.createElement(GoogleMapsClientContext.Consumer, null, function (client) {
-      return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
+    return /*#__PURE__*/React$1.createElement(GoogleMapsClientContext.Consumer, null, function (client) {
+      return /*#__PURE__*/React$1.createElement(WrappedComponent, Object.assign({
         googleApiClient: client
       }, props));
     });
@@ -819,12 +819,12 @@ function GoogleMapsClientProvider(_ref2) {
       });
     }
   }, [apiKey, locale, libraries, setClient, exisitingClient]);
-  return /*#__PURE__*/React.createElement(GoogleMapsClientContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(GoogleMapsClientContext.Provider, {
     value: client
   }, children);
 }
 
-var ModalsContext = /*#__PURE__*/React.createContext({
+var ModalsContext = /*#__PURE__*/React$1.createContext({
   container: null
 });
 var useModals = function useModals() {
@@ -832,13 +832,13 @@ var useModals = function useModals() {
 };
 var withModals = function withModals(WrappedComponent) {
   function WithModalsComponent(props) {
-    return /*#__PURE__*/React.createElement(ModalsContext.Consumer, null, function (_ref) {
+    return /*#__PURE__*/React$1.createElement(ModalsContext.Consumer, null, function (_ref) {
       var modals = _ref.modals,
         container = _ref.container,
         setContainer = _ref.setContainer,
         register = _ref.register,
         unregister = _ref.unregister;
-      return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
+      return /*#__PURE__*/React$1.createElement(WrappedComponent, Object.assign({
         modalsContainer: container,
         setModalsContainer: setContainer,
         modals: modals,
@@ -896,12 +896,12 @@ function ModalsProvider(_ref2) {
       unregister: unregister
     };
   }, [modals, container, setContainer, register, unregister]);
-  return /*#__PURE__*/React.createElement(ModalsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ModalsContext.Provider, {
     value: value
   }, children);
 }
 
-var PanelsContext = /*#__PURE__*/React.createContext({
+var PanelsContext = /*#__PURE__*/React$1.createContext({
   container: null
 });
 var usePanels = function usePanels() {
@@ -909,13 +909,13 @@ var usePanels = function usePanels() {
 };
 var withPanels = function withPanels(WrappedComponent) {
   function WithPanelsComponent(props) {
-    return /*#__PURE__*/React.createElement(PanelsContext.Consumer, null, function (_ref) {
+    return /*#__PURE__*/React$1.createElement(PanelsContext.Consumer, null, function (_ref) {
       var panels = _ref.panels,
         setContainer = _ref.setContainer,
         container = _ref.container,
         register = _ref.register,
         unregister = _ref.unregister;
-      return /*#__PURE__*/React.createElement(WrappedComponent, Object.assign({
+      return /*#__PURE__*/React$1.createElement(WrappedComponent, Object.assign({
         panelsContainer: container,
         setPanelsContainer: setContainer,
         panels: panels,
@@ -973,7 +973,7 @@ function PanelsProvider(_ref2) {
       unregister: unregister
     };
   }, [panels, setContainer, container, register, unregister]);
-  return /*#__PURE__*/React.createElement(PanelsContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(PanelsContext.Provider, {
     value: value
   }, children);
 }
@@ -995,7 +995,7 @@ var defaultValue$1 = {
   controlsTheme: defaultControlsThemeValue,
   currentQualityLevel: null
 };
-var PlaybackContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
+var PlaybackContext = /*#__PURE__*/React$1.createContext(_objectSpread(_objectSpread({}, defaultValue$1), {}, {
   setMuted: function setMuted() {},
   setPlaying: function setPlaying() {},
   setControls: function setControls() {},
@@ -1194,7 +1194,7 @@ function PlaybackProvider(_ref) {
       setCurrentQualityLevel: finalSetCurrentQualityLevel
     };
   }, [muted, playing, completed, paused, controls, controlsSuggestPlay, controlsVisible, controlsTheme, media, hasAudio, currentQualityLevel, setMuted, setIsBackground, isBackground, finalSetPlaying, finalSetControls, finalSetControlsTheme, setControlsSuggestPlay, setControlsVisible, showControls, hideControls, setMedia, finalSetCurrentQualityLevel]);
-  return /*#__PURE__*/React.createElement(PlaybackContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(PlaybackContext.Provider, {
     value: value
   }, children);
 }
@@ -1232,7 +1232,7 @@ var useRouteBack = function useRouteBack() {
   return back;
 };
 
-var ScreenContext = /*#__PURE__*/React.createContext({
+var ScreenContext = /*#__PURE__*/React$1.createContext({
   data: null,
   definition: null,
   renderContext: null
@@ -1321,13 +1321,13 @@ function ScreenProvider(_ref6) {
       screenState: finalScreenState
     };
   }, [finalData, finalDefinition, finalRenderContext, finalScreenState]);
-  return /*#__PURE__*/React.createElement(ScreenContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ScreenContext.Provider, {
     value: value
   }, children);
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-var ScreenSizeContext = /*#__PURE__*/React.createContext({
+var ScreenSizeContext = /*#__PURE__*/React$1.createContext({
   screen: null,
   screens: [],
   width: 0,
@@ -1352,7 +1352,7 @@ function ScreenSizeProvider(_ref) {
   var currentSize = useMemo(function () {
     return size;
   }, [nextScreen, nextWidth, nextHeight, nextResolution]);
-  return /*#__PURE__*/React.createElement(ScreenSizeContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ScreenSizeContext.Provider, {
     value: currentSize
   }, children);
 }
@@ -1384,7 +1384,7 @@ function TrackingProvider(_ref) {
     }
     return refTracking.current;
   }, [contextTracking, variables, disabled, paused]);
-  return /*#__PURE__*/React.createElement(TrackingContainer, {
+  return /*#__PURE__*/React$1.createElement(TrackingContainer, {
     tracking: tracking
   }, children);
 }
@@ -1401,7 +1401,7 @@ var defaultValue = {
   disableInteraction: function disableInteraction() {},
   enableInteraction: function enableInteraction() {}
 };
-var ViewerContext = /*#__PURE__*/React.createContext(_objectSpread(_objectSpread({}, defaultValue), {}, {
+var ViewerContext = /*#__PURE__*/React$1.createContext(_objectSpread(_objectSpread({}, defaultValue), {}, {
   webView: null,
   setWebView: function setWebView() {}
 }));
@@ -1516,16 +1516,16 @@ function ViewerProvider(_ref) {
       setWebView: setWebView
     };
   }, [containerRef, events, menuVisible, menuOverScreen, width, height, topHeight, bottomHeight, bottomSidesWidth, gotoNextScreen, gotoPreviousScreen, disableInteraction, enableInteraction, webView, setWebView]);
-  return /*#__PURE__*/React.createElement(ViewerContext.Provider, {
+  return /*#__PURE__*/React$1.createElement(ViewerContext.Provider, {
     value: value
   }, children);
 }
 
-var VisitorContext = /*#__PURE__*/React.createContext({
+var VisitorContext = /*#__PURE__*/createContext({
   visitor: null,
   setVisitor: function setVisitor() {}
 });
-var useVisitorContext = function useVisitorContext() {
+function useVisitorContext() {
   var _useContext = useContext(VisitorContext),
     visitor = _useContext.visitor,
     setVisitor = _useContext.setVisitor;
@@ -1533,41 +1533,45 @@ var useVisitorContext = function useVisitorContext() {
     visitor: visitor,
     setVisitor: setVisitor
   };
-};
-var useVisitor = function useVisitor() {
+}
+function useVisitor() {
   var _useContext2 = useContext(VisitorContext),
     visitor = _useContext2.visitor;
   return visitor;
-};
-var useSetVisitor = function useSetVisitor() {
+}
+function useSetVisitor() {
   var _useContext3 = useContext(VisitorContext),
     setVisitor = _useContext3.setVisitor;
   return setVisitor;
-};
+}
 function VisitorProvider(_ref) {
   var _ref$visitor = _ref.visitor,
     providedVisitor = _ref$visitor === void 0 ? null : _ref$visitor,
     children = _ref.children;
-  var _useState = useState(providedVisitor),
+  var _useState = useState(isString(providedVisitor) ? {
+      id: providedVisitor
+    } : providedVisitor),
     _useState2 = _slicedToArray(_useState, 2),
     visitor = _useState2[0],
-    setVisitor = _useState2[1];
+    _setVisitor = _useState2[1];
   useEffect(function () {
     if (providedVisitor !== visitor) {
-      setVisitor(providedVisitor);
+      _setVisitor(isString(providedVisitor) ? {
+        id: providedVisitor
+      } : providedVisitor);
     }
-  }, [providedVisitor, setVisitor]);
+  }, [providedVisitor, _setVisitor]);
   var value = useMemo(function () {
     return {
       visitor: visitor,
       setVisitor: function setVisitor(newVisitor) {
-        return isString(newVisitor) ? {
+        return _setVisitor(isString(newVisitor) ? {
           id: newVisitor
-        } : newVisitor;
+        } : newVisitor);
       }
     };
-  }, [visitor, setVisitor]);
-  return /*#__PURE__*/React.createElement(VisitorContext.Provider, {
+  }, [visitor, _setVisitor]);
+  return /*#__PURE__*/React$1.createElement(VisitorContext.Provider, {
     value: value
   }, children);
 }

package/es/hooks.d.ts

@@ -253,7 +253,14 @@ declare const useParsedStory: (story: any, { disabled, withTheme, withMedias, wi
     withMigrations?: boolean;
 }) => any;
 
-declare const usePlaceholderStyle: (className: any, placeholderStyle: any) => string;
+declare function usePlaceholderStyle(selector: string, placeholderStyle: {
+    color?: string | null;
+    fontSize?: string | null;
+    fontStyle?: string | null;
+    fontWeight?: string | null;
+    fontFamily?: string | null;
+    textAlign?: string | null;
+}): string | null;
 
 declare function useProgressSteps({ disabled, currentTime, duration, onStep, steps, }?: {
     disabled?: boolean;

package/es/hooks.js

@@ -17,6 +17,7 @@ import raf from 'raf';
 import createDebug from 'debug';
 import isString from 'lodash/isString';
 import { useScreensManager, useFieldsManager, useTracking, useScreen } from '@micromag/core/contexts';
+import isEmpty from 'lodash/isEmpty';
 import { useWindowSize } from '@folklore/hooks';
 import { match } from 'css-mediaquery';
 import { useIntl } from 'react-intl';
@@ -1940,9 +1941,15 @@ 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 usePlaceholderStyle(selector, placeholderStyle) {
+  var styles = placeholderStyle !== null ? Object.keys(placeholderStyle).reduce(function (styles, key) {
+    var value = placeholderStyle[key];
+    return !isEmpty(value) ? _objectSpread(_objectSpread({}, styles), {}, _defineProperty({}, key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(), value)) : styles;
+  }, {}) : null;
+  return styles !== null && Object.keys(styles).length > 0 ? "\n        ".concat(selector, "::placeholder {\n            ").concat(Object.keys(styles).map(function (key) {
+    return "".concat(key, ": ").concat(styles[key], ";");
+  }).join('\n'), "\n        }\n    ") : null;
+}
 
 function useProgressSteps() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},