@neovici/cosmoz-bottom-bar 8.0.1 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-bottom-bar",
-	"version": "8.0.1",
+	"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;