@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/web-components/ui/bds-calendar-range.ts

@@ -0,0 +1,307 @@
+import { LitElement, html, nothing } from 'lit';
+import { calendarStyles } from './calendar-styles';
+import {
+  toISO, parseISO, isSameDay, isInRange, sortRange,
+  isDisabled as coreIsDisabled, buildMonthGrid, getWeekdayNames,
+  getMonthLabel, getDayLabel, nextFocusDate, type ISODate,
+} from '../../components/ui/Calendar/calendar-core';
+
+/**
+ * `<bds-calendar-range>` — form-associated range date picker.
+ *
+ * Two-click range selection with hover/focus preview. Value is an ISO range
+ * `"YYYY-MM-DD/YYYY-MM-DD"`. Shares all date logic with the React <CalendarRange>
+ * through calendar-core.
+ *
+ * Attributes: name, value, min, max, disabled, months, page-by,
+ *   first-day-of-week (default 1), locale, previous-label, next-label.
+ * Properties (JS only): isDateDisallowed, formatWeekday, formatMonth, formatDay.
+ * Events: bds-range-select — detail: { start, end }; bds-range-start — detail: { start }.
+ */
+export class BdsCalendarRange extends LitElement {
+  static formAssociated = true;
+
+  static styles = calendarStyles;
+
+  static properties = {
+    name:           { type: String, reflect: true },
+    value:          { type: String, reflect: true },
+    min:            { type: String },
+    max:            { type: String },
+    disabled:       { type: Boolean, reflect: true },
+    months:         { type: Number, reflect: true },
+    pageBy:         { type: String, attribute: 'page-by' },
+    firstDayOfWeek: { type: Number, attribute: 'first-day-of-week' },
+    locale:         { type: String },
+    previousLabel:  { type: String, attribute: 'previous-label' },
+    nextLabel:      { type: String, attribute: 'next-label' },
+    isDateDisallowed: { attribute: false },
+    formatWeekday:    { attribute: false },
+    formatMonth:      { attribute: false },
+    formatDay:        { attribute: false },
+  };
+
+  declare name: string;
+  declare value: string;
+  declare min: string;
+  declare max: string;
+  declare disabled: boolean;
+  declare months: number;
+  declare pageBy: 'months' | 'single';
+  declare firstDayOfWeek: number;
+  declare locale: string;
+  declare previousLabel: string;
+  declare nextLabel: string;
+  declare isDateDisallowed?: (date: Date) => boolean;
+  declare formatWeekday?: (date: Date) => string;
+  declare formatMonth?: (date: Date) => string;
+  declare formatDay?: (date: Date) => string;
+
+  private _internals!: ElementInternals;
+  private _viewYear: number;
+  private _viewMonth: number;
+  private _focusedIso: ISODate | null = null;
+  private _anchorIso: ISODate | null = null;
+  private _hoverIso: ISODate | null = null;
+
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = '';
+    this.value = '';
+    this.min = '';
+    this.max = '';
+    this.disabled = false;
+    this.months = 1;
+    this.pageBy = 'months';
+    this.firstDayOfWeek = 1;
+    this.locale = '';
+    this.previousLabel = 'Previous month';
+    this.nextLabel = 'Next month';
+    const now = new Date();
+    this._viewYear = now.getFullYear();
+    this._viewMonth = now.getMonth();
+  }
+
+  willUpdate(changed: Map<string, unknown>) {
+    if (changed.has('value')) {
+      const committed = this._committed();
+      // Only re-center when the range start isn't already visible (matches React),
+      // so committing a range within the shown months doesn't jump the view.
+      if (committed && !this._monthVisible(committed[0])) {
+        this._viewYear = committed[0].getFullYear();
+        this._viewMonth = committed[0].getMonth();
+      }
+      this._internals.setFormValue?.(this.value);
+    }
+  }
+
+  formResetCallback() { this.value = ''; this._internals.setFormValue?.(''); }
+  formDisabledCallback(disabled: boolean) { this.disabled = disabled; }
+
+  private get _localeOrUndefined(): string | undefined { return this.locale || undefined; }
+  private get _count(): number { return Math.max(1, this.months || 1); }
+
+  private _committed(): [Date, Date] | null {
+    const [s, e] = (this.value || '').split('/');
+    const sd = parseISO(s ?? '');
+    const ed = parseISO(e ?? '');
+    // Sort so an externally-set out-of-order value ("end/start") still paints correctly.
+    return sd && ed ? sortRange(sd, ed) : null;
+  }
+
+  private _paint(): [Date, Date] | null {
+    if (this._anchorIso) {
+      const a = parseISO(this._anchorIso)!;
+      const pe = parseISO(this._hoverIso ?? this._focusedIso ?? this._anchorIso) ?? a;
+      return sortRange(a, pe);
+    }
+    return this._committed();
+  }
+
+  private _monthVisible(date: Date): boolean {
+    const start = this._viewYear * 12 + this._viewMonth;
+    const idx = date.getFullYear() * 12 + date.getMonth();
+    return idx >= start && idx < start + this._count;
+  }
+  private _setView(d: Date) { this._viewYear = d.getFullYear(); this._viewMonth = d.getMonth(); }
+
+  private _page(dir: number) {
+    this._focusedIso = null;
+    const step = this.pageBy === 'single' ? 1 : this._count;
+    this._setView(new Date(this._viewYear, this._viewMonth + dir * step, 1));
+    this.requestUpdate();
+  }
+
+  private _isDisabledDate(iso: ISODate): boolean {
+    const date = parseISO(iso);
+    if (!date) return false;
+    return coreIsDisabled(date, {
+      min: parseISO(this.min) ?? undefined,
+      max: parseISO(this.max) ?? undefined,
+      isDateDisallowed: this.isDateDisallowed,
+    });
+  }
+
+  private _selectDate(iso: ISODate) {
+    if (this.disabled || this._isDisabledDate(iso)) return;
+    const date = parseISO(iso);
+    if (!date) return;
+    if (!this._anchorIso) {
+      this._anchorIso = iso;
+      this._hoverIso = null;
+      this.dispatchEvent(new CustomEvent('bds-range-start', { detail: { start: iso }, bubbles: true, composed: true }));
+      this.requestUpdate();
+    } else {
+      const [s, e] = sortRange(parseISO(this._anchorIso)!, date);
+      const startIso = toISO(s);
+      const endIso = toISO(e);
+      this.value = `${startIso}/${endIso}`;
+      this._internals.setFormValue?.(this.value);
+      this.dispatchEvent(new CustomEvent('bds-range-select', { detail: { start: startIso, end: endIso }, bubbles: true, composed: true }));
+      this._anchorIso = null;
+      this._hoverIso = null;
+    }
+  }
+
+  private _handleKeydown = (e: KeyboardEvent) => {
+    if (this.disabled) return;
+    if (e.key === 'Escape') { this._anchorIso = null; this._hoverIso = null; this.requestUpdate(); return; }
+    const focused = this.shadowRoot?.activeElement as HTMLButtonElement | null;
+    if (!focused?.dataset.date) return;
+    const current = parseISO(focused.dataset.date);
+    if (!current) return;
+    const next = nextFocusDate(current, e.key, { shiftKey: e.shiftKey, firstDayOfWeek: this.firstDayOfWeek });
+    if (!next) return;
+    e.preventDefault();
+    const iso = toISO(next);
+    this._focusedIso = iso;
+    if (!this._monthVisible(next)) this._setView(next);
+    this.requestUpdate();
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector<HTMLButtonElement>(`.day:not(.--outside)[data-date="${iso}"]`)?.focus();
+    });
+  };
+
+  private _onDayEnter(iso: ISODate) {
+    if (!this._anchorIso) return;
+    this._hoverIso = iso;
+    this.requestUpdate();
+  }
+
+  private _weekdayNames(): string[] {
+    if (this.formatWeekday) {
+      return Array.from({ length: 7 }, (_, i) =>
+        this.formatWeekday!(new Date(2023, 0, 1 + ((this.firstDayOfWeek + i) % 7))));
+    }
+    return getWeekdayNames(this._localeOrUndefined, this.firstDayOfWeek);
+  }
+  private _monthLabel(year: number, month: number): string {
+    return this.formatMonth ? this.formatMonth(new Date(year, month, 1)) : getMonthLabel(year, month, this._localeOrUndefined);
+  }
+  private _dayLabel(date: Date): string {
+    return this.formatDay ? this.formatDay(date) : getDayLabel(date, this._localeOrUndefined);
+  }
+
+  private _tabbableIso(paint: [Date, Date] | null): ISODate {
+    const today = new Date();
+    if (this._focusedIso) return this._focusedIso;
+    if (this._anchorIso && this._monthVisible(parseISO(this._anchorIso)!)) return this._anchorIso;
+    if (paint && this._monthVisible(paint[0])) return toISO(paint[0]);
+    if (this._monthVisible(today)) return toISO(today);
+    return toISO(new Date(this._viewYear, this._viewMonth, 1));
+  }
+
+  private _renderMonth(index: number, weekdays: string[], paint: [Date, Date] | null, tabbableIso: ISODate) {
+    const first = new Date(this._viewYear, this._viewMonth + index, 1);
+    const year = first.getFullYear();
+    const month = first.getMonth();
+    const todayIso = toISO(new Date());
+    const cells = buildMonthGrid(year, month, this.firstDayOfWeek);
+    const rows: typeof cells[] = [];
+    for (let i = 0; i < cells.length; i += 7) rows.push(cells.slice(i, i + 7));
+    const label = this._monthLabel(year, month);
+
+    return html`
+      <div class="month">
+        <div class="header">
+          <span class="nav-slot">
+            ${index === 0 ? html`
+              <button class="nav-btn" type="button" aria-label=${this.previousLabel} ?disabled=${this.disabled} @click=${() => this._page(-1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>` : null}
+          </span>
+          <span class="month-label" aria-live="polite">${label}</span>
+          <span class="nav-slot">
+            ${index === this._count - 1 ? html`
+              <button class="nav-btn" type="button" aria-label=${this.nextLabel} ?disabled=${this.disabled} @click=${() => this._page(1)}>
+                <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                </svg>
+              </button>` : null}
+          </span>
+        </div>
+
+        <div class="grid" role="grid" aria-label=${label}>
+          <div class="row" role="row">
+            ${weekdays.map(d => html`<div class="weekday" role="columnheader" aria-label=${d}>${d}</div>`)}
+          </div>
+          ${rows.map(week => html`
+            <div class="row" role="row">
+              ${week.map(({ iso, date, day, outside }) => {
+                const isStart = !outside && !!paint && isSameDay(date, paint[0]);
+                const isEnd = !outside && !!paint && isSameDay(date, paint[1]);
+                const inRange = !outside && !!paint && !isStart && !isEnd && isInRange(date, paint[0], paint[1]);
+                const isToday = !outside && iso === todayIso;
+                const isDisabled = this._isDisabledDate(iso) || this.disabled;
+                const classes = [
+                  'day',
+                  outside ? '--outside' : '',
+                  isStart ? '--range-start' : '',
+                  isEnd ? '--range-end' : '',
+                  inRange ? '--in-range' : '',
+                  isToday && !isStart && !isEnd ? '--today' : '',
+                ].filter(Boolean).join(' ');
+                return html`
+                  <div class="cell" role="gridcell" aria-selected=${isStart || isEnd ? 'true' : 'false'}>
+                    <button
+                      class=${classes}
+                      type="button"
+                      data-date=${iso}
+                      aria-label=${this._dayLabel(date)}
+                      ?disabled=${isDisabled || outside}
+                      aria-current=${isToday ? 'date' : nothing}
+                      aria-disabled=${isDisabled ? 'true' : 'false'}
+                      tabindex=${!outside && iso === tabbableIso ? '0' : '-1'}
+                      @click=${() => this._selectDate(iso)}
+                      @pointerenter=${() => this._onDayEnter(iso)}
+                    >${day}</button>
+                  </div>`;
+              })}
+            </div>`)}
+        </div>
+      </div>`;
+  }
+
+  render() {
+    const weekdays = this._weekdayNames();
+    const paint = this._paint();
+    const tabbableIso = this._tabbableIso(paint);
+    return html`
+      <div class="calendar" @keydown=${this._handleKeydown}>
+        <div class="months">
+          ${Array.from({ length: this._count }, (_, i) => this._renderMonth(i, weekdays, paint, tabbableIso))}
+        </div>
+      </div>`;
+  }
+}
+
+customElements.define('bds-calendar-range', BdsCalendarRange);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bds-calendar-range': BdsCalendarRange;
+  }
+}

