@esri/calcite-components 5.0.0-next.9 → 5.0.0

package/dist/utils/config.d.ts

@@ -1,29 +1,13 @@
-import { FocusTrap } from './focusTrapComponent';
-import { LogLevel } from './logger';
-export interface CalciteConfig {
-    /**
-     * Defines the global trap stack to use for focus-trapping components.
-     *
-     * This is useful if your application uses its own instance of `focus-trap` and both need to be aware of each other.
-     *
-     * @see [focus-trap createOptions](https://github.com/focus-trap/focus-trap#createoptions).
-     */
-    focusTrapStack: FocusTrap[];
-    /** Defines the global log level to use when logging messages. */
-    logLevel: LogLevel;
-    /**
-     * Contains the version of the Calcite components.
-     *
-     * @readonly
-     */
-    version?: string;
-}
+import type { FocusTrap } from "focus-trap";
+import type { LogLevel } from "./logger.js";
+
 /**
  * Exporting for testing purposes only
  *
  * @internal
  */
-export declare const defaultConfig: CalciteConfig;
+export const defaultConfig: CalciteConfig;
+
 /**
  * Clears the effective config so it will be recomputed on next getConfig().
  *
@@ -31,12 +15,26 @@ export declare const defaultConfig: CalciteConfig;
  *
  * @internal
  */
-export declare function clearConfig(): void;
+export function clearConfig(): void;
+
 /**
  * Returns the effective config.
  *
  * @internal
  */
-export declare function getConfig(): CalciteConfig;
-/** Stamp the version onto the global config. */
-export declare function stampVersion(): void;
+export function getConfig(): CalciteConfig;
+
+export interface CalciteConfig {
+  /**
+   * Defines the global trap stack to use for focus-trapping components.
+   *
+   * This is useful if your application uses its own instance of `focus-trap` and both need to be aware of each other.
+   *
+   * @see [focus-trap createOptions](https://github.com/focus-trap/focus-trap#createoptions).
+   */
+  focusTrapStack: FocusTrap[];
+  /** Defines the global log level to use when logging messages. */
+  logLevel: LogLevel;
+  /** Contains the version of the Calcite components. */
+  readonly version?: string;
+}

package/dist/utils/date.d.ts

