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

package/components/Textfield/TruncatedTextArea.js

@@ -1,86 +1,72 @@
-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);
-      }
+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%'
     };
-    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
-        })
-      })
-    })]
-  });
+    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
+                    })
+                })
+            })
+        ]
+    });
 };
-
-export { TruncatedTextArea as default };
+const Textfield_TruncatedTextArea = TruncatedTextArea;
+export default Textfield_TruncatedTextArea;

package/components/TimelineSlider/TimelineMarker.js

@@ -1,31 +1,26 @@
-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
-    })]
-  });
+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
+            })
+        ]
+    });
 };
-
-export { TimelineMarker as default };
+const TimelineSlider_TimelineMarker = TimelineMarker;
+export default TimelineSlider_TimelineMarker;

package/components/TimelineSlider/TimelineRail.js

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

package/components/TimelineSlider/index.js

@@ -1,67 +1,65 @@
-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
-    })]
-  });
+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
+            })
+        ]
+    });
 };
-
-export { TimelineSlider as default };
+const components_TimelineSlider = TimelineSlider;
+export default components_TimelineSlider;

package/components/TimelineSliderV2/ClusterBadge.js

@@ -1,29 +1,25 @@
-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 };
+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;

package/components/TimelineSliderV2/TimelineDot.js

@@ -1,36 +1,32 @@
-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
-    })
-  });
+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
+        })
+    });
 };
-
-export { TimelineDot as default };
+const TimelineSliderV2_TimelineDot = TimelineDot;
+export default TimelineSliderV2_TimelineDot;

package/components/TimelineSliderV2/TimelineRail.js

@@ -1,11 +1,8 @@
-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 };
+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;