@fluentui/web-components 3.0.0-beta.13 → 3.0.0-beta.131

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,8 @@
+export * from './converters.js';
+export * from './direction.js';
+export * from './typings.js';
+export * from './template-helpers.js';
+export * from './whitespace-filter.js';
+export * from './display.js';
+export * from './behaviors/match-media-stylesheet-behavior.js';
+export * from './support.js';

package/dist/esm/utils/index.js

@@ -1,7 +1,9 @@
+export * from './converters.js';
 export * from './direction.js';
 export * from './typings.js';
 export * from './template-helpers.js';
 export * from './whitespace-filter.js';
 export * from './display.js';
 export * from './behaviors/match-media-stylesheet-behavior.js';
+export * from './support.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,gDAAgD,CAAC;AAC/D,cAAc,cAAc,CAAC"}

package/dist/esm/utils/language.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Determines the current language code of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the language code of the element
+ *
+ * @public
+ */
+export declare function getLanguage(rootNode: HTMLElement): Intl.UnicodeBCP47LocaleIdentifier;

package/dist/esm/utils/language.js

@@ -0,0 +1,12 @@
+/**
+ * Determines the current language code of an element.
+ *
+ * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
+ * @returns the language code of the element
+ *
+ * @public
+ */
+export function getLanguage(rootNode) {
+    return rootNode.closest('[lang]')?.lang ?? 'en';
+}
+//# sourceMappingURL=language.js.map

package/dist/esm/utils/language.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"language.js","sourceRoot":"","sources":["../../../src/utils/language.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,WAAW,CAAC,QAAqB;IAC/C,OAAO,QAAQ,CAAC,OAAO,CAAc,QAAQ,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC;AAC/D,CAAC"}

package/dist/esm/utils/request-idle-callback.d.ts

@@ -0,0 +1,41 @@
+/**
+ * A ponyfill for requestIdleCallback that falls back to setTimeout.
+ * Uses the native requestIdleCallback when available.
+ *
+ * @param callback - The function to call when the browser is idle.
+ * @param options - Options object that may contain a timeout property.
+ * @returns An ID that can be used to cancel the callback.
+ * @public
+ */
+export declare function requestIdleCallback(callback: (deadline: IdleDeadline) => void, options?: {
+    timeout: number;
+}): ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>;
+/**
+ * A ponyfill for cancelIdleCallback that falls back to clearTimeout.
+ * Uses the native cancelIdleCallback when available.
+ *
+ * @param id - The ID of the callback to cancel.
+ * @public
+ */
+export declare function cancelIdleCallback(id: ReturnType<typeof globalThis.requestIdleCallback | typeof setTimeout>): void;
+/**
+ * Waits for all custom element descendants of a target element to be connected.
+ *
+ * @param target - The target element to observe.
+ * @param callback - The function to call when all custom element descendants are connected.
+ * @param options - Options object that may contain a timeout property for the idle callback.
+ *
+ * @remarks
+ * This function uses requestIdleCallback to periodically check if all custom element
+ * descendants (elements with a hyphen in their tag name) are connected to the DOM.
+ * Once all such elements are connected, the provided callback is invoked.
+ *
+ * The `timeout` option specifies the maximum time to wait for each idle callback before
+ * rechecking, defaulting to 50 milliseconds.
+ *
+ * @public
+ */
+export declare function waitForConnectedDescendants(target: HTMLElement, callback: () => void, options?: {
+    shallow?: boolean;
+    timeout?: number;
+}): void;

package/dist/esm/utils/request-idle-callback.js

@@ -0,0 +1,72 @@
+/**
+ * A ponyfill for requestIdleCallback that falls back to setTimeout.
+ * Uses the native requestIdleCallback when available.
+ *
+ * @param callback - The function to call when the browser is idle.
+ * @param options - Options object that may contain a timeout property.
+ * @returns An ID that can be used to cancel the callback.
+ * @public
+ */
+export function requestIdleCallback(callback, options) {
+    if ('requestIdleCallback' in globalThis) {
+        return globalThis.requestIdleCallback(callback, options);
+    }
+    const start = Date.now();
+    return setTimeout(() => {
+        callback({
+            didTimeout: options?.timeout ? Date.now() - start >= options.timeout : false,
+            timeRemaining: () => 0,
+        });
+    }, 1);
+}
+/**
+ * A ponyfill for cancelIdleCallback that falls back to clearTimeout.
+ * Uses the native cancelIdleCallback when available.
+ *
+ * @param id - The ID of the callback to cancel.
+ * @public
+ */
+export function cancelIdleCallback(id) {
+    if ('cancelIdleCallback' in globalThis) {
+        globalThis.cancelIdleCallback(id);
+    }
+    else {
+        clearTimeout(id);
+    }
+}
+/**
+ * Waits for all custom element descendants of a target element to be connected.
+ *
+ * @param target - The target element to observe.
+ * @param callback - The function to call when all custom element descendants are connected.
+ * @param options - Options object that may contain a timeout property for the idle callback.
+ *
+ * @remarks
+ * This function uses requestIdleCallback to periodically check if all custom element
+ * descendants (elements with a hyphen in their tag name) are connected to the DOM.
+ * Once all such elements are connected, the provided callback is invoked.
+ *
+ * The `timeout` option specifies the maximum time to wait for each idle callback before
+ * rechecking, defaulting to 50 milliseconds.
+ *
+ * @public
+ */
+export function waitForConnectedDescendants(target, callback, options) {
+    let idleCallbackId;
+    const shallow = options?.shallow ?? false;
+    const query = `${shallow ? ':scope > ' : ''}:not(:defined)`;
+    const timeout = options?.timeout ?? 50;
+    const scheduleCheck = (deadline) => {
+        if (idleCallbackId) {
+            cancelIdleCallback(idleCallbackId);
+            idleCallbackId = undefined;
+        }
+        if (!target.querySelector(query) || (deadline && deadline.timeRemaining() <= 0)) {
+            callback();
+            return;
+        }
+        idleCallbackId = requestIdleCallback(scheduleCheck, { timeout });
+    };
+    scheduleCheck();
+}
+//# sourceMappingURL=request-idle-callback.js.map

