@wix/headless-bookings 0.0.37 → 0.0.39

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

@@ -7,34 +7,26 @@
  */
 import React from 'react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type TimeSlotServiceConfig } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Context value for TimeSlot components
+ * Props for TimeSlot.Root component
  */
-export interface TimeSlotContextValue {
-    /** The current time slot data */
-    timeSlot: TimeSlotType;
-    /** Whether this time slot is currently selected */
-    isSelected: boolean;
-    /** Action to select this time slot */
-    selectTimeSlot: () => void;
-}
-/**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export declare function useTimeSlotContext(): TimeSlotContextValue;
-/**
- * Props for TimeSlotProvider
- */
-export interface TimeSlotProviderProps {
+export interface RootProps {
     children: React.ReactNode;
-    timeSlot: TimeSlotType;
+    config: TimeSlotServiceConfig;
 }
 /**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Context value for StaffMember components
  */

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

@@ -7,41 +7,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useService } from '@wix/services-manager-react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition } from '../../../services/time-slot-list/time-slot-list.def.js';
 import { ANY_STAFF_MEMBER_ID, BookingServiceDefinition, } from '../../../services/booking/booking.js';
-const TimeSlotContext = React.createContext(null);
+import { TimeSlotServiceDefinition, TimeSlotService, } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export function useTimeSlotContext() {
-    const context = React.useContext(TimeSlotContext);
-    if (!context) {
-        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
-    }
-    return context;
-}
-/**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export function TimeSlotProvider(props) {
-    const { children, timeSlot } = props;
-    const service = useService(TimeSlotListServiceDefinition);
-    const bookingService = useService(BookingServiceDefinition);
-    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
-        selectedTimeSlot?.location?._id === timeSlot.location?._id;
-    const selectTimeSlot = () => {
-        service.actions.selectSlot(timeSlot);
-    };
-    const contextValue = {
-        timeSlot,
-        isSelected,
-        selectTimeSlot,
-    };
-    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), children: props.children }));
 }
 const StaffMemberContext = React.createContext(null);
 /**
@@ -89,7 +72,12 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
     const startDate = new Date(timeSlot.localStartDate);
     const endDate = new Date(timeSlot.localEndDate);
     const locationName = timeSlot.location?.name ?? '';
@@ -127,9 +115,16 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
+    };
     const bookable = timeSlot.bookable ?? false;
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
@@ -165,7 +160,8 @@ export function Actions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { timeSlot } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;

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

@@ -7,9 +7,31 @@
  */
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
-export type { TimeSlotProviderProps } from '../core/time-slot-list/TimeSlot.js';
+import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Props for TimeSlot.Root component
+ */
+export interface RootProps {
+    children?: React.ReactNode;
+    timeSlot: TimeSlotType;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for TimeSlot.StartDate component
  */

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

@@ -10,8 +10,24 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
-// Re-export TimeSlotProvider from core for use by TimeSlotRepeater
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, timeSlot, asChild, className, ...attrs } = props;
+    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...attrs, children: children }) }));
+});
+Root.displayName = 'TimeSlot.Root';
 // ============================================================================
 // TestIds
 // ============================================================================

package/cjs/dist/react/time-slot-list/TimeSlotList.js

@@ -7,8 +7,8 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
-import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
-import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
+import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -122,9 +122,7 @@ TimeSlots.displayName = 'TimeSlotList.TimeSlots';
  * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
