@ni/nimble-components 24.0.1 → 24.1.1

package/dist/esm/.storybook/blocks/StoryLayout.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import './story-layout.css';
+interface ChildrenProp {
+    children?: ReactNode;
+}
+/**
+ * Renders a frame to match visual design of existing Storybook Doc blocks.
+ */
+export declare const Frame: ({ children }: ChildrenProp) => React.JSX.Element;
+interface ContainerProp {
+    children?: ReactNode;
+    config?: string;
+}
+/**
+ * Renders a container with grid configuration. Use with <Column> to create grided documentation.
+ * Use CSS grid syntax for the config prop to specify the number of columns and their widths.
+ */
+export declare const Container: ({ children, config }: ContainerProp) => React.JSX.Element;
+interface ColumnProp {
+    children?: ReactNode;
+    stylingClass?: string;
+}
+/**
+ * Renders a column for use with <Container>.
+ * If you need to put Nimble components in a column, use the stylingClass="controls" prop to apply the correct margins.
+ */
+export declare const Column: ({ children, stylingClass }: ColumnProp) => React.JSX.Element;
+/**
+ * Renders a simple divider to vertically separate the contents of a <Column>.
+ */
+export declare const Divider: () => React.JSX.Element;
+/**
+ * Renders a "Do" section for Storybook documentation.
+ */
+export declare const Do: ({ children }: ChildrenProp) => React.JSX.Element;
+/**
+ * Renders a "Dont" section for Storybook documentation.
+ */
+export declare const Dont: ({ children }: ChildrenProp) => React.JSX.Element;
+interface TagProp {
+    name: string;
+    open?: boolean;
+    openClose?: boolean;
+    close?: boolean;
+    selfClose?: boolean;
+}
+/**
+ * Renders a "Tag" component for Storybook documentation.
+ */
+export declare const Tag: ({ name, open, openClose, close, selfClose }: TagProp) => React.JSX.Element;
+export {};

package/dist/esm/src/all-components.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Import of all the web components available in Nimble.
+ * Production applications are encouraged to import only components
+ * that are required instead of leveraging this file.
+ */
+import './anchor';
+import './anchor-button';
+import './anchor-menu-item';
+import './anchor-tab';
+import './anchor-tabs';
+import './anchor-tree-item';
+import './anchored-region';
+import './banner';
+import './breadcrumb';
+import './breadcrumb-item';
+import './button';
+import './card';
+import './card-button';
+import './checkbox';
+import './combobox';
+import './dialog';
+import './drawer';
+import './icons/all-icons';
+import './label-provider/core';
+import './label-provider/table';
+import './list-option';
+import './mapping/text';
+import './mapping/icon';
+import './mapping/spinner';
+import './menu';
+import './menu-button';
+import './menu-item';
+import './number-field';
+import './radio';
+import './radio-group';
+import './rich-text/editor';
+import './rich-text/viewer';
+import './select';
+import './spinner';
+import './switch';
+import './tab';
+import './tab-panel';
+import './table';
+import './table-column/anchor';
+import './table-column/date-text';
+import './table-column/duration-text';
+import './table-column/enum-text';
+import './table-column/number-text';
+import './table-column/icon';
+import './table-column/text';
+import './tabs';
+import './tabs-toolbar';
+import './text-area';
+import './text-field';
+import './theme-provider';
+import './toggle-button';
+import './toolbar';
+import './tooltip';
+import './tree-item';
+import './tree-view';
+import './unit/byte';
+import './unit/volt';
+import './wafer-map';

package/dist/esm/src/anchor/index.d.ts

@@ -0,0 +1,36 @@
+import { AnchorBase } from '../anchor-base';
+import type { AnchorAppearance } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor': Anchor;
+    }
+}
+/**
+ * A nimble-styled anchor
+ */
+export declare class Anchor extends AnchorBase {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: underline-hidden
+     */
+    underlineHidden: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: AnchorAppearance;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: contenteditable
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable
+     *
+     * Ideally, proper support for contenteditable should come from FAST.
+     * I have filed bug https://github.com/microsoft/fast/issues/6870 to them.
+     * If/when it is fixed, we can remove this workaround.
+     */
+    contentEditable: string;
+}
+export declare const anchorTag = "nimble-anchor";

