@festo-ui/react 9.0.1-dev.809 → 9.0.1-dev.817

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

@@ -14,9 +14,10 @@ const StepperHorizontal = /*#__PURE__*/ forwardRef(({ children, className, stepI
         children: [
             /*#__PURE__*/ jsx("div", {
                 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 };

package/dist/components/stepper-horizontal/step-horizontal/StepHorizontal.js

@@ -6,11 +6,12 @@ const StepHorizontal = /*#__PURE__*/ forwardRef(({ children, className, isActive
         ref: ref,
         className: classnames('overflow-hidden', {
             hidden: !isActive
-        }),
+        }, className),
         ...props,
         children: /*#__PURE__*/ jsx("div", {
             className: "fr-moving-container",
             children: children
         })
     }));
+StepHorizontal.displayName = 'StepHorizontal';
 export { StepHorizontal };

package/dist/components/stepper-vertical/StepperVertical.js

@@ -22,4 +22,5 @@ const StepperVertical = /*#__PURE__*/ forwardRef(({ children, className, stepInd
         children: stepComponents
     });
 });
+StepperVertical.displayName = 'StepperVertical';
 export { StepperVertical };

package/dist/components/stepper-vertical/step-vertical/StepVertical.js

@@ -55,4 +55,5 @@ const StepVertical = /*#__PURE__*/ forwardRef(({ children, className, isActive,
         ]
     });
 });
+StepVertical.displayName = 'StepVertical';
 export { StepVertical };

package/dist/components/tab/Tabs.js

@@ -124,7 +124,7 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
                 })
             ]
         }) : /*#__PURE__*/ jsxs("div", {
-            className: "fr-tab-bar",
+            className: classnames('fr-tab-bar', className),
             role: "tablist",
             ref: combinedRef,
             ...props,
@@ -190,4 +190,5 @@ const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange,
         })
     });
 });
+Tabs.displayName = 'Tabs';
 export { Tabs };

package/dist/components/tab/tab-pane/TabPane.d.ts

@@ -1,9 +1,8 @@
 import './TabPane.scss';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
+import type React from 'react';
 import type { Tab } from '../interfaces';
-export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
-    readonly id?: string;
+export interface TabPaneProps extends React.ComponentPropsWithoutRef<'div'>, Tab {
     readonly isVisible?: boolean;
     readonly tabId?: string;
 }
-export declare function TabPane({ isVisible, children, className, tabId, id, }: TabPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare const TabPane: (props: TabPaneProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/components/tab/tab-pane/TabPane.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import "./TabPane.css";
 import classnames from "classnames";
-function TabPane({ isVisible = false, children, className, tabId, id }) {
+import { forwardRef } from "react";
+const TabPane = /*#__PURE__*/ forwardRef(({ isVisible = false, children, className, tabId, id, ...props }, ref)=>{
     const tabPaneClasses = classnames({
         'fr-show': isVisible
     }, {
@@ -12,7 +13,10 @@ function TabPane({ isVisible = false, children, className, tabId, id }) {
         role: "tabpanel",
         "aria-labelledby": tabId,
         className: tabPaneClasses,
+        ref: ref,
+        ...props,
         children: children
     });
-}
+});
+TabPane.displayName = 'TabPane';
 export { TabPane };

package/dist/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,4 +1,5 @@
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface TableHeaderCellProps extends ComponentPropsWithoutRef<'th'> {
     readonly active?: boolean;
     readonly ascending: boolean;
 }

package/dist/components/table-header-cell/TableHeaderCell.js

@@ -18,4 +18,5 @@ const TableHeaderCell = /*#__PURE__*/ forwardRef(({ active, ascending, className
         ref: ref
     });
 });
+TableHeaderCell.displayName = 'TableHeaderCell';
 export { TableHeaderCell };

package/dist/forms/checkbox/Checkbox.d.ts

@@ -1,15 +1,12 @@
 import './Checkbox.scss';
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
-    readonly id?: string;
+import { type ComponentPropsWithoutRef } from 'react';
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'checked' | 'defaultChecked'> {
     readonly checked?: boolean;
     readonly defaultChecked?: boolean;
     readonly onChange?: (value: boolean, e: React.ChangeEvent<HTMLInputElement>) => void;
-    readonly name?: string;
     readonly large?: boolean;
     readonly valid?: boolean;
     readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly required?: boolean;
-    readonly disabled?: boolean;
     readonly indeterminate?: boolean;
 }
-export declare function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large, valid, labelPosition, required, disabled, indeterminate, children, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: (props: CheckboxProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/checkbox/Checkbox.js

@@ -1,8 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./Checkbox.css";
 import classnames from "classnames";
+import { forwardRef } from "react";
 import { useControlled } from "../../utils/useControlled.js";
-function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, large = false, valid = true, labelPosition = 'after', required, disabled = false, indeterminate = false, children, className, ...props }) {
+const Checkbox = /*#__PURE__*/ forwardRef(({ id, checked: checkedProp, defaultChecked, onChange, name, large = false, valid = true, labelPosition = 'after', required, disabled = false, indeterminate = false, children, className, ...props }, ref)=>{
     const [isChecked, setChecked] = useControlled({
         controlled: checkedProp,
         default: defaultChecked ?? false
@@ -30,6 +31,7 @@ function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, la
     return /*#__PURE__*/ jsxs("label", {
         className: containerClasses,
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsx("input", {
                 name: name,
@@ -76,5 +78,6 @@ function Checkbox({ id, checked: checkedProp, defaultChecked, onChange, name, la
             })
         ]
     });
-}
+});
+Checkbox.displayName = 'Checkbox';
 export { Checkbox };

package/dist/forms/combobox/ComboBox.d.ts

@@ -1,23 +1,22 @@
 import './ComboBox.scss';
 import { type Ref } from 'react';
-import type { ComponentBase } from '../../utils/types';
 export interface ComboBoxOption<T> {
     readonly label: string;
     readonly data: T;
     readonly disabled?: boolean;
 }
-export interface ComboBoxProps<T> extends ComponentBase {
-    readonly defaultValue?: T;
+export interface ComboBoxProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
     readonly value?: T;
+    readonly defaultValue?: T;
+    readonly name?: string;
+    readonly disabled?: boolean;
+    readonly required?: boolean;
     readonly label?: string;
     readonly options?: ComboBoxOption<T>[];
-    readonly required?: boolean;
-    readonly onChange?: (value: T) => void;
-    readonly disabled?: boolean;
-    readonly name?: string;
     readonly hint?: string;
     readonly error?: string;
     readonly placeholder?: string;
+    readonly onChange?: (value: T) => void;
     readonly onInputChange?: (value: string) => void;
     readonly emptyMessage?: string;
 }

package/dist/forms/combobox/ComboBox.js

@@ -106,8 +106,7 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                         }),
                         /*#__PURE__*/ jsx(ComboboxButton, {
                             className: "fr-combobox-button",
-                            disabled: disabled,
-                            "aria-label": "Optionen anzeigen"
+                            disabled: disabled
                         })
                     ]
                 }),
