@brightspot/ui 3.0.1 → 5.0.1

package/src/legacy/tool-ui/src/SharePreview.css

@@ -0,0 +1,71 @@
+.SharePreview,
+.ViewMirror {
+  @apply grid h-[100dvh] w-[100vw] bg-gray-50 [grid-template:"title_title"_auto_"type_controls"_auto_"content_content"_1fr_/_auto_1fr];
+}
+
+.SharePreview-title,
+.ViewMirror-title {
+  @apply flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-[0.38rem] text-sm font-medium [grid-area:title];
+  a {
+    @apply text-black;
+  }
+}
+
+.SharePreview-info {
+  @apply grow truncate;
+}
+
+.SharePreview-content,
+.ViewMirror-content {
+  @apply contents;
+}
+
+.SharePreviewExpiration {
+  @apply flex items-center gap-2;
+}
+
+@scope (.SharePreview, .ViewMirror) {
+  & .PreviewFrame,
+  .PreviewFrame-typeFrame,
+  .PreviewFrame-typeControlsContainer,
+  .PreviewFrame-typeControlsContainer > form {
+    @apply contents;
+  }
+
+  & .PreviewFrame-types {
+    @apply border-b bg-white py-4 pe-2 ps-6 [grid-area:type];
+  }
+
+  /* When there's no preview type options, have the other controls span both columns */
+  &
+    .PreviewFrame-types[style*='display: none']
+    + .PreviewFrame-typeFrame
+    .PreviewFrame-iFrameControlsForm {
+    @apply col-span-full ps-6;
+  }
+
+  & .PreviewFrame-typeDisplay {
+    @apply relative m-4 mt-2 grid [grid-area:content] [grid:subgrid/subgrid];
+
+    iframe {
+      @apply col-span-full;
+    }
+  }
+
+  & .PreviewFrame-iFrameControlsForm {
+    @apply flex flex-wrap gap-2 border-b border-b-gray-200 bg-white py-4 pe-6 [grid-area:controls];
+  }
+
+  & .PreviewFrame-typeControls,
+  & .PreviewFrame-moreActions {
+    @apply hidden;
+  }
+
+  & .PreviewFrame-typeControls:has(select) {
+    @apply flex items-center gap-2;
+  }
+
+  & .ComboInput {
+    @apply max-w-[25dvw];
+  }
+}

package/src/legacy/tool-ui/src/SkipLinks.css

@@ -0,0 +1,23 @@
+.SkipLinks {
+  @apply absolute left-0 top-0 z-[10000] m-4 flex w-[343px] flex-col items-start rounded-lg bg-white shadow-lg transition-[transform,opacity] duration-150 ease-in-out;
+}
+
+.SkipLinks:not(:focus-within) {
+  @apply -translate-y-[200%] opacity-0;
+}
+
+.SkipLinks-heading {
+  @apply btu-heading-5 px-4 py-2 text-gray-900;
+}
+
+.SkipLinks-note {
+  @apply border-t border-t-gray-200 px-4 pb-2 pt-4 text-sm text-gray-500;
+}
+
+.SkipLinks-list {
+  @apply flex w-full list-none flex-col gap-2 px-4 pb-4;
+}
+
+.SkipLinks-link {
+  @apply btu-button btu-button-fill-none btu-button-primary w-full justify-start bg-white;
+}

package/src/legacy/tool-ui/src/SkipLinks.ts

