@neovici/cosmoz-bottom-bar 7.5.1 → 8.0.1

package/cosmoz-bottom-bar.html.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import '@neovici/cosmoz-dropdown';
 import { html } from '@polymer/polymer/lib/utils/html-tag';
 

package/cosmoz-bottom-bar.js

@@ -8,7 +8,6 @@ import { timeOut } from '@polymer/polymer/lib/utils/async';
 import { html } from 'lit-html';
 import { hauntedPolymer } from '@neovici/cosmoz-utils';
 import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
-import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 import template from './cosmoz-bottom-bar.html.js';
 
 const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar',
@@ -188,7 +187,8 @@ class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 			},
 
 			topPlacement: {
-				value: ['top-right', ...defaultPlacement],
+				value: 'top-end',
+				type: String,
 			},
 		};
 	}
@@ -238,7 +238,6 @@ class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 		[...this._nodeObservers, this._hiddenMutationObserver].forEach((e) =>
 			e.disconnect(e),
 		);
-		this._layoutDebouncer?.cancel();
 		this._resizeObserver.unobserve(this);
 	}
 
@@ -334,17 +333,6 @@ class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 		];
 	}
 
-	_distribute(hostWidth) {
-		const elements = this._getElements();
-
-		const tooNarrow = hostWidth <= 480,
-			toolbarElements = elements.slice(0, tooNarrow ? 0 : this.maxToolbarItems),
-			menuElements = elements.slice(toolbarElements.length);
-		toolbarElements.forEach((el) => this._moveElement(el, true));
-		menuElements.forEach((el) => this._moveElement(el));
-		this._setHasMenuItems(menuElements.length > 0);
-	}
-
 	/**
 	 * Layout the actions available as buttons or menu items
 	 *
@@ -375,7 +363,11 @@ class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 			return this._setHasMenuItems(false);
 		}
 
-		this._distribute(this.getBoundingClientRect().width);
+		const toolbarElements = elements.slice(0, this.maxToolbarItems),
+			menuElements = elements.slice(toolbarElements.length);
+		toolbarElements.forEach((el) => this._moveElement(el, true));
+		menuElements.forEach((el) => this._moveElement(el));
+		this._setHasMenuItems(menuElements.length > 0);
 	}
 
 	_moveElement(element, toToolbar) {
@@ -399,7 +391,6 @@ class CosmozBottomBar extends hauntedPolymer(useBottomBar)(PolymerElement) {
 			this._matchHeightElement,
 			this.barHeight,
 		);
-		this._distribute(entry.contentRect?.width);
 	}
 
 	_showHideBottomBar(visible) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "7.5.1",
+	"version": "8.0.1",
 	"description": "A responsive bottom-bar that can house buttons/actions and a menu for the buttons that won't fit the available width.",
 	"keywords": [
 		"polymer",
@@ -60,7 +60,7 @@
 	},
 	"dependencies": {
 		"@neovici/cosmoz-collapse": "^1.5.0",
-		"@neovici/cosmoz-dropdown": "^4.0.0",
+		"@neovici/cosmoz-dropdown": "^4.0.0 || ^5.0.0",
 		"@neovici/cosmoz-utils": "^6.13.1",
 		"@pionjs/pion": "^2.5.2",
 		"@polymer/polymer": "^3.3.0",
@@ -86,12 +86,13 @@
 		"@web/storybook-builder": "^0.1.9",
 		"@web/storybook-framework-web-components": "^0.1.1",
 		"@webcomponents/webcomponentsjs": "^2.5.0",
-		"esbuild": "^0.23.0",
+		"esbuild": "^0.24.0",
+		"eslint": "^8.57.1",
 		"http-server": "^14.1.1",
 		"husky": "^9.1.1",
 		"rollup-plugin-esbuild": "^6.1.1",
 		"semantic-release": "^24.0.0",
-		"sinon": "^18.0.0",
+		"sinon": "^19.0.0",
 		"storybook": "^7.6.17",
 		"typescript": "^5.0.0"
 	}