@festo-ui/react 7.0.0-dev.317 → 7.0.0-dev.342

package/index.d.ts

@@ -42,7 +42,9 @@ export { default as ColorIndicator } from './lib/forms/color-indicator/ColorIndi
 export { default as ColorPicker } from './lib/forms/color-picker/ColorPicker';
 export { default as DatePicker } from './lib/forms/date-picker/DatePicker';
 export { default as DateRangePicker } from './lib/forms/date-range-picker/DateRangePicker';
-export { default as RadioButton, default as RadioGroup } from './lib/forms/radio/RadioButton';
+export { default as RadioButton } from './lib/forms/radio/RadioButton';
+export { default as Radio } from './lib/forms/radio/RadioButton';
+export { default as RadioGroup } from './lib/forms/radio/RadioGroup';
 export { default as Segment } from './lib/forms/segment/Segment';
 export { default as SegmentControl } from './lib/forms/segment/segment-control/SegmentControl';
 export { default as Select } from './lib/forms/select/Select';

package/index.js

@@ -42,7 +42,9 @@ export { default as ColorIndicator } from './lib/forms/color-indicator/ColorIndi
 export { default as ColorPicker } from './lib/forms/color-picker/ColorPicker';
 export { default as DatePicker } from './lib/forms/date-picker/DatePicker';
 export { default as DateRangePicker } from './lib/forms/date-range-picker/DateRangePicker';
-export { default as RadioButton, default as RadioGroup } from './lib/forms/radio/RadioButton';
+export { default as RadioButton } from './lib/forms/radio/RadioButton';
+export { default as Radio } from './lib/forms/radio/RadioButton';
+export { default as RadioGroup } from './lib/forms/radio/RadioGroup';
 export { default as Segment } from './lib/forms/segment/Segment';
 export { default as SegmentControl } from './lib/forms/segment/segment-control/SegmentControl';
 export { default as Select } from './lib/forms/select/Select';

package/lib/components/buttons/button/Button.js

@@ -5,6 +5,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     icon,
+    type = 'button',
     disabled = false,
     iconOnly = false,
     large = false,