@@ -0,0 +1,112 @@
+import './SkipLinks.css'
+import onFind from './dom/onFind'
+import { focusRegionManager } from './FocusRegions'
+import create from './dom/create'
+import { localizeShortcut } from './platform'
+
+onFind('.aria--skiptoContent', (originalButton: HTMLElement) => {
+  let nav: HTMLElement | null = null
+  let list: HTMLElement | null = null
+  let note: HTMLElement | null = null
+  let lastRegionKey = ''
+
+  const skipToPrefix = window.BRIGHTSPOT?.ui.tooltips.skipLinks.heading
+
+  originalButton.addEventListener('focus', () => {
+    const layer = focusRegionManager.getTopLayer()
+    const regions = focusRegionManager.getVisibleRegions(layer)
+
+    // Grab the visible regions and filter for those with labels
+    const labeledRegions = regions
+      .map((config) => ({
+        config,
+        label: focusRegionManager.getRegionLabel(config),
+      }))
+      .filter(
+        (entry): entry is { config: typeof entry.config; label: string } =>
+          entry.label !== null,
+      )
+
+    // No labeled regions — leave the original button as-is
+    if (labeledRegions.length === 0) return
+
+    // Skip rebuild if the set of visible labeled regions hasn't changed
+    const regionKey = labeledRegions
+      .map((r) => `${r.config.id}:${r.label}`)
+      .join('|')
+    const needsRebuild = regionKey !== lastRegionKey
+
+    // Build the panel shell once
+    if (!nav) {
+      nav = create('nav', {
+        className: 'SkipLinks',
+        'aria-label': skipToPrefix,
+      })
+
+      const heading = create('h2', {
+        className: 'SkipLinks-heading',
+        textContent: skipToPrefix,
+      })
+
+      const rawSkipNote = window.BRIGHTSPOT?.ui.tooltips.skipLinks.note
+      const skipNote = rawSkipNote ?? ''
+      note = create('p', {
+        className: 'SkipLinks-note',
+        textContent: localizeShortcut(skipNote),
+      })
+
+      list = create('ul', {
+        className: 'SkipLinks-list',
+      })
+
+      nav.append(heading, note, list)
+      originalButton.insertAdjacentElement('beforebegin', nav)
+    }
+
+    // Rebuild links only when regions have changed
+    if (needsRebuild && list) {
+      lastRegionKey = regionKey
+      list.innerHTML = ''
+
+      for (const { config, label } of labeledRegions) {
+        const li = create('li')
+        const link = create('button', {
+          className: 'SkipLinks-link',
+          type: 'button',
+          textContent: label,
+          'aria-label': `${skipToPrefix} ${label}`,
+        })
+        link.addEventListener('click', () => {
+          if (!config.element.isConnected) return
+          focusRegionManager.focusRegion(config, document.body)
+        })
+        li.append(link)
+        list.append(li)
+      }
+    }
+
+    // Hide the original button and move focus to the first link
+    originalButton.hidden = true
+    nav.removeAttribute('aria-hidden')
+    const firstLink = nav.querySelector<HTMLElement>('.SkipLinks-link')
+    firstLink?.focus()
+  })
+
+  // Dismiss with Escape key
+  document.addEventListener('keydown', (e) => {
+    if (!nav || e.key !== 'Escape') return
+    if (nav.contains(document.activeElement)) {
+      originalButton.hidden = false
+      originalButton.focus()
+    }
+  })
+
+  // When focus leaves the panel, re-show the original button for next time
+  document.addEventListener('focusin', (e) => {
+    if (!nav) return
+    if (!nav.contains(e.target as Node)) {
+      originalButton.hidden = false
+      nav.setAttribute('aria-hidden', 'true')
+    }
+  })
+})

package/src/legacy/tool-ui/src/SlackAuthentication.css

@@ -0,0 +1,9 @@
+.SlackAuthContainer {
+  > div > form {
+    @apply flex gap-2;
+  }
+
+  .ComboInput {
+    @apply min-w-[50%];
+  }
+}

package/src/legacy/tool-ui/src/Sortable.css

@@ -0,0 +1,50 @@
+/* Border & color animation on item placed in new spot */
+.Sortable-item.is-added {
+  --border-from: theme(colors.primary.600);
+  --border-to: theme(colors.gray.300);
+  --bg-from: theme(colors.primary.25);
+  --bg-to: theme(colors.white.DEFAULT);
+
+  @apply animate-sortable-added;
+}
+
+.Sortable-item.is-added *,
+.Sortable-item.is-added *::before {
+  --bg-start: theme(colors.primary.25);
+  --bg-end: theme(colors.white.DEFAULT);
+
+  @apply animate-sortable-added-bg;
+}
+
+.Sortable-drag.Sortable-selected,
+.Sortable-drag.Sortable-chosen {
+  --drag-count: 1;
+
+  @apply flex items-center justify-center rounded-lg !border !border-solid border-primary-600 bg-primary-25 content-[--drag-label] before:text-sm before:font-semibold before:!text-gray-700 before:!no-underline before:content-["Move_"_counter(count)_"_item"_attr(item-suffix)] before:[counter-reset:count_var(--drag-count)];
+
+  > * {
+    @apply !hidden;
+  }
+}
+
+/* Override opacity 0.8 style coming from Sortablejs. */
+.Sortable-drag {
+  @apply animate-sortable-drag !opacity-100;
+}
+
+.Sortable-ghost {
+  @apply scale-x-95 !border !border-dashed !border-primary-600 !bg-primary-25 before:!hidden after:!hidden;
+}
+
+.MultiSortable-buttonToggle {
+  @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-list-end touch-device:btu-button-sm;
+}
+
+.Sortable-selected .MultiSortable-buttonToggle {
+  @apply !bg-primary-50 before:text-primary-800;
+}
+
+/* RCIGs do not get this cursor because they use handles and the whole thing isn't draggable */
+.MultiSortable:not(.RCIG-item) {
+  @apply hover:cursor-move;
+}

