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

package/src/legacy/tool-ui/src/dom/popupMenu.js

@@ -1,282 +0,0 @@
-import Tether from '../main/webapp/v4/dom/Tether'
-import { v1 as uuidv1 } from 'uuid'
-
-/*
-1st of 2 functions to call in order to make a dropdown menu ARIA-accessible. See docs/accessibility-best-practices.md for further instructions.
-
-Programmatically sets some required ARIA attributes, such as "role" and "aria-controls",
-and sets up listeners for keyboard activity.
-
-Parameters:
-  # list: <ul> or <div> with `role: menu`
-  # button: opens/closes the popup menu
-*/
-export function setupMenuForAria(list, button) {
-  formatMenuItems(list)
-  setAriaControls(list, button)
-  listenForFocusChanges(list, button)
-}
-
-/*
-2nd of 2 functions to call in order to make a dropdown menu ARIA-accessible. See docs/accessibility-best-practices.md for further instructions.
-
-Opens/closes menu, setting metadata appropriately. Places focus on first element and sets up
-a listener to automatically close menu when focus moves away.
-
-Parameters:
-  # list: <ul> or <div> with `role: menu`
-  # button: opens/closes the popup menu
-  # (optional) target: element to receive `is-open` class; defaults to `list` element
-*/
-export function toggleMenu(list, button, target = list) {
-  const collectionSelector = list.querySelector('.ComboInput') // temporary solution to ensure user can tab to Collection ComboInput in SearchResultActions
-  const triggerCloseMenu = (event) => {
-    if (
-      button.classList.contains('is-active') &&
-      event.key === 'Tab' &&
-      !list.contains(document.activeElement) &&
-      document.activeElement !== collectionSelector &&
-      document.activeElement !== button
-    ) {
-      button.click()
-    }
-  }
-
-  resetTabIndices(list, '[role="menuitem"]')
-  Tether.toggle(button, list, () => {
-    const isActive = button.classList.toggle('is-active')
-    if (isActive) {
-      button.setAttribute('aria-expanded', true)
-      window.addEventListener('keyup', triggerCloseMenu)
-      list.addEventListener(
-        'transitionend',
-        () => {
-          const visibleItems = findVisibleItems(list)
-          if (!visibleItems?.length) return
-          const firstFocus = getFirstFocus(visibleItems)
-          firstFocus?.setAttribute('tabindex', '0')
-          firstFocus?.focus()
-        },
-        { once: true },
-      )
-    } else {
-      button.setAttribute('aria-expanded', false)
-      window.removeEventListener('keyup', triggerCloseMenu)
-    }
-    return target.classList.toggle('is-open', isActive)
-  })
-}
-
-/*
-Find menu items and set tab indices to -1.
-
-PREFERRED USAGE: Menu options already setup with role: "menuitem"
-ALTERNATIVE USAGE: Defaults to applying role: "menuitem" to any visible buttons & anchor elements within the menu
-*/
-function formatMenuItems(list) {
-  resetTabIndices(list, 'button, a')
-
-  // failsafe to catch alternative usage
-  const menuItemExists = list.querySelector('[role="menuitem"]')
-  if (!menuItemExists) {
-    const buttons = list.querySelectorAll('button, a')
-    buttons.forEach((button) => {
-      if (!button.hasAttribute('role')) {
-        button.setAttribute('role', 'menuitem')
-        button.classList.add('Dropdown-item')
-      }
-    })
-  }
-}
-
-/*
-Programmatically associates menu toggle with the menu it controls
-*/
-function setAriaControls(list, button) {
-  if (!button.hasAttribute('aria-controls')) {
-    if (!list.id) list.id = uuidv1()
-    button.setAttribute('aria-controls', list.id)
-  }
-}
-
-function listenForFocusChanges(list, button) {
-  listenForArrowKeyOnMenuToggle(list, button)
-  listenForArrowKeyInMenu(list, button)
-  listenForMenuItemClick(list, button)
-}
-
-/*
-Closes the menu whenever an interior button or link, regardless of its role, is clicked
-*/
-export function listenForMenuItemClick(list, button) {
-  const listitems = list.querySelectorAll('button, a, [role="menuitem"]')
-  listitems.forEach((item) => {
-    item.addEventListener('click', () => {
-      if (button.getAttribute('aria-expanded') === 'true') {
-        button.click()
-        button.focus()
-      }
-    })
-  })
-}
-
-/*
-Allows the following interactions:
-  1. User presses Right or Down Arrow Key on menu toggle to open menu and place focus on first menu item
-  2. User presses Left or Up Arrow Key on menu toggle to open menu and place focus on last menu item
-
-Exceptions:
-  If menu toggle is within a toolbar the orientation of the toolbar will determine
-  which arrow keys will open the menu and move focus.
-  - Horizontal toolbars (default) will only allow the up/dowm arrow keys to open the menu.
-  - Vertical toolbars will only allow the left/right arrow keys to open the menu.
-*/
-function listenForArrowKeyOnMenuToggle(list, button) {
-  button.addEventListener('keydown', (e) => {
-    const tb = list.closest('[role="toolbar"]')
-    const tbOrientation = tb?.getAttribute('aria-orientation')
-
-    switch (e.key) {
-      case 'ArrowDown':
-      case 'ArrowRight':
-        // Exit early.
-        if (
-          !!tb &&
-          ((tbOrientation === 'vertical' && e.key === 'ArrowDown') ||
-            (tbOrientation !== 'vertical' && e.key === 'ArrowRight'))
-        ) {
-          break
-        }
-        button.click()
-        e.stopPropagation()
-        e.preventDefault()
-        break
-      case 'ArrowUp':
-      case 'ArrowLeft':
-        // Exit early.
-        if (
-          !!tb &&
-          ((tbOrientation === 'vertical' && e.key === 'ArrowUp') ||
-            (tbOrientation !== 'vertical' && e.key === 'ArrowLeft'))
-        ) {
-          break
-        }
-        button.click()
-        if (button.getAttribute('aria-expanded') === 'true') {
-          list.addEventListener(
-            'transitionend',
-            () => {
-              changeFocus(getFirstFocus(findVisibleItems(list)), -1)
-            },
-            { once: true },
-          )
-        }
-        break
-    }
-  })
-}
-
-/*
-Allows user to use arrow keys to navigate the menu
-*/
-function listenForArrowKeyInMenu(list, button) {
-  list.addEventListener('keydown', (e) => {
-    switch (e.key) {
-      case 'Escape':
-        button.click()
-        button.focus()
-        e.preventDefault()
-        e.stopPropagation()
-        break
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        changeFocus(e.target, -1)
-        e.preventDefault()
-        break
-      case 'ArrowRight':
-      case 'ArrowDown':
-        changeFocus(e.target, 1)
-        e.preventDefault()
-        break
-    }
-  })
-}
-
-function changeFocus(currentFocus, move) {
-  const list = findList(currentFocus)
-  const menuitems = findVisibleItems(list)
-  if (!list || !menuitems) return
-
-  const curIndex = menuitems.indexOf(currentFocus)
-  if (curIndex === -1) return
-  currentFocus.setAttribute('tabindex', '-1')
-
-  // If a focus classname was used, remove it.
-  const itemWithFocusClass = list.querySelector('li.focus')
-  if (itemWithFocusClass) {
-    itemWithFocusClass.classList.remove('focus')
-  }
-
-  // move focus to previous item or wrap around to end
-  if (move === -1) {
-    let targetElement =
-      curIndex - 1 > -1
-        ? menuitems[curIndex - 1]
-        : menuitems[menuitems.length - 1]
-    targetElement.setAttribute('tabindex', '0')
-    targetElement.focus()
-    // If a focus classname was used, restore it.
-    if (itemWithFocusClass) {
-      targetElement.closest('li')?.classList.add('focus')
-    }
-  }
-  // move focus to next item or wrap around to beginning
-  if (move === 1) {
-    let targetElement =
-      curIndex + 1 < menuitems.length ? menuitems[curIndex + 1] : menuitems[0]
-    targetElement.setAttribute('tabindex', '0')
-    targetElement.focus()
-    // If a focus classname was used, restore it.
-    if (itemWithFocusClass) {
-      targetElement.closest('li')?.classList.add('focus')
-    }
-  }
-}
-
-function resetTabIndices(list, query) {
-  const itemsToReset = list.querySelectorAll(query)
-  itemsToReset.forEach((item) => {
-    item.setAttribute('tabindex', '-1')
-  })
-}
-
-function findVisibleItems(list) {
-  if (!list) return
-  return Array.from(list.querySelectorAll('[role="menuitem"]')).filter(
-    (item) => {
-      return (
-        !item.hasAttribute('aria-hidden') &&
-        !item.closest('[aria-hidden="true"]') &&
-        !(window.getComputedStyle(item).display === 'none') &&
-        !item.classList.contains('screen-reader-only')
-      )
-    },
-  )
-}
-
-function getFirstFocus(menuitems) {
-  for (const item of menuitems) {
-    if (
-      item.matches('.is-selected, .selected') ||
-      item.parentElement.matches('.is-selected, .selected')
-    ) {
-      return item
-    }
-  }
-  return menuitems[0]
-}
-
-function findList(item) {
-  if (!item) return
-  return item.closest('.is-open') || item.closest('ul')
-}

