@agregio-solutions/design-system 2.0.0 → 2.2.0

package/dist/packages/components/Button/components/HoldProgress/HoldProgress.d.ts

@@ -19,4 +19,4 @@ export interface Props {
  * percent would mean re-rendering on each frame, and the label already tells
  * the user what to do.
  */
-export default function HoldProgress({ size, duration }: Props): import("react").JSX.Element;
+export default function HoldProgress({ size, duration }: Props): import('react').JSX.Element;

package/dist/packages/components/Button/components/IconLeftElement/IconLeftElement.d.ts

@@ -8,4 +8,4 @@ export interface Props {
 /**
  * Leading slot of a button: the loader takes over the icon while loading.
  */
-export default function IconLeftElement({ iconLeft, isLoading, size }: Props): import("react").JSX.Element | null;
+export default function IconLeftElement({ iconLeft, isLoading, size }: Props): import('react').JSX.Element | null;

package/dist/packages/components/Button/components/IconRightElement/IconRightElement.d.ts

@@ -9,4 +9,4 @@ export interface Props {
 /**
  * Trailing slot of a button.
  */
-export default function IconRightElement({ iconRight, text, isLoading, size, }: Props): import("react").JSX.Element | null;
+export default function IconRightElement({ iconRight, text, isLoading, size, }: Props): import('react').JSX.Element | null;

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

@@ -35,4 +35,4 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      */
     customIcon?: React.ReactNode;
 };
-export default function ChartLegend({ text, chartColor, onClick, isSelected, icon, customIcon, circleOutlineColor, ...reactAriaButtonProps }: Props): import("react").JSX.Element;
+export default function ChartLegend({ text, chartColor, onClick, isSelected, icon, customIcon, circleOutlineColor, ...reactAriaButtonProps }: Props): import('react').JSX.Element;

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

@@ -3,6 +3,11 @@ import { Props as FormGroupWrapperProps } from '../../internal-components/FormGr
 import { Props as SelectItemProps } from '../SelectItem/SelectItem';
 import { Props as LabelProps } from '../Label/Label';
 export type ComboboxItem = SelectItemProps;
+/**
+ * The props of the single selection mode, and of the deprecated multiple selection workaround.
+ * Kept as a single object type so that the types consumers derive from it (`Omit`, `Props["value"]`, `interface extends`) keep compiling.
+ * The native multiple selection mode has its own props: `MultipleProps`.
+ */
 export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRightTooltip" | "required"> & Pick<FormGroupWrapperProps, "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon" | "orientation"> & {
     /**
      * Required id, used mainly to link the label to the field.
@@ -10,10 +15,12 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
     id: string;
     /**
      * The controlled value of the Combobox. Should be used in conjunction with `onChange`.
+     * Not used in the native multiple selection mode, see `selectedKeys`.
      */
     value: string | null;
     /**
      * Event handler called when the value changes.
+     * Not used in the native multiple selection mode, see `onSelectionChange`.
      */
     onChange: (value: string) => void;
     /**
@@ -28,6 +35,8 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
     items?: Array<ComboboxItem>;
     /**
      * The selection mode of the Combobox.
+     * For multiple selection, pass `selectedKeys` and `onSelectionChange` instead of `value` and `onChange`.
+     * Using `"multiple"` with `value` and `onChange` is deprecated: this workaround fakes the multiple selection on top of a single one.
      * @default "single"
      */
     selectionMode?: "single" | "multiple";
@@ -91,92 +100,40 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     triggerContentRight?: React.ReactNode;
 };
-declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
-    /**
-     * Required id, used mainly to link the label to the field.
-     */
-    id: string;
-    /**
-     * The controlled value of the Combobox. Should be used in conjunction with `onChange`.
-     */
-    value: string | null;
-    /**
-     * Event handler called when the value changes.
-     */
-    onChange: (value: string) => void;
-    /**
-     * The items to display in the dropdown (uncontrolled, filtering managed internally).
-     */
-    defaultItems?: Array<ComboboxItem>;
-    /**
-     * The items to display in the dropdown.
-     * /!\ Warning: using this prop will make the filtering mode "controlled" !
-     * Use it in pair with `inputValue` and `onInputChange` props, and manage the filtered of items yourself.
-     */
-    items?: Array<ComboboxItem>;
+/**
+ * The props of the native multiple selection mode.
+ */
+export type MultipleProps = Omit<Props, "value" | "onChange" | "selectionMode"> & {
     /**
      * The selection mode of the Combobox.
-     * @default "single"
-     */
-    selectionMode?: "single" | "multiple";
-    /**
-     * Specifies the nature of the Combobox (mainly to change the trigger border color and helperText color).
-     * If you do not pass a nature prop, the component will automatically set the nature based on the presence of success/error messages
-     */
-    nature?: "default" | "negative" | "positive" | "warning";
-    /**
-     * The value of the ComboBox input (controlled).
-     */
-    inputValue?: string;
-    /**
-     * Event handler called when the input value changes (controlled).
      */
-    onInputChange?: (value: string) => void;
+    selectionMode: "multiple";
     /**
-     * The default value of the ComboBox input (uncontrolled).
+     * The ids of the selected items (controlled). Pass `[]` when nothing is selected.
      */
-    defaultInputValue?: string;
+    selectedKeys: Array<string>;
     /**
-     * When true, prevents the user from interacting with Combobox.
+     * Event handler called with the ids of all the selected items when the selection changes.
      */
-    disabled?: boolean;
-    /**
-     * The content that will be rendered inside the input when no value or defaultValue is set.
-     */
-    placeholder?: string;
-    /**
-     * Props to pass to the wrapper div (for example, style or className)
-     */
-    wrapperProps?: React.HTMLProps<HTMLDivElement>;
-    /**
-     * Props to pass to the input (for example, style or className).
-     */
-    inputProps?: React.HTMLProps<HTMLInputElement>;
-    /**
-     * Whether the input should take the full width available
-     */
-    fullWidth?: boolean;
-    /**
-     * Disabled items in the dropdown, should be the item's id.
-     */
-    disabledIds?: Array<string>;
-    /**
-     * If you give a ReactNode as label, you should then provide an aria-label as string to ensure there is no accessibility issue
-     */
-    "aria-label"?: string;
-    /**
-     * The filter function used to determine if a option should be included in the combo box list.
-     */
-    defaultFilter?: (textValue: string, inputValue: string) => boolean;
-    /**
-     * When true, increases the dropdown max-height from 200px to 400px.
-     */
-    tallDropdown?: boolean;
-    /**
-     * An element rendered inside the field, on the left of the dropdown trigger.
-     * Typically a `Badge` displaying the number of selected items in `selectionMode="multiple"`.
-     * It lays out in the flow, so the input shrinks to make room for it whatever its width.
-     */
-    triggerContentRight?: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>>;
-export default Combobox;
+    onSelectionChange: (selectedKeys: Array<string>) => void;
+};
+type SingleProps = Omit<Props, "selectionMode"> & {
+    selectionMode?: "single";
+};
+type WithRef<P> = P & React.RefAttributes<HTMLInputElement>;
+/**
+ * Overloads: TypeScript resolves a JSX element against each signature in order.
+ * The order matters: Storybook documents the props of the first signature,
+ * and `ComponentProps<typeof Combobox>` reads the last one, which stays `Props`.
+ */
+type ComboboxComponent = {
+    (props: WithRef<SingleProps>): React.ReactNode;
+    (props: WithRef<MultipleProps>): React.ReactNode;
+    /**
+     * @deprecated The multiple selection with `value` and `onChange` is a workaround on top of a single selection.
+     * Use `selectedKeys` and `onSelectionChange` instead, see the "Multiple selection" section of the Combobox docs.
+     */
+    (props: WithRef<Props>): React.ReactNode;
+} & Omit<React.ForwardRefExoticComponent<WithRef<Props>>, never>;
+declare const _default: ComboboxComponent;
+export default _default;

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

@@ -181,12 +181,13 @@ Here are some more advanced stories with more testing coverage and examples that
 import { Meta, StoryObj } from "@storybook/react-vite";
 
 import Badge from "@packages/components/Badge/Badge";
+import ErrorBoundary from "@packages/internal-components/ErrorBoundary/ErrorBoundary";
 import Combobox from "../Combobox";
 import { Playground } from "../Combobox.stories";
 import { userEvent, within, screen, expect } from "storybook/test";
 import { expectNotPresent } from "@internal/test-utils-storybook/test-utils-storybook";
 import * as ComboboxStories from "../Combobox.stories";
-import { useEffect, useState } from "react";
+import { ComponentProps, useEffect, useState } from "react";
 import { useController, useForm } from "react-hook-form";
 
 const meta: Meta<typeof Combobox> = {
@@ -539,6 +540,298 @@ export const ExampleWithCustomFiltering: StoryObj<typeof Combobox> = {
 };
 
 export const MultipleSelectionExample: StoryObj<typeof Combobox> = {
+  parameters: {
+    ...meta.parameters,
+    layout: "padded",
+  },
+  render: () => {
+    const data = new Array(10).fill(0).map((_, index) => ({
+      id: `${index + 1}`,
+      name: `Perimeter ${index + 1}`,
+    }));
+
+    const ParentComponent = () => {
+      // List of the selected perimeters ids
+      const [selectedPerimetersIds, setSelectedPerimetersIds] = useState<
+        Array<string>
+      >([]);
+
+      // List of the selected perimeters (derived state)
+      const selectedPerimeters = data.filter((perimeter) =>
+        selectedPerimetersIds.includes(perimeter.id),
+      );
+
+      return (
+        <div style={{ display: "flex", gap: "var(--spacing-xs)" }}>
+          <Combobox
+            id="perimeters-combobox"
+            label="Select perimeters"
+            selectionMode="multiple"
+            selectedKeys={selectedPerimetersIds}
+            onSelectionChange={setSelectedPerimetersIds}
+            defaultItems={data.map((perimeter) => ({
+              text: perimeter.name,
+              id: perimeter.id,
+            }))}
+            // Display the number of selected items inside the field
+            triggerContentRight={
+              <Badge
+                value={selectedPerimetersIds.length}
+                nature="informative"
+              />
+            }
+          />
+
+          <div>
+            <div>Selected perimeters:</div>
+            <ul>
+              {selectedPerimeters.map((perimeter) => (
+                <li key={perimeter.id}>{perimeter.name}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      );
+    };
+    return <ParentComponent />;
+  },
+};
+
+const MULTIPLE_LABEL = "Select perimeters";
+
+const MULTIPLE_ITEMS = Array.from({ length: 10 }, (_, index) => ({
+  id: `${index + 1}`,
+  text: `Perimeter ${index + 1}`,
+}));
+
+const MultipleCombobox = (
+  props: Pick<ComponentProps<typeof Combobox>, "disabledIds" | "required">,
+) => {
+  const [selectedKeys, setSelectedKeys] = useState<Array<string>>([]);
+
+  return (
+    <>
+      <Combobox
+        {...props}
+        id="perimeters-combobox"
+        label={MULTIPLE_LABEL}
+        selectionMode="multiple"
+        selectedKeys={selectedKeys}
+        onSelectionChange={setSelectedKeys}
+        defaultItems={MULTIPLE_ITEMS}
+        triggerContentRight={
+          <Badge value={selectedKeys.length} nature="informative" />
+        }
+      />
+      <button type="button" onClick={() => setSelectedKeys([])}>
+        Clear selection
+      </button>
+    </>
+  );
+};
+
+const getMultipleField = (canvasElement: HTMLElement) => {
+  const input = within(canvasElement).getByLabelText(MULTIPLE_LABEL);
+  return { input, field: within(input.parentElement!) };
+};
+
+// The badge is the only text of the field besides the trigger icon
+const expectSelectedCount = async (canvasElement: HTMLElement, count: number) =>
+  expect(
+    getMultipleField(canvasElement).field.getByText(String(count)),
+  ).toBeInTheDocument();
+
+const findOption = async (text: string) =>
+  (await screen.findByText(text, { selector: "span" })).closest(
+    '[role="option"]',
+  );
+
+export const ShouldSelectMultipleValues: StoryObj<typeof Combobox> = {
+  ...MultipleSelectionExample,
+  play: async ({ canvasElement }) => {
+    const user = userEvent.setup({ delay: 50 });
+    const { input, field } = getMultipleField(canvasElement);
+    const clickOption = async (text: string) =>
+      user.click(await screen.findByText(text, { selector: "span" }));
+    const selectedList = within(within(canvasElement).getByRole("list"));
+
+    // The badge renders nothing while no item is selected
+    await expectNotPresent(() => field.queryByText("0"));
+
+    // The dropdown stays open across selections
+    await user.click(field.getByRole("button"));
+
+    await clickOption("Perimeter 1");
+    await expectSelectedCount(canvasElement, 1);
+
+    await clickOption("Perimeter 2");
+    await expectSelectedCount(canvasElement, 2);
+    await expect(await findOption("Perimeter 1")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(await findOption("Perimeter 2")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+
+    // Unselecting brings the count back down
+    await clickOption("Perimeter 1");
+    await expectSelectedCount(canvasElement, 1);
+    await expect(
+      selectedList.queryByText("Perimeter 1"),
+    ).not.toBeInTheDocument();
+    await expect(selectedList.getByText("Perimeter 2")).toBeInTheDocument();
+
+    // Typing filters the options, and the input is cleared after a selection
+    await user.type(input, "10");
+    await clickOption("Perimeter 10");
+    await expect(input).toHaveValue("");
+    await expectSelectedCount(canvasElement, 2);
+    await expect(selectedList.getByText("Perimeter 10")).toBeInTheDocument();
+  },
+};
+
+export const ShouldSelectMultipleValuesWithTheKeyboard: StoryObj<
+  typeof Combobox
+> = {
+  render: () => <MultipleCombobox />,
+  play: async ({ canvasElement }) => {
+    const user = userEvent.setup({ delay: 50 });
+    const { input } = getMultipleField(canvasElement);
+
+    await user.click(input);
+    await user.keyboard("{ArrowDown}");
+    await screen.findByRole("listbox");
+    await user.keyboard("{Enter}");
+    await expectSelectedCount(canvasElement, 1);
+
+    // The dropdown stays open, so the next option can be selected right away
+    await user.keyboard("{ArrowDown}{Enter}");
+    await expectSelectedCount(canvasElement, 2);
+    await expect(await findOption("Perimeter 1")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    await expect(await findOption("Perimeter 2")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+
+    await user.keyboard("{Escape}");
+    await expectNotPresent(() => screen.queryByRole("listbox"));
+  },
+};
+
+export const ShouldResetTheMultipleSelectionFromTheParent: StoryObj<
+  typeof Combobox
+> = {
+  render: () => <MultipleCombobox />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const { field } = getMultipleField(canvasElement);
+
+    await user.click(field.getByRole("button"));
+    await user.click(
+      await screen.findByText("Perimeter 1", { selector: "span" }),
+    );
+    await expectSelectedCount(canvasElement, 1);
+
+    // The open dropdown hides the rest of the page from assistive technologies
+    await user.keyboard("{Escape}");
+    await user.click(canvas.getByRole("button", { name: "Clear selection" }));
+    await expectNotPresent(() => field.queryByText("1"));
+
+    await user.click(field.getByRole("button"));
+    await expect(await findOption("Perimeter 1")).toHaveAttribute(
+      "aria-selected",
+      "false",
+    );
+  },
+};
+
+export const ShouldNotSelectADisabledOptionInMultipleMode: StoryObj<
+  typeof Combobox
+> = {
+  render: () => <MultipleCombobox disabledIds={["2"]} />,
+  play: async ({ canvasElement }) => {
+    const user = userEvent.setup({ delay: 50 });
+    const { field } = getMultipleField(canvasElement);
+
+    await user.click(field.getByRole("button"));
+    await user.click(
+      await screen.findByText("Perimeter 2", { selector: "span" }),
+    );
+    await expect(await findOption("Perimeter 2")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+    await expectNotPresent(() => field.queryByText("1"));
+  },
+};
+
+export const ShouldBeRequiredInMultipleMode: StoryObj<typeof Combobox> = {
+  render: () => <MultipleCombobox required />,
+  play: async ({ canvasElement }) => {
+    await expect(getMultipleField(canvasElement).input).toBeRequired();
+  },
+};
+
+export const ShouldThrowWhenSelectedKeysIsNotAnArray: StoryObj<
+  typeof Combobox
+> = {
+  decorators: [(Story) => <ErrorBoundary>{Story()}</ErrorBoundary>],
+  render: () => (
+    <Combobox
+      id="perimeters-combobox"
+      label={MULTIPLE_LABEL}
+      selectionMode="multiple"
+      // Simulates a loosely typed form value that is not initialized yet
+      selectedKeys={undefined as unknown as Array<string>}
+      onSelectionChange={() => {}}
+      defaultItems={MULTIPLE_ITEMS}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText(
+      'Error: Combobox "perimeters-combobox": `selectedKeys` must be an array, use `[]` when nothing is selected',
+    );
+  },
+};
+
+export const ShouldThrowWhenSelectedKeysIsUsedWithoutMultipleMode: StoryObj<
+  typeof Combobox
+> = {
+  decorators: [(Story) => <ErrorBoundary>{Story()}</ErrorBoundary>],
+  render: () => {
+    // Bypasses the types, as a loosely typed consumer would
+    const looseProps = {
+      selectedKeys: [],
+      onSelectionChange: () => {},
+    } as unknown as ComponentProps<typeof Combobox>;
+    return (
+      <Combobox
+        {...looseProps}
+        id="perimeters-combobox"
+        label={MULTIPLE_LABEL}
+        defaultItems={MULTIPLE_ITEMS}
+      />
+    );
+  },
+  play: async ({ canvasElement }) => {
+    await within(canvasElement).findByText(
+      'Error: Combobox "perimeters-combobox": `selectedKeys` requires `selectionMode="multiple"`',
+    );
+  },
+};
+
+/**
+ * @deprecated Multiple selection faked on top of a single selection.
+ * Use `selectedKeys` and `onSelectionChange` instead (see `MultipleSelectionExample`).
+ * Kept to guarantee the legacy usage keeps working.
+ */
+export const LegacyMultipleSelectionExample: StoryObj<typeof Combobox> = {
   parameters: {
     ...meta.parameters,
     layout: "padded",
@@ -705,7 +998,7 @@ export const ShouldCloseTheDropdownWhenNoOptionMatches: StoryObj<
 
 Here are the notes available for the developer on the built Storybook, you can read them to understand the component and how to use it.
 
-```mdx
+````mdx
 import {
   Meta,
   Canvas,
@@ -778,16 +1071,78 @@ Interacting with link items navigates to the provided URL and does not update th
 
 ## Multiple selection
 
-Here is an example of how to use the combobox with multiple selection.
-Please note that this is a temporary solution, the React Aria combobox does not support multiple selection yet.
-The implementation details may change in the future.
+Set `selectionMode="multiple"` and control the selection with `selectedKeys` (the selected ids) and `onSelectionChange` (called with all the selected ids).
 
-Because the selection is owned by the consumer, the combobox cannot count the selected items itself.
+- The dropdown stays open after each selection, so the user can pick several items in a row.
+- The input is cleared after each selection, ready for the next search.
+- The selected items are checked in the dropdown: no need to pass `isSelected` on the items.
+
+`selectedKeys` must always be an array: pass `[]` when nothing is selected (for example while a form value is not initialized yet).
+The combobox throws an error otherwise, or when `selectedKeys` is used without `selectionMode="multiple"`.
+
+The combobox does not display the selection itself.
 Use the `triggerContentRight` prop to display a `Badge` with the count inside the field, on the left of the dropdown trigger.
 The element lays out in the flow, so the input shrinks to make room for it whatever its width, and it takes no room at all when the badge renders nothing.
 
 <Source of={ComboboxTests.MultipleSelectionExample} type="code" dark />
 
+### Typing a wrapper component
+
+The props of the multiple selection are exported as `ComboboxMultipleProps`:
+
+```tsx
+import {
+  Combobox,
+  ComboboxMultipleProps,
+} from "@agregio-solutions/design-system";
+
+type PerimetersComboboxProps = Omit<ComboboxMultipleProps, "label">;
+
+const PerimetersCombobox = (props: PerimetersComboboxProps) => (
+  <Combobox {...props} label="Perimeters" />
+);
+```
+
+`ComponentProps<typeof Combobox>` still returns the props of the single selection (with `value` and `onChange`), so the existing wrappers keep compiling unchanged.
+
+### Migrating from the deprecated multiple selection
+
+Before React Aria supported multiple selection, it was faked on top of a single selection: `value=""` was forced, `onChange` received the clicked id and the consumer toggled it in its own list, then marked the items with `isSelected`.
+
+This workaround is **deprecated**. It still works and compiles, but your editor strikes `<Combobox>` through when it is used this way.
+It will be removed in a future major version. To migrate:
+
+- Replace `value=""` with `selectedKeys={selectedIds}`.
+- Replace the `onChange` toggling logic with `onSelectionChange={setSelectedIds}`.
+- Remove `isSelected` from the items.
+
+```tsx
+// Before (deprecated)
+<Combobox
+  selectionMode="multiple"
+  value=""
+  onChange={(id) =>
+    setSelectedIds(
+      selectedIds.includes(id)
+        ? selectedIds.filter((selectedId) => selectedId !== id)
+        : [...selectedIds, id],
+    )
+  }
+  defaultItems={items.map((item) => ({
+    ...item,
+    isSelected: selectedIds.includes(item.id),
+  }))}
+/>
+
+// After
+<Combobox
+  selectionMode="multiple"
+  selectedKeys={selectedIds}
+  onSelectionChange={setSelectedIds}
+  defaultItems={items}
+/>
+```
+
 ## How to test this component?
 
 Here is a code snippet that you can use as an example to know how to test this component with react testing library:
@@ -801,4 +1156,4 @@ Here is a code snippet that you can use as an example to know how to test this c
 <Controls of={Combobox.Playground} />
 
 <Stories />
-```
+````

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/FileUpload/components/FileDetails/FileDetails.d.ts

@@ -20,4 +20,4 @@ export type Props = {
      */
     onDelete: () => void;
 };
-export default function FileDetails({ id, fileName, fileSize, isUploading, onDelete, }: Props): import("react").JSX.Element;
+export default function FileDetails({ id, fileName, fileSize, isUploading, onDelete, }: Props): import('react').JSX.Element;

package/dist/packages/components/FileUpload/components/FileDetails/FileDetails.styled.d.ts

@@ -3,7 +3,7 @@ export declare const Root: import('styled-components/dist/types').IStyledCompone
 }> & string;
 export declare const FileIcon: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('../../../Icon/Icon').Props, "style"> & {
     style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
-}> & string & Omit<({ name, ...props }: import('../../../Icon/Icon').Props) => import("react").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}> & string & Omit<({ name, ...props }: import('../../../Icon/Icon').Props) => import('react').JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const Informations: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
 }> & string;

package/dist/packages/components/Icon/components/access_time.d.ts

@@ -1,2 +1,2 @@
 import { IconBaseProps } from '../Icon';
-export default function IconAccessTime(props: IconBaseProps): import("react").JSX.Element;
+export default function IconAccessTime(props: IconBaseProps): import('react').JSX.Element;

package/dist/packages/components/Icon/components/add.d.ts

@@ -1,2 +1,2 @@
 import { IconBaseProps } from '../Icon';
-export default function IconAdd(props: IconBaseProps): import("react").JSX.Element;
+export default function IconAdd(props: IconBaseProps): import('react').JSX.Element;

package/dist/packages/components/Icon/components/add_box.d.ts

@@ -1,2 +1,2 @@
 import { IconBaseProps } from '../Icon';
-export default function IconAddBox(props: IconBaseProps): import("react").JSX.Element;
+export default function IconAddBox(props: IconBaseProps): import('react').JSX.Element;