@micromag/core 0.3.115 → 0.3.120

package/es/components.js

@@ -38,6 +38,7 @@ import { getSizeWithinBounds } from '@folklore/size';
 import { faCommentDots } from '@fortawesome/free-solid-svg-icons/faCommentDots';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
@@ -3435,7 +3436,7 @@ var Timeline = function Timeline(props) {
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
-var Title = function Title(props) {
+var Title$1 = function Title(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames([props.className, styles$c.title]),
     height: 0.5,
@@ -3865,6 +3866,23 @@ var Answer$1 = function Answer(_ref) {
   })));
 };
 
+var Title = function Title(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: "100%",
+    height: "100%",
+    className: classNames([styles$c.container, _defineProperty({}, props.className, props.className !== null)])
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faCircle,
+    className: styles$c.icon
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faCircle,
+    className: styles$c.icon
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faCircle,
+    className: styles$c.icon
+  }));
+};
+
 var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container","block":"micromag-core-placeholders-survey-answer-block","percent":"micromag-core-placeholders-survey-answer-percent","percentIcon":"micromag-core-placeholders-survey-answer-percentIcon"};
 
 var Answer = function Answer(_ref) {
@@ -3905,12 +3923,13 @@ var Placeholders = /*#__PURE__*/Object.freeze({
     MapPath: MapPath,
     QuizAnswer: Answer$1,
     Quote: Quote,
+    ShareOptions: Title,
     ShortText: ShortText,
     Subtitle: Subtitle,
     SurveyAnswer: Answer,
     Text: TextPlaceholder,
     Timeline: Timeline,
-    Title: Title,
+    Title: Title$1,
     Video: Video,
     Video360: Video360,
     VideoLoop: VideoLoop
@@ -4343,4 +4362,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };
+export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };

package/es/hooks.js

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import isString from 'lodash/isString';
 import dayjs from 'dayjs';
 import { EventsManager, MediasParser, StoryParser, ThemeParser } from '@micromag/core';
-import { createUseEvent } from '@micromag/core/utils';
+import { createUseEvent, getMediaFilesAsArray } from '@micromag/core/utils';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useForm as useForm$1 } from '@folklore/forms';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -1053,6 +1053,29 @@ var useMediasParser = function useMediasParser() {
   };
 };
 
+function useMediaThumbnail(media) {
+  var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  var _ref = media || {},
+      _ref$thumbnail_url = _ref.thumbnail_url,
+      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? null : _ref$files;
+
+  var thumbnailUrl = useMemo(function () {
+    var filesArray = getMediaFilesAsArray(files) || [];
+
+    var _ref2 = (file !== null ? filesArray.find(function (_ref3) {
+      var handle = _ref3.handle;
+      return handle === file;
+    }) || null : null) || {},
+        url = _ref2.url;
+
+    return url || defaultThumbnailUrl;
+  }, [files, file, defaultThumbnailUrl]);
+  return thumbnailUrl;
+}
+
 var useParsedStory = function useParsedStory(story) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$disabled = _ref.disabled,
@@ -1566,4 +1589,4 @@ var useTrackMedia = function useTrackMedia() {
 var eventsManager = typeof window !== 'undefined' ? new EventsManager(window) : null;
 var useWindowEvent = createUseEvent(eventsManager);
 
-export { getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediasParser, useObserver, useParsedStory, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };
+export { getObserver, useAnimationFrame, useDocumentEvent, useForm, useFormTransition, useFormattedDate, useFormattedTime, useFullscreen, useIntersectionObserver, useIsVisible, useLoadedFonts, useLongPress, useMediaApi, useMediaThumbnail, useMediasParser, useObserver, useParsedStory, useResizeObserver, useScreenSizeFromElement, useScreenSizeFromWindow, useSwipe, useThemeParser, useTrackEvent, useTrackMedia, useTrackScreenEvent, useTrackScreenMedia, useTrackScreenView, useWindowEvent };

package/es/index.js

@@ -14,6 +14,8 @@ import _createSuper from '@babel/runtime/helpers/createSuper';
 import EventEmitter from 'wolfy87-eventemitter';
 import 'lodash/isNumber';
 import 'param-case';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
 import 'react';
 import isString from 'lodash/isString';
 import 'tinycolor2';

package/es/utils.js

@@ -1,5 +1,7 @@
 import isNumber from 'lodash/isNumber';
 import { paramCase } from 'param-case';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import isObject from 'lodash/isObject';
 import { useEffect } from 'react';
 import isString from 'lodash/isString';
@@ -20,6 +22,141 @@ var convertStyleToString = function convertStyleToString(style) {
   }).join('\n') : '';
 };
 