package/src/legacy/tool-ui/src/dom/previousUntil.ts

@@ -1,22 +0,0 @@
-/* Loops through the previous siblings of a DOM element
-   and returns the first element which matches the selector.
-   If no match is found null is returned. */
-export default function previousUntil(
-  elem: Element,
-  selector: string,
-): Element | null {
-  if (elem.previousElementSibling !== null) {
-    elem = elem.previousElementSibling
-  }
-  while (elem) {
-    if (elem.matches(selector)) {
-      return elem
-    }
-    if (elem.previousElementSibling !== null) {
-      elem = elem.previousElementSibling
-    } else {
-      break
-    }
-  }
-  return null
-}

package/src/legacy/tool-ui/src/dropdown/README.md

@@ -1,9 +0,0 @@
-# Dropdown Web Component
-
-This is a web component that resembles a dropdown.
-
-## Methods
-
-| Name                 | Params | Description                            |
-| -------------------- | ------ | -------------------------------------- |
-| `_appendChild(item)` | none   | Appends the item to the dropdown list. |

package/src/legacy/tool-ui/src/dropdown/index.ts

@@ -1,105 +0,0 @@
-import { LitElement, html, nothing } from 'lit'
-import { customElement, queryAsync, property } from 'lit/decorators.js'
-import { EventEmitterMixin } from '../EventEmitterMixin'
-import { setupMenuForAria, toggleMenu } from '../dom/popupMenu'
-
-@customElement('btu-dropdown')
-export default class Dropdown extends EventEmitterMixin(LitElement) {
-  @queryAsync('.Dropdown-container')
-  _dropdownContainer?: Promise<HTMLElement>
-
-  @property({ type: Boolean })
-  isEmpty = false
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this._dropdownContainer?.then((container) => {
-      if (!container) return
-      const dropdownButton = container.querySelector('.Dropdown-button')
-      const dropdown = container.querySelector<HTMLElement>('.Dropdown')
-      const isV5 = window.BRIGHTSPOT?.ui.cms.enableV5UI
-
-      if (isV5) dropdown?.setAttribute('popover', '')
-
-      dropdownButton?.addEventListener('click', () => {
-        toggleMenu(dropdown, dropdownButton)
-        setupMenuForAria(dropdown, dropdownButton)
-        isV5 && dropdown?.togglePopover()
-      })
-    })
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-
-    this._dropdownContainer?.then((container) => {
-      if (!container) return
-      const dropdownButton = container.querySelector('.Dropdown-button')
-      const dropdown = container.querySelector('.Dropdown')
-
-      dropdownButton?.removeEventListener('click', () => {
-        toggleMenu(dropdown, dropdownButton)
-        setupMenuForAria(dropdown, dropdownButton)
-      })
-    })
-  }
-
-  firstUpdated() {
-    this._dropdownContainer?.then((container) => {
-      const items = this.querySelectorAll<HTMLLIElement>(':scope > li')
-
-      items.forEach((item: HTMLLIElement) => {
-        this._addDropdownItem(item)
-      })
-
-      const dropdown = container.querySelector('.Dropdown')
-      this.isEmpty = dropdown?.children.length === 0
-    })
-  }
-
-  _addDropdownItem(item: HTMLElement) {
-    if (item?.childNodes.length) {
-      this._dropdownContainer?.then((container) => {
-        const dropdown = container.querySelector('.Dropdown')
-        const action = item.querySelector(':scope > a, :scope > button')
-
-        action?.classList.add('Dropdown-item')
-        action?.setAttribute('role', 'menuitem')
-
-        dropdown?.appendChild(item)
-      })
-    }
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  render() {
-    if (this.isEmpty) return nothing
-
-    return html`<div class="Dropdown-container">
-      <button
-        class="Dropdown-button"
-        title=${window.BRIGHTSPOT?.ui.tooltips.actions?.actions}
-        type="button"
-        aria-label=${window.BRIGHTSPOT?.ui.tooltips.actions?.contentSelector}
-        aria-haspopup="menu"
-        aria-expanded="false"
-      ></button>
-      <ul
-        class="Dropdown"
-        role="menu"
-        aria-orientation="vertical"
-        aria-label=${window.BRIGHTSPOT?.ui.tooltips.actions?.actions}
-      ></ul>
-    </div>`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-dropdown': Dropdown
-  }
-}

