@instructure/quiz-core 17.19.2-rc.5 → 17.19.3-rc.2

package/lib/common/components/RichContentInput/presenter.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RichContentInput = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _quizRce = require("@instructure/quiz-rce");
+
+var _index = _interopRequireDefault(require("./RceImageImportModal/index.js"));
+
+/*
+ * TODO can we please merge this into quiz-rce and make something coherent out of this
+ */
+var RichContentInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(RichContentInput, _Component);
+
+  var _super = (0, _createSuper2.default)(RichContentInput);
+
+  function RichContentInput() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, RichContentInput);
+
+    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));
+
+    _this.focus = function () {
+      _this.rce.focus();
+    };
+
+    _this.renderImportModal = function (importModalId, onSuccess, onClose) {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        closeOverride: _this.props.importModalCloseOverride,
+        importModalId: importModalId,
+        onClose: onClose,
+        onSuccess: onSuccess,
+        parentType: _this.props.parentType,
+        parentId: _this.props.parentId,
+        uploadPath: _this.props.uploadPath
+      });
+    };
+
+    _this.handleRceRef = function (node) {
+      _this.rce = node;
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(RichContentInput, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_quizRce.RichContentInput, Object.assign({
+        ref: this.handleRceRef
+      }, this.props, {
+        renderImportModal: this.renderImportModal,
+        openImportModal: this.props.openImportModal
+      }));
+    }
+  }]);
+  RichContentInput.displayName = "RichContentInput";
+  return RichContentInput;
+}(_react.Component);
+
+exports.RichContentInput = RichContentInput;
+RichContentInput.propTypes = {
+  // also allows (not listed) all props for ActualRichContentInput
+  importModalCloseOverride: _propTypes.default.func,
+  label: _propTypes.default.string.isRequired,
+  openImportModal: _propTypes.default.func.isRequired,
+  parentType: _propTypes.default.string,
+  parentId: _propTypes.default.string,
+  uploadPath: _propTypes.default.string
+};
+RichContentInput.defaultProps = {
+  importModalCloseOverride: null,
+  parentType: '',
+  parentId: '',
+  uploadPath: null
+};
+var _default = RichContentInput;
+exports.default = _default;

