@scality/core-ui 0.171.0 → 0.172.0

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js

@@ -11,7 +11,7 @@ import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { ChartTooltip } from './ChartTooltip';
+import { BarchartTooltip } from './BarchartTooltip';
 import { useChartData } from './utils';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 4,
@@ -122,5 +122,5 @@ export const Barchart = (props) => {
                                 stroke: theme.textSecondary,
                             }, axisLine: {
                                 stroke: theme.textSecondary,
-                            } }), _jsx(Tooltip, { content: (props) => (_jsx(ChartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip })), cursor: false })] }) }))] }));
+                            } }), _jsx(Tooltip, { content: (props) => (_jsx(BarchartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip, unitLabel: unitLabel })), cursor: false })] }) }))] }));
 };

package/dist/components/barchartv2/BarchartTooltip.d.ts

@@ -0,0 +1,11 @@
+import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
+import { TooltipContentProps } from 'recharts';
+export declare const BarchartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }: {
+    type: TimeType | CategoryType;
+    tooltipProps: TooltipContentProps<number, string>;
+    colorSet?: Record<string, string>;
+    hoveredValue: string | undefined;
+    tooltip?: BarchartTooltipFn<T>;
+    unitLabel?: string;
+}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=BarchartTooltip.d.ts.map

package/dist/components/barchartv2/BarchartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarchartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/BarchartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAU/C,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,YAAY,uEAOnD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,iIAyDA,CAAC"}

package/dist/components/barchartv2/BarchartTooltip.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormattedDateTime } from '../date/FormattedDateTime';
+import { getCurrentPoint } from './utils';
+import { ChartTooltipContainer, ChartTooltipItem, ChartTooltipHeader, ChartTooltipItemsContainer, } from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
+export const BarchartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, unitLabel, }) => {
+    const { active } = tooltipProps;
+    if (!active) {
+        return null;
+    }
+    const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+    if (tooltip) {
+        return tooltip(currentPoint);
+    }
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(ChartTooltipHeader, { children: type.type === 'time' ? (_jsx(FormattedDateTime, { format: type.timeRange.interval < 24 * 60 * 60 * 1000
+                        ? 'day-month-abbreviated-hour-minute-second'
+                        : 'long-date-without-weekday', value: new Date(currentPoint.category) })) : (currentPoint.category) }), _jsx(ChartTooltipItemsContainer, { children: currentPoint.values.map((value) => {
+                    const legendIcon = colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }));
+                    const formattedValue = Number.isInteger(value.value)
+                        ? `${value.value}`
+                        : value.value.toFixed(2);
+                    const valueWithUnit = unitLabel
+                        ? `${formattedValue} ${unitLabel}`
+                        : formattedValue;
+                    return (_jsx(ChartTooltipItem, { label: value.label, value: valueWithUnit, isHovered: value.isHovered, legendIcon: legendIcon }, value.label));
+                }) })] }));
+};

package/dist/components/charttooltip/ChartTooltip.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ChartTooltipItemProps {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    isHovered?: boolean;
+    legendIcon?: React.ReactNode;
+}
+export declare const ChartTooltipItem: React.FC<ChartTooltipItemProps>;
+export declare const ChartTooltipHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ChartTooltipItemsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};
+//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/charttooltip/ChartTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/charttooltip/ChartTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,qBAAqB,yGAUjC,CAAC;AA+BF,UAAU,qBAAqB;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAe5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,yGAK9B,CAAC;AAEF,eAAO,MAAM,0BAA0B,yGAKtC,CAAC"}

package/dist/components/charttooltip/ChartTooltip.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+export const ChartTooltipContainer = styled.div `
+  border: 1px solid ${({ theme }) => theme.border};
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  color: ${({ theme }) => theme.textPrimary};
+  border-radius: 4px;
+  font-size: ${fontSize.small};
+  padding: ${spacing.r8};
+  min-width: 10rem;
+  max-width: 250px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+const TooltipText = styled.div `
+  color: ${({ theme, isHovered }) => isHovered ? theme.textPrimary : theme.textSecondary};
+  font-size: ${fontSize.smaller};
+  font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
+  text-align: ${({ align }) => align || 'left'};
+  ${({ align }) => align === 'right' && 'flex-shrink: 0;'}
+`;
+const TooltipRow = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: ${spacing.r32};
+  width: 100%;
+`;
+const TooltipLabel = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${spacing.r8};
+  flex: 1;
+  min-width: 0;
+`;
+export const ChartTooltipItem = ({ label, value, isHovered = false, legendIcon, }) => (_jsxs(TooltipRow, { children: [_jsxs(TooltipLabel, { children: [legendIcon, _jsx(TooltipText, { isHovered: isHovered, children: label })] }), _jsx(TooltipText, { isHovered: isHovered, align: "right", children: value })] }));
+export const ChartTooltipHeader = styled.div `
+  color: ${({ theme }) => theme.textPrimary};
+  font-weight: ${fontWeight.bold};
+  text-align: center;
+  margin-bottom: ${spacing.r8};
+`;
+export const ChartTooltipItemsContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${spacing.r8};
+  width: 100%;
+`;

