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

package/components/FileChooser/index.js

@@ -1,120 +1,138 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { Box, Link, Typography, useTheme } from "@mui/material";
-import { useDeviceInfo } from "../../utils/index.js";
-import Button from "../Button/Button.js";
-import Icon from "../Icon/Icon.js";
+import { useRef, useState, useEffect } from 'react';
+import { useTheme, Box, Typography, Link } from '@mui/material';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Button from '../Button/Button.js';
+import Icon from '../Icon/Icon.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 function FileChooser(props) {
-    const { acceptFileType, chooseFileText, files, fileSelectedText, iconName, maxFiles, multipleSelection, onChoosingFiles, replaceFileText, selectedFile, setFiles, template, uploadDescription, uploadMobileDescription, uploadText } = props;
-    const { isMobile } = useDeviceInfo();
-    const inputRef = useRef(null);
-    const theme = useTheme();
-    const [editing, setEditing] = useState(false);
-    useEffect(()=>{
-        setEditing(!!selectedFile);
-    }, [
-        selectedFile
-    ]);
-    const addFiles = (fileList)=>{
-        const newFiles = [];
-        for(let i = 0; i < fileList.length; i++){
-            const fileItem = fileList.item(i);
-            if (fileItem) newFiles.push(fileItem);
+  const {
+    acceptFileType,
+    chooseFileText,
+    files,
+    fileSelectedText,
+    iconName,
+    maxFiles,
+    multipleSelection,
+    onChoosingFiles,
+    replaceFileText,
+    selectedFile,
+    setFiles,
+    template,
+    uploadDescription,
+    uploadMobileDescription,
+    uploadText
+  } = props;
+  const {
+    isMobile
+  } = useDeviceInfo();
+  const inputRef = useRef(null);
+  const theme = useTheme();
+  const [editing, setEditing] = useState(false);
+  useEffect(() => {
+    setEditing(!!selectedFile);
+  }, [selectedFile]);
+  const addFiles = fileList => {
+    const newFiles = [];
+    for (let i = 0; i < fileList.length; i++) {
+      const fileItem = fileList.item(i);
+      if (fileItem) {
+        newFiles.push(fileItem);
+      }
+    }
+    if (newFiles.length) {
+      setFiles([...(files ?? []), ...newFiles].slice(0, maxFiles));
+    }
+  };
+  const dropHandler = event => {
+    event.preventDefault();
+    addFiles(event.dataTransfer.files);
+  };
+  const enableDropping = event => {
+    event.preventDefault();
+  };
+  const onChooseFileHandler = () => {
+    inputRef.current?.click();
+    onChoosingFiles?.();
+  };
+  const onFileChosen = event => {
+    if (editing) {
+      setEditing(false);
+    }
+    if (event.currentTarget.files) {
+      addFiles(event.currentTarget.files);
+    }
+  };
+  return /*#__PURE__*/jsxs(Box, {
+    onDrop: dropHandler,
+    onDragOver: enableDropping,
+    border: `1px dashed ${theme.palette.TwClrBrdrTertiary}`,
+    borderRadius: theme.spacing(2),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: theme.spacing(3),
+    sx: {
+      background: theme.palette.TwClrBg
+    },
+    children: [iconName && /*#__PURE__*/jsx(Icon, {
+      name: iconName,
+      size: "xlarge",
+      style: {
+        height: '120px',
+        width: '120px'
+      }
+    }), /*#__PURE__*/jsx(Typography, {
+      color: theme.palette.TwClrTxt,
+      fontSize: 14,
+      fontWeight: 600,
+      margin: theme.spacing(0, 0, 1),
+      children: !editing && ((files || []).length > 0 && !multipleSelection ? files?.[0].name : uploadText)
+    }), /*#__PURE__*/jsx(Typography, {
+      color: theme.palette.TwClrTxt,
+      fontSize: 12,
+      fontWeight: 400,
+      margin: 0,
+      children: (editing || (files || []).length > 0) && !multipleSelection ? fileSelectedText : isMobile && uploadMobileDescription ? uploadMobileDescription : uploadDescription
+    }), /*#__PURE__*/jsx("input", {
+      type: "file",
+      ref: inputRef,
+      onChange: onFileChosen,
+      accept: acceptFileType,
+      multiple: multipleSelection || false,
+      value: '',
+      style: {
+        display: 'none'
+      }
+    }), /*#__PURE__*/jsx(Button, {
+      onClick: onChooseFileHandler,
+      disabled: maxFiles !== undefined ? (files || []).length >= maxFiles : false,
+      label: !multipleSelection && ((files || []).length === 1 || editing) ? replaceFileText : chooseFileText,
+      priority: "secondary",
+      type: "passive",
+      sx: {
+        marginTop: theme.spacing(3)
+      }
+    }), template && /*#__PURE__*/jsx(Link, {
+      href: template.url,
+      target: "_blank",
+      sx: {
+        color: theme.palette.TwClrTxtBrand,
+        fontFamily: 'Inter',
+        fontSize: '12px',
+        fontWeight: 500,
+        lineHeight: '16px',
+        marginTop: theme.spacing(2),
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
         }
-        if (newFiles.length) setFiles([
-            ...files ?? [],
-            ...newFiles
-        ].slice(0, maxFiles));
-    };
-    const dropHandler = (event)=>{
-        event.preventDefault();
-        addFiles(event.dataTransfer.files);
-    };
-    const enableDropping = (event)=>{
-        event.preventDefault();
-    };
-    const onChooseFileHandler = ()=>{
-        inputRef.current?.click();
-        onChoosingFiles?.();
-    };
-    const onFileChosen = (event)=>{
-        if (editing) setEditing(false);
-        if (event.currentTarget.files) addFiles(event.currentTarget.files);
-    };
-    return /*#__PURE__*/ jsxs(Box, {
-        onDrop: dropHandler,
-        onDragOver: enableDropping,
-        border: `1px dashed ${theme.palette.TwClrBrdrTertiary}`,
-        borderRadius: theme.spacing(2),
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        padding: theme.spacing(3),
-        sx: {
-            background: theme.palette.TwClrBg
-        },
-        children: [
-            iconName && /*#__PURE__*/ jsx(Icon, {
-                name: iconName,
-                size: "xlarge",
-                style: {
-                    height: '120px',
-                    width: '120px'
-                }
-            }),
-            /*#__PURE__*/ jsx(Typography, {
-                color: theme.palette.TwClrTxt,
-                fontSize: 14,
-                fontWeight: 600,
-                margin: theme.spacing(0, 0, 1),
-                children: !editing && ((files || []).length > 0 && !multipleSelection ? files?.[0].name : uploadText)
-            }),
-            /*#__PURE__*/ jsx(Typography, {
-                color: theme.palette.TwClrTxt,
-                fontSize: 12,
-                fontWeight: 400,
-                margin: 0,
-                children: (editing || (files || []).length > 0) && !multipleSelection ? fileSelectedText : isMobile && uploadMobileDescription ? uploadMobileDescription : uploadDescription
-            }),
-            /*#__PURE__*/ jsx("input", {
-                type: "file",
-                ref: inputRef,
-                onChange: onFileChosen,
-                accept: acceptFileType,
-                multiple: multipleSelection || false,
-                value: '',
-                style: {
-                    display: 'none'
-                }
-            }),
-            /*#__PURE__*/ jsx(Button, {
-                onClick: onChooseFileHandler,
-                disabled: void 0 !== maxFiles ? (files || []).length >= maxFiles : false,
-                label: !multipleSelection && (1 === (files || []).length || editing) ? replaceFileText : chooseFileText,
-                priority: "secondary",
-                type: "passive",
-                sx: {
-                    marginTop: theme.spacing(3)
-                }
-            }),
-            template && /*#__PURE__*/ jsx(Link, {
-                href: template.url,
-                target: "_blank",
-                sx: {
-                    color: theme.palette.TwClrTxtBrand,
-                    fontFamily: 'Inter',
-                    fontSize: '12px',
-                    fontWeight: 500,
-                    lineHeight: '16px',
-                    marginTop: theme.spacing(2),
-                    textDecoration: 'none',
-                    '&:hover': {
-                        textDecoration: 'underline'
-                    }
-                },
-                children: template.text
-            })
-        ]
-    });
+      },
+      children: template.text
+    })]
+  });
 }
