@brightspot/ui 3.0.1-cms-ui-migration.1 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/v4/Sortable.js

@@ -1,874 +0,0 @@
-/* eslint-disable no-unused-vars */
-import Sortable, { MultiDrag } from 'sortablejs'
-import create from './dom/create'
-import onFind from './dom/onFind'
-import Cookies from 'js.cookie'
-import onRemove from './dom/onRemove'
-import getZindex from '../script/v3/plugin/popup'
-import { announce, replaceWithEach } from '../../../dom/aria.ts'
-import { deselectDrawerItem } from '../../../ContentEditDrawer.ts'
-
-// This is wrapped in a named export to prevent the tests from failing.
-export const init = () => Sortable.mount(new MultiDrag())
-
-export const findSortableContainers = (sortableEl) => {
-  if (!sortableEl) {
-    return []
-  }
-
-  if (sortableEl.closest('.SearchFields-container')) {
-    return [
-      sortableEl
-        .closest('.SearchFields-container')
-        ?.querySelector('.SearchFields-hide > ul'),
-      sortableEl
-        .closest('.SearchFields-container')
-        ?.querySelector('.SearchFields-displayTitle > ul'),
-    ]
-  }
-
-  const itemType = sortableEl.getAttribute('data-sortable-item-type')
-
-  return itemType
-    ? [
-        ...document.querySelectorAll(
-          `[data-sortable-valid-item-types~="${itemType}"][data-read-only="false"]`,
-        ),
-      ]
-    : [
-        ...document.querySelectorAll(
-          '.Sortable:not([data-sortable-valid-item-types])',
-        ),
-      ]
-}
-
-export const updateInputs = (sourceContainer, source, pending) => {
-  const oldInputName = sourceContainer.dataset.sortableInputName
-  const newInputName = source.closest('.Sortable').dataset.sortableInputName
-
-  if (oldInputName !== newInputName) {
-    pending.forEach((pendingItem) => {
-      pendingItem
-        .querySelectorAll(`[name^="${oldInputName}"]`)
-        .forEach((input) => {
-          input.setAttribute(
-            'name',
-            input.getAttribute('name').replace(oldInputName, newInputName),
-          )
-        })
-    })
-  }
-}
-
-// Mark the parent inputContainer as interacted and trigger state update
-const markContainerAsInteracted = (container) => {
-  const inputContainer = container.closest('.inputContainer')
-  if (inputContainer) {
-    inputContainer.dataset.interacted = 'true'
-  }
-  container
-    .closest('form')
-    ?.dispatchEvent(new Event('change', { bubbles: true }))
-}
-
-// Array containing rte overlays
-const rteOverlays = []
-let isPending = false
-let requestDrag = null
-let itemIdx = null
-
-// Returns all visible drop zones which can contain this item type.
-function getVisibleDropZones(item) {
-  const itemType = item.dataset.sortableItemType
-  return Array.from(
-    document.querySelectorAll(
-      `ol.Sortable[data-sortable-valid-item-types*="${itemType}"],
-            ul.Sortable[data-sortable-valid-item-types*="${itemType}"]`,
-    ),
-  ).filter((zone) => zone.offsetParent !== null)
-}
-
-function swapItemsWithinContainer(index, toIndex, container) {
-  const itemEl = container.children[index],
-    toEl = container.children[toIndex]
-
-  if (index > toIndex) {
-    container.insertBefore(itemEl, toEl)
-  } else {
-    container.insertBefore(itemEl, toEl.nextElementSibling)
-  }
-
-  announce(window.BRIGHTSPOT.ui.sortable.itemChangedPosition, [
-    index + 1,
-    toIndex + 1,
-  ])
-}
-
-// Find Containers for the Sortables.
-onFind(
-  [
-    'ol[data-sortable-input-name]',
-    '.plugin-repeatable > ol',
-    '.widget-urls',
-    '[data-rte-container="true"]',
-    '.CIG-row[data-type="record"][data-sortable-valid-item-types]',
-    'ul[data-sortable-input-name]',
-  ],
-  (container) => {
-    const parentReadOnly = container.closest('.is-readOnly')
-    const readOnly = container.dataset.readOnly
-    if (readOnly === 'true' || parentReadOnly) {
-      return
-    }
-    const options = {
-      itemSelector: ':scope > *:not(script)',
-    }
-    const isCigRowContainer = container.dataset.type === 'record'
-
-    if (container.dataset.rteContainer === 'true' || isCigRowContainer) {
-      const overlay = container.querySelector(':scope .drawerDropOverlay')
-      rteOverlays.push(overlay)
-    }
-
-    const isRCIG = container.classList.contains('RCIG-list')
-    let isPreviewable = false
-    const parentElement = container.parentElement
-    if (parentElement) {
-      isPreviewable =
-        container.parentElement.classList.contains('is-previewable')
-    }
-
-    // Needed for v5 when using Sortable inside of a dialog popup
-    const inPopup = container.closest('dialog')
-
-    const sortable = new Sortable(container, {
-      animation: isCigRowContainer ? null : 160,
-      handle:
-        // RCIGs that are not previewable use handles to move them instead of clicking and dragging the entire element.
-        isRCIG && !isPreviewable
-          ? '.RCIG-title, .MultiSortable-buttonToggle, .ContentEditDrawer-widget-carousel-list > li, .SearchFields-drag'
-          : null,
-      sort: true,
-      delay: 300,
-      delayOnTouchOnly: true,
-      touchStartThreshold: 4,
-      dragClass: 'Sortable-drag',
-      selectedClass: 'Sortable-selected',
-      chosenClass: 'Sortable-chosen',
-      ghostClass: 'Sortable-ghost',
-      forceFallback: true,
-      fallbackTolerance: 3,
-      fallbackOnBody: inPopup ? false : true,
-      swapThreshold: 0.65,
-      filter:
-        'input:not(.ContentEditDrawer-widget-carousel-list-item-selectButton), textarea, .ProseMirrorContainer, .CIG-row, .EIG',
-      preventOnFilter: false,
-      scroll: true,
-      scrollSpeed: 20,
-      dropBubble: false,
-      multiDrag: true,
-      group: {
-        put: function (to, from, item) {
-          // Creates an overlay to show which RTE field the type is droppable
-          if (rteOverlays.length > 0) {
-            for (const overlay in rteOverlays) {
-              const currentOverlay = rteOverlays[overlay]
-              if (currentOverlay) {
-                const sortableTypes =
-                  currentOverlay.dataset?.sortableValidItemTypes?.split(' ')
-                const loadTypes = item.dataset?.sortableLoadTypes?.split(' ')
-                const targetTypeId = loadTypes?.find((type) =>
-                  sortableTypes.includes(type),
-                )
-                if (targetTypeId) {
-                  currentOverlay.style.display = 'inline'
-                }
-              }
-            }
-          }
-
-          let isValid = false
-
-          if (to.el.dataset.sortableValidItemTypes) {
-            isValid = to.el.dataset.sortableValidItemTypes.includes(
-              item.dataset.sortableItemType,
-            )
-
-            if (!isValid && item.dataset.sortableLoadTypes) {
-              const sortableTypes =
-                to.el.dataset.sortableValidItemTypes.split(' ')
-              const loadTypes = item.dataset.sortableLoadTypes.split(' ')
-              isValid = loadTypes.some((type) => sortableTypes.includes(type))
-            }
-
-            return isValid
-          } else {
-            return isValid
-          }
-        },
-        pull: function (to, from, item) {
-          let isValid = false
-          const isClonable = from.el.classList.contains('is-clonable')
-
-          if (to.el.dataset.sortableValidItemTypes) {
-            isValid = to.el.dataset.sortableValidItemTypes.includes(
-              item.dataset.sortableItemType,
-            )
-
-            if (!isValid && item.dataset.sortableLoadTypes) {
-              const sortableTypes =
-                to.el.dataset.sortableValidItemTypes.split(' ')
-              const loadTypes = item.dataset.sortableLoadTypes.split(' ')
-              isValid = loadTypes.some((type) => sortableTypes.includes(type))
-            }
-
-            return isValid && isClonable ? 'clone' : isValid
-          } else {
-            return isValid
-          }
-        },
-      },
-      onSelect: (evt) => {
-        const item = evt.item
-        const items = evt.items
-        const isDrawerElement = item.parentElement.classList.contains(
-          'ContentEditDrawer-widget-carousel-list',
-        )
-
-        // Unselect from drawer if multitoggle is selected outside of drawer
-        // To prevent dragging from different containers at the same time
-        if (isDrawerElement) {
-          // Deselect selected items that aren't from the drawer container
-          for (const selected in items) {
-            const selectedItem = items[selected]
-
-            if (
-              selectedItem.parentElement &&
-              !selectedItem.parentElement.classList.contains(
-                'ContentEditDrawer-widget-carousel-list',
-              )
-            ) {
-              Sortable.utils.deselect(selectedItem)
-            }
-          }
-        } else {
-          // Deselect selected items that aren't from the non-drawer container
-          for (const selected in items) {
-            const selectedItem = items[selected]
-
-            if (
-              selectedItem.parentElement.classList.contains(
-                'ContentEditDrawer-widget-carousel-list',
-              )
-            ) {
-              deselectDrawerItem(selectedItem)
-              Sortable.utils.deselect(selectedItem)
-            }
-          }
-        }
-
-        if (!item.classList.contains('is-moving')) {
-          Sortable.utils.deselect(item)
-        }
-      },
-      onDeselect: (evt) => {
-        const item = evt.item
-        const drawerSelectButton = item.querySelector(
-          '.ContentEditDrawer-widget-carousel-list-item-selectButton',
-        )
-
-        if (item.classList.contains('is-moving')) {
-          if (drawerSelectButton) {
-            drawerSelectButton.checked = false
-          }
-          item.classList.remove('is-moving')
-        }
-      },
-      onStart: (evt) => {
-        const item = evt.item
-        const items = evt.items.length > 0 ? evt.items : [evt.item]
-        const itemCount = +items.length
-        const relatedContainers = findSortableContainers(item)
-
-        const previewContainer = document.querySelector(
-          '.ContentEdit-previewDisplay',
-        )
-
-        /* Prevents any highlighting of text on the Page while dragging an item. */
-        document.body.style.userSelect = 'none'
-
-        if (previewContainer) {
-          previewContainer.style.pointerEvents = 'none'
-        }
-        if (itemCount) {
-          Sortable.ghost.style.setProperty('--drag-count', itemCount)
-          Sortable.ghost.style.zIndex = getZindex() + 1
-          Sortable.ghost.setAttribute('item-suffix', '')
-
-          if (itemCount > 1) {
-            Sortable.ghost.setAttribute('item-suffix', 's')
-          }
-        }
-        if (relatedContainers.length === 1) {
-          var relatedContainer = relatedContainers[0]
-          // if the item isn't from related container
-          if (!item.closest(`.${relatedContainer.className}`)) {
-            relatedContainer.classList.add('Sortable-allowedContainer')
-          }
-        }
-
-        if (relatedContainers.length > 1) {
-          relatedContainers.forEach((related) =>
-            related.classList.add('Sortable-allowedContainer'),
-          )
-        }
-
-        // Update position of dragged item based off the scaled down
-        // animation in v5.
-        if (window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-          const ghostLeft = parseInt(Sortable.ghost.style.left)
-          Sortable.ghost.style.left = ghostLeft * 0.95 + 'px'
-        }
-
-        onRemove.pause()
-        onFind.pause()
-      },
-      onSort: (evt) => {
-        const sourceContainer = evt.from
-        const toContainer = evt.to
-        const items = evt.items.length > 0 ? evt.items : [evt.item]
-
-        if (isPending) {
-          return
-        }
-
-        if (toContainer.dataset.type === 'record') {
-          const $input = $(toContainer).find(':input.objectId').first()
-          const $item = $(items)
-
-          $input.attr('data-label', $item.data('label-html'))
-          $input.attr('data-label-html', $item.data('label-html'))
-          $input.attr(
-            'data-preview',
-            $item.find('img').attr('src') ||
-              $item.find('.ItemPreview-url').attr('data-src') ||
-              '',
-          )
-          $input.attr('data-visibility', $item.find('span.Label').text())
-          $input.attr(
-            'data-read-only',
-            $item.attr('data-read-only') ? $item.attr('data-read-only') : false,
-          )
-          $input.val($item.data('id'))
-          $input.change()
-          return
-        }
-
-        // Ensures that the items are in the correct order when sorting
-        items.sort(function (a, b) {
-          return a.dataset.index - b.dataset.index
-        })
-
-        for (const selected in items) {
-          const item = items[selected]
-
-          if (toContainer?.dataset?.rteContainer === 'true') {
-            return
-          } else if (
-            toContainer.dataset.sortableValidItemTypes &&
-            sourceContainer.dataset.sortableEndpoint &&
-            !item.classList.contains('is-pending')
-          ) {
-            const sortableTypes =
-              toContainer.dataset.sortableValidItemTypes.split(' ')
-            const loadTypes = item.dataset.sortableLoadTypes?.split(' ')
-            const id = item.dataset?.id
-            const targetTypeId = loadTypes?.find((type) =>
-              sortableTypes.includes(type),
-            )
-            const isPreviewableContainer =
-              toContainer.parentElement.classList.contains('is-previewable')
-            const previewable = toContainer.dataset.previewable
-            const validTypes = toContainer.dataset.sortableValidItemTypes
-
-            // Sets up items that need to be removed for incompatibility
-            if (!targetTypeId) {
-              item.remove()
-              continue
-            }
-
-            // This event can fire 2x so block duplication.
-            isPending = true
-
-            Sortable.utils.deselect(item)
-
-            fetchContentInterchange(
-              sourceContainer.dataset.sortableEndpoint,
-              id,
-              targetTypeId,
-              toContainer.dataset.sortableInputName,
-              isPreviewableContainer,
-              previewable,
-              validTypes,
-            ).then((html) => {
-              item.innerHTML = html
-              const repeatable = toContainer.closest('.plugin-repeatable')
-              item.classList.remove('Sortable-selected')
-              item.classList.remove('is-moving')
-              isPending = false
-
-              if (toContainer.classList.contains('RCIG-list')) {
-                item.classList.remove('RCS-item')
-
-                // Call jquery.repeatable initialization methods on item.
-                $(repeatable)
-                  .data('repeatable')
-                  .itemLoad(item)
-                  .then(() => {
-                    $(repeatable).data('repeatable').initItem(item)
-
-                    if (
-                      isPreviewableContainer &&
-                      !toContainer.parentElement.classList.contains(
-                        'is-gridView',
-                      )
-                    ) {
-                      item.classList.remove('is-gridItem')
-                      item.classList.add('is-listItem')
-                    }
-
-                    markContainerAsInteracted(toContainer)
-                  })
-              } else {
-                // Reference to a single Record so trigger 'object.js' custom event.
-                item.classList.remove('RCIG-item')
-                $(item).trigger('create')
-                $(repeatable).data('repeatable').initItemRemove(item)
-
-                markContainerAsInteracted(toContainer)
-              }
-            })
-          } else {
-            let pending = evt.items.length ? evt.items : [item]
-            pending.forEach((pendingItem) => {
-              pendingItem.addEventListener('animationend', () => {
-                pendingItem.classList.remove('is-added')
-              })
-              pendingItem.classList.add('is-added')
-            })
-
-            // Rename any inputs that changed sources.
-            updateInputs(sourceContainer, toContainer, pending)
-            // Trigger a content-state update.
-            sourceContainer
-              .querySelectorAll('input, select, textarea')
-              .forEach((input) => {
-                input.dispatchEvent(new Event('change'))
-              })
-
-            markContainerAsInteracted(toContainer)
-          }
-        }
-      },
-      onEnd: (evt) => {
-        const item = evt.item
-        const items = evt.items.length > 0 ? evt.items : [item]
-        const previewContainer = document.querySelector(
-          '.ContentEdit-previewDisplay',
-        )
-
-        // restore the body style for user select and cursor
-        document.body.style.userSelect = 'unset'
-
-        if (previewContainer) {
-          previewContainer.style.pointerEvents = 'initial'
-        }
-        findSortableContainers(item).forEach((zone) =>
-          zone.classList.remove('Sortable-allowedContainer'),
-        )
-
-        // Removes overlay for RTE drop after dragging
-        if (rteOverlays.length > 0) {
-          for (const overlay in rteOverlays) {
-            const currentOverlay = rteOverlays[overlay]
-            if (currentOverlay) {
-              currentOverlay.style.display = 'none'
-            }
-          }
-        }
-
-        if (evt.to?.dataset?.rteContainer === 'true') {
-          // Deselects drawer items after rte initializes them
-          for (const selected in items) {
-            Sortable.utils.deselect(items[selected])
-          }
-
-          const event = new CustomEvent('interchange', { detail: evt })
-          const rte = evt.to.querySelector('.richtext').rte
-          rte.view.dispatchEvent(event)
-          item.remove()
-        }
-
-        if (evt.to?.dataset?.type === 'record') {
-          // Deselects drawer items after rte initializes them
-          for (const selected in items) {
-            Sortable.utils.deselect(items[selected])
-
-            items[selected].remove()
-          }
-        }
-
-        onRemove.resume()
-        onFind.resume()
-      },
-      onUpdate: (evt) => {
-        const item = evt.item
-        item.addEventListener('animationend', () => {
-          item.classList.remove('is-added')
-        })
-        item.classList.add('is-added')
-      },
-    })
-
-    // There's no option to disable the behavior where the MultiDrag plugin
-    // clears the selection when clicked outside, so this removes the event
-    // listener that triggers it manually.
-    //
-    // See https://github.com/SortableJS/sortablejs/blob/1.10.2/plugins/MultiDrag/MultiDrag.js#L38-L43
-    if (sortable.multiDrag) {
-      for (const type of ['pointerup', 'mouseup', 'touchend']) {
-        document.removeEventListener(
-          type,
-          sortable.multiDrag._deselectMultiDrag,
-          {
-            capture: false,
-            passive: false,
-          },
-        )
-      }
-    }
-
-    container.classList.add('Sortable')
-
-    // Add ARIA to Lists of sortables.
-    if (container.tagName === 'OL' || container.tagName === 'UL') {
-      const label = container
-        .closest('.CIG-row')
-        ?.querySelector('label')?.textContent
-
-      // Add ARIA to items within sortable lists.
-      container
-        .querySelectorAll(':scope > li > input[type=text]')
-        .forEach((input) => {
-          if (input.dataset?.label) {
-            const item = input.closest('li')
-            item?.setAttribute('aria-label', input.dataset?.label)
-          }
-        })
-
-      onFind(container, ':scope > li', (item) => {
-        item.addEventListener('focus', (event) => {
-          if (!event.relatedTarget) return
-          const listLabel = label
-            ? replaceWithEach(window.BRIGHTSPOT.ui.sortable.namedList, [label])
-            : window.BRIGHTSPOT.ui.sortable.genericList
-
-          announce(window.BRIGHTSPOT.ui.sortable.listGainedFocus, [listLabel])
-        })
-
-        item.addEventListener('blur', (event) => {
-          if (event.relatedTarget) {
-            if (requestDrag) {
-              onRemove.resume()
-              onFind.resume()
-            }
-            requestDrag = null
-          }
-        })
-
-        if (item.dataset?.label && !item.hasAttribute('aria-label')) {
-          item.setAttribute('aria-label', item.dataset?.label)
-        }
-      })
-
-      if (!container.hasAttribute('aria-label')) {
-        container.setAttribute('aria-label', label ? label : '')
-      }
-    }
-
-    // If the container is an RTI, provide a space for the User to grab since this component is mostly a text input and therefore not draggable.
-    const needsHandle = container.classList.contains('RTI-list')
-
-    // Sortable items are asyncronously created.
-    onFind(container, options.itemSelector, (element) => {
-      element.classList.add('Sortable-item')
-
-      // Update tab focus order with those elements which are draggable.
-      if (
-        element.matches(
-          '.RCS-item:not(.is-disabled), .RCIG-item:not(.is-disabled), .widget-urlsItem',
-        ) ||
-        needsHandle
-      ) {
-        element.setAttribute('tabindex', 0)
-      }
-
-      if (needsHandle) {
-        element.insertAdjacentElement(
-          'afterbegin',
-          create('div', { class: 'RTI-handle' }),
-        )
-      }
-    })
-  },
-)
-
-const fetchContentInterchange = async (
-  url,
-  id,
-  targetTypeId,
-  name,
-  isPreviewableContainer,
-  previewable,
-  validTypes,
-) => {
-  const query = new URLSearchParams()
-  query.set('id', id)
-  query.set('targetTypeId', targetTypeId)
-  query.set('inputName', name)
-  query.set('isPreviewableContainer', isPreviewableContainer)
-  query.set('previewable', previewable)
-  query.set('validTypes', validTypes)
-  const response = await fetch(`${CONTEXT_PATH}${url}`, {
-    method: 'POST',
-    credentials: 'include',
-    body: query,
-    headers: {
-      'Brightspot-CSRF': Cookies.get('bsp.csrf'),
-    },
-  })
-  const body = await response.text()
-
-  return body
-}
-
-const handleKeyDown = (event) => {
-  if (event.code === 'Escape') {
-    // Find all the selected Sortables and deselect them
-    document.querySelectorAll('.Sortable-selected').forEach((elem) => {
-      Sortable.utils.deselect(elem)
-      deselectDrawerItem(elem)
-      elem.classList.remove('is-moving')
-    })
-  }
-
-  // Only process key events for Sortable-item from here on.
-  if (
-    !event.target.classList.contains('Sortable-item') &&
-    !event.target.classList.contains('MultiSortable-buttonToggle')
-  )
-    return
-
-  const item = event.target.classList.contains('MultiSortable-buttonToggle')
-    ? event.target.closest('.Sortable-item')
-    : event.target
-
-  if (event.code === 'Tab') {
-    if (requestDrag) {
-      const dropZones = getVisibleDropZones(item)
-      if (!dropZones.length) {
-        onRemove.resume()
-        onFind.resume()
-        requestDrag = null
-      } else {
-        const fromZone = item.closest('ul.Sortable, ol.Sortable')
-        let toZoneIdx = null
-        let fromZoneIdx = null
-        // Determine which drop zone the item is currently within.
-        dropZones.forEach((zone, key) => {
-          if (fromZone.isEqualNode(zone)) {
-            fromZoneIdx = key
-          }
-        })
-
-        // Move to the next drop zone or wrap to the first.
-        // Wrap around?
-        if (fromZoneIdx + 1 > dropZones.length - 1) {
-          toZoneIdx = 0
-        } else if (fromZoneIdx + 1 <= dropZones.length - 1) {
-          toZoneIdx = fromZoneIdx + 1
-        }
-
-        // Move item into first child position of the new drop zone.
-        const toZone = dropZones[toZoneIdx]
-        const toEl = toZone.children[0]
-        if (toZone.isEqualNode(fromZone) && dropZones.length === 1) {
-          // Should this cancel the drag and move tab focus to the next in the order?
-        } else if (toEl) {
-          announce(window.BRIGHTSPOT.ui.sortable.itemChangedPosition, [
-            fromZoneIdx,
-            toZoneIdx,
-          ])
-          toZone.insertBefore(item, toEl)
-        } else {
-          announce(window.BRIGHTSPOT.ui.sortable.itemChangedPosition, [
-            fromZoneIdx,
-            1,
-          ])
-          toZone.appendChild(item)
-        }
-        item.focus()
-        event.preventDefault()
-      }
-    }
-  }
-
-  if (event.code === 'Escape') {
-    if (requestDrag) {
-      // Revert item to previous state.
-      const zoneChildren = requestDrag.prevDropZone.children
-      if (
-        zoneChildren.length &&
-        requestDrag.prevIdx < zoneChildren.length - 1
-      ) {
-        requestDrag.prevDropZone.insertBefore(
-          item,
-          zoneChildren[requestDrag.prevIdx],
-        )
-      } else {
-        requestDrag.prevDropZone.appendChild(item)
-      }
-      onRemove.resume()
-      onFind.resume()
-      announce(window.BRIGHTSPOT.ui.sortable.itemDragCancelled)
-      item.focus()
-    }
-    requestDrag = null
-  }
-
-  if (event.code === 'Space' || event.code === 'Enter') {
-    if (!requestDrag) {
-      // Pick up the item.
-      requestDrag = {
-        prevIdx: Array.prototype.indexOf.call(item.parentNode.children, item),
-        prevDropZone: item.closest('ul.Sortable, ol.Sortable'),
-      }
-      onRemove.pause()
-      onFind.pause()
-      announce(window.BRIGHTSPOT.ui.sortable.itemDragStarted)
-    } else {
-      // Trigger a content state change.
-      const toZone = item.closest('ul.Sortable, ol.Sortable')
-      toZone.querySelectorAll('input, select, textarea').forEach((input) => {
-        input.dispatchEvent(new Event('change'))
-      })
-
-      markContainerAsInteracted(toZone)
-
-      // Remove zone from tab order if user moved its last item out.
-      if (requestDrag.prevDropZone?.childElementCount === 0) {
-        requestDrag.prevDropZone?.removeAttribute('tabindex')
-      }
-
-      // Trigger a sortable drag event.
-      toZone.dispatchEvent(
-        new CustomEvent('add', {
-          detail: { item: item, from: requestDrag.prevDropZone, to: toZone },
-        }),
-      )
-
-      // Put down the item.
-      onRemove.resume()
-      onFind.resume()
-      requestDrag = null
-      announce(window.BRIGHTSPOT.ui.sortable.itemDropped)
-    }
-
-    event.preventDefault() // Supress scrolling.
-
-    if (!requestDrag) return
-  }
-
-  if (event.code === 'ArrowUp' || event.code === 'ArrowLeft') {
-    itemIdx = Array.prototype.indexOf.call(item.parentNode.children, item)
-    if (requestDrag && itemIdx > 0) {
-      swapItemsWithinContainer(
-        itemIdx,
-        itemIdx - 1,
-        item.closest('ul.Sortable, ol.Sortable'),
-      )
-      item.focus()
-    }
-  }
-
-  if (event.code === 'ArrowDown' || event.code === 'ArrowRight') {
-    itemIdx = Array.prototype.indexOf.call(item.parentNode.children, item)
-    if (requestDrag && itemIdx < item.parentNode.children.length - 1) {
-      swapItemsWithinContainer(
-        itemIdx,
-        itemIdx + 1,
-        item.closest('ul.Sortable, ol.Sortable'),
-      )
-      item.focus()
-    }
-  }
-}
-
-// Initialize all the MultiSortables.
-onFind(
-  [
-    '.Sortable-item.RCIG-item .RCIG-remove',
-    '.Sortable-item.RCS-item .RCS-remove',
-  ],
-  (el) => {
-    // Do not add multi-sort to items inside a Set-type container
-    if (el.closest('.CIG-row[data-type="set/record"]')) {
-      return
-    }
-
-    const item = el.closest('[data-sortable-item-type], .Sortable-item')
-    item.classList.add('MultiSortable')
-
-    item.addEventListener('mouseup', (evt) => {
-      if (evt.target === moveButton && !item.classList.contains('is-moving')) {
-        item.classList.add('is-moving')
-
-        if (
-          !item.classList.contains('is-collapsed') &&
-          item.classList.contains('RCIG-item') &&
-          !item.classList.contains('is-gridItem')
-        ) {
-          item.classList.add('collapsed', 'is-collapsed')
-        }
-      } else {
-        item.classList.remove('is-moving')
-      }
-    })
-
-    let inputAriaLabel = ''
-    const cigRow = el.closest('.CIG-row')
-    if (cigRow) {
-      inputAriaLabel = cigRow.querySelector('.CIG-label label').textContent
-    }
-
-    const moveButton = create('button', {
-      type: 'button',
-      class: 'MultiSortable-buttonToggle',
-      title: `${window.BRIGHTSPOT?.ui.tooltips.multiSort} ${inputAriaLabel}`,
-      'aria-label': `${window.BRIGHTSPOT?.ui.tooltips.multiSort} ${inputAriaLabel}`,
-    })
-
-    if (!el.classList.contains('EIG-remove')) {
-      el.insertAdjacentElement('beforeBegin', moveButton)
-    }
-  },
-)
-
-window.addEventListener('keydown', handleKeyDown)
-window.addEventListener('click', () => {
-  if (requestDrag) {
-    onRemove.resume()
-    onFind.resume()
-  }
-  requestDrag = null
-})