@brightspot/ui 6.1.2-pr.275 → 6.3.0

package/src/legacy/tool-ui/src/main/webapp/v4/CIGCluster.less

@@ -1,4 +1,13 @@
 btu-cig-cluster {
+  // Flex (not block) so narrow .CIG-row children pair up like they do in .CIG.
+  display: flex;
+  flex-wrap: wrap;
+
+  // Children run the full row; the narrow modifiers (.is-half etc.) override this to pair up.
+  > * {
+    width: 100%;
+  }
+
   .CIG-title {
     padding: 0;
   }

package/src/legacy/tool-ui/src/main/webapp/v4/TabBar.less

@@ -112,6 +112,10 @@
   &.state-selected {
     .TabBar-itemSelected();
   }
+
+  btu-cig-cluster .CIG .TabBar & {
+    width: auto;
+  }
 }
 
 .TabBar-menu:hover > .TabBar-menuToggle,

package/src/legacy/tool-ui/src/theme/Theme.ts

@@ -19,6 +19,11 @@ Contrast ratios
 */
 const defaultLuminances = [90, 81, 72, 38, 14, 8, 4]
 
+// The header color only ever comes from a hex picker. Restricting to opaque hex rejects the values
+// that would break the header — `transparent`/alpha (which pass CSS.supports but paint a see-through
+// header) and anything malformed from an API/import write that skips the server-side check.
+const HEADER_COLOR_HEX = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i
+
 /*
 Contrast ratios
 
@@ -43,6 +48,7 @@ type ThemeType = {
   highContrast?: boolean
   contrastChoices?: 'more' | 'normal'
   headerBackground?: string
+  headerColor?: string
   luminances?: number[]
   darkLuminances?: number[]
   colors: Colors
@@ -173,6 +179,20 @@ export default class Theme {
       },
     )
 
+    // Adds event listener to the V5 Header Color (live preview)
+    onFind(
+      this._element,
+      ".CIG-row[data-field-name='cms.headerColor'] .color",
+      (headerColorInput) => {
+        headerColorInput.addEventListener('change', (e) => {
+          if (e.target instanceof HTMLInputElement) {
+            this._theme.headerColor = e.target.value
+          }
+          this._updateUI()
+        })
+      },
+    )
+
     // Only display color table if custom is chosen as preset
     onFind(
       this._element,
@@ -336,6 +356,14 @@ export default class Theme {
       }
     }
 
+    // Foreground contrast is derived from this in CSS (.Page-header), not here.
+    const headerColor = this._theme.headerColor
+    if (headerColor && HEADER_COLOR_HEX.test(headerColor)) {
+      style.setProperty('--Page-header-bg', headerColor)
+    } else {
+      style.removeProperty('--Page-header-bg')
+    }
+
     const gray = cc.hex.hsl(this._theme.colors.gray)
 
     const black = this._guessColor(gray[0], gray[1], blackLuminance)

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

@@ -370,17 +370,26 @@ onFind('.TabBar.is-menuOnly', (container: HTMLElement) => {
     })
 })
 
-/** Adds a new data-label attribute to search result tab items
- * for icon styling the tab buttons based on their text content
+/** Adds a data-label attribute to search result tab items so CSS can pick each
+ * view's icon (see SearchResult.css `[data-label='list'|'grid'|'board'|...]`).
+ *
+ * The key MUST be derived from the stable view class name (data-view), not the
+ * visible text: the text is localized, so keying off it left the built-in views
+ * (List/Grid/Board/Hierarchy/Taxonomy/Mixed) with no icon in non-English locales.
+ * aria-label/title still use the human-readable (localized) text.
  */
 onFind('.SearchResult-views > ul', (tabs: HTMLElement) => {
   tabs
     .querySelectorAll<HTMLElement>(':scope > li > a')
     .forEach((tabItem: HTMLElement) => {
-      const label = tabItem.textContent?.toLowerCase() ?? ''
-      tabItem.dataset.label = label
-      tabItem.ariaLabel = label
-      tabItem.title = label
+      const text = tabItem.textContent?.trim() ?? ''
+      const viewClass = (tabItem.dataset.view ?? '').split('.').pop() ?? ''
+      const core = viewClass.match(
+        /^(List|Grid|Board|Hierarchy|Taxonomy|Mixed)SearchResultView$/,
+      )
+      tabItem.dataset.label = core ? core[1].toLowerCase() : text.toLowerCase()
+      tabItem.ariaLabel = text || tabItem.dataset.label
+      tabItem.title = text || tabItem.dataset.label
     })
 })
 
