@cahyo-dimas/freeday 3.6.0 → 3.8.0

package/dist/freeday-popover.js

@@ -8,7 +8,8 @@
  * Used by the select/combo, datepicker, timepicker, cascade, autocomplete and menu enhancers;
  * the freeday/vue adapter ships an equivalent `usePopover` composable.
  *
- * attach(panel, trigger) -> { show(), hide() }. show()/hide() also toggle the panel's [hidden]
+ * attach(panel, trigger, opts) -> { show(), hide() }, where opts is { matchWidth, align } and
+ * both are described on place() below. show()/hide() also toggle the panel's [hidden]
  * attribute so callers keep using `!panel.hidden` for open-state and the `:not([hidden])`
  * entrance animation still fires. On browsers without the Popover API it degrades to that
  * [hidden] toggle over the panel's existing absolute-positioned CSS (clipped, but functional).
@@ -21,35 +22,56 @@
     && typeof HTMLElement.prototype.showPopover === 'function';
 
   // Position `panel` (already shown, so it has a measurable box) against `trigger`'s rect.
-  // matchWidth (default true) floors the panel to the trigger width, right for input-shaped
-  // dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
-  function place(panel, trigger, matchWidth) {
-    var r = trigger.getBoundingClientRect();
+  // opts is the object attach() takes, and both keys are optional:
+  //   matchWidth  (default true) floors the panel to the trigger width, right for input-shaped
+  //               dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
+  //   align       'start' (default) lines the panel's LEFT edge up with the trigger's left edge;
+  //               'end' lines its RIGHT edge up with the trigger's right edge, which is what a
+  //               control parked in a right-hand gutter needs. The panel is kept inside the
+  //               viewport either way, so 'end' near the left edge slides right instead of
+  //               hanging off it. freeday-menu.js reads it off `.fdy-menu--end`.
+  function place(panel, trigger, opts) {
+    var o = opts || {};
+    /* Take the panel out of the flow BEFORE measuring anything, because until this runs the panel
+     * is still `position:absolute` with `top:calc(100% + …)` from its component's stylesheet. An
+     * author rule outranks the popover UA style, and in the top layer that `100%` resolves against
+     * the viewport, so a panel that has just been shown sits one viewport height down the page and
+     * drags the document's scrollable overflow with it. Where scrollbars take layout space (every
+     * Windows and Linux browser; macOS overlay scrollbars hide it completely) the document gains a
+     * classic scrollbar for the duration, documentElement.clientWidth drops by its width, and the
+     * page relays out 15px narrower. A trigger rect read in that instant is a rect from a layout
+     * that is about to be undone by the next three lines: measured 961 instead of 976 for an avatar
+     * in a 24px gutter, so the menu landed a scrollbar's width to the left of it. */
     panel.style.position = 'fixed';
     panel.style.margin = '0';
     panel.style.inset = 'auto';                 // clear the UA popover centering
-    if (matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
+    var r = trigger.getBoundingClientRect();
+    if (o.matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
     var ph = panel.offsetHeight, pw = panel.offsetWidth;
     var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
     var below = vh - r.bottom - GAP, above = r.top - GAP;
     // Prefer below; flip above only when it doesn't fit below and above has more room.
     var top = (ph <= below || below >= above) ? (r.bottom + GAP) : Math.max(GAP, r.top - GAP - ph);
-    var left = r.left;
-    if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw); // keep within the viewport
+    var left = (o.align === 'end') ? (r.right - pw) : r.left;
+    /* Clamped on BOTH sides, and that is not belt-and-braces: the first line is what keeps a
+       start-aligned panel on screen, the second is what keeps an end-aligned one on screen when
+       the panel is wider than the room to the left of its trigger. Keeping only one of them
+       trades an overflow on one edge for an overflow on the other. */
+    if (left + pw > vw - GAP) left = vw - GAP - pw;
+    if (left < GAP) left = GAP;
     panel.style.top = Math.round(top) + 'px';
     panel.style.left = Math.round(left) + 'px';
   }
 
   function attach(panel, trigger, opts) {
-    var matchWidth = !(opts && opts.matchWidth === false);
     if (supported) panel.setAttribute('popover', 'manual');
-    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, matchWidth); }
+    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, opts); }
     return {
       show: function () {
         panel.hidden = false;
         if (supported) {
           if (!panel.matches(':popover-open')) panel.showPopover();
-          place(panel, trigger, matchWidth);
+          place(panel, trigger, opts);
           window.addEventListener('scroll', reposition, true); // capture: any scrolling ancestor
           window.addEventListener('resize', reposition);
         }

package/dist/freeday-tabs.js

@@ -4,6 +4,12 @@
  * Markup: a [data-fdy-tabs] with a [role="tablist"] of
  * <button role="tab" aria-controls="PANEL" aria-selected> and matching
  * <div role="tabpanel" id="PANEL" aria-labelledby="TAB" [hidden]>.
+ *
+ * The arrow AXIS comes from the tablist's `aria-orientation`: `vertical` answers to Up and
+ * Down, anything else to Left and Right. One axis per tablist, which is what APG maps, and the
+ * other pair is left entirely alone rather than bound as a second axis: Left and Right over a
+ * column of tabs belong to whatever else is on the page, and a widget that preventDefaults a key
+ * it has no meaning for has taken it from the page silently. Home/End answer on both.
  */
 (function () {
   'use strict';
@@ -14,6 +20,19 @@
     if (tabs.length === 0) return;
     root.dataset.fdyTabsReady = '1';
 
+    /* The look follows `.fdy-tabs--vertical`, the behaviour follows `aria-orientation`, and this
+       makes the second agree with the first so an app states the axis once. The attribute always
+       wins when it is there: it is what an assistive technology announces, so nothing here may
+       overwrite one an author wrote. */
+    var list = root.querySelector('[role="tablist"]');
+    if (list !== null && list.getAttribute('aria-orientation') === null
+        && root.classList.contains('fdy-tabs--vertical')) {
+      list.setAttribute('aria-orientation', 'vertical');
+    }
+    var vertical = list !== null && list.getAttribute('aria-orientation') === 'vertical';
+    var NEXT_KEY = vertical ? 'ArrowDown' : 'ArrowRight';
+    var PREV_KEY = vertical ? 'ArrowUp' : 'ArrowLeft';
+
     function panelFor(tab) {
       var id = tab.getAttribute('aria-controls');
       return id ? document.getElementById(id) : null;
@@ -33,9 +52,9 @@
       tab.addEventListener('click', function () { select(tab, false); });
       tab.addEventListener('keydown', function (e) {
         switch (e.key) {
-          case 'ArrowRight':
+          case NEXT_KEY:
             e.preventDefault(); select(tabs[(i + 1) % tabs.length], true); break;
-          case 'ArrowLeft':
+          case PREV_KEY:
             e.preventDefault(); select(tabs[(i - 1 + tabs.length) % tabs.length], true); break;
           case 'Home':
             e.preventDefault(); select(tabs[0], true); break;