@luscii-healthtech/web-ui 57.0.0 → 57.0.2

package/dist/index.development.js

@@ -6592,6 +6592,23 @@ const calculateSegments = (args) => {
   }
   return segments;
 };
+const calculateHighlightPosition = (args) => {
+  const { highlightedRange, 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 clampedFrom = Math.max(rangeMin, Math.min(rangeMax, highlightedRange.from));
+  const clampedTo = Math.max(rangeMin, Math.min(rangeMax, highlightedRange.to));
+  const higher = Math.max(clampedFrom, clampedTo);
+  const lower = Math.min(clampedFrom, clampedTo);
+  const widthFraction = (higher - lower) / totalRange;
+  if (widthFraction <= 0) {
+    return null;
+  }
+  const leftFraction = isDescending ? (start - higher) / totalRange : (lower - start) / totalRange;
+  return { leftFraction, widthFraction };
+};
 const createStripedPattern = (options) => {
   const { colorA, colorB, startOffset = 0 } = options;
   const STRIPE_THICKNESS = 4;
@@ -6645,26 +6662,42 @@ const barStyle = {
   // 3px looks better than 4px
   boxSizing: "border-box"
 };
+const HIGHLIGHT_RING_COLOR = "var(--ui-color-border-brand-primary-selected)";
+const HIGHLIGHT_RING_WIDTH = 2;
+const HIGHLIGHT_RING_INSET = 4;
+const BAR_HORIZONTAL_PADDING = 3;
+const getHighlightStyle = (position) => ({
+  position: "absolute",
+  top: -HIGHLIGHT_RING_INSET,
+  bottom: -HIGHLIGHT_RING_INSET,
+  left: `calc(${BAR_HORIZONTAL_PADDING}px + (100% - ${BAR_HORIZONTAL_PADDING * 2}px) * ${position.leftFraction})`,
+  width: `calc((100% - ${BAR_HORIZONTAL_PADDING * 2}px) * ${position.widthFraction})`,
+  border: `${HIGHLIGHT_RING_WIDTH}px solid ${HIGHLIGHT_RING_COLOR}`,
+  borderRadius: `calc(${BORDER_RADIUS} + ${HIGHLIGHT_RING_INSET}px)`,
+  boxSizing: "border-box",
+  pointerEvents: "none"
+});
 const ticksContainerStyle = {
   position: "relative",
   width: "100%",
   height: "20px"
 };
 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"]);
+  var { sections, start, end, highlightedRange, ticks = [], tickFormatter, title, legendSwatches, onSectionFocus, translations, className, slots } = _a, rest = __rest(_a, ["sections", "start", "end", "highlightedRange", "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 });
   }
   const segments = calculateSegments({ sections, start, end });
-  return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", 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: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
+  const highlightPosition = highlightedRange ? calculateHighlightPosition({ highlightedRange, start, end }) : null;
+  return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", "aria-hidden": title ? void 0 : true, children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
     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: "m", width: "full", align: "stretch", children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
+  }) }) })] }), jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [jsxRuntime.jsx("div", { style: barContainerStyle, children: jsxRuntime.jsx("div", { style: barStyle, children: segments.map((segment) => {
     var _a2, _b;
     const sectionDataWithBackground = Object.assign(Object.assign({}, segment.originalSection), { background: getSegmentStyle(segment.color).background });
     const renderedTooltipContent = (_a2 = tooltipContent === null || tooltipContent === void 0 ? void 0 : tooltipContent.render) === null || _a2 === void 0 ? void 0 : _a2.call(tooltipContent, sectionDataWithBackground);
@@ -6699,7 +6732,7 @@ const RangeCoverageComponent = (_a) => {
         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) => {
+  }) }) }), highlightPosition && jsxRuntime.jsx("div", { "aria-hidden": "true", style: getHighlightStyle(highlightPosition) })] }), 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;