@luscii-healthtech/web-ui 42.13.0 → 42.13.2

package/dist/index.development.js

@@ -5988,7 +5988,8 @@ const Collapse = (props) => {
 function isColorTuple(color) {
   return Array.isArray(color) && color.length === 2;
 }
-const validateNoOverlaps = (sections) => {
+const hasSectionOverlaps = (sections) => {
+  let overlapFound = false;
   sections.forEach((sectionA, i) => {
     sections.slice(i + 1).forEach((sectionB) => {
       const aMin = Math.min(sectionA.from, sectionA.to);
@@ -5997,10 +5998,11 @@ const validateNoOverlaps = (sections) => {
       const bMax = Math.max(sectionB.from, sectionB.to);
       const overlaps = aMin < bMax && bMin < aMax;
       if (overlaps) {
-        throw new Error(`RangeCoverage: Sections cannot overlap. Section [${sectionA.from}, ${sectionA.to}] overlaps with section [${sectionB.from}, ${sectionB.to}].`);
+        overlapFound = true;
       }
     });
   });
+  return overlapFound;
 };
 const generateIntermediateTicks = (args) => {
   const { step, start, end } = args;
@@ -6021,13 +6023,49 @@ 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 isDescending = start > end;
   const rangeMin = Math.min(start, end);
   const rangeMax = Math.max(start, end);
   const totalRange = Math.abs(end - start);
   const segments = [];
-  const normalizedSections = sections.map((section) => {
+  const mergedSections = mergeAdjacentSections(sections);
+  const normalizedSections = mergedSections.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);
@@ -6062,14 +6100,19 @@ const calculateSegments = (sections, start, end) => {
   }
   return segments;
 };
-const createStripedPattern = (colorA, colorB) => `repeating-linear-gradient(-45deg, ${colorA}, ${colorA} 4px, ${colorB} 4px, ${colorB} 8px)`;
+const createStripedPattern = (options) => {
+  const { colorA, colorB, startOffset = 0 } = options;
+  const STRIPE_THICKNESS = 4;
+  const STRIPE_GAP = STRIPE_THICKNESS + 3;
+  return `repeating-linear-gradient(-45deg, ${colorA} ${startOffset}px, ${colorA} ${startOffset + STRIPE_THICKNESS}px, ${colorB} ${startOffset + STRIPE_THICKNESS}px, ${colorB} ${startOffset + STRIPE_GAP + STRIPE_THICKNESS}px)`;
+};
 const getSegmentStyle = (color) => {
   const baseStyle = {
     height: "18px",
     boxSizing: "content-box"
   };
   if (isColorTuple(color)) {
-    return Object.assign(Object.assign({}, baseStyle), { background: createStripedPattern(color[0], color[1]) });
+    return Object.assign(Object.assign({}, baseStyle), { background: createStripedPattern({ colorA: color[0], colorB: color[1] }) });
   }
   return Object.assign(Object.assign({}, baseStyle), { background: color });
 };
@@ -6079,12 +6122,12 @@ const legendSwatchStyle = {
   borderRadius: "2px",
   flexShrink: 0
 };
-const COLOR_RED = "var(--ui-color-red-800)";
-const COLOR_AMBER = "var(--ui-color-amber-700)";
-const COLOR_GREY_DARK = "var(--ui-color-slate-700)";
-const COLOR_GREY_LIGHT = "var(--ui-color-slate-300)";
-const COLOR_BLUE = "var(--ui-color-blue-200)";
-const BORDER_COLOR = COLOR_GREY_LIGHT;
+const COLOR_GREY_LIGHT = "var(--ui-color-background-info-secondary-hovered)";
+const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";
+const COLOR_RED = "var(--ui-color-border-error-primary-default)";
+const COLOR_AMBER = "var(--ui-color-icon-warning-secondary-default)";
+const COLOR_BLUE = COLOR_GREY_LIGHT;
+const BORDER_COLOR = "var(--ui-color-border-neutral-secondary-default)";
 const BORDER_RADIUS = "var(--ui-radius-sm, 4px)";
 const barContainerStyle = {
   width: "100%",
@@ -6106,11 +6149,17 @@ const ticksContainerStyle = {
   width: "100%",
   height: "20px"
 };
-const RangeCoverageComponent = ({ sections, start, end, ticks = [], title, legendSwatches, className }) => {
-  validateNoOverlaps(sections);
+const RangeCoverageComponent = ({ sections, start, end, ticks = [], title, legendSwatches, translations, className }) => {
+  if (hasSectionOverlaps(sections)) {
+    return jsxRuntime.jsx(Text, { variant: "strong", children: translations.sectionOverlapsMessage });
+  }
   const segments = calculateSegments(sections, start, end);
   return jsxRuntime.jsx(Box, { className, 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(swatch.color[0], swatch.color[1]) : swatch.color;
+    const background = isColorTuple(swatch.color) ? createStripedPattern({
+      colorA: swatch.color[0],
+      colorB: swatch.color[1],
+      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) => {
     const totalRange = Math.abs(end - start);
@@ -6120,7 +6169,7 @@ const RangeCoverageComponent = ({ sections, start, end, ticks = [], title, legen
     const isLast = index === ticks.length - 1;
     return jsxRuntime.jsx(Text, { style: {
       position: "absolute",
-      color: COLOR_GREY_DARK,
+      color: "var(--ui-color-text-neutral-secondary-default)",
       whiteSpace: "nowrap",
       left: `${position}%`,
       transform: isFirst ? "translateX(0%)" : isLast ? "translateX(-100%)" : "translateX(-50%)"