bm-core-ui 2.12.0-beta.6 → 2.12.0-beta.8

package/build/@types/index.d.ts

@@ -10170,7 +10170,7 @@ export class BMMenu {
 	 * @param forKeyboardShortcut      The keyboard shortcut that was triggered.
 	 *     
 	 */
-	private _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
+	protected _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
 
 
 	/**
@@ -11771,6 +11771,19 @@ export class BMCollectionViewLayoutInvalidationContext {
  */
 export class BMCollectionViewTransitionLayout extends BMCollectionViewLayout {
 
+	/**
+	 * When set to `YES` this transition layout will no longer perform updates.
+	 *     
+	 */
+	private _transitionStopped: boolean;
+
+	/**
+	 * Stops the current transition in its tracks, instantly setting the final attributes on all cells.
+	 *     
+	 */
+	private _stopTransition(): void;
+
+
 	/**
 	 * Controls how close to completion the transition is.
 	 *  
@@ -14249,6 +14262,14 @@ export class BMCollectionView<T = any> extends BMView implements BMDragDelegate,
 	setLayout(layout: BMCollectionViewLayout, {animated, completionHandler}?: {animated?: boolean | null | undefined, completionHandler?: (() => void) | null | undefined}): void;
 
 
+	/**
+	 * If a layout transition is currently in progress it is stopped, allowing data updates to
+	 * start without affecting the retained cells.
+	 *  
+	 */
+	private _stopLayoutTransition(): void;
+
+
 	/**
 	 * Invoked internally by CoreUI to perform a batched update of layout properties.
 	 * Using this method requires the layout object used by this collection view to support copying.
@@ -14535,6 +14556,14 @@ export class BMCollectionView<T = any> extends BMView implements BMDragDelegate,
 }
 
 
+/**
+ * Cleans up the changes performed by the current transition.
+ * 	 
+ */
+export function cleanupTransition(): void;
+
+
+
 /**
  * @deprecated - Use the static `collectionViewForNode` factory method.
  * 

package/build/BMCollectionView/BMCollectionView.js

@@ -1218,9 +1218,10 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	    for (var i = 0; i < retainedCellsLength; i++) {
 		    // The retained cells array resizes itself when cells are removed
 		    this.retainedCells[0]._unmanage();
-	    }*/
+	    }
 	    
 	    this.retainedCells = [];
+		*/
 	    
 	    // Reload the layout
 		this._reloadLayout();
@@ -5526,8 +5527,66 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		// regardless of where the new or old positions of cells might be
 		let size = layout.contentSize();
 		this._size = BMSizeMake(Math.max(this._size.width, size.width), Math.max(this._size.height, size.height));
+
+		/**
+		 * Cleans up the changes performed by the current transition.
+		 */
+		function cleanupTransition() {
+			if (self.iScroll) self.iScroll.refresh();
+		    
+		    // Unmanage all outgoing supplementary views
+		    for (var i = 0; i < outgoingSupplementaryViewAttributes.length; i++) {
+			    var attribute = outgoingSupplementaryViewAttributes[i];
+			    var cell = self.supplementaryViewWithIdentifier(attribute.identifier, {atIndexPath: attribute.indexPath});
+			    
+			    if (cell && cell.isManaged) {
+				    cell._unmanage();
+			    }
+			}
+
+			self._applyOverflows();
+
+			// Restore collection and invoke the data completion callbacks unless another animation is in progress
+			if (self._dataUpdatePromise == dataUpdatePromise) {
+				self._collectionEnabled = YES;
+				self.isUpdatingData = NO;
+				
+				self._executeDataCompletionCallbacks();
+			}
+
+			// If the delegate animation options contains a complete handler, invoke it here
+			if (delegateOptions.complete) delegateOptions.complete();
+			
+			// Run the completion handler if it was specified
+			if (options && options.completionHandler) options.completionHandler();
+
+			resolveLayoutUpdate();
+		}
 	    
 	    animationOptions.complete = function () {
+			// If the transition was stopped, don't continue with the remaining changes
+			if (self._layout != transitionLayout) {
+				self._size = size.copy();
+
+				if (self.iScroll) {
+					// Apply the new scroll offset internally to iScroll, if it changed
+					if (oldBounds.origin.x != newBounds.origin.x || oldBounds.origin.y != newBounds.origin.y) {
+						var targetOffset = newBounds.origin.copy();
+						
+						targetOffset.x += self._offscreenBufferSize;
+						targetOffset.y += self._offscreenBufferSize;
+						
+						self.iScroll._translate(-targetOffset.x, -targetOffset.y);
+					}
+				}
+				
+				animationCells.forEach(cell => cell.release());
+				retainedCells.forEach(cell => cell.release());
+
+				cleanupTransition();
+				return;
+			}
+
 			// Request the layout page
 			var attributes = transitionLayout.attributesForElementsInRect();
 			
@@ -5562,35 +5621,7 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 			self._layout = layout;
 			self._transitionLayout = undefined;
 			
-			if (self.iScroll) self.iScroll.refresh();
-		    
-		    // Unmanage all outgoing supplementary views
-		    for (var i = 0; i < outgoingSupplementaryViewAttributes.length; i++) {
-			    var attribute = outgoingSupplementaryViewAttributes[i];
-			    var cell = self.supplementaryViewWithIdentifier(attribute.identifier, {atIndexPath: attribute.indexPath});
-			    
-			    if (cell && cell.isManaged) {
-				    cell._unmanage();
-			    }
-			}
-
-			self._applyOverflows();
-
-			// Restore collection invoke the data completion callbacks unless another animation is in progress
-			if (self._dataUpdatePromise == dataUpdatePromise) {
-				self._collectionEnabled = YES;
-				self.isUpdatingData = NO;
-				
-				self._executeDataCompletionCallbacks();
-			}
-
-			// If the delegate animation options contains a complete handler, invoke it here
-			if (delegateOptions.complete) delegateOptions.complete();
-			
-			// Run the completion handler if it was specified
-			if (options && options.completionHandler) options.completionHandler();
-
-			resolveLayoutUpdate();
+			cleanupTransition();
 	    };
 	    
 		animationOptions.queue = NO;
@@ -5688,9 +5719,16 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 	    
     },
     
