@festo-ui/react 9.0.1 → 10.0.0-dev.827

package/dist/components/popovers/popover/Popover.js

@@ -1,106 +1,96 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Popover.css";
+import { FloatingArrow, FloatingPortal, arrow, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useHover, useInteractions } from "@floating-ui/react";
 import classnames from "classnames";
-import { useRef, useState } from "react";
-import { usePopper } from "react-popper";
+import { forwardRef, useRef } from "react";
 import { useControlled } from "../../../utils/useControlled.js";
 import { useForkRef } from "../../../utils/useForkRef.js";
-import { useOnClickOutside } from "../../../utils/useOnClickOutside.js";
-function Popover({ popoverContent, children, position, fallbackPositions, openOnHover = false, defaultOpen = false, open, onStatusChange, wrapper, className, flip = true, containerClassName, popoverClassName, stopPropagation = false, arrow = true, onClick }) {
-    const [showPopper, setShowPopper] = useControlled({
-        controlled: open,
-        default: defaultOpen
+const Popover = /*#__PURE__*/ forwardRef(({ children, className, style, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false, ...props }, ref)=>{
+    const [showPopover, setShowPopover] = useControlled({
+        controlled: isOpen,
+        default: openByDefault
     });
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const referenceElement = useRef(null);
-    const popperElRef = useRef(null);
-    const combinedRef = useForkRef(popperElRef, setPopperElement);
-    const { styles, attributes } = usePopper(referenceElement.current, popperElement, {
+    const arrowRef = useRef(null);
+    const triggerRef = useRef(null);
+    const handleRef = useForkRef(ref, triggerRef);
+    const { refs, floatingStyles, context } = useFloating({
         placement: position,
-        modifiers: [
-            {
-                name: 'arrow',
-                options: {
-                    element: arrowElement
-                }
-            },
-            {
-                name: 'offset',
-                options: {
-                    offset: [
-                        0,
-                        24
-                    ]
-                }
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: flip ? fallbackPositions : [
-                        position || 'auto'
-                    ]
-                }
-            }
-        ]
+        open: showPopover,
+        onOpenChange: (isOpen)=>{
+            setShowPopover(isOpen);
+            onChange?.(isOpen);
+        },
+        middleware: [
+            offset(12),
+            enableFlip && flip({
+                fallbackPlacements: fallbackPositions || void 0,
+                fallbackAxisSideDirection: 'end'
+            }),
+            shift({
+                padding: 8
+            }),
+            showArrow && arrow({
+                element: arrowRef,
+                padding: 8
+            })
+        ].filter(Boolean),
+        whileElementsMounted: autoUpdate
+    });
+    const dismiss = useDismiss(context);
+    const click = useClick(context, {
+        enabled: !openOnHover,
+        event: 'click',
+        stickIfOpen: true
     });
-    const handleChange = (e, status)=>{
-        if (stopPropagation) {
-            e?.stopPropagation();
-            e?.preventDefault();
-        }
-        setShowPopper(status);
-        onStatusChange?.(status);
-    };
-    function closePopover(event) {
-        handleChange(event, false);
-    }
-    useOnClickOutside(popperElRef, closePopover, referenceElement);
-    function handleKeyDown(event) {
-        if ('Enter' === event.key) handleChange(void 0, true);
-        if ('Escape' === event.key) handleChange(void 0, false);
-    }
-    function handleKeyUp(event) {
-        if (' ' === event.key) handleChange(void 0, true);
-    }
-    function handleTriggerClick(event) {
-        onClick?.(event);
-        if (event.defaultPrevented) setShowPopper(!showPopper);
-        else handleChange(event, !showPopper);
-    }
-    const childrenWrapper = /*#__PURE__*/ jsx("div", {
-        tabIndex: 0,
-        role: "button",
-        className: className,
-        ref: referenceElement,
-        onKeyDown: handleKeyDown,
-        onKeyUp: handleKeyUp,
-        onClick: handleTriggerClick,
-        onMouseEnter: openOnHover ? (e)=>handleChange(e, true) : void 0,
-        onMouseLeave: openOnHover ? (e)=>handleChange(e, false) : void 0,
-        children: children
+    const hover = useHover(context, {
+        enabled: openOnHover
     });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        dismiss,
+        click,
+        hover
+    ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            wrapper ? wrapper(childrenWrapper) : childrenWrapper,
-            showPopper && /*#__PURE__*/ jsxs("div", {
-                className: classnames('fwe-popover-container', containerClassName),
-                ref: combinedRef,
-                style: styles.popper,
-                ...attributes.popper,
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: classnames('fwe-popover', popoverClassName),
-                        children: popoverContent
-                    }),
-                    arrow && /*#__PURE__*/ jsx("div", {
-                        ref: setArrowElement,
-                        style: styles.arrow,
-                        id: "arrow"
-                    })
-                ]
+            /*#__PURE__*/ jsx("div", {
+                className: className,
+                style: style,
+                ref: (node)=>{
+                    refs.setReference(node);
+                    if ('function' == typeof handleRef) handleRef(node);
+                },
+                ...getReferenceProps({
+                    ...props,
+                    onClick: (event)=>{
+                        if (stopPropagation) event.stopPropagation();
+                        onTriggerClick?.(event);
+                    }
+                }),
+                children: children
+            }),
+            showPopover && /*#__PURE__*/ jsx(FloatingPortal, {
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "fwe-popover-container",
+                    ref: refs.setFloating,
+                    style: floatingStyles,
+                    ...getFloatingProps(),
+                    children: [
+                        showArrow && /*#__PURE__*/ jsx(FloatingArrow, {
+                            ref: arrowRef,
+                            context: context,
+                            fill: "white",
+                            width: 16,
+                            height: 8
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: classnames('fwe-popover', containerClassName),
+                            children: content
+                        })
+                    ]
+                })
             })
         ]
     });
-}
+});
+Popover.displayName = 'Popover';
 export { Popover };

package/dist/components/popovers/popover-menu/PopoverMenu.d.ts

@@ -1,7 +1,9 @@
 import { type ReactNode } from 'react';
 import { type PopoverProps } from '../popover/Popover';
-import { type PopoverMenuItemProps } from '../popover-menu-item/PopoverMenuItem';
-export interface PopoverMenuProps extends Omit<PopoverProps, 'popoverContent' | 'open' | 'onStatusChange'> {
-    menu: PopoverMenuItemProps[] | ReactNode[];
+import { type PopoverMenuItemProps } from './popover-menu-item/PopoverMenuItem';
+export interface PopoverMenuProps extends Omit<PopoverProps, 'content' | 'isOpen' | 'onStateChange'> {
+    readonly items: PopoverMenuItemProps[] | ReactNode;
 }
-export declare function PopoverMenu({ menu, ...props }: Readonly<PopoverMenuProps>): import("react/jsx-runtime").JSX.Element;
+export declare const PopoverMenu: (props: PopoverMenuProps & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/PopoverMenu.js

@@ -1,37 +1,33 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useMemo, useState } from "react";
+import { forwardRef, useMemo, useState } from "react";
 import { Popover } from "../popover/Popover.js";
-import { PopoverMenuItem } from "../popover-menu-item/PopoverMenuItem.js";
 import { PopoverMenuContext } from "./PopoverMenuContext.js";
-function PopoverMenu({ menu, ...props }) {
-    const [showPopper, setShowPopper] = useState(false);
+import { PopoverMenuItem } from "./popover-menu-item/PopoverMenuItem.js";
+const PopoverMenu = /*#__PURE__*/ forwardRef(({ items, className, containerClassName, children, ...props }, ref)=>{
+    const [showPopoverMenu, setShowPopoverMenu] = useState(false);
     const isPopoverMenuItemPropsArray = (items)=>Array.isArray(items) && items.length > 0 && 'text' in items[0];
     let content = null;
-    content = isPopoverMenuItemPropsArray(menu) ? menu.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
-            item: item
-        }, item.text)) : menu;
-    const popoverMenuContext = useMemo(()=>({
-            setShowPopper
+    content = isPopoverMenuItemPropsArray(items) ? items.map((item)=>/*#__PURE__*/ jsx(PopoverMenuItem, {
+            ...item
+        }, item.text)) : items;
+    const popoverMenuContextValue = useMemo(()=>({
+            setShowPopoverMenu: setShowPopoverMenu
         }), []);
-    return /*#__PURE__*/ jsx("div", {
-        className: classnames('fwe-popover-menu-trigger', props.className),
-        children: /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
-            value: popoverMenuContext,
-            children: /*#__PURE__*/ jsx(Popover, {
-                popoverClassName: "fwe-popover--menu",
-                popoverContent: content,
-                position: "right",
-                open: showPopper,
-                onStatusChange: setShowPopper,
-                ...props,
-                children: /*#__PURE__*/ jsx("div", {
-                    "data-testid": "fwe-popover-menu-trigger-button",
-                    className: "fwe-popover-menu-trigger-button",
-                    children: props.children
-                })
-            })
+    return /*#__PURE__*/ jsx(PopoverMenuContext.Provider, {
+        value: popoverMenuContextValue,
+        children: /*#__PURE__*/ jsx(Popover, {
+            className: classnames('fwe-popover-menu-trigger', className),
+            containerClassName: classnames('fwe-popover--menu', containerClassName),
+            content: content,
+            position: "right",
+            isOpen: showPopoverMenu,
+            onChange: setShowPopoverMenu,
+            ref: ref,
+            ...props,
+            children: children
         })
     });
-}
+});
+PopoverMenu.displayName = 'PopoverMenu';
 export { PopoverMenu };

package/dist/components/popovers/popover-menu/PopoverMenuContext.d.ts

@@ -1,3 +1,4 @@
+import { type Dispatch, type SetStateAction } from 'react';
 export declare const PopoverMenuContext: import("react").Context<{
-    setShowPopper: React.Dispatch<React.SetStateAction<boolean>>;
+    setShowPopoverMenu: Dispatch<SetStateAction<boolean>>;
 }>;

package/dist/components/popovers/popover-menu/PopoverMenuContext.js

@@ -1,5 +1,5 @@
 import { createContext } from "react";
 const PopoverMenuContext = createContext({
-    setShowPopper: ()=>{}
+    setShowPopoverMenu: ()=>{}
 });
 export { PopoverMenuContext };

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface PopoverMenuItemProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onClick'> {
+    readonly 'data-testid'?: string;
+    readonly text: string;
+    readonly icon: React.ReactNode;
+    readonly onClick?: (data: unknown) => void;
+    readonly data?: unknown;
+}
+export declare const PopoverMenuItem: (props: PopoverMenuItemProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/popovers/popover-menu/popover-menu-item/PopoverMenuItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext } from "react";
+import { IconWrapper } from "../../../icon-wrapper/IconWrapper.js";
+import { PopoverMenuContext } from "../PopoverMenuContext.js";
+const PopoverMenuItem = /*#__PURE__*/ forwardRef(({ text, icon, onClick, data, className, ...props }, ref)=>{
+    const { setShowPopoverMenu } = useContext(PopoverMenuContext);
+    function handleClick(e) {
+        e?.preventDefault();
+        e?.stopPropagation();
+        if (setShowPopoverMenu) setShowPopoverMenu(false);
+        if (onClick) onClick(data);
+    }
+    return /*#__PURE__*/ jsxs("button", {
+        type: "button",
+        className: className,
+        onClick: handleClick,
+        ref: ref,
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(IconWrapper, {
+                icon: icon
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "fwe-mr-xxs",
+                children: text
+            })
+        ]
+    });
+});
+PopoverMenuItem.displayName = 'PopoverMenuItem';
+export { PopoverMenuItem };

package/dist/components/popovers/tooltip/Tooltip.d.ts

@@ -1,5 +1,6 @@
 import type { PopoverProps } from '../popover/Popover';
-export interface TooltipProps extends Omit<PopoverProps, 'popoverContent' | 'openOnHover'> {
-    title: React.ReactNode;
+export interface TooltipProps extends Omit<PopoverProps, 'openOnHover'> {
 }
-export declare function Tooltip({ title, ...props }: Readonly<TooltipProps>): import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: (props: TooltipProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/tooltip/Tooltip.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Popover } from "../popover/Popover.js";
-function Tooltip({ title, ...props }) {
-    return /*#__PURE__*/ jsx(Popover, {
+const Tooltip = /*#__PURE__*/ forwardRef(({ content, children, ...props }, ref)=>/*#__PURE__*/ jsx(Popover, {
         position: "bottom",
-        popoverContent: title,
         openOnHover: true,
+        content: content,
+        ref: ref,
         ...props,
-        children: props.children
-    });
-}
+        children: children
+    }));
+Tooltip.displayName = 'Tooltip';
 export { Tooltip };

package/dist/components/progress/Progress.d.ts

@@ -1,7 +1,6 @@
-import type { ClassNameProps } from '../../utils/types';
-export interface ProgressProps extends ClassNameProps {
+export interface ProgressProps extends React.ComponentPropsWithoutRef<'div'> {
     readonly progress: number;
     readonly background?: 'white' | 'black' | 'background';
     readonly error?: boolean;
 }
-export declare function Progress({ background, error, progress, className, }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare const Progress: (props: ProgressProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/progress/Progress.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
-function Progress({ background = 'white', error = false, progress, className }) {
+import { forwardRef } from "react";
+const Progress = /*#__PURE__*/ forwardRef(({ background = 'white', error = false, progress, className, ...props }, ref)=>{
     const classes = classnames('fwe-progress-bar', {
         'fwe-bg-red': error
     }, {
@@ -10,6 +11,8 @@ function Progress({ background = 'white', error = false, progress, className })
     });
     return /*#__PURE__*/ jsx("div", {
         className: classnames('fwe-progress', className),
+        ref: ref,
+        ...props,
         children: /*#__PURE__*/ jsx("div", {
             className: classes,
             role: "progressbar",
@@ -22,5 +25,6 @@ function Progress({ background = 'white', error = false, progress, className })
             "aria-label": "progressbar"
         })
     });
-}
+});
+Progress.displayName = 'Progress';
 export { Progress };

package/dist/components/search-input/ClearButton.d.ts

@@ -1,2 +1 @@
-import type { ComponentPropsWithoutRef } from 'react';
-export declare function ClearButton(props: ComponentPropsWithoutRef<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare const ClearButton: (props: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/dist/components/search-input/ClearButton.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-function ClearButton(props) {
-    return /*#__PURE__*/ jsx("button", {
+import { forwardRef } from "react";
+const ClearButton = /*#__PURE__*/ forwardRef((props, ref)=>/*#__PURE__*/ jsx("button", {
         type: "button",
         className: "fwe-clear-icon fr-search-input-clear-button",
         "aria-label": "Clear",
+        ref: ref,
         ...props
-    });
-}
+    }));
+ClearButton.displayName = 'ClearButton';
 export { ClearButton };

package/dist/components/search-input/SearchInput.d.ts

@@ -1,7 +1,7 @@
 import './SearchInput.scss';
+import { type ComponentPropsWithoutRef } from 'react';
 import type { SearchSuggestion } from './SearchSuggestion';
-export interface SearchInputProps {
-    readonly disabled?: boolean;
+export interface SearchInputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'value' | 'defaultValue'> {
     readonly label?: string;
     readonly defaultValue?: string;
     readonly value?: string;
@@ -9,6 +9,5 @@ export interface SearchInputProps {
     readonly onChange?: (value: string) => void;
     readonly onKeyboardNavigate?: (value: string) => void;
     readonly onSearch?: (value: string) => void;
-    readonly className?: string;
 }
-export declare function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, }: SearchInputProps): import("react/jsx-runtime").JSX.Element;
+export declare const SearchInput: (props: SearchInputProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/search-input/SearchInput.js

@@ -1,19 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./SearchInput.css";
 import classnames from "classnames";
-import { useRef } from "react";
+import { forwardRef, useRef } from "react";
+import { useForkRef } from "../../utils/useForkRef.js";
 import { useOnClickOutside } from "../../utils/useOnClickOutside.js";
 import { ClearButton } from "./ClearButton.js";
 import { useSearchInput } from "./useSearchInput.js";
-function SearchInput({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className }) {
+const SearchInput = /*#__PURE__*/ forwardRef(({ defaultValue, disabled, label, value, suggestions, onChange, onSearch, onKeyboardNavigate, className, ...props }, ref)=>{
     const inputRef = useRef(null);
     const containerRef = useRef(null);
+    const handleRef = useForkRef(ref, containerRef);
     const cappedSuggestions = suggestions?.slice(0, 10) ?? [];
     const { handleFocus, handleInput, handleClearQuery, handleSuggestionClick, handleOutsideClick, handleKeyDown, hideSuggestionList, selectedSuggestionIndex, innerValue } = useSearchInput(inputRef, cappedSuggestions, value, defaultValue, onChange, onSearch, onKeyboardNavigate);
     useOnClickOutside(containerRef, handleOutsideClick);
     return /*#__PURE__*/ jsxs("div", {
         className: classnames('fwe-search-input', className),
-        ref: containerRef,
+        ref: handleRef,
         children: [
             /*#__PURE__*/ jsx("input", {
                 ref: inputRef,
@@ -24,7 +26,8 @@ function SearchInput({ defaultValue, disabled, label, value, suggestions, onChan
                 "aria-label": "Search",
                 onInput: handleInput,
                 onKeyDown: handleKeyDown,
-                value: innerValue
+                value: innerValue,
+                ...props
             }),
             /*#__PURE__*/ jsx("div", {
                 className: "fwe-search-icon"
@@ -57,5 +60,6 @@ function SearchInput({ defaultValue, disabled, label, value, suggestions, onChan
             })
         ]
     });
-}
+});
+SearchInput.displayName = 'SearchInput';
 export { SearchInput };

package/dist/components/snackbar/Snackbar.d.ts

@@ -1,6 +1,5 @@
 import './Snackbar.scss';
-import type { ClassNameProps } from '../../utils/types';
-export interface SnackbarConfig extends ClassNameProps {
+export interface SnackbarConfig {
     type?: 'info' | 'warning' | 'error';
     variant?: 'a' | 'b' | 'c';
     darkBackground?: boolean;
@@ -8,14 +7,15 @@ export interface SnackbarConfig extends ClassNameProps {
     action?: string;
     disappearAfter?: number | null;
     key?: string | number;
+    'data-testid'?: string;
 }
 export interface SnackbarData extends SnackbarConfig {
     text: string;
 }
-export interface SnackbarProps {
+export interface SnackbarProps extends React.ComponentPropsWithoutRef<'div'> {
     readonly data?: SnackbarData;
     readonly onAction?: () => void;
     readonly onClose?: () => void;
     readonly first?: boolean;
 }
-export declare function Snackbar(props: SnackbarProps): import("react/jsx-runtime").JSX.Element;
+export declare const Snackbar: (props: SnackbarProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/snackbar/Snackbar.js

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./Snackbar.css";
 import classnames from "classnames";
-import { useEffect, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { CSSTransition } from "react-transition-group";
-function Snackbar(props) {
-    const { data, onAction, onClose, first = false } = props;
+import { useForkRef } from "../../utils/useForkRef.js";
+const Snackbar = /*#__PURE__*/ forwardRef(({ data, onAction, onClose, first = false, className, ...props }, ref)=>{
     const [show, setShow] = useState(true);
     const nodeRef = useRef(null);
+    const handleRef = useForkRef(ref, nodeRef);
     useEffect(()=>{
         let disappearAfter = 5000;
         if (data?.disappearAfter !== null) {
@@ -34,8 +35,9 @@ function Snackbar(props) {
         classNames: classes,
         appear: true,
         children: /*#__PURE__*/ jsx("div", {
-            ref: nodeRef,
-            className: classes,
+            ref: handleRef,
+            className: classnames(classes, className),
+            ...props,
             children: /*#__PURE__*/ jsxs("div", {
                 className: classnames({
                     'fwe-snackbar': true,
@@ -45,7 +47,8 @@ function Snackbar(props) {
                     'fwe-snackbar-warning': data?.type === 'warning',
                     'fwe-snackbar-error': data?.type === 'error',
                     'fwe-snackbar-shadow': data?.darkBackground
-                }, data?.className),
+                }),
+                "data-testid": data?.['data-testid'],
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         children: data?.text
@@ -74,5 +77,6 @@ function Snackbar(props) {
             })
         })
     });
-}
+});
+Snackbar.displayName = 'Snackbar';
 export { Snackbar };

package/dist/components/snackbar/SnackbarProvider.d.ts

@@ -1,7 +1,7 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import type React from 'react';
 import { type SnackbarConfig, type SnackbarData } from './Snackbar';
-export interface SnackbarProviderProps extends ClassNamePropsWithChildren {
+export interface SnackbarProviderProps extends React.ComponentPropsWithoutRef<'div'> {
     readonly config?: SnackbarConfig;
 }
-export declare function SnackbarProvider(props: SnackbarProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const SnackbarProvider: (props: SnackbarProviderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 export declare const addSnackbar: (snackData: SnackbarData, onAction?: () => void, onClose?: () => void) => string | number;

package/dist/components/snackbar/SnackbarProvider.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useCallback, useMemo, useState } from "react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
 import { Snackbar } from "./Snackbar.js";
 import { SnackbarContext } from "./SnackbarContext.js";
 let addSnackbarFunction;
-function SnackbarProvider(props) {
+const SnackbarProvider = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { config = {
         darkBackground: true
-    }, children, className } = props;
+    }, children, className, ...rest } = props;
     const [snacks, setSnacks] = useState([]);
     const addSnackbar = useCallback((snackData, onAction, onClose)=>{
         const key = snackData.key ?? Date.now() + Math.random();
@@ -49,6 +49,8 @@ function SnackbarProvider(props) {
             children,
             /*#__PURE__*/ jsx("div", {
                 className: classnames('fwe-snackbar-container', className),
+                ref: ref,
+                ...rest,
                 children: snacks.map((snack)=>/*#__PURE__*/ jsx(Snackbar, {
                         data: snack.data,
                         onAction: ()=>snack.onAction ? snack.onAction() : void 0,
@@ -58,9 +60,10 @@ function SnackbarProvider(props) {
             })
         ]
     });
-}
+});
 const SnackbarProvider_addSnackbar = (snackData, onAction, onClose)=>{
     if (!addSnackbarFunction) throw new Error('SnackbarProvider is not mounted.');
     return addSnackbarFunction(snackData, onAction, onClose);
 };
+SnackbarProvider.displayName = 'SnackbarProvider';
 export { SnackbarProvider, SnackbarProvider_addSnackbar as addSnackbar };

package/dist/components/stepper-horizontal/StepperHorizontal.d.ts

@@ -1,7 +1,7 @@
 import './StepperHorizontal.scss';
 import React, { type ComponentPropsWithoutRef } from 'react';
-export interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> {
+export interface StepperHorizontalProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
     stepIndex?: number;
     onChange?: (stepIndex: number) => void;
 }
-export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+export declare const StepperHorizontal: (props: StepperHorizontalProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/stepper-horizontal/StepperHorizontal.js

@@ -13,10 +13,11 @@ const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepI
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: "fwe-stepper-horizontal",
+                className: classnames('fwe-stepper-horizontal', className),
+                ref: ref,
+                ...props,
                 children: stepComponents?.map((step, i)=>/*#__PURE__*/ jsx("button", {
                         type: "button",
-                        ref: ref,
                         className: classnames('fwe-step-container fr-step-container', {
                             'fwe-step-done': stepIndex > i,
                             'fwe-step-active': i === stepIndex
@@ -25,7 +26,6 @@ const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepI
                         disabled: stepIndex <= i,
                         "aria-label": `Step ${i + 1}: ${step.props.title}`,
                         "aria-current": i === stepIndex ? 'step' : void 0,
-                        ...props,
                         children: /*#__PURE__*/ jsxs("div", {
                             className: "fwe-step",
                             children: [
@@ -45,4 +45,5 @@ const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepI
         ]
     });
 });
+StepperHorizontal.displayName = 'StepperHorizontal';
 export { StepperHorizontal };