package/src/legacy/tool-ui/src/Spellcheck.css

@@ -0,0 +1,34 @@
+.ProseMirror {
+  &.is-typing {
+    .problem {
+      @apply no-underline;
+    }
+  }
+
+  .problem {
+    @apply underline decoration-error-700 decoration-wavy decoration-1 [text-decoration-skip-ink:none] [text-underline-position:under];
+  }
+
+  .problem[data-suggestions] {
+    @apply cursor-pointer;
+  }
+}
+
+.ProseMirror-spellcheck-suggestions {
+  @apply Dropdown min-w-[148px] [--Page-headerBottom:var(--page-header-h)];
+
+  &.is-opening:not(.is-removing) {
+    @apply Dropdown-is-open;
+  }
+
+  > li {
+    @apply Dropdown-item;
+  }
+}
+
+/* Highlight misspelled text in blue when suggestions are open */
+.Page:has(> .ProseMirror-spellcheck-suggestions.is-opening) {
+  .problem[data-suggestions]::selection {
+    @apply bg-primary-50 text-primary-900;
+  }
+}

package/src/legacy/tool-ui/src/StyleEmbeddedContent.css

@@ -0,0 +1,62 @@
+.StyleEmbeddedContent {
+  @apply relative flex h-[calc(100dvh_-_1px_-_4rem_-_var(--gap)_*_2)] flex-col;
+}
+
+.StyleEmbeddedContent-heading {
+  @apply pb-4 pt-6 text-md font-semibold text-gray-900;
+}
+
+.StyleEmbeddedContent-content {
+  @apply h-full overflow-auto md:grid md:grid-cols-[17.5rem_1fr];
+}
+
+.StyleEmbeddedContent-nav {
+  @apply w-full border-b border-r border-gray-200 bg-gray-50 md:overflow-y-auto md:border-b-0;
+}
+
+.StyleEmbeddedContent-search {
+  @apply relative block;
+}
+
+.StyleEmbeddedContent-search input {
+  @apply m-4 w-[calc(100%_-_theme(spacing.8))] border-transparent bg-gray-100 !ps-[calc(theme(iconSize.md)+theme(spacing.6))];
+}
+
+.StyleEmbeddedContent-search label {
+  @apply pointer-events-none absolute bottom-0 left-8 top-0 z-10 my-auto size-5 overflow-hidden before:btu-icon before:btu-icon-search;
+}
+
+.StyleEmbeddedContent-nav ul {
+  @apply grid gap-2 border-t p-4;
+}
+
+.StyleEmbeddedContent-nav li > a {
+  @apply block rounded-lg p-2 text-sm font-semibold text-gray-700 no-underline;
+
+  &:hover {
+    @apply bg-gray-100 text-gray-900;
+  }
+}
+
+.StyleEmbeddedContent-nav li.is-selected a {
+  @apply bg-primary-50 text-gray-900;
+}
+
+.StyleEmbeddedContent-main {
+  @apply bg-gray-100 p-6 pt-0 md:overflow-y-auto;
+}
+
+.StyleEmbeddedContent-items {
+  @apply !grid grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] gap-4;
+  li {
+    @apply flex;
+  }
+}
+
+.LinkTable.StyleEmbeddedContent-items {
+  @apply grid-cols-1;
+}
+
+.StyleEmbeddedContent-warning {
+  @apply hidden;
+}