-                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
-            } }) }));
+    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children })) }) }));
 };
 /**
  * Repeater component that renders each time slot.

package/cjs/dist/services/index.d.ts

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotServiceAPI, type TimeSlotServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';

package/cjs/dist/services/index.js

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';

package/cjs/dist/services/time-slot-list/index.d.ts

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, type DateRange, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotsFilters, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, type TimeSlotServiceAPI, type TimeSlotServiceConfig, } from './time-slot.js';

package/cjs/dist/services/time-slot-list/index.js

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, } from './time-slot.js';

package/cjs/dist/services/time-slot-list/time-slot-list.js

@@ -34,7 +34,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         end: config.endDate,
     });
     const cursorSignal = signalsService.signal(undefined);
-    // Helper functions using peek() - no subscriptions created
     const getServices = () => {
         const serviceSelections = bookingService.serviceSelections.peek();
         return serviceSelections.length
@@ -195,12 +194,19 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         }
         dateRangeSignal.set({ start: newStartDate, end: newEndDate });
     };
+    const preSelectedStaffMemberId = signalsService.computed(() => {
+        const serviceSelections = bookingService.serviceSelections.peek();
+        return serviceSelections.length
+            ? (serviceSelections[0]?.resources?.[0]?._id ?? undefined)
+            : undefined;
+    });
     let isFirstRun = true;
     signalsService.effect(() => {
         // Dependencies - trigger refetch when these change
         dateRangeSignal.get();
         bookingService.timezone.get();
         bookingService.location.get();
+        preSelectedStaffMemberId.get();
         if (isFirstRun) {
             isFirstRun = false;
             if (config.timeSlots) {

package/cjs/dist/services/time-slot-list/time-slot.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+/**
+ * API interface for the TimeSlot service
+ */
+export interface TimeSlotServiceAPI {
+    /** Reactive signal containing the time slot data */
+    timeSlotSignal: Signal<TimeSlot>;
+}
+/**
+ * Service definition for TimeSlot
+ */
+export declare const TimeSlotServiceDefinition: string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI;
+/**
+ * Configuration for TimeSlotService
+ */
+export interface TimeSlotServiceConfig {
+    timeSlot: TimeSlot;
+}
+/**
+ * Implementation of TimeSlotService
+ */
+export declare const TimeSlotService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI, TimeSlotServiceConfig>;

package/cjs/dist/services/time-slot-list/time-slot.js

@@ -0,0 +1,20 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for TimeSlot
+ */
+export const TimeSlotServiceDefinition = defineService('time-slot');
+/**
+ * Implementation of TimeSlotService
+ */
+export const TimeSlotService = implementService.withConfig()(TimeSlotServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const timeSlotSignal = signalsService.signal(config.timeSlot);
+    return {
+        timeSlotSignal,
+    };
+});

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

@@ -7,34 +7,26 @@
  */
 import React from 'react';
 import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
+import { type TimeSlotServiceConfig } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Context value for TimeSlot components
+ * Props for TimeSlot.Root component
  */
