ember-sortable 5.4.0 → 5.5.0

package/declarations/modifiers/sortable-group.d.ts

@@ -102,7 +102,7 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
      *
      * @param {Event} event a DOM event.
      */
-    focusOut(): void;
+    focusOut: () => void;
     /**
      * Explanation
      * 1. `KeyboardReorderMode` is disabled: users can activate it via ENTER or SPACE.
@@ -112,7 +112,7 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
      *
      * @param {Event} event a DOM event
      */
-    keyDown(event: KeyboardEvent): void;
+    keyDown: (event: KeyboardEvent) => void;
     /**
      * Checks if the given element is a child of a handle.
      *
@@ -150,7 +150,7 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
      * 3. Tears down the application container, so we are not focus locked within the application.
      * 4. Resets the current selected item.
      */
-    cancelKeyboardSelection(): void;
+    cancelKeyboardSelection: () => void;
     /**
      * Handles all th necessary operations needed for confirming the current keyboard selection.
      * 1. Disables keyboard reorder mode.
@@ -247,6 +247,10 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
      * @type {Element}
      */
     announcer: Element | null;
+    /**
+     * Pending timer that resets the announcer message
+     */
+    _announcerResetTimer?: ReturnType<typeof setTimeout>;
     /**
      Position for the first item.
      If spacing is present, first item's position will have to change as well.
@@ -263,50 +267,50 @@ export default class SortableGroupModifier<T> extends Modifier<SortableGroupModi
     /**
      * Enables keyboard navigation
      */
-    activateKeyDown(selectedItem: SortableItemModifier<T>): void;
+    activateKeyDown: (selectedItem: SortableItemModifier<T>) => void;
     /**
      * Disables keyboard navigation
      * Currently used to handle keydown events bubbling up from
      * elements that aren't meant to invoke keyboard navigation
      * by ignoring them.
      */
-    deactivateKeyDown(): void;
+    deactivateKeyDown: () => void;
     /**
      Register the group with this Sortable.
      @method registerGroup
      @param {SortableGroupModifier} group
      */
-    registerGroup(group: SortableGroupModifier<T>): void;
+    registerGroup: (group: SortableGroupModifier<T>) => void;
     /**
      De-register the group with this Sortable.
      @method deregisterGroup
      @param {SortableGroupModifier} group
      */
-    deregisterGroup(group: SortableGroupModifier<T>): void;
+    deregisterGroup: (group: SortableGroupModifier<T>) => void;
     /**
      Prepare for sorting.
      Main purpose is to stash the current firstItemPosition so
      we don’t incur expensive re-layouts.
      @method _prepare
      */
-    prepare(): void;
+    prepare: () => void;
     /**
      Update item positions (relatively to the first element position).
      @method update
      @param {SortableItemModifier[]} sortedItems
      */
-    update(sortedItems: SortableItemModifier<T>[]): void;
+    update: (sortedItems: SortableItemModifier<T>[]) => void;
     /**
      @method _commit
      */
-    commit(): void;
-    _onChange(itemModels: T[], draggedModel: T | undefined): void;
+    commit: () => void;
+    _onChange: (itemModels: T[], draggedModel: T | undefined) => void;
     /**
      * Keeps the UI in sync with actual changes.
      * Needed for drag and keyboard operations.
      */
     _updateItems(): void;
-    _createAnnouncer(): HTMLSpanElement;
+    _createAnnouncer: () => HTMLSpanElement;
     _calculateGridPosition(a: SortableItemModifier<T>, b: SortableItemModifier<T>, groupWidth: number): {
         ax: number;
         ay: number;

package/declarations/modifiers/sortable-item.d.ts

@@ -191,12 +191,12 @@ export default class SortableItemModifier<T> extends Modifier<SortableItemModifi
     /**
      @method mouseDown
      */
-    mouseDown(event: MouseEvent): void;
-    keyDown(event: Event): void;
+    mouseDown: (event: MouseEvent) => void;
+    keyDown: (event: Event) => void;
     /**
      @method touchStart
      */
-    touchStart(event: TouchEvent): void;
+    touchStart: (event: TouchEvent) => void;
     /**
      @method freeze
      */

package/dist/{_rollupPluginBabelHelpers-a7bede49.js → _rollupPluginBabelHelpers-060f9720.js}

@@ -22,15 +22,15 @@ function _initializerDefineProperty(e, i, r, l) {
     value: r.initializer ? r.initializer.call(l) : void 0
   });
 }
