@wix/headless-bookings 0.0.34 → 0.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/cjs/dist/react/payment/Payment.js +1 -5
  2. package/cjs/dist/react/service/Service.d.ts +39 -0
  3. package/cjs/dist/react/service/Service.js +58 -40
  4. package/dist/react/payment/Payment.js +1 -5
  5. package/dist/react/service/Service.d.ts +39 -0
  6. package/dist/react/service/Service.js +58 -40
  7. package/package.json +2 -2
package/cjs/dist/react/payment/Payment.js CHANGED
@@ -57,11 +57,7 @@ var TestIds;
57
57
  export const Root = React.forwardRef((props, ref) => {
58
58
  const { children, paymentServiceConfig, slotServices, numberOfParticipants, asChild, className, ...attrs } = props;
59
59
  return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, slotServices: slotServices, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
60
- // Handle render function children regardless of asChild
61
- const resolvedChildren = typeof children === 'function'
62
- ? children({ isLoading, hasError })
63
- : children;
64
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: resolvedChildren, customElementProps: { isLoading, hasError }, ...attrs, children: _jsx("div", { children: React.isValidElement(resolvedChildren) ? resolvedChildren : null }) }));
60
+ return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
65
61
  } }));
66
62
  });
67
63
  Root.displayName = 'Payment.Root';
package/cjs/dist/react/service/Service.d.ts CHANGED
@@ -577,6 +577,7 @@ export interface RawProps {
577
577
  * @component
578
578
  * @example
579
579
  * ```tsx
580
+ * // Using render prop pattern to access raw service data
580
581
  * <Service.Raw>
581
582
  * {({ service, isLoading, error }) => (
582
583
  * <div>
@@ -586,6 +587,11 @@ export interface RawProps {
586
587
  * </div>
587
588
  * )}
588
589
  * </Service.Raw>
590
+ *
591
+ * // With asChild pattern
592
+ * <Service.Raw asChild>
593
+ * <CustomServiceDisplay />
594
+ * </Service.Raw>
589
595
  * ```
590
596
  */
591
597
  export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
@@ -607,6 +613,7 @@ export declare namespace Actions {
607
613
  }) => React.ReactNode);
608
614
  className?: string;
609
615
  label?: string;
616
+ onClicked?: (service: Service) => void;
610
617
  }
611
618
  /**
612
619
  * Select action component - replaces selection with only this service.
@@ -622,6 +629,16 @@ export declare namespace Actions {
622
629
  * <Button variant="primary">Select Service</Button>
623
630
  * </Service.Actions.Select>
624
631
  *
632
+ * // With onClicked callback for navigation
633
+ * <Service.Actions.Select
634
+ * asChild
635
+ * onClicked={(service) => {
636
+ * router.push(`/booking/time-slots/${service._id}`);
637
+ * }}
638
+ * >
639
+ * <Button variant="primary">Select Service</Button>
640
+ * </Service.Actions.Select>
641
+ *
625
642
  * // Using render prop pattern to access bookable state
626
643
  * <Service.Actions.Select>
627
644
  * {({ bookable, selected, onClick }) => (
@@ -647,6 +664,7 @@ export declare namespace Actions {
647
664
  }) => React.ReactNode);
648
665
  className?: string;
649
666
  label?: string;
667
+ onClicked?: (service: Service) => void;
650
668
  }
651
669
  /**
652
670
  * Add action component - adds service to selection array.
@@ -662,6 +680,16 @@ export declare namespace Actions {
662
680
  * <Button variant="secondary">Add Service</Button>
663
681
  * </Service.Actions.Add>
664
682
  *
683
+ * // With onClicked callback for custom behavior after adding
684
+ * <Service.Actions.Add
685
+ * asChild
686
+ * onClicked={(service) => {
687
+ * console.log(`Added service: ${service.name}`);
688
+ * }}
689
+ * >
690
+ * <Button variant="secondary">Add Service</Button>
691
+ * </Service.Actions.Add>
692
+ *
665
693
  * // Using render prop pattern to access bookable state
666
694
  * <Service.Actions.Add>
667
695
  * {({ bookable, selected, onClick }) => (
@@ -687,6 +715,7 @@ export declare namespace Actions {
687
715
  }) => React.ReactNode);
688
716
  className?: string;
689
717
  label?: string;
718
+ onClicked?: (service: Service) => void;
690
719
  }
691
720
  /**
692
721
  * Remove action component - removes service from selection array.
@@ -702,6 +731,16 @@ export declare namespace Actions {
702
731
  * <Button variant="destructive">Remove Service</Button>
703
732
  * </Service.Actions.Remove>
704
733
  *
734
+ * // With onClicked callback for custom behavior after removing
735
+ * <Service.Actions.Remove
736
+ * asChild
737
+ * onClicked={(service) => {
738
+ * console.log(`Removed service: ${service.name}`);
739
+ * }}
740
+ * >
741
+ * <Button variant="destructive">Remove Service</Button>
742
+ * </Service.Actions.Remove>
743
+ *
705
744
  * // Using render prop pattern to access bookable state
706
745
  * <Service.Actions.Remove>
707
746
  * {({ bookable, selected, onClick }) => (
package/cjs/dist/react/service/Service.js CHANGED
@@ -539,6 +539,7 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
539
539
  * @component
540
540
  * @example
541
541
  * ```tsx
542
+ * // Using render prop pattern to access raw service data
542
543
  * <Service.Raw>
543
544
  * {({ service, isLoading, error }) => (
544
545
  * <div>
@@ -548,11 +549,16 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
548
549
  * </div>
549
550
  * )}
550
551
  * </Service.Raw>
552
+ *
553
+ * // With asChild pattern
554
+ * <Service.Raw asChild>
555
+ * <CustomServiceDisplay />
556
+ * </Service.Raw>
551
557
  * ```
552
558
  */
