@agregio-solutions/design-system 1.97.1 → 1.98.0

package/dist/packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.d.ts

@@ -1,9 +1,10 @@
-import { Block, SubLine } from '../../utils/Timeline.types';
+import { Block, GroupHoverTextFormatter, SubLine } from '../../utils/Timeline.types';
 interface Props {
     name: string;
     subLines: Array<SubLine>;
     lineStartDate: Block["startDate"];
     lineEndDate: Block["endDate"];
+    groupHoverText?: GroupHoverTextFormatter;
 }
-export default function GroupLineContainer({ name, subLines, lineStartDate, lineEndDate, }: Props): import("react").JSX.Element;
+export default function GroupLineContainer({ name, subLines, lineStartDate, lineEndDate, groupHoverText, }: Props): import("react").JSX.Element;
 export {};

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

@@ -704,6 +704,52 @@ export const GroupWithOverflow: Story = {
   },
 };
 
+export const GroupCustomHoverText: Story = {
+  args: {
+    startDate: new Date("2024-01-01T00:00:00.000Z"),
+    endDate: new Date("2024-01-08T00:00:00.000Z"),
+    lines: [
+      {
+        type: "group",
+        name: "Installation 5",
+        groupHoverText: ({ blocks }) => `${blocks.length} indisponibilité(s)`,
+        subLines: [
+          {
+            name: "Installation 5 PRM_1",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-01T00:00:00.000Z"),
+                endDate: new Date("2024-01-03T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 5 PRM_1 - Indisponibilité 1",
+              },
+            ],
+          },
+          {
+            name: "Installation 5 PRM_2",
+            blocks: [
+              {
+                id: "unavailability-1",
+                startDate: new Date("2024-01-02T00:00:00.000Z"),
+                endDate: new Date("2024-01-04T00:00:00.000Z"),
+                color: "var(--color-content-dataviz-pink-3)",
+                hoverText: "Installation 5 PRM_2 - Indisponibilité 1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  play: async ({ canvasElement, mount }) => {
+    MockDate.set("2024-01-05T12:00:00.000Z");
+    await mount();
+    const canvas = within(canvasElement);
+    await canvas.findByTestId("2 indisponibilité(s)");
+  },
+};
+
 export const MixedSimpleAndGroup: Story = {
   args: {
     startDate: new Date("2024-01-01T00:00:00.000Z"),
@@ -1018,6 +1064,22 @@ Use `type: "group"` with a `subLines` array instead of a `blocks` array.
 
 When collapsed, the group displays a **merged view** of all sub-lines' blocks. Blocks sharing the same color are merged into a single block spanning their combined range. This gives a quick overview of activity across all sub-lines.
 
+By default, hovering a merged block shows its date range. Provide a `groupHoverText` function on the group line to customize this text. It receives the merged interval's `startDate`, `endDate`, `color`, and the original `blocks` that were merged into it:
+
+```ts
+{
+  type: "group",
+  name: "Installation 3",
+  groupHoverText: ({ startDate, endDate, blocks }) =>
+    `${blocks.length} events between ${startDate} and ${endDate}`,
+  subLines: [ /* ... */ ],
+}
+```
+
+Give `groupHoverText` a stable identity (`useCallback`, or defined outside the component) — it's used as a dependency to memoize the merge computation, so a new function on every render defeats that memoization.
+
+<Canvas of={Timeline.GroupCustomHoverText} />
+
 ### Expanded state
 
 Clicking the group name **expands** it, revealing each sub-line on its own indented row. Clicking again collapses it back.

package/dist/packages/components/Timeline/utils/Timeline.types.d.ts

@@ -34,6 +34,25 @@ export type Block = {
      */
     onClick?: () => void;
 };
+export type MergedBlock = {
+    /**
+     * The start date of the merged interval
+     */
+    startDate: Date;
+    /**
+     * The end date of the merged interval
+     */
+    endDate: Date;
+    /**
+     * The color shared by all blocks merged into this interval
+     */
+    color: Block["color"];
+    /**
+     * The original blocks (from all sub-lines) that were merged into this interval
+     */
+    blocks: Array<Block>;
+};
+export type GroupHoverTextFormatter = (mergedBlock: MergedBlock) => string;
 export type SubLine = {
     /**
      * The name of the sub-line, displayed at the left when expanded
@@ -71,6 +90,14 @@ export type GroupLine = {
      * The sub-lines to display when expanded
      */
     subLines: Array<SubLine>;
+    /**
+     * Custom formatter for the hover text of the merged blocks shown on the group's
+     * collapsed row. Receives the merged date range, color, and the original blocks
+     * that were merged into it. Defaults to a "start date - end date" format.
+     * Give it a stable identity (e.g. via `useCallback`, or defined outside the
+     * component) so the merge computation isn't redone on every render.
+     */
+    groupHoverText?: GroupHoverTextFormatter;
 };
 export type Line = SimpleLine | GroupLine;
 export declare function isGroupLine(line: Line): line is GroupLine;

package/dist/packages/components/Timeline/utils/mergeBlocksByColor/mergeBlocksByColor.d.ts

@@ -1,7 +1,7 @@
-import { Block, SubLine } from '../Timeline.types';
+import { Block, GroupHoverTextFormatter, SubLine } from '../Timeline.types';
 /**
  * Merges blocks from all sub-lines by color.
  * For each color group, overlapping intervals are merged into a single block.
  * Returns a flat array of merged blocks.
  */
-export declare function mergeBlocksByColor(subLines: SubLine[]): Block[];
+export declare function mergeBlocksByColor(subLines: SubLine[], groupHoverText?: GroupHoverTextFormatter): Block[];

package/package.json

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