@terraware/web-components 4.2.24-rc.0 → 4.2.25

package/components/DialogBox/DialogBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,KAAK,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlE,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAElF,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkFlE"}
+{"version":3,"file":"DialogBox.d.ts","sourceRoot":"","sources":["../../../src/components/DialogBox/DialogBox.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,KAAK,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMlE,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAElF,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC7B,aAAa,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA6FlE"}

package/components/DialogBox/DialogBox.js

@@ -23,12 +23,21 @@ export default function DialogBox(props) {
   const {
     isMobile
   } = useDeviceInfo();
+
+  // Only close modal when the click starts and ends on the backdrop. On mobile, tapping an input opens the
+  // keyboard and shifts the layout, so the click can end on the backdrop even though it began on the input
+  const pressStartedOnBackdrop = React.useRef(false);
+  const targetIsBackdrop = target => target instanceof HTMLElement && target.classList.contains('dialog-box--opened');
   return open ? /*#__PURE__*/_jsx("div", {
     className: `dialog-box-container${skrim ? '--skrim' : ''} ${open ? 'dialog-box--opened' : 'dialog-box--closed'} ${isMobile ? 'mobile' : ''}`,
+    onMouseDown: event => {
+      pressStartedOnBackdrop.current = targetIsBackdrop(event.target);
+    },
     onClick: event => {
-      if (event.target instanceof HTMLElement && event.target.classList.contains('dialog-box--opened')) {
+      if (pressStartedOnBackdrop.current && targetIsBackdrop(event.target)) {
         onClose?.();
       }
+      pressStartedOnBackdrop.current = false;
     },
     style: style,
     children: /*#__PURE__*/_jsxs("div", {

package/components/Markdown/index.d.ts

@@ -1,8 +1,9 @@
-import { type JSX } from 'react';
+import { type CSSProperties, type JSX } from 'react';
 import './styles.scss';
 export type MarkdownProps = {
     value: string;
+    style?: CSSProperties;
 };
-declare const Markdown: ({ value }: MarkdownProps) => JSX.Element;
+declare const Markdown: ({ value, style }: MarkdownProps) => JSX.Element;
 export default Markdown;
 //# sourceMappingURL=index.d.ts.map

package/components/Markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAoC,MAAM,OAAO,CAAC;AAI1E,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,WAAW,aAAa,KAAG,GAAG,CAAC,OAahD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,aAAa,EAAE,KAAK,GAAG,EAAoC,MAAM,OAAO,CAAC;AAI9F,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,QAAQ,GAAI,kBAAkB,aAAa,KAAG,GAAG,CAAC,OAavD,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/components/Markdown/index.js

@@ -3,7 +3,8 @@ import { marked } from 'marked';
 import './styles.scss';
 import { jsx as _jsx } from "react/jsx-runtime";
 const Markdown = ({
-  value
+  value,
+  style
 }) => {
   const [html, setHtml] = useState();
   const parseValue = useCallback(async _value => {
@@ -12,9 +13,10 @@ const Markdown = ({
   }, []);
   useEffect(() => {
     void parseValue(value);
-  }, [value]);
+  }, [parseValue, value]);
   return /*#__PURE__*/_jsx("div", {
     className: "markdown",
+    style: style,
     dangerouslySetInnerHTML: {
       __html: html ?? ''
     }

package/components/Markdown/styles.scss

@@ -13,6 +13,9 @@
   display: flex;
   flex-flow: column;
   font-family: terraware.$tw-fnt-frm-fld-text-value-font-family;
+  font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
+  font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
+  line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
   color: terraware.$tw-clr-txt;
   padding: terraware.$tw-spc-base-x-small 0;
   margin: 0;
@@ -61,11 +64,12 @@
   }
 
   p {
-    font-size: terraware.$tw-fnt-frm-fld-text-value-font-size;
-    font-weight: terraware.$tw-fnt-frm-fld-text-value-font-weight;
-    line-height: terraware.$tw-fnt-frm-fld-text-value-line-height;
     padding: 0;
     margin: 0;
+
+    + p {
+      margin-top: terraware.$tw-spc-base-x-small;
+    }
   }
 
   a {

package/components/PhotosCarousel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAElF,OAAO,qCAAqC,CAAC;AAK7C,OAAO,eAAe,CAAC;AAUvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAsE9E"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhotosCarousel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,GAAG,EAA4C,MAAM,OAAO,CAAC;AAElF,OAAO,qCAAqC,CAAC;AAK7C,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,GAAG,CAAC,OAAO,CAsE9E"}

package/components/PhotosCarousel/index.js

@@ -1,17 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import CarouselImport from 'react-multi-carousel';
+import Carousel from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';
 import { Box, Typography } from '@mui/material';
 import BusySpinner from '../BusySpinner';
 import './styles.scss';
-
-// react-multi-carousel is CommonJS compiled by TypeScript, so it exports the component as
-// `exports.default` alongside an `__esModule` flag. We publish native ES modules, where the
-// default import of a CommonJS module is the whole `module.exports` object and no bundler
-// unwraps `.default` for us. Unwrap it here; the `??` keeps this correct under bundlers that
-// do apply the legacy interop.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Carousel = CarouselImport.default ?? CarouselImport;
 const responsive = {
   mobile: {
     breakpoint: {

package/components/Textfield/Textfield.d.ts

@@ -10,6 +10,7 @@ export interface TruncateConfig {
     showLessText: string;
     showTextStyle?: Record<string, any>;
     alignment?: 'left' | 'right';
+    collapseOnBlur?: boolean;
 }
 export interface Props {
     autoFocus?: boolean;

package/components/Textfield/Textfield.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAK3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,eAAe,CAAC;AAEvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqL3D"}
+{"version":3,"file":"Textfield.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/Textfield.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAW,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAO,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAK3D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAIzC,OAAO,eAAe,CAAC;AAEvB,KAAK,aAAa,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;AAEpD,KAAK,OAAO,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAExC,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAG7B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,KAAK;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACjD,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,IAAI,EAAE,aAAa,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqL3D"}

package/components/Textfield/Textfield.js

@@ -103,7 +103,8 @@ export default function TextField(props) {
       return null;
     }
     const component = markdown ? /*#__PURE__*/_jsx(Markdown, {
-      value: value.toString()
+      value: value.toString(),
+      style: styles?.markdown
     }) : /*#__PURE__*/_jsx("p", {
       className: `textfield-value--display${preserveNewlines ? ' preserve-newlines' : ''}`,
       children: value
@@ -116,7 +117,7 @@ export default function TextField(props) {
     } else {
       return component;
     }
-  }, [display, markdown, preserveNewlines, truncateConfig, type, value]);
+  }, [display, markdown, preserveNewlines, styles, truncateConfig, type, value]);
   return /*#__PURE__*/_jsxs(Box, {
     className: `textfield ${className}`,
     sx: sx,

package/components/Textfield/TruncatedTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TruncatedTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/TruncatedTextArea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAItE,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,eAAe,CAAC;AAEvB,UAAU,sBAAsB;IAC9B,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,4CAoD9E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"TruncatedTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/Textfield/TruncatedTextArea.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAiB,SAAS,EAA+B,MAAM,OAAO,CAAC;AAIrF,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,eAAe,CAAC;AAEvB,UAAU,sBAAsB;IAC9B,cAAc,EAAE,cAAc,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,iBAAiB,GAAI,8BAA8B,sBAAsB,4CA4E9E,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/components/Textfield/TruncatedTextArea.js

@@ -11,35 +11,52 @@ const TruncatedTextArea = ({
     showLessText,
     showMoreText,
     showTextStyle,
-    alignment = 'left'
+    alignment = 'left',
+    collapseOnBlur = false
   } = truncateConfig;
   const theme = useTheme();
   const [showAll, setShowAll] = useState(false);
   const [needsTruncating, setNeedsTruncating] = useState(false);
-  const [totalHeight, setTotalHeight] = useState(0);
-  const ref = useRef(null);
+  const contentRef = useRef(null);
   useEffect(() => {
-    if (ref && ref.current && !totalHeight) {
-      const height = ref.current.clientHeight;
-      setTotalHeight(height);
-      setNeedsTruncating(height > maxHeight);
+    const node = contentRef.current;
+    if (!node) {
+      return;
     }
-  }, [maxHeight, ref, totalHeight]);
+    const measure = () => {
+      // offsetHeight is an untransformed layout value, so it is in the same units as maxHeight
+      const truncating = node.offsetHeight > maxHeight;
+      setNeedsTruncating(truncating);
+      if (!truncating) {
+        // Otherwise content that grows long again later would start out expanded
+        setShowAll(false);
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [maxHeight]);
   const toggleShowAll = () => setShowAll(prev => !prev);
-  const divStyle = {
+  const containerStyle = {
     margin: 0,
     padding: 0,
     overflow: 'hidden',
     width: '100%'
   };
   if (needsTruncating && !showAll) {
-    divStyle.maxHeight = `${maxHeight}px`;
+    containerStyle.maxHeight = `${maxHeight}px`;
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
-      ref: ref,
-      style: divStyle,
-      children: children
+      style: containerStyle,
+      children: /*#__PURE__*/_jsx("div", {
+        ref: contentRef,
+        style: {
+          display: 'flow-root'
+        },
+        children: children
+      })
     }), needsTruncating && /*#__PURE__*/_jsx("div", {
       style: {
         width: '100%',
@@ -48,7 +65,7 @@ const TruncatedTextArea = ({
       children: /*#__PURE__*/_jsx(Link, {
         component: "button",
         onClick: toggleShowAll,
-        onBlur: () => setShowAll(false),
+        onBlur: collapseOnBlur ? () => setShowAll(false) : undefined,
         sx: {
           color: theme.palette.TwClrTxtBrand,
           textDecorationColor: `${theme.palette.TwClrTxtBrand}80`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terraware/web-components",
-  "version": "4.2.24-rc.0",
+  "version": "4.2.25",
   "author": "Terraformation Inc.",
   "license": "Apache-2.0",
   "repository": {