@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/components/Textfield/TruncatedTextArea.js

@@ -1,72 +1,86 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Link, Typography, useTheme } from "@mui/material";
-import "./styles.scss";
-const TruncatedTextArea = ({ truncateConfig, children })=>{
-    const { maxHeight, showLessText, showMoreText, showTextStyle, alignment = 'left', collapseOnBlur = false } = truncateConfig;
-    const theme = useTheme();
-    const [showAll, setShowAll] = useState(false);
-    const [needsTruncating, setNeedsTruncating] = useState(false);
-    const contentRef = useRef(null);
-    useEffect(()=>{
-        const node = contentRef.current;
-        if (!node) return;
-        const measure = ()=>{
-            const truncating = node.offsetHeight > maxHeight;
-            setNeedsTruncating(truncating);
-            if (!truncating) setShowAll(false);
-        };
-        measure();
-        const observer = new ResizeObserver(measure);
-        observer.observe(node);
-        return ()=>observer.disconnect();
-    }, [
-        maxHeight
-    ]);
-    const toggleShowAll = ()=>setShowAll((prev)=>!prev);
-    const containerStyle = {
-        margin: 0,
-        padding: 0,
-        overflow: 'hidden',
-        width: '100%'
+import { useState, useRef, useEffect } from 'react';
+import { useTheme, Link, Typography } from '@mui/material';
+import './styles.scss';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const TruncatedTextArea = ({
+  truncateConfig,
+  children
+}) => {
+  const {
+    maxHeight,
+    showLessText,
+    showMoreText,
+    showTextStyle,
+    alignment = 'left',
+    collapseOnBlur = false
+  } = truncateConfig;
+  const theme = useTheme();
+  const [showAll, setShowAll] = useState(false);
+  const [needsTruncating, setNeedsTruncating] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    const node = contentRef.current;
+    if (!node) {
+      return;
+    }
+    const measure = () => {
+      // offsetHeight is an untransformed layout value, so it is in the same units as maxHeight
+      const truncating = node.offsetHeight > maxHeight;
+      setNeedsTruncating(truncating);
+      if (!truncating) {
+        // Otherwise content that grows long again later would start out expanded
+        setShowAll(false);
+      }
     };
-    if (needsTruncating && !showAll) containerStyle.maxHeight = `${maxHeight}px`;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                style: containerStyle,
-                children: /*#__PURE__*/ jsx("div", {
-                    ref: contentRef,
-                    style: {
-                        display: 'flow-root'
-                    },
-                    children: children
-                })
-            }),
-            needsTruncating && /*#__PURE__*/ jsx("div", {
-                style: {
-                    width: '100%',
-                    textAlign: alignment
-                },
-                children: /*#__PURE__*/ jsx(Link, {
-                    component: "button",
-                    onClick: toggleShowAll,
-                    onBlur: collapseOnBlur ? ()=>setShowAll(false) : void 0,
-                    sx: {
-                        color: theme.palette.TwClrTxtBrand,
-                        textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
-                    },
-                    children: /*#__PURE__*/ jsx(Typography, {
-                        sx: {
-                            ...showTextStyle,
-                            marginTop: '-3px'
-                        },
-                        children: showAll ? showLessText : showMoreText
-                    })
-                })
-            })
-        ]
-    });
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [maxHeight]);
+  const toggleShowAll = () => setShowAll(prev => !prev);
+  const containerStyle = {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden',
+    width: '100%'
+  };
+  if (needsTruncating && !showAll) {
+    containerStyle.maxHeight = `${maxHeight}px`;
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      style: containerStyle,
+      children: /*#__PURE__*/jsx("div", {
+        ref: contentRef,
+        style: {
+          display: 'flow-root'
+        },
+        children: children
+      })
+    }), needsTruncating && /*#__PURE__*/jsx("div", {
+      style: {
+        width: '100%',
+        textAlign: alignment
+      },
+      children: /*#__PURE__*/jsx(Link, {
+        component: "button",
+        onClick: toggleShowAll,
+        onBlur: collapseOnBlur ? () => setShowAll(false) : undefined,
+        sx: {
+          color: theme.palette.TwClrTxtBrand,
+          textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
+        },
+        children: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            ...showTextStyle,
+            marginTop: '-3px'
+          },
+          children: showAll ? showLessText : showMoreText
+        })
+      })
+    })]
+  });
 };
-const Textfield_TruncatedTextArea = TruncatedTextArea;
-export default Textfield_TruncatedTextArea;
+
+export { TruncatedTextArea as default };

package/components/TimelineSlider/TimelineMarker.js