package/dist/esm/src/anchor/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import type { AnchorOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Anchor } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<Anchor>, AnchorOptions>;

package/dist/esm/src/anchor/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Anchor appearance states
+ * @public
+ */
+export declare const AnchorAppearance: {
+    readonly default: undefined;
+    readonly prominent: "prominent";
+};
+export type AnchorAppearance = (typeof AnchorAppearance)[keyof typeof AnchorAppearance];

package/dist/esm/src/anchor-base/index.d.ts

@@ -0,0 +1,6 @@
+import { Anchor as FoundationAnchor } from '@microsoft/fast-foundation';
+/**
+ * Exported base class of link-like types
+ */
+export declare class AnchorBase extends FoundationAnchor {
+}

package/dist/esm/src/anchor-button/index.d.ts

@@ -0,0 +1,37 @@
+import { AnchorBase } from '../anchor-base';
+import { ButtonAppearance, ButtonAppearanceVariant, ButtonPattern, ButtonAppearanceVariantPattern } from '../patterns/button/types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-button': AnchorButton;
+    }
+}
+/**
+ * A nimble-styled anchor button
+ */
+export declare class AnchorButton extends AnchorBase implements ButtonPattern, ButtonAppearanceVariantPattern {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance-variant
+     */
+    appearanceVariant: ButtonAppearanceVariant;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+}
+export declare const anchorButtonTag = "nimble-anchor-button";

package/dist/esm/src/anchor-button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor-button/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { AnchorOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorButton } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorButton>, AnchorOptions>;

package/dist/esm/src/anchor-button/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';

package/dist/esm/src/anchor-menu-item/index.d.ts

@@ -0,0 +1,36 @@
+import { MenuItemColumnCount } from '@microsoft/fast-foundation';
+import { AnchorBase } from '../anchor-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-menu-item': AnchorMenuItem;
+    }
+}
+/**
+ * A nimble-styled anchor menu-item
+ */
+export declare class AnchorMenuItem extends AnchorBase {
+    disabled: boolean;
+    /**
+     * @internal
+     */
+    anchor: HTMLAnchorElement;
+    /**
+     * There is an assumption that this component is styled using a grid display, and this property
+     * controls which grid column contains the menu item text (i.e. the indentation of the text).
+     * The parent menu sets this value on all its child menu items so their indentations align.
+     * @internal
+     */
+    startColumnCount: MenuItemColumnCount;
+    /**
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean;
+    /**
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean;
+    setAttribute(qualifiedName: string, value: string): void;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+}
+export declare const anchorMenuItemTag = "nimble-anchor-menu-item";

package/dist/esm/src/anchor-menu-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor-menu-item/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { AnchorOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorMenuItem } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorMenuItem>, AnchorOptions>;

package/dist/esm/src/anchor-tab/index.d.ts

@@ -0,0 +1,30 @@
+import { FoundationElementDefinition, StartEndOptions } from '@microsoft/fast-foundation';
+import { AnchorBase } from '../anchor-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-tab': AnchorTab;
+    }
+}
+export type TabOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A nimble-styled link tab
+ */
+export declare class AnchorTab extends AnchorBase {
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Indicates the current "selected" state of various widgets.
+     * {@link https://www.w3.org/TR/wai-aria-1.1/#aria-selected}
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: aria-selected
+     */
+    ariaSelected: string;
+}
+export declare const anchorTabTag = "nimble-anchor-tab";

package/dist/esm/src/anchor-tab/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor-tab/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorTab, TabOptions } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTab>, TabOptions>;

package/dist/esm/src/anchor-tabs/index.d.ts

@@ -0,0 +1,60 @@
+import { StartEndOptions, FoundationElementDefinition, FoundationElement } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-tabs': AnchorTabs;
+    }
+}
+export type TabsOptions = FoundationElementDefinition & StartEndOptions;
+/**
+ * A nimble-styled set of anchor tabs
+ */
+export declare class AnchorTabs extends FoundationElement {
+    /**
+     * The id of the active tab
+     *
+     * @public
+     * @remarks
+     * HTML Attribute: activeid
+     */
+    activeid?: string;
+    /**
+     * @internal
+     */
+    tabs: HTMLElement[];
+    /**
+     * A reference to the active tab
+     * @public
+     */
+    activetab?: HTMLElement;
+    /**
+     * A reference to the tablist div
+     * @internal
+     */
+    tablist: HTMLElement;
+    private tabIds;
+    /**
+     * @internal
+     */
+    activeidChanged(_oldValue: string, _newValue: string): void;
+    /**
+     * @internal
+     */
+    tabsChanged(): void;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    private readonly isDisabledElement;
+    private readonly isHiddenElement;
+    private readonly isFocusableElement;
+    private readonly setTabs;
+    private getTabIds;
+    private readonly handleTabClick;
+    private readonly handleTabKeyDown;
+    private focusFirstOrLast;
+    private readonly adjustForward;
+    private readonly adjustBackward;
+    private readonly focusTabByIndex;
+    private getTabAnchor;
+}
+export declare const anchorTabsTag = "nimble-anchor-tabs";

