@orangelogic/design-system 2.187.0 → 2.189.0

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as A } from "../chunks/tab-group.CjISeeMB.js";
+import { C as A } from "../chunks/tab-group.uSHlsFu8.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";
 import "../chunks/scroll.xtO5yojm.js";

package/library/components/tab.js

@@ -1,6 +1,6 @@
 import { n as a, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as u } from "../chunks/component.styles.CRO4Odto.js";
-import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
+import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as f } from "../chunks/i18n.DbXTTLXx.js";
 import { H as x } from "../chunks/slot.j5oheLJC.js";
 import { w as p } from "../chunks/watch.DJF5K-8U.js";
@@ -30,6 +30,12 @@ const w = b`.tab{border-radius:var(--cx-border-radius-small);padding:var(--tab-p
     );
   }
 
+
+  :host([data-cx-tab-group__tab--hidden]) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   ${w}
 
   ${k}
@@ -90,7 +96,7 @@ let I = 0, t = class extends v {
     }
   }
 };
-t.styles = [u, C];
+t.styles = [h, C];
 t.dependencies = {
   "cx-icon-button": g,
   "cx-line-clamp": y
@@ -129,7 +135,7 @@ e([
   p("disabled")
 ], t.prototype, "handleDisabledChange", 1);
 t = e([
-  h("cx-tab")
+  u("cx-tab")
 ], t);
 export {
   t as default

package/library/components/types.js

@@ -75,7 +75,7 @@ import { default as FJt } from "./step.js";
 import { default as jJt } from "./stepper.js";
 import db from "./switch.js";
 import a3 from "./tab.js";
-import { C as s3, T as MF, a as PF, b as NF, g as r8 } from "../chunks/tab-group.CjISeeMB.js";
+import { C as s3, T as MF, a as PF, b as NF, g as r8 } from "../chunks/tab-group.uSHlsFu8.js";
 import s6 from "./tab-panel.js";
 import { default as VJt } from "./tag.js";
 import l6 from "./textarea.js";
@@ -121,7 +121,7 @@ import { a as JZt, g as ZZt } from "../chunks/slot.j5oheLJC.js";
 import { c as Or, d as Oee, H as An, e as Ta, f as gs, a as Dee, b as rr } from "../chunks/resizable-component.styles.CAfXABBc.js";
 import { a as Fo, E as Kn, b as Yv, O as rp, T as vp, G as k8 } from "../chunks/index.Cpamj0jB.js";
 import { C as eQt } from "../chunks/index.Cpamj0jB.js";
-import { A as Bl, D as Ck, P as ZS, E as Mu, B as lt, c as yp, S as If, d as Bo, e as JF, g as Iee, T as _8, a as ZF, f as c3 } from "../chunks/transformation.8uLv6uwG.js";
+import { A as Bl, D as Ck, P as ZS, B as lt, E as Mu, c as yp, S as If, d as Bo, e as JF, g as Iee, T as _8, a as ZF, f as c3 } from "../chunks/transformation.8uLv6uwG.js";
 import { b as nQt } from "../chunks/transformation.8uLv6uwG.js";
 import { t as Tu, b as Mee, c as C8, g as S8 } from "../chunks/toast.CXEAfCvN.js";
 import { j as rQt, f as oQt, e as aQt, i as sQt, a as lQt, h as cQt, m as dQt, d as uQt, r as pQt } from "../chunks/toast.CXEAfCvN.js";
@@ -138326,6 +138326,9 @@ const xzt = IFt.extend({
         },
         onUpdate() {
           u && u.requestUpdate();
+        },
+        parseOptions: {
+          preserveWhitespace: !0
         }
       }), c = k, k;
     },
@@ -143824,7 +143827,7 @@ var nUt = Object.defineProperty, iUt = Object.getOwnPropertyDescriptor, li = (n,
 };
 let Qn = class extends hn {
   constructor() {
-    super(), this.localize = new En(this), this.configsController = new Yx(this.localize), this.initialData = "", this.device = "desktop", this.devices = Iee, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.enableAssetFormatControls = !1, this.enableMetrics = !1, this.defaultImageFormat = Pu, this.defaultVideoPosterFormat = Pu, this.defaultGalleryFormat = Pu, this.defaultCarouselFormat = Pu, this.defaultTimelineFormat = Pu, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.defaultLanguage = "en-us", this.supportedLanguages = ["en"], this.mode = Mu.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mappedSupportedLanguages = [], this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = _Nt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleRootToolbarRightClick = this.handleRootToolbarRightClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleTemplatesDataSourceChange = this.handleTemplatesDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
+    super(), this.localize = new En(this), this.configsController = new Yx(this.localize), this.initialData = "", this.device = "desktop", this.devices = Iee, this.autoInit = !1, this.pageId = "", this.allowDuplicateBlocks = !1, this.enableAssetFormatControls = !1, this.enableMetrics = !1, this.defaultImageFormat = Pu, this.defaultVideoPosterFormat = Pu, this.defaultGalleryFormat = Pu, this.defaultCarouselFormat = Pu, this.defaultTimelineFormat = Pu, this.enableFontFamilyControls = !1, this.allowedFolders = [], this.defaultLanguage = "en-us", this.supportedLanguages = ["en"], this.mode = Mu.Template, this.contentBuilder = null, this.ready = !1, this.editingComponent = null, this.isGalleryConfigOpen = !1, this.hoveredComponent = void 0, this.hoveredComponentPlacement = "top", this.defaultRowGap = 0, this.containerDropdowns = [], this.containerDropdownStateMap = {}, this.distance = void 0, this.toolbar = [], this.toolbarActive = !1, this.childSelected = void 0, this.mappedSupportedLanguages = [], this.mousePosition = { x: 0, y: 0 }, this._teamSpaceRoles = [], this.canvasDocument = null, this._dsm = null, this.hasBoundUpdate = !1, this.blockTypesPromise = null, this.newlyAddedComponentTimeout = null, this.initializeCustomFrame = _Nt(), this.containerDropdownObservers = [], this.nextMapHoveredBadgeState = null, this.deselectAll = this.deselectAll.bind(this), this.handleCanvasClick = this.handleCanvasClick.bind(this), this.handleRootToolbarRightClick = this.handleRootToolbarRightClick.bind(this), this.handleCanvasKeydown = this.handleCanvasKeydown.bind(this), this.handleTemplatesDataSourceChange = this.handleTemplatesDataSourceChange.bind(this), this.handleCanvasMouseMove = this.handleCanvasMouseMove.bind(this), this.handleTemplateManagerUpdated = this.handleTemplateManagerUpdated.bind(this), this.handleCanvasScroll = this.handleCanvasScroll.bind(this);
   }
   get teamSpaceRoles() {
     return this._teamSpaceRoles;
@@ -143835,6 +143838,11 @@ let Qn = class extends hn {
   get dsm() {
     return this._dsm ??= this.contentBuilder?.DataSources, this._dsm;
   }
+  prefetchBlockTypes() {
+    return this.blockTypesPromise = D3t({
+      excludeBlocksWithNoTemplates: !this.isDesigner
+    });
+  }
   /**
    * Host callbacks handed to GrapesJS blocks and config UI, each timed via
    * `measurePromise` so the promise's own settling is the completion signal.
@@ -144438,7 +144446,7 @@ let Qn = class extends hn {
     }), this.contentBuilder?.onReady(async () => {
       if (!this.contentBuilder)
         return;
-      this.contentBuilder.Canvas.getFrameEl().setAttribute("aria-label", "content-builder-frame"), this.updateFrameSize(), this._teamSpaceRoles = await this.fetchTeamSpaceRoles();
+      this.contentBuilder.Canvas.getFrameEl().setAttribute("aria-label", "content-builder-frame"), this.updateFrameSize(), this._teamSpaceRoles = await this.fetchTeamSpaceRoles(), this.prefetchBlockTypes();
     }), this.contentBuilder?.on("load", async (i) => {
       this.contentBuilder?.getEl()?.addEventListener(
         "mousedown",
@@ -144543,9 +144551,9 @@ let Qn = class extends hn {
         this.hasBoundUpdate || (this.contentBuilder?.on("update", () => {
           this.emit("cx-change");
         }), this.hasBoundUpdate = !0);
-        const { component: o, index: a, parentComponent: s } = i ?? {}, l = await D3t({
-          excludeBlocksWithNoTemplates: !this.isDesigner
-        }), c = this.contentBuilder?.getWrapper(), d = c?.findType(lt.Column) ?? [], u = d.find((k) => k.parent() === c) ?? d[0];
+        const { component: o, index: a, parentComponent: s } = i ?? {};
+        this.blockTypesPromise ??= this.prefetchBlockTypes();
+        const l = await this.blockTypesPromise, c = this.contentBuilder?.getWrapper(), d = c?.findType(lt.Column) ?? [], u = d.find((k) => k.parent() === c) ?? d[0];
         if (!u) {
           this.blockPicker.limitedBlocks = vR(lt.Column), this.blockPicker.show(), r();
           return;

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.187.0",
+  "version": "2.189.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/atoms/src/components/popup/popup.d.ts

@@ -1,5 +1,6 @@
 import { HideOptions, Rect } from '@floating-ui/dom';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { PopupToggle } from '../../../../types/src/popup';
 import { CSSResultGroup } from 'lit';
 
 export interface VirtualElement {
@@ -66,6 +67,13 @@ export default class CxPopup extends CortexElement {
      * clipped, using a `fixed` position strategy can often workaround it.
      */
     strategy: 'absolute' | 'fixed' | 'overlay';
+    /**
+     * Determines how the popup hides its panel while closed. `display` takes the panel out of layout,
+     * so nothing inside a closed popup is measured or can grow its surroundings. `visibility` keeps
+     * the panel laid out and only hides it visually, which lets it be measured before opening and
+     * avoids a flash on first open, at the cost of a closed panel that still occupies layout.
+     */
+    toggle: PopupToggle;
     /** The distance in pixels from which to offset the panel away from its anchor. */
     distance: number;
     /** The distance in pixels from which to offset the panel along its anchor. */

package/library/packages/atoms/src/components/tab-group/tab-group.d.ts

@@ -57,7 +57,7 @@ export default class CxTabGroup extends CortexElement {
      * repeatedly in quick succession (resize, slotchange, alignment/label changes), and each call creates its own
      * observer that only disconnects itself once its callback fires. Without tracking and disconnecting the previous
      * instance up front, a stale observer can fire after a newer one already recomputed tab visibility, overwriting
-     * dropdownOffset/data-hidden with outdated results.
+     * dropdownOffset and the tabs' hidden marker with outdated results.
      */
     private overflowObserver?;
     private tabs;
@@ -118,6 +118,7 @@ export default class CxTabGroup extends CortexElement {
     minTabWidth: number;
     /** Minimum clamp width - The minimum width of the tab not to be clamped */
     private static readonly MIN_CLAMP_WIDTH;
+    private static readonly HIDDEN_TAB_ATTRIBUTE;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/library/packages/organisms/src/content-builder/content-builder.d.ts

@@ -226,6 +226,14 @@ export default class CxContentBuilder extends CortexElement {
     private _dsm;
     private get dsm();
     private hasBoundUpdate;
+    /**
+     * In-flight/resolved block-types fetch, kept as a promise (not the awaited value) so the
+     * `component:open-picker` handler can share it even if it fires before the prefetch below
+     * settles. Prefetched once `isDesigner` is known (right after team-space roles resolve) so
+     * the block picker dialog shows immediately instead of waiting on the API on first open.
+     */
+    private blockTypesPromise;
+    private prefetchBlockTypes;
     private newlyAddedComponentTimeout;
     private readonly initializeCustomFrame;
     private containerDropdownObservers;

package/library/packages/types/src/popup.d.ts

@@ -0,0 +1,4 @@
+export declare enum PopupToggle {
+    Display = "display",
+    Visibility = "visibility"
+}

package/library/react-web-component.d.ts

@@ -431,6 +431,10 @@
           * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is clipped, using a `fixed` position strategy can often workaround it.
         */
         strategy?: 'absolute' | 'fixed' | 'overlay';
+        /**
+          * Determines how the popup hides its panel while closed. `display` takes the panel out of layout, so nothing inside a closed popup is measured or can grow its surroundings. `visibility` keeps the panel laid out and only hides it visually, which lets it be measured before opening and avoids a flash on first open, at the cost of a closed panel that still occupies layout.
+        */
+        toggle?: 'display' | 'visibility';
         /**
           * The distance in pixels from which to offset the panel away from its anchor.
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "2.187.0",
+  "version": "2.189.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {