@dile/ui 3.18.1 → 3.18.2

package/components/floating-menu/src/DileFloatingMenu.js

@@ -1,47 +1,41 @@
 import { LitElement, html, css } from 'lit';
+import { DileOverlay } from '../../../mixins/overlay/index.js';
+import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js';
 import './DileFloatingMenuItem.js';
 
-export class DileFloatingMenu extends LitElement {
+// Distance between the floating button and the overlay.
+const OVERLAY_GAP = 10;
+
+// DileOverlay places the overlay next to the button and keeps it inside the viewport.
+// The opened property is the source of truth: open(), close() and toggle() only change it.
+export class DileFloatingMenu extends DileOverlay(DileCloseOnEscPressed(LitElement)) {
     static styles = [
         css`
             :host {
-                --dile-floating-menu-margin: 1.5rem;
-                --dile-floating-menu-margin-bottom: var(--dile-floating-menu-margin-bottom);
-                --dile-floating-menu-margin-top: var(--dile-floating-menu-margin-top);
-                --dile-floating-menu-margin-left: var(--dile-floating-menu-margin-left);
-                --dile-floating-menu-margin-right: var(--dile-floating-menu-margin-right);
-                --dile-floating-menu-background-color: navy;
-                --dile-floating-menu-background-color-hover: mediumblue;
-                --dile-floating-menu-icon-background-color: aliceblue;
-
+                display: block;
                 position: fixed;
-                overflow: hidden;
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                gap: 1rem;
-                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin));
-                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin));
+                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin, 1.5rem));
+                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin, 1.5rem));
                 z-index: var(--dile-floating-menu-zindex, 2);
             }
+            :host([hidden]) {
+                display: none;
+            }
             :host([bottom]) {
-                bottom: var(--dile-floating-menu-margin-bottom, var(--dile-floating-menu-margin));
-                flex-direction: column-reverse;
-                top: inherit;
+                top: auto;
+                bottom: var(--dile-floating-menu-margin-bottom, var(--dile-floating-menu-margin, 1.5rem));
             }
             :host([right]) {
-                right: var(--dile-floating-menu-margin-right, var(--dile-floating-menu-margin));
-                align-items: flex-end;
-                left: inherit;
+                left: auto;
+                right: var(--dile-floating-menu-margin-right, var(--dile-floating-menu-margin, 1.5rem));
             }
             :host([left]) {
-                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin));
-                right: inherit;
+                left: var(--dile-floating-menu-margin-left, var(--dile-floating-menu-margin, 1.5rem));
+                right: auto;
             }
             :host([top]) {
-                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin));
-                flex-direction: column;
-                bottom: inherit;
+                top: var(--dile-floating-menu-margin-top, var(--dile-floating-menu-margin, 1.5rem));
+                bottom: auto;
             }
 
             :host([opened]) #topline {
@@ -53,47 +47,72 @@ export class DileFloatingMenu extends LitElement {
             }
 
             .line {
-                background-color: var(--dile-floating-menu-icon-background-color);
+                background-color: var(--dile-floating-menu-icon-background-color, aliceblue);
                 width: 24px;
                 height: 2px;
                 transition: transform 0.2s ease-in-out;
             }
 
-            button {
+            #trigger {
+                box-sizing: border-box;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 gap: 4px;
-                background-color: var(--dile-floating-menu-background-color);
-                border-radius: 50%;
-                width: 48px;
-                height: 48px;
+                min-width: var(--dile-floating-menu-button-size, 48px);
+                min-height: var(--dile-floating-menu-button-size, 48px);
+                padding: var(--dile-floating-menu-button-padding, 0);
+                background-color: var(--dile-floating-menu-background-color, navy);
+                color: var(--dile-floating-menu-icon-background-color, aliceblue);
+                --dile-icon-color: var(--dile-floating-menu-icon-background-color, aliceblue);
+                border-radius: var(--dile-floating-menu-button-border-radius, 999px);
                 border: none;
+                font: inherit;
                 cursor: pointer;
-                transition: background-color 1s, gap 0.5s;
+                transition: background-color 0.3s;
             }
 
-            button:hover {
-                background-color: var(--dile-floating-menu-background-color-hover);
+            #trigger:hover {
+                background-color: var(--dile-floating-menu-background-color-hover, mediumblue);
             }
 
-            @keyframes opacity {
-                from {opacity: 0; scale: 90%;}
-                to {opacity: 1; scale:100%;}
+            #trigger:focus-visible {
+                outline: 2px solid var(--dile-floating-menu-background-color, navy);
+                outline-offset: 2px;
             }
 
-            .opened {
-                display: block
-                animation: opacity;
-                animation-duration: 0.5s;
-                background-color: var(--dile-floating-menu-background-color);
-                border-radius: 4px;
-                padding: 24px;
+            #overlay {
+                box-sizing: border-box;
+                display: none;
+                position: fixed;
+                width: var(--dile-floating-menu-overlay-width, max-content);
+                max-width: var(--dile-floating-menu-overlay-max-width, calc(100vw - 25px));
+                max-height: var(--dile-floating-menu-overlay-max-height, calc(100vh - 100px));
+                overflow-y: auto;
+                background-color: var(--dile-floating-menu-overlay-background-color, var(--dile-floating-menu-background-color, navy));
+                color: var(--dile-floating-menu-overlay-color, aliceblue);
+                border-radius: var(--dile-floating-menu-overlay-border-radius, 4px);
+                box-shadow: var(--dile-floating-menu-overlay-box-shadow, 0 0 20px rgba(0, 0, 0, 0.3));
+                padding: var(--dile-floating-menu-overlay-padding, 24px);
+                opacity: 0;
+                transform: translateY(-10px);
+                transition: transform 0.3s ease, opacity 0.3s ease;
             }
 
-            .closed {
-                display: none;
+            :host([bottom]) #overlay {
+                transform: translateY(10px);
+            }
+
+            :host #overlay.opened {
+                opacity: 1;
+                transform: translateY(0);
+            }
+
+            @media (prefers-reduced-motion: reduce) {
+                .line, #trigger, #overlay {
+                    transition: none;
+                }
             }
         `
     ];
@@ -102,28 +121,43 @@ export class DileFloatingMenu extends LitElement {
 
         opened: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         top: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         bottom: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         right: {
             type: Boolean,
-            reflect: true,   
+            reflect: true,
         },
 
         left: {
             type: Boolean,
-            reflect: true,   
-        },   
+            reflect: true,
+        },
+
+        /**
+         * Accessible name of the floating button.
+         */
+        label: {
+            type: String,
+        },
+
+        /**
+         * If true, the menu closes when any link or button inside it is clicked.
+         */
+        closeOnClick: {
+            type: Boolean,
+            attribute: 'close-on-click',
+        },
     }
 
     constructor() {
@@ -133,24 +167,124 @@ export class DileFloatingMenu extends LitElement {
         this.left = false;
         this.right = false;
         this.bottom = false;
+        this.label = 'Menu';
+        this.closeOnClick = false;
+        this.documentClickHandler = this._onDocumentClick.bind(this);
+        this.addEventListener('focusout', this._onFocusOut);
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.documentClickHandler);
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.documentClickHandler);
+        this.opened = false;
+    }
+
+    updated(changedProperties) {
+        if (changedProperties.has('opened')) {
+            if (this.opened) {
+                this._showOverlay();
+            } else if (changedProperties.get('opened')) {
+                this._hideOverlay();
+            }
+        }
     }
 
     render() {
         return html`
-            <button @click="${this.toggle}" type="button">
-                ${this._menuIconTpl}
+            <button
+                id="trigger"
+                type="button"
+                aria-label="${this.label}"
+                aria-expanded="${String(this.opened)}"
+                aria-controls="overlay"
+                @click="${this.toggle}"
+            >
+                <slot name="icon">${this._menuIconTpl}</slot>
             </button>
             ${this._listTpl}
         `;
     }
 
