@agregio-solutions/design-system 1.99.0 → 1.101.0

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

@@ -3,6 +3,7 @@ import { ButtonProps } from 'react-aria-components';
 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"> & {
     /**
      * Handler that is called when the press is released over the target.
@@ -17,7 +18,7 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      * Specifies the size of the button.
      * @default "medium".
      */
-    size?: "small" | "medium" | "large";
+    size?: ButtonSize;
     /**
      * Specifies the button colour.
      * @default "action".
@@ -63,6 +64,14 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      * Props to pass to the tooltip. Only used if `tooltip` is provided.
      */
     tooltipProps?: Omit<TooltipProps, "label" | "children">;
+    /**
+     * Require the user to keep the button pressed for this duration (in milliseconds)
+     * 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`.
+     * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
+     */
+    holdToSubmitDuration?: number;
     /**
      * Add a badge to the button on the top right corner.
      * If not provided, the badge will not be displayed.
@@ -83,7 +92,7 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps
      * Specifies the size of the button.
      * @default "medium".
      */
-    size?: "small" | "medium" | "large";
+    size?: ButtonSize;
     /**
      * Specifies the button colour.
      * @default "action".
@@ -129,6 +138,14 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps
      * Props to pass to the tooltip. Only used if `tooltip` is provided.
      */
     tooltipProps?: Omit<TooltipProps, "label" | "children">;
+    /**
+     * Require the user to keep the button pressed for this duration (in milliseconds)
+     * 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`.
+     * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
+     */
+    holdToSubmitDuration?: number;
     /**
      * Add a badge to the button on the top right corner.
      * If not provided, the badge will not be displayed.

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

@@ -0,0 +1,22 @@
+import { ButtonSize } from '../../Button';
+export interface Props {
+    /**
+     * Size of the button it fills, so the circle scales with it.
+     */
+    size: ButtonSize;
+    /**
+     * How long the fill animation lasts, in milliseconds.
+     */
+    duration: number;
+}
+/**
+ * Circular progress shown while the user holds a button down.
+ * The whole animation is driven by CSS: mounting the SVG (re)starts it, so
+ * cancelling a hold needs no extra work, and holding triggers no re-render.
+ *
+ * It carries a `progressbar` role so it exists in the accessibility tree while
+ * the button label is hidden. Its value stays at 0 on purpose: announcing every
+ * 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;

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

@@ -0,0 +1,11 @@
+import { IconName } from '../../../Icon/Icon';
+import { ButtonSize } from '../../Button';
+export interface Props {
+    iconLeft?: IconName;
+    isLoading?: boolean;
+    size?: ButtonSize;
+}
+/**
+ * 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;

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

@@ -0,0 +1,12 @@
+import { IconName } from '../../../Icon/Icon';
+import { ButtonSize } from '../../Button';
+export interface Props {
+    iconRight?: IconName;
+    text?: string | number;
+    isLoading?: boolean;
+    size?: ButtonSize;
+}
+/**
+ * Trailing slot of a button.
+ */
+export default function IconRightElement({ iconRight, text, isLoading, size, }: Props): import("react").JSX.Element | null;

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

@@ -119,6 +119,20 @@ export const Loading: StoryObj<typeof Button> = {
   },
 };
 
