@wix/headless-bookings 0.0.55 → 0.0.57

package/dist/react/core/booking-form/BookingForm.d.ts

@@ -9,11 +9,18 @@
  * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
  */
 import * as React from 'react';
-import type { FormValues } from '@wix/form-public';
-import { forms } from '@wix/forms';
-import { type ValidationResult } from '../../../services/booking-form/booking-form.js';
+import { type FormValues } from '@wix/form-public';
+import { forms, submissions } from '@wix/forms';
+import { BookingFormConfigurationError, type ValidationResult } from '../../../services/booking-form/booking-form.js';
 import { Form } from '@wix/headless-forms/react';
 type FieldMap = Parameters<typeof Form.Fields>[0]['fieldMap'];
+export type Submit = () => Promise<submissions.GetSubmissionResponse['submission'] | undefined>;
+export type ValidateStep = (stepId: string) => Promise<boolean>;
+export type FormHandle = {
+    submit: Submit;
+    validate: () => Promise<boolean>;
+    validateStep?: ValidateStep;
+};
 /**
  * Render props data provided to BookingForm children
  */
@@ -26,19 +33,23 @@ export interface BookingFormRenderProps {
     formSubmission: FormValues | null;
     /** Action to store form submission data */
     setFormSubmission: (formValues: FormValues) => void;
-    /** Action to validate the form */
-    validateFormSubmission: () => Promise<ValidationResult>;
+    /** Action to validate the form fields. Returns true if valid, false if there are errors. */
+    validateFormSubmission: () => Promise<boolean>;
     /** Merged field map (DEFAULT_BOOKING_FIELD_MAP + user overrides) */
     fields: FieldMap;
+    /** Ref to access form methods imperatively (pass to Form.Fields) */
+    formRef: React.RefObject<FormHandle | null>;
 }
 /**
  * Base props shared by all BookingForm config patterns
  */
 interface BookingFormBaseProps {
+    /** Optional service IDs to pass to FormService (will be merged into additionalMetadata) */
+    serviceIds?: string[];
     /** Optional additional metadata to pass to FormService */
     additionalMetadata?: Record<string, string | string[]>;
-    /** Optional partial field map to override default booking field components */
-    fieldMap?: Partial<FieldMap>;
+    /** Field map to override default booking field components */
+    fieldMap: FieldMap;
     /** Render prop function that receives form data and actions */
     children: (data: BookingFormRenderProps) => React.ReactNode;
 }