553
559
  export const Raw = React.forwardRef((props, ref) => {
554
560
  const { asChild, children, className } = props;
555
- return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: _jsxs("div", { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsxs("div", { children: ["Error: ", error] }), service && _jsx("pre", { children: JSON.stringify(service, null, 2) })] }) })) }));
561
+ return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: children })) }));
556
562
  });
557
563
  Raw.displayName = 'Service.Raw';
558
564
  /**
@@ -574,6 +580,16 @@ export var Actions;
574
580
  * <Button variant="primary">Select Service</Button>
575
581
  * </Service.Actions.Select>
576
582
  *
583
+ * // With onClicked callback for navigation
584
+ * <Service.Actions.Select
585
+ * asChild
586
+ * onClicked={(service) => {
587
+ * router.push(`/booking/time-slots/${service._id}`);
588
+ * }}
589
+ * >
590
+ * <Button variant="primary">Select Service</Button>
591
+ * </Service.Actions.Select>
592
+ *
577
593
  * // Using render prop pattern to access bookable state
578
594
  * <Service.Actions.Select>
579
595
  * {({ bookable, selected, onClick }) => (
@@ -585,25 +601,19 @@ export var Actions;
585
601
  * ```
586
602
  */
587
603
  Actions.Select = React.forwardRef((props, ref) => {
588
- const { asChild, children, className, label = 'Select Service' } = props;
604
+ const { asChild, children, className, label = 'Select Service', onClicked, } = props;
589
605
  return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
590
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
591
- if (typeof children === 'function') {
592
- return children({
593
- bookable,
594
- selected,
595
- requiresAvailability,
596
- onClick: select,
597
- service: rawService,
598
- });
599
- }
606
+ const handleClick = () => {
607
+ select();
608
+ onClicked?.(rawService);
609
+ };
600
610
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
601
- onClick: select,
611
+ onClick: handleClick,
602
612
  disabled: !bookable,
603
613
  selected,
604
614
  bookable,
605
615
  requiresAvailability,
606
- }, children: _jsx("button", { onClick: select, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
616
+ }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
607
617
  } }));
608
618
  });
609
619
  Actions.Select.displayName = 'Service.Actions.Select';
@@ -621,6 +631,16 @@ export var Actions;
621
631
  * <Button variant="secondary">Add Service</Button>
622
632
  * </Service.Actions.Add>
623
633
  *
634
+ * // With onClicked callback for custom behavior after adding
635
+ * <Service.Actions.Add
636
+ * asChild
637
+ * onClicked={(service) => {
638
+ * console.log(`Added service: ${service.name}`);
639
+ * }}
640
+ * >
641
+ * <Button variant="secondary">Add Service</Button>
642
+ * </Service.Actions.Add>
643
+ *
624
644
  * // Using render prop pattern to access bookable state