-    toggle(e) {
-        this.opened = !this.opened;
+    toggle() {
+        if (this.opened) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    open() {
+        this.opened = true;
+    }
+
+    async close() {
+        if (!this.opened) {
+            return;
+        }
+        const hadFocus = this.matches(':focus-within');
+        this.opened = false;
+        await this.updateComplete;
+        if (hadFocus) {
+            this.trigger.focus({ preventScroll: true });
+        }
+    }
+
+    _showOverlay() {
+        this.verticalAlign = this.bottom ? 'top' : 'bottom';
+        this.horizontalAlign = this.right ? 'under_right' : 'under_left';
+        // DileOverlay only leaves a gap by itself when the overlay is under the button.
+        this.moveTop = this.bottom ? -OVERLAY_GAP : 0;
+        super.open();
+    }
+
+    _hideOverlay() {
+        // Closed during the opening delay of DileOverlay, where its close() would be ignored.
+        if (this._opening) {
+            this.cancelDelay();
+            this._opening = false;
+            this._overlayClass = 'opened';
+        }
+        super.close();
+    }
+
+    _onDocumentClick(e) {
+        if (this.opened && !e.composedPath().includes(this)) {
+            this.opened = false;
+        }
+    }
+
+    _onFocusOut(e) {
+        // relatedTarget is null when the focus does not go to another element, like when the window loses it.
+        if (this.opened && e.relatedTarget && !this.contains(e.relatedTarget)) {
+            this.opened = false;
+        }
+    }
+
+    _onOverlayClick(e) {
+        const path = e.composedPath();
+        const nodes = path.slice(0, path.indexOf(e.currentTarget));
+        const closer = nodes.find(node =>
+            node instanceof Element &&
+            (node.hasAttribute('data-close') || (this.closeOnClick && (node.tagName === 'A' || node.tagName === 'BUTTON')))
+        );
+        if (closer) {
+            this.close();
+        }
     }
 
     get _listTpl() {
         return html`
-            <div class="${this.opened ? 'opened' : 'closed'}">
+            <div
+                id="overlay"
+                class="${this._overlayClass}"
+                ?inert="${!this.opened}"
+                @click="${this._onOverlayClick}"
+            >
                 <slot name="content-top"></slot>
                 <slot></slot>
                 <slot name="content-bottom"></slot>
@@ -165,4 +299,4 @@ export class DileFloatingMenu extends LitElement {
         `
     }
 
-}
+}

