igniteui-webcomponents 7.2.4 → 7.3.0-beta.1

package/{components/common → internals}/controllers/key-bindings.js

@@ -1,5 +1,8 @@
 import { createAbortHandle } from '../abort-handler.js';
-import { asArray, getElementFromPath, isFunction, partition, toMerged, } from '../util.js';
+import { asArray, partition } from '../utils/arrays.js';
+import { isElement } from '../utils/dom.js';
+import { toMerged } from '../utils/objects.js';
+import { isFunction } from '../utils/types.js';
 export const arrowLeft = 'ArrowLeft';
 export const arrowRight = 'ArrowRight';
 export const arrowUp = 'ArrowUp';
@@ -16,27 +19,41 @@ export const altKey = 'Alt';
 export const ctrlKey = 'Control';
 export const metaKey = 'Meta';
 export const shiftKey = 'Shift';
-const MODIFIERS = new Set(['alt', 'control', 'meta', 'shift']);
-const ALL_MODIFIER_VALUES = Array.from(MODIFIERS).sort();
-export const MODIFIER_EVENT_KEYS = {
-    alt: 'altKey',
-    control: 'ctrlKey',
-    meta: 'metaKey',
-    shift: 'shiftKey',
-};
+const MODIFIER_ENTRIES = [
+    ['alt', 'altKey'],
+    ['control', 'ctrlKey'],
+    ['meta', 'metaKey'],
+    ['shift', 'shiftKey'],
+];
+const ALL_MODIFIER_VALUES = MODIFIER_ENTRIES.map(([name]) => name);
+const MODIFIERS = new Set(ALL_MODIFIER_VALUES);
+export const MODIFIER_EVENT_KEYS = Object.fromEntries(MODIFIER_ENTRIES);
 function normalizeKeys(keys) {
     return asArray(keys).map((key) => key.toLowerCase());
 }
+export function isKey(event, key) {
+    return event.key.toLowerCase() === key.toLowerCase();
+}
 function isKeydown(event) {
     return event.type === 'keydown';
 }
 function isKeyup(event) {
     return event.type === 'keyup';
 }
