@luscii-healthtech/web-ui 46.3.1 → 46.3.3

package/dist/index.development.js

@@ -6318,20 +6318,29 @@ const calculateSegments = (args) => {
     const lower = Math.min(clampedFrom, clampedTo);
     const startPos = isDescending ? (start - higher) / totalRange * 100 : (lower - start) / totalRange * 100;
     const width = (higher - lower) / totalRange * 100;
+    const visualFrom = isDescending ? higher : lower;
+    const visualTo = isDescending ? lower : higher;
     return {
       startPos,
       width,
       color: section.color,
-      originalSection: section
+      originalSection: section,
+      visualFrom,
+      visualTo
     };
   }).filter((s) => s.width > 0).sort((a, b) => a.startPos - b.startPos);
   let currentPos = 0;
+  let currentValue = start;
   for (const section of normalizedSections) {
     if (section.startPos > currentPos) {
       segments.push({
         widthPercent: section.startPos - currentPos,
         color: "transparent",
-        originalSection: section.originalSection
+        originalSection: {
+          from: currentValue,
+          to: section.visualFrom,
+          color: "transparent"
+        }
       });
     }
     segments.push({
@@ -6340,13 +6349,14 @@ const calculateSegments = (args) => {
       originalSection: section.originalSection
     });
     currentPos = section.startPos + section.width;
+    currentValue = section.visualTo;
   }
   if (currentPos < 100) {
     segments.push({
       widthPercent: 100 - currentPos,
       color: "transparent",
       originalSection: {
-        from: end,
+        from: currentValue,
         to: end,
         color: "transparent"
       }
@@ -6414,6 +6424,7 @@ const ticksContainerStyle = {
 };
 const RangeCoverageComponent = (_a) => {
   var { sections, start, end, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "ticks", "tickFormatter", "title", "legendSwatches", "onSectionFocus", "translations", "className", "slots"]);
+  const { tooltipContent } = slots !== null && slots !== void 0 ? slots : {};
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
@@ -6426,9 +6437,9 @@ const RangeCoverageComponent = (_a) => {
     }) : swatch.color;
     return jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { style: Object.assign(Object.assign({}, legendSwatchStyle), { background }) }), jsxRuntime.jsx(Text, { as: "span", children: swatch.label })] }, swatch.label);
   }) }) })] }), jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
-    var _a2;
+    var _a2, _b;
     const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
-    const renderedTooltipContent = (_a2 = slots === null || slots === void 0 ? void 0 : slots.renderTooltipContent) === null || _a2 === void 0 ? void 0 : _a2.call(slots, sectionDataWithBackground);
+    const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
     const segmentStyle = Object.assign({ flexBasis: `calc(${segment.widthPercent}% - 1px)`, flexGrow: 0, flexShrink: 0, marginRight: "1px" }, getSegmentStyle(segment.color));
     const ariaLabel = `${segment.originalSection.from} - ${segment.originalSection.to}`;
     if (!renderedTooltipContent && !onSectionFocus) {
@@ -6447,7 +6458,7 @@ const RangeCoverageComponent = (_a) => {
     }
     return (
       // Sections cannot overlap, so from-to should be unique
-      jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, style: segmentStyle, onFocus: () => {
+      jsxRuntime.jsxs(Tooltip.Root, { delayDuration: (_b = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.delayDuration) !== null && _b !== void 0 ? _b : 100, children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, children: jsxRuntime.jsx("button", { "aria-label": ariaLabel, style: segmentStyle, onFocus: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onBlur: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
@@ -6455,7 +6466,10 @@ const RangeCoverageComponent = (_a) => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
       }, onMouseLeave: () => {
         onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
-      } }) }), jsxRuntime.jsx(Tooltip.Content, { backgroundColor: "transparent", side: "bottom", sideOffset: 16, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", children: renderedTooltipContent }) })] }, ariaLabel)
+      } }) }), jsxRuntime.jsx(Tooltip.Content, { container: tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.container, backgroundColor: "transparent", side: "bottom", sideOffset: 16, style: {
+        minWidth: 200,
+        maxWidth: 600
+      }, children: jsxRuntime.jsx(Card, { border: true, elevation: "medium", width: "full", children: renderedTooltipContent }) })] }, ariaLabel)
     );
   }) }) }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
     const totalRange = Math.abs(end - start);