@rip-lang/ui 0.3.48 → 0.3.49

package/components/alert-dialog.rip

@@ -12,78 +12,32 @@
 #     button @click: (=> showConfirm = false), "Cancel"
 #     button @click: handleDelete, "Delete"
 
-alertDialogStack = []
-
 export AlertDialog = component
   @open := false
   @initialFocus := null
 
   _prevFocus = null
   _cleanupTrap = null
-  _scrollY = 0
   _id =! "adlg-#{Math.random().toString(36).slice(2, 8)}"
 
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
   ~>
     if @open
       _prevFocus = document.activeElement
-      _scrollY = window.scrollY
-      alertDialogStack.push this
-      document.body.style.position = 'fixed'
-      document.body.style.top = "-#{_scrollY}px"
-      document.body.style.width = '100%'
-
-      setTimeout =>
+      ARIA.lockScroll(this)
+      requestAnimationFrame =>
         panel = @_panel
         if panel
-          @_wireAria()
+          ARIA.wireAria panel, _id
           if @initialFocus
             target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
             target?.focus()
           else
-            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-            focusable[0]?.focus()
-          _cleanupTrap = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', _cleanupTrap
-      , 0
-
+            panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
+          _cleanupTrap = ARIA.trapFocus(panel)
       return ->
-        idx = alertDialogStack.indexOf this
-        alertDialogStack.splice(idx, 1) if idx >= 0
-        document.body.style.position = '' unless alertDialogStack.length
-        document.body.style.top = '' unless alertDialogStack.length
-        document.body.style.width = '' unless alertDialogStack.length
-        window.scrollTo 0, _scrollY unless alertDialogStack.length
+        _cleanupTrap?()
+        ARIA.unlockScroll(this)
         _prevFocus?.focus()
-    else
-      idx = alertDialogStack.indexOf this
-      alertDialogStack.splice(idx, 1) if idx >= 0
-      unless alertDialogStack.length
-        document.body.style.position = ''
-        document.body.style.top = ''
-        document.body.style.width = ''
-        window.scrollTo 0, _scrollY
-      _prevFocus?.focus()
 
   close: ->
     @open = false

package/components/autocomplete.rip

@@ -45,22 +45,13 @@ export Autocomplete = component
   openMenu: ->
     open = true
     @_hlIdx = -1
-    setTimeout => @_position(), 0
+    requestAnimationFrame => @_position()
 
   close: ->
     open = false
     @_hlIdx = -1
 
-  _position: ->
-    return unless @_input and @_list
-    tr = @_input.getBoundingClientRect()
-    @_list.style.position = 'fixed'
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 2}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 2}px"
+  _position: -> ARIA.positionBelow @_input, @_list, 2, false
 
   selectIndex: (idx) ->
     item = filteredItems[idx]

package/components/combobox.rip

@@ -46,21 +46,13 @@ export Combobox = component
   openMenu: ->
     open = true
     highlightedIndex = -1
-    setTimeout => @_position(), 0
+    requestAnimationFrame => @_position()
 
   close: ->
     open = false
     highlightedIndex = -1
 
-  _position: ->
-    return unless @_input and @_list
-    tr = @_input.getBoundingClientRect()
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 2}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 2}px"
+  _position: -> ARIA.positionBelow @_input, @_list, 2, false
 
   isDisabled: (item) -> item?.hasAttribute?('data-disabled')
 

package/components/date-picker.rip

@@ -133,22 +133,14 @@ export DatePicker = component
     else if @range and Array.isArray(@value) and @value[0]
       viewMonth = new Date(@value[0].getFullYear(), @value[0].getMonth(), 1)
     _inputText = _displayText
-    setTimeout => @_position(), 0
+    requestAnimationFrame => @_position()
 
   close: ->
     open = false
     _rangeStart = null
     _hoveredDay = null
 
-  _position: ->
-    return unless @_trigger and @_cal
-    tr = @_trigger.getBoundingClientRect()
-    @_cal.style.position = 'fixed'
-    @_cal.style.left = "#{tr.left}px"
-    @_cal.style.top = "#{tr.bottom + 4}px"
-    fl = @_cal.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_cal.style.top = "#{tr.top - fl.height - 4}px"
+  _position: -> ARIA.positionBelow @_trigger, @_cal, 4, false
 
   _onKeydown: (e) ->
     switch e.key

package/components/dialog.rip

@@ -12,8 +12,6 @@
 #     p "Content"
 #     button @click: (=> showDialog = false), "Close"
 
-dialogStack = []
-
 export Dialog = component
   @open := false
   @dismissable := true
@@ -21,70 +19,26 @@ export Dialog = component
 
   _prevFocus = null
   _cleanupTrap = null
-  _scrollY = 0
   _id =! "dlg-#{Math.random().toString(36).slice(2, 8)}"
 
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
   ~>
     if @open
       _prevFocus = document.activeElement
-      _scrollY = window.scrollY
-      dialogStack.push this
-      document.body.style.position = 'fixed'
-      document.body.style.top = "-#{_scrollY}px"
-      document.body.style.width = '100%'
-
-      setTimeout =>
+      ARIA.lockScroll(this)
+      requestAnimationFrame =>
         panel = @_panel
         if panel