package/src/web-components/ui/bds-calendar.spec.ts

@@ -88,4 +88,180 @@ describe('bds-calendar', () => {
     expect(disabled.length).toBeGreaterThan(0);
     cleanup(el);
   });
+
+  it('shows the month matching `value` immediately on creation (view sync)', async () => {
+    const el = await fixture('<bds-calendar value="2020-05-15"></bds-calendar>');
+    const label = el.shadowRoot!.querySelector('.month-label')!;
+    expect(label.textContent).toContain('2020');
+    expect(label.textContent!.toLowerCase()).toContain('may');
+    cleanup(el);
+  });
+
+  it('uses a valid ARIA grid structure — role=row wrappers and gridcell wrappers around each day button', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>');
+    const grid = el.shadowRoot!.querySelector('[role="grid"]')!;
+    // NOTE: `:scope > [role="…"]` is not usable here — jsdom's CSS engine
+    // (nwsapi) fails to resolve `:scope` combinators when the query root is an
+    // element inside a ShadowRoot (confirmed: identical markup matches fine in
+    // the light DOM but returns 0 matches under attachShadow()). `.children`
+    // filtering enforces the same "direct child" semantics without relying on
+    // that broken combinator.
+    const directChildrenWithRole = (el: Element, role: string): Element[] =>
+      Array.from(el.children).filter(child => child.getAttribute('role') === role);
+
+    const rows = directChildrenWithRole(grid, 'row');
+    expect(rows.length).toBeGreaterThan(1);
+
+    const columnheaders = directChildrenWithRole(rows[0], 'columnheader');
+    expect(columnheaders.length).toBe(7);
+
+    const gridcells = directChildrenWithRole(rows[1], 'gridcell');
+    expect(gridcells.length).toBe(7);
+    // gridcell is a wrapper around the button, not the button itself
+    expect(gridcells[0].tagName).not.toBe('BUTTON');
+    expect(gridcells[0].querySelector('button.day')).not.toBeNull();
+    expect(gridcells[0].querySelector('button')?.getAttribute('role')).toBeNull();
+    cleanup(el);
+  });
+
+  it('keeps exactly one day tabbable after navigating to a month with no selected/today date', async () => {
+    const el = await fixture('<bds-calendar value="2020-05-15"></bds-calendar>') as BdsCalendar;
+    for (let i = 0; i < 3; i++) {
+      el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next month"]')!.click();
+      await el.updateComplete;
+    }
+    const tabbable = el.shadowRoot!.querySelectorAll('.day[tabindex="0"]');
+    expect(tabbable.length).toBe(1);
+    cleanup(el);
+  });
+
+  it('moves the roving tabindex and DOM focus when navigating with arrow keys', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    const initial = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-15"]')!;
+    // jsdom doesn't implement shadow-DOM focus retargeting, so stub
+    // shadowRoot.activeElement to simulate focus sitting on `initial`
+    // (same pattern used in bds-drawer.spec.ts).
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: initial, configurable: true });
+    initial.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+
+    const next = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-16"]')!;
+    expect(next.getAttribute('tabindex')).toBe('0');
+    expect(initial.getAttribute('tabindex')).toBe('-1');
+    cleanup(el);
+  });
+
+  it('does not select a date, update the form value, or fire bds-date-select when disabled', async () => {
+    const el = await fixture('<bds-calendar disabled></bds-calendar>') as BdsCalendar;
+    const dates: string[] = [];
+    el.addEventListener('bds-date-select', (e: Event) => {
+      dates.push((e as CustomEvent).detail.date);
+    });
+    const dayBtn = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)')!;
+    expect(dayBtn.disabled).toBe(true);
+    dayBtn.click();
+    expect(dates.length).toBe(0);
+    expect(el.value).toBe('');
+    cleanup(el);
+  });
+
+  it('reflects the disabled state via formDisabledCallback', async () => {
+    const el = await fixture('<bds-calendar></bds-calendar>') as BdsCalendar;
+    expect(el.disabled).toBe(false);
+    el.formDisabledCallback(true);
+    expect(el.disabled).toBe(true);
+    await el.updateComplete;
+    expect(el.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+
+  it('exposes the --calendar_* component token surface with React-aligned defaults', () => {
+    const cssText = BdsCalendar.styles.cssText;
+    expect(cssText).toMatch(/border-radius:\s*var\(--calendar_button-radius,\s*var\(--bds-border_radius--circle\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_day-bg--selected,\s*var\(--bds-color_interactive\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_today-color,\s*var\(--bds-color_interactive\)\)/);
+    expect(cssText).toMatch(/var\(--calendar_day-bg--hover,\s*var\(--bds-color_bg--subtle\)\)/);
+  });
+
+  it('respects prefers-reduced-motion for day and nav-btn transitions', () => {
+    const cssText = BdsCalendar.styles.cssText;
+    expect(cssText).toMatch(/@media \(prefers-reduced-motion: reduce\)/);
+  });
+
+  it('defaults to Monday as the first weekday column', async () => {
+    const el = await fixture('<bds-calendar locale="en-US"></bds-calendar>');
+    const headers = el.shadowRoot!.querySelectorAll('.weekday');
+    expect(headers[0].textContent).toBe('Mon');
+    expect(headers[6].textContent).toBe('Sun');
+    cleanup(el);
+  });
+
+  it('honors first-day-of-week=0 (Sunday)', async () => {
+    const el = await fixture('<bds-calendar locale="en-US" first-day-of-week="0"></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('.weekday')!.textContent).toBe('Sun');
+    cleanup(el);
+  });
+
+  it('renders `months` month grids', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15" months="2"></bds-calendar>');
+    expect(el.shadowRoot!.querySelectorAll('.grid').length).toBe(2);
+    const labels = Array.from(el.shadowRoot!.querySelectorAll('.month-label')).map(n => n.textContent);
+    expect(labels.some(l => /january/i.test(l ?? ''))).toBe(true);
+    expect(labels.some(l => /february/i.test(l ?? ''))).toBe(true);
+    cleanup(el);
+  });
+
+  it('disables dates rejected by the isDateDisallowed property', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    el.isDateDisallowed = (d: Date) => d.getDay() === 0 || d.getDay() === 6;
+    await el.updateComplete;
+    const sat = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-13"]')!; // Saturday
+    expect(sat.getAttribute('aria-disabled')).toBe('true');
+    cleanup(el);
+  });
+
+  it('navigates by a full year with Shift+PageDown', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15"></bds-calendar>') as BdsCalendar;
+    const initial = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-15"]')!;
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: initial, configurable: true });
+    initial.dispatchEvent(new KeyboardEvent('keydown', { key: 'PageDown', shiftKey: true, bubbles: true, composed: true }));
+    await el.updateComplete;
+    expect(el.shadowRoot!.querySelector('.month-label')!.textContent).toContain('2025');
+    cleanup(el);
+  });
+
+  it('localizes the month label via the locale attribute', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-15" locale="nl-NL"></bds-calendar>');
+    expect(el.shadowRoot!.querySelector('.month-label')!.textContent!.toLowerCase()).toContain('januari');
+    cleanup(el);
+  });
+
+  it('keeps exactly one tabbable day and moves focus across months when months=2', async () => {
+    // Jan 31 2024 is real in January's grid and also appears as a greyed --outside
+    // leading cell in February's grid (buildMonthGrid always fills 42 cells).
+    // Exactly one real (non-outside) day must be tabbable, and arrow-key focus must
+    // land on the real Feb cell, not the disabled outside duplicate.
+    const el = await fixture('<bds-calendar value="2024-01-31" months="2"></bds-calendar>') as BdsCalendar;
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    const jan31 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-01-31"]')!;
+    Object.defineProperty(el.shadowRoot, 'activeElement', { value: jan31, configurable: true });
+    jan31.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true, composed: true }));
+    await el.updateComplete;
+    const feb1 = el.shadowRoot!.querySelector<HTMLButtonElement>('.day:not(.--outside)[data-date="2024-02-01"]')!;
+    expect(feb1.getAttribute('tabindex')).toBe('0');
+    expect(el.shadowRoot!.querySelectorAll('.day[tabindex="0"]').length).toBe(1);
+    cleanup(el);
+  });
+
+  it('never marks an outside day as selected/today, even when it matches the value', async () => {
+    const el = await fixture('<bds-calendar value="2024-01-31"></bds-calendar>') as BdsCalendar;
+    el.shadowRoot!.querySelector<HTMLButtonElement>('[aria-label="Next month"]')!.click();
+    await el.updateComplete;
+    const cell = el.shadowRoot!.querySelector<HTMLButtonElement>('[data-date="2024-01-31"]')!;
+    expect(cell.classList.contains('--outside')).toBe(true);
+    expect(cell.classList.contains('--selected')).toBe(false);
+    expect(cell.getAttribute('aria-current')).toBeNull();
+    expect(cell.closest('[role="gridcell"]')!.getAttribute('aria-selected')).toBe('false');
+    cleanup(el);
+  });
 });