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

package/components/VirtualWalkthrough/AnnotationEditPane.d.ts

@@ -7,6 +7,14 @@ export interface AnnotationEditPaneStrings {
     descriptionTooltip: string;
     label: string;
     labelTooltip: string;
+    images?: {
+        uploadTitle?: string;
+        uploadText?: string;
+        uploadDescription?: string;
+        chooseFileText?: string;
+        replaceFileText?: string;
+        photoSelectedText?: string;
+    };
 }
 interface AnnotationEditPaneProps {
     visible: boolean;
@@ -14,7 +22,10 @@ interface AnnotationEditPaneProps {
     strings: AnnotationEditPaneStrings;
     onUpdate: (updates: Partial<AnnotationProps>) => void;
     onTextFieldFocus?: (isFocused: boolean) => void;
+    maxImages?: number;
+    /** Fires with the current selection on every add/remove, including an initial empty emission on mount. */
+    onImagesChange?: (files: File[]) => void;
 }
-declare const AnnotationEditPane: ({ visible, annotation, strings, onUpdate, onTextFieldFocus }: AnnotationEditPaneProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const AnnotationEditPane: ({ visible, annotation, strings, onUpdate, onTextFieldFocus, maxImages, onImagesChange, }: AnnotationEditPaneProps) => import("react/jsx-runtime").JSX.Element | null;
 export default AnnotationEditPane;
 //# sourceMappingURL=AnnotationEditPane.d.ts.map

package/components/VirtualWalkthrough/AnnotationEditPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationEditPane.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationEditPane.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,OAAO,EAAE,yBAAyB,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACjD;AAED,QAAA,MAAM,kBAAkB,GAAI,8DAA8D,uBAAuB,mDA+HhH,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AnnotationEditPane.d.ts","sourceRoot":"","sources":["../../../src/components/VirtualWalkthrough/AnnotationEditPane.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,WAAW,yBAAyB;IACxC,cAAc,EAAE,MAAM,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE;QACP,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACH;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,eAAe,GAAG,IAAI,CAAC;IACnC,OAAO,EAAE,yBAAyB,CAAC;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IACtD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,0FAQzB,uBAAuB,mDA8KzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/components/VirtualWalkthrough/AnnotationEditPane.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
-import { Box, Fade, Tooltip, Typography, useTheme } from '@mui/material';
+import { Box, Fade, ThemeProvider, Tooltip, Typography, useTheme } from '@mui/material';
+import PhotoChooser from '../PhotoChooser';
 import Textfield from '../Textfield/Textfield';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnnotationEditPane = ({
@@ -7,9 +8,23 @@ const AnnotationEditPane = ({
   annotation,
   strings,
   onUpdate,
-  onTextFieldFocus
+  onTextFieldFocus,
+  maxImages,
+  onImagesChange
 }) => {
   const theme = useTheme();
+  const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
+
+  // Recolor PhotoChooser's Terraware tokens to match the dark edit pane instead of its default light card.
+  const photoChooserTheme = useMemo(() => ({
+    ...theme,
+    palette: {
+      ...theme.palette,
+      TwClrBg: 'transparent',
+      TwClrBrdrTertiary: theme.palette.grey[700],
+      TwClrTxt: theme.palette.grey[300]
+    }
+  }), [theme]);
   const textFieldSx = useMemo(() => ({
     '& .textfield-label': {
       color: `${theme.palette.grey[400]} !important`
@@ -127,6 +142,30 @@ const AnnotationEditPane = ({
               onBlur: handleBlur,
               sx: textFieldSx
             })
+          }), showImageUpload && /*#__PURE__*/_jsxs(Box, {
+            children: [strings.images?.uploadTitle && /*#__PURE__*/_jsx(Typography, {
+              sx: {
+                fontFamily: 'Inter',
+                fontSize: '14px',
+                fontWeight: 400,
+                lineHeight: '20px',
+                color: theme.palette.grey[400],
+                marginBottom: 0.5
+              },
+              children: strings.images.uploadTitle
+            }), /*#__PURE__*/_jsx(ThemeProvider, {
+              theme: photoChooserTheme,
+              children: /*#__PURE__*/_jsx(PhotoChooser, {
+                uploadText: strings.images?.uploadText,
+                uploadDescription: strings.images?.uploadDescription,
+                chooseFileText: strings.images?.chooseFileText,
+                replaceFileText: strings.images?.replaceFileText,
+                photoSelectedText: strings.images?.photoSelectedText,
+                multipleSelection: (maxImages ?? 0) > 1,
+                maxPhotos: maxImages,
+                onPhotosChanged: files => onImagesChange?.(files)
+              })
+            })]
           })]
         })
       })

package/package.json

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