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

package/components/Slider/index.js

@@ -1,13 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Slider;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function Slider(props) {
+import React from 'react';
+import { Slider as MuiSlider, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Slider(props) {
   const {
     defaultValue,
     value,
@@ -18,7 +12,7 @@ function Slider(props) {
     step,
     valueLabelDisplay
   } = props;
-  const theme = (0, _material.useTheme)();
+  const theme = useTheme();
   const sliderStyles = {
     '.MuiSlider-rail': {
       backgroundColor: theme.palette.TwClrBgBrandTertiary,
@@ -45,7 +39,7 @@ function Slider(props) {
       onChange(val);
     }
   };
-  return /*#__PURE__*/_react.default.createElement(_material.Slider, {
+  return /*#__PURE__*/_jsx(MuiSlider, {
     "aria-label": "Slider",
     defaultValue: defaultValue,
     value: value,
@@ -53,7 +47,7 @@ function Slider(props) {
     min: min,
     max: max,
     onChangeCommitted: handleChange,
-    step: step !== null && step !== void 0 ? step : null,
+    step: step ?? null,
     valueLabelDisplay: valueLabelDisplay,
     sx: sliderStyles
   });

package/components/SummaryBox.js

@@ -1,24 +1,17 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SummaryBox;
-var _react = _interopRequireWildcard(require("react"));
-var _iconsMaterial = require("@mui/icons-material");
-var _material = require("@mui/material");
-function SummaryBox(_ref) {
-  let {
-    title,
-    value,
-    variant = 'default',
-    id,
-    icon,
-    onIconClick
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const summaryBoxStyles = (0, _react.useMemo)(() => {
+import React, { useMemo } from 'react';
+import { Info } from '@mui/icons-material';
+import { Box, IconButton, Typography, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function SummaryBox({
+  title,
+  value,
+  variant = 'default',
+  id,
+  icon,
+  onIconClick
+}) {
+  const theme = useTheme();
+  const summaryBoxStyles = useMemo(() => {
     switch (variant) {
       case 'default':
         return {
@@ -51,23 +44,27 @@ function SummaryBox(_ref) {
         };
     }
   }, [theme, variant]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     id: id,
-    sx: summaryBoxStyles
-  }, icon && /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: onIconClick,
-    sx: {
-      position: 'absolute',
-      right: theme.spacing(2)
-    }
-  }, /*#__PURE__*/_react.default.createElement(_iconsMaterial.Info, null)), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p"
-  }, title), /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: "p",
-    variant: "h6",
-    sx: {
-      fontWeight: theme.typography.fontWeightBold,
-      whiteSpace: 'pre-line'
-    }
-  }, value));
+    sx: summaryBoxStyles,
+    children: [icon && /*#__PURE__*/_jsx(IconButton, {
+      onClick: onIconClick,
+      sx: {
+        position: 'absolute',
+        right: theme.spacing(2)
+      },
+      children: /*#__PURE__*/_jsx(Info, {})
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "p",
+      children: title
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "p",
+      variant: "h6",
+      sx: {
+        fontWeight: theme.typography.fontWeightBold,
+        whiteSpace: 'pre-line'
+      },
+      children: value
+    })]
+  });
 }

package/components/Tabs/index.js

@@ -1,33 +1,23 @@
-"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 _lab = require("@mui/lab");
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-const Tabs = _ref => {
-  var _ref2, _tabs$;
-  let {
-    activeTab,
-    children,
-    onChangeTab,
-    tabs,
-    tabStyle,
-    headerBorder = false,
-    sx
-  } = _ref;
-  const [selectedTab, setSelectedTab] = (0, _react.useState)((_ref2 = activeTab !== null && activeTab !== void 0 ? activeTab : (_tabs$ = tabs[0]) === null || _tabs$ === void 0 ? void 0 : _tabs$.id) !== null && _ref2 !== void 0 ? _ref2 : '');
-  const theme = (0, _material.useTheme)();
+import React, { useEffect, useMemo, useState } from 'react';
+import { TabContext, TabList, TabPanel } from '@mui/lab';
+import { Box, Tab as MuiTab, Tooltip, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Tabs = ({
+  activeTab,
+  children,
+  onChangeTab,
+  tabs,
+  tabStyle,
+  headerBorder = false,
+  sx
+}) => {
+  const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? '');
+  const theme = useTheme();
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
+  } = useDeviceInfo();
   const tabStyles = [{
     color: theme.palette.TwClrTxtSecondary,
     fontSize: '16px',
@@ -71,67 +61,75 @@ const Tabs = _ref => {
       setSelectedTab(tab);
     }
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     if (activeTab !== undefined) {
       setSelectedTab(activeTab);
     }
   }, [activeTab]);
-  const renderedTabs = (0, _react.useMemo)(() => tabs.map((tab, index) => {
-    const muiTab = /*#__PURE__*/_react.default.createElement(_material.Tab, {
-      key: index,
+  const renderedTabs = useMemo(() => tabs.map((tab, index) => {
+    const muiTab = /*#__PURE__*/_jsx(MuiTab, {
       disabled: tab.disabled,
-      icon: tab.icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icon: tab.icon ? /*#__PURE__*/_jsx(Icon, {
         name: tab.icon
       }) : undefined,
-      label: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-        title: tab.tooltip,
-        arrow: true,
-        placement: "top-start"
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        style: {
-          position: 'absolute',
-          inset: 0
-        }
-      }))),
+      label: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/_jsx(Tooltip, {
+          title: tab.tooltip,
+          arrow: true,
+          placement: "top-start",
+          children: /*#__PURE__*/_jsx("span", {
+            style: {
+              position: 'absolute',
+              inset: 0
+            }
+          })
+        })]
+      }),
       sx: tabStyles,
       value: tab.id
-    });
-    return tab.disabled ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
+    }, index);
+    return tab.disabled ? /*#__PURE__*/_jsx(Tooltip, {
       title: tab.tooltip,
-      key: index,
       arrow: true,
-      placement: "top-start"
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      style: {
-        display: 'inline-flex'
-      }
-    }, muiTab)) : muiTab;
+      placement: "top-start",
+      children: /*#__PURE__*/_jsx("span", {
+        style: {
+          display: 'inline-flex'
+        },
+        children: muiTab
+      })
+    }, index) : muiTab;
   }), [tabs]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: (0, _objectSpread2.default)({
-      width: '100%'
-    }, sx)
-  }, /*#__PURE__*/_react.default.createElement(_lab.TabContext, {
-    value: selectedTab
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    sx: tabHeaderProps,
-    className: "tab-header"
-  }, /*#__PURE__*/_react.default.createElement(_lab.TabList, {
-    onChange: (unused, value) => setTab(value),
+  return /*#__PURE__*/_jsx(Box, {
     sx: {
-      minHeight: theme.spacing(4.5)
-    },
-    TabIndicatorProps: {
-      style: {
-        background: theme.palette.TwClrBgBrand,
-        height: '4px'
-      }
+      width: '100%',
+      ...sx
     },
-    variant: 'scrollable'
-  }, renderedTabs)), children, tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_lab.TabPanel, {
-    key: index,
-    sx: tabPanelStyles,
-    value: tab.id
-  }, tab.children))));
+    children: /*#__PURE__*/_jsxs(TabContext, {
+      value: selectedTab,
+      children: [/*#__PURE__*/_jsx(Box, {
+        sx: tabHeaderProps,
+        className: "tab-header",
+        children: /*#__PURE__*/_jsx(TabList, {
+          onChange: (unused, value) => setTab(value),
+          sx: {
+            minHeight: theme.spacing(4.5)
+          },
+          TabIndicatorProps: {
+            style: {
+              background: theme.palette.TwClrBgBrand,
+              height: '4px'
+            }
+          },
+          variant: 'scrollable',
+          children: renderedTabs
+        })
+      }), children, tabs.map((tab, index) => /*#__PURE__*/_jsx(TabPanel, {
+        sx: tabPanelStyles,
+        value: tab.id,
+        children: tab.children
+      }, index))]
+    })
+  });
 };
