@forcecalendar/interface 1.0.56 → 1.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.56",
+  "version": "1.0.58",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",
@@ -52,9 +52,9 @@
     "@forcecalendar/core": ">=2.0.0"
   },
   "devDependencies": {
-    "@forcecalendar/core": "^2.1.18",
     "@babel/core": "^7.28.5",
     "@babel/preset-env": "^7.28.5",
+    "@forcecalendar/core": "^2.1.54",
     "babel-jest": "^30.2.0",
     "eslint": "^8.57.1",
     "jest": "^30.2.0",

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 '';

package/src/core/EventBus.js

@@ -167,9 +167,11 @@ class EventBus {
 
   /**
    * Check if event name matches a pattern
+   * Only `*` acts as a wildcard; all other characters match literally
    */
   matchesPattern(eventName, pattern) {
-    const regex = new RegExp('^' + pattern.replace(/\*/g, '.*') + '$');
+    const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp('^' + escaped.replace(/\*/g, '.*') + '$');
     return regex.test(eventName);
   }
 

package/src/renderers/MonthViewRenderer.js

@@ -102,9 +102,10 @@ export class MonthViewRenderer extends BaseViewRenderer {
 
   _renderEvent(event) {
     const color = this.getEventColor(event);
+    const textColor = this.getContrastingTextColor(color);
     return `
             <div class="fc-event" data-event-id="${this.escapeHTML(event.id)}"
-                 style="background-color: ${color}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                 style="background-color: ${color}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: ${textColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
                 ${this.escapeHTML(event.title)}
             </div>
         `;