@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/Textfield/Textfield.js

@@ -1,21 +1,14 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TextField;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
-var _Markdown = _interopRequireDefault(require("../Markdown"));
-var _TruncatedTextArea = _interopRequireDefault(require("./TruncatedTextArea"));
-require("./styles.scss");
-function TextField(props) {
+import React, { useMemo } from 'react';
+import { Box } from '@mui/material';
+import classNames from 'classnames';
+import { isWhitespaces } from '../../utils';
+import Icon from '../Icon/Icon';
+import IconTooltip from '../IconTooltip';
+import Markdown from '../Markdown';
+import TruncatedTextArea from './TruncatedTextArea';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TextField(props) {
   const {
     autoFocus,
     label,
@@ -49,7 +42,7 @@ function TextField(props) {
     value,
     warningText
   } = props;
-  const textfieldClass = (0, _classnames.default)({
+  const textfieldClass = classNames({
     'textfield-value': true,
     'textfield-value--disabled': disabled,
     'textfield-value--error': !!errorText,
@@ -58,7 +51,7 @@ function TextField(props) {
   });
   const textfieldOnChange = event => {
     const textValue = event.target.value;
-    if ((0, _utils.isWhitespaces)(textValue)) {
+    if (isWhitespaces(textValue)) {
       return;
     }
     if (onChange) {
@@ -70,11 +63,11 @@ function TextField(props) {
     if (type === 'number' && typeof value !== 'undefined' && String(value) === '0') {
       event.currentTarget.select();
     }
-    onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    onFocus?.();
   };
   const onKeyDownHandler = e => {
     if (disabledCharacters && disabledCharacters.includes(e.key)) {
-      e === null || e === void 0 ? void 0 : e.preventDefault();
+      e?.preventDefault();
       return;
     }
     if (onKeyDown) {
@@ -85,13 +78,14 @@ function TextField(props) {
     if (iconRight === 'cancel' && !value) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement("button", {
+    return /*#__PURE__*/_jsx("button", {
       onClick: onClickRightIcon,
-      className: "textfield-value--icon-container"
-    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      name: iconRight,
-      className: "textfield-value--icon-right".concat(iconRight === 'cancel' ? '--cancel' : '')
-    }));
+      className: "textfield-value--icon-container",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: iconRight,
+        className: `textfield-value--icon-right${iconRight === 'cancel' ? '--cancel' : ''}`
+      })
+    });
   };
   const typeProps = {
     type
@@ -104,80 +98,91 @@ function TextField(props) {
       typeProps.max = max;
     }
   }
-  const displayComponent = (0, _react.useMemo)(() => {
+  const displayComponent = useMemo(() => {
     if (!display || value === undefined) {
       return null;
     }
-    const component = markdown ? /*#__PURE__*/_react.default.createElement(_Markdown.default, {
+    const component = markdown ? /*#__PURE__*/_jsx(Markdown, {
       value: value.toString()
-    }) : /*#__PURE__*/_react.default.createElement("p", {
-      className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : '')
-    }, value);
+    }) : /*#__PURE__*/_jsx("p", {
+      className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
+      children: value
+    });
     if (type === 'textarea' && truncateConfig) {
-      return /*#__PURE__*/_react.default.createElement(_TruncatedTextArea.default, {
-        truncateConfig: truncateConfig
-      }, component);
+      return /*#__PURE__*/_jsx(TruncatedTextArea, {
+        truncateConfig: truncateConfig,
+        children: component
+      });
     } else {
       return component;
     }
   }, [display, markdown, preserveNewlines, truncateConfig, type, value]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: "textfield ".concat(className),
-    sx: sx
-  }, /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-label"
-  }, required && label ? "".concat(label, " *") : label, tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    placement: "top",
-    title: tooltipTitle
-  })), !display && (type === 'text' || type === 'number' ? /*#__PURE__*/_react.default.createElement("div", {
-    id: id,
-    className: textfieldClass
-  }, iconLeft && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: iconLeft,
-    className: "textfield-value--icon-left"
-  }), /*#__PURE__*/_react.default.createElement("input", Object.assign({
-    autoFocus: autoFocus,
-    value: type === 'number' ? value : value || '',
-    disabled: readonly || disabled,
-    placeholder: placeholder,
-    onChange: textfieldOnChange,
-    onBlur: onBlur,
-    onFocus: textfieldOnFocus,
-    onKeyDown: onKeyDownHandler,
-    onWheel: e => e.currentTarget.blur(),
-    required: required,
-    maxLength: maxLength
-  }, typeProps)), iconRight ? renderRightIcon() : null) : /*#__PURE__*/_react.default.createElement("textarea", {
-    autoFocus: autoFocus,
-    className: textfieldClass,
-    value: value,
-    disabled: readonly || disabled,
-    placeholder: placeholder,
-    onChange: textfieldOnChange,
-    onBlur: onBlur,
-    onFocus: textfieldOnFocus,
-    required: required,
-    maxLength: maxLength,
-    style: (styles || {}).textarea
-  })), displayComponent, errorText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "error",
-    className: "textfield-error-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-error-text"
-  }, errorText)), warningText && /*#__PURE__*/_react.default.createElement("div", {
-    className: "textfield-label-container"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "warning",
-    className: "textfield-warning-text--icon"
-  }), /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-warning-text"
-  }, warningText)), helperText && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: id,
-    className: "textfield-help-text"
-  }, helperText));
+  return /*#__PURE__*/_jsxs(Box, {
+    className: `textfield ${className}`,
+    sx: sx,
+    children: [/*#__PURE__*/_jsxs("label", {
+      htmlFor: id,
+      className: "textfield-label",
+      children: [required && label ? `${label} *` : label, tooltipTitle && /*#__PURE__*/_jsx(IconTooltip, {
+        placement: "top",
+        title: tooltipTitle
+      })]
+    }), !display && (type === 'text' || type === 'number' ? /*#__PURE__*/_jsxs("div", {
+      id: id,
+      className: textfieldClass,
+      children: [iconLeft && /*#__PURE__*/_jsx(Icon, {
+        name: iconLeft,
+        className: "textfield-value--icon-left"
+      }), /*#__PURE__*/_jsx("input", {
+        autoFocus: autoFocus,
+        value: type === 'number' ? value : value || '',
+        disabled: readonly || disabled,
+        placeholder: placeholder,
+        onChange: textfieldOnChange,
+        onBlur: onBlur,
+        onFocus: textfieldOnFocus,
+        onKeyDown: onKeyDownHandler,
+        onWheel: e => e.currentTarget.blur(),
+        required: required,
+        maxLength: maxLength,
+        ...typeProps
+      }), iconRight ? renderRightIcon() : null]
+    }) : /*#__PURE__*/_jsx("textarea", {
+      autoFocus: autoFocus,
+      className: textfieldClass,
+      value: value,
+      disabled: readonly || disabled,
+      placeholder: placeholder,
+      onChange: textfieldOnChange,
+      onBlur: onBlur,
+      onFocus: textfieldOnFocus,
+      required: required,
+      maxLength: maxLength,
+      style: (styles || {}).textarea
+    })), displayComponent, errorText && /*#__PURE__*/_jsxs("div", {
+      className: "textfield-label-container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "error",
+        className: "textfield-error-text--icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "textfield-error-text",
+        children: errorText
+      })]
+    }), warningText && /*#__PURE__*/_jsxs("div", {
+      className: "textfield-label-container",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        name: "warning",
+        className: "textfield-warning-text--icon"
+      }), /*#__PURE__*/_jsx("label", {
+        htmlFor: id,
+        className: "textfield-warning-text",
+        children: warningText
+      })]
+    }), helperText && /*#__PURE__*/_jsx("label", {
+      htmlFor: id,
+      className: "textfield-help-text",
+      children: helperText
+    })]
+  });
 }