@@ -1542,15 +1551,22 @@ onFind('.QueryField-toggle', (toggle: HTMLElement) => {
       dialog.show()
     })
 
-    dialog.addEventListener('btu-dialog-closed', (event) => {
-      popup.classList.remove('is-visible')
+    dialog.addEventListener('btu-dialog-closed', () => {
+      // Re-query instead of closing over `popup`: submitting a filter form
+      // reloads the frame and replaces the Popup element.
+      queryFieldFrame
+        .querySelector<HTMLElement>('.Popup')
+        ?.classList.remove('is-visible')
     })
 
-    const saveButton =
-      queryFieldFrame.querySelector<HTMLElement>('.QueryField-button')
-    if (!saveButton) return
-    saveButton.addEventListener('click', (event) => {
-      dialog.close(event)
+    // Delegate from the frame, which survives reloads, rather than binding the
+    // Done button directly. A reload swaps in a new button, and this listener
+    // is only attached on the first load.
+    queryFieldFrame.addEventListener('click', (event) => {
+      const target = event.target as HTMLElement | null
+      if (target?.closest('.QueryField-button')) {
+        dialog.close()
+      }
     })
   }
 
@@ -2054,12 +2070,32 @@ onFind('.ActionBar', (actionBar) => {
   const widgetTitle = widget.querySelector<HTMLElement>('.Widget-title')
 
   let lastPointerType = ''
+
+  // The browser refocuses whatever was focused before when the window regains focus. That
+  // arrives as a focusin with no preceding pointerdown, so the pointer guard below never
+  // catches it, and the scroll drags the editor away from wherever they had deliberately
+  // scrolled to — most visibly with a rich text field taller than the pane.
+  // Seeded from hasFocus() because binding can happen while the window is already blurred —
+  // a background tab, or form content that mounts lazily while the user is away — in which
+  // case the blur has already fired and there is nothing left to listen for.
+  let isRestoringFocus = !document.hasFocus()
+  const handleWindowBlur = () => {
+    isRestoringFocus = true
+  }
+
+  // Any deliberate input means we are no longer restoring, so the flag cannot go stale if
+  // focus happens to return to something outside this widget.
+  const clearRestoringFocus = () => {
+    isRestoringFocus = false
+  }
+
   const handlePointerdown = (event: Event) => {
     lastPointerType = (event as PointerEvent).pointerType
     // Reset after current task so only the immediately following focusin is affected.
     setTimeout(() => {
       lastPointerType = ''
     }, 0)
+    clearRestoringFocus()
   }
 
   const handleFocusin = (event: Event) => {
@@ -2067,6 +2103,13 @@ onFind('.ActionBar', (actionBar) => {
     // smooth scrolling mid-click disrupts dropdown positioning and button actions.
     if (lastPointerType) return
 
+    // Skip the single focusin the browser fires when restoring focus on window re-entry.
+    // Keyboard navigation afterwards still scrolls, which is what this handler is for.
+    if (isRestoringFocus) {
+      isRestoringFocus = false
+      return
+    }
+
     const target = event.target
     if (!(target instanceof HTMLElement)) return
 
@@ -2083,8 +2126,13 @@ onFind('.ActionBar', (actionBar) => {
 
   widget.addEventListener('pointerdown', handlePointerdown, { passive: true })
   widget.addEventListener('focusin', handleFocusin, { passive: true })
+  // Bound on window without capture — capture would also pick up element blur events.
+  window.addEventListener('blur', handleWindowBlur)
+  window.addEventListener('keydown', clearRestoringFocus, { passive: true })
   onRemove(widget, () => {
     widget.removeEventListener('pointerdown', handlePointerdown)
     widget.removeEventListener('focusin', handleFocusin)
+    window.removeEventListener('blur', handleWindowBlur)
+    window.removeEventListener('keydown', clearRestoringFocus)
   })
 })

package/dist/storybook/assets/if-defined-C-mi5lcR.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-CemlMLl9.js";const m=o=>o??r;export{m as o};