@@ -46,13 +57,14 @@ interface BookingFormBaseProps {
  * Props for BookingForm with formId (client-side loading)
  */
 interface BookingFormWithFormIdProps extends BookingFormBaseProps {
-    /** The form ID to load (client-side loading) */
-    formId: string;
+    /** The form ID to load (client-side loading) if not provided, the formId will be extracted from the selected service if available */
+    formId?: string;
     /** Pre-loaded form - not used in this mode */
     form?: never;
 }
 /**
  * Props for BookingForm with pre-loaded form (SSR/SSG)
+ * Returns undefined if formId should be extracted from services by the service layer
  */
 interface BookingFormWithFormProps extends BookingFormBaseProps {
     /** Pre-loaded form object (SSR/SSG) - must be from bookings namespace */
@@ -136,4 +148,94 @@ export type BookingFormProps = BookingFormWithFormIdProps | BookingFormWithFormP
  * ```
  */
 export declare function Root(props: BookingFormProps): React.ReactNode;
-export {};
+/**
+ * Render props for BookingForm.Actions component
+ */
+export interface ActionsRenderProps {
+    /** Action to validate the form submission */
+    validateFormSubmission: () => Promise<ValidationResult>;
+    /** The form ID being used */
+    formId: string;
+    /** Current form values */
+    formValues: FormValues;
+    /** Current form submission data */
+    formSubmission: FormValues | null;
+}
+/**
+ * Props for BookingForm.Actions component
+ */
+export interface ActionsProps {
+    children: (data: ActionsRenderProps) => React.ReactNode;
+}
+/**
+ * Core component that provides booking form actions via render props.
+ * Must be used within BookingForm.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreBookingForm.Root formId="form-123">
+ *   {({ fields }) => (
+ *     <>
+ *       <Form.Fields fieldMap={fields} />
+ *       <CoreBookingForm.Actions>
+ *         {({ validateFormSubmission, formId }) => (
+ *           <button onClick={async () => {
+ *             const result = await validateFormSubmission();
+ *             console.log('Validation result:', result);
+ *           }}>
+ *             Validate Form
+ *           </button>
+ *         )}
+ *       </CoreBookingForm.Actions>
+ *     </>
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ */
+export declare function Actions(props: ActionsProps): React.ReactNode;
+/**
+ * Props for BookingForm.LoadError component
+ */
+export interface LoadErrorProps {
+    /** The error that was caught */
+    error: Error;
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom content to render. If not provided, displays the error message. */
+    children?: React.ReactNode;
+    /** Additional CSS class name */
+    className?: string;
+}
+/**
+ * Component to display when BookingForm fails to load due to configuration errors.
+ * This component should be used in an error boundary to catch BookingFormConfigurationError.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ *
+ * // Default usage with className
+ * <CoreBookingForm.LoadError error={error} className="text-destructive p-4" />
+ *
+ * // Custom content
+ * <CoreBookingForm.LoadError error={error}>
+ *   <div className="error-container">
+ *     <h3>Error Loading Form</h3>
+ *     <p>Please try again later.</p>
+ *   </div>
+ * </CoreBookingForm.LoadError>
+ *
+ * // With asChild for custom components
+ * <CoreBookingForm.LoadError error={error} asChild>
+ *   <CustomErrorComponent />
+ * </CoreBookingForm.LoadError>
+ * ```
+ */
+export declare const LoadError: React.ForwardRefExoticComponent<LoadErrorProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Type guard to check if an error is a BookingFormConfigurationError
+ */
+export declare function isBookingFormConfigurationError(error: unknown): error is BookingFormConfigurationError;
+export { BookingFormConfigurationError };

package/dist/react/core/booking-form/BookingForm.js

@@ -1,58 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+/**
+ * Core BookingForm Component
+ *
+ * Provides low-level access to booking form functionality via render props.
+ * Wraps CoreForm.Root and provides merged field map with booking defaults.
+ *
+ * Supports two modes:
+ * 1. Client-side: Provide formId to load the form dynamically
+ * 2. SSR/SSG: Provide a pre-loaded form object for server-side rendering
+ */
+import * as React from 'react';
+import { useMemo, useRef, useCallback } from 'react';
 import { WixServices, useService } from '@wix/services-manager-react';
 import { createServicesMap } from '@wix/services-manager';
-import { BookingFormServiceDefinition, BookingFormService, BOOKING_FORM_NAMESPACE, } from '../../../services/booking-form/booking-form.js';
+import { UniqueFieldSuffixContextProvider, } from '@wix/form-public';
+import { BookingFormServiceDefinition, BookingFormService, BookingFormConfigurationError, BOOKING_FORM_NAMESPACE, extractFormIdFromConfig, } from '../../../services/booking-form/booking-form.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
 import { FormServiceDefinition, FormService, } from '@wix/headless-forms/services';
-// TODO: remove this when form will be updated to support optional field map
-const DEFAULT_BOOKING_FIELD_MAP = {
-    TEXT_INPUT: () => null,
-    TEXT_AREA: () => null,
-    PHONE_INPUT: () => null,
-    EMAIL_INPUT: () => null,
-    NUMBER_INPUT: () => null,
-    CHECKBOX: () => null,
-    DROPDOWN: () => null,
-    DATE_PICKER: () => null,
-    SUBMIT_BUTTON: () => null,
-    RADIO_GROUP: () => null,
-    CHECKBOX_GROUP: () => null,
-    DATE_INPUT: () => null,
-    DATE_TIME_INPUT: () => null,
-    TIME_INPUT: () => null,
-    FILE_UPLOAD: () => null,
-    SIGNATURE: () => null,
-    TEXT: () => null,
-    MULTILINE_ADDRESS: () => null,
-    RATING_INPUT: () => null,
-    TAGS: () => null,
-    PRODUCT_LIST: () => null,
-    FIXED_PAYMENT: () => null,
-    PAYMENT_INPUT: () => null,
-    DONATION: () => null,
-    APPOINTMENT: () => null,
-    IMAGE_CHOICE: () => null,
-};
 // ============================================================================
 // Component
 // ============================================================================
 /**
  * Extracts the form ID from props (either directly or from form object)
+ * Returns undefined if formId should be extracted from services by the service layer
  */
 function extractFormIdFromProps(props) {
-    if ('formId' in props && props.formId) {
-        return props.formId;
-    }
-    if ('form' in props && props.form) {
-        const form = props.form;
-        const formId = form.id ||
-            form._id;
-        if (!formId) {
-            throw new Error('BookingForm: Could not extract form ID from provided form object.');
-        }
-        return formId;
+    // Convert props to config-like object for the utility
+    const config = props.form
+        ? { form: props.form }
+        : props.formId
+            ? { formId: props.formId }
+            : undefined;
+    const formId = extractFormIdFromConfig(config);
+    // If form was provided but we couldn't extract formId, that's an error
+    if (props.form && !formId) {
+        throw new Error('BookingForm: Could not extract form ID from provided form object.');
     }
-    throw new Error('BookingForm: Either formId or form must be provided.');
+    return formId;
 }
 /**
  * Core component that provides booking form data via render props.
@@ -123,41 +107,75 @@ function extractFormIdFromProps(props) {
  * ```
  */
 export function Root(props) {
-    const { additionalMetadata, fieldMap: userFieldMap, children } = props;
+    const { serviceIds, additionalMetadata, fieldMap, children } = props;
     // Determine if we have a pre-loaded form
     const hasPreloadedForm = 'form' in props && props.form;
     const preloadedForm = hasPreloadedForm ? props.form : null;
     // Extract formId from props
-    const formId = extractFormIdFromProps(props);
-    // Merge user's partial field map with booking defaults
-    const fields = useMemo(() => ({
-        // ...DEFAULT_BOOKING_FIELD_MAP, // TODO: Add default field map
-        ...userFieldMap,
-    }), [userFieldMap]);
+    const propsFormId = extractFormIdFromProps(props);
+    // Try to get BookingService if available (to extract formId and serviceIds from services)
+    let bookingService = null;
+    try {
+        bookingService = useService(BookingServiceDefinition);
+    }
+    catch {
+        // BookingService not available - that's ok if formId and serviceIds were provided explicitly
+        bookingService = null;
+    }
+    // Determine final formId: use props formId if provided, otherwise extract from services
+    let formId = propsFormId;
+    if (!formId && bookingService) {
+        const serviceSelections = bookingService.serviceSelections.get();
+        const services = serviceSelections.length
+            ? serviceSelections.map((s) => s.service)
+            : [];
+        formId = services.find((s) => s.form?._id)?.form?._id;
+    }
+    // Determine final serviceIds: use props serviceIds if provided, otherwise extract from services
+    let resolvedServiceIds = serviceIds;
+    if (!resolvedServiceIds && bookingService) {
+        const serviceSelections = bookingService.serviceSelections.get();
+        resolvedServiceIds = serviceSelections
+            .map((s) => s.service._id)
+            .filter((id) => Boolean(id));
+    }
+    // Merge serviceIds into additionalMetadata
+    const mergedMetadata = {
+        ...additionalMetadata,
+        ...(resolvedServiceIds &&
+            resolvedServiceIds.length > 0 && { serviceIds: resolvedServiceIds }),
+    };
     // Build formServiceConfig for FormService
-    // If we have a pre-loaded form, pass it directly; otherwise pass formId
+    // If we have a pre-loaded form, pass it directly
+    // If we have formId, pass it with namespace and metadata
     const formServiceConfig = useMemo(() => {
         if (preloadedForm) {
             return { form: preloadedForm };
         }
-        return {
-            formId,
-            namespace: BOOKING_FORM_NAMESPACE,
-            ...(additionalMetadata && { additionalMetadata }),
-        };
-    }, [formId, additionalMetadata, preloadedForm]);
+        // Only provide config if formId is available
+        if (formId) {
+            return {
+                formId,
+                namespace: BOOKING_FORM_NAMESPACE,
+                ...(Object.keys(mergedMetadata).length > 0 && {
+                    additionalMetadata: mergedMetadata,
+                }),
+            };
+        }
+    }, [formId, mergedMetadata, preloadedForm]);
     // Build bookingFormServiceConfig
     const bookingFormServiceConfig = useMemo(() => {
         if (preloadedForm) {
             return { form: preloadedForm };
         }
-        return { formId };
-    }, [formId, preloadedForm]);
+        // formId is optional - service will extract from services if not provided
+        return formId ? { formId, serviceIds } : undefined;
+    }, [formId, preloadedForm, serviceIds]);
     // Both FormService and BookingFormService are added to the same WixServices context
     // This allows BookingFormService to access FormService via getService internally
     return (_jsx(WixServices, { servicesMap: createServicesMap()
             .addService(FormServiceDefinition, FormService, formServiceConfig)
-            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(BookingFormContent, { formId: formId, fields: { ...DEFAULT_BOOKING_FIELD_MAP, ...fields }, children: children }) }));
+            .addService(BookingFormServiceDefinition, BookingFormService, bookingFormServiceConfig), children: _jsx(UniqueFieldSuffixContextProvider, { children: _jsx(BookingFormContent, { fields: fieldMap, children: children }) }) }));
 }
 /**
  * Internal component that consumes BookingFormService and provides render props.
@@ -165,17 +183,139 @@ export function Root(props) {
  *
  * Note: BookingFormService internally accesses FormService to get formValues,
  * so we only need to consume BookingFormService here.
+ *
+ * Also automatically syncs form submission to BookingService when available,
+ * so Booking.Actions.Book can check canBook() correctly.
+ *
+ * Note: BookingService must be available in a parent WixServices context
+ * (typically provided by Booking.Root) for the sync to work. If BookingService
+ * is not available, useService will throw. This is expected since Booking.Actions.Book
+ * requires Booking.Root to be in the component tree.
  */
