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

package/components/DialogBox/DialogBox.js

@@ -1,114 +1,121 @@
-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";
+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';
+
 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();
-    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;
-                                })
-                            })
-                        ]
-                    })
-                ]
+  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"
             })
-        })
-    }) : null;
+          })]
+        }), /*#__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;
 }
-export default DialogBox;
+
+export { DialogBox as default };

package/components/Divisor.js

@@ -1,19 +1,19 @@
-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
-            })
-        ]
-    });
+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
+    })]
+  });
 }
-export default Divisor;
+
+export { Divisor as default };

package/components/Dropdown.js

@@ -1,72 +1,100 @@
-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))
-            })
-        ]
-    });
+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))
+    })]
+  });
 }
+/**
+ * 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'
-        };
-        return /*#__PURE__*/ jsx("span", {
-            style: styles,
-            children: option.label
-        });
+  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'
     };
-    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("span", {
+      style: styles,
+      children: option.label
     });
-    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)
+  };
+  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)
+  });
 }
-export default Dropdown;
-export { DropdownV1 };
+
+export { DropdownV1, Dropdown as default };