@festo-ui/react 9.0.1-dev.815 → 9.0.1-dev.818

package/dist/components/modals/ModalFooter.js

@@ -1,12 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { forwardRef } from "react";
-const ModalFooter = /*#__PURE__*/ forwardRef(({ children, className }, ref)=>/*#__PURE__*/ jsx("div", {
+const ModalFooter = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
         ref: ref,
         className: classnames('fwe-modal-footer', className),
+        ...props,
         children: /*#__PURE__*/ jsx("div", {
             className: classnames('fwe-modal-buttons'),
             children: children
         })
     }));
+ModalFooter.displayName = 'ModalFooter';
 export { ModalFooter };

package/dist/components/modals/Prompt.d.ts

@@ -1,5 +1,4 @@
 import type React from 'react';
-import { type ReactElement } from 'react';
 import { type ModalProps } from './Modal';
 export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'children' | 'onChange'> {
     readonly title: string;
@@ -7,10 +6,10 @@ export interface PromptProps extends Omit<ModalProps, 'head' | 'body' | 'childre
     readonly hint?: string;
     readonly label?: string;
     readonly value?: string;
-    readonly onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly cancel?: string;
     readonly ok?: string;
     readonly onCancel?: () => void;
     readonly onOk: (value: string | undefined) => void;
 }
-export declare function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }: PromptProps): ReactElement;
+export declare const Prompt: (props: PromptProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/Prompt.js

@@ -1,20 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { TextInput } from "../../forms/text-input/TextInput.js";
 import { Modal } from "./Modal.js";
 import { ModalFooter } from "./ModalFooter.js";
-function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, ...props }) {
+const Prompt = /*#__PURE__*/ forwardRef(({ title, subtitle, hint, label, value, onChange, onOk, onCancel, cancel, ok, className, ...props }, ref)=>{
     const [innerValue, setInnerValue] = useState(value);
     useEffect(()=>{
         setInnerValue(value);
     }, [
         value
     ]);
-    function handleChange(e) {
-        setInnerValue(e.target.value);
-        if (onChange) onChange(e);
+    function handleChange(newValue, e) {
+        setInnerValue(newValue);
+        if (onChange) onChange(newValue, e);
     }
     return /*#__PURE__*/ jsx(Modal, {
+        className: className,
         head: /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 subtitle && /*#__PURE__*/ jsx("h2", {
@@ -34,6 +35,7 @@ function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel,
             value: innerValue,
             autoFocus: true
         }),
+        ref: ref,
         ...props,
         children: (cancel || ok) && /*#__PURE__*/ jsxs(ModalFooter, {
             children: [
@@ -54,5 +56,6 @@ function Prompt({ title, subtitle, hint, label, value, onChange, onOk, onCancel,
             ]
         })
     });
-}
+});
+Prompt.displayName = 'Prompt';
 export { Prompt };

package/dist/components/modals/image-gallery/ImageGallery.css

@@ -316,7 +316,7 @@
     display: none !important;
   }
 
-  & svg {
+  & ::slotted(svg), & svg {
     object-fit: contain;
     transform-origin: center;
     fill: currentColor;
@@ -339,7 +339,7 @@
   left: var(--swiper-navigation-sides-offset, 4px);
   right: auto;
 
-  & .swiper-navigation-icon {
+  & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
     transform: rotate(180deg);
   }
 }
@@ -367,13 +367,13 @@
   }
 
   & .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next {
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(180deg);
     }
   }
 
   &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(0);
     }
   }
@@ -391,7 +391,7 @@
     top: var(--swiper-navigation-sides-offset, 4px);
     bottom: auto;
 
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(-90deg);
     }
   }
@@ -400,7 +400,7 @@
     bottom: var(--swiper-navigation-sides-offset, 4px);
     top: auto;
 
-    & .swiper-navigation-icon {
+    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
       transform: rotate(90deg);
     }
   }

package/dist/components/modals/image-gallery/ImageGallery.d.ts

@@ -18,4 +18,4 @@ export interface ImageGalleryProps extends ComponentPropsWithoutRef<'div'>, Moda
     descriptiveContent?: boolean | ((index: number) => React.ReactNode);
     onSlideChanged?: (index: number) => void;
 }