@@ -24,7 +25,9 @@ const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
     'fwe-btn-lg': large
   }, className);
   return /*#__PURE__*/_jsxs("button", {
-    type: "button",
+    // ignore here because fallback will explicitly be set to type 'button'
+    // eslint-disable-next-line react/button-has-type
+    type: type,
     onClick: onClick,
     className: classes,
     disabled: disabled,

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

@@ -1,15 +1,16 @@
 /// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
-export interface RadioButtonProps extends ClassNamePropsWithChildren {
-    id: string;
+export interface RadioProps extends ClassNamePropsWithChildren {
+    id?: string;
+    defaultChecked?: boolean;
     checked?: boolean;
-    onChange: (value: string) => void;
-    name: string;
-    value: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    value?: string;
     labelPosition?: 'before' | 'after' | 'below';
     large?: boolean;
     disabled?: boolean;
     required?: boolean;
 }
-declare function RadioButton({ id, onChange, value, name, checked, labelPosition, large, disabled, required, children, className, }: RadioButtonProps): JSX.Element;
-export default RadioButton;
+declare function Radio(props: RadioProps): JSX.Element;
+export default Radio;

package/lib/forms/radio/RadioButton.js

@@ -1,14 +1,16 @@
 import { useContext } from 'react';
 import classNames from 'classnames';
 import RadioGroupContext from './RadioGroupContext';
+import useId from '../../helper/useId';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-function RadioButton(_ref) {
-  let {
-    id,
+function Radio(props) {
+  const {
+    id: idProps,
     onChange,
     value,
     name,
+    defaultChecked: defaultCheckedProp,
     checked,
     labelPosition = 'after',
     large = false,
@@ -16,16 +18,18 @@ function RadioButton(_ref) {
     required = false,
     children,
     className
-  } = _ref;
+  } = props;
   const {
     disabled: groupDisabled,
     labelPosition: groupLabelPosition,
     large: groupLarge,
     name: groupName,
+    value: groupValue,
     required: groupRequired,
-    value: groupValue
+    handleValueChange: onGroupValueChange,
+    isControlled
   } = useContext(RadioGroupContext);
-  const innerLabelPosition = groupLabelPosition || labelPosition;
+  const innerLabelPosition = groupLabelPosition ?? labelPosition;
   const classes = classNames('fwe-radio', {
     'fwe-radio-label-below': innerLabelPosition === 'below'
   }, {
@@ -33,16 +37,39 @@ function RadioButton(_ref) {
   }, {
     'fwe-radio-lg': large || groupLarge
   }, className);
+  const controlledChecked = checked !== undefined || isControlled && groupValue !== undefined ? Boolean(checked || groupValue === value) : undefined;
+  const getDefaultChecked = () => {
+    if (controlledChecked !== undefined) {
+      return undefined;
+    }
+    if (defaultCheckedProp !== undefined) {
+      return defaultCheckedProp;
+    }
+    if (!isControlled && groupValue !== undefined) {
+      return groupValue === value;
+    }
+    return undefined;
+  };
+  const defaultChecked = getDefaultChecked();
+  function handleChange(event) {
+    const newValue = event.target.value;
+    if (newValue) {
+      onGroupValueChange?.(newValue);
+    }
+    onChange?.(newValue);
+  }
+  const id = useId(idProps);
   return /*#__PURE__*/_jsxs("label", {
     className: classes,
     htmlFor: id,
     children: [/*#__PURE__*/_jsx("input", {
-      checked: checked,
+      defaultChecked: defaultChecked,
+      checked: controlledChecked,
       type: "radio",
       id: id,
       name: groupName || name,
-      value: value || groupValue,
-      onChange: () => onChange(value),
+      value: value,
+      onChange: handleChange,
       disabled: disabled || groupDisabled,
       required: required || groupRequired
     }), /*#__PURE__*/_jsx("div", {
@@ -53,4 +80,4 @@ function RadioButton(_ref) {
     })]
   });
 }
-export default RadioButton;
+export default Radio;

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

@@ -1,13 +1,14 @@
 /// <reference types="react" />
 import { ClassNamePropsWithChildren } from '../../helper/types';
 interface RadioGroupProps extends ClassNamePropsWithChildren {
-    checked?: boolean;
-    name: string;
-    value: string;
+    name?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    value?: string;
     labelPosition?: 'before' | 'after' | 'below';
     large?: boolean;
     disabled?: boolean;
     required?: boolean;
 }
-declare function RadioGroup({ value, name, checked, labelPosition, large, disabled, required, children, className, }: RadioGroupProps): JSX.Element;
+declare function RadioGroup(props: RadioGroupProps): JSX.Element;
 export default RadioGroup;

package/lib/forms/radio/RadioGroup.js

@@ -1,28 +1,35 @@
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+import useControlled from '../../helper/useControlled';
+import useId from '../../helper/useId';
 import RadioGroupContext from './RadioGroupContext';
 import { jsx as _jsx } from "react/jsx-runtime";
-function RadioGroup(_ref) {
-  let {
-    value,
-    name,
-    checked,
-    labelPosition = 'after',
-    large,
-    disabled,
-    required,
+function RadioGroup(props) {
+  const {
     children,
-    className
-  } = _ref;
+    className,
+    onValueChange,
+    value: controlledValue,
+    defaultValue,
+    name,
+    ...restProps
+  } = props;
+  const contextName = useId(name);
+  const [value, setValue] = useControlled({
+    controlled: controlledValue,
+    default: defaultValue
+  });
+  const handleValueChange = useCallback(newValue => {
+    onValueChange?.(newValue);
+    setValue(newValue);
+  }, [onValueChange, setValue]);
   const contextValue = useMemo(() => ({
+    ...restProps,
+    handleValueChange,
     value,
-    name,
-    checked,
-    labelPosition,
-    large,
-    disabled,
-    required
-  }), [checked, disabled, labelPosition, large, name, required, value]);
+    isControlled: controlledValue !== undefined,
+    name: contextName
+  }), [controlledValue, handleValueChange, restProps, value, contextName]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx("div", {

package/lib/forms/radio/RadioGroupContext.d.ts

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 interface ContextProps {
-    checked?: boolean;
     name: string;
     value: string;
-    labelPosition?: 'before' | 'after' | 'below';
-    large?: boolean;
-    disabled?: boolean;
-    required?: boolean;
+    isControlled: boolean;
+    labelPosition: 'before' | 'after' | 'below';
+    large: boolean;
+    handleValueChange: (value: string) => void;
+    disabled: boolean;
+    required: boolean;
 }
 declare const RadioGroupContext: import("react").Context<Partial<ContextProps>>;
 export default RadioGroupContext;

package/node/index.js

@@ -195,6 +195,12 @@ Object.defineProperty(exports, "Prompt", {
     return _Prompt.default;
   }
 });
+Object.defineProperty(exports, "Radio", {
+  enumerable: true,
+  get: function () {
+    return _RadioButton.default;
+  }
+});
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
   get: function () {
@@ -204,7 +210,7 @@ Object.defineProperty(exports, "RadioButton", {
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () {
-    return _RadioButton.default;
+    return _RadioGroup.default;
   }
 });
 Object.defineProperty(exports, "SearchInput", {
@@ -390,6 +396,7 @@ var _ColorPicker = _interopRequireDefault(require("./lib/forms/color-picker/Colo
 var _DatePicker = _interopRequireDefault(require("./lib/forms/date-picker/DatePicker"));
 var _DateRangePicker = _interopRequireDefault(require("./lib/forms/date-range-picker/DateRangePicker"));
 var _RadioButton = _interopRequireDefault(require("./lib/forms/radio/RadioButton"));
+var _RadioGroup = _interopRequireDefault(require("./lib/forms/radio/RadioGroup"));
 var _Segment = _interopRequireDefault(require("./lib/forms/segment/Segment"));
 var _SegmentControl = _interopRequireDefault(require("./lib/forms/segment/segment-control/SegmentControl"));
 var _Select = _interopRequireDefault(require("./lib/forms/select/Select"));

package/node/lib/components/buttons/button/Button.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     icon,
+    type = 'button',
     disabled = false,
     iconOnly = false,
     large = false,
@@ -30,7 +31,9 @@ const Button = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     'fwe-btn-lg': large
   }, className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
-    type: "button",
+    // ignore here because fallback will explicitly be set to type 'button'
+    // eslint-disable-next-line react/button-has-type
+    type: type,
     onClick: onClick,
     className: classes,
     disabled: disabled,

package/node/lib/forms/radio/RadioButton.js

@@ -7,14 +7,16 @@ exports.default = void 0;
 var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function RadioButton(_ref) {
-  let {
-    id,
+function Radio(props) {
+  const {
+    id: idProps,
     onChange,
     value,
     name,
+    defaultChecked: defaultCheckedProp,
     checked,
     labelPosition = 'after',
     large = false,
@@ -22,16 +24,18 @@ function RadioButton(_ref) {
     required = false,
     children,
     className
-  } = _ref;
+  } = props;
   const {
     disabled: groupDisabled,
     labelPosition: groupLabelPosition,
     large: groupLarge,
     name: groupName,
+    value: groupValue,
     required: groupRequired,
-    value: groupValue
+    handleValueChange: onGroupValueChange,
+    isControlled
   } = (0, _react.useContext)(_RadioGroupContext.default);
-  const innerLabelPosition = groupLabelPosition || labelPosition;
+  const innerLabelPosition = groupLabelPosition ?? labelPosition;
   const classes = (0, _classnames.default)('fwe-radio', {
     'fwe-radio-label-below': innerLabelPosition === 'below'
   }, {
@@ -39,16 +43,39 @@ function RadioButton(_ref) {
   }, {
     'fwe-radio-lg': large || groupLarge
   }, className);
+  const controlledChecked = checked !== undefined || isControlled && groupValue !== undefined ? Boolean(checked || groupValue === value) : undefined;
+  const getDefaultChecked = () => {
+    if (controlledChecked !== undefined) {
+      return undefined;
+    }
+    if (defaultCheckedProp !== undefined) {
+      return defaultCheckedProp;
+    }
+    if (!isControlled && groupValue !== undefined) {
+      return groupValue === value;
+    }
+    return undefined;
+  };
+  const defaultChecked = getDefaultChecked();
+  function handleChange(event) {
+    const newValue = event.target.value;
+    if (newValue) {
+      onGroupValueChange?.(newValue);
+    }
+    onChange?.(newValue);
+  }
+  const id = (0, _useId.default)(idProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
     className: classes,
     htmlFor: id,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      checked: checked,
+      defaultChecked: defaultChecked,
+      checked: controlledChecked,
       type: "radio",
       id: id,
       name: groupName || name,
-      value: value || groupValue,
-      onChange: () => onChange(value),
+      value: value,
+      onChange: handleChange,
       disabled: disabled || groupDisabled,
       required: required || groupRequired
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -59,4 +86,4 @@ function RadioButton(_ref) {
     })]
   });
 }
-var _default = exports.default = RadioButton;
+var _default = exports.default = Radio;

package/node/lib/forms/radio/RadioGroup.js

@@ -6,30 +6,37 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _useControlled = _interopRequireDefault(require("../../helper/useControlled"));
+var _useId = _interopRequireDefault(require("../../helper/useId"));
 var _RadioGroupContext = _interopRequireDefault(require("./RadioGroupContext"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function RadioGroup(_ref) {
-  let {
-    value,
-    name,
-    checked,
-    labelPosition = 'after',
-    large,
-    disabled,
-    required,
+function RadioGroup(props) {
+  const {
     children,
-    className
-  } = _ref;
+    className,
+    onValueChange,
+    value: controlledValue,
+    defaultValue,
+    name,
+    ...restProps
+  } = props;
+  const contextName = (0, _useId.default)(name);
+  const [value, setValue] = (0, _useControlled.default)({
+    controlled: controlledValue,
+    default: defaultValue
+  });
+  const handleValueChange = (0, _react.useCallback)(newValue => {
+    onValueChange?.(newValue);
+    setValue(newValue);
+  }, [onValueChange, setValue]);
   const contextValue = (0, _react.useMemo)(() => ({
+    ...restProps,
+    handleValueChange,
     value,
-    name,
-    checked,
-    labelPosition,
-    large,
-    disabled,
-    required
-  }), [checked, disabled, labelPosition, large, name, required, value]);
+    isControlled: controlledValue !== undefined,
+    name: contextName
+  }), [controlledValue, handleValueChange, restProps, value, contextName]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioGroupContext.default.Provider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@festo-ui/react",
-  "version": "7.0.0-dev.317",
+  "version": "7.0.0-dev.342",
   "author": "Festo UI (styleguide@festo.com)",
   "license": "apache-2.0",
   "exports": {