@sonic-equipment/ui 0.0.22 → 0.0.24

package/dist/index.d.ts

@@ -1,12 +1,23 @@
 /// <reference types="react" />
 import { ReactElement, MutableRefObject, ReactNode, HTMLAttributeAnchorTarget, FormEventHandler, KeyboardEvent, ComponentType } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const useBreakpoint: () => {
-    isDesktop: boolean;
-    isMobile: boolean;
-    isTablet: boolean;
+import { PressEvent } from 'react-aria-components';
+import { SearchClient } from 'algoliasearch/lite';
+import { RouterProps } from 'instantsearch.js/es/middlewares/createRouterMiddleware';
+import { UiState } from 'instantsearch.js/es/types';
+
+declare const breakpoints: {
+    readonly sm: 0;
+    readonly md: 576;
+    readonly lg: 768;
+    readonly xl: 1024;
+    readonly xxl: 1440;
 };
+type Breakpoint$2 = keyof typeof breakpoints;
+interface UseBreakpointReturnType extends Record<Breakpoint$2, boolean> {
+    current: Breakpoint$2;
+}
+declare const useBreakpoint: () => UseBreakpointReturnType;
 
 declare function useDebouncedCallback<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
 
@@ -17,10 +28,21 @@ interface UseDisclosureReturnType {
     open: () => void;
     toggle: () => void;
 }
-declare const useDisclosure: () => UseDisclosureReturnType;
+declare const useDisclosure: (initialState?: boolean) => UseDisclosureReturnType;
 
 declare const useScrollLock: (lock: boolean) => void;
 
+interface Link$1 {
+    href: string;
+    label: string;
+}
+interface Props$3 {
+    links: Link$1[];
+    updateLinks: (links: Link$1[]) => void;
+}
+declare function BreadcrumbProvider(props: Props$3): null;
+declare function useBreadcrumb(): Props$3;
+
 interface CartLine$1 {
   id: string
   productId: string | null
@@ -31,7 +53,7 @@ interface Cart$1<T extends CartLine$1 = CartLine$1> {
   cartLines?: T[] | null
 }
 
-interface Props$1<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>> {
+interface Props$2<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>> {
     addToCart: (args: {
         productId: string;
         quantity: number;
@@ -45,8 +67,8 @@ interface Props$1<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$
     }) => void;
     updateCartLine: (cartLine: TCartLine) => void;
 }
-declare function CartProvider<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>>(props: Props$1<TCartLine, TCart>): null;
-declare function useCart(): Props$1<CartLine$1, Cart$1<CartLine$1>>;
+declare function CartProvider<TCartLine extends CartLine$1 = CartLine$1, TCart extends Cart$1<TCartLine> = Cart$1<TCartLine>>(props: Props$2<TCartLine, TCart>): null;
+declare function useCart(): Props$2<CartLine$1, Cart$1<CartLine$1>>;
 declare function useProductCartLine(productId: string): {
     addToCart: (args: {
         productId: string;
@@ -63,6 +85,16 @@ declare function useProductCartLine(productId: string): {
     updateCartLine: (cartLine: CartLine$1) => void;
 };
 
+interface Props$1 {
+    isFavorite: (productId: string) => boolean;
+    toggleFavorite: (productId: string) => void;
+}
+declare function FavoriteProvider(props: Props$1): null;
+declare function useFavorite(productId: string): {
+    isFavorite: boolean;
+    toggle: () => void;
+};
+
 type EventCallback<T> = (data: T) => void
 
 declare class EventEmitter<T> {
@@ -132,6 +164,17 @@ interface Product {
     title: string;
 }
 
+interface Link {
+    href: string;
+    label: string;
+}
+interface BreadcrumbProps {
+    links: Link[];
+}
+declare function Breadcrumb({ links }: BreadcrumbProps): react_jsx_runtime.JSX.Element | null;
+
+declare function ConnectedBreadcrumb(): react_jsx_runtime.JSX.Element;
+
 interface ButtonProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children?: ReactNode | string;
@@ -220,24 +263,37 @@ interface ProductPrice$1 {
 interface ProductCardProps {
     addToCartButton: ReactElement;
     favoriteButton?: ReactElement;
+    href: string;
     image: ImageProps$1;
-    onClick: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: (e: PressEvent) => void;
     price: ProductPrice$1;
     sku: string;
     tag?: 'new' | 'sale';
     title: string;
 }
-declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+declare function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, image: { alt, fit, src, title: imageTitle }, onClick, price, sku, tag, title, }: ProductCardProps): react_jsx_runtime.JSX.Element;
+
+interface CategoryCardProps {
+  href: string
+  image: ImageProps$1
+  isSelected?: boolean
+  title: string
+}
+
+interface CategoryCarouselProps {
+    categories: CategoryCardProps[];
+}
+declare function CategoryCarousel({ categories }: CategoryCarouselProps): react_jsx_runtime.JSX.Element;
 
 interface AccordionItemProps {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
     children: ReactNode;
     className?: string;
     id: string;
+    initialIsOpen?: boolean;
     isDisabled?: boolean;
-    isOpen?: boolean;
     size?: 'md' | 'lg';
-    title: string;
+    title: ReactNode;
 }
 
 interface AccordionProps {
@@ -279,16 +335,14 @@ interface FilterOption {
 }
 interface MultiSelectProps<T extends FilterOption> {
     amountShown?: number;
-    isOpen: boolean;
     onChange: (value: T) => void;
-    onToggleOpen: (isOpen: boolean) => void;
     options: T[];
     render: ({ onChange, option, }: {
         onChange: (key: string) => void;
         option: T;
     }) => ReactNode;
 }
-declare function MultiSelect<T extends FilterOption>({ amountShown, isOpen, onChange, onToggleOpen, options, render, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function MultiSelect<T extends FilterOption>({ amountShown, onChange, options, render, }: MultiSelectProps<T>): react_jsx_runtime.JSX.Element | null;
 
 interface CheckboxProps$1 {
     _pseudo?: 'none' | 'focus' | 'hover' | 'active';
@@ -397,15 +451,17 @@ declare function FavoriteOutlinedIcon(props: React.SVGProps<SVGSVGElement>): rea
 
 declare function HashedOutlinedIcon(props: React.SVGProps<SVGSVGElement>): react_jsx_runtime.JSX.Element;
 
-type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
+type TranslationId = 'Chosen filters' | 'Clear filters' | 'Excl. VAT' | 'Hide filters' | 'Incl. VAT' | 'Show' | 'Show all' | 'Show filters' | 'Show less' | 'Sort' | 'articles' | 'article' | 'of';
 
 interface FormattedMessageProps {
+    fallbackValue?: string;
     id: TranslationId;
+    optional?: boolean;
     replacementValues?: Record<string, string>;
 }
 declare const FormattedMessage: ComponentType<FormattedMessageProps>;
 
-type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string;
+type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string | undefined;
 
 interface IntlProviderProps {
     children: React.ReactNode;
@@ -413,7 +469,11 @@ interface IntlProviderProps {
 }
 declare function IntlProvider({ children, formatMessage }: IntlProviderProps): react_jsx_runtime.JSX.Element;
 
-type FormattedMessageFunction = (key: TranslationId, replacementValues?: Record<string, string>) => string;
+type FormattedMessageFunction = (id: TranslationId, options?: {
+    fallbackValue?: string;
+    optional?: boolean;
+    replacementValues?: Record<string, string>;
+}) => string;
 declare const useFormattedMessage: () => FormattedMessageFunction;
 
 interface ProductOverviewGridProps {
@@ -442,6 +502,18 @@ interface ImageProps {
 }
 declare function Image({ alt, className, fallbackSrc, fit, height, loading, sizes: sizesProp, src, srcSet: srcSetProp, title, width, }: ImageProps): react_jsx_runtime.JSX.Element;
 
+declare function PageLayout({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface PageProps {
+    children: ReactNode;
+    className?: string;
+    title?: string;
+}
+declare function Page({ children, className, title }: PageProps): react_jsx_runtime.JSX.Element;
+
 interface Filters {
     color: {
         options: {
@@ -451,35 +523,22 @@ interface Filters {
         }[];
     };
 }
-type ProductListingProps = {
+type ProductListingPageProps = {
+    category: string;
     isLoading?: boolean;
 };
-declare function ProductListing({ isLoading }: ProductListingProps): react_jsx_runtime.JSX.Element;
-
-declare function createProductListingSearchParams(state: {
-    filters: {
-        colors: string[];
-    };
-    sort: {
-        by: string;
-        direction: string;
-    };
-}): URLSearchParams;
-declare function parseProductListingSearchParams(params: URLSearchParams): {
-    filters: {
-        colors: string[];
-    };
-    sort: {
-        by: string;
-        direction: string;
-    };
-};
+declare function ProductListingPage({ category, isLoading, }: ProductListingPageProps): react_jsx_runtime.JSX.Element;
 
 interface SidebarProps {
     children: React.ReactNode;
 }
 declare function Sidebar({ children }: SidebarProps): react_jsx_runtime.JSX.Element;
 
+interface SidebarProviderProps {
+    children: ReactElement;
+}
+declare function SidebarProvider({ children }: SidebarProviderProps): react_jsx_runtime.JSX.Element;
+
 declare function AlgoliaCategories(): react_jsx_runtime.JSX.Element;
 
 interface AlgoliaFilterPanelProps {
@@ -487,29 +546,48 @@ interface AlgoliaFilterPanelProps {
 }
 declare function AlgoliaFilterPanel({ onShowProducts, }: AlgoliaFilterPanelProps): react_jsx_runtime.JSX.Element;
 
-interface AlgoliaMultiSelectProps {
+interface RefinementListItem {
+    count: number;
+    highlighted?: string;
+    isRefined: boolean;
+    label: string;
+    value: string;
+}
+interface AlgoliaFilterSectionProps {
+    attribute: string;
+    children({ items, refine, }: {
+        items: RefinementListItem[];
+        refine(value: string): void;
+    }): React.ReactNode;
+    initialIsOpen?: boolean;
+}
+declare function AlgoliaFilterSection({ attribute, children, initialIsOpen, }: AlgoliaFilterSectionProps): react_jsx_runtime.JSX.Element | null;
+
+interface AlgoliaMultiSelectFilterSectionProps {
     attribute: string;
 }
-declare function AlgoliaMultiSelect({ attribute }: AlgoliaMultiSelectProps): react_jsx_runtime.JSX.Element;
+declare function AlgoliaMultiSelectFilterSection({ attribute, }: AlgoliaMultiSelectFilterSectionProps): react_jsx_runtime.JSX.Element;
 
 declare function AlgoliaPagination(): react_jsx_runtime.JSX.Element;
 
-declare function AlgoliaProductList(): react_jsx_runtime.JSX.Element;
-
 interface AlgoliaContextType {
     online: boolean;
     setOnline: (online: boolean) => void;
     toggleOnline: VoidFunction;
 }
 interface AlgoliaProviderProps {
-    children: React.ReactNode;
+    category: string;
+    children: ReactNode;
+    offlineSearchClient?: SearchClient;
     online?: boolean;
+    routing?: boolean | RouterProps<UiState, UiState> | undefined;
+    searchClient: SearchClient;
 }
-declare function AlgoliaProvider({ children, online: _online, }: AlgoliaProviderProps): react_jsx_runtime.JSX.Element;
+declare function AlgoliaProvider({ category, children, offlineSearchClient, online: _online, routing, searchClient, }: AlgoliaProviderProps): react_jsx_runtime.JSX.Element;
 declare function useAlgolia(): AlgoliaContextType;
 
 declare function AlgoliaResultsCount(): string | null;
 
 declare function AlgoliaSortBy(): react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaMultiSelect, AlgoliaPagination, AlgoliaProductList, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, type Product, ProductCard, type ProductCardProps, ProductListing, type ProductListingProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, TextField, createProductListingSearchParams, parseProductListingSearchParams, useAlgolia, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };
+export { Accordion, AddToCartButton, AlgoliaCategories, AlgoliaFilterPanel, type AlgoliaFilterPanelProps, AlgoliaFilterSection, AlgoliaMultiSelectFilterSection, AlgoliaPagination, AlgoliaProvider, AlgoliaResultsCount, AlgoliaSortBy, Breadcrumb, type BreadcrumbProps, BreadcrumbProvider, Button, type ButtonProps, type Cart, CartFilledIcon, type CartLine, CartOutlinedIcon, CartProvider, CategoryCarousel, type CategoryCarouselProps, Checkbox, type CheckboxProps$1 as CheckboxProps, ColorCheckbox, type ColorCheckboxProps, ConnectedAddToCartButton, ConnectedBreadcrumb, DehashedOutlinedIcon, FavoriteButton, type FavoriteButtonProps, FavoriteFilledIcon, FavoriteOutlinedIcon, FavoriteProvider, type FilterOption, type Filters, FormattedMessage, type FormattedMessageFunction, type FormattedMessageProps, GlobalStateProvider, GlobalStateProviderContext, HashedOutlinedIcon, IconButton, type IconButtonProps, Image, type ImageProps, IntlProvider, type Link$1 as Link, LinkButton, type LinkButtonProps, MultiSelect, type MultiSelectProps, NumberField, type NumberFieldSize, Page, PageLayout, type PageProps, type Product, ProductCard, type ProductCardProps, ProductListingPage, type ProductListingPageProps, ProductOverviewGrid, type ProductOverviewGridProps, ProductPrice, type ProductPriceProps, ProductSku, type ProductSkuProps, type RefinementListItem, RightArrowFilledIcon, Select, type SelectProps, ShowAll, type ShowAllProps, Sidebar, type SidebarProps, SidebarProvider, TextField, useAlgolia, useBreadcrumb, useBreakpoint, useCart, useDebouncedCallback, useDisclosure, useFavorite, useFormattedMessage, useGlobalState, useProductCartLine, useScrollLock };