@wix/headless-bookings 0.0.53 → 0.0.54

package/dist/react/service/Service.js

@@ -6,11 +6,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import * as CoreService from '../core/service/Service.js';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import { Money, GenericList } from '@wix/headless-components/react';
+import { Money } from '@wix/headless-components/react';
 import { RateType, } from '@wix/auto_sdk_bookings_services';
 import * as LocationList from '../location/LocationList.js';
 // Note: Location components are used inside LocationList.LocationRepeater
 // Users should import { Location } from '@wix/headless-bookings/react' for Location.Name, Location.Address, etc.
+import * as StaffMemberListModule from '../staff-member/StaffMemberList.js';
+// Note: StaffMember components are used inside StaffMemberList.StaffMemberRepeater
+// Users should import { StaffMember } from '@wix/headless-bookings/react' for StaffMember.Name, etc.
 import * as ServiceMediaModule from './ServiceMedia.js';
 var TestIds;
 (function (TestIds) {
@@ -467,6 +470,7 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  * Container for service staff members list (Container Level).
  * Follows the 3-level List/Options/Repeater pattern.
  * Provides context and doesn't render when there are no staff members.
+ * Internally uses StaffMemberList.Root for consistent staff member handling.
  *
  * @component
  * @example
@@ -475,12 +479,7 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  * <Service.StaffMembers>
  *   <Service.StaffMembers.List emptyState={<div>No staff assigned</div>}>
  *     <Service.StaffMembers.StaffMemberRepeater>
- *       {({ staffMember }) => (
- *         <div className="staff-card">
- *           <img src={staffMember.mainMedia?.image} alt={staffMember.name} />
- *           <span>{staffMember.name}</span>
- *         </div>
- *       )}
+ *       <StaffMember.Name />
  *     </Service.StaffMembers.StaffMemberRepeater>
  *   </Service.StaffMembers.List>
  * </Service.StaffMembers>
@@ -490,32 +489,28 @@ LocationRepeater.displayName = 'Service.Locations.LocationRepeater';
  *   <ul className="staff-list">
  *     <Service.StaffMembers.List>
  *       <Service.StaffMembers.StaffMemberRepeater>
- *         {({ staffMember }) => <li>{staffMember.name}</li>}
+ *         <li><StaffMember.Name /></li>
  *       </Service.StaffMembers.StaffMemberRepeater>
  *     </Service.StaffMembers.List>
  *   </ul>
  * </Service.StaffMembers>
  * ```
  */
-export const StaffMembersBase = React.forwardRef((props, ref) => {
+const StaffMembersBase = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...attributes } = props;
     return (_jsx(CoreService.Info, { children: ({ staff }) => {
             // Container level: don't render if no staff members
             if (!staff || staff.length === 0) {
                 return null;
             }
-            // Map staff to include required id field for GenericList
-            const items = staff.map((member, index) => ({
-                ...member,
-                id: member._id || String(index),
-            }));
-            return (_jsx(GenericList.Root, { items: items, children: _jsx(AsChildSlot, { ...attributes, ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }) }));
+            return (_jsx(StaffMemberListModule.Root, { staffMemberListConfig: { staffMembers: staff }, className: className, ref: ref, children: _jsx(AsChildSlot, { ...attributes, asChild: asChild, className: className, "data-testid": TestIds.serviceStaffMembers, customElement: children, children: _jsx("div", { children: children }) }) }));
         } }));
 });
 StaffMembersBase.displayName = 'Service.StaffMembers';
 /**
  * List container for staff members with empty state support (List Container Level).
  * Renders emptyState when no staff members, otherwise renders children.
+ * Internally delegates to StaffMemberList.StaffMembers.
  *
  * @component
  * @example
@@ -527,42 +522,33 @@ StaffMembersBase.displayName = 'Service.StaffMembers';
  */
 export const StaffMembersList = React.forwardRef((props, ref) => {
     const { children, emptyState, className, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
+    return (_jsx(StaffMemberListModule.StaffMembers, { ref: ref, emptyState: emptyState, className: className, ...otherProps, children: children }));
 });
 StaffMembersList.displayName = 'Service.StaffMembers.List';
 /**
- * Repeater component that renders staff member name for each staff member.
- * Supports asChild pattern for custom rendering.
+ * Repeater component that renders StaffMember.Root for each staff member.
+ * Internally delegates to StaffMemberList.StaffMemberRepeater.
+ * Children are rendered inside each StaffMember.Root context.
  *
  * @component
  * @example
  * ```tsx
- * // Standard usage - renders staff member names
+ * // Standard usage - renders StaffMember.Root for each staff member
  * <Service.StaffMembers.StaffMemberRepeater>
- *   <span className="staff-badge">👤</span>
+ *   <StaffMember.Name />
  * </Service.StaffMembers.StaffMemberRepeater>
  *
- * // AsChild usage with custom numbered list
- * <Service.StaffMembers.StaffMemberRepeater asChild>
- *   {({ items, itemWrapper }) => (
- *     <ol>
- *       {items.map((item, index) => (
- *         <li key={item.id}>
- *           {index + 1}. {itemWrapper({ item, index, children: null })}
- *         </li>
- *       ))}
- *     </ol>
- *   )}
+ * // With custom styling
+ * <Service.StaffMembers.StaffMemberRepeater>
+ *   <div className="staff-card">
+ *     <StaffMember.Name className="font-bold" />
+ *   </div>
  * </Service.StaffMembers.StaffMemberRepeater>
  * ```
  */
 export const StaffMemberRepeater = React.forwardRef((props, ref) => {
-    const { children, asChild } = props;
-    // Custom itemWrapper that renders staff member name
-    const staffMemberItemWrapper = ({ item: member, children: itemChildren, }) => {
-        return (_jsxs(React.Fragment, { children: [_jsx("span", { "data-testid": TestIds.serviceStaffMemberRepeater, children: member.name }), itemChildren] }, member.id));
-    };
-    return (_jsx(GenericList.Repeater, { ref: ref, itemWrapper: staffMemberItemWrapper, asChild: asChild, children: children }));
+    const { children } = props;
+    return (_jsx(StaffMemberListModule.StaffMemberRepeater, { ref: ref, children: children }));
 });
 StaffMemberRepeater.displayName = 'Service.StaffMembers.StaffMemberRepeater';
 /**

package/dist/react/staff-member/StaffMember.d.ts

@@ -0,0 +1,119 @@
+/**
+ * StaffMember - Headless component for displaying staff member information
+ * Provides components for displaying staff member name
+ *
+ * @module React/StaffMember
+ */
+import React from 'react';
+import * as CoreStaffMember from '../core/staff-member/StaffMember.js';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
+export type { StaffMemberData, StaffMemberRenderProps, } from '../core/staff-member/StaffMember.js';
+/**
+ * Props for StaffMember.Root component
+ */
+export interface RootProps {
+    /** Raw staff member data */
+    staffMember?: CoreStaffMember.StaffMemberData;
+    /** Use asChild pattern */
+    asChild?: boolean;
+    /** Children - ReactNode or render function with all StaffMemberRenderProps */
+    children?: React.ReactNode | AsChildChildren<CoreStaffMember.StaffMemberRenderProps>;
+    /** CSS class name */
+    className?: string;
+    /** Data attributes */
+    [key: `data-${string}`]: string | undefined;
+}
+/**
+ * Root component that provides staff member context and handles data parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With staff member data
+ * <StaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name className="font-bold" />
+ * </StaffMember.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access all staff member data
+ * <StaffMember.Root staffMember={staffMember} asChild>
+ *   {({ name, rawStaffMember }) => (
+ *     <div>
+ *       <span>{name}</span>
+ *     </div>
+ *   )}
+ * </StaffMember.Root>
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMember.Name component
+ */
+export interface NameProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        name: string | undefined;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the staff member name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Name className="font-bold" />
+ *
+ * // With asChild
+ * <StaffMember.Name asChild>
+ *   {({ name }) => <h3>{name || 'Unknown Staff'}</h3>}
+ * </StaffMember.Name>
+ * ```
+ */
+export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMember.Raw component
+ */
+export interface RawProps {
+    children: (props: CoreStaffMember.StaffMemberRenderProps) => React.ReactNode;
+}
+/**
+ * Exposes all raw staff member data via render prop.
+ * Use only when you need full access to staff member data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Raw>
+ *   {({ rawStaffMember, name }) => (
+ *     <pre>{JSON.stringify(rawStaffMember, null, 2)}</pre>
+ *   )}
+ * </StaffMember.Raw>
+ * ```
+ */
+export declare const Raw: React.FC<RawProps>;
+/**
+ * Props for StaffMember.Actions.Select component
+ */
+export interface SelectProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        onClick: () => void;
+        selected: boolean;
+        staffMember: CoreStaffMember.StaffMemberData | null;
+    }>;
+    /** Callback fired after staff member is selected - receives the staff member */
+    onClicked?: (staffMember: CoreStaffMember.StaffMemberData) => void;
+    /** Label for the button */
+    label?: string;
+    className?: string;
+}
+/**
+ * Actions namespace for staff member-related actions
+ */
+export declare const Actions: {
+    Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLButtonElement>>;
+};

