@luscii-healthtech/web-ui 46.2.3 → 46.2.4

package/dist/index.development.js

@@ -1798,8 +1798,24 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
 });
 
 const Content$2 = (_a) => {
-  var { container, children, className } = _a, contentProps = __rest(_a, ["container", "children", "className"]);
-  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui:fill-secondary-background" })] })) });
+  var { container, children, className, backgroundColor } = _a, contentProps = __rest(_a, ["container", "children", "className", "backgroundColor"]);
+  const getBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return void 0;
+      default:
+        return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "secondary-background";
+    }
+  };
+  const getArrowBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return "ui:fill-transparent";
+      default:
+        return "ui:fill-secondary-background";
+    }
+  };
+  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(), px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
 };
 Content$2.displayName = "Tooltip.Content";
 const Root$1 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
@@ -6288,49 +6304,14 @@ const generateIntermediateTicks = (args) => {
   }
   return Array.from(tickSet).sort((a, b) => isDescending ? b - a : a - b);
 };
-const colorsAreEqual = (colorA, colorB) => {
-  const aIsStriped = isColorTuple(colorA);
-  const bIsStriped = isColorTuple(colorB);
-  if (aIsStriped !== bIsStriped) {
-    return false;
-  }
-  if (aIsStriped && bIsStriped) {
-    return colorA[0] === colorB[0] && colorA[1] === colorB[1];
-  }
-  return colorA === colorB;
-};
-const mergeAdjacentSections = (sections) => {
-  if (sections.length === 0) {
-    return [];
-  }
-  const sorted = [...sections].sort((a, b) => {
-    const aStart = Math.min(a.from, a.to);
-    const bStart = Math.min(b.from, b.to);
-    return aStart - bStart;
-  });
-  const merged = [Object.assign({}, sorted[0])];
-  for (let i = 1; i < sorted.length; i++) {
-    const current = sorted[i];
-    const previous = merged[merged.length - 1];
-    const prevEnd = Math.max(previous.from, previous.to);
-    const currentStart = Math.min(current.from, current.to);
-    const currentEnd = Math.max(current.from, current.to);
-    if (prevEnd === currentStart && colorsAreEqual(previous.color, current.color)) {
-      previous.to = currentEnd;
-    } else {
-      merged.push(Object.assign({}, current));
-    }
-  }
-  return merged;
-};
-const calculateSegments = (sections, start, end) => {
+const calculateSegments = (args) => {
+  const { sections, start, end } = args;
   const isDescending = start > end;
   const rangeMin = Math.min(start, end);
   const rangeMax = Math.max(start, end);
   const totalRange = Math.abs(end - start);
   const segments = [];
-  const mergedSections = mergeAdjacentSections(sections);
-  const normalizedSections = mergedSections.map((section) => {
+  const normalizedSections = sections.map((section) => {
     const clampedFrom = Math.max(rangeMin, Math.min(rangeMax, section.from));
     const clampedTo = Math.max(rangeMin, Math.min(rangeMax, section.to));
     const higher = Math.max(clampedFrom, clampedTo);
@@ -6340,7 +6321,8 @@ const calculateSegments = (sections, start, end) => {
     return {
       startPos,
       width,
-      color: section.color
+      color: section.color,
+      originalSection: section
     };
   }).filter((s) => s.width > 0).sort((a, b) => a.startPos - b.startPos);
   let currentPos = 0;
@@ -6348,19 +6330,26 @@ const calculateSegments = (sections, start, end) => {
     if (section.startPos > currentPos) {
       segments.push({
         widthPercent: section.startPos - currentPos,
-        color: "transparent"
+        color: "transparent",
+        originalSection: section.originalSection
       });
     }
     segments.push({
       widthPercent: section.width,
-      color: section.color
+      color: section.color,
+      originalSection: section.originalSection
     });
     currentPos = section.startPos + section.width;
   }
   if (currentPos < 100) {
     segments.push({
       widthPercent: 100 - currentPos,
-      color: "transparent"
+      color: "transparent",
+      originalSection: {
+        from: end,
+        to: end,
+        color: "transparent"
+      }
     });
   }
   return segments;
@@ -6424,11 +6413,11 @@ const ticksContainerStyle = {
   height: "20px"
 };
 const RangeCoverageComponent = (_a) => {
-  var { sections, start, end, ticks = [], tickFormatter, title, legendSwatches, translations, className } = _a, rest = __rest(_a, ["sections", "start", "end", "ticks", "tickFormatter", "title", "legendSwatches", "translations", "className"]);
+  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"]);
   if (hasSectionOverlaps(sections)) {
     return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
   }
-  const segments = calculateSegments(sections, start, end);
+  const segments = calculateSegments({ sections, start, end });
   return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { gap: "xs", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", gap: "m", children: jsxRuntime.jsx(Stack, { axis: "x", gap: "xxs", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
     const background = isColorTuple(swatch.color) ? createStripedPattern({
       colorA: swatch.color[0],
@@ -6436,7 +6425,39 @@ const RangeCoverageComponent = (_a) => {
       startOffset: -6
     }) : 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, index) => jsxRuntime.jsx("div", { style: Object.assign({ flexBasis: `${segment.widthPercent}%`, flexGrow: 0, flexShrink: 0 }, getSegmentStyle(segment.color)) }, index)) }) }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
+  }) }) })] }), 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;
+    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 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) {
+      return jsxRuntime.jsx("div", { style: segmentStyle, "aria-label": ariaLabel }, ariaLabel);
+    }
+    if (!renderedTooltipContent) {
+      return jsxRuntime.jsx("button", { style: segmentStyle, "aria-label": ariaLabel, onFocus: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onBlur: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      }, onMouseEnter: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onMouseLeave: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      } }, ariaLabel);
+    }
+    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: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(sectionDataWithBackground);
+      }, onBlur: () => {
+        onSectionFocus === null || onSectionFocus === void 0 ? void 0 : onSectionFocus(null);
+      }, onMouseEnter: () => {
+        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)
+    );
+  }) }) }), ticks.length > 0 && jsxRuntime.jsx("div", { style: ticksContainerStyle, children: ticks.map((tick, index) => {
     const totalRange = Math.abs(end - start);
     const isDescending = start > end;
     const position = isDescending ? (start - tick) / totalRange * 100 : (tick - start) / totalRange * 100;