@operato/popup 0.2.35 → 0.2.42

package/src/ox-popup-menuitem.ts

@@ -1,10 +1,10 @@
-import { LitElement, PropertyValues, css, html } from 'lit'
+import { css, html, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 
-import { PopupMenu } from './ox-popup-menu'
+import { OxPopupMenu } from './ox-popup-menu'
 
 @customElement('ox-popup-menuitem')
-export class PopupMenuItem extends LitElement {
+export class OxPopupMenuItem extends LitElement {
   static styles = [
     css`
       :host {
@@ -52,7 +52,7 @@ export class PopupMenuItem extends LitElement {
   @property({ type: Boolean }) active: boolean = false
   @property({ type: String }) label!: string
 
-  @state() _submenu?: PopupMenu
+  @state() _submenu?: OxPopupMenu
 
   render() {
     return html`
@@ -73,26 +73,26 @@ export class PopupMenuItem extends LitElement {
     this.addEventListener('click', this._onclick)
   }
 
-  protected _onclick: (e: MouseEvent) => void = function (this: PopupMenuItem, e: MouseEvent) {
+  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenuItem, e: MouseEvent) {
     if (!this._submenu) {
       return
     }
 
     e.stopPropagation()
 
-    const parent = this.closest('ox-popup-menu') as PopupMenu
+    const parent = this.closest('ox-popup-menu') as OxPopupMenu
     if (parent) {
       parent.setActive(this)
     }
 
-    this.dispatchEvent(new CustomEvent('selected'))
+    this.dispatchEvent(new CustomEvent('select'))
 
     requestAnimationFrame(() => {
       this.expand(false)
     })
   }.bind(this)
 
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: PopupMenuItem, e: KeyboardEvent) {
+  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenuItem, e: KeyboardEvent) {
     switch (e.key) {
       case 'Right':
       case 'ArrowRight':
@@ -115,8 +115,8 @@ export class PopupMenuItem extends LitElement {
     }
   }.bind(this)
 
-  protected _onslotchange: (e: Event) => void = function (this: PopupMenuItem, e: Event) {
-    this._submenu = this.querySelector('ox-popup-menu') as PopupMenu
+  protected _onslotchange: (e: Event) => void = function (this: OxPopupMenuItem, e: Event) {
+    this._submenu = this.querySelector('ox-popup-menu') as OxPopupMenu
   }.bind(this)
 
   updated(changes: PropertyValues<this>) {
@@ -139,7 +139,7 @@ export class PopupMenuItem extends LitElement {
     }
 
     const top = 0
-    const left = this.offsetWidth + 8
+    const left = this.clientWidth
     this._submenu.open({ top, left, silent })
   }
 

package/src/ox-popup.ts

@@ -1,17 +1,21 @@
 import { LitElement, css, html } from 'lit'
 import { customElement, state } from 'lit/decorators.js'
 
+import { ScrollbarStyles } from '@operato/styles'
 import { render } from 'lit-html'
 
 @customElement('ox-popup')
-export class Popup extends LitElement {
+export class OxPopup extends LitElement {
   static styles = [
+    ScrollbarStyles,
     css`
       :host {
         position: absolute;
         display: none;
         background-color: white;
         z-index: 100;
+        box-sizing: border-box;
+        min-width: fit-content;
       }
 
       :host([active]) {
@@ -30,7 +34,7 @@ export class Popup extends LitElement {
     return html` <slot> </slot> `
   }
 
-  protected _onfocusout: (e: FocusEvent) => void = function (this: Popup, e: FocusEvent) {
+  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopup, e: FocusEvent) {
     const to = e.relatedTarget as HTMLElement
 
     if (!this.contains(to)) {
@@ -40,7 +44,7 @@ export class Popup extends LitElement {
     }
   }.bind(this)
 
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: Popup, e: KeyboardEvent) {
+  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {
     e.stopPropagation()
 
     switch (e.key) {
@@ -51,24 +55,24 @@ export class Popup extends LitElement {
     }
   }.bind(this)
 
-  protected _onkeyup: (e: KeyboardEvent) => void = function (this: Popup, e: KeyboardEvent) {
+  protected _onkeyup: (e: KeyboardEvent) => void = function (this: OxPopup, e: KeyboardEvent) {
     e.stopPropagation()
   }.bind(this)
 
-  protected _onclick: (e: MouseEvent) => void = function (this: Popup, e: MouseEvent) {
+  protected _onclick: (e: MouseEvent) => void = function (this: OxPopup, e: MouseEvent) {
     e.stopPropagation()
   }.bind(this)
 
-  protected _onclose: (e: Event) => void = function (this: Popup, e: Event) {
+  protected _onclose: (e: Event) => void = function (this: OxPopup, e: Event) {
     this.close()
   }.bind(this)
 
-  protected _oncollapse: (e: Event) => void = function (this: Popup, e: Event) {
+  protected _oncollapse: (e: Event) => void = function (this: OxPopup, e: Event) {
     e.stopPropagation()
     this.close()
   }.bind(this)
 
-  protected _onwindowblur: (e: Event) => void = function (this: Popup, e: Event) {
+  protected _onwindowblur: (e: Event) => void = function (this: OxPopup, e: Event) {
     // @ts-ignore for debug
     !window.POPUP_DEBUG && this.close()
   }.bind(this)
@@ -83,9 +87,6 @@ export class Popup extends LitElement {
     this.addEventListener('ox-close', this._onclose)
     this.addEventListener('ox-collapse', this._oncollapse)
 
-    /* When the window is out of focus, all pop-ups should disappear. */
-    window.addEventListener('blur', this._onwindowblur)
-
     this.setAttribute('tabindex', '0') // make this element focusable
     this.guaranteeFocus()
   }
@@ -109,33 +110,52 @@ export class Popup extends LitElement {
     template,
     top,
     left,
+    right,
+    bottom,
     parent
   }: {
     template: unknown
-    top: number
-    left: number
+    top?: number
+    left?: number
+    right?: number
+    bottom?: number
     parent?: Element | null
   }) {
     const owner = parent || document.body
-    const target = document.createElement('ox-popup') as Popup
-    render(template, target)
+    const target = document.createElement('ox-popup') as OxPopup
 
-    target.style.left = `${left}px`
-    target.style.top = `${top}px`
-
-    target.setAttribute('active', '')
+    render(template, target)
 
     target._parent = owner
     owner.appendChild(target)
+
+    target.open({ top, left, right, bottom })
   }
 
-  open({ left = 0, top = 0, silent = false }: { left?: number; top?: number; silent?: boolean }) {
-    this.style.left = `${left}px`
-    this.style.top = `${top}px`
+  open({
+    left,
+    top,
+    right,
+    bottom,
+    silent = false
+  }: {
+    left?: number
+    top?: number
+    right?: number
+    bottom?: number
+    silent?: boolean
+  }) {
+    if (left !== undefined) this.style.left = `${left}px`
+    if (top !== undefined) this.style.top = `${top}px`
+    if (right !== undefined) this.style.right = `${right}px`
+    if (bottom !== undefined) this.style.bottom = `${bottom}px`
 
     this.setAttribute('active', '')
 
     !silent && this.guaranteeFocus()
+
+    /* When the window is out of focus, all pop-ups should disappear. */
+    window.addEventListener('blur', this._onwindowblur)
   }
 
   guaranteeFocus() {
@@ -153,8 +173,10 @@ export class Popup extends LitElement {
   close() {
     this.removeAttribute('active')
 
+    window.removeEventListener('blur', this._onwindowblur)
+
     if (this._parent) {
-      /* this case is when the popup is opened by Popup.open(...) */
+      /* this case is when the popup is opened by OxPopup.open(...) */
       this.removeEventListener('focusout', this._onfocusout)
       this.removeEventListener('keydown', this._onkeydown)
       this.removeEventListener('keyup', this._onkeyup)
@@ -162,8 +184,6 @@ export class Popup extends LitElement {
       this.removeEventListener('ox-close', this._onclose)
       this.removeEventListener('ox-collapse', this._oncollapse)
 
-      window.removeEventListener('blur', this._onwindowblur)
-
       this._parent.removeChild(this)
       delete this._parent
     }

package/test/ox-popup-menu.test.ts

@@ -1,34 +1,33 @@
 import '../src/ox-popup-menu'
 
-import { html } from 'lit'
-
 import { expect, fixture } from '@open-wc/testing'
 
-import { PopupMenu } from '../src/ox-popup-menu'
+import { OxPopupMenu } from '../src/ox-popup-menu'
+import { html } from 'lit'
 
-describe('PopupMenu', () => {
+describe('OxPopupMenu', () => {
   it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture<PopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
+    const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
 
     expect(el.title).to.equal('Hey there')
     // expect(el.counter).to.equal(5)
   })
 
   it('increases the counter on button click', async () => {
-    const el = await fixture<PopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
+    const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
     el.shadowRoot!.querySelector('button')!.click()
 
     // expect(el.counter).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {
-    const el = await fixture<PopupMenu>(html`<ox-popup-menu title="attribute title"></ox-popup-menu>`)
+    const el = await fixture<OxPopupMenu>(html`<ox-popup-menu title="attribute title"></ox-popup-menu>`)
 
     expect(el.title).to.equal('attribute title')
   })
 
   it('passes the a11y audit', async () => {
-    const el = await fixture<PopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
+    const el = await fixture<OxPopupMenu>(html`<ox-popup-menu></ox-popup-menu>`)
 
     await expect(el).shadowDom.to.be.accessible()
   })

package/test/ox-popup.test.ts

@@ -1,34 +1,33 @@
 import '../src/ox-popup'
 
-import { html } from 'lit'
-
 import { expect, fixture } from '@open-wc/testing'
 
-import { Popup } from '../src/ox-popup'
+import { OxPopup } from '../src/ox-popup'
+import { html } from 'lit'
 
 describe('Popup', () => {
   it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture<Popup>(html`<ox-popup></ox-popup>`)
+    const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)
 
     expect(el.title).to.equal('Hey there')
     // expect(el.counter).to.equal(5)
   })
 
   it('increases the counter on button click', async () => {
-    const el = await fixture<Popup>(html`<ox-popup></ox-popup>`)
+    const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)
     el.shadowRoot!.querySelector('button')!.click()
 
     // expect(el.counter).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {
-    const el = await fixture<Popup>(html`<ox-popup title="attribute title"></ox-popup>`)
+    const el = await fixture<OxPopup>(html`<ox-popup title="attribute title"></ox-popup>`)
 
     expect(el.title).to.equal('attribute title')
   })
 
   it('passes the a11y audit', async () => {
-    const el = await fixture<Popup>(html`<ox-popup></ox-popup>`)
+    const el = await fixture<OxPopup>(html`<ox-popup></ox-popup>`)
 
     await expect(el).shadowDom.to.be.accessible()
   })