625
645
  * <Service.Actions.Add>
626
646
  * {({ bookable, selected, onClick }) => (
@@ -632,27 +652,21 @@ export var Actions;
632
652
  * ```
633
653
  */
634
654
  Actions.Add = React.forwardRef((props, ref) => {
635
- const { asChild, children, className, label = 'Add Service' } = props;
655
+ const { asChild, children, className, label = 'Add Service', onClicked, } = props;
636
656
  return (_jsx(CoreService.Actions, { children: ({ add, rawService, bookable, selected, requiresAvailability }) => {
637
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
638
- if (typeof children === 'function') {
639
- return children({
640
- bookable,
641
- selected,
642
- requiresAvailability,
643
- onClick: add,
644
- service: rawService,
645
- });
646
- }
647
657
  // Disabled when already selected (can't add again) or not bookable
648
658
  const isDisabled = selected || !bookable;
659
+ const handleClick = () => {
660
+ add();
661
+ onClicked?.(rawService);
662
+ };
649
663
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
650
- onClick: add,
664
+ onClick: handleClick,
651
665
  disabled: isDisabled,
652
666
  selected,
653
667
  bookable,
654
668
  requiresAvailability,
655
- }, children: _jsx("button", { onClick: add, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
669
+ }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
656
670
  } }));
657
671
  });
658
672
  Actions.Add.displayName = 'Service.Actions.Add';
@@ -670,6 +684,16 @@ export var Actions;
670
684
  * <Button variant="destructive">Remove Service</Button>
671
685
  * </Service.Actions.Remove>
672
686
  *
687
+ * // With onClicked callback for custom behavior after removing
688
+ * <Service.Actions.Remove
689
+ * asChild
690
+ * onClicked={(service) => {
691
+ * console.log(`Removed service: ${service.name}`);
692
+ * }}
693
+ * >
694
+ * <Button variant="destructive">Remove Service</Button>
695
+ * </Service.Actions.Remove>
696
+ *
673
697
  * // Using render prop pattern to access bookable state
674
698
  * <Service.Actions.Remove>
675
699
  * {({ bookable, selected, onClick }) => (
@@ -681,27 +705,21 @@ export var Actions;
681
705
  * ```
682
706
  */
683
707
  Actions.Remove = React.forwardRef((props, ref) => {
684
- const { asChild, children, className, label = 'Remove Service' } = props;
708
+ const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
685
709
  return (_jsx(CoreService.Actions, { children: ({ remove, rawService, bookable, selected, requiresAvailability, }) => {
686
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
687
- if (typeof children === 'function') {
688
- return children({
689
- bookable,
690
- selected,
691
- requiresAvailability,
692
- onClick: remove,
693
- service: rawService,
694
- });
695
- }
696
710
  // Disabled when not selected (nothing to remove) or not bookable
697
711
  const isDisabled = !selected || !bookable;
712
+ const handleClick = () => {
713
+ remove();
714
+ onClicked?.(rawService);
715
+ };
698
716
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
699
- onClick: remove,
717
+ onClick: handleClick,
700
718
  disabled: isDisabled,
701
719
  selected,
702
720
  bookable,
703
721
  requiresAvailability,
704
- }, children: _jsx("button", { onClick: remove, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
722
+ }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
705
723
  } }));
706
724
  });
707
725
  Actions.Remove.displayName = 'Service.Actions.Remove';
package/dist/react/payment/Payment.js CHANGED
@@ -57,11 +57,7 @@ var TestIds;
57
57
  export const Root = React.forwardRef((props, ref) => {
58
58
  const { children, paymentServiceConfig, slotServices, numberOfParticipants, asChild, className, ...attrs } = props;
59
59
  return (_jsx(CorePayment.Root, { paymentServiceConfig: paymentServiceConfig, slotServices: slotServices, numberOfParticipants: numberOfParticipants, children: ({ isLoading, hasError }) => {
60
- // Handle render function children regardless of asChild
61
- const resolvedChildren = typeof children === 'function'
62
- ? children({ isLoading, hasError })
63
- : children;
64
- return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: resolvedChildren, customElementProps: { isLoading, hasError }, ...attrs, children: _jsx("div", { children: React.isValidElement(resolvedChildren) ? resolvedChildren : null }) }));
60
+ return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.paymentRoot, "data-loading": isLoading, "data-has-error": hasError, customElement: children, customElementProps: { isLoading, hasError }, ...attrs, children: children }));
65
61
  } }));