-function BookingFormContent({ formId, fields, children, }) {
+function BookingFormContent({ fields, children, }) {
     const bookingFormService = useService(BookingFormServiceDefinition);
+    // Try to get BookingService from parent context (provided by Booking.Root)
+    // Note: useService must be called unconditionally per React hooks rules.
+    // If BookingService is not available, useService will throw an error.
+    // This is expected - Booking.Actions.Book requires Booking.Root to be in the tree.
+    // We use a wrapper component pattern to handle this gracefully.
+    // For now, we'll always attempt to get it and let it throw if not available
+    // The user should wrap BookingForm with Booking.Root when using Booking.Actions.Book
+    const bookingService = useService(BookingServiceDefinition);
+    // Create internal ref for form handle
+    const formRef = useRef(null);
+    // Create validate action that uses the form ref
+    const validate = useCallback(() => {
+        return formRef.current?.validate() ?? Promise.resolve(false);
+    }, []);
+    // Wrap setFormSubmission to also sync to BookingService when available
+    const setFormSubmission = useCallback((formValues) => {
+        // Set in BookingFormService (always)
+        bookingFormService.setFormSubmission(formValues);
+        // Also set in BookingService if available (for canBook check)
+        // This allows Booking.Actions.Book to work correctly
+        if (bookingService) {
+            bookingService.actions.setFormSubmission(formValues);
+        }
+    }, [bookingFormService, bookingService]);
     const formSubmission = bookingFormService.formSubmission.get();
     const formValues = bookingFormService.formValues.get();
+    // Get formId from service (it extracts from services if not provided in config)
+    const resolvedFormId = bookingFormService.formId.get();
     return children({
-        formId,
+        formId: resolvedFormId,
         formValues,
         formSubmission,
-        setFormSubmission: bookingFormService.setFormSubmission,
-        validateFormSubmission: bookingFormService.validateFormSubmission,
+        setFormSubmission,
+        validateFormSubmission: validate,
+        formRef,
         fields,
     });
 }
+/**
+ * Core component that provides booking form actions via render props.
+ * Must be used within BookingForm.Root context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CoreBookingForm.Root formId="form-123">
+ *   {({ fields }) => (
+ *     <>
+ *       <Form.Fields fieldMap={fields} />
+ *       <CoreBookingForm.Actions>
+ *         {({ validateFormSubmission, formId }) => (
+ *           <button onClick={async () => {
+ *             const result = await validateFormSubmission();
+ *             console.log('Validation result:', result);
+ *           }}>
+ *             Validate Form
+ *           </button>
+ *         )}
+ *       </CoreBookingForm.Actions>
+ *     </>
+ *   )}
+ * </CoreBookingForm.Root>
+ * ```
+ */
+export function Actions(props) {
+    const bookingFormService = useService(BookingFormServiceDefinition);
+    const formSubmission = bookingFormService.formSubmission.get();
+    const formValues = bookingFormService.formValues.get();
+    const formId = bookingFormService.formId.get();
+    return props.children({
+        validateFormSubmission: bookingFormService.validateFormSubmission,
+        formId,
+        formValues,
+        formSubmission,
+    });
+}
+/**
+ * Component to display when BookingForm fails to load due to configuration errors.
+ * This component should be used in an error boundary to catch BookingFormConfigurationError.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import * as CoreBookingForm from '@wix/headless-bookings/react/core/booking-form';
+ *
+ * // Default usage with className
+ * <CoreBookingForm.LoadError error={error} className="text-destructive p-4" />
+ *
+ * // Custom content
+ * <CoreBookingForm.LoadError error={error}>
+ *   <div className="error-container">
+ *     <h3>Error Loading Form</h3>
+ *     <p>Please try again later.</p>
+ *   </div>
+ * </CoreBookingForm.LoadError>
+ *
+ * // With asChild for custom components
+ * <CoreBookingForm.LoadError error={error} asChild>
+ *   <CustomErrorComponent />
+ * </CoreBookingForm.LoadError>
+ * ```
+ */
+export const LoadError = React.forwardRef((props, ref) => {
+    const { error, asChild, children, className, ...otherProps } = props;
+    const errorData = { error, message: error.message };
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            ref,
+            className,
+            'data-testid': 'booking-form-load-error',
+            role: 'alert',
+            ...errorData,
+            ...otherProps,
+        });
+    }
+    return (_jsx("div", { ref: ref, className: className, "data-testid": "booking-form-load-error", role: "alert", ...otherProps, children: children ?? error.message }));
+});
+/**
+ * Type guard to check if an error is a BookingFormConfigurationError
+ */
+export function isBookingFormConfigurationError(error) {
+    return error instanceof BookingFormConfigurationError;
+}
+// Re-export the error class for convenience
+export { BookingFormConfigurationError };

