@esri/calcite-components 1.4.0-next.13 → 1.4.0-next.15

package/dist/types/components/menu-item/menu-item.d.ts

@@ -0,0 +1,100 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { FlipContext } from "../interfaces";
+import { Direction } from "../../utils/dom";
+import { LoadableComponent } from "../../utils/loadable";
+import { MenuItemCustomEvent } from "./interfaces";
+import { T9nComponent } from "../../utils/t9n";
+import { MenuItemMessages } from "./assets/menu-item/t9n";
+import { LocalizedComponent } from "../../utils/locale";
+type Layout = "horizontal" | "vertical";
+export declare class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {
+  el: HTMLCalciteMenuItemElement;
+  /** When `true`, the component is highlighted. */
+  active: boolean;
+  /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */
+  breadcrumb: boolean;
+  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/
+  href: string;
+  /** Specifies an icon to display at the end of the component. */
+  iconEnd: string;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  iconStart: string;
+  /**
+   * @internal
+   */
+  isTopLevelItem: boolean;
+  /** Accessible name for the component.*/
+  label: string;
+  /**
+   * @internal
+   */
+  layout: Layout;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<MenuItemMessages>;
+  onMessagesChange(): void;
+  /**
+   * Made into a prop for testing purposes only.
+   *
+   * @internal
+   */
+  messages: MenuItemMessages;
+  /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/
+  open: boolean;
+  /**
+   * Defines the relationship between the `href` value and the current document.
+   *
+   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   */
+  rel: string;
+  /**
+   * Specifies where to open the linked document defined in the `href` property.
+   *
+   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   */
+  target: string;
+  /** Specifies the text to display.*/
+  text: string;
+  /**
+   * @internal
+   */
+  topLevelMenuLayout: Layout;
+  defaultMessages: MenuItemMessages;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  hasSubmenu: boolean;
+  submenuItems: HTMLCalciteMenuItemElement[];
+  anchorEl: HTMLAnchorElement;
+  dropdownActionEl: HTMLCalciteActionElement;
+  isFocused: boolean;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** @internal */
+  calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;
+  /** Emits when the component is selected.*/
+  calciteMenuItemSelect: EventEmitter<void>;
+  handleClickOut(event: Event): void;
+  handleFocusOut(event: FocusEvent): void;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  private blurHandler;
+  private clickHandler;
+  private focusHandler;
+  private handleMenuItemSlotChange;
+  private keyDownHandler;
+  private selectMenuItem;
+  renderIconStart(): VNode;
+  renderIconEnd(): VNode;
+  renderBreadcrumbIcon(dir: Direction): VNode;
+  renderDropdownIcon(dir: Direction): VNode;
+  renderDropdownAction(dir: Direction): VNode;
+  renderSubmenuItems(dir: Direction): VNode;
+  renderItemContent(dir: Direction): VNode;
+  render(): any;
+}
+export {};

package/dist/types/components/menu-item/resources.d.ts

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  container: string;
+  content: string;
+  dropdownVertical: string;
+  dropdownMenuItems: string;
+  dropdownAction: string;
+  layoutVertical: string;
+  hoverHrefIcon: string;
+  icon: string;
+  iconBreadcrumb: string;
+  iconDropdown: string;
+  iconEnd: string;
+  iconStart: string;
+  isParentVertical: string;
+  itemContent: string;
+  open: string;
+  nested: string;
+  textContainer: string;
+};

package/dist/types/components.d.ts

@@ -50,6 +50,9 @@ import { TimePickerMessages } from "./components/time-picker/assets/time-picker/
 import { ItemData } from "./components/list-item/interfaces";
 import { SelectionAppearance } from "./components/list/resources";
 import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
+import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { ModalMessages } from "./components/modal/assets/modal/t9n";
 import { NoticeMessages } from "./components/notice/assets/notice/t9n";
 import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
@@ -2520,6 +2523,95 @@ export namespace Components {
          */
         "value": number;
     }