@@ -1,26 +1,31 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
-const TimelineMarker = ({ color, labelBottom, labelTop, onClick, size, value })=>{
-    const clampedValue = Math.min(1, Math.max(0, value));
-    return /*#__PURE__*/ jsxs("div", {
-        className: `timeline-marker timeline-marker--${size} ${onClick ? 'timeline-marker--clickable' : ''}`,
-        style: {
-            left: `${100 * clampedValue}%`,
-            backgroundColor: color
-        },
-        onClick: onClick,
-        children: [
-            labelTop && /*#__PURE__*/ jsx("div", {
-                className: "timeline-marker__label timeline-marker__label--top",
-                children: labelTop
-            }),
-            labelBottom && /*#__PURE__*/ jsx("div", {
-                className: "timeline-marker__label timeline-marker__label--bottom",
-                children: labelBottom
-            })
-        ]
-    });
+import 'react';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TimelineMarker = ({
+  color,
+  labelBottom,
+  labelTop,
+  onClick,
+  size,
+  value
+}) => {
+  const clampedValue = Math.min(1, Math.max(0, value));
+  return /*#__PURE__*/jsxs("div", {
+    className: `timeline-marker timeline-marker--${size} ${onClick ? 'timeline-marker--clickable' : ''}`,
+    style: {
+      left: `${clampedValue * 100}%`,
+      backgroundColor: color
+    },
+    onClick: onClick,
+    children: [labelTop && /*#__PURE__*/jsx("div", {
+      className: "timeline-marker__label timeline-marker__label--top",
+      children: labelTop
+    }), labelBottom && /*#__PURE__*/jsx("div", {
+      className: "timeline-marker__label timeline-marker__label--bottom",
+      children: labelBottom
+    })]
+  });
 };
-const TimelineSlider_TimelineMarker = TimelineMarker;
-export default TimelineSlider_TimelineMarker;
+
+export { TimelineMarker as default };

package/components/TimelineSlider/TimelineRail.js

@@ -1,8 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
-const TimelineRail = ()=>/*#__PURE__*/ jsx("div", {
-        className: "timeline-rail"
-    });
-const TimelineSlider_TimelineRail = TimelineRail;
-export default TimelineSlider_TimelineRail;
+import 'react';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineRail = () => {
+  return /*#__PURE__*/jsx("div", {
+    className: "timeline-rail"
+  });
+};
+
+export { TimelineRail as default };

package/components/TimelineSlider/index.js

@@ -1,65 +1,67 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useTheme } from "@mui/material";
-import TimelineMarker from "./TimelineMarker.js";
-import TimelineRail from "./TimelineRail.js";
-import "./styles.scss";
-const TimelineSlider = ({ labelEnd, labelSelected, labelStart, marks })=>{
-    const theme = useTheme();
-    const { minValue, maxValue } = useMemo(()=>{
-        const values = marks.map((mark)=>mark.value);
-        if (values.length > 0) return {
-            minValue: Math.min(...values),
-            maxValue: Math.max(...values)
-        };
-        else return {
-            minValue: 0,
-            maxValue: 1
-        };
-    }, [
-        marks
-    ]);
-    const range = maxValue - minValue;
-    return /*#__PURE__*/ jsxs("div", {
-        className: 'timeline',
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                className: 'timeline-label',
-                style: {
-                    marginRight: theme.spacing(2)
-                },
-                children: labelStart
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "timeline-container",
-                children: [
-                    /*#__PURE__*/ jsx(TimelineRail, {}),
-                    marks.map((mark, idx)=>{
-                        const normalizedValue = 0 === range ? 1 : (mark.value - minValue) / range;
-                        return /*#__PURE__*/ jsx(TimelineMarker, {
-                            color: mark.color,
-                            labelBottom: mark.labelBottom,
-                            labelTop: mark.labelTop,
-                            onClick: mark.onClick,
-                            size: mark.size,
-                            value: normalizedValue
-                        }, idx);
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: 'timeline-label',
-                style: {
-                    marginLeft: theme.spacing(2)
-                },
-                children: labelEnd
-            }),
-            labelSelected && /*#__PURE__*/ jsx("div", {
-                className: 'timeline-selected-label',
-                children: labelSelected
-            })
-        ]
-    });
+import { useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import TimelineMarker from './TimelineMarker.js';
+import TimelineRail from './TimelineRail.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const TimelineSlider = ({
+  labelEnd,
+  labelSelected,
+  labelStart,
+  marks
+}) => {
+  const theme = useTheme();
+  const {
+    minValue,
+    maxValue
+  } = useMemo(() => {
+    const values = marks.map(mark => mark.value);
+    if (values.length > 0) {
+      return {
+        minValue: Math.min(...values),
+        maxValue: Math.max(...values)
+      };
+    } else {
+      return {
+        minValue: 0,
+        maxValue: 1
+      };
+    }
+  }, [marks]);
+  const range = maxValue - minValue;
+  return /*#__PURE__*/jsxs("div", {
+    className: 'timeline',
+    children: [/*#__PURE__*/jsx("div", {
+      className: 'timeline-label',
+      style: {
+        marginRight: theme.spacing(2)
+      },
+      children: labelStart
+    }), /*#__PURE__*/jsxs("div", {
+      className: "timeline-container",
+      children: [/*#__PURE__*/jsx(TimelineRail, {}), marks.map((mark, idx) => {
+        const normalizedValue = range === 0 ? 1 : (mark.value - minValue) / range;
+        return /*#__PURE__*/jsx(TimelineMarker, {
+          color: mark.color,
+          labelBottom: mark.labelBottom,
+          labelTop: mark.labelTop,
+          onClick: mark.onClick,
+          size: mark.size,
+          value: normalizedValue
+        }, idx);
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: 'timeline-label',
+      style: {
+        marginLeft: theme.spacing(2)
+      },
+      children: labelEnd
+    }), labelSelected && /*#__PURE__*/jsx("div", {
+      className: 'timeline-selected-label',
+      children: labelSelected
+    })]
+  });
 };
-const components_TimelineSlider = TimelineSlider;
-export default components_TimelineSlider;
+
+export { TimelineSlider as default };

package/components/TimelineSliderV2/ClusterBadge.js

@@ -1,25 +1,29 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import Icon from "../Icon/Icon.js";
-import "./styles.scss";
-const ClusterBadge = ({ count, leftPx, onClose })=>/*#__PURE__*/ jsxs("div", {
-        className: "timeline-v2-cluster-badge",
-        style: {
-            left: `${leftPx}px`
-        },
-        children: [
-            count,
-            /*#__PURE__*/ jsx("button", {
-                "aria-label": "Close cluster",
-                className: "timeline-v2-cluster-badge__close",
-                onClick: onClose,
-                type: "button",
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "close",
-                    size: "small"
-                })
-            })
-        ]
-    });
-const TimelineSliderV2_ClusterBadge = ClusterBadge;
-export default TimelineSliderV2_ClusterBadge;
+import 'react';
+import Icon from '../Icon/Icon.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const ClusterBadge = ({
+  count,
+  leftPx,
+  onClose
+}) => {
+  return /*#__PURE__*/jsxs("div", {
+    className: "timeline-v2-cluster-badge",
+    style: {
+      left: `${leftPx}px`
+    },
+    children: [count, /*#__PURE__*/jsx("button", {
+      "aria-label": "Close cluster",
+      className: "timeline-v2-cluster-badge__close",
+      onClick: onClose,
+      type: "button",
+      children: /*#__PURE__*/jsx(Icon, {
+        name: "close",
+        size: "small"
+      })
+    })]
+  });
+};
+
+export { ClusterBadge as default };

