@agregio-solutions/design-system 2.1.0 → 2.2.0

package/dist/packages/components/DataTable/doc.md

@@ -45,7 +45,8 @@ import DataTableCell from "@packages/components/DataTable/DataTableCell/DataTabl
 import DataTable from "@packages/components/DataTable/DataTable";
 import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import Checkbox from "../Checkbox/Checkbox";
-import Radio from "../Radio/Radio";
+import RadioGroup from "../RadioGroup/RadioGroup";
+import RadioGroupItem from "../RadioGroupItem/RadioGroupItem";
 import { I18nProvider } from "react-aria-components";
 import Select from "../Select/Select";
 import SelectItem from "../SelectItem/SelectItem";
@@ -213,18 +214,17 @@ export const WithReactTableFrontEndManaged: StoryObj<typeof DataTable> = {
               filterFn: "equals",
               meta: {
                 FilterInDrawer: ({ column }) => (
-                  <div>
-                    <b>Filter by day:</b>
-
+                  <RadioGroup
+                    label="Filter by day"
+                    value={
+                      (column.getFilterValue() as string | undefined) ?? null
+                    }
+                    onChange={(day) => column.setFilterValue(day)}
+                  >
                     {DAYS.map((day) => (
-                      <Radio
-                        label={day}
-                        key={day}
-                        checked={column.getFilterValue() === day}
-                        onChange={() => column.setFilterValue(day)}
-                      />
+                      <RadioGroupItem label={day} key={day} value={day} />
                     ))}
-                  </div>
+                  </RadioGroup>
                 ),
               } satisfies TypeTableColumnWithFilter<
                 typeof clientFeatures,

package/dist/packages/components/PageLayout/doc.md

@@ -51,7 +51,8 @@ import {
 } from "@tanstack/react-table";
 import DataTableHeader from "../DataTable/DataTableHeader/DataTableHeader";
 import DataTableCell from "../DataTable/DataTableCell/DataTableCell";
-import Radio from "../Radio/Radio";
+import RadioGroup from "../RadioGroup/RadioGroup";
+import RadioGroupItem from "../RadioGroupItem/RadioGroupItem";
 import Filter, { TypeTableColumnWithFilter } from "../Filter/Filter";
 import CheckboxGroup from "../CheckboxGroup/CheckboxGroup";
 import Checkbox from "../Checkbox/Checkbox";
@@ -307,18 +308,17 @@ export const PageLayoutWithDataTable: Story = {
               filterFn: "equals",
               meta: {
                 FilterInDrawer: ({ column }) => (
-                  <div>
-                    <b>Filter by day:</b>
-
+                  <RadioGroup
+                    label="Filter by day"
+                    value={
+                      (column.getFilterValue() as string | undefined) ?? null
+                    }
+                    onChange={(day) => column.setFilterValue(day)}
+                  >
                     {DAYS.map((day) => (
-                      <Radio
-                        label={day}
-                        key={day}
-                        checked={column.getFilterValue() === day}
-                        onChange={() => column.setFilterValue(day)}
-                      />
+                      <RadioGroupItem label={day} key={day} value={day} />
                     ))}
-                  </div>
+                  </RadioGroup>
                 ),
               } satisfies TypeTableColumnWithFilter<
                 typeof tableFeaturesSet,

package/dist/packages/components/Radio/Radio.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+/**
+ * @deprecated Use `RadioGroup` with `RadioGroupItem` instead.
+ */
 export type Props = Omit<React.HTMLProps<HTMLInputElement>, "label" | "type"> & {
     /**
      * The text to display next to the radio button.
@@ -13,5 +16,9 @@ export type Props = Omit<React.HTMLProps<HTMLInputElement>, "label" | "type"> &
      */
     wrapperProps?: React.HTMLProps<HTMLDivElement>;
 };
+/**
+ * @deprecated Use `RadioGroup` with `RadioGroupItem` instead: it names the group,
+ * handles keyboard navigation and displays helper and error texts.
+ */
 declare const Radio: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

package/dist/packages/components/Radio/doc.md

@@ -350,6 +350,10 @@ import * as RadioTests from "./tests/Radio.stories";
 
 # Radio
 
+> **Deprecated** — use `RadioGroup` with `RadioGroupItem` instead. It names the group for
+> assistive technologies, handles keyboard navigation (one tab stop, arrow keys) and displays
+> helper and error texts. See the "Migrating from `Radio`" section of the `RadioGroup` docs.
+
 Use this component exactly like an `<input type="radio">` but with an added `label` prop.
 
 <Canvas of={Radio.WithLabel} />

package/dist/packages/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,92 @@
+import { default as React } from 'react';
+import { Props as LabelProps } from '../Label/Label';
+import { Props as FormGroupWrapperProps } from '../../internal-components/FormGroupWrapper/FormGroupWrapper';
+export type Props = {
+    /**
+     * The `RadioGroupItem`s to display in the group.
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the selected radio (controlled). `null` means no radio is selected.
+     */
+    value?: string | null;
+    /**
+     * The value of the radio selected on first render (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Handler that is called with the value of the newly selected radio.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The name of the radios, used when submitting an HTML form.
+     */
+    name?: string;
+    /**
+     * Whether all the radios of the group are disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the radios can be focused but not changed by the user.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Layout of the radios inside the group.
+     * @default "vertical"
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Accessible name of the group, required when `label` is not a string.
+     */
+    "aria-label"?: string;
+    /**
+     * Props to pass to the wrapper div (for example, `style` or `className`).
+     */
+    wrapperProps?: React.HTMLProps<HTMLDivElement>;
+} & Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation" | "className" | "style">;
+declare const RadioGroup: React.ForwardRefExoticComponent<{
+    /**
+     * The `RadioGroupItem`s to display in the group.
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the selected radio (controlled). `null` means no radio is selected.
+     */
+    value?: string | null;
+    /**
+     * The value of the radio selected on first render (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Handler that is called with the value of the newly selected radio.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The name of the radios, used when submitting an HTML form.
+     */
+    name?: string;
+    /**
+     * Whether all the radios of the group are disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the radios can be focused but not changed by the user.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Layout of the radios inside the group.
+     * @default "vertical"
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * Accessible name of the group, required when `label` is not a string.
+     */
+    "aria-label"?: string;
+    /**
+     * Props to pass to the wrapper div (for example, `style` or `className`).
+     */
+    wrapperProps?: React.HTMLProps<HTMLDivElement>;
+} & Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "className" | "style" | "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & React.RefAttributes<{
+    focus: (options?: FocusOptions) => void;
+}>>;
+export default RadioGroup;