@fusion.dev/helix-headless 0.143.0 → 0.145.0

package/dist/data-table/tree.js

@@ -0,0 +1,55 @@
+import { at } from '../table/column/table-column.js';
+import { filter, parse, sort } from './root/order.js';
+export const childrenOf = (row, field) => {
+    const value = at(row, field);
+    return Array.isArray(value) ? value : [];
+};
+export const grow = (rows, axes, { field, isOpen, query, spec, }) => {
+    const searching = query.trim() !== '';
+    const order = parse(spec);
+    const every = [];
+    const kept = new Set();
+    const seen = new Set();
+    const keep = (row) => {
+        if (seen.has(row)) {
+            return kept.has(row);
+        }
+        seen.add(row);
+        every.push(row);
+        let below = false;
+        for (const child of childrenOf(row, field)) {
+            below = keep(child) || below;
+        }
+        const stays = below || !searching || filter([row], query, axes).length > 0;
+        if (stays) {
+            kept.add(row);
+        }
+        return stays;
+    };
+    for (const row of rows) {
+        keep(row);
+    }
+    const placed = new Map();
+    const shown = [];
+    const lay = (level, depth, parent) => {
+        const siblings = sort(level.filter((row) => kept.has(row) && !placed.has(row)), order, axes);
+        for (const [index, row] of siblings.entries()) {
+            const children = childrenOf(row, field).filter((child) => kept.has(child));
+            const open = children.length > 0 && (searching || isOpen(row));
+            placed.set(row, {
+                branch: children.length > 0,
+                level: depth,
+                open,
+                parent,
+                position: index + 1,
+                siblings: siblings.length,
+            });
+            shown.push(row);
+            if (open) {
+                lay(children, depth + 1, row);
+            }
+        }
+    };
+    lay(rows, 1, undefined);
+    return { every, placed, rows: shown, total: every.length };
+};

package/dist/date-input/root/date-input-root.d.ts

@@ -2,7 +2,7 @@ import { AriaForwardController, HelixFormElement } from '@fusion.dev/helix-core'
 import { type PropertyValues, type TemplateResult } from 'lit';
 import '../../date-picker/index.js';
 import '../../tag/index.js';
-declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
+declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fusion.dev/helix-core").MixinSegmentedFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerEditingInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinPickerFieldInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerOpenInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinTokensInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinControllerValueInterface) & (new (...args: any[]) => import("@fusion.dev/helix-core").MixinFieldInterface) & typeof HelixFormElement;
 /**
  * @summary A date, typed or picked from a calendar.
  *
@@ -17,9 +17,15 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * when you leave the field, as a text field does. A date picked from the
  * calendar sends both.
  *
- * The trigger opens the calendar with focus on the selected day, and Escape
- * closes it and returns focus to the field. Focusing the field opens the
- * calendar too, and Tab out of the field closes it again.
+ * The trigger and ArrowDown open the calendar with focus on the selected day,
+ * Tab moves between the calendar's controls without leaving it, and Escape
+ * closes it and returns focus to the field. A press into the field opens the
+ * calendar too. Tab into the field opens nothing, and Tab out of the field
+ * closes the calendar.
+ *
+ * With `segmented`, the field is a row of segments in place of the text: a
+ * month, a day and a year in the order the locale writes them, each set with
+ * digits or the arrow keys. Alt+Down opens the calendar from a segment.
  *
  * @since 0.1.0
  * @status stable
@@ -42,14 +48,17 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  *
  * @csspart control - The text input.
  * @csspart date - One held date, as a tag, in `multiple`.
+ * @csspart date-cell - The tag's grid cell, which a tag draws only inside a tag group.
  * @csspart date-dismiss - The remove button, when `dismissible`.
  * @csspart date-dismiss-mark - The icon on the remove button, shown when no icon is slotted.
  * @csspart date-label - The label, trimmed to its capitals and baseline.
+ * @csspart date-link - The tag's link around its label, which a tag draws only with `href`.
  * @csspart date-start - The category before the label.
  * @csspart feedback - The error message under the field.
  * @csspart field - The box that holds the text and the trigger.
  * @csspart hint - The help text under the field, shown while there is no error.
  * @csspart label - The label above the field.
+ * @csspart literal - The text the locale writes between two segments, such as a slash, in `segmented`.
  * @csspart picker - The date picker inside the panel.
  * @csspart picker-cell - One cell in a row of days. A range colors these cells.
  * @csspart picker-cell-range-end - The cell of a range's last day. Applied with `picker-cell`.
@@ -63,15 +72,25 @@ declare const HelixHeadlessDateInput_base: (new (...args: any[]) => import("@fus
  * @csspart picker-grid - The grid of days.
  * @csspart picker-header - The month name and its controls.
  * @csspart picker-heading - The month and year being shown.
+ * @csspart picker-heading-button - The calendar's heading as a button that shows the months or the years, where `max-view` is set.
  * @csspart picker-month - One month, with its header and its grid.
  * @csspart picker-months - The row of months.
  * @csspart picker-next - The control that moves to the next month.
  * @csspart picker-next-mark - The icon on the next month control.
+ * @csspart picker-period - One month or one year, in the calendar's months and years views.
+ * @csspart picker-period-current - This month or this year, beside `picker-period`.
+ * @csspart picker-period-disabled - A month or a year wholly outside `min` and `max`, beside `picker-period`.
+ * @csspart picker-period-row - One row of three months or years.
+ * @csspart picker-period-selected - The month or the year on show, beside `picker-period`.
+ * @csspart picker-periods - The grid of months or years.
  * @csspart picker-previous - The control that moves to the previous month.
  * @csspart picker-previous-mark - The icon on the previous month control.
  * @csspart picker-week - One row of days.
  * @csspart picker-weekday - A column header naming a day of the week.
  * @csspart rest - The count of dates beyond the ones shown. It is a `<button>` with `expandable` and a `<span>` without it.
+ * @csspart segment - One part of the date, a year, a month or a day, in `segmented`.
+ * @csspart segment-placeholder - A segment with nothing in it yet. Applied with `segment`.
+ * @csspart segments - The row of segments that holds the date, in `segmented`.
  * @csspart surface - The floating panel.
  * @csspart tags - The row the dates sit in.
  * @csspart trigger - The control that opens the calendar.
@@ -121,6 +140,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * submits and what `min` and `max` compare against.
      */
     dateStyle: 'full' | 'iso' | 'long' | 'medium' | 'short';
+    /**
+     * What each day in the calendar shows, in place of its number: a function
+     * given the date as `YYYY-MM-DD`. Handed to the calendar; see Date Picker's
+     * `dayContent`.
+     */
+    dayContent?: ((date: string) => unknown) | undefined;
     /**
      * Dates that cannot be chosen, as `YYYY-MM-DD`, separated by commas or
      * spaces.
@@ -139,6 +164,12 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * and is Sunday otherwise.
      */
     firstDayOfWeek?: number;
+    /**
+     * A rule for which dates cannot be chosen: a function given the date as
+     * `YYYY-MM-DD` that returns `true` to bar it. The calendar offers such a date
+     * as unavailable, and a typed one is invalid, as with `disable-dates`.
+     */
+    isDateUnavailable?: ((date: string) => boolean) | undefined;
     /**
      * The language tag for the names of months and days in the calendar.
      */
@@ -147,6 +178,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The latest date that can be chosen, as `YYYY-MM-DD`.
      */
     max: string;
+    /**
+     * How far the calendar's heading steps back from the days: `month` or
+     * `year`. Handed to the calendar; see Date Picker's `max-view`.
+     */
+    maxView?: 'month' | 'year';
     /**
      * The earliest date that can be chosen, as `YYYY-MM-DD`.
      */
@@ -200,10 +236,23 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      */
     protected placed(room: number | undefined): void;
     protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The name of the calendar's heading where it shows the months, with
+     * `{heading}` filled in.
+     */
+    monthViewLabel: string;
     /**
      * The name of the calendar's control that moves to the next month.
      */
     nextLabel: string;
+    /**
+     * The name of the calendar's control that moves forward a year.
+     */
+    nextYearLabel: string;
+    /**
+     * The name of the calendar's control that moves forward a page of years.
+     */
+    nextYearsLabel: string;
     /**
      * The text the field shows before a date is entered.
      */
