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

package/components/PhotoChooser/index.js

@@ -1,177 +1,169 @@
-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';
-
+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";
 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 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 { 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);
     };
-  }, [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,
+    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,
         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) : 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
-    })]
-  });
+            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
+            })
+        ]
+    });
 }
-
-export { PhotoChooser as default };
+export default PhotoChooser;

package/components/PhotosCarousel/PhotoSlide.js

@@ -1,36 +1,33 @@
-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
-      })
-    })]
-  });
+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
+                })
+            })
+        ]
+    });
 };
-
-export { PhotoSlide as default };
+const PhotosCarousel_PhotoSlide = PhotoSlide;
+export default PhotosCarousel_PhotoSlide;

package/components/PhotosCarousel/index.js

@@ -1,86 +1,81 @@
-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]
-  });
+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
+        ]
+    });
 };
-
-export { PhotosCarousel as default };
+const components_PhotosCarousel = PhotosCarousel;
+export default components_PhotosCarousel;