@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/Page.js

@@ -1,890 +0,0 @@
-import create from './dom/create'
-import find from './dom/find'
-import findAll from './dom/findAll'
-import insertBefore from './dom/insertBefore'
-import onFind from './dom/onFind'
-import onFindOnce from './dom/onFindOnce'
-import onRemove from './dom/onRemove'
-import storage from './util/storage'
-import { tabbable } from 'tabbable'
-import {
-  getFirstAndLastFocusableDescendants,
-  getFocusableDescendants,
-} from '../../../dom/focusable'
-import { trapFocusWithin } from '../../../dom/keyboard'
-
-const tooltips = window.BRIGHTSPOT?.ui.tooltips
-
-onFind('.Page .Container-broadcast', (broadcast) => {
-  const page = broadcast.closest('.Page')
-  const observer = new ResizeObserver((entries) => {
-    setBroadcastProperties(page, broadcast)
-  })
-  observer.observe(broadcast)
-  setBroadcastProperties(page, broadcast)
-})
-
-// Toggle the main nav and the sub-nav items.
-onFind('.Page-nav', (nav) => {
-  nav.setAttribute('inert', '')
-  nav.addEventListener('keydown', (e) => {
-    switch (e.key) {
-      case 'Enter':
-        document.activeElement
-          .closest('li')
-          .setAttribute(
-            'aria-expanded',
-            document.activeElement.closest('li').matches('.is-expanded'),
-          )
-        break
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        _changeFocus(e.target.closest('li'), -1)
-        e.preventDefault()
-        e.stopPropagation()
-        break
-
-      case 'ArrowRight':
-      case 'ArrowDown':
-        _changeFocus(e.target.closest('li'), 1)
-        e.preventDefault()
-        e.stopPropagation()
-        break
-
-      case 'Escape':
-        if (
-          document.activeElement.closest('li').getAttribute('aria-expanded') ===
-            'false' ||
-          document.activeElement.parentElement.parentElement.parentElement.classList.contains(
-            'selected',
-          )
-        ) {
-          toggleMenu(nav.closest('.Page'), true)
-        } else if (
-          !e.target.closest('li').classList.contains('is-expanded') &&
-          !e.target
-            .closest('li')
-            .closest('ul')
-            .classList.contains('is-expanded')
-        ) {
-          toggleMenu(nav.closest('.Page'), true)
-        } else {
-          const linkParent = e.target.closest('.isNested')
-          linkParent.classList.remove('is-expanded')
-          linkParent.firstElementChild.focus()
-        }
-        break
-    }
-  })
-
-  const toggle = insertBefore(
-    create('button', {
-      className: 'Page-navToggle',
-      title: tooltips.menu.open,
-      'aria-label': tooltips.menu.open,
-      'aria-haspopup': 'true',
-      'aria-expanded': 'false',
-      onclick: (e) => {
-        toggleMenu(nav.closest('.Page'))
-      },
-      onkeydown: (e) => {
-        const mainBody = nav.closest('.Page')
-        const link = find(nav, ':scope > li')
-        switch (e.key) {
-          case 'ArrowUp':
-          case 'ArrowLeft':
-            nav.lastElementChild.querySelector('a').focus()
-            break
-
-          case 'ArrowDown':
-          case 'ArrowRight':
-            if (
-              link.classList.contains('isNested') &&
-              link.classList.contains('selected')
-            ) {
-              link
-                .querySelector('ul')
-                .firstElementChild.querySelector('a')
-                .focus()
-            } else {
-              link.querySelector('a').focus()
-            }
-            break
-        }
-      },
-    }),
-    nav,
-  )
-
-  for (const item of findAll(nav, '.isNested')) {
-    const key = `BSP.Page.navItemExpanded.${item.textContent.trim()}`
-    const link = find(item, ':scope > a')
-    const isExpanded = storage.get(key)
-    const title = isExpanded ? tooltips.collapse : tooltips.expand
-    const linkToggle = create('div', {
-      className: 'Page-navItemToggle',
-      'aria-label': title,
-    })
-
-    link.setAttribute('tabindex', 0)
-    item.setAttribute(
-      'aria-expanded',
-      item.classList.toggle('is-expanded', isExpanded),
-    )
-    link.appendChild(linkToggle)
-    link.title = title
-    link.addEventListener('click', (e) => {
-      e.preventDefault()
-      const isExpanded = item.classList.toggle('is-expanded')
-      link.title = isExpanded ? tooltips.collapse : tooltips.expand
-      linkToggle.setAttribute('aria-label', link.title)
-      storage.toggle(key, isExpanded)
-      item.setAttribute('aria-expanded', isExpanded)
-      if (isExpanded) {
-        setTimeout(
-          () => item.scrollIntoView({ behavior: 'smooth', block: 'nearest' }),
-          100,
-        )
-      }
-    })
-  }
-
-  // Hide the nav when clicking outside of it.
-  window.addEventListener('click', (e) => {
-    if (
-      !nav.contains(e.target) &&
-      !toggle.contains(e.target) &&
-      !window.BRIGHTSPOT?.ui.cms.enableV5UI
-    ) {
-      toggleMenu(nav.closest('.Page'), true)
-    }
-  })
-})
-
-// Rearrange all the controls in the header.
-onFind('.toolUserDisplay', (userDisplay) => {
-  const notifications = userDisplay.querySelector('.toolUserNotifications')
-  const notificationLink = userDisplay.querySelector('.toolUserNotifications a')
-
-  userDisplay.parentNode.insertBefore(
-    create(
-      'div',
-      {
-        className: 'Page-notifications',
-        'data-new': notificationLink.dataset.new,
-        'data-count': notificationLink.dataset.count,
-        'data-count-label': notificationLink.dataset.countLabel,
-      },
-      Array.from(notifications.children),
-    ),
-    userDisplay.nextSibling,
-  )
-
-  notifications.remove()
-})
-
-// Copy the profile actions into the profile popup.
-onFind('.Popup[name="profilePanel"] .p-tud > h1', (heading) => {
-  const controls = create('div', { className: 'Widget-controls' })
-
-  for (let link of document.querySelectorAll('.toolUserControls a')) {
-    link = link.cloneNode(true)
-
-    if (link.getAttribute('target')) {
-      link.setAttribute('data-popup-mode', 'local')
-    } else {
-      link.setAttribute('target', '_top')
-    }
-
-    controls.appendChild(link)
-  }
-
-  heading.parentNode.insertBefore(controls, heading.nextSibling)
-})
-
-onFind('.ProfileDropdown-items > li', (listItem) => {
-  listItem.addEventListener('click', (e) => {
-    e.target.dispatchEvent(new CustomEvent('close', { bubbles: true }))
-  })
-})
-
-function setBroadcastProperties(page, broadcast) {
-  if (broadcast) {
-    page.style.setProperty(
-      '--Page-headerBottom',
-      `calc(var(--Page-headerHeight) + ${broadcast.clientHeight}px)`,
-    )
-  }
-}
-
-function toggleMenu(pageEl, forceClose = false) {
-  const nav = pageEl?.querySelector('.Page-nav')
-  const willClose =
-    pageEl.classList.contains('is-navigating') || forceClose === true
-
-  willClose ? nav?.setAttribute('inert', '') : nav?.removeAttribute('inert')
-
-  // When opened, move focus to the first focusable item in the nav.
-  if (!willClose) {
-    nav
-      .querySelector(':scope .selected li:first-of-type')
-      ?.querySelector('a')
-      ?.focus()
-  }
-
-  const label = willClose ? tooltips.menu.open : tooltips.menu.close
-
-  pageEl.classList.toggle(
-    'is-navigating',
-    forceClose === true ? false : undefined,
-  )
-
-  const button = pageEl?.querySelector('.Page-navToggle')
-  if (!button) return
-  button.title = label
-  button.setAttribute('aria-label', label)
-  button.setAttribute('aria-expanded', !willClose)
-}
-
-// _changeFocus: focuses on the element currently being accessed by the keyboard based on the move value
-// move = -1 for arrow up or arrow left.
-// move = 1 for arrow down or arrow right
-function _changeFocus(currentFocus, move) {
-  const nav = document.querySelector('.Page-nav')
-
-  if (!currentFocus) {
-    return
-  }
-
-  let currentFocusClassList = currentFocus.classList
-  currentFocusClassList.remove('is-active')
-
-  if (
-    (currentFocusClassList.contains('selected') &&
-      currentFocusClassList.contains('isNested')) ||
-    currentFocusClassList.contains('is-expanded')
-  ) {
-    const firstEl = currentFocus.querySelector('ul').firstElementChild
-    if (firstEl != null) {
-      _changeFocus(firstEl, move)
-    }
-  }
-
-  let nextFocus
-  let currentFocusSibling
-  const closestLi = currentFocus.closest('ul').closest('li')
-  const closestNested = currentFocus.closest('.isNested')
-
-  if (move === 1) {
-    currentFocusSibling = currentFocus.nextSibling
-    const containsIsExpanded = currentFocus.classList.contains('is-expanded')
-
-    if (currentFocusSibling !== null) {
-      if (containsIsExpanded) {
-        nextFocus = currentFocus.querySelector('ul').firstElementChild
-      } else if (currentFocusSibling.tagName === 'LI') {
-        nextFocus = currentFocusSibling
-      }
-    } else {
-      if (!containsIsExpanded) {
-        if (closestNested.nextSibling !== null) {
-          nextFocus = closestLi.nextSibling
-        } else {
-          nextFocus =
-            nav.firstElementChild.querySelector('ul').firstElementChild
-        }
-      }
-    }
-    nextFocus.querySelector('a').focus()
-  } else {
-    currentFocusSibling = currentFocus.previousSibling
-    if (currentFocusSibling !== null) {
-      if (currentFocusSibling.tagName === 'LI') {
-        nextFocus = currentFocusSibling
-        nextFocus.querySelector('a').focus()
-      }
-      if (currentFocus.classList.contains('isNested')) {
-        nextFocus = currentFocusSibling.querySelector('ul').lastElementChild
-        nextFocus.querySelector('a').focus()
-      }
-    } else {
-      const focusPreviousSibling = closestNested.previousSibling
-      if (closestLi.classList.contains('isNested')) {
-        nextFocus = closestLi
-      } else if (focusPreviousSibling !== null) {
-        if (focusPreviousSibling.classList.contains('selected')) {
-          nextFocus = focusPreviousSibling.querySelector('ul').lastElementChild
-        } else {
-          nextFocus = closestLi
-        }
-      }
-      if (closestNested.classList.contains('selected')) {
-        const navLastChild = nav.lastElementChild
-        if (navLastChild.classList.contains('is-expanded')) {
-          nextFocus = navLastChild.querySelector('ul').lastElementChild
-        } else {
-          nextFocus = navLastChild
-        }
-      }
-      nextFocus.querySelector('a').focus()
-    }
-  }
-}
-
-onFindOnce('.Page-login', () => {
-  const pageLogin = document.querySelector('.Page-login')
-  const loginId = pageLogin.querySelector('label')?.htmlFor
-  if (loginId) document.getElementById(loginId)?.focus()
-})
-
-// Reloads the guide to the current subject (last item in a list of subjects).
-const subjects = []
-let currentHref
-
-function reloadGuide() {
-  if (!document.querySelector('.Page').classList.contains('is-guideOpen')) {
-    return
-  }
-
-  const { href, name } = subjects[subjects.length - 1]
-
-  if (href && href !== currentHref) {
-    currentHref = href
-    const container = document.querySelector('.Page-guide')
-
-    if (!container.querySelector(`:scope > .frame[name="${name}"]`)) {
-      const frame = document.createElement('div')
-
-      frame.classList.add('frame')
-      frame.setAttribute('name', name)
-      container.appendChild(frame)
-
-      const params = new URLSearchParams()
-
-      params.append('subject', href)
-
-      const link = document.createElement('a')
-      link.href = `${
-        document.querySelector('.Page-guideLink a').href
-      }?${params}`
-      link.target = name
-
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    }
-
-    // Remove guides associated with removed popups.
-    for (const frame of container.querySelectorAll(':scope > .frame')) {
-      const frameName = frame.getAttribute('name')
-
-      if (!subjects.some(({ name }) => name === frameName)) {
-        container.removeChild(frame)
-      }
-    }
-  }
-}
-
-function isFieldGuidePopup(div) {
-  const subject = div.dataset.href
-  const params = new URLSearchParams(subject)
-  return params.get('isFieldGuide') === 'true'
-}
-
-// When a page or a popup opens, set it to the current subject.
-let subjectIndex = 0
-
-onFind(['.Page', '.Popup'], (element) => {
-  // exclude calendar popup
-  if (element.getAttribute('name') === 'DateStringCalendarFrame') {
-    return
-  }
-
-  const href = element.dataset.href
-
-  if (href) {
-    subjects.push({
-      href,
-      name: `guide-${++subjectIndex}`,
-    })
-
-    if (isSubjectType(href)) {
-      element.setAttribute('data-subject-type', 'true')
-    }
-
-    reloadGuide()
-
-    onRemove(element, () => {
-      subjects.splice(subjects.indexOf(href), 1)
-      reloadGuide()
-    })
-  }
-})
-
-onFind('.Page-guideLink a', (link) => {
-  const page = link.closest('.Page')
-
-  if (page.classList.contains('is-guideOpen')) {
-    link.setAttribute('aria-expanded', 'true')
-  }
-
-  link.addEventListener(
-    'click',
-    (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-      const guideField = page.querySelector("div.Popup[name='guideField']")
-      // Close the field level guide if it is open as both guide views should not be open at the same time
-      if (guideField) {
-        let button = guideField.querySelector('.closeButton')
-        button.click()
-      }
-
-      const navToggle = page.querySelector('.Page-navToggle')
-      if (navToggle?.getAttribute('aria-expanded') === 'true') {
-        navToggle.click()
-      }
-
-      page.classList.add('is-guideOpen')
-      link.setAttribute('aria-expanded', 'true')
-      // Move focus to the guide close button once guide is opened
-      const closeButton = '.Page-guide a.Guide-close'
-      onFindOnce(closeButton, () => {
-        const button = document.querySelector(closeButton)
-        button.focus()
-      })
-      reloadGuide()
-    },
-    { capture: true },
-  )
-})
-
-onFind('.Guide-close', (link) => {
-  const page = link.closest('.Page')
-
-  link.addEventListener(
-    'click',
-    (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-      document
-        .querySelector('.CIG-row.is-openPopup')
-        ?.classList.remove('.is-openPopup')
-      page.classList.remove('is-guideOpen')
-      const guideLink = page.querySelector('.Page-guideLink a')
-      guideLink.setAttribute('aria-expanded', 'false')
-      guideLink.focus()
-      fetch(link.href)
-    },
-    { capture: true },
-  )
-})
-
-onFind(
-  '.Popup[name="edit-guide"] .ActionBar > button[name="action-save"]',
-  (button) => {
-    button.addEventListener('click', () => {
-      let frame = $(button).popup('source').frame('container')[0]
-
-      if (frame) {
-        if (frame.classList.contains('Guide-embedded')) {
-          frame = frame.closest('.Guide')?.closest('.frame')
-        }
-
-        if (frame) {
-          frame.parentNode?.removeChild(frame)
-        }
-      }
-    })
-  },
-)
-
-// If guide is open, scroll to the field that was clicked on
-onFind('a.CIG-guide', (link) => {
-  link.addEventListener('click', (event) => {
-    if (!document.querySelector('.Page').classList.contains('is-guideOpen')) {
-      return
-    }
-    event.preventDefault()
-    event.stopPropagation()
-
-    const href = link.getAttribute('href')
-    const params = href.substring(href.indexOf('?') + 1)
-    const urlParams = new URLSearchParams(params)
-    const fieldName = urlParams.get('fieldName')
-
-    const item = document.querySelector(
-      'div.Guide-field[data-field="' + fieldName + '"]',
-    )
-    if (!item) {
-      return
-    }
-    item.scrollIntoView({ behavior: 'smooth' })
-  })
-})
-
-// Remove extra frame if editing a field level note after saving
-onFind('div.Popup[name="edit-guide"] button[name="action-save"]', (button) => {
-  button.addEventListener('click', (event) => {
-    const div = button.closest('div.Popup[name="edit-guide"]')
-    if (!isFieldGuidePopup(div)) {
-      return
-    }
-    const guideDiv = div.parentElement.querySelector(
-      'div.Popup[name="guideField"]',
-    )
-    guideDiv.parentElement.removeChild(guideDiv)
-  })
-})
-
-// Refresh the main guide when closing the field level guide after closing
-onFind('div.Popup[name="edit-guide"] button.closeButton', (button) => {
-  button.addEventListener('click', (event) => {
-    const div = button.closest('div.Popup[name="edit-guide"]')
-    if (!isFieldGuidePopup(div)) {
-      return
-    }
-    // If the main guide has never been opened yet, no need to manually refresh the frame as it will update when it is
-    // opened the first time
-    const frameList = document.querySelectorAll('div.Page-guide>div.frame')
-    if (!frameList.length) {
-      return
-    }
-    const page = document.querySelector('.Page')
-    let typeSubject
-    let frame
-    // If there are multiple frames (ex: popups), the last frame should be selected
-    if (frameList.length > 1 && page.querySelector('div.Popup')?.dataset.href) {
-      typeSubject = page.querySelector('div.Popup').dataset.href
-      frame = frameList.item(frameList.length - 1)
-    } else {
-      typeSubject = document.querySelector('.Page').dataset.href
-      frame = frameList.item(0)
-    }
-    if (!typeSubject) {
-      return
-    }
-    const typeParams = new URLSearchParams()
-    typeParams.append('subject', typeSubject)
-    const link = create('a')
-    link.href = `${
-      document.querySelector('.Page-guideLink a').href
-    }?${typeParams}`
-    link.target = frame.getAttribute('name')
-
-    document.body.appendChild(link)
-    link.click()
-    document.body.removeChild(link)
-  })
-})
-
-onFind('.aria--skiptoContent', (btn) => {
-  btn.addEventListener('click', (evt) => {
-    // Choose the strategy for where focus should move:
-    // Move focus to the <main> element (default).
-    const main = document.querySelector('body main')
-    let el = main
-
-    // Move focus to Content Edit form?
-    const ce = main.querySelector('.ContentEdit')
-    if (ce) {
-      el = ce.querySelector('.ContentEdit-left') ?? ce
-    }
-
-    // Move focus to the inner ".main"? (ie: when left-rail is present in settings pages.)
-    const mm = main.querySelector('.main')
-    if (mm) {
-      el = mm
-    }
-
-    // Move focus to search results?
-    const sres = main.querySelector(':scope .SearchWidget-result')
-    if (sres) {
-      el = sres
-    }
-
-    // Move focus to advanced search results?
-    const advs = main.querySelector(':scope > .SearchWidget .SearchResult-view')
-    if (advs) {
-      el = advs
-    }
-
-    // Actually move focus.
-    if (el) {
-      el.setAttribute('tabindex', '-1')
-      el.focus({ focusVisible: true })
-    }
-  })
-})
-
-function isSubjectType(subject) {
-  const params = new URLSearchParams(subject)
-  return (
-    params.get('typeId') != null ||
-    params.get('id') != null ||
-    subject.includes('?typeId=') ||
-    subject.includes('?id=')
-  )
-}
-
-// SEARCH tabbing order functions
-function handleKeyDownForFocusTrap(
-  e,
-  hiddenSearch,
-  closestPopup,
-  isFullScreen = false,
-) {
-  if (e.key !== 'Tab') return
-
-  const isGlobalSearchPopup =
-    closestPopup !== document && closestPopup?.matches('.is-fromTop')
-  const isQueryField =
-    closestPopup !== document && closestPopup?.matches('[name="queryField"]')
-
-  const selectors = {
-    header:
-      (isFullScreen && 'header.Page-header') ||
-      (isGlobalSearchPopup && '.Page-search.toolSearch') ||
-      null,
-    popupClose: 'button.Popup-close.closeButton',
-    searchInput: '.SearchInput.SearchWidget-query',
-    actionsToggle: '.SearchWidget-actionsToggle',
-    reset: '.action.action-cancel',
-    contentTypeForm: '.searchFiltersType.SearchWidget-type',
-    searchFiltersRest: '.searchFiltersRest',
-    searchHistory: '.SearchWidget-history',
-    create: '.SearchWidget-create',
-    results: '.SearchWidget-result',
-    pageGuide: isFullScreen ? '.Page-guide' : null,
-    queryFieldDone: isQueryField ? '.QueryField-button' : null,
-  }
-
-  const elementGroups = Object.values(selectors)
-    .filter((selector) => selector)
-    .map((selector) => {
-      const startIndex =
-        selector === '.searchFiltersRest' && !hiddenSearch ? 1 : 0
-      const domElement = selector.includes('Page-search.toolSearch')
-        ? document
-        : closestPopup
-
-      return getFocusableDescendants(selector, domElement, startIndex)
-    })
-    .filter((group) => group !== null)
-
-  trapFocusWithin(e, elementGroups, !isFullScreen)
-}
-
-function searchFilterFocus(e, array) {
-  let lastItem
-  let secondLastItem
-
-  // If the last item is the Search Icon, the item before is the Combo Input.
-  if (array[array.length - 1].classList.contains('ContentSelector-search')) {
-    lastItem = array.pop()
-    secondLastItem = array.pop()
-  } else if (array[array.length - 1].classList.contains('ComboInput')) {
-    // There is no Search Icon. Combo Input is the last item.
-    lastItem = array.pop()
-  }
-
-  if (lastItem) {
-    const itemsToAdd = secondLastItem ? [secondLastItem, lastItem] : [lastItem]
-
-    if (itemsToAdd.length > 0) {
-      array.splice(1, 0, ...itemsToAdd)
-    }
-  }
-
-  let nextContainer = null
-  if (array[0].nextElementSibling instanceof HTMLElement) {
-    nextContainer = array[0].nextElementSibling
-  }
-
-  const newArray = nextContainer
-    ? tabbable(nextContainer, { includeContainer: true })
-    : []
-  const activeElementIsHTMLElement =
-    e.target instanceof HTMLElement || e.target instanceof SVGElement
-  const currentActiveIndex =
-    e.target && activeElementIsHTMLElement
-      ? array.indexOf(document.activeElement)
-      : -1
-  const keyType = e.shiftKey ? 'back' : 'forward'
-
-  if (keyType === 'forward') {
-    if (currentActiveIndex >= 0 && currentActiveIndex < array.length - 1) {
-      e.preventDefault()
-      array[currentActiveIndex + 1]?.focus()
-    } else if (currentActiveIndex === array.length - 1) {
-      e.preventDefault()
-      newArray[0]?.focus()
-    }
-  } else if (keyType === 'back') {
-    if (activeElementIsHTMLElement && e.target === newArray[0]) {
-      e.preventDefault()
-      array[array.length - 1]?.focus()
-    } else if (currentActiveIndex > 0) {
-      e.preventDefault()
-      array[currentActiveIndex - 1]?.focus()
-    }
-  }
-}
-
-function handleSearchWidget(findSelector, e) {
-  if (e.key !== 'Tab') return
-  onFind(findSelector, (el) => {
-    const tabbableArray = tabbable(el, { includeContainer: true })
-    if (tabbableArray && tabbableArray.length > 0) {
-      searchFilterFocus(e, tabbableArray)
-    }
-  })
-}
-
-/*
-Change tabbing order to match the visual order for the Users & Roles and Dashboards admin pages,
-Search fullscreen pages and popups, and Content Edit pages
-*/
-window.addEventListener('keydown', (e) => {
-  if (e.key !== 'Tab') return
-
-  const isAdminPage = document.querySelector('.Admin-main')
-  const isContentEdit = document.querySelector('.content-edit')
-  const isFullscreenSearch = document.querySelector(
-    '.SearchWidget[name="searchAdvancedFull"]',
-  )
-  const isFullscreenRTE = e.target.closest('.ProseMirror-fullscreen-container')
-
-  const visiblePopup = e.target.closest('.Popup.is-visible')
-  const popupSource = visiblePopup?.dataset.popupSourceClass
-
-  const isContentEditPopup = visiblePopup?.querySelector('.ContentEdit')
-  const isGlobalSearchPopup = visiblePopup?.matches('[name="miscSearch"]')
-  const isContentSelectorSearchPopup = popupSource?.includes(
-    'ContentSelector-search',
-  )
-  const isQueryFieldPopup = visiblePopup?.matches('[name="queryField"]')
-  const isSearchPopup =
-    isGlobalSearchPopup || isContentSelectorSearchPopup || isQueryFieldPopup
-
-  const isBulkWorkflow = document.querySelector('.BulkWorkflow')
-
-  if (
-    !isSearchPopup &&
-    !isFullscreenSearch &&
-    !isFullscreenRTE &&
-    !isContentEdit &&
-    !isAdminPage &&
-    !visiblePopup &&
-    !isBulkWorkflow
-  )
-    return
-
-  // SEARCH WIDGET
-  const searchSelector =
-    '.searchFilter.searchFilter-record.SearchWidget-filter.is-record.is-multiple.searchFilter-multiple'
-  if (isBulkWorkflow) {
-    const currentGroup = getFirstAndLastFocusableDescendants(isBulkWorkflow)
-    if (!currentGroup) return
-    trapFocusWithin(e, [currentGroup])
-  } else if (isSearchPopup) {
-    // check for search popups that have a search input that is display: none
-    const searchQueryElement = visiblePopup.querySelector('.SearchWidget-query')
-    const hiddenSearch =
-      window.getComputedStyle(searchQueryElement).display === 'none'
-    handleSearchWidget('.Popup ' + searchSelector, e)
-    handleKeyDownForFocusTrap(e, hiddenSearch, visiblePopup)
-  } else if (isFullscreenSearch && !visiblePopup) {
-    handleSearchWidget(searchSelector, e)
-    handleKeyDownForFocusTrap(e, false, document, true)
-  }
-
-  // FULLSCREEN RTE
-  else if (isFullscreenRTE) {
-    const elementGroups = [
-      getFirstAndLastFocusableDescendants(isFullscreenRTE),
-    ].filter((element) => element !== null)
-    trapFocusWithin(e, elementGroups)
-  }
-
-  // CONTENT EDIT
-  else if (isContentEditPopup || (!visiblePopup && isContentEdit)) {
-    const contentEdit = isContentEditPopup ? visiblePopup : document
-    const isV5UI = window.BRIGHTSPOT?.ui.cms.enableV5UI
-
-    const elementGroups = [
-      getFocusableDescendants('.Page-header', contentEdit),
-      isV5UI ? getFocusableDescendants('btu-nav-rail', contentEdit) : null,
-      isV5UI ? getFocusableDescendants('.Page-guide', contentEdit) : null,
-      isV5UI ? getFocusableDescendants('.Page-askAi', contentEdit) : null,
-      // V4-only "back" button
-      !isV5UI
-        ? getFocusableDescendants(
-            '.popup-objectId-edit-heading.Link',
-            contentEdit,
-          )
-        : null,
-      // Legacy V4 Content Edit title
-      !isV5UI
-        ? getFocusableDescendants('.ContentEdit-title.breadcrumbs', contentEdit)
-        : null,
-      // V5-only content edit popup close button
-      isV5UI && isContentEditPopup
-        ? getFocusableDescendants(
-            ':scope > .Popup-content > .Popup-close',
-            contentEdit,
-          )
-        : null,
-      getFocusableDescendants('.ContentEdit-top', contentEdit),
-      getFocusableDescendants('.ContentEdit-left', contentEdit),
-      getFocusableDescendants('.ContentEditDrawer.is-open', contentEdit),
-      getFocusableDescendants('.ContentEdit-preview:not([inert])', contentEdit),
-      getFocusableDescendants('.ContentEdit-right.is-visible', contentEdit),
-      getFocusableDescendants('.ContentEdit-toolbar', contentEdit),
-      !isV5UI ? getFocusableDescendants('.Page-guide', contentEdit) : null,
-      !isV5UI ? getFocusableDescendants('.Page-askAi', contentEdit) : null,
-    ].filter((element) => element !== null)
-
-    trapFocusWithin(e, elementGroups, !!isContentEditPopup)
-  }
-
-  // DASHBOARDS and USERS & ROLES
-  else if (isAdminPage && !visiblePopup) {
-    const isV5UI = window.BRIGHTSPOT?.ui.cms.enableV5UI
-
-    const elementGroups = [
-      getFocusableDescendants('.Page-header', document),
-      isV5UI ? getFocusableDescendants('btu-nav-rail', document) : null,
-      isV5UI ? getFocusableDescendants('.Page-guide', document) : null,
-      isV5UI ? getFocusableDescendants('.Page-askAi', document) : null,
-      getFocusableDescendants(
-        '.frame.loaded[name$="Result"] > ul.pagination',
-        document,
-      ),
-      getFocusableDescendants('.leftNav.Admin-nav .Widget-controls', document),
-      getFocusableDescendants(
-        '.leftNav.Admin-nav .Widget-controls + ul.LinkTable',
-        document,
-      ),
-      getFocusableDescendants('form[target$="Result"]', document),
-      getFocusableDescendants(
-        '.leftNav.Admin-nav form[target="dashboardsResult"] + ul.LinkTable',
-        document,
-      ),
-      getFocusableDescendants(
-        '.frame.loaded[name$="Result"] > ul.pagination + ul.LinkTable',
-        document,
-      ),
-    ].filter((element) => element !== null)
-
-    trapFocusWithin(e, elementGroups, false)
-  }
-
-  // REMAINING POPUPS
-  else if (visiblePopup) {
-    const elementGroups = [
-      getFirstAndLastFocusableDescendants(visiblePopup),
-    ].filter((element) => element !== null)
-    trapFocusWithin(e, elementGroups)
-  }
-})