@terraware/web-components 4.2.12 → 4.2.14-rc.0

package/components/DatePicker/DatePicker.js

@@ -1,41 +1,33 @@
-"use strict";
+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';
+import Icon from '../Icon/Icon';
+import './styles.scss';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DatePicker;
-var _react = _interopRequireWildcard(require("react"));
-var _material = require("@mui/material");
-var _xDatePickers = require("@mui/x-date-pickers");
-var _AdapterLuxon = require("@mui/x-date-pickers/AdapterLuxon");
-var _luxon = require("luxon");
-var _date = require("../../utils/date");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
 /**
  * TODO: remove support for JS Date in DatePickerDateType once
  * clients have moved to only using DateTime objects in input props
  * and callback arguments.
  * export type DatePickerDateType = Exclude<DateType, Date> | null;
  */
-
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const initializeDate = (value, timeZoneId) => {
   if (!value) {
     return null;
   }
-  const date = (0, _date.getDate)(value, timeZoneId);
-  return date !== null && date !== void 0 && date.isValid ? date : null;
+  const date = getDate(value, timeZoneId);
+  return date?.isValid ? date : null;
 };
-function DatePicker(props) {
-  var _props$locale;
-  const [temporalValue, setTemporalValue] = (0, _react.useState)(initializeDate(props.value, props.defaultTimeZone));
-  const [minDateTime, setMinDateTime] = (0, _react.useState)(initializeDate(props.minDate, props.defaultTimeZone));
-  const [maxDateTime, setMaxDateTime] = (0, _react.useState)(initializeDate(props.maxDate, props.defaultTimeZone));
-  const locale = (_props$locale = props.locale) !== null && _props$locale !== void 0 ? _props$locale : 'en';
-  _luxon.Settings.defaultZone = (0, _date.tz)(props.defaultTimeZone);
-  _react.default.useEffect(() => {
+export default 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);
@@ -44,107 +36,114 @@ function DatePicker(props) {
       }
     });
   }, [props.defaultTimeZone, props.value]);
-  _react.default.useEffect(() => {
+  React.useEffect(() => {
     setMinDateTime(initializeDate(props.minDate, props.defaultTimeZone));
   }, [props.defaultTimeZone, props.minDate]);
-  _react.default.useEffect(() => {
+  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__*/_react.default.createElement(_material.Box, {
-    className: "date-picker ".concat(props.className, " ").concat(props.errorText ? 'date-picker--error' : ''),
-    sx: props.sx
-  }, /*#__PURE__*/_react.default.createElement(_xDatePickers.LocalizationProvider, {
-    dateAdapter: _AdapterLuxon.AdapterLuxon,
-    adapterLocale: locale
-  }, props.label && /*#__PURE__*/_react.default.createElement("label", {
-    htmlFor: props.id,
-    className: "textfield-label"
-  }, props.label), props.showTime ? /*#__PURE__*/_react.default.createElement(_xDatePickers.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
+  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);
           }
         },
-        helperText: props.errorText ? /*#__PURE__*/_react.default.createElement("div", {
-          className: "textfield-error-text-container"
-        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          name: "error",
-          className: "textfield-error-text--icon"
-        }), /*#__PURE__*/_react.default.createElement("label", {
-          htmlFor: props.id,
-          className: "textfield-error-text"
-        }, props.errorText)) : props.helperText,
-        id: props.id,
-        placeholder: props.placeholder,
-        autoFocus: props.autoFocus,
-        onKeyPress: props.onKeyPress
-      }
-    },
-    value: temporalValue
-  }) : /*#__PURE__*/_react.default.createElement(_xDatePickers.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
+        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
           }
         },
-        helperText: props.errorText ? /*#__PURE__*/_react.default.createElement("div", {
-          className: "textfield-error-text-container"
-        }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-          name: "error",
-          className: "textfield-error-text--icon"
-        }), /*#__PURE__*/_react.default.createElement("label", {
-          htmlFor: props.id,
-          className: "textfield-error-text"
-        }, props.errorText)) : props.helperText,
-        id: props.id,
-        placeholder: props.placeholder,
-        autoFocus: props.autoFocus,
-        onKeyPress: props.onKeyPress
-      }
-    },
-    value: temporalValue
-  })));
+        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
+      })]
+    })
+  });
 }

package/components/DialogBox/DialogBox.js