-export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLImageElement>) => React.ReactElement | null;
+export declare const ImageGallery: (props: ImageGalleryProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/modals/image-gallery/ImageGallery.js

@@ -100,4 +100,5 @@ const ImageGallery = /*#__PURE__*/ forwardRef(({ isOpen, startIndex, images, thu
         ]
     });
 });
+ImageGallery.displayName = 'ImageGallery';
 export { ImageGallery };

package/dist/components/modals/image-gallery/ImageGallerySwiper.js

@@ -36,5 +36,5 @@ function ImageGallerySwiper({ images, onSlideChanged, thumbsSwiper, startIndex }
             }, image.src))
     });
 }
-ImageGallerySwiper.displayName = 'Swiper';
+ImageGallerySwiper.displayName = 'ImageGallerySwiper';
 export { ImageGallerySwiper };

package/dist/components/pagination/Pagination.d.ts

@@ -1,15 +1,14 @@
 import './Pagination.scss';
-import type { ClassNameProps } from '../../utils/types';
 export declare enum PaginationType {
     Simple = "SIMPLE",
     Numeric = "NUMERIC",
     Dots = "DOTS"
 }
-export interface PaginationProps extends ClassNameProps {
+export interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> {
     readonly type?: PaginationType;
-    readonly onChange?: (page: number) => void;
+    readonly onChange?: (page: number, event: React.MouseEvent<HTMLButtonElement>) => void;
     readonly pageCurrent?: number;
     readonly defaultPageCurrent?: number;
     readonly pageMax: number;
 }
-export declare function Pagination(props: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: (props: PaginationProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/pagination/Pagination.js

@@ -1,15 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "./Pagination.css";
 import classnames from "classnames";
-import { useEffect, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 var Pagination_PaginationType = /*#__PURE__*/ function(PaginationType) {
     PaginationType["Simple"] = "SIMPLE";
     PaginationType["Numeric"] = "NUMERIC";
     PaginationType["Dots"] = "DOTS";
     return PaginationType;
 }({});
-function Pagination(props) {
-    const { pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className } = props;
+const Pagination = /*#__PURE__*/ forwardRef(({ pageMax, onChange, pageCurrent, defaultPageCurrent = 1, type = "NUMERIC", className, ...props }, ref)=>{
     const controlled = void 0 !== pageCurrent;
     const dotArray = Array.from(new Array(pageMax).keys());
     const [innerPageCurrent, setInnerPageCurrent] = useState(controlled ? pageCurrent : defaultPageCurrent);
@@ -19,32 +18,34 @@ function Pagination(props) {
         pageCurrent,
         controlled
     ]);
-    function handleChange(newPage) {
+    function handleChange(newPage, event) {
         if (!controlled) setInnerPageCurrent(newPage);
-        if (onChange) onChange(newPage);
+        if (onChange) onChange(newPage, event);
     }
-    function onBtnDown() {
+    function onBtnDown(event) {
         if (innerPageCurrent > 1) {
             const newPageCurrent = innerPageCurrent - 1;
-            handleChange(newPageCurrent);
+            handleChange(newPageCurrent, event);
         }
     }
-    function onBtnUp() {
+    function onBtnUp(event) {
         if (innerPageCurrent < pageMax) {
             const newPageCurrent = innerPageCurrent + 1;
-            handleChange(newPageCurrent);
+            handleChange(newPageCurrent, event);
         }
     }
-    function onDotClick(index) {
+    function onDotClick(index, event) {
         const newPageCurrent = index + 1;
-        handleChange(newPageCurrent);
+        handleChange(newPageCurrent, event);
     }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             "DOTS" !== type && /*#__PURE__*/ jsxs("div", {
+                ...props,
                 className: classnames('fwe-pagination', {
                     'fwe-d-none': pageMax < 2
                 }, className),
+                ref: ref,
                 children: [
                     /*#__PURE__*/ jsx("button", {
                         className: classnames('fwe-navigate-btn-down', {
@@ -78,9 +79,11 @@ function Pagination(props) {
                 ]
             }),
             "DOTS" === type && /*#__PURE__*/ jsx("div", {
+                ...props,
                 className: classnames({
                     'fwe-d-none': pageMax < 2
                 }, className),
+                ref: ref,
                 children: /*#__PURE__*/ jsx("div", {
                     className: "fwe-pagination",
                     children: dotArray.map((index)=>/*#__PURE__*/ jsx("button", {
@@ -88,7 +91,7 @@ function Pagination(props) {
                             className: classnames('fwe-page-dot', {
                                 'fwe-selected': index + 1 === innerPageCurrent
                             }),
-                            onClick: ()=>onDotClick(index),
+                            onClick: (e)=>onDotClick(index, e),
                             "aria-label": `Go to page ${index + 1}`,
                             "aria-current": index + 1 === innerPageCurrent ? 'page' : void 0
                         }, index))
@@ -96,5 +99,6 @@ function Pagination(props) {
             })
         ]
     });
-}
+});
+Pagination.displayName = 'Pagination';
 export { Pagination, Pagination_PaginationType as PaginationType };

package/dist/components/popovers/legend/Legend.d.ts

@@ -1,4 +1,3 @@
-import type { PropsWithChildren } from 'react';
 import { type PopoverProps } from '../popover/Popover';
 export interface LegendItem {
     readonly name: string;
@@ -7,4 +6,6 @@ export interface LegendItem {
 export interface LegendProps extends Omit<PopoverProps, 'content'> {
     readonly items: LegendItem[];
 }
-export declare function Legend({ items, containerClassName, ...props }: PropsWithChildren<LegendProps>): import("react/jsx-runtime").JSX.Element;
+export declare const Legend: (props: LegendProps & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/popovers/legend/Legend.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { Popover } from "../popover/Popover.js";
-function Legend({ items, containerClassName, ...props }) {
+const Legend = /*#__PURE__*/ forwardRef(({ items, containerClassName, ...props }, ref)=>{
     const content = items.map((item)=>/*#__PURE__*/ jsxs("dl", {
             className: "fwe-popover-legend-content",
             children: [
@@ -16,7 +17,9 @@ function Legend({ items, containerClassName, ...props }) {
     return /*#__PURE__*/ jsx(Popover, {
         content: content,
         containerClassName: classnames('fwe-popover--legend', containerClassName),
+        ref: ref,
         ...props
     });
-}
+});
+Legend.displayName = 'Legend';
 export { Legend };

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

@@ -1,6 +1,6 @@
 .fwe-popover-container {
   z-index: var(--fwe-z-index-popover);
-  filter: drop-shadow(0 1px 4px #33333329);
+  filter: drop-shadow(0 1px 3px #3336);
 }
 
 .fwe-popover-container .fwe-popover {

package/dist/components/popovers/popover/Popover.d.ts

@@ -1,8 +1,8 @@
 import './Popover.scss';
 import { type Placement } from '@floating-ui/react';
-import { type MouseEvent, type PropsWithChildren, type ReactNode } from 'react';
-import type { ComponentBase } from '../../../utils/types';
-export interface PopoverProps extends ComponentBase {
+import { type MouseEvent, type ReactNode } from 'react';
+export interface PopoverProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content' | 'onChange'> {
+    readonly 'data-testid'?: string;
     readonly containerClassName?: string;
     readonly content: ReactNode;
     readonly position?: Placement;
@@ -16,4 +16,4 @@ export interface PopoverProps extends ComponentBase {
     readonly onTriggerClick?: (event: MouseEvent) => void;
     readonly stopPropagation?: boolean;
 }
-export declare function Popover({ children, className, 'data-testid': dataTestId, containerClassName, content, position, fallbackPositions, isOpen, openOnHover, openByDefault, onChange, flip: enableFlip, showArrow, onTriggerClick, stopPropagation, }: PropsWithChildren<PopoverProps>): import("react/jsx-runtime").JSX.Element;
+export declare const Popover: (props: PopoverProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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

@@ -2,14 +2,17 @@ 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 } from "react";
+import { forwardRef, useRef } from "react";
 import { useControlled } from "../../../utils/useControlled.js";
-function Popover({ children, className, 'data-testid': dataTestId, containerClassName, content, position, fallbackPositions, isOpen, openOnHover = false, openByDefault = false, onChange, flip: enableFlip = true, showArrow = true, onTriggerClick, stopPropagation = false }) {
+import { useForkRef } from "../../../utils/useForkRef.js";
+const Popover = /*#__PURE__*/ forwardRef(({ children, className, 'data-testid': dataTestId, 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 arrowRef = useRef(null);
+    const triggerRef = useRef(null);
+    const handleRef = useForkRef(ref, triggerRef);
     const { refs, floatingStyles, context } = useFloating({
         placement: position,
         open: showPopover,
@@ -49,10 +52,15 @@ function Popover({ children, className, 'data-testid': dataTestId, containerClas
     ]);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsx("span", {
+            /*#__PURE__*/ jsx("div", {
                 className: className,
-                ref: refs.setReference,
+                style: style,
+                ref: (node)=>{
+                    refs.setReference(node);
+                    if ('function' == typeof handleRef) handleRef(node);
+                },
                 ...getReferenceProps({
+                    ...props,
                     onClick: (event)=>{
                         if (stopPropagation) event.stopPropagation();
                         onTriggerClick?.(event);
@@ -84,5 +92,6 @@ function Popover({ children, className, 'data-testid': dataTestId, containerClas
             })
         ]
     });
-}
+});
+Popover.displayName = 'Popover';
 export { Popover };

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

@@ -1,7 +1,9 @@
-import { type PropsWithChildren, type ReactNode } from 'react';
+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, 'content' | 'isOpen' | 'onStateChange'> {
     readonly items: PopoverMenuItemProps[] | ReactNode;
 }
-export declare function PopoverMenu({ items, className, containerClassName, children, ...props }: PropsWithChildren<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,10 +1,10 @@
 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 { PopoverMenuContext } from "./PopoverMenuContext.js";
 import { PopoverMenuItem } from "./popover-menu-item/PopoverMenuItem.js";
-function PopoverMenu({ items, className, containerClassName, children, ...props }) {
+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;
@@ -23,9 +23,11 @@ function PopoverMenu({ items, className, containerClassName, children, ...props
             position: "right",
             isOpen: showPopoverMenu,
             onChange: setShowPopoverMenu,
+            ref: ref,
             ...props,
             children: children
         })
     });
-}
+});
+PopoverMenu.displayName = 'PopoverMenu';
 export { PopoverMenu };

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

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

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useContext } from "react";
+import { forwardRef, useContext } from "react";
 import { IconWrapper } from "../../../icon-wrapper/IconWrapper.js";
 import { PopoverMenuContext } from "../PopoverMenuContext.js";
-function PopoverMenuItem({ text, icon, onClick, data }) {
+const PopoverMenuItem = /*#__PURE__*/ forwardRef(({ text, icon, onClick, data, className, ...props }, ref)=>{
     const { setShowPopoverMenu } = useContext(PopoverMenuContext);
     function handleClick(e) {
         e?.preventDefault();
@@ -12,7 +12,10 @@ function PopoverMenuItem({ text, icon, onClick, data }) {
     }
     return /*#__PURE__*/ jsxs("button", {
         type: "button",
+        className: className,
         onClick: handleClick,
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx(IconWrapper, {
                 icon: icon
@@ -23,5 +26,6 @@ function PopoverMenuItem({ text, icon, onClick, data }) {
             })
         ]
     });
-}
+});
+PopoverMenuItem.displayName = 'PopoverMenuItem';
 export { PopoverMenuItem };

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

@@ -1,5 +1,6 @@
-import type { PropsWithChildren } from 'react';
 import type { PopoverProps } from '../popover/Popover';
 export interface TooltipProps extends Omit<PopoverProps, 'openOnHover'> {
 }
-export declare function Tooltip({ content, children, ...props }: PropsWithChildren<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({ content, children, ...props }) {
-    return /*#__PURE__*/ jsx(Popover, {
+const Tooltip = /*#__PURE__*/ forwardRef(({ content, children, ...props }, ref)=>/*#__PURE__*/ jsx(Popover, {
         position: "bottom",
         openOnHover: true,
         content: content,
+        ref: ref,
         ...props,
         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;