@atlaskit/editor-common 69.2.2 → 69.3.0

package/dist/esm/ui/DropList/index.js

@@ -0,0 +1,205 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { borderRadius, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
+import Layer from '../Layer';
+var packageName = "@atlaskit/editor-common";
+var packageVersion = "69.3.0";
+var halfFocusRing = 1;
+var dropOffset = "0, ".concat(gridSize(), "px");
+
+var DropList = /*#__PURE__*/function (_Component) {
+  _inherits(DropList, _Component);
+
+  var _super = _createSuper(DropList);
+
+  function DropList() {
+    var _this;
+
+    _classCallCheck(this, DropList);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "wrapperStyles", css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  "])), _this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "triggerStyles", css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transition-duration: 0.2s;\n    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n    ", "\n  "])), _this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'));
+
+    _defineProperty(_assertThisInitialized(_this), "menuWrapper", function (theme) {
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 ", "px ", "px -", "px ", ",\n        0 0 1px ", ";\n      box-sizing: border-box;\n      overflow: auto;\n      padding: ", "px 0;\n      max-height: 90vh;\n    "])), themed({
+        light: token('color.text', N900),
+        dark: token('color.text', DN600)
+      })(theme), themed({
+        light: token('elevation.surface.overlay', N0),
+        dark: token('elevation.surface.overlay', DN50)
+      })(theme), borderRadius(), gridSize() / 2, gridSize(), gridSize() / 4, N50A, N60A, gridSize() / 2);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidMount", function () {
+      _this.setContentWidth(); // We use a captured event here to avoid a radio or checkbox dropdown item firing its
+      // click event first, which would cause a re-render of the element and prevent DropList
+      // from detecting the actual source of this original click event.
+
+
+      document.addEventListener('click', _this.handleClickOutside, true);
+      document.addEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
+      if (_this.props.isOpen) {
+        _this.setContentWidth();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "componentWillUnmount", function () {
+      document.removeEventListener('click', _this.handleClickOutside, true);
+      document.removeEventListener('keydown', _this.handleEsc);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setContentWidth", function () {
+      var _assertThisInitialize = _assertThisInitialized(_this),
+          dropContentRef = _assertThisInitialize.dropContentRef,
+          triggerRef = _assertThisInitialize.triggerRef;
+
+      var shouldFitContainer = _this.props.shouldFitContainer; // We need to manually set the content width to match the trigger width
+
+      if (shouldFitContainer && dropContentRef && triggerRef) {
+        dropContentRef.style.width = "".concat(triggerRef.offsetWidth - halfFocusRing * 2, "px");
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleEsc", function (event) {
+      if ((event.key === 'Escape' || event.key === 'Esc') && _this.props.isOpen) {
+        _this.close(event);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
+      if (_this.props.isOpen) {
+        if (event.target instanceof Node) {
+          // Rather than check for the target within the entire DropList, we specify the trigger/content.
+          // This aids with future effort in scroll-locking DropList when isMenuFixed is enabled; the scroll
+          // blanket which stretches to the viewport should not stop 'close' from being triggered.
+          var withinTrigger = _this.triggerRef && _this.triggerRef.contains(event.target);
+
+          var withinContent = _this.dropContentRef && _this.dropContentRef.contains(event.target);
+
+          if (!withinTrigger && !withinContent) {
+            _this.close(event);
+          }
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "close", function (event) {
+      if (_this.props.onOpenChange) {
+        _this.props.onOpenChange({
+          isOpen: false,
+          event: event
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleContentRef", function (ref) {
+      _this.dropContentRef = ref; // If the dropdown has just been opened, we focus on the containing element so the
+      // user can tab to the first dropdown item. We will only receive this ref if isOpen
+      // is true or null, so no need to check for truthiness here.
+
+      if (ref) {
+        ref.focus();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTriggerRef", function (ref) {
+      _this.triggerRef = ref;
+    });
+
+    return _this;
+  }
+
+  _createClass(DropList, [{
+    key: "getChildContext",
+    value:
+    /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+    function getChildContext() {
+      return {
+        shouldAllowMultilineItems: false
+      };
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          children = _this$props.children,
+          isOpen = _this$props.isOpen,
+          position = _this$props.position,
+          trigger = _this$props.trigger,
+          onPositioned = _this$props.onPositioned,
+          testId = _this$props.testId;
+      var layerContent = isOpen ? jsx("div", {
+        css: function css(theme) {
+          return _this2.menuWrapper({
+            theme: theme
+          });
+        },
+        "data-role": "droplistContent",
+        "data-testid": testId && "".concat(testId, "--content"),
+        ref: this.handleContentRef
+      }, children) : null;
+      return jsx("div", {
+        css: this.wrapperStyles
+      }, jsx(Layer, {
+        content: layerContent,
+        offset: dropOffset,
+        position: position,
+        onPositioned: onPositioned
+      }, jsx("div", {
+        css: this.triggerStyles,
+        ref: this.handleTriggerRef
+      }, trigger)));
+    }
+  }]);
+
+  return DropList;
+}(Component);
+
+var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'droplist',
+  packageName: packageName,
+  packageVersion: packageVersion
+})(withAnalyticsEvents({
+  onOpenChange: createAndFireEventOnAtlaskit({
+    action: 'toggled',
+    actionSubject: 'droplist',
+    attributes: {
+      componentName: 'droplist',
+      packageName: packageName,
+      packageVersion: packageVersion
+    }
+  })
+})(DropList));

package/dist/esm/ui/ErrorBoundary/index.js

@@ -0,0 +1,84 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from 'react';
+import { ACTION, EVENT_TYPE } from '../../analytics';
+export var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary() {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      errorCaptured: false
+    });
+
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "hasFallback",
+    value: function hasFallback() {
+      return typeof this.props.fallbackComponent !== 'undefined';
+    }
+  }, {
+    key: "shouldRecover",
+    value: function shouldRecover() {
+      return this.hasFallback() && this.state.errorCaptured;
+    }
+  }, {
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      if (this.props.dispatchAnalyticsEvent) {
+        this.props.dispatchAnalyticsEvent({
+          action: ACTION.EDITOR_CRASHED,
+          actionSubject: this.props.component,
+          actionSubjectId: this.props.componentId,
+          eventType: EVENT_TYPE.OPERATIONAL,
+          attributes: {
+            error: error,
+            errorInfo: errorInfo,
+            // @ts-expect-error
+            errorRethrown: !this.hasFallback()
+          }
+        });
+      }
+
+      if (this.hasFallback()) {
+        this.setState({
+          errorCaptured: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (this.shouldRecover()) {
+        return this.props.fallbackComponent;
+      }
+
+      return this.props.children;
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);

package/dist/esm/ui/Layer/index.js

@@ -0,0 +1,228 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import Popper from 'popper.js'; // eslint-disable-line import/extensions
+
+import rafSchedule from 'raf-schd';
+import { positionPropToPopperPosition } from './internal/helpers';
+var defaultState = {
+  hasExtractedStyles: false,
+  // We set these default offsets to prevent a flash of popper content in the wrong position
+  // which can cause incorrect height calculations. Popper will calculate these values
+  offsets: {
+    popper: {
+      left: -9999,
+      top: -9999,
+      position: null
+    }
+  },
+  // fix Safari parent width: https://product-fabric.atlassian.net/browse/ED-1784
+  cssPosition: 'absolute',
+  originalHeight: null,
+  maxHeight: null
+};
+
+var Layer = /*#__PURE__*/function (_Component) {
+  _inherits(Layer, _Component);
+
+  var _super = _createSuper(Layer);
+
+  // working with extract-react-types
+  function Layer(props) {
+    var _this;
+
+    _classCallCheck(this, Layer);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "targetRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "contentRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "extractStyles", function (state) {
+      if (state) {
+        var popperHeight = state.offsets.popper.height;
+        var left = Math.round(state.offsets.popper.left);
+        var top = Math.round(state.offsets.popper.top);
+        var cssPosition = 'absolute';
+        var originalHeight = _this.state.originalHeight || popperHeight;
+
+        var maxHeight = _this.calculateMaxHeight(originalHeight, popperHeight, top, cssPosition);
+
+        _this.setState({
+          // position: fixed or absolute
+          cssPosition: cssPosition,
+          hasExtractedStyles: true,
+          transform: "translate3d(".concat(left, "px, ").concat(top, "px, 0px)"),
+          originalHeight: originalHeight,
+          maxHeight: maxHeight
+        });
+      }
+    });
+
+    _this.state = defaultState;
+    _this.extractStyles = rafSchedule(_this.extractStyles.bind(_assertThisInitialized(_this)));
+    return _this;
+  }
+
+  _createClass(Layer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.applyPopper(this.props);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.applyPopper(nextProps);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var onPositioned = this.props.onPositioned;
+      var hasExtractedStyles = this.state.hasExtractedStyles; // This flag is set the first time the position is calculated from Popper and applied to the content
+
+      if (!prevState.hasExtractedStyles && hasExtractedStyles && onPositioned) {
+        onPositioned();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      // this.extractStyles.cancel();
+      if (this.popper) {
+        this.popper.destroy();
+      }
+    }
+    /* Calculate the max height of the popper if it's height is greater than the viewport to prevent
+     * the bottom of the popper not being viewable.
+     * Only works if the popper uses viewport as the boundary and has a fixed position ancestor.
+     */
+
+  }, {
+    key: "calculateMaxHeight",
+    value: function calculateMaxHeight(originalHeight, currentHeight, positionTop, cssPosition) {
+      var DocumentElementClientHeight = 0;
+
+      if (document.documentElement) {
+        DocumentElementClientHeight = document.documentElement.clientHeight;
+      }
+
+      if (cssPosition !== 'fixed') {
+        return null;
+      }
+
+      var viewportHeight = Math.max(DocumentElementClientHeight, window.innerHeight || 0);
+      return viewportHeight < originalHeight && currentHeight + positionTop >= viewportHeight - 50 ? // allow some spacing either side of viewport height
+      viewportHeight - 12 : null;
+    }
+  }, {
+    key: "applyPopper",
+    value: function applyPopper(props) {
+      if (!this.targetRef.current || !this.contentRef.current) {
+        return;
+      }
+
+      if (this.popper) {
+        this.popper.destroy();
+      } // "new Popper(...)" operation is very expensive when called on virtual DOM.
+      // This condition reduces the number of calls so we can run our tests faster
+      // (time was reduced from 100s to 13s).
+
+
+      if (!props.content) {
+        return;
+      } // we wrap our target in a div so that we can safely get a reference to it, but we pass the
+      // actual target to popper
+
+
+      var isAlwaysFixed = false;
+      var actualTarget = this.targetRef.current.children[0];
+      var popperOpts = {
+        placement: positionPropToPopperPosition(props.position),
+        onCreate: this.extractStyles,
+        onUpdate: this.extractStyles,
+        modifiers: {
+          applyStyle: {
+            enabled: false
+          },
+          hide: {
+            enabled: false
+          },
+          offset: {
+            enabled: true,
+            offset: this.props.offset
+          },
+          flip: {
+            enabled: false,
+            flipVariations: true,
+            boundariesElement: 'viewport',
+            padding: 0 // leave 0 pixels between popper and the boundariesElement
+
+          },
+          preventOverflow: {
+            enabled: false,
+            escapeWithReference: true
+          }
+        },
+        positionFixed: isAlwaysFixed
+      };
+
+      if (actualTarget) {
+        this.popper = new Popper(actualTarget, this.contentRef.current, popperOpts);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          transform = _this$state.transform,
+          hasExtractedStyles = _this$state.hasExtractedStyles,
+          maxHeight = _this$state.maxHeight;
+      var opacity = hasExtractedStyles ? {} : {
+        opacity: 0
+      };
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+        ref: this.targetRef
+      }, this.props.children), /*#__PURE__*/React.createElement("div", {
+        ref: this.contentRef,
+        style: _objectSpread({
+          top: 0,
+          left: 0,
+          position: 'absolute',
+          transform: transform,
+          maxHeight: maxHeight ? maxHeight : 'auto'
+        }, opacity)
+      }, this.props.content));
+    }
+  }]);
+
+  return Layer;
+}(Component);
+
+_defineProperty(Layer, "defaultProps", {
+  boundariesElement: 'viewport',
+  children: null,
+  content: null,
+  offset: '0, 0',
+  position: 'right middle',
+  zIndex: 400,
+  lockScroll: false,
+  isAlwaysFixed: false,
+  onPositioned: function onPositioned() {}
+});
+
+export { Layer as default };

package/dist/esm/ui/Layer/internal/helpers.js

@@ -0,0 +1,62 @@
+var positionMap = {
+  'top left': {
+    position: 'top-start',
+    animation: 'top'
+  },
+  'top center': {
+    position: 'top',
+    animation: 'top'
+  },
+  'top right': {
+    position: 'top-end',
+    animation: 'top'
+  },
+  'right top': {
+    position: 'right-start',
+    animation: 'right'
+  },
+  'right middle': {
+    position: 'right',
+    animation: 'right'
+  },
+  'right bottom': {
+    position: 'right-end',
+    animation: 'right'
+  },
+  'bottom left': {
+    position: 'bottom-start',
+    animation: 'bottom'
+  },
+  'bottom center': {
+    position: 'bottom',
+    animation: 'bottom'
+  },
+  'bottom right': {
+    position: 'bottom-end',
+    animation: 'bottom'
+  },
+  'left top': {
+    position: 'left-start',
+    animation: 'left'
+  },
+  'left middle': {
+    position: 'left',
+    animation: 'left'
+  },
+  'left bottom': {
+    position: 'left-end',
+    animation: 'left'
+  }
+};
+export var POSITION_ATTRIBUTE_ENUM = {
+  values: ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom left', 'bottom center', 'bottom right', 'left top', 'left middle', 'left bottom'],
+  default: 'right middle'
+};
+
+function positionToPopper(position) {
+  return position && positionMap[position] ? positionMap[position].position : null;
+}
+
+export function positionPropToPopperPosition(position) {
+  return positionToPopper(position) || positionMap[POSITION_ATTRIBUTE_ENUM.default].position;
+}

package/dist/esm/ui/PortalProvider/PortalProviderThemesProvider.js

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import AtlaskitTheme from '@atlaskit/theme/components';
+import { CHANNEL } from '@atlaskit/theme/constants';
+export function PortalProviderThemeProviders(props) {
+  var children = props.children,
+      mode = props.mode;
+  var styledComponentsAndEmotionTheme = React.useMemo( // This return value should only be one of the following
+  // - { [CHANNEL]: { mode },
+  // - { theme: { [CHANNEL]: { mode } }
+  // However, it appears that consumers have inconsistent expectations
+  // regarding the shape.
+  // This can be revisited in future work, and for the purposes of
+  // fixing https://product-fabric.atlassian.net/browse/ED-14956
+  // we are merging the two shapes consumers expect.
+  function () {
+    var _ref;
+
+    return _ref = {}, _defineProperty(_ref, CHANNEL, {
+      mode: mode
+    }), _defineProperty(_ref, "theme", _defineProperty({}, CHANNEL, {
+      mode: mode
+    })), _ref;
+  }, [mode]);
+  var atlaskitTheme = React.useCallback(function () {
+    return {
+      mode: mode
+    };
+  }, [mode]);
+  return (
+    /*#__PURE__*/
+    // TODO: ED-15585
+    // import { ThemeProvider as DeprectateStyledComponentsProvider } from 'styled-components';
+    // <DeprectateStyledComponentsProvider theme={styledComponentsAndEmotionTheme}>
+    // </DeprectateStyledComponentsProvider>
+    React.createElement(ThemeProvider, {
+      theme: styledComponentsAndEmotionTheme
+    }, /*#__PURE__*/React.createElement(AtlaskitTheme.Provider, {
+      value: atlaskitTheme
+    }, children))
+  );
+}