@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/SummaryBox.js

@@ -0,0 +1,73 @@
+"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)(() => {
+    switch (variant) {
+      case 'default':
+        return {
+          position: 'relative',
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2)
+        };
+      case 'available':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[700],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+      case 'full':
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.neutral[200],
+          padding: theme.spacing(2),
+          height: '100%',
+          boxSizing: 'border-box'
+        };
+      default:
+        return {
+          borderRadius: 8,
+          backgroundColor: theme.palette.state[5],
+          padding: theme.spacing(2),
+          color: theme.palette.common.white
+        };
+    }
+  }, [theme, variant]);
+  return /*#__PURE__*/_react.default.createElement(_material.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));
+}

package/components/Tabs/index.js

@@ -0,0 +1,111 @@
+"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 _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,
+    onChangeTab,
+    tabs,
+    tabStyle,
+    headerBorder = false
+  } = _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)();
+  const {
+    isMobile
+  } = (0, _utils.useDeviceInfo)();
+  const tabStyles = [{
+    color: theme.palette.TwClrTxtSecondary,
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '24px',
+    minHeight: theme.spacing(4.5),
+    padding: theme.spacing(1, 2),
+    textTransform: 'capitalize',
+    '&:hover': {
+      backgroundColor: theme.palette.TwClrBgHover
+    },
+    '&.Mui-selected': {
+      color: theme.palette.TwClrTxtBrand
+    },
+    '&.MuiTab-labelIcon': {
+      alignItems: 'center',
+      display: 'flex',
+      flexDirection: 'row'
+    },
+    '& .MuiTab-iconWrapper': {
+      fill: theme.palette.TwClrIcnSecondary,
+      marginBottom: 0,
+      marginRight: theme.spacing(1)
+    },
+    '&.Mui-selected .MuiTab-iconWrapper': {
+      fill: theme.palette.TwClrIcnBrand
+    }
+  }, ...(Array.isArray(tabStyle) ? tabStyle : [tabStyle])];
+  const tabHeaderProps = {
+    borderBottom: headerBorder ? 1 : 0,
+    borderColor: 'divider',
+    margin: isMobile ? 0 : theme.spacing(0, 4)
+  };
+  const tabPanelStyles = {
+    padding: 0
+  };
+  const setTab = tab => {
+    if (onChangeTab) {
+      onChangeTab(tab);
+    } else {
+      setSelectedTab(tab);
+    }
+  };
+  (0, _react.useEffect)(() => {
+    if (activeTab !== undefined) {
+      setSelectedTab(activeTab);
+    }
+  }, [activeTab]);
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_lab.TabContext, {
+    value: selectedTab
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    sx: tabHeaderProps
+  }, /*#__PURE__*/_react.default.createElement(_lab.TabList, {
+    onChange: (unused, value) => setTab(value),
+    sx: {
+      minHeight: theme.spacing(4.5)
+    },
+    TabIndicatorProps: {
+      style: {
+        background: theme.palette.TwClrBgBrand,
+        height: '4px'
+      }
+    },
+    variant: 'scrollable'
+  }, tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_material.Tab, {
+    disabled: tab.disabled,
+    icon: tab.icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      name: tab.icon
+    }) : undefined,
+    key: index,
+    label: tab.label,
+    sx: tabStyles,
+    value: tab.id
+  })))), tabs.map((tab, index) => /*#__PURE__*/_react.default.createElement(_lab.TabPanel, {
+    key: index,
+    sx: tabPanelStyles,
+    value: tab.id
+  }, tab.children))));
+};
+var _default = exports.default = Tabs;

package/components/TextTruncated/index.js

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TextTruncated;
+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
+ * numberMore: the number to display in the '...# more' link
+ *   has two special values
+ *   0: the full text can be displayed; do not show '...# more'
+ *   -1: the list is of length one but the element cannot be fully
+ *       displayed. show '...more' without a '#'
+ */
+
+/**
+ * Compute TextDisplay for a list of strings
+ * @param strings list of strings to process
+ * @param maxLength max displayable length
+ */
+function computeFromStringList(strings, maxLength, listSeparator) {
+  if (strings.length === 0) {
+    return {
+      text: '',
+      numberMore: 0
+    };
+  }
+  if (strings[0].length > maxLength) {
+    // case in which the first string is too long to fit by itself
+    return {
+      text: strings[0].substring(0, maxLength),
+      numberMore: strings.length === 1 ? -1 : strings.length - 1
+    };
+  }
+
+  // concatenate strings with ', ' and stop before exceeding max
+  let stringsRemaining = strings.length - 1;
+  let result = strings[0];
+  for (let i = 1; i < strings.length; i++) {
+    const tempResult = [result, strings[i]].join(listSeparator);
+    if (tempResult.length > maxLength) {
+      break;
+    }
+    stringsRemaining--;
+    result = tempResult;
+  }
+  return {
+    text: result,
+    numberMore: stringsRemaining
+  };
+}
+function TextTruncated(props) {
+  const {
+    stringList,
+    listSeparator,
+    maxLengthPx,
+    moreSeparator,
+    moreText,
+    textStyle,
+    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 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);
+  }, []);
+  const pixelsPerChar = (0, _react.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);
+      result = canvasContext.measureText(fullText).width;
+    }
+    return result / fullText.length;
+  }, [stringList, textStyle, canvasContext, theme.typography.fontFamily, theme.typography.fontSize]);
+  let maxExcludingSuffix = stringList.join(listSeparator).length;
+  if (pixelsPerChar > 0) {
+    const maxChars = maxLengthPx / pixelsPerChar;
+    maxExcludingSuffix = maxChars - moreSeparator.length - (moreText ? moreText.length : 0) - 1 - Math.ceil(Math.log10(stringList.length));
+  }
+  const textToDisplay = computeFromStringList(stringList, maxExcludingSuffix, listSeparator);
+  const onClickHandler = e => {
+    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)
+        }
+      },
+      '& .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: {
+      ...textStyle,
+      marginTop: '-3px'
+    }
+  }, (textToDisplay.numberMore > 0 ? textToDisplay.numberMore + ' ' : '') + moreText)) : /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    sx: {
+      ...textStyle,
+      display: 'inline'
+    }
+  }, moreSeparator)) : null) : placeHolder || null;
+}

