@wix/headless-bookings 0.0.55 → 0.0.56

package/cjs/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/cjs/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';
 /**

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';
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-bookings",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -72,5 +72,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "c5880314a94c61f704a825c22cc865fced4f6e19015c4e1abeeaf365"
+  "falconPackageHash": "8792da90af7c78ece12ac4244e507751fbe186381decf6b266bee92a"
 }