+function sortModifiers(modifiers) {
+    return ALL_MODIFIER_VALUES.filter((mod) => modifiers.includes(mod));
+}
+function getActiveModifiers(event) {
+    const active = [];
+    for (const [name, property] of MODIFIER_ENTRIES) {
+        if (event[property]) {
+            active.push(name);
+        }
+    }
+    return active;
+}
 function createCombinationKey(keys, modifiers) {
-    const sortedKeys = keys.toSorted();
-    const sortedModifiers = ALL_MODIFIER_VALUES.filter((mod) => modifiers.includes(mod)).sort();
-    return sortedModifiers.concat(sortedKeys).join('+');
+    return modifiers.concat(keys.length > 1 ? keys.toSorted() : keys).join('+');
 }
 class KeyBindingController {
     static { this._defaultOptions = {
@@ -80,20 +97,20 @@ class KeyBindingController {
         }
         return false;
     }
-    _shouldSkip(event) {
-        const skip = this._options.skip;
-        if (!this._allowedKeys.has(event.key.toLowerCase())) {
+    _shouldSkip(event, key) {
+        if (!this._allowedKeys.has(key)) {
             return true;
         }
-        if (!getElementFromPath((e) => e === this._element, event)) {
+        const path = event.composedPath();
+        const element = this._element;
+        if (!path.some((node) => node === element)) {
             return true;
         }
-        if (Array.isArray(skip)) {
-            if (!this._skipSelector) {
-                return false;
-            }
-            return Boolean(getElementFromPath(this._skipSelector, event));
+        const selector = this._skipSelector;
+        if (selector) {
+            return path.some((node) => isElement(node) && node.matches(selector));
         }
+        const skip = this._options.skip;
         return isFunction(skip)
             ? skip.call(this._host, event.target, event)
             : false;
@@ -111,18 +128,18 @@ class KeyBindingController {
         this._pressedKeys.clear();
     }
     _handleKeyEvent(event) {
-        if (this._shouldSkip(event)) {
-            const key = event.key.toLowerCase();
-            if (!MODIFIERS.has(key) && isKeyup(event)) {
+        const key = event.key.toLowerCase();
+        const isModifier = MODIFIERS.has(key);
+        if (this._shouldSkip(event, key)) {
+            if (!isModifier && isKeyup(event)) {
                 this._pressedKeys.delete(key);
             }
             return;
         }
-        const key = event.key.toLowerCase();
-        if (!MODIFIERS.has(key)) {
+        if (!isModifier) {
             this._pressedKeys.add(key);
         }
-        const activeModifiers = ALL_MODIFIER_VALUES.filter((mod) => event[MODIFIER_EVENT_KEYS[mod]]);
+        const activeModifiers = getActiveModifiers(event);
         const combination = createCombinationKey(Array.from(this._pressedKeys), activeModifiers);
         let binding = this._bindings.get(combination);
         if (!binding && this._pressedKeys.size > 1) {
@@ -132,7 +149,7 @@ class KeyBindingController {
             this._applyEventModifiers(binding, event);
             binding.handler.call(this._host, event);
         }
-        if (!MODIFIERS.has(key) && isKeyup(event)) {
+        if (!isModifier && isKeyup(event)) {
             this._pressedKeys.delete(key);
         }
     }
@@ -149,7 +166,7 @@ class KeyBindingController {
     }
     set(key, handler, bindingOptions) {
         const { keys, modifiers } = parseKeys(key);
-        const combination = createCombinationKey(keys, modifiers);
+        const combination = createCombinationKey(keys, sortModifiers(modifiers));
         const options = toMerged(this._options.bindingDefaults, bindingOptions ?? {});
         for (const each of [...keys, ...modifiers]) {
             this._allowedKeys.add(each);

package/internals/controllers/key-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-bindings.js","sourceRoot":"","sources":["../../../src/internals/controllers/key-bindings.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { asArray, partition } from '../utils/arrays.js';\nimport { isElement } from '../utils/dom.js';\nimport { toMerged } from '../utils/objects.js';\nimport { isFunction } from '../utils/types.js';\n\n//#region Keys and modifiers\n\n/* Common keys */\nexport const arrowLeft = 'ArrowLeft' as const;\nexport const arrowRight = 'ArrowRight' as const;\nexport const arrowUp = 'ArrowUp' as const;\nexport const arrowDown = 'ArrowDown' as const;\nexport const enterKey = 'Enter' as const;\nexport const spaceBar = ' ' as const;\nexport const escapeKey = 'Escape' as const;\nexport const homeKey = 'Home' as const;\nexport const endKey = 'End' as const;\nexport const pageUpKey = 'PageUp' as const;\nexport const pageDownKey = 'PageDown' as const;\nexport const tabKey = 'Tab' as const;\n\n/* Modifiers */\nexport const altKey = 'Alt' as const;\nexport const ctrlKey = 'Control' as const;\nexport const metaKey = 'Meta' as const;\nexport const shiftKey = 'Shift' as const;\n\n//#endregion\n\n//#region Types\n\n/* Types */\ntype KeyBindingHandler = (event: KeyboardEvent) => void;\ntype KeyBindingObserverCleanup = { unsubscribe: () => void };\n\n/**\n * Whether the current event should be ignored by the controller.\n *\n * @param node - The event target\n * @param event - The event object\n *\n * When `true` is returned, the current event is ignored.\n */\ntype KeyBindingSkipCallback = (node: Element, event: KeyboardEvent) => boolean;\n\n/**\n * The event type which will trigger the bound handler.\n */\ntype KeyBindingTrigger = 'keydown' | 'keyup';\n\n/**\n * Configuration object for the controller.\n * @hidden\n */\ninterface KeyBindingControllerOptions {\n  /**\n   * By default, the controller listens for keypress events in the context of the host element.\n   * If you pass a `ref`, you can limit the observation to a certain DOM part of the host scope.\n   */\n  ref?: Ref;\n  /**\n   * Option to ignore key press events.\n   *\n   * If passed an array of CSS selectors, it will ignore key presses originating from elements in the event composed path\n   * that match one of the selectors.\n   * Otherwise you can pass a {@link KeyBindingSkipCallback} function.\n   *\n   * Defaults to `['input', 'textarea', 'select']`.\n   *\n   * @example\n   * ```ts\n   * {\n   *  // Skip events originating from elements with `readonly` attribute\n   *  skip: ['[readonly]']\n   * }\n   * ...\n   * {\n   * // Same as above but with a callback\n   *  skip: (node: Element) => node.hasAttribute('readonly')\n   * }\n   * ```\n   */\n  skip?: string[] | KeyBindingSkipCallback;\n  /**\n   * A set of KeyBindingOptions configuration which is applied to every handler\n   * that is added to the controller.\n   *\n   * Any additional KeyBindingOptions values passed when `set` is called\n   * will be merged with `bindingDefaults`.\n   */\n  bindingDefaults?: KeyBindingOptions;\n}\n\n/**\n * Configuration object for customizing the behavior of\n * the registered handler.\n */\ninterface KeyBindingOptions {\n  /**\n   * The event type(s) on which the handler will be invoked.\n   *\n   * Defaults to `keydown` if not set.\n   */\n  triggers?: KeyBindingTrigger[];\n  /**\n   * Whether the handler should fire on auto-repeated keydown events (i.e. when a key is held down).\n   *\n   * Defaults to `false`.\n   */\n  repeat?: boolean;\n  /**\n   * Whether to call `preventDefault` on the target event before the handler is invoked.\n   */\n  preventDefault?: boolean;\n  /**\n   * Whether to call `stopPropagation` on the target event before the handler is invoked.\n   */\n  stopPropagation?: boolean;\n}\n\n/** @hidden */\ninterface KeyBinding {\n  keys: string[];\n  handler: KeyBindingHandler;\n  options?: KeyBindingOptions;\n  modifiers: string[];\n}\n\n//#endregion\n\n//#region Internal functions and constants\n\n/**\n * Every modifier, paired with the `KeyboardEvent` boolean property it is read\n * from - `ctrlKey` is the property for the `'control'` modifier, not `'controlKey'`.\n *\n * Kept in alphabetical order: combination keys sort their modifiers, and every\n * derived collection below inherits that order for free.\n */\nconst MODIFIER_ENTRIES = [\n  ['alt', 'altKey'],\n  ['control', 'ctrlKey'],\n  ['meta', 'metaKey'],\n  ['shift', 'shiftKey'],\n] as const satisfies ReadonlyArray<readonly [string, keyof KeyboardEvent]>;\n\nconst ALL_MODIFIER_VALUES = MODIFIER_ENTRIES.map(([name]) => name);\nconst MODIFIERS = new Set<string>(ALL_MODIFIER_VALUES);\n\n/** {@link MODIFIER_ENTRIES} as a lookup of modifier name to event property. */\nexport const MODIFIER_EVENT_KEYS: Record<string, string> =\n  Object.fromEntries(MODIFIER_ENTRIES);\n\nfunction normalizeKeys(keys: string | string[]): string[] {\n  return asArray(keys).map((key) => key.toLowerCase());\n}\n\n/**\n * Whether the event's key matches `key`, case-insensitively. Prefer this over\n * comparing `event.key` directly - the key names of this module are lowercase,\n * while real events carry the canonical casing (e.g. `Enter`).\n */\nexport function isKey(event: KeyboardEvent, key: string): boolean {\n  return event.key.toLowerCase() === key.toLowerCase();\n}\n\nfunction isKeydown(event: Event): boolean {\n  return event.type === 'keydown';\n}\n\nfunction isKeyup(event: Event): boolean {\n  return event.type === 'keyup';\n}\n\n/** Sorts `modifiers` alphabetically, by filtering the already sorted source. */\nfunction sortModifiers(modifiers: string[]): string[] {\n  return ALL_MODIFIER_VALUES.filter((mod) => modifiers.includes(mod));\n}\n\n/** Returns the modifiers active for `event`, already sorted. */\nfunction getActiveModifiers(event: KeyboardEvent): string[] {\n  const active: string[] = [];\n\n  for (const [name, property] of MODIFIER_ENTRIES) {\n    if (event[property]) {\n      active.push(name);\n    }\n  }\n\n  return active;\n}\n\n/**\n * Creates a normalized combination key string from the provided keys and modifiers.\n *\n * The combination key is a string that uniquely identifies a specific combination of keys and modifiers.\n * It is created by sorting the keys and modifiers alphabetically and joining them with a '+' separator.\n *\n * `modifiers` must already be sorted - see {@link sortModifiers} and {@link getActiveModifiers}.\n */\nfunction createCombinationKey(keys: string[], modifiers: string[]): string {\n  return modifiers.concat(keys.length > 1 ? keys.toSorted() : keys).join('+');\n}\n\n//#endregion\n\n/**\n * A controller for managing key bindings on a host element. It allows you to register handlers for specific key combinations,\n * with support for modifier keys and event options such as `preventDefault` and `stopPropagation`.\n *\n * The controller listens for keyboard events on the host element (or an optionally specified element) and invokes the appropriate handlers\n * when the registered key combinations are detected.\n * @hidden\n */\nclass KeyBindingController implements ReactiveController {\n  //#region Private properties and state\n\n  private static readonly _defaultOptions: KeyBindingControllerOptions = {\n    skip: ['input', 'textarea', 'select'],\n    bindingDefaults: { preventDefault: true },\n  };\n\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _ref?: Ref;\n  private readonly _abortHandle = createAbortHandle();\n\n  private readonly _bindings = new Map<string, KeyBinding>();\n  private readonly _allowedKeys = new Set<string>();\n  private readonly _pressedKeys = new Set<string>();\n\n  private readonly _options: KeyBindingControllerOptions;\n  private readonly _skipSelector: string | undefined;\n\n  private _observedElement?: Element;\n\n  private get _element(): Element {\n    if (this._observedElement) {\n      return this._observedElement;\n    }\n    return this._ref?.value || this._host;\n  }\n\n  //#endregion\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    options?: KeyBindingControllerOptions\n  ) {\n    this._host = host;\n    this._ref = options?.ref;\n    this._options = toMerged(\n      KeyBindingController._defaultOptions,\n      options ?? {}\n    );\n\n    if (Array.isArray(this._options.skip)) {\n      this._skipSelector = this._options.skip.join(',');\n    }\n\n    host.addController(this);\n  }\n\n  //#region Private API\n\n  /**\n   * Applies the event modifiers specified in the binding options to the provided keyboard event.\n   * If `preventDefault` is set, it calls `event.preventDefault()`.\n   * If `stopPropagation` is set, it calls `event.stopPropagation()`.\n   */\n  private _applyEventModifiers(\n    binding: KeyBinding,\n    event: KeyboardEvent\n  ): void {\n    if (binding.options?.preventDefault) {\n      event.preventDefault();\n    }\n\n    if (binding.options?.stopPropagation) {\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Determines whether the provided keyboard event matches the specified key binding,\n   * taking into account the event type and the binding's trigger options.\n   */\n  private _bindingMatches(binding: KeyBinding, event: KeyboardEvent): boolean {\n    const triggers = binding.options?.triggers ?? ['keydown'];\n\n    if (isKeydown(event) && triggers.includes('keydown')) {\n      return !event.repeat || Boolean(binding.options?.repeat);\n    }\n\n    if (isKeyup(event) && triggers.includes('keyup')) {\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Determines whether the provided event should be ignored based on the controller's configuration and the event's context.\n   * The method checks if the event's key is among the allowed keys, if the event originated from within the controller's scope,\n   * and if it matches any of the skip conditions defined in the controller's options.\n   */\n  private _shouldSkip(event: KeyboardEvent, key: string): boolean {\n    if (!this._allowedKeys.has(key)) {\n      return true;\n    }\n\n    const path = event.composedPath();\n    const element = this._element;\n\n    if (!path.some((node) => node === element)) {\n      return true;\n    }\n\n    const selector = this._skipSelector;\n\n    if (selector) {\n      return path.some((node) => isElement(node) && node.matches(selector));\n    }\n\n    const skip = this._options.skip;\n\n    return isFunction(skip)\n      ? skip.call(this._host, event.target as Element, event)\n      : false;\n  }\n\n  //#endregion\n\n  //#region Controller lifecycle\n\n  /** @internal */\n  public hostConnected(): void {\n    const { signal } = this._abortHandle;\n    this._host.addEventListener('keyup', this, { signal });\n    this._host.addEventListener('keydown', this, { signal });\n    globalThis.addEventListener('blur', this, { signal });\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._abortHandle.abort();\n  }\n\n  //#endregion\n\n  //#region Event handling\n\n  /**\n   * Handles the global blur event to clear the internal state of pressed keys.\n   *\n   * This is necessary to prevent \"stuck\" keys when the user switches to another application\n   * or tab while holding down a key.\n   */\n  private _handleGlobalBlur(): void {\n    this._pressedKeys.clear();\n  }\n\n  /**\n   * Handles keyboard events on the observed element.\n   *\n   * It checks if the event should be skipped based on the controller's configuration,\n   * and if not, it determines if there is a registered handler for the combination of pressed keys and active modifiers.\n   *\n   * If a matching handler is found, it applies the specified event modifiers and invokes the handler.\n   * It also manages the internal state of currently pressed keys to accurately detect key combinations.\n   *\n   */\n  private _handleKeyEvent(event: KeyboardEvent): void {\n    const key = event.key.toLowerCase();\n    const isModifier = MODIFIERS.has(key);\n\n    if (this._shouldSkip(event, key)) {\n      // Always clean up on keyup regardless of whether the event is otherwise skipped.\n      if (!isModifier && isKeyup(event)) {\n        this._pressedKeys.delete(key);\n      }\n      return;\n    }\n\n    if (!isModifier) {\n      this._pressedKeys.add(key);\n    }\n\n    const activeModifiers = getActiveModifiers(event);\n\n    const combination = createCombinationKey(\n      Array.from(this._pressedKeys),\n      activeModifiers\n    );\n    let binding = this._bindings.get(combination);\n\n    // When multiple non-modifier keys are simultaneously in _pressedKeys (due to overlapping\n    // key presses, e.g. pressing ArrowUp before ArrowDown's keyup fires), the full combination\n    // won't match any single-key binding. Fall back to just the current key + modifiers so that\n    // single-key bindings continue to fire even when other keys are still \"held\".\n    if (!binding && this._pressedKeys.size > 1) {\n      binding = this._bindings.get(\n        createCombinationKey([key], activeModifiers)\n      );\n    }\n\n    if (binding && this._bindingMatches(binding, event)) {\n      this._applyEventModifiers(binding, event);\n      binding.handler.call(this._host, event);\n    }\n\n    if (!isModifier && isKeyup(event)) {\n      this._pressedKeys.delete(key);\n    }\n  }\n\n  /** @internal */\n  public handleEvent(event: KeyboardEvent | FocusEvent): void {\n    switch (event.type) {\n      case 'keydown':\n      case 'keyup':\n        this._handleKeyEvent(event as KeyboardEvent);\n        break;\n      case 'blur':\n        this._handleGlobalBlur();\n        break;\n    }\n  }\n\n  //#endregion\n\n  //#region Public API\n\n  /**\n   * Registers a key binding with the specified key(s), handler function, and optional configuration.\n   *\n   * The `key` parameter can be a single key or an array of keys, and can include modifier keys (e.g., 'ctrl+s', ['shift', 'a']).\n   * The `handler` is a function that will be called when the specified key combination is detected.\n   * The `bindingOptions` allow you to customize the behavior of the binding, such as which event types trigger the handler,\n   * whether it should fire on auto-repeated keydown events, and whether to call `preventDefault` or `stopPropagation`.\n   *\n   * The method returns the controller instance to allow for method chaining.\n   */\n  public set(\n    key: string | string[],\n    handler: KeyBindingHandler,\n    bindingOptions?: KeyBindingOptions\n  ): this {\n    const { keys, modifiers } = parseKeys(key);\n    const combination = createCombinationKey(keys, sortModifiers(modifiers));\n    const options = toMerged(\n      this._options.bindingDefaults!,\n      bindingOptions ?? {}\n    );\n\n    for (const each of [...keys, ...modifiers]) {\n      this._allowedKeys.add(each);\n    }\n\n    this._bindings.set(combination, { keys, handler, options, modifiers });\n\n    return this;\n  }\n\n  /**\n   * Registers the provided handler function to be called when either the Enter key or Space bar is pressed.\n   *\n   * This is a common pattern for activating buttons or interactive elements, and this method provides a convenient way to set up such bindings.\n   *\n   * The method accepts optional `KeyBindingOptions` which are applied to both the Enter key and Space bar bindings.\n   * It returns the controller instance to allow for method chaining.\n   *\n   */\n  public setActivateHandler(\n    handler: KeyBindingHandler,\n    options?: KeyBindingOptions\n  ): this {\n    this.set(enterKey, handler, options);\n    this.set(spaceBar, handler, options);\n\n    return this;\n  }\n\n  /**\n   * Sets the controller to listen for keyboard events on an arbitrary `element` in the page context.\n   * All the configuration and event handlers are applied as well.\n   *\n   * Returns an object with an `unsubscribe` function which should be called when the observing of keyboard\n   * events on the `element` should cease.\n   */\n  public observeElement(element: Element): KeyBindingObserverCleanup {\n    element.addEventListener('keydown', this);\n    element.addEventListener('keyup', this);\n    this._observedElement = element;\n\n    return {\n      unsubscribe: () => {\n        element.removeEventListener('keydown', this);\n        element.removeEventListener('keyup', this);\n        if (this._observedElement === element) {\n          this._observedElement = undefined;\n        }\n      },\n    };\n  }\n\n  //#endregion\n}\n\n/**\n * Parses the provided key(s) and separates them into modifiers and regular keys.\n *\n * Modifiers are keys like Alt, Ctrl, Meta and Shift which modify the behavior of other keys when pressed in combination.\n * Regular keys are all other keys which trigger the bound handler when pressed.\n *\n * The returned `keys` and `modifiers` are normalized to lowercase for consistency.\n *\n * @internal\n *\n * @param inputKeys - The key or keys to parse, provided as a string or an array of strings.\n * @returns An object containing the separated `keys` and `modifiers`.\n */\nexport function parseKeys(inputKeys: string | string[]): {\n  keys: string[];\n  modifiers: string[];\n} {\n  const [modifiers, keys] = partition(normalizeKeys(inputKeys), (key) =>\n    MODIFIERS.has(key)\n  );\n  return { keys, modifiers };\n}\n\n/**\n * Controller factory function which creates a {@link KeyBindingController} instance and attaches it to the provided host.\n *\n * @param element - The host element to which the controller will be attached.\n * @param options - Optional configuration for the controller.\n * @returns The created {@link KeyBindingController} instance.\n *\n * @example\n * ```ts\n * class MyComponent extends LitElement {\n *   private _keyBindings = addKeybindings(this, {\n *     skip: ['input', 'textarea'], // Optional: Skip key events originating from these elements\n *     bindingDefaults: { preventDefault: true }, // Optional: Default options for all bindings\n *   });\n *\n *   constructor() {\n *     super();\n *     this._keyBindings.set('ctrl+s', this._handleSave); // Register a key binding\n *   }\n * ```\n */\nexport function addKeybindings(\n  element: ReactiveControllerHost & Element,\n  options?: KeyBindingControllerOptions\n): KeyBindingController {\n  return new KeyBindingController(element, options);\n}\n\nexport type {\n  KeyBindingController,\n  KeyBindingControllerOptions,\n  KeyBindingHandler,\n  KeyBindingObserverCleanup,\n  KeyBindingOptions,\n  KeyBindingSkipCallback,\n  KeyBindingTrigger,\n};\n"]}

package/{components/common → internals}/controllers/mutation-observer.d.ts

@@ -1,5 +1,5 @@
 import { type ReactiveController, type ReactiveControllerHost } from 'lit';
-/** @ignore */
+/** @hidden */
 export interface MutationControllerConfig<T extends Node = Node> {
     /** The callback function to run when a mutation occurs. */
     callback: MutationControllerCallback<T>;
@@ -55,13 +55,14 @@ declare class MutationController<T extends Node = Node> implements ReactiveContr
     private readonly _target;
     private readonly _config;
     private readonly _callback;
-    private readonly _filter?;
+    private readonly _matches;
     private _observer?;
     constructor(host: ReactiveControllerHost & Element, options: MutationControllerConfig<T>);
     /** @internal */
     hostConnected(): void;
     /** @internal */
     hostDisconnected(): void;
+    private _collect;
     private _process;
     /**
      * Begin receiving notifications of changes to the DOM based

package/{components/common → internals}/controllers/mutation-observer.js

@@ -1,13 +1,16 @@
 import { isServer, } from 'lit';
-import { isElement } from '../util.js';
-function applyNodeFilter(nodes, predicate) {
-    if (!predicate) {
-        return nodes;
+import { isElement } from '../utils/dom.js';
+function createNodeMatcher(filter) {
+    if (!filter) {
+        return () => true;
     }
-    return Array.isArray(predicate)
-        ? nodes.filter((node) => isElement(node) &&
-            predicate.some((selector) => node.matches(selector)))
-        : nodes.filter(predicate);
+    if (!Array.isArray(filter)) {
+        return filter;
+    }
+    const selector = filter.join(',');
+    return selector
+        ? (node) => isElement(node) && node.matches(selector)
+        : () => false;
 }
 class MutationController {
     constructor(host, options) {
@@ -15,7 +18,7 @@ class MutationController {
         this._callback = options.callback;
         this._config = options.config;
         this._target = options.target ?? this._host;
-        this._filter = options.filter;
+        this._matches = createNodeMatcher(options.filter);
         if (!isServer) {
             this._observer = new MutationObserver((records) => {
                 this.disconnect();
@@ -31,8 +34,14 @@ class MutationController {
     hostDisconnected() {
         this.disconnect();
     }
+    _collect(nodes, target, into) {
+        for (const node of nodes) {
+            if (this._matches(node)) {
+                into.push({ target, node: node });
+            }
+        }
+    }
     _process(records) {
-        const predicate = this._filter;
         const changes = {
             attributes: [],
             added: [],
@@ -41,20 +50,13 @@ class MutationController {
         for (const record of records) {
             const { type, target, attributeName, addedNodes, removedNodes } = record;
             if (type === 'attributes') {
-                changes.attributes.push(...applyNodeFilter([target], predicate).map((node) => ({
-                    node,
-                    attributeName,
-                })));
+                if (this._matches(target)) {
+                    changes.attributes.push({ node: target, attributeName });
+                }
             }
             else if (type === 'childList') {
-                changes.added.push(...applyNodeFilter([...addedNodes], predicate).map((node) => ({
-                    target: target,
-                    node,
-                })));
-                changes.removed.push(...applyNodeFilter([...removedNodes], predicate).map((node) => ({
-                    target: target,
-                    node,
-                })));
+                this._collect(addedNodes, target, changes.added);
+                this._collect(removedNodes, target, changes.removed);
             }
         }
         return { records, changes, observer: this };

package/internals/controllers/mutation-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutation-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/mutation-observer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\nimport { isElement } from '../utils/dom.js';\n\n/** @hidden */\nexport interface MutationControllerConfig<T extends Node = Node> {\n  /** The callback function to run when a mutation occurs. */\n  callback: MutationControllerCallback<T>;\n  /** The underlying mutation observer configuration parameters. */\n  config: MutationObserverInit;\n  /**\n   * The element to observe.\n   * If left out, the observer will listen on the host component itself.\n   */\n  target?: Element;\n  /**\n   * A filter configuration.\n   * See {@link MutationControllerFilter|this} for additional information.\n   */\n  filter?: MutationControllerFilter<T>;\n}\n\ntype MutationControllerCallback<T extends Node = Node> = (\n  params: MutationControllerParams<T>\n) => unknown;\n\n/**\n * Filter configuration to return elements that either match\n * an array of selector strings or a predicate function.\n */\ntype MutationControllerFilter<T extends Node = Node> =\n  | string[]\n  | ((node: T) => boolean);\n\ntype MutationDOMChange<T extends Node = Node> = {\n  /** The parent of the added/removed element. */\n  target: Element;\n  /** The added/removed element. */\n  node: T;\n};\n\ntype MutationAttributeChange<T extends Node = Node> = {\n  /** The host element of the changed attribute. */\n  node: T;\n  /** The changed attribute name. */\n  attributeName: string | null;\n};\n\ntype MutationChange<T extends Node = Node> = {\n  /** Elements that have attribute(s) changes. */\n  attributes: MutationAttributeChange<T>[];\n  /** Elements that have been added. */\n  added: MutationDOMChange<T>[];\n  /** Elements that have been removed. */\n  removed: MutationDOMChange<T>[];\n};\n\nexport type MutationControllerParams<T extends Node = Node> = {\n  /** The original mutation records from the underlying observer. */\n  records: MutationRecord[];\n  /** The aggregated changes. */\n  changes: MutationChange<T>;\n  /** The observer controller instance. */\n  observer: MutationController<T>;\n};\n\n/**\n * Resolves a filter configuration into a node predicate.\n *\n * A list of selectors is joined once into a single selector list, so matching a\n * node is a single `matches` call instead of one per selector.\n */\nfunction createNodeMatcher<T extends Node = Node>(\n  filter?: MutationControllerFilter<T>\n): (node: T) => boolean {\n  if (!filter) {\n    return () => true;\n  }\n\n  if (!Array.isArray(filter)) {\n    return filter;\n  }\n\n  const selector = filter.join(',');\n\n  return selector\n    ? (node) => isElement(node) && node.matches(selector)\n    : () => false;\n}\n\nclass MutationController<T extends Node = Node> implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _target: Element;\n  private readonly _config: MutationObserverInit;\n  private readonly _callback: MutationControllerCallback<T>;\n  private readonly _matches: (node: T) => boolean;\n\n  private _observer?: MutationObserver;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    options: MutationControllerConfig<T>\n  ) {\n    this._host = host;\n    this._callback = options.callback;\n    this._config = options.config;\n    this._target = options.target ?? this._host;\n    this._matches = createNodeMatcher(options.filter);\n\n    if (!isServer) {\n      this._observer = new MutationObserver((records) => {\n        this.disconnect();\n        this._callback.call(this._host, this._process(records));\n        this.observe();\n      });\n    }\n\n    host.addController(this);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this.observe();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this.disconnect();\n  }\n\n  private _collect(\n    nodes: NodeList,\n    target: Element,\n    into: MutationDOMChange<T>[]\n  ): void {\n    for (const node of nodes) {\n      if (this._matches(node as T)) {\n        into.push({ target, node: node as T });\n      }\n    }\n  }\n\n  private _process(records: MutationRecord[]): MutationControllerParams<T> {\n    const changes: MutationChange<T> = {\n      attributes: [],\n      added: [],\n      removed: [],\n    };\n\n    for (const record of records) {\n      const { type, target, attributeName, addedNodes, removedNodes } = record;\n\n      if (type === 'attributes') {\n        if (this._matches(target as T)) {\n          changes.attributes.push({ node: target as T, attributeName });\n        }\n      } else if (type === 'childList') {\n        this._collect(addedNodes, target as Element, changes.added);\n        this._collect(removedNodes, target as Element, changes.removed);\n      }\n    }\n\n    return { records, changes, observer: this };\n  }\n\n  /**\n   * Begin receiving notifications of changes to the DOM based\n   * on the configured {@link MutationControllerConfig.target|target} and observer {@link MutationControllerConfig.config|options}.\n   */\n  public observe(): void {\n    this._observer?.observe(this._target, this._config);\n  }\n\n  /** Stop watching for mutations. */\n  public disconnect(): void {\n    this._observer?.disconnect();\n  }\n}\n\n/**\n * Creates and attaches a mutation controller with `config` to the passed in `host`.\n *\n * Automatically starts/stops observing for mutation changes\n * in the respective component connect/disconnect callbacks.\n *\n * The mutation observer is disconnected before invoking the passed in callback and re-attached\n * after that in order to not loop itself in endless stream of changes.\n */\nexport function createMutationController<T extends Node = Node>(\n  host: ReactiveControllerHost & Element,\n  config: MutationControllerConfig<T>\n): MutationController<T> {\n  return new MutationController(host, config);\n}\n"]}

package/{components/common → internals}/controllers/resize-observer.d.ts

@@ -2,7 +2,7 @@ import { type ReactiveController, type ReactiveControllerHost } from 'lit';
 type ResizeObserverControllerCallback = (...args: Parameters<ResizeObserverCallback>) => unknown;
 /**
  * Configuration for initializing a resize controller.
- * @ignore
+ * @hidden
  */
 export interface ResizeObserverControllerConfig {
     /** The callback function to run when a resize mutation is triggered. */
@@ -16,6 +16,13 @@ export interface ResizeObserverControllerConfig {
      * Pass in `null` to skip setting an initial target.
      */
     target?: Element | null;
+    /**
+     * Whether observing a target should request an update on the host.
+     *
+     * Defaults to `true`. Set to `false` when the host already drives its own
+     * update cycle and an extra render per observed element is wasted work.
+     */
+    requestUpdate?: boolean;
 }
 declare class ResizeObserverController implements ReactiveController {
     private readonly _host;
@@ -23,8 +30,11 @@ declare class ResizeObserverController implements ReactiveController {
     private readonly _observer;
     private readonly _config;
     constructor(host: ReactiveControllerHost & Element, config: ResizeObserverControllerConfig);
+    /** The elements currently being observed. */
+    get targets(): ReadonlySet<Element>;
     /** Starts observing the `targe` element. */
     observe(target: Element): void;
+    private _requestUpdate;
     /** Stops observing the `target` element. */
     unobserve(target: Element): void;
     /** @internal */

package/{components/common → internals}/controllers/resize-observer.js

@@ -13,10 +13,18 @@ class ResizeObserverController {
         this._observer = new ResizeObserver((entries) => this._config.callback.call(this._host, entries, this._observer));
         host.addController(this);
     }
+    get targets() {
+        return this._targets;
+    }
     observe(target) {
         this._targets.add(target);
         this._observer.observe(target, this._config.options);
-        this._host.requestUpdate();
+        this._requestUpdate();
+    }
+    _requestUpdate() {
+        if (this._config.requestUpdate ?? true) {
+            this._host.requestUpdate();
+        }
     }
     unobserve(target) {
         this._targets.delete(target);
@@ -24,7 +32,10 @@ class ResizeObserverController {
     }
     hostConnected() {
         for (const target of this._targets) {
-            this.observe(target);
+            this._observer.observe(target, this._config.options);
+        }
+        if (this._targets.size > 0) {
+            this._requestUpdate();
         }
     }
     hostDisconnected() {

package/internals/controllers/resize-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-observer.js","sourceRoot":"","sources":["../../../src/internals/controllers/resize-observer.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAGT,MAAM,KAAK,CAAC;AA+Bb,MAAM,wBAAwB;IAM5B,YACE,IAAsC,EACtC,MAAsC;QANvB,aAAQ,GAAG,IAAI,GAAG,EAAW,CAAC;QAQ7C,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,CAAC;QACjD,CAAC;QAGD,IAAI,QAAQ,EAAE,CAAC;YACb,OAAO;QACT,CAAC;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE,CAC9C,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,CAChE,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAGD,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,QAAQ,CAAC;IACvB,CAAC;IAGM,OAAO,CAAC,MAAe;QAC5B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACrD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,IAAI,IAAI,EAAE,CAAC;YACvC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QAC7B,CAAC;IACH,CAAC;IAGM,SAAS,CAAC,MAAe;QAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAGM,aAAa;QAClB,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;IACH,CAAC;IAGM,gBAAgB;QACrB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;IAC9B,CAAC;CACF;AAMD,MAAM,UAAU,8BAA8B,CAC5C,IAAsC,EACtC,MAAsC;IAEtC,OAAO,IAAI,wBAAwB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AACpD,CAAC","sourcesContent":["import {\n  isServer,\n  type ReactiveController,\n  type ReactiveControllerHost,\n} from 'lit';\n\ntype ResizeObserverControllerCallback = (\n  ...args: Parameters<ResizeObserverCallback>\n) => unknown;\n\n/**\n * Configuration for initializing a resize controller.\n * @hidden\n */\nexport interface ResizeObserverControllerConfig {\n  /** The callback function to run when a resize mutation is triggered. */\n  callback: ResizeObserverControllerCallback;\n  /** Configuration options passed to the underlying ResizeObserver. */\n  options?: ResizeObserverOptions;\n  /**\n   * The initial target element to observe for resize mutations.\n   *\n   * If not provided, the host element will be set as initial target.\n   * Pass in `null` to skip setting an initial target.\n   */\n  target?: Element | null;\n  /**\n   * Whether observing a target should request an update on the host.\n   *\n   * Defaults to `true`. Set to `false` when the host already drives its own\n   * update cycle and an extra render per observed element is wasted work.\n   */\n  requestUpdate?: boolean;\n}\n\nclass ResizeObserverController implements ReactiveController {\n  private readonly _host: ReactiveControllerHost & Element;\n  private readonly _targets = new Set<Element>();\n  private readonly _observer!: ResizeObserver;\n  private readonly _config: ResizeObserverControllerConfig;\n\n  constructor(\n    host: ReactiveControllerHost & Element,\n    config: ResizeObserverControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n\n    if (this._config.target !== null) {\n      this._targets.add(this._config.target ?? host);\n    }\n\n    /* c8 ignore next 3 */\n    if (isServer) {\n      return;\n    }\n\n    this._observer = new ResizeObserver((entries) =>\n      this._config.callback.call(this._host, entries, this._observer)\n    );\n\n    host.addController(this);\n  }\n\n  /** The elements currently being observed. */\n  public get targets(): ReadonlySet<Element> {\n    return this._targets;\n  }\n\n  /** Starts observing the `targe` element. */\n  public observe(target: Element): void {\n    this._targets.add(target);\n    this._observer.observe(target, this._config.options);\n    this._requestUpdate();\n  }\n\n  private _requestUpdate(): void {\n    if (this._config.requestUpdate ?? true) {\n      this._host.requestUpdate();\n    }\n  }\n\n  /** Stops observing the `target` element. */\n  public unobserve(target: Element): void {\n    this._targets.delete(target);\n    this._observer.unobserve(target);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    for (const target of this._targets) {\n      this._observer.observe(target, this._config.options);\n    }\n\n    if (this._targets.size > 0) {\n      this._requestUpdate();\n    }\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._observer.disconnect();\n  }\n}\n\n/**\n * Creates a new resize controller bound to the given `host`\n * with {@link ResizeObserverControllerConfig | `config`}.\n */\nexport function createResizeObserverController(\n  host: ReactiveControllerHost & Element,\n  config: ResizeObserverControllerConfig\n): ResizeObserverController {\n  return new ResizeObserverController(host, config);\n}\n"]}

package/{components/common → internals}/controllers/root-click.js

@@ -1,31 +1,30 @@
 import { createAbortHandle } from '../abort-handler.js';
-import { getElementFromPath, isEmpty } from '../util.js';
+import { isEmpty } from '../utils/arrays.js';
 let ROOT_CLICK_LISTENER_ACTIVE = false;
 const SHARED_ABORT_HANDLER = createAbortHandle();
 const POINTER_DOWN_HOSTS = new Set();
 const HOST_CONFIGURATIONS = new WeakMap();
 const ACTIVE_HOSTS = new Set();
-function getHostTargets(host, config) {
-    return new Set(config?.target ? [host, config.target] : [host]);
+function isInsideHost(path, host, target) {
+    return path.some((node) => node === host || node === target);
 }
 function handlePointerDown(event) {
     POINTER_DOWN_HOSTS.clear();
+    const path = event.composedPath();
     for (const host of ACTIVE_HOSTS) {
-        const config = HOST_CONFIGURATIONS.get(host);
-        const targets = getHostTargets(host, config);
-        if (getElementFromPath((node) => targets.has(node), event)) {
+        if (isInsideHost(path, host, HOST_CONFIGURATIONS.get(host)?.target)) {
             POINTER_DOWN_HOSTS.add(host);
         }
     }
 }
 function handleRootClick(event) {
-    for (const host of [...ACTIVE_HOSTS]) {
+    const path = event.composedPath();
+    for (const host of Array.from(ACTIVE_HOSTS)) {
         if (host.keepOpenOnOutsideClick || POINTER_DOWN_HOSTS.has(host)) {
             continue;
         }
         const config = HOST_CONFIGURATIONS.get(host);
-        const targets = getHostTargets(host, config);
-        if (!getElementFromPath((node) => targets.has(node), event)) {
+        if (!isInsideHost(path, host, config?.target)) {
             config?.onHide ? config.onHide.call(host) : host.hide();
         }
     }
@@ -42,9 +41,6 @@ class RootClickController {
     }
     _addActiveHost() {
         ACTIVE_HOSTS.add(this._host);
-        if (this._config) {
-            HOST_CONFIGURATIONS.set(this._host, this._config);
-        }
         if (!ROOT_CLICK_LISTENER_ACTIVE) {
             const options = {
                 capture: true,
@@ -60,7 +56,6 @@ class RootClickController {
     }
     _removeActiveHost() {
         ACTIVE_HOSTS.delete(this._host);
-        HOST_CONFIGURATIONS.delete(this._host);
         POINTER_DOWN_HOSTS.delete(this._host);
         if (isEmpty(ACTIVE_HOSTS) && ROOT_CLICK_LISTENER_ACTIVE) {
             SHARED_ABORT_HANDLER.abort();

package/internals/controllers/root-click.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-click.js","sourceRoot":"","sources":["../../../src/internals/controllers/root-click.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport { createAbortHandle } from '../abort-handler.js';\nimport { isEmpty } from '../utils/arrays.js';\n\n/** Configuration options for the RootClickController */\ntype RootClickControllerConfig = {\n  /**\n   * An optional callback function to execute when an outside click occurs.\n   * If not provided, the `hide()` method of the host will be called.\n   */\n  onHide?: () => void;\n  /**\n   * An optional additional HTMLElement that, if clicked, should not trigger the hide action.\n   * This is useful for elements like a toggle button that opens the component.\n   */\n  target?: HTMLElement;\n};\n\n/** Interface for the host element that the RootClickController will be attached to. */\ninterface RootClickControllerHost extends ReactiveControllerHost, HTMLElement {\n  /**\n   * Indicates whether the host element is currently open or visible.\n   */\n  open: boolean;\n  /**\n   * If true, outside clicks will not trigger the hide action.\n   */\n  keepOpenOnOutsideClick?: boolean;\n  /**\n   * A method on the host to hide or close itself.\n   * This will be called if `hideCallback` is not provided in the config.\n   */\n  hide(): void;\n}\n\nlet ROOT_CLICK_LISTENER_ACTIVE = false;\n\n/** Shared abort handler for the singleton document listeners. */\nconst SHARED_ABORT_HANDLER = createAbortHandle();\n\n/** Tracks which hosts had a pointerdown event inside them. */\nconst POINTER_DOWN_HOSTS = new Set<RootClickControllerHost>();\n\nconst HOST_CONFIGURATIONS = new WeakMap<\n  RootClickControllerHost,\n  RootClickControllerConfig\n>();\n\nconst ACTIVE_HOSTS = new Set<RootClickControllerHost>();\n\n/**\n * Whether the event occurred \"inside\" the host, that is on the host itself or\n * on the additional `target` of its configuration.\n *\n * Takes an already resolved composed path, so a single one is shared by all the\n * active hosts instead of being rebuilt for each of them.\n */\nfunction isInsideHost(\n  path: EventTarget[],\n  host: RootClickControllerHost,\n  target?: HTMLElement\n): boolean {\n  return path.some((node) => node === host || node === target);\n}\n\nfunction handlePointerDown(event: PointerEvent): void {\n  POINTER_DOWN_HOSTS.clear();\n  const path = event.composedPath();\n\n  for (const host of ACTIVE_HOSTS) {\n    if (isInsideHost(path, host, HOST_CONFIGURATIONS.get(host)?.target)) {\n      POINTER_DOWN_HOSTS.add(host);\n    }\n  }\n}\n\nfunction handleRootClick(event: PointerEvent): void {\n  const path = event.composedPath();\n\n  // Snapshot the set: hiding a host deactivates it and mutates ACTIVE_HOSTS\n  // while we are still walking it.\n  for (const host of Array.from(ACTIVE_HOSTS)) {\n    if (host.keepOpenOnOutsideClick || POINTER_DOWN_HOSTS.has(host)) {\n      continue;\n    }\n\n    const config = HOST_CONFIGURATIONS.get(host);\n\n    if (!isInsideHost(path, host, config?.target)) {\n      config?.onHide ? config.onHide.call(host) : host.hide();\n    }\n  }\n\n  POINTER_DOWN_HOSTS.clear();\n}\n\n/* blazorSuppress */\n/**\n * A Lit ReactiveController that manages global click listeners to hide a component\n * when a click occurs outside of the component or its specified target.\n *\n * This controller implements a singleton pattern for the document click listener,\n * meaning only one event listener is attached to `document` regardless of how many\n * instances of `RootClickController` are active. Each controller instance\n * subscribes to this single listener.\n */\nclass RootClickController implements ReactiveController {\n  private readonly _host: RootClickControllerHost;\n  private _config?: RootClickControllerConfig;\n\n  constructor(\n    host: RootClickControllerHost,\n    config?: RootClickControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n    this._host.addController(this);\n\n    if (this._config) {\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n  }\n\n  /**\n   * Adds the host to the set of active hosts and ensures the global\n   * document click listener is active if needed.\n   */\n  private _addActiveHost(): void {\n    ACTIVE_HOSTS.add(this._host);\n\n    if (!ROOT_CLICK_LISTENER_ACTIVE) {\n      const options: AddEventListenerOptions = {\n        capture: true,\n        signal: SHARED_ABORT_HANDLER.signal,\n      };\n\n      document.addEventListener('pointerdown', handlePointerDown, {\n        ...options,\n        passive: true,\n      });\n      document.addEventListener('click', handleRootClick, options);\n      ROOT_CLICK_LISTENER_ACTIVE = true;\n    }\n  }\n\n  /**\n   * Removes the host from the set of active hosts and removes the global\n   * document click listener if no other hosts are active.\n   */\n  private _removeActiveHost(): void {\n    ACTIVE_HOSTS.delete(this._host);\n    POINTER_DOWN_HOSTS.delete(this._host);\n\n    if (isEmpty(ACTIVE_HOSTS) && ROOT_CLICK_LISTENER_ACTIVE) {\n      SHARED_ABORT_HANDLER.abort();\n      ROOT_CLICK_LISTENER_ACTIVE = false;\n    }\n  }\n\n  /**\n   * Configures the active state of the controller based on the host's `open` property.\n   * If `host.open` is true, the controller becomes active; otherwise, it becomes inactive.\n   */\n  private _configureListeners(): void {\n    this._host.open && !this._host.keepOpenOnOutsideClick\n      ? this._addActiveHost()\n      : this._removeActiveHost();\n  }\n\n  /** Updates the controller configuration and active state. */\n  public update(config?: RootClickControllerConfig): void {\n    if (config) {\n      this._config = { ...this._config, ...config };\n      HOST_CONFIGURATIONS.set(this._host, this._config);\n    }\n\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeActiveHost();\n  }\n}\n\n/**\n * Creates and adds a {@link RootClickController} instance with a {@link RootClickControllerConfig | configuration}\n * to the given {@link RootClickControllerHost | host}.\n */\nexport function addRootClickController(\n  host: RootClickControllerHost,\n  config?: RootClickControllerConfig\n): RootClickController {\n  return new RootClickController(host, config);\n}\n\nexport type { RootClickController };\n"]}

package/{components/common → internals}/controllers/root-scroll.d.ts

@@ -1,5 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
-import type { PopoverScrollStrategy } from '../../types.js';
+import type { PopoverScrollStrategy } from '../../components/types.js';
 type RootScrollControllerConfig = {
     hideCallback?: () => void;
     resetListeners?: boolean;
@@ -10,18 +10,21 @@ type RootScrollControllerHost = ReactiveControllerHost & {
     scrollStrategy?: PopoverScrollStrategy;
 };
 declare class RootScrollController implements ReactiveController {
-    private readonly host;
-    private config?;
+    private readonly _host;
+    private _config?;
     private _cache;
-    constructor(host: RootScrollControllerHost, config?: RootScrollControllerConfig | undefined);
-    private configureListeners;
-    private hide;
-    private addEventListeners;
-    private removeEventListeners;
+    constructor(host: RootScrollControllerHost, config?: RootScrollControllerConfig);
+    private _configureListeners;
+    private _hide;
+    private _addEventListeners;
+    private _removeEventListeners;
+    /** @internal */
     handleEvent(event: Event): void;
     private _block;
     update(config?: RootScrollControllerConfig): void;
+    /** @internal */
     hostConnected(): void;
+    /** @internal */
     hostDisconnected(): void;
 }
 export declare function addRootScrollHandler(host: RootScrollControllerHost, config?: RootScrollControllerConfig): RootScrollController;

package/internals/controllers/root-scroll.js

@@ -0,0 +1,71 @@
+const scrollListenerOptions = {
+    capture: true,
+    passive: true,
+};
+function readScroll(element) {
+    return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };
+}
+function writeScroll(element, record) {
+    element.scrollTop = record.scrollTop;
+    element.scrollLeft = record.scrollLeft;
+}
+class RootScrollController {
+    constructor(host, config) {
+        this._cache = new WeakMap();
+        this._host = host;
+        this._config = config;
+        this._host.addController(this);
+    }
+    _configureListeners() {
+        this._host.open ? this._addEventListeners() : this._removeEventListeners();
+    }
+    _hide() {
+        this._config?.hideCallback
+            ? this._config.hideCallback.call(this._host)
+            : this._host.hide();
+    }
+    _addEventListeners() {
+        if (this._host.scrollStrategy !== 'scroll') {
+            document.addEventListener('scroll', this, scrollListenerOptions);
+        }
+    }
+    _removeEventListeners() {
+        document.removeEventListener('scroll', this, scrollListenerOptions);
+        this._cache = new WeakMap();
+    }
+    handleEvent(event) {
+        this._host.scrollStrategy === 'close' ? this._hide() : this._block(event);
+    }
+    _block(event) {
+        const element = event.target;
+        const child = element.firstElementChild;
+        let record = this._cache.get(element);
+        if (!record) {
+            record = readScroll(child ?? element);
+            this._cache.set(element, record);
+        }
+        writeScroll(element, record);
+        if (child) {
+            writeScroll(child, record);
+        }
+    }
+    update(config) {
+        if (config) {
+            this._config = { ...this._config, ...config };
+        }
+        if (config?.resetListeners) {
+            this._removeEventListeners();
+        }
+        this._configureListeners();
+    }
+    hostConnected() {
+        this._configureListeners();
+    }
+    hostDisconnected() {
+        this._removeEventListeners();
+    }
+}
+export function addRootScrollHandler(host, config) {
+    return new RootScrollController(host, config);
+}
+//# sourceMappingURL=root-scroll.js.map

package/internals/controllers/root-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-scroll.js","sourceRoot":"","sources":["../../../src/internals/controllers/root-scroll.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { PopoverScrollStrategy } from '../../components/types.js';\n\ntype RootScrollControllerConfig = {\n  hideCallback?: () => void;\n  resetListeners?: boolean;\n};\n\ntype RootScrollControllerHost = ReactiveControllerHost & {\n  open: boolean;\n  hide(): void;\n  scrollStrategy?: PopoverScrollStrategy;\n};\n\ntype ScrollRecord = { scrollTop: number; scrollLeft: number };\n\n/**\n * `scroll` is not cancelable, so the listener never calls `preventDefault` and\n * is registered as passive to keep it off the scrolling critical path.\n */\nconst scrollListenerOptions: AddEventListenerOptions = {\n  capture: true,\n  passive: true,\n};\n\nfunction readScroll(element: Element): ScrollRecord {\n  return { scrollTop: element.scrollTop, scrollLeft: element.scrollLeft };\n}\n\nfunction writeScroll(element: Element, record: ScrollRecord): void {\n  element.scrollTop = record.scrollTop;\n  element.scrollLeft = record.scrollLeft;\n}\n\nclass RootScrollController implements ReactiveController {\n  private readonly _host: RootScrollControllerHost;\n  private _config?: RootScrollControllerConfig;\n  private _cache = new WeakMap<Element, ScrollRecord>();\n\n  constructor(\n    host: RootScrollControllerHost,\n    config?: RootScrollControllerConfig\n  ) {\n    this._host = host;\n    this._config = config;\n    this._host.addController(this);\n  }\n\n  private _configureListeners(): void {\n    this._host.open ? this._addEventListeners() : this._removeEventListeners();\n  }\n\n  private _hide(): void {\n    this._config?.hideCallback\n      ? this._config.hideCallback.call(this._host)\n      : this._host.hide();\n  }\n\n  private _addEventListeners(): void {\n    if (this._host.scrollStrategy !== 'scroll') {\n      document.addEventListener('scroll', this, scrollListenerOptions);\n    }\n  }\n\n  private _removeEventListeners(): void {\n    document.removeEventListener('scroll', this, scrollListenerOptions);\n    this._cache = new WeakMap();\n  }\n\n  /** @internal */\n  public handleEvent(event: Event): void {\n    this._host.scrollStrategy === 'close' ? this._hide() : this._block(event);\n  }\n\n  private _block(event: Event): void {\n    const element = event.target as Element;\n    const child = element.firstElementChild;\n\n    let record = this._cache.get(element);\n\n    if (!record) {\n      record = readScroll(child ?? element);\n      this._cache.set(element, record);\n    }\n\n    writeScroll(element, record);\n\n    if (child) {\n      writeScroll(child, record);\n    }\n  }\n\n  public update(config?: RootScrollControllerConfig): void {\n    if (config) {\n      this._config = { ...this._config, ...config };\n    }\n\n    if (config?.resetListeners) {\n      this._removeEventListeners();\n    }\n\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._configureListeners();\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._removeEventListeners();\n  }\n}\n\nexport function addRootScrollHandler(\n  host: RootScrollControllerHost,\n  config?: RootScrollControllerConfig\n): RootScrollController {\n  return new RootScrollController(host, config);\n}\n"]}