@nxgt/material 3.34.0 → 3.35.0

package/dist/lib/components/ui/fields/opening-hours/opening-hours-form-field.d.ts

@@ -1,9 +1,25 @@
 import { ComponentProps } from 'react';
 import { UseControllerProps } from 'react-hook-form';
+import { WeekStart } from './logic/week.js';
 export type OpeningHoursFormFieldProps<T extends Record<string, any>> = Pick<UseControllerProps<T>, 'control' | 'name'> & {
     className?: string;
     disabled?: boolean;
     label?: string;
+    /**
+     * `'inline'` (the default) edits the week in place
+     * (`OpeningHoursEditor`); `'dialog'` keeps the list and the dialog that
+     * edits one range at a time.
+     */
+    editing?: 'inline' | 'dialog';
+    /** `editing="dialog"` only: the "Add All Days" button. */
     showAddAllDays?: boolean;
+    /** `editing="inline"` only: the first day of the week, `0` Sunday. */
+    weekStartsOn?: WeekStart;
+    /** `editing="inline"` only: the locale of day and time names. */
+    locale?: string;
 } & Omit<ComponentProps<'div'>, 'name'>;
-export declare function OpeningHoursFormField<T extends Record<string, any>>({ control, name, className, disabled, label, showAddAllDays, ...props }: OpeningHoursFormFieldProps<T>): import("react").JSX.Element;
+/**
+ * Opening hours in a React Hook Form field (an array of one entry per
+ * range). Inline by default; `editing="dialog"` is today's list and dialog.
+ */
+export declare function OpeningHoursFormField<T extends Record<string, any>>({ editing, showAddAllDays, weekStartsOn, locale, ...props }: OpeningHoursFormFieldProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/opening-hours/opening-hours-summary.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { WeekStart } from './logic/week.js';
+import { OpeningHoursFieldValue } from './models.js';
+export type OpeningHoursSummaryProps = {
+    /** The hours, in the value model of `OpeningHours`. */
+    data?: OpeningHoursFieldValue[] | null;
+    /** Names the region; "Opening Hours" by default. */
+    label?: string;
+    /** The moment to read as now (tests, stories); the clock by default. */
+    now?: Date;
+    /** The IANA zone of the place ("America/Toronto"); the viewer's by default. */
+    timeZone?: string;
+    /** The locale of day and time names; the `I18nProvider` language by default. */
+    locale?: string;
+    /** The first day of the week, `0` Sunday; the locale's by default. */
+    weekStartsOn?: WeekStart;
+    className?: string;
+    /**
+     * What shows when there is nothing to list. A quiet "Hours not set" by default; your
+     * node replaces it, and `null` renders nothing.
+     */
+    empty?: ReactNode;
+};
+/**
+ * The read-only counterpart of `OpeningHoursEditor`: whether the place is
+ * open now ("Open · closes at 6:00 PM", "Closed · opens Monday at 9:00 AM"),
+ * then the week with identical consecutive days grouped ("Mon–Fri
+ * 9:00 AM – 6:00 PM") and today's group marked. Times are the locale's; the
+ * status reads the clock in `timeZone`. Without `now` the status appears
+ * once the page has mounted, so a server render and its hydration match.
+ */
+export declare function OpeningHoursSummary({ data, label, now, timeZone, locale, weekStartsOn, className, empty, }: OpeningHoursSummaryProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/opening-hours/partials/copy-chips.d.ts

@@ -0,0 +1,12 @@
+import { HoursText } from '../use-hours-text.js';
+type CopyChipsProps = {
+    text: HoursText;
+    /** The day copied from, left out of the chips. */
+    index: number;
+    order: readonly number[];
+    targets: readonly number[];
+    onToggle: (day: number) => void;
+};
+/** "Copy to…": one toggle chip for each other day of the week. */
+export declare function CopyChips({ text, index, order, targets, onToggle, }: CopyChipsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/copy-menu.d.ts

@@ -0,0 +1,10 @@
+import { HoursText } from '../use-hours-text.js';
+type CopyMenuProps = {
+    text: HoursText;
+    from: number;
+    disabled?: boolean;
+    onCopy: (to: number[]) => void;
+};
+/** "Copy to": Monday to Friday, the weekend, or all days. */
+export declare function CopyMenu({ text, from, disabled, onCopy }: CopyMenuProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/day-controls.d.ts

@@ -0,0 +1,14 @@
+import { FocusRequest } from '../../inline-editor/use-focus-request.js';
+import { Day } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+type DayControlsProps = {
+    text: HoursText;
+    index: number;
+    day: Day;
+    disabled?: boolean;
+    focus: Pick<FocusRequest, 'key' | 'request'>;
+    onChange: (day: Day) => void;
+};
+/** A day's switch, its ranges and the button that adds one. */
+export declare function DayControls({ text, index, day, disabled, focus, onChange, }: DayControlsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/day-row.d.ts

@@ -0,0 +1,15 @@
+import { FocusRequest } from '../../inline-editor/use-focus-request.js';
+import { Day } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+type DayRowProps = {
+    text: HoursText;
+    index: number;
+    day: Day;
+    disabled?: boolean;
+    focus: Pick<FocusRequest, 'key' | 'request'>;
+    onChange: (day: Day) => void;
+    onCopy: (to: number[]) => void;
+};
+/** A day on a wide screen: its name, its controls and the "Copy to" menu. */
+export declare function DayRow({ text, index, day, disabled, focus, onChange, onCopy, }: DayRowProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/day-summary-row.d.ts

@@ -0,0 +1,15 @@
+import { Day } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+/** The text under a day's name: its ranges, or that it is closed. */
+export declare function daySummary(text: HoursText, day: Day): string;
+type DaySummaryRowProps = {
+    text: HoursText;
+    index: number;
+    day: Day;
+    disabled?: boolean;
+    onOpen: () => void;
+    onChange: (day: Day) => void;
+};
+/** A phone's row for a day: a summary and a chevron that opens its sheet. */
+export declare function DaySummaryRow({ text, index, day, disabled, onOpen, onChange, }: DaySummaryRowProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/group-row.d.ts

@@ -0,0 +1,13 @@
+import { Group } from '../logic/group.js';
+import { HoursText } from '../use-hours-text.js';
+type GroupRowProps = {
+    text: HoursText;
+    group: Group;
+    today: boolean;
+};
+/**
+ * A run of identical days and its hours. Today's group has the selected-row
+ * look (a tint and a 3px start bar) and a "Today" tag.
+ */
+export declare function GroupRow({ text, group, today }: GroupRowProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/phone-sheet.d.ts

@@ -0,0 +1,18 @@
+import { FocusRequest } from '../../inline-editor/use-focus-request.js';
+import { Day } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+type PhoneSheetProps = {
+    text: HoursText;
+    /** The day being edited; `null` keeps the sheet closed. */
+    index: number | null;
+    day?: Day;
+    order: readonly number[];
+    disabled?: boolean;
+    focus: Pick<FocusRequest, 'key' | 'request'>;
+    onClose: () => void;
+    onChange: (day: Day) => void;
+    onCopy: (from: number, to: number[]) => void;
+};
+/** A phone's editor for one day: its controls and copy-to day chips. */
+export declare function PhoneSheet({ text, index, day, order, disabled, focus, onClose, onChange, onCopy, }: PhoneSheetProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/range-field-props.d.ts

@@ -0,0 +1,28 @@
+import { HoursRangeError } from '../logic/range-errors.js';
+import { HoursRange } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+type Options = {
+    text: HoursText;
+    key: 'o' | 'c';
+    day: number;
+    /** Position of the range in its day, from 1. */
+    n: number;
+    range: HoursRange;
+    error?: HoursRangeError;
+    errorId: string;
+    disabled?: boolean;
+    onChange: (range: HoursRange) => void;
+};
+/** The props of one compact time field of a range (`o` opens, `c` closes). */
+export declare function rangeFieldProps({ text, key, day, n, range, error, errorId, disabled, onChange, }: Options): {
+    size: "sm";
+    clearable: boolean;
+    disabled: boolean | undefined;
+    value: string;
+    error: boolean;
+    'aria-describedby': string | undefined;
+    className: string;
+    'aria-label': string;
+    onValueChange: (value?: string) => void;
+};
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/range-row.d.ts

@@ -0,0 +1,24 @@
+import { HoursRangeError } from '../logic/range-errors.js';
+import { HoursRange } from '../logic/week.js';
+import { HoursText } from '../use-hours-text.js';
+type RangeRowProps = {
+    text: HoursText;
+    day: number;
+    /** Position of the range in its day, from 0. */
+    index: number;
+    range: HoursRange;
+    error?: HoursRangeError;
+    disabled?: boolean;
+    /** The scoped focus keys of the two time fields. */
+    focusKeys: {
+        open: string;
+        close: string;
+    };
+    onChange: (range: HoursRange) => void;
+    onRemove: () => void;
+};
+/** One range of a day: opening and closing time, remove, and its error. */
+export declare function RangeRow({ text, day, index, range, error, disabled, focusKeys, onChange, onRemove, }: RangeRowProps): import("react").JSX.Element;
+/** The sentence for a range error. */
+export declare function errorText({ t }: HoursText, error: HoursRangeError): string;
+export {};

package/dist/lib/components/ui/fields/opening-hours/partials/status-pill.d.ts

@@ -0,0 +1,13 @@
+import { Status } from '../logic/status.js';
+import { HoursText } from '../use-hours-text.js';
+/** "Open · closes at 6:00 PM" or "Closed · opens Monday at 9:00 AM". */
+export declare function statusDetail(text: HoursText, status: Status, today: number): string | null;
+type StatusPillProps = {
+    text: HoursText;
+    status: Status;
+    today: number;
+    className?: string;
+};
+/** The tonal pill that says whether the place is open now, and what is next. */
+export declare function StatusPill({ text, status, today, className, }: StatusPillProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/opening-hours/use-first-day.d.ts

@@ -0,0 +1,8 @@
+import { WeekStart } from './logic/week.js';
+/**
+ * The first day of the week: `weekStartsOn` when given, else the locale's.
+ * Until the page has mounted the answer comes from the language alone, the
+ * same on a server and in a browser, so hydration matches; then the locale's
+ * own week info replaces it.
+ */
+export declare function useFirstDay(locale: string, weekStartsOn?: WeekStart): WeekStart;

package/dist/lib/components/ui/fields/opening-hours/use-hours-editor.d.ts

@@ -0,0 +1,26 @@
+import { Day } from './logic/week.js';
+import { OpeningHoursFieldValue } from './models.js';
+import { HoursText } from './use-hours-text.js';
+type Options = {
+    value: OpeningHoursFieldValue[] | undefined;
+    onValueChange?: (value: OpeningHoursFieldValue[]) => void;
+    text: HoursText;
+};
+/**
+ * The week an editor shows, how it changes the value, its copy note, and the
+ * focus hand-off a day's controls use after a range is added or removed.
+ */
+export declare function useHoursEditor({ value, onValueChange, text }: Options): {
+    focus: {
+        key: (name: string) => string;
+        request: (name: string) => void;
+    };
+    week: import('./logic/week.js').Week;
+    note: string;
+    sheet: number | null;
+    setSheet: import('react').Dispatch<import('react').SetStateAction<number | null>>;
+    issues: number;
+    setDay: (index: number, day: Day) => void;
+    copy: (from: number, to: number[]) => void;
+};
+export {};

package/dist/lib/components/ui/fields/opening-hours/use-hours-text.d.ts

@@ -0,0 +1,8 @@
+/** The translator and the locale the hours components print with. */
+export declare function useHoursText(locale?: string): {
+    t: (key: import('../../../../i18n/index.js').MaterialLocaleKey, fallback: string, options?: import('../../../../i18n/index.js').TranslationContext) => string;
+    locale: string;
+    time: (value: string) => string;
+    day: (day: number, width?: "long" | "short") => string;
+};
+export type HoursText = ReturnType<typeof useHoursText>;

package/dist/lib/components/ui/fields/opening-hours/use-now.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The moment the summary reads: `now` when given, else the clock, once the
+ * page has mounted and every minute after. `null` before that, so a server
+ * and a hydrating client render the same (no status, no "today").
+ */
+export declare function useNow(now?: Date): Date | null;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -416,10 +416,20 @@ export declare const en: {
                 cancel: string;
                 remove: string;
                 "add-option": string;
+                done: string;
+                "remove-row": string;
+                "edit-row": string;
+                reorder: string;
             };
             labels: {
+                none: string;
                 "new-attribute": string;
                 attributes: string;
+                default: string;
+                yes: string;
+                no: string;
+                hint: string;
+                untitled: string;
             };
             messages: {
                 "create-succeeded": string;
@@ -428,6 +438,7 @@ export declare const en: {
                 empty: string;
                 "add-first": string;
                 dialog: string;
+                sheet: string;
             };
             types: {
                 color: string;
@@ -486,6 +497,17 @@ export declare const en: {
                     placeholder: string;
                 };
             };
+            errors: {
+                duplicate: string;
+                empty: string;
+                issues: string;
+            };
+            announce: {
+                lift: string;
+                move: string;
+                drop: string;
+                cancel: string;
+            };
         };
         table: {
             loading: string;
@@ -545,6 +567,9 @@ export declare const en: {
                 type: string;
                 value: string;
                 label: string;
+                "row-type": string;
+                "row-value": string;
+                "row-label": string;
             };
             types: {
                 phone: string;
@@ -569,14 +594,35 @@ export declare const en: {
                 edit: string;
                 save: string;
                 cancel: string;
+                "make-primary": string;
+                "is-primary": string;
+                call: string;
+                "send-email": string;
+                "open-site": string;
+                "copy-value": string;
+                done: string;
+                "remove-row": string;
+                "add-type": string;
             };
             messages: {
                 "no-contacts": string;
                 "add-first": string;
                 dialog: string;
+                sheet: string;
             };
             labels: {
+                none: string;
                 contacts: string;
+                primary: string;
+                group: string;
+            };
+            errors: {
+                email: string;
+                phone: string;
+                website: string;
+                duplicate: string;
+                empty: string;
+                issues: string;
             };
         };
         "opening-hours": {
@@ -585,6 +631,9 @@ export declare const en: {
                 openTime: string;
                 closeTime: string;
                 isClosed: string;
+                "range-open": string;
+                "range-close": string;
+                "day-open": string;
             };
             days: {
                 "0": string;
@@ -616,16 +665,42 @@ export declare const en: {
                 edit: string;
                 save: string;
                 cancel: string;
+                "add-range": string;
+                "remove-range": string;
+                "copy-to": string;
+                copy: string;
+                done: string;
             };
             labels: {
                 "closed-all-day": string;
                 "open-hours": string;
+                today: string;
+                open: string;
+                closed: string;
+                "copy-weekdays": string;
+                "copy-weekend": string;
+                "copy-all": string;
+                copied: string;
+                "copy-days": string;
             };
             messages: {
                 "no-hours": string;
                 "add-first": string;
                 dialog: string;
             };
+            status: {
+                "closes-at": string;
+                "opens-at": string;
+                "opens-tomorrow": string;
+                "opens-day": string;
+                unset: string;
+            };
+            errors: {
+                close: string;
+                overlap: string;
+                missing: string;
+                issues: string;
+            };
         };
         "postal-address": {
             fields: {

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -405,11 +405,21 @@ declare const _default: {
 			"save": "Save",
 			"cancel": "Cancel",
 			"remove": "Delete",
-			"add-option": "Add option"
+			"add-option": "Add option",
+			"done": "Done",
+			"remove-row": "Remove {name}",
+			"edit-row": "Edit {name}",
+			"reorder": "Reorder {name}"
 		},
 		"labels": {
+			"none": "No attributes",
 			"new-attribute": "New attribute",
-			"attributes": "Attributes"
+			"attributes": "Attributes",
+			"default": "Default",
+			"yes": "Yes",
+			"no": "No",
+			"hint": "Drag the handle, or press Space, then ↑ ↓, Space to drop, Esc to cancel",
+			"untitled": "Untitled attribute"
 		},
 		"messages": {
 			"create-succeeded": "Attribute successfully created",
@@ -417,7 +427,8 @@ declare const _default: {
 			"delete-succeeded": "{count, plural, one {Attribute successfully deleted} other {# attributes successfully deleted}}",
 			"empty": "No attributes yet",
 			"add-first": "Add an attribute to get started.",
-			"dialog": "Name, type, and optional defaults."
+			"dialog": "Name, type, and optional defaults.",
+			"sheet": "Edit this attribute."
 		},
 		"types": {
 			"color": "Color",
@@ -475,6 +486,17 @@ declare const _default: {
 				"label": "Unit",
 				"placeholder": "Enter unit (e.g., kg, cm)"
 			}
+		},
+		"errors": {
+			"duplicate": "Another attribute already has this name.",
+			"empty": "Enter a name.",
+			"issues": "{count, plural, one {# issue to fix} other {# issues to fix}}"
+		},
+		"announce": {
+			"lift": "Picked up {name}, position {position} of {count}. Use the arrow keys to move it, Space to drop it, Escape to cancel.",
+			"move": "{name} moved to position {position} of {count}.",
+			"drop": "{name} dropped at position {position} of {count}.",
+			"cancel": "Reorder cancelled. {name} is back at position {position} of {count}."
 		}
 	},
 	"table": {
@@ -534,7 +556,10 @@ declare const _default: {
 		"fields": {
 			"type": "Type",
 			"value": "Value",
-			"label": "Label"
+			"label": "Label",
+			"row-type": "{type} {n}: type",
+			"row-value": "{type} {n}: value",
+			"row-label": "{type} {n}: label"
 		},
 		"types": {
 			"phone": "Phone",
@@ -558,15 +583,36 @@ declare const _default: {
 			"remove": "Remove Contact",
 			"edit": "Edit contact",
 			"save": "Save",
-			"cancel": "Cancel"
+			"cancel": "Cancel",
+			"make-primary": "Make primary",
+			"is-primary": "Primary for this type",
+			"call": "Call",
+			"send-email": "Send an email",
+			"open-site": "Open site",
+			"copy-value": "Copy {value}",
+			"done": "Done",
+			"remove-row": "Remove {type} {n}",
+			"add-type": "Add {type}"
 		},
 		"messages": {
 			"no-contacts": "No contacts added yet",
 			"add-first": "Click the button below to add a contact",
-			"dialog": "Type, value, and an optional label."
+			"dialog": "Type, value, and an optional label.",
+			"sheet": "Edit this contact."
 		},
 		"labels": {
-			"contacts": "Contacts"
+			"none": "No contacts",
+			"contacts": "Contacts",
+			"primary": "Primary",
+			"group": "{type}, {count, plural, one {# contact} other {# contacts}}"
+		},
+		"errors": {
+			"email": "Enter a valid email address.",
+			"phone": "Enter 7 to 15 digits.",
+			"website": "Start with https:// or http://.",
+			"duplicate": "Already listed ({name}).",
+			"empty": "Enter a value.",
+			"issues": "{count, plural, one {# issue to fix} other {# issues to fix}}"
 		}
 	},
 	"opening-hours": {
@@ -574,7 +620,10 @@ declare const _default: {
 			"dayOfWeek": "Day of Week",
 			"openTime": "Opening Time",
 			"closeTime": "Closing Time",
-			"isClosed": "Closed"
+			"isClosed": "Closed",
+			"range-open": "{day}, range {n}: opening time",
+			"range-close": "{day}, range {n}: closing time",
+			"day-open": "{day}: open"
 		},
 		"days": {
 			"0": "Sunday",
@@ -605,16 +654,42 @@ declare const _default: {
 			"add-all": "Add All Days",
 			"edit": "Edit hours",
 			"save": "Save",
-			"cancel": "Cancel"
+			"cancel": "Cancel",
+			"add-range": "Add hours",
+			"remove-range": "Remove range {n} of {day}",
+			"copy-to": "Copy to…",
+			"copy": "Copy",
+			"done": "Done"
 		},
 		"labels": {
 			"closed-all-day": "Closed all day",
-			"open-hours": "Opening Hours"
+			"open-hours": "Opening Hours",
+			"today": "Today",
+			"open": "Open",
+			"closed": "Closed",
+			"copy-weekdays": "Monday to Friday",
+			"copy-weekend": "Weekend",
+			"copy-all": "All days",
+			"copied": "Copied to {days}",
+			"copy-days": "Copy {day} to"
 		},
 		"messages": {
 			"no-hours": "No opening hours configured",
-			"add-first": "Click the button below to add opening hours",
+			"add-first": "Use the button above to add opening hours",
 			"dialog": "Day, opening time, and closing time."
+		},
+		"status": {
+			"closes-at": "closes at {time}",
+			"opens-at": "opens at {time}",
+			"opens-tomorrow": "opens tomorrow at {time}",
+			"opens-day": "opens {day} at {time}",
+			"unset": "Hours not set"
+		},
+		"errors": {
+			"close": "Closing time must be after opening time.",
+			"overlap": "This range overlaps another one.",
+			"missing": "Enter both times.",
+			"issues": "{count, plural, one {# issue to fix} other {# issues to fix}}"
 		}
 	},
 	"postal-address": {