package/dist/react/staff-member/StaffMember.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * StaffMember - Headless component for displaying staff member information
+ * Provides components for displaying staff member name
+ *
+ * @module React/StaffMember
+ */
+import React from 'react';
+import * as CoreStaffMember from '../core/staff-member/StaffMember.js';
+import { AsChildSlot } from '@wix/headless-utils/react';
+// Re-export useStaffMemberContext from core
+export { useStaffMemberContext } from '../core/staff-member/StaffMember.js';
+// ==========================================
+// TestIds Enum
+// ==========================================
+var TestIds;
+(function (TestIds) {
+    TestIds["staffMemberRoot"] = "staff-member-root";
+    TestIds["staffMemberName"] = "staff-member-name";
+    TestIds["staffMemberRaw"] = "staff-member-raw";
+    TestIds["staffMemberActionSelect"] = "staff-member-action-select";
+})(TestIds || (TestIds = {}));
+// ==========================================
+// Type Definitions
+// ==========================================
+// Use the core's context hook
+const useStaffMemberContext = CoreStaffMember.useStaffMemberContext;
+// ==========================================
+// Root Component
+// ==========================================
+/**
+ * Root component that provides staff member context and handles data parsing.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With staff member data
+ * <StaffMember.Root staffMember={staffMemberData}>
+ *   <StaffMember.Name className="font-bold" />
+ * </StaffMember.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With asChild to access all staff member data
+ * <StaffMember.Root staffMember={staffMember} asChild>
+ *   {({ name, rawStaffMember }) => (
+ *     <div>
+ *       <span>{name}</span>
+ *     </div>
+ *   )}
+ * </StaffMember.Root>
+ * ```
+ */
+export const Root = React.forwardRef((props, ref) => {
+    const { staffMember, asChild, children, className, ...attrs } = props;
+    // Extract data-* attributes
+    const dataAttrs = Object.fromEntries(Object.entries(attrs).filter(([key]) => key.startsWith('data-')));
+    return (_jsx(CoreStaffMember.Root, { staffMember: staffMember, children: _jsx(CoreStaffMember.Data, { children: (renderProps) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberRoot, customElement: children, customElementProps: renderProps, ...dataAttrs, children: children })) }) }));
+});
+Root.displayName = 'StaffMember.Root';
+/**
+ * Displays the staff member name.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Name className="font-bold" />
+ *
+ * // With asChild
+ * <StaffMember.Name asChild>
+ *   {({ name }) => <h3>{name || 'Unknown Staff'}</h3>}
+ * </StaffMember.Name>
+ * ```
+ */
+export const Name = React.forwardRef((props, ref) => {
+    const { asChild, children, className, ...attrs } = props;
+    const { name } = useStaffMemberContext();
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberName, customElement: children, customElementProps: { name }, ...attrs, children: name ? _jsx("span", { children: name }) : null }));
+});
+Name.displayName = 'StaffMember.Name';
+/**
+ * Exposes all raw staff member data via render prop.
+ * Use only when you need full access to staff member data.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Raw>
+ *   {({ rawStaffMember, name }) => (
+ *     <pre>{JSON.stringify(rawStaffMember, null, 2)}</pre>
+ *   )}
+ * </StaffMember.Raw>
+ * ```
+ */
+export const Raw = (props) => {
+    const context = useStaffMemberContext();
+    return _jsx(_Fragment, { children: props.children(context) });
+};
+Raw.displayName = 'StaffMember.Raw';
+/**
+ * Selection action component for choosing a staff member.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMember.Actions.Select label="Choose Staff Member" />
+ *
+ * // With onClicked callback
+ * <StaffMember.Actions.Select
+ *   label="Select"
+ *   onClicked={(staffMember) => console.log('Selected:', staffMember.name)}
+ * />
+ *
+ * // With asChild
+ * <StaffMember.Actions.Select asChild>
+ *   {({ onClick, selected }) => (
+ *     <Button onClick={onClick} variant={selected ? 'primary' : 'outline'}>
+ *       {selected ? 'Selected' : 'Select'}
+ *     </Button>
+ *   )}
+ * </StaffMember.Actions.Select>
+ * ```
+ */
+const Select = React.forwardRef((props, ref) => {
+    const { asChild, children, onClicked, label = 'Select', className, ...attrs } = props;
+    return (_jsx(CoreStaffMember.Actions, { children: ({ select, selected, rawStaffMember }) => {
+            const handleClick = () => {
+                select();
+                if (onClicked && rawStaffMember) {
+                    onClicked(rawStaffMember);
+                }
+            };
+            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.staffMemberActionSelect, "data-selected": selected, customElement: children, customElementProps: {
+                    onClick: handleClick,
+                    selected,
+                    staffMember: rawStaffMember,
+                }, ...attrs, children: _jsx("button", { type: "button", onClick: handleClick, children: label }) }));
+        } }));
+});
+Select.displayName = 'StaffMember.Actions.Select';
+/**
+ * Actions namespace for staff member-related actions
+ */
+export const Actions = {
+    Select,
+};

