@meduza/ui-kit-2 0.1.50 → 0.1.51

package/dist/Image/Image.types.d.ts

@@ -15,6 +15,7 @@ export interface ImageProps {
     source?: string[];
     lazy?: boolean;
     ratio?: number;
+    fullscreen?: boolean | undefined;
     styleContext?: string[] | string;
 }
 export interface PictureProps {

package/dist/ui-kit-2.cjs.development.js

@@ -318,6 +318,36 @@ var postMessage = function postMessage(category, element, action) {
   }
 };
 
+var viewportSize = (function () {
+  return {
+    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
+    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+  };
+});
+
+var MediaQuerySizes = {
+  MOBILE: 512,
+  PORTRAIT_TABLET: 768,
+  LANDSCAPE_TABLET: 1024,
+  DESKTOP: 1010,
+  WIDE_DESKTOP: 1200
+};
+var imageBreakpoints = {
+  325: '(min-width: 0)',
+  520: '(min-width: 325px)',
+  600: '(min-width: 600px)',
+  650: '(min-width: 650px)',
+  980: '(min-width: 1000px)',
+  1335: '(min-width: 1000px)'
+};
+var imageConditionalKeys = {
+  xs: [325],
+  superFull: [1335, 650, 520, 325],
+  full: [980, 650, 520, 325],
+  "default": [650, 520, 325],
+  narrow: [600, 325]
+};
+
 var styles$3 = {"root":"Lazy-module_root__2Z72l"};
 
 var Lazy = function Lazy(_ref) {
@@ -352,29 +382,6 @@ var Lazy = function Lazy(_ref) {
   }, visible && children);
 };
 
-var MediaQuerySizes = {
-  MOBILE: 512,
-  PORTRAIT_TABLET: 768,
-  LANDSCAPE_TABLET: 1024,
-  DESKTOP: 1010,
-  WIDE_DESKTOP: 1200
-};
-var imageBreakpoints = {
-  325: '(min-width: 0)',
-  520: '(min-width: 325px)',
-  600: '(min-width: 600px)',
-  650: '(min-width: 650px)',
-  980: '(min-width: 1000px)',
-  1335: '(min-width: 1000px)'
-};
-var imageConditionalKeys = {
-  xs: [325],
-  superFull: [1335, 650, 520, 325],
-  full: [980, 650, 520, 325],
-  "default": [650, 520, 325],
-  narrow: [600, 325]
-};
-
 var toCamel = function toCamel(s) {
   return s.replace(/([_][a-z])/gi, function (str) {
     return str.toUpperCase().replace('_', '');
@@ -444,17 +451,23 @@ var Image = function Image(_ref) {
       source = _ref.source,
       lazy = _ref.lazy,
       ratio = _ref.ratio,
-      styleContext = _ref.styleContext;
+      styleContext = _ref.styleContext,
+      fullscreen = _ref.fullscreen;
 
   var _useContext = React.useContext(BlockContext),
       lightBox = _useContext.lightBox;
 
-  var _useState = React.useState(false),
+  var _useState = React.useState(lazy ? false : true),
       isLoaded = _useState[0],
       setIsLoaded = _useState[1];
 
   var handleClick = function handleClick() {
-    if (!lightBox || optimized && !optimized.original) {
+    var _viewportSize = viewportSize(),
+        viewportWidth = _viewportSize.width;
+
+    var disableFullscreenDesktop = viewportWidth >= MediaQuerySizes.LANDSCAPE_TABLET && !fullscreen;
+
+    if (disableFullscreenDesktop || !lightBox || optimized && !optimized.original) {
       return;
     }
 
@@ -471,7 +484,7 @@ var Image = function Image(_ref) {
   /* fallback w325 url until w6 was released */
 
   var fallbackSource = source && source[0] || optimized.w325 && optimized.w325['1x'] || optimized.original;
-  var classNames = [[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, lightBox && optimized && optimized.original]];
+  var classNames = [[styles$4.root, true], [styles$4.isLoaded, isLoaded], [styles$4.fullscreen, fullscreen && lightBox && optimized && optimized.original]];
 
   if (styleContext) {
     classNames = makeStyleContext(classNames, styleContext, styles$4);
@@ -625,13 +638,6 @@ var Footnote = function Footnote(_ref) {
   }, children));
 };
 
-var viewportSize = (function () {
-  return {
-    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
-    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
-  };
-});
-
 var styles$7 = {"root":"DotsOnImage-module_root__2XP3Q","isVisible":"DotsOnImage-module_isVisible__Wqqqt","marker":"DotsOnImage-module_marker__lH5cP","show":"DotsOnImage-module_show__2TMBv","dot":"DotsOnImage-module_dot__H1wua","isActive":"DotsOnImage-module_isActive__3hh31","popover":"DotsOnImage-module_popover__35Cpj","isRight":"DotsOnImage-module_isRight__2RsJe","isTop":"DotsOnImage-module_isTop__3zmSK","isLeft":"DotsOnImage-module_isLeft__3quc9","isBottom":"DotsOnImage-module_isBottom__3Nk1T"};
 
 var DotsOnImage = function DotsOnImage(_ref) {
@@ -1271,6 +1277,7 @@ var EmbedBlock = function EmbedBlock(_ref) {
             alt: block.data.caption,
             display: block.data.display,
             lazy: block.data.lazy,
+            fullscreen: block.data.fullscreen,
             styleContext: styleContext
           }));
         }
@@ -2358,7 +2365,7 @@ var Spoiler = function Spoiler(_ref) {
   }, title && React__default.createElement("h3", null, title)), React__default.createElement("div", {
     className: styles$A.body
   }, blocks.map(function (item) {
-    return React__default.createElement(RenderBlocks, {
+    return React__default.createElement(RawHtmlBlock, {
       key: item.id,
       block: item,
       styleContext: context