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

@@ -0,0 +1,890 @@
+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)
+  }
+})