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

package/components/TextTruncated/index.js

@@ -1,125 +1,138 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
-import { Link, Tooltip, Typography, useTheme } from "@mui/material";
+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
+ */
 function computeFromStringList(strings, maxLength, listSeparator) {
-    if (0 === strings.length) return {
-        text: '',
-        numberMore: 0
-    };
-    if (strings[0].length > maxLength) return {
-        text: strings[0].substring(0, maxLength),
-        numberMore: 1 === strings.length ? -1 : strings.length - 1
+  if (strings.length === 0) {
+    return {
+      text: '',
+      numberMore: 0
     };
-    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;
-    }
+  }
+  if (strings[0].length > maxLength) {
+    // case in which the first string is too long to fit by itself
     return {
-        text: result,
-        numberMore: stringsRemaining
+      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] = 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;
-        }
-        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 {
+    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;
     }
-    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;
+    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'
+        }
+      },
+      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 default TextTruncated;
+
+export { TextTruncated as default };

package/components/Textfield/Textfield.js

@@ -1,163 +1,195 @@
-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";
+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';
+
 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 {
+    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 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 typeProps = {
+    type
+  };
+  if (type === 'number') {
+    if (min !== undefined) {
+      typeProps.min = min;
+    }
+    if (max !== undefined) {
+      typeProps.max = max;
     }
-    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
-            })
-        ]
+  }
+  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
     });
+    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 default TextField;
+
+export { TextField as default };