@stimulus-plumbers/controllers 0.3.3 → 0.4.1

package/src/controllers/calendar_month_controller.js

@@ -1,29 +1,59 @@
 import { Controller } from '@hotwired/stimulus';
 import { initCalendar } from '../plumbers';
+import { attachCalendarDaySelector } from '../plumbers/calendar-selector';
 import { tryParseDate } from '../plumbers/plumber/date';
 
 export default class extends Controller {
   static targets = ['daysOfWeek', 'daysOfMonth'];
-  static classes = ['dayOfWeek', 'dayOfMonth', 'week'];
+  static classes = ['dayOfWeek', 'dayOfMonth', 'dayOfOtherMonth', 'row'];
   static values = {
+    year: Number,
+    month: Number,
+    today: { type: String, default: '' },
+    selected: { type: String, default: '' },
+    since: { type: String, default: '' },
+    till: { type: String, default: '' },
     locales: { type: Array, default: ['default'] },
     weekdayFormat: { type: String, default: 'short' },
     dayFormat: { type: String, default: 'numeric' },
     daysOfOtherMonth: { type: Boolean, default: false },
-    today: { type: String, default: '' },
-    selected: { type: String, default: '' },
   };
 
   initialize() {
-    initCalendar(this, { today: this.todayValue });
+    this.selector = attachCalendarDaySelector(this, { onSelect: 'select' });
+    initCalendar(this, {
+      today: this.todayValue,
+      since: this.sinceValue || null,
+      till: this.tillValue || null,
+    });
   }
 
   connect() {
-    this.draw();
+    this.selector.attach();
+    this.navigated();
   }
 
-  navigated() {
-    this.draw();
+  disconnect() {
+    this.selector.detach();
+  }
+
+  yearValueChanged() {
+    if (!this.calendar || !this.hasYearValue) return;
+    this._scheduleNavigate();
+  }
+  monthValueChanged() {
+    if (!this.calendar || !this.hasYearValue) return;
+    this._scheduleNavigate();
+  }
+
+  _scheduleNavigate() {
+    if (this._navigatePending) return;
+    this._navigatePending = true;
+    queueMicrotask(async () => {
+      this._navigatePending = false;
+      await this.calendar.navigate(this.currentDate);
+      this.navigated();
+    });
   }
 
   selectedValueChanged() {
@@ -39,20 +69,38 @@ export default class extends Controller {
     if (!parsed) return;
 
     const time = this.daysOfMonthTarget.querySelector(`time[datetime="${parsed.toISOString()}"]`);
-    if (time) time.closest('[aria-selected]').setAttribute('aria-selected', 'true');
+    if (time) time.closest('[aria-selected]')?.setAttribute('aria-selected', 'true');
+  }
+
+  navigate(date) {
+    this.yearValue = date.getFullYear();
+    this.monthValue = date.getMonth();
+  }
+
+  step(unit, dir) {
+    return this.calendar.step(unit, dir);
   }
 
-  onSelect(event) {
-    const iso = event.detail?.iso;
-    if (iso) this.selectedValue = iso;
+  select(iso) {
+    const date = tryParseDate(iso);
+    if (!date) return;
+    this.selectedValue = iso;
+    if (date.getMonth() !== this.calendar.month || date.getFullYear() !== this.calendar.year) {
+      this.calendar.navigate(date);
+    }
+    this.dispatch('selected', { detail: { epoch: date.getTime(), iso } });
   }
 
-  draw() {
+  navigated() {
     this.drawDaysOfWeek();
     this.drawDaysOfMonth();
     this.selectedValueChanged();
   }
 
+  get currentDate() {
+    return new Date(this.yearValue, this.monthValue, 1);
+  }
+
   createDayElement(day, { selectable = false, disabled = false } = {}) {
     const element = document.createElement(selectable ? 'button' : 'div');
     element.tabIndex = -1;
@@ -81,7 +129,7 @@ export default class extends Controller {
     }
     const row = document.createElement('div');
     row.setAttribute('role', 'row');
-    if (this.hasWeekClass) row.classList.add(...this.weekClasses);
+    if (this.hasRowClass) row.classList.add(...this.rowClasses);
     row.replaceChildren(...daysOfWeek);
     this.daysOfWeekTarget.replaceChildren(row);
   }
@@ -93,17 +141,21 @@ export default class extends Controller {
     const today = new Date(t.getFullYear(), t.getMonth(), t.getDate()).getTime();
     const daysOfMonth = [];
     for (const date of this.calendar.daysOfMonth) {
-      const dayDisabled =
-        !date.current || this.calendar.isDisabled(date.date) || !this.calendar.isWithinRange(date.date);
+      const dayRuleDisabled = this.calendar.isDisabled(date.date) || !this.calendar.isWithinRange(date.date);
+      const dayOutsideNavigable = !date.current && this.daysOfOtherMonthValue && !dayRuleDisabled;
       const dayText = date.current || this.daysOfOtherMonthValue ? date.value : '';
       const dayElement = this.createDayElement(dayText, {
-        selectable: date.current,
-        disabled: dayDisabled,
+        selectable: date.current || dayOutsideNavigable,
+        disabled: date.current ? dayRuleDisabled : !dayOutsideNavigable,
       });
 
       if (today === date.date.getTime()) dayElement.setAttribute('aria-current', 'date');
       if (date.current || this.daysOfOtherMonthValue) dayElement.setAttribute('aria-selected', '');
-      if (this.hasDayOfMonthClass) dayElement.classList.add(...this.dayOfMonthClasses);
+      if (!date.current && this.daysOfOtherMonthValue && this.hasDayOfOtherMonthClass) {
+        dayElement.classList.add(...this.dayOfOtherMonthClasses);
+      } else if (this.hasDayOfMonthClass) {
+        dayElement.classList.add(...this.dayOfMonthClasses);
+      }
 
       const time = document.createElement('time');
       time.dateTime = date.iso;
@@ -116,7 +168,7 @@ export default class extends Controller {
     for (let i = 0; i < daysOfMonth.length; i += 7) {
       const row = document.createElement('div');
       row.setAttribute('role', 'row');
-      if (this.hasWeekClass) row.classList.add(...this.weekClasses);
+      if (this.hasRowClass) row.classList.add(...this.rowClasses);
       for (const day of daysOfMonth.slice(i, i + 7)) {
         day.setAttribute('role', 'gridcell');
         row.appendChild(day);

package/src/controllers/calendar_month_selector_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+import { attachCalendarDaySelector } from '../plumbers/calendar-selector';
+
+export default class extends Controller {
+  initialize() {
+    this.selector = attachCalendarDaySelector(this);
+  }
+  connect() {
+    this.selector.attach();
+  }
+  disconnect() {
+    this.selector.detach();
+  }
+}

package/src/controllers/calendar_year_controller.js

@@ -0,0 +1,104 @@
+import { Controller } from '@hotwired/stimulus';
+import { initCalendar } from '../plumbers';
+import { attachCalendarMonthSelector } from '../plumbers/calendar-selector';
+import { tryParseDate } from '../plumbers/plumber/date';
+
+const MONTHS_PER_ROW = 4;
+
+export default class extends Controller {
+  static targets = ['grid'];
+  static values = {
+    current: Number,
+    today: { type: String, default: '' },
+    selected: { type: String, default: '' },
+    since: { type: String, default: '' },
+    till: { type: String, default: '' },
+    locales: { type: Array, default: ['default'] },
+    monthFormat: { type: String, default: 'short' },
+  };
+
+  initialize() {
+    this.selector = attachCalendarMonthSelector(this);
+    initCalendar(this, {
+      today: this.todayValue,
+      year: this.currentValue || undefined,
+      since: this.sinceValue || null,
+      till: this.tillValue || null,
+    });
+  }
+
+  connect() {
+    this.selector.attach();
+    this.navigated();
+  }
+
+  disconnect() {
+    this.selector.detach();
+  }
+
+  currentValueChanged() {
+    if (!this.calendar || !this.hasCurrentValue) return;
+    this.calendar.navigate(this.currentDate);
+  }
+
+  selectedValueChanged() {
+    if (!this.hasGridTarget) return;
+    const selected = tryParseDate(this.selectedValue);
+    this.gridTarget.querySelectorAll('button[data-month]').forEach((btn) => {
+      const month = parseInt(btn.dataset.month, 10) - 1; // 0-indexed
+      btn.setAttribute('aria-selected', selected && selected.getMonth() === month ? 'true' : 'false');
+    });
+  }
+
+  navigate(date) {
+    this.currentValue = date.getFullYear();
+  }
+
+  step(unit, dir) {
+    return this.calendar.step(unit, dir);
+  }
+
+  navigated() {
+    this.drawGrid();
+  }
+
+  get currentDate() {
+    return new Date(this.currentValue, 0, 1);
+  }
+
+  drawGrid() {
+    if (!this.hasGridTarget) return;
+
+    const { year, monthsOfYear } = this.calendar;
+    const today = this.calendar.today;
+    const selectedDate = tryParseDate(this.selectedValue);
+    const cells = [];
+
+    const formatter = new Intl.DateTimeFormat(this.localesValue, { month: this.monthFormatValue });
+
+    for (const m of monthsOfYear) {
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = formatter.format(m.date);
+      btn.dataset.month = m.value + 1; // 1-indexed
+      btn.setAttribute('role', 'gridcell');
+      const isSelected = selectedDate && selectedDate.getMonth() === m.value;
+      btn.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+      if (m.value === today.getMonth() && year === today.getFullYear()) {
+        btn.setAttribute('aria-current', 'month');
+      }
+      if (m.disabled) btn.setAttribute('aria-disabled', 'true');
+      cells.push(btn);
+    }
+
+    const rowgroup = document.createElement('div');
+    rowgroup.setAttribute('role', 'rowgroup');
+    for (let i = 0; i < cells.length; i += MONTHS_PER_ROW) {
+      const row = document.createElement('div');
+      row.setAttribute('role', 'row');
+      for (const cell of cells.slice(i, i + MONTHS_PER_ROW)) row.appendChild(cell);
+      rowgroup.appendChild(row);
+    }
+    this.gridTarget.replaceChildren(rowgroup);
+  }
+}

package/src/controllers/calendar_year_selector_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus';
+import { attachCalendarMonthSelector } from '../plumbers/calendar-selector';
+
+export default class extends Controller {
+  initialize() {
+    this.selector = attachCalendarMonthSelector(this);
+  }
+  connect() {
+    this.selector.attach();
+  }
+  disconnect() {
+    this.selector.detach();
+  }
+}

package/src/controllers/combobox_date_controller.js

@@ -1,11 +1,14 @@
 import { Controller } from '@hotwired/stimulus';
 import { tryParseDate } from '../plumbers/plumber/date';
 
+const VIEWS = ['month', 'year', 'decade'];
+
 export default class extends Controller {
-  static targets = ['previous', 'next', 'day', 'month', 'year'];
-  static outlets = ['calendar-month'];
+  static targets = ['previous', 'next', 'day', 'month', 'year', 'viewTitle'];
+  static outlets = ['calendar-month', 'calendar-year', 'calendar-decade'];
   static values = {
     date: String,
+    view: { type: String, default: 'month' },
     locales: { type: Array, default: ['default'] },
     dayFormat: { type: String, default: 'numeric' },
     monthFormat: { type: String, default: 'long' },
@@ -25,33 +28,66 @@ export default class extends Controller {
     this.draw();
   }
 
-  onSelect(event) {
+  onDaySelect(event) {
     this.dateValue = event.detail.iso;
     this.draw();
     this.dispatch('selected', { detail: { value: event.detail.iso }, bubbles: true });
   }
 
+  zoomOut() {
+    const idx = VIEWS.indexOf(this.viewValue);
+    if (idx < VIEWS.length - 1) {
+      this.viewValue = VIEWS[idx + 1];
+      this.draw();
+    }
+  }
+
+  async onMonthSelect(event) {
+    const { month } = event.detail; // 1-indexed
+    if (!this.hasCalendarMonthOutlet) return;
+    const { year } = this.calendarMonthOutlet.calendar;
+    await this.calendarMonthOutlet.calendar.navigate(new Date(year, month - 1, 1));
+    this.viewValue = 'month';
+    this.draw();
+  }
+
+  async onYearSelect(event) {
+    const { year } = event.detail;
+    if (!this.hasCalendarMonthOutlet) return;
+    const { month } = this.calendarMonthOutlet.calendar;
+    await this.calendarMonthOutlet.calendar.navigate(new Date(year, month, 1));
+    if (this.hasCalendarYearOutlet) {
+      this.calendarYearOutlet.navigate(this.calendarMonthOutlet.calendar.current);
+    }
+    this.viewValue = 'year';
+    this.draw();
+  }
+
   previousTargetConnected(target) {
     target.addEventListener('click', this.previous);
   }
+
   previousTargetDisconnected(target) {
     target.removeEventListener('click', this.previous);
   }
 
   async previous() {
-    await this.calendarMonthOutlet.calendar.step('month', -1);
+    await this.calendarMonthOutlet.calendar.step(...this.stepArgs(-1));
+    this.syncOutletValues();
     this.draw();
   }
 
   nextTargetConnected(target) {
     target.addEventListener('click', this.next);
   }
+
   nextTargetDisconnected(target) {
     target.removeEventListener('click', this.next);
   }
 
   async next() {
-    await this.calendarMonthOutlet.calendar.step('month', 1);
+    await this.calendarMonthOutlet.calendar.step(...this.stepArgs(1));
+    this.syncOutletValues();
     this.draw();
   }
 
@@ -59,6 +95,8 @@ export default class extends Controller {
     this.drawDay();
     this.drawMonth();
     this.drawYear();
+    this.drawViewTitle();
+    this.drawView();
   }
 
   drawDay() {
@@ -84,4 +122,51 @@ export default class extends Controller {
       new Date(year, 0)
     );
   }
+
+  drawViewTitle() {
+    if (!this.hasViewTitleTarget || !this.hasCalendarMonthOutlet) return;
+    const { year, month } = this.calendarMonthOutlet.calendar;
+    this.viewTitleTarget.textContent = this.viewTitleLabel(year, month);
+  }
+
+  syncOutletValues() {
+    if (!this.hasCalendarMonthOutlet) return;
+    const { current } = this.calendarMonthOutlet.calendar;
+    if (!current) return;
+    if (this.hasCalendarYearOutlet) this.calendarYearOutlet.navigate(current);
+    if (this.hasCalendarDecadeOutlet) this.calendarDecadeOutlet.navigate(current);
+  }
+
+  stepArgs(direction) {
+    if (this.viewValue === 'year') return ['year', direction];
+    if (this.viewValue === 'decade') return ['year', direction * 10];
+    return ['month', direction];
+  }
+
+  viewTitleLabel(year, month) {
+    if (this.viewValue === 'year') return String(year);
+    if (this.viewValue === 'decade') {
+      const start = Math.floor(year / 10) * 10;
+      return `${start}–${start + 9}`;
+    }
+    return new Intl.DateTimeFormat(this.localesValue, { month: 'long', year: 'numeric' }).format(new Date(year, month));
+  }
+
+  drawView() {
+    const inMonthView = this.viewValue === 'month';
+    const inYearView = this.viewValue === 'year';
+    const inDecadeView = this.viewValue === 'decade';
+
+    if (this.hasCalendarMonthOutlet) {
+      const outlet = this.calendarMonthOutlet;
+      if (outlet.hasDaysOfWeekTarget) outlet.daysOfWeekTarget.hidden = !inMonthView;
+      if (outlet.hasDaysOfMonthTarget) outlet.daysOfMonthTarget.hidden = !inMonthView;
+    }
+    if (this.hasCalendarYearOutlet) {
+      this.calendarYearOutletElement.hidden = !inYearView;
+    }
+    if (this.hasCalendarDecadeOutlet) {
+      this.calendarDecadeOutletElement.hidden = !inDecadeView;
+    }
+  }
 }

package/src/controllers/combobox_dropdown_controller.js

@@ -1,6 +1,7 @@
 import { Controller } from '@hotwired/stimulus';
 import { Requestor } from '../requestor';
 import { filterOptions } from '../researcher';
+import { ListboxNavigation } from '../accessibility/keyboard';
 
 export default class extends Controller {
   static targets = ['listbox', 'loading', 'empty'];
@@ -14,6 +15,16 @@ export default class extends Controller {
     this._requestor = new Requestor();
   }
 
+  connect() {
+    if (this.hasListboxTarget) {
+      this.listboxNav = new ListboxNavigation(this.listboxTarget);
+    }
+  }
+
+  disconnect() {
+    this._requestor.cancel();
+  }
+
   onSelect(event) {
     const option = event.target.closest('[role="option"]');
     if (!option || option.getAttribute('aria-disabled') === 'true') return;
@@ -29,27 +40,7 @@ export default class extends Controller {
   }
 
   onNavigate(event) {
-    if (!['ArrowUp', 'ArrowDown', 'Enter', ' '].includes(event.key)) return;
-    event.preventDefault();
-    if (event.key === 'Enter' || event.key === ' ') {
-      this.listboxTarget.querySelector('[aria-selected="true"]')?.click();
-      return;
-    }
-    this.step(event.key === 'ArrowDown' ? 1 : -1);
-  }
-
-  step(delta) {
-    const options = [
-      ...this.listboxTarget.querySelectorAll('[role="option"]:not([aria-disabled="true"]):not([hidden])'),
-    ];
-    if (!options.length) return;
-    const current = this.listboxTarget.querySelector('[aria-selected="true"]');
-    const idx = options.indexOf(current);
-    const next = delta > 0 ? options[Math.min(idx + 1, options.length - 1)] : options[Math.max(idx - 1, 0)];
-    if (!next || next === current) return;
-    options.forEach((o) => o.setAttribute('aria-selected', 'false'));
-    next.setAttribute('aria-selected', 'true');
-    next.scrollIntoView({ block: 'nearest' });
+    this.listboxNav?.handleKeyDown(event);
   }
 
   filter(query) {
@@ -90,8 +81,4 @@ export default class extends Controller {
   setEmpty(on) {
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !on;
   }
-
-  disconnect() {
-    this._requestor.cancel();
-  }
 }

package/src/controllers/input_combobox_controller.js

@@ -1,55 +1,15 @@
 import { Controller } from '@hotwired/stimulus';
-import { focusFirst } from '../accessibility/focus';
-import { attachDismisser, attachVisibility } from '../plumbers';
 
 export default class extends Controller {
-  static targets = ['trigger', 'popover', 'input'];
+  static targets = ['trigger', 'input'];
   static values = {
     value: String,
     minLength: { type: Number, default: 1 },
   };
   static outlets = ['combobox-dropdown'];
 
-  connect() {
-    attachDismisser(this);
-    if (this.hasPopoverTarget) {
-      attachVisibility(this, {
-        element: this.popoverTarget,
-        activator: this.hasTriggerTarget ? this.triggerTarget : null,
-      });
-    }
-  }
-
-  async dismissed() {
-    await this.close();
-  }
-
-  async open() {
-    if (!this.hasPopoverTarget) return;
-    await this.visibility.show();
-  }
-
-  async close() {
-    if (!this.hasPopoverTarget) return;
-    await this.visibility.hide();
-  }
-
-  async toggle() {
-    this.visibility?.visible ? await this.close() : await this.open();
-  }
-
-  async shown() {
-    if (this.hasPopoverTarget) focusFirst(this.popoverTarget);
-  }
-
-  async hidden() {
-    if (this.hasTriggerTarget) this.triggerTarget.focus();
-  }
-
-  // Receives combobox-*:selected events from sub-controllers
-  async onSelect(event) {
+  onSelect(event) {
     if (event.detail?.value !== undefined) this.valueValue = event.detail.value;
-    await this.close();
   }
 
   onInput(event) {

package/src/controllers/modal_controller.js

@@ -22,7 +22,10 @@ export default class extends Controller {
       modal.addEventListener('cancel', this.onCancel);
       modal.addEventListener('click', this.onBackdropClick);
     } else {
-      this.focusTrap = new FocusTrap(modal, { escapeDeactivates: true });
+      this.focusTrap = new FocusTrap(modal, {
+        escapeDeactivates: true,
+        onDeactivate: () => this.close(),
+      });
       attachDismisser(this, { element: modal });
     }
   }

package/src/controllers/popover_controller.js

@@ -1,47 +1,74 @@
 import { Controller } from '@hotwired/stimulus';
-import { attachContentLoader, attachVisibility } from '../plumbers';
+import { focusFirst } from '../accessibility/focus';
+import { announce } from '../accessibility/aria';
+import { attachContentLoader, attachDismisser, attachVisibility } from '../plumbers';
 
 export default class extends Controller {
-  static targets = ['content', 'template', 'loader', 'activator'];
+  static targets = ['trigger', 'panel', 'template', 'loader'];
   static classes = ['hidden'];
   static values = {
     url: String,
     loadedAt: String,
     reload: { type: String, default: 'never' },
     staleAfter: { type: Number, default: 3600 },
+    closeOnSelect: { type: Boolean, default: true },
+    announceOpen: { type: String, default: 'Panel opened' },
+    announceClose: { type: String, default: 'Panel closed' },
   };
 
   connect() {
     attachContentLoader(this, {
-      element: this.hasContentTarget ? this.contentTarget : null,
+      element: this.hasPanelTarget ? this.panelTarget : null,
       url: this.hasUrlValue ? this.urlValue : null,
     });
 
-    if (this.hasContentTarget) {
+    if (this.hasPanelTarget) {
       attachVisibility(this, {
-        element: this.contentTarget,
-        activator: this.hasActivatorTarget ? this.activatorTarget : null,
+        element: this.panelTarget,
+        activator: this.hasTriggerTarget ? this.triggerTarget : null,
       });
+      attachDismisser(this);
     }
     if (this.hasLoaderTarget)
       attachVisibility(this, { element: this.loaderTarget, visibility: 'contentLoaderVisibility' });
   }
 
-  async show() {
+  async dismissed() {
+    await this.close();
+  }
+
+  async open() {
+    if (!this.hasPanelTarget) return;
     await this.visibility.show();
   }
 
-  async hide() {
+  async close() {
+    if (!this.hasPanelTarget) return;
     await this.visibility.hide();
   }
 
+  async toggle() {
+    this.visibility?.visible ? await this.close() : await this.open();
+  }
+
+  async closeOnSelect() {
+    if (this.closeOnSelectValue) await this.close();
+  }
+
   async shown() {
     await this.load();
+    if (this.hasPanelTarget) focusFirst(this.panelTarget);
+    announce(this.announceOpenValue);
+  }
+
+  async hidden() {
+    if (this.hasTriggerTarget) this.triggerTarget.focus();
+    announce(this.announceCloseValue);
   }
 
   canLoad() {
-    if (this.hasContentTarget && this.contentTarget.tagName.toLowerCase() === 'turbo-frame') {
-      if (this.hasUrlValue) this.contentTarget.setAttribute('src', this.urlValue);
+    if (this.hasPanelTarget && this.panelTarget.tagName.toLowerCase() === 'turbo-frame') {
+      if (this.hasUrlValue) this.panelTarget.setAttribute('src', this.urlValue);
       return false;
     }
     return true;
@@ -52,8 +79,8 @@ export default class extends Controller {
   }
 
   async contentLoaded({ content }) {
-    if (this.hasContentTarget) {
-      this.contentTarget.replaceChildren(this.getContentNode(content));
+    if (this.hasPanelTarget) {
+      this.panelTarget.replaceChildren(this.getContentNode(content));
     }
     if (this.hasLoaderTarget) await this.contentLoaderVisibility.hide();
   }