@agregio-solutions/design-system 1.101.0 → 1.101.2

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

@@ -138,7 +138,7 @@ Here are some more advanced stories with more testing coverage and examples that
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { userEvent, within, expect, screen } from "storybook/test";
 import { Route, Routes } from "react-router-dom";
-import { I18nProvider } from "react-aria";
+import { I18nProvider } from "react-aria-components";
 
 import { expectNotPresent } from "@internal/test-utils-storybook/test-utils-storybook";
 import { FiveItems } from "../Breadcrumbs.stories";

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

@@ -4,7 +4,7 @@ import { HTMLAttributeAnchorTarget } from 'react';
 import { Props as TooltipProps } from '../Tooltip/Tooltip';
 import { Props as BadgeProps } from '../Badge/Badge';
 export type ButtonSize = "small" | "medium" | "large";
-export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
+export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "isPending" | "children"> & {
     /**
      * Handler that is called when the press is released over the target.
      */
@@ -45,7 +45,9 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      */
     fullWidth?: boolean;
     /**
-     * Show loading state
+     * Show loading state. On a button, this maps to react-aria's `isPending`: the button
+     * keeps the focus and announces the state change to screen readers instead of being
+     * removed from the tab order. On a link (`href`), it disables the element.
      */
     isLoading?: boolean;
     /**
@@ -69,6 +71,8 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      * before `onClick` is called. While pressed, text and icons are hidden (the button
      * keeps its size) and a circular progress fills up. Releasing early resets
      * everything without calling `onClick`.
+     * Works with `type="submit"`: the owner form is submitted once the hold completes,
+     * and never on a short click.
      * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
      */
     holdToSubmitDuration?: number;
@@ -78,7 +82,7 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      */
     badgeProps?: BadgeProps;
 };
-declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "children" | "isDisabled" | "onPress"> & {
+declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "children" | "isDisabled" | "onPress" | "isPending"> & {
     /**
      * Handler that is called when the press is released over the target.
      */
@@ -119,7 +123,9 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps
      */
     fullWidth?: boolean;
     /**
-     * Show loading state
+     * Show loading state. On a button, this maps to react-aria's `isPending`: the button
+     * keeps the focus and announces the state change to screen readers instead of being
+     * removed from the tab order. On a link (`href`), it disables the element.
      */
     isLoading?: boolean;
     /**
@@ -143,6 +149,8 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps
      * before `onClick` is called. While pressed, text and icons are hidden (the button
      * keeps its size) and a circular progress fills up. Releasing early resets
      * everything without calling `onClick`.
+     * Works with `type="submit"`: the owner form is submitted once the hold completes,
+     * and never on a short click.
      * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
      */
     holdToSubmitDuration?: number;

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

@@ -13,7 +13,7 @@ Here are the Storybook Stories.
 Base stories:
 
 ```tsx
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import { Meta, StoryObj } from "@storybook/react-vite";
 import { userEvent, within, waitFor, expect, fn } from "storybook/test";
 
@@ -119,17 +119,36 @@ export const Loading: StoryObj<typeof Button> = {
   },
 };
 
-export const HoldToSubmit: StoryObj<typeof Button> = {
+export const HoldToSubmitInAForm: StoryObj<typeof Button> = {
   args: {
     ...Playground.args,
-    text: "Supprimer",
-    nature: "negative",
+    text: "Envoyer",
     holdToSubmitDuration: 1000,
+    type: "submit",
+  },
+  render: (args) => {
+    const Form = () => {
+      const [submitCount, setSubmitCount] = useState(0);
+
+      return (
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            setSubmitCount((count) => count + 1);
+          }}
+        >
+          <Button {...args} />
+          <p>Submitted {submitCount} time(s)</p>
+        </form>
+      );
+    };
+
+    return <Form />;
   },
-  play: async ({ canvasElement, args }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText("Supprimer")).toBeVisible();
-    await expect(args.onClick).not.toHaveBeenCalled();
+    // Hold it by hand in the sidebar: a short click leaves the count at 0
+    await expect(canvas.getByText("Submitted 0 time(s)")).toBeVisible();
   },
 };
 
@@ -346,7 +365,14 @@ Here are some more advanced stories with more testing coverage and examples that
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { within, expect, userEvent, waitFor, fireEvent } from "storybook/test";
+import {
+  within,
+  expect,
+  userEvent,
+  waitFor,
+  fireEvent,
+  fn,
+} from "storybook/test";
 
 import Button from "../Button";
 import ErrorBoundary from "@packages/internal-components/ErrorBoundary/ErrorBoundary";
@@ -412,6 +438,47 @@ export const LinkWithTarget: StoryObj<typeof Button> = {
   },
 };
 
+export const LoadingKeepsTheButtonFocusable: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    isLoading: true,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    const button = canvas.getByRole("button");
+
+    // react-aria's isPending uses aria-disabled, so the button keeps its place in
+    // the tab order instead of dropping the focus back to the body
+    await expect(button).toHaveAttribute("aria-disabled", "true");
+    await expect(button).toBeEnabled();
+
+    await user.tab();
+    await expect(button).toHaveFocus();
+
+    await user.click(button);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
+
+export const LoadingLinkIsDisabled: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    href: "/link",
+    isLoading: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const link = await canvas.findByRole("link");
+
+    // Link has no isPending equivalent, so the loading state still disables it:
+    // react-aria drops the anchor for a span, left out of the tab order
+    await expect(link.tagName).toBe("SPAN");
+    await expect(link).toHaveAttribute("data-disabled");
+    await expect(link).not.toHaveAttribute("tabindex");
+  },
+};
+
 const HOLD_DURATION = 300;
 
 // `userEvent.pointer` does not drive React Aria's press events here, so we
@@ -494,6 +561,131 @@ export const HoldByKeyboard: StoryObj<typeof Button> = {
     await waitFor(() => expect(args.onClick).toHaveBeenCalledTimes(1));
   },
 };
+
+const onFormSubmit = fn();
+
+/** Wraps the button in a real form so the native submit path is exercised, not simulated. */
+const HoldToSubmitForm = (props: React.ComponentProps<typeof Button>) => (
+  <form
+    onSubmit={(event) => {
+      event.preventDefault();
+      onFormSubmit();
+    }}
+  >
+    <Button {...props} />
+  </form>
+);
+
+const holdSubmitStory = {
+  args: { ...holdArgs, type: "submit" as const },
+  render: (args: React.ComponentProps<typeof Button>) => (
+    <HoldToSubmitForm {...args} />
+  ),
+  beforeEach: () => {
+    onFormSubmit.mockClear();
+  },
+};
+
+export const HoldSubmitsTheFormOnlyOnceCompleted: StoryObj<typeof Button> = {
+  ...holdSubmitStory,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+
+    // A short click must not submit — this is exactly what a raw `type="submit"` would do
+    await userEvent.setup().click(button);
+    await someTime(HOLD_DURATION * 2);
+    await expect(onFormSubmit).not.toHaveBeenCalled();
+
+    await pressWithoutReleasing(button);
+    await waitFor(() => expect(onFormSubmit).toHaveBeenCalledTimes(1));
+  },
+};
+
+export const HoldReleasedTooEarlyDoesNotSubmitTheForm: StoryObj<typeof Button> =
+  {
+    ...holdSubmitStory,
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const button = canvas.getByRole("button");
+
+      await pressWithoutReleasing(button);
+      await someTime(HOLD_DURATION / 3);
+      await release(button);
+      await someTime(HOLD_DURATION * 2);
+
+      await expect(onFormSubmit).not.toHaveBeenCalled();
+    },
+  };
+
+const submitters: Array<string | undefined> = [];
+
+/**
+ * Two hold buttons in one form: a plain `type="submit"` would let `onSubmit` tell them apart
+ * through `event.submitter`, and honour the `formAction` it carries. So must the hold.
+ */
+const TwoHoldSubmitButtonsForm = () => (
+  <form
+    action="/default"
+    onSubmit={(event) => {
+      event.preventDefault();
+      const submitter = (event.nativeEvent as SubmitEvent)
+        .submitter as HTMLButtonElement | null;
+      submitters.push(submitter?.formAction);
+    }}
+  >
+    <Button
+      {...holdArgs}
+      text="Save"
+      type="submit"
+      formAction="/save"
+      onClick={undefined}
+    />
+    <Button
+      {...holdArgs}
+      text="Delete"
+      type="submit"
+      formAction="/delete"
+      onClick={undefined}
+    />
+  </form>
+);
+
+export const HoldKeepsTheButtonAsTheFormSubmitter: StoryObj<typeof Button> = {
+  render: () => <TwoHoldSubmitButtonsForm />,
+  beforeEach: () => {
+    submitters.length = 0;
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await pressWithoutReleasing(canvas.getByRole("button", { name: "Delete" }));
+    await waitFor(() => expect(submitters).toHaveLength(1));
+    await expect(submitters[0]).toMatch(/\/delete$/);
+
+    await pressWithoutReleasing(canvas.getByRole("button", { name: "Save" }));
+    await waitFor(() => expect(submitters).toHaveLength(2));
+    await expect(submitters[1]).toMatch(/\/save$/);
+  },
+};
+
+export const HoldRestoresTheButtonTypeAfterSubmitting: StoryObj<typeof Button> =
+  {
+    ...holdSubmitStory,
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      const button = canvas.getByRole("button") as HTMLButtonElement;
+
+      // Rendered as "button" so a short click cannot submit
+      await expect(button.type).toBe("button");
+
+      await pressWithoutReleasing(button);
+      await waitFor(() => expect(onFormSubmit).toHaveBeenCalledTimes(1));
+
+      // ...and back to "button" right after, ready for the next hold
+      await expect(button.type).toBe("button");
+    },
+  };
 ```
 
 ## Developer notes

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

@@ -49,5 +49,5 @@ export type Props = {
      */
     required?: boolean;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLLabelElement>>;
+declare const Checkbox: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

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

@@ -277,6 +277,51 @@ export const TestWithReactHookForm: StoryObj<typeof Checkbox> = {
     await expect(canvas.getByLabelText("Label")).toBeChecked();
   },
 };
+
+// The ref targets the native input, and react-aria's inputRef only accepts a ref
+// object, so both forms of forwarded ref must still reach that input.
+const RefProbe = ({ kind }: { kind: "object" | "callback" }) => {
+  const objectRef = React.useRef<HTMLInputElement>(null);
+  const [resolved, setResolved] = React.useState("none");
+
+  return (
+    <>
+      <div>Resolved: {resolved}</div>
+      <Checkbox
+        label="Label"
+        ref={
+          kind === "object"
+            ? objectRef
+            : (element) => setResolved(element?.type ?? "none")
+        }
+      />
+      <button
+        type="button"
+        onClick={() => setResolved(objectRef.current?.type ?? "none")}
+      >
+        Read object ref
+      </button>
+    </>
+  );
+};
+
+export const TestObjectRefReachesTheInput: StoryObj<typeof Checkbox> = {
+  render: () => <RefProbe kind="object" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    fireEvent.click(canvas.getByText("Read object ref"));
+    await expect(canvas.findByText("Resolved: checkbox")).resolves.toBeTruthy();
+  },
+};
+
+export const TestCallbackRefReachesTheInput: StoryObj<typeof Checkbox> = {
+  render: () => <RefProbe kind="callback" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // A callback ref is what react-hook-form's register() hands over
+    await expect(canvas.findByText("Resolved: checkbox")).resolves.toBeTruthy();
+  },
+};
 ```
 
 ## Developer notes

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

@@ -681,6 +681,28 @@ export const ShouldLayOutTheFieldShellAroundItsContent: StoryObj<
     await expect(Math.round(listboxBox.left)).toBe(Math.round(fieldBox.left));
   },
 };
+
+// Current behaviour, without react-aria's allowsEmptyCollection: when the filter
+// matches nothing, the popover closes and the user is left with no feedback.
+export const ShouldCloseTheDropdownWhenNoOptionMatches: StoryObj<
+  typeof Combobox
+> = {
+  args: {
+    ...Playground.args,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+
+    await user.type(input, "Option");
+    await screen.findByRole("listbox");
+
+    await user.type(input, " that matches nothing");
+    await expectNotPresent(() => screen.queryByRole("listbox"));
+    await expect(input).toHaveValue("Option that matches nothing");
+  },
+};
 ```
 
 ## Developer notes

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

