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

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

@@ -0,0 +1,530 @@
+import { FocusableElement, tabbable } from 'tabbable'
+import { isMac } from './platform'
+
+/**
+ * Built-in focus region IDs for the CMS.
+ *
+ * These correspond to the built-in entries in
+ * {@code FocusRegionJavaScriptGlobals}. Custom regions can use any
+ * string ID — they do not need to be added to this enum.
+ *
+ * NOTE: Members are listed in default navigation order to match
+ * the sort order values in {@code FocusRegionJavaScriptGlobals}
+ * and the {@code DEFAULT_REGION_ORDER} fallback array below.
+ */
+enum RegionId {
+  ModalClose = 'modal-close',
+  PageHeader = 'page-header',
+  PageNav = 'page-nav',
+  PageGuide = 'page-guide',
+  PageAskAi = 'page-ask-ai',
+  LeftNav = 'left-nav',
+  ContentEditTop = 'content-edit-top',
+  PageMain = 'page-main',
+  ContentEditDrawer = 'content-edit-drawer',
+  ContentEditPreview = 'content-edit-preview',
+  ContentEditRight = 'content-edit-right',
+  ContentEditToolbar = 'content-edit-toolbar',
+}
+
+/**
+ * Configuration for a focus region.
+ *
+ * The {@link id} accepts any string, allowing custom regions to participate
+ * in keyboard navigation without modifying core CMS code.
+ */
+interface FocusRegionConfig {
+  id: string
+  element: HTMLElement
+  preferredFocus?: () => HTMLElement | null // Optional: element to focus within the region
+  label?: string // Optional: human-readable label override for skip links
+
+  /**
+   * Optional function to determine if the region is currently hidden.
+   */
+  isHidden?: () => boolean
+}
+
+/**
+ * The data attribute used for declarative focus region registration.
+ *
+ * Backend Java code can render an element with this attribute and the
+ * frontend will automatically register it as a focus region:
+ *
+ * {@code <div data-focus-region="my-region" role="region" aria-label="My Region">}
+ */
+const FOCUS_REGION_ATTR = 'data-focus-region'
+const FOCUS_REGION_SELECTOR = `[${FOCUS_REGION_ATTR}]`
+
+/**
+ * Manages keyboard navigation between focus regions in the CMS.
+ * Allows users to press Alt+Tab to cycle through page regions within
+ * a specific layer (e.g., an open dialog or the main document body).
+ */
+class FocusRegionManager {
+  /**
+   * Default region order used as a fallback when the backend configuration
+   * is not available.
+   */
+  private static readonly DEFAULT_REGION_ORDER: ReadonlyArray<string> = [
+    RegionId.ModalClose,
+    RegionId.PageHeader,
+    RegionId.PageNav,
+    RegionId.PageGuide,
+    RegionId.PageAskAi,
+    RegionId.LeftNav,
+    RegionId.ContentEditTop,
+    RegionId.PageMain,
+    RegionId.ContentEditDrawer,
+    RegionId.ContentEditPreview,
+    RegionId.ContentEditRight,
+    RegionId.ContentEditToolbar,
+  ]
+
+  /**
+   * Resolves the region order from the backend configuration
+   * ({@code window.BRIGHTSPOT.focusRegions}). The backend provides a
+   * map of region ID → numeric sort order; this method sorts entries
+   * by value and returns the IDs in order. Falls back to
+   * {@link DEFAULT_REGION_ORDER} if the backend config is unavailable.
+   *
+   * Called once at class load time — the backend config must be present
+   * in the page before v5.js loads for it to take effect.
+   */
+  private static resolveRegionOrder(): ReadonlyArray<string> {
+    const focusRegions = window.BRIGHTSPOT?.focusRegions as
+      | Record<string, unknown>
+      | undefined
+
+    if (
+      !focusRegions ||
+      typeof focusRegions !== 'object' ||
+      Object.keys(focusRegions).length === 0
+    ) {
+      return FocusRegionManager.DEFAULT_REGION_ORDER
+    }
+
+    const entries = Object.entries(focusRegions)
+    const invalidEntries = entries.filter(
+      ([, v]) => typeof v !== 'number' || !isFinite(v as number),
+    )
+
+    if (invalidEntries.length > 0) {
+      console.warn(
+        'FocusRegionManager: focusRegions config contains non-numeric values; falling back to default order.',
+        Object.fromEntries(invalidEntries),
+      )
+      return FocusRegionManager.DEFAULT_REGION_ORDER
+    }
+
+    return (entries as [string, number][])
+      .sort((a, b) => a[1] - b[1])
+      .map(([id]) => id)
+  }
+
+  /**
+   * Defines the order of regions for keyboard navigation.
+   * Sourced from the backend via {@code window.BRIGHTSPOT.focusRegions},
+   * with a hardcoded fallback.
+   */
+  private static readonly REGION_ORDER: ReadonlyArray<string> =
+    FocusRegionManager.resolveRegionOrder()
+
+  private registeredRegions: Map<HTMLElement, Map<string, FocusRegionConfig>> =
+    new Map()
+
+  /**
+   * Tracks the last focused element per region per layer.
+   * Structure: Layer → RegionId → Last Focused Element
+   */
+  private lastFocusedElements: Map<HTMLElement, Map<string, HTMLElement>> =
+    new Map()
+  private keyboardHandler: ((e: KeyboardEvent) => void) | null = null
+
+  private constructor() {
+    this.initKeyboardListeners()
+  }
+
+  private static instance: FocusRegionManager | null = null
+
+  /**
+   * Retrieves the singleton instance of FocusRegionManager.
+   */
+  static getInstance(): FocusRegionManager {
+    if (!this.instance) {
+      this.instance = new FocusRegionManager()
+    }
+    return this.instance
+  }
+
+  /**
+   * Registers a focus region for keyboard navigation.
+   * Regions are associated with their closest layer (e.g., a dialog or the main document body).
+   */
+  register(config: FocusRegionConfig): void {
+    if (!config.id || !config.element) {
+      console.warn(
+        'FocusRegionManager: Invalid config provided to register()',
+        config,
+      )
+      return
+    }
+
+    // Find the layer for this region and any existing regions within that layer
+    // Priority: fullscreen container > open dialog > document.body
+    const layer =
+      config.element.closest<HTMLElement>(
+        '.ProseMirror-fullscreen-container',
+      ) ??
+      config.element.closest<HTMLElement>('dialog[open]') ??
+      document.body
+    const regions = this.registeredRegions.get(layer) || new Map()
+
+    regions.set(config.id, config)
+    this.registeredRegions.set(layer, regions)
+  }
+
+  /**
+   * Registers a focus region from a DOM element that has a
+   * {@code data-focus-region} attribute. This is the declarative
+   * counterpart to {@link register}, used by the auto-discovery system.
+   *
+   * If the element has already been registered imperatively (e.g., by
+   * code in v5.ts with custom {@code isHidden} or {@code preferredFocus}
+   * callbacks), the imperative registration takes precedence.
+   */
+  registerFromAttribute(element: HTMLElement): void {
+    const id = element.getAttribute(FOCUS_REGION_ATTR)
+    if (!id) return
+
+    // Find the layer for this element
+    const layer =
+      element.closest<HTMLElement>('.ProseMirror-fullscreen-container') ??
+      element.closest<HTMLElement>('dialog[open]') ??
+      document.body
+    const regions = this.registeredRegions.get(layer)
+
+    // Don't overwrite an existing imperative registration for the same ID
+    if (regions?.has(id)) return
+
+    if (!FocusRegionManager.REGION_ORDER.includes(id)) {
+      console.warn(
+        `FocusRegionManager: region "${id}" is not in REGION_ORDER and will be excluded from navigation.`,
+      )
+      return
+    }
+
+    this.register({ id, element })
+  }
+
+  /**
+   * Destroys all regions associated with a specific layer (e.g., when dialog is closed).
+   */
+  destroyLayer(layer: HTMLElement): void {
+    this.registeredRegions.delete(layer)
+    this.lastFocusedElements.delete(layer)
+  }
+
+  /**
+   * Checks if a region is currently visible and should be included in navigation.
+   */
+  private isRegionVisible(config: FocusRegionConfig): boolean {
+    const element = config.element
+
+    if (
+      !element.isConnected ||
+      element.hasAttribute('inert') ||
+      element.hidden ||
+      !element.checkVisibility({
+        visibilityProperty: true,
+        opacityProperty: true,
+      })
+    ) {
+      return false
+    }
+
+    if (config.isHidden && config.isHidden()) {
+      return false
+    }
+
+    if (!this.hasFocusableDescendants(element)) {
+      return false
+    }
+
+    return true
+  }
+
+  /**
+   * Returns all registered regions that are currently visible in the specified layer,
+   * sorted according to REGION_ORDER.
+   */
+  getVisibleRegions(layer: HTMLElement): FocusRegionConfig[] {
+    if (!layer || !layer.isConnected || !this.registeredRegions.has(layer)) {
+      console.warn(
+        'FocusRegionManager: Specified layer is not valid for getting visible regions',
+        layer,
+      )
+      return []
+    }
+    return (
+      FocusRegionManager.REGION_ORDER.filter((id) =>
+        this.registeredRegions.get(layer)?.has(id),
+      )
+        // we can be confident the following get calls won't return undefined due to the filter above
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        .map((id) => this.registeredRegions.get(layer)!.get(id)!)
+        .filter((config) => this.isRegionVisible(config))
+    )
+  }
+
+  /**
+   * Returns the index of the currently focused region within the provided regions array.
+   */
+  private getCurrentIndex(regions: FocusRegionConfig[]): number {
+    const currentFocus = document.activeElement as HTMLElement | null
+    const currentRegion = regions.findIndex((region) =>
+      region.element.contains(currentFocus),
+    )
+
+    return currentRegion
+  }
+
+  /**
+   * Saves the currently focused element for its containing region.
+   */
+  private saveCurrentFocus(
+    layer: HTMLElement,
+    regions: FocusRegionConfig[],
+  ): void {
+    const activeElement = document.activeElement as HTMLElement
+    if (activeElement === document.body) return
+
+    const currentRegion = regions.find((region) =>
+      region.element.contains(activeElement),
+    )
+    if (!currentRegion) return
+
+    let layerMap = this.lastFocusedElements.get(layer)
+    if (!layerMap) {
+      layerMap = new Map()
+      this.lastFocusedElements.set(layer, layerMap)
+    }
+    layerMap.set(currentRegion.id, activeElement)
+  }
+
+  /**
+   * Navigates to the next available focus region in the specified layer.
+   */
+  nextRegion(layer: HTMLElement): void {
+    const regions = this.getVisibleRegions(layer)
+    if (regions.length === 0) return
+    this.saveCurrentFocus(layer, regions)
+    const nextIndex = (this.getCurrentIndex(regions) + 1) % regions.length
+    this.focusRegion(regions[nextIndex], layer)
+  }
+
+  /**
+   * Navigates to the previous available focus region in the specified layer.
+   */
+  previousRegion(layer: HTMLElement): void {
+    const regions = this.getVisibleRegions(layer)
+    if (regions.length === 0) return
+    this.saveCurrentFocus(layer, regions)
+    const currentIndex = this.getCurrentIndex(regions)
+    const prevIndex = currentIndex < 1 ? regions.length - 1 : currentIndex - 1
+    this.focusRegion(regions[prevIndex], layer)
+  }
+
+  /**
+   * Focuses a specific region using the following priority:
+   * 1. Last focused element in the region (if previously visited)
+   * 2. preferredFocus (if specified)
+   * 3. First tabbable element in the region
+   * 4. The region element itself
+   */
+  focusRegion(config: FocusRegionConfig, layer: HTMLElement): void {
+    let targetElement: FocusableElement | null = null
+
+    const lastFocused = this.lastFocusedElements.get(layer)?.get(config.id)
+    if (lastFocused?.isConnected && this.isElementFocusable(lastFocused)) {
+      targetElement = lastFocused
+    }
+
+    if (!targetElement) {
+      const preferredFocus = config.preferredFocus?.()
+      if (
+        preferredFocus &&
+        preferredFocus.isConnected &&
+        this.isElementFocusable(preferredFocus)
+      ) {
+        targetElement = preferredFocus
+      }
+    }
+
+    if (!targetElement) {
+      try {
+        const tabbableElements = tabbable(config.element)
+        for (const el of tabbableElements) {
+          if (this.isElementFocusable(el as HTMLElement)) {
+            targetElement = el
+            break
+          }
+        }
+      } catch (e) {
+        console.warn('FocusRegionManager: Error finding tabbable elements', e)
+      }
+    }
+
+    if (!targetElement) {
+      targetElement = config.element
+    }
+
+    try {
+      targetElement?.focus()
+      targetElement?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
+      targetElement?.classList.add('is-focusRegionTarget')
+      setTimeout(() => {
+        targetElement?.classList.remove('is-focusRegionTarget')
+        targetElement?.classList.add('was-focusRegionTarget')
+        targetElement?.addEventListener(
+          'transitionend',
+          () => {
+            targetElement?.classList.remove('was-focusRegionTarget')
+          },
+          { once: true },
+        )
+      }, 500)
+    } catch (e) {
+      console.warn(
+        'FocusRegionManager: Error focusing element',
+        e,
+        targetElement,
+      )
+    }
+  }
+
+  private isElementFocusable(element: HTMLElement): boolean {
+    return (
+      !element.hasAttribute('inert') &&
+      !element.hidden &&
+      element.checkVisibility({
+        visibilityProperty: true,
+        opacityProperty: true,
+      })
+    )
+  }
+
+  private hasFocusableDescendants(element: HTMLElement): boolean {
+    try {
+      const tabbableElements = tabbable(element)
+      for (const el of tabbableElements) {
+        if (this.isElementFocusable(el as HTMLElement)) {
+          return true
+        }
+      }
+    } catch (e) {
+      console.warn(
+        'FocusRegionManager: Error finding tabbable elements',
+        e,
+        element,
+      )
+    }
+    return false
+  }
+
+  /**
+   * Finds the topmost layer (fullscreen container, open dialog, or body) for focus navigation.
+   */
+  getTopLayer(): HTMLElement {
+    const fullscreenContainer = document.querySelector<HTMLElement>(
+      '.ProseMirror-fullscreen-container:not(.hide)',
+    )
+    if (fullscreenContainer) {
+      return fullscreenContainer
+    }
+
+    const openDialogs =
+      document.querySelectorAll<HTMLDialogElement>('dialog[open]')
+    return openDialogs.length > 0
+      ? openDialogs[openDialogs.length - 1]
+      : document.body
+  }
+
+  /**
+   * Resolves a human-readable label for a region, using:
+   * 1. config.label (explicit override)
+   * 2. element aria-label attribute
+   * 3. Text content of the element referenced by aria-labelledby
+   * Returns null if no label can be resolved.
+   */
+  getRegionLabel(config: FocusRegionConfig): string | null {
+    if (config.label) {
+      return config.label
+    }
+
+    const element = config.element
+    const ariaLabel = element.getAttribute('aria-label')
+    if (ariaLabel) {
+      return ariaLabel
+    }
+
+    const labelledBy = element.getAttribute('aria-labelledby')
+    if (labelledBy) {
+      const labelEl = document.getElementById(labelledBy)
+      if (labelEl?.textContent) {
+        return labelEl.textContent.trim()
+      }
+    }
+
+    return null
+  }
+
+  private isLayerRegistered(layer: HTMLElement): boolean {
+    return this.registeredRegions.has(layer)
+  }
+
+  /**
+   * Checks if the given keyboard event matches the region-navigation shortcut.
+   * - macOS: Alt+Tab / Alt+Shift+Tab
+   * - Windows/Linux: F6 / Shift+F6 (Alt+Tab is intercepted by the OS)
+   */
+  private isRegionShortcut(e: KeyboardEvent): boolean {
+    if (e.altKey && e.key === 'Tab') return true
+    if (!isMac && e.key === 'F6') return true
+    return false
+  }
+
+  /**
+   * Handles keyboard navigation between the focus regions.
+   */
+  private initKeyboardListeners(): void {
+    this.keyboardHandler = (e: KeyboardEvent) => {
+      if (this.isRegionShortcut(e)) {
+        const topLayer = this.getTopLayer()
+        if (!this.isLayerRegistered(topLayer)) {
+          console.warn(
+            'FocusRegionManager: No registered regions for the current layer',
+            topLayer,
+          )
+          return
+        }
+
+        // At this point we know we will perform custom navigation, so it is
+        // safe to override the browser's default behavior.
+        e.preventDefault()
+        e.stopPropagation()
+
+        if (e.shiftKey) {
+          this.previousRegion(topLayer)
+        } else {
+          this.nextRegion(topLayer)
+        }
+      }
+    }
+
+    document.addEventListener('keydown', this.keyboardHandler, true)
+  }
+}
+
+export const focusRegionManager = FocusRegionManager.getInstance()
+export { RegionId, FOCUS_REGION_SELECTOR, type FocusRegionConfig }

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