package/dist/react/staff-member/StaffMemberList.d.ts

@@ -0,0 +1,123 @@
+/**
+ * StaffMemberList - High-level component for displaying staff member lists
+ * Follows the pattern from LocationList.tsx
+ *
+ * @module React/StaffMemberList
+ */
+import React from 'react';
+import { GenericListRepeaterProps, type ListVariant } from '@wix/headless-components/react';
+import { type AsChildChildren } from '@wix/headless-utils/react';
+import type { StaffMemberListServiceConfig } from '../../services/staff-member-list/staff-member-list.js';
+import type { StaffMemberData } from '../../services/staff-member-list/staff-member-list.def.js';
+/**
+ * Staff member with id for list rendering
+ * Uses staffMemberId as the id (which equals resource id)
+ */
+interface StaffMemberWithId extends StaffMemberData {
+    id: string;
+}
+/**
+ * Props for the StaffMemberList root component
+ */
+export interface RootProps {
+    children: React.ReactNode;
+    staffMemberListConfig?: StaffMemberListServiceConfig;
+    className?: string;
+    variant?: ListVariant;
+}
+/**
+ * Root component that provides the StaffMemberList service context for rendering staff member lists.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { StaffMemberList, StaffMember } from '@wix/bookings/react';
+ *
+ * function StaffMembersPage({ staffMemberListConfig }) {
+ *   return (
+ *     <StaffMemberList.Root staffMemberListConfig={staffMemberListConfig}>
+ *       <StaffMemberList.StaffMembers emptyState={<div>No staff members available</div>}>
+ *         <StaffMemberList.StaffMemberRepeater>
+ *           <StaffMember.Name />
+ *         </StaffMemberList.StaffMemberRepeater>
+ *       </StaffMemberList.StaffMembers>
+ *     </StaffMemberList.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMemberList.StaffMembers component
+ */
+export interface StaffMembersProps {
+    children: React.ReactNode;
+    emptyState?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for the staff members list with empty state support.
+ * Wraps GenericList.Items internally (no separate Items export).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMemberList.StaffMembers emptyState={<div>No staff members available</div>}>
+ *   <StaffMemberList.StaffMemberRepeater>
+ *     <StaffMember.Name />
+ *   </StaffMemberList.StaffMemberRepeater>
+ * </StaffMemberList.StaffMembers>
+ * ```
+ */
+export declare const StaffMembers: React.ForwardRefExoticComponent<StaffMembersProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMemberList.StaffMemberRepeater component
+ */
+export type StaffMemberRepeaterProps = GenericListRepeaterProps<StaffMemberWithId>;
+export declare const StaffMemberRepeater: React.ForwardRefExoticComponent<StaffMemberRepeaterProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMemberList.Totals component
+ */
+export interface TotalsProps {
+    asChild?: boolean;
+    children?: React.ReactNode | AsChildChildren<{
+        count: number;
+        hasStaffMembers: boolean;
+    }>;
+    className?: string;
+}
+/**
+ * Displays the total count of staff members.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <StaffMemberList.Totals />
+ *
+ * // With asChild
+ * <StaffMemberList.Totals asChild>
+ *   {({ count }) => <span>{count} staff members available</span>}
+ * </StaffMemberList.Totals>
+ * ```
+ */
+export declare const Totals: React.ForwardRefExoticComponent<TotalsProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Props for StaffMemberList.Actions.Clear component
+ */
+export interface ClearProps {
+    asChild?: boolean;
+    children?: React.ReactNode | ((props: {
+        onClick: () => void;
+    }) => React.ReactNode);
+    className?: string;
+    label?: string;
+    /** Callback fired when the clear button is clicked */
+    onClicked?: () => void;
+}
+/**
+ * Actions namespace for staff member list-level actions
+ */
+export declare const Actions: {
+    Clear: React.ForwardRefExoticComponent<ClearProps & React.RefAttributes<HTMLButtonElement>>;
+};
+export {};