@@ -14,7 +14,7 @@ Base stories:
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { I18nProvider as AriaI18nProvider } from "react-aria";
+import { I18nProvider as AriaI18nProvider } from "react-aria-components";
 import { fn, within } from "storybook/test";
 import Chip from "@components/Chip/Chip";
 import React from "react";

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

@@ -90,9 +90,10 @@ export const Dropdown: Story = {
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     await canvas.findByText(args.label as string);
-    await expect(
-      canvas.getByText(args.label as string).parentElement,
-    ).not.toHaveAttribute("href");
+    // A dropdown is a button, not a link: it must announce that it expands content
+    const trigger = canvas.getByRole("button", { name: args.label as string });
+    await expect(trigger).toHaveAttribute("aria-expanded", "false");
+    await expect(trigger).not.toHaveAttribute("href");
     await expectNotPresent(() => canvas.queryByText("Sous-libellé 1"));
     await expectNotPresent(() => canvas.queryByText("Sous-libellé 2"));
   },
@@ -107,8 +108,8 @@ export const DropdownOpenByDefault: Story = {
     const canvas = within(canvasElement);
     await canvas.findByText(args.label as string);
     await expect(
-      canvas.getByText(args.label as string).parentElement,
-    ).not.toHaveAttribute("href");
+      canvas.getByRole("button", { name: args.label as string }),
+    ).toHaveAttribute("aria-expanded", "true");
     await expect(
       canvas.getByText("Sous-libellé 1").parentElement,
     ).toHaveAttribute("href", "/some-url-1");

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