package/dist/react/time-slot-list/TimeSlot.d.ts

@@ -8,6 +8,7 @@
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
 /**
  * Props for TimeSlot.Root component
@@ -131,6 +132,7 @@ export interface SelectProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to select this time slot.
@@ -150,6 +152,13 @@ export interface SelectProps {
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -171,6 +180,7 @@ export interface ClearStaffSelectionProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (timeSlot: TimeSlotType) => void;
 }
 /**
  * Button to clear staff selection while keeping the slot selected.
@@ -191,6 +201,13 @@ export interface ClearStaffSelectionProps {
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -324,6 +341,7 @@ export interface SelectStaffMemberProps {
     }) => React.ReactNode);
     className?: string;
     label?: string;
+    onClicked?: (staffMember: CoreTimeSlot.StaffMemberData) => void;
 }
 /**
  * Button to select this staff member.
@@ -343,6 +361,13 @@ export interface SelectStaffMemberProps {
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (

package/dist/react/time-slot-list/TimeSlot.js

@@ -139,6 +139,13 @@ Duration.displayName = 'TimeSlot.Duration';
  *   <button className="btn-primary">Book this slot</button>
  * </TimeSlot.Actions.Select>
  *
+ * // With onClicked callback for navigation
+ * <TimeSlot.Actions.Select
+ *   onClicked={(timeSlot) => {
+ *     router.push(`/booking/confirm/${timeSlot.localStartDate}`);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.Select>
  *   {({ isSelected, bookable, onClick }) => (
@@ -150,14 +157,18 @@ Duration.displayName = 'TimeSlot.Duration';
  * ```
  */
 export const Select = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable }) => {
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ selectTimeSlot, isSelected, bookable, timeSlot }) => {
+            const handleClick = () => {
+                selectTimeSlot();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionSelect, "data-selected": isSelected, "data-bookable": bookable, customElement: children, customElementProps: {
-                    onClick: selectTimeSlot,
+                    onClick: handleClick,
                     disabled: !bookable,
                     isSelected,
                     bookable,
-                }, children: _jsx("button", { onClick: selectTimeSlot, disabled: !bookable, children: label }) }));
+                }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, children: label }) }));
         } }));
 });
 Select.displayName = 'TimeSlot.Actions.Select';
