@instructure/quiz-core 22.10.2 → 22.11.1-rc.88

package/es/common/components/resources/quiz/AddContent/Body/presenter.js

@@ -1,143 +1,143 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _dec, _class, _AddContentBody;
-function _callSuper(_this, derived, args) {
-  function isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-    try {
-      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (e) {
-      return false;
-    }
-  }
-  derived = _getPrototypeOf(derived);
-  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
-}
 /** @jsx jsx */
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import first from 'lodash/first';
-import { IconBankLine } from '@instructure/ui-icons';
-import { IconButton } from '@instructure/ui-buttons';
+import { jsx } from '@instructure/emotion';
+import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID, withStyleOverrides } from '@instructure/quiz-common';
+import t from '@instructure/quiz-i18n/format-message';
+import { Button, IconButton } from '@instructure/ui-buttons';
 import { Grid } from '@instructure/ui-grid';
-import { View } from '@instructure/ui-view';
+import { IconAiSolid, IconBankLine } from '@instructure/ui-icons';
 import { Text } from '@instructure/ui-text';
-import { jsx } from '@instructure/emotion';
+import { View } from '@instructure/ui-view';
+import first from 'lodash/first';
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
 import InteractionTypes from '../../../../shared/InteractionTypes';
-import t from '@instructure/quiz-i18n/es/format-message';
-import { BUILD_TRAY_OPEN, BUILD_TRAY_POSITION, BUILD_TRAY_STIMULUS_ID, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-export var AddContentBody = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_AddContentBody = /*#__PURE__*/function (_Component) {
-  function AddContentBody() {
-    var _this2;
-    _classCallCheck(this, AddContentBody);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+function UnstyledAddContentBody(_ref) {
+  var allowStimulusCreation = _ref.allowStimulusCreation,
+    createItem = _ref.createItem,
+    createStimulus = _ref.createStimulus,
+    editingQuizEntry = _ref.editingQuizEntry,
+    interactionTypes = _ref.interactionTypes,
+    _ref$onOpenBankTray = _ref.onOpenBankTray,
+    onOpenBankTray = _ref$onOpenBankTray === void 0 ? function () {} : _ref$onOpenBankTray,
+    _ref$onAddItem = _ref.onAddItem,
+    onAddItem = _ref$onAddItem === void 0 ? function () {} : _ref$onAddItem,
+    parentEntryId = _ref.parentEntryId,
+    position = _ref.position,
+    quizEntryWithErrorsShowing = _ref.quizEntryWithErrorsShowing,
+    quizId = _ref.quizId,
+    screenreaderNotification = _ref.screenreaderNotification,
+    setNextQuizEntry = _ref.setNextQuizEntry,
+    setUi = _ref.setUi,
+    _ref$showHeaderText = _ref.showHeaderText,
+    showHeaderText = _ref$showHeaderText === void 0 ? true : _ref$showHeaderText,
+    stimulusId = _ref.stimulusId,
+    styles = _ref.styles,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps,
+    _ref$containerType = _ref.containerType,
+    containerType = _ref$containerType === void 0 ? 'popover' : _ref$containerType;
+  var openBankTray = useCallback(function () {
+    onOpenBankTray();
+    setUi(BUILD_TRAY_OPEN, true);
+    setUi(BUILD_TRAY_POSITION, position);
+    setUi(BUILD_TRAY_STIMULUS_ID, parentEntryId);
+  }, [onOpenBankTray, setUi, position, parentEntryId]);
+  var addStimulus = useCallback(function (isPassage) {
+    if (editingQuizEntry) {
+      setNextQuizEntry(null, quizId, position);
+    } else {
+      createStimulus(quizId, position, isPassage);
     }
-    _this2 = _callSuper(this, AddContentBody, [].concat(args));
-    // ==============================
-    // ACTIONS
-    // ==============================
-    _defineProperty(_this2, "openBankTray", function () {
-      _this2.props.onOpenBankTray();
-      _this2.props.setUi(BUILD_TRAY_OPEN, true);
-      _this2.props.setUi(BUILD_TRAY_POSITION, _this2.props.position);
-      _this2.props.setUi(BUILD_TRAY_STIMULUS_ID, _this2.props.parentEntryId);
-    });
-    _defineProperty(_this2, "addStimulus", function (isPassage) {
-      if (_this2.props.editingQuizEntry) {
-        _this2.props.setNextQuizEntry(null, _this2.props.quizId, _this2.props.position);
-      } else {
-        _this2.props.createStimulus(_this2.props.quizId, _this2.props.position, isPassage);
-      }
-      _this2.props.onAddItem();
-    });
-    _defineProperty(_this2, "addItem", function (interactionTypeData) {
-      if (_this2.props.quizEntryWithErrorsShowing) {
-        _this2.props.screenreaderNotification(t('Question {itemPosition, number} cannot be saved due to invalid input data', {
-          itemPosition: Math.ceil(_this2.props.quizEntryWithErrorsShowing.position)
-        }));
+    onAddItem();
+  }, [editingQuizEntry, setNextQuizEntry, quizId, position, createStimulus, onAddItem]);
+  var addItem = useCallback(function (interactionTypeData) {
+    if (quizEntryWithErrorsShowing) {
+      screenreaderNotification(t('Question {itemPosition, number} cannot be saved due to invalid input data', {
+        itemPosition: Math.ceil(quizEntryWithErrorsShowing.position)
+      }));
+    } else {
+      if (editingQuizEntry) {
+        setNextQuizEntry(interactionTypeData, quizId, position, stimulusId, parentEntryId);
       } else {
-        var _this2$props = _this2.props,
-          quizId = _this2$props.quizId,
-          position = _this2$props.position,
-          stimulusId = _this2$props.stimulusId,
-          parentEntryId = _this2$props.parentEntryId;
-        if (_this2.props.editingQuizEntry) {
-          _this2.props.setNextQuizEntry(interactionTypeData, quizId, position, stimulusId, parentEntryId);
-        } else {
-          var defaultInteractionData = interactionTypeData.getDefaultInteractionData();
-          var scoringData = interactionTypeData.getDefaultScoringData(defaultInteractionData);
-          _this2.props.createItem(quizId, position, {
-            id: interactionTypeData.id,
-            interactionData: defaultInteractionData,
-            itemBody: interactionTypeData.itemBody,
-            properties: interactionTypeData.defaultProperties,
-            scoringAlgorithm: interactionTypeData.scoringAlgorithmDefault,
-            scoringData: scoringData,
-            userResponseType: first(interactionTypeData.userResponseTypeOptions)
-          }, parentEntryId, stimulusId);
-        }
+        var defaultInteractionData = interactionTypeData.getDefaultInteractionData();
+        var scoringData = interactionTypeData.getDefaultScoringData(defaultInteractionData);
+        createItem(quizId, position, {
+          id: interactionTypeData.id,
+          interactionData: defaultInteractionData,
+          itemBody: interactionTypeData.itemBody,
+          properties: interactionTypeData.defaultProperties,
+          scoringAlgorithm: interactionTypeData.scoringAlgorithmDefault,
+          scoringData: scoringData,
+          userResponseType: first(interactionTypeData.userResponseTypeOptions)
+        }, parentEntryId, stimulusId);
       }
-      _this2.props.onAddItem();
-    });
-    // ==============================
-    // RENDERING
-    // ==============================
-    _defineProperty(_this2, "renderBankButton", function () {
-      return jsx(IconButton, {
-        size: "large",
-        onClick: _this2.openBankTray,
-        "data-automation": "sdk-add-banked-content-button",
-        screenReaderLabel: t('Add banked content')
-      }, jsx(IconBankLine, null));
-    });
-    _defineProperty(_this2, "renderPopoverHeader", function () {
-      var text = _this2.props.showHeaderText ? t('Insert Content') : '';
-      return jsx("div", {
-        css: _this2.props.styles.popoverHeaderBox
-      }, jsx("div", {
-        css: _this2.props.styles.popoverHeader
-      }, jsx(Grid, {
-        vAlign: "middle",
-        colSpacing: "none",
-        rowSpacing: "none"
-      }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(Text, {
-        color: "primary"
-      }, text)), jsx(Grid.Col, {
-        width: "auto"
-      }, _this2.renderBankButton())))));
-    });
-    return _this2;
-  }
-  _inherits(AddContentBody, _Component);
-  return _createClass(AddContentBody, [{
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        css: this.props.styles.popoverContent,
-        role: "dialog",
-        "aria-label": t('Insert Content')
-      }, this.renderPopoverHeader(), jsx(View, {
-        padding: "small"
-      }, jsx(InteractionTypes, {
-        columns: 2,
-        addItem: this.addItem,
-        addStimulus: this.addStimulus,
-        allowStimulusCreation: this.props.allowStimulusCreation,
-        types: this.props.interactionTypes
-      })));
     }
-  }]);
-}(Component), _defineProperty(_AddContentBody, "displayName", 'AddContentBody'), _defineProperty(_AddContentBody, "componentId", "Quizzes".concat(_AddContentBody.displayName)), _defineProperty(_AddContentBody, "propTypes", {
+    onAddItem();
+  }, [quizEntryWithErrorsShowing, screenreaderNotification, editingQuizEntry, setNextQuizEntry, quizId, position, stimulusId, parentEntryId, createItem, onAddItem]);
+  var renderBankButton = function renderBankButton() {
+    return jsx(IconButton, {
+      size: "large",
+      onClick: openBankTray,
+      "data-automation": "sdk-add-banked-content-button",
+      screenReaderLabel: t('Add banked content')
+    }, jsx(IconBankLine, null));
+  };
+  var renderPopoverHeader = function renderPopoverHeader() {
+    var _slotProps$quizGenera, _slotProps$quizGenera2, _slotProps$quizGenera3;
+    var text = showHeaderText ? t('Insert Content') : '';
+    return jsx("div", {
+      css: styles.popoverHeaderBox
+    }, jsx("div", {
+      css: styles.popoverHeader
+    }, jsx(Grid, {
+      vAlign: "middle",
+      colSpacing: "none",
+      rowSpacing: "none"
+    }, jsx(Grid.Row, null, jsx(Grid.Col, null, jsx(Text, {
+      color: "primary"
+    }, text)), jsx(Grid.Col, {
+      width: "auto"
+    }, renderBankButton())))), ((_slotProps$quizGenera = slotProps.quizGenerationButton) === null || _slotProps$quizGenera === void 0 ? void 0 : _slotProps$quizGenera.visible) && jsx(View, {
+      as: "div",
+      maxWidth: containerType === 'modal' ? '100%' : '50%',
+      padding: containerType === 'modal' ? 'x-small 0 small' : 'x-small x-small small 0'
+    }, jsx(Button, {
+      size: "small",
+      display: "block",
+      color: "ai-primary",
+      textAlign: "start",
+      renderIcon: IconAiSolid,
+      onClick: (_slotProps$quizGenera2 = slotProps.quizGenerationButton) === null || _slotProps$quizGenera2 === void 0 ? void 0 : _slotProps$quizGenera2.onClick,
+      disabled: (_slotProps$quizGenera3 = slotProps.quizGenerationButton) === null || _slotProps$quizGenera3 === void 0 ? void 0 : _slotProps$quizGenera3.disabled,
+      "data-automation": "sdk-interaction-button-ai"
+    }, t('Generate with AI'))));
+  };
+  return jsx("div", {
+    css: styles.popoverContent,
+    role: "dialog",
+    "aria-label": t('Insert Content')
+  }, renderPopoverHeader(), jsx(View, {
+    padding: "small"
+  }, jsx(InteractionTypes, {
+    columns: 2,
+    addItem: addItem,
+    addStimulus: addStimulus,
+    allowStimulusCreation: allowStimulusCreation,
+    types: interactionTypes
+  })));
+}
+export var AddContentBody = withStyleOverrides(generateStyle, generateComponentTheme)(UnstyledAddContentBody);
+export var quizGenerationButtonPropTypes = PropTypes.shape({
+  onClick: PropTypes.func.isRequired,
+  visible: PropTypes.bool,
+  disabled: PropTypes.bool
+});
+AddContentBody.displayName = 'AddContentBody';
+AddContentBody.componentId = "Quizzes".concat(AddContentBody.displayName);
+AddContentBody.propTypes = {
   allowStimulusCreation: PropTypes.bool.isRequired,
   createItem: PropTypes.func.isRequired,
   createStimulus: PropTypes.func.isRequired,
@@ -154,15 +154,9 @@ export var AddContentBody = (_dec = withStyleOverrides(generateStyle, generateCo
   setUi: PropTypes.func.isRequired,
   showHeaderText: PropTypes.bool,
   stimulusId: PropTypes.string,
-  styles: PropTypes.object
-}), _defineProperty(_AddContentBody, "defaultProps", {
-  editingQuizEntry: void 0,
-  interactionTypes: void 0,
-  onAddItem: Function.prototype,
-  parentEntryId: void 0,
-  onOpenBankTray: Function.prototype,
-  quizEntryWithErrorsShowing: void 0,
-  showHeaderText: true,
-  stimulusId: void 0
-}), _AddContentBody)) || _class);
+  styles: PropTypes.object,
+  slotProps: PropTypes.shape({
+    quizGenerationButton: quizGenerationButtonPropTypes
+  })
+};
 export default AddContentBody;