@@ -1,146 +1,5 @@
-import { DateLocaleData } from '../components/calcite-date-picker/utils';
 export interface HoverRange {
-    focused: "end" | "start";
-    start: Date;
-    end: Date;
-}
-/**
- * Check if date is within a min and max
- *
- * @param date
- * @param min
- * @param max
- */
-export declare function inRange(date: Date, min?: Date | string, max?: Date | string): boolean;
-/**
- * Ensures date is within range,
- * returns min or max if out of bounds
- *
- * @param date
- * @param min
- * @param max
- */
-export declare function dateFromRange(date?: any, min?: Date | string, max?: Date | string): Date | null;
-/**
- * Parse an iso8601 string (YYYY-mm-dd) into a valid date.
- * TODO: handle time when time of day UI is added
- *
- * @param iso8601
- * @param isEndDate
- */
-export declare function dateFromISO(iso8601: string | Date, isEndDate?: boolean): Date | null;
-/**
- * Parse a localized date string into a valid Date.
- * return false if date is invalid, or out of range
- *
- * @param value
- * @param localeData
- */
-export declare function dateFromLocalizedString(value: string, localeData: DateLocaleData): Date;
-export declare function parseCalendarYear(year: number, localeData: DateLocaleData): number;
-export declare function formatCalendarYear(year: number, localeData: DateLocaleData): number;
-/**
- * Retrieve day, month, and year strings from a localized string
- *
- * @param string
- * @param localeData
- */
-export declare function datePartsFromLocalizedString(string: string, localeData: DateLocaleData): {
-    day: string;
-    month: string;
-    year: string;
-};
-/**
- * Return the date portion in local time of a Date object in ISO 8601 format (YYYY-MM-DD)
- *
- * @param date
- */
-export declare function dateToISO(date?: Date): string;
-/**
- * Retrieve day, month, and year strings from a ISO string (YYYY-mm-dd)
- *
- * @param string
- * @param isoDate
- */
-export declare function datePartsFromISO(isoDate: string): {
-    day: string;
-    month: string;
-    year: string;
-};
-/**
- * Check if two dates are the same day, month, year
- *
- * @param d1
- * @param d2
- */
-export declare function sameDate(d1: Date, d2: Date): boolean;
-/**
- * Get a date one month in the past
- *
- * @param date
- */
-export declare function prevMonth(date: Date): Date;
-/**
- * Get active date in a given month.
- *
- * @param date
- * @param month
- */
-export declare function getDateInMonth(date: Date, month: number): Date;
-/**
- * Get First Valid date in a month.
- *
- * @param date
- * @param min
- * @param max
- */
-export declare function getFirstValidDateInMonth(date: Date, min: Date, max: Date): Date;
-/**
- * Get a date one month in the future
- *
- * @param date
- */
-export declare function nextMonth(date: Date): Date;
-/**
- * Parse numeric units for day, month, and year from a localized string
- * month starts at 0 (can pass to date constructor)
- * can return values as number or string
- *
- * @param string
- * @param localeData
- */
-export declare function parseDateString(string: string, localeData: DateLocaleData): {
-    day: number;
-    month: number;
-    year: number;
-};
-type unitOrderSignifier = "m" | "d" | "y";
-/**
- * Based on the unitOrder string, find order of month, day, and year for locale
- *
- * @param unitOrder
- */
-export declare function getOrder(unitOrder: string): unitOrderSignifier[];
-/**
- * Get number of days between two dates
- *
- * @param date1
- * @param date2
- */
-export declare function getDaysDiff(date1: Date, date2: Date): number;
-/**
- * Set time of the day to the end.
- *
- * @param {Date} date Date.
- * @returns {Date} Date with time set to end of day .
- */
-export declare function setEndOfDay(date: Date): Date;
-/**
- * Returns true if two dates have same month and year.
- *
- * @param date1
- * @param date2
- * @returns {boolean}
- */
-export declare function hasSameMonthAndYear(date1: Date, date2: Date): boolean;
-export {};
+  focused: "end" | "start";
+  start: Date;
+  end: Date;
+}

package/dist/utils/dom.d.ts

@@ -1,374 +1,19 @@
-import { LitElement } from '@arcgis/lumina';
-import { IconName } from '../components/calcite-icon/interfaces';
 /**
- * The default `focus-trap/tabbable` options.
+ * Helper to get the first focusable element.
  *
- * See https://github.com/focus-trap/tabbable#tabbable
+ * @param element - The html element containing focusable elements.
+ * @param includeContainer - When true, the container element will be considered as well.
+ * @returns the first focusable element.
+ * @internal
  */