@@ -0,0 +1,93 @@
+btu-form-filter {
+  @apply grid items-center [grid-template-columns:0fr_auto];
+}
+
+btu-form-filter.is-open {
+  @apply w-full [grid-template-columns:1fr_auto];
+}
+
+.FormFilter-container {
+  @apply min-w-0 origin-right scale-x-0 opacity-0 transition-[opacity,_transform] duration-200;
+}
+
+.FormFilter-container.is-open {
+  @apply mx-2 scale-x-100 opacity-100;
+}
+
+.FormFilter-container > label {
+  @apply absolute top-[50%] z-[1] ms-4 translate-y-[-50%] after:btu-icon after:btu-icon-search;
+}
+
+.FormFilter-container input {
+  @apply border-transparent bg-gray-100 !ps-11 focus:border-primary-600;
+}
+
+.FormFilter-icon {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray after:btu-icon after:btu-icon-search;
+}
+
+.FormFilter-icon.is-open {
+  @apply btu-button-pressed after:btu-icon-x;
+}
+
+.CIG.is-filtering {
+  > *,
+  > .Tab > *,
+  .PluginItem:not(.is-filterResult) {
+    @apply !hidden;
+  }
+
+  > .Tab {
+    @apply block;
+  }
+}
+
+.CIG.is-filtering .CIG-row.is-filterResult {
+  @apply !flex;
+}
+
+.CIG-title.is-filterResult {
+  @apply bg-gray-50 after:text-gray-400;
+
+  .CIG-titleText {
+    @apply text-gray-400;
+  }
+}
+
+.CIG.is-filtering .is-filterResult,
+.CIG.is-filtering :has(.is-filterResult):not([hidden]) {
+  @apply !block;
+
+  &.CIG-row[data-tab]:not(.has-title),
+  &.Tab[data-tab],
+  &.CIG-title[data-tab] {
+    @apply relative mt-[calc(theme(spacing.7)_*_1.6)];
+  }
+
+  &.CIG-row[data-tab]:not(.has-title)::before,
+  &.Tab[data-tab]::after,
+  &.CIG-title[data-tab]::after {
+    @apply absolute top-[calc(theme(spacing.4)_*_-1.6)] w-full border-b-[1px] border-b-gray-300 text-xs uppercase leading-3 content-[attr(data-tab)];
+  }
+
+  &.CIG-title[data-tab]::after {
+    @apply left-0;
+  }
+
+  &.Tab[data-tab]::after,
+  &.CIG-row[data-tab]:not(.has-title)::before {
+    @apply left-[calc(theme(spacing.3)_*_-1)];
+  }
+
+  &.CIG-title {
+    @apply pointer-events-none;
+  }
+
+  .CIG-titleToggle {
+    @apply invisible;
+  }
+}
+
+.CIG.is-loading {
+  @apply visible block min-h-[80vh] before:btu-loader before:absolute before:left-[50%] before:top-[50%] before:z-10 before:size-[--Loader-size] before:translate-x-[-50%] before:translate-y-[-50%];
+}