@medalsocial/meda 3.9.1 → 3.10.0

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

@@ -131,6 +131,13 @@ export interface WhoScreenProps {
         adult: WizardPerson & {
             adult: true;
         };
+        /**
+         * Start with nobody, rather than one child: for a salon where a grown-up
+         * booking for themselves is as common as a child. Children go down to 0
+         * and the grown-up's row is a free choice either way; «next» waits for an
+         * answer. Default `false`.
+         */
+        startEmpty?: boolean;
     };
     /** Shown under the heading for a guest — e.g. an offer to log in. */
     loginRow?: ReactNode;

package/dist/booking/who-screen.js

@@ -142,7 +142,8 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
  * A guest's party: how many children (a stepper) and whether the grown-up
  * comes too (a check row), so «a child and me» is one booking without an
  * account. Starts at one child, which is the common answer, so «next» is live
- * from the first frame.
+ * from the first frame — or, with `startEmpty`, at nobody, so a grown-up
+ * booking for themselves is one tap like anyone else.
  */
 function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, }) {
     const adultOn = people.some((person) => person.key === party.adult.key);
@@ -154,8 +155,10 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     // stepper adds and removes the unnamed ones after them.
     const generatedKeys = new Set(Array.from({ length: maxPeople }, (_, index) => party.child(index + 1).key));
     const named = childSeats.filter((person) => !generatedKeys.has(person.key));
+    const startEmpty = party.startEmpty === true;
     // The stepper never takes a named child away: their own card does that.
-    const floor = Math.max(named.length, adultOn ? 0 : 1);
+    // Without `startEmpty` it never empties the booking either.
+    const floor = Math.max(named.length, adultOn || startEmpty ? 0 : 1);
     const answer = (count, withAdult) => {
         const kept = named;
         const used = new Set(kept.map((person) => person.key));
@@ -174,9 +177,11 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     const wasEmpty = useRef(false);
     useEffect(() => {
         const empty = people.length === 0;
-        if (empty && !wasEmpty.current)
+        if (empty && !wasEmpty.current && !startEmpty)
             answer(1, false);
-        wasEmpty.current = empty;
+        // An empty answer `startEmpty` left alone is not one already seen: if the
+        // flag goes, the child is still filled in.
+        wasEmpty.current = empty && !startEmpty;
     });
     const text = (key, values = {}) => {
         const label = labels[key];
@@ -184,8 +189,9 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     };
     const stepButton = 'flex size-11 shrink-0 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40';
     return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('flex items-center gap-4 rounded-lg border border-border bg-card px-5 py-4', classNames?.card), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-semibold", children: text('who.party.children') }), labels['who.party.childrenNote'] && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.childrenNote']) }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": text('who.party.fewer'), disabled: children <= floor, onClick: () => answer(children - 1, adultOn), className: stepButton, children: _jsx(Minus, { "aria-hidden": "true", className: "size-4" }) }), _jsxs("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-6 text-center text-lg font-bold tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: children }), _jsx("span", { className: "sr-only", children: text('who.party.count', { count: children }) })] }), _jsx("button", { type: "button", "aria-label": text('who.party.more'), "aria-describedby": full ? LIMIT_ID : undefined, disabled: full, onClick: () => answer(children + 1, adultOn), className: stepButton, children: _jsx(Plus, { "aria-hidden": "true", className: "size-4" }) })] })] }), _jsxs(CheckRow, { checked: adultOn, 
-                // Never down to nobody: the last person in the booking stays.
-                disabled: (!adultOn && full) || (adultOn && children === 0), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
+                // Never down to nobody: the last person in the booking stays — unless
+                // the booking may start (and so stand) empty.
+                disabled: (!adultOn && full) || (adultOn && children === 0 && !startEmpty), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && children > 0 && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
 }
 /**
  * The guest chips as a radio group. Roving focus: one chip is in the tab

package/package.json

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