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

package/components/DialogBox/DialogBox.js

@@ -1,121 +1,114 @@
-import React from 'react';
-import { Unstable_TrapFocus, IconButton } from '@mui/material';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import Icon from '../Icon/Icon.js';
-import './styles.scss';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import react from "react";
+import { IconButton, Unstable_TrapFocus } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 function DialogBox(props) {
-  const {
-    title,
-    size,
-    message,
-    children,
-    leftButton,
-    rightButtons,
-    middleButtons,
-    onClose,
-    open,
-    scrolled,
-    skrim,
-    style
-  } = props;
-  const hasFooter = leftButton || rightButtons || middleButtons;
-  const titleId = React.useId();
-  const {
-    isMobile
-  } = useDeviceInfo();
-
-  // Only close modal when the click starts and ends on the backdrop. On mobile, tapping an input opens the
-  // keyboard and shifts the layout, so the click can end on the backdrop even though it began on the input
-  const pressStartedOnBackdrop = React.useRef(false);
-  const targetIsBackdrop = target => target instanceof HTMLElement && target.classList.contains('dialog-box--opened');
-  return open ? /*#__PURE__*/jsx("div", {
-    className: `dialog-box-container${skrim ? '--skrim' : ''} ${open ? 'dialog-box--opened' : 'dialog-box--closed'} ${isMobile ? 'mobile' : ''}`,
-    onMouseDown: event => {
-      pressStartedOnBackdrop.current = targetIsBackdrop(event.target);
-    },
-    onClick: event => {
-      if (pressStartedOnBackdrop.current && targetIsBackdrop(event.target)) {
-        onClose?.();
-      }
-      pressStartedOnBackdrop.current = false;
-    },
-    style: style,
-    children: /*#__PURE__*/jsx(Unstable_TrapFocus, {
-      open: open,
-      children: /*#__PURE__*/jsxs("div", {
-        "aria-labelledby": titleId,
-        "aria-modal": true,
-        className: `dialog-box dialog-box--${size}`,
-        role: "dialog",
-        tabIndex: -1,
-        children: [/*#__PURE__*/jsxs("div", {
-          className: "dialog-box--header",
-          children: [/*#__PURE__*/jsx("div", {
-            className: "close-icon-spacer"
-          }), /*#__PURE__*/jsx("p", {
-            className: "title",
-            id: titleId,
-            children: title
-          }), /*#__PURE__*/jsx(IconButton, {
-            onClick: onClose,
-            size: "small",
-            children: /*#__PURE__*/jsx(Icon, {
-              name: "close",
-              className: "icon-close"
+    const { title, size, message, children, leftButton, rightButtons, middleButtons, onClose, open, scrolled, skrim, style } = props;
+    const hasFooter = leftButton || rightButtons || middleButtons;
+    const titleId = react.useId();
+    const { isMobile } = useDeviceInfo();
+    const pressStartedOnBackdrop = react.useRef(false);
+    const targetIsBackdrop = (target)=>target instanceof HTMLElement && target.classList.contains('dialog-box--opened');
+    return open ? /*#__PURE__*/ jsx("div", {
+        className: `dialog-box-container${skrim ? '--skrim' : ''} ${open ? 'dialog-box--opened' : 'dialog-box--closed'} ${isMobile ? 'mobile' : ''}`,
+        onMouseDown: (event)=>{
+            pressStartedOnBackdrop.current = targetIsBackdrop(event.target);
+        },
+        onClick: (event)=>{
+            if (pressStartedOnBackdrop.current && targetIsBackdrop(event.target)) onClose?.();
+            pressStartedOnBackdrop.current = false;
+        },
+        style: style,
+        children: /*#__PURE__*/ jsx(Unstable_TrapFocus, {
+            open: open,
+            children: /*#__PURE__*/ jsxs("div", {
+                "aria-labelledby": titleId,
+                "aria-modal": true,
+                className: `dialog-box dialog-box--${size}`,
+                role: "dialog",
+                tabIndex: -1,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "dialog-box--header",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "close-icon-spacer"
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "title",
+                                id: titleId,
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: onClose,
+                                size: "small",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: "close",
+                                    className: "icon-close"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: (hasFooter ? 'dialog-box--body' : 'dialog-box--body-no-footer') + (scrolled ? ' scrolled' : ''),
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "dialog-box--message",
+                                children: message
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "dialog-box--boundary",
+                                children: children
+                            })
+                        ]
+                    }),
+                    hasFooter && /*#__PURE__*/ jsxs("div", {
+                        className: "dialog-box--footer",
+                        children: [
+                            leftButton && /*#__PURE__*/ jsxs("div", {
+                                className: "dialog-box--footer-container",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "left-button",
+                                        children: leftButton
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "right-buttons",
+                                        children: rightButtons?.map((rb, index)=>{
+                                            const rbWithKey = {
+                                                ...rb,
+                                                key: `rb-${index}`,
+                                                props: {
+                                                    ...rb.props,
+                                                    size: rb.props.size || 'medium'
+                                                }
+                                            };
+                                            return rbWithKey;
+                                        })
+                                    })
+                                ]
+                            }),
+                            middleButtons && /*#__PURE__*/ jsx("div", {
+                                className: "dialog-box--actions-container",
+                                children: middleButtons?.map((mb, index)=>{
+                                    const mbWithKey = {
+                                        ...mb,
+                                        key: `mb-${index}`,
+                                        props: {
+                                            ...mb.props,
+                                            size: mb.props.size || 'medium'
+                                        }
+                                    };
+                                    return mbWithKey;
+                                })
+                            })
+                        ]
+                    })
+                ]
             })
-          })]
-        }), /*#__PURE__*/jsxs("div", {
-          className: (hasFooter ? 'dialog-box--body' : 'dialog-box--body-no-footer') + (scrolled ? ' scrolled' : ''),
-          children: [/*#__PURE__*/jsx("div", {
-            className: "dialog-box--message",
-            children: message
-          }), /*#__PURE__*/jsx("div", {
-            className: "dialog-box--boundary",
-            children: children
-          })]
-        }), hasFooter && /*#__PURE__*/jsxs("div", {
-          className: "dialog-box--footer",
-          children: [leftButton && /*#__PURE__*/jsxs("div", {
-            className: "dialog-box--footer-container",
-            children: [/*#__PURE__*/jsx("div", {
-              className: "left-button",
-              children: leftButton
-            }), /*#__PURE__*/jsx("div", {
-              className: "right-buttons",
-              children: rightButtons?.map((rb, index) => {
-                const rbWithKey = {
-                  ...rb,
-                  key: `rb-${index}`,
-                  props: {
-                    ...rb.props,
-                    size: rb.props.size || 'medium'
-                  }
-                };
-                return rbWithKey;
-              })
-            })]
-          }), middleButtons && /*#__PURE__*/jsx("div", {
-            className: "dialog-box--actions-container",
-            children: middleButtons?.map((mb, index) => {
-              const mbWithKey = {
-                ...mb,
-                key: `mb-${index}`,
-                props: {
-                  ...mb.props,
-                  size: mb.props.size || 'medium'
-                }
-              };
-              return mbWithKey;
-            })
-          })]
-        })]
-      })
-    })
-  }) : null;
+        })
+    }) : null;
 }
-
-export { DialogBox as default };
+export default DialogBox;

package/components/Divisor.js

@@ -1,19 +1,19 @@
-import 'react';
-import { Box, Divider } from '@mui/material';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-
-function Divisor({
-  mt = 3
-}) {
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Box, {
-      mt: mt
-    }), /*#__PURE__*/jsx(Divider, {
-      light: true
-    }), /*#__PURE__*/jsx(Box, {
-      mt: mt
-    })]
-  });
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Box, Divider } from "@mui/material";
+function Divisor({ mt = 3 }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Box, {
+                mt: mt
+            }),
+            /*#__PURE__*/ jsx(Divider, {
+                light: true
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                mt: mt
+            })
+        ]
+    });
 }
-
-export { Divisor as default };
+export default Divisor;

package/components/Dropdown.js

@@ -1,100 +1,72 @@
-import 'react';
-import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
-import Autocomplete from './Autocomplete/Autocomplete.js';
-import SelectT from './Select/SelectT.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function DropdownV1({
-  id,
-  label,
-  values,
-  onChange,
-  selected,
-  disabled
-}) {
-  const onChangeH = event => {
-    onChange(event.target.value);
-  };
-  return /*#__PURE__*/jsxs(FormControl, {
-    variant: "outlined",
-    size: "small",
-    disabled: disabled,
-    sx: {
-      width: '100%'
-    },
-    children: [/*#__PURE__*/jsx(InputLabel, {
-      id: `${id}-outlined-label`,
-      children: label
-    }), /*#__PURE__*/jsx(Select, {
-      labelId: `${id}-outlined-label`,
-      id: id,
-      label: label,
-      onChange: onChangeH,
-      value: selected,
-      children: values?.map(({
-        label: inLabel,
-        value
-      }) => /*#__PURE__*/jsx(MenuItem, {
-        id: value,
-        value: value,
-        children: inLabel
-      }, value))
-    })]
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import Autocomplete from "./Autocomplete/Autocomplete.js";
+import SelectT from "./Select/SelectT.js";
+function DropdownV1({ id, label, values, onChange, selected, disabled }) {
+    const onChangeH = (event)=>{
+        onChange(event.target.value);
+    };
+    return /*#__PURE__*/ jsxs(FormControl, {
+        variant: "outlined",
+        size: "small",
+        disabled: disabled,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ jsx(InputLabel, {
+                id: `${id}-outlined-label`,
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Select, {
+                labelId: `${id}-outlined-label`,
+                id: id,
+                label: label,
+                onChange: onChangeH,
+                value: selected,
+                children: values?.map(({ label: inLabel, value })=>/*#__PURE__*/ jsx(MenuItem, {
+                        id: value,
+                        value: value,
+                        children: inLabel
+                    }, value))
+            })
+        ]
+    });
 }
-/**
- * This is a simple dropdown that takes in a tuple { label, value }
- * for list of options.
- * The label is used for display, the value is passed back in onChange, and used to set selectedValue.
- *
- * Example:
- * <Dropdown
- *   options=[{ label: 'label', value: 'value'}, { label: 'label1': value: 'value1'} ]
- *   onChange={(value: string) => setSomeValue(value)}
- *   selectedValue={'value1'}
- * />
- */
 function Dropdown(props) {
-  const {
-    selectedValue,
-    onChange,
-    options,
-    autocomplete,
-    ...remainingProps
-  } = props;
-  const selectedItem = options?.find(option => option.value === selectedValue);
-  const renderOption = option => {
-    const styles = {
-      fontWeight: option.fontWeight || 'normal',
-      fontStyle: option.fontStyle || 'normal'
+    const { selectedValue, onChange, options, autocomplete, ...remainingProps } = props;
+    const selectedItem = options?.find((option)=>option.value === selectedValue);
+    const renderOption = (option)=>{
+        const styles = {
+            fontWeight: option.fontWeight || 'normal',
+            fontStyle: option.fontStyle || 'normal'
+        };
+        return /*#__PURE__*/ jsx("span", {
+            style: styles,
+            children: option.label
+        });
     };
-    return /*#__PURE__*/jsx("span", {
-      style: styles,
-      children: option.label
+    if (autocomplete) return /*#__PURE__*/ jsx(Autocomplete, {
+        ...remainingProps,
+        options: options ?? [],
+        selected: selectedItem || '',
+        isEqual: (A, B)=>A.value === B.value,
+        onChange: (option)=>onChange(option.value)
     });
-  };
-  if (autocomplete) {
-    return /*#__PURE__*/jsx(Autocomplete, {
-      ...remainingProps,
-      options: options ?? [],
-      selected: selectedItem || '',
-      isEqual: (A, B) => A.value === B.value,
-      onChange: option => onChange(option.value)
+    return /*#__PURE__*/ jsx(SelectT, {
+        ...remainingProps,
+        options: options,
+        selectedValue: selectedItem,
+        isEqual: (A, B)=>A.value === B.value,
+        renderOption: renderOption,
+        toT: (str)=>({
+                label: str,
+                value: str
+            }),
+        displayLabel: (option)=>option?.label || '',
+        onChange: (option)=>onChange(option.value)
     });
-  }
-  return /*#__PURE__*/jsx(SelectT, {
-    ...remainingProps,
-    options: options,
-    selectedValue: selectedItem,
-    isEqual: (A, B) => A.value === B.value,
-    renderOption: renderOption,
-    toT: str => ({
-      label: str,
-      value: str
-    }),
-    displayLabel: option => option?.label || '',
-    onChange: option => onChange(option.value)
-  });
 }
-
-export { DropdownV1, Dropdown as default };
+export default Dropdown;
+export { DropdownV1 };