@@ -1,17 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DialogBox;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _utils = require("../../utils");
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-require("./styles.scss");
-function DialogBox(props) {
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { useDeviceInfo } from '../../utils';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function DialogBox(props) {
   const {
     title,
     size,
@@ -29,60 +22,77 @@ function DialogBox(props) {
   const hasFooter = leftButton || rightButtons || middleButtons;
   const {
     isMobile
-  } = (0, _utils.useDeviceInfo)();
-  return open ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box-container".concat(skrim ? '--skrim' : '', " ").concat(open ? 'dialog-box--opened' : 'dialog-box--closed', " ").concat(isMobile ? 'mobile' : ''),
+  } = useDeviceInfo();
+  return open ? /*#__PURE__*/_jsx("div", {
+    className: `dialog-box-container${skrim ? '--skrim' : ''} ${open ? 'dialog-box--opened' : 'dialog-box--closed'} ${isMobile ? 'mobile' : ''}`,
     onClick: event => {
       if (event.target instanceof HTMLElement && event.target.classList.contains('dialog-box--opened')) {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
       }
     },
-    style: style
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box dialog-box--".concat(size)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--header"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "close-icon-spacer"
-  }), /*#__PURE__*/_react.default.createElement("p", {
-    className: "title"
-  }, title), /*#__PURE__*/_react.default.createElement(_material.IconButton, {
-    onClick: onClose,
-    size: "small"
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    name: "close",
-    className: "icon-close"
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: (hasFooter ? 'dialog-box--body' : 'dialog-box--body-no-footer') + (scrolled ? ' scrolled' : '')
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--message"
-  }, message), /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--boundary"
-  }, children)), hasFooter && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--footer"
-  }, leftButton && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--footer-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "left-button"
-  }, leftButton), /*#__PURE__*/_react.default.createElement("div", {
-    className: "right-buttons"
-  }, rightButtons === null || rightButtons === void 0 ? void 0 : rightButtons.map((rb, index) => {
-    const rbWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rb), {}, {
-      key: "rb-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rb.props), {}, {
-        size: rb.props.size || 'medium'
-      })
-    });
-    return rbWithKey;
-  }))), middleButtons && /*#__PURE__*/_react.default.createElement("div", {
-    className: "dialog-box--actions-container"
-  }, middleButtons === null || middleButtons === void 0 ? void 0 : middleButtons.map((mb, index) => {
-    const mbWithKey = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mb), {}, {
-      key: "mb-".concat(index),
-      props: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, mb.props), {}, {
-        size: mb.props.size || 'medium'
-      })
-    });
-    return mbWithKey;
-  }))))) : null;
+    style: style,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: `dialog-box dialog-box--${size}`,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "dialog-box--header",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "close-icon-spacer"
+        }), /*#__PURE__*/_jsx("p", {
+          className: "title",
+          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;
+          })
+        })]
+      })]
+    })
+  }) : null;
 }

package/components/Divisor.js

@@ -1,21 +1,16 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Divisor;
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-function Divisor(_ref) {
-  let {
-    mt = 3
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mt: mt
-  }), /*#__PURE__*/_react.default.createElement(_material.Divider, {
-    light: true
-  }), /*#__PURE__*/_react.default.createElement(_material.Box, {
-    mt: mt
-  }));
+import React from 'react';
+import { Box, Divider } from '@mui/material';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Divisor({
+  mt = 3
+}) {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Box, {
+      mt: mt
+    }), /*#__PURE__*/_jsx(Divider, {
+      light: true
+    }), /*#__PURE__*/_jsx(Box, {
+      mt: mt
+    })]
+  });
 }

package/components/Dropdown.js

@@ -1,55 +1,45 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownV1 = DropdownV1;
-exports.default = Dropdown;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
-var _Autocomplete = _interopRequireDefault(require("./Autocomplete/Autocomplete"));
-var _SelectT = _interopRequireDefault(require("./Select/SelectT"));
-const _excluded = ["selectedValue", "onChange", "options", "autocomplete"];
-function DropdownV1(_ref) {
-  let {
-    id,
-    label,
-    values,
-    onChange,
-    selected,
-    disabled
-  } = _ref;
+import React from 'react';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import Autocomplete from './Autocomplete/Autocomplete';
+import SelectT from './Select/SelectT';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function DropdownV1({
+  id,
+  label,
+  values,
+  onChange,
+  selected,
+  disabled
+}) {
   const onChangeH = event => {
     onChange(event.target.value);
   };
-  return /*#__PURE__*/_react.default.createElement(_material.FormControl, {
+  return /*#__PURE__*/_jsxs(FormControl, {
     variant: "outlined",
     size: "small",
     disabled: disabled,
     sx: {
       width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_material.InputLabel, {
-    id: "".concat(id, "-outlined-label")
-  }, label), /*#__PURE__*/_react.default.createElement(_material.Select, {
-    labelId: "".concat(id, "-outlined-label"),
-    id: id,
-    label: label,
-    onChange: onChangeH,
-    value: selected
-  }, values === null || values === void 0 ? void 0 : values.map(_ref2 => {
-    let {
-      label: inLabel,
-      value
-    } = _ref2;
-    return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
-      id: value,
-      key: value,
-      value: value
-    }, inLabel);
-  })));
+    },
+    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 }
@@ -63,33 +53,36 @@ function DropdownV1(_ref) {
  *   selectedValue={'value1'}
  * />
  */
-function Dropdown(props) {
+export default function Dropdown(props) {
   const {
-      selectedValue,
-      onChange,
-      options,
-      autocomplete
-    } = props,
-    remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  const selectedItem = options === null || options === void 0 ? void 0 : options.find(option => option.value === selectedValue);
+    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__*/_react.default.createElement("span", {
-      style: styles
-    }, option.label);
+    return /*#__PURE__*/_jsx("span", {
+      style: styles,
+      children: option.label
+    });
   };
   if (autocomplete) {
-    return /*#__PURE__*/_react.default.createElement(_Autocomplete.default, Object.assign({}, remainingProps, {
-      options: options !== null && options !== void 0 ? options : [],
+    return /*#__PURE__*/_jsx(Autocomplete, {
+      ...remainingProps,
+      options: options ?? [],
       selected: selectedItem || '',
       isEqual: (A, B) => A.value === B.value,
       onChange: option => onChange(option.value)
-    }));
+    });
   }
-  return /*#__PURE__*/_react.default.createElement(_SelectT.default, Object.assign({}, remainingProps, {
+  return /*#__PURE__*/_jsx(SelectT, {
+    ...remainingProps,
     options: options,
     selectedValue: selectedItem,
     isEqual: (A, B) => A.value === B.value,
@@ -98,7 +91,7 @@ function Dropdown(props) {
       label: str,
       value: str
     }),
-    displayLabel: option => (option === null || option === void 0 ? void 0 : option.label) || '',
+    displayLabel: option => option?.label || '',
     onChange: option => onChange(option.value)
-  }));
+  });
 }