+/*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+// @todo vendoring this: https://github.com/feross/clipboard-copy/blob/master/index.js
+// we might want to add that to the npm deps and just use it?
+function makeError() {
+  return new DOMException('The request is not allowed', 'NotAllowedError');
+}
+
+function copyClipboardApi(_x) {
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function _copyClipboardApi() {
+  _copyClipboardApi = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(text) {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (navigator.clipboard) {
+              _context.next = 2;
+              break;
+            }
+
+            throw makeError();
+
+          case 2:
+            return _context.abrupt("return", navigator.clipboard.writeText(text));
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function copyExecCommand(_x2) {
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function _copyExecCommand() {
+  _copyExecCommand = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(text) {
+    var span, selection, range, success;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // Put the text to copy into a <span>
+            span = document.createElement('span');
+            span.textContent = text; // Preserve consecutive spaces and newlines
+
+            span.style.whiteSpace = 'pre';
+            span.style.webkitUserSelect = 'auto';
+            span.style.userSelect = 'all'; // Add the <span> to the page
+
+            document.body.appendChild(span); // Make a selection object representing the range of text selected by the user
+
+            selection = window.getSelection();
+            range = window.document.createRange();
+            selection.removeAllRanges();
+            range.selectNode(span);
+            selection.addRange(range); // Copy text to the clipboard
+
+            success = false;
+
+            try {
+              success = window.document.execCommand('copy');
+            } finally {
+              // Cleanup
+              selection.removeAllRanges();
+              window.document.body.removeChild(span);
+            }
+
+            if (success) {
+              _context2.next = 15;
+              break;
+            }
+
+            throw makeError();
+
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function copyToClipboard(_x3) {
+  return _copyToClipboard.apply(this, arguments);
+}
+
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(text) {
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return copyClipboardApi(text);
+
+          case 3:
+            _context3.next = 15;
+            break;
+
+          case 5:
+            _context3.prev = 5;
+            _context3.t0 = _context3["catch"](0);
+            _context3.prev = 7;
+            _context3.next = 10;
+            return copyExecCommand(text);
+
+          case 10:
+            _context3.next = 15;
+            break;
+
+          case 12:
+            _context3.prev = 12;
+            _context3.t1 = _context3["catch"](7);
+            throw _context3.t1 || _context3.t0 || makeError();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, null, [[0, 5], [7, 12]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}
+
 var createNullableOnChange = function createNullableOnChange() {
   var onChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return function (newValue) {
@@ -789,7 +926,9 @@ var setValue = function setValue(value, keyParts, fieldValue) {
 
   if (value !== null || fieldValue !== null) {
     if (isArray) {
-      var index = parseInt(key, 10);
+      var index = parseInt(key, 10); // TODO: fix this with an explicit delete
+      // instead on splicing out the element on null fieldValue
+
       var newArrayValue = fieldValue !== null ? [].concat(_toConsumableArray(value.slice(0, index)), [keyParts.length > 0 ? setValue(value !== null ? value[index] || null : null, keyParts, fieldValue) : fieldValue], _toConsumableArray(value.slice(index + 1))) : [].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1)));
       return newArrayValue.length > 0 ? newArrayValue : null;
     }
@@ -842,7 +981,7 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
       color = _ref$color === void 0 ? 'white' : _ref$color;
 
   if (tinycolor.equals(color, tinycolor('white'))) {
-    return 'lightblue';
+    return '#A13DFF';
   }
 
   if (tinycolor.equals(color, tinycolor('black'))) {
@@ -852,4 +991,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -42,6 +42,7 @@ var size = require('@folklore/size');
 var faCommentDots = require('@fortawesome/free-solid-svg-icons/faCommentDots');
 var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
+var faCircle = require('@fortawesome/free-solid-svg-icons/faCircle');
 var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
@@ -3476,7 +3477,7 @@ var Timeline = function Timeline(props) {
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
-var Title = function Title(props) {
+var Title$1 = function Title(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames__default["default"]([props.className, styles$c.title]),
     height: 0.5,
@@ -3906,6 +3907,23 @@ var Answer$1 = function Answer(_ref) {
   })));
 };
 
+var Title = function Title(props) {
+  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: "100%",
+    height: "100%",
+    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
+  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$c.icon
+  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$c.icon
+  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$c.icon
+  }));
+};
+
 var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container","block":"micromag-core-placeholders-survey-answer-block","percent":"micromag-core-placeholders-survey-answer-percent","percentIcon":"micromag-core-placeholders-survey-answer-percentIcon"};
 
 var Answer = function Answer(_ref) {
@@ -3946,12 +3964,13 @@ var Placeholders = /*#__PURE__*/Object.freeze({
     MapPath: MapPath,
     QuizAnswer: Answer$1,
     Quote: Quote,
+    ShareOptions: Title,
     ShortText: ShortText,
     Subtitle: Subtitle,
     SurveyAnswer: Answer,
     Text: TextPlaceholder,
     Timeline: Timeline,
-    Title: Title,
+    Title: Title$1,
     Video: Video,
     Video360: Video360,
     VideoLoop: VideoLoop
@@ -4429,7 +4448,7 @@ exports.PlaceholderShortText = ShortText;
 exports.PlaceholderSubtitle = Subtitle;
 exports.PlaceholderText = TextPlaceholder;
 exports.PlaceholderTimeline = Timeline;
-exports.PlaceholderTitle = Title;
+exports.PlaceholderTitle = Title$1;
 exports.PlaceholderVideo = Video;
 exports.PlaceholderVideo360 = Video360;
 exports.PlaceholderVideoLoop = VideoLoop;

package/lib/hooks.js

@@ -1089,6 +1089,29 @@ var useMediasParser = function useMediasParser() {
   };
 };
 
+function useMediaThumbnail(media) {
+  var file = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  var _ref = media || {},
+      _ref$thumbnail_url = _ref.thumbnail_url,
+      defaultThumbnailUrl = _ref$thumbnail_url === void 0 ? null : _ref$thumbnail_url,
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? null : _ref$files;
+
+  var thumbnailUrl = react.useMemo(function () {
+    var filesArray = utils.getMediaFilesAsArray(files) || [];
+
+    var _ref2 = (file !== null ? filesArray.find(function (_ref3) {
+      var handle = _ref3.handle;
+      return handle === file;
+    }) || null : null) || {},
+        url = _ref2.url;
+
+    return url || defaultThumbnailUrl;
+  }, [files, file, defaultThumbnailUrl]);
+  return thumbnailUrl;
+}
+
 var useParsedStory = function useParsedStory(story) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       _ref$disabled = _ref.disabled,
@@ -1615,6 +1638,7 @@ exports.useIsVisible = useIsVisible;
 exports.useLoadedFonts = useLoadedFonts;
 exports.useLongPress = useLongPress;
 exports.useMediaApi = useMediaApi;
+exports.useMediaThumbnail = useMediaThumbnail;
 exports.useMediasParser = useMediasParser;
 exports.useObserver = useObserver;
 exports.useParsedStory = useParsedStory;

package/lib/index.js

@@ -18,6 +18,8 @@ var _createSuper = require('@babel/runtime/helpers/createSuper');
 var EventEmitter = require('wolfy87-eventemitter');
 require('lodash/isNumber');
 require('param-case');
+require('@babel/runtime/helpers/asyncToGenerator');
+require('@babel/runtime/regenerator');
 require('react');
 var isString = require('lodash/isString');
 require('tinycolor2');

package/lib/utils.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var isNumber = require('lodash/isNumber');
 var paramCase = require('param-case');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var isObject = require('lodash/isObject');
 var react = require('react');
 var isString = require('lodash/isString');
@@ -20,6 +22,8 @@ var slugify = require('slugify');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
+var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var tinycolor__default = /*#__PURE__*/_interopDefaultLegacy(tinycolor);
@@ -37,6 +41,141 @@ var convertStyleToString = function convertStyleToString(style) {
   }).join('\n') : '';
 };
 
