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

package/components/PhotoChooser/index.js

@@ -1,169 +1,177 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Box, Typography, useTheme } from "@mui/material";
-import { useDeviceInfo } from "../../utils/index.js";
-import Button from "../Button/Button.js";
-import ErrorBox from "../ErrorBox/ErrorBox.js";
-import FileChooser from "../FileChooser/index.js";
+import { useState, useRef, useEffect } from 'react';
+import { useTheme, Box, Typography } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Button from '../Button/Button.js';
+import ErrorBox from '../ErrorBox/ErrorBox.js';
+import FileChooser from '../FileChooser/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 function PhotoChooser(props) {
-    const { title, description, onPhotosChanged, multipleSelection, error, selectedFile, uploadText, uploadMobileDescription, uploadDescription, photoSelectedText, chooseFileText, replaceFileText, maxPhotos, existingPhotos, onExistingPhotoRemoved, existingImagesLabel, newImagesLabel } = props;
-    const { isMobile } = useDeviceInfo();
-    const [files, setFiles] = useState([]);
-    const [filesData, setFilesData] = useState([]);
-    const divRef = useRef(null);
-    const theme = useTheme();
-    const removeFileAtIndex = (index)=>{
-        const filesList = [
-            ...files
-        ];
-        filesList.splice(index, 1);
-        setFiles(filesList);
+  const {
+    title,
+    description,
+    onPhotosChanged,
+    multipleSelection,
+    error,
+    selectedFile,
+    uploadText,
+    uploadMobileDescription,
+    uploadDescription,
+    photoSelectedText,
+    chooseFileText,
+    replaceFileText,
+    maxPhotos,
+    existingPhotos,
+    onExistingPhotoRemoved,
+    existingImagesLabel,
+    newImagesLabel
+  } = props;
+  const {
+    isMobile
+  } = useDeviceInfo();
+  const [files, setFiles] = useState([]);
+  const [filesData, setFilesData] = useState([]);
+  const divRef = useRef(null);
+  const theme = useTheme();
+  const removeFileAtIndex = index => {
+    const filesList = [...files];
+    filesList.splice(index, 1);
+    setFiles(filesList);
+  };
+  const onChoosingFiles = () => {
+    divRef.current?.focus();
+  };
+  useEffect(() => {
+    const filesDataList = files.map(file => URL.createObjectURL(file));
+    setFilesData(filesDataList);
+    onPhotosChanged(files);
+    return () => {
+      // we need to clean this up to avoid a memory leak
+      filesDataList.forEach(fileData => URL.revokeObjectURL(fileData));
     };
-    const onChoosingFiles = ()=>{
-        divRef.current?.focus();
-    };
-    useEffect(()=>{
-        const filesDataList = files.map((file)=>URL.createObjectURL(file));
-        setFilesData(filesDataList);
-        onPhotosChanged(files);
-        return ()=>{
-            filesDataList.forEach((fileData)=>URL.revokeObjectURL(fileData));
-        };
-    }, [
-        files
-    ]);
-    const renderThumbnail = ({ src, alt, onRemove, id })=>/*#__PURE__*/ jsxs(Box, {
-            position: "relative",
-            height: 122,
-            width: 122,
-            marginRight: isMobile ? theme.spacing(2) : theme.spacing(3),
-            marginTop: theme.spacing(1),
-            border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
-            children: [
-                onRemove && /*#__PURE__*/ jsx(Button, {
-                    icon: "iconTrashCan",
-                    id: id,
-                    onClick: onRemove,
-                    size: "small",
-                    style: {
-                        position: 'absolute',
-                        top: -10,
-                        right: -10,
-                        backgroundColor: theme.palette.TwClrBgDanger
-                    }
-                }),
-                /*#__PURE__*/ jsx("img", {
-                    height: "120px",
-                    src: src,
-                    alt: alt,
-                    style: {
-                        margin: 'auto auto',
-                        objectFit: 'contain',
-                        display: 'flex',
-                        maxWidth: '120px',
-                        maxHeight: '120px'
-                    }
-                })
-            ]
-        }, id ?? src);
-    return /*#__PURE__*/ jsxs(Box, {
-        ref: divRef,
-        tabIndex: 0,
+  }, [files]);
+  const renderThumbnail = ({
+    src,
+    alt,
+    onRemove,
+    id
+  }) => /*#__PURE__*/jsxs(Box, {
+    position: "relative",
+    height: 122,
+    width: 122,
+    marginRight: isMobile ? theme.spacing(2) : theme.spacing(3),
+    marginTop: theme.spacing(1),
+    border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
+    children: [onRemove && /*#__PURE__*/jsx(Button, {
+      icon: "iconTrashCan",
+      id: id,
+      onClick: onRemove,
+      size: "small",
+      style: {
+        position: 'absolute',
+        top: -10,
+        right: -10,
+        backgroundColor: theme.palette.TwClrBgDanger
+      }
+    }), /*#__PURE__*/jsx("img", {
+      height: "120px",
+      src: src,
+      alt: alt,
+      style: {
+        margin: 'auto auto',
+        objectFit: 'contain',
+        display: 'flex',
+        maxWidth: '120px',
+        maxHeight: '120px'
+      }
+    })]
+  }, id ?? src);
+  return /*#__PURE__*/jsxs(Box, {
+    ref: divRef,
+    tabIndex: 0,
+    sx: {
+      backgroundColor: theme.palette.TwClrBg,
+      borderRadius: theme.spacing(4),
+      padding: theme.spacing(3)
+    },
+    children: [/*#__PURE__*/jsxs(Box, {
+      children: [title && /*#__PURE__*/jsx(Typography, {
+        fontSize: 20,
+        fontWeight: 600,
+        children: title
+      }), description && /*#__PURE__*/jsx(Typography, {
+        fontSize: 14,
+        fontWeight: 400,
+        marginTop: theme.spacing(1),
+        marginBottom: theme.spacing(2),
+        children: Array.isArray(description) ? description.map((txt, i) => /*#__PURE__*/jsx("div", {
+          children: txt
+        }, i)) : description
+      }), error && /*#__PURE__*/jsx(ErrorBox, {
+        title: error.title,
+        text: error.text,
         sx: {
-            backgroundColor: theme.palette.TwClrBg,
-            borderRadius: theme.spacing(4),
-            padding: theme.spacing(3)
-        },
-        children: [
-            /*#__PURE__*/ jsxs(Box, {
-                children: [
-                    title && /*#__PURE__*/ jsx(Typography, {
-                        fontSize: 20,
-                        fontWeight: 600,
-                        children: title
-                    }),
-                    description && /*#__PURE__*/ jsx(Typography, {
-                        fontSize: 14,
-                        fontWeight: 400,
-                        marginTop: theme.spacing(1),
-                        marginBottom: theme.spacing(2),
-                        children: Array.isArray(description) ? description.map((txt, i)=>/*#__PURE__*/ jsx("div", {
-                                children: txt
-                            }, i)) : description
-                    }),
-                    error && /*#__PURE__*/ jsx(ErrorBox, {
-                        title: error.title,
-                        text: error.text,
-                        sx: {
-                            width: 'auto',
-                            marginBottom: theme.spacing(2),
-                            '&.mobile': {
-                                width: 'auto'
-                            }
-                        }
-                    }),
-                    existingPhotos && existingPhotos.length > 0 && /*#__PURE__*/ jsxs(Box, {
-                        marginBottom: theme.spacing(2),
-                        children: [
-                            existingImagesLabel && /*#__PURE__*/ jsx(Typography, {
-                                fontSize: 14,
-                                fontWeight: 400,
-                                marginBottom: theme.spacing(1),
-                                children: existingImagesLabel
-                            }),
-                            /*#__PURE__*/ jsx(Box, {
-                                display: "flex",
-                                flexDirection: "row",
-                                flexWrap: "wrap",
-                                children: existingPhotos.map((url, index)=>renderThumbnail({
-                                        src: url,
-                                        alt: url,
-                                        id: `existing-photo-remove-${index}`,
-                                        onRemove: onExistingPhotoRemoved ? ()=>onExistingPhotoRemoved(index) : void 0
-                                    }))
-                            })
-                        ]
-                    }),
-                    filesData.length > 0 && multipleSelection && /*#__PURE__*/ jsxs(Box, {
-                        marginBottom: theme.spacing(2),
-                        children: [
-                            newImagesLabel && /*#__PURE__*/ jsx(Typography, {
-                                fontSize: 14,
-                                fontWeight: 400,
-                                marginBottom: theme.spacing(1),
-                                children: newImagesLabel
-                            }),
-                            /*#__PURE__*/ jsx(Box, {
-                                display: "flex",
-                                flexDirection: "row",
-                                flexWrap: "wrap",
-                                children: filesData.map((fileData, index)=>renderThumbnail({
-                                        src: fileData,
-                                        alt: files[index]?.name,
-                                        onRemove: ()=>removeFileAtIndex(index)
-                                    }))
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(FileChooser, {
-                acceptFileType: "image/jpeg,image/png",
-                chooseFileText: chooseFileText,
-                files: files,
-                fileSelectedText: photoSelectedText,
-                iconName: "blobbyGrayIconImage",
-                maxFiles: maxPhotos,
-                multipleSelection: multipleSelection,
-                onChoosingFiles: onChoosingFiles,
-                replaceFileText: replaceFileText,
-                selectedFile: selectedFile,
-                setFiles: setFiles,
-                uploadDescription: uploadDescription,
-                uploadMobileDescription: uploadMobileDescription,
-                uploadText: uploadText
-            })
-        ]
-    });
+          width: 'auto',
+          marginBottom: theme.spacing(2),
+          '&.mobile': {
+            width: 'auto'
+          }
+        }
+      }), existingPhotos && existingPhotos.length > 0 && /*#__PURE__*/jsxs(Box, {
+        marginBottom: theme.spacing(2),
+        children: [existingImagesLabel && /*#__PURE__*/jsx(Typography, {
+          fontSize: 14,
+          fontWeight: 400,
+          marginBottom: theme.spacing(1),
+          children: existingImagesLabel
+        }), /*#__PURE__*/jsx(Box, {
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "wrap",
+          children: existingPhotos.map((url, index) => renderThumbnail({
+            src: url,
+            alt: url,
+            id: `existing-photo-remove-${index}`,
+            onRemove: onExistingPhotoRemoved ? () => onExistingPhotoRemoved(index) : undefined
+          }))
+        })]
+      }), filesData.length > 0 && multipleSelection && /*#__PURE__*/jsxs(Box, {
+        marginBottom: theme.spacing(2),
+        children: [newImagesLabel && /*#__PURE__*/jsx(Typography, {
+          fontSize: 14,
+          fontWeight: 400,
+          marginBottom: theme.spacing(1),
+          children: newImagesLabel
+        }), /*#__PURE__*/jsx(Box, {
+          display: "flex",
+          flexDirection: "row",
+          flexWrap: "wrap",
+          children: filesData.map((fileData, index) => renderThumbnail({
+            src: fileData,
+            alt: files[index]?.name,
+            onRemove: () => removeFileAtIndex(index)
+          }))
+        })]
+      })]
+    }), /*#__PURE__*/jsx(FileChooser, {
+      acceptFileType: "image/jpeg,image/png",
+      chooseFileText: chooseFileText,
+      files: files,
+      fileSelectedText: photoSelectedText,
+      iconName: "blobbyGrayIconImage",
+      maxFiles: maxPhotos,
+      multipleSelection: multipleSelection,
+      onChoosingFiles: onChoosingFiles,
+      replaceFileText: replaceFileText,
+      selectedFile: selectedFile,
+      setFiles: setFiles,
+      uploadDescription: uploadDescription,
+      uploadMobileDescription: uploadMobileDescription,
+      uploadText: uploadText
+    })]
+  });
 }
-export default PhotoChooser;
+
+export { PhotoChooser as default };

package/components/PhotosCarousel/PhotoSlide.js

@@ -1,33 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import BusySpinner from "../BusySpinner/index.js";
-const PhotoSlide = ({ photo, index, total, selected })=>{
-    const [isLoading, setIsLoading] = useState(true);
-    const finishLoading = ()=>setIsLoading(false);
-    return /*#__PURE__*/ jsxs("div", {
-        className: "embla__slide",
-        role: "group",
-        "aria-roledescription": "slide",
-        "aria-label": `${index + 1} of ${total}`,
-        children: [
-            isLoading && /*#__PURE__*/ jsx(BusySpinner, {
-                noBackground: true
-            }),
-            /*#__PURE__*/ jsx("a", {
-                href: photo.url,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                tabIndex: selected ? 0 : -1,
-                children: /*#__PURE__*/ jsx("img", {
-                    className: "embla__slide__img",
-                    src: photo.url,
-                    alt: photo.alt,
-                    onLoad: finishLoading,
-                    onError: finishLoading
-                })
-            })
-        ]
-    });
+import { useState } from 'react';
+import BusySpinner from '../BusySpinner/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const PhotoSlide = ({
+  photo,
+  index,
+  total,
+  selected
+}) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const finishLoading = () => setIsLoading(false);
+  return /*#__PURE__*/jsxs("div", {
+    className: "embla__slide",
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": `${index + 1} of ${total}`,
+    children: [isLoading && /*#__PURE__*/jsx(BusySpinner, {
+      noBackground: true
+    }), /*#__PURE__*/jsx("a", {
+      href: photo.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      tabIndex: selected ? 0 : -1,
+      children: /*#__PURE__*/jsx("img", {
+        className: "embla__slide__img",
+        src: photo.url,
+        alt: photo.alt,
+        onLoad: finishLoading,
+        onError: finishLoading
+      })
+    })]
+  });
 };
-const PhotosCarousel_PhotoSlide = PhotoSlide;
-export default PhotosCarousel_PhotoSlide;
+
+export { PhotoSlide as default };

package/components/PhotosCarousel/index.js

@@ -1,81 +1,86 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Box, Typography } from "@mui/material";
-import Icon from "../Icon/Icon.js";
-import PhotoSlide from "./PhotoSlide.js";
-import "./styles.scss";
-import usePhotosCarousel from "./usePhotosCarousel.js";
-const PhotosCarousel = (props)=>{
-    const { photos, showArrows = false, numbered, dots = true } = props;
-    const { emblaRef, currentSlide, scrollSnaps, prevButtonDisabled, nextButtonDisabled, scrollPrev, scrollNext, scrollTo, onKeyDown } = usePhotosCarousel(props);
-    return /*#__PURE__*/ jsxs(Box, {
-        className: "photos-carousel",
-        role: "region",
-        "aria-roledescription": "carousel",
-        "aria-label": "Photos",
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "embla",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "embla__viewport",
-                        ref: emblaRef,
-                        onKeyDown: onKeyDown,
-                        children: /*#__PURE__*/ jsx("div", {
-                            className: "embla__container",
-                            children: photos.map((photo, index)=>/*#__PURE__*/ jsx(PhotoSlide, {
-                                    photo: photo,
-                                    index: index,
-                                    total: photos.length,
-                                    selected: index === currentSlide
-                                }, `${photo.url}-${index}`))
-                        })
-                    }),
-                    showArrows && photos.length > 1 && /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: "embla__prev",
-                                "aria-label": "Previous photo",
-                                disabled: prevButtonDisabled,
-                                onClick: scrollPrev,
-                                children: /*#__PURE__*/ jsx(Icon, {
-                                    name: "caretLeft",
-                                    fillColor: "currentColor"
-                                })
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: "embla__next",
-                                "aria-label": "Next photo",
-                                disabled: nextButtonDisabled,
-                                onClick: scrollNext,
-                                children: /*#__PURE__*/ jsx(Icon, {
-                                    name: "caretRight",
-                                    fillColor: "currentColor"
-                                })
-                            })
-                        ]
-                    }),
-                    dots && /*#__PURE__*/ jsx("div", {
-                        className: "embla__dots",
-                        children: scrollSnaps.map((_, index)=>/*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                className: `embla__dot${index === currentSlide ? ' embla__dot--selected' : ''}`,
-                                "aria-label": `Go to photo ${index + 1}`,
-                                "aria-current": index === currentSlide ? 'true' : void 0,
-                                onClick: ()=>scrollTo(index)
-                            }, index))
-                    })
-                ]
-            }),
-            numbered && /*#__PURE__*/ jsx(Typography, {
-                className: "photo-numbering",
-                children: `${photos.length ? currentSlide + 1 : 0}/${photos.length}`
-            }),
-            photos[currentSlide]?.decoration
-        ]
-    });
+import 'react';
+import { Box, Typography } from '@mui/material';
+import Icon from '../Icon/Icon.js';
+import PhotoSlide from './PhotoSlide.js';
+import './styles.scss';
+import usePhotosCarousel from './usePhotosCarousel.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+const PhotosCarousel = props => {
+  const {
+    photos,
+    showArrows = false,
+    numbered,
+    dots = true
+  } = props;
+  const {
+    emblaRef,
+    currentSlide,
+    scrollSnaps,
+    prevButtonDisabled,
+    nextButtonDisabled,
+    scrollPrev,
+    scrollNext,
+    scrollTo,
+    onKeyDown
+  } = usePhotosCarousel(props);
+  return /*#__PURE__*/jsxs(Box, {
+    className: "photos-carousel",
+    role: "region",
+    "aria-roledescription": "carousel",
+    "aria-label": "Photos",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "embla",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "embla__viewport",
+        ref: emblaRef,
+        onKeyDown: onKeyDown,
+        children: /*#__PURE__*/jsx("div", {
+          className: "embla__container",
+          children: photos.map((photo, index) => /*#__PURE__*/jsx(PhotoSlide, {
+            photo: photo,
+            index: index,
+            total: photos.length,
+            selected: index === currentSlide
+          }, `${photo.url}-${index}`))
+        })
+      }), showArrows && photos.length > 1 && /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "embla__prev",
+          "aria-label": "Previous photo",
+          disabled: prevButtonDisabled,
+          onClick: scrollPrev,
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "caretLeft",
+            fillColor: "currentColor"
+          })
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "embla__next",
+          "aria-label": "Next photo",
+          disabled: nextButtonDisabled,
+          onClick: scrollNext,
+          children: /*#__PURE__*/jsx(Icon, {
+            name: "caretRight",
+            fillColor: "currentColor"
+          })
+        })]
+      }), dots && /*#__PURE__*/jsx("div", {
+        className: "embla__dots",
+        children: scrollSnaps.map((_, index) => /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: `embla__dot${index === currentSlide ? ' embla__dot--selected' : ''}`,
+          "aria-label": `Go to photo ${index + 1}`,
+          "aria-current": index === currentSlide ? 'true' : undefined,
+          onClick: () => scrollTo(index)
+        }, index))
+      })]
+    }), numbered && /*#__PURE__*/jsx(Typography, {
+      className: "photo-numbering",
+      children: `${photos.length ? currentSlide + 1 : 0}/${photos.length}`
+    }), photos[currentSlide]?.decoration]
+  });
 };
-const components_PhotosCarousel = PhotosCarousel;
-export default components_PhotosCarousel;
+
+export { PhotosCarousel as default };