package/components/Textfield/Textfield.js

@@ -0,0 +1,172 @@
+"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 _TruncatedTextArea = _interopRequireDefault(require("./TruncatedTextArea"));
+require("./styles.scss");
+function TextField(props) {
+  const {
+    autoFocus,
+    label,
+    className,
+    disabled,
+    disabledCharacters,
+    display,
+    errorText,
+    helperText,
+    iconLeft,
+    iconRight,
+    id,
+    min,
+    max,
+    maxLength,
+    onBlur,
+    onChange,
+    onClickRightIcon,
+    onFocus,
+    onKeyDown,
+    placeholder,
+    preserveNewlines,
+    readonly,
+    required,
+    styles,
+    sx,
+    tooltipTitle,
+    truncateConfig,
+    type,
+    value,
+    warningText
+  } = props;
+  const textfieldClass = (0, _classnames.default)({
+    'textfield-value': true,
+    'textfield-value--disabled': disabled,
+    'textfield-value--error': !!errorText,
+    'textfield-value--warning': !!warningText,
+    'textfield-value--readonly': readonly
+  });
+  const textfieldOnChange = event => {
+    const textValue = event.target.value;
+    if ((0, _utils.isWhitespaces)(textValue)) {
+      return;
+    }
+    if (onChange) {
+      onChange(textValue);
+    }
+  };
+  const onKeyDownHandler = e => {
+    if (disabledCharacters && disabledCharacters.includes(e.key)) {
+      e === null || e === void 0 ? void 0 : e.preventDefault();
+      return;
+    }
+    if (onKeyDown) {
+      onKeyDown(e.key);
+    }
+  };
+  const renderRightIcon = () => {
+    if (iconRight === 'cancel' && !value) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("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' : '')
+    }));
+  };
+  const typeProps = {
+    type
+  };
+  if (type === 'number') {
+    if (min !== undefined) {
+      typeProps.min = min;
+    }
+    if (max !== undefined) {
+      typeProps.max = max;
+    }
+  }
+  const displayComponent = (0, _react.useMemo)(() => {
+    if (!display) {
+      return null;
+    }
+    if (type === 'textarea' && truncateConfig) {
+      return /*#__PURE__*/_react.default.createElement(_TruncatedTextArea.default, {
+        preserveNewlines: preserveNewlines,
+        truncateConfig: truncateConfig,
+        value: value
+      });
+    }
+    return /*#__PURE__*/_react.default.createElement("p", {
+      className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : '')
+    }, value);
+  }, [display, 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: onFocus,
+    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: onFocus,
+    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));
+}

package/components/Textfield/TruncatedTextArea.js

@@ -0,0 +1,71 @@
+"use strict";
+
+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");
+const TruncatedTextArea = _ref => {
+  let {
+    preserveNewlines,
+    truncateConfig,
+    value
+  } = _ref;
+  const {
+    maxHeight,
+    showLessText,
+    showMoreText,
+    showTextStyle,
+    valueTextStyle,
+    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)(() => {
+    if (ref && ref.current && !totalHeight) {
+      const height = ref.current.clientHeight;
+      setTotalHeight(height);
+      setNeedsTruncating(height > maxHeight);
+    }
+  }, [maxHeight, ref, totalHeight]);
+  const toggleShowAll = () => setShowAll(prev => !prev);
+  const textStyle = {
+    ...valueTextStyle,
+    margin: '8px 0',
+    padding: 0,
+    overflow: 'hidden',
+    width: '100%'
+  };
+  if (needsTruncating && !showAll) {
+    textStyle.maxHeight = "".concat(maxHeight, "px");
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    ref: ref,
+    className: "textfield-value--display".concat(preserveNewlines ? ' preserve-newlines' : ''),
+    style: textStyle
+  }, value), 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: {
+      ...showTextStyle,
+      marginTop: '-3px'
+    }
+  }, showAll ? showLessText : showMoreText))));
+};
+var _default = exports.default = TruncatedTextArea;