-          @_wireAria()
+          ARIA.wireAria panel, _id
           if @initialFocus
             target = if typeof @initialFocus is 'string' then panel.querySelector(@initialFocus) else @initialFocus
             target?.focus()
           else
-            focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-            focusable[0]?.focus()
-          _cleanupTrap = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', _cleanupTrap
-      , 0
-
+            panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
+          _cleanupTrap = ARIA.trapFocus(panel)
       return ->
-        idx = dialogStack.indexOf this
-        dialogStack.splice(idx, 1) if idx >= 0
-        document.body.style.position = '' unless dialogStack.length
-        document.body.style.top = '' unless dialogStack.length
-        document.body.style.width = '' unless dialogStack.length
-        window.scrollTo 0, _scrollY unless dialogStack.length
+        _cleanupTrap?()
+        ARIA.unlockScroll(this)
         _prevFocus?.focus()
-    else
-      idx = dialogStack.indexOf this
-      dialogStack.splice(idx, 1) if idx >= 0
-      unless dialogStack.length
-        document.body.style.position = ''
-        document.body.style.top = ''
-        document.body.style.width = ''
-        window.scrollTo 0, _scrollY
-      _prevFocus?.focus()
 
   close: ->
     @open = false

package/components/drawer.rip

@@ -18,44 +18,20 @@ export Drawer = component
   _scrollY = 0
   _id =! "drw-#{Math.random().toString(36).slice(2, 8)}"
 
-  _wireAria: ->
-    panel = @_panel
-    return unless panel
-    heading = panel.querySelector('h1,h2,h3,h4,h5,h6')
-    if heading
-      heading.id ?= "#{_id}-title"
-      panel.setAttribute 'aria-labelledby', heading.id
-    desc = panel.querySelector('p')
-    if desc
-      desc.id ?= "#{_id}-desc"
-      panel.setAttribute 'aria-describedby', desc.id
-
   ~>
     if @open
       _prevFocus = document.activeElement
       document.body.style.overflow = 'hidden'
-
-      setTimeout =>
+      requestAnimationFrame =>
         panel = @_panel
         if panel
-          @_wireAria()
-          focusable = panel.querySelectorAll 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
-          focusable[0]?.focus()
-          @_trapHandler = (e) ->
-            return unless e.key is 'Tab'
-            list = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')).filter (f) -> f.offsetParent isnt null
-            return unless list.length
-            first = list[0]
-            last = list[list.length - 1]
-            if e.shiftKey
-              if document.activeElement is first then (e.preventDefault(); last.focus())
-            else
-              if document.activeElement is last then (e.preventDefault(); first.focus())
-          panel.addEventListener 'keydown', @_trapHandler
-      , 0
-    else
-      document.body.style.overflow = ''
-      _prevFocus?.focus()
+          ARIA.wireAria panel, _id
+          panel.querySelectorAll('a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])')?[0]?.focus()
+          @_cleanupTrap = ARIA.trapFocus(panel)
+      return ->
+        @_cleanupTrap?()
+        document.body.style.overflow = ''
+        _prevFocus?.focus()
 
   close: ->
     @open = false

package/components/menu.rip

@@ -73,19 +73,7 @@ export Menu = component
       highlightedIndex = idx
       @_list?.querySelectorAll('[role="menuitem"]')[idx]?.focus()
 
-  _position: ->
-    return unless @_trigger and @_list
-    tr = @_trigger.getBoundingClientRect()
-    @_list.style.position = 'fixed'
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 4}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 4}px"
-    if fl.right > window.innerWidth
-      @_list.style.left = "#{window.innerWidth - fl.width - 4}px"
-    @_list.style.visibility = 'visible'
+  _position: -> ARIA.positionBelow @_trigger, @_list
 
   onTriggerKeydown: (e) ->
     return if @disabled

package/components/menubar.rip

@@ -41,14 +41,8 @@ export Menubar = component
     highlightedIndex = -1
 
   _position: (menuId) ->
-    trigger = @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]")
-    list = @_root?.querySelector("[data-menu-list=\"#{menuId}\"]")
-    return unless trigger and list
-    tr = trigger.getBoundingClientRect()
-    list.style.position = 'fixed'
-    list.style.left = "#{tr.left}px"
-    list.style.top = "#{tr.bottom + 2}px"
-    list.style.minWidth = "#{tr.width}px"
+    ARIA.positionBelow @_root?.querySelector("[data-menu-trigger=\"#{menuId}\"]"),
+                       @_root?.querySelector("[data-menu-list=\"#{menuId}\"]"), 2, false
 
   selectItem: (menuId, itemId) ->
     @emit 'select', { menu: menuId, item: itemId }

package/components/multi-select.rip

@@ -62,25 +62,20 @@ export MultiSelect = component
     open = true
     highlightedIndex = if filtered.length > 0 then 0 else -1
 
+  _close: ->
+    open = false
+    query = ''
+    highlightedIndex = -1
+
   onFocusin: -> open = true
 
   onFocusout: ->
     setTimeout =>
       return if @_content?.contains(document.activeElement)
