@festo-ui/react 4.0.2 → 4.0.3-pre-20221007.4

package/index.js

@@ -3360,7 +3360,8 @@ function Segment(props) {
     legend,
     config,
     onChange,
-    className
+    className,
+    value: valueProps
   } = props;
   const innerConfig = Object.assign(Object.assign({}, defaultConfig$1), config);
   let useIcon = false;
@@ -3385,7 +3386,10 @@ function Segment(props) {
 
     return null;
   });
-  const [value, setValue] = useState(tmpValue);
+  const [value, setValue] = useControlled({
+    controlled: valueProps,
+    default: tmpValue
+  });
 
   const handleChange = (event, _value) => {
     if (onChange) {
@@ -3414,14 +3418,11 @@ function Segment(props) {
           return null;
         }
 
-        const id = (Math.random() * Date.now()).toString().replace('.', '-');
-        return /*#__PURE__*/React.cloneElement(child, {
-          key: id,
-          id,
+        return /*#__PURE__*/React.cloneElement(child, Object.assign(Object.assign({}, child.props), {
           onChange: handleChange,
           iconOnly: innerConfig.iconOnly,
           checked: child.props.value === value
-        });
+        }));
       })
     }))]
   }));
@@ -3437,9 +3438,10 @@ function SegmentControl(props) {
     icon,
     onChange,
     iconOnly,
-    id = (Math.random() * Date.now()).toString().replace('.', '-'),
+    id,
     className
   } = props;
+  const componentId = useRef(id !== null && id !== void 0 ? id : (Math.random() * Date.now()).toString().replace('.', '-'));
   let viewMode = 'text';
 
   if (icon) {
@@ -3463,7 +3465,7 @@ function SegmentControl(props) {
     children: [jsx("input", {
       className: "fwe-segment-input",
       type: "radio",
-      id: id,
+      id: componentId.current,
       name: name,
       value: value,
       checked: checked,
@@ -3471,7 +3473,7 @@ function SegmentControl(props) {
       onChange: e => handleChange(e)
     }), jsxs("label", Object.assign({
       className: classNames('fwe-segment-label', className),
-      htmlFor: id
+      htmlFor: componentId.current
     }, {
       children: [viewMode === 'icon' && jsxs(Fragment, {
         children: [jsx("span", Object.assign({

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

@@ -8,6 +8,7 @@ interface SegmentProps extends ClassNamePropsWithChildren {
     legend: string;
     config?: SegmentComponentConfiguration;
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
+    value?: any;
 }
 export declare function Segment(props: SegmentProps): JSX.Element;
 export default Segment;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClassNameProps } from '../../../helper/types';
-interface SegmentControlProps extends ClassNameProps {
+export interface SegmentControlProps extends ClassNameProps {
     label: string;
     name: string;
     value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "4.0.2",
+  "version": "4.0.3-pre-20221007.4",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "peerDependencies": {