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

package/components/FileChooser/index.js

@@ -1,138 +1,120 @@
-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';
-
+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";
 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);
-      }
-    }
-    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'
+    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);
         }
-      },
-      children: template.text
-    })]
-  });
+        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
+            })
+        ]
+    });
 }
-
-export { FileChooser as default };
+export default FileChooser;

package/components/FormBottomBar/index.js

@@ -1,87 +1,78 @@
-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';
-
+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";
 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",
-    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,
+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: {
-          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'
-        }
-      })]
-    })]
-  });
+            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'
+                        }
+                    })
+                ]
+            })
+        ]
+    });
 }
-
-export { FormBottomBar as default };
+export default FormBottomBar;

package/components/Icon/Icon.js

@@ -1,21 +1,13 @@
-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
-  });
+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
+    });
 }
-
-export { Icon as default };
+export default Icon;