@tylertech/forge 2.13.1 → 2.14.0-dev.0

package/esm/list-dropdown/list-dropdown-aware.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
@@ -13,15 +13,17 @@ export interface IListDropdownAware extends IBaseComponent {
     optionLimit: number;
     observeScroll: boolean;
     observeScrollThreshold: number;
+    constrainPopupWidth: boolean;
+    wrapOptionText: boolean;
 }
 export declare class ListDropdownAware extends BaseComponent {
     constructor();
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     /** Gets/sets the list of classes to apply to the popup element. */
     popupClasses: string | string[];
-    /** Gets/sets the list of classes to apply to the popup element. */
+    /** Gets/sets the callback function for generating header content within the popup. */
     popupHeaderBuilder: ListDropdownHeaderBuilder;
-    /** Gets/sets the list of classes to apply to the popup element. */
+    /** Gets/sets the callback function for generating header content within the popup. */
     popupFooterBuilder: ListDropdownFooterBuilder;
     /** Gets/sets whether the popup width is synchronized with the popup target width. */
     syncPopupWidth: boolean;
@@ -31,4 +33,11 @@ export declare class ListDropdownAware extends BaseComponent {
     observeScroll: boolean;
     /** The number of pixels from the bottom to trigger the scroll bottom event. Only applicable if `observeScroll` is true. */
     observeScrollThreshold: number;
+    /** Gets/sets whether the popup width will be constrained to a max width of the viewport width (default: `100vw`). */
+    constrainPopupWidth: boolean;
+    /**
+     * Gets/sets whether the options will wrap their text or not.
+     * This only applies if `constrainPopupWidth` is `true`, if there is an explicit width set via CSS.
+     * */
+    wrapOptionText: boolean;
 }

package/esm/list-dropdown/list-dropdown-aware.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { __decorate } from "tslib";
@@ -28,6 +28,12 @@ export class ListDropdownAware extends BaseComponent {
             case LIST_DROPDOWN_CONSTANTS.attributes.SYNC_POPUP_WIDTH:
                 this.syncPopupWidth = coerceBoolean(newValue);
                 break;
+            case LIST_DROPDOWN_CONSTANTS.attributes.CONSTRAIN_POPUP_WIDTH:
+                this.constrainPopupWidth = coerceBoolean(newValue);
+                break;
+            case LIST_DROPDOWN_CONSTANTS.attributes.WRAP_OPTION_TEXT:
+                this.wrapOptionText = coerceBoolean(newValue);
+                break;
         }
     }
 }
