Merge branch 'main' into feat/slot-controller-ssr

Author: bennypowers

.changeset/clear-pugs-make.md

@@ -1,5 +1,30 @@
 ---
-"@patternfly/pfe-core": patch
+"@patternfly/pfe-core": major
 "@patternfly/elements": patch
 ---
-Enable context protocol in SSR scenarios.
+Enable `connectedCallback()` and context protocol in SSR scenarios.
+
+BREAKING CHANGE
+This change affects any element which is expected to execute in node JS when
+lit-ssr shims are present. By enabling the `connectedCallback()` to execute
+server side. Elements must ensure that their connectedCallbacks do not try to
+access the DOM.
+
+Before:
+
+```js
+connectedCallback() {
+super.connectedCallback();
+this.items = this.querySelectorAll('my-item');
+}
+```
+
+After:
+```js
+connectedCallback() {
+super.connectedCallback();
+if (!isServer) {
+this.items = this.querySelectorAll('my-item');
+}
+}
+```

.changeset/config.json

@@ -3,6 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "linked": [],
+  "prettier": false,
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

.changeset/dull-stingrays-film.md

@@ -1,5 +1,10 @@
 # @patternfly/pfe-core
 
+## 4.0.5
+### Patch Changes
+
+- 0fb28b6: `SlotController`: `hasContent`/`isEmpty` now respects text nodes
+
 ## 4.0.4
 
 ### Patch Changes

.changeset/olive-rivers-stick.md

@@ -23,9 +23,25 @@ export interface ScrollSpyControllerOptions extends IntersectionObserverInit {
    * @default el => el.getAttribute('href');
    */
   getHash?: (el: Element) => string | null;
+  /**
+   * Optional callback for when an intersection occurs
+   */
+  onIntersection?(): void;
 }
 
 export class ScrollSpyController implements ReactiveController {
+  static #instances = new Set<ScrollSpyController>;
+
+  static {
+    addEventListener('scroll', () => {
+      if (Math.round(window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
+        this.#instances.forEach(ssc => {
+          ssc.#setActive(ssc.#linkChildren.at(-1));
+        });
+      }
+    }, { passive: true });
+  }
+
   #tagNames: string[];
   #activeAttribute: string;
 
@@ -43,9 +59,11 @@ export class ScrollSpyController implements ReactiveController {
   #root: ScrollSpyControllerOptions['root'];
   #rootMargin?: string;
   #threshold: number | number[];
+  #intersectingElements: Element[] = [];
 
   #getRootNode: () => Node | null;
   #getHash: (el: Element) => string | null;
+  #onIntersection?: () => void;
 
   get #linkChildren(): Element[] {
     return Array.from(this.host.querySelectorAll(this.#tagNames.join(',')))
@@ -94,13 +112,22 @@ export class ScrollSpyController implements ReactiveController {
     this.#threshold = options.threshold ?? 0.85;
     this.#getRootNode = () => options.rootNode ?? host.getRootNode?.() ?? null;
     this.#getHash = options?.getHash ?? ((el: Element) => el.getAttribute('href'));
+    this.#onIntersection = options?.onIntersection;
   }
 
   hostConnected(): void {
+    ScrollSpyController.#instances.add(this);
     this.#initIo();
   }
 
-  #initIo() {
+  hostDisconnected(): void {
+    ScrollSpyController.#instances.delete(this);
+    this.#io?.disconnect();
+  }
+
+  #initializing = true;
+
+  async #initIo() {
     const rootNode = this.#getRootNode();
     if (rootNode instanceof Document || rootNode instanceof ShadowRoot) {
       const { rootMargin, threshold, root } = this;
@@ -151,6 +178,25 @@ export class ScrollSpyController implements ReactiveController {
       this.#setActive(last ?? this.#linkChildren.at(0));
     }
     this.#intersected = true;
+    this.#intersectingElements =
+      entries
+          .filter(x => x.isIntersecting)
+          .map(x => x.target);
+    if (this.#initializing) {
+      const ints = entries?.filter(x => x.isIntersecting) ?? [];
+      if (this.#intersectingElements) {
+        const [{ target = null } = {}] = ints;
+        const { id } = target ?? {};
+        if (id) {
+          const link = this.#linkChildren.find(link => this.#getHash(link) === `#${id}`);
+          if (link) {
+            this.#setActive(link);
+          }
+        }
+      }
+      this.#initializing = false;
+    }
+    this.#onIntersection?.();
   }
 
   /**

core/pfe-core/CHANGELOG.md

@@ -143,16 +143,16 @@ export class SlotController implements SlotControllerPublicAPI {
     this.host.requestUpdate();
   }
 
-  hostDisconnected(): void {
-    this.#mo.disconnect();
-  }
-
   hostUpdated(): void {
     if (!this.#slotMapInitialized) {
       this.#initSlotMap();
     }
   }
 
+  hostDisconnected(): void {
+    this.#mo.disconnect();
+  }
+
   #initSlotMap() {
     // Loop over the properties provided by the schema
     for (const slotName of this.#slotNames

core/pfe-core/controllers/scroll-spy-controller.ts

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/pfe-core",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "license": "MIT",
   "description": "PatternFly Elements Core Library",
   "customElements": "custom-elements.json",