@brightspot/ui 6.3.2 → 6.3.3

package/dist/storybook/project.json

@@ -1 +1 @@
-{"generatedAt":1788974870315,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}
+{"generatedAt":1789070963185,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"knownPackages":{"testPackages":{"@storybook/addon-vitest":"10.2.12","@vitest/browser-playwright":"4.0.18","playwright":"1.58.2","vitest":"4.0.18"},"stylingPackages":{"tailwindcss":"^3.4.13","autoprefixer":"10.4.21"}},"hasRouterPackage":false,"packageManager":{"type":"yarn","agent":"yarn","nodeLinker":"undefined"},"preview":{"usesGlobals":true},"framework":{"name":"@storybook/web-components-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/web-components","portableStoriesFileCount":0,"applicationFileCount":6,"storybookVersion":"10.2.12","storybookVersionSpecifier":"10.2.12","language":"typescript","storybookPackages":{"@storybook/addon-themes":{"version":"10.2.12"},"@storybook/web-components-vite":{"version":"10.2.12"},"@wc-toolkit/storybook-helpers":{"version":"10.0.0"},"eslint-plugin-storybook":{"version":"10.0.7"},"storybook":{}},"addons":{"@storybook/addon-docs":{"version":"10.2.12"},"@storybook/addon-vitest":{"version":"10.2.12"}},"packageJsonType":"module"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "6.3.2",
+  "version": "6.3.3",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",

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

@@ -834,34 +834,6 @@ onVisible('.Deferred', (deferred) => {
   }
 })
 
-/* Frame JS removes the Widget class from frames so we need to re-add it; only target the popup's own
-   frame so nested frames (e.g. the content edit preview) keep their regular styling */
-onFind(
-  [
-    '.Popup[name="edit-guide"] .frame',
-    '.Popup[name="PostPublishActionsPage"] .frame',
-    '.Popup[name^="create-new-object-"] > .Popup-content > .frame',
-    '.Popup[name^="objectId-create-"] > .Popup-content > .frame',
-    '.Popup[name="AddEmbeddedContent"] .frame',
-    '.Popup[name^="conversation-"] .frame',
-    '.Popup[name^="_copy"] > .Popup-content > .frame',
-    '.Popup[name="DateStringCalendarFrame"] .frame',
-  ],
-  (frame: HTMLElement) => {
-    const config = { attributeFilter: ['class'] }
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        const target = mutation.target as HTMLElement
-        if (!target.classList.contains('Widget')) {
-          target.classList.add('Widget')
-        }
-      })
-    })
-
-    observer.observe(frame, config)
-  },
-)
-
 // Handle Content Edit left pane scrolling to hide and collapse the top bar.
 // Note: Scroll event is used instead of IntersectionObserver because of dynamic content in scroll area.
 onFind('.ContentEdit-left', (leftPane: HTMLElement) => {
@@ -935,7 +907,10 @@ onFind('.Widget-controls', (controls: HTMLElement) => {
   const widget = controls.closest<HTMLElement>('.Widget')
   if (!widget) return
   const update = () =>
-    widget.classList.toggle('has-widgetControls', controls.childNodes.length > 0)
+    widget.classList.toggle(
+      'has-widgetControls',
+      controls.childNodes.length > 0,
+    )
   update()
   new MutationObserver(update).observe(controls, { childList: true })
 })

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

@@ -44,8 +44,8 @@
     @apply before:ms-2 before:flex before:size-5 before:cursor-move before:justify-center before:text-sm before:text-gray-500 before:content-[counter(RCS-item)];
   }
 
-  /* Hide item until the multisort button gets added from Sortable.js */
-  &.Sortable-item:not(:has(.MultiSortable-buttonToggle), .Sortable-ghost) {
+  /* Hide item until Sortable.js has finished initializing it */
+  &.Sortable-item:not(.is-sortableReady, .Sortable-ghost) {
     @apply opacity-0;
   }
 }

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

@@ -37,6 +37,16 @@ export default class Toggleable extends EventEmitterMixin(
     this._handleChange()
   }
 
+  /*
+    Re-applies the current selection's show/hide + enable/disable state.
+    Called by an ancestor Toggleable after its enable pass, which would
+    otherwise leave this toggleable's toggled-off branch inputs enabled
+    and submitting stale values (BSP-19758).
+  */
+  refresh() {
+    this._handleChange()
+  }
+
   constructor() {
     super()
     this._forms = []
@@ -177,8 +187,8 @@ export default class Toggleable extends EventEmitterMixin(
                 body: data,
               })
 
-              form.element.innerHTML = await response.text()
               if (response.ok) {
+                form.element.innerHTML = await response.text()
                 delete form.element.dataset.formFieldsUrl
                 delete form.element.dataset.formFieldsData
 
@@ -187,6 +197,11 @@ export default class Toggleable extends EventEmitterMixin(
                 )
                 form.element.dispatchEvent(new Event('load'))
                 form.element.dispatchEvent(new UIEvent('resize'))
+
+                // The selection may have changed while the request was in
+                // flight; re-apply it so content that arrived for a branch
+                // that is no longer selected doesn't come back enabled.
+                this._handleChange()
               } else {
                 form.element.dispatchEvent(
                   new CustomEvent('error', {
@@ -229,6 +244,27 @@ export default class Toggleable extends EventEmitterMixin(
       inputs.forEach((input) => {
         input.toggleAttribute('disabled', disable)
       })
+
+      if (!disable) {
+        // The enable pass above walks the whole subtree, so it also enabled
+        // inputs in nested toggleables' toggled-off branches (BSP-19758:
+        // duplicate typeId params flip a polymorphic record to the wrong
+        // type on save). Re-apply each nested toggleable's own state, after
+        // the enable pass, to disable those branches again. Document order
+        // guarantees an outer nested toggleable is refreshed before any
+        // toggleable inside its branches.
+        divsToToggle.forEach((el) => {
+          el.querySelectorAll<Toggleable>('btu-toggleable').forEach(
+            (nested) => {
+              // A not-yet-upgraded element applies its own state when it
+              // connects, so it can safely be skipped here.
+              if (nested !== this && nested instanceof Toggleable) {
+                nested.refresh()
+              }
+            },
+          )
+        })
+      }
     }
   }