package/lib/common/components/SDKApp/index.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DragDroppableSDKApp = exports.SDKApp = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+
+var _reactDnd = require("react-dnd");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiI18n = require("@instructure/ui-i18n");
+
+var _reactRedux = require("../../react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../../reduxStore.js"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _features = require("../../api/features.js");
+
+var _ui = require("../../actions/ui.js");
+
+var _config = require("../../actions/config.js");
+
+var _outcomes = require("../../actions/outcomes.js");
+
+var _features2 = require("../../actions/features.js");
+
+var _renderAlerts = _interopRequireDefault(require("../../util/renderAlerts.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _CustomPropTypes = _interopRequireDefault(require("../../../common/util/CustomPropTypes.js"));
+
+var _index = _interopRequireDefault(require("../ConfirmationModal/index.js"));
+
+var _setupFormatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/util/setupFormatMessage"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fzweS',
+  template: function template(theme) {
+    return "\n\n.fzweS_dXHX{height:100%}";
+  },
+  'sdk': 'fzweS_dXHX'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_index.default, null);
+
+var SDKApp = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(SDKApp, _Component);
+
+  var _super = (0, _createSuper2.default)(SDKApp);
+
+  function SDKApp(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, SDKApp);
+    _this = _super.call(this, props); // TODO: move to something like this down the line
+    // so we dont implicitly share state
+    // this.store = this.configureStore()
+
+    _this.store = _reduxStore.default;
+
+    _this.setLocale();
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(SDKApp, [{
+    key: "setLocale",
+    value: function setLocale() {
+      var locale = (0, _quizCommon.getLocale)(this.props, this.context); // TODO: Move away from using built-in format-message formats so we can kill this setup call
+
+      (0, _setupFormatMessage.default)(locale, {
+        logMissingTranslations: true,
+        translations: this.props.translations
+      });
+    }
+  }, {
+    key: "setAppContainer",
+    value: function setAppContainer(appContainer) {
+      var selectors = Array.isArray(appContainer) ? appContainer : [appContainer];
+      return (0, _ui.set)('appContainer', selectors);
+    }
+  }, {
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      this.store.dispatch([(0, _config.setAPIEndpoint)(this.props.apiEndpoint), this.setAppContainer(this.props.appContainer), (0, _config.setUserToken)(this.props.userToken), (0, _outcomes.setOutcomesEndpoint)(this.props.outcomesEndpoint), (0, _outcomes.setOutcomesToken)(this.props.outcomesToken), (0, _outcomes.setContextUuid)(this.props.contextUuid)]);
+      this.store.dispatch((0, _features.getFeatures)());
+
+      if (this.props.itemBankSharingEnabled) {
+        this.store.dispatch((0, _features2.addFeatures)('item_bank_sharing'));
+      }
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // inserts the a11y friendly alerts
+      // react app hooked up to the store
+      (0, _renderAlerts.default)(this.store);
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(newProps) {
+      if (newProps.apiEndpoint !== this.props.apiEndpoint) {
+        this.store.dispatch((0, _config.setAPIEndpoint)(newProps.apiEndpoint));
+      }
+
+      if (newProps.appContainer !== this.props.appContainer) {
+        this.store.dispatch(this.setAppContainer(newProps.appContainer));
+      }
+
+      if (newProps.userToken !== this.props.userToken) {
+        this.store.dispatch((0, _config.setUserToken)(newProps.userToken));
+      }
+
+      if (newProps.outcomesEndpoint !== this.props.outcomesEndpoint) {
+        this.store.dispatch((0, _outcomes.setOutcomesEndpoint)(newProps.outcomesEndpoint));
+      }
+
+      if (newProps.outcomesToken !== this.props.outcomesToken) {
+        this.store.dispatch((0, _outcomes.setOutcomesToken)(newProps.outcomesToken));
+      }
+
+      if (newProps.contextUuid !== this.props.contextUuid) {
+        this.store.dispatch((0, _outcomes.setContextUuid)(newProps.contextUuid));
+      }
+
+      if (newProps.itemBankSharingEnabled !== this.props.itemBankSharingEnabled) {
+        var toggleFeature = newProps.itemBankSharingEnabled ? _features2.addFeatures : _features2.removeFeatures;
+        this.store.dispatch(toggleFeature('item_bank_sharing'));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var store = this.store,
+          props = this.props,
+          context = this.context;
+      return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+        store: store
+      }, /*#__PURE__*/_react.default.createElement(_uiI18n.ApplyLocale, {
+        locale: (0, _quizCommon.getLocale)(props, context),
+        timezone: props.timeZone
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.sdk,
+        "data-automation": "sdk-app"
+      }, _ref, props.children)));
+    }
+  }]);
+  SDKApp.displayName = "SDKApp";
+  return SDKApp;
+}(_react.Component), _class2.propTypes = {
+  apiEndpoint: _propTypes.default.string.isRequired,
+  appContainer: _CustomPropTypes.default.selectors.isRequired,
+  children: _propTypes.default.node.isRequired,
+  contextUuid: _propTypes.default.string,
+  itemBankSharingEnabled: _propTypes.default.bool,
+  // ESLint seems to this the "locale" prop is unused even though it definitely is
+  locale: _propTypes.default.string,
+
+  /* eslint-disable-line react/no-unused-prop-types */
+  outcomesEndpoint: _propTypes.default.string,
+  outcomesToken: _propTypes.default.string,
+  timeZone: _propTypes.default.string,
+  translations: _propTypes.default.objectOf(_propTypes.default.shape({
+    message: _propTypes.default.string
+  })),
+  userToken: _propTypes.default.string.isRequired
+}, _class2.contextTypes = {
+  locale: _propTypes.default.string
+}, _class2.defaultProps = {
+  contextUuid: '',
+  itemBankSharingEnabled: false,
+  locale: null,
+  outcomesEndpoint: null,
+  outcomesToken: null,
+  translations: null,
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+}, _temp)) || _class);
+exports.SDKApp = SDKApp;
+var DragDroppableSDKApp = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(SDKApp);
+exports.DragDroppableSDKApp = DragDroppableSDKApp;
+var _default = DragDroppableSDKApp;
+exports.default = _default;

