@synerise/ds-radio 1.1.19 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.20...@synerise/ds-radio@2.0.0) (2026-08-26)
+
+**Note:** Version bump only for package @synerise/ds-radio
+
+## [1.1.20](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.19...@synerise/ds-radio@1.1.20) (2026-08-18)
+
+### Bug Fixes
+
+- **radio:** restore antd parity for onChange order, event target and Radio.Group props ([faf5d6a](https://github.com/synerise/synerise-design/commit/faf5d6a969c06cabc80a4e778caeef0da9c5f4a7))
+
 ## [1.1.19](https://github.com/synerise/synerise-design/compare/@synerise/ds-radio@1.1.18...@synerise/ds-radio@1.1.19) (2026-08-11)
 
 **Note:** Version bump only for package @synerise/ds-radio

package/CLAUDE.md

@@ -40,13 +40,15 @@ Compound component: `Radio` + `Radio.Group` + `Radio.Button`.
 
 ### `Radio.Group`
 
-Wraps `AntdRadio.Group` with two additional layout props:
+DS-native single-select context provider:
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `fullWidth` | `boolean` | `undefined` | Makes the group `display: flex; width: 100%` — each radio button gets `flex: 1` |
 | `big` | `boolean` | `undefined` | When combined with `fullWidth`, sets button height to `48px` instead of `32px` |
 | `size` | `'small' \| 'middle' \| 'large'` | `'middle'` | Segmented `Radio.Button` height: `small` 24px · `middle` 32px · `large` 40px |
+| `id`, `role`, `onFocus`, `onBlur`, `onMouseEnter`, `onMouseLeave` | — | — | Forwarded to the group wrapper. `onBlur` matters to form libraries — it is what marks the field touched |
+| `data-*` / `aria-*` | — | — | Forwarded to the wrapper. Other unknown props are **not** — spreading a form field bag passes `type`/`checked`, which would warn on a `div` |
 | + DS `RadioGroupProps` | — | — | `value`, `defaultValue`, `onChange`, `options`, `optionType`, `buttonStyle`, `disabled`, `name` (DS-native, no antd inheritance) |
 
 ### `Radio.Button`
@@ -104,6 +106,7 @@ All styling is in `Radio.styles.tsx` (no LESS).
 
 - **`label` vs `children`**: `label` takes precedence — if `label` is set, `children` is ignored entirely. `children` is marked `@deprecated` in the type file.
 - **`Radio.Button` is DS-native**: reads `RadioContext` for checked state; the segment visual (connected borders, checked, focus, `buttonStyle` solid/outline) is styled by `RadioGroupWrapper`.
-- **`RadioChangeEvent`** is synthesised from the native input change (`{ target: { value, checked, name }, stopPropagation, preventDefault, nativeEvent }`); `target.value` is `RadioValueType` (consumers needing a narrower type cast it — antd typed it `any`).
+- **`onChange` order (antd parity)**: a child's own `onChange` fires *before* the group's, for both `Radio` and `Radio.Button`. Consumers let both handlers write the same state and rely on the group's write landing last — reversing the order silently flips last-writer-wins. Covered by tests in `__specs__`.
+- **`RadioChangeEvent`** is synthesised from the native input change. The child builds `target` from its own props (`value`, `checked`, `name`, `disabled`, `type: 'radio'`, `id`/`autoFocus`/`tabIndex` on `Radio`, plus any `data-*`/`aria-*` it was given) and hands it to the group, as antd's rc-checkbox did — so consumers can read more than the value. `target.value` is `RadioValueType` (consumers needing a narrower type cast it — antd typed it `any`).
 - **`AdditionalData` styled-component** is marked `@deprecated` in its source comment but is still the live wrapper div for `Description` — the comment is misleading.
 - **Uses Vitest** for testing.

package/dist/Radio.d.ts

@@ -3,7 +3,7 @@
  * context) and `Radio.Button` (segmented control) attached as static members.
  */
 declare const Radio: (({ value, checked, defaultChecked, disabled, name, id, autoFocus, tabIndex, onChange, onClick, label, description, children, className, style, ...rest }: import('./Radio.types').RadioProps) => import("react").JSX.Element) & {
-    Group: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, }: import('./Radio.types').RadioGroupProps) => import("react").JSX.Element;
+    Group: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, id, onFocus, onBlur, onMouseEnter, onMouseLeave, ...rest }: import('./Radio.types').RadioGroupProps) => import("react").JSX.Element;
     Button: ({ value, disabled, children, className, checked, onChange, onClick, style, ...rest }: import('./Radio.types').RadioButtonProps) => import("react").JSX.Element;
 };
 export default Radio;