package/dist/components/globalhealthbar/GlobalHealthBar.component.d.ts

@@ -14,6 +14,10 @@ export type GlobalHealthProps = {
     height?: number;
     tooltipPosition?: Position;
 };
+/**
+ * @deprecated Use GlobalHealthBar v2 instead
+ * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
+ */
 declare function GlobalHealthBar({ id, alerts, start, end, height, tooltipPosition, }: GlobalHealthProps): import("react/jsx-runtime").JSX.Element;
 export { GlobalHealthBar };
 //# sourceMappingURL=GlobalHealthBar.component.d.ts.map

package/dist/components/globalhealthbar/GlobalHealthBar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHealthBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QACN,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,MAAM,EACN,KAAK,EACL,GAAG,EACH,MAAU,EACV,eAAqB,GACtB,EAAE,iBAAiB,2CAyKnB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"GlobalHealthBar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBar.component.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,GAAG,QAAQ,CAAC;AACzB,eAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,KAAK,QAAQ,GAAG,OAAO,GAAG,GAAG,OAAO,MAAM,CAAC;AAC3C,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE;QACN,WAAW,EAAE,MAAM,CAAC;QACpB,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;KAClB,EAAE,CAAC;IACJ,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,QAAQ,CAAC;CAC5B,CAAC;AACF;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,EAAE,EACF,MAAM,EACN,KAAK,EACL,GAAG,EACH,MAAU,EACV,eAAqB,GACtB,EAAE,iBAAiB,2CAyKnB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/components/globalhealthbar/GlobalHealthBar.component.js

@@ -6,6 +6,10 @@ import { useTheme } from 'styled-components';
 import { formatValue } from './tooltip/index';
 export const TOP = 'top';
 export const BOTTOM = 'bottom';