package/dist/esm/src/anchor-tabs/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor-tabs/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorTabs, TabsOptions } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTabs>, TabsOptions>;

package/dist/esm/src/anchor-tree-item/index.d.ts

@@ -0,0 +1,57 @@
+import { AnchorBase } from '../anchor-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-tree-item': AnchorTreeItem;
+    }
+}
+/**
+ * A nimble-styled anchor tree item
+ */
+export declare class AnchorTreeItem extends AnchorBase {
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the tree is nested
+     *
+     * @public
+     */
+    isNestedItem(): boolean;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    handleFocus(_e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    handleBlur(_e: FocusEvent): void;
+    /**
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean;
+    /**
+     * Activating the anchor by pressing the Enter key results in a click event.
+     * This bubbles up to the Nimble tree-view's click handler, causing the tree item
+     * to be selected. We don't want that for anchor tree items. We'll stop propagation
+     * of the event to prevent that.
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean;
+    protected selectedChanged(_prev: boolean | undefined, _next: boolean): void;
+}
+export declare const anchorTreeItemTag = "nimble-anchor-tree-item";

package/dist/esm/src/anchor-tree-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/anchor-tree-item/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { AnchorOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorTreeItem } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTreeItem>, AnchorOptions>;

package/dist/esm/src/anchored-region/index.d.ts

@@ -0,0 +1,12 @@
+import { AnchoredRegion as FoundationAnchoredRegion } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchored-region': AnchoredRegion;
+    }
+}
+/**
+ * A nimble-styled anchored region control.
+ */
+export declare class AnchoredRegion extends FoundationAnchoredRegion {
+}
+export declare const anchoredRegionTag = "nimble-anchored-region";

package/dist/esm/src/anchored-region/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/banner/index.d.ts

@@ -0,0 +1,47 @@
+import { ARIAGlobalStatesAndProperties, FoundationElement } from '@microsoft/fast-foundation';
+import { BannerSeverity } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-banner': Banner;
+    }
+}
+/**
+ * A nimble-styled notification banner for persistent messages.
+ */
+export declare class Banner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * Whether the banner is visible or not
+     */
+    open: boolean;
+    /**
+     * @public
+     * @description
+     * Severity of the banner's message
+     */
+    severity: BannerSeverity;
+    /**
+     * @public
+     * @description
+     * Whether the banner title is hidden
+     */
+    titleHidden: boolean;
+    /**
+     * @public
+     * @description
+     * Hides the dismiss button
+     */
+    preventDismiss: boolean;
+    /**
+     * @internal
+     */
+    openChanged(): void;
+    /**
+     * @internal
+     */
+    dismissBanner(): void;
+}
+export interface Banner extends ARIAGlobalStatesAndProperties {
+}
+export declare const bannerTag = "nimble-banner";

