@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-calendar/pf-calendar.css

@@ -0,0 +1,151 @@
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.calendar {
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-calendar-text);
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  gap: var(--space-2);
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.select {
+  background: var(--pf-calendar-bg);
+  border: 1px solid var(--pf-calendar-border);
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text);
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  padding: var(--space-1) var(--space-2);
+}
+
+.select:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.nav {
+  align-items: center;
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  padding: var(--space-1);
+}
+
+.nav:hover:not(:disabled) {
+  background: var(--pf-calendar-bg-subtle);
+  color: var(--pf-calendar-text);
+}
+
+.nav:disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.nav:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.grid {
+  display: grid;
+  gap: 2px;
+}
+
+/*
+ * `display: contents` so each row's seven cells join the grid's own columns
+ * rather than forming a nested box. The rows exist for the `role="row"` the
+ * grid pattern requires, not for layout.
+ */
+.row {
+  display: contents;
+}
+
+.grid {
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.weekday {
+  color: var(--pf-calendar-text-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  padding: var(--space-1) 0;
+  text-align: center;
+}
+
+.day,
+.empty {
+  aspect-ratio: 1;
+  display: flex;
+  min-width: var(--space-8);
+}
+
+.day {
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--pf-calendar-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+}
+
+.day:hover:not([aria-disabled='true']) {
+  background: var(--pf-calendar-bg-subtle);
+}
+
+.day:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.day--outside {
+  color: var(--pf-calendar-text-muted);
+}
+
+.day--today {
+  background: var(--pf-calendar-today-bg);
+  border-color: var(--pf-calendar-today-border);
+}
+
+/* After today, so a selected day that is also today reads as selected. */
+.day--selected {
+  background: var(--pf-calendar-selected-bg);
+  border-color: var(--pf-calendar-selected-bg);
+  color: var(--pf-calendar-selected-text);
+}
+
+.day--selected:hover {
+  background: var(--pf-calendar-selected-bg-hover);
+}
+
+.day[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

package/dist/collection/components/pf-calendar/pf-calendar.js

@@ -0,0 +1,479 @@
+import { addMonths, buildCalendarDays, CALENDAR_CELL_COUNT, clampMonthToYearRange, formatISODate, isOutsideDateRange, isSameDay, Keys, moveCalendarDate, parseISODate, resolveCalendarKey, startOfMonth, toMidday, WEEKDAY_LABELS, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A month grid for picking a date.
+ *
+ * **It has a keyboard, which the React component does not.** `Calendar`
+ * renders 42 buttons and no key handling, so reaching the end of a month means
+ * 42 presses of Tab and there is no way to move by week at all. This grid is
+ * the ARIA pattern instead: one tab stop, arrows to move a day, up and down a
+ * week, Home and End to the ends of the week, PageUp/PageDown a month. The
+ * arithmetic is core's `moveCalendarDate`, so the React component can adopt it
+ * without the two disagreeing — recorded in `todo.md`.
+ *
+ * Month and year are native `<select>`s rather than two `pf-dropdown`s. A year
+ * range of a century would mean a hundred custom elements rendered into this
+ * shadow root for one control, and a `<select>` brings its own keyboard and
+ * its platform picker on a phone.
+ *
+ * @part calendar - the root box.
+ * @part header - the month and year controls row.
+ * @part grid - the month grid.
+ * @part day - every day cell.
+ * @part selected - the selected day.
+ * @part today - today's cell.
+ */
+export class PfCalendar {
+    el;
+    /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */
+    value;
+    /** Earliest selectable date, as `YYYY-MM-DD`. */
+    min;
+    /** Latest selectable date, as `YYYY-MM-DD`. */
+    max;
+    /** First year offered in the year picker. Defaults to 50 years back. */
+    startYear;
+    /** Last year offered in the year picker. Defaults to 50 years on. */
+    endYear;
+    /** Render the days borrowed from the neighbouring months. */
+    showOutsideDays = true;
+    /** Accessible name for the grid. */
+    label = 'Calendar';
+    /**
+     * A predicate for days that cannot be chosen, beyond `min` and `max`.
+     *
+     * A property rather than an attribute, because a function cannot be written
+     * in HTML — the generated bindings set props as properties, so a React or
+     * Angular consumer passes it as they would any other prop, and a plain-HTML
+     * consumer uses `min`/`max` or assigns it in script.
+     */
+    isDateDisabled;
+    /** Fires with the chosen date, as `YYYY-MM-DD`. */
+    pfChange;
+    /** The month on screen. */
+    displayMonth = startOfMonth(new Date());
+    /** The day the grid's single tab stop sits on. */
+    focusedDate = toMidday(new Date());
+    /** Set once a key or a click has moved focus, so the first paint does not steal it. */
+    shouldRestoreFocus = false;
+    componentWillLoad() {
+        const selected = this.selectedDate();
+        const base = selected ?? toMidday(new Date());
+        this.focusedDate = base;
+        this.displayMonth = this.clamp(startOfMonth(base));
+    }
+    componentDidRender() {
+        if (!this.shouldRestoreFocus)
+            return;
+        this.shouldRestoreFocus = false;
+        // The grid has one tab stop, so after a move the new one has to be given
+        // focus explicitly — the old button may not even exist any more.
+        this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus();
+    }
+    /** Follows a value set from outside, so the grid shows what it is told. */
+    syncValue() {
+        const selected = this.selectedDate();
+        if (!selected)
+            return;
+        this.focusedDate = selected;
+        this.displayMonth = this.clamp(startOfMonth(selected));
+    }
+    /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */
+    async goToMonth(date) {
+        const target = typeof date === 'string' ? parseISODate(date) : toMidday(date);
+        if (!target)
+            return;
+        this.displayMonth = this.clamp(startOfMonth(target));
+        this.focusedDate = target;
+    }
+    /**
+     * Puts focus on the grid's single tab stop.
+     *
+     * A method rather than something a container does for itself: the tab stop
+     * is inside this shadow root, and reaching into another component's shadow
+     * root to find it is exactly the coupling `::part()` and `@Method()` exist
+     * to avoid. `pf-date-picker` calls this when its popover opens.
+     */
+    async focusSelectedDay() {
+        this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus();
+    }
+    selectedDate() {
+        return parseISODate(this.value);
+    }
+    get years() {
+        const now = new Date().getFullYear();
+        const start = this.startYear ?? now - 50;
+        const end = this.endYear ?? now + 50;
+        return { start: Math.min(start, end), end: Math.max(start, end) };
+    }
+    clamp(date) {
+        const { start, end } = this.years;
+        return clampMonthToYearRange(date, start, end);
+    }
+    isDisabled(date) {
+        const min = parseISODate(this.min);
+        const max = parseISODate(this.max);
+        if (isOutsideDateRange(date, min, max))
+            return true;
+        return this.isDateDisabled?.(date) ?? false;
+    }
+    select(date) {
+        if (this.isDisabled(date))
+            return;
+        this.value = formatISODate(date);
+        this.focusedDate = date;
+        this.displayMonth = this.clamp(startOfMonth(date));
+        this.pfChange.emit({ value: this.value });
+    }
+    /**
+     * Moves the focused day, bringing the grid with it.
+     *
+     * A disabled day can still be focused — skipping it would make a long
+     * blocked stretch impossible to cross, and the ARIA pattern is that focus
+     * moves freely while activation is refused.
+     */
+    moveFocus(move) {
+        const next = moveCalendarDate(this.focusedDate, move);
+        const { start, end } = this.years;
+        if (next.getFullYear() < start || next.getFullYear() > end)
+            return;
+        this.focusedDate = next;
+        this.displayMonth = this.clamp(startOfMonth(next));
+        this.shouldRestoreFocus = true;
+    }
+    onKeyDown = (event) => {
+        // The key map is core's, so the React `Calendar` cannot disagree with this
+        // grid about what PageUp means.
+        const move = resolveCalendarKey(event.key);
+        if (move) {
+            event.preventDefault();
+            this.moveFocus(move);
+            return;
+        }
+        if (event.key === Keys.Enter || event.key === Keys.Space) {
+            event.preventDefault();
+            this.select(this.focusedDate);
+            this.shouldRestoreFocus = true;
+        }
+    };
+    /**
+     * Shows a month and brings the tab stop with it.
+     *
+     * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a
+     * day that is no longer rendered, so no cell carries `tabindex="0"` and the
+     * grid drops out of the tab order altogether — reachable by mouse and by
+     * nothing else. The year picker did exactly that until a test went looking.
+     */
+    showMonth(month) {
+        const target = this.clamp(startOfMonth(month));
+        const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate();
+        this.displayMonth = target;
+        this.focusedDate = new Date(target.getFullYear(), target.getMonth(), Math.min(this.focusedDate.getDate(), lastDay), 12);
+    }
+    stepMonth(amount) {
+        this.showMonth(addMonths(this.displayMonth, amount));
+    }
+    renderHeader() {
+        const { start, end } = this.years;
+        const years = Array.from({ length: end - start + 1 }, (_, index) => start + index);
+        const months = Array.from({ length: 12 }, (_, month) => new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(2024, month, 1)));
+        const atFirst = this.displayMonth.getFullYear() === start && this.displayMonth.getMonth() === 0;
+        const atLast = this.displayMonth.getFullYear() === end && this.displayMonth.getMonth() === 11;
+        return (h("div", { class: "header", part: "header" }, h("button", { type: "button", class: "nav", "aria-label": "Previous month", disabled: atFirst, onClick: () => this.stepMonth(-1) }, h("pf-icon", { name: "square-caret-left" })), h("div", { class: "controls" }, h("select", { class: "select", "aria-label": "Month", onChange: (event) => {
+                const month = Number(event.target.value);
+                this.showMonth(new Date(this.displayMonth.getFullYear(), month, 1, 12));
+            } }, months.map((name, month) => (h("option", { key: name, value: String(month), selected: month === this.displayMonth.getMonth() }, name)))), h("select", { class: "select", "aria-label": "Year", onChange: (event) => {
+                const year = Number(event.target.value);
+                this.showMonth(new Date(year, this.displayMonth.getMonth(), 1, 12));
+            } }, years.map((year) => (h("option", { key: year, value: String(year), selected: year === this.displayMonth.getFullYear() }, year))))), h("button", { type: "button", class: "nav", "aria-label": "Next month", disabled: atLast, onClick: () => this.stepMonth(1) }, h("pf-icon", { name: "square-caret-right" }))));
+    }
+    render() {
+        const days = buildCalendarDays(this.displayMonth);
+        const selected = this.selectedDate();
+        const today = toMidday(new Date());
+        const monthLabel = new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            year: 'numeric',
+        }).format(this.displayMonth);
+        return (h(Host, { key: '1fe86f7b2c22bd62d06e6f2ea54c0a59e747fab1' }, h("div", { key: 'd073839e9b2dfb4d4de7c688590462d992f95944', class: "calendar", part: "calendar" }, this.renderHeader(), h("div", { key: '56fe4cb44559fd5bf43cff0eb8575178f7dc47ea', class: "grid", part: "grid", role: "grid", "aria-label": `${this.label}, ${monthLabel}`, onKeyDown: this.onKeyDown }, h("div", { key: 'd5d7d1afee29cb39f6640da24829ec85def3c886', class: "row", role: "row" }, WEEKDAY_LABELS.map((day) => (h("span", { key: day, class: "weekday", role: "columnheader", "aria-label": day }, day)))), Array.from({ length: CALENDAR_CELL_COUNT / 7 }, (_, week) => (h("div", { key: week, class: "row", role: "row" }, days.slice(week * 7, week * 7 + 7).map(({ date, inCurrentMonth }) => {
+            if (!this.showOutsideDays && !inCurrentMonth) {
+                return h("span", { key: formatISODate(date), class: "empty", role: "gridcell" });
+            }
+            const isSelected = selected ? isSameDay(selected, date) : false;
+            const isToday = isSameDay(today, date);
+            const isFocused = isSameDay(this.focusedDate, date);
+            const disabled = this.isDisabled(date);
+            return (h("button", { key: formatISODate(date), type: "button", role: "gridcell", "data-day": formatISODate(date), part: `day${isSelected ? ' selected' : ''}${isToday ? ' today' : ''}`, class: {
+                    day: true,
+                    'day--outside': !inCurrentMonth,
+                    'day--today': isToday,
+                    'day--selected': isSelected,
+                },
+                /* One tab stop for the whole grid: the arrows do the rest. */
+                tabindex: isFocused ? 0 : -1, "aria-selected": isSelected ? 'true' : 'false', "aria-current": isToday ? 'date' : null, "aria-disabled": disabled ? 'true' : null, "aria-label": new Intl.DateTimeFormat('en-US', {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                }).format(date), onClick: () => {
+                    this.select(date);
+                    this.shouldRestoreFocus = true;
+                } }, date.getDate()));
+        }))))))));
+    }
+    static get is() { return "pf-calendar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-calendar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-calendar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Earliest selectable date, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Latest selectable date, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "startYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "First year offered in the year picker. Defaults to 50 years back."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-year"
+            },
+            "endYear": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Last year offered in the year picker. Defaults to 50 years on."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-year"
+            },
+            "showOutsideDays": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Render the days borrowed from the neighbouring months."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-outside-days",
+                "defaultValue": "true"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name for the grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Calendar'"
+            },
+            "isDateDisabled": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(date: Date) => boolean",
+                    "resolved": "((date: Date) => boolean) | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A predicate for days that cannot be chosen, beyond `min` and `max`.\n\nA property rather than an attribute, because a function cannot be written\nin HTML \u2014 the generated bindings set props as properties, so a React or\nAngular consumer passes it as they would any other prop, and a plain-HTML\nconsumer uses `min`/`max` or assigns it in script."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayMonth": {},
+            "focusedDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the chosen date, as `YYYY-MM-DD`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "goToMonth": {
+                "complexType": {
+                    "signature": "(date: string | Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "date",
+                            "type": "string | Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`).",
+                    "tags": []
+                }
+            },
+            "focusSelectedDay": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLButtonElement": {
+                            "location": "global",
+                            "id": "global::HTMLButtonElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Puts focus on the grid's single tab stop.\n\nA method rather than something a container does for itself: the tab stop\nis inside this shadow root, and reaching into another component's shadow\nroot to find it is exactly the coupling `::part()` and `@Method()` exist\nto avoid. `pf-date-picker` calls this when its popover opens.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncValue"
+            }];
+    }
+}
+//# sourceMappingURL=pf-calendar.js.map