-      open = false
-      query = ''
-      highlightedIndex = -1
+      @_close()
     , 0
 
-  _position: ->
-    return unless @_input and @_list
-    tr = @_input.getBoundingClientRect()
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 2}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 2}px"
+  _position: -> ARIA.positionBelow @_input, @_list, 2, false
 
   _onKeydown: (e) ->
     len = filtered.length
@@ -89,7 +84,6 @@ export MultiSelect = component
         e.preventDefault()
         open = true
         highlightedIndex = (highlightedIndex + 1) %% len if len
-        setTimeout (=> @_position()), 0
       when 'ArrowUp'
         e.preventDefault()
         highlightedIndex = (highlightedIndex - 1) %% len if len
@@ -110,15 +104,8 @@ export MultiSelect = component
         query = ''
 
   ~>
-    if open
-      setTimeout (=> @_position()), 0
-      onDown = (e) =>
-        unless @_content?.contains(e.target)
-          open = false
-          query = ''
-          highlightedIndex = -1
-      document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+    if open then requestAnimationFrame => @_position()
+  ~> ARIA.popupDismiss open, (=> @_list), (=> @_close()), [=> @_content], (=> @_position())
 
   render
     . ref: "_content", $open: open?!, $disabled: @disabled?!

package/components/nav-menu.rip

@@ -53,13 +53,8 @@ export NavigationMenu = component
     clearTimeout _closeTimer if _closeTimer
 
   _position: (id) ->
-    trigger = @_root?.querySelector("[data-nav-trigger=\"#{id}\"]")
-    panel = @_root?.querySelector("[data-nav-panel=\"#{id}\"]")
-    return unless trigger and panel
-    tr = trigger.getBoundingClientRect()
-    panel.style.position = 'fixed'
-    panel.style.left = "#{tr.left}px"
-    panel.style.top = "#{tr.bottom + 2}px"
+    ARIA.positionBelow @_root?.querySelector("[data-nav-trigger=\"#{id}\"]"),
+                       @_root?.querySelector("[data-nav-panel=\"#{id}\"]"), 2, false
 
   _onKeydown: (e) ->
     navBtns = @_root?.querySelectorAll('[data-nav-trigger], [data-nav-link]')
@@ -86,11 +81,13 @@ export NavigationMenu = component
   ~>
     return unless _ready
     if activePanel
-      onDown = (e) =>
-        unless @_root?.contains(e.target)
-          @_closePanel()
+      onDown   = (e) => @_closePanel() unless @_root?.contains(e.target)
+      onScroll = => @_position(activePanel)
       document.addEventListener 'mousedown', onDown
-      return -> document.removeEventListener 'mousedown', onDown
+      window.addEventListener   'scroll',    onScroll, true
+      return ->
+        document.removeEventListener 'mousedown', onDown
+        window.removeEventListener   'scroll',    onScroll, true
 
   render
     nav ref: "_root", role: "navigation", aria-orientation: @orientation

package/components/popover.rip

@@ -48,7 +48,7 @@ export Popover = component
 
   openPopover: ->
     open = true
-    setTimeout => @_position(), 0
+    requestAnimationFrame => @_position()
 
   close: ->
     open = false
@@ -116,14 +116,7 @@ export Popover = component
         floating.style.visibility = 'hidden'
         floating.setAttribute 'data-open', ''
         floating.setAttribute 'data-placement', @placement
-        heading = floating.querySelector('h1,h2,h3,h4,h5,h6')
-        if heading
-          heading.id ?= "#{_id}-title"
-          floating.setAttribute 'aria-labelledby', heading.id
-        desc = floating.querySelector('p')
-        if desc
-          desc.id ?= "#{_id}-desc"
-          floating.setAttribute 'aria-describedby', desc.id
+        ARIA.wireAria floating, _id
       else
         floating.hidden = true
         floating.removeAttribute 'data-open'

package/components/select.rip

@@ -105,17 +105,7 @@ export Select = component
     el?.focus()
     el?.scrollIntoView { block: 'nearest' }
 
-  _position: ->
-    return unless @_trigger and @_list
-    tr = @_trigger.getBoundingClientRect()
-    @_list.style.position = 'fixed'
-    @_list.style.left = "#{tr.left}px"
-    @_list.style.top = "#{tr.bottom + 4}px"
-    @_list.style.minWidth = "#{tr.width}px"
-    fl = @_list.getBoundingClientRect()
-    if fl.bottom > window.innerHeight
-      @_list.style.top = "#{tr.top - fl.height - 4}px"
-    @_list.style.visibility = 'visible'
+  _position: -> ARIA.positionBelow @_trigger, @_list
 
   ~> ARIA.popupDismiss open, (=> @_list), (=> @close()), [=> @_trigger], (=> @_position())
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rip-lang/ui",
-  "version": "0.3.48",
+  "version": "0.3.49",
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "repository": {
     "type": "git",
@@ -35,6 +35,6 @@
   "license": "MIT",
   "type": "module",
   "dependencies": {
-    "rip-lang": ">=3.13.101"
+    "rip-lang": ">=3.13.102"
   }
 }