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

package/components/Confirm/index.js

@@ -1,84 +1,75 @@
-import { useMemo } from 'react';
-import { useTheme, Typography } from '@mui/material';
-import Button from '../Button/Button.js';
-import DialogBox from '../DialogBox/DialogBox.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-function Confirm({
-  confirmButtonDisabled,
-  confirmButtonIcon,
-  confirmButtonId,
-  confirmButtonPriority,
-  confirmButtonText,
-  confirmButtonType,
-  closeButtonId,
-  closeButtonText,
-  message,
-  onClose,
-  onConfirm,
-  open,
-  size,
-  textStyle,
-  title
-}) {
-  const theme = useTheme();
-  const middleButtons = useMemo(() => {
-    const buttons = [/*#__PURE__*/jsx(Button, {
-      disabled: confirmButtonDisabled,
-      icon: confirmButtonIcon,
-      id: confirmButtonId || 'confirm-submit',
-      label: confirmButtonText,
-      onClick: onConfirm,
-      priority: confirmButtonPriority || 'primary',
-      type: confirmButtonType || 'productive'
-    }, 'button-2')];
-    if (onClose && closeButtonText) {
-      buttons.unshift(/*#__PURE__*/jsx(Button, {
-        id: closeButtonId || 'confirm-close',
-        label: closeButtonText,
-        onClick: onClose,
-        priority: "secondary",
-        type: "passive"
-      }, 'button-1'));
-    }
-    return buttons;
-  }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
-  const content = useMemo(() => {
-    const text = (str, key) => {
-      return /*#__PURE__*/jsx(Typography, {
-        color: theme.palette.TwClrTxt,
-        fontSize: "16px",
-        fontWeight: 400,
-        lineHeight: "24px",
-        textAlign: "center",
-        sx: {
-          marginBottom: theme.spacing(1),
-          '&:last-child': {
-            marginBottom: 0
-          },
-          ...(textStyle || {})
-        },
-        children: str
-      }, key);
-    };
-    if (typeof message === 'string') {
-      return text(message);
-    } else if (Array.isArray(message)) {
-      return /*#__PURE__*/jsx(Fragment, {
-        children: message.map((str, i) => text(str, `${str}_${i}`))
-      });
-    } else {
-      return message;
-    }
-  }, [message, textStyle, theme]);
-  return /*#__PURE__*/jsx(DialogBox, {
-    onClose: onClose,
-    open: open ?? true,
-    title: title,
-    size: size || 'medium',
-    middleButtons: middleButtons,
-    children: content
-  });
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Typography, useTheme } from "@mui/material";
+import Button from "../Button/Button.js";
+import DialogBox from "../DialogBox/DialogBox.js";
+function Confirm({ confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, message, onClose, onConfirm, open, size, textStyle, title }) {
+    const theme = useTheme();
+    const middleButtons = useMemo(()=>{
+        const buttons = [
+            /*#__PURE__*/ jsx(Button, {
+                disabled: confirmButtonDisabled,
+                icon: confirmButtonIcon,
+                id: confirmButtonId || 'confirm-submit',
+                label: confirmButtonText,
+                onClick: onConfirm,
+                priority: confirmButtonPriority || 'primary',
+                type: confirmButtonType || 'productive'
+            }, "button-2")
+        ];
+        if (onClose && closeButtonText) buttons.unshift(/*#__PURE__*/ jsx(Button, {
+            id: closeButtonId || 'confirm-close',
+            label: closeButtonText,
+            onClick: onClose,
+            priority: "secondary",
+            type: "passive"
+        }, "button-1"));
+        return buttons;
+    }, [
+        confirmButtonDisabled,
+        confirmButtonIcon,
+        confirmButtonId,
+        confirmButtonPriority,
+        confirmButtonText,
+        confirmButtonType,
+        closeButtonId,
+        closeButtonText,
+        onClose,
+        onConfirm
+    ]);
+    const content = useMemo(()=>{
+        const text = (str, key)=>/*#__PURE__*/ jsx(Typography, {
+                color: theme.palette.TwClrTxt,
+                fontSize: "16px",
+                fontWeight: 400,
+                lineHeight: "24px",
+                textAlign: "center",
+                sx: {
+                    marginBottom: theme.spacing(1),
+                    '&:last-child': {
+                        marginBottom: 0
+                    },
+                    ...textStyle || {}
+                },
+                children: str
+            }, key);
+        if ('string' == typeof message) return text(message);
+        else if (Array.isArray(message)) return /*#__PURE__*/ jsx(Fragment, {
+            children: message.map((str, i)=>text(str, `${str}_${i}`))
+        });
+        else return message;
+    }, [
+        message,
+        textStyle,
+        theme
+    ]);
+    return /*#__PURE__*/ jsx(DialogBox, {
+        onClose: onClose,
+        open: open ?? true,
+        title: title,
+        size: size || 'medium',
+        middleButtons: middleButtons,
+        children: content
+    });
 }
-
-export { Confirm as default };
+export default Confirm;

package/components/DatePicker/DatePicker.js

@@ -1,145 +1,142 @@
-import React, { useState } from 'react';
-import { Box } from '@mui/material';
-import { LocalizationProvider, DesktopDateTimePicker, DesktopDatePicker } from '@mui/x-date-pickers';
-import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
-import { Settings } from 'luxon';
-import { tz, getDate } from '../../utils/date.js';
-import Icon from '../Icon/Icon.js';
-import './styles.scss';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const initializeDate = (value, timeZoneId) => {
-  if (!value) {
-    return null;
-  }
-  const date = getDate(value, timeZoneId);
-  return date?.isValid ? date : null;
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useState } from "react";
+import { Box } from "@mui/material";
+import { DesktopDatePicker, DesktopDateTimePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
+import { Settings } from "luxon";
+import { getDate, tz } from "../../utils/date.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
+const initializeDate = (value, timeZoneId)=>{
+    if (!value) return null;
+    const date = getDate(value, timeZoneId);
+    return date?.isValid ? date : null;
 };
 function DatePicker(props) {
-  const [temporalValue, setTemporalValue] = useState(initializeDate(props.value, props.defaultTimeZone));
-  const [minDateTime, setMinDateTime] = useState(initializeDate(props.minDate, props.defaultTimeZone));
-  const [maxDateTime, setMaxDateTime] = useState(initializeDate(props.maxDate, props.defaultTimeZone));
-  const locale = props.locale ?? 'en';
-  Settings.defaultZone = tz(props.defaultTimeZone);
-  React.useEffect(() => {
-    setTemporalValue(prev => {
-      if (props.value !== prev) {
-        return initializeDate(props.value, props.defaultTimeZone);
-      } else {
-        return prev;
-      }
+    const [temporalValue, setTemporalValue] = useState(initializeDate(props.value, props.defaultTimeZone));
+    const [minDateTime, setMinDateTime] = useState(initializeDate(props.minDate, props.defaultTimeZone));
+    const [maxDateTime, setMaxDateTime] = useState(initializeDate(props.maxDate, props.defaultTimeZone));
+    const locale = props.locale ?? 'en';
+    Settings.defaultZone = tz(props.defaultTimeZone);
+    react.useEffect(()=>{
+        setTemporalValue((prev)=>{
+            if (props.value !== prev) return initializeDate(props.value, props.defaultTimeZone);
+            else return prev;
+        });
+    }, [
+        props.defaultTimeZone,
+        props.value
+    ]);
+    react.useEffect(()=>{
+        setMinDateTime(initializeDate(props.minDate, props.defaultTimeZone));
+    }, [
+        props.defaultTimeZone,
+        props.minDate
+    ]);
+    react.useEffect(()=>{
+        setMaxDateTime(initializeDate(props.maxDate, props.defaultTimeZone));
+    }, [
+        props.defaultTimeZone,
+        props.maxDate
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        className: `date-picker ${props.className} ${props.errorText ? 'date-picker--error' : ''}`,
+        sx: props.sx,
+        children: /*#__PURE__*/ jsxs(LocalizationProvider, {
+            dateAdapter: AdapterLuxon,
+            adapterLocale: locale,
+            children: [
+                props.label && /*#__PURE__*/ jsx("label", {
+                    htmlFor: props.id,
+                    className: "textfield-label",
+                    children: props.label
+                }),
+                props.showTime ? /*#__PURE__*/ jsx(DesktopDateTimePicker, {
+                    disabled: props.disabled,
+                    minDate: minDateTime && minDateTime.isValid ? minDateTime : void 0,
+                    maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : void 0,
+                    onChange: (newValue)=>{
+                        setTemporalValue(newValue);
+                        if (props.onChange) props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
+                        if (props.onDateChange) props.onDateChange(newValue && newValue.isValid ? newValue : void 0);
+                    },
+                    onError: props.onError,
+                    slotProps: {
+                        textField: {
+                            sx: {
+                                '& fieldset': {
+                                    border: 'none'
+                                },
+                                '& .MuiFormHelperText-root': {
+                                    marginLeft: 0
+                                }
+                            },
+                            helperText: props.errorText ? /*#__PURE__*/ jsxs("div", {
+                                className: "textfield-error-text-container",
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        name: "error",
+                                        className: "textfield-error-text--icon"
+                                    }),
+                                    /*#__PURE__*/ jsx("label", {
+                                        htmlFor: props.id,
+                                        className: "textfield-error-text",
+                                        children: props.errorText
+                                    })
+                                ]
+                            }) : props.helperText,
+                            id: props.id,
+                            placeholder: props.placeholder,
+                            autoFocus: props.autoFocus,
+                            onKeyPress: props.onKeyPress
+                        }
+                    },
+                    value: temporalValue
+                }) : /*#__PURE__*/ jsx(DesktopDatePicker, {
+                    disabled: props.disabled,
+                    format: "yyyy-MM-dd",
+                    minDate: minDateTime && minDateTime.isValid ? minDateTime : void 0,
+                    maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : void 0,
+                    onChange: (newValue)=>{
+                        setTemporalValue(newValue);
+                        if (props.onChange) props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
+                        if (props.onDateChange) props.onDateChange(newValue && newValue.isValid ? newValue : void 0);
+                    },
+                    onError: props.onError,
+                    slotProps: {
+                        textField: {
+                            sx: {
+                                '& fieldset': {
+                                    border: 'none'
+                                },
+                                '& .MuiFormHelperText-root': {
+                                    marginLeft: 0
+                                }
+                            },
+                            helperText: props.errorText ? /*#__PURE__*/ jsxs("div", {
+                                className: "textfield-error-text-container",
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        name: "error",
+                                        className: "textfield-error-text--icon"
+                                    }),
+                                    /*#__PURE__*/ jsx("label", {
+                                        htmlFor: props.id,
+                                        className: "textfield-error-text",
+                                        children: props.errorText
+                                    })
+                                ]
+                            }) : props.helperText,
+                            id: props.id,
+                            placeholder: props.placeholder,
+                            autoFocus: props.autoFocus,
+                            onKeyPress: props.onKeyPress
+                        }
+                    },
+                    value: temporalValue
+                })
+            ]
+        })
     });
-  }, [props.defaultTimeZone, props.value]);
-  React.useEffect(() => {
-    setMinDateTime(initializeDate(props.minDate, props.defaultTimeZone));
-  }, [props.defaultTimeZone, props.minDate]);
-  React.useEffect(() => {
-    setMaxDateTime(initializeDate(props.maxDate, props.defaultTimeZone));
-  }, [props.defaultTimeZone, props.maxDate]);
-
-  // TODO: Localize the yyyy-mm-dd placeholder string that is shown to users when the input is
-  //       empty. It appears to be generated programmatically deep in the guts of the MUI DatePicker
-  //       code, and it most likely uses the browser's locale.
-  return /*#__PURE__*/jsx(Box, {
-    className: `date-picker ${props.className} ${props.errorText ? 'date-picker--error' : ''}`,
-    sx: props.sx,
-    children: /*#__PURE__*/jsxs(LocalizationProvider, {
-      dateAdapter: AdapterLuxon,
-      adapterLocale: locale,
-      children: [props.label && /*#__PURE__*/jsx("label", {
-        htmlFor: props.id,
-        className: "textfield-label",
-        children: props.label
-      }), props.showTime ? /*#__PURE__*/jsx(DesktopDateTimePicker, {
-        disabled: props.disabled,
-        minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
-        maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
-        onChange: newValue => {
-          setTemporalValue(newValue);
-          // TODO: remove onChange and make onDateChange required
-          if (props.onChange) {
-            props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
-          }
-          if (props.onDateChange) {
-            props.onDateChange(newValue && newValue.isValid ? newValue : undefined);
-          }
-        },
-        onError: props.onError,
-        slotProps: {
-          textField: {
-            sx: {
-              '& fieldset': {
-                border: 'none'
-              },
-              '& .MuiFormHelperText-root': {
-                marginLeft: 0
-              }
-            },
-            helperText: props.errorText ? /*#__PURE__*/jsxs("div", {
-              className: "textfield-error-text-container",
-              children: [/*#__PURE__*/jsx(Icon, {
-                name: "error",
-                className: "textfield-error-text--icon"
-              }), /*#__PURE__*/jsx("label", {
-                htmlFor: props.id,
-                className: "textfield-error-text",
-                children: props.errorText
-              })]
-            }) : props.helperText,
-            id: props.id,
-            placeholder: props.placeholder,
-            autoFocus: props.autoFocus,
-            onKeyPress: props.onKeyPress
-          }
-        },
-        value: temporalValue
-      }) : /*#__PURE__*/jsx(DesktopDatePicker, {
-        disabled: props.disabled,
-        format: "yyyy-MM-dd",
-        minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
-        maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
-        onChange: newValue => {
-          setTemporalValue(newValue);
-          // TODO: remove onChange and make onDateChange required
-          if (props.onChange) {
-            props.onChange(newValue && newValue.isValid ? newValue.toJSDate() : null);
-          }
-          if (props.onDateChange) {
-            props.onDateChange(newValue && newValue.isValid ? newValue : undefined);
-          }
-        },
-        onError: props.onError,
-        slotProps: {
-          textField: {
-            sx: {
-              '& fieldset': {
-                border: 'none'
-              },
-              '& .MuiFormHelperText-root': {
-                marginLeft: 0
-              }
-            },
-            helperText: props.errorText ? /*#__PURE__*/jsxs("div", {
-              className: "textfield-error-text-container",
-              children: [/*#__PURE__*/jsx(Icon, {
-                name: "error",
-                className: "textfield-error-text--icon"
-              }), /*#__PURE__*/jsx("label", {
-                htmlFor: props.id,
-                className: "textfield-error-text",
-                children: props.errorText
-              })]
-            }) : props.helperText,
-            id: props.id,
-            placeholder: props.placeholder,
-            autoFocus: props.autoFocus,
-            onKeyPress: props.onKeyPress
-          }
-        },
-        value: temporalValue
-      })]
-    })
-  });
 }
-
-export { DatePicker as default };
+export default DatePicker;