66
62
  });
67
63
  Root.displayName = 'Payment.Root';
package/dist/react/service/Service.d.ts CHANGED
@@ -577,6 +577,7 @@ export interface RawProps {
577
577
  * @component
578
578
  * @example
579
579
  * ```tsx
580
+ * // Using render prop pattern to access raw service data
580
581
  * <Service.Raw>
581
582
  * {({ service, isLoading, error }) => (
582
583
  * <div>
@@ -586,6 +587,11 @@ export interface RawProps {
586
587
  * </div>
587
588
  * )}
588
589
  * </Service.Raw>
590
+ *
591
+ * // With asChild pattern
592
+ * <Service.Raw asChild>
593
+ * <CustomServiceDisplay />
594
+ * </Service.Raw>
589
595
  * ```
590
596
  */
591
597
  export declare const Raw: React.ForwardRefExoticComponent<RawProps & React.RefAttributes<HTMLElement>>;
@@ -607,6 +613,7 @@ export declare namespace Actions {
607
613
  }) => React.ReactNode);
608
614
  className?: string;
609
615
  label?: string;
616
+ onClicked?: (service: Service) => void;
610
617
  }
611
618
  /**
612
619
  * Select action component - replaces selection with only this service.
@@ -622,6 +629,16 @@ export declare namespace Actions {
622
629
  * <Button variant="primary">Select Service</Button>
623
630
  * </Service.Actions.Select>
624
631
  *
632
+ * // With onClicked callback for navigation
633
+ * <Service.Actions.Select
634
+ * asChild
635
+ * onClicked={(service) => {
636
+ * router.push(`/booking/time-slots/${service._id}`);
637
+ * }}
638
+ * >
639
+ * <Button variant="primary">Select Service</Button>
640
+ * </Service.Actions.Select>
641
+ *
625
642
  * // Using render prop pattern to access bookable state
626
643
  * <Service.Actions.Select>
627
644
  * {({ bookable, selected, onClick }) => (
@@ -647,6 +664,7 @@ export declare namespace Actions {
647
664
  }) => React.ReactNode);
648
665
  className?: string;
649
666
  label?: string;
667
+ onClicked?: (service: Service) => void;
650
668
  }
651
669
  /**
652
670
  * Add action component - adds service to selection array.
@@ -662,6 +680,16 @@ export declare namespace Actions {
662
680
  * <Button variant="secondary">Add Service</Button>
663
681
  * </Service.Actions.Add>
664
682
  *
683
+ * // With onClicked callback for custom behavior after adding
684
+ * <Service.Actions.Add
685
+ * asChild
686
+ * onClicked={(service) => {
687
+ * console.log(`Added service: ${service.name}`);
688
+ * }}
689
+ * >
690
+ * <Button variant="secondary">Add Service</Button>
691
+ * </Service.Actions.Add>
692
+ *
665
693
  * // Using render prop pattern to access bookable state
666
694
  * <Service.Actions.Add>
667
695
  * {({ bookable, selected, onClick }) => (
@@ -687,6 +715,7 @@ export declare namespace Actions {
687
715
  }) => React.ReactNode);
688
716
  className?: string;
689
717
  label?: string;
718
+ onClicked?: (service: Service) => void;
690
719
  }
691
720
  /**
692
721
  * Remove action component - removes service from selection array.
@@ -702,6 +731,16 @@ export declare namespace Actions {
702
731
  * <Button variant="destructive">Remove Service</Button>
703
732
  * </Service.Actions.Remove>
704
733
  *
734
+ * // With onClicked callback for custom behavior after removing
735
+ * <Service.Actions.Remove
736
+ * asChild
737
+ * onClicked={(service) => {
738
+ * console.log(`Removed service: ${service.name}`);
739
+ * }}
740
+ * >
741
+ * <Button variant="destructive">Remove Service</Button>
742
+ * </Service.Actions.Remove>
743
+ *
705
744
  * // Using render prop pattern to access bookable state
706
745
  * <Service.Actions.Remove>
707
746
  * {({ bookable, selected, onClick }) => (
package/dist/react/service/Service.js CHANGED
@@ -539,6 +539,7 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
539
539
  * @component
540
540
  * @example
541
541
  * ```tsx
542
+ * // Using render prop pattern to access raw service data
542
543
  * <Service.Raw>
543
544
  * {({ service, isLoading, error }) => (
544
545
  * <div>
@@ -548,11 +549,16 @@ StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
548
549
  * </div>
549
550
  * )}
550
551
  * </Service.Raw>
552
+ *
553
+ * // With asChild pattern
554
+ * <Service.Raw asChild>
555
+ * <CustomServiceDisplay />
556
+ * </Service.Raw>
551
557
  * ```
552
558
  */
