@ni/nimble-components 27.1.1 → 27.2.0

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ni/nimble-components",
-  "version": "27.1.1",
+  "version": "27.2.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
-    "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",
+    "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
     "lint": "npm run eslint && npm run prettier",
     "format": "npm run eslint-fix && npm run prettier-fix",
     "eslint": "eslint .",
@@ -12,8 +12,6 @@
     "prettier-fix": "prettier-eslint \"**/*.*\" --write --prettier-ignore",
     "pack": "npm pack",
     "invoke-publish": "npm publish",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build -o dist/storybook --webpack-stats-json",
     "storybook-open-webkit": "playwright wk http://localhost:6006",
     "build-components": "tsc -p ./tsconfig.json",
     "build-components:watch": "tsc -p ./tsconfig.json -w",
@@ -106,10 +104,6 @@
     "apache-arrow": "^15.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.20.12",
-    "@chromatic-com/storybook": "^1.2.25",
-    "@microsoft/fast-react-wrapper": "^0.3.22",
     "@ni/jasmine-parameterized": "^0.3.0",
     "@ni-private/eslint-config-nimble": "^1.0.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -117,31 +111,12 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-terser": "^0.4.0",
-    "@storybook/addon-a11y": "^8.0.4",
-    "@storybook/addon-actions": "^8.0.4",
-    "@storybook/addon-docs": "^8.0.4",
-    "@storybook/addon-essentials": "^8.0.4",
-    "@storybook/addon-interactions": "^8.0.4",
-    "@storybook/addon-links": "^8.0.4",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
-    "@storybook/cli": "^8.0.4",
-    "@storybook/csf": "^0.1.2",
-    "@storybook/html": "^8.0.4",
-    "@storybook/html-webpack5": "^8.0.4",
-    "@storybook/manager-api": "^8.0.4",
-    "@storybook/theming": "^8.0.4",
     "@types/jasmine": "^5.1.4",
     "@types/offscreencanvas": "^2019.7.3",
     "@types/webpack-env": "^1.15.2",
-    "babel-loader": "^9.1.2",
-    "circular-dependency-plugin": "^5.2.0",
     "css-loader": "^6.7.3",
-    "dotenv-webpack": "^8.0.1",
     "eslint-plugin-jsdoc": "^48.2.0",
-    "eslint-plugin-storybook": "^0.8.0",
-    "html-webpack-plugin": "^5.3.1",
     "jasmine-core": "^5.1.2",
-    "js-beautify": "^1.15.1",
     "karma": "^6.3.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^2.1.0",
@@ -156,15 +131,11 @@
     "playwright": "1.42.0",
     "prettier-eslint": "^16.3.0",
     "prettier-eslint-cli": "^8.0.1",
-    "remark-gfm": "^4.0.0",
     "rollup": "^4.12.0",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "source-map-loader": "^5.0.0",
-    "storybook": "^8.0.4",
-    "storybook-addon-pseudo-states": "^3.0.0",
     "terser-webpack-plugin": "^5.3.10",
-    "ts-loader": "^9.2.5",
     "typescript": "~5.1.6",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",

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

@@ -1,51 +0,0 @@
-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

@@ -1,62 +0,0 @@
-/**
- * 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/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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,6 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

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

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

@@ -1,36 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

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

@@ -1,47 +0,0 @@
-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

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

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

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

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

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,14 +0,0 @@
-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

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

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

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