@wix/headless-bookings 0.0.45 → 0.0.47

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

@@ -5,6 +5,7 @@ import type { Service } from '@wix/auto_sdk_bookings_services';
 import type { ServiceServiceConfig } from '../services/service/service.js';
 import type { ServiceListServiceConfig } from '../services/service-list/service-list.js';
 import type { PagingMetadata } from '../api/query-services/index.js';
+import type { Category } from '../api/query-categories/index.js';
 /**
  * Booking app ID constant
  */
@@ -73,3 +74,23 @@ export declare const mockServiceConfig: ServiceServiceConfig;
  * Helper to create a large list of services for pagination tests
  */
 export declare function createLargeServiceList(count: number): Service[];
+/**
+ * Mock categories for filter tests
+ */
+export declare const mockCategories: Category[];
+/**
+ * Empty categories array
+ */
+export declare const mockEmptyCategories: Category[];
+/**
+ * Service list config with categories for filter testing
+ */
+export declare const mockServiceListConfigWithCategories: ServiceListServiceConfig;
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export declare const mockServiceListConfigWithCategoriesAndMore: ServiceListServiceConfig;
+/**
+ * Empty service list config with categories
+ */
+export declare const mockEmptyServiceListConfigWithCategories: ServiceListServiceConfig;

package/cjs/dist/__mocks__/services.js

@@ -306,3 +306,57 @@ export function createLargeServiceList(count) {
         },
     }));
 }
+/**
+ * Mock categories for filter tests
+ */
+export const mockCategories = [
+    {
+        _id: 'category-1',
+        name: 'Wellness',
+    },
+    {
+        _id: 'category-2',
+        name: 'Fitness',
+    },
+    {
+        _id: 'category-3',
+        name: 'Beauty',
+    },
+];
+/**
+ * Empty categories array
+ */
+export const mockEmptyCategories = [];
+/**
+ * Service list config with categories for filter testing
+ */
+export const mockServiceListConfigWithCategories = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadata,
+    },
+};
+/**
+ * Service list config with categories and hasNext for pagination + filter testing
+ */
+export const mockServiceListConfigWithCategoriesAndMore = {
+    services: mockServices,
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataWithMore,
+    },
+};
+/**
+ * Empty service list config with categories
+ */
+export const mockEmptyServiceListConfigWithCategories = {
+    services: [],
+    categories: mockCategories,
+    options: {
+        appId: BOOKING_APP_ID,
+        pagingMetadata: mockPagingMetadataEmpty,
+    },
+};

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

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, type CreateBookingOptions, type Booking, type CreateBookingRequest, type CreateBookingResponse, type ParticipantNotification, type ContactDetails, } from './create-booking/index.js';
 export { createCheckout, ChannelType, type CreateCheckoutRequest, type CreateCheckoutResponse, } from './create-checkout/index.js';
 export { queryLocations, type QueryLocationsResult, type LocationData, } from './query-locations/index.js';