package/dist/esm/utils/request-idle-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-idle-callback.js","sourceRoot":"","sources":["../../../src/utils/request-idle-callback.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,UAAU,mBAAmB,CACjC,QAA0C,EAC1C,OAA6B;IAE7B,IAAI,qBAAqB,IAAI,UAAU,EAAE,CAAC;QACxC,OAAO,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACzB,OAAO,UAAU,CAAC,GAAG,EAAE;QACrB,QAAQ,CAAC;YACP,UAAU,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;YAC5E,aAAa,EAAE,GAAG,EAAE,CAAC,CAAC;SACvB,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,CAAC,CAAC;AACR,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAyE;IAC1G,IAAI,oBAAoB,IAAI,UAAU,EAAE,CAAC;QACtC,UAAgC,CAAC,kBAAkB,CAAC,EAAY,CAAC,CAAC;IACrE,CAAC;SAAM,CAAC;QACN,YAAY,CAAC,EAAE,CAAC,CAAC;IACnB,CAAC;AACH,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,2BAA2B,CACzC,MAAmB,EACnB,QAAoB,EACpB,OAAiD;IAEjD,IAAI,cAAkE,CAAC;IACvE,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC;IAC5D,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,EAAE,CAAC;IAEvC,MAAM,aAAa,GAAG,CAAC,QAAuB,EAAE,EAAE;QAChD,IAAI,cAAc,EAAE,CAAC;YACnB,kBAAkB,CAAC,cAAc,CAAC,CAAC;YACnC,cAAc,GAAG,SAAS,CAAC;QAC7B,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC;YAChF,QAAQ,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,cAAc,GAAG,mBAAmB,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,CAAC,CAAC;IAEF,aAAa,EAAE,CAAC;AAClB,CAAC"}

package/dist/esm/utils/root-active-element.d.ts

@@ -0,0 +1 @@
+export declare function getRootActiveElement(element: Element): Element | null;

package/dist/esm/utils/root-active-element.js

@@ -0,0 +1,9 @@
+// returns the active element in the shadow context of the element in question.
+export function getRootActiveElement(element) {
+    const rootNode = element.getRootNode();
+    if (rootNode instanceof ShadowRoot) {
+        return rootNode.activeElement;
+    }
+    return document.activeElement;
+}
+//# sourceMappingURL=root-active-element.js.map

package/dist/esm/utils/root-active-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root-active-element.js","sourceRoot":"","sources":["../../../src/utils/root-active-element.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,UAAU,oBAAoB,CAAC,OAAgB;IACnD,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IAEvC,IAAI,QAAQ,YAAY,UAAU,EAAE,CAAC;QACnC,OAAO,QAAQ,CAAC,aAAa,CAAC;IAChC,CAAC;IAED,OAAO,QAAQ,CAAC,aAAa,CAAC;AAChC,CAAC"}

package/dist/esm/utils/support.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Check if the browser supports CSS Anchor Positioning.
+ * @public
+ */
+export declare const AnchorPositioningCSSSupported: boolean;
+/**
+ * Check if the browser supports HTML Anchor Positioning.
+ * @public
+ */
+export declare const AnchorPositioningHTMLSupported: boolean;
+/**
+ * Check if the browser supports Custom States.
+ * @public
+ */
+export declare const CustomStatesSetSupported: boolean;

package/dist/esm/utils/support.js

@@ -0,0 +1,16 @@
+/**
+ * Check if the browser supports CSS Anchor Positioning.
+ * @public
+ */
+export const AnchorPositioningCSSSupported = CSS.supports('anchor-name: --a');
+/**
+ * Check if the browser supports HTML Anchor Positioning.
+ * @public
+ */
+export const AnchorPositioningHTMLSupported = 'anchor' in HTMLElement.prototype;
+/**
+ * Check if the browser supports Custom States.
+ * @public
+ */
+export const CustomStatesSetSupported = CSS.supports('selector(:state(g))');
+//# sourceMappingURL=support.js.map

