@operato/popup 0.2.33 → 0.2.38

package/src/ox-popup-list.ts

@@ -1,24 +1,30 @@
 import { PropertyValues, css, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 
-import { Popup } from './ox-popup'
+import { OxPopup } from './ox-popup'
 import { render } from 'lit-html'
 
-function focusClosest(element: HTMLElement) {
-  /* Find the closest focusable element. */
+function guaranteeFocus(element: HTMLElement) {
+  // 1. 옵션 엘리먼트의 하위 첫번째 focusible 엘리먼트에 focus 기회를 준다.
+  const focusible = element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+
+  if (focusible) {
+    ;(focusible as HTMLElement).focus()
+    return
+  }
+
+  // 2. 자신을 포함해서 가장 가까운 부모에게 focus 기회를 준다.
   const closest = element.closest(
     'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
   ) as HTMLElement
 
   closest?.focus()
-
-  return closest
 }
 
 @customElement('ox-popup-list')
-export class PopupList extends Popup {
+export class OxPopupList extends OxPopup {
   static styles = [
-    ...Popup.styles,
+    ...OxPopup.styles,
     css`
       :host {
         display: none;
@@ -41,6 +47,10 @@ export class PopupList extends Popup {
         outline: none;
       }
 
+      ::slotted([option]) {
+        white-space: nowrap;
+      }
+
       ::slotted(*) {
         margin: 1px 0;
         padding: 4px 2px 3px 2px;
@@ -59,6 +69,11 @@ export class PopupList extends Popup {
         cursor: pointer;
       }
 
+      ::slotted([option][selected]) {
+        background-color: red;
+        cursor: pointer;
+      }
+
       ::slotted([separator]) {
         height: 1px;
         width: 100%;
@@ -71,13 +86,23 @@ export class PopupList extends Popup {
     `
   ]
 
-  @property({ type: Number }) activeIndex: number = 0
+  @property({ type: Boolean }) multiple: boolean = false
+  @property({ type: String, attribute: 'attr-selected' }) attrSelected?: string
+
+  @state() activeIndex?: number
 
   render() {
-    return html` <slot> </slot> `
+    return html`
+      <slot
+        @change=${(e: Event) => {
+          e.stopPropagation()
+        }}
+      >
+      </slot>
+    `
   }
 
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: PopupList, e: KeyboardEvent) {
+  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupList, e: KeyboardEvent) {
     e.stopPropagation()
 
     switch (e.key) {
@@ -90,88 +115,125 @@ export class PopupList extends Popup {
       case 'ArrowLeft':
       case 'Up': // for IE/Edge
       case 'ArrowUp':
-        this.activeIndex--
+        this.activeIndex!--
         break
 
       case 'Right': // for IE/Edge
       case 'ArrowRight':
       case 'Down': // for IE/Edge
       case 'ArrowDown':
-        this.activeIndex++
+        this.activeIndex!++
         break
 
       case 'Enter':
-        e.stopPropagation()
-        var option = (e.target as HTMLElement)?.closest('[option]')
-        if (option) {
-          this.select(option)
-        }
+      case ' ':
+      case 'Spacebar': // for old firefox
+        this.setActive(this.activeIndex!, true)
+        this.select()
         break
     }
   }.bind(this)
 
-  protected _onfocusout: (e: FocusEvent) => void = function (this: PopupList, e: FocusEvent) {
-    const target = e.target as HTMLElement
+  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupList, e: FocusEvent) {
     const to = e.relatedTarget as HTMLElement
-    const from = target.closest('ox-popup-list')
 
-    if (!to && from !== this) {
-      e.stopPropagation()
-
-      /* "하위의 ox-popup-list 엘리먼트가 포커스를 잃었지만, 그 포커스를 받은 엘리먼트가 없다."는 의미는 그 서브메뉴가 클로즈된 것을 의미한다. */
-      this.setActive(this.activeIndex)
-    } else {
-      if (!this.contains(to)) {
-        /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. */
-        // @ts-ignore for debug
-        !window.POPUP_DEBUG && this.close()
-      }
+    if (!this.contains(to)) {
+      /* 분명히 내 범위가 아닌 엘리먼트로 포커스가 옮겨졌다면, ox-popup-list는 닫혀야 한다. */
+      // @ts-ignore for debug
+      !window.POPUP_DEBUG && this.close()
     }
   }.bind(this)
 
-  protected _onclick: (e: MouseEvent) => void = function (this: PopupList, e: MouseEvent) {
+  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupList, e: MouseEvent) {
     e.stopPropagation()
 
     const option = (e.target as HTMLElement)?.closest('[option]')
     if (option) {
-      this.setActive(option)
-      this.select(option)
+      this.setActive(option, true)
+      this.select()
     }
   }.bind(this)
 
   updated(changes: PropertyValues<this>) {
     if (changes.has('activeIndex')) {
-      this.setActive(this.activeIndex)
+      this.activeIndex !== undefined && this.setActive(this.activeIndex)
     }
   }
 
-  select(option: Element) {
-    option.dispatchEvent(new CustomEvent('selected', { bubbles: true, composed: true, detail: this }))
+  async select() {
+    await this.updateComplete
+
+    const options = Array.from(this.querySelectorAll(':scope > [option]'))
 
-    if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('alive-on-select')) {
+    const selected = options
+      .filter(option => option.hasAttribute('value') && option.hasAttribute(this.attrSelected || 'selected'))
+      .map(option => option.getAttribute('value'))
+
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        bubbles: true,
+        composed: true,
+        detail: this.multiple ? selected : selected[0]
+      })
+    )
+
+    const option = options[this.activeIndex!]
+    if (!option.hasAttribute('alive-on-select') && !this.hasAttribute('multiple')) {
       this.close()
     }
   }
 
-  setActive(active: number | Element | null) {
-    const options = Array.from(this.querySelectorAll(':scope > [option]'))
+  setActive(active: number | Element | null, withSelect?: boolean) {
+    const options = Array.from(this.querySelectorAll('[option]'))
+
+    if (active instanceof Element) {
+      const index = options.findIndex(option => option === active)
+      this.setActive(index === -1 ? 0 : index, withSelect)
+      return
+    }
 
-    options.map(async (option, index) => {
+    options.forEach(async (option, index) => {
       if (typeof active === 'number' && index === (active + options.length) % options.length) {
         option.setAttribute('active', '')
-        focusClosest(option as HTMLElement)
+        if (withSelect && !this.attrSelected) {
+          this.multiple ? option.toggleAttribute('selected') : option.setAttribute('selected', '')
+        }
+
+        guaranteeFocus(option as HTMLElement)
 
-        this.activeIndex = index
-      } else if (active === option) {
         this.activeIndex = index
       } else {
         option.removeAttribute('active')
+        !this.attrSelected && !this.multiple && withSelect && option.removeAttribute('selected')
       }
     })
   }
 
+  override open(params: { left?: number; top?: number; right?: number; bottom?: number; silent?: boolean }) {
+    super.open(params)
+
+    if (this.activeIndex === undefined) {
+      this.activeIndex = 0
+    } else {
+      this.setActive(this.activeIndex)
+    }
+  }
+
+  override close() {
+    if (this.hasAttribute('active')) {
+      this.dispatchEvent(
+        new CustomEvent('close', {
+          bubbles: true,
+          composed: true
+        })
+      )
+    }
+
+    super.close()
+  }
+
   /**
-   * Open Popup
+   * Open OxPopup
    *
    * @param {PopupOpenOptions}
    */
@@ -179,21 +241,25 @@ export class PopupList extends Popup {
     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-list') as PopupList
+    const target = document.createElement('ox-popup-list') as OxPopupList
     render(template, target)
 
-    target.style.left = `${left}px`
-    target.style.top = `${top}px`
-
-    target.setAttribute('active', '')
+    if (left !== undefined) target.style.left = `${left}px`
+    if (top !== undefined) target.style.top = `${top}px`
+    if (right !== undefined) target.style.right = `${right}px`
+    if (bottom !== undefined) target.style.bottom = `${bottom}px`
 
     target._parent = owner
 

package/src/ox-popup-menu.ts

@@ -1,7 +1,7 @@
 import { PropertyValues, css, html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 
-import { Popup } from './ox-popup'
+import { OxPopup } from './ox-popup'
 import { render } from 'lit-html'
 
 function focusClosest(element: HTMLElement) {
@@ -16,9 +16,9 @@ function focusClosest(element: HTMLElement) {
 }
 
 @customElement('ox-popup-menu')
-export class PopupMenu extends Popup {
+export class OxPopupMenu extends OxPopup {
   static styles = [
-    ...Popup.styles,
+    ...OxPopup.styles,
     css`
       :host {
         display: none;
@@ -79,7 +79,7 @@ export class PopupMenu extends Popup {
     return html` <slot> </slot> `
   }
 
-  protected _onkeydown: (e: KeyboardEvent) => void = function (this: PopupMenu, e: KeyboardEvent) {
+  protected _onkeydown: (e: KeyboardEvent) => void = function (this: OxPopupMenu, e: KeyboardEvent) {
     e.stopPropagation()
 
     switch (e.key) {
@@ -112,7 +112,7 @@ export class PopupMenu extends Popup {
     }
   }.bind(this)
 
-  protected _onfocusout: (e: FocusEvent) => void = function (this: PopupMenu, e: FocusEvent) {
+  protected _onfocusout: (e: FocusEvent) => void = function (this: OxPopupMenu, e: FocusEvent) {
     const target = e.target as HTMLElement
     const to = e.relatedTarget as HTMLElement
     const from = target.closest('ox-popup-menu')
@@ -131,7 +131,7 @@ export class PopupMenu extends Popup {
     }
   }.bind(this)
 
-  protected _onclick: (e: MouseEvent) => void = function (this: PopupMenu, e: MouseEvent) {
+  protected _onclick: (e: MouseEvent) => void = function (this: OxPopupMenu, e: MouseEvent) {
     e.stopPropagation()
 
     const menu = (e.target as HTMLElement)?.closest('[menu], ox-popup-menuitem')
@@ -148,7 +148,7 @@ export class PopupMenu extends Popup {
   }
 
   select(menu: Element) {
-    menu.dispatchEvent(new CustomEvent('selected'))
+    menu.dispatchEvent(new CustomEvent('select'))
     if (!menu.hasAttribute('alive-on-select')) {
       this.dispatchEvent(new CustomEvent('ox-close', { bubbles: true, composed: true, detail: this }))
     }
@@ -195,7 +195,7 @@ export class PopupMenu extends Popup {
     parent?: Element | null
   }) {
     const owner = parent || document.body
-    const target = document.createElement('ox-popup-menu') as PopupMenu
+    const target = document.createElement('ox-popup-menu') as OxPopupMenu
     render(template, target)
 
     target.style.left = `${left}px`

package/src/ox-popup-menuitem.ts

@@ -1,10 +1,10 @@
 import { LitElement, PropertyValues, css, html } 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>) {

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()
   })