+export { queryCategories, type QueryCategoriesResult, type Category, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/index.js

@@ -9,6 +9,7 @@ export { fetchAvailability } from './fetch-availability/index.js';
 export { createBooking, } from './create-booking/index.js';
 export { createCheckout, ChannelType, } from './create-checkout/index.js';
 export { queryLocations, } from './query-locations/index.js';
+export { queryCategories, } from './query-categories/index.js';
 /**
  * PagingMetadata includes:
  * - limit: Number of items per page

package/cjs/dist/api/query-categories/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Category type from the Wix Bookings Categories V2 API
+ */
+export type Category = categoriesV2.Category;
+/**
+ * Result from querying categories
+ */
+export interface QueryCategoriesResult {
+    /** Array of booking service categories */
+    categories: Category[];
+}
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export declare function queryCategories(): Promise<QueryCategoriesResult>;

package/cjs/dist/api/query-categories/index.js

@@ -0,0 +1,28 @@
+/**
+ * Query Categories API
+ * Fetches booking service categories from Wix Bookings
+ *
+ * @module API/QueryCategories
+ */
+import { categoriesV2 } from '@wix/bookings';
+/**
+ * Query all booking service categories.
+ * Returns an array of categories sorted by creation date (ascending).
+ *
+ * @returns Promise resolving to categories array
+ *
+ * @example
+ * ```ts
+ * const { categories } = await queryCategories();
+ *
+ * categories.forEach(category => {
+ *   console.log(category.name, category._id);
+ * });
+ * ```
+ */
+export async function queryCategories() {
+    const result = await categoriesV2.queryCategories().find();
+    return {
+        categories: result.items || [],
+    };
+}

package/cjs/dist/api/query-services/index.js

@@ -74,8 +74,15 @@ const buildServicesQueryRequest = ({ appId, filters, paging, sort, }) => {
     if (filters?.serviceIds && filters.serviceIds.length > 0) {
         filter['_id'] = { $in: filters.serviceIds };
     }
-    // Add other filters as they are implemented in future phases
-    // categoryIds, locationIds, staffMemberIds to be added later
+    // Add categoryIds filter if provided
+    if (filters?.categoryIds && filters.categoryIds.length > 0) {
+        filter['category.id'] = { $in: filters.categoryIds };
+    }
+    // Add locationIds filter if provided
+    if (filters?.locationIds && filters.locationIds.length > 0) {
+        filter['locations.business.id'] = { $hasSome: filters.locationIds };
+    }
+    // staffMemberIds to be added later
     const query = {
         filter: Object.keys(filter).length > 0 ? filter : undefined,
         paging: paging || {

package/cjs/dist/react/core/service/Service.js

@@ -15,8 +15,14 @@ import { ServiceServiceDefinition, ServiceService, } from '../../../services/ser
  */
 function RootContent({ children, }) {
     const serviceService = useService(ServiceServiceDefinition);
+    const service = serviceService.serviceSignal.get();
     const selected = serviceService.selectedSignal.get();
     const bookable = serviceService.bookableSignal.get();
+    // In "from booking signal" mode, render null when no service is selected
+    // The signal will trigger a re-render when a service is selected
+    if (!service || !service._id) {
+        return null;
+    }
     if (typeof children === 'function') {
         return children({ selected, bookable });
     }

package/cjs/dist/react/core/service-list/ServiceListFilter.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import React from 'react';
+import type { FilterOption } from '@wix/headless-components/react';
+import { type ServiceListFilters } from '../../../services/service-list/service-list.js';
+/**
+ * Render props for the Root component
+ */
+export interface RootRenderProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterOption[];
+    /** Current filter state */
+    currentFilter: ServiceListFilters | null;
+    /** Function to update filter (includes location from BookingService) */
+    updateFilter: (filter: ServiceListFilters) => void;
+    /** Function to clear all filters */
+    clearFilters: () => void;
+    /** Whether any filters are active */
+    isFiltered: boolean;
+}
+/**
+ * Props for the Root component
+ */
+export interface RootProps {
+    /** Render function that receives filter data */
+    children: (props: RootRenderProps) => React.ReactNode;
+}
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export declare function Root(props: RootProps): React.ReactNode;

package/cjs/dist/react/core/service-list/ServiceListFilter.js

@@ -0,0 +1,59 @@
+/**
+ * Core ServiceListFilter Components
+ * Provides render props for filter data from ServiceListService and BookingService
+ */
+import { useService } from '@wix/services-manager-react';
+import { ServiceListServiceDefinition, } from '../../../services/service-list/service-list.js';
+import { BookingServiceDefinition } from '../../../services/booking/booking.js';
+/**
+ * Core render props component that provides filter data from services.
+ * Reads categories from ServiceListService and location from BookingService.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ServiceListFilter.Root>
+ *   {({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered }) => (
+ *     <Filter.Root
+ *       value={currentFilter}
+ *       onChange={updateFilter}
+ *       filterOptions={filterOptions}
+ *     >
+ *       <Filter.FilterOptions>
+ *         <Filter.FilterOptionRepeater>
+ *           <Filter.FilterOption.Label />
+ *           <Filter.FilterOption.SingleFilter />
+ *         </Filter.FilterOptionRepeater>
+ *       </Filter.FilterOptions>
+ *     </Filter.Root>
+ *   )}
+ * </ServiceListFilter.Root>
+ * ```
+ */
+export function Root(props) {
+    const serviceListService = useService(ServiceListServiceDefinition);
+    const bookingService = useService(BookingServiceDefinition);
+    // Get reactive data from signals
+    const filterOptions = serviceListService.filterOptionsSignal.get();
+    const currentFilter = serviceListService.filterSignal.get();
+    const isFiltered = serviceListService.isFilteredSignal.get();
+    const selectedLocation = bookingService.location.get();
+    const updateFilter = (newFilter) => {
+        // Include locationId from BookingService in the filter
+        const locationId = selectedLocation?.business?._id;
+        serviceListService.actions.setFilter({
+            ...newFilter,
+            ...(locationId ? { locationIds: [locationId] } : {}),
+        });
+    };
+    const clearFilters = () => {
+        serviceListService.actions.resetFilter();
+    };
+    return props.children({
+        filterOptions,
+        currentFilter,
+        updateFilter,
+        clearFilters,
+        isFiltered,
+    });
+}

package/cjs/dist/react/service/Service.d.ts

@@ -43,14 +43,32 @@ type ServiceRootWithSlug = ServiceRootBaseProps & {
     serviceId?: never;
     serviceSlug: string;
 };
+/**
+ * Props for Service.Root that reads from BookingService's selected service.
+ * When used without service config, the component reads from the booking signal.
+ * Requires BookingService to be available in the context.
+ */
+type ServiceRootFromBooking = ServiceRootBaseProps & {
+    service?: never;
+    serviceId?: never;
+    serviceSlug?: never;
+};
 /**
  * Props for Service.Root component.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Accepts one of:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No service config: Reads from BookingService's selected service
  */
-export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug;
+export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | ServiceRootWithSlug | ServiceRootFromBooking;
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -87,6 +105,17 @@ export type ServiceRootProps = ServiceRootWithService | ServiceRootWithId | Serv
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export declare const Root: React.ForwardRefExoticComponent<ServiceRootProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/service/Service.js

@@ -49,7 +49,11 @@ var TestIds;
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides service context to the entire app.
- * Requires exactly one of: service, serviceId, or serviceSlug.
+ * Can be used with:
+ * - service: Pre-loaded service object (SSR pattern)
+ * - serviceId: Service ID for dynamic loading
+ * - serviceSlug: Service slug for dynamic loading
+ * - No config: Reads from BookingService's selected service (requires BookingService)
  *
  * @order 1
  * @component
@@ -86,11 +90,30 @@ var TestIds;
  *     </Service.Root>
  *   );
  * }
+ *
+ * // Reading from BookingService's selected service
+ * // (requires Booking.Root parent context)
+ * function SelectedServiceDisplay() {
+ *   return (
+ *     <Service.Root>
+ *       <Service.Name />
+ *       <Service.Price />
+ *     </Service.Root>
+ *   );
+ * }
  * ```
  */
 export const Root = React.forwardRef((props, ref) => {
     const { children, service, serviceId, serviceSlug, appId, asChild, className, ...attrs } = props;
-    return (_jsx(CoreService.Root, { serviceServiceConfig: { service, serviceId, serviceSlug, appId }, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
+    // Build config - when no service config is provided, pass empty object
+    // to trigger "from booking signal" mode in ServiceService
+    const serviceServiceConfig = {
+        service,
+        serviceId,
+        serviceSlug,
+        appId,
+    };
+    return (_jsx(CoreService.Root, { serviceServiceConfig: serviceServiceConfig, children: ({ selected, bookable }) => (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceRoot, "data-selected": selected, "data-bookable": bookable, customElement: children, customElementProps: { selected, bookable }, ...attrs, children: children })) }));
 });
 Root.displayName = 'Service.Root';
 /**

package/cjs/dist/react/service-list/ServiceList.d.ts

@@ -3,7 +3,7 @@
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { ListVariant, GenericListLoadMoreRenderProps } from '@wix/headless-components/react';
+import { ListVariant, GenericListLoadMoreRenderProps, Filter as FilterPrimitive } from '@wix/headless-components/react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 import type { ServiceListServiceConfig } from '../../services/service-list/service-list.js';
 import type { Service as ServiceType } from '@wix/auto_sdk_bookings_services';
@@ -47,19 +47,28 @@ export declare const Root: React.ForwardRefExoticComponent<ServiceListRootProps
  */
 export interface ServicesProps {
     children: React.ReactNode;
+    /** Content to display when no services are available */
     emptyState?: React.ReactNode;
+    /** Content to display when loading and no services are available */
+    loadingState?: React.ReactNode;
+    /** Content to display when an error occurs and no services are available */
+    errorState?: React.ReactNode;
     infiniteScroll?: boolean;
     pageSize?: number;
     className?: string;
 }
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -185,3 +194,64 @@ export declare const LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & R
 export declare const Actions: {
     LoadMore: React.ForwardRefExoticComponent<LoadMoreProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Data available through asChild pattern
+ */
+export interface FilterAsChildProps {
+    /** Filter options configuration derived from categories */
+    filterOptions: FilterPrimitive.FilterOption[];
+    /** Current filter state */
+    currentFilter: FilterPrimitive.Filter;
+    /** Function to update filter */
+    updateFilter: (filter: FilterPrimitive.Filter) => void;
+    /** Function to clear all active filters */
+    clearFilters: () => void;
+    /** Whether any filters are currently active */
+    isFiltered: boolean;
+}
+/**
+ * Props for ServiceList Filter component
+ */
+export interface FilterProps {
+    /** Child components that will have access to filter functionality */
+    children: React.ReactNode | ((props: FilterAsChildProps) => React.ReactNode);
+    /** When true, the component will not render its own div wrapper */
+    asChild?: boolean;
+    /** CSS classes to apply to the filter container */
+    className?: string;
+}
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export declare const Filter: React.ForwardRefExoticComponent<FilterProps & React.RefAttributes<HTMLElement>>;

package/cjs/dist/react/service-list/ServiceList.js

@@ -4,8 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Provides components for displaying services list with pagination
  */
 import React from 'react';
-import { GenericList, } from '@wix/headless-components/react';
+import { GenericList, Filter as FilterPrimitive, } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
 import * as CoreServiceList from '../core/service-list/ServiceList.js';
+import * as CoreServiceListFilter from '../core/service-list/ServiceListFilter.js';
 import * as Service from '../service/Service.js';
 /**
  * Booking app ID constant
@@ -17,6 +19,7 @@ var TestIds;
     TestIds["serviceListServices"] = "service-list-services";
     TestIds["serviceListService"] = "service-list-service";
     TestIds["serviceListLoadMore"] = "service-list-load-more";
+    TestIds["serviceListFilter"] = "service-list-filter";
 })(TestIds || (TestIds = {}));
 /**
  * Root component that provides the ServiceList service context for rendering services lists.
@@ -70,22 +73,26 @@ const DEFAULT_PAGE_SIZE = 100;
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { children, className, variant, pageSize = DEFAULT_PAGE_SIZE } = props;
-    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore }) => {
+    return (_jsx(CoreServiceList.Services, { children: ({ services: servicesList, isLoading, hasMore, loadMore, error }) => {
             const items = servicesList.map((service) => ({
                 ...service,
                 id: service._id,
             }));
-            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
+            return (_jsx(GenericList.Root, { items: items, loadMore: () => loadMore(pageSize), hasMore: hasMore, isLoading: isLoading, error: error, className: className, ref: ref, "data-testid": TestIds.serviceListRoot, variant: variant, children: children }));
         } }));
 });
 /**
- * Container for the services list with empty state support.
+ * Container for the services list with empty, loading, and error state support.
  * Wraps GenericList.Items. Follows List Container Level pattern.
  *
  * @component
  * @example
  * ```tsx
- * <ServiceList.Services emptyState={<div>No services found</div>}>
+ * <ServiceList.Services
+ *   emptyState={<div>No services found</div>}
+ *   loadingState={<div>Loading services...</div>}
+ *   errorState={<div>Failed to load services</div>}
+ * >
  *   <ServiceList.ServiceRepeater>
  *     <Service.Name />
  *     <Service.Price />
@@ -94,8 +101,8 @@ const RootContent = React.forwardRef((props, ref) => {
  * ```
  */
 export const Services = React.forwardRef((props, ref) => {
-    const { children, ...otherProps } = props;
-    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, ...otherProps, children: children }));
+    const { children, emptyState, loadingState, errorState, ...otherProps } = props;
+    return (_jsx(GenericList.Items, { ref: ref, "data-testid": TestIds.serviceListServices, emptyState: emptyState, loadingState: loadingState, errorState: errorState, ...otherProps, children: children }));
 });
 Services.displayName = 'ServiceList.Services';
 /**
@@ -170,3 +177,52 @@ LoadMore.displayName = 'ServiceList.Actions.LoadMore';
 export const Actions = {
     LoadMore,
 };
+/**
+ * Filter component that provides filtering functionality for service lists.
+ * Integrates with ServiceListService for categories and BookingService for location.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { Filter } from '@wix/headless-components/react';
+ *
+ * <ServiceList.Filter className="filter-sidebar">
+ *   <Filter.FilterOptions>
+ *     <Filter.FilterOptionRepeater>
+ *       <Filter.FilterOption.Label />
+ *       <Filter.FilterOption.SingleFilter />
+ *     </Filter.FilterOptionRepeater>
+ *   </Filter.FilterOptions>
+ *   <Filter.Filtered>
+ *     <Filter.Action.Clear label="Clear Filters" />
+ *   </Filter.Filtered>
+ * </ServiceList.Filter>
+ *
+ * // With asChild pattern
+ * <ServiceList.Filter asChild>
+ *   <aside className="filter-sidebar">
+ *     <Filter.FilterOptions>
+ *       <Filter.FilterOptionRepeater>
+ *         <Filter.FilterOption.Label />
+ *         <Filter.FilterOption.SingleFilter />
+ *       </Filter.FilterOptionRepeater>
+ *     </Filter.FilterOptions>
+ *   </aside>
+ * </ServiceList.Filter>
+ * ```
+ */
+export const Filter = React.forwardRef((props, ref) => {
+    const { children, asChild, className, ...otherProps } = props;
+    return (_jsx(CoreServiceListFilter.Root, { children: ({ filterOptions, currentFilter, updateFilter, clearFilters, isFiltered, }) => {
+            // Prepare asChildProps for function children
+            const asChildProps = {
+                filterOptions,
+                currentFilter: currentFilter,
+                updateFilter: (value) => updateFilter(value),
+                clearFilters,
+                isFiltered,
+            };
+            return (_jsx(FilterPrimitive.Root, { value: currentFilter, onChange: (value) => updateFilter(value), filterOptions: filterOptions, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.serviceListFilter, "data-is-filtered": isFiltered, customElement: children, customElementProps: asChildProps, ...otherProps, children: children }) }));
+        } }));
+});
+Filter.displayName = 'ServiceList.Filter';