bm-core-ui 2.11.5 → 2.11.7

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

@@ -8216,6 +8216,12 @@ export class BMMenu {
 	 */
 	private _node?: DOMNode | null | undefined;
 
+	/**
+	 * The DOM node containing the menu items.
+	 *     
+	 */
+	private _itemsContainerNode?: DOMNode | null | undefined;
+
 	/**
 	 * The container DOM node currently used by this menu
 	 *     
@@ -12834,7 +12840,7 @@ export interface BMCollectionViewDataSet<T = any> {
 	 * @return 					An array of index paths specifying the positions of the items after they have been moved.
 	 * 											The index paths in this array are not required to match either of the lists supplied by
 	 * 											collection view.
-	 *   
+	 *  
 	 */
 	moveItemsFromIndexPaths?(indexPaths: BMIndexPath<T>[], {toIndexPath}: {toIndexPath: BMIndexPath<T>}): BMIndexPath<T>[];
 
@@ -12847,7 +12853,7 @@ export interface BMCollectionViewDataSet<T = any> {
 	 * and remove just some of the items, by changing their internal data structures appropriately.
 	 * The order of the items in the array is guaranteed to be such that the target index paths are in ascending order.
 	 * @param indexPaths 		An array of index paths identifying which items have to be removed.
-	 *   
+	 *  
 	 */
 	removeItemsAtIndexPaths?(indexPaths: BMIndexPath<T>[]): void;
 
@@ -12860,10 +12866,23 @@ export interface BMCollectionViewDataSet<T = any> {
 	 * and add just some of the items, by changing their internal data structures appropriately.
 	 * @param items 					An array of objects to add to the collection view.
 	 * @param toIndexPath 		The starting index path to which the items should be inserted.
-	 *    
+	 *  
 	 */
 	insertItems?(items: any[], {toIndexPath}: {toIndexPath: BMIndexPath<T>}): void;
 
+
+	/**
+	 * This method may be implemented by data set objects that support transferring items to another collection view.
+	 * Data set objects implementing this method are expected to create a copy of the specified item and return it.
+	 * The item is guaranteed to be an object that was returned at some point by the data set when it provided an index path.
+	 * If this method is not implemented, collection view will create a copy of the item by stringifying it and parsing it back
+	 * into an object.
+	 * @param item 						The item whose copy should be created for the transfer.
+	 * @return 							A copy of the specified item.
+	 *  
+	 */
+	copyOfItem?(item: any): any;
+
 }
 
 
@@ -13043,6 +13062,20 @@ export interface BMCollectionViewDataSource<T = any> {
 	 */
 	collectionViewInsertItems?(collectionView: BMCollectionView, items: any[], {toIndexPath}: {toIndexPath: BMIndexPath<T>}): void;
 
+
+	/**
+	 * This method may be implemented by data source objects that support transferring items to another collection view.
+	 * Data source objects implementing this method are expected to create a copy of the specified item and return it.
+	 * The item is guaranteed to be an object that was returned at some point by the data set when it provided an index path.
+	 * If this method is not implemented, collection view will create a copy of the item by stringifying it and parsing it back
+	 * into an object.
+	 * @param collectionView      The collection view from which items are being transferred.
+	 * @param item 						The item whose copy should be created for the transfer.
+	 * @return 							A copy of the specified item.
+	 *  
+	 */
+	collectionViewCopyOfItem?(collectionView: BMCollectionView, item: any): any;
+
 }
 
 
@@ -13831,7 +13864,7 @@ export class BMWindow extends BMView {
 	 * The DOM node in which the window contents should be added.
 	 *  
 	 */
-	readonly content: DOMNode;
+	private _content: DOMNode;
 
 	/**
 	 * A string that is used for when this window is minimized.
@@ -13991,6 +14024,12 @@ export class BMWindow extends BMView {
 	toggleAnimated(animated?: boolean | null | undefined, {completionHandler}?: {completionHandler?: (() => void) | null | undefined}): void;
 
 
+	/**
+	 * When set to `YES`, the anchor node remains hidden while the window is visible.
+	 *  
+	 */
+	private _keepsNodeHidden: boolean;
+
 	/**
 	 * This method is invoked during `bringToFrontAnimated()` to run the animations that will make this window visible.
 	 * Subclasses can override this method to perform custom animations.

package/build/BMCollectionView/BMCollectionView.js

@@ -3580,17 +3580,22 @@ BMCollectionView.prototype = BMExtend(BM_COLLECTION_VIEW_USE_BMVIEW_SUBCLASS ? O
 				// The list of objects will be a copy of the actual objects
 				let dropShadowMap = new Map;
 				let dropItems = this._draggingIndexPaths.map(indexPath => {
-					const newObject = JSON.parse(JSON.stringify(indexPath.object));
-
-					// stringify + parse strips out undefined values, but this can lead to issues
-					// in Thingworx when testing the new object against the data shape
-					for (const key in indexPath.object) {
-						if (typeof indexPath.object[key] === 'undefined') {
-							newObject[key] = undefined;
-						}
+					if (this._dataSet.copyOfItem) {
+						return this._dataSet.copyOfItem(indexPath.object);
 					}
+					else {
+						const newObject = JSON.parse(JSON.stringify(indexPath.object));
 
-					return newObject;
+						// stringify + parse strips out undefined values, but this can lead to issues
+						// in Thingworx when testing the new object against the data shape
+						for (const key in indexPath.object) {
+							if (typeof indexPath.object[key] === 'undefined') {
+								newObject[key] = undefined;
+							}
+						}
+	
+						return newObject;
+					} 
 				});
 				let index = 0;
 
@@ -6423,7 +6428,15 @@ class BMCollectionViewDataSourceAdapter {
 	}
 
 	static adapterWithDataSet(dataSet) {
-		return new this(dataSet);
+		const adapter = new this(dataSet);
+
+		if (dataSet.copyOfItem) {
+			adapter.collectionViewCopyOfItem = function (collectionView, item) {
+				return dataSet.copyOfItem(item);
+			};
+		}
+
+		return adapter;
 	}
 }
 
@@ -6508,7 +6521,15 @@ class BMCollectionViewDataSetAdapter {
 	}
 
 	static adapterWithDataSource(collectionView, dataSource) {
-		return new this(collectionView, dataSource);
+		const adapter = new this(collectionView, dataSource);
+
+		if (dataSource.collectionViewCopyOfItem) {
+			adapter.copyOfItem = function (item) {
+				return dataSource.collectionViewCopyOfItem(adapter._collectionView, item);
+			};
+		}
+
+		return adapter;
 	}
 }
 

package/build/BMCoreUI.css

@@ -95,6 +95,10 @@
 
 /* MARK: BMWindow */
 
+.BMWindowAnchorNodeHidden {
+	visibility: hidden !important;
+}
+
 .BMWindowShowcaseWindow, .BMWindowShowcaseWindow *:not(.BMWindowShowcaseWindowSelector) {
 	pointer-events: none !important;
 }
@@ -1157,12 +1161,6 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 .BMMenu {
 	position: absolute;
 
-	display: flex;
-	flex-direction: column;
-
-	padding-top: 4px;
-	padding-bottom: 4px;
-
 	background-color: rgba(255, 255, 255, .8);
 	box-shadow: 0px 4px 8px rgba(0, 0, 0, .1), 0px 0px 1px 1px rgba(0, 0, 0, .1);
 
@@ -1173,7 +1171,23 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	backdrop-filter: blur(25px);
 	-webkit-backdrop-filter: blur(25px);
 
+	overflow: hidden;
+
+	display: flex;
+	flex-direction: column;
+}
+
+.BMMenu > .BMMenuItemsContainer {
+	display: flex;
+	flex-direction: column;
+
+	padding-top: 4px;
+	padding-bottom: 4px;
+
 	overflow-y: auto;
+
+	width: 100%;
+	height: 100%;
 }
 
 .BMLayoutEditorConstraintPopup::before, .BMMenu::before {
@@ -1218,7 +1232,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 }
 
 /* While a touch menu has a submenu, its menu items should not respond to events */
-.BMMenuTouchSubmenu.BMMenu > .BMMenuItem {
+.BMMenuTouchSubmenu.BMMenu > .BMMenuItemsContainer > .BMMenuItem {
 	pointer-events: none;
 
 	/* Additionally add an opacity transition to the items to be used in an animation */
@@ -1302,21 +1316,21 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	padding-right: 64px;
 }
 
-.BMMenuTouch > .BMMenuItem {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
 	height: 44px;
 	line-height: 44px;
 	border-top: 1px solid rgba(0, 0, 0, .1);
 }
 
-.BMMenuTouch > .BMMenuItem:first-child {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:first-child {
 	border-top-width: 0px;
 }
 
-.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuItem {
 	border-top-color: rgba(0, 0, 0, .2);
 }
 
-.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted + .BMMenuDivider {
 	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, .1) inset;
 }
 
@@ -1395,7 +1409,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	}
 }
 
-.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
+.BMLayoutEditorConstraintPopupOption:hover, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):active, .BMMenuItem.BMMenuItemHighlighted {
 	background: rgb(0, 128, 255);
 	color: white;
 }
@@ -1405,7 +1419,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	color: rgba(0, 0, 0, .8);
 }
 
