@neovici/cosmoz-bottom-bar 8.0.0 → 8.1.0

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

@@ -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": "8.0.0",
+	"version": "8.1.0",
 	"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",

package/src/cosmoz-bottom-bar-next.js

@@ -5,7 +5,7 @@ import { component, useLayoutEffect } from '@pionjs/pion';
 import { useHost } from '@neovici/cosmoz-utils/hooks/use-host';
 import { style } from './cosmoz-bottom-bar-next.style.js';
 import { toggleSize } from '@neovici/cosmoz-collapse/toggle';
-import { sheet } from '@neovici/cosmoz-utils';
+import { useActivity } from '@neovici/cosmoz-utils/keybindings/use-activity';
 import '@neovici/cosmoz-dropdown';
 
 const BOTTOM_BAR_TOOLBAR_SLOT = 'bottom-bar-toolbar';
@@ -120,6 +120,20 @@ const _layoutActions = (host, maxToolbarItems) => {
 	host.toggleAttribute('has-menu-items', menuElements.length > 0);
 };
 
+export const openMenu = Symbol('openMenu');
+
+const openActionsMenu = (host) => {
+	const dropdown = host.shadowRoot.querySelector('#dropdown');
+
+	if (dropdown.hasAttribute('hidden')) return;
+
+	//TODO: Clean up when open function is implemented for cosmoz-dropdown-menu
+	dropdown.shadowRoot
+		.querySelector('cosmoz-dropdown')
+		.shadowRoot.getElementById('dropdownButton')
+		.click();
+};
+
 /**
  * `<cosmoz-bottom-bar>` is a horizontal responsive bottom toolbar containing items that
  * can be used for actions.
@@ -143,6 +157,16 @@ const _layoutActions = (host, maxToolbarItems) => {
 const CosmozBottomBar = ({ active = false, maxToolbarItems = 1 }) => {
 	const host = useHost();
 
+	useActivity(
+		{
+			activity: openMenu,
+			callback: () => openActionsMenu(host),
+			check: () => host.active && !host.hasAttribute('hide-actions'),
+			element: () => host.shadowRoot.querySelector('#dropdown'),
+		},
+		[host.active],
+	);
+
 	const toggle = toggleSize('height');
 
 	useLayoutEffect(() => {
@@ -154,7 +178,7 @@ const CosmozBottomBar = ({ active = false, maxToolbarItems = 1 }) => {
 	};
 
 	return html`<div id="bar" part="bar">
-			<div id="info"><slot name="info"></slot></div>
+			<div id="info" part="info"><slot name="info"></slot></div>
 			<slot
 				id="bottomBarToolbar"
 				name="bottom-bar-toolbar"
@@ -203,6 +227,6 @@ customElements.define(
 	'cosmoz-bottom-bar-next',
 	component(CosmozBottomBar, {
 		observedAttributes: ['active'],
-		styleSheets: [sheet(style)],
+		styleSheets: [style],
 	}),
 );

package/src/cosmoz-bottom-bar-next.style.js

@@ -17,6 +17,7 @@ export const style = css`
 			rgba(230, 230, 230, 0.8)
 		);
 		box-shadow: var(--cosmoz-bottom-bar-shadow, none);
+		z-index: 1;
 
 		--cosmoz-dropdown-anchor-spacing: 12px 6px;
 		--paper-button: {
@@ -50,7 +51,7 @@ export const style = css`
 		margin-right: auto;
 		white-space: nowrap;
 	}
-	#bottomBarToolbar::slotted(:not(slot)) {
+	#bottomBarToolbar::slotted(:not(slot):not([unstyled])) {
 		margin: 0 0.29em;
 		min-width: 40px;
 		min-height: 40px;