+export const HoldToSubmit: StoryObj<typeof Button> = {
+  args: {
+    ...Playground.args,
+    text: "Supprimer",
+    nature: "negative",
+    holdToSubmitDuration: 1000,
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Supprimer")).toBeVisible();
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
+
 export const Informative: StoryObj<typeof Button> = {
   args: {
     ...Playground.args,
@@ -332,12 +346,13 @@ Here are some more advanced stories with more testing coverage and examples that
 
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
-import { within, expect } from "storybook/test";
+import { within, expect, userEvent, waitFor, fireEvent } from "storybook/test";
 
 import Button from "../Button";
 import ErrorBoundary from "@packages/internal-components/ErrorBoundary/ErrorBoundary";
 import { ICON_NAMES_ARRAY } from "@components/Icon/Icon";
 import { Playground } from "../Button.stories";
+import { someTime } from "@internal/test-utils-storybook/test-utils-storybook";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -396,6 +411,89 @@ export const LinkWithTarget: StoryObj<typeof Button> = {
     await expect(linkElement).toHaveAttribute("target", "_blank");
   },
 };
+
+const HOLD_DURATION = 300;
+
+// `userEvent.pointer` does not drive React Aria's press events here, so we
+// dispatch the pointer events ourselves to press without releasing.
+const POINTER_EVENT_INIT = {
+  pointerId: 1,
+  pointerType: "mouse",
+  button: 0,
+  isPrimary: true,
+  // width/height/pressure/detail must look like a real mouse, otherwise React
+  // Aria treats the event as a virtual pointer and waits for a click instead
+  width: 1,
+  height: 1,
+  pressure: 0.5,
+  detail: 1,
+};
+
+const pressWithoutReleasing = (element: HTMLElement) =>
+  fireEvent.pointerDown(element, { ...POINTER_EVENT_INIT, buttons: 1 });
+
+const release = (element: HTMLElement) =>
+  fireEvent.pointerUp(element, { ...POINTER_EVENT_INIT, buttons: 0 });
+
+const holdArgs = {
+  ...Playground.args,
+  holdToSubmitDuration: HOLD_DURATION,
+};
+
+export const HoldShortClickDoesNothing: StoryObj<typeof Button> = {
+  args: holdArgs,
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.click(canvas.getByRole("button"));
+    await someTime(HOLD_DURATION * 2);
+    await expect(args.onClick).not.toHaveBeenCalled();
+  },
+};
+
+export const HoldReleasedTooEarly: StoryObj<typeof Button> = {
+  args: holdArgs,
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button");
+
+    await pressWithoutReleasing(button);
+    await someTime(HOLD_DURATION / 3);
+    await expect(canvas.getByText("[Insert name]")).not.toBeVisible();
+    // The progress must be in the accessibility tree while the label is hidden
+    await expect(
+      canvas.getByRole("progressbar", { name: "Keep holding to confirm" }),
+    ).toBeInTheDocument();
+
+    await release(button);
+    await someTime(HOLD_DURATION * 2);
+    await expect(args.onClick).not.toHaveBeenCalled();
+    await expect(canvas.getByText("[Insert name]")).toBeVisible();
+    await expect(canvas.queryByRole("progressbar")).not.toBeInTheDocument();
+  },
+};
+
+export const HoldCompleted: StoryObj<typeof Button> = {
+  args: holdArgs,
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    await pressWithoutReleasing(canvas.getByRole("button"));
+    await waitFor(() => expect(args.onClick).toHaveBeenCalledTimes(1));
+  },
+};
+
+export const HoldByKeyboard: StoryObj<typeof Button> = {
+  args: holdArgs,
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup();
+    await user.tab();
+    await expect(canvas.getByRole("button")).toHaveFocus();
+    // Hold Enter down without releasing it
+    await user.keyboard("{Enter>}");
+    await waitFor(() => expect(args.onClick).toHaveBeenCalledTimes(1));
+  },
+};
 ```
 
 ## Developer notes
@@ -422,4 +520,13 @@ import * as Button from "./Button.stories";
 ## Button props
 
 <Controls of={Button.Playground} />
+
+## Hold to submit
+
+Give `holdToSubmitDuration` a duration in milliseconds to require the user to
+keep the button pressed before `onClick` fires. Text and icons are hidden while
+holding — the button keeps its size — and a circular progress fills up.
+Releasing early resets everything without calling `onClick`.
+
+<Canvas of={Button.HoldToSubmit} />
 ```

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

@@ -84,6 +84,12 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      * 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;
 };
 declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label" | "required" | "labelIconRight" | "labelIconRightTooltip"> & Pick<FormGroupWrapperProps, "orientation" | "description" | "helperText" | "helperTextIcon" | "errorHelperText" | "errorHelperTextIcon" | "successHelperText" | "successHelperTextIcon" | "warningHelperText" | "warningHelperTextIcon"> & {
     /**
@@ -166,5 +172,11 @@ declare const Combobox: React.ForwardRefExoticComponent<Pick<LabelProps, "label"
      * 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;

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

@@ -56,7 +56,7 @@ export const Playground: StoryObj<typeof Combobox> = {
       { text: "Option disabled", id: "disabled" },
     ],
     disabledIds: ["disabled"],
-    placeholder: "Please select an option",
+    placeholder: "Select an option",
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
     required: true,
@@ -184,6 +184,7 @@ Here are some more advanced stories with more testing coverage and examples that
 ```tsx
 import { Meta, StoryObj } from "@storybook/react-vite";
 
+import Badge from "@packages/components/Badge/Badge";
 import Combobox from "../Combobox";
 import { Playground } from "../Combobox.stories";
 import { userEvent, within, screen, expect } from "storybook/test";
@@ -588,6 +589,13 @@ export const MultipleSelectionExample: StoryObj<typeof Combobox> = {
               id: perimeter.id,
               isSelected: selectedPerimetersIds.includes(perimeter.id),
             }))}
+            // Display the number of selected items inside the field
+            triggerContentRight={
+              <Badge
+                value={selectedPerimetersIds.length}
+                nature="informative"
+              />
+            }
           />
 
           <div>
@@ -603,6 +611,75 @@ export const MultipleSelectionExample: StoryObj<typeof Combobox> = {
     };
     return <ParentComponent />;
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const clickOption = async (text: string) =>
+      user.click(await screen.findByText(text, { selector: "span" }));
+
+    // The badge renders nothing while no item is selected
+    await expectNotPresent(() => canvas.queryByText("0"));
+
+    // The dropdown stays open across selections, since the selected key never changes
+    await user.click(canvas.getByRole("button"));
+
+    await clickOption("Perimeter 1");
+    await expect(canvas.getByText("1")).toBeInTheDocument();
+
+    await clickOption("Perimeter 2");
+    await expect(canvas.getByText("2")).toBeInTheDocument();
+
+    // Unselecting brings the count back down
+    await clickOption("Perimeter 1");
+    await expect(canvas.getByText("1")).toBeInTheDocument();
+  },
+};
+
+export const ShouldLayOutTheFieldShellAroundItsContent: StoryObj<
+  typeof Combobox
+> = {
+  // Keeps the field away from the viewport edges, where the popover gets clamped
+  decorators: [
+    (Story) => (
+      <div style={{ padding: "var(--spacing-xl)" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    ...Playground.args,
+    selectionMode: "multiple",
+    // A wide badge must not overlap the typed text: the input shrinks instead
+    triggerContentRight: <Badge value={9999} nature="informative" />,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    const input = canvas.getByLabelText("[Insert label]");
+    const field = input.parentElement!;
+    const badge = canvas.getByText("9999");
+
+    // The border lives on the field shell, not on the input
+    await expect(getComputedStyle(field).outlineWidth).toBe("1px");
+    await expect(getComputedStyle(input).outlineStyle).toBe("none");
+
+    // The badge sits inside the field, past the end of the input
+    await expect(field).toContainElement(badge);
+    await expect(badge.getBoundingClientRect().left).toBeGreaterThanOrEqual(
+      input.getBoundingClientRect().right,
+    );
+    await expect(field.getBoundingClientRect().right).toBeGreaterThan(
+      badge.getBoundingClientRect().right,
+    );
+
+    // The dropdown still spans the whole field, and stays aligned with it
+    await user.click(within(field).getByRole("button"));
+    const listbox = await screen.findByRole("listbox");
+    const fieldBox = field.getBoundingClientRect();
+    const listboxBox = listbox.getBoundingClientRect();
+    await expect(listboxBox.width).toBe(fieldBox.width);
+    await expect(Math.round(listboxBox.left)).toBe(Math.round(fieldBox.left));
+  },
 };
 ```
 
@@ -687,6 +764,10 @@ 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.
 
+Because the selection is owned by the consumer, the combobox cannot count the selected items 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 />
 
 ## How to test this component?

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

@@ -125,6 +125,7 @@ import { default as phone_2_full } from './components/phone_2_full';
 import { default as play } from './components/play';
 import { default as play_empty } from './components/play_empty';
 import { default as play_full } from './components/play_full';
+import { default as power_off } from './components/power_off';
 import { default as profile } from './components/profile';
 import { default as profile_full } from './components/profile_full';
 import { default as progress } from './components/progress';
@@ -313,6 +314,7 @@ export declare const AVAILABLE_ICONS: {
     play_empty: typeof play_empty;
     play_full: typeof play_full;
     play: typeof play;
+    power_off: typeof power_off;
     profile_full: typeof profile_full;
     profile: typeof profile;
     progress: typeof progress;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.99.0",
+  "version": "1.101.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",