package/components/floating-menu/src/DileFloatingMenuItem.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export class DileFloatingMenuItem extends LitElement {
     static styles = [
@@ -6,8 +7,9 @@ export class DileFloatingMenuItem extends LitElement {
             :host {
                 display: block;
             }
-            
+
             a {
+                display: block;
                 text-decoration: none;
                 color: var(--dile-floating-menu-item-color, aliceblue);
                 margin: var(--dile-floating-menu-item-margin, 0.5rem 0);
@@ -16,6 +18,11 @@ export class DileFloatingMenuItem extends LitElement {
             a:hover {
                 color: var(--dile-floating-menu-item-color-hover, lightblue);
             }
+
+            a:focus-visible {
+                outline: 2px solid currentColor;
+                outline-offset: 2px;
+            }
         `
     ];
 
@@ -23,7 +30,7 @@ export class DileFloatingMenuItem extends LitElement {
 
         href: {
             type: String,
-            reflect: true,   
+            reflect: true,
         },
 
         target: {
@@ -36,7 +43,7 @@ export class DileFloatingMenuItem extends LitElement {
         super();
         this.href = '';
         this.target = '';
-        
+
     }
 
     connectedCallback() {
@@ -46,7 +53,7 @@ export class DileFloatingMenuItem extends LitElement {
 
     render() {
         return html`
-            <a href="${this.href}" target="${this.target}" ><slot></slot></a>        
+            <a href="${ifDefined(this.href || undefined)}" target="${ifDefined(this.target || undefined)}"><slot></slot></a>
         `;
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.18.1",
+  "version": "3.18.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6724d25c93731ed35e6710228a6d0b18e5b6ebb1"
+  "gitHead": "b59afd879d78118d5ea1cdc53e144f1a84628f13"
 }