-.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
 }
@@ -1415,8 +1429,8 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	animation-fill-mode: both;
 }
 
-.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
-.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
 	animation: none;
 	background: transparent;
 	color: rgba(0, 0, 0, .8);
@@ -1438,17 +1452,17 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 		color: rgba(255, 255, 255, .45);
 	}
 
-	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItem:not(.BMMenuItemDisabled):hover {
+	.BMLayoutEditorConstraintPopupOption:active, .BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem:not(.BMMenuItemDisabled):hover {
 		background: transparent;
 		color: white;
 	}
 
-	.BMMenuTouch > .BMMenuItem {
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem {
 		border-bottom-color: rgba(255, 255, 255, .1);
 	}
 
-	.BMMenuTouch > .BMMenuItem.BMMenuItemActive,
-	.BMMenuTouch > .BMMenuItem.BMMenuItemHighlighted {
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemActive,
+	.BMMenuTouch > .BMMenuItemsContainer > .BMMenuItem.BMMenuItemHighlighted {
 		color: rgba(255, 255, 255, 1);
 	
 		backdrop-filter: brightness(110%);
@@ -1613,7 +1627,7 @@ input:not(:checked) + .BMWindowSwitchGutter > .BMWindowSwitchKnob, .BMWindowSwit
 	flex-shrink: 0;
 }
 
-.BMMenuTouch > .BMMenuDivider {
+.BMMenuTouch > .BMMenuItemsContainer > .BMMenuDivider {
 	margin: 0;
 	height: 3px;
 	background: rgba(0, 0, 0, .1);

package/build/BMView/BMMenu.js

@@ -346,6 +346,11 @@ BMMenu.prototype = {
      */
     _node: undefined, // <DOMNode, nullable>
 
+    /**
+     * The DOM node containing the menu items.
+     */
+    _itemsContainerNode: undefined, // <DOMNode, nullable>
+
     /**
      * The container DOM node currently used by this menu
      */
@@ -413,9 +418,15 @@ BMMenu.prototype = {
                 }
 
                 // And add it to the newly highlighted item
-                const nextHighlightedItem = this._node.children[index];
+                const nextHighlightedItem = this._itemsContainerNode.children[index];
                 if (nextHighlightedItem) {
                     nextHighlightedItem.classList.add('BMMenuItemHighlighted');
+                    if (nextHighlightedItem.scrollIntoViewIfNeeded) {
+                        nextHighlightedItem.scrollIntoViewIfNeeded();
+                    }
+                    else {
+                        nextHighlightedItem.scrollIntoView();
+                    }
                 }
             }
 
@@ -488,6 +499,11 @@ BMMenu.prototype = {
         menuNode.className = this._CSSClass ? `BMMenu ${this._CSSClass}` : 'BMMenu';
         this._node = menuNode;
 
+        const itemContainerNode = document.createElement('div');
+        itemContainerNode.className = 'BMMenuItemsContainer';
+        this._itemsContainerNode = itemContainerNode;
+        menuNode.appendChild(itemContainerNode);
+
         // When opening the menu, reset the highlight index
         this._highlightedIndex = -1;
 
@@ -608,7 +624,7 @@ BMMenu.prototype = {
             if (item.name.startsWith('---')) {
                 const itemNode = document.createElement('div');
                 itemNode.className = 'BMMenuDivider';
-                this._node.appendChild(itemNode);
+                this._itemsContainerNode.appendChild(itemNode);
                 return;
             }
 
@@ -727,7 +743,7 @@ BMMenu.prototype = {
                 }
             });
 
-            this._node.appendChild(itemNode);
+            this._itemsContainerNode.appendChild(itemNode);
         });
     },
 
@@ -772,6 +788,7 @@ BMMenu.prototype = {
         this._renderMenu();
 
         const menuNode = this._node;
+        const itemsContainerNode = this._itemsContainerNode;
         const menuContainer = this._containerNode;
         if (!this._supermenu) {
             document.body.appendChild(menuContainer);
@@ -860,6 +877,8 @@ BMMenu.prototype = {
             menuNode.style.transformOrigin = '50% 0%';
         }
 
+        this._kind = kind;
+
         const point = BMPointMake(Math.max(sourceRectScaled.origin.x + horizontalDisplacement, 8), sourceRectScaled.bottom + _BMMenuSpacingToNode + displacement);
         BMCopyProperties(menuNode.style, {left: point.x + 'px', top: point.y + 'px'});
 
@@ -889,8 +908,14 @@ BMMenu.prototype = {
         }
 
         // Make the menu expand
-        menuNode.style.overflow = 'hidden';
-        __BMVelocityAnimate(menuNode, {scaleX: 1, scaleY: 1, opacity: 1, translateZ: 0, translateY: 0, translateX: 0}, {
+        itemsContainerNode.style.overflow = 'hidden';
+        
+        __BMVelocityAnimate(menuNode, {opacity: 1}, {
+            duration,
+            easing
+        }, BMMENU_USE_WEB_ANIMATIONS);
+
+        __BMVelocityAnimate(menuNode, {scaleX: 1, scaleY: 1, translateZ: 0, translateY: 0, translateX: 0}, {
             duration,
             easing,
             complete: _ => {
@@ -901,17 +926,19 @@ BMMenu.prototype = {
 
         // Animate each child node in
         let delay = 50;
-        let delayIncrement = Math.min(16, 100 / menuNode.childNodes.length);
+        let delayIncrement = Math.min(16, 150 / itemsContainerNode.childNodes.length);
         
-        for (let i = 0; i < menuNode.childNodes.length; i++) {
-            const child = menuNode.childNodes[i];
+        for (let i = 0; i < itemsContainerNode.childNodes.length; i++) {
+            const child = itemsContainerNode.childNodes[i];
             BMHook(child, {translateY: '16px', translateZ: 0, opacity: 0});
             __BMVelocityAnimate(child, {translateY: '0px', translateZ: 0, opacity: 1}, {
                 duration: 100,
                 easing: 'easeOutQuad',
                 delay: delay,
-                complete: i == menuNode.childNodes.length - 1 ? () => {
-                    menuNode.style.overflow = '';
+                complete: i == itemsContainerNode.childNodes.length - 1 ? () => {
+                    if (this._node == menuNode) {
+                        itemsContainerNode.style.overflow = '';
+                    }
                 } : undefined,
             }, BMMENU_USE_WEB_ANIMATIONS);
             delay += delayIncrement;
@@ -973,11 +1000,14 @@ BMMenu.prototype = {
         this._renderMenu();
 
         const menuNode = this._node;
+        const itemsContainerNode = this._itemsContainerNode;
         const menuContainer = this._containerNode;
 
+        this._kind = kind;
+
         // Prepare the initial state of the animation
         BMHook(menuNode, {
-            scaleX: kind == BMMenuKind.PullDownMenu ? .5 : .75, 
+            scaleX: kind == BMMenuKind.PullDownMenu ? 1 : .75, 
             scaleY: kind == BMMenuKind.PullDownMenu ? .5 : .75, 
             opacity: 0
         });
@@ -990,11 +1020,12 @@ BMMenu.prototype = {
         const height = menuNode.offsetHeight;
         const width = menuNode.offsetWidth;
         const metrics = window.getComputedStyle(menuNode);
+        const containerMetrics = window.getComputedStyle(itemsContainerNode);
 
         // The paddings are used to adjust the menu's position so that the first
         // or last menu item appears directly on the pointer's position
-        const paddingTop = parseInt(metrics.paddingTop, 10) || 0;
-        const paddingBottom = parseInt(metrics.paddingBottom, 10) || 0;
+        const paddingTop = (parseInt(metrics.paddingTop, 10) || 0) + (parseInt(containerMetrics.paddingTop, 10) || 0);
+        const paddingBottom = (parseInt(metrics.paddingBottom, 10) || 0) + (parseInt(containerMetrics.paddingBottom, 10) || 0);
 
         // The transform origins will be adjusted based on which direction the menu opens in
         let transformOriginX = '0%';
@@ -1019,7 +1050,7 @@ BMMenu.prototype = {
                 transformOriginX = '100%';
 
                 menuNode.style.maxWidth = rect.origin.x + 'px';
-                point.x = rect.origin.x - width;
+                point.x = Math.max(rect.origin.x - width, 0);
             }
             else {
                 menuNode.style.maxWidth = (window.innerWidth - point.x) + 'px';
@@ -1045,7 +1076,7 @@ BMMenu.prototype = {
         menuNode.style.top = point.y + 'px';
 
         // Animate the menu in
-        menuNode.style.overflow = 'hidden';
+        itemsContainerNode.style.overflow = 'hidden';
         (window.Velocity || $.Velocity).animate(menuNode, {scaleX: 1, scaleY: 1, opacity: 1, translateZ: 0}, {
             duration: 200,
             easing: 'easeOutQuad',
@@ -1057,17 +1088,19 @@ BMMenu.prototype = {
 
         // Animate each menu item in
         let delay = 0;
-        let delayIncrement = Math.min(16, 100 / menuNode.childNodes.length);
+        let delayIncrement = Math.min(16, 150 / itemsContainerNode.childNodes.length);
 
-        for (let i = 0; i < menuNode.childNodes.length; i++) {
-            const child = menuNode.childNodes[i];
+        for (let i = 0; i < itemsContainerNode.childNodes.length; i++) {
+            const child = itemsContainerNode.childNodes[i];
             BMHook(child, {translateY: '16px', translateZ: 0, opacity: 0});
             (window.Velocity || $.Velocity).animate(child, {translateY: '0px', translateZ: 0, opacity: 1}, {
                 duration: 100,
                 easing: 'easeOutQuad',
                 delay: delay,
-                complete: i == menuNode.childNodes.length - 1 ? () => {
-                    menuNode.style.overflow = '';
+                complete: i == itemsContainerNode.childNodes.length - 1 ? () => {
+                    if (this._node == menuNode) {
+                        itemsContainerNode.style.overflow = '';
+                    }
                 } : undefined,
             });
             delay += delayIncrement;
@@ -1344,7 +1377,7 @@ BMMenu.prototype = {
 
         // Delay the actual menu node closing animation to allow time
         // for the menu items to run their animations
-        let delay = this._node.childNodes.length * 16;
+        let delay = Math.min(this._itemsContainerNode.childNodes.length * 16, 150);
         delay = (delay < 0 ? 0 : delay);
 
         // If an item was clicked, further delay closing to allow the selection animation to play
@@ -1357,6 +1390,7 @@ BMMenu.prototype = {
         const sourceNodeShadow = this._sourceNodeShadow;
         const containerNode = this._containerNode;
         const node = this._node;
+        const itemsContainerNode = this._itemsContainerNode;
         const sourceNode = this._sourceNode;
 
         this._sourceNode = undefined;
@@ -1387,7 +1421,7 @@ BMMenu.prototype = {
 
         this._isSupermenuClosing = NO;
 
-        this._node.style.pointerEvents = 'none';
+        itemsContainerNode.style.overflow = 'hidden';
 
         __BMVelocityAnimate(this._node, {
             scaleX: this._kind == BMMenuKind.PullDownMenu ? 1 : scale, 
@@ -1425,18 +1459,20 @@ BMMenu.prototype = {
             // if an item was selected
             delay = 200;
         }
-        for (let i = this._node.childNodes.length - 1; i >= 0; i--) {
-            let child = this._node.childNodes[i];
+        const delayIncrement = Math.min(16, 150 / itemsContainerNode.childNodes.length);
+        for (let i = itemsContainerNode.childNodes.length - 1; i >= 0; i--) {
+            let child = itemsContainerNode.childNodes[i];
             __BMVelocityAnimate(child, {translateY: '16px', translateZ: 0, opacity: 0}, {
                 duration: 100,
                 easing: 'easeInQuad',
                 delay: delay
             }, BMMENU_USE_WEB_ANIMATIONS);
-            delay += 16;
+            delay += delayIncrement;
         }
 
         this._node = undefined;
         this._containerNode = undefined;
+        this._itemsContainerNode = undefined;
     },
 
     /**