+/*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
+// @todo vendoring this: https://github.com/feross/clipboard-copy/blob/master/index.js
+// we might want to add that to the npm deps and just use it?
+function makeError() {
+  return new DOMException('The request is not allowed', 'NotAllowedError');
+}
+
+function copyClipboardApi(_x) {
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function _copyClipboardApi() {
+  _copyClipboardApi = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee(text) {
+    return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            if (navigator.clipboard) {
+              _context.next = 2;
+              break;
+            }
+
+            throw makeError();
+
+          case 2:
+            return _context.abrupt("return", navigator.clipboard.writeText(text));
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _copyClipboardApi.apply(this, arguments);
+}
+
+function copyExecCommand(_x2) {
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function _copyExecCommand() {
+  _copyExecCommand = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee2(text) {
+    var span, selection, range, success;
+    return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            // Put the text to copy into a <span>
+            span = document.createElement('span');
+            span.textContent = text; // Preserve consecutive spaces and newlines
+
+            span.style.whiteSpace = 'pre';
+            span.style.webkitUserSelect = 'auto';
+            span.style.userSelect = 'all'; // Add the <span> to the page
+
+            document.body.appendChild(span); // Make a selection object representing the range of text selected by the user
+
+            selection = window.getSelection();
+            range = window.document.createRange();
+            selection.removeAllRanges();
+            range.selectNode(span);
+            selection.addRange(range); // Copy text to the clipboard
+
+            success = false;
+
+            try {
+              success = window.document.execCommand('copy');
+            } finally {
+              // Cleanup
+              selection.removeAllRanges();
+              window.document.body.removeChild(span);
+            }
+
+            if (success) {
+              _context2.next = 15;
+              break;
+            }
+
+            throw makeError();
+
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+  return _copyExecCommand.apply(this, arguments);
+}
+
+function copyToClipboard(_x3) {
+  return _copyToClipboard.apply(this, arguments);
+}
+
+function _copyToClipboard() {
+  _copyToClipboard = _asyncToGenerator__default["default"]( /*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee3(text) {
+    return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.prev = 0;
+            _context3.next = 3;
+            return copyClipboardApi(text);
+
+          case 3:
+            _context3.next = 15;
+            break;
+
+          case 5:
+            _context3.prev = 5;
+            _context3.t0 = _context3["catch"](0);
+            _context3.prev = 7;
+            _context3.next = 10;
+            return copyExecCommand(text);
+
+          case 10:
+            _context3.next = 15;
+            break;
+
+          case 12:
+            _context3.prev = 12;
+            _context3.t1 = _context3["catch"](7);
+            throw _context3.t1 || _context3.t0 || makeError();
+
+          case 15:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3, null, [[0, 5], [7, 12]]);
+  }));
+  return _copyToClipboard.apply(this, arguments);
+}
+
 var createNullableOnChange = function createNullableOnChange() {
   var onChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   return function (newValue) {
@@ -806,7 +945,9 @@ var setValue = function setValue(value, keyParts, fieldValue) {
 
   if (value !== null || fieldValue !== null) {
     if (isArray) {
-      var index = parseInt(key, 10);
+      var index = parseInt(key, 10); // TODO: fix this with an explicit delete
+      // instead on splicing out the element on null fieldValue
+
       var newArrayValue = fieldValue !== null ? [].concat(_toConsumableArray__default["default"](value.slice(0, index)), [keyParts.length > 0 ? setValue(value !== null ? value[index] || null : null, keyParts, fieldValue) : fieldValue], _toConsumableArray__default["default"](value.slice(index + 1))) : [].concat(_toConsumableArray__default["default"](value.slice(0, index)), _toConsumableArray__default["default"](value.slice(index + 1)));
       return newArrayValue.length > 0 ? newArrayValue : null;
     }
@@ -859,7 +1000,7 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
       color = _ref$color === void 0 ? 'white' : _ref$color;
 
   if (tinycolor__default["default"].equals(color, tinycolor__default["default"]('white'))) {
-    return 'lightblue';
+    return '#A13DFF';
   }
 
   if (tinycolor__default["default"].equals(color, tinycolor__default["default"]('black'))) {
@@ -878,6 +1019,7 @@ Object.defineProperty(exports, 'snakeCase', {
     get: function () { return changeCase.snakeCase; }
 });
 exports.convertStyleToString = convertStyleToString;
+exports.copyToClipboard = copyToClipboard;
 exports.createNullableOnChange = createNullableOnChange;
 exports.createUseEvent = createUseEvent;
 exports.getColorAsString = getColorAsString;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.115",
+    "version": "0.3.120",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "47c269c5f0b4b423cb5bb187f12ec821479b89dc"
+    "gitHead": "997e92f10cf01fd5557b5c842c62bacf0babbd5a"
 }