-export default FileChooser;
+
+export { FileChooser as default };

package/components/FormBottomBar/index.js

@@ -1,78 +1,87 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { AppBar, Box, useTheme } from "@mui/material";
-import useDeviceInfo from "../../utils/useDeviceInfo.js";
-import Button from "../Button/Button.js";
+import 'react';
+import { useTheme, AppBar, Box } from '@mui/material';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Button from '../Button/Button.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 const defaultDesktopOffset = '200px';
-function FormBottomBar({ cancelID, saveID, onCancel, cancelButtonText, saveButtonText, saveDisabled, onSave, additionalRightButtons, desktopOffset }) {
-    const { isMobile, isDesktop } = useDeviceInfo();
-    const theme = useTheme();
-    return /*#__PURE__*/ jsxs(AppBar, {
-        position: "fixed",
-        color: "primary",
+function FormBottomBar({
+  cancelID,
+  saveID,
+  onCancel,
+  cancelButtonText,
+  saveButtonText,
+  saveDisabled,
+  onSave,
+  additionalRightButtons,
+  desktopOffset
+}) {
+  const {
+    isMobile,
+    isDesktop
+  } = useDeviceInfo();
+  const theme = useTheme();
+  return /*#__PURE__*/jsxs(AppBar, {
+    position: "fixed",
+    color: "primary",
+    style: {
+      top: 'auto',
+      bottom: 0,
+      right: 'auto',
+      left: isDesktop ? 'auto' : 0
+    },
+    sx: {
+      background: `linear-gradient(to right, ${theme.palette.TwClrBaseGray025}00,` + `${theme.palette.TwClrBaseGray025}80, ${theme.palette.TwClrBaseGray025}80,` + `${theme.palette.TwClrBaseGray025}00)`,
+      backdropFilter: 'blur(16px)',
+      borderTop: '1px solid',
+      borderImage: `linear-gradient(to right, ${theme.palette.TwClrBaseGray300}00,` + `${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}FF,` + `${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}00) 1`,
+      boxShadow: 'none',
+      justifyContent: 'space-between',
+      display: 'flex',
+      flexDirection: isMobile ? 'column-reverse' : 'row',
+      padding: isDesktop ? '16px 24px' : `16px 24px ${theme.spacing(5)}`,
+      width: isDesktop ? `calc(100% - ${desktopOffset || defaultDesktopOffset})` : '100%',
+      zIndex: 1000
+    },
+    children: [/*#__PURE__*/jsx(Button, {
+      id: cancelID || 'cancelBottomBar',
+      size: "medium",
+      label: cancelButtonText,
+      onClick: onCancel,
+      priority: "secondary",
+      type: "passive",
+      style: {
+        marginTop: isMobile ? theme.spacing(1) : 'auto',
+        marginRight: theme.spacing(1)
+      }
+    }), /*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: 'flex',
+        flexDirection: isMobile ? 'column-reverse' : 'row'
+      },
+      children: [additionalRightButtons && additionalRightButtons.map(btn => /*#__PURE__*/jsx(Button, {
+        id: btn.id,
+        priority: btn.buttonPriority,
+        type: btn.buttonType,
+        size: "medium",
+        label: btn.text,
+        onClick: btn.onClick,
+        disabled: btn.disabled,
         style: {
-            top: 'auto',
-            bottom: 0,
-            right: 'auto',
-            left: isDesktop ? 'auto' : 0
-        },
-        sx: {
-            background: `linear-gradient(to right, ${theme.palette.TwClrBaseGray025}00,${theme.palette.TwClrBaseGray025}80, ${theme.palette.TwClrBaseGray025}80,${theme.palette.TwClrBaseGray025}00)`,
-            backdropFilter: 'blur(16px)',
-            borderTop: '1px solid',
-            borderImage: `linear-gradient(to right, ${theme.palette.TwClrBaseGray300}00,${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}FF,${theme.palette.TwClrBaseGray300}FF, ${theme.palette.TwClrBaseGray300}00) 1`,
-            boxShadow: 'none',
-            justifyContent: 'space-between',
-            display: 'flex',
-            flexDirection: isMobile ? 'column-reverse' : 'row',
-            padding: isDesktop ? '16px 24px' : `16px 24px ${theme.spacing(5)}`,
-            width: isDesktop ? `calc(100% - ${desktopOffset || defaultDesktopOffset})` : '100%',
-            zIndex: 1000
-        },
-        children: [
-            /*#__PURE__*/ jsx(Button, {
-                id: cancelID || 'cancelBottomBar',
-                size: "medium",
-                label: cancelButtonText,
-                onClick: onCancel,
-                priority: "secondary",
-                type: "passive",
-                style: {
-                    marginTop: isMobile ? theme.spacing(1) : 'auto',
-                    marginRight: theme.spacing(1)
-                }
-            }),
-            /*#__PURE__*/ jsxs(Box, {
-                sx: {
-                    display: 'flex',
-                    flexDirection: isMobile ? 'column-reverse' : 'row'
-                },
-                children: [
-                    additionalRightButtons && additionalRightButtons.map((btn)=>/*#__PURE__*/ jsx(Button, {
-                            id: btn.id,
-                            priority: btn.buttonPriority,
-                            type: btn.buttonType,
-                            size: "medium",
-                            label: btn.text,
-                            onClick: btn.onClick,
-                            disabled: btn.disabled,
-                            style: {
-                                marginTop: isMobile ? theme.spacing(1) : 'auto'
-                            }
-                        }, btn.id)),
-                    /*#__PURE__*/ jsx(Button, {
-                        id: saveID || 'saveBottomBar',
-                        size: "medium",
-                        label: saveButtonText,
-                        onClick: onSave,
-                        disabled: saveDisabled,
-                        style: {
-                            marginTop: isMobile ? theme.spacing(1) : 'auto'
-                        }
-                    })
-                ]
-            })
-        ]
-    });
+          marginTop: isMobile ? theme.spacing(1) : 'auto'
+        }
+      }, btn.id)), /*#__PURE__*/jsx(Button, {
+        id: saveID || 'saveBottomBar',
+        size: "medium",
+        label: saveButtonText,
+        onClick: onSave,
+        disabled: saveDisabled,
+        style: {
+          marginTop: isMobile ? theme.spacing(1) : 'auto'
+        }
+      })]
+    })]
+  });
 }
-export default FormBottomBar;
+
+export { FormBottomBar as default };

package/components/Icon/Icon.js

@@ -1,13 +1,21 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import icons from "./icons/index.js";
-import "./styles.scss";
-function Icon({ size = 'small', name, className, fillColor, style }) {
-    const SVGComponent = icons[name];
-    return /*#__PURE__*/ jsx(SVGComponent, {
-        className: `tw-icon tw-icon--${size} ${className ?? ''}`,
-        fill: fillColor,
-        style: style
-    });
+import 'react';
+import icons from './icons/index.js';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
+function Icon({
+  size = 'small',
+  name,
+  className,
+  fillColor,
+  style
+}) {
+  const SVGComponent = icons[name];
+  return /*#__PURE__*/jsx(SVGComponent, {
+    className: `tw-icon tw-icon--${size} ${className ?? ''}`,
+    fill: fillColor,
+    style: style
+  });
 }
-export default Icon;
+
+export { Icon as default };