-    
-	
-	
+	/**
+	 * If a layout transition is currently in progress it is stopped, allowing data updates to
+	 * start without affecting the retained cells.
+	 */
+    _stopLayoutTransition() {
+		if (this._transitionLayout && this._layout == this._transitionLayout) {
+			this._layout._stopTransition();
+			this._layout = this._layout.targetLayout;
+		}
+	},
 	
 	/************************************* DATA SET UPDATE ************************************/
 
@@ -5860,6 +5898,9 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 		let resolveUpdateData;
 		const dataUpdatePromise = new Promise(function (resolve, reject) {resolveUpdateData = resolve});
 		this._dataUpdatePromise = dataUpdatePromise;
+
+		// Stop any in progress layout updates
+		this._stopLayoutTransition();
 		
 		// Update the selection index paths
 		this._updateSelectionIndexPaths();

package/build/BMCollectionView/BMCollectionViewLayout.js

@@ -910,6 +910,19 @@ export var _BMCollectionViewTransitionLayout = function (attributes, initialSize
 };
 
 _BMCollectionViewTransitionLayout.prototype = BMExtend({}, BMCollectionViewLayout.prototype, {
+
+    /**
+     * When set to `YES` this transition layout will no longer perform updates.
+     */
+    _transitionStopped: NO, // <Boolean>
+
+    /**
+     * Stops the current transition in its tracks, instantly setting the final attributes on all cells.
+     */
+    _stopTransition() {
+		this._applyFinalAttributes();
+        this._transitionStopped = YES;
+    },
 	
 	/**
 	 * Controls how close to completion the transition is.
@@ -917,6 +930,12 @@ _BMCollectionViewTransitionLayout.prototype = BMExtend({}, BMCollectionViewLayou
 	_fraction: 0, // <Number>
 	get fraction() { return this._fraction; },
 	set fraction(fraction) {
+        // If this transition was stopped, don't perform any other changes
+        if (this._transitionStopped) {
+            this._fraction = fraction;
+            return;
+        }
+
 		// If this is no longer attached to a collection view, don't perform any changes
 		if (!this.collectionView) return;
 

package/build/BMCoreUI.css

@@ -1524,21 +1524,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-	height: 44px;
-	line-height: 44px;
-	border-top: 1px solid rgba(0, 0, 0, .1);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:first-child {
-	border-top-width: 0px;
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
-	border-top-color: rgba(0, 0, 0, .2);
-}
-
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
-	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
+	height: 38px;
+	line-height: 38px;
 }
 
 .BMMenuIcon {
@@ -1596,48 +1583,104 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 
 @keyframes BMMenuItemActiveAnimation {
 	from {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	49% {
-		background: transparent;
 		color: rgba(0, 0, 0, .8);
 	}
 
 	50% {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 
 	to {
-		background: rgb(0, 128, 255);
 		color: white;
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
-	background: rgb(0, 128, 255);
+@keyframes BMMenuItemActiveAnimationBackground {
+	from {
+		background: transparent;
+	}
+
+	49% {
+		background: transparent;
+	}
+
+	50% {
+		background: rgb(0, 128, 255);
+	}
+
+	to {
+		background: rgb(0, 128, 255);
+	}
+}
+
+.BMLayoutEditorConstraintPopupOption::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem::before,
+.BMMenuItem::before {
+	content: '';
+
+	position: absolute;
+
+	top: 0;
+	bottom: 0;
+
+	left: 4px;
+	right: 4px;
+
+	border-radius: 5px;
+
+	z-index: -1;
+}
+
+.BMLayoutEditorConstraintPopupOption:hover,
+.BMMenuItem.BMMenuItemHighlighted {
 	color: white;
 }
 
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
+	color: rgba(0, 0, 0, .8);
+}
+
+.BMLayoutEditorConstraintPopupOption:hover::before,
+.BMMenuItem.BMMenuItemHighlighted::before {
+	background: rgb(0, 128, 255);
+}
+
 .BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
 	background: white;
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+.BMLayoutEditorConstraintPopupOption:active,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
 
+.BMLayoutEditorConstraintPopupOption:active::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active::before {
+	background: transparent;
+}
+
+
 .BMMenuItem.BMMenuItemActive {
 	animation: .15s linear BMMenuItemActiveAnimation;
 	animation-fill-mode: both;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
+.BMMenuItem.BMMenuItemActive::before {
+	animation: .15s linear BMMenuItemActiveAnimationBackground;
+	animation-fill-mode: both;
+}
+
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 	animation: none;
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
@@ -1646,7 +1689,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	-webkit-backdrop-filter: brightness(80%);
 }
 
-.BMLayoutEditorConstraintPopupOptionHighlighted, .BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOptionHighlighted::before,
+.BMMenuItemHighlighted::before {
 	background: rgba(0, 128, 255, .5);
 }
 
@@ -1659,46 +1703,46 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .45);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+	.BMLayoutEditorConstraintPopupOption:active,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active {
 		background: transparent;
 		color: white;
 	}
 
-	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
-		border-bottom-color: rgba(255, 255, 255, .1);
-	}
-
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
 	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
 		color: rgba(255, 255, 255, 1);
-	
+	}
+
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive::before,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted::before {
 		backdrop-filter: brightness(110%);
 		-webkit-backdrop-filter: brightness(110%);
 	}
 
 	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted {
-		background: rgba(33, 33, 33, 1);
 		color: rgba(255, 255, 255, .9);
 	}
 
+	.BMMenuSourceNodeShadow.BMMenuItem.BMMenuItemHighlighted::before {
+		background: rgba(33, 33, 33, 1);
+	}
+
 	@keyframes BMMenuItemActiveAnimation {
 		from {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		49% {
-			background: transparent;
 			color: rgba(255, 255, 255, .9);
 		}
 	
 		50% {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	
 		to {
-			background: rgb(0, 128, 255);
 			color: white;
 		}
 	}
@@ -1834,12 +1878,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-.BMMenuTouch > .BMMenuItemsContainer > .BMMenuDivider {
-	margin: 0;
-	height: 3px;
-	background: rgba(0, 0, 0, .1);
-}
-
 .BMLayoutEditorDetailsDividerCell {
 	background: rgba(0, 0, 0, .05);
 }

package/build/BMView/BMMenu.js

@@ -913,8 +913,8 @@ BMMenu.prototype = {
         });
 
         if (!this._supermenu) {
-            // Make the container visible
-            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration, easing}, BMMENU_USE_WEB_ANIMATIONS);
+            // Make the container visible, using a different easing for the opacity so that it doesn't overshoot the 1 limit
+            __BMVelocityAnimate(menuContainer, {opacity: 1}, {duration: duration / 2, easing: 'easeOutQuad'}, BMMENU_USE_WEB_ANIMATIONS);
         }
         else {
             this._supermenu._node.classList.add('BMMenuInactive');
@@ -925,8 +925,9 @@ BMMenu.prototype = {
         itemsContainerNode.style.overflow = 'hidden';
         
         __BMVelocityAnimate(menuNode, {opacity: 1}, {
-            duration,
-            easing
+            duration: duration / 2,
+            // Use a different easing for the opacity so that it doesn't overshoot the 1 limit
+            easing: 'easeOutQuad',
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         __BMVelocityAnimate(menuNode, {scaleX: 1, scaleY: 1, translateZ: 0, translateY: 0, translateX: 0}, {
@@ -935,7 +936,7 @@ BMMenu.prototype = {
             complete: _ => {
                 menuNode.style.pointerEvents = 'all';
                 menuContainer.style.pointerEvents = 'all';
-            }
+            },
         }, BMMENU_USE_WEB_ANIMATIONS);
 
         // Animate each child node in
@@ -1577,6 +1578,7 @@ BMMenu.prototype = {
     },
 
     /**
+     * @protected
      * Invoked when the key sequence for a menu item is pressed.
      * @param event <KeyboardEvent>                         The event that triggered this action.
      * {

package/lib/@types/BMCoreUI.min.d.ts

@@ -10170,7 +10170,7 @@ declare class BMMenu {
 	 * @param forKeyboardShortcut      The keyboard shortcut that was triggered.
 	 *     
 	 */
-	private _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
+	protected _selectMenuItemWithEvent(event: KeyboardEvent, {forKeyboardShortcut}: {forKeyboardShortcut: BMKeyboardShortcut}): void;
 
 
 	/**
@@ -11771,6 +11771,19 @@ declare class BMCollectionViewLayoutInvalidationContext {
  */
 declare class BMCollectionViewTransitionLayout extends BMCollectionViewLayout {
 
+	/**
+	 * When set to `YES` this transition layout will no longer perform updates.
+	 *     
+	 */
+	private _transitionStopped: boolean;
+
+	/**
+	 * Stops the current transition in its tracks, instantly setting the final attributes on all cells.
+	 *     
+	 */
+	private _stopTransition(): void;
+
+
 	/**
 	 * Controls how close to completion the transition is.
 	 *  
@@ -14249,6 +14262,14 @@ declare class BMCollectionView<T = any> extends BMView implements BMDragDelegate
 	setLayout(layout: BMCollectionViewLayout, {animated, completionHandler}?: {animated?: boolean | null | undefined, completionHandler?: (() => void) | null | undefined}): void;
 
 
+	/**
+	 * If a layout transition is currently in progress it is stopped, allowing data updates to
+	 * start without affecting the retained cells.
+	 *  
+	 */
+	private _stopLayoutTransition(): void;
+
+
 	/**
 	 * Invoked internally by CoreUI to perform a batched update of layout properties.
 	 * Using this method requires the layout object used by this collection view to support copying.
@@ -14535,6 +14556,14 @@ declare class BMCollectionView<T = any> extends BMView implements BMDragDelegate
 }
 
 
+/**
+ * Cleans up the changes performed by the current transition.
+ * 	 
+ */
+declare function cleanupTransition(): void;
+
+
+
 /**
  * @deprecated - Use the static `collectionViewForNode` factory method.
  *