package/components/TimelineSliderV2/TimelineDot.js

@@ -1,32 +1,36 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { toConicGradient } from "./layout.js";
-import "./styles.scss";
-const TimelineDot = ({ ariaLabel, colorWeights, dimmed, leftPx, markCount, onClick, selected, sizePx })=>{
-    const background = useMemo(()=>toConicGradient(colorWeights), [
-        colorWeights
-    ]);
-    const className = [
-        'timeline-v2-dot',
-        dimmed ? 'timeline-v2-dot--dimmed' : '',
-        selected ? 'timeline-v2-dot--selected' : ''
-    ].filter((entry)=>'' !== entry).join(' ');
-    return /*#__PURE__*/ jsx("button", {
-        "aria-label": ariaLabel,
-        className: className,
-        style: {
-            background,
-            height: `${sizePx}px`,
-            left: `${leftPx}px`,
-            width: `${sizePx}px`
-        },
-        onClick: onClick,
-        type: "button",
-        children: markCount > 1 && /*#__PURE__*/ jsx("span", {
-            className: "timeline-v2-dot__count",
-            children: markCount
-        })
-    });
+import { useMemo } from 'react';
+import { toConicGradient } from './layout.js';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineDot = ({
+  ariaLabel,
+  colorWeights,
+  dimmed,
+  leftPx,
+  markCount,
+  onClick,
+  selected,
+  sizePx
+}) => {
+  const background = useMemo(() => toConicGradient(colorWeights), [colorWeights]);
+  const className = ['timeline-v2-dot', dimmed ? 'timeline-v2-dot--dimmed' : '', selected ? 'timeline-v2-dot--selected' : ''].filter(entry => entry !== '').join(' ');
+  return /*#__PURE__*/jsx("button", {
+    "aria-label": ariaLabel,
+    className: className,
+    style: {
+      background,
+      height: `${sizePx}px`,
+      left: `${leftPx}px`,
+      width: `${sizePx}px`
+    },
+    onClick: onClick,
+    type: "button",
+    children: markCount > 1 && /*#__PURE__*/jsx("span", {
+      className: "timeline-v2-dot__count",
+      children: markCount
+    })
+  });
 };
-const TimelineSliderV2_TimelineDot = TimelineDot;
-export default TimelineSliderV2_TimelineDot;
+
+export { TimelineDot as default };

package/components/TimelineSliderV2/TimelineRail.js

@@ -1,8 +1,11 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
-const TimelineRail = ()=>/*#__PURE__*/ jsx("div", {
-        className: "timeline-v2-rail"
-    });
-const TimelineSliderV2_TimelineRail = TimelineRail;
-export default TimelineSliderV2_TimelineRail;
+import 'react';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+const TimelineRail = () => {
+  return /*#__PURE__*/jsx("div", {
+    className: "timeline-v2-rail"
+  });
+};
+
+export { TimelineRail as default };