@terraware/web-components 5.0.27 → 5.1.0

package/components/TextTruncated/index.js

@@ -1,138 +1,125 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useTheme, Typography, Tooltip, Link } from '@mui/material';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-/**
- * Compute TextDisplay for a list of strings
- * @param strings list of strings to process
- * @param maxLength max displayable length
- */
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { Link, Tooltip, Typography, useTheme } from "@mui/material";
 function computeFromStringList(strings, maxLength, listSeparator) {
-  if (strings.length === 0) {
-    return {
-      text: '',
-      numberMore: 0
+    if (0 === strings.length) 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
+    if (strings[0].length > maxLength) return {
+        text: strings[0].substring(0, maxLength),
+        numberMore: 1 === strings.length ? -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;
+    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;
     }
-    stringsRemaining--;
-    result = tempResult;
-  }
-  return {
-    text: result,
-    numberMore: stringsRemaining
-  };
+    return {
+        text: result,
+        numberMore: stringsRemaining
+    };
 }
 function TextTruncated(props) {
-  const {
-    stringList,
-    listSeparator,
-    maxLengthPx,
-    moreSeparator,
-    moreText,
-    textStyle,
-    showAllStyle,
-    placeHolder
-  } = props;
-  const [showAllOpen, setShowAllOpen] = useState(false);
-  const [canvasContext, setCanvasContext] = useState();
-  const theme = useTheme();
-  useEffect(() => {
-    const canvas = document.createElement('canvas');
-    setCanvasContext(canvas?.getContext('2d') ?? undefined);
-  }, []);
-  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 = `${fontSize}px ${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__*/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'
+    const { stringList, listSeparator, maxLengthPx, moreSeparator, moreText, textStyle, showAllStyle, placeHolder } = props;
+    const [showAllOpen, setShowAllOpen] = useState(false);
+    const [canvasContext, setCanvasContext] = useState();
+    const theme = useTheme();
+    useEffect(()=>{
+        const canvas = document.createElement('canvas');
+        setCanvasContext(canvas?.getContext('2d') ?? void 0);
+    }, []);
+    const pixelsPerChar = useMemo(()=>{
+        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 = `${fontSize}px ${fontFamily}`;
+            result = canvasContext.measureText(fullText).width;
         }
-      },
-      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;
+        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__*/ jsxs(Typography, {
+        sx: textStyle,
+        children: [
+            textToDisplay.text,
+            0 !== textToDisplay.numberMore && moreText ? moreSeparator : '',
+            0 !== textToDisplay.numberMore ? /*#__PURE__*/ jsx(Tooltip, {
+                arrow: true,
+                open: moreText ? showAllOpen : void 0,
+                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'
+                    }
+                },
+                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;
 }
-
-export { TextTruncated as default };
+export default TextTruncated;

package/components/Textfield/Textfield.js

@@ -1,195 +1,163 @@
-import { useMemo } from 'react';
-import { Box } from '@mui/material';
-import classNames from 'classnames';
-import 'lodash';
-import 'luxon';
-import isWhitespaces from '../../utils/text.js';
-import 'react-responsive';
-import Icon from '../Icon/Icon.js';
-import IconTooltip from '../IconTooltip/index.js';
-import Markdown from '../Markdown/index.js';
-import TruncatedTextArea from './TruncatedTextArea.js';
-import './styles.scss';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box } from "@mui/material";
+import classnames from "classnames";
+import { isWhitespaces } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import IconTooltip from "../IconTooltip/index.js";
+import Markdown from "../Markdown/index.js";
+import TruncatedTextArea from "./TruncatedTextArea.js";
+import "./styles.scss";
 function TextField(props) {
-  const {
-    autoFocus,
-    label,
-    className,
-    disabled,
-    disabledCharacters,
-    display,
-    errorText,
-    helperText,
-    iconLeft,
-    iconRight,
-    id,
-    markdown,
-    min,
-    max,
-    maxLength,
-    onBlur,
-    onChange,
-    onClickRightIcon,
-    onFocus,
-    onKeyDown,
-    placeholder,
-    preserveNewlines,
-    readonly,
-    required,
-    styles,
-    sx,
-    tooltipTitle,
-    truncateConfig,
-    type,
-    value,
-    warningText
-  } = props;
-  const textfieldClass = classNames({
-    '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 (isWhitespaces(textValue)) {
-      return;
-    }
-    if (onChange) {
-      onChange(textValue);
-    }
-  };
-  const textfieldOnFocus = event => {
-    // for numeric fields with a value of zero, select all text on focus to make it easier for users to replace the value
-    if (type === 'number' && typeof value !== 'undefined' && String(value) === '0') {
-      event.currentTarget.select();
-    }
-    onFocus?.();
-  };
-  const onKeyDownHandler = e => {
-    if (disabledCharacters && disabledCharacters.includes(e.key)) {
-      e?.preventDefault();
-      return;
-    }
-    if (onKeyDown) {
-      onKeyDown(e.key);
-    }
-  };
-  const renderRightIcon = () => {
-    if (iconRight === 'cancel' && !value) {
-      return null;
-    }
-    return /*#__PURE__*/jsx("button", {
-      onClick: onClickRightIcon,
-      className: "textfield-value--icon-container",
-      children: /*#__PURE__*/jsx(Icon, {
-        name: iconRight,
-        className: `textfield-value--icon-right${iconRight === 'cancel' ? '--cancel' : ''}`
-      })
+    const { autoFocus, label, className, disabled, disabledCharacters, display, errorText, helperText, iconLeft, iconRight, id, markdown, min, max, maxLength, onBlur, onChange, onClickRightIcon, onFocus, onKeyDown, placeholder, preserveNewlines, readonly, required, styles, sx, tooltipTitle, truncateConfig, type, value, warningText } = props;
+    const textfieldClass = classnames({
+        'textfield-value': true,
+        'textfield-value--disabled': disabled,
+        'textfield-value--error': !!errorText,
+        'textfield-value--warning': !!warningText,
+        'textfield-value--readonly': readonly
     });
-  };
-  const typeProps = {
-    type
-  };
-  if (type === 'number') {
-    if (min !== undefined) {
-      typeProps.min = min;
-    }
-    if (max !== undefined) {
-      typeProps.max = max;
+    const textfieldOnChange = (event)=>{
+        const textValue = event.target.value;
+        if (isWhitespaces(textValue)) return;
+        if (onChange) onChange(textValue);
+    };
+    const textfieldOnFocus = (event)=>{
+        if ('number' === type && void 0 !== value && '0' === String(value)) event.currentTarget.select();
+        onFocus?.();
+    };
+    const onKeyDownHandler = (e)=>{
+        if (disabledCharacters && disabledCharacters.includes(e.key)) return void e?.preventDefault();
+        if (onKeyDown) onKeyDown(e.key);
+    };
+    const renderRightIcon = ()=>{
+        if ('cancel' === iconRight && !value) return null;
+        return /*#__PURE__*/ jsx("button", {
+            onClick: onClickRightIcon,
+            className: "textfield-value--icon-container",
+            children: /*#__PURE__*/ jsx(Icon, {
+                name: iconRight,
+                className: `textfield-value--icon-right${'cancel' === iconRight ? '--cancel' : ''}`
+            })
+        });
+    };
+    const typeProps = {
+        type
+    };
+    if ('number' === type) {
+        if (void 0 !== min) typeProps.min = min;
+        if (void 0 !== max) typeProps.max = max;
     }
-  }
-  const displayComponent = useMemo(() => {
-    if (!display || value === undefined) {
-      return null;
-    }
-    const component = markdown ? /*#__PURE__*/jsx(Markdown, {
-      value: value.toString(),
-      style: styles?.markdown
-    }) : /*#__PURE__*/jsx("p", {
-      className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
-      children: value
+    const displayComponent = useMemo(()=>{
+        if (!display || void 0 === value) return null;
+        const component = markdown ? /*#__PURE__*/ jsx(Markdown, {
+            value: value.toString(),
+            style: styles?.markdown
+        }) : /*#__PURE__*/ jsx("p", {
+            className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
+            children: value
+        });
+        if ('textarea' === type && truncateConfig) return /*#__PURE__*/ jsx(TruncatedTextArea, {
+            truncateConfig: truncateConfig,
+            children: component
+        });
+        else return component;
+    }, [
+        display,
+        markdown,
+        preserveNewlines,
+        styles,
+        truncateConfig,
+        type,
+        value
+    ]);
+    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 && ('text' === type || 'number' === type ? /*#__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: 'number' === type ? 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
+            })
+        ]
     });
-    if (type === 'textarea' && truncateConfig) {
-      return /*#__PURE__*/jsx(TruncatedTextArea, {
-        truncateConfig: truncateConfig,
-        children: component
-      });
-    } else {
-      return component;
-    }
-  }, [display, markdown, preserveNewlines, styles, truncateConfig, type, value]);
-  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
-    })]
-  });
 }
-
-export { TextField as default };
+export default TextField;