package/components/Textfield/TruncatedTextArea.js

@@ -1,20 +1,11 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-require("./styles.scss");
-const TruncatedTextArea = _ref => {
-  let {
-    truncateConfig,
-    children
-  } = _ref;
+import React, { useEffect, useRef, useState } from 'react';
+import { Link, Typography, useTheme } from '@mui/material';
+import './styles.scss';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const TruncatedTextArea = ({
+  truncateConfig,
+  children
+}) => {
   const {
     maxHeight,
     showLessText,
@@ -22,12 +13,12 @@ const TruncatedTextArea = _ref => {
     showTextStyle,
     alignment = 'left'
   } = truncateConfig;
-  const theme = (0, _material.useTheme)();
-  const [showAll, setShowAll] = (0, _react.useState)(false);
-  const [needsTruncating, setNeedsTruncating] = (0, _react.useState)(false);
-  const [totalHeight, setTotalHeight] = (0, _react.useState)(0);
-  const ref = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
+  const theme = useTheme();
+  const [showAll, setShowAll] = useState(false);
+  const [needsTruncating, setNeedsTruncating] = useState(false);
+  const [totalHeight, setTotalHeight] = useState(0);
+  const ref = useRef(null);
+  useEffect(() => {
     if (ref && ref.current && !totalHeight) {
       const height = ref.current.clientHeight;
       setTotalHeight(height);
@@ -42,28 +33,35 @@ const TruncatedTextArea = _ref => {
     width: '100%'
   };
   if (needsTruncating && !showAll) {
-    divStyle.maxHeight = "".concat(maxHeight, "px");
+    divStyle.maxHeight = `${maxHeight}px`;
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    style: divStyle
-  }, children), needsTruncating && /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: '100%',
-      textAlign: alignment
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Link, {
-    component: "button",
-    onClick: toggleShowAll,
-    onBlur: () => setShowAll(false),
-    sx: {
-      color: theme.palette.TwClrTxtBrand,
-      textDecorationColor: "".concat(theme.palette.TwClrTxtBrand, "80")
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, showTextStyle), {}, {
-      marginTop: '-3px'
-    })
-  }, showAll ? showLessText : showMoreText))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: ref,
+      style: divStyle,
+      children: children
+    }), needsTruncating && /*#__PURE__*/_jsx("div", {
+      style: {
+        width: '100%',
+        textAlign: alignment
+      },
+      children: /*#__PURE__*/_jsx(Link, {
+        component: "button",
+        onClick: toggleShowAll,
+        onBlur: () => setShowAll(false),
+        sx: {
+          color: theme.palette.TwClrTxtBrand,
+          textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
+        },
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            ...showTextStyle,
+            marginTop: '-3px'
+          },
+          children: showAll ? showLessText : showMoreText
+        })
+      })
+    })]
+  });
 };
