@agregio-solutions/design-system 1.101.3 → 1.102.0

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

@@ -29,6 +29,18 @@ export type TimelineProps = {
      * collapsed, so it can be passed straight to a state setter.
      */
     onExpandedGroupsChange?: (expandedGroups: ExpandedGroups) => void;
+    /**
+     * Corner style of the timeline blocks. "rounded" keeps the pill shape,
+     * "squared" applies a minimal radius.
+     * @default "rounded"
+     */
+    shape?: "rounded" | "squared";
+    /**
+     * Draw a dashed vertical line over the whole timeline at every unit boundary
+     * of the range header (each hour, or each day).
+     * @default false
+     */
+    showGridLines?: boolean;
     /**
      * The class name of the timeline
      */
@@ -38,4 +50,4 @@ export type TimelineProps = {
      */
     style?: CSSProperties;
 };
-export default function Timeline({ emptyPlaceholder, lines, startDate, endDate, expandedGroups, onExpandedGroupsChange, ...props }: TimelineProps): import("react").JSX.Element;
+export default function Timeline({ emptyPlaceholder, lines, startDate, endDate, expandedGroups, onExpandedGroupsChange, shape, showGridLines, ...props }: TimelineProps): import("react").JSX.Element;

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

@@ -10,3 +10,15 @@ export declare const LinesContainer: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * Overlays the plotting area only — the names column is excluded, so its width
+ * matches the one every line positions its blocks against.
+ */
+export declare const GridLines: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const GridLine: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,11 @@
+/**
+ * The dates of every unit boundary strictly inside the timeline range, in the
+ * same unit as the timeline range header (hours or days).
+ *
+ * Boundaries are counted from the range start, so a line always falls on a
+ * block edge. They match the header cell borders as well, except when the range
+ * is not a whole number of units: the header rounds its cell count up, this
+ * does not. The range edges are left out: they already carry the timeline
+ * borders.
+ */
+export declare function getGridLineDates(startDate: Date, endDate: Date): Date[];

package/dist/packages/components/Timeline/utils/getGridLineDates/getGridLineDates.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+export type UnitsMode = "hours" | "week" | "two-weeks" | "month";
+export declare const ONE_HOUR_IN_MS: number;
+export declare const ONE_DAY_IN_MS: number;
+export declare const ONE_WEEK_IN_MS: number;
+export declare const ONE_TWO_WEEKS_IN_MS: number;
+/**
+ * The unit the timeline range is split into, derived from its duration.
+ */
+export declare function getUnitMode(datesDiffInMs: number): UnitsMode;

package/package.json

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