-var _default = exports.default = Tabs;
+export default Tabs;

package/components/TextTruncated/index.js

@@ -1,14 +1,6 @@
-"use strict";
+import React, { useEffect, useMemo, useState } from 'react';
+import { Link, Tooltip, Typography, useTheme } from '@mui/material';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TextTruncated;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
 /**
  * Represents the result of truncating the string list
  * text: the text to display before the '...# more' link
@@ -18,7 +10,7 @@ var _material = require("@mui/material");
  *   -1: the list is of length one but the element cannot be fully
  *       displayed. show '...more' without a '#'
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Compute TextDisplay for a list of strings
  * @param strings list of strings to process
@@ -55,7 +47,7 @@ function computeFromStringList(strings, maxLength, listSeparator) {
     numberMore: stringsRemaining
   };
 }
-function TextTruncated(props) {
+export default function TextTruncated(props) {
   const {
     stringList,
     listSeparator,
@@ -66,22 +58,21 @@ function TextTruncated(props) {
     showAllStyle,
     placeHolder
   } = props;
-  const [showAllOpen, setShowAllOpen] = (0, _react.useState)(false);
-  const [canvasContext, setCanvasContext] = (0, _react.useState)();
-  const theme = (0, _material.useTheme)();
-  (0, _react.useEffect)(() => {
-    var _canvas$getContext;
+  const [showAllOpen, setShowAllOpen] = useState(false);
+  const [canvasContext, setCanvasContext] = useState();
+  const theme = useTheme();
+  useEffect(() => {
     const canvas = document.createElement('canvas');
-    setCanvasContext((_canvas$getContext = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d')) !== null && _canvas$getContext !== void 0 ? _canvas$getContext : undefined);
+    setCanvasContext(canvas?.getContext('2d') ?? undefined);
   }, []);
-  const pixelsPerChar = (0, _react.useMemo)(() => {
+  const pixelsPerChar = useMemo(() => {
     // compute the pixels per character, averaged over the comma-separated joined stringList
     const fullText = stringList.join(listSeparator);
     let result = 0;
     if (canvasContext) {
       const fontSize = textStyle && textStyle.fontSize || theme.typography.fontSize;
       const fontFamily = textStyle && textStyle.fontFamily || theme.typography.fontFamily;
-      canvasContext.font = "".concat(fontSize, "px ").concat(fontFamily);
+      canvasContext.font = `${fontSize}px ${fontFamily}`;
       result = canvasContext.measureText(fullText).width;
     }
     return result / fullText.length;
@@ -96,51 +87,59 @@ function TextTruncated(props) {
     e.stopPropagation();
     setShowAllOpen(!showAllOpen);
   };
-  return stringList.length > 0 ? /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    sx: textStyle
-  }, textToDisplay.text, textToDisplay.numberMore !== 0 && moreText ? moreSeparator : '', textToDisplay.numberMore !== 0 ? /*#__PURE__*/_react.default.createElement(_material.Tooltip, {
-    arrow: true,
-    open: moreText ? showAllOpen : undefined,
-    enterDelay: moreText ? 0 : 400,
-    title: /*#__PURE__*/_react.default.createElement(_material.Typography, {
-      sx: showAllStyle,
-      fontSize: "14px"
-    }, stringList.join(listSeparator)),
-    sx: {
-      '& .MuiTooltip-arrow': {
-        color: "".concat(theme.palette.TwClrBg, " !important"),
-        '&:before': {
-          border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
+  return stringList.length > 0 ? /*#__PURE__*/_jsxs(Typography, {
+    sx: textStyle,
+    children: [textToDisplay.text, textToDisplay.numberMore !== 0 && moreText ? moreSeparator : '', textToDisplay.numberMore !== 0 ? /*#__PURE__*/_jsx(Tooltip, {
+      arrow: true,
+      open: moreText ? showAllOpen : undefined,
+      enterDelay: moreText ? 0 : 400,
+      title: /*#__PURE__*/_jsx(Typography, {
+        sx: showAllStyle,
+        fontSize: "14px",
+        children: stringList.join(listSeparator)
+      }),
+      sx: {
+        '& .MuiTooltip-arrow': {
+          color: `${theme.palette.TwClrBg} !important`,
+          '&:before': {
+            border: `1px solid ${theme.palette.TwClrBrdrTertiary}`
+          }
+        },
+        '& .MuiTooltip-popper': {
+          maxHeight: '200px',
+          overflow: 'auto'
+        },
+        '& .MuiTooltip-tooltip': {
+          backgroundColor: `${theme.palette.TwClrBg} !important`,
+          color: `${theme.palette.TwClrTxt} !important`,
+          border: `1px solid ${theme.palette.TwClrBrdrTertiary} !important`,
+          borderRadius: '8px !important',
+          boxShadow: `0px 3px 3px ${theme.palette.TwClrBaseGray100}`,
+          padding: '8px'
         }
       },
-      '& .MuiTooltip-popper': {
-        maxHeight: '200px',
-        overflow: 'auto'
-      },
-      '& .MuiTooltip-tooltip': {
-        backgroundColor: "".concat(theme.palette.TwClrBg, " !important"),
-        color: "".concat(theme.palette.TwClrTxt, " !important"),
-        border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary, " !important"),
-        borderRadius: '8px !important',
-        boxShadow: "0px 3px 3px ".concat(theme.palette.TwClrBaseGray100),
-        padding: '8px'
-      }
-    }
-  }, moreText ? /*#__PURE__*/_react.default.createElement(_material.Link, {
-    component: "button",
-    onClick: onClickHandler,
-    onBlur: () => setShowAllOpen(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)({}, textStyle), {}, {
-      marginTop: '-3px'
-    })
-  }, (textToDisplay.numberMore > 0 ? textToDisplay.numberMore + ' ' : '') + moreText)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    sx: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, textStyle), {}, {
-      display: 'inline'
-    })
-  }, moreSeparator)) : null) : placeHolder || null;
+      children: moreText ? /*#__PURE__*/_jsx(Link, {
+        component: "button",
+        onClick: onClickHandler,
+        onBlur: () => setShowAllOpen(false),
+        sx: {
+          color: theme.palette.TwClrTxtBrand,
+          textDecorationColor: `${theme.palette.TwClrTxtBrand}80`
+        },
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            ...textStyle,
+            marginTop: '-3px'
+          },
+          children: (textToDisplay.numberMore > 0 ? textToDisplay.numberMore + ' ' : '') + moreText
+        })
+      }) : /*#__PURE__*/_jsx(Typography, {
+        sx: {
+          ...textStyle,
+          display: 'inline'
+        },
+        children: moreSeparator
+      })
+    }) : null]
+  }) : placeHolder || null;
 }