package/lib/common/components/SDKApp/theme.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {};
+}

package/lib/common/components/SDKHeaderCalculator.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SDKHeaderCalculator = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("../react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../reduxStore.js"));
+
+var _index = _interopRequireDefault(require("./layout/header/Calculator/index.js"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+  store: _reduxStore.default
+}, /*#__PURE__*/_react.default.createElement(_index.default, null));
+
+var SDKHeaderCalculator = function SDKHeaderCalculator() {
+  return _ref;
+};
+
+exports.SDKHeaderCalculator = SDKHeaderCalculator;
+SDKHeaderCalculator.displayName = 'SDKHeaderCalculator';
+var _default = SDKHeaderCalculator;
+exports.default = _default;

package/lib/common/components/SDKMenuButton.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SDKMenuButton = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("../react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../reduxStore.js"));
+
+var _index = _interopRequireDefault(require("./layout/header/HeaderMenuButton/index.js"));
+
+var SDKMenuButton = function SDKMenuButton(props) {
+  return /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+    store: _reduxStore.default
+  }, /*#__PURE__*/_react.default.createElement(_index.default, props));
+};
+
+exports.SDKMenuButton = SDKMenuButton;
+SDKMenuButton.displayName = 'SDKMenuButton';
+var _default = SDKMenuButton;
+exports.default = _default;

package/lib/common/components/SDKTimer.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SDKTimer = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactRedux = require("../react-redux.js");
+
+var _reduxStore = _interopRequireDefault(require("../../reduxStore.js"));
+
+var _index = _interopRequireDefault(require("./layout/header/Timer/index.js"));
+
+var _ref = /*#__PURE__*/_react.default.createElement(_reactRedux.Provider, {
+  store: _reduxStore.default
+}, /*#__PURE__*/_react.default.createElement(_index.default, null));
+
+var SDKTimer = function SDKTimer() {
+  return _ref;
+};
+
+exports.SDKTimer = SDKTimer;
+SDKTimer.displayName = 'SDKTimer';
+var _default = SDKTimer;
+exports.default = _default;

package/lib/common/components/alerts/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../react-redux.js");
+
+var _alerts = require("../../actions/alerts.js");
+
+var _Alert = _interopRequireDefault(require("../../records/Alert.js"));
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var mapStateToProps = function mapStateToProps(state) {
+  var alerts = state.get('alerts', (0, _immutable.Map)());
+  return {
+    alerts: alerts.map(function (data) {
+      return new _Alert.default(data);
+    }).valueSeq().toList()
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, {
+  removeAlert: _alerts.removeAlert
+})(_presenter.default);
+
+exports.default = _default;

package/lib/common/components/alerts/presenter.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Alerts = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiAlerts = require("@instructure/ui-alerts");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cYPGH',
+  template: function template(theme) {
+    return "\n\n.cYPGH_ddjo{box-sizing:border-box;padding-left:".concat(theme.alertsPadding || 'inherit', ";padding-right:").concat(theme.alertsPadding || 'inherit', ";padding-top:").concat(theme.alertsTopPadding || 'inherit', ";pointer-events:none;position:fixed;width:100%;z-index:").concat(theme.alertsZIndex || 'inherit', "}\n\n.cYPGH_eVxh{pointer-events:auto}\n\n@media screen and (--phoneBreakPoint){.cYPGH_ddjo{padding:").concat(theme.alertsMobilePadding || 'inherit', "}}");
+  },
+  'alerts': 'cYPGH_ddjo',
+  'alertHolder': 'cYPGH_eVxh'
+};
+var Alerts = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Alerts, _Component);
+
+  var _super = (0, _createSuper2.default)(Alerts);
+
+  function Alerts() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Alerts);
+
+    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));
+
+    _this.renderAlert = function (alert) {
+      var closeAlert = (0, _partial.default)(_this.props.removeAlert, alert.uuid);
+
+      if (alert.variant === 'screenreader') {
+        return _this.renderScreenreaderAlert(alert);
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: alert.uuid,
+        className: styles.alertHolder
+      }, /*#__PURE__*/_react.default.createElement(_uiAlerts.Alert, {
+        variant: alert.variant,
+        onDismiss: closeAlert,
+        closeButtonLabel: (0, _formatMessage.default)('Close'),
+        transition: "none"
+      }, alert.message));
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Alerts, [{
+    key: "renderScreenreaderAlert",
+    value: function renderScreenreaderAlert(alert) {
+      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, {
+        key: alert.uuid
+      }, alert.message);
+    }
+  }, {
+    key: "renderAlerts",
+    value: function renderAlerts() {
+      return this.props.alerts.toJS().map(this.renderAlert);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.alerts
+      }, this.renderAlerts());
+    }
+  }]);
+  Alerts.displayName = "Alerts";
+  return Alerts;
+}(_react.Component), _class2.propTypes = {
+  removeAlert: _propTypes.default.func.isRequired,
+  alerts: _reactImmutableProptypes.default.list.isRequired
+}, _class2.defaultProps = {
+  sidebarOpen: false
+}, _temp)) || _class);
+exports.Alerts = Alerts;
+var _default = Alerts;
+exports.default = _default;

