@ni/nimble-components 18.7.0 → 18.8.0

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

@@ -5,6 +5,7 @@
  */
 import './anchor';
 import './anchor-button';
+import './anchor-menu-item';
 import './anchor-tab';
 import './anchor-tabs';
 import './anchored-region';

package/dist/esm/all-components.js

@@ -5,6 +5,7 @@
  */
 import './anchor';
 import './anchor-button';
+import './anchor-menu-item';
 import './anchor-tab';
 import './anchor-tabs';
 import './anchored-region';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

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

@@ -0,0 +1,38 @@
+import { MenuItemColumnCount, StartEnd } 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 interface AnchorMenuItem extends StartEnd {
+}
+export declare const anchorMenuItemTag: string;

package/dist/esm/anchor-menu-item/index.js

@@ -0,0 +1,109 @@
+import { __decorate } from "tslib";
+import { attr, observable } from '@microsoft/fast-element';
+import { DesignSystem, MenuItem as FoundationMenuItem, StartEnd, applyMixins } from '@microsoft/fast-foundation';
+import { keyEnter } from '@microsoft/fast-web-utilities';
+import { AnchorBase } from '../anchor-base';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled anchor menu-item
+ */
+export class AnchorMenuItem extends AnchorBase {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        /**
+         * 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
+         */
+        this.startColumnCount = 0;
+    }
+    // The following two handlers are workarounds for issues with anchor menu items in submenus.
+    // Events can bubble up the DOM and get handled by the menu item in the parent menu. When that happens,
+    // the menu item's handlers (FAST) return false and prevent the default action, i.e. navigation.
+    // FAST has this issue about supporting links in menus: https://github.com/microsoft/fast/issues/5415
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        e.stopImmediatePropagation();
+        return true;
+    }
+    /**
+     * @internal
+     */
+    keydownHandler(e) {
+        if (e.defaultPrevented) {
+            return false;
+        }
+        switch (e.key) {
+            case keyEnter:
+                e.stopImmediatePropagation();
+                break;
+            default:
+        }
+        return true;
+    }
+    // The FAST Menu manages the `tabindex` of its menu items. Because of a bug in Chromium
+    // (https://bugs.chromium.org/p/chromium/issues/detail?id=1346606), setting the tabindex on an element
+    // with `delegatesFocus=true` causes the element to lose focus. This causes the menu to close, preventing
+    // arrowing through the items or navigating to the url. As a workaround, we intercept attempts to
+    // set the tabindex on the host and instead set it on the inner anchor.
+    // The referenced Chromium bug is actually fixed, but it hasn't been pulled into Edge yet (it is in
+    // Chrome). Issue https://github.com/ni/nimble/issues/1118 tracks removal of this workaround.
+    setAttribute(qualifiedName, value) {
+        if (qualifiedName === 'tabindex') {
+            this.anchor.setAttribute(qualifiedName, value);
+        }
+        else {
+            super.setAttribute(qualifiedName, value);
+        }
+    }
+    // This is part of the bug workaround described above (in setAttribute)
+    get tabIndex() {
+        return this.anchor.tabIndex;
+    }
+    // This is part of the bug workaround described above (in setAttribute)
+    set tabIndex(value) {
+        this.anchor.tabIndex = value;
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], AnchorMenuItem.prototype, "disabled", void 0);
+__decorate([
+    observable
+], AnchorMenuItem.prototype, "anchor", void 0);
+__decorate([
+    observable
+], AnchorMenuItem.prototype, "startColumnCount", void 0);
+const nimbleAnchorMenuItem = AnchorMenuItem.compose({
+    baseName: 'anchor-menu-item',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+applyMixins(AnchorMenuItem, StartEnd);
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleAnchorMenuItem());
+export const anchorMenuItemTag = DesignSystem.tagFor(AnchorMenuItem);
+// This is a workaround for the fact that FAST's menu uses `instanceof MenuItem`
+// in their logic for indenting menu items. Since our AnchorMenuItem derives from
+// AnchorBase and not FAST's MenuItem, we need to change their MenuItem's definition
+// of `hasInstance` so that it includes our AnchorMenuItem, too.
+//
+// If/when we change FAST to test for the presence of `startColumnCount` instead
+// of using `instanceof MenuItem`, we can remove this workaround. Here is the
+// PR into FAST: https://github.com/microsoft/fast/pull/6667
+const originalInstanceOf = FoundationMenuItem[Symbol.hasInstance].bind(FoundationMenuItem);
+Object.defineProperty(FoundationMenuItem, Symbol.hasInstance, {
+    value(instance) {
+        return (originalInstanceOf(instance) || instance instanceof AnchorMenuItem);
+    }
+});
+//# sourceMappingURL=index.js.map

package/dist/esm/anchor-menu-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/index.ts"],"names":[],"mappings":"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"}

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

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

package/dist/esm/anchor-menu-item/styles.js

@@ -0,0 +1,80 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { bodyDisabledFontColor, bodyFont, bodyFontColor, borderHoverColor, controlHeight, fillHoverColor, fillSelectedColor, iconSize } from '../theme-provider/design-tokens';
+export const styles = css `
+    ${display('grid')}
+
+    :host {
+        font: ${bodyFont};
+    }
+
+    :host(:focus-within:not(:active)) {
+        outline: 2px solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    :host(:hover) {
+        background: ${fillHoverColor};
+    }
+
+    :host(:active) {
+        background: ${fillSelectedColor};
+    }
+
+    :host([disabled]) {
+        background: transparent;
+    }
+
+    a {
+        display: grid;
+        contain: layout;
+        overflow: visible;
+        box-sizing: border-box;
+        height: ${controlHeight};
+        grid-template-columns: 1fr;
+        column-gap: 8px;
+        grid-template-rows: 1fr;
+        justify-items: start;
+        align-items: center;
+        margin: 0 0;
+        white-space: nowrap;
+        color: ${bodyFontColor};
+        fill: currentcolor;
+        cursor: pointer;
+        text-decoration: none;
+        outline: none;
+    }
+
+    :host([disabled]) a {
+        color: ${bodyDisabledFontColor};
+        fill: currentcolor;
+        cursor: default;
+    }
+
+    :host(.indent-1) a {
+        grid-template-columns: ${iconSize} 1fr;
+    }
+
+    [part='start'] {
+        display: contents;
+    }
+
+    slot[name='start']::slotted(*) {
+        fill: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    :host(.indent-1) .start {
+        grid-column: 1;
+    }
+
+    :host(.indent-1) .content {
+        grid-column: 2;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/anchor-menu-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACX,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;6BAIK,gBAAgB;;;;;sBAKvB,cAAc;;;;sBAId,iBAAiB;;;;;;;;;;;;kBAYrB,aAAa;;;;;;;;iBAQd,aAAa;;;;;;;;iBAQb,qBAAqB;;;;;;iCAML,QAAQ;;;;;;;;;iBASxB,QAAQ;kBACP,QAAQ;;;;;;;;;;;;;;CAczB,CAAC"}

package/dist/esm/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/anchor-menu-item/template.js

@@ -0,0 +1,32 @@
+import { html, ref } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+export const template = (context, definition) => html `
+    <template
+        role="menuitem"
+        class="${x => (typeof x.startColumnCount === 'number'
+    ? `indent-${x.startColumnCount}`
+    : '')}"
+        aria-disabled="${x => x.disabled}"
+    >
+        <a
+            ${ref('anchor')}
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            @click="${(x, c) => x.clickHandler(c.event)}"
+            @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        >
+            ${startSlotTemplate(context, definition)}
+            <span class="content" part="content">
+                <slot></slot>
+            </span>
+            ${endSlotTemplate(context, definition)}
+        </a>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/anchor-menu-item/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAEH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAgB;;;iBAGhC,CAAC,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,gBAAgB,KAAK,QAAQ;IACrD,CAAC,CAAC,UAAU,CAAC,CAAC,gBAAgB,EAAE;IAChC,CAAC,CAAC,EAAE,CAAC;yBACY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;;cAG1B,GAAG,CAAC,QAAQ,CAAC;wBACH,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;sBACT,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;wBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;;cAE9D,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "18.7.0",
+  "version": "18.8.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",