package/es/common/components/resources/quiz/AddContent/Button/index.js

@@ -26,7 +26,7 @@ import { IconPlusLine } from '@instructure/ui-icons';
 import { PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { Button } from '@instructure/ui-buttons';
 import { jsx } from '@instructure/emotion';
-import t from '@instructure/quiz-i18n/es/format-message';
+import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';

package/es/common/components/resources/quiz/AddContent/Modal/presenter.js

@@ -1,88 +1,76 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function _callSuper(_this, derived, args) {
-  function isNativeReflectConstruct() {
-    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-    if (Reflect.construct.sham) return false;
-    if (typeof Proxy === "function") return true;
-    try {
-      return !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    } catch (e) {
-      return false;
-    }
-  }
-  derived = _getPrototypeOf(derived);
-  return _possibleConstructorReturn(_this, isNativeReflectConstruct() ? Reflect.construct(derived, args || [], _getPrototypeOf(_this).constructor) : derived.apply(_this, args));
-}
-import React, { Component } from 'react';
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, CloseButton } from '@instructure/ui-buttons';
 import { Heading } from '@instructure/ui-heading';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from '@instructure/quiz-common';
-import t from '@instructure/quiz-i18n/es/format-message';
+import t from '@instructure/quiz-i18n/format-message';
 import AddContentBody from '../Body';