+/**
+ * @deprecated Use GlobalHealthBar v2 instead
+ * @example import { GlobalHealthBar } from '@scality/core-ui/dist/next';
+ */
 function GlobalHealthBar({ id, alerts, start, end, height = 8, tooltipPosition = TOP, }) {
     const theme = useTheme();
     const trimAlerts = alerts.map((alert) => {

package/dist/components/globalhealthbar/GlobalHealthBarRecharts.component.d.ts

@@ -0,0 +1,10 @@
+import { Alert } from './useHealthBarData';
+export interface GlobalHealthProps {
+    id: string;
+    alerts: Alert[];
+    start: Date;
+    end: Date;
+}
+export declare function GlobalHealthBar({ id, alerts, start, end }: GlobalHealthProps): import("react/jsx-runtime").JSX.Element;
+export type { Alert };
+//# sourceMappingURL=GlobalHealthBarRecharts.component.d.ts.map

package/dist/components/globalhealthbar/GlobalHealthBarRecharts.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBarRecharts.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,EAAoB,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;CACX;AAMD,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,iBAAiB,2CAyK5E;AAGD,YAAY,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/globalhealthbar/GlobalHealthBarRecharts.component.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Bar, BarChart, ResponsiveContainer, Tooltip, YAxis, } from 'recharts';
+import styled, { useTheme } from 'styled-components';
+import { GlobalHealthBarTooltip } from './components/GlobalHealthBarTooltip';
+import { HealthBarXAxis } from './components/HealthBarXAxis';
+import { CHART_CONFIG, getNavigationAction, getNavigationStateUpdate, } from './healthBarUtils';
+import { useHealthBarData } from './useHealthBarData';
+const ChartInteractiveContainer = styled.div `
+  position: relative;
+`;
+export function GlobalHealthBar({ id, alerts, start, end }) {
+    const [tooltipData, setTooltipData] = useState(null);
+    const [focusedAlertIndex, setFocusedAlertIndex] = useState(-1);
+    const [keyboardActive, setKeyboardActive] = useState(false);
+    const chartContainerRef = useRef(null);
+    const theme = useTheme();
+    const startTimestamp = new Date(start).getTime();
+    const endTimestamp = new Date(end).getTime();
+    const { chartData, alertsMap, alertKeys } = useHealthBarData(alerts, startTimestamp, endTimestamp, id);
+    const handlePointerEnter = useCallback((key) => {
+        setTooltipData(alertsMap[key]);
+    }, [alertsMap]);
+    const handlePointerLeave = useCallback(() => {
+        if (!keyboardActive) {
+            setTooltipData(null);
+        }
+    }, [keyboardActive]);
+    const { warningKeys, criticalKeys, unavailableKeys } = alertKeys;
+    // Get all alert keys in order for keyboard navigation
+    const allAlertKeys = useMemo(() => {
+        return Object.values(alertsMap).sort((a, b) => {
+            return new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime();
+        });
+    }, [alertsMap]);
+    // Handle keyboard navigation
+    const handleKeyDown = useCallback((event) => {
+        const action = getNavigationAction(event.key);
+        if (!action || allAlertKeys.length === 0)
+            return;
+        event.preventDefault();
+        const update = getNavigationStateUpdate(action, focusedAlertIndex, allAlertKeys);
+        setFocusedAlertIndex(update.newIndex);
+        setTooltipData(update.selectedAlert);
+        setKeyboardActive(update.shouldActivateKeyboard);
+    }, [allAlertKeys, focusedAlertIndex]);
+    // Handle focus events
+    const handleFocus = useCallback(() => {
+        if (allAlertKeys.length > 0 && focusedAlertIndex === -1) {
+            setFocusedAlertIndex(0);
+            setTooltipData(allAlertKeys[0]);
+            setKeyboardActive(true);
+        }
+    }, [allAlertKeys, focusedAlertIndex]);
+    const handleBlur = useCallback(() => {
+        setKeyboardActive(false);
+        setFocusedAlertIndex(-1);
+        setTooltipData(null);
+    }, []);
+    // Handle mouse enter to disable keyboard mode
+    const handleMouseEnter = useCallback(() => {
+        setKeyboardActive(false);
+    }, []);
+    const allAlertBars = useMemo(() => {
+        const configs = [
+            { keys: unavailableKeys, fill: theme.textSecondary },
+            { keys: warningKeys, fill: theme.statusWarning },
+            { keys: criticalKeys, fill: theme.statusCritical },
+        ];
+        return configs.flatMap(({ keys, fill }) => keys.map((key) => ({ key, fill })));
+    }, [unavailableKeys, warningKeys, criticalKeys, theme]);
+    return (_jsx(ChartInteractiveContainer, { ref: chartContainerRef, tabIndex: 0, role: "application", "aria-label": `Health bar chart with ${allAlertKeys.length} alerts. Use arrow keys to navigate, Escape to close tooltip.`, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, children: _jsx(ResponsiveContainer, { width: '100%', height: CHART_CONFIG.CHART_HEIGHT, children: _jsxs(BarChart, { data: chartData, layout: "vertical", barSize: CHART_CONFIG.BAR_SIZE, accessibilityLayer: true, margin: CHART_CONFIG.MARGINS, children: [_jsx(HealthBarXAxis, { startTimestamp: startTimestamp, endTimestamp: endTimestamp }), _jsx(Tooltip, { allowEscapeViewBox: { x: true, y: true }, isAnimationActive: false, shared: false, wrapperStyle: {
+                            width: '20rem',
+                            position: 'fixed',
+                        }, content: (props) => {
+                            return (_jsx(GlobalHealthBarTooltip, { tooltipData: tooltipData, tooltipProps: props, chartContainerRef: chartContainerRef, isKeyboardActive: keyboardActive, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
+                        } }), _jsx(YAxis, { yAxisId: 'background', type: "category", hide: true }), allAlertBars.map(({ key }) => (_jsx(YAxis, { yAxisId: key, type: "category", hide: true }, `yAxis${key}`))), _jsx(Bar, { dataKey: "range", fill: theme.statusHealthy, radius: CHART_CONFIG.RADIUS_SIZE, yAxisId: "background", isAnimationActive: false }), allAlertBars.map(({ key, fill }) => (_jsx(Bar, { dataKey: key, yAxisId: key, fill: fill, onPointerEnter: () => handlePointerEnter(key), onPointerLeave: () => handlePointerLeave(), isAnimationActive: false })))] }) }) }));
+}

package/dist/components/globalhealthbar/components/GlobalHealthBarTooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Alert } from '../GlobalHealthBarRecharts.component';
+import { TooltipContentProps } from 'recharts';
+interface GlobalHealthBarTooltipProps {
+    tooltipData: Alert | null;
+    coordinate?: {
+        x: number;
+        y: number;
+    };
+    tooltipProps: TooltipContentProps<number, string>;
+    chartContainerRef: React.RefObject<HTMLDivElement>;
+    isKeyboardActive?: boolean;
+    startTimestamp?: number;
+    endTimestamp?: number;
+}
+export declare const GlobalHealthBarTooltip: (props: GlobalHealthBarTooltipProps) => React.ReactPortal | null;
+export {};
+//# sourceMappingURL=GlobalHealthBarTooltip.d.ts.map

package/dist/components/globalhealthbar/components/GlobalHealthBarTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHealthBarTooltip.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/components/GlobalHealthBarTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,KAAK,EAAE,MAAM,sCAAsC,CAAC;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAI/C,UAAU,2BAA2B;IACnC,WAAW,EAAE,KAAK,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,iBAAiB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAoBD,eAAO,MAAM,sBAAsB,UAAW,2BAA2B,6BA+HxE,CAAC"}

package/dist/components/globalhealthbar/components/GlobalHealthBarTooltip.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { useEffect, useState } from 'react';
+import styled, { css, useTheme } from 'styled-components';
+import { useFloating, autoUpdate, offset, flip, shift, } from '@floating-ui/react';
+import { FormattedDateTime, Stack, Text, Wrap, spacing } from '../../../index';
+import { zIndex } from '../../../style/theme';
+import { CHART_CONFIG, getTooltipPosition } from '../healthBarUtils';
+const TooltipContainer = styled.div `
+  ${(props) => {
+    const theme = useTheme();
+    return css `
+      border: 1px solid ${theme.border};
+      width: 24rem;
+      z-index: ${zIndex.tooltip};
+      color: ${theme.textSecondary};
+      background-color: ${theme.backgroundLevel1};
+      border-radius: 4px;
+      padding: ${spacing.r8};
+      pointer-events: none;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    `;
+}}
+`;
+export const GlobalHealthBarTooltip = (props) => {
+    const { tooltipData, tooltipProps, chartContainerRef, isKeyboardActive = false, startTimestamp = 0, endTimestamp = 0, } = props;
+    const { coordinate } = tooltipProps;
+    const [virtualElement, setVirtualElement] = useState(null);
+    const { refs, floatingStyles } = useFloating({
+        elements: {
+            reference: virtualElement,
+        },
+        middleware: [
+            offset(({ placement }) => {
+                // Use larger offset when tooltip is on top
+                // to avoid tooltip over bar
+                return placement.includes('top') ? 20 : 30;
+            }),
+            flip(),
+            shift({ padding: 10 }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    // Create virtual element from coordinate
+    useEffect(() => {
+        if (chartContainerRef.current) {
+            const chartRect = chartContainerRef.current.getBoundingClientRect();
+            let tooltipX;
+            let tooltipY;
+            if (isKeyboardActive && tooltipData && startTimestamp && endTimestamp) {
+                // Calculate the chart's usable width (excluding margins)
+                const chartUsableWidth = chartRect.width -
+                    CHART_CONFIG.MARGINS.left -
+                    CHART_CONFIG.MARGINS.right;
+                // Use the same positioning logic as alert bars
+                const alertCenterX = getTooltipPosition(tooltipData, startTimestamp, endTimestamp, chartUsableWidth);
+                // Position tooltip at the center of the alert's time span
+                // alertCenterX already includes the margin offset, so just add chartRect.left
+                tooltipX = chartRect.left + alertCenterX;
+                tooltipY = chartRect.top + CHART_CONFIG.BAR_SIZE;
+            }
+            else {
+                // For mouse navigation, use the provided coordinate
+                tooltipX = chartRect.left + (coordinate === null || coordinate === void 0 ? void 0 : coordinate.x);
+                tooltipY = chartRect.top + (coordinate === null || coordinate === void 0 ? void 0 : coordinate.y);
+            }
+            setVirtualElement({
+                getBoundingClientRect() {
+                    return {
+                        width: 0,
+                        height: 0,
+                        x: tooltipX,
+                        y: tooltipY,
+                        left: tooltipX,
+                        top: tooltipY,
+                        right: tooltipX,
+                        bottom: tooltipY,
+                    };
+                },
+            });
+        }
+    }, [
+        coordinate,
+        chartContainerRef,
+        isKeyboardActive,
+        tooltipData,
+        startTimestamp,
+        endTimestamp,
+    ]);
+    if (!tooltipData)
+        return null;
+    const { description, startsAt, endsAt, severity } = tooltipData;
+    const tooltipContent = (_jsx(TooltipContainer, { ref: refs.setFloating, style: floatingStyles, children: _jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Severity" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: severity })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "Start" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(startsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", children: "End" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", children: _jsx(FormattedDateTime, { format: "date-time", value: new Date(endsAt) }) })] }), _jsxs(Wrap, { children: [_jsx(Text, { variant: "Smaller", style: { paddingRight: spacing.r32 }, children: "Description" }), _jsx(Text, { color: "textPrimary", variant: "Smaller", style: { whiteSpace: 'wrap', textAlign: 'justify' }, children: description })] })] }) }));
+    return createPortal(tooltipContent, document.body);
+};

package/dist/components/globalhealthbar/components/HealthBarXAxis.d.ts

@@ -0,0 +1,7 @@
+interface HealthBarXAxisProps {
+    startTimestamp: number;
+    endTimestamp: number;
+}
+export declare const HealthBarXAxis: ({ startTimestamp, endTimestamp, }: HealthBarXAxisProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=HealthBarXAxis.d.ts.map

package/dist/components/globalhealthbar/components/HealthBarXAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HealthBarXAxis.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/globalhealthbar/components/HealthBarXAxis.tsx"],"names":[],"mappings":"AAWA,UAAU,mBAAmB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;CACtB;AAiDD,eAAO,MAAM,cAAc,sCAGxB,mBAAmB,4CA2BrB,CAAC"}

package/dist/components/globalhealthbar/components/HealthBarXAxis.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XAxis } from 'recharts';
+import { useTheme } from 'styled-components';
+import { fontSize } from '../../../style/theme';
+import { getTicks, calculateLabelVisibility, TIME_CONSTANTS, getEdgeMargin, } from '../healthBarUtils';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
+const CustomTick = ({ tickProps, startTimestamp, endTimestamp, }) => {
+    const theme = useTheme();
+    const { y, payload, width, index, visibleTicksCount } = tickProps;
+    const span = endTimestamp - startTimestamp;
+    const is7DaySpan = span === 7 * TIME_CONSTANTS.ONE_DAY;
+    const isDaySpan = span === TIME_CONSTANTS.ONE_DAY;
+    const shouldShowLabel = calculateLabelVisibility(width, visibleTicksCount, span, index, endTimestamp);
+    const edgeMargin = getEdgeMargin(index, visibleTicksCount, isDaySpan);
+    return (
+    // use coordinate to center the text
+    shouldShowLabel && (_jsx("g", { transform: `translate(${payload.coordinate},${y})`, children: _jsx("text", { textAnchor: "middle", dy: 10, dx: edgeMargin, fontSize: fontSize.smaller, fill: theme.textSecondary, children: is7DaySpan || isDaySpan ? (_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date(payload.value) })) : (_jsx(FormattedDateTime, { format: "time", value: new Date(payload.value) })) }) })));
+};
+export const HealthBarXAxis = ({ startTimestamp, endTimestamp, }) => {
+    const theme = useTheme();
+    const ticks = getTicks(startTimestamp, endTimestamp);
+    return (_jsx(XAxis, { allowDataOverflow: true, dataKey: "start", type: "number", domain: [startTimestamp, endTimestamp], tickSize: 5, minTickGap: 10, interval: 0, tick: (props) => {
+            return (_jsx(CustomTick, { tickProps: props, startTimestamp: startTimestamp, endTimestamp: endTimestamp }));
+        }, ticks: ticks, tickLine: { stroke: theme.textSecondary }, axisLine: false }));
+};

package/dist/components/globalhealthbar/healthBarUtils.d.ts

@@ -0,0 +1,77 @@
+export declare const CHART_CONFIG: {
+    readonly RADIUS_SIZE: 4;
+    readonly EDGE_THRESHOLD: 8;
+    readonly CHART_HEIGHT: 50;
+    readonly BAR_SIZE: 8;
+    readonly TICK_SIZE: 4;
+    readonly TOOLTIP_OFFSET: 24;
+    readonly FONT_SIZE: string;
+    readonly TEXT_DY_OFFSET: 12;
+    readonly TICK_INTERVAL: 0;
+    readonly MARGINS: {
+        readonly left: 28;
+        readonly right: 28;
+        readonly bottom: 4;
+        readonly top: 4;
+    };
+};
+export declare const TIME_CONSTANTS: {
+    readonly ONE_HOUR: number;
+    readonly ONE_DAY: number;
+    readonly ONE_WEEK: number;
+    readonly MARGIN_HOURS: 6;
+    readonly FIFTEEN_MINUTES: number;
+    readonly SIX_HOURS: number;
+};
+export declare const LABEL_CONFIG: {
+    readonly MIN_SPACE_PER_TICK: 80;
+    readonly MODULO_CONFIG: {
+        readonly [x: number]: 2 | 3;
+    };
+};
+export declare const calculateSevenDayTicks: (endTimestamp: number) => number[];
+export declare const calculateDayTicks: (endTimestamp: number) => number[];
+export declare const calculateHourTicks: (endTimestamp: number) => number[];
+export declare const getEdgeMargin: (index: number, totalTicks: number, isDaySpan: boolean) => number;
+export declare const getTicks: (startTimestamp: number, endTimestamp: number) => number[];
+export interface LabelVisibilityConfig {
+    hasEnoughSpace: boolean;
+    timeSpan: number;
+    tickIndex: number;
+    totalTicks: number;
+}
+export declare const calculateLabelVisibility: (chartWidth: number, totalTicks: number, span: number, index: number, endTimestamp: number) => boolean;
+/**
+ * Core calculation for alert positioning within a time range
+ */
+export declare const calculateAlertPosition: (alertStartTimestamp: number, alertEndTimestamp: number, chartStartTimestamp: number, chartEndTimestamp: number, availableWidth: number, baseX?: number) => {
+    startX: number;
+    width: number;
+    relativeSize: number;
+};
+export type NavigationAction = 'previous' | 'next' | 'first' | 'last' | 'escape';
+export interface NavigationState {
+    newIndex: number;
+    selectedAlert: any | null;
+    shouldActivateKeyboard: boolean;
+}
+/**
+ * Maps keyboard events to navigation actions
+ */
+export declare const getNavigationAction: (key: string) => NavigationAction | null;
+/**
+ * Calculates new index based on navigation action
+ */
+export declare const calculateNavigationIndex: (action: NavigationAction, currentIndex: number, arrayLength: number) => number;
+/**
+ * Gets complete navigation state update for a given action
+ */
+export declare const getNavigationStateUpdate: <T>(action: NavigationAction, currentIndex: number, alerts: T[]) => NavigationState;
+/**
+ * Calculates tooltip position for an alert based on its time range
+ */
+export declare const getTooltipPosition: (alert: {
+    startsAt: string;
+    endsAt: string;
+}, startTimestamp: number, endTimestamp: number, chartUsableWidth: number) => number;
+//# sourceMappingURL=healthBarUtils.d.ts.map

package/dist/components/globalhealthbar/healthBarUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"healthBarUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/healthBarUtils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;CAOf,CAAC;AA4BX,eAAO,MAAM,sBAAsB,iBAAkB,MAAM,KAAG,MAAM,EAInE,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,KAAG,MAAM,EAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,MAAM,KAAG,MAAM,EAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,MAAM,cACD,MAAM,aACP,OAAO,KACjB,MAKF,CAAC;AAEF,eAAO,MAAM,QAAQ,mBACH,MAAM,gBACR,MAAM,KACnB,MAAM,EAYR,CAAC;AAMF,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,eACvB,MAAM,cACN,MAAM,QACZ,MAAM,SACL,MAAM,gBACC,MAAM,KACnB,OA+BF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,sBAAsB,wBACZ,MAAM,qBACR,MAAM,uBACJ,MAAM,qBACR,MAAM,kBACT,MAAM,UACf,MAAM;;;;CAkBd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,GAAG,GAAG,IAAI,CAAC;IAC1B,sBAAsB,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,gBAAgB,GAAG,IAiBpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,WAC3B,gBAAgB,gBACV,MAAM,eACP,MAAM,KAClB,MAiBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,CAAC,UAChC,gBAAgB,gBACV,MAAM,UACZ,CAAC,EAAE,KACV,eAYF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,kBAC3B,MAAM,gBACR,MAAM,oBACF,MAAM,WAgBzB,CAAC"}