-export declare const tabbableOptions: {
-    getShadowRoot: boolean;
-};
+export function getFirstFocusable(element: HTMLElement, includeContainer?: boolean): HTMLElement;
+
 /**
- * This helper will guarantee an ID on the provided element.
+ * Helper to focus the first focusable element.
  *
- * If it already has an ID, it will be preserved, otherwise a unique one will be generated and assigned.
- *
- * @param {Element} el An element.
- * @returns {string} The element's ID.
- */
-export declare function ensureId(el: Element): string;
-/**
- * This helper returns an array from a NodeList.
- *
- * @param {NodeList} nodeList A NodeList.
- * @returns {Element[]} An array of elements.
- */
-export declare function nodeListToArray<T extends Element>(nodeList: HTMLCollectionOf<T> | NodeListOf<T> | T[]): T[];
-export type Direction = "ltr" | "rtl";
-/**
- * This helper returns the Calcite "mode" of an element.
- *
- * @param {HTMLElement} el An element.
- * @returns {"light"|"dark"} The Calcite mode.
- */
-export declare function getModeName(el: HTMLElement): "light" | "dark";
-/**
- * This helper returns the direction of a HTML element.
- *
- * @param {HTMLElement} el An element.
- * @returns {Direction} The direction.
- */
-export declare function getElementDir(el: HTMLElement): Direction;
-/**
- * This helper returns the computed width in pixels of a rendered HTMLElement.
- *
- * @param {HTMLElement} el An element.
- * @returns {number} The element's width.
- */
-export declare function getElementWidth(el: HTMLElement): number;
-/**
- * This helper returns the rootNode of an element.
- *
- * @param {Element} el An element.
- * @returns {Document|ShadowRoot} The element's root node.
- */
-export declare function getRootNode(el: Element): Document | ShadowRoot;
-/**
- * This helper returns the node's shadowRoot root node if it exists.
- *
- * @param {Element} el The element.
- * @returns {ShadowRoot|null} The element's root node ShadowRoot.
- */
-export declare function getShadowRootNode(el: Element): ShadowRoot | null;
-/**
- * This helper returns the computed width in pixels a given text string takes up on screen.
- *
- * See https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript
- *
- * @param {string} text The string of text to measure.
- * @param {string} font The CSS font attribute's value, which should include size and face, e.g. "12px Arial".
- */
-export declare function getTextWidth(text: string, font: string): number;
-/**
- * This helper returns the host of a ShadowRoot.
- *
- * @param {Document | ShadowRoot} root A root element.
- * @returns {Element | null} The host element.
- */
-export declare function getHost(root: Document | ShadowRoot): Element | null;
-/**
- * This helper queries an element's rootNode and any ancestor rootNodes.
- *
- * If both an 'id' and 'selector' are supplied, 'id' will take precedence over 'selector'.
- *
- * @param {Element} el An element.
- * @param root0
- * @param root0.selector
- * @param root0.id
- * @returns {Element} An element.
- */
-export declare function queryElementRoots<T extends Element = Element>(el: Element, { selector, id, }: {
-    selector?: string;
-    id?: string;
-}): T | null;
-/**
- * This helper returns the closest element matching the selector by crossing he shadow boundary if necessary.
- *
- * Based on https://stackoverflow.com/q/54520554/194216
- *
- * @param {Element} element The starting element.
- * @param {string} selector The selector.
- * @returns {Element} The targeted element.
- */
-export declare function closestElementCrossShadowBoundary<TagName extends keyof HTMLElementTagNameMap>(element: Element, selector: TagName): HTMLElementTagNameMap[TagName] | null;
-export declare function closestElementCrossShadowBoundary<T extends Element = Element>(element: Element, selector: string): T | null;
-/**
- * This utility helps invoke a callback as it traverses a node and its ancestors until reaching the root document.
- *
- * Returning early or undefined in `onVisit` will continue traversing up the DOM tree. Otherwise, traversal will halt with the returned value as the result of the function
- *
- * @param {Element} element An element.
- * @param {(node: Node) => Element} onVisit The callback.
- * @returns {Element} The result.
- */
-export declare function walkUpAncestry<T = any>(element: Element, onVisit: (node: Node) => T): T;
-export type FocusableElement = SetFocusable | HTMLElement;
-export interface SetFocusable extends LitElement {
-    setFocus: (options?: FocusOptions) => Promise<void>;
-}
-/**
- * This helper returns true when an element has a setFocus method.
- *
- * @param {Element} el An element.
- * @returns {boolean} Whether the element is focusable.
- */
-export declare function isCalciteFocusable(el: FocusableElement): el is SetFocusable;
-/**
- * This helper focuses an element using the `setFocus` method if available and falls back to using the `focus` method if not available.
- *
- * @param {Element} el An element.
- * @param includeContainer When true, the container element will be considered as well. Note, this is only applicable when `setFocus` is not applicable.
- * @param strategy The focus strategy to use when finding the first focusable element. Defaults to "tabbable".
- * @param context The element invoking the focus – use when the host is focusable to short-circuit the focus call.
- * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
- *
- * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
- */
-export declare function focusElement(el: FocusableElement, includeContainer?: boolean, strategy?: "focusable" | "tabbable", context?: HTMLElement, options?: FocusOptions): Promise<void>;
-/**
- * Helper to get the first tabbable element.
- *
- * @param {HTMLElement} element The html element containing tabbable elements.
- * @param {boolean} includeContainer When true, the container element will be considered as well.
- *
- * @returns the first tabbable element.
- */
-export declare function getFirstTabbable(element: HTMLElement, includeContainer?: boolean): HTMLElement;
-/**
- * Helper to focus the first tabbable element.
- *
- * @param {HTMLElement} element The html element containing tabbable elements.
- * @param {boolean} includeContainer When true, the container element will be considered as well.
- * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
- *
- * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
- */
-export declare function focusFirstTabbable(element: HTMLElement, includeContainer?: boolean, options?: FocusOptions): void;
-/**
- * Filters direct children.
- *
- * @param {Element} el An element.
- * @param {string} selector The selector.
- * @returns {Element[]} An array of elements.
- */
-export declare function filterDirectChildren<T extends Element>(el: Element, selector: string): T[];
-/**
- * Filters an array of HTML elements by the provided css selector string.
- *
- * @param {Element[]} elements An array of elements, such as one returned by HTMLSlotElement.assignedElements().
- * @param {string} selector The CSS selector string to filter the returned elements by.
- * @returns {Element[]} A filtered array of elements.
- */
-export declare function filterElementsBySelector<T extends Element>(elements: Element[], selector: string): T[];
-/**
- * Set a default icon from a defined set or allow an override with an icon name string
- *
- * @param {Record<string, string>} iconObject The icon object.
- * @param {string | boolean} iconValue The icon value.
- * @param {string} matchedValue The matched value.
- * @returns {string|undefined} The resulting icon value.
- */
-export declare function setRequestedIcon(iconObject: Record<string, IconName>, iconValue: IconName | boolean | "", matchedValue: string): IconName | undefined;
-/**
- * This helper returns true when two rectangles intersect.
- *
- * @param {DOMRect} rect1 The first rectangle.
- * @param {DOMRect} rect2 The second rectangle.
- * @returns {boolean} The result.
- */
-export declare function intersects(rect1: DOMRect, rect2: DOMRect): boolean;
-/**
- * This helper makes sure that boolean aria attributes are properly converted to a string.
- *
- * It should only be used for aria attributes that require a string value of "true" or "false".
- *
- * @param {boolean} value The value.
- * @returns {string} The string conversion of a boolean value ("true" | "false").
- */
-export declare function toAriaBoolean(value: boolean): string;
-/**
- * This helper returns `true` if the target `slot` element from the `onSlotchange` event has any content (text or elements).
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotHasContent = slotChangeHasContent(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {boolean} Whether the slot has any content.
- */
-export declare function slotChangeHasContent(event: Event): boolean;
-/**
- * This helper returns a string of textContent if the target `slot` element from the `onSlotchange` event has any text content.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotText = slotChangeGetTextContent(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {string} The slots text.
- */
-export declare function slotChangeGetTextContent(event: Event): string;
-/**
- * This helper checks if an element has visible content.
- *
- * @param {HTMLElement} element The element to check.
- * @returns {boolean} True if the element has visible content, otherwise false.
- */
-export declare function hasVisibleContent(element: HTMLElement): boolean;
-/**
- * This helper returns `true` if the target `slot` element from the `onSlotchange` event has any text content.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotHasTextContent = slotChangeHasTextContent(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {boolean} Whether the slot has any text content.
- */
-export declare function slotChangeHasTextContent(event: Event): boolean;
-/**
- * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned node.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotHasNode = slotChangeHasAssignedNode(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {boolean} Whether the slot has any assigned nodes.
- */
-export declare function slotChangeHasAssignedNode(event: Event): boolean;
-/**
- * This helper returns the assigned nodes on a `slot` element from the `onSlotchange` event.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotNodes = slotChangeGetAssignedNodes(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {boolean} Whether the slot has any assigned nodes.
- */
-export declare function slotChangeGetAssignedNodes(event: Event): Node[];
-/**
- * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned element.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @returns {boolean} Whether the slot has any assigned elements.
- */
-export declare function slotChangeHasAssignedElement(event: Event): boolean;
-/**
- * This helper returns the assigned elements on a `slot` element from the `onSlotchange` event.
- *
- * ```
- * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
- * ```
- *
- * @param {Event} event The event.
- * @param {string} selector The CSS selector string to filter the returned elements by.
- * @returns {Element[]} An array of elements.
- */
-export declare function slotChangeGetAssignedElements<T extends Element>(event: Event, selector?: string): T[] | null;
-/**
- * This helper returns the assigned elements on a `slot` element, filtered by an optional css selector.
- *
- * @param {HTMLSlotElement} slot The slot element.
- * @param {string} selector CSS selector string to filter the returned elements by.
- * @returns {Element[]} An array of elements.
- */
-export declare function getSlotAssignedElements<T extends Element>(slot: HTMLSlotElement, selector?: string): T[] | null;
-/**
- * This helper returns true if the pointer event fired from the primary button of the device.
- *
- * See https://www.w3.org/TR/pointerevents/#the-button-property.
- *
- * @param {PointerEvent} event The pointer event.
- * @returns {boolean} The value.
- */
-export declare function isPrimaryPointerButton(event: PointerEvent): boolean;
-/**
- * This helper returns true if the mouse event was triggered by a keyboard click.
- *
- * @param {MouseEvent} event The mouse event.
- * @returns {boolean} The value.
- */
-export declare function isKeyboardTriggeredClick(event: MouseEvent): boolean;
-export type FocusElementInGroupDestination = "first" | "last" | "next" | "previous";
-/**
- * This helper sets focus on and returns a destination element from within a group of provided elements.
- *
- * @param {Element[]} elements An array of elements.
- * @param {Element} currentElement The current element.
- * @param {FocusElementInGroupDestination} destination The target destination element to focus.
- * @param {boolean} cycle Should navigation cycle through elements or stop at extent - defaults to true.
- * @param {boolean} includeContainer Determines whether the container element should be considered as well - defaults to true.
- * @param targetAsContext
- * @returns {Element} The focused element
- */
-export declare const focusElementInGroup: <T extends Element = Element>(elements: Element[], currentElement: Element, destination: FocusElementInGroupDestination, cycle?: boolean, includeContainer?: boolean, targetAsContext?: boolean) => T;
-/**
- * This helper determines if an element is before another element in the DOM.
- *
- * @param a the reference element to compare
- * @param b the element to compare against
- * @returns true when a is before b in the DOM
- */
-export declare function isBefore(a: HTMLElement, b: HTMLElement): boolean;
-/**
- * This util helps determine when an animation has completed.
- *
- * @param targetEl The element to watch for the animation to complete.
- * @param animationName The name of the animation to watch for completion.
- */
-export declare function whenAnimationDone(targetEl: HTMLElement, animationName: string): Promise<void>;
-/**
- * This util helps determine when a transition has completed.
- *
- * @param targetEl The element to watch for the transition to complete.
- * @param transitionProp The name of the transition to watch for completion.
- */
-export declare function whenTransitionDone(targetEl: HTMLElement, transitionProp: string): Promise<void>;
-type TransitionOrAnimation = "transition" | "animation";
-/**
- * This util helps determine when a transition has completed.
- *
- * @param targetEl The element to watch for the transition or animation to complete.
- * @param transitionPropOrAnimationName The transition or animation property to watch for completion.
- * @param type The type of property to watch for completion. Defaults to "transition".
- */
-export declare function whenTransitionOrAnimationDone(targetEl: HTMLElement, transitionPropOrAnimationName: string, type: TransitionOrAnimation): Promise<void>;
-/**
- * Helper function to wait for the next animation frame.
- */
-export declare function nextFrame(): Promise<void>;
-/**
- * This helper converts a CSS style value (e.g., "px", "vw", "vh") into its pixel equivalent.
- *
- * - If the value ends with "px", it parses and returns the numeric value.
- * - If the value ends with "vw", it calculates the pixel value based on the viewport width.
- * - If the value ends with "vh", it calculates the pixel value based on the viewport height.
- * - For unsupported units or invalid values, it returns 0.
- *
- * @param {string} value - The CSS style value to convert (e.g., "10px", "50vw", "30vh").
- * @returns {number} The pixel equivalent of the provided value.
- */
-export declare function getStylePixelValue(value: string): number;
-/**
- * Exported for testing purposes only.
- *
- * @private
+ * @param element - The html element containing focusable elements.
+ * @param includeContainer - When true, the container element will be considered as well.
+ * @param options
+ * @internal
  */
-export declare function viewportUnitToPixel(value: number, viewportSize: number): number;
-export {};
+export function focusFirstFocusable(element: HTMLElement, includeContainer?: boolean, options?: FocusOptions): void;