@@ -212,6 +261,14 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The name of the calendar's control that moves to the previous month.
      */
     previousLabel: string;
+    /**
+     * The name of the calendar's control that moves back a year.
+     */
+    previousYearLabel: string;
+    /**
+     * The name of the calendar's control that moves back a page of years.
+     */
+    previousYearsLabel: string;
     /**
      * The message shown when a range holds more than two dates.
      *
@@ -264,6 +321,13 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * complete.
      */
     private get picked();
+    /**
+     * Segments hold one date, so `range` and `multiple` keep the line of text,
+     * whose separators and tags are how those modes write several.
+     */
+    protected get segmentable(): boolean;
+    protected get segmentedKind(): 'date';
+    protected get segmentLocale(): string;
     /** One date, written the way `dateStyle` asks for. */
     private written;
     protected get display(): string;
@@ -296,6 +360,11 @@ export declare class HelixHeadlessDateInput extends HelixHeadlessDateInput_base
      * The message shown when `disable-dates` or `disable-days` bars a date.
      */
     unavailableMessage?: string;
+    /**
+     * The name of the calendar's heading where it shows a page of years, with
+     * `{heading}` filled in.
+     */
+    yearViewLabel: string;
     /**
      * The calendar the field opens, behind a seam the styled tier can move.
      *

package/dist/date-input/root/date-input-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { AriaForwardController, valueAsDate as asDate, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinTokens, writtenList, } from '@fusion.dev/helix-core';
+import { AriaForwardController, valueAsDate as asDate, barredBy, customElement, fillTemplate, dateAsValue as fromDate, HelixFormElement, isDateValue, MixinControllerOpen, MixinControllerValue, MixinField, MixinPickerEditing, MixinPickerField, MixinSegmentedField, MixinTokens, } from '@fusion.dev/helix-core';
 import { calendarBlank } from '@fusion.dev/helix-icons';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
@@ -17,11 +17,11 @@ const dates = (value) => value
     .split(',')
     .map((one) => one.trim())
     .filter(Boolean);
-let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement)))))) {
+let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinSegmentedField(MixinPickerEditing(MixinPickerField(MixinControllerOpen(MixinTokens(MixinControllerValue(MixinField(HelixFormElement))))))) {
     constructor() {
         super(...arguments);
         this.aria = new AriaForwardController(this, {
-            target: () => this.partNamed('control'),
+            target: () => this.partNamed('control') ?? this.segmentGroup,
         });
         this.autocomplete = '';
         this.calendarLabel = 'Date Picker';
@@ -35,9 +35,14 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         this.months = 1;
         this.fitted = undefined;
         this.wide = undefined;
+        this.monthViewLabel = '{heading}. Choose a month';
         this.nextLabel = 'Next month';
+        this.nextYearLabel = 'Next year';
+        this.nextYearsLabel = 'Later years';
         this.placeholder = 'YYYY-MM-DD';
         this.previousLabel = 'Previous month';
+        this.previousYearLabel = 'Previous year';
+        this.previousYearsLabel = 'Earlier years';
         this.removeLabel = 'Remove {name}';
         this.step = 1;
         this.triggerLabel = 'Choose a date';
@@ -90,6 +95,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 this.updateComplete.then(() => this.returnFocus());
             }
         };
+        this.yearViewLabel = '{heading}. Choose a year';
         this.handleIconChange = () => {
             this.requestUpdate();
         };
@@ -119,6 +125,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         const held = dates(this.value);
         return held.length > 0 && held.every(isDateValue) ? held.join(',') : '';
     }
+    get segmentable() {
+        return this.mode === undefined;
+    }
+    get segmentedKind() {
+        return 'date';
+    }
+    get segmentLocale() {
+        return this.locale;
+    }
     written(date) {
         if (this.dateStyle === 'iso' || !isDateValue(date)) {
             return date;
@@ -170,21 +185,15 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
                 max: this.written(this.max),
             });
         }
-        const days = writtenList(this.disableDays);
-        const listed = writtenList(this.disableDates);
-        if (held.some((one) => listed.includes(one) || days.includes(String(asDate(one)?.getUTCDay() ?? '')))) {
+        const why = held.map((one) => {
+            const date = asDate(one);
+            return date ? barredBy(date, this) : null;
+        });
+        if (why.includes('listed')) {
             return this.unavailableMessage || 'Choose a date that is available.';
         }
-        const step = Math.max(1, Math.floor(this.step) || 1);
-        if (step > 1) {
-            const base = asDate(this.min)?.getTime() ?? 0;
-            const off = held.some((one) => {
-                const at = asDate(one)?.getTime();
-                return at !== undefined && Math.round((at - base) / 86_400_000) % step !== 0;
-            });
-            if (off) {
-                return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
-            }
+        if (why.includes('step')) {
+            return this.stepMismatchMessage || 'Choose one of the dates the calendar offers.';
         }
         if (this.mode === 'range' && held.length > 2) {
             return this.rangeLengthMessage || 'A range is two dates.';
@@ -198,9 +207,12 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         cell-range-middle: picker-cell-range-middle, cell-range-start: picker-cell-range-start,
         day: picker-day, day-disabled: picker-day-disabled, day-outside: picker-day-outside,
         day-selected: picker-day-selected, day-today: picker-day-today, grid: picker-grid,
-        header: picker-header, heading: picker-heading, month: picker-month, months: picker-months,
-        next: picker-next,
-        next-mark: picker-next-mark, previous: picker-previous, previous-mark: picker-previous-mark,
+        header: picker-header, heading: picker-heading, heading-button: picker-heading-button,
+        month: picker-month, months: picker-months, next: picker-next,
+        next-mark: picker-next-mark, period: picker-period, period-current: picker-period-current,
+        period-disabled: picker-period-disabled, period-row: picker-period-row,
+        period-selected: picker-period-selected, periods: picker-periods,
+        previous: picker-previous, previous-mark: picker-previous-mark,
         week: picker-week, weekday: picker-weekday"
       ?invalid=${this.resolvedFeedback !== ''}
       mode=${this.mode ?? nothing}
@@ -212,10 +224,19 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
       label=${this.calendarLabel}
       locale=${this.locale || nothing}
       max=${this.max || nothing}
+      max-view=${this.maxView ?? nothing}
       min=${this.min || nothing}
+      month-view-label=${this.monthViewLabel}
       next-label=${this.nextLabel}
+      next-year-label=${this.nextYearLabel}
+      next-years-label=${this.nextYearsLabel}
       previous-label=${this.previousLabel}
+      previous-year-label=${this.previousYearLabel}
+      previous-years-label=${this.previousYearsLabel}
       step=${this.step}
+      year-view-label=${this.yearViewLabel}
+      .dayContent=${this.dayContent}
+      .isDateUnavailable=${this.isDateUnavailable}
       @helix-before-change=${this.handleCalendarChange}
       @change=${this.stopInner}
       @input=${this.stopInner}
@@ -235,7 +256,7 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
     renderTag(date) {
         return html `<${this.tag('tag')}
                   part="date"
-      exportparts="dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, label: date-label, start: date-start"
+      exportparts="cell: date-cell, dismiss: date-dismiss, dismiss-mark: date-dismiss-mark, label: date-label, link: date-link, start: date-start"
                   dismissible
                   dismiss-label=${fillTemplate(this.removeLabel, { name: this.written(date) })}
                   ?disabled=${this.isDisabled}
@@ -257,29 +278,31 @@ let HelixHeadlessDateInput = class HelixHeadlessDateInput extends MixinPickerEdi
         ${this.mode === 'multiple'
             ? this.renderTokenRow(this.shownDates.map((date) => this.renderTag(date)), this.restCount)
             : nothing}
-        <input
-          part="control"
-          id=${this.controlId}
-          type="text"
-          .value=${this.display}
-          name=${this.name || nothing}
-          placeholder=${this.mode === 'multiple' && dates(this.value).length > 0
-            ? nothing
-            : this.placeholder || nothing}
-          autocomplete=${this.autocomplete || nothing}
-          inputmode="numeric"
-          aria-describedby=${this.describedBy ?? nothing}
-          aria-invalid=${this.invalidity ?? nothing}
-          ?disabled=${this.isDisabled}
-          ?readonly=${this.readOnly}
-          ?required=${this.required}
-          @blur=${this.handleBlur}
-          @change=${this.handleCommit}
-          @focus=${this.handleFocus}
-          @input=${this.handleInput}
-          @keydown=${this.handleDraftKey}
-          @keypress=${this.handleKeypress}
-        />
+        ${this.segmentsShown
+            ? this.renderSegments()
+            : html `<input
+                part="control"
+                id=${this.controlId}
+                type="text"
+                .value=${this.display}
+                name=${this.name || nothing}
+                placeholder=${this.mode === 'multiple' && dates(this.value).length > 0
+                ? nothing
+                : this.placeholder || nothing}
+                autocomplete=${this.autocomplete || nothing}
+                inputmode="numeric"
+                aria-describedby=${this.describedBy ?? nothing}
+                aria-invalid=${this.invalidity ?? nothing}
+                ?disabled=${this.isDisabled}
+                ?readonly=${this.readOnly}
+                ?required=${this.required}
+                @blur=${this.handleBlur}
+                @change=${this.handleCommit}
+                @focus=${this.handleFocus}
+                @input=${this.handleInput}
+                @keydown=${this.handleDraftKey}
+                @keypress=${this.handleKeypress}
+              />`}
         <button
           part="trigger"
           type="button"
@@ -330,6 +353,9 @@ __decorate([
 __decorate([
     property({ attribute: 'date-style' })
 ], HelixHeadlessDateInput.prototype, "dateStyle", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDateInput.prototype, "dayContent", void 0);
 __decorate([
     property({ attribute: 'disable-dates' })
 ], HelixHeadlessDateInput.prototype, "disableDates", void 0);
@@ -339,12 +365,18 @@ __decorate([
 __decorate([
     property({ attribute: 'first-day-of-week', type: Number })
 ], HelixHeadlessDateInput.prototype, "firstDayOfWeek", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessDateInput.prototype, "isDateUnavailable", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "locale", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "max", void 0);
+__decorate([
+    property({ attribute: 'max-view' })
+], HelixHeadlessDateInput.prototype, "maxView", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "min", void 0);
@@ -357,15 +389,30 @@ __decorate([
 __decorate([
     state()
 ], HelixHeadlessDateInput.prototype, "fitted", void 0);
+__decorate([
+    property({ attribute: 'month-view-label' })
+], HelixHeadlessDateInput.prototype, "monthViewLabel", void 0);
 __decorate([
     property({ attribute: 'next-label' })
 ], HelixHeadlessDateInput.prototype, "nextLabel", void 0);
+__decorate([
+    property({ attribute: 'next-year-label' })
+], HelixHeadlessDateInput.prototype, "nextYearLabel", void 0);
+__decorate([
+    property({ attribute: 'next-years-label' })
+], HelixHeadlessDateInput.prototype, "nextYearsLabel", void 0);
 __decorate([
     property()
 ], HelixHeadlessDateInput.prototype, "placeholder", void 0);
 __decorate([
     property({ attribute: 'previous-label' })
 ], HelixHeadlessDateInput.prototype, "previousLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-year-label' })
+], HelixHeadlessDateInput.prototype, "previousYearLabel", void 0);
+__decorate([
+    property({ attribute: 'previous-years-label' })
+], HelixHeadlessDateInput.prototype, "previousYearsLabel", void 0);
 __decorate([
     property({ attribute: 'range-length-message' })
 ], HelixHeadlessDateInput.prototype, "rangeLengthMessage", void 0);
@@ -393,6 +440,9 @@ __decorate([
 __decorate([
     property({ attribute: 'unavailable-message' })
 ], HelixHeadlessDateInput.prototype, "unavailableMessage", void 0);
+__decorate([
+    property({ attribute: 'year-view-label' })
+], HelixHeadlessDateInput.prototype, "yearViewLabel", void 0);
 HelixHeadlessDateInput = __decorate([
     customElement('helix-headless-date-input')
 ], HelixHeadlessDateInput);