@storybook/components 6.4.0-beta.1 → 6.4.0-beta.10

package/dist/cjs/controls/Color.js

@@ -496,10 +496,10 @@ var ColorControl = function ColorControl(_ref13) {
       return e.target.select();
     },
     placeholder: "Choose color..."
-  }), /*#__PURE__*/_react.default.createElement(ToggleIcon, {
+  }), value ? /*#__PURE__*/_react.default.createElement(ToggleIcon, {
     icon: "markup",
     onClick: cycleColorSpace
-  }));
+  }) : null);
 };
 
 exports.ColorControl = ColorControl;

package/dist/cjs/typography/DocumentFormatting.js

@@ -13,10 +13,10 @@ require("core-js/modules/es.string.match.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
-require("core-js/modules/es.array.join.js");
-
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.array.join.js");
+
 require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.object.keys.js");
@@ -442,6 +442,12 @@ var DefaultCodeBlock = _theming.styled.code(function (_ref16) {
   };
 }, _shared.codeCommon);
 
+var isInlineCodeRegex = /[\n\r]/g;
+
+var isReactChildString = function isReactChildString(child) {
+  return typeof child === 'string';
+};
+
 var Code = function Code(_ref17) {
   var _language$;
 
@@ -450,12 +456,17 @@ var Code = function Code(_ref17) {
       props = _objectWithoutProperties(_ref17, ["className", "children"]);
 
   var language = (className || '').match(/lang-(\S+)/);
-  var isInlineCode = !children.match(/[\n\r]/g);
+
+  var childrenArray = _react.default.Children.toArray(children);
+
+  var isInlineCode = !childrenArray.filter(isReactChildString).some(function (child) {
+    return child.match(isInlineCodeRegex);
+  });
 
   if (isInlineCode) {
     return /*#__PURE__*/_react.default.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/_react.default.createElement(_Source.StyledSyntaxHighlighter, _extends({

package/dist/esm/controls/Color.js

@@ -437,10 +437,10 @@ export var ColorControl = function ColorControl(_ref13) {
       return e.target.select();
     },
     placeholder: "Choose color..."
-  }), /*#__PURE__*/React.createElement(ToggleIcon, {
+  }), value ? /*#__PURE__*/React.createElement(ToggleIcon, {
     icon: "markup",
     onClick: cycleColorSpace
-  }));
+  }) : null);
 };
 ColorControl.displayName = "ColorControl";
 export default ColorControl;

package/dist/esm/typography/DocumentFormatting.js

@@ -1,8 +1,8 @@
 import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.string.match.js";
 import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
@@ -366,6 +366,12 @@ var DefaultCodeBlock = styled.code(function (_ref16) {
     color: 'inherit'
   };
 }, codeCommon);
+var isInlineCodeRegex = /[\n\r]/g;
+
+var isReactChildString = function isReactChildString(child) {
+  return typeof child === 'string';
+};
+
 export var Code = function Code(_ref17) {
   var _language$;
 
@@ -374,12 +380,15 @@ export var Code = function Code(_ref17) {
       props = _objectWithoutProperties(_ref17, ["className", "children"]);
 
   var language = (className || '').match(/lang-(\S+)/);
-  var isInlineCode = !children.match(/[\n\r]/g);
+  var childrenArray = React.Children.toArray(children);
+  var isInlineCode = !childrenArray.filter(isReactChildString).some(function (child) {
+    return child.match(isInlineCodeRegex);
+  });
 
   if (isInlineCode) {
     return /*#__PURE__*/React.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({

package/dist/modern/controls/Color.js

@@ -334,10 +334,10 @@ export const ColorControl = ({
     onChange: e => updateValue(e.target.value),
     onFocus: e => e.target.select(),
     placeholder: "Choose color..."
-  }), /*#__PURE__*/React.createElement(ToggleIcon, {
+  }), value ? /*#__PURE__*/React.createElement(ToggleIcon, {
     icon: "markup",
     onClick: cycleColorSpace
-  }));
+  }) : null);
 };
 ColorControl.displayName = "ColorControl";
 export default ColorControl;

package/dist/modern/typography/DocumentFormatting.js

@@ -342,6 +342,10 @@ const DefaultCodeBlock = styled.code(({
   verticalAlign: 'baseline',
   color: 'inherit'
 }), codeCommon);
+const isInlineCodeRegex = /[\n\r]/g;
+
+const isReactChildString = child => typeof child === 'string';
+
 export const Code = (_ref2) => {
   var _language$;
 
@@ -352,12 +356,13 @@ export const Code = (_ref2) => {
       props = _objectWithoutPropertiesLoose(_ref2, ["className", "children"]);
 
   const language = (className || '').match(/lang-(\S+)/);
-  const isInlineCode = !children.match(/[\n\r]/g);
+  const childrenArray = React.Children.toArray(children);
+  const isInlineCode = !childrenArray.filter(isReactChildString).some(child => child.match(isInlineCodeRegex));
 
   if (isInlineCode) {
     return /*#__PURE__*/React.createElement(DefaultCodeBlock, _extends({}, props, {
       className: className
-    }), children);
+    }), childrenArray);
   }
 
   return /*#__PURE__*/React.createElement(StyledSyntaxHighlighter, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.4.0-beta.1",
+  "version": "6.4.0-beta.10",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -41,9 +41,9 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.4.0-beta.1",
+    "@storybook/client-logger": "6.4.0-beta.10",
     "@storybook/csf": "0.0.2--canary.6aca495.0",
-    "@storybook/theming": "6.4.0-beta.1",
+    "@storybook/theming": "6.4.0-beta.10",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
@@ -76,6 +76,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "000a73948b4b91aa6bf84828b42ccdb7064f72bd",
+  "gitHead": "9128cc184fa9771b332c1aabe85af6751dde890c",
   "sbmodern": "dist/modern/index.js"
 }