-var _default = exports.default = TruncatedTextArea;
+export default TruncatedTextArea;

package/components/TimelineSlider/TimelineMarker.js

@@ -1,33 +1,29 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-require("./styles.scss");
-const TimelineMarker = _ref => {
-  let {
-    color,
-    labelBottom,
-    labelTop,
-    onClick,
-    size,
-    value
-  } = _ref;
+import React from 'react';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TimelineMarker = ({
+  color,
+  labelBottom,
+  labelTop,
+  onClick,
+  size,
+  value
+}) => {
   const clampedValue = Math.min(1, Math.max(0, value));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "timeline-marker timeline-marker--".concat(size, " ").concat(onClick ? 'timeline-marker--clickable' : ''),
+  return /*#__PURE__*/_jsxs("div", {
+    className: `timeline-marker timeline-marker--${size} ${onClick ? 'timeline-marker--clickable' : ''}`,
     style: {
-      left: "".concat(clampedValue * 100, "%"),
+      left: `${clampedValue * 100}%`,
       backgroundColor: color
     },
-    onClick: onClick
-  }, labelTop && /*#__PURE__*/_react.default.createElement("div", {
-    className: "timeline-marker__label timeline-marker__label--top"
-  }, labelTop), labelBottom && /*#__PURE__*/_react.default.createElement("div", {
-    className: "timeline-marker__label timeline-marker__label--bottom"
-  }, labelBottom));
+    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
+    })]
+  });
 };
