@k2b/ui 0.20.0 → 0.21.0

package/dist/types/actions/GestureMenu.d.ts

@@ -24,6 +24,8 @@ export type GestureMenuProps = {
     sheetTop?: (close: () => void) => JSX.Element;
     /** Tab order of the element. A list that moves focus between its rows itself passes -1. */
     tabIndex?: number;
+    /** Runs before the menu or the sheet shows its items, for example to select what was pressed. */
+    onOpen?: () => void;
     class?: string;
 };
 /**

package/dist/types/content/Calendar.d.ts

@@ -1,6 +1,7 @@
 import { type LinkNavigateEvent } from "@k2b/ssr/nav";
 import { type DateContext } from "@k2b/stdlib";
 import type { JSX } from "solid-js";
+import type { DropdownItem } from "../actions/Dropdown";
 export type CalendarView = "day" | "week" | "month" | "year" | "mobile-month";
 export type CalendarEventColor = "blue" | "emerald" | "amber" | "red" | "violet" | "cyan" | "zinc";
 export type CalendarEvent = {
@@ -63,6 +64,8 @@ export type CalendarEventRenderContext = {
     allDay: boolean;
     durationHours: number;
     timeLabel: string;
+    /** Month view: the start time to show before the title of a one-day timed entry; absent on bars and elsewhere. */
+    leadingTime?: string;
 };
 /** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
 export type CalendarCustomView<V extends string = string> = {
@@ -116,10 +119,39 @@ export type CalendarProps<V extends string = never> = {
     onSlotActivate?: (slot: CalendarEventTimeChange) => void;
     /** Pointer gesture used for empty slots. Keyboard activation is always immediate. */
     slotActivation?: "single" | "double";
+    /**
+     * Month view: the selected days changed. `null` when no day is selected, for example after paging to another month
+     * or switching to another view.
+     */
+    onSelectionChange?: (range: CalendarEventTimeChange | null) => void;
+    /**
+     * Month view: the application's entries of the menu that a right-click, Shift+F10, or a long press opens on a day or
+     * on the selected days. The calendar heads them with the days and adds Open day, Open week, and Clear selection;
+     * without this prop the menu has only those. `quickCreate` opens the quick create at the days, passing `create` on to
+     * `renderQuickCreate`.
+     */
+    selectionMenu?: (range: CalendarEventTimeChange, controls: CalendarSelectionControls) => readonly DropdownItem[];
+    /**
+     * Month view: the content of the quick create at the selected days. It opens quietly after a click, keeping the
+     * focus in the grid until the person types or tabs into it (Space still lists the day), and with the focus after a
+     * drag, a double-click, Enter, N, or `quickCreate`.
+     */
+    renderQuickCreate?: (range: CalendarEventTimeChange, controls: CalendarQuickCreateControls) => JSX.Element;
     toolbarActions?: JSX.Element;
+    /** Application controls, such as filters, right after the period title. */
     toolbarContent?: JSX.Element;
     class?: string;
 };