package/src/legacy/tool-ui/src/Suggestions.css

@@ -0,0 +1,53 @@
+.Suggestions {
+  @apply py-4;
+}
+
+.Suggestions-refresh button {
+  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray mb-4 w-full before:btu-icon before:btu-icon-refresh-cw;
+}
+
+.Suggestions-refresh button.is-refreshing {
+  @apply opacity-50 before:animate-spin;
+}
+
+.Suggestions-list {
+  @apply border-t border-gray-200;
+}
+
+.Suggestions-list > .Widget-title {
+  @apply !border-b-0 !bg-gray-50;
+}
+
+.Suggestions-list-add {
+  @apply flex flex-wrap gap-2 py-4 !pe-2 pt-2;
+}
+
+.Suggestion-add {
+  @apply btu-badge-primary btu-badge-sm cursor-pointer hover:bg-primary-100 hover:text-primary-800;
+}
+
+.Suggestion-add.is-added {
+  @apply btu-badge-gray pointer-events-none text-gray-400 mix-blend-multiply dark:bg-gray-100 dark:mix-blend-normal;
+}
+
+.Suggestions-list-create {
+  @apply flex-col;
+}
+
+.Suggestion-create {
+  @apply py-2;
+}
+
+.Suggestion-create a {
+  @apply text-sm;
+}
+
+.Suggestion-create:not(:first-child),
+.Suggestions-list-create-item:not(:first-child) {
+  @apply border-t border-gray-200;
+}
+
+/* Error message (AWS Comprehend job failed) */
+.Suggestions .Message.is-error {
+  @apply mb-4;
+}

package/src/legacy/tool-ui/src/Suggestions.ts