-function _toPrimitive(t, r) {
+function _toPrimitive(t, e) {
   if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
+  var r;
+  if ("undefined" != typeof Symbol && void 0 !== (r = t[Symbol.toPrimitive])) {
+    var i = r.call(t, e || "default");
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === r ? String : Number)(t);
+  return ("string" === e ? String : Number)(t);
 }
 function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
@@ -38,4 +38,4 @@ function _toPropertyKey(t) {
 }
 
 export { _applyDecoratedDescriptor as _, _defineProperty as a, _initializerDefineProperty as b };
-//# sourceMappingURL=_rollupPluginBabelHelpers-a7bede49.js.map
+//# sourceMappingURL=_rollupPluginBabelHelpers-060f9720.js.map

package/dist/_rollupPluginBabelHelpers-060f9720.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_rollupPluginBabelHelpers-060f9720.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/modifiers/sortable-group.js

@@ -1,15 +1,14 @@
-import { _ as _applyDecoratedDescriptor, a as _defineProperty, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-a7bede49.js';
+import { _ as _applyDecoratedDescriptor, a as _defineProperty, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-060f9720.js';
 import Modifier from 'ember-modifier';
-import { computed, action, set } from '@ember/object';
-import { isEnterKey, isSpaceKey, isDownArrowKey, isUpArrowKey, isLeftArrowKey, isRightArrowKey, isEscapeKey } from '../utils/keyboard.js';
+import { isDownArrowKey, isUpArrowKey, isLeftArrowKey, isRightArrowKey, isEnterKey, isSpaceKey, isEscapeKey } from '../utils/keyboard.js';
 import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant.js';
 import { getGap } from '../utils/css-calculation.js';
 import { defaultA11yAnnouncementConfig } from '../utils/defaults.js';
-import { scheduleOnce, later, schedule, next } from '@ember/runloop';
+import { scheduleOnce, schedule, next } from '@ember/runloop';
 import * as s from '@ember/service';
 import { isDestroyed, registerDestructor } from '@ember/destroyable';
 
-var _dec, _dec2, _class, _descriptor;
+var _dec, _class, _descriptor;
 const service = s.service ?? s.inject;
 
 // Tolerance for the grid direction's wrap check, absorbing residual
@@ -36,7 +35,7 @@ const NO_MODEL = {};
  *      {{/each}}
  *    </ol>
  */
-let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _dec2 = computed('direction', 'sortedItems'), _class = class SortableGroupModifier extends Modifier {
+let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _class = class SortableGroupModifier extends Modifier {
   /** End of keyboard utils */
 
   get disabled() {
@@ -89,52 +88,6 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
    *
    * @param {Event} event a DOM event.
    */
-  focusOut() {
-    if (!this.isRetainingFocus && !this._isElementWithinHandle(document.activeElement)) {
-      this.cancelKeyboardSelection();
-    }
-  }
-
-  /**
-   * Explanation
-   * 1. `KeyboardReorderMode` is disabled: users can activate it via ENTER or SPACE.
-   * 2. `KeyboardReorderMode` is enabled: users can reorder via UP or DOWN arrow keys. TODO: Expand to more keys, e.g LEFT, RIGHT
-   * 3. `KeyboardReorderMode` is enabled: users can finalize/save the reordering via ENTER or SPACE.
-   * 4. `KeyboardReorderMode` is enabled: users can discard the reordering via ESC.
-   *
-   * @param {Event} event a DOM event
-   */
-  keyDown(event) {
-    if (!this.isKeyDownEnabled) {
-      return;
-    }
-
-    // Note: If handle is specified, we need to target the keyDown on the handle
-    const isKeyboardReorderModeEnabled = this.isKeyboardReorderModeEnabled;
-    if (!isKeyboardReorderModeEnabled && (isEnterKey(event) || isSpaceKey(event))) {
-      const _selectedItem = this._selectedItem;
-      if (!_selectedItem) {
-        return;
-      }
-      this._prepareKeyboardReorderMode();
-      this._announceAction(ANNOUNCEMENT_ACTION_TYPES.ACTIVATE);
-      this._updateItemVisualIndicators(_selectedItem, true);
-      this._updateHandleVisualIndicators(_selectedItem, true);
-      this.isRetainingFocus = true;
-      scheduleOnce('render', this, () => {
-        this.element.focus();
-        this.isRetainingFocus = false;
-      });
-
-      // Prevent the default scroll
-      event.preventDefault();
-      return;
-    }
-    if (isKeyboardReorderModeEnabled) {
-      this._handleKeyboardReorder(event);
-      event.preventDefault();
-    }
-  }
 
   /**
    * Checks if the given element is a child of a handle.
@@ -174,8 +127,8 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
         nextItem.y = valueY;
       } else {
         value = item[direction];
-        set(item, direction, nextItem[direction] + (nextItem[dimension] - item[dimension]));
-        set(nextItem, direction, value);
+        item[direction] = nextItem[direction] + (nextItem[dimension] - item[dimension]);
+        nextItem[direction] = value;
       }
       // UP or LEFT
     } else {
@@ -188,8 +141,8 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
         item.y = valueY;
       } else {
         value = nextItem[direction];
-        set(nextItem, direction, item[direction] + (item[dimension] - nextItem[dimension]));
-        set(item, direction, value);
+        nextItem[direction] = item[direction] + (item[dimension] - nextItem[dimension]);
+        item[direction] = value;
       }
     }
   }
@@ -279,25 +232,6 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
    * 3. Tears down the application container, so we are not focus locked within the application.
    * 4. Resets the current selected item.
    */
-  cancelKeyboardSelection() {
-    const _selectedItem = this._selectedItem;
-    if (!_selectedItem) {
-      return;
-    }
-    this._disableKeyboardReorderMode();
-    // Revert the process by reversing the move.
-    const moves = this.moves;
-    while (moves.length > 0) {
-      const move = moves.pop();
-      const fromIndex = move ? move[1] : 0;
-      const toIndex = move ? move[0] : 0;
-      this._move(fromIndex, toIndex);
-    }
-    this._tearDownA11yApplicationContainer();
-    this._updateItemVisualIndicators(_selectedItem, false);
-    this._updateHandleVisualIndicators(_selectedItem, false);
-    this._resetItemSelection();
-  }
 
   /**
    * Handles all th necessary operations needed for confirming the current keyboard selection.
@@ -315,7 +249,7 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
     this.moves = [];
     this._disableKeyboardReorderMode();
     this._tearDownA11yApplicationContainer();
-    set(_selectedItem, 'wasDropped', true);
+    _selectedItem.wasDropped = true;
     this.commit();
     this._updateItemVisualIndicators(_selectedItem, false);
     this._updateHandleVisualIndicators(_selectedItem, false);
@@ -352,10 +286,13 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
       delta
     };
     const message = a11yAnnouncementConfig[type](config);
+    // Cancel the reset of a previous message so it can't clear this one early.
+    clearTimeout(this._announcerResetTimer);
     announcer.textContent = message;
 
-    // Reset the message after the message is announced.
-    later(() => {
+    // Reset the message after the message is announced. A native timer is used
+    // so the reset doesn't hold up `settled()` in tests.
+    this._announcerResetTimer = setTimeout(() => {
       announcer.textContent = '';
     }, 1000);
   }
@@ -565,141 +502,6 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
   /**
    * Enables keyboard navigation
    */
-  activateKeyDown(selectedItem) {
-    this._selectedItem = selectedItem;
-    this.isKeyDownEnabled = true;
-  }
-
-  /**
-   * Disables keyboard navigation
-   * Currently used to handle keydown events bubbling up from
-   * elements that aren't meant to invoke keyboard navigation
-   * by ignoring them.
-   */
-  deactivateKeyDown() {
-    this.isKeyDownEnabled = false;
-  }
-
-  /**
-   Register the group with this Sortable.
-   @method registerGroup
-   @param {SortableGroupModifier} group
-   */
-  registerGroup(group) {
-    this._group = group;
-  }
-
-  /**
-   De-register the group with this Sortable.
-   @method deregisterGroup
-   @param {SortableGroupModifier} group
-   */
-  deregisterGroup(group) {
-    if (this._group === group) {
-      this._group = null;
-    }
-  }
-
-  /**
-   Prepare for sorting.
-   Main purpose is to stash the current firstItemPosition so
-   we don’t incur expensive re-layouts.
-   @method _prepare
-   */
-  prepare() {
-    this._firstItemPosition = this.firstItemPosition;
-  }
-
-  /**
-   Update item positions (relatively to the first element position).
-   @method update
-   @param {SortableItemModifier[]} sortedItems
-   */
-  update(sortedItems) {
-    if (!sortedItems) {
-      sortedItems = this.sortedItems;
-    }
-
-    // Position of the first element
-    let axis = this._firstItemPosition;
-
-    // Just in case we haven’t called prepare first.
-    if (axis === undefined) {
-      axis = this.firstItemPosition;
-    }
-    const direction = this.direction;
-    const gap = getGap(this.element);
-    let position = 0;
-    let groupPositionRight = 0;
-    let lastTopOffset = 0;
-    let maxPrevHeight = 0;
-    if (direction === 'grid') {
-      position = axis.x;
-      lastTopOffset = axis.y;
-
-      // `getBoundingClientRect` instead of `getComputedStyle(...).width`,
-      // which serializes to only 3 decimal places and can itself introduce
-      // rounding drift against item widths.
-      groupPositionRight = position + this.element.getBoundingClientRect().width;
-    } else {
-      position = axis[direction];
-    }
-    sortedItems.forEach(item => {
-      if (direction === 'grid' && position + item.width > groupPositionRight + GRID_WRAP_EPSILON) {
-        lastTopOffset = lastTopOffset + maxPrevHeight;
-        position = axis.x;
-        maxPrevHeight = 0;
-      }
-      if (!isDestroyed(item) && !item.isDragging) {
-        // Round only at assignment to match offsetLeft/offsetTop's integer
-        // rounding, so undragged items don't jitter by a fractional pixel.
-        if (direction === 'grid') {
-          item.x = Math.round(position);
-          item.y = Math.round(lastTopOffset);
-        } else {
-          set(item, direction, Math.round(position));
-        }
-      }
-
-      // add additional spacing around active element
-      if (item.isBusy) {
-        position += item.spacing * 2;
-      }
-      if (direction === 'grid') {
-        if (item.height > maxPrevHeight) {
-          maxPrevHeight = item.height + gap.vertical;
-        }
-        position += item.width + gap.horizontal;
-      }
-      if (direction === 'x') {
-        position += item.width + gap.horizontal;
-      }
-      if (direction === 'y') {
-        position += item.height + gap.vertical;
-      }
-    });
-  }
-
-  /**
-   @method _commit
-   */
-  commit() {
-    const items = this.sortedItems;
-    const itemModels = items.map(item => item.model);
-    const draggedItem = items.find(item => item.wasDropped);
-    let draggedModel;
-    if (draggedItem) {
-      draggedItem.wasDropped = false; // Reset
-      draggedModel = draggedItem.model;
-    }
-    this._updateItems();
-    this._onChange(itemModels, draggedModel);
-  }
-  _onChange(itemModels, draggedModel) {
-    if (this.onChange) {
-      this.onChange(itemModels, draggedModel);
-    }
-  }
 
   /**
    * Keeps the UI in sync with actual changes.
@@ -720,12 +522,6 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
       });
     });
   }
-  _createAnnouncer() {
-    const announcer = document.createElement('span');
-    announcer.setAttribute('aria-live', 'polite');
-    announcer.classList.add('visually-hidden');
-    return announcer;
-  }
   _calculateGridPosition(a, b, groupWidth) {
     const groupTopPos = a.element.parentNode?.offsetTop ?? 0;
     const groupLeftPos = a.element.parentNode?.offsetLeft ?? 0;
@@ -825,8 +621,211 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
     _defineProperty(this, "isKeyDownEnabled", false);
     // Tracks if we're still performing a programmatic focus.
     _defineProperty(this, "isRetainingFocus", false);
+    _defineProperty(this, "focusOut", () => {
+      if (!this.isRetainingFocus && !this._isElementWithinHandle(document.activeElement)) {
+        this.cancelKeyboardSelection();
+      }
+    });
+    /**
+     * Explanation
+     * 1. `KeyboardReorderMode` is disabled: users can activate it via ENTER or SPACE.
+     * 2. `KeyboardReorderMode` is enabled: users can reorder via UP or DOWN arrow keys. TODO: Expand to more keys, e.g LEFT, RIGHT
+     * 3. `KeyboardReorderMode` is enabled: users can finalize/save the reordering via ENTER or SPACE.
+     * 4. `KeyboardReorderMode` is enabled: users can discard the reordering via ESC.
+     *
+     * @param {Event} event a DOM event
+     */
+    _defineProperty(this, "keyDown", event => {
+      if (!this.isKeyDownEnabled) {
+        return;
+      }
+
+      // Note: If handle is specified, we need to target the keyDown on the handle
+      const isKeyboardReorderModeEnabled = this.isKeyboardReorderModeEnabled;
+      if (!isKeyboardReorderModeEnabled && (isEnterKey(event) || isSpaceKey(event))) {
+        const _selectedItem = this._selectedItem;
+        if (!_selectedItem) {
+          return;
+        }
+        this._prepareKeyboardReorderMode();
+        this._announceAction(ANNOUNCEMENT_ACTION_TYPES.ACTIVATE);
+        this._updateItemVisualIndicators(_selectedItem, true);
+        this._updateHandleVisualIndicators(_selectedItem, true);
+        this.isRetainingFocus = true;
+        scheduleOnce('render', this, () => {
+          this.element.focus();
+          this.isRetainingFocus = false;
+        });
+
+        // Prevent the default scroll
+        event.preventDefault();
+        return;
+      }
+      if (isKeyboardReorderModeEnabled) {
+        this._handleKeyboardReorder(event);
+        event.preventDefault();
+      }
+    });
+    _defineProperty(this, "cancelKeyboardSelection", () => {
+      const _selectedItem = this._selectedItem;
+      if (!_selectedItem) {
+        return;
+      }
+      this._disableKeyboardReorderMode();
+      // Revert the process by reversing the move.
+      const moves = this.moves;
+      while (moves.length > 0) {
+        const move = moves.pop();
+        const fromIndex = move ? move[1] : 0;
+        const toIndex = move ? move[0] : 0;
+        this._move(fromIndex, toIndex);
+      }
+      this._tearDownA11yApplicationContainer();
+      this._updateItemVisualIndicators(_selectedItem, false);
+      this._updateHandleVisualIndicators(_selectedItem, false);
+      this._resetItemSelection();
+    });
     _initializerDefineProperty(this, "sortableService", _descriptor, this);
     _defineProperty(this, "announcer", null);
+    /**
+     * Pending timer that resets the announcer message
+     */
+    _defineProperty(this, "_announcerResetTimer", void 0);
+    _defineProperty(this, "activateKeyDown", selectedItem => {
+      this._selectedItem = selectedItem;
+      this.isKeyDownEnabled = true;
+    });
+    /**
+     * Disables keyboard navigation
+     * Currently used to handle keydown events bubbling up from
+     * elements that aren't meant to invoke keyboard navigation
+     * by ignoring them.
+     */
+    _defineProperty(this, "deactivateKeyDown", () => {
+      this.isKeyDownEnabled = false;
+    });
+    /**
+     Register the group with this Sortable.
+     @method registerGroup
+     @param {SortableGroupModifier} group
+     */
+    _defineProperty(this, "registerGroup", group => {
+      this._group = group;
+    });
+    /**
+     De-register the group with this Sortable.
+     @method deregisterGroup
+     @param {SortableGroupModifier} group
+     */
+    _defineProperty(this, "deregisterGroup", group => {
+      if (this._group === group) {
+        this._group = null;
+      }
+    });
+    /**
+     Prepare for sorting.
+     Main purpose is to stash the current firstItemPosition so
+     we don’t incur expensive re-layouts.
+     @method _prepare
+     */
+    _defineProperty(this, "prepare", () => {
+      this._firstItemPosition = this.firstItemPosition;
+    });
+    /**
+     Update item positions (relatively to the first element position).
+     @method update
+     @param {SortableItemModifier[]} sortedItems
+     */
+    _defineProperty(this, "update", sortedItems => {
+      if (!sortedItems) {
+        sortedItems = this.sortedItems;
+      }
+
+      // Position of the first element
+      let axis = this._firstItemPosition;
+
+      // Just in case we haven’t called prepare first.
+      if (axis === undefined) {
+        axis = this.firstItemPosition;
+      }
+      const direction = this.direction;
+      const gap = getGap(this.element);
+      let position = 0;
+      let groupPositionRight = 0;
+      let lastTopOffset = 0;
+      let maxPrevHeight = 0;
+      if (direction === 'grid') {
+        position = axis.x;
+        lastTopOffset = axis.y;
+
+        // `getBoundingClientRect` instead of `getComputedStyle(...).width`,
+        // which serializes to only 3 decimal places and can itself introduce
+        // rounding drift against item widths.
+        groupPositionRight = position + this.element.getBoundingClientRect().width;
+      } else {
+        position = axis[direction];
+      }
+      sortedItems.forEach(item => {
+        if (direction === 'grid' && position + item.width > groupPositionRight + GRID_WRAP_EPSILON) {
+          lastTopOffset = lastTopOffset + maxPrevHeight;
+          position = axis.x;
+          maxPrevHeight = 0;
+        }
+        if (!isDestroyed(item) && !item.isDragging) {
+          // Round only at assignment to match offsetLeft/offsetTop's integer
+          // rounding, so undragged items don't jitter by a fractional pixel.
+          if (direction === 'grid') {
+            item.x = Math.round(position);
+            item.y = Math.round(lastTopOffset);
+          } else {
+            item[direction] = Math.round(position);
+          }
+        }
+
+        // add additional spacing around active element
+        if (item.isBusy) {
+          position += item.spacing * 2;
+        }
+        if (direction === 'grid') {
+          if (item.height > maxPrevHeight) {
+            maxPrevHeight = item.height + gap.vertical;
+          }
+          position += item.width + gap.horizontal;
+        }
+        if (direction === 'x') {
+          position += item.width + gap.horizontal;
+        }
+        if (direction === 'y') {
+          position += item.height + gap.vertical;
+        }
+      });
+    });
+    /**
+     @method _commit
+     */
+    _defineProperty(this, "commit", () => {
+      const items = this.sortedItems;
+      const itemModels = items.map(item => item.model);
+      const draggedItem = items.find(item => item.wasDropped);
+      let draggedModel;
+      if (draggedItem) {
+        draggedItem.wasDropped = false; // Reset
+        draggedModel = draggedItem.model;
+      }
+      this._updateItems();
+      this._onChange(itemModels, draggedModel);
+    });
+    _defineProperty(this, "_onChange", (itemModels, draggedModel) => {
+      if (this.onChange) {
+        this.onChange(itemModels, draggedModel);
+      }
+    });
+    _defineProperty(this, "_createAnnouncer", () => {
+      const announcer = document.createElement('span');
+      announcer.setAttribute('aria-live', 'polite');
+      announcer.classList.add('visually-hidden');
+      return announcer;
+    });
     _defineProperty(this, "element", void 0);
     _defineProperty(this, "didSetup", false);
     _defineProperty(this, "named", void 0);
@@ -848,18 +847,18 @@ let SortableGroupModifier = (_dec = service('ember-sortable-internal-state'), _d
     }
     this.addEventListener();
   }
-}, _applyDecoratedDescriptor(_class.prototype, "focusOut", [action], Object.getOwnPropertyDescriptor(_class.prototype, "focusOut"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "keyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "keyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "cancelKeyboardSelection", [action], Object.getOwnPropertyDescriptor(_class.prototype, "cancelKeyboardSelection"), _class.prototype), _descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
+}, _descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
   configurable: true,
   enumerable: true,
   writable: true,
   initializer: null
-}), _applyDecoratedDescriptor(_class.prototype, "firstItemPosition", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "firstItemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "activateKeyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "activateKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "deactivateKeyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "deactivateKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "registerGroup", [action], Object.getOwnPropertyDescriptor(_class.prototype, "registerGroup"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "deregisterGroup", [action], Object.getOwnPropertyDescriptor(_class.prototype, "deregisterGroup"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "prepare", [action], Object.getOwnPropertyDescriptor(_class.prototype, "prepare"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "update", [action], Object.getOwnPropertyDescriptor(_class.prototype, "update"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "commit", [action], Object.getOwnPropertyDescriptor(_class.prototype, "commit"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_onChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_onChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_createAnnouncer", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_createAnnouncer"), _class.prototype), _class);
+}), _class);
 /**
  *
  * @param {SortableGroupModifier} instance
  */
 function cleanup(instance) {
-  // todo cleanup the announcer
+  clearTimeout(instance._announcerResetTimer);
   if (instance.announcer?.parentNode) {
     instance.announcer.parentNode.removeChild(instance.announcer);
   }