@instructure/outcomes-ui 2.1.0 → 2.1.3

package/es/translated/nb/components/OutcomeView/MasteryDescription/index.js

@@ -29,16 +29,16 @@ var styles = {
 var scoringText = function scoringText(scoringMethod) {
   switch (scoringMethod.algorithm) {
     case 'decaying_average':
-      return "Mestring beregnet etter gjennomsnittskarakter vektet etter siste resultater De seneste resultatene teller som " + _percent_nb_number(scoringMethod.algorithm_data.decaying_average_percent) + " av mestringsgrad, gjennomsnittet av alle andre resultater teller som " + _percent_nb_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " av mestringsgraden. Dersom det er kun ett resultat, vil det enkelte resultatet bli returnert.";
+      return "Mestring beregnet etter gjennomsnittsvurdering vektet etter siste resultater De seneste resultatene teller som " + _percent_nb_number(scoringMethod.algorithm_data.decaying_average_percent) + " av mestringsgrad, gjennomsnittet av alle andre resultater teller som " + _percent_nb_number(1.0 - scoringMethod.algorithm_data.decaying_average_percent) + " av mestringsgraden. Dersom det er kun ett resultat, vil det enkelte resultatet bli returnert.";
 
     case 'n_mastery':
       return "Mestring beregnet etter n antall ganger. M\xE5 oppn\xE5 mestring minst " + _default_nb_number(scoringMethod.algorithm_data.n_mastery_count) + " ganger.  Poengsummer over mestringsniv\xE5 blir jevnet med snittet for \xE5 beregne sluttresultatet.";
 
     case 'highest':
-      return "Mestring beregnet etter h\xF8yest poengsum. Mestringsresultat viser den h\xF8yeste poengsummen for en karaktersatt vurdering.";
+      return "Mestring beregnet etter h\xF8yest poengsum. Mestringsresultat viser den h\xF8yeste poengsummen for en vurdert vurdering.";
 
     case 'latest':
-      return "Mestring beregnet etter nyligste poengsum. Mestringsresultat viser vurderingen som er karaktersatt sist.";
+      return "Mestring beregnet etter nyligste poengsum. Mestringsresultat viser vurderingen som er vurdert sist.";
 
     default:
       return '';

package/es/translated/nb/components/OutcomeView/index.js

@@ -99,7 +99,7 @@ var OutcomeView = (_dec = themeable(theme, styles), _dec(_class = (_temp = _clas
         "data-automation": "outcomeView__friendly_description_header"
       }, /*#__PURE__*/React.createElement(Text, {
         weight: "bold"
-      }, "Friendly Description")), /*#__PURE__*/React.createElement(View, {
+      }, "Vennlig beskrivelse")), /*#__PURE__*/React.createElement(View, {
         as: "div",
         margin: "0 small 0 0",
         padding: "0 small small small",

package/es/translated/nb/components/SearchResults/__tests__/index.test.js

@@ -33,7 +33,7 @@ describe('SearchResults', function () {
     });
     expect(wrapper.find('Spinner')).to.have.length(1);
   });
-  it('passes correct params to OutcomeCheckbox components', function () {
+  it('passes correct params to AlignmentItem components', function () {
     var props = makeProps();
     props.isSearchLoading = false;
     props.searchEntries = [{
@@ -44,7 +44,7 @@ describe('SearchResults', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(SearchResults, props), {
       disableLifecycleMethods: true
     });
-    var checkbox = wrapper.find('OutcomeCheckbox');
+    var checkbox = wrapper.find('AlignmentItem');
     expect(checkbox).to.have.length(1);
     expect(checkbox.prop('outcome')).to.eql({
       id: '2',

package/es/translated/nb/components/SearchResults/index.js

@@ -11,6 +11,7 @@ import { View } from '@instructure/ui-view';
 import { Spinner } from '@instructure/ui-spinner';
 import isEqual from 'lodash/isEqual';
 import OutcomeCheckbox from "../OutcomeCheckbox/index.js";
+import AlignmentItem from "../AlignmentItem/index.js";
 import Pagination from "../Pagination/index.js";
 export var RESULTS_PER_PAGE = 10;
 
@@ -51,6 +52,7 @@ var SearchResults = /*#__PURE__*/function (_React$Component) {
       var _this$props2 = this.props,
           setFocusedOutcome = _this$props2.setFocusedOutcome,
           isOutcomeSelected = _this$props2.isOutcomeSelected,
+          isPicker = _this$props2.isPicker,
           selectOutcomeIds = _this$props2.selectOutcomeIds,
           deselectOutcomeIds = _this$props2.deselectOutcomeIds,
           searchEntries = _this$props2.searchEntries;
@@ -58,12 +60,18 @@ var SearchResults = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.createElement("div", {
           key: outcome.id,
           "data-automation": "searchResults__outcomeResult"
-        }, /*#__PURE__*/React.createElement(OutcomeCheckbox, {
+        }, isPicker ? /*#__PURE__*/React.createElement(OutcomeCheckbox, {
           outcome: outcome,
           setFocusedOutcome: setFocusedOutcome,
           isOutcomeSelected: isOutcomeSelected,
           selectOutcomeIds: selectOutcomeIds,
           deselectOutcomeIds: deselectOutcomeIds
+        }) : /*#__PURE__*/React.createElement(AlignmentItem, {
+          outcome: outcome,
+          isOutcomeSelected: isOutcomeSelected,
+          selectOutcomeIds: selectOutcomeIds,
+          deselectOutcomeIds: deselectOutcomeIds,
+          isTray: true
         }));
       });
     }
@@ -149,14 +157,17 @@ SearchResults.propTypes = {
   searchPage: PropTypes.number.isRequired,
   searchTotal: PropTypes.number,
   updateSearchPage: PropTypes.func.isRequired,
-  setFocusedOutcome: PropTypes.func.isRequired,
+  setFocusedOutcome: PropTypes.func,
   isOutcomeSelected: PropTypes.func.isRequired,
   selectOutcomeIds: PropTypes.func.isRequired,
   deselectOutcomeIds: PropTypes.func.isRequired,
-  screenreaderNotification: PropTypes.func
+  screenreaderNotification: PropTypes.func,
+  isPicker: PropTypes.bool
 };
 SearchResults.defaultProps = {
+  setFocusedOutcome: function setFocusedOutcome() {},
   screenreaderNotification: null,
-  searchTotal: null
+  searchTotal: null,
+  isPicker: false
 };
 export default SearchResults;

package/es/translated/nb/services/OutcomesService.js

@@ -64,9 +64,11 @@ var OutcomesService = /*#__PURE__*/function () {
       if (contextUuid) {
         params += "&".concat(queryString.stringify({
           context_uuid: contextUuid
-        }), "&includes[]=friendly_description");
+        }));
       }
 
+      params += '&includes[]=friendly_description';
+
       if (roots) {
         params += "&".concat(queryString.stringify({
           roots: roots
@@ -82,7 +84,14 @@ var OutcomesService = /*#__PURE__*/function () {
   }, {
     key: "getOutcome",
     value: function getOutcome(host, jwt, id, contextUuid) {
-      var params = "?includes[]=friendly_description&context_uuid=".concat(contextUuid);
+      var params = '?includes[]=friendly_description';
+
+      if (contextUuid) {
+        params += "&".concat(queryString.stringify({
+          context_uuid: contextUuid
+        }));
+      }
+
       return this.get(host, jwt, "/api/outcomes/".concat(id).concat(params)).then(checkResponse).then(toJson).then(function (json) {
         return json;
       });

package/es/translated/nb/services/__tests__/OutcomesService.test.js

@@ -36,7 +36,7 @@ describe('OutcomesService', function () {
           }]
         }
       };
-      mockGet('/api/outcomes/tree?excludes[]=scoring_method&depth=2', serverResponse);
+      mockGet('/api/outcomes/tree?excludes[]=scoring_method&depth=2&includes[]=friendly_description', serverResponse);
       return subject.loadOutcomes(host, jwt).then(function (result) {
         expect(result).to.deep.equal(serverResponse.outcome_tree);
       });
@@ -48,6 +48,13 @@ describe('OutcomesService', function () {
       }, []);
       return subject.loadOutcomes(host, jwt, 'alphabeta');
     });
+    it('adds includes friendly description with blank context', function () {
+      fetchMock.getOnce(function (url, opts) {
+        expect(url).to.match(/\/outcomes\/tree\?excludes\[\]=scoring_method&depth=2&includes\[\]=friendly_description$/);
+        return true;
+      }, []);
+      return subject.loadOutcomes(host, jwt, '');
+    });
     it('supports specifying roots', function () {
       fetchMock.getOnce(function (url, opts) {
         expect(url).to.match(/roots\[\]=4&roots\[\]=5/);
@@ -56,7 +63,7 @@ describe('OutcomesService', function () {
       return subject.loadOutcomes(host, jwt, 'alphabeta', [4, 5]);
     });
     it('rejects on error', function () {
-      mockGet('/api/outcomes/tree?excludes[]=scoring_method&depth=2', 500);
+      mockGet('/api/outcomes/tree?excludes[]=scoring_method&depth=2&includes[]=friendly_description', 500);
       return subject.loadOutcomes(host, jwt).catch(function (err) {
         expect(err).to.have.property('status', 500);
       });
@@ -70,6 +77,13 @@ describe('OutcomesService', function () {
       }, []);
       return subject.getOutcome(host, jwt, '1', 'alphabeta');
     });
+    it('uses correct query with blank context', function () {
+      fetchMock.getOnce(function (url, opts) {
+        expect(url).to.match(/\/outcomes\/1\?includes\[\]=friendly_description$/);
+        return true;
+      }, []);
+      return subject.getOutcome(host, jwt, '1', '');
+    });
     it('resolves with json on success', function () {
       var outcome = {
         id: 1,

package/es/translated/nb/store/OutcomePicker/__tests__/actions.test.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _arguments = arguments;
 
 /* eslint-disable promise/always-return */
 import { expect } from 'chai';
@@ -188,7 +187,7 @@ describe('OutcomePicker/actions', function () {
     });
     it('fires an updateCallback function if provided', function () {
       var store = createMockStore(state);
-      var callback = sinon.stub().returns(_arguments);
+      var callback = sinon.stub();
       return store.dispatch(actions.saveOutcomePickerAlignments(callback)).then(function () {
         expect(callback.calledOnce).to.be.true;
         expect(callback.calledWith({

package/es/translated/nb/store/alignments/__tests__/actions.test.js

@@ -1,5 +1,4 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _arguments = arguments;
 import { Map, fromJS } from 'immutable';
 import { expect } from 'chai';
 import sinon from 'sinon';
@@ -114,7 +113,7 @@ describe('alignments/actions', function () {
       }, {
         id: '2'
       }];
-      var callback = sinon.stub().returns(_arguments);
+      var callback = sinon.stub();
       var service = {
         getAlignments: sinon.stub().returns(Promise.resolve(alignments))
       };

package/es/translated/nb/store/context/selectors.js

@@ -76,7 +76,7 @@ export var getCollectionData = createSelector(getContextOutcomes, function (outc
   for (var _i = 0, _Object$keys = Object.keys(outcomes); _i < _Object$keys.length; _i++) {
     var id = _Object$keys[_i];
 
-    // eslint-disable-line no-restricted-syntax
+    // eslint-disable-line no-unused-vars
     if (!isCollectionId(outcomes, id)) {
       continue; // eslint-disable-line no-continue
     }

package/es/translated/nb/util/proficienciesUtils.js

@@ -47,13 +47,13 @@ export var getScoringMethodFromContext = function getScoringMethodFromContext(co
 var translateDefaultRatingDescriptions = function translateDefaultRatingDescriptions(description) {
   switch (description) {
     case 'DEFAULT_EXCEEDS_MASTERY':
-      return "Overg\xE5r ekspertise";
+      return "Overg\xE5r mestring";
 
     case 'DEFAULT_MASTERY':
       return "Mestring";
 
     case 'DEFAULT_NEAR_MASTERY':
-      return "N\xE6r ekspertise";
+      return "N\xE6r mestring";
 
     case 'DEFAULT_BELOW_MASTERY':
       return "Under mestring";

package/es/translated/nb-x-k12/components/AlignmentButton/__tests__/index.test.js

@@ -39,20 +39,20 @@ describe('AlignmentButton', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Button')).to.have.length(1);
+    expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
     expect(wrapper.find('AccessibleContent')).to.have.length(1);
   });
-  it('does not render an alignment button if readOnly is true', function () {
+  it('does not render an alignment button if canManageOutcomes is false', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
-      readOnly: true
+      canManageOutcomes: false
     })), {
       disableLifecycleMethods: true
     });
-    expect(wrapper.find('Button')).to.have.length(0);
+    expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(0);
   });
-  it('does not render header if readOnly is true and no outcomes are aligned', function () {
+  it('does not render header if canManageOutcomes is false and no outcomes are aligned', function () {
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
-      readOnly: true,
+      canManageOutcomes: false,
       alignedOutcomes: []
     })), {
       disableLifecycleMethods: true
@@ -61,16 +61,45 @@ describe('AlignmentButton', function () {
     expect(wrapper.find('IconOutcomesLine')).to.have.length(0);
     expect(wrapper.find('AlignmentCount')).to.have.length(0);
   });
+  it('disables the expansion toggle button if no outcomes are aligned', function () {
+    var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, makeProps({
+      alignedOutcomes: []
+    })), {
+      disableLifecycleMethods: true
+    });
+    var buttonStyle = wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').props('style');
+    expect(buttonStyle.interaction).to.equal('disabled');
+  });
+  it('renders the alignment list collapsed by default', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
+    expect(wrapper.find('AlignmentItem')).to.have.length(0);
+  });
+  it('expansion toggle click is correctly handled', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
+    expect(wrapper.find('AlignmentItem')).to.have.length(3);
+    expect(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Collapse the list of aligned Outcomes');
+    expect(wrapper.find('IconArrowOpenDownLine')).to.have.length(1);
+  });
+  it('collapse toggle button click is correctly handled', function () {
+    var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
+    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
+    expect(wrapper.find('AlignmentItem')).to.have.length(0);
+    expect(wrapper.find('ScreenReaderContent').at(0).text()).to.eq('Expand the list of aligned Outcomes');
+    expect(wrapper.find('IconArrowOpenEndLine')).to.have.length(1);
+  });
   it('calls openOutcomePicker when the button is pressed', function () {
     var props = makeProps();
     var wrapper = shallow( /*#__PURE__*/React.createElement(AlignmentButton, props), {
       disableLifecycleMethods: true
     });
-    wrapper.find('Button').simulate('click');
+    wrapper.find('Button[data-automation="alignmentButton__button"]').simulate('click');
     expect(props.openOutcomePicker.calledOnce).to.be.true;
   });
   it('renders AlignmentItems for each aligned outcome', function () {
     var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
+    wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
     expect(wrapper.find('AlignmentItem')).to.have.length(3);
   });
   it('renders an AlignmentCount object', function () {
@@ -84,6 +113,7 @@ describe('AlignmentButton', function () {
     it('calls the removeAlignment action with shouldUpdateArtifact equal to true', function () {
       var props = makeProps();
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, props));
+      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
       var remove = first.prop('removeAlignment');
       var outcome = first.prop('outcome');
@@ -92,23 +122,19 @@ describe('AlignmentButton', function () {
     });
     it('focuses on the previous alignment when the second alignment deleted', function () {
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
-      var first = wrapper.find('AlignmentItem').at(0);
+      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var next = wrapper.find('AlignmentItem').at(1);
-      var focus = sinon.spy(first.instance(), 'focus');
       var remove = next.prop('removeAlignment');
       remove();
-      expect(focus.calledOnce).to.be.true;
-      expect(focus.calledWith()).to.be.true;
+      expect(wrapper.state().focusedItem).to.eq(0);
     });
     it('focuses on the next alignment when first alignment deleted', function () {
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps()));
+      wrapper.find('IconButton[data-automation="alignmentButton__collapseButton"]').simulate('click');
       var first = wrapper.find('AlignmentItem').at(0);
-      var next = wrapper.find('AlignmentItem').at(1);
       var remove = first.prop('removeAlignment');
-      var focus = sinon.spy(next.instance(), 'focus');
       remove();
-      expect(focus.calledOnce).to.be.true;
-      expect(focus.calledWith()).to.be.true;
+      expect(wrapper.state().focusedItem).to.eq(1);
     });
   });
   describe('componentDidUpdate', function () {
@@ -121,12 +147,12 @@ describe('AlignmentButton', function () {
         }]
       };
       var wrapper = mount( /*#__PURE__*/React.createElement(AlignmentButton, makeProps(outcomes)));
-      var trigger = wrapper.find('button').last();
+      var trigger = wrapper.find('Button[data-automation="alignmentButton__button"]').last();
       var focus = sinon.spy(trigger.instance(), 'focus');
       wrapper.setProps({
         alignedOutcomes: []
       }, function () {
-        expect(wrapper.find('button')).to.have.length(1);
+        expect(wrapper.find('Button[data-automation="alignmentButton__button"]')).to.have.length(1);
         expect(focus.calledOnce).to.be.true;
         expect(focus.calledWith()).to.be.true;
         done();

package/es/translated/nb-x-k12/components/AlignmentButton/index.js

@@ -8,13 +8,13 @@ var _dec, _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
-import { Button } from '@instructure/ui-buttons';
+import { Button, IconButton } from '@instructure/ui-buttons';
 import { Text } from '@instructure/ui-text';
-import { IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
+import { IconArrowOpenEndLine, IconArrowOpenDownLine, IconOutcomesLine, IconPlusLine } from '@instructure/ui-icons';
 import { List } from '@instructure/ui-list';
 import { themeable } from '@instructure/ui-themeable';
 import OutcomePickerModal from "../OutcomePickerModal/index.js";
-import AlignmentItem from "./AlignmentItem/index.js";
+import AlignmentItem from "../AlignmentItem/index.js";
 import AlignmentCount from "../AlignmentCount/index.js";
 import { outcomeShape } from "../../store/shapes.js";
 import theme from "../theme.js";
@@ -32,31 +32,62 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
 
   var _super = _createSuper(AlignmentButton);
 
-  function AlignmentButton() {
+  function AlignmentButton(props) {
     var _this;
 
     _classCallCheck(this, AlignmentButton);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+    _this = _super.call(this, props);
 
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this.toggleAlignmentList = function () {
+      _this.setState(function (prevState) {
+        return {
+          renderCollapsed: !prevState.renderCollapsed
+        };
+      });
+    };
 
     _this.renderHeader = function () {
       var _this$props = _this.props,
-          readOnly = _this$props.readOnly,
+          canManageOutcomes = _this$props.canManageOutcomes,
           alignedOutcomes = _this$props.alignedOutcomes;
+      var renderCollapsed = _this.state.renderCollapsed;
+      var enableToggleAction = alignedOutcomes.length > 0;
 
-      if (!readOnly || alignedOutcomes.length) {
+      if (!enableToggleAction) {
+        _this.setState({
+          renderCollapsed: true
+        });
+      }
+
+      if (canManageOutcomes || alignedOutcomes.length) {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.line,
-          "data-automation": "outcomeLabel__alignedOutcomes"
+          "data-automation": "outcomeLabel__alignedOutcomes",
+          style: {
+            'align-items': 'center'
+          }
         }, /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
-        }, /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
+        }, /*#__PURE__*/React.createElement("span", {
+          style: {
+            'padding-right': '0.5em'
+          }
+        }, /*#__PURE__*/React.createElement(IconButton, {
+          size: "small",
+          screenReaderLabel: renderCollapsed ? "Expand the list of aligned Outcomes" : "Collapse the list of aligned Outcomes",
+          withBackground: false,
+          withBorder: false,
+          interaction: enableToggleAction ? 'enabled' : 'disabled',
+          onClick: _this.toggleAlignmentList,
+          "data-automation": "alignmentButton__collapseButton"
+        }, renderCollapsed ? /*#__PURE__*/React.createElement(IconArrowOpenEndLine, {
+          "data-testid": "icon-arrow-right"
+        }) : /*#__PURE__*/React.createElement(IconArrowOpenDownLine, {
+          "data-testid": "icon-arrow-down"
+        }))), /*#__PURE__*/React.createElement(IconOutcomesLine, null))), /*#__PURE__*/React.createElement(Text, {
           size: "medium"
         }, /*#__PURE__*/React.createElement("div", {
           className: styles.spacing
@@ -67,28 +98,33 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     };
 
     _this.renderAlignmentList = function () {
+      if (_this.state.renderCollapsed) {
+        return;
+      }
+
       var _this$props2 = _this.props,
           alignedOutcomes = _this$props2.alignedOutcomes,
-          readOnly = _this$props2.readOnly;
+          canManageOutcomes = _this$props2.canManageOutcomes;
       return /*#__PURE__*/React.createElement(List, {
         isUnstyled: true,
         margin: "small 0",
         delimiter: "solid"
-      }, alignedOutcomes.map(function (outcome, index) {
+      }, alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+        key: "delimiter-0"
+      }), alignedOutcomes.map(function (outcome, index) {
         return /*#__PURE__*/React.createElement(List.Item, {
-          margin: "small 0",
+          padding: "0 small 0 medium",
           key: outcome.id
         }, /*#__PURE__*/React.createElement(AlignmentItem, {
           removeAlignment: function removeAlignment() {
             return _this.handleRemoveAlignment(outcome, index);
           },
-          ref: function ref(o) {
-            _this["position".concat(index)] = o;
-          } // eslint-disable-line immutable/no-mutation
-          ,
           outcome: outcome,
-          readOnly: readOnly
+          canManageOutcomes: canManageOutcomes,
+          shouldFocus: index === _this.state.focusedItem
         }));
+      }), alignedOutcomes.length > 0 && /*#__PURE__*/React.createElement(List.Item, {
+        key: "delimiter-1"
       }));
     };
 
@@ -110,9 +146,9 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
     _this.renderButton = function () {
       var _this$props4 = _this.props,
           openOutcomePicker = _this$props4.openOutcomePicker,
-          readOnly = _this$props4.readOnly;
+          canManageOutcomes = _this$props4.canManageOutcomes;
 
-      if (!readOnly) {
+      if (canManageOutcomes) {
         return /*#__PURE__*/React.createElement("div", {
           className: styles.button
         }, /*#__PURE__*/React.createElement(Button, {
@@ -124,11 +160,15 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           onClick: openOutcomePicker,
           "data-automation": "alignmentButton__button"
         }, /*#__PURE__*/React.createElement(AccessibleContent, {
-          alt: "Juster m\xE5l"
+          alt: "Knytt m\xE5l"
         }, "M\xE5l")));
       }
     };
 
+    _this.state = {
+      renderCollapsed: true,
+      focusedItem: null
+    };
     return _this;
   }
 
@@ -152,15 +192,19 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
           alignedOutcomes = _this$props5.alignedOutcomes;
       removeAlignment(removedOutcome.id, onUpdate, true);
       this.props.screenreaderNotification(removedOutcome.label + " justering fjernet");
-      var priorListItem = this["position".concat(index - 1)];
+      var priorIndex = index - 1;
 
-      if (priorListItem) {
-        priorListItem.focus();
+      if (priorIndex >= 0) {
+        this.setState({
+          focusedItem: priorIndex
+        });
       } else if (alignedOutcomes.length > 0) {
-        var nextListItem = this["position".concat(index + 1)];
+        var nextIndex = index + 1;
 
-        if (nextListItem) {
-          nextListItem.focus();
+        if (nextIndex < alignedOutcomes.length) {
+          this.setState({
+            focusedItem: nextIndex
+          });
         }
       }
     }
@@ -183,13 +227,13 @@ var AlignmentButton = (_dec = themeable(theme, styles), _dec(_class = (_temp = _
   onUpdate: PropTypes.func,
   screenreaderNotification: PropTypes.func,
   liveRegion: OutcomePickerModal.propTypes.liveRegion,
-  readOnly: PropTypes.bool.isRequired
+  canManageOutcomes: PropTypes.bool.isRequired
 }, _class2.defaultProps = {
   alignedOutcomes: [],
   pickerProps: {},
   onUpdate: null,
   screenreaderNotification: null,
   liveRegion: null,
-  readOnly: false
+  canManageOutcomes: true
 }, _temp)) || _class);
 export { AlignmentButton as default };