-export interface TimeSlotContextValue {
-    /** The current time slot data */
-    timeSlot: TimeSlotType;
-    /** Whether this time slot is currently selected */
-    isSelected: boolean;
-    /** Action to select this time slot */
-    selectTimeSlot: () => void;
-}
-/**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export declare function useTimeSlotContext(): TimeSlotContextValue;
-/**
- * Props for TimeSlotProvider
- */
-export interface TimeSlotProviderProps {
+export interface RootProps {
     children: React.ReactNode;
-    timeSlot: TimeSlotType;
+    config: TimeSlotServiceConfig;
 }
 /**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export declare function TimeSlotProvider(props: TimeSlotProviderProps): React.ReactNode;
+export declare function Root(props: RootProps): React.ReactNode;
 /**
  * Context value for StaffMember components
  */

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

@@ -7,41 +7,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * which provides the TimeSlotProvider context.
  */
 import React from 'react';
-import { useService } from '@wix/services-manager-react';
+import { useService, WixServices } from '@wix/services-manager-react';
+import { createServicesMap } from '@wix/services-manager';
 import { TimeSlotListServiceDefinition } from '../../../services/time-slot-list/time-slot-list.def.js';
 import { ANY_STAFF_MEMBER_ID, BookingServiceDefinition, } from '../../../services/booking/booking.js';
-const TimeSlotContext = React.createContext(null);
+import { TimeSlotServiceDefinition, TimeSlotService, } from '../../../services/time-slot-list/time-slot.js';
 /**
- * Hook to access TimeSlot context
- * @throws Error if used outside of TimeSlotProvider
- */
-export function useTimeSlotContext() {
-    const context = React.useContext(TimeSlotContext);
-    if (!context) {
-        throw new Error('TimeSlot components must be used within TimeSlotList.TimeSlotRepeater');
-    }
-    return context;
-}
-/**
- * Provider component used by TimeSlotRepeater to provide context.
- * Not used directly by consumers - only by TimeSlotList.TimeSlotRepeater.
+ * Root component that provides TimeSlot context.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root config={{ timeSlot }}>
+ *   {children}
+ * </TimeSlot.Root>
+ * ```
  */
-export function TimeSlotProvider(props) {
-    const { children, timeSlot } = props;
-    const service = useService(TimeSlotListServiceDefinition);
-    const bookingService = useService(BookingServiceDefinition);
-    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
-    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
-        selectedTimeSlot?.location?._id === timeSlot.location?._id;
-    const selectTimeSlot = () => {
-        service.actions.selectSlot(timeSlot);
-    };
-    const contextValue = {
-        timeSlot,
-        isSelected,
-        selectTimeSlot,
-    };
-    return (_jsx(TimeSlotContext.Provider, { value: contextValue, children: children }));
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(TimeSlotServiceDefinition, TimeSlotService, props.config), children: props.children }));
 }
 const StaffMemberContext = React.createContext(null);
 /**
@@ -89,7 +72,12 @@ export function StaffMemberProvider(props) {
  * ```
  */
 export function Info(props) {
-    const { timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
+    const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
     const startDate = new Date(timeSlot.localStartDate);
     const endDate = new Date(timeSlot.localEndDate);
     const locationName = timeSlot.location?.name ?? '';
@@ -127,9 +115,16 @@ export function Info(props) {
  * ```
  */
 export function Actions(props) {
-    const { selectTimeSlot, timeSlot, isSelected } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
+    const selectedTimeSlot = bookingService.serviceSelections.get()[0]?.timeSlot;
+    const isSelected = selectedTimeSlot?.startDate === timeSlot.localStartDate &&
+        selectedTimeSlot?.location?._id === timeSlot.location?._id;
+    const selectTimeSlot = () => {
+        service.actions.selectSlot(timeSlot);
+    };
     const bookable = timeSlot.bookable ?? false;
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;
     const staffFromSlot = timeSlot.availableResources[0].resources.map((r) => r._id);
@@ -165,7 +160,8 @@ export function Actions(props) {
  * ```
  */
 export function StaffMembers(props) {
-    const { timeSlot } = useTimeSlotContext();
+    const timeSlotService = useService(TimeSlotServiceDefinition);
+    const timeSlot = timeSlotService.timeSlotSignal.get();
     const service = useService(TimeSlotListServiceDefinition);
     const bookingService = useService(BookingServiceDefinition);
     const selectedStaffMemberId = bookingService.serviceSelections.get()[0]?.timeSlot?.resources?.[0]?._id;

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

@@ -7,9 +7,31 @@
  */
 import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
-export type { TimeSlotProviderProps } from '../core/time-slot-list/TimeSlot.js';
+import type { TimeSlot as TimeSlotType } from '@wix/auto_sdk_bookings_availability-time-slots';
 export type { StaffMemberData } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Props for TimeSlot.Root component
+ */
+export interface RootProps {
+    children?: React.ReactNode;
+    timeSlot: TimeSlotType;
+    asChild?: boolean;
+    className?: string;
+}
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
 /**
  * Props for TimeSlot.StartDate component
  */

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

@@ -10,8 +10,24 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
-// Re-export TimeSlotProvider from core for use by TimeSlotRepeater
-export { TimeSlotProvider } from '../core/time-slot-list/TimeSlot.js';
+/**
+ * Root component that provides time slot context.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * <TimeSlot.Root timeSlot={timeSlot}>
+ *   <TimeSlot.StartDate />
+ *   <TimeSlot.Duration />
+ * </TimeSlot.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { children, timeSlot, asChild, className, ...attrs } = props;
+    return (_jsx(CoreTimeSlot.Root, { config: { timeSlot }, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, customElement: children, ...attrs, children: children }) }));
+});
+Root.displayName = 'TimeSlot.Root';
 // ============================================================================
 // TestIds
 // ============================================================================

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

@@ -7,8 +7,8 @@ import React from 'react';
 import { GenericList } from '@wix/headless-components/react';
 import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreTimeSlotList from '../core/time-slot-list/TimeSlotList.js';
-import { TimeSlotProvider, Info as CoreTimeSlotInfo, } from '../core/time-slot-list/TimeSlot.js';
-import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, } from './TimeSlot.js';
+import * as CoreTimeSlot from '../core/time-slot-list/TimeSlot.js';
+import { StartDate as TimeSlotStartDate, EndDate as TimeSlotEndDate, Duration, Actions as TimeSlotActions, Location, StaffMembers, StaffMemberRepeater, StaffMember, Root as TimeSlotRoot, } from './TimeSlot.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -122,9 +122,7 @@ TimeSlots.displayName = 'TimeSlotList.TimeSlots';
  * Supports both ReactNode and function children patterns.
  */
 const TimeSlotItemWrapper = ({ timeSlot, children, }) => {
-    return (_jsx(TimeSlotProvider, { timeSlot: timeSlot, children: _jsx(CoreTimeSlotInfo, { children: (props) => {
-                return (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children }));
-            } }) }));
+    return (_jsx(TimeSlotRoot, { timeSlot: timeSlot, children: _jsx(CoreTimeSlot.Info, { children: (props) => (_jsx("div", { "data-testid": TestIds.timeSlotListTimeSlot, "data-bookable": props.bookable, "data-selected": props.isSelected, children: typeof children === 'function' ? children(props) : children })) }) }));
 };
 /**
  * Repeater component that renders each time slot.

package/dist/services/index.d.ts

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, type ServiceServiceAPI, type ServiceServiceConfig, type ServiceActions, type ServicePaymentData, loadServiceServiceInitialData, type SuccessServiceServiceConfigResult, type NotFoundServiceServiceConfigResult, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, type BookingServiceConfig, type BookingServiceActions, type ServiceSelection, type ServiceSelectionTimeSlot, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotServiceAPI, type TimeSlotServiceConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, type ServiceListServiceAPI, type ServiceListServiceConfig, type ServiceListFilters, type ServiceListActions, type QueryOptions, loadServiceListServiceInitialData, type SuccessServiceListServiceConfigResult, type ErrorServiceListServiceConfigResult, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, type CanBookParams, type BookResult, type BookingError, type BookActionParams, type BookChildProps, type BookProps, type BuildCheckoutParams, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, type BookingFormServiceAPI, type BookingFormServiceConfig, type BookingFormServiceInternalAPI, type ValidationResult, } from './booking-form/booking-form.js';

package/dist/services/index.js

@@ -4,7 +4,7 @@
  */
 export { ServiceService, ServiceServiceDefinition, loadServiceServiceInitialData, } from './service/service.js';
 export { BookingService, BookingServiceDefinition, } from './booking/booking.js';
-export { TimeSlotListService, TimeSlotListServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
+export { TimeSlotListService, TimeSlotListServiceDefinition, TimeSlotService, TimeSlotServiceDefinition, ViewMode, loadTimeSlotListConfig, } from './time-slot-list/index.js';
 export { ServiceListService, ServiceListServiceDefinition, loadServiceListServiceInitialData, } from './service-list/service-list.js';
 export { executeBookAction, canBook, buildBookingRequest, buildCheckoutRequest, } from './booking/book-action/index.js';
 export { BookingFormService, BookingFormServiceDefinition, } from './booking-form/booking-form.js';

package/dist/services/time-slot-list/index.d.ts

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, type DateRange, type TimeSlotListServiceAPI, type TimeSlotListServiceActions, type TimeSlotListServiceConfig, type TimeSlotsFilters, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, type LoadTimeSlotListConfigOptions, type LoadTimeSlotListConfigResult, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, type TimeSlotServiceAPI, type TimeSlotServiceConfig, } from './time-slot.js';

package/dist/services/time-slot-list/index.js

@@ -4,3 +4,4 @@
  */
 export { TimeSlotListServiceDefinition, ViewMode, } from './time-slot-list.def.js';
 export { TimeSlotListService, loadTimeSlotListConfig, } from './time-slot-list.js';
+export { TimeSlotService, TimeSlotServiceDefinition, } from './time-slot.js';

package/dist/services/time-slot-list/time-slot-list.js

@@ -34,7 +34,6 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         end: config.endDate,
     });
     const cursorSignal = signalsService.signal(undefined);