-export var AddContentModal = /*#__PURE__*/function (_Component) {
-  function AddContentModal() {
-    _classCallCheck(this, AddContentModal);
-    return _callSuper(this, AddContentModal, arguments);
-  }
-  _inherits(AddContentModal, _Component);
-  return _createClass(AddContentModal, [{
-    key: "cancelButton",
-    value: function cancelButton() {
-      return /*#__PURE__*/React.createElement(Button, {
-        onClick: this.props.closeModal
-      }, t('Cancel'));
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      return /*#__PURE__*/React.createElement(AddContentBody, {
-        allowStimulusCreation: this.props.allowStimulusCreation,
-        onOpenBankTray: this.props.closeModal,
-        onAddItem: this.props.closeModal,
-        parentEntryId: this.props.parentEntryId,
-        position: this.props.position,
-        quizId: this.props.quizId,
-        showHeaderText: false,
-        stimulusId: this.props.stimulusId
-      });
+import { quizGenerationButtonPropTypes } from '../Body/presenter';
+export function AddContentModal(_ref) {
+  var allowStimulusCreation = _ref.allowStimulusCreation,
+    closeModal = _ref.closeModal,
+    modalOpen = _ref.modalOpen,
+    _ref$parentEntryId = _ref.parentEntryId,
+    parentEntryId = _ref$parentEntryId === void 0 ? void 0 : _ref$parentEntryId,
+    position = _ref.position,
+    quizId = _ref.quizId,
+    _ref$stimulusId = _ref.stimulusId,
+    stimulusId = _ref$stimulusId === void 0 ? void 0 : _ref$stimulusId,
+    _ref$slotProps = _ref.slotProps,
+    slotProps = _ref$slotProps === void 0 ? {} : _ref$slotProps;
+  var handleGenerateWithAiClick = function handleGenerateWithAiClick() {
+    var _slotProps$quizGenera, _slotProps$quizGenera2;
+    slotProps === null || slotProps === void 0 || (_slotProps$quizGenera = slotProps.quizGenerationButton) === null || _slotProps$quizGenera === void 0 || (_slotProps$quizGenera2 = _slotProps$quizGenera.onClick) === null || _slotProps$quizGenera2 === void 0 || _slotProps$quizGenera2.call(_slotProps$quizGenera, position);
+    closeModal();
+  };
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
+    open: modalOpen,
+    onDismiss: closeModal,
+    size: "large",
+    label: t('Add Content')
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
+    level: "reset",
+    as: "h2"
+  }, t('Insert Content')), /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: closeModal,
+    placement: "end",
+    offset: "medium",
+    screenReaderLabel: t('Close')
+  })), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(AddContentBody, {
+    allowStimulusCreation: allowStimulusCreation,
+    onOpenBankTray: closeModal,
+    onAddItem: closeModal,
+    parentEntryId: parentEntryId,
+    position: position,
+    quizId: quizId,
+    showHeaderText: false,
+    stimulusId: stimulusId,
+    containerType: "modal",
+    slotProps: {
+      quizGenerationButton: _objectSpread(_objectSpread({}, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.quizGenerationButton) || {}), {}, {
+        onClick: handleGenerateWithAiClick
+      })
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Modal, {
-        open: this.props.modalOpen,
-        onDismiss: this.props.closeModal,
-        size: "large",
-        label: t('Add Content')
-      }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(Heading, {
-        level: "reset",
-        as: "h2"
-      }, t('Insert Content')), /*#__PURE__*/React.createElement(CloseButton, {
-        onClick: this.props.closeModal,
-        placement: "end",
-        offset: "medium",
-        screenReaderLabel: t('Close')
-      })), /*#__PURE__*/React.createElement(ModalBody, null, this.renderContent()), /*#__PURE__*/React.createElement(ModalFooter, null, this.cancelButton())));
-    }
-  }]);
-}(Component);
-_defineProperty(AddContentModal, "propTypes", {
+  })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: closeModal
+  }, t('Cancel')))));
+}
+AddContentModal.propTypes = {
   allowStimulusCreation: PropTypes.bool.isRequired,
   closeModal: PropTypes.func.isRequired,
   modalOpen: PropTypes.bool.isRequired,
   parentEntryId: PropTypes.string,
   position: PropTypes.number.isRequired,
   quizId: PropTypes.string.isRequired,
-  stimulusId: PropTypes.string
-});
-_defineProperty(AddContentModal, "defaultProps", {
+  stimulusId: PropTypes.string,
+  slotProps: PropTypes.shape({
+    quizGenerationButton: quizGenerationButtonPropTypes
+  })
+};
+AddContentModal.defaultProps = {
   parentEntryId: void 0,
   stimulusId: void 0
-});
-export default AddContentModal;
+};