@@ -1,12 +1,12 @@
-import { ReactNode } from 'react';
-import { Href, RouterOptions } from '@react-types/shared';
+import { ComponentProps, ReactNode } from 'react';
+import { RouterProvider as AriaRouterProvider } from 'react-aria-components';
 export type Props = {
     /**
      * See the React Aria docs for more details on the RouterProvider usage
      * https://react-spectrum.adobe.com/react-aria/routing.html
      */
-    navigate: (path: Href, routerOptions: RouterOptions | undefined) => void;
-    useHref?: (href: Href) => string;
+    navigate: ComponentProps<typeof AriaRouterProvider>["navigate"];
+    useHref?: ComponentProps<typeof AriaRouterProvider>["useHref"];
     children: ReactNode;
 };
 declare const RouterProvider: ({ children, ...props }: Props) => import("react").JSX.Element;

package/dist/packages/components/SearchBar/components/SearchBarInput/SearchBarInput.d.ts

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange"> {
     /**
-     * The value of the input
+     * The value of the input. Omit it inside an `Autocomplete`, which owns the value.
      */
-    value: string;
+    value?: string;
     /**
      * The function to call when the value changes
      */
-    onChange: (value: string) => void;
+    onChange?: (value: string) => void;
     /**
      * The function to call when the clear button is clicked
      */
@@ -16,10 +16,6 @@ export interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
      * Whether the input has results (mainly to remove the bottom radius)
      */
     withResults?: boolean;
-    /**
-     * Props to pass to the wrapper container
-     */
-    wrapperProps?: React.HTMLProps<HTMLLabelElement>;
 }
 declare const _default: React.NamedExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
 export default _default;

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

@@ -220,7 +220,7 @@ import { expect, fn, within } from "storybook/test";
 import Select from "../Select";
 import SelectItem from "@components/SelectItem/SelectItem";
 import { useState } from "react";
-import { I18nProvider } from "react-aria";
+import { I18nProvider } from "react-aria-components";
 import Badge from "@packages/components/Badge/Badge";
 
 const meta: Meta<typeof Select> = {

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

@@ -155,7 +155,7 @@ Here are some more advanced stories with more testing coverage and examples that
 import { Meta, StoryObj } from "@storybook/react-vite";
 import Switch from "../Switch";
 import { userEvent, within, expect } from "storybook/test";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useController, useForm } from "react-hook-form";
 
 const meta: Meta<typeof Switch> = {
@@ -244,6 +244,53 @@ export const TestWithReactHookForm: StoryObj<typeof Switch> = {
     await canvas.findByText("Is selected: No");
   },
 };