553
559
  export const Raw = React.forwardRef((props, ref) => {
554
560
  const { asChild, children, className } = props;
555
- return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: _jsxs("div", { children: [isLoading && _jsx("div", { children: "Loading..." }), error && _jsxs("div", { children: ["Error: ", error] }), service && _jsx("pre", { children: JSON.stringify(service, null, 2) })] }) })) }));
561
+ return (_jsx(CoreService.Service, { children: ({ service, isLoading, error }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRaw, customElement: children, customElementProps: { service, isLoading, error }, children: children })) }));
556
562
  });
557
563
  Raw.displayName = 'Service.Raw';
558
564
  /**
@@ -574,6 +580,16 @@ export var Actions;
574
580
  * <Button variant="primary">Select Service</Button>
575
581
  * </Service.Actions.Select>
576
582
  *
583
+ * // With onClicked callback for navigation
584
+ * <Service.Actions.Select
585
+ * asChild
586
+ * onClicked={(service) => {
587
+ * router.push(`/booking/time-slots/${service._id}`);
588
+ * }}
589
+ * >
590
+ * <Button variant="primary">Select Service</Button>
591
+ * </Service.Actions.Select>
592
+ *
577
593
  * // Using render prop pattern to access bookable state
578
594
  * <Service.Actions.Select>
579
595
  * {({ bookable, selected, onClick }) => (
@@ -585,25 +601,19 @@ export var Actions;
585
601
  * ```
586
602
  */
