@orangelogic/design-system 2.183.0 → 2.184.0

package/library/chunks/{color-swatch-group.DqP6pp2u.js → color-swatch-group.CfgmDRCB.js}

@@ -17350,6 +17350,9 @@ class uu extends Ji {
 }
 const Bt = process.env.NODE_ENV === "development", pu = x`<div class="tabulator-tableholder-wrapper"></div>`;
 class fu extends Me {
+  constructor(e) {
+    super(e), this.headerWidthObserver = null, this.headerWidthSyncFrame = null, this.element = this.createHolderElement(), this.wrapperElement = this.createWrapperElement(), this.wrapperElement.appendChild(this.element), this.tableElement = this.createTableElement(), this.heightFixer = this.createTableElement(), this.placeholder = null, this.placeholderContents = null, this.firstRender = !1, this.renderMode = "virtual", this.rows = [], this.activeRowsPipeline = [], this.activeRows = [], this.activeRowsCount = 0, this.displayRows = [], this.displayRowsCount = 0, this.scrollTop = 0, this.scrollLeft = 0, this.redrawBlock = !1, this.redrawBlockRestoreConfig = !1, this.redrawBlockRenderInPosition = !1, this.dataPipeline = [], this.displayPipeline = [], this.scrollbarWidth = 0, this.renderer = null, this.rowIndexMap = /* @__PURE__ */ new Map();
+  }
   /**
    * True when table has an explicit height (--table-height is set to a non-auto value (e.g. 100%, 500px));
    * false when height is variable (--table-height is "auto" or unset).
@@ -17358,9 +17361,6 @@ class fu extends Me {
   get fixedHeight() {
     return this.detectFixedHeight();
   }
-  constructor(e) {
-    super(e), this.element = this.createHolderElement(), this.wrapperElement = this.createWrapperElement(), this.wrapperElement.appendChild(this.element), this.tableElement = this.createTableElement(), this.heightFixer = this.createTableElement(), this.placeholder = null, this.placeholderContents = null, this.firstRender = !1, this.renderMode = "virtual", this.rows = [], this.activeRowsPipeline = [], this.activeRows = [], this.activeRowsCount = 0, this.displayRows = [], this.displayRowsCount = 0, this.scrollTop = 0, this.scrollLeft = 0, this.redrawBlock = !1, this.redrawBlockRestoreConfig = !1, this.redrawBlockRenderInPosition = !1, this.dataPipeline = [], this.displayPipeline = [], this.scrollbarWidth = 0, this.renderer = null, this.rowIndexMap = /* @__PURE__ */ new Map();
-  }
   // ////////////// Setup Functions /////////////////
   createWrapperElement() {
     return B(pu);
@@ -17403,7 +17403,7 @@ class fu extends Me {
       this.scrollLeft != e && (this.scrollLeft = e, this.dispatch("scroll-horizontal", e, t), this.dispatchExternal("scrollHorizontal", e, t), this._positionPlaceholder()), this.scrollTop != i && (this.scrollTop = i, this.renderer?.scrollRows(i, s), this.dispatch("scroll-vertical", i, s), this.dispatchExternal("scrollVertical", i, s));
     }), this.subscribe("table-initialized", () => {
       this.table.destroyed || this.syncPlaceholderInitializationState();
-    }), this.subscribe("column-show", this.checkPlaceholder.bind(this)), this.subscribe("column-hide", this.checkPlaceholder.bind(this)), this.subscribe("columns-loaded", this.checkPlaceholder.bind(this));
+    }), this.subscribe("column-show", this.checkPlaceholder.bind(this)), this.subscribe("column-hide", this.checkPlaceholder.bind(this)), this.subscribe("columns-loaded", this.checkPlaceholder.bind(this)), this.subscribe("table-destroy", this.disconnectHeaderWidthObserver.bind(this));
   }
   /**
    * IRow Manipulation
@@ -17834,7 +17834,18 @@ Data:     `,
     this.placeholder?.parentNode && this.placeholder.remove(), this.initializePlaceholder(), this.placeholder && (this.placeholder.setAttribute(
       "tabulator-render-mode",
       typeof this.renderMode == "string" ? this.renderMode : ""
-    ), this.getElement().appendChild(this.placeholder), this._positionPlaceholder(), this.adjustTableSize(), this.syncPlaceholderInitializationState());
+    ), this.getElement().appendChild(this.placeholder), this._positionPlaceholder(), this.observeHeaderWidth(), this.adjustTableSize(), this.syncPlaceholderInitializationState());
+  }
+  observeHeaderWidth() {
+    const e = this.table.columnManager?.getElement();
+    !e || typeof ResizeObserver > "u" || (this.disconnectHeaderWidthObserver(), this.headerWidthObserver = new ResizeObserver(() => {
+      this.headerWidthSyncFrame === null && (this.headerWidthSyncFrame = requestAnimationFrame(() => {
+        this.headerWidthSyncFrame = null, this._positionPlaceholder();
+      }));
+    }), this.headerWidthObserver.observe(e));
+  }
+  disconnectHeaderWidthObserver() {
+    this.headerWidthObserver?.disconnect(), this.headerWidthObserver = null, this.headerWidthSyncFrame !== null && (cancelAnimationFrame(this.headerWidthSyncFrame), this.headerWidthSyncFrame = null);
   }
   /**
    * While the table is not yet initialized, still show placeholder element so that
@@ -17850,19 +17861,18 @@ Data:     `,
     );
   }
   _clearPlaceholder() {
-    this.placeholder?.parentNode && this.placeholder.remove(), !!this.table.options.groupBy && this.getDisplayRows().length > 0 && this.getDisplayRows().every((t) => t.type === "group") || (this.tableElement.style.minWidth = ""), this.tableElement.style.display = "";
+    this.disconnectHeaderWidthObserver(), this.placeholder?.parentNode && this.placeholder.remove(), !!this.table.options.groupBy && this.getDisplayRows().length > 0 && this.getDisplayRows().every((t) => t.type === "group") || (this.tableElement.style.minWidth = ""), this.tableElement.style.display = "";
   }
   _positionPlaceholder() {
     if (this.placeholder?.parentNode) {
-      const e = Math.max(
-        this.table.columnManager?.getWidth() || 0,
-        this.getElement().clientWidth || 0,
-        this.table.element.clientWidth || 0
-      );
-      this.placeholder.style.width = e + "px", this.placeholderContents && (this.placeholderContents.style.width = Math.max(
-        this.table.rowManager?.getElement().clientWidth || 0,
-        this.table.element.clientWidth || 0
-      ) + "px", this.placeholderContents.style.marginLeft = this.scrollLeft + "px");
+      const e = this.table.columnManager?.getElement()?.offsetWidth || 0, t = this.table.columnManager?.getWidth() || 0, i = Math.max(e, t), s = i + "px";
+      if (this.placeholder.style.width !== s && (this.placeholder.style.width = s), this.placeholderContents) {
+        const o = Math.max(
+          this.table.rowManager?.getElement().clientWidth || 0,
+          this.table.element.clientWidth || 0
+        );
+        this.placeholderContents.style.width = Math.min(i, o) + "px", this.placeholderContents.style.marginLeft = this.scrollLeft + "px";
+      }
     }
   }
   styleRow(e, t) {

package/library/components/color-swatch-group.js

@@ -3,7 +3,7 @@ import "../chunks/typography.IqHbnd3C.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/color-swatch.D6Gg5bpz.js";
 import "../chunks/component.styles.CRO4Odto.js";
-import { C as v } from "../chunks/color-swatch-group.DqP6pp2u.js";
+import { C as v } from "../chunks/color-swatch-group.CfgmDRCB.js";
 import "../chunks/transformation.8uLv6uwG.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
 import { C as a } from "../chunks/asset-link-format.H5j0gJtQ.js";
-import { C as t } from "../chunks/color-swatch-group.DqP6pp2u.js";
+import { C as t } from "../chunks/color-swatch-group.CfgmDRCB.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/types.js

@@ -141,8 +141,8 @@ import { g as MF, F as uee } from "../chunks/form.DSsy3Fcy.js";
 import { c as $Zt, f as FZt, v as zZt, a as jZt } from "../chunks/form.DSsy3Fcy.js";
 import { d as RS, c as p8, e as pee, i as h8, h as hee, p as gee, t as mee } from "../chunks/date.iWq_pkIk.js";
 import { b as VZt, f as UZt, g as qZt, a as WZt, n as GZt } from "../chunks/date.iWq_pkIk.js";
-import { F as PF, a as fee, b as X4, H as vee, c as i0, d as yee, o as vu } from "../chunks/color-swatch-group.DqP6pp2u.js";
-import { C as YZt, e as XZt, f as JZt } from "../chunks/color-swatch-group.DqP6pp2u.js";
+import { F as PF, a as fee, b as X4, H as vee, c as i0, d as yee, o as vu } from "../chunks/color-swatch-group.CfgmDRCB.js";
+import { C as YZt, e as XZt, f as JZt } from "../chunks/color-swatch-group.CfgmDRCB.js";
 import { F as zd, C as J4, s as YC, a as $S } from "../chunks/folder-select.C4JVju2L.js";
 import { b as XC, a as mw, c as bee, r as Ue, j as _e, w as wee, R as xee } from "../chunks/jsx-runtime.CTpPVMxj.js";
 import { j as FS } from "../chunks/index.CrhRU5m8.js";

package/library/package.json

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

package/library/packages/hybrid/table-core/src/tabulator-tables/core/RowManager.d.ts

@@ -26,6 +26,8 @@ export default class RowManager extends CoreFeature implements IRowManager {
     heightFixer: HTMLElement;
     placeholder: HTMLElement | null;
     placeholderContents: HTMLElement | null;
+    private headerWidthObserver;
+    private headerWidthSyncFrame;
     firstRender: boolean;
     renderMode?: RenderMode;
     /**
@@ -136,6 +138,8 @@ export default class RowManager extends CoreFeature implements IRowManager {
     shouldShowPlaceholder(): boolean;
     syncColumnVisibilityState(): void;
     _showPlaceholder(): void;
+    private observeHeaderWidth;
+    private disconnectHeaderWidthObserver;
     /**
      * While the table is not yet initialized, still show placeholder element so that
      * table's height is not 0 (header-only), but hide the placeholder text

package/package.json

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