+
+// react-aria's inputRef only accepts a ref object, so the forwarded ref is replayed
+// through useImperativeHandle. Both ref forms must reach the native input.
+const RefProbe = ({ kind }: { kind: "object" | "callback" }) => {
+  const objectRef = useRef<HTMLInputElement>(null);
+  const [tagName, setTagName] = useState("none");
+
+  return (
+    <>
+      <div>Resolved: {tagName}</div>
+      <Switch
+        label="Wi-Fi"
+        ref={
+          kind === "object"
+            ? objectRef
+            : (element) => setTagName(element?.tagName ?? "none")
+        }
+      />
+      <button
+        type="button"
+        onClick={() => setTagName(objectRef.current?.tagName ?? "none")}
+      >
+        Read object ref
+      </button>
+    </>
+  );
+};
+
+export const TestObjectRefReachesTheInput: StoryObj<typeof Switch> = {
+  render: () => <RefProbe kind="object" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+
+    await user.click(canvas.getByText("Read object ref"));
+    await expect(canvas.getByText("Resolved: INPUT")).toBeInTheDocument();
+  },
+};
+
+export const TestCallbackRefReachesTheInput: StoryObj<typeof Switch> = {
+  render: () => <RefProbe kind="callback" />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // A callback ref is what react-hook-form's register() hands over
+    await expect(canvas.getByText("Resolved: INPUT")).toBeInTheDocument();
+  },
+};
 ```
 
 ## Developer notes

package/dist/packages/index.d.ts

@@ -72,7 +72,7 @@ import { default as YearMonthPicker } from './components/YearMonthPicker/YearMon
 import { default as RouterProvider } from './components/RouterProvider/RouterProvider';
 import { default as createMuiTheme } from './mui/mui-theme.ts';
 import { tokens, fontSize, lineHeight } from './ds-design-tokens/index';
-import { I18nProvider } from 'react-aria';
+import { I18nProvider } from 'react-aria-components';
 import { toast } from 'sonner';
 export { Accordion, Badge, Breadcrumbs, Button, Calendar, CalendarCell, Card, ChartLegend, ChartTooltip, Checkbox, CheckboxGroup, Chip, Combobox, createMuiTheme, DataTable, DataTableCell, DataTableHeader, DataTableRoot, DataTableRow, DatePicker, DateRangePicker, Drawer, Dropdown, DropdownListItem, EmptyState, FileUpload, Filter, fontSize, Header, I18nProvider, Icon, Label, LinearProgressBar, lineHeight, Link, List, Loader, Menu, MenuItem, Message, Modal, ModalContent, ModalActions, ModalForm, Navigation, NavigationItem, Notifications, NotificationCard, NumberField, PageLayout, Pagination, Popover, PopoverTrigger, Radio, RouterProvider, SearchBar, SegmentedControl, SegmentedControlButton, SegmentedControlList, SegmentedControlPanel, Select, SelectItem, Skeleton, Slider, Stepper, Step, Switch, Tab, TabList, TabPanel, Tabs, Tag, TextInput, TimeField, TimePicker, Timeline, toast, Toaster, ToggleButton, ToggleButtonGroup, Tooltip, TooltipTrigger, tokens, YearMonthPicker, };
 export type { TypeTableColumnWithFilter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.101.0",
+  "version": "1.101.2",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -85,7 +85,9 @@
     "storybook": "10.5.5",
     "typescript": "5.9.3",
     "typescript-eslint": "8.65.0",
+    "vite": "7.3.3",
     "vite-plugin-dts": "5.0.3",
+    "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.10"
   },
   "dependencies": {
@@ -93,9 +95,17 @@
     "normalize.css": "8.0.1",
     "react-aria-components": "1.17.0",
     "sonner": "2.0.7",
-    "styled-components": "6.4.4",
-    "vite": "7.3.3",
-    "vite-tsconfig-paths": "6.1.1"
+    "styled-components": "6.4.4"
+  },
+  "peerDependencies": {
+    "@tanstack/react-table": "^8.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/react-table": {
+      "optional": true
+    }
   },
   "overrides": {
     "storybook": "$storybook"