@@ -180,6 +191,13 @@ Select.displayName = 'TimeSlot.Actions.Select';
  *   <button className="btn-secondary">Clear staff</button>
  * </TimeSlot.Actions.ClearStaffSelection>
  *
+ * // With onClicked callback
+ * <TimeSlot.Actions.ClearStaffSelection
+ *   onClicked={(timeSlot) => {
+ *     console.log('Staff selection cleared for', timeSlot.localStartDate);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.Actions.ClearStaffSelection>
  *   {({ onClick }) => <button onClick={onClick}>Change selection</button>}
@@ -187,14 +205,18 @@ Select.displayName = 'TimeSlot.Actions.Select';
  * ```
  */
 export const ClearStaffSelection = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Change' } = props;
-    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection }) => {
+    const { asChild, children, className, label = 'Change', onClicked } = props;
+    return (_jsx(CoreTimeSlot.Actions, { children: ({ clearStaffSelection, timeSlot }) => {
             if (!clearStaffSelection) {
                 return null;
             }
+            const handleClick = () => {
+                clearStaffSelection();
+                onClicked?.(timeSlot);
+            };
             return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotActionClearStaffSelection, customElement: children, customElementProps: {
-                    onClick: clearStaffSelection,
-                }, children: _jsx("button", { onClick: clearStaffSelection, children: label }) }));
+                    onClick: handleClick,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
         } }));
 });
 ClearStaffSelection.displayName = 'TimeSlot.Actions.ClearStaffSelection';
@@ -324,6 +346,13 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  *   <button className="btn-primary">Choose Staff</button>
  * </TimeSlot.StaffMember.Actions.Select>
  *
+ * // With onClicked callback
+ * <TimeSlot.StaffMember.Actions.Select
+ *   onClicked={(staffMember) => {
+ *     console.log('Selected staff:', staffMember.name);
+ *   }}
+ * />
+ *
  * // Using render prop pattern
  * <TimeSlot.StaffMember.Actions.Select>
  *   {({ isSelected, onClick }) => (
@@ -335,11 +364,17 @@ StaffMemberName.displayName = 'TimeSlot.StaffMember.Name';
  * ```
  */
 export const SelectStaffMember = React.forwardRef((props, ref) => {
-    const { asChild, children, className, label = 'Select' } = props;
-    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
-                onClick: selectStaffMember,
-                isSelected,
-            }, children: _jsx("button", { onClick: selectStaffMember, children: label }) })) }));
+    const { asChild, children, className, label = 'Select', onClicked } = props;
+    return (_jsx(CoreTimeSlot.StaffMemberActions, { children: ({ selectStaffMember, isSelected, staffMember }) => {
+            const handleClick = () => {
+                selectStaffMember();
+                onClicked?.(staffMember);
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.timeSlotStaffMemberActionSelect, "data-selected": isSelected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    isSelected,
+                }, children: _jsx("button", { onClick: handleClick, children: label }) }));
+        } }));
 });
 SelectStaffMember.displayName = 'TimeSlot.StaffMember.Actions.Select';
 /**