@storybook/components 6.4.0-alpha.8 → 6.4.0-beta.10

package/dist/cjs/syntaxhighlighter/syntaxhighlighter.js

@@ -6,8 +6,6 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-require("core-js/modules/es.object.to-string.js");
-
 require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.string.iterator.js");
@@ -33,18 +31,21 @@ require("core-js/modules/es.object.get-own-property-descriptor.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.createCopyToClipboardFunction = createCopyToClipboardFunction;
 exports.default = exports.SyntaxHighlighter = void 0;
 
 require("regenerator-runtime/runtime.js");
 
-require("core-js/modules/es.array.reduce.js");
-
 require("core-js/modules/es.object.entries.js");
 
 require("core-js/modules/es.object.assign.js");
 
 require("core-js/modules/es.string.trim.js");
 
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _clientLogger = require("@storybook/client-logger");
@@ -150,14 +151,16 @@ var themedSyntax = (0, _memoizerific.default)(2)(function (theme) {
     return Object.assign({}, acc, _defineProperty({}, "* .".concat(key), val));
   }, {});
 });
-var copyToClipboard;
+var copyToClipboard = createCopyToClipboardFunction();
 
-if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
-  copyToClipboard = function copyToClipboard(text) {
-    return navigator.clipboard.writeText(text);
-  };
-} else {
-  copyToClipboard = /*#__PURE__*/function () {
+function createCopyToClipboardFunction() {
+  if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
+    return function (text) {
+      return navigator.clipboard.writeText(text);
+    };
+  }
+
+  return /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(text) {
       var tmp, focus;
       return regeneratorRuntime.wrap(function _callee$(_context) {
@@ -181,7 +184,7 @@ if (navigator !== null && navigator !== void 0 && navigator.clipboard) {
       }, _callee);
     }));
 
-    return function copyToClipboard(_x) {
+    return function (_x) {
       return _ref3.apply(this, arguments);
     };
   }();
@@ -274,7 +277,9 @@ var SyntaxHighlighter = function SyntaxHighlighter(_ref10) {
 
   var onClick = function onClick(e) {
     e.preventDefault();
-    copyToClipboard(highlightableCode).then(function () {
+    var selectedText = globalWindow.getSelection().toString();
+    var textToCopy = e.type !== 'click' && selectedText ? selectedText : highlightableCode;
+    copyToClipboard(textToCopy).then(function () {
       setCopied(true);
       globalWindow.setTimeout(function () {
         return setCopied(false);
@@ -285,7 +290,8 @@ var SyntaxHighlighter = function SyntaxHighlighter(_ref10) {
   return /*#__PURE__*/_react.default.createElement(Wrapper, {
     bordered: bordered,
     padded: padded,
-    className: className
+    className: className,
+    onCopyCapture: onClick
   }, /*#__PURE__*/_react.default.createElement(Scroller, null, /*#__PURE__*/_react.default.createElement(_prismLight.default, _extends({
     padded: padded || bordered,
     language: language,

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/ActionBar/ActionBar.js

@@ -23,6 +23,7 @@ var Container = styled.div(function (_ref) {
 export var ActionButton = styled.button(function (_ref2) {
   var theme = _ref2.theme;
   return {
+    margin: 0,
     border: '0 none',
     padding: '4px 10px',
     cursor: 'pointer',

package/dist/esm/Button/Button.stories.js

@@ -54,5 +54,12 @@ storiesOf('Basics/Button', module).add('all buttons', function () {
     small: true
   }, /*#__PURE__*/React.createElement(Icons, {
     icon: "link"
-  }), "Link"));
+  }), "Link"), /*#__PURE__*/React.createElement(Button, {
+    primary: true,
+    small: true,
+    isLink: true,
+    href: "#"
+  }, /*#__PURE__*/React.createElement(Icons, {
+    icon: "link"
+  }), " Link"));
 });

package/dist/esm/bar/separator.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.array.reduce.js";
 import React, { Fragment } from 'react';
 import { styled } from '@storybook/theming';
 export var Separator = styled.span(function (_ref) {

package/dist/esm/blocks/ArgsTable/ArgControl.js

@@ -28,6 +28,23 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import React, { useCallback, useState, useEffect } from 'react';
 import { BooleanControl, ColorControl, DateControl, FilesControl, NumberControl, ObjectControl, OptionsControl, RangeControl, TextControl } from '../../controls';
+var Controls = {
+  array: ObjectControl,
+  object: ObjectControl,
+  boolean: BooleanControl,
+  color: ColorControl,
+  date: DateControl,
+  number: NumberControl,
+  check: OptionsControl,
+  'inline-check': OptionsControl,
+  radio: OptionsControl,
+  'inline-radio': OptionsControl,
+  select: OptionsControl,
+  'multi-select': OptionsControl,
+  range: RangeControl,
+  text: TextControl,
+  file: FilesControl
+};
 
 var NoControl = function NoControl() {
   return /*#__PURE__*/React.createElement(React.Fragment, null, "-");
@@ -82,44 +99,9 @@ export var ArgControl = function ArgControl(_ref) {
     onBlur: onBlur,
     onFocus: onFocus
   };
-
-  switch (control.type) {
-    case 'array':
-    case 'object':
-      return /*#__PURE__*/React.createElement(ObjectControl, _extends({}, props, control));
-
-    case 'boolean':
-      return /*#__PURE__*/React.createElement(BooleanControl, _extends({}, props, control));
-
-    case 'color':
-      return /*#__PURE__*/React.createElement(ColorControl, _extends({}, props, control));
-
-    case 'date':
-      return /*#__PURE__*/React.createElement(DateControl, _extends({}, props, control));
-
-    case 'number':
-      return /*#__PURE__*/React.createElement(NumberControl, _extends({}, props, control));
-
-    case 'check':
-    case 'inline-check':
-    case 'radio':
-    case 'inline-radio':
-    case 'select':
-    case 'multi-select':
-      return /*#__PURE__*/React.createElement(OptionsControl, _extends({}, props, control, {
-        controlType: control.type
-      }));
-
-    case 'range':
-      return /*#__PURE__*/React.createElement(RangeControl, _extends({}, props, control));
-
-    case 'text':
-      return /*#__PURE__*/React.createElement(TextControl, _extends({}, props, control));
-
-    case 'file':
-      return /*#__PURE__*/React.createElement(FilesControl, _extends({}, props, control));
-
-    default:
-      return /*#__PURE__*/React.createElement(NoControl, null);
-  }
-};
+  var Control = Controls[control.type] || NoControl;
+  return /*#__PURE__*/React.createElement(Control, _extends({}, props, control, {
+    controlType: control.type
+  }));
+};
+ArgControl.displayName = "ArgControl";

package/dist/esm/blocks/ArgsTable/ArgRow.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.object.assign.js";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
@@ -31,12 +32,18 @@ var Description = styled.div(function (_ref2) {
         color: theme.color.secondary
       }
     },
-    code: codeCommon({
+    code: Object.assign({}, codeCommon({
       theme: theme
+    }), {
+      fontSize: 12,
+      fontFamily: theme.typography.fonts.mono
     }),
     '& code': {
       margin: 0,
       display: 'inline-block'
+    },
+    '& pre > code': {
+      whiteSpace: 'pre-wrap'
     }
   };
 });

package/dist/esm/blocks/ArgsTable/ArgsTable.js

@@ -20,7 +20,6 @@ import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.number.constructor.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.object.entries.js";
-import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.symbol.js";
@@ -343,7 +342,7 @@ export var ArgsTable = function ArgsTable(props) {
     },
     title: "Reset controls"
   }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "sync",
+    icon: "undo",
     "aria-hidden": true
   })))) : null)), /*#__PURE__*/React.createElement("tbody", {
     className: "docblock-argstable-body"

package/dist/esm/blocks/ColorPalette.js

@@ -60,17 +60,33 @@ var SwatchLabels = styled.div({
   display: 'flex',
   flexDirection: 'row'
 });
-var Swatch = styled.div({
-  flex: 1
+var Swatch = styled.div(function (_ref4) {
+  var background = _ref4.background;
+  return {
+    position: 'relative',
+    flex: 1,
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background: background,
+      content: '""'
+    }
+  };
 });
-var SwatchColors = styled.div(function (_ref4) {
-  var theme = _ref4.theme;
+var SwatchColors = styled.div(function (_ref5) {
+  var theme = _ref5.theme;
   return Object.assign({}, getBlockBackgroundStyle(theme), {
     display: 'flex',
     flexDirection: 'row',
     height: 50,
     marginBottom: 5,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    backgroundColor: 'white',
+    backgroundImage: "repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)",
+    backgroundClip: 'padding-box'
   });
 });
 var SwatchSpecimen = styled.div({
@@ -95,8 +111,8 @@ var ListName = styled.div({
 var ListSwatches = styled.div({
   flex: 1
 });
-var ListHeading = styled.div(function (_ref5) {
-  var theme = _ref5.theme;
+var ListHeading = styled.div(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     display: 'flex',
     flexDirection: 'row',
@@ -106,8 +122,8 @@ var ListHeading = styled.div(function (_ref5) {
     color: theme.base === 'light' ? transparentize(0.4, theme.color.defaultText) : transparentize(0.6, theme.color.defaultText)
   };
 });
-var List = styled.div(function (_ref6) {
-  var theme = _ref6.theme;
+var List = styled.div(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     fontSize: theme.typography.size.s2,
     lineHeight: "20px",
@@ -120,9 +136,7 @@ function renderSwatch(color, index) {
   return /*#__PURE__*/React.createElement(Swatch, {
     key: "".concat(color, "-").concat(index),
     title: color,
-    style: {
-      background: color
-    }
+    background: color
   });
 }
 
@@ -159,10 +173,10 @@ renderSwatchSpecimen.displayName = "renderSwatchSpecimen";
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export var ColorItem = function ColorItem(_ref7) {
-  var title = _ref7.title,
-      subtitle = _ref7.subtitle,
-      colors = _ref7.colors;
+export var ColorItem = function ColorItem(_ref8) {
+  var title = _ref8.title,
+      subtitle = _ref8.subtitle,
+      colors = _ref8.colors;
   return /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemDescription, null, /*#__PURE__*/React.createElement(ItemTitle, null, title), /*#__PURE__*/React.createElement(ItemSubtitle, null, subtitle)), /*#__PURE__*/React.createElement(Swatches, null, renderSwatchSpecimen(colors)));
 };
 ColorItem.displayName = "ColorItem";
@@ -171,9 +185,9 @@ ColorItem.displayName = "ColorItem";
  * Styleguide documentation for colors, including names, captions, and color swatches,
  * all specified as `ColorItem` children of this wrapper component.
  */
-export var ColorPalette = function ColorPalette(_ref8) {
-  var children = _ref8.children,
-      props = _objectWithoutProperties(_ref8, ["children"]);
+export var ColorPalette = function ColorPalette(_ref9) {
+  var children = _ref9.children,
+      props = _objectWithoutProperties(_ref9, ["children"]);
 
   return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
     className: "docblock-colorpalette"

package/dist/esm/blocks/Preview.js

@@ -1,3 +1,9 @@
+import "regenerator-runtime/runtime.js";
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,14 +31,15 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import "core-js/modules/es.object.assign.js";
-import "core-js/modules/es.array.reduce.js";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.promise.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.array.join.js";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.symbol.iterator.js";
 import "core-js/modules/es.string.iterator.js";
 import "core-js/modules/es.array.iterator.js";
@@ -40,9 +47,10 @@ import "core-js/modules/web.dom-collections.iterator.js";
 import "core-js/modules/es.array.slice.js";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.from.js";
-import React, { Children, useState } from 'react';
+import React, { Children, useCallback, useState } from 'react';
 import { darken } from 'polished';
 import { styled } from '@storybook/theming';
+import global from 'global';
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 import { Source } from './Source';
 import { ActionBar } from '../ActionBar/ActionBar';
@@ -168,7 +176,9 @@ var getSource = function getSource(withSource, expanded, setExpanded) {
     default:
       {
         return {
-          source: null,
+          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
+            dark: true
+          })),
           actionItem: {
             title: 'Show code',
             className: 'docblock-code-toggle',
@@ -254,9 +264,65 @@ var Preview = function Preview(_ref8) {
 
   var previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
   var defaultActionItems = withSource ? [actionItem] : [];
-  var actionItems = additionalActions ? [].concat(defaultActionItems, _toConsumableArray(additionalActions)) : defaultActionItems; // @ts-ignore
+
+  var _useState5 = useState(additionalActions ? _toConsumableArray(additionalActions) : []),
+      _useState6 = _slicedToArray(_useState5, 2),
+      additionalActionItems = _useState6[0],
+      setAdditionalActionItems = _useState6[1];
+
+  var actionItems = [].concat(defaultActionItems, _toConsumableArray(additionalActionItems)); // @ts-ignore
 
   var layout = getLayout(Children.count(children) === 1 ? [children] : children);
+  var globalWindow = global.window;
+  var copyToClipboard = useCallback( /*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(text) {
+      var _yield$import, createCopyToClipboardFunction;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return import('../syntaxhighlighter/syntaxhighlighter');
+
+            case 2:
+              _yield$import = _context.sent;
+              createCopyToClipboardFunction = _yield$import.createCopyToClipboardFunction;
+              createCopyToClipboardFunction();
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref9.apply(this, arguments);
+    };
+  }(), []);
+
+  var onCopyCapture = function onCopyCapture(e) {
+    e.preventDefault();
+
+    if (additionalActionItems.filter(function (item) {
+      return item.title === 'Copied';
+    }).length === 0) {
+      copyToClipboard(source.props.code).then(function () {
+        setAdditionalActionItems([].concat(_toConsumableArray(additionalActionItems), [{
+          title: 'Copied',
+          onClick: function onClick() {}
+        }]));
+        globalWindow.setTimeout(function () {
+          return setAdditionalActionItems(additionalActionItems.filter(function (item) {
+            return item.title !== 'Copied';
+          }));
+        }, 1500);
+      });
+    }
+  };
+
   return /*#__PURE__*/React.createElement(PreviewContainer, _extends({
     withSource: withSource,
     withToolbar: withToolbar
@@ -277,7 +343,8 @@ var Preview = function Preview(_ref8) {
       scale: scale
     }
   }, /*#__PURE__*/React.createElement(Relative, {
-    className: "docs-story"
+    className: "docs-story",
+    onCopyCapture: withSource && onCopyCapture
   }, /*#__PURE__*/React.createElement(ChildrenContainer, {
     isColumn: isColumn || !Array.isArray(children),
     columns: columns,
@@ -291,7 +358,7 @@ var Preview = function Preview(_ref8) {
     }, child);
   }) : /*#__PURE__*/React.createElement("div", null, children))), /*#__PURE__*/React.createElement(ActionBar, {
     actionItems: actionItems
-  }))), withSource && source);
+  }))), withSource && expanded && source);
 };
 
 Preview.displayName = "Preview";

package/dist/esm/controls/Boolean.js

@@ -3,7 +3,7 @@ import "core-js/modules/es.function.name.js";
 import React, { useCallback } from 'react';
 import { opacify, transparentize } from 'polished';
 import { styled } from '@storybook/theming';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 import { Form } from '../form';
 var Label = styled.label(function (_ref) {
   var theme = _ref.theme;
@@ -63,7 +63,7 @@ var Label = styled.label(function (_ref) {
       }
     },
     'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': {
-      background: theme.background.bar,
+      background: theme.background.app,
       boxShadow: "".concat(opacify(0.1, theme.appBorderColor), " 0 0 2px"),
       color: theme.color.defaultText,
       padding: '7px 15px'
@@ -91,6 +91,7 @@ export var BooleanControl = function BooleanControl(_ref2) {
 
   if (value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onSetFalse
     }, "Set boolean");
   }

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/controls/Number.js

@@ -25,7 +25,7 @@ import "core-js/modules/es.array.from.js";
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { styled } from '@storybook/theming';
 import { Form } from '../form';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 var Wrapper = styled.label({
   display: 'flex'
 });
@@ -84,6 +84,7 @@ export var NumberControl = function NumberControl(_ref) {
 
   if (!forceVisible && value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set number");
   }

package/dist/esm/controls/Object.js

@@ -27,7 +27,7 @@ import React, { useCallback, useMemo, useState, useEffect, useRef } from 'react'
 import { styled, useTheme } from '@storybook/theming'; // @ts-ignore
 
 import { JsonTree, getObjectType } from './react-editable-json-tree';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 import { Form } from '../form';
 import { Icons } from '../icon/icon';
 import { IconButton } from '../bar/button';
@@ -312,6 +312,7 @@ export var ObjectControl = function ObjectControl(_ref7) {
 
   if (!hasData) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set object");
   }

package/dist/esm/controls/Text.js

@@ -23,7 +23,7 @@ import "core-js/modules/es.array.from.js";
 import React, { useCallback, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Form } from '../form';
-import { getControlId } from './helpers';
+import { getControlId, getControlSetterButtonId } from './helpers';
 var Wrapper = styled.label({
   display: 'flex'
 });
@@ -50,6 +50,7 @@ export var TextControl = function TextControl(_ref) {
 
   if (value === undefined) {
     return /*#__PURE__*/React.createElement(Form.Button, {
+      id: getControlSetterButtonId(name),
       onClick: onForceVisible
     }, "Set string");
   }

package/dist/esm/controls/helpers.js

@@ -9,4 +9,14 @@ import "core-js/modules/es.regexp.exec.js";
  */
 export var getControlId = function getControlId(value) {
   return "control-".concat(value.replace(/\s+/g, '-'));
+};
+/**
+ * Adds `set` prefix to make ID attribute more specific.
+ * Removes spaces because spaces are not allowed in ID attributes
+ * @link http://xahlee.info/js/html_allowed_chars_in_attribute.html
+ * @example getControlSetterButtonId('my prop name') -> 'set-my-prop-name'
+ */
+
+export var getControlSetterButtonId = function getControlSetterButtonId(value) {
+  return "set-".concat(value.replace(/\s+/g, '-'));
 };

package/dist/esm/controls/index.js

@@ -2,7 +2,6 @@ import "core-js/modules/es.promise.js";
 import "core-js/modules/es.object.to-string.js";
 import React, { Suspense } from 'react';
 export * from './types';
-export * from './Array';
 export * from './Boolean';
 var LazyColorControl = /*#__PURE__*/React.lazy(function () {
   return import('./Color');