+    interface CalciteMenu {
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Specifies the layout of the component.
+         */
+        "layout": Layout;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides": Partial<MenuMessages>;
+        /**
+          * Made into a prop for testing purposes only.
+         */
+        "messages": MenuMessages;
+        /**
+          * Specifies the role of `menu` component. Marked as internal for parsing the role attribute in `menu-item` component shadowDOM. This property falls outside of the `globalAttribute` interface pattern because it is immutable and has a default value.
+         */
+        "role": string;
+        /**
+          * Sets focus on the component's first focusable element.
+         */
+        "setFocus": () => Promise<void>;
+    }
+    interface CalciteMenuItem {
+        /**
+          * When `true`, the component is highlighted.
+         */
+        "active": boolean;
+        /**
+          * When `true`, the component displays a breadcrumb trail for use as a navigational aid.
+         */
+        "breadcrumb": boolean;
+        /**
+          * Specifies the URL destination of the component, which can be set as an absolute or relative path.
+         */
+        "href": string;
+        /**
+          * Specifies an icon to display at the end of the component.
+         */
+        "iconEnd": string;
+        /**
+          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
+         */
+        "iconFlipRtl": FlipContext;
+        /**
+          * Specifies an icon to display at the start of the component.
+         */
+        "iconStart": string;
+        "isTopLevelItem": boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        "layout": Layout;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides": Partial<MenuItemMessages>;
+        /**
+          * Made into a prop for testing purposes only.
+         */
+        "messages": MenuItemMessages;
+        /**
+          * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
+         */
+        "open": boolean;
+        /**
+          * Defines the relationship between the `href` value and the current document.
+          * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+         */
+        "rel": string;
+        /**
+          * Sets focus on the component.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Specifies where to open the linked document defined in the `href` property.
+          * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+         */
+        "target": string;
+        /**
+          * Specifies the text to display.
+         */
+        "text": string;
+        "topLevelMenuLayout": Layout;
+    }
     interface CalciteModal {
         /**
           * Passes a function to run before the component closes.
@@ -4414,6 +4506,10 @@ export interface CalciteListItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteListItemElement;
 }
+export interface CalciteMenuItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteMenuItemElement;
+}
 export interface CalciteModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteModalElement;
@@ -4848,6 +4944,18 @@ declare global {
         prototype: HTMLCalciteLoaderElement;
         new (): HTMLCalciteLoaderElement;
     };
+    interface HTMLCalciteMenuElement extends Components.CalciteMenu, HTMLStencilElement {
+    }
+    var HTMLCalciteMenuElement: {
+        prototype: HTMLCalciteMenuElement;
+        new (): HTMLCalciteMenuElement;
+    };
+    interface HTMLCalciteMenuItemElement extends Components.CalciteMenuItem, HTMLStencilElement {
+    }
+    var HTMLCalciteMenuItemElement: {
+        prototype: HTMLCalciteMenuItemElement;
+        new (): HTMLCalciteMenuItemElement;
+    };
     interface HTMLCalciteModalElement extends Components.CalciteModal, HTMLStencilElement {
     }
     var HTMLCalciteModalElement: {
@@ -5177,6 +5285,8 @@ declare global {
         "calcite-list-item": HTMLCalciteListItemElement;
         "calcite-list-item-group": HTMLCalciteListItemGroupElement;
         "calcite-loader": HTMLCalciteLoaderElement;
+        "calcite-menu": HTMLCalciteMenuElement;
+        "calcite-menu-item": HTMLCalciteMenuItemElement;
         "calcite-modal": HTMLCalciteModalElement;
         "calcite-notice": HTMLCalciteNoticeElement;
         "calcite-option": HTMLCalciteOptionElement;
@@ -7536,6 +7646,76 @@ declare namespace LocalJSX {
          */
         "value"?: number;
     }