package/src/legacy/tool-ui/src/form/CodeInput/CodeMirror.less

@@ -1,168 +0,0 @@
-.CodeMirror {
-  background: var(--color-white);
-  border: 1px solid var(--Input-borderColor);
-  color: var(--color-black);
-  height: auto;
-}
-
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  background-color: var(--color-white);
-}
-
-.CodeMirror-gutters {
-  background-color: var(--color-gray1);
-  border-right-color: var(--Input-borderColor);
-}
-
-.CodeMirror-linenumber {
-  color: var(--color-gray5);
-}
-
-.CodeMirror-guttermarker {
-  color: var(--color-black);
-}
-
-.CodeMirror-guttermarker-subtle {
-  color: var(--color-gray5);
-}
-
-.CodeMirror-cursor {
-  border-left-color: var(--color-black);
-}
-
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid var(--color-gray2);
-}
-
-.cm-fat-cursor .CodeMirror-cursor {
-  background: var(--color-green2);
-}
-
-.cm-fat-cursor-mark {
-  background-color: rgb(var(--rgb-green) / 50%);
-}
-
-.cm-animate-fat-cursor {
-  background-color: var(--color-green2);
-}
-
-.CodeMirror-ruler {
-  border-left: 1px solid var(--color-gray2);
-}
-
-.cm-s-default .cm-header {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-quote {
-  color: var(--color-green5);
-}
-
-.cm-negative {
-  color: var(--color-red5);
-}
-
-.cm-positive {
-  color: var(--color-green5);
-}
-
-.cm-s-default .cm-keyword {
-  color: var(--color-purple5);
-}
-
-.cm-s-default .cm-atom {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-number {
-  color: var(--color-green5);
-}
-
-.cm-s-default .cm-def {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-variable-2 {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-variable-3,
-.cm-s-default .cm-type {
-  color: var(--color-green5);
-}
-
-.cm-s-default .cm-comment {
-  color: var(--color-orange5);
-}
-
-.cm-s-default .cm-string {
-  color: var(--color-red5);
-}
-
-.cm-s-default .cm-string-2 {
-  color: var(--color-orange5);
-}
-
-.cm-s-default .cm-meta {
-  color: var(--color-gray5);
-}
-
-.cm-s-default .cm-qualifier {
-  color: var(--color-gray5);
-}
-
-.cm-s-default .cm-builtin {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-bracket {
-  color: var(--color-gray5);
-}
-
-.cm-s-default .cm-tag {
-  color: var(--color-green5);
-}
-
-.cm-s-default .cm-attribute {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-hr {
-  color: var(--color-gray5);
-}
-
-.cm-s-default .cm-link {
-  color: var(--color-blue5);
-}
-
-.cm-s-default .cm-error {
-  color: var(--color-red5);
-}
-
-.cm-invalidchar {
-  color: var(--color-red5);
-}
-
-div.CodeMirror span.CodeMirror-matchingbracket {
-  color: var(--color-green5);
-}
-
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: var(--color-red5);
-}
-
-.CodeMirror-matchingtag {
-  background: var(--color-orange5);
-}
-
-.CodeMirror-activeline-background {
-  background: var(--color-gray1);
-}
-
-.CodeMirror pre.CodeMirror-placeholder {
-  color: var(--Input-placeholderColor);
-  font-style: italic;
-  height: auto !important;
-  margin-bottom: calc(0px - var(--Text-height));
-}

package/src/legacy/tool-ui/src/form/CodeInput/CodeMirror.ts

@@ -1,15 +0,0 @@
-import CodeMirror from 'codemirror'
-
-import 'codemirror/addon/display/placeholder'
-import 'codemirror/mode/clike/clike'
-import 'codemirror/mode/css/css'
-import 'codemirror/mode/handlebars/handlebars'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/htmlembedded/htmlembedded'
-import 'codemirror/mode/htmlmixed/htmlmixed'
-import 'codemirror/mode/xml/xml'
-
-import 'codemirror/lib/codemirror.css'
-import './CodeMirror.less'
-
-export default CodeMirror

package/src/legacy/tool-ui/src/form/CodeInput/index.ts

@@ -1,86 +0,0 @@
-import { html, LitElement, PropertyDeclarations } from 'lit'
-
-export default class CodeInput extends LitElement {
-  static get tagName() {
-    return 'btu-code-input'
-  }
-
-  static get properties(): PropertyDeclarations {
-    return {
-      name: {},
-      type: {},
-      placeholder: {},
-      placeholderEditable: { type: Boolean },
-      value: {},
-    }
-  }
-
-  name?: string
-  type?: string
-  placeholder?: string
-  placeholderEditable?: boolean
-  #editor?: CodeMirror.Editor
-  #value?: string
-
-  get value() {
-    if (this.#editor) {
-      return this.#editor.getValue()
-    } else {
-      return this.#value || ''
-    }
-  }
-
-  set value(value) {
-    if (this.#editor) {
-      this.#editor.setValue(value || '')
-    } else {
-      this.#value = value
-    }
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  render() {
-    return this.name
-      ? html`<input type="hidden" name="${this.name}" .value=${this.value} />`
-      : ''
-  }
-
-  async firstUpdated() {
-    const { default: CodeMirror } = await import(
-      /* webpackChunkName: 'CodeMirror' */ './CodeMirror'
-    )
-
-    this.#editor = CodeMirror(this, {
-      indentUnit: 4,
-      lineNumbers: true,
-      lineWrapping: true,
-      mode: this.type || '',
-      placeholder: this.placeholder || '',
-      value: this.value || '',
-    })
-
-    this.#editor.on('change', () => {
-      this.requestUpdate()
-      this.dispatchEvent(new Event('change', { bubbles: true }))
-    })
-
-    if (this.placeholderEditable) {
-      this.#editor.on('focus', () => {
-        if (this.#editor && !this.#editor.getValue()) {
-          this.#editor.setValue(this.placeholder || '')
-        }
-      })
-
-      this.#editor.on('blur', () => {
-        if (this.#editor && this.#editor.getValue() === this.placeholder) {
-          this.#editor.setValue('')
-        }
-      })
-    }
-  }
-}
-
-customElements.define(CodeInput.tagName, CodeInput)