+export type CalendarSelectionControls = {
+    /** Opens the quick create at the days of the menu; `create` names what to create, as the application defines it. */
+    quickCreate: (create?: string) => void;
+};
+export type CalendarQuickCreateControls = {
+    /** What the person asked to create through `quickCreate`; absent after a click, a drag, or the keyboard. */
+    create?: string;
+    /** Closes the quick create and returns the focus to the selected day; once another quick create replaced it, nothing. */
+    close: () => void;
+};
 export type CalendarEventTimeChange = {
     start: Date;
     end: Date;

package/dist/types/content/calendar-messages.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The month view's own strings. They live beside the calendar instead of in the shared catalog, so applications that
+ * never render a calendar do not ship them.
+ */
+declare const calendarMessages: import("@k2b/stdlib").Catalog<{
+    calendarMoreEvents: ({ count }: {
+        count: number;
+    }) => string;
+    calendarMoreEventsOn: ({ count, label }: {
+        count: number;
+        label: string;
+    }) => string;
+    calendarSelectionActions: string;
+    calendarQuickCreate: string;
+    calendarSelectedDays: ({ start, end, count }: {
+        start: string;
+        end: string;
+        count: number;
+    }) => string;
+    calendarOpenDay: string;
+    calendarOpenWeek: string;
+    calendarOpenWeekNumber: ({ week }: {
+        week: number;
+    }) => string;
+    calendarClearSelection: string;
+    calendarNewEvent: string;
+    calendarNothingPlanned: string;
+    calendarContinuesFrom: ({ day, month }: {
+        day: number;
+        month?: string;
+    }) => string;
+    calendarContinuesUntil: ({ day, month }: {
+        day: number;
+        month?: string;
+    }) => string;
+}>;
+export type CalendarMessages = ReturnType<(typeof calendarMessages)["resolve"]>["t"];
+/** Resolved from the inherited render locale, like the rest of @k2b/ui. */
+export declare const useCalendarMessages: () => (() => CalendarMessages);
+export declare const checkCalendarMessages: () => import("@k2b/stdlib").CatalogIssue[];
+export {};

package/dist/types/content/calendar-month-layout.d.ts

@@ -0,0 +1,52 @@
+/** One entry of a month week row, with its first and last day as `YYYY-MM-DD` keys. */
+export type MonthEntry<T> = {
+    item: T;
+    /** The entry's first day, which may lie before the row. */
+    firstKey: string;
+    /** The entry's last day, which may lie after the row. */
+    lastKey: string;
+    /** All-day and multi-day entries are bars that keep a lane; the others stack in their day below the bars. */
+    bar: boolean;
+};
+/** The part of a bar inside one week row, from `startColumn` to `endColumn`, both inclusive. */
+export type MonthBar<T> = {
+    item: T;
+    startColumn: number;
+    endColumn: number;
+    lane: number;
+    /** The entry began before this row: the bar's start is torn. */
+    continuesBefore: boolean;
+    /** The entry goes on after this row: the bar's end is torn. */
+    continuesAfter: boolean;
+};
+export type MonthWeekLayout<T> = {
+    bars: MonthBar<T>[];
+    /** Per column, the entries that are not bars, in the order the row lists them. */
+    singles: T[][];
+};
+/**
+ * Lays one week row out. Each bar is one piece over the days it covers in the row and keeps one lane on all of them,
+ * so a long entry never moves between its days: bars that start earlier come first, a longer bar before a shorter one
+ * with the same start, and otherwise the row's own order decides. Every lane is the lowest one free on all its days.
+ */
+export declare const layoutMonthWeek: <T>(dayKeys: readonly string[], entries: readonly MonthEntry<T>[]) => MonthWeekLayout<T>;
+/** What one day cell of a week row draws: its entries from row `top` on, and how many it counts as "+N" below them. */
+export type MonthCellFit<T> = {
+    /** The first row below the bars drawn over this day. */
+    top: number;
+    shown: T[];
+    hidden: number;
+};
+export type MonthWeekFit<T> = {
+    /** The bars drawn whole; a bar that does not fit on one of its days is counted on each of them instead. */
+    bars: MonthBar<T>[];
+    cells: MonthCellFit<T>[];
+};
+/**
+ * Fits a week row into cells that have room for `capacity` rows each. A cell whose entries all fit draws them all;
+ * otherwise it gives its last row to "+N", which counts every entry of the day that is not drawn, hidden bars included.
+ * A bar is drawn only when it fits on every day it covers, so it is never cut off by a count.
+ */
+export declare const fitMonthWeek: <T>(layout: MonthWeekLayout<T>, capacity: number) => MonthWeekFit<T>;
+/** How many rows of `lane` height with `gap` between them fit into `height`. */
+export declare const monthLaneCapacity: (height: number, lane: number, gap: number) => number;

package/dist/types/content/index.d.ts

@@ -1,4 +1,4 @@
-export type { CalendarAttendee, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarRecurrence, CalendarResource, CalendarView, } from "./Calendar";
+export type { CalendarAttendee, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarLabels, CalendarProps, CalendarQuickCreateControls, CalendarRecurrence, CalendarResource, CalendarSelectionControls, CalendarView, } from "./Calendar";
 export { default as Calendar } from "./Calendar";
 export type { ChartKind, ChartLabels, ChartProps, ChartRenderOptions } from "./Chart";
 export { default as Chart } from "./Chart";

package/dist/types/inputs/date-picker.d.ts

@@ -23,6 +23,13 @@ export declare const yearMonth: (date: Date, context?: DateContext) => {
     month: number;
 };
 export declare const monthDate: (year: number, month: number, context?: DateContext) => Date;
+/**
+ * Milliseconds from `now` until the next calendar day starts in the picker's
+ * time zone, so a panel left open past midnight moves its today mark on time.
+ * The next day's start is resolved from its date key: where a DST change skips
+ * or repeats midnight, the day starts at its first existing instant.
+ */
+export declare const msUntilNextDay: (now: Date, context?: DateContext) => number;
 export declare const parseDateValue: (value: string | null | undefined, context?: DateContext) => Date;
 export declare const displayDate: (value: string | null | undefined, context?: DateContext) => string;
 export declare const dateTimeInput: (value: string | null | undefined, context?: DateContext) => string;

package/dist/types/intl/messages.d.ts

@@ -219,6 +219,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         time: string;
     }) => string;
     today: string;
+    todayDate: ({ date }: {
+        date: string;
+    }) => string;
     day: string;
     week: string;
     weekShort: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",