package/dist/esm/src/banner/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/banner/template.d.ts

@@ -0,0 +1,2 @@
+import type { Banner } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Banner, any>;

package/dist/esm/src/banner/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Severities of banners.
+ * @public
+ */
+export declare const BannerSeverity: {
+    readonly default: undefined;
+    readonly error: "error";
+    readonly warning: "warning";
+    readonly information: "information";
+};
+export type BannerSeverity = (typeof BannerSeverity)[keyof typeof BannerSeverity];
+/**
+ * The type of the detail associated with the `toggle`
+ * event on the banner.
+ */
+export interface BannerToggleEventDetail {
+    newState: boolean;
+    oldState: boolean;
+}

package/dist/esm/src/breadcrumb/index.d.ts

@@ -0,0 +1,14 @@
+import { Breadcrumb as FoundationBreadcrumb } from '@microsoft/fast-foundation';
+import type { BreadcrumbAppearance } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-breadcrumb': Breadcrumb;
+    }
+}
+/**
+ * A nimble-styled breadcrumb
+ */
+export declare class Breadcrumb extends FoundationBreadcrumb {
+    appearance: BreadcrumbAppearance;
+}
+export declare const breadcrumbTag = "nimble-breadcrumb";

package/dist/esm/src/breadcrumb/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/breadcrumb/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Predefined icon appearance states
+ * @public
+ */
+export declare const BreadcrumbAppearance: {
+    readonly default: undefined;
+    readonly prominent: "prominent";
+};
+export type BreadcrumbAppearance = (typeof BreadcrumbAppearance)[keyof typeof BreadcrumbAppearance];

package/dist/esm/src/breadcrumb-item/index.d.ts

@@ -0,0 +1,12 @@
+import { BreadcrumbItem as FoundationBreadcrumbItem } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-breadcrumb-item': BreadcrumbItem;
+    }
+}
+/**
+ * A nimble-styled breadcrumb item
+ */
+export declare class BreadcrumbItem extends FoundationBreadcrumbItem {
+}
+export declare const breadcrumbItemTag = "nimble-breadcrumb-item";

package/dist/esm/src/breadcrumb-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/button/index.d.ts

@@ -0,0 +1,32 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { ButtonPattern, ButtonAppearanceVariantPattern } from '../patterns/button/types';
+import { ButtonAppearance, ButtonAppearanceVariant } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-button': Button;
+    }
+}
+/**
+ * A nimble-styled HTML button
+ */
+export declare class Button extends FoundationButton implements ButtonPattern, ButtonAppearanceVariantPattern {
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance
+     */
+    appearance: ButtonAppearance;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: appearance-variant
+     */
+    appearanceVariant: ButtonAppearanceVariant;
+    /**
+     * @public
+     * @remarks
+     * HTML Attribute: content-hidden
+     */
+    contentHidden: boolean;
+}
+export declare const buttonTag = "nimble-button";

package/dist/esm/src/button/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/button/types.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Types of button appearance.
+ * @public
+ */
+import type { Button } from '@microsoft/fast-foundation';
+export { ButtonAppearance, ButtonAppearanceVariant } from '../patterns/button/types';
+export type ButtonType = Button['type'];

package/dist/esm/src/card/index.d.ts

@@ -0,0 +1,12 @@
+import { Card as FoundationCard } from '@microsoft/fast-foundation';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-card': Card;
+    }
+}
+/**
+ * A nimble-styled card
+ */
+export declare class Card extends FoundationCard {
+}
+export declare const cardTag = "nimble-card";

package/dist/esm/src/card/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/src/card/template.d.ts

@@ -0,0 +1,2 @@
+import type { Card } from '.';
+export declare const template: import("@microsoft/fast-element").ViewTemplate<Card, any>;