@@ -52,3 +58,9 @@ __decorate([
 __decorate([
     FoundationProperty()
 ], ListDropdownAware.prototype, "observeScrollThreshold", void 0);
+__decorate([
+    FoundationProperty()
+], ListDropdownAware.prototype, "constrainPopupWidth", void 0);
+__decorate([
+    FoundationProperty()
+], ListDropdownAware.prototype, "wrapOptionText", void 0);

package/esm/list-dropdown/list-dropdown-constants.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { IPopupPosition, PopupPlacement } from '../popup';
@@ -11,6 +11,8 @@ export declare const LIST_DROPDOWN_CONSTANTS: {
         OBSERVE_SCROLL: string;
         OBSERVE_SCROLL_THRESHOLD: string;
         SYNC_POPUP_WIDTH: string;
+        CONSTRAIN_POPUP_WIDTH: string;
+        WRAP_OPTION_TEXT: string;
         CHECKBOX_ELEMENT: string;
         DATA_ALLOW_FOCUS: string;
     };
@@ -21,7 +23,7 @@ export declare const LIST_DROPDOWN_CONSTANTS: {
 export declare type ListDropdownOptionBuilder<T = HTMLElement> = (option: IListDropdownOption, parentElement: T) => HTMLElement | string | void;
 export declare type ListDropdownHeaderBuilder = () => HTMLElement;
 export declare type ListDropdownFooterBuilder = () => HTMLElement;
-export declare type ListDropdownOptionGroupBuilder = (option: IListDropdownOptionGroup) => HTMLElement;
+export declare type ListDropdownOptionGroupBuilder<T = any> = (option: IListDropdownOptionGroup<T>) => HTMLElement | string;
 export declare type ListDropdownTransformCallback = (label: string) => string | HTMLElement;
 export declare type ListDropdownIconType = 'font' | 'component';
 export interface IBaseListDropdownOption<T = any> {
@@ -43,10 +45,11 @@ export interface IListDropdownOption<T = any> extends IBaseListDropdownOption<T>
     options?: Array<IListDropdownOption | IListDropdownOptionGroup>;
     elementAttributes?: Map<string, string>;
 }
-export interface IListDropdownOptionGroup {
-    options: IListDropdownOption[];
+export interface IListDropdownOptionGroup<T = any, K = any> {
     text?: string;
+    value?: K;
     builder?: ListDropdownOptionGroupBuilder;
+    options: IListDropdownOption<T>[];
 }
 export interface IListDropdownSelectEventData {
     value: IListDropdownOption | IListDropdownOption[];
@@ -58,6 +61,8 @@ export interface IListDropdownConfig<T = any> {
     activeChangeCallback?: (id: string) => void;
     closeCallback?: () => void;
     syncWidth?: boolean;
+    constrainViewportWidth?: boolean;
+    wrapOptionText?: boolean;
     selectedValues?: T[];
     multiple?: boolean;
     activeStartIndex?: number;
@@ -71,6 +76,7 @@ export interface IListDropdownConfig<T = any> {
     popupOffset?: IPopupPosition;
     popupStatic?: boolean;
     popupPlacement?: PopupPlacement;
+    popupFallbackPlacements?: PopupPlacement[];
     optionLimit?: number;
     optionBuilder?: ListDropdownOptionBuilder;
     observeScroll?: boolean;

package/esm/list-dropdown/list-dropdown-constants.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 const attributes = {
@@ -9,6 +9,8 @@ const attributes = {
     OBSERVE_SCROLL: 'observe-scroll',
     OBSERVE_SCROLL_THRESHOLD: 'observe-scroll-threshold',
     SYNC_POPUP_WIDTH: 'sync-popup-width',
+    CONSTRAIN_POPUP_WIDTH: 'constrain-popup-width',
+    WRAP_OPTION_TEXT: 'wrap-option-text',
     // Internal
     CHECKBOX_ELEMENT: 'data-list-dropdown-checkbox',
     DATA_ALLOW_FOCUS: 'data-list-dropdown-allow-focus'

package/esm/list-dropdown/list-dropdown-foundation.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { IListDropdownAdapter } from './list-dropdown-adapter';

package/esm/list-dropdown/list-dropdown-foundation.js

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { DEFAULT_LIST_DROPDOWN_CONFIG } from './list-dropdown-constants';
-import { isListDropdownOptionType, ListDropdownOptionType } from './list-dropdown-utils';
+import { getFlattenedOptions } from './list-dropdown-utils';
 export class ListDropdownFoundation {
     constructor(_adapter, config) {
         this._adapter = _adapter;
@@ -156,6 +156,7 @@ export class ListDropdownFoundation {
     handleKey(key) {
         switch (key) {
             case 'Enter':
+            case 'NumpadEnter':
                 const activeOptionIndex = this.getActiveOptionIndex();
                 const activeOption = this._nonDividerOptions[activeOptionIndex];
                 if (this._canSelectOption(activeOption)) {
@@ -212,11 +213,7 @@ export class ListDropdownFoundation {
         return index;
     }
     get _flatOptions() {
-        if (isListDropdownOptionType(this._config.options, ListDropdownOptionType.Group)) {
-            const groups = this._config.options;
-            return groups.reduce((flatOpts, group) => flatOpts.concat(group.options), []);
-        }
-        return [...this._config.options];
+        return getFlattenedOptions(this._config.options);
     }
     get _nonDividerOptions() {
         return this._flatOptions.filter(o => !o.divider);

package/esm/list-dropdown/list-dropdown-utils.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { ILinearProgressComponent } from '../linear-progress';
@@ -33,3 +33,4 @@ export declare function createBusyElement(): ILinearProgressComponent;
  * @param type The type of option to detect.
  */
 export declare function isListDropdownOptionType(options: Array<IListDropdownOption | IListDropdownOptionGroup>, type: ListDropdownOptionType): type is ListDropdownOptionType;
+export declare function getFlattenedOptions(options: Array<IListDropdownOptionGroup | IListDropdownOption>): IListDropdownOption[];

package/esm/list-dropdown/list-dropdown-utils.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { addClass, getEventPath, isDefined, isObject, isDeepEqual } from '@tylertech/forge-core';
@@ -8,7 +8,6 @@ import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-i
 import { ICON_CLASS_NAME } from '../constants';
 import { LINEAR_PROGRESS_CONSTANTS } from '../linear-progress';
 import { LIST_CONSTANTS } from '../list/list';
-import { LIST_ITEM_CONSTANTS } from '../list/list-item';
 import { PopupAnimationType, POPUP_CONSTANTS } from '../popup';
 import { SKELETON_CONSTANTS } from '../skeleton';
 import { ListDropdownAsyncStyle, ListDropdownType, LIST_DROPDOWN_CONSTANTS } from './list-dropdown-constants';
@@ -56,11 +55,18 @@ export function createDropdown(config, targetElement) {
     return dropdownElement;
 }
 export function createPopupDropdown(config, targetElement) {
-    const popupElement = document.createElement(POPUP_CONSTANTS.elementName);
+    var _a;
+    const popupElement = document.createElement('forge-popup');
     popupElement.targetElement = targetElement;
     popupElement.placement = config.popupPlacement || 'bottom-start';
     popupElement.manageFocus = false;
     popupElement.static = !!config.popupStatic;
+    if ((_a = config.popupFallbackPlacements) === null || _a === void 0 ? void 0 : _a.length) {
+        popupElement.fallbackPlacements = config.popupFallbackPlacements;
+    }
+    if (config.constrainViewportWidth) {
+        popupElement.setAttribute(POPUP_CONSTANTS.attributes.CONSTRAIN_VIEWPORT_WIDTH, '');
+    }
     if (config.popupOffset) {
         popupElement.offset = config.popupOffset;
     }
@@ -90,6 +96,7 @@ export function createList(config) {
 export function createListItems(config, listElement, options) {
     // Ensure the options are provided in the form a group (if no groups provided, then we have one anonymous group of options)
     const groups = getOptionsByGroup(options || config.options);
+    const flatOptions = getFlattenedOptions(groups);
     const limitOptions = config.optionLimit ? true : false;
     let optionLimit = config.optionLimit || 0;
     let optionIndex = 0;
@@ -103,7 +110,12 @@ export function createListItems(config, listElement, options) {
                 const groupWrapper = document.createElement('div');
                 groupWrapper.classList.add(LIST_DROPDOWN_CONSTANTS.classes.GROUP_WRAPPER);
                 optionParent = groupWrapper;
-                groupWrapper.appendChild(headerElement);
+                if (typeof headerElement === 'string') {
+                    groupWrapper.innerHTML = headerElement;
+                }
+                else if (headerElement instanceof HTMLElement) {
+                    groupWrapper.appendChild(headerElement);
+                }
                 listElement.appendChild(groupWrapper);
             }
         }
@@ -139,10 +151,13 @@ export function createListItems(config, listElement, options) {
             optionIndex++;
             // Create and configure the list element
             const isSelected = config.selectedValues ? config.selectedValues.some(v => isDeepEqual(v, option.value)) : false;
-            let listItemElement = document.createElement(LIST_ITEM_CONSTANTS.elementName);
+            let listItemElement = document.createElement('forge-list-item');
             listItemElement.value = option.value;
             listItemElement.id = `list-dropdown-option-${config.id}-${optionIndex}`;
             listItemElement.style.cursor = 'pointer';
+            if (config.wrapOptionText) {
+                listItemElement.wrap = true;
+            }
             // Add any CSS classes to the option list-item
             if (option.optionClass && (typeof option.optionClass === 'string' || Array.isArray(option.optionClass) && option.optionClass.length)) {
                 addClass(option.optionClass, listItemElement);
@@ -186,6 +201,18 @@ export function createListItems(config, listElement, options) {
                     }
                 }
             }
+            // If multiple selections are enabled then we need to create and append a leading checkbox element
+            if (config.multiple) {
+                const checkboxElement = createCheckboxElement(isSelected);
+                listItemElement.appendChild(checkboxElement);
+                listItemElement.setAttribute('aria-selected', `${isSelected}`);
+                listItemElement.setAttribute('aria-checked', `${isSelected}`);
+            }
+            if (option.elementAttributes) {
+                option.elementAttributes.forEach((value, key) => {
+                    listItemElement.setAttribute(key, value);
+                });
+            }
             // Leading element/icon
             if (option.leadingBuilder) {
                 const element = option.leadingBuilder();
@@ -226,18 +253,6 @@ export function createListItems(config, listElement, options) {
                 listItemElement.selected = true;
             }
             listItemElement.setAttribute('aria-selected', isSelected ? 'true' : 'false');
-            // If multiple selections are enabled then we need to create and append a leading checkbox element
-            if (config.multiple) {
-                const checkboxElement = createCheckboxElement(isSelected);
-                listItemElement.appendChild(checkboxElement);
-                listItemElement.setAttribute('aria-selected', `${isSelected}`);
-                listItemElement.setAttribute('aria-checked', `${isSelected}`);
-            }
-            if (option.elementAttributes) {
-                option.elementAttributes.forEach((value, key) => {
-                    listItemElement.setAttribute(key, value);
-                });
-            }
             // If we have any child options, we need to render a child menu for this list item
             if (!option.disabled && typeof config.cascadingElementFactory === 'function' && Array.isArray(option.options) && option.options.length) {
                 // Create the trailing indicator icon to show that a child menu exists for this option. 
@@ -245,7 +260,7 @@ export function createListItems(config, listElement, options) {
                 optionIconElement.name = 'arrow_right';
                 optionIconElement.slot = 'trailing';
                 listItemElement.appendChild(optionIconElement);
-                const nonDividerOptions = group.options.filter(o => !o.divider);
+                const nonDividerOptions = flatOptions.filter(o => !o.divider);
                 // Create the nested cascading element wrapper
                 const factoryConfig = {
                     index: nonDividerOptions.indexOf(option),
@@ -345,3 +360,10 @@ export function isListDropdownOptionType(options, type) {
     const isOptionTypes = options.some((o) => isDefined(o) && isObject(o) && o.hasOwnProperty('label') && o.hasOwnProperty('value'));
     return (isOptionGroups && type === ListDropdownOptionType.Group) || (isOptionTypes && type === ListDropdownOptionType.Option);
 }
+export function getFlattenedOptions(options) {
+    if (isListDropdownOptionType(options, ListDropdownOptionType.Group)) {
+        const groups = options;
+        return groups.reduce((flatOpts, group) => flatOpts.concat(group.options), []);
+    }
+    return [...options];
+}

package/esm/list-dropdown/list-dropdown.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { IListDropdownConfig, IListDropdownOption, IListDropdownOptionGroup } from './list-dropdown-constants';

package/esm/list-dropdown/list-dropdown.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { tylIconCheckBox, tylIconCheckBoxOutlineBlank } from '@tylertech/tyler-icons/standard';

package/esm/menu/index.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 export * from './menu-adapter';

package/esm/menu/index.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { defineCustomElement } from '@tylertech/forge-core';

package/esm/menu/menu-adapter.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core/base/base-adapter';
@@ -21,6 +21,7 @@ export interface IMenuAdapter extends IBaseAdapter {
     getActiveOptionIndex(): number;
     setActiveOption(index: number): void;
     activateFirstOption(): void;
+    setCascadeTargetInactive(): void;
     propagateKey(key: string): void;
     proxyKeyboardEventToChild(evt: KeyboardEvent, id: string): void;
     toggleChildMenu(index: number, open?: boolean): void;
@@ -49,6 +50,7 @@ export declare class MenuAdapter extends BaseAdapter<IMenuComponent> implements
     detachMenu(): void;
     setActiveOption(index: number): void;
     activateFirstOption(): void;
+    setCascadeTargetInactive(): void;
     getActiveOptionIndex(): number;
     focusTarget(): void;
     isTargetFocused(): boolean;

package/esm/menu/menu-adapter.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { BaseAdapter } from '../core/base/base-adapter';
@@ -81,6 +81,12 @@ export class MenuAdapter extends BaseAdapter {
         var _a;
         (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.activateFirstOption();
     }
+    setCascadeTargetInactive() {
+        const listItem = this._targetElement;
+        if (listItem === null || listItem === void 0 ? void 0 : listItem.active) {
+            listItem.active = false;
+        }
+    }
     getActiveOptionIndex() {
         var _a, _b;
         return (_b = (_a = this._listDropdown) === null || _a === void 0 ? void 0 : _a.getActiveOptionIndex()) !== null && _b !== void 0 ? _b : -1;
@@ -140,6 +146,7 @@ export class MenuAdapter extends BaseAdapter {
             else {
                 childMenu.open = open;
             }
+            childMenu.activateFirstOption();
         }
     }
     createChildMenu(index, parentValue, openCb, closeCb, selectCb) {

package/esm/menu/menu-constants.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { IListDropdownOption, IListDropdownOptionGroup } from '../list-dropdown';

package/esm/menu/menu-constants.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { COMPONENT_NAME_PREFIX } from '../constants';
@@ -10,7 +10,7 @@ const classes = {
     MENU: 'mdc-menu'
 };
 const selectors = {
-    TOGGLE: `.${COMPONENT_NAME_PREFIX}menu__toggle, [${elementName}-toggle], button, [type=button]`,
+    TOGGLE: `.${elementName}__toggle,[${elementName}-toggle],button,[type=button],[role=button],a,[tabindex]:not([tabindex^="-"])`,
     MENU_LIST: 'forge-list'
 };
 const attributes = {

package/esm/menu/menu-foundation.d.ts

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
@@ -18,18 +18,21 @@ export interface IMenuFoundation extends ICustomElementFoundation {
     optionsFactory: MenuOptionFactory | undefined;
     selectedIndex: number;
     selectedValue: any;
-    placement: string;
+    placement: PopupPlacement;
+    fallbackPlacements: PopupPlacement[];
     dense: boolean;
     iconClass: string;
     persistSelection: boolean;
     mode: MenuMode;
     popupOffset: IPopupPosition;
     optionBuilder: MenuOptionBuilder | undefined;
+    activateFirstOption(): void;
 }
 export declare class MenuFoundation extends CascadingListDropdownAwareFoundation<IMenuOption | IMenuOptionGroup> implements IMenuFoundation {
     private _adapter;
     private _optionsFactory;
     private _placement;
+    private _fallbackPlacements;
     private _dense;
     private _selectedValue;
     private _iconClass;
@@ -46,6 +49,7 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     constructor(_adapter: IMenuAdapter);
     initialize(): void;
     disconnect(): void;
+    activateFirstOption(): void;
     private _applyMode;
     private _initializeInteractionListeners;
     private _destroyInteractionListeners;
@@ -69,9 +73,12 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     /** Called when a child menu is opened off of one of our menu options. */
     protected _onCascadingChildOpen(index: number): void;
     /** Called when a child menu is closed off of one of our menu options. */
-    protected _onCascadingChildClose(): void;
+    protected _onCascadingChildClose(index: number): void;
     protected _closeDropdown(): void;
-    protected _openDropdown(): void;
+    protected _openDropdown({ fromKeyboard }?: {
+        fromKeyboard?: boolean;
+    }): void;
+    protected _setCascadeTargetInactive(): void;
     protected _isOwnElement(element: Element): boolean;
     private _createCascadingElement;
     private _mapIconToLeadingIcon;
@@ -86,6 +93,8 @@ export declare class MenuFoundation extends CascadingListDropdownAwareFoundation
     get selectedValue(): any;
     get placement(): PopupPlacement;
     set placement(value: PopupPlacement);
+    get fallbackPlacements(): PopupPlacement[];
+    set fallbackPlacements(value: PopupPlacement[]);
     get dense(): boolean;
     set dense(value: boolean);
     get iconClass(): string;

package/esm/menu/menu-foundation.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright 2022 Tyler Technologies, Inc. 
+ * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
 import { isArray, randomChars } from '@tylertech/forge-core';
@@ -16,6 +16,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         });
         this._adapter = _adapter;
         this._placement = 'bottom-start';
+        this._fallbackPlacements = [];
         this._dense = false;
         this._iconClass = ICON_CLASS_NAME;
         this._persistSelection = false;
@@ -38,6 +39,9 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         }
         this._destroyInteractionListeners();
     }
+    activateFirstOption() {
+        this._adapter.activateFirstOption();
+    }
     _applyMode() {
         if (!this._adapter.hasTargetElement()) {
             return;
@@ -55,14 +59,14 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         }
         this._applyMode();
         this._adapter.addTargetListener('keydown', this._keydownListener, true);
-        this._adapter.addTargetListener('blur', this._blurListener);
+        this._adapter.addTargetListener('focusout', this._blurListener);
     }
     _destroyInteractionListeners() {
         if (!this._adapter.hasTargetElement()) {
             return;
         }
         this._adapter.removeTargetListener('keydown', this._clickListener);
-        this._adapter.removeTargetListener('blur', this._blurListener);
+        this._adapter.removeTargetListener('focusout', this._blurListener);
         this._adapter.removeTargetListener('click', this._clickListener);
         this._detachCascadingListeners();
     }
@@ -113,13 +117,6 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
     onKeydown(evt) {
         // If we have any child menus open, we need to proxy the keyboard events to those and exit
         if (this._childOpen) {
-            // If escape is pressed while other menus are open then we need to close everything
-            if (evt.code === 'Escape') {
-                evt.preventDefault();
-                this._adapter.closeOtherChildMenus();
-                this._closeDropdown();
-                return;
-            }
             this._adapter.proxyKeyboardEventToChild(evt, this._identifier);
             return;
         }
@@ -132,6 +129,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             case 'Escape':
                 if (this._open) {
                     evt.preventDefault();
+                    evt.stopPropagation();
                     this._closeDropdown();
                 }
                 break;
@@ -141,7 +139,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                     this._closeDropdown();
                 }
                 else {
-                    this._openDropdown();
+                    this._openDropdown({ fromKeyboard: true });
                 }
                 break;
             case 'Home':
@@ -152,11 +150,13 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 }
                 break;
             case 'Enter':
+                evt.preventDefault();
                 if (!this._open) {
+                    evt.preventDefault();
+                    this._openDropdown({ fromKeyboard: true });
                     return;
                 }
                 evt.stopImmediatePropagation();
-                evt.preventDefault();
                 this._adapter.propagateKey(evt.code);
                 // Check if we need to toggle the child menu open state
                 const activeIndex = this._adapter.getActiveOptionIndex();
@@ -172,7 +172,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 }
                 evt.preventDefault();
                 if (!this._open && evt.code === 'ArrowDown') {
-                    this._openDropdown();
+                    this._openDropdown({ fromKeyboard: true });
                     this._adapter.activateFirstOption();
                     return;
                 }
@@ -202,7 +202,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
                 break;
         }
     }
-    async _openMenu() {
+    async _openMenu({ fromKeyboard } = {}) {
         this._open = true;
         let options = [];
         if (typeof this._optionsFactory === 'function') {
@@ -238,7 +238,8 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             observeScroll: this._observeScroll,
             observeScrollThreshold: this._observeScrollThreshold,
             popupPlacement: this._placement,
-            activeStartIndex: this._mode === 'cascade' ? 0 : undefined,
+            popupFallbackPlacements: this._fallbackPlacements,
+            activeStartIndex: fromKeyboard ? 0 : undefined,
             popupClasses: [
                 MENU_CONSTANTS.classes.POPUP,
                 MENU_CONSTANTS.classes.MENU,
@@ -355,14 +356,17 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         this._adapter.setActiveOption(index);
     }
     /** Called when a child menu is closed off of one of our menu options. */
-    _onCascadingChildClose() {
+    _onCascadingChildClose(index) {
         this._childOpen = false;
     }
     _closeDropdown() {
         this._closeMenu();
     }
-    _openDropdown() {
-        this._openMenu();
+    _openDropdown({ fromKeyboard } = {}) {
+        this._openMenu({ fromKeyboard });
+    }
+    _setCascadeTargetInactive() {
+        this._adapter.setCascadeTargetInactive();
     }
     _isOwnElement(element) {
         return this._adapter.isOwnElement(element);
@@ -373,6 +377,7 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
         menu.popupOffset = { x: 0, y: -8 };
         menu.dense = this._dense;
         menu.placement = 'right-start';
+        menu.fallbackPlacements = ['left-start', 'right-start']; // Cascading menus should only fallback to left or right placement if needed
         menu.persistSelection = this._persistSelection;
         if (this._persistSelection) {
             menu.selectedValue = this._selectedValue;
@@ -462,6 +467,12 @@ export class MenuFoundation extends CascadingListDropdownAwareFoundation {
             this._adapter.setHostAttribute(MENU_CONSTANTS.attributes.PLACEMENT, this._placement);
         }
     }
+    get fallbackPlacements() {
+        return this._fallbackPlacements;
+    }
+    set fallbackPlacements(value) {
+        this._fallbackPlacements = Array.isArray(value) ? value : [];
+    }
     get dense() {
         return this._dense;
     }