587
603
  Actions.Select = React.forwardRef((props, ref) => {
588
- const { asChild, children, className, label = 'Select Service' } = props;
604
+ const { asChild, children, className, label = 'Select Service', onClicked, } = props;
589
605
  return (_jsx(CoreService.Actions, { children: ({ select, rawService, bookable, selected, requiresAvailability, }) => {
590
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
591
- if (typeof children === 'function') {
592
- return children({
593
- bookable,
594
- selected,
595
- requiresAvailability,
596
- onClick: select,
597
- service: rawService,
598
- });
599
- }
606
+ const handleClick = () => {
607
+ select();
608
+ onClicked?.(rawService);
609
+ };
600
610
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionSelect, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
601
- onClick: select,
611
+ onClick: handleClick,
602
612
  disabled: !bookable,
603
613
  selected,
604
614
  bookable,
605
615
  requiresAvailability,
606
- }, children: _jsx("button", { onClick: select, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
616
+ }, children: _jsx("button", { onClick: handleClick, disabled: !bookable, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
607
617
  } }));
608
618
  });
609
619
  Actions.Select.displayName = 'Service.Actions.Select';
@@ -621,6 +631,16 @@ export var Actions;
621
631
  * <Button variant="secondary">Add Service</Button>
622
632
  * </Service.Actions.Add>
623
633
  *
634
+ * // With onClicked callback for custom behavior after adding
635
+ * <Service.Actions.Add
636
+ * asChild
637
+ * onClicked={(service) => {
638
+ * console.log(`Added service: ${service.name}`);
639
+ * }}
640
+ * >
641
+ * <Button variant="secondary">Add Service</Button>
642
+ * </Service.Actions.Add>
643
+ *
624
644
  * // Using render prop pattern to access bookable state
625
645
  * <Service.Actions.Add>
626
646
  * {({ bookable, selected, onClick }) => (
@@ -632,27 +652,21 @@ export var Actions;
632
652
  * ```
633
653
  */
634
654
  Actions.Add = React.forwardRef((props, ref) => {
635
- const { asChild, children, className, label = 'Add Service' } = props;
655
+ const { asChild, children, className, label = 'Add Service', onClicked, } = props;
636
656
  return (_jsx(CoreService.Actions, { children: ({ add, rawService, bookable, selected, requiresAvailability }) => {
637
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
638
- if (typeof children === 'function') {
639
- return children({
640
- bookable,
641
- selected,
642
- requiresAvailability,
643
- onClick: add,
644
- service: rawService,
645
- });
646
- }
647
657
  // Disabled when already selected (can't add again) or not bookable
648
658
  const isDisabled = selected || !bookable;
659
+ const handleClick = () => {
660
+ add();
661
+ onClicked?.(rawService);
662
+ };
649
663
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionAdd, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
650
- onClick: add,
664
+ onClick: handleClick,
651
665
  disabled: isDisabled,
652
666
  selected,
653
667
  bookable,
654
668
  requiresAvailability,
655
- }, children: _jsx("button", { onClick: add, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
669
+ }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
656
670
  } }));
657
671
  });
658
672
  Actions.Add.displayName = 'Service.Actions.Add';
@@ -670,6 +684,16 @@ export var Actions;
670
684
  * <Button variant="destructive">Remove Service</Button>
671
685
  * </Service.Actions.Remove>
672
686
  *
687
+ * // With onClicked callback for custom behavior after removing
688
+ * <Service.Actions.Remove
689
+ * asChild
690
+ * onClicked={(service) => {
691
+ * console.log(`Removed service: ${service.name}`);
692
+ * }}
693
+ * >
694
+ * <Button variant="destructive">Remove Service</Button>
695
+ * </Service.Actions.Remove>
696
+ *
673
697
  * // Using render prop pattern to access bookable state
674
698
  * <Service.Actions.Remove>
675
699
  * {({ bookable, selected, onClick }) => (
@@ -681,27 +705,21 @@ export var Actions;
681
705
  * ```
682
706
  */
683
707
  Actions.Remove = React.forwardRef((props, ref) => {
684
- const { asChild, children, className, label = 'Remove Service' } = props;
708
+ const { asChild, children, className, label = 'Remove Service', onClicked, } = props;
685
709
  return (_jsx(CoreService.Actions, { children: ({ remove, rawService, bookable, selected, requiresAvailability, }) => {
686
- // If children is a function, call it with bookable, selected, requiresAvailability and other props
687
- if (typeof children === 'function') {
688
- return children({
689
- bookable,
690
- selected,
691
- requiresAvailability,
692
- onClick: remove,
693
- service: rawService,
694
- });
695
- }
696
710
  // Disabled when not selected (nothing to remove) or not bookable
697
711
  const isDisabled = !selected || !bookable;
712
+ const handleClick = () => {
713
+ remove();
714
+ onClicked?.(rawService);
715
+ };
698
716
  return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceActionRemove, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, customElement: children, customElementProps: {
699
- onClick: remove,
717
+ onClick: handleClick,
700
718
  disabled: isDisabled,
701
719
  selected,
702
720
  bookable,
703
721
  requiresAvailability,
704
- }, children: _jsx("button", { onClick: remove, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
722
+ }, children: _jsx("button", { onClick: handleClick, disabled: isDisabled, "data-selected": selected, "data-bookable": bookable, "data-requires-availability": requiresAvailability, children: label }) }));
705
723
  } }));
706
724
  });
707
725
  Actions.Remove.displayName = 'Service.Actions.Remove';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wix/headless-bookings",
3
- "version": "0.0.34",
3
+ "version": "0.0.35",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "scripts": {
@@ -72,5 +72,5 @@
72
72
  "groupId": "com.wixpress.headless-components"
73
73
  }
74
74
  },
75
- "falconPackageHash": "b195003cbc18c0477da02f42dd5e5409c483f2de627832cbdb859424"
75
+ "falconPackageHash": "ad087858a42d4f0c4cf86b870ec3b6b93fac74806bacb2f95cf753a2"
76
76
  }