-var _default = exports.default = TimelineMarker;
+export default TimelineMarker;

package/components/TimelineSlider/TimelineRail.js

@@ -1,15 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-require("./styles.scss");
+import React from 'react';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
 const TimelineRail = () => {
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: "timeline-rail"
   });
 };
-var _default = exports.default = TimelineRail;
+export default TimelineRail;

package/components/TimelineSlider/index.js

@@ -1,28 +1,20 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _TimelineMarker = _interopRequireDefault(require("./TimelineMarker"));
-var _TimelineRail = _interopRequireDefault(require("./TimelineRail"));
-require("./styles.scss");
-const TimelineSlider = _ref => {
-  let {
-    labelEnd,
-    labelSelected,
-    labelStart,
-    marks
-  } = _ref;
-  const theme = (0, _material.useTheme)();
+import React, { useMemo } from 'react';
+import { useTheme } from '@mui/material';
+import TimelineMarker from './TimelineMarker';
+import TimelineRail from './TimelineRail';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TimelineSlider = ({
+  labelEnd,
+  labelSelected,
+  labelStart,
+  marks
+}) => {
+  const theme = useTheme();
   const {
     minValue,
     maxValue
-  } = (0, _react.useMemo)(() => {
+  } = useMemo(() => {
     const values = marks.map(mark => mark.value);
     if (values.length > 0) {
       return {
@@ -37,33 +29,37 @@ const TimelineSlider = _ref => {
     }
   }, [marks]);
   const range = maxValue - minValue;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'timeline'
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'timeline-label',
-    style: {
-      marginRight: theme.spacing(2)
-    }
-  }, labelStart), /*#__PURE__*/_react.default.createElement("div", {
-    className: "timeline-container"
-  }, /*#__PURE__*/_react.default.createElement(_TimelineRail.default, null), marks.map((mark, idx) => {
-    const normalizedValue = range === 0 ? 1 : (mark.value - minValue) / range;
-    return /*#__PURE__*/_react.default.createElement(_TimelineMarker.default, {
-      key: idx,
-      color: mark.color,
-      labelBottom: mark.labelBottom,
-      labelTop: mark.labelTop,
-      onClick: mark.onClick,
-      size: mark.size,
-      value: normalizedValue
-    });
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'timeline-label',
-    style: {
-      marginLeft: theme.spacing(2)
-    }
-  }, labelEnd), labelSelected && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'timeline-selected-label'
-  }, labelSelected));
+  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
+    })]
+  });
 };
-var _default = exports.default = TimelineSlider;
+export default TimelineSlider;

package/components/Tooltip/Tooltip.js

@@ -1,26 +1,19 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Tooltip;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-function Tooltip(_ref) {
-  let {
-    children,
-    placement = 'top-start',
-    slotProps,
-    sx,
-    title
-  } = _ref;
-  const [open, setOpen] = _react.default.useState(false);
+import React from 'react';
+import { Tooltip as MUITooltip, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Tooltip({
+  children,
+  placement = 'top-start',
+  slotProps,
+  sx,
+  title
+}) {
+  const [open, setOpen] = React.useState(false);
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const theme = (0, _material.useTheme)();
+  } = useDeviceInfo();
+  const theme = useTheme();
   const handleTooltipClose = () => {
     setOpen(false);
   };
@@ -29,7 +22,7 @@ function Tooltip(_ref) {
       setOpen(true);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+  return /*#__PURE__*/_jsx(MUITooltip, {
     arrow: true,
     onOpen: handleTooltipOpen,
     onClose: handleTooltipClose,
@@ -50,8 +43,10 @@ function Tooltip(_ref) {
         }
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    title: title
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    onClick: handleTooltipOpen
-  }, children));
+    title: title,
+    children: /*#__PURE__*/_jsx("span", {
+      onClick: handleTooltipOpen,
+      children: children
+    })
+  });
 }