@forcecalendar/interface 1.0.56 → 1.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.56",
+  "version": "1.0.57",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/core/BaseComponent.js

@@ -31,6 +31,8 @@ export class BaseComponent extends HTMLElement {
   disconnectedCallback() {
     this.unmount();
     this.cleanup();
+    this._styleEl = null;
+    this._contentWrapper = null;
   }
 
   // To be overridden by child classes
@@ -131,18 +133,102 @@ export class BaseComponent extends HTMLElement {
     // Clean up existing listeners before replacing DOM
     this.cleanup();
 
-    const styles = `
-            <style>
-                ${this.getBaseStyles()}
-                ${this.getStyles()}
-            </style>
-        `;
-
     const template = this.template();
-    this.shadowRoot.innerHTML = styles + template;
+
+    // First render: create style element and content wrapper
+    if (!this._styleEl) {
+      this._styleEl = document.createElement('style');
+      this.shadowRoot.appendChild(this._styleEl);
+      this._contentWrapper = document.createElement('div');
+      this._contentWrapper.setAttribute('id', 'fc-root');
+      this._contentWrapper.style.display = 'contents';
+      this.shadowRoot.appendChild(this._contentWrapper);
+    }
+
+    // Update styles on every render in case getStyles() depends on state
+    this._styleEl.textContent = this.getBaseStyles() + '\n' + this.getStyles();
+
+    // Save scroll positions and focused element before DOM replacement
+    const scrollPositions = this._saveScrollPositions();
+    const activeSelector = this._getActiveElementSelector();
+
+    this._contentWrapper.innerHTML = template;
+
+    // Restore scroll positions and focus
+    this._restoreScrollPositions(scrollPositions);
+    this._restoreFocus(activeSelector);
+
     this.afterRender();
   }
 
+  /**
+   * Save scroll positions of all scrollable containers within shadow DOM
+   * @returns {Map<string, {top: number, left: number}>}
+   */
+  _saveScrollPositions() {
+    const positions = new Map();
+    if (!this._contentWrapper) return positions;
+    const scrollables = this._contentWrapper.querySelectorAll('[id]');
+    scrollables.forEach(el => {
+      if (el.scrollTop !== 0 || el.scrollLeft !== 0) {
+        positions.set(el.id, { top: el.scrollTop, left: el.scrollLeft });
+      }
+    });
+    return positions;
+  }
+
+  /**
+   * Restore previously saved scroll positions
+   * @param {Map<string, {top: number, left: number}>} positions
+   */
+  _restoreScrollPositions(positions) {
+    if (!this._contentWrapper || positions.size === 0) return;
+    positions.forEach((pos, id) => {
+      const el = this._contentWrapper.querySelector(`[id="${CSS.escape(id)}"]`);
+      if (el) {
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+      }
+    });
+  }
+
+  /**
+   * Get a CSS selector for the currently focused element within shadow DOM
+   * @returns {string|null}
+   */
+  _getActiveElementSelector() {
+    const active = this.shadowRoot.activeElement;
+    if (!active || active === this._contentWrapper) return null;
+    if (active.id) return `[id="${CSS.escape(active.id)}"]`;
+    // Prefer data attributes over className to avoid invalid selectors
+    if (active.dataset && active.dataset.action) {
+      return `[data-action="${CSS.escape(active.dataset.action)}"]`;
+    }
+    if (active.dataset && active.dataset.view) {
+      return `[data-view="${CSS.escape(active.dataset.view)}"]`;
+    }
+    if (active.tagName) {
+      return active.tagName.toLowerCase();
+    }
+    return null;
+  }
+
+  /**
+   * Restore focus to a previously focused element
+   * @param {string|null} selector
+   */
+  _restoreFocus(selector) {
+    if (!selector || !this._contentWrapper) return;
+    try {
+      const el = this._contentWrapper.querySelector(selector);
+      if (el && typeof el.focus === 'function') {
+        el.focus();
+      }
+    } catch (_) {
+      // Invalid selector, ignore
+    }
+  }
+
   template() {
     // Override in child classes to provide component template
     return '';