@instructure/quiz-core 22.17.0 → 22.18.0

package/lib/common/components/shared/drag_and_drop/DragAndDropZone/index.js

@@ -96,7 +96,7 @@ import { jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/format-message';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var DragAndDropZone = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(DragAndDropZone, Component);

package/lib/common/components/shared/drag_and_drop/DragHandle/index.js

@@ -6,19 +6,13 @@ import { moveTemporaryQuizEntry } from '../../../../../common/actions/modificati
 import { moveQuizEntry } from '../../../../../building/api/quizEntries';
 import { set as setUI, clear as clearUI } from '../../../../../common/actions/ui';
 import { openMoveImmutableModal } from '../../../../../common/actions/modal';
-import { MOVED_QUIZ_ENTRY, MOVED_IN_SIDEBAR } from '@instructure/quiz-common';
+import { MOVED_QUIZ_ENTRY, MOVED_IN_SIDEBAR } from '@instructure/quiz-common/constants';
 import { getActiveQuiz } from '../../../../selectors/quizzes';
 export var mapStateToProps = function(state, props) {
     var activeQuiz = getActiveQuiz(state);
     return {
-        movedInSidebar: state.getIn([
-            'ui',
-            MOVED_IN_SIDEBAR
-        ]),
-        movedQuizEntry: state.getIn([
-            'ui',
-            MOVED_QUIZ_ENTRY
-        ]),
+        movedInSidebar: state.ui.get(MOVED_IN_SIDEBAR),
+        movedQuizEntry: state.ui.get(MOVED_QUIZ_ENTRY),
         quizId: activeQuiz.id
     };
 };

package/lib/common/components/shared/drag_and_drop/DragHandle/presenter.js

@@ -93,7 +93,7 @@ import { Menu } from '@instructure/ui-menu';
 import { IconArrowDownLine, IconArrowUpLine, IconDragHandleLine, IconMiniArrowDownLine, IconMiniArrowUpLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/format-message';
 import keyboardClickable from '../../../../../common/util/keyboardClickable';
-import { MOVE_IMMUTABLE_DATA, SIDEBAR_NAV_ID, MOVED_QUIZ_ENTRY, MOVED_IN_SIDEBAR, MOVE } from '@instructure/quiz-common';
+import { MOVE_IMMUTABLE_DATA, SIDEBAR_NAV_ID, MOVED_QUIZ_ENTRY, MOVED_IN_SIDEBAR, MOVE } from '@instructure/quiz-common/constants';
 export var DragHandle = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(DragHandle, Component);

package/lib/common/components/shared/drag_and_drop/dragAndDropUtils.js

@@ -1,10 +1,62 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import React from 'react';
 import ReactDOM from 'react-dom';
 import { chain, debounce } from 'lodash';
 import { Map } from 'immutable';
-import { DropTarget } from 'react-dnd';
+import { useDrag, useDrop } from 'react-dnd';
 import cachePreviousArgs from '../../../util/cachePreviousArgs';
-import { TEMPORARY_QUIZ_ENTRY_ID, SIDEBAR_ITEM_REF, MOVE_IMMUTABLE_DATA, MOVED_IN_SIDEBAR } from '@instructure/quiz-common';
+import { TEMPORARY_QUIZ_ENTRY_ID, SIDEBAR_ITEM_REF, MOVE_IMMUTABLE_DATA, MOVED_IN_SIDEBAR } from '@instructure/quiz-common/constants';
 export function getBoundsForComponent(component) {
+    if (!component) return {};
     var dndComponent = component.dndComponent ? component.dndComponent : component;
     var DOMNode = ReactDOM.findDOMNode(dndComponent);
     return DOMNode && DOMNode.getBoundingClientRect() || {};
@@ -93,7 +145,7 @@ function createPositionObj(props, monitor, component, inSidebar) {
     if (props.quizEntry) {
         newPositionObj = posObjFromQuizEntry(itemData.quizEntry, props.quizEntry, mousePos, component, inSidebar);
     } else {
-        var startQuizEntries = component.startQuizEntries, endQuizEntries = component.endQuizEntries;
+        var _ref = component || {}, startQuizEntries = _ref.startQuizEntries, endQuizEntries = _ref.endQuizEntries;
         newPositionObj = posObjFromNonQuizEntry(itemData.quizEntry, startQuizEntries, endQuizEntries, mousePos, props.quizEntries);
     }
     return newPositionObj;
@@ -248,31 +300,109 @@ export function onQuizEntryDrop(props, monitor, component, refname) {
         };
     }
 }
-export function collectDrop(connect, monitor) {
-    return {
-        connectDropTarget: connect.dropTarget(),
-        isOver: monitor.isOver()
-    };
-}
 export var ItemTypes = {
     QUIZ_ENTRY: 'quiz_entry'
 };
-export var dropTarget = function(refname) {
+// =====================================================
+// Hooks-based replacements for the v2 HOCs
+// =====================================================
+/**
+ * Replaces DropTargetCreator(refname). Returns a `connectDropTarget` adapter
+ * that consumers can use exactly like the v2-injected prop, plus `isOver`.
+ *
+ * `instanceRef` should be a ref whose `.current` is the consuming class
+ * instance (or any object exposing `dndComponent` / `startQuizEntries` /
+ * `endQuizEntries` for the helper functions to read).
+ */ export function useQuizEntryDropTarget(refname, props, instanceRef) {
+    var _useDrop = _sliced_to_array(useDrop(function() {
+        return {
+            accept: ItemTypes.QUIZ_ENTRY,
+            drop: function(_item, monitor) {
+                return onQuizEntryDrop(props, monitor, instanceRef.current, refname);
+            },
+            hover: function(_item, monitor) {
+                return onQuizEntryHover(props, monitor, instanceRef.current, refname);
+            },
+            collect: function(monitor) {
+                return {
+                    isOver: monitor.isOver()
+                };
+            }
+        };
+    }, [
+        refname,
+        props,
+        instanceRef
+    ]), 2), isOver = _useDrop[0].isOver, dropConnector = _useDrop[1];
+    var connectDropTarget = makeConnector(dropConnector);
     return {
-        drop: function drop(props, monitor, component) {
-            return onQuizEntryDrop(props, monitor, component, refname);
-        },
-        hover: function hover(props, monitor, component) {
-            onQuizEntryHover(props, monitor, component, refname);
+        connectDropTarget: connectDropTarget,
+        isOver: isOver,
+        dropConnector: dropConnector
+    };
+}
+/**
+ * Replaces { dragSource, collectDrag } + DragSource(...) wrapping.
+ * Returns drag-source / drag-preview connector adapters and `isDragging`,
+ * matching the v2 prop shape.
+ */ export function useQuizEntryDragSource(props) {
+    var _useDrag = _sliced_to_array(useDrag(function() {
+        return {
+            type: ItemTypes.QUIZ_ENTRY,
+            item: function() {
+                return beginQuizEntryDrag(props);
+            },
+            end: function() {
+                return endQuizEntryDrag(props);
+            },
+            collect: function(monitor) {
+                return {
+                    isDragging: monitor.isDragging()
+                };
+            }
+        };
+    }, [
+        props
+    ]), 3), isDragging = _useDrag[0].isDragging, dragConnector = _useDrag[1], dragPreviewConnector = _useDrag[2];
+    var connectDragSource = makeConnector(dragConnector);
+    var connectDragPreview = makeConnector(dragPreviewConnector);
+    return {
+        connectDragSource: connectDragSource,
+        connectDragPreview: connectDragPreview,
+        isDragging: isDragging,
+        dragConnector: dragConnector,
+        dragPreviewConnector: dragPreviewConnector
+    };
+}
+// Builds a v2-shaped connect function from a raw v16 connector.
+// The v2 API was dual-purpose: callers either passed a JSX element to wrap,
+// or used the function directly as a React `ref={connectXxx}` callback.
+// This adapter handles both:
+//   - JSX element argument (has `$$typeof`) → cloneElement with composed ref
+//   - DOM node or null (ref-callback shape)  → forward straight to the connector
+function makeConnector(connector) {
+    return function connect(elementOrNode) {
+        if (elementOrNode && elementOrNode.$$typeof) {
+            return connectViaRef(elementOrNode, connector);
         }
+        connector(elementOrNode);
+        return undefined;
     };
-};
-// - ItemTypes.QUIZ_ENTRY associates this component drop target with a name
-// - dropTarget specifies functions React DnD will call for events with this component
-// - collectDrop injects props into component
-export var DropTargetCreator = function(refname) {
-    return DropTarget(ItemTypes.QUIZ_ENTRY, dropTarget(refname), collectDrop);
-};
+}
+function connectViaRef(element, connector) {
+    var existingRef = element.ref;
+    var composedRef = function(node) {
+        connector(node);
+        if (typeof existingRef === 'function') {
+            existingRef(node);
+        } else if (existingRef && (typeof existingRef === "undefined" ? "undefined" : _type_of(existingRef)) === 'object') {
+            existingRef.current = node;
+        }
+    };
+    return /*#__PURE__*/ React.cloneElement(element, {
+        ref: composedRef
+    });
+}
 // ///////////////// //
 // DRAG SOURCE STUFF //
 // ///////////////// //
@@ -299,14 +429,3 @@ export function endQuizEntryDrag(props, monitor, component) {
         position: -1
     });
 }
-export var dragSource = {
-    beginDrag: beginQuizEntryDrag,
-    endDrag: endQuizEntryDrag
-};
-export function collectDrag(connect, monitor) {
-    return {
-        connectDragSource: connect.dragSource(),
-        connectDragPreview: connect.dragPreview(),
-        isDragging: monitor.isDragging()
-    };
-}

package/lib/common/components/shared/file_selector/FileSelector.js

@@ -97,7 +97,7 @@ import Dropzone from 'react-dropzone';
 import { jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { withStyleOverrides } from '@instructure/quiz-common';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 export var FileSelector = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(FileSelector, Component);

package/lib/common/components/shared/functionality/componentWithOutsideClick.js

@@ -96,7 +96,7 @@ function _is_native_reflect_construct() {
 }
 import ReactDOM from 'react-dom';
 import debounce from 'lodash/debounce';
-import reduxStore from '../../../../reduxStore';
+import { getOutsideClickStore } from './outsideClickStore';
 // ======================================================
 // this component extends another component and will run
 // the 'clickedOutside' function defined on that component
@@ -109,11 +109,12 @@ var wrapWithOutsideClick = function(ComposedComponent) {
     var wrappedWithOutsideClick = /*#__PURE__*/ function(ComposedComponent) {
         "use strict";
         _inherits(wrappedWithOutsideClick, ComposedComponent);
-        function wrappedWithOutsideClick(props) {
+        function wrappedWithOutsideClick(props, context) {
             _class_call_check(this, wrappedWithOutsideClick);
             var _this;
             _this = _call_super(this, wrappedWithOutsideClick, [
-                props
+                props,
+                context
             ]);
             _this.checkForOutsideClick = _this.checkForOutsideClick.bind(_this);
             return _this;
@@ -140,16 +141,14 @@ var wrapWithOutsideClick = function(ComposedComponent) {
             {
                 key: "checkForOutsideClick",
                 value: function checkForOutsideClick(e) {
-                    var isModalOpen = reduxStore.getAppState().getIn([
-                        'modal',
-                        'isOpen'
-                    ]);
+                    var store = getOutsideClickStore();
+                    var isModalOpen = store ? store.getState().modal.get('isOpen') : false;
                     if (_get(_get_prototype_of(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this) && _get(_get_prototype_of(wrappedWithOutsideClick.prototype), "ignoreClickOutsideIf", this).call(this, e) || isModalOpen) {
                         return;
                     }
                     if (_get(_get_prototype_of(wrappedWithOutsideClick.prototype), "clickedOutside", this)) {
                         var domNode = ReactDOM.findDOMNode(this);
-                        if (!(domNode && domNode.contains(e.target))) {
+                        if (domNode && e.target && !domNode.contains(e.target)) {
                             _get(_get_prototype_of(wrappedWithOutsideClick.prototype), "clickedOutside", this).call(this, e);
                         }
                     }

package/lib/common/components/shared/functionality/componentWithOutsideClickEmotion.js

@@ -101,8 +101,8 @@ function _is_native_reflect_construct() {
 }
 import ReactDOM from 'react-dom';
 import debounce from 'lodash/debounce';
-import reduxStore from '../../../../reduxStore';
 import React from 'react';
+import { getOutsideClickStore } from './outsideClickStore';
 // ======================================================
 // this component extends another component and will run
 // the 'clickedOutside' function defined on that component
@@ -112,7 +112,7 @@ import React from 'react';
 // the clickedOutside callback
 // ======================================================
 var wrapWithOutsideClickEmotion = function(ComposedComponent) {
-    return /*#__PURE__*/ function(_React_Component) {
+    var wrappedWithOutsideClick = /*#__PURE__*/ function(_React_Component) {
         "use strict";
         _inherits(wrappedWithOutsideClick, _React_Component);
         function wrappedWithOutsideClick(props) {
@@ -150,16 +150,14 @@ var wrapWithOutsideClickEmotion = function(ComposedComponent) {
             {
                 key: "checkForOutsideClick",
                 value: function checkForOutsideClick(e) {
-                    var isModalOpen = reduxStore.getAppState().getIn([
-                        'modal',
-                        'isOpen'
-                    ]);
+                    var store = getOutsideClickStore();
+                    var isModalOpen = store ? store.getState().modal.get('isOpen') : false;
                     if (this.checkcomponentRef() && this.composedComponentRef.current.ignoreClickOutsideIf && this.composedComponentRef.current.ignoreClickOutsideIf(e) || isModalOpen) {
                         return;
                     }
                     if (this.checkcomponentRef() && this.composedComponentRef.current.clickedOutside) {
                         var domNode = ReactDOM.findDOMNode(this);
-                        if (!(domNode && domNode.contains(e.target))) {
+                        if (domNode && e.target && !domNode.contains(e.target)) {
                             this.composedComponentRef.current.clickedOutside(e);
                         }
                     }
@@ -177,5 +175,6 @@ var wrapWithOutsideClickEmotion = function(ComposedComponent) {
         ]);
         return wrappedWithOutsideClick;
     }(React.Component);
+    return wrappedWithOutsideClick;
 };
 export default wrapWithOutsideClickEmotion;

package/lib/common/components/shared/functionality/makeEditable.js

@@ -1,96 +1,36 @@
-function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-}
-function _call_super(_this, derived, args) {
-    derived = _get_prototype_of(derived);
-    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
-}
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
-}
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
-    }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-        constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
         }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
-}
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
     }
-    return _assert_this_initialized(self);
+    return target;
 }
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
-}
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
-}
-function _is_native_reflect_construct() {
-    try {
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
 }
-import React, { Component } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { fromJS } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import extend from 'lodash/extend';
 import uniqueId from 'lodash/uniqueId';
-import omit from 'lodash/omit';
 import { bindActionCreators } from 'redux';
 import { connect } from '../../../react-redux';
 import * as editingActionCreators from '../../../actions/editing';
@@ -108,70 +48,48 @@ var connectToEditStore = function(ComposedComponent) {
     };
     var mapStateToProps = function(state) {
         return {
-            editing: state.get('editing')
+            editing: state.editing
         };
     };
     return connect(mapStateToProps, mapDispatchToProps)(ComposedComponent);
 };
 var giveEditProps = function(ComposedComponent) {
-    var _class = /*#__PURE__*/ function(Component) {
-        "use strict";
-        _inherits(_class, Component);
-        function _class() {
-            _class_call_check(this, _class);
-            var _this;
-            _this = _call_super(this, _class, arguments), _define_property(_this, "switchOnEditing", function() {
-                var initialFocusId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
-                _this.props.editingActions.startEdit(_this.uniqueId(), initialFocusId);
-            }), _define_property(_this, "switchOffEditing", function() {
-                _this.props.editingActions.endEdit(_this.uniqueId());
-            }), _define_property(_this, "toggleEditing", function() {
-                _this.props.editingActions.toggleEditing(_this.uniqueId());
-            });
-            return _this;
-        }
-        _create_class(_class, [
-            {
-                key: "UNSAFE_componentWillMount",
-                value: function UNSAFE_componentWillMount() {
-                    this._uniqId = uniqueId("".concat(ComposedComponent.displayName, "_"));
-                }
-            },
-            {
-                key: "uniqueId",
-                value: function uniqueId() {
-                    return this.props.guid || this._uniqId;
-                }
-            },
-            {
-                key: "propsForChild",
-                value: function propsForChild() {
-                    var uniqueId = this.uniqueId();
-                    var editingProps = {
-                        isEditing: !!this.props.editing.get(uniqueId),
-                        editingKey: uniqueId,
-                        switchOnEditing: this.switchOnEditing,
-                        switchOffEditing: this.switchOffEditing,
-                        toggleEditing: this.toggleEditing
-                    };
-                    // Don't inject the `editing` prop in, or else all editable
-                    // components will have to rerender when one switches editing
-                    // on/off.
-                    return omit(extend({}, editingProps, this.props), [
-                        'editing'
-                    ]);
-                }
-            },
-            {
-                key: "render",
-                value: function render() {
-                    return /*#__PURE__*/ React.createElement(ComposedComponent, this.propsForChild());
-                }
-            }
+    function EditableComponent(props) {
+        var editing = props.editing, restProps = _object_without_properties(props, [
+            "editing"
         ]);
-        return _class;
-    }(Component);
-    _define_property(_class, "propTypes", {
+        // Generate unique ID once on mount using useRef
+        var uniqIdRef = useRef(uniqueId("".concat(ComposedComponent.displayName, "_")));
+        function getUniqueId() {
+            return restProps.guid || uniqIdRef.current;
+        }
+        function switchOnEditing() {
+            var initialFocusId = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : null;
+            restProps.editingActions.startEdit(getUniqueId(), initialFocusId);
+        }
+        function switchOffEditing() {
+            restProps.editingActions.endEdit(getUniqueId());
+        }
+        function toggleEditing() {
+            restProps.editingActions.toggleEditing(getUniqueId());
+        }
+        function propsForChild() {
+            var uniqueIdValue = getUniqueId();
+            var editingProps = {
+                isEditing: !!editing.get(uniqueIdValue),
+                editingKey: uniqueIdValue,
+                switchOnEditing: switchOnEditing,
+                switchOffEditing: switchOffEditing,
+                toggleEditing: toggleEditing
+            };
+            // Don't inject the `editing` prop in, or else all editable
+            // components will have to rerender when one switches editing
+            // on/off.
+            return extend({}, editingProps, restProps);
+        }
+        return /*#__PURE__*/ React.createElement(ComposedComponent, propsForChild());
+    }
+    EditableComponent.propTypes = {
         editing: ImmutablePropTypes.map,
         editingActions: PropTypes.shape({
             startEdit: PropTypes.func.isRequired,
@@ -179,13 +97,13 @@ var giveEditProps = function(ComposedComponent) {
             toggleEditing: PropTypes.func.isRequired
         }).isRequired,
         guid: PropTypes.string
-    });
-    _define_property(_class, "displayName", ComposedComponent.displayName);
-    _define_property(_class, "defaultProps", {
+    };
+    EditableComponent.displayName = ComposedComponent.displayName;
+    EditableComponent.defaultProps = {
         editing: fromJS({}),
         guid: null
-    });
-    return _class;
+    };
+    return EditableComponent;
 };
 export var makeEditable = function(givenComponent) {
     return connectToEditStore(giveEditProps(givenComponent));

package/lib/common/components/shared/functionality/makeScrollable.js

@@ -163,18 +163,12 @@ var connectToScrollingStore = function(ComposedComponent) {
     var mapStateToProps = function(state) {
         // TODO: change the name in state
         return {
-            scrolledComponentKey: state.getIn([
-                'scrolling',
-                'scrolledComponentKey'
-            ]),
-            scrollingFocus: state.getIn([
-                'scrolling',
-                'scrollingFocus'
-            ])
+            scrolledComponentKey: state.scrolling.get('scrolledComponentKey'),
+            scrollingFocus: state.scrolling.get('scrollingFocus')
         };
     };
     return connect(mapStateToProps, mapDispatchToProps, null, {
-        withRef: true
+        forwardRef: true
     })(ComposedComponent);
 };
 var unconnectedMakeScrollable = function(ComposedComponent) {
@@ -221,7 +215,10 @@ var unconnectedMakeScrollable = function(ComposedComponent) {
                 value: function scrollIntoView() {
                     var scrollingFocus = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
                     var node = ReactDOM.findDOMNode(this);
-                    node.scrollIntoView();
+                    node.scrollIntoView({
+                        block: 'nearest',
+                        inline: 'nearest'
+                    });
                     if (scrollingFocus) node.focus(); // Focus on the item once scrolled into view
                 }
             },

package/lib/common/components/shared/functionality/outsideClickStore.js

@@ -0,0 +1,7 @@
+var _store = null;
+export function setOutsideClickStore(store) {
+    _store = store;
+}
+export function getOutsideClickStore() {
+    return _store;
+}

package/lib/common/components/shared/overlay/index.js

@@ -98,7 +98,8 @@ import PropTypes from 'prop-types';
  */ import { jsx, Global } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
-import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { END_EDITING_TRIGGER_CLASSNAME } from '@instructure/quiz-common/constants';
+import { withStyleOverrides } from '@instructure/quiz-common/util/withStyleOverrides';
 var Overlay = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Overlay, Component);