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

package/components/Confirm/index.js

@@ -1,75 +1,84 @@
-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
-    });
+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
+  });
 }
-export default Confirm;
+
+export { Confirm as default };

package/components/DatePicker/DatePicker.js

@@ -1,142 +1,145 @@
-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;
+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;
 };
 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;
-        });
-    }, [
-        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
-                })
-            ]
-        })
+  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]);
+
+  // 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 default DatePicker;
+
+export { DatePicker as default };