+    interface CalciteMenu {
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Specifies the layout of the component.
+         */
+        "layout"?: Layout;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides"?: Partial<MenuMessages>;
+    }
+    interface CalciteMenuItem {
+        /**
+          * When `true`, the component is highlighted.
+         */
+        "active"?: boolean;
+        /**
+          * When `true`, the component displays a breadcrumb trail for use as a navigational aid.
+         */
+        "breadcrumb"?: boolean;
+        /**
+          * Specifies the URL destination of the component, which can be set as an absolute or relative path.
+         */
+        "href"?: string;
+        /**
+          * Specifies an icon to display at the end of the component.
+         */
+        "iconEnd"?: string;
+        /**
+          * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
+         */
+        "iconFlipRtl"?: FlipContext;
+        /**
+          * Specifies an icon to display at the start of the component.
+         */
+        "iconStart"?: string;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides"?: Partial<MenuItemMessages>;
+        /**
+          * Emits when the component is selected.
+         */
+        "onCalciteMenuItemSelect"?: (event: CalciteMenuItemCustomEvent<void>) => void;
+        /**
+          * When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.
+         */
+        "open"?: boolean;
+        /**
+          * Defines the relationship between the `href` value and the current document.
+          * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+         */
+        "rel"?: string;
+        /**
+          * Specifies where to open the linked document defined in the `href` property.
+          * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+         */
+        "target"?: string;
+        /**
+          * Specifies the text to display.
+         */
+        "text"?: string;
+    }
     interface CalciteModal {
         /**
           * Passes a function to run before the component closes.
@@ -9220,6 +9400,8 @@ declare namespace LocalJSX {
         "calcite-list-item": CalciteListItem;
         "calcite-list-item-group": CalciteListItemGroup;
         "calcite-loader": CalciteLoader;
+        "calcite-menu": CalciteMenu;
+        "calcite-menu-item": CalciteMenuItem;
         "calcite-modal": CalciteModal;
         "calcite-notice": CalciteNotice;
         "calcite-option": CalciteOption;
@@ -9322,6 +9504,8 @@ declare module "@stencil/core" {
             "calcite-list-item": LocalJSX.CalciteListItem & JSXBase.HTMLAttributes<HTMLCalciteListItemElement>;
             "calcite-list-item-group": LocalJSX.CalciteListItemGroup & JSXBase.HTMLAttributes<HTMLCalciteListItemGroupElement>;
             "calcite-loader": LocalJSX.CalciteLoader & JSXBase.HTMLAttributes<HTMLCalciteLoaderElement>;
+            "calcite-menu": LocalJSX.CalciteMenu & JSXBase.HTMLAttributes<HTMLCalciteMenuElement>;
+            "calcite-menu-item": LocalJSX.CalciteMenuItem & JSXBase.HTMLAttributes<HTMLCalciteMenuItemElement>;
             "calcite-modal": LocalJSX.CalciteModal & JSXBase.HTMLAttributes<HTMLCalciteModalElement>;
             "calcite-notice": LocalJSX.CalciteNotice & JSXBase.HTMLAttributes<HTMLCalciteNoticeElement>;
             "calcite-option": LocalJSX.CalciteOption & JSXBase.HTMLAttributes<HTMLCalciteOptionElement>;

package/dist/types/preact.d.ts

@@ -226,6 +226,13 @@ declare module "preact/src/jsx" {
 
       "calcite-loader": JSX.CalciteLoader & JSXInternal.HTMLAttributes<HTMLCalciteLoaderElement>
 
+      "calcite-menu": JSX.CalciteCalciteMenu & JSXInternal.HTMLAttributes<HTMLCalciteCalciteMenuElement>
+
+      "calcite-menu-item": Omit<JSX.CalciteCalciteMenuItem, "onCalciteInternalMenuItemKeyEvent" | "onCalciteMenuItemSelect"> & JSXInternal.HTMLAttributes<HTMLCalciteCalciteMenuItemElement> & {
+        "oncalciteInternalMenuItemKeyEvent"?: (event: CustomEvent<any>) => void;
+        "oncalciteMenuItemSelect"?: (event: CustomEvent<any>) => void;
+      }
+
       "calcite-modal": Omit<JSX.CalciteModal, "onCalciteModalBeforeClose" | "onCalciteModalClose" | "onCalciteModalBeforeOpen" | "onCalciteModalOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteModalElement> & {
         "oncalciteModalBeforeClose"?: (event: CustomEvent<any>) => void;
         "oncalciteModalClose"?: (event: CustomEvent<any>) => void;

package/dist/types/utils/dom.d.ts

@@ -229,9 +229,10 @@ export type FocusElementInGroupDestination = "first" | "last" | "next" | "previo
  * 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.
- * @returns {Element} The focused element
+ * @param {Element}  currentElement The current element.
+ * @param {FocusElementInGroupDestination} destination target destination element to focus.
+ * @param {boolean} cycle Should navigation cycle through elements or stop at extent - defaults to true.
+ * @returns {Element} The focused element.
  */
-export declare const focusElementInGroup: (elements: Element[], currentElement: Element, destination: FocusElementInGroupDestination) => Element;
+export declare const focusElementInGroup: (elements: Element[], currentElement: Element, destination: FocusElementInGroupDestination, cycle?: boolean) => Element;
 export {};