package/dist/Radio.types.d.ts

@@ -1,11 +1,14 @@
-import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
-import { DataAttributes } from '@synerise/ds-utils';
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactNode } from 'react';
+import { DataAttributes, PassthroughAttributes } from '@synerise/ds-utils';
 export type RadioValueType = string | number | boolean;
 /** antd-compatible radio change event. */
 export type RadioChangeEventTarget = {
     value?: RadioValueType;
     checked: boolean;
     name?: string;
+    id?: string;
+    disabled?: boolean;
+    type?: string;
     [key: string]: unknown;
 };
 export type RadioChangeEvent = {
@@ -59,7 +62,13 @@ export type RadioGroupProps = {
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;
-} & DataAttributes;
+    id?: string;
+    role?: string;
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+} & PassthroughAttributes;
 export type RadioButtonProps = {
     value?: RadioValueType;
     disabled?: boolean;

package/dist/RadioContext.d.ts

@@ -1,9 +1,12 @@
-import { RadioValueType } from './Radio.types';
+import { RadioChangeEventTarget, RadioValueType } from './Radio.types';
 export type RadioGroupContextValue = {
     /** Currently selected value (single). */
     value?: RadioValueType;
-    /** Select a value; the group builds the change event + calls the consumer onChange. */
-    onChange: (value: RadioValueType, nativeEvent: Event) => void;
+    /**
+     * Select a value; the group wraps `target` in the change event + calls the consumer onChange.
+     * `target` is built by the child from its own props, as antd's rc-checkbox did.
+     */
+    onChange: (value: RadioValueType, nativeEvent: Event, target: RadioChangeEventTarget) => void;
     disabled?: boolean;
     name?: string;
     /** `'button'` makes the group render segmented `Radio.Button`s. */

package/dist/RadioGroup.d.ts

@@ -5,5 +5,5 @@ import { RadioGroupProps } from './Radio.types';
  * read, and emits `onChange(RadioChangeEvent)` (`target.value` = the selected value). Controlled via
  * `value`, uncontrolled via `defaultValue`. `optionType="button"` renders segmented `Radio.Button`s.
  */
-declare const RadioGroup: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ value, defaultValue, onChange, options, optionType, buttonStyle, size, disabled, name, fullWidth, big, children, className, style, id, onFocus, onBlur, onMouseEnter, onMouseLeave, ...rest }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/dist/RadioGroup.js

@@ -5,6 +5,7 @@ import { RadioGroupContext } from "./RadioContext.js";
 import { RadioBase } from "./components/RadioBase.js";
 import { RadioButton } from "./components/RadioButton.js";
 const cx = (...classes) => classes.filter(Boolean).join(" ");
+const passthroughAttributes = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => key.startsWith("data-") || key.startsWith("aria-") || key === "role"));
 const RadioGroup = ({
   value,
   defaultValue,
@@ -19,27 +20,37 @@ const RadioGroup = ({
   big,
   children,
   className,
-  style
+  style,
+  id,
+  onFocus,
+  onBlur,
+  onMouseEnter,
+  onMouseLeave,
+  ...rest
 }) => {
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = useState(defaultValue);
   const resolvedValue = isControlled ? value : internalValue;
-  const handleChange = useCallback((newValue, nativeEvent) => {
+  const handleChange = useCallback((newValue, nativeEvent, target) => {
+    const lastValue = resolvedValue;
     if (!isControlled) {
       setInternalValue(newValue);
     }
+    if (newValue === lastValue) {
+      return;
+    }
     const event = {
+      // the child builds the target from its own props (antd parity); the group only owns `name`
       target: {
-        value: newValue,
-        checked: true,
-        name
+        ...target,
+        name: target.name ?? name
       },
       stopPropagation: () => nativeEvent.stopPropagation?.(),
       preventDefault: () => nativeEvent.preventDefault?.(),
       nativeEvent
     };
     onChange?.(event);
-  }, [isControlled, name, onChange]);
+  }, [isControlled, name, onChange, resolvedValue]);
   const contextValue = useMemo(() => ({
     value: resolvedValue,
     onChange: handleChange,
@@ -54,7 +65,7 @@ const RadioGroup = ({
     value: option
   });
   const renderOptions = () => normalizedOptions?.map((option) => optionType === "button" ? /* @__PURE__ */ jsx(RadioButton, { value: option.value, disabled: option.disabled, children: option.label }, String(option.value)) : /* @__PURE__ */ jsx(RadioBase, { value: option.value, disabled: option.disabled, label: option.label }, String(option.value)));
-  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RadioGroupWrapper, { className: cx("ant-radio-group", `ant-radio-group-${buttonStyle}`, "ds-radio-group", className), style, fullWidth, big, children: normalizedOptions ? renderOptions() : children }) });
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(RadioGroupWrapper, { ...passthroughAttributes(rest), className: cx("ant-radio-group", `ant-radio-group-${buttonStyle}`, "ds-radio-group", className), style, id, onFocus, onBlur, onMouseEnter, onMouseLeave, fullWidth, big, children: normalizedOptions ? renderOptions() : children }) });
 };
 export {
   RadioGroup as default

package/dist/components/RadioBase.js

@@ -31,24 +31,28 @@ const RadioBase = ({
     if (isDisabled) {
       return;
     }
-    if (group) {
-      group.onChange(value, event.nativeEvent);
-      return;
-    }
-    if (!isControlled) {
+    if (!group && !isControlled) {
       setInternalChecked(true);
     }
+    const target = {
+      ...rest,
+      value,
+      checked: event.target.checked,
+      name: name ?? group?.name,
+      id,
+      disabled: isDisabled,
+      type: "radio",
+      autoFocus,
+      tabIndex
+    };
     const changeEvent = {
-      target: {
-        value,
-        checked: true,
-        name
-      },
+      target,
       stopPropagation: () => event.stopPropagation(),
       preventDefault: () => event.preventDefault(),
       nativeEvent: event.nativeEvent
     };
     onChange?.(changeEvent);
+    group?.onChange(value, event.nativeEvent, target);
   };
   return /* @__PURE__ */ jsxs(RadioWrapper, { className: cx("ds-radio-field", className), style, children: [
     /* @__PURE__ */ jsxs(RadioLabel, { className: cx("ant-radio-wrapper", "ds-radio", isChecked && "ant-radio-wrapper-checked", isDisabled && "ant-radio-wrapper-disabled"), $checked: isChecked, $disabled: isDisabled, onClick, children: [

package/dist/components/RadioButton.js

@@ -22,22 +22,24 @@ const RadioButton = ({
     if (isDisabled) {
       return;
     }
-    if (group) {
-      group.onChange(value, event.nativeEvent);
-    }
+    const target = {
+      ...rest,
+      value,
+      checked: event.target.checked,
+      name: group?.name,
+      disabled: isDisabled,
+      type: "radio"
+    };
     if (onChange) {
       const changeEvent = {
-        target: {
-          value,
-          checked: true,
-          name: group?.name
-        },
+        target,
         stopPropagation: () => event.stopPropagation(),
         preventDefault: () => event.preventDefault(),
         nativeEvent: event.nativeEvent
       };
       onChange(changeEvent);
     }
+    group?.onChange(value, event.nativeEvent, target);
   };
   return /* @__PURE__ */ jsxs(RadioButtonLabel, { className: cx("ant-radio-button-wrapper", "ds-radio-button", isChecked && "ant-radio-button-wrapper-checked", isDisabled && "ant-radio-button-wrapper-disabled", className), style, onClick, $checked: isChecked, $disabled: isDisabled, $solid: group?.buttonStyle === "solid", $size: group?.size, children: [
     /* @__PURE__ */ jsx("span", { className: cx("ant-radio-button", isChecked && "ant-radio-button-checked", isDisabled && "ant-radio-button-disabled"), children: /* @__PURE__ */ jsx(RadioButtonInput, { type: "radio", className: "ant-radio-button-input ds-radio-button-input", checked: isChecked, disabled: isDisabled, name: group?.name, value: value === void 0 ? void 0 : String(value), onChange: handleChange, ...rest }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-radio",
-  "version": "1.1.19",
+  "version": "2.0.0",
   "description": "Radio UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -42,9 +42,9 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.3.25",
-    "@synerise/ds-typography": "^1.1.28",
-    "@synerise/ds-utils": "^1.10.2"
+    "@synerise/ds-form-field": "^2.0.0",
+    "@synerise/ds-typography": "^2.0.0",
+    "@synerise/ds-utils": "^2.0.0"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
@@ -52,5 +52,5 @@
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "6df24ed12cd5f276d8eccde730591807982e3385"
+  "gitHead": "033854a18f038079e9a16b0ff250f8401a2287c2"
 }