@medalsocial/meda 3.9.0 → 3.9.1

package/dist/booking/time-screen.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import type { BookingDaypart, BookingFormat } from './format.js';
 import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
@@ -70,8 +70,23 @@ export declare function dayFreeMarks(free: number): 0 | 1 | 2 | 3;
 export declare function DefaultDayChip({ label, selected, className, onSelect, free, freeLabel, }: DayChipProps): import("react").JSX.Element;
 export interface TimeChipProps {
     startTs: number;
-    /** «14:30», a party's «15:00 → 16:00», or the current hour's «15:00 · Current time». */
+    /**
+     * «14:30», a party's «15:00 → 16:00», a simultaneous party's
+     * «15:00 (Mia with Ada · Leo with Bo)», or the current hour's
+     * «15:00 · Current time». Always the chip's whole sentence.
+     */
     label: string;
+    /**
+     * `label` as elements, in the label pack's own order, with a simultaneous
+     * party's seating in a span that may wrap — so a long seating breaks onto
+     * the next line instead of widening the chip past the screen.
+     */
+    richLabel?: ReactNode;
+    /**
+     * What a week-grid column shows: too narrow for the seating, so only the
+     * hour, with `label` as the accessible name and the tooltip.
+     */
+    compactLabel?: string;
     /** One of the nearest alternatives to a slot that was just taken. */
     nearest: boolean;
     /** The screen-reader text that says so. */
@@ -83,7 +98,7 @@ export interface TimeChipProps {
     onPick: () => void;
 }
 /** One time chip. */
-export declare function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }: TimeChipProps): import("react").JSX.Element;
+export declare function DefaultTimeChip({ label, richLabel, compactLabel, nearest, nearestLabel, current, className, onPick, }: TimeChipProps): import("react").JSX.Element;
 export interface TimeScreenComponents {
     DayChip?: ComponentType<DayChipProps>;
     TimeChip?: ComponentType<TimeChipProps>;

package/dist/booking/time-screen.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, X } from 'lucide-react';
 import { useEffect, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
-import { renderLabel } from './internal/label-parts.js';
+import { labelParts, renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
 import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
@@ -123,11 +123,13 @@ export function DefaultDayChip({ label, selected, className, onSelect, free, fre
     return (_jsxs(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: cn('h-auto min-h-11 flex-col gap-1 py-1.5', free === 0 && !selected && 'text-muted-foreground', className), children: [_jsx("span", { children: label }), free === 0 && freeLabel ? (_jsx("span", { className: "text-[11px] font-medium leading-none", children: freeLabel })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-testid": "day-free-marks", className: "flex gap-0.5", children: [1, 2, 3].map((mark) => (_jsx("span", { "data-filled": mark <= marks ? '' : undefined, className: cn('block h-[3px] w-2 rounded-full bg-current', mark > marks && 'opacity-25') }, mark))) }), freeLabel && _jsx("span", { className: "sr-only", children: freeLabel })] }))] }));
 }
 /** One time chip. */
-export function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }) {
+export function DefaultTimeChip({ label, richLabel, compactLabel, nearest, nearestLabel, current, className, onPick, }) {
     if (current) {
         return (_jsx(BookingButton, { variant: "outline", size: "lg", disabled: true, "aria-current": "true", className: className, children: label }));
     }
-    return (_jsxs(BookingButton, { variant: "outline", size: "lg", onClick: onPick, className: className, children: [label, nearest && (_jsxs("span", { className: "sr-only", children: [" ", nearestLabel] }))] }));
+    // A compact chip draws less than its sentence, so the sentence becomes its name.
+    const compact = compactLabel !== undefined;
+    return (_jsxs(BookingButton, { variant: "outline", size: "lg", onClick: onPick, "aria-label": compact ? `${label}${nearest ? ` ${nearestLabel}` : ''}` : undefined, title: compact ? label : undefined, className: cn(!compact && richLabel !== undefined && 'h-auto max-w-full py-2 whitespace-normal', className), children: [compact && compactLabel, !compact && richLabel !== undefined && (_jsx("span", { className: "min-w-0 text-center", children: richLabel })), !compact && richLabel === undefined && label, nearest && !compact && (_jsxs("span", { className: "sr-only", children: [" ", nearestLabel] }))] }));
 }
 // ---------------------------------------------------------------------------
 // View logic
@@ -174,16 +176,19 @@ function buildDayStrip(clock, slots, days, takenSlotTs, currentSlotTs, openDays,
 /**
  * The one chip a family taps: `15:00 → 16:00`, or the parallel form
  * `15:00 (Name with Stylist · Name with Stylist)`. The parallel chip names the
- * people where the visitor has given a name and the service otherwise.
+ * people where the visitor has given a name and the service otherwise; its
+ * seating is drawn so it can wrap, and a week column shows the hour alone.
  */
-function partyChipLabel(labels, clock, slot, party) {
+function partyChipText(labels, clock, slot, party) {
     if (slot.mode === 'sequential') {
-        return fillLabel(labels['time.party.sequential'], {
-            start: clock.formatTime(slot.startTs),
-            end: clock.formatTime(party.chipEndTs(slot)),
-        });
+        return {
+            label: fillLabel(labels['time.party.sequential'], {
+                start: clock.formatTime(slot.startTs),
+                end: clock.formatTime(party.chipEndTs(slot)),
+            }),
+        };
     }
-    const seats = slot.seats.map((seat, index) => {
+    const names = slot.seats.map((seat, index) => {
         const item = party.items[index];
         const who = item?.bookedForName ?? (item ? visitName(item) : '');
         const stylist = party.resolveStylistName(seat.resourceId);
@@ -191,10 +196,16 @@ function partyChipLabel(labels, clock, slot, party) {
         // is a reload of the resource list, not a reason to hide the slot.
         return stylist === null ? who : fillLabel(labels['time.party.seat'], { who, stylist });
     });
-    return fillLabel(labels['time.party.parallel'], {
-        time: clock.formatTime(slot.startTs),
-        seats: seats.join(labelText(labels['time.party.seatSeparator'])),
-    });
+    const time = clock.formatTime(slot.startTs);
+    const seats = names.join(labelText(labels['time.party.seatSeparator']));
+    return {
+        label: fillLabel(labels['time.party.parallel'], { time, seats }),
+        richLabel: labelParts(labels['time.party.parallel'], {
+            time,
+            seats: _jsx("span", { className: "font-normal text-muted-foreground", children: seats }),
+        }),
+        compactLabel: time,
+    };
 }
 /**
  * The instants on offer — ONE per instant. Availability is per (start,
@@ -426,7 +437,7 @@ function WeekGrid({ labels, words, format, days, offered, currentSlotTs, nearest
                         const partySlot = partyByStart.get(slot.startTs);
                         const current = slot.startTs === currentSlotTs;
                         const isNearest = !current && nearest.has(slot.startTs);
-                        return (_jsx("li", { children: _jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('h-auto min-h-11 w-full min-w-0 whitespace-normal px-1 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }) }, slot.startTs));
+                        return (_jsx("li", { children: _jsx(TimeChip, { startTs: slot.startTs, ...chipText(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('h-auto min-h-11 w-full min-w-0 whitespace-normal px-1 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }) }, slot.startTs));
                     }) })), more > 0 && (_jsx(BookingButton, { variant: "link", size: "sm", onClick: () => setUnfolded(key), className: "w-full", children: renderLabel(words.more, { count: more }) })), bookable === 0 &&
                     (alternative && party ? (_jsx(BookingButton, { size: "sm", onClick: () => party.onPick(alternative), className: "h-auto min-h-11 w-full whitespace-normal tabular-nums", children: renderLabel(labels['time.parallel.accept'], {
                             time: clock.formatTime(alternative.startTs),
@@ -435,13 +446,13 @@ function WeekGrid({ labels, words, format, days, offered, currentSlotTs, nearest
     return (_jsxs("div", { "data-testid": "time-week", className: cn('space-y-4', className), children: [_jsx("ol", { className: "grid grid-cols-7 gap-2", children: columns }), !anyBookable && empty, next, todayOpen && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
 }
 /** A time chip's words: the hour, the held hour marked, or a family's whole visit. */
-function chipLabel(labels, clock, slot, current, partySlot, party) {
+function chipText(labels, clock, slot, current, partySlot, party) {
     const time = clock.formatTime(slot.startTs);
     if (current)
-        return fillLabel(labels['time.current'], { time });
+        return { label: fillLabel(labels['time.current'], { time }) };
     if (partySlot && party)
-        return partyChipLabel(labels, clock, partySlot, party);
-    return time;
+        return partyChipText(labels, clock, partySlot, party);
+    return { label: time };
 }
 /** The weekend note as one plain sentence, for a card that books without the notice on screen. */
 function weekendSentenceText(labels, format, note) {
@@ -594,7 +605,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         const partySlot = partyByStart.get(slot.startTs);
                         const current = slot.startTs === currentSlotTs;
                         const isNearest = !current && nearest.has(slot.startTs);
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, ...chipText(labels, clock, slot, current, partySlot, party), compactLabel: undefined, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {