@terraware/web-components 4.2.13 → 4.2.14-rc.1

package/components/PageForm/index.js

@@ -1,45 +1,40 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PageForm;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _useDeviceInfo = _interopRequireDefault(require("../../utils/useDeviceInfo"));
-var _BusySpinner = _interopRequireDefault(require("../BusySpinner"));
-var _FormBottomBar = _interopRequireDefault(require("../FormBottomBar"));
-const _excluded = ["children", "className", "hideEdit", "onSave", "style"];
-function PageForm(props) {
+import React, { useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import useDeviceInfo from '../../utils/useDeviceInfo';
+import BusySpinner from '../BusySpinner';
+import FormBottomBar from '../FormBottomBar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PageForm(props) {
   const {
-      children,
-      className,
-      hideEdit,
-      onSave,
-      style
-    } = props,
-    bottomBarProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  const theme = (0, _material.useTheme)();
+    children,
+    className,
+    hideEdit,
+    onSave,
+    style,
+    ...bottomBarProps
+  } = props;
+  const theme = useTheme();
   const {
     isMobile
-  } = (0, _useDeviceInfo.default)();
-  const [processing, setProcessing] = (0, _react.useState)(false);
+  } = useDeviceInfo();
+  const [processing, setProcessing] = useState(false);
   const handleSave = async () => {
     setProcessing(true);
     // eslint-disable-next-line @typescript-eslint/await-thenable
     await onSave(); // <-- we want all onSaves to be async
     setProcessing(false);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, processing && /*#__PURE__*/_react.default.createElement(_BusySpinner.default, {
-    withSkrim: true
-  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    className: className,
-    paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
-    style: style
-  }, children), !hideEdit && /*#__PURE__*/_react.default.createElement(_FormBottomBar.default, Object.assign({
-    onSave: handleSave
-  }, bottomBarProps)));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [processing && /*#__PURE__*/_jsx(BusySpinner, {
+      withSkrim: true
+    }), /*#__PURE__*/_jsx(Box, {
+      className: className,
+      paddingBottom: hideEdit ? theme.spacing(4) : theme.spacing(isMobile ? 25 : 15),
+      style: style,
+      children: children
+    }), !hideEdit && /*#__PURE__*/_jsx(FormBottomBar, {
+      onSave: handleSave,
+      ...bottomBarProps
+    })]
+  });
 }

package/components/PhotoChooser/index.js

@@ -1,18 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PhotoChooser;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _ErrorBox = _interopRequireDefault(require("../ErrorBox/ErrorBox"));
-var _FileChooser = _interopRequireDefault(require("../FileChooser"));
-function PhotoChooser(props) {
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Typography, useTheme } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Button from '../Button/Button';
+import ErrorBox from '../ErrorBox/ErrorBox';
+import FileChooser from '../FileChooser';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PhotoChooser(props) {
   const {
     title,
     description,
@@ -30,21 +23,20 @@ function PhotoChooser(props) {
   } = props;
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
-  const [files, setFiles] = (0, _react.useState)([]);
-  const [filesData, setFilesData] = (0, _react.useState)([]);
-  const divRef = (0, _react.useRef)(null);
-  const theme = (0, _material.useTheme)();
+  } = 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 = () => {
-    var _divRef$current;
-    (_divRef$current = divRef.current) === null || _divRef$current === void 0 ? void 0 : _divRef$current.focus();
+    divRef.current?.focus();
   };
-  (0, _react.useEffect)(() => {
+  useEffect(() => {
     const filesDataList = files.map(file => URL.createObjectURL(file));
     setFilesData(filesDataList);
     onPhotosChanged(files);
@@ -53,85 +45,88 @@ function PhotoChooser(props) {
       filesDataList.forEach(fileData => URL.revokeObjectURL(fileData));
     };
   }, [files]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     ref: divRef,
     tabIndex: 0,
     sx: {
       backgroundColor: theme.palette.TwClrBg,
       borderRadius: theme.spacing(4),
       padding: theme.spacing(3)
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, null, title && /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    fontSize: 20,
-    fontWeight: 600
-  }, title), description && /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    fontSize: 14,
-    fontWeight: 400,
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(2)
-  }, Array.isArray(description) ? description.map((txt, i) => /*#__PURE__*/_react.default.createElement("div", {
-    key: i
-  }, txt)) : description), error && /*#__PURE__*/_react.default.createElement(_ErrorBox.default, {
-    title: error.title,
-    text: error.text,
-    sx: {
-      width: 'auto',
-      marginBottom: theme.spacing(2),
-      '&.mobile': {
-        width: 'auto'
-      }
-    }
-  }), filesData.length > 0 && multipleSelection && /*#__PURE__*/_react.default.createElement(_material.Box, {
-    display: "flex",
-    flexDirection: "row",
-    flexWrap: "wrap",
-    marginBottom: theme.spacing(2)
-  }, filesData.map((fileData, index) => {
-    var _files$index;
-    return /*#__PURE__*/_react.default.createElement(_material.Box, {
-      key: index,
-      position: "relative",
-      height: 122,
-      width: 122,
-      marginRight: isMobile ? theme.spacing(2) : theme.spacing(3),
-      marginTop: theme.spacing(1),
-      border: "1px solid ".concat(theme.palette.TwClrBrdrTertiary)
-    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-      icon: "iconTrashCan",
-      onClick: () => removeFileAtIndex(index),
-      size: "small",
-      style: {
-        position: 'absolute',
-        top: -10,
-        right: -10,
-        backgroundColor: theme.palette.TwClrBgDanger
-      }
-    }), /*#__PURE__*/_react.default.createElement("img", {
-      height: "120px",
-      src: fileData,
-      alt: (_files$index = files[index]) === null || _files$index === void 0 ? void 0 : _files$index.name,
-      style: {
-        margin: 'auto auto',
-        objectFit: 'contain',
-        display: 'flex',
-        maxWidth: '120px',
-        maxHeight: '120px'
-      }
-    }));
-  }))), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
-    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
-  }));
+    },
+    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'
+          }
+        }
+      }), filesData.length > 0 && multipleSelection && /*#__PURE__*/_jsx(Box, {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        marginBottom: theme.spacing(2),
+        children: filesData.map((fileData, index) => /*#__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: [/*#__PURE__*/_jsx(Button, {
+            icon: "iconTrashCan",
+            onClick: () => removeFileAtIndex(index),
+            size: "small",
+            style: {
+              position: 'absolute',
+              top: -10,
+              right: -10,
+              backgroundColor: theme.palette.TwClrBgDanger
+            }
+          }), /*#__PURE__*/_jsx("img", {
+            height: "120px",
+            src: fileData,
+            alt: files[index]?.name,
+            style: {
+              margin: 'auto auto',
+              objectFit: 'contain',
+              display: 'flex',
+              maxWidth: '120px',
+              maxHeight: '120px'
+            }
+          })]
+        }, 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
+    })]
+  });
 }

package/components/Pill/index.js

@@ -1,15 +1,9 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Pill;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function Pill(props) {
+import React from 'react';
+import { IconButton } from '@mui/material';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+export default function Pill(props) {
   const {
     id,
     label,
@@ -18,29 +12,33 @@ function Pill(props) {
     onRemove,
     className
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pill ".concat(className !== null && className !== void 0 ? className : ''),
+  return /*#__PURE__*/_jsxs("div", {
+    className: `pill ${className ?? ''}`,
     onClick: ev => {
       ev.stopPropagation();
       if (onClick) {
         onClick(id);
       }
-    }
-  }, label && /*#__PURE__*/_react.default.createElement("p", {
-    className: "label"
-  }, label, ":"), /*#__PURE__*/_react.default.createElement("p", {
-    className: "value".concat(label ? '' : ' value--no-label')
-  }, value), onRemove ? /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: ev => {
-      ev.stopPropagation();
-      onRemove(id);
     },
-    className: "iconContainer",
-    "aria-label": "remove"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "close",
-    className: "icon"
-  })) : /*#__PURE__*/_react.default.createElement("div", {
-    className: "spacer"
-  }));
+    children: [label && /*#__PURE__*/_jsxs("p", {
+      className: "label",
+      children: [label, ":"]
+    }), /*#__PURE__*/_jsx("p", {
+      className: `value${label ? '' : ' value--no-label'}`,
+      children: value
+    }), onRemove ? /*#__PURE__*/_jsx(IconButton, {
+      onClick: ev => {
+        ev.stopPropagation();
+        onRemove(id);
+      },
+      className: "iconContainer",
+      "aria-label": "remove",
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "close",
+        className: "icon"
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "spacer"
+    })]
+  });
 }

package/components/PillList/index.js

@@ -1,29 +1,23 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PillList;
-var _react = _interopRequireDefault(require("react"));
-var _Pill = _interopRequireDefault(require("../Pill"));
-require("./styles.scss");
-function PillList(props) {
+import React from 'react';
+import Pill from '../Pill';
+import './styles.scss';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PillList(props) {
   const {
     data,
     onClick,
     onRemove,
     className
   } = props;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "pill-list"
-  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_Pill.default, {
-    key: index,
-    id: item.id,
-    label: item.label,
-    value: item.value,
-    onClick: item.onClick || onClick,
-    onRemove: item.onRemove || onRemove,
-    className: item.className || className
-  })));
+  return /*#__PURE__*/_jsx("div", {
+    className: "pill-list",
+    children: data.map((item, index) => /*#__PURE__*/_jsx(Pill, {
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      onClick: item.onClick || onClick,
+      onRemove: item.onRemove || onRemove,
+      className: item.className || className
+    }, index))
+  });
 }

package/components/PlacementWrapper/index.js

@@ -1,12 +1,6 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
+import React, { useMemo } from 'react';
+import { Box, useTheme } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A component that allows simple management of the location of an object around some children
  *
@@ -17,14 +11,13 @@ var _material = require("@mui/material");
  * </PlacementWrapper>
  * ```
  */
-const PlacementWrapper = _ref => {
-  let {
-    placedObject,
-    children,
-    objectPlacement
-  } = _ref;
-  const theme = (0, _material.useTheme)();
-  const outsideDirection = (0, _react.useMemo)(() => {
+const PlacementWrapper = ({
+  placedObject,
+  children,
+  objectPlacement
+}) => {
+  const theme = useTheme();
+  const outsideDirection = useMemo(() => {
     if (!objectPlacement) {
       return 'column';
     }
@@ -38,7 +31,7 @@ const PlacementWrapper = _ref => {
       return 'row-reverse';
     }
   }, [objectPlacement]);
-  const insideAlignment = (0, _react.useMemo)(() => {
+  const insideAlignment = useMemo(() => {
     if (!objectPlacement) {
       return 'center';
     }
@@ -50,14 +43,16 @@ const PlacementWrapper = _ref => {
       return 'center';
     }
   }, [objectPlacement]);
-  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     display: 'flex',
     flexDirection: outsideDirection,
     flexGrow: 1,
-    marginBottom: theme.spacing(2)
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    alignSelf: insideAlignment,
-    margin: theme.spacing(1)
-  }, placedObject), children);
+    marginBottom: theme.spacing(2),
+    children: [/*#__PURE__*/_jsx(Box, {
+      alignSelf: insideAlignment,
+      margin: theme.spacing(1),
+      children: placedObject
+    }), children]
+  });
 };
-var _default = exports.default = PlacementWrapper;
+export default PlacementWrapper;

package/components/PopoverMenu/Popover.js

@@ -1,13 +1,7 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = PopoverDropdown;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function PopoverDropdown(props) {
+import React from 'react';
+import { Divider, MenuItem, MenuList, Popover, useTheme } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function PopoverDropdown(props) {
   const {
     sections,
     handleClick,
@@ -19,7 +13,7 @@ function PopoverDropdown(props) {
     onClose,
     container
   } = props;
-  const theme = (0, _material.useTheme)();
+  const theme = useTheme();
   const handleClose = () => {
     if (onClose) {
       onClose();
@@ -41,7 +35,7 @@ function PopoverDropdown(props) {
       backgroundColor: theme.palette.TwClrBgSelectedGhostActive
     }
   });
-  return /*#__PURE__*/_react.default.createElement(_material.Popover, {
+  return /*#__PURE__*/_jsx(Popover, {
     id: "simple-popover",
     container: container,
     open: Boolean(anchorElement),
@@ -49,40 +43,42 @@ function PopoverDropdown(props) {
     onClose: handleClose,
     anchorOrigin: {
       vertical: 'bottom',
-      horizontal: menuAlign !== null && menuAlign !== void 0 ? menuAlign : 'left'
+      horizontal: menuAlign ?? 'left'
     },
     transformOrigin: {
       vertical: 'top',
-      horizontal: menuAlign !== null && menuAlign !== void 0 ? menuAlign : 'left'
+      horizontal: menuAlign ?? 'left'
     },
     sx: {
       '& .MuiPaper-root': {
         borderRadius: '8px',
         boxShadow: 'none',
-        border: "1px solid ".concat(theme.palette.TwClrBrdrSecondary),
+        border: `1px solid ${theme.palette.TwClrBrdrSecondary}`,
         paddingY: '8px',
         marginTop: '4px'
       }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.MenuList, {
-    sx: {
-      padding: 0
-    }
-  }, sections === null || sections === void 0 ? void 0 : sections.map((section, index) => {
-    let elements = [];
-    if (index > 0) {
-      elements.push(/*#__PURE__*/_react.default.createElement(_material.Divider, null));
-    }
-    elements = [...elements, ...section.map((item, itemIndex) => {
-      return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-        onClick: () => onClick(item),
-        key: "option-".concat(itemIndex),
-        sx: itemStyles(item.type),
-        disableRipple: true,
-        disabled: item.disabled,
-        selected: item.value === selectedValue
-      }, itemRenderer ? itemRenderer(item) : item.label);
-    })];
-    return elements;
-  })));
+    },
+    children: /*#__PURE__*/_jsx(MenuList, {
+      sx: {
+        padding: 0
+      },
+      children: sections?.map((section, index) => {
+        let elements = [];
+        if (index > 0) {
+          elements.push(/*#__PURE__*/_jsx(Divider, {}));
+        }
+        elements = [...elements, ...section.map((item, itemIndex) => {
+          return /*#__PURE__*/_jsx(MenuItem, {
+            onClick: () => onClick(item),
+            sx: itemStyles(item.type),
+            disableRipple: true,
+            disabled: item.disabled,
+            selected: item.value === selectedValue,
+            children: itemRenderer ? itemRenderer(item) : item.label
+          }, `option-${itemIndex}`);
+        })];
+        return elements;
+      })
+    })
+  });
 }