@@ -148,7 +147,6 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
                                     }),
                                 children: /*#__PURE__*/ jsx("span", {
                                     className: "fwe-combobox-option-content",
-                                    "data-testid": "fwe-combobox-option-content",
                                     children: getHighlightedLabel(option.label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
                                             className: classnames({
                                                 'fwe-combobox-highlight': part.highlighted
@@ -172,4 +170,5 @@ function ComboBoxComponent({ defaultValue = '', value: controlled, label, option
     });
 }
 const ComboBox = /*#__PURE__*/ forwardRef(ComboBoxComponent);
+ComboBox.displayName = 'ComboBox';
 export { ComboBox };

package/dist/forms/multi-select/{MultiSelect_module.css → MultiSelect.css}

@@ -1,11 +1,11 @@
-.chip-container-VYPHrz {
+.fr-multiselect-chip-container {
   flex-wrap: nowrap;
   gap: 8px;
   display: flex;
   overflow: hidden;
 }
 
-.chip-ellipsis-AW26fc {
+.fr-multiselect-chip-ellipsis {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/dist/forms/multi-select/MultiSelect.d.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
-import type { ComponentBase } from '../../utils/types';
 import type { SelectOption } from '../select/Select';
-export interface MultiSelectProps<T> extends ComponentBase {
+import './MultiSelect.scss';
+export interface MultiSelectProps<T> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'value' | 'defaultValue'> {
     readonly defaultValue?: T[];
     readonly value?: T[];
     readonly label?: string;

package/dist/forms/multi-select/MultiSelect.js

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 import { useId } from "../../utils/useId.js";
-import MultiSelect_module from "./MultiSelect.module.js";
+import "./MultiSelect.css";
 function MultiSelectComponent({ defaultValue = [], value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
     const id = useId(idProp);
     const labelId = `${id}-label`;
@@ -83,7 +83,7 @@ function MultiSelectComponent({ defaultValue = [], value: controlled, label, opt
                     disabled: disabled,
                     children: selectedOptions.length > 0 ? /*#__PURE__*/ jsxs("span", {
                         ref: chipsRef,
-                        className: MultiSelect_module["chip-container"],
+                        className: "fr-multiselect-chip-container",
                         children: [
                             selectedOptions.map((o)=>/*#__PURE__*/ jsx("span", {
                                     "data-option-chip": "true",
@@ -95,7 +95,7 @@ function MultiSelectComponent({ defaultValue = [], value: controlled, label, opt
                                         flexShrink: 1 === selectedOptions.length ? 1 : 0
                                     },
                                     children: /*#__PURE__*/ jsx("span", {
-                                        className: MultiSelect_module["chip-ellipsis"],
+                                        className: "fr-multiselect-chip-ellipsis",
                                         children: o.label
                                     })
                                 }, String(o.data))),
@@ -188,4 +188,5 @@ function MultiSelectComponent({ defaultValue = [], value: controlled, label, opt
     });
 }
 const MultiSelect = /*#__PURE__*/ forwardRef(MultiSelectComponent);
+MultiSelect.displayName = 'MultiSelect';
 export { MultiSelect };

package/dist/forms/radio/RadioButton.d.ts

@@ -1,9 +1,9 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface RadioButtonProps extends ClassNamePropsWithChildren {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface RadioButtonProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'checked' | 'defaultChecked' | 'value'> {
     readonly id?: string;
     readonly defaultChecked?: boolean;
     readonly checked?: boolean;
-    readonly onChange?: (value: string) => void;
+    readonly onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly name?: string;
     readonly value?: string;
     readonly labelPosition?: 'before' | 'after' | 'below';
@@ -11,4 +11,4 @@ export interface RadioButtonProps extends ClassNamePropsWithChildren {
     readonly disabled?: boolean;
     readonly required?: boolean;
 }
-export declare function RadioButton(props: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: (props: RadioButtonProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/radio/RadioButton.js

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useContext } from "react";
+import { forwardRef, useContext } from "react";
 import { useId } from "../../utils/useId.js";
 import { RadioGroupContext } from "./RadioGroupContext.js";
-function RadioButton(props) {
-    const { id: idProps, onChange, value, name, defaultChecked: defaultCheckedProp, checked, labelPosition = 'after', large = false, disabled = false, required = false, children, className } = props;
+const RadioButton = /*#__PURE__*/ forwardRef(({ id: idProps, onChange, value, name, defaultChecked: defaultCheckedProp, checked, labelPosition = 'after', large = false, disabled = false, required = false, children, className, ...props }, ref)=>{
     const { disabled: groupDisabled, labelPosition: groupLabelPosition, large: groupLarge, name: groupName, value: groupValue, required: groupRequired, handleValueChange: onGroupValueChange, isControlled } = useContext(RadioGroupContext);
     const innerLabelPosition = groupLabelPosition ?? labelPosition;
     const classes = classnames('fwe-radio', {
@@ -15,21 +14,22 @@ function RadioButton(props) {
         'fwe-radio-lg': large || groupLarge
     }, className);
     const controlledChecked = void 0 !== checked || isControlled && void 0 !== groupValue ? Boolean(checked || groupValue === value) : void 0;
-    const getDefaultChecked = ()=>{
+    function getDefaultChecked() {
         if (void 0 !== controlledChecked) return;
         if (void 0 !== defaultCheckedProp) return defaultCheckedProp;
         if (!isControlled && void 0 !== groupValue) return groupValue === value;
-    };
+    }
     const defaultChecked = getDefaultChecked();
     function handleChange(event) {
         const newValue = event.target.value;
         if (newValue) onGroupValueChange?.(newValue);
-        onChange?.(newValue);
+        onChange?.(newValue, event);
     }
     const id = useId(idProps);
     return /*#__PURE__*/ jsxs("label", {
         className: classes,
         htmlFor: id,
+        ref: ref,
         children: [
             /*#__PURE__*/ jsxs("div", {
                 className: "fwe-radio-check",
@@ -43,12 +43,12 @@ function RadioButton(props) {
                         value: value,
                         onChange: handleChange,
                         disabled: disabled || groupDisabled,
-                        required: required || groupRequired
+                        required: required || groupRequired,
+                        ...props
                     }),
                     /*#__PURE__*/ jsx("div", {
                         className: "fwe-radio-checkmark"
-                    }),
-                    ' '
+                    })
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
@@ -57,5 +57,6 @@ function RadioButton(props) {
             })
         ]
     });
-}
+});
+RadioButton.displayName = 'RadioButton';
 export { RadioButton };

package/dist/forms/radio/RadioGroup.d.ts

@@ -1,12 +1,12 @@
 import { type ComponentPropsWithoutRef } from 'react';
-export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
+export interface RadioGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue'> {
     readonly name?: string;
+    readonly required?: boolean;
+    readonly disabled?: boolean;
+    readonly value?: string;
     readonly defaultValue?: string;
     readonly onValueChange?: (value: string) => void;
-    readonly value?: string;
     readonly labelPosition?: 'before' | 'after' | 'below';
     readonly large?: boolean;
-    readonly disabled?: boolean;
-    readonly required?: boolean;
 }
 export declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/forms/radio/RadioGroup.js

@@ -47,4 +47,5 @@ const RadioGroup = /*#__PURE__*/ forwardRef(({ children, className, onValueChang
         })
     });
 });
+RadioGroup.displayName = 'RadioGroup';
 export { RadioGroup };

package/dist/forms/segment/Segment.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
+import React, { type ChangeEvent, type ComponentPropsWithoutRef, type PropsWithChildren } from 'react';
 export interface SegmentConfiguration {
     readonly outline?: boolean;
     readonly iconOnly?: boolean;
 }
-export interface SegmentProps extends ClassNamePropsWithChildren {
+export interface SegmentProps extends PropsWithChildren, Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange' | 'defaultValue' | 'required' | 'disabled'> {
     readonly legend: string;
     readonly config?: SegmentConfiguration;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
+    readonly onChange?: (value: any, event: ChangeEvent<HTMLInputElement>) => void;
     readonly value?: any;
 }
-export declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;
+export declare const Segment: (props: SegmentProps & React.RefAttributes<HTMLFieldSetElement>) => React.ReactElement | null;

package/dist/forms/segment/Segment.js

@@ -1,13 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import react from "react";
+import react, { Children, forwardRef, isValidElement } from "react";
 import { useControlled } from "../../utils/useControlled.js";
 const defaultConfig = {
     outline: true,
     iconOnly: true
 };
-function Segment(props) {
-    const { children, legend, config, onChange, className, value: valueProps } = props;
+const Segment = /*#__PURE__*/ forwardRef(({ children, legend, config, onChange, className, value: valueProps, ...props }, ref)=>{
     const innerConfig = {
         ...defaultConfig,
         ...config
@@ -15,8 +14,8 @@ function Segment(props) {
     let useIcon = false;
     let useIconAndText = false;
     let tmpValue = '';
-    react.Children.forEach(children, (child, index)=>{
-        if (!/*#__PURE__*/ react.isValidElement(child)) return null;
+    Children.forEach(children, (child, index)=>{
+        if (!/*#__PURE__*/ isValidElement(child)) return null;
         if (0 === index && null !== child.props.icon) if (innerConfig.iconOnly) useIcon = true;
         else useIconAndText = true;
         if (child.props.checked) tmpValue = child.props.value;
@@ -26,8 +25,8 @@ function Segment(props) {
         controlled: valueProps,
         default: tmpValue
     });
-    const handleChange = (event, _value)=>{
-        if (onChange) onChange(event, _value);
+    const handleChange = (_value, event)=>{
+        if (onChange) onChange(_value, event);
         setValue(_value);
     };
     return /*#__PURE__*/ jsxs("fieldset", {
@@ -36,6 +35,8 @@ function Segment(props) {
             'fwe-segment-icon': useIcon,
             'fwe-segment-icon-text': useIconAndText
         }, className),
+        ref: ref,
+        ...props,
         children: [
             /*#__PURE__*/ jsx("legend", {
                 className: "fwe-sr-only fwe-d-inline-block",
@@ -54,5 +55,6 @@ function Segment(props) {
             })
         ]
     });
-}
+});
+Segment.displayName = 'Segment';
 export { Segment };

package/dist/forms/segment/segment-control/SegmentControl.d.ts

@@ -1,14 +1,10 @@
-import type React from 'react';
-import type { ClassNameProps } from '../../../utils/types';
-export interface SegmentControlProps extends ClassNameProps {
+import { type ComponentPropsWithoutRef } from 'react';
+export interface SegmentControlProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'onChange' | 'value'> {
     readonly label: string;
-    readonly name: string;
     readonly value: any;
     readonly checked?: boolean;
-    readonly disabled?: boolean;
     readonly icon?: React.ReactNode;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
-    readonly id?: string;
+    readonly onChange?: (value: any, event: React.ChangeEvent<HTMLInputElement>) => void;
     readonly iconOnly?: boolean;
 }
-export declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;
+export declare const SegmentControl: (props: SegmentControlProps & import("react").RefAttributes<HTMLLabelElement>) => React.ReactElement | null;

package/dist/forms/segment/segment-control/SegmentControl.js

@@ -1,14 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import classnames from "classnames";
-import { useRef } from "react";
+import { forwardRef, useRef } from "react";
 import { IconWrapper } from "../../../components/icon-wrapper/IconWrapper.js";
-function SegmentControl(props) {
-    const { label, checked, disabled, name, value, icon, onChange, id, className, iconOnly } = props;
+const SegmentControl = /*#__PURE__*/ forwardRef(({ label, checked, disabled, name, value, icon, onChange, id, className, iconOnly, ...props }, ref)=>{
     const componentId = useRef(id ?? (Math.random() * Date.now()).toString().replace('.', '-'));
     let viewMode = 'text';
     if (icon) viewMode = iconOnly ? 'icon' : 'icon-text';
     const handleChange = (event)=>{
-        if (onChange) onChange(event, value);
+        if (onChange) onChange(value, event);
     };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -20,11 +19,13 @@ function SegmentControl(props) {
                 value: value,
                 checked: checked,
                 disabled: disabled,
-                onChange: (e)=>handleChange(e)
+                onChange: (e)=>handleChange(e),
+                ...props
             }),
             /*#__PURE__*/ jsxs("label", {
                 className: classnames('fwe-segment-label', className),
                 htmlFor: componentId.current,
+                ref: ref,
                 children: [
                     'icon' === viewMode && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
@@ -53,5 +54,6 @@ function SegmentControl(props) {
             })
         ]
     });
-}
+});
+SegmentControl.displayName = 'SegmentControl';
 export { SegmentControl };