package/lib/common/components/alerts/theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var breakpoints = _ref.breakpoints,
+      spacing = _ref.spacing;
+  return {
+    alertsPadding: spacing.medium,
+    alertsTopPadding: spacing.large,
+    alertsMobilePadding: spacing.small,
+    alertsZIndex: '7777',
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium)
+  };
+}

package/lib/common/components/layout/Page/index.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Page = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'bwvTI',
+  template: function template(theme) {
+    return "\n\n.bwvTI_gasz{display:flex;font-family:".concat(theme.fontFamily || 'inherit', ";height:100%;margin:0}\n\n@media screen and (--phoneBreakPoint){.bwvTI_caGd{-webkit-overflow-scrolling:touch}}\n\n.bwvTI_caGd{transition:").concat(theme.contentTransition || 'inherit', ";width:100%}\n\n.bwvTI_dxaC{overflow-x:hidden;overflow-y:auto}");
+  },
+  'wrapper': 'bwvTI_gasz',
+  'content': 'bwvTI_caGd',
+  'scrollable': 'bwvTI_dxaC'
+};
+var Page = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Page, _Component);
+
+  var _super = (0, _createSuper2.default)(Page);
+
+  function Page() {
+    (0, _classCallCheck2.default)(this, Page);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Page, [{
+    key: "shouldRenderSidebar",
+    value: function shouldRenderSidebar() {
+      return this.props.sidebarComponent != null && this.props.sidebarOpen != null;
+    }
+  }, {
+    key: "renderSidebar",
+    value: function renderSidebar() {
+      return /*#__PURE__*/_react.default.createElement(this.props.sidebarComponent, {
+        role: this.props.sidebarRole,
+        sidebarOpen: this.props.sidebarOpen,
+        toggleSidebar: this.props.toggleSidebar
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var childrenWrapperStyles = (0, _classnames2.default)(styles.content, (0, _defineProperty2.default)({}, styles.scrollable, this.shouldRenderSidebar()));
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.wrapper
+      }, this.shouldRenderSidebar() ? this.renderSidebar() : null, /*#__PURE__*/_react.default.createElement("div", {
+        // this component is focusable for SkipToContent
+        tabIndex: "-1",
+        ref: this.props.childrenWrapperRef,
+        role: this.props.contentRole,
+        className: childrenWrapperStyles
+      }, this.props.children));
+    }
+  }]);
+  Page.displayName = "Page";
+  return Page;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  childrenWrapperRef: _propTypes.default.func,
+  contentRole: _propTypes.default.string,
+  sidebarComponent: _propTypes.default.func,
+  sidebarOpen: _propTypes.default.bool,
+  sidebarRole: _propTypes.default.string,
+  toggleSidebar: _propTypes.default.func
+}, _class2.defaultProps = {
+  childrenWrapperRef: function childrenWrapperRef() {},
+  contentRole: 'main',
+  sidebarComponent: null,
+  sidebarOpen: null,
+  sidebarRole: 'navigation',
+  toggleSidebar: function toggleSidebar() {}
+}, _temp)) || _class);
+exports.Page = Page;
+var _default = Page;
+exports.default = _default;