@@ -0,0 +1,209 @@
+import onFind from './dom/onFind'
+import Cookies from 'js-cookie'
+import rtc from './rtc'
+
+interface PublishBroadcastData {
+  mainObjectId: string
+  contentId: string
+}
+
+// Updates the list of suggestions added to fields
+function updateAddedSuggestions(): void {
+  const addedSuggestions = new Set<string>()
+  const selected = document.getElementsByClassName('ContentSelector-select')
+
+  Array.from(selected)
+    .filter((list) => list.firstChild !== null)
+    .forEach((list) => {
+      const firstChild = list.firstChild as HTMLElement
+      const id = firstChild?.getAttribute('value')
+      const parentNode = list.parentNode as HTMLElement
+      if (id && !parentNode.classList.contains('is-removing')) {
+        addedSuggestions.add(id)
+      }
+    })
+  updateSuggestionsVisibility(addedSuggestions)
+}
+
+// Updates the visibility of added suggestions
+function updateSuggestionsVisibility(
+  addedSuggestionsArray2: Set<string>,
+): void {
+  const addedClassName = 'is-added'
+  document
+    .querySelectorAll<HTMLElement>('.Suggestion-add')
+    .forEach((suggestion) => {
+      if (suggestion !== null) {
+        const id = suggestion.dataset.suggestionId
+        if (id && addedSuggestionsArray2.has(id)) {
+          suggestion.classList.add(addedClassName)
+        } else {
+          suggestion.classList.remove(addedClassName)
+        }
+      }
+    })
+}
+
+// Add suggestions to the correct field when clicked
+onFind('.Suggestion-add', (item: HTMLElement) => {
+  item.addEventListener('click', () => {
+    if (item.dataset.label) {
+      addItem(item, item.dataset.label)
+      updateAddedSuggestions()
+    }
+  })
+})
+
+// Post to the servlet for new suggestions, sending the form so changes can be recognized
+onFind('button[data-suggestions-url]', (element: HTMLButtonElement) => {
+  const url = element.dataset.suggestionsUrl
+  if (!url) return
+
+  element.addEventListener('click', async () => {
+    if (element.classList.contains('is-refreshing')) {
+      return
+    }
+
+    try {
+      const frame = element.closest<HTMLElement>('.frame')
+      if (!frame) return
+
+      // Show spinner while waiting on response
+      element.classList.add('is-refreshing')
+
+      const form = frame.closest<HTMLFormElement>('form')
+      if (!form) return
+
+      const data = new FormData(form)
+      const headers = new Headers()
+      const csrf = Cookies.get('bsp.csrf')
+      if (csrf) {
+        headers.append('Brightspot-CSRF', csrf)
+      }
+
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: headers,
+        body: data,
+      })
+      const itemHtml = await response.text()
+
+      // Response received, remove spinner
+      element.classList.remove('is-refreshing')
+
+      frame.innerHTML = itemHtml
+    } catch (error) {
+      console.error(error)
+    }
+  })
+
+  // Set suggestions to inactive or active after page load
+  updateAddedSuggestions()
+})
+
+// Receive publish broadcasts for new Suggestion items and add the item to the field
+onFind('.Suggestions-list-add', (suggestionsList: HTMLElement) => {
+  const suggestionIds = Array.from(
+    suggestionsList.querySelectorAll<HTMLElement>(
+      '.Suggestion-add[data-suggestion-id]',
+    ),
+  )
+    .map((el) => el.dataset.suggestionId)
+    .filter((id): id is string => id !== undefined)
+
+  // Hide collapsible with empty suggestions results
+  if (
+    suggestionsList.childNodes.length === 0 &&
+    suggestionsList.parentNode instanceof HTMLElement
+  ) {
+    suggestionsList.parentNode.style.display = 'none'
+  }
+
+  rtc.receive(
+    'com.psddev.cms.tool.page.content.PublishBroadcast',
+    (data: unknown) => {
+      const publishData = data as PublishBroadcastData
+      const contentId = publishData.mainObjectId || publishData.contentId
+      if (suggestionIds.indexOf(contentId) === -1) {
+        setTimeout(() => {
+          const refresh = document.querySelector<HTMLButtonElement>(
+            'button[data-suggestions-url]',
+          )
+          if (refresh) {
+            refresh.click()
+          }
+        }, 2000)
+      }
+    },
+  )
+})
+
+// Add a suggestion to the correct field and scroll to it
+function addItem(item: HTMLElement, label: string): void {
+  const form = item.closest<HTMLFormElement>('form[data-content-id]')
+  if (!form) return
+
+  const fieldName = item.dataset.fieldName
+  if (!fieldName) return
+
+  const fieldDiv = form.querySelector<HTMLElement>(
+    `div[data-field-name="${fieldName}"]`,
+  )
+  if (!fieldDiv) return
+
+  const addButton = fieldDiv.querySelector<HTMLElement>('.addButton')
+  let fieldInput: HTMLInputElement | null
+
+  if (addButton) {
+    addButton.click()
+    const repeatableObjectId = fieldDiv.querySelector<HTMLElement>(
+      '.repeatableObjectId',
+    )
+    const addToTop = repeatableObjectId?.classList.contains('addToTop')
+    fieldInput = addToTop
+      ? fieldDiv.querySelector<HTMLInputElement>(
+          ':first-child > input.objectId',
+        )
+      : fieldDiv.querySelector<HTMLInputElement>(':last-child > input.objectId')
+  } else {
+    fieldInput = fieldDiv.querySelector<HTMLInputElement>('input.objectId')
+  }
+
+  if (!fieldInput) return
+
+  fieldInput.setAttribute('data-label', label)
+  fieldInput.setAttribute('data-label-html', label)
+
+  const suggestionId = item.dataset.suggestionId
+  if (suggestionId) {
+    fieldInput.value = suggestionId
+  }
+
+  if (addButton) {
+    const sourceContainer = fieldInput.closest<HTMLLIElement>('li')
+    if (sourceContainer) {
+      const typeId = item.dataset.typeId
+      if (typeId) {
+        sourceContainer.setAttribute('data-sortable-item-type', typeId)
+      }
+
+      onFind(
+        sourceContainer,
+        ':scope .ComboInput[aria-expanded=true]',
+        (dropDown: HTMLElement) => {
+          dropDown.click()
+        },
+      )
+    }
+  } else {
+    fieldDiv.querySelectorAll<HTMLElement>('.is-removing').forEach((el) => {
+      el.classList.remove('is-removing')
+    })
+  }
+
+  const event = document.createEvent('HTMLEvents')
+  event.initEvent('change', true, false)
+  fieldInput.dispatchEvent(event)
+
+  fieldDiv.scrollIntoView()
+}