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

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

@@ -0,0 +1,282 @@
+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

@@ -0,0 +1,22 @@
+/* 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

@@ -0,0 +1,9 @@
+# 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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,168 @@
+.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

@@ -0,0 +1,15 @@
+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

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