-    // Helper functions using peek() - no subscriptions created
     const getServices = () => {
         const serviceSelections = bookingService.serviceSelections.peek();
         return serviceSelections.length
@@ -195,12 +194,19 @@ export const TimeSlotListService = implementService.withConfig()(TimeSlotListSer
         }
         dateRangeSignal.set({ start: newStartDate, end: newEndDate });
     };
+    const preSelectedStaffMemberId = signalsService.computed(() => {
+        const serviceSelections = bookingService.serviceSelections.peek();
+        return serviceSelections.length
+            ? (serviceSelections[0]?.resources?.[0]?._id ?? undefined)
+            : undefined;
+    });
     let isFirstRun = true;
     signalsService.effect(() => {
         // Dependencies - trigger refetch when these change
         dateRangeSignal.get();
         bookingService.timezone.get();
         bookingService.location.get();
+        preSelectedStaffMemberId.get();
         if (isFirstRun) {
             isFirstRun = false;
             if (config.timeSlots) {

package/dist/services/time-slot-list/time-slot.d.ts

@@ -0,0 +1,35 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { type Signal } from '@wix/services-definitions/core-services/signals';
+import type { TimeSlot } from '@wix/auto_sdk_bookings_availability-time-slots';
+/**
+ * API interface for the TimeSlot service
+ */
+export interface TimeSlotServiceAPI {
+    /** Reactive signal containing the time slot data */
+    timeSlotSignal: Signal<TimeSlot>;
+}
+/**
+ * Service definition for TimeSlot
+ */
+export declare const TimeSlotServiceDefinition: string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI;
+/**
+ * Configuration for TimeSlotService
+ */
+export interface TimeSlotServiceConfig {
+    timeSlot: TimeSlot;
+}
+/**
+ * Implementation of TimeSlotService
+ */
+export declare const TimeSlotService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: TimeSlotServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & TimeSlotServiceAPI, TimeSlotServiceConfig>;

package/dist/services/time-slot-list/time-slot.js

@@ -0,0 +1,20 @@
+/**
+ * TimeSlot Service
+ * Manages individual time slot data
+ */
+import { defineService, implementService } from '@wix/services-definitions';
+import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
+/**
+ * Service definition for TimeSlot
+ */
+export const TimeSlotServiceDefinition = defineService('time-slot');
+/**
+ * Implementation of TimeSlotService
+ */
+export const TimeSlotService = implementService.withConfig()(TimeSlotServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(SignalsServiceDefinition);
+    const timeSlotSignal = signalsService.signal(config.timeSlot);
+    return {
+        timeSlotSignal,
+    };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "20f4812ace043e766a30c4a89597f6ca06981a999aff716744e5b9fc"
+  "falconPackageHash": "574164cdca2a1370455fe932ba12ff19571eba0e2ffa0134bd90afc0"
 }