bm-core-ui 2.9.3 → 2.10.0

package/build/BMCollectionView/BMCollectionView.js

@@ -350,8 +350,17 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	 * The layout object managing this collection view's layout.
 	 */
     _layout: undefined, // <BMCollectionViewLayout>
-    get layout() { return this._layout; },
+    get layout() {
+		if (this._transitionLayout && this._layout == this._transitionLayout) {
+			return this._layout.targetLayout; 
+		}
+		else {
+			return this._layout; 
+		}
+	},
     set layout(layout) { 
+		// If data is being updated, wait for the update to finish before updating the
+		// layout
 		if (this.isUpdatingData) {
 			var self = this;
 			this.registerDataCompletionCallback(function () {
@@ -360,6 +369,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			return;
 		}
 
+		// If an animation context is active, perform this change with an animation
 		if (BMAnimationContextGetCurrent()) {
 			if (!this.initialized) {
 				this._layout = layout || new BMCollectionViewFlowLayout(); 
@@ -378,6 +388,12 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			this.invalidateLayout();
 		}
 	},
+
+	/**
+	 * Set to a transition layout while an animated layout update is in progress. Undefined
+	 * in all other cases.
+	 */
+	_transitionLayout: undefined, // <BMCollectionViewLayout, nullable>
 	
     // MARK: Managed attributes
     
@@ -388,7 +404,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	get frame() { return this._frame; },
 	set frame(frame) {
 		// If this frame is assigned as part of a layout animation, don't perform any changes
-		if (this._layoutAnimator) return Object.getOwnPropertyDescriptor(BMView.prototype, 'frame').set.call(this, frame);
+		if (this._layoutAnimator) {
+			Object.getOwnPropertyDescriptor(BMView.prototype, 'frame').set.call(this, frame);
+			return;
+		}
 
 		const currentFrame = this._frame && this._frame.copy();
 
@@ -747,8 +766,47 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		this._supplementaryViewClasses[args.forReuseIdentifier] = supplementaryViewClass;
 	},
 
-	// @override - BMView
-	initWithDOMNode(node) {
+
+	/**
+	 * Initializes this collection view with the specified DOM node and default properties.
+	 * The collection view will use a `BMCollectionViewFlowLayout` layout object.
+	 * A valid object should be assigned to the `dataSet` property to fully initialize and use this collection view.
+	 * @param node <DOMNode>					The container that the collection view will manage. This should be an empty div element,
+	 * 											otherwise the behaviour of the collection view will be undefined.
+	 * {
+	 *	@param customScroll <Boolean, nullable> Defaults to `NO`. When set to `YES`, collection view will use custom scrolling in 
+	 *											place of regular scrolling. Otherwise, it will use native scrolling. This should only be
+	 *											used with layouts where cell positions depend on the scroll position of collection view.
+	 *											This property cannot be changed after being set in the intializer.
+	 * }
+	 * @return <BMCollectionView>				A collection view.
+	 */
+	initWithDOMNode(node, args) {
+		var customScrollRequired = args && args.customScroll;
+	
+		_BMCollectionViews.set(this, true);
+		
+		this._container = BMJQueryShim.shimWithDOMNode(node);
+		this.layout = new BMCollectionViewFlowLayout();
+		this.cellCache = {};
+		this.retainedCells = [];
+		this.allCells = [];
+		this.supplementaryViewCache = {};
+		
+		this.attributeCache = {};
+		
+		this._selectedIndexPaths = [];
+		
+		this.customScrollRequired = customScrollRequired;
+	
+		this._cellClasses = {};
+		this._supplementaryViewClasses = {};
+	
+		this._measures = {};
+		this._measuredIndexPaths = [];
+	
+		this._cellLayoutQueue = BMViewLayoutQueue.layoutQueue();
+
 		return BMView.prototype.initWithDOMNode.apply(this, arguments);
 	},
 
@@ -787,7 +845,8 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	},
 
     /**
-	 * Should not be invoked manually. It is invoked by collection view to create the initial layout and cells.
+	 * Should not be invoked manually. Invoked by collection view the first time a data set is assigned
+	 * to it to create the initial layout and cells.
 	 */
     _init: function () {
 		// If currently invisible, delay the init
@@ -3417,6 +3476,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			    if (i == event.changedTouches.length) return;
 			}
 
+			if (this.delegate && this.delegate.collectionViewWillFinishInteractiveMovementForCell) {
+				this.delegate.collectionViewWillFinishInteractiveMovementForCell(this, cell, {atIndexPath: cell.indexPath});
+			}
+
 			// Remove the previously added handlers from window
 			window.removeEventListener(touchIdentifier !== undefined ? 'touchmove' : 'mousemove', mousemoveHandler, {capture: YES, passive: NO});
 			window.removeEventListener(touchIdentifier !== undefined ? 'touchend' : 'mouseup', mouseupHandler, {capture: YES, passive: NO});
@@ -3440,10 +3503,6 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			let sourceRect = BMRectMakeWithNodeFrame(draggingShadow);
 			let targetRect = BMRectMakeWithNodeFrame(cell.node);
 
-			if (this.delegate && this.delegate.collectionViewWillFinishInteractiveMovementForCell) {
-				this.delegate.collectionViewWillFinishInteractiveMovementForCell(this, cell, {atIndexPath: cell.indexPath});
-			}
-
 			// Resolve the current dragging operation
 			resolveIsDragging();
 			
@@ -4710,6 +4769,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	    
 	    // Temporarily make the transition layout the current layout
 	    this._layout = transitionLayout;
+		this._transitionLayout = transitionLayout;
 		
 		// Retain all transitioning cells during this change
 		let retainedCells = [];
@@ -4781,6 +4841,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			});
 
 			self._layout = layout;
+			self._transitionLayout = undefined;
 			
 			if (self.iScroll) self.iScroll.refresh();
 		    
@@ -5026,8 +5087,13 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		this._updateSelectionIndexPaths();
 		
 		if (!animated) {
+			this.layout.collectionViewWillStartUpdates(undefined);
+
 			// Instant data set changes are identical to layout invalidations.
 			this.invalidateLayout();
+
+			// Inform the layout that the full data update has finished preparing and all animations were started
+			self.layout.collectionViewDidStartUpdates();
 			
 			// Have the data set refresh the contents of each cell
 			for (var i = 0; i < this.allCells.length; i++) {
@@ -6162,7 +6228,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
  * @return <BMCollectionView>				A collection view.
  */
 BMCollectionView.collectionViewForNode = function (node, args) {
-	let collectionView = BMCollectionViewMakeWithContainer(BMJQueryShim.shimWithDOMNode(node), args);
+	let collectionView = new this().initWithDOMNode(node, args);
 
 	return collectionView;
 }
@@ -6193,35 +6259,7 @@ BMCollectionView.collectionView = function () {
  * @return <BMCollectionView>				A collection view.
  */
 export function BMCollectionViewMakeWithContainer(container, options) {
-	var customScrollRequired = options && options.customScroll;
-	var collectionView = new BMCollectionView();
-
-	_BMCollectionViews.set(collectionView, true);
-	
-	collectionView._container = container;
-	collectionView.layout = new BMCollectionViewFlowLayout();
-	collectionView.cellCache = {};
-	collectionView.retainedCells = [];
-	collectionView.allCells = [];
-	collectionView.supplementaryViewCache = {};
-	
-	collectionView.attributeCache = {};
-	
-	collectionView._selectedIndexPaths = [];
-	
-	collectionView.customScrollRequired = customScrollRequired;
-
-	collectionView._cellClasses = {};
-	collectionView._supplementaryViewClasses = {};
-
-	collectionView._measures = {};
-	collectionView._measuredIndexPaths = [];
-
-	collectionView._cellLayoutQueue = BMViewLayoutQueue.layoutQueue();
-
-	collectionView.initWithDOMNode(container[0]);
-	
-	return collectionView;
+	return new BMCollectionView().initWithDOMNode(container[0], options);
 }
 
 // @endtype

package/build/BMCollectionView/BMCollectionViewFlowLayout.js

@@ -22,20 +22,20 @@ export var BMCollectionViewTableLayoutSupplementaryView = Object.freeze({ // <en
 	/**
 	 * Indicates that this supplementary view is a footer.
 	 */
-	Footer: "Footer", // <enum>
+	Footer: "Footer", // <string>
 	
 	/**
 	 * Indicates that this supplementary view is a header.
 	 */
-	Header: "Header", // <enum>
+	Header: "Header", // <string>
 	
 	/**
 	 * Indicates that this supplementary is an empty content view.
 	 */
-	Empty: "Empty" // <enum>
+	Empty: "Empty" // <string>
 });
 
-// @type
+// @endtype
 
 // @type BMCollectionViewTableLayout extends BMCollectionViewLayout
 
@@ -1394,7 +1394,7 @@ export var BMCollectionViewFlowLayoutOrientation = Object.freeze({ // <enum>
  * As the flow layout only provides supplementary views for section headers and footers and empty data sets just like the table layout,
  * the identifiers used by the table layout are reused in this case.
  */
-export var BMCollectionViewFlowLayoutSupplementaryView = BMCollectionViewTableLayoutSupplementaryView;
+export var BMCollectionViewFlowLayoutSupplementaryView = BMCollectionViewTableLayoutSupplementaryView; // <typeof BMCollectionViewTableLayoutSupplementaryView>
 
 /**
  * The flow layout arranges cells in a horiztonally (TO DO) or vertically scrolling container.
@@ -1758,6 +1758,18 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 			// When using custom cell sizes, the layout will pre-compute the entire layout attributes
 			this.cachedLayout = { sections: [] };
 
+			// If this is invoked as part of a batch or animated layout update, ensure that the new layout
+			// is measured up to at least the current collection view bounds
+			if (this._expectedCellSize && this._copy) {
+				target = target || {};
+				if (target.targetRect) {
+					target.targetRect = target.targetRect.rectByUnionWithRect(this.collectionView.bounds)
+				}
+				else {
+					target.targetRect = this.collectionView.bounds;
+				}
+			}
+
 			/*
 			declare interface BMCollectionViewFlowLayoutCache {
 				availableWidth: number;
@@ -4885,6 +4897,7 @@ BMCollectionViewFlowLayout.prototype = BMExtend(Object.create(BMCollectionViewLa
 		var copy = new BMCollectionViewFlowLayout();
 		
 		copy.cellSize = this.cellSize && this.cellSize.copy();
+		copy.expectedCellSize = this.expectedCellSize && this.expectedCellSize.copy();
 		copy.rowSpacing = this.rowSpacing;
 		
 		copy.showsHeaders = this.showsHeaders;

package/build/BMCoreUI.css

@@ -256,24 +256,24 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMWindow {
+	.BMDarkModeAuto.BMWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 12px 64px;
 		background-color: rgba(255, 255, 255, .6);
 	}
 
-	.BMWindowInactive {
+	.BMDarkModeAuto.BMWindowInactive {
 		background: rgba(70, 70, 70, 1);
 	}
 
-	.BMNonModalWindow {
+	.BMDarkModeAuto.BMNonModalWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 6px 32px;
 	}
 
-	.BMWindow.BMKeyWindow, .BMToolWindow {
+	.BMDarkModeAuto.BMWindow.BMKeyWindow, .BMDarkModeAuto.BMToolWindow {
 		box-shadow: rgba(0, 0, 0, .66) 0px 0px 0px 1px, rgba(0, 0, 0, .66) 0px 12px 64px;
 	}
 
-	.BMWindow::after {
+	.BMDarkModeAuto.BMWindow::after {
 		content: '';
 		position: absolute;
 		pointer-events: none;
@@ -288,7 +288,7 @@
 		box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, .25) inset;
 	}
 
-	.BMWindowDragHandle {
+	.BMDarkModeAuto.BMWindowDragHandle {
 		color: rgba(255, 255, 255, .33);
 	}
 }
@@ -313,7 +313,7 @@
 /* In theory, this would break browsers that support dark mode but not backdrop filter;
    In practice, only Safari supports both. */
 @media (prefers-color-scheme: dark) {
-	.BMWindowContent {
+	.BMDarkModeAuto.BMWindowContent {
 		background-color: rgba(0, 0, 0, .75) !important;
 	}
 }
@@ -323,7 +323,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMWindowBackground {
+	.BMDarkModeAuto.BMWindowBackground {
 		background-color: #1e1e1e !important; /* tw-important */
 	}
 }
@@ -1294,6 +1294,10 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	-webkit-tap-highlight-color: transparent;
 }
 
+.BMMenuItemDisabled.BMMenuItem {
+	color: rgba(0, 0, 0, .4);
+}
+
 .BMLayoutEditorConstraintPopupOption {
 	padding-right: 64px;
 }
@@ -1330,11 +1334,21 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-grow: 1;
 }
 
+.BMMenuItemHint {
+	margin-left: 48px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	padding: 0px 16px;
+
+	opacity: .33;
+}
+
 .BMMenuItemDisclosure {
 	width: 24px;
 	height: 24px;
-
-	margin-left: 48px;
 	
 	font-weight: 600;
 
@@ -1343,6 +1357,12 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	display: none;
+}
+
+.BMMenuItemDisclosure.BMMenuItemDisclosureSubmenu {
+	display: block;
 }
 
 .BMMenuItemDisclosureSubmenu::after {
@@ -1371,7 +1391,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:active, .BMMenuItem.BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
 	background: rgb(0, 128, 255);
 	color: white;
 }
@@ -1381,7 +1401,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
+.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
@@ -1410,7 +1430,11 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .9);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:hover {
+	.BMMenuItem.BMMenuItemDisabled {
+		color: rgba(255, 255, 255, .45);
+	}
+
+	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 		background: transparent;
 		color: white;
 	}
@@ -2528,6 +2552,9 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 .BMPopover {
 	position: absolute;
+
+	/* This is required otherwise the mix-blend-mode on the drop shadow layer doesn't work */
+	z-index: unset !important;
 }
 
 .BMPopoverOverlay {
@@ -2605,7 +2632,7 @@ The drop shadow layer contains the drop shadow effect only.
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMPopoverDropShadowContainer {
+	.BMDarkModeAuto.BMPopoverDropShadowContainer {
 		filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 1)) drop-shadow(0px 12px 64px rgba(0, 0, 0, .66));
 	}
 }
@@ -2642,11 +2669,11 @@ The background layer contains the background.
 }
 
 @media (prefers-color-scheme: dark) {
-	.BMPopoverBackground {
+	.BMDarkModeAuto.BMPopoverBackground {
 		background: transparent;
 	}
 
-	.BMPopoverBackgroundDarkModeContainer {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeContainer {
 		display: block;
 
 		position: absolute;
@@ -2659,7 +2686,7 @@ The background layer contains the background.
 		opacity: .8;
 	}
 
-	.BMPopoverBackgroundDarkModeOutline {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeOutline {
 		background-color: rgb(100, 100, 100);
 
 		position: absolute;
@@ -2670,7 +2697,7 @@ The background layer contains the background.
 		top: 0px;
 	}
 
-	.BMPopoverBackgroundDarkModeFill {
+	.BMDarkModeAuto.BMPopoverBackgroundDarkModeFill {
 		background-color: rgb(40, 40, 40);
 
 		position: absolute;

package/build/BMView/BMMenu.js

@@ -128,12 +128,72 @@ BMMenuItem.prototype = {
         this._CSSClass = cls || '';
     },
 
+    /**
+     * An optional key sequence that may be used to select this menu item via a keyboard shortcut.
+     * Updates to this property do not take effect while a menu displaying this menu item is open.
+     */
+    _keySequence: undefined, // <BMKeySequence, nullable>
+    get keySequence() {
+        return this._keySequence;
+    },
+    set keySequence(sequence) {
+        this._keySequence = sequence;
+    },
+
+    /**
+     * An optional hint HTML text that will be displayed next to the menu item.
+     */
+    _hintHTML: undefined, // <String, nullable>
+    get hintHTML() {
+        return this._hintHTML;
+    },
+    set hintHTML(hint) {
+        this._hintHTML = hint;
+        if (this._node) {
+            const hintContainer = this._node.querySelector('.BMMenuItemHint');
+            if (hintContainer) {
+                hintContainer.innerHTML = hint;
+            }
+        }
+    },
+
     /**
      * The node that represents this menu item, available while its menu
      * is open.
      */
     _node: undefined, // <DOMNode, nullable>
 
+    /**
+     * Defaults to `YES`. Controls whether this menu item is enabled. If this menu
+     * item is not enabled, it can not be highlighted or selected.
+     */
+    _enabled: YES, // <Boolean>
+    get enabled() {
+        return this._enabled;
+    },
+    set enabled(enabled) {
+        if (this._enabled == enabled) {
+            return;
+        }
+
+        // Separators can never be enabled
+        if (this._isSeparator) {
+            return;
+        }
+
+        this._enabled = enabled;
+
+        if (this._node) {
+            /** @type {HTMLElement} */ const node = this._node;
+            if (enabled) {
+                node.classList.remove('BMMenuItemDisabled');
+            }
+            else {
+                node.classList.add('BMMenuItemDisabled');
+            }
+        }
+    },
+
     /**
      * Constructs and returns a menu item with the given name.
      * Optionally, the menu item may have an icon associated with it as well as an
@@ -145,12 +205,13 @@ BMMenuItem.prototype = {
      * 
      *  @param action <void ^ (BMMenuItem), nullable>   If specified, this is a function that will be invoked when this menu item is selected.
      *                                                  This function will receive the selected menu item as a parameter.
+     *  @param enabled <Boolean, nullable>              Defaults to `YES`. Controls whether this item is enabled and can be selected.
      *  @param submenu <BMMenu, nullable>               Optional. If specified, this represents a menu that opens from this menu item.
      *  @param userInfo <AnyObject, nullable>           Optional. If specified, this represents additional arbitrary data attached to this menu item.
      * }
      * @return <BMMenuItem>                             This menu item.
      */
-    initWithName(name, {icon, action, submenu, userInfo} = {}) {
+    initWithName(name, {icon, action, submenu, enabled = true, userInfo} = {}) {
         this._name = name;
         this._icon = icon;
         this._action = action;
@@ -159,8 +220,11 @@ BMMenuItem.prototype = {
 
         if (name.startsWith('---')) {
             this._isSeparator = YES;
+            this._enabled = NO;
         }
 
+        this._enabled = enabled;
+
         return this;
     }
 
@@ -177,6 +241,7 @@ BMMenuItem.prototype = {
  * 
  *  @param action <void ^ (BMMenuItem), nullable>   If specified, this is a function that will be invoked when this menu item is selected.
  *                                                  This function will receive the selected menu item as a parameter.
+ *  @param enabled <Boolean, nullable>              Defaults to `YES`. Controls whether this item is enabled and can be selected.
  *  @param submenu <BMMenu, nullable>               Optional. If specified, this represents a menu that opens from this menu item.
  *  @param userInfo <AnyObject, nullable>           Optional. If specified, this represents additional arbitrary data attached to this menu item.
  * }
@@ -225,7 +290,7 @@ BMMenu.prototype = {
     },
 
     /**
-     * Defaults to 24. The size to use for this menu's icons.
+     * Defaults to `24`. The size to use for this menu's icons.
      */
     _iconSize: 24, // <Number>
     get iconSize() {
@@ -461,6 +526,15 @@ BMMenu.prototype = {
         escape.preventsDefault = YES;
         BMView.registerKeyboardShortcut(escape, {forNode: menuNode});
 
+        // Register a keyboard shortcut for each menu item that specifies one
+        for (const item of this._items) {
+            if (item.keySequence) {
+                const shortcut = BMKeyboardShortcut.keyboardShortcutWithKeySequence(item.keySequence, {target: this, action: '_selectMenuItemWithEvent'});
+                shortcut._menuItem = item;
+                BMView.registerKeyboardShortcut(shortcut, {forNode: menuNode});
+            }
+        }
+
         // The overlay which intercepts clicks outside of the menu
         const menuContainer = container || document.createElement('div');
         if (!container) {
@@ -560,6 +634,12 @@ BMMenu.prototype = {
             itemText.innerText = item.name;
             itemNode.appendChild(itemText);
 
+            // Create the hint container
+            const hint = document.createElement('div');
+            hint.classList.add('BMMenuItemHint');
+            hint.innerHTML = item._hintHTML || '';
+            itemNode.appendChild(hint);
+
             // Create the disclosure container
             const submenuIcon = document.createElement('div');
             submenuIcon.classList.add('BMMenuItemDisclosure');
@@ -568,9 +648,18 @@ BMMenu.prototype = {
                 submenuIcon.classList.add('BMMenuItemDisclosureSubmenu');
             }
             itemNode.appendChild(submenuIcon);
+
+            if (!item._enabled) {
+                itemNode.classList.add('BMMenuItemDisabled');
+            }
     
             // TWhen clicking an item, trigger its action, if it has one
             itemNode.addEventListener('click', event => {
+                // Disabled items can't be clicked
+                if (!item._enabled) {
+                    return;
+                }
+
                 if (item.submenu && this._sourceNodeShadow) {
                     // For touch menus, if the item has a submenu, open it
                     this._openSubmenuForMenuItem(item, {animated: YES, delayEvents: NO, acquireFocus: YES});
@@ -611,6 +700,12 @@ BMMenu.prototype = {
             // When moving the mouse over an item, set the highlight index to it,
             // allowing further keyboard navigation to continute from this item
             itemNode.addEventListener('mouseover', event => {
+                // Disabled items can't be highlighted and can't open submenus
+                if (!item._enabled) {
+                    this.highlightedIndex = -1;
+                    return;
+                }
+
                 if (this._highlightedIndex == index) return;
 
                 // If events should be delayed, don't process this mouseover event
@@ -642,7 +737,8 @@ BMMenu.prototype = {
     _kind: BMMenuKind.Menu,
 
     /**
-     * Animatable. Shows this menu from the given DOM node.
+     * Animatable. Shows this menu from the specified DOM node. The menu will be displayed as a touch menu,
+     * highlighting the source node and de-emphasizing the rest of the document.
      * @param node <DOMNode>                    The node from which to show this menu.
      * {
      *  @param animated <Boolean, nullable>     Defaults to `NO`. If set to `YES`, this change will be animated.
@@ -1315,8 +1411,8 @@ BMMenu.prototype = {
             while (YES) {
                 previousIndex = BMNumberByConstrainingNumberToBounds(previousIndex - 1, 0, this._items.length - 1);
 
-                // If item at the previous index isn't a separator, highlight it
-                if (!this._items[previousIndex]._isSeparator) break;
+                // If item at the previous index isn't a separator or disabled, highlight it
+                if (!this._items[previousIndex]._isSeparator && this._items[previousIndex]._enabled) break;
 
                 // If the start of the items array has been reached and a viable highlightable item hasn't
                 // been found, don't take any action
@@ -1337,8 +1433,8 @@ BMMenu.prototype = {
             while (YES) {
                 nextIndex = BMNumberByConstrainingNumberToBounds(nextIndex + 1, 0, this._items.length - 1);
 
-                // If item at the next index isn't a separator, highlight it
-                if (!this._items[nextIndex]._isSeparator) break;
+                // If item at the next index isn't a separator or disabled, highlight it
+                if (!this._items[nextIndex]._isSeparator && this._items[nextIndex]._enabled) break;
 
                 // If the end of the items array has been reached and a viable highlightable item hasn't
                 // been found, don't take any action
@@ -1375,6 +1471,37 @@ BMMenu.prototype = {
         }
     },
 
+    /**
+     * Invoked when the key sequence for a menu item is pressed.
+     * @param event <KeyboardEvent>                         The event that triggered this action.
+     * {
+     *  @param forKeyboardShortcut <BMKeyboardShortcut>     The keyboard shortcut that was triggered.
+     * }
+     */
+    _selectMenuItemWithEvent(event, {forKeyboardShortcut: shortcut}) {
+        const item = shortcut._menuItem;
+
+        // The item must not be a separator or disabled
+        if (item._isSeparator || !item._enabled) {
+            return;
+        }
+
+        if (!this._node) {
+            return;
+        }
+
+        this._node.inert = true;
+        this._node.style.pointerEvents = 'none';
+
+        // Otherwise highlight the item then send a return key to select it
+        const index = this._items.indexOf(item);
+        this.highlightedIndex = index;
+
+        setTimeout(() => {
+            this.returnPressedWithEvent(event);
+        }, 50);
+    },
+
     /**
      * Invoked when the return or spacebar key is pressed.
      * @param event <KeyboardEvent>     The event that triggered this action.