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

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

@@ -0,0 +1,874 @@
+/* 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
+})