package/dist/esm/utils/support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"support.js","sourceRoot":"","sources":["../../../src/utils/support.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,GAAG,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAE9E;;;GAGG;AACH,MAAM,CAAC,MAAM,8BAA8B,GAAG,QAAQ,IAAI,WAAW,CAAC,SAAS,CAAC;AAEhF;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC,QAAQ,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/utils/template-helpers.d.ts

@@ -0,0 +1,15 @@
+import { type CaptureType, type HTMLDirective, type SyntheticViewTemplate } from '@microsoft/fast-element';
+/**
+ * A value that can be statically composed into a
+ * foundation template.
+ * @remarks
+ * When providing a string, take care to ensure that it is
+ * safe and will not enable an XSS attack.
+ * @public
+ */
+export type StaticallyComposableHTML<TSource = any, TParent = any> = string | HTMLDirective | SyntheticViewTemplate<TSource, TParent> | undefined;
+/**
+ * A function to compose template options.
+ * @public
+ */
+export declare function staticallyCompose<TSource = any, TParent = any>(item: StaticallyComposableHTML<TSource, TParent>): CaptureType<TSource, TParent>;

package/dist/esm/utils/template-helpers.js

@@ -1,5 +1,5 @@
 //Copied from @microsoft/fast-foundation
-import { InlineTemplateDirective } from '@microsoft/fast-element';
+import { InlineTemplateDirective, } from '@microsoft/fast-element';
 /**
  * A function to compose template options.
  * @public

package/dist/esm/utils/template-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"template-helpers.js","sourceRoot":"","sources":["../../../src/utils/template-helpers.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAA8B,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAiB9F;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAgD;IAEhD,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,uBAAuB,CAAC,KAAK,CAAC;KACtC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,IAAI,QAAQ,IAAI,IAAI,EAAE;QACpB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;KACtB;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"template-helpers.js","sourceRoot":"","sources":["../../../src/utils/template-helpers.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAExC,OAAO,EAGL,uBAAuB,GAExB,MAAM,yBAAyB,CAAC;AAgBjC;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAgD;IAEhD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,uBAAuB,CAAC,KAAK,CAAC;IACvC,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,OAAO,IAAI,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;QACrB,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;IACvB,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/esm/utils/typings.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Helper for enumerating a type from a const object
+ * Example: export type Foo = ValuesOf\<typeof Foo\>
+ * @public
+ */
+export type ValuesOf<T> = T[keyof T];

package/dist/esm/utils/unique-id.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Generates a unique element id.
+ *
+ * @param prefix - The prefix to use for the unique id.
+ * @returns A unique id.
+ *
+ * @public
+ */
+export declare function uniqueId(prefix?: string): string;

package/dist/esm/utils/unique-id.js

@@ -0,0 +1,14 @@
+let uniqueIdCounter = 0;
+/**
+ * Generates a unique element id.
+ *
+ * @param prefix - The prefix to use for the unique id.
+ * @returns A unique id.
+ *
+ * @public
+ */
+export function uniqueId(prefix = 'id-') {
+    const str = `${prefix}${uniqueIdCounter++}`;
+    return document.getElementById(str) ? uniqueId(prefix) : str;
+}
+//# sourceMappingURL=unique-id.js.map

package/dist/esm/utils/unique-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unique-id.js","sourceRoot":"","sources":["../../../src/utils/unique-id.ts"],"names":[],"mappings":"AAAA,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,MAAM,GAAG,KAAK;IACrC,MAAM,GAAG,GAAG,GAAG,MAAM,GAAG,eAAe,EAAE,EAAE,CAAC;IAC5C,OAAO,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC/D,CAAC"}

package/dist/esm/utils/whitespace-filter.js

@@ -9,5 +9,5 @@
  *
  * @public
  */
-export const whitespaceFilter = value => { var _a; return value.nodeType !== Node.TEXT_NODE || !!((_a = value.nodeValue) === null || _a === void 0 ? void 0 : _a.trim().length); };
+export const whitespaceFilter = value => value.nodeType !== Node.TEXT_NODE || !!value.nodeValue?.trim().length;
 //# sourceMappingURL=whitespace-filter.js.map

package/dist/esm/utils/whitespace-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"whitespace-filter.js","sourceRoot":"","sources":["../../../src/utils/whitespace-filter.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAIxC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAmB,KAAK,CAAC,EAAE,WACtD,OAAA,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,CAAA,MAAA,KAAK,CAAC,SAAS,0CAAE,IAAI,GAAG,MAAM,CAAA,CAAA,EAAA,CAAC"}
+{"version":3,"file":"whitespace-filter.js","sourceRoot":"","sources":["../../../src/utils/whitespace-filter.ts"],"names":[],"mappings":"AAAA,wCAAwC;AAIxC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAmB,KAAK,CAAC,EAAE,CACtD,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC"}