@agregio-solutions/design-system 1.95.1 → 1.96.0

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

@@ -480,6 +480,31 @@ export const ExampleWithLinks: StoryObj<typeof Combobox> = {
   },
 };
 
+export const ShouldRenderALinkItemWithATarget: StoryObj<typeof Combobox> = {
+  args: {
+    ...Playground.args,
+    defaultItems: [
+      { text: "Option 1", id: "1" },
+      {
+        text: "Google",
+        id: "google",
+        href: "https://google.com",
+        target: "_blank",
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const user = userEvent.setup({ delay: 50 });
+    await user.type(canvas.getByLabelText("[Insert label]"), "Goo");
+    const link = (
+      await screen.findByText("Google", { selector: "span" })
+    ).closest("a");
+    await expect(link).toHaveAttribute("href", "https://google.com");
+    await expect(link).toHaveAttribute("target", "_blank");
+  },
+};
+
 export const ExampleWithCustomFiltering: StoryObj<typeof Combobox> = {
   render: () => {
     const options = [

package/dist/packages/components/DataTable/DataTableHeader/DataTableHeader.d.ts

@@ -7,6 +7,9 @@ export type Props = {
     iconLeft?: IconName;
     /**
      * Optional text content for the header. Can also be a React component.
+     * Rendered inside the sort button: it must not contain interactive elements
+     * (button, link, input), which would be invalid HTML and would trigger the sort
+     * on click.
      */
     text?: React.ReactNode;
     /**
@@ -14,7 +17,7 @@ export type Props = {
      */
     sortDirection?: "asc" | "desc" | "none";
     /**
-     * Callback fired when the sort icon is clicked. If not provided, the sort icon will not be displayed.
+     * Callback fired when the header cell is clicked. If not provided, the header is not sortable and the sort icon is not displayed.
      */
     onSortClick?: (event?: unknown) => void;
     /**

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

@@ -500,7 +500,7 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `DatePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DatePicker` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Date values are provided as string.
 This component handles correct international date manipulation across calendars, time zones, and other localization concerns.

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

@@ -547,7 +547,7 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `DateRangePicker` displays a placeholder by default. An initial, uncontrolled value can be provided to the `DateRangePicker` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Here is the type for the `value` prop (also valid for `defaultValue`, `onChange`, etc.):
 

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

@@ -1,3 +1,4 @@
+import { HTMLAttributeAnchorTarget } from 'react';
 import { IconName } from '../Icon/Icon';
 export type Props = {
     /**
@@ -25,6 +26,11 @@ export type Props = {
      * A URL to link
      */
     href?: string;
+    /**
+     * Only active with the `href` prop.
+     * Give a target attribute to use on the rendered anchor.
+     */
+    target?: HTMLAttributeAnchorTarget;
     /**
      * Only active with the `href` prop.
      * Router-specific options to pass to the `Link` component under the hood. (configured by the RouterProvider).
@@ -41,4 +47,4 @@ export type Props = {
      */
     selectionMode?: "single" | "multiple";
 };
-export default function SelectItem({ text, id, iconRight, iconLeft, isSelected, href, routerOptions, className, selectionMode, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
+export default function SelectItem({ text, id, iconRight, iconLeft, isSelected, href, target, routerOptions, className, selectionMode, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -7,7 +7,7 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     id: string;
     /**
-     * Actual date value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
+     * Actual time value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
      */
     value?: string | null;
     /**
@@ -26,11 +26,12 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     ampm?: boolean;
     /**
-     * Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
+     * Determines the smallest unit that is displayed by the TimeField, and therefore which segments are editable.
+     * @default "minute"
      */
     granularity?: "hour" | "minute" | "second";
     /**
-     * Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
+     * Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
      */
     shouldForceLeadingZeros?: boolean;
     /**
@@ -58,10 +59,10 @@ export type Props = Pick<LabelProps, "label" | "labelIconRight" | "labelIconRigh
      */
     style?: React.CSSProperties;
     /**
-     * Specifies the nature of the Select (mainly to change the trigger border color and helperText color).
+     * Specifies the nature of the TimeField (mainly to change the input outline 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";
+    nature?: "default" | "negative" | "positive" | "warning";
     /**
      * Props to pass to the wrapper div (for example, style or className).
      */
@@ -81,7 +82,7 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     id: string;
     /**
-     * Actual date value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
+     * Actual time value of the TimeField, should be a valid [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601#Times) time string.
      */
     value?: string | null;
     /**
@@ -100,11 +101,12 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     ampm?: boolean;
     /**
-     * Determines the smallest unit that is displayed in the date picker. By default, this is "day" for dates, and "minute" for times.
+     * Determines the smallest unit that is displayed by the TimeField, and therefore which segments are editable.
+     * @default "minute"
      */
     granularity?: "hour" | "minute" | "second";
     /**
-     * Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.
+     * Whether to always show leading zeros in the hour field. By default, this is determined by the user's locale.
      */
     shouldForceLeadingZeros?: boolean;
     /**
@@ -132,10 +134,10 @@ declare const TimeField: React.ForwardRefExoticComponent<Pick<LabelProps, "label
      */
     style?: React.CSSProperties;
     /**
-     * Specifies the nature of the Select (mainly to change the trigger border color and helperText color).
+     * Specifies the nature of the TimeField (mainly to change the input outline 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";
+    nature?: "default" | "negative" | "positive" | "warning";
     /**
      * Props to pass to the wrapper div (for example, style or className).
      */

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

@@ -16,7 +16,7 @@ Base stories:
 import { Meta, StoryObj } from "@storybook/react-vite";
 import TimeField from "./TimeField";
 import { I18nProvider } from "react-aria-components";
-import { fn } from "storybook/test";
+import { expect, fn, within } from "storybook/test";
 
 const meta: Meta<typeof TimeField> = {
   component: TimeField,
@@ -41,6 +41,12 @@ const meta: Meta<typeof TimeField> = {
 };
 export default meta;
 
+const getRoot = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-design-system-component="TimeField"]');
+
+const getInput = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector("[data-nature]");
+
 export const Playground: StoryObj<typeof TimeField> = {
   args: {
     label: "Time Field",
@@ -50,6 +56,14 @@ export const Playground: StoryObj<typeof TimeField> = {
     labelIconRight: "help_outline",
     labelIconRightTooltip: "Additional information",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Time Field")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "default",
+    );
+  },
 };
 
 export const Empty: StoryObj<typeof TimeField> = {
@@ -57,6 +71,13 @@ export const Empty: StoryObj<typeof TimeField> = {
     ...Playground.args,
     defaultValue: undefined,
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveAttribute(
+      "data-placeholder",
+      "true",
+    );
+  },
 };
 
 export const OnlyHour: StoryObj<typeof TimeField> = {
@@ -65,6 +86,15 @@ export const OnlyHour: StoryObj<typeof TimeField> = {
     defaultValue: "12",
     granularity: "hour",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveTextContent(
+      "12",
+    );
+    await expect(
+      canvas.queryByLabelText("minute, Time Field"),
+    ).not.toBeInTheDocument();
+  },
 };
 
 export const HourMinute: StoryObj<typeof TimeField> = {
@@ -73,6 +103,18 @@ export const HourMinute: StoryObj<typeof TimeField> = {
     defaultValue: "12:34",
     granularity: "minute",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("hour, Time Field")).toHaveTextContent(
+      "12",
+    );
+    await expect(canvas.getByLabelText("minute, Time Field")).toHaveTextContent(
+      "34",
+    );
+    await expect(
+      canvas.queryByLabelText("second, Time Field"),
+    ).not.toBeInTheDocument();
+  },
 };
 
 export const HourMinuteSecond: StoryObj<typeof TimeField> = {
@@ -81,6 +123,12 @@ export const HourMinuteSecond: StoryObj<typeof TimeField> = {
     defaultValue: "12:34:56",
     granularity: "second",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByLabelText("second, Time Field")).toHaveTextContent(
+      "56",
+    );
+  },
 };
 
 export const LocaleFR: StoryObj<typeof TimeField> = {
@@ -90,6 +138,9 @@ export const LocaleFR: StoryObj<typeof TimeField> = {
   args: {
     ...HourMinuteSecond.args,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getInput(canvasElement)).toHaveTextContent("12:34:56");
+  },
 };
 
 export const Disabled: StoryObj<typeof TimeField> = {
@@ -97,6 +148,12 @@ export const Disabled: StoryObj<typeof TimeField> = {
     ...Playground.args,
     isDisabled: true,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  },
 };
 
 export const WithError: StoryObj<typeof TimeField> = {
@@ -106,6 +163,14 @@ export const WithError: StoryObj<typeof TimeField> = {
     errorHelperText: "Error message",
     errorHelperTextIcon: "error_outline",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Error message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "negative",
+    );
+  },
 };
 
 export const WithSuccess: StoryObj<typeof TimeField> = {
@@ -115,6 +180,14 @@ export const WithSuccess: StoryObj<typeof TimeField> = {
     successHelperText: "Success message",
     successHelperTextIcon: "check",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Success message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "positive",
+    );
+  },
 };
 
 export const WithWarning: StoryObj<typeof TimeField> = {
@@ -124,6 +197,14 @@ export const WithWarning: StoryObj<typeof TimeField> = {
     warningHelperText: "Warning message",
     warningHelperTextIcon: "warning_amber",
   },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText("Warning message")).toBeVisible();
+    await expect(getInput(canvasElement)).toHaveAttribute(
+      "data-nature",
+      "warning",
+    );
+  },
 };
 
 export const WithHorizontalOrientation: StoryObj<typeof TimeField> = {
@@ -131,6 +212,11 @@ export const WithHorizontalOrientation: StoryObj<typeof TimeField> = {
     ...Playground.args,
     orientation: "horizontal",
   },
+  play: async ({ canvasElement }) => {
+    await expect(
+      canvasElement.querySelector("[data-orientation]"),
+    ).toHaveAttribute("data-orientation", "horizontal");
+  },
 };
 
 export const FullWidth: StoryObj<typeof TimeField> = {
@@ -141,6 +227,12 @@ export const FullWidth: StoryObj<typeof TimeField> = {
     ...Playground.args,
     fullWidth: true,
   },
+  play: async ({ canvasElement }) => {
+    await expect(getRoot(canvasElement)).toHaveAttribute(
+      "data-fullwidth",
+      "true",
+    );
+  },
 };
 ```
 
@@ -242,23 +334,23 @@ export const ControlledShouldSelectAValue: StoryObj<typeof TimeField> = {
 export const ExampleGranularity: StoryObj<typeof TimeField> = {
   render: () => {
     function Example() {
-      const [time, setDate] = useState("12:34");
+      const [time, setTime] = useState("12:34");
 
       return (
         <>
           <TimeField
-            id="time-and-time"
-            label="Date and time"
+            id="granularity-second"
+            label="Second granularity"
             granularity="second"
             value={time}
-            onChange={setDate}
+            onChange={setTime}
           />
           <TimeField
-            id="time"
-            label="Date"
+            id="granularity-hour"
+            label="Hour granularity"
             granularity="hour"
             value={time}
-            onChange={setDate}
+            onChange={setTime}
           />
         </>
       );
@@ -324,16 +416,24 @@ Read [the React Aria blog post](https://react-spectrum.adobe.com/blog/date-and-t
 ## Value
 
 A `TimeField` displays a placeholder by default. An initial, uncontrolled value can be provided to the `TimeField` using the `defaultValue` prop.
-Alternatively, a controlled value can be provided using the `value` and `onchange` props.
+Alternatively, a controlled value can be provided using the `value` and `onChange` props.
 
 Time values are provided as string.
-This component handles correct international time manipulation across time zones and other localization concerns.
-TimeField supports values of the following string formats:
+This component handles correct international time manipulation: hour cycle, locale-specific formatting and other localization concerns.
+Values carry no date and no time zone — a `TimeField` holds a plain time of day.
+TimeField accepts values in the following string formats:
+
+- `hh`
+- `hh:mm`
+- `hh:mm:ss`
+- `hh:mm:ss.sss`
+
+Every format is parsed into a complete time, with the missing units defaulting to zero — `"12"` and `"12:00:00"` are therefore equivalent values.
+
+The value format does **not** control what is rendered: the units displayed are decided by the `granularity` prop (see below).
+For example, `value="12:34:56"` with the default `"minute"` granularity displays `12:34`; pass `granularity="second"` to also show the seconds.
 
-- `hh` -> only the hour is displayed
-- `hh:mm` -> only the hour and minute are displayed
-- `hh:mm:ss` -> only the hour, minute and second are displayed
-- `hh:mm:ss.sss` -> the hour, minute, second and millisecond are displayed (millisecond are not selectable by the user and will not change when the rest of the time is changed)
+Milliseconds are preserved in the value but never displayed, and they are not editable by the user: they will not change when the rest of the time is changed.
 
 ## Granularity
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.95.1",
+  "version": "1.96.0",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -28,7 +28,6 @@
     "semantic-release": "semantic-release",
     "prettier:check": "prettier . --check --ignore-path .gitignore",
     "prettier:write": "prettier . --write --ignore-path .gitignore",
-    "repomix": "repomix",
     "storybook": "storybook dev -p 6006",
     "storybook:test": "vitest run --project storybook",
     "storybook:test:llm": "DEBUG_PRINT_LIMIT=0 vitest run --project=storybook --reporter=dot --silent --changed --passWithNoTests",
@@ -80,7 +79,6 @@
     "react-router-dom": "7.15.1",
     "recharts": "3.8.1",
     "remark-gfm": "4.0.1",
-    "repomix": "1.14.0",
     "semantic-release": "25.0.3",
     "storybook": "10.4.0",
     "typescript-eslint": "8.59.3",