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

package/components/VirtualWalkthrough/AnnotationEditPane.js

@@ -1,203 +1,189 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { Box, Fade, ThemeProvider, Tooltip, Typography, useTheme } from "@mui/material";
-import { useStrings } from "../../strings/index.js";
-import PhotoChooser from "../PhotoChooser/index.js";
-import Textfield from "../Textfield/Textfield.js";
-const AnnotationEditPane = ({ visible, annotation, onUpdate, onTextFieldFocus, maxImages, onImagesChange })=>{
-    const theme = useTheme();
-    const strings = useStrings();
-    const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
-    const remainingImageSlots = Math.max(0, (maxImages ?? 0) - (annotation?.imageUrls?.length ?? 0));
-    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`
-            },
-            '& .textfield-value': {
-                backgroundColor: `${theme.palette.grey[800]} !important`,
-                borderColor: `${theme.palette.grey[700]} !important`
-            },
-            '& input': {
-                color: `${theme.palette.common.white} !important`
-            }
-        }), [
-        theme
-    ]);
-    const handleTitleChange = useCallback((value)=>{
-        onUpdate({
-            title: value
-        });
-    }, [
-        onUpdate
-    ]);
-    const handleBodyTextChange = useCallback((value)=>{
-        onUpdate({
-            bodyText: value
-        });
-    }, [
-        onUpdate
-    ]);
-    const handleLabelChange = useCallback((value)=>{
-        onUpdate({
-            label: value
-        });
-    }, [
-        onUpdate
-    ]);
-    const handleRemoveExistingImage = useCallback((index)=>{
-        const remaining = (annotation?.imageUrls ?? []).filter((_, i)=>i !== index);
-        onUpdate({
-            imageUrls: remaining
-        });
-    }, [
-        annotation,
-        onUpdate
-    ]);
-    const handleFocus = useCallback(()=>{
-        onTextFieldFocus?.(true);
-    }, [
-        onTextFieldFocus
-    ]);
-    const handleBlur = useCallback(()=>{
-        onTextFieldFocus?.(false);
-    }, [
-        onTextFieldFocus
-    ]);
-    if (!annotation) return null;
-    return /*#__PURE__*/ jsx(Box, {
+import { useMemo, useCallback } from 'react';
+import { useTheme, Box, Fade, Typography, Tooltip, ThemeProvider } from '@mui/material';
+import { useStrings } from '../../strings/index.js';
+import PhotoChooser from '../PhotoChooser/index.js';
+import TextField from '../Textfield/Textfield.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const AnnotationEditPane = ({
+  visible,
+  annotation,
+  onUpdate,
+  onTextFieldFocus,
+  maxImages,
+  onImagesChange
+}) => {
+  const theme = useTheme();
+  const strings = useStrings();
+  const showImageUpload = !!onImagesChange && !!maxImages && maxImages > 0;
+  const remainingImageSlots = Math.max(0, (maxImages ?? 0) - (annotation?.imageUrls?.length ?? 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`
+    },
+    '& .textfield-value': {
+      backgroundColor: `${theme.palette.grey[800]} !important`,
+      borderColor: `${theme.palette.grey[700]} !important`
+    },
+    '& input': {
+      color: `${theme.palette.common.white} !important`
+    }
+  }), [theme]);
+  const handleTitleChange = useCallback(value => {
+    onUpdate({
+      title: value
+    });
+  }, [onUpdate]);
+  const handleBodyTextChange = useCallback(value => {
+    onUpdate({
+      bodyText: value
+    });
+  }, [onUpdate]);
+  const handleLabelChange = useCallback(value => {
+    onUpdate({
+      label: value
+    });
+  }, [onUpdate]);
+  const handleRemoveExistingImage = useCallback(index => {
+    const remaining = (annotation?.imageUrls ?? []).filter((_, i) => i !== index);
+    onUpdate({
+      imageUrls: remaining
+    });
+  }, [annotation, onUpdate]);
+  const handleFocus = useCallback(() => {
+    onTextFieldFocus?.(true);
+  }, [onTextFieldFocus]);
+  const handleBlur = useCallback(() => {
+    onTextFieldFocus?.(false);
+  }, [onTextFieldFocus]);
+  if (!annotation) {
+    return null;
+  }
+  return /*#__PURE__*/jsx(Box, {
+    sx: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      pointerEvents: 'none',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      alignItems: 'flex-start',
+      padding: 2,
+      zIndex: 1001
+    },
+    children: /*#__PURE__*/jsx(Fade, {
+      in: visible,
+      timeout: 500,
+      children: /*#__PURE__*/jsx(Box, {
         sx: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            pointerEvents: 'none',
-            display: 'flex',
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
-            padding: 2,
-            zIndex: 1001
+          backgroundColor: theme.palette.grey[900],
+          color: theme.palette.common.white,
+          borderRadius: 2,
+          padding: 3,
+          minWidth: 320,
+          maxWidth: 400,
+          pointerEvents: 'auto'
         },
-        children: /*#__PURE__*/ jsx(Fade, {
-            in: visible,
-            timeout: 500,
-            children: /*#__PURE__*/ jsx(Box, {
-                sx: {
-                    backgroundColor: theme.palette.grey[900],
-                    color: theme.palette.common.white,
-                    borderRadius: 2,
-                    padding: 3,
-                    minWidth: 320,
-                    maxWidth: 400,
-                    pointerEvents: 'auto'
-                },
-                children: /*#__PURE__*/ jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 2
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(Typography, {
-                            sx: {
-                                fontWeight: 600
-                            },
-                            children: strings.EDIT_ANNOTATION
-                        }),
-                        /*#__PURE__*/ jsx(Tooltip, {
-                            title: strings.ANNOTATION_TITLE_TOOLTIP,
-                            placement: "top",
-                            disableFocusListener: true,
-                            children: /*#__PURE__*/ jsx(Textfield, {
-                                id: "annotation-title",
-                                label: strings.TITLE,
-                                type: "text",
-                                value: annotation.title,
-                                onChange: handleTitleChange,
-                                onFocus: handleFocus,
-                                onBlur: handleBlur,
-                                sx: textFieldSx,
-                                required: true
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Tooltip, {
-                            title: strings.ANNOTATION_DESCRIPTION_TOOLTIP,
-                            placement: "top",
-                            disableFocusListener: true,
-                            children: /*#__PURE__*/ jsx(Textfield, {
-                                id: "annotation-body",
-                                label: strings.DESCRIPTION,
-                                type: "text",
-                                value: annotation.bodyText ?? '',
-                                onChange: handleBodyTextChange,
-                                onFocus: handleFocus,
-                                onBlur: handleBlur,
-                                sx: textFieldSx
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(Tooltip, {
-                            title: strings.ANNOTATION_LABEL_TOOLTIP,
-                            placement: "top",
-                            disableFocusListener: true,
-                            children: /*#__PURE__*/ jsx(Textfield, {
-                                id: "annotation-label",
-                                label: strings.LABEL,
-                                type: "text",
-                                value: annotation.label ?? '',
-                                onChange: handleLabelChange,
-                                onFocus: handleFocus,
-                                onBlur: handleBlur,
-                                sx: textFieldSx
-                            })
-                        }),
-                        showImageUpload && /*#__PURE__*/ jsxs(Box, {
-                            children: [
-                                /*#__PURE__*/ jsx(Typography, {
-                                    sx: {
-                                        fontFamily: 'Inter',
-                                        fontSize: '14px',
-                                        fontWeight: 400,
-                                        lineHeight: '20px',
-                                        color: theme.palette.grey[400],
-                                        marginBottom: 0.5
-                                    },
-                                    children: strings.IMAGES
-                                }),
-                                /*#__PURE__*/ jsx(ThemeProvider, {
-                                    theme: photoChooserTheme,
-                                    children: /*#__PURE__*/ jsx(PhotoChooser, {
-                                        uploadText: strings.UPLOAD_FILES,
-                                        uploadDescription: strings.UPLOAD_FILES_DESCRIPTION,
-                                        chooseFileText: strings.CHOOSE_FILE,
-                                        replaceFileText: strings.REPLACE_FILE,
-                                        photoSelectedText: strings.FILE_SELECTED,
-                                        multipleSelection: (maxImages ?? 0) > 1,
-                                        maxPhotos: remainingImageSlots,
-                                        onPhotosChanged: (files)=>onImagesChange?.(files),
-                                        existingPhotos: annotation.imageUrls,
-                                        onExistingPhotoRemoved: handleRemoveExistingImage,
-                                        existingImagesLabel: strings.EXISTING,
-                                        newImagesLabel: strings.NEW
-                                    })
-                                })
-                            ]
-                        })
-                    ]
-                })
+        children: /*#__PURE__*/jsxs(Box, {
+          sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2
+          },
+          children: [/*#__PURE__*/jsx(Typography, {
+            sx: {
+              fontWeight: 600
+            },
+            children: strings.EDIT_ANNOTATION
+          }), /*#__PURE__*/jsx(Tooltip, {
+            title: strings.ANNOTATION_TITLE_TOOLTIP,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/jsx(TextField, {
+              id: "annotation-title",
+              label: strings.TITLE,
+              type: "text",
+              value: annotation.title,
+              onChange: handleTitleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx,
+              required: true
             })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            title: strings.ANNOTATION_DESCRIPTION_TOOLTIP,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/jsx(TextField, {
+              id: "annotation-body",
+              label: strings.DESCRIPTION,
+              type: "text",
+              value: annotation.bodyText ?? '',
+              onChange: handleBodyTextChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx
+            })
+          }), /*#__PURE__*/jsx(Tooltip, {
+            title: strings.ANNOTATION_LABEL_TOOLTIP,
+            placement: "top",
+            disableFocusListener: true,
+            children: /*#__PURE__*/jsx(TextField, {
+              id: "annotation-label",
+              label: strings.LABEL,
+              type: "text",
+              value: annotation.label ?? '',
+              onChange: handleLabelChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              sx: textFieldSx
+            })
+          }), showImageUpload && /*#__PURE__*/jsxs(Box, {
+            children: [/*#__PURE__*/jsx(Typography, {
+              sx: {
+                fontFamily: 'Inter',
+                fontSize: '14px',
+                fontWeight: 400,
+                lineHeight: '20px',
+                color: theme.palette.grey[400],
+                marginBottom: 0.5
+              },
+              children: strings.IMAGES
+            }), /*#__PURE__*/jsx(ThemeProvider, {
+              theme: photoChooserTheme,
+              children: /*#__PURE__*/jsx(PhotoChooser, {
+                uploadText: strings.UPLOAD_FILES,
+                uploadDescription: strings.UPLOAD_FILES_DESCRIPTION,
+                chooseFileText: strings.CHOOSE_FILE,
+                replaceFileText: strings.REPLACE_FILE,
+                photoSelectedText: strings.FILE_SELECTED,
+                multipleSelection: (maxImages ?? 0) > 1,
+                maxPhotos: remainingImageSlots,
+                onPhotosChanged: files => onImagesChange?.(files),
+                existingPhotos: annotation.imageUrls,
+                onExistingPhotoRemoved: handleRemoveExistingImage,
+                existingImagesLabel: strings.EXISTING,
+                newImagesLabel: strings.NEW
+              })
+            })]
+          })]
         })
-    });
+      })
+    })
+  });
 };
-const VirtualWalkthrough_AnnotationEditPane = AnnotationEditPane;
-export default VirtualWalkthrough_AnnotationEditPane;
+
+export { AnnotationEditPane as default };