import React from 'react'; import { type Category as CategoryType } from './Category.js'; import { type CategoriesListServiceConfig } from '../services/categories-list-service.js'; /** * Props for the `CategoryList.Root` component. */ export interface CategoryListRootProps { /** * Categories to display in this component. * * Use this when you want to specify which categories to show. For example, to display featured categories only. * When using this prop, loading states and reactive updates aren't available. * To show all categories from the site with loading states, use `categoriesListConfig` instead. */ categories?: CategoryType[]; /** * Configuration object for the categories list service. * * Obtained by calling `loadCategoriesListServiceConfig()`, which fetches all categories available on the site. * When provided, enables reactive updates and loading state management. */ categoriesListConfig?: CategoriesListServiceConfig; /** * Child components to render within the category list context. * * Use `CategoryList.Loading` and `CategoryList.CategoryRepeater` * to display categories. These children have access to the category list * context and loading state. */ children: React.ReactNode; /** * Content to display when no categories are available. * * This is only rendered when the category list is empty after loading completes. */ emptyState?: React.ReactNode; } /** * Props for the `CategoryList.Loading` component. */ export interface CategoryListLoadingProps { /** * Content to display while categories are loading. * * This can be any React node, such as a loading spinner. */ children?: React.ReactNode; /** * When `true`, replaces the default `

` with your custom element. * * Use this when you need a different element type or custom structure. * The first child element will receive the loading state. * * Default: `false` */ asChild?: boolean; /** * CSS class name applied to the default element. */ className?: string; } /** * Props for the `CategoryList.CategoryRepeater` component. */ export interface CategoryListCategoryRepeaterProps { /** * Child components to render for each category. * * These children are automatically wrapped in `Category.Root`, so you can use * `Category.Root` child components directly. * * For example: * ```tsx * * * * * ``` */ children: React.ReactNode; /** * Maximum nesting depth for hierarchical categories. * * Limits how deep the category tree is rendered. Useful for preventing * deeply nested category structures from overwhelming the UI. * * Default: `undefined` (no limit) * * > **Note:** This prop isn't currently implemented. * * @internal */ maxDepth?: number; /** * When `true`, replaces the default wrapper with your custom element. * * Use this when you need a different container element type. * * Default: `false` * * > **Note:** This prop isn't currently implemented. * * @internal */ asChild?: boolean; /** * CSS class name applied to the default wrapper element. * * > **Note:** This prop isn't currently implemented. * * @internal */ className?: string; } /** * Root container that provides category list context to all child components. * * This component sets up the necessary services for managing categories list state, * including loading, error handling, and iteration. When nested inside * `ProductList.Root`, it automatically connects to the product filtering system, * allowing category selection to filter products. * * Requires `categoriesListConfig` from `loadCategoriesListServiceConfig()`. * * By default, doesn't render any wrapper element. Use `CategoryList.Loading` * to show loading states and `CategoryList.CategoryRepeater` to iterate over * categories. * * ### Component hierarchy * * ```tsx * * * // Wraps children in Category.Root * ... // See Category hierarchy * * * ``` * * @order 1 * @component * @example Basic usage with service config * ```tsx * // import { Category, CategoryList } from '@wix/stores/components'; * // import { loadCategoriesListServiceConfig } from '@wix/headless-stores/services'; * // * // Call loadCategoriesListServiceConfig() to obtain a categoriesListConfig * * // Default styling * * * * * * * * ``` * * @example Basic usage with categories array * ```tsx * // import { Category, CategoryList } from '@wix/stores/components'; * // * // You must pass an array of categories to the `categories` prop * * // Default styling * * * * * * * ``` */ export declare const Root: { (props: CategoryListRootProps): React.ReactNode; displayName: string; }; /** * Displays loading state while category data is being fetched. * * Only renders its children when the categories list is currently loading. * Once categories are loaded, this component renders nothing. * * By default, renders an `

` element with "Loading..." text. * * @component * @example Basic usage * ```tsx * // import { CategoryList } from '@wix/stores/components'; * // * // CategoryList.Loading must be wrapped in CategoryList.Root * * // Default styling * * * // Custom styling * * ``` * * @example Custom rendering with `asChild` * ```tsx * // import { CategoryList } from '@wix/stores/components'; * // * // CategoryList.Loading must be wrapped in CategoryList.Root * * // asChild with React element - Syntax demonstration for alternative element type * *
Loading categories...
*
* ``` */ export declare const Loading: React.ForwardRefExoticComponent>; /** * Iterates over each category in the list, rendering children for each one. * * Maps over all categories and provides each category through a `Category.Root` * context. Only renders when categories are successfully loaded (not during * loading state). * * These children are automatically wrapped in `Category.Root`, so you can use * `Category.Root` child components directly. * * @component * @example Basic usage * ```tsx * // import { Category, CategoryList } from '@wix/stores/components'; * // * // CategoryList.CategoryRepeater must be wrapped in CategoryList.Root * * // Default styling * * * * * ``` */ export declare function CategoryRepeater(props: CategoryListCategoryRepeaterProps): import("react/jsx-runtime").JSX.Element;