@terraware/web-components 4.2.26-rc.0 → 4.3.0

package/components/BusySpinner/index.js

@@ -1,13 +1,14 @@
-import React from 'react';
-import { Box, CircularProgress, useTheme } from '@mui/material';
+import 'react';
+import { useTheme, Box, CircularProgress } from '@mui/material';
 import hexRgb from 'hex-rgb';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function BusySpinner({
+import { jsx } from 'react/jsx-runtime';
+
+function BusySpinner({
   withSkrim,
   noBackground
 }) {
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     sx: {
       position: 'fixed',
       left: 0,
@@ -27,18 +28,20 @@ export default function BusySpinner({
         format: 'css'
       })} 100%)`
     },
-    children: /*#__PURE__*/_jsx(Box, {
+    children: /*#__PURE__*/jsx(Box, {
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
       padding: theme.spacing(5),
       flexDirection: "column",
       height: "100%",
-      children: /*#__PURE__*/_jsx(CircularProgress, {
+      children: /*#__PURE__*/jsx(CircularProgress, {
         sx: {
           color: theme.palette.TwClrIcnBrand
         }
       })
     })
   });
-}
+}
+
+export { BusySpinner as default };

package/components/Button/Button.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import 'react';
 import { ButtonBase } from '@mui/material';
-import Icon from '../Icon/Icon';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function Button(props) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Button(props) {
   const {
     onClick,
     label,
@@ -19,7 +20,7 @@ export default function Button(props) {
     style,
     sx
   } = props;
-  return /*#__PURE__*/_jsxs(ButtonBase, {
+  return /*#__PURE__*/jsxs(ButtonBase, {
     id: id,
     onClick: onClick,
     className: `button ${type}-${priority} button--${size} ${type}-${priority}--${size} ${icon && !processing ? 'button-with-icon' : ''} ${rightIcon && !processing ? 'button-with-right-icon' : ''}
@@ -31,17 +32,19 @@ export default function Button(props) {
         fill: 'currentColor'
       }
     }, ...(Array.isArray(sx) ? sx : [sx])],
-    children: [processing && /*#__PURE__*/_jsx(Icon, {
+    children: [processing && /*#__PURE__*/jsx(Icon, {
       name: "spinner",
       size: size,
       className: "icon-spinner"
-    }), !processing && icon && /*#__PURE__*/_jsx(Icon, {
+    }), !processing && icon && /*#__PURE__*/jsx(Icon, {
       name: icon,
       size: size
-    }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/_jsx(Icon, {
+    }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/jsx(Icon, {
       name: rightIcon,
       size: size,
       className: "icon-right"
     })]
   });
-}
+}
+
+export { Button as default };

package/components/Checkbox.js

@@ -1,7 +1,8 @@
-import React from 'react';
-import { FormControlLabel, Checkbox as MUICheckbox, useTheme } from '@mui/material';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const CheckboxStyle = theme => ({
+import 'react';
+import { useTheme, FormControlLabel, Checkbox as Checkbox$1 } from '@mui/material';
+import { jsx } from 'react/jsx-runtime';
+
+const CheckboxStyle = theme => ({
   padding: theme.spacing(0, 1, 0, 0),
   '& .MuiSvgIcon-root': {
     fill: theme.palette.TwClrBrdrSecondary
@@ -24,7 +25,7 @@ export const CheckboxStyle = theme => ({
     opacity: 0.5
   }
 });
-export default function Checkbox(props) {
+function Checkbox(props) {
   const theme = useTheme();
   const onChange = (event, checked) => {
     if (props.indeterminate) {
@@ -33,12 +34,12 @@ export default function Checkbox(props) {
     }
     props.onChange(checked);
   };
-  return /*#__PURE__*/_jsx(FormControlLabel, {
+  return /*#__PURE__*/jsx(FormControlLabel, {
     id: props.id,
     onChange: onChange,
     label: props.label,
     disabled: props.disabled,
-    control: /*#__PURE__*/_jsx(MUICheckbox, {
+    control: /*#__PURE__*/jsx(Checkbox$1, {
       disabled: props.disabled,
       disableRipple: true,
       id: 'check-' + props.id,
@@ -58,4 +59,6 @@ export default function Checkbox(props) {
       margin: theme.spacing(1, 0, 0, 0)
     }
   });
-}
+}
+
+export { CheckboxStyle, Checkbox as default };

package/components/Confirm/index.js

@@ -1,15 +1,10 @@
-import React, { useMemo } from 'react';
-import { Typography, useTheme } from '@mui/material';
-import Button from '../Button/Button';
-import DialogBox from '../DialogBox/DialogBox';
+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';
 
-/**
- * A generic confirm modal built on top of DialogBox.
- * Most properties are optional with default values.
- * Required properties are commented as such.
- */
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export default function Confirm({
+function Confirm({
   confirmButtonDisabled,
   confirmButtonIcon,
   confirmButtonId,
@@ -28,7 +23,7 @@ export default function Confirm({
 }) {
   const theme = useTheme();
   const middleButtons = useMemo(() => {
-    const buttons = [/*#__PURE__*/_jsx(Button, {
+    const buttons = [/*#__PURE__*/jsx(Button, {
       disabled: confirmButtonDisabled,
       icon: confirmButtonIcon,
       id: confirmButtonId || 'confirm-submit',
@@ -38,7 +33,7 @@ export default function Confirm({
       type: confirmButtonType || 'productive'
     }, 'button-2')];
     if (onClose && closeButtonText) {
-      buttons.unshift(/*#__PURE__*/_jsx(Button, {
+      buttons.unshift(/*#__PURE__*/jsx(Button, {
         id: closeButtonId || 'confirm-close',
         label: closeButtonText,
         onClick: onClose,
@@ -50,7 +45,7 @@ export default function Confirm({
   }, [confirmButtonDisabled, confirmButtonIcon, confirmButtonId, confirmButtonPriority, confirmButtonText, confirmButtonType, closeButtonId, closeButtonText, onClose, onConfirm]);
   const content = useMemo(() => {
     const text = (str, key) => {
-      return /*#__PURE__*/_jsx(Typography, {
+      return /*#__PURE__*/jsx(Typography, {
         color: theme.palette.TwClrTxt,
         fontSize: "16px",
         fontWeight: 400,
@@ -69,14 +64,14 @@ export default function Confirm({
     if (typeof message === 'string') {
       return text(message);
     } else if (Array.isArray(message)) {
-      return /*#__PURE__*/_jsx(_Fragment, {
+      return /*#__PURE__*/jsx(Fragment, {
         children: message.map((str, i) => text(str, `${str}_${i}`))
       });
     } else {
       return message;
     }
   }, [message, textStyle, theme]);
-  return /*#__PURE__*/_jsx(DialogBox, {
+  return /*#__PURE__*/jsx(DialogBox, {
     onClose: onClose,
     open: open ?? true,
     title: title,
@@ -84,4 +79,6 @@ export default function Confirm({
     middleButtons: middleButtons,
     children: content
   });
-}
+}
+
+export { Confirm as default };

package/components/DatePicker/DatePicker.js

@@ -1,19 +1,13 @@
 import React, { useState } from 'react';
 import { Box } from '@mui/material';
-import { DesktopDatePicker, DesktopDateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { LocalizationProvider, DesktopDateTimePicker, DesktopDatePicker } 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 { tz, getDate } from '../../utils/date.js';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
-/**
- * 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;
@@ -21,7 +15,7 @@ const initializeDate = (value, timeZoneId) => {
   const date = getDate(value, timeZoneId);
   return date?.isValid ? date : null;
 };
-export default function DatePicker(props) {
+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));
@@ -46,17 +40,17 @@ export default function DatePicker(props) {
   // 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, {
+  return /*#__PURE__*/jsx(Box, {
     className: `date-picker ${props.className} ${props.errorText ? 'date-picker--error' : ''}`,
     sx: props.sx,
-    children: /*#__PURE__*/_jsxs(LocalizationProvider, {
+    children: /*#__PURE__*/jsxs(LocalizationProvider, {
       dateAdapter: AdapterLuxon,
       adapterLocale: locale,
-      children: [props.label && /*#__PURE__*/_jsx("label", {
+      children: [props.label && /*#__PURE__*/jsx("label", {
         htmlFor: props.id,
         className: "textfield-label",
         children: props.label
-      }), props.showTime ? /*#__PURE__*/_jsx(DesktopDateTimePicker, {
+      }), props.showTime ? /*#__PURE__*/jsx(DesktopDateTimePicker, {
         disabled: props.disabled,
         minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
         maxDate: maxDateTime && maxDateTime.isValid ? maxDateTime : undefined,
@@ -81,12 +75,12 @@ export default function DatePicker(props) {
                 marginLeft: 0
               }
             },
-            helperText: props.errorText ? /*#__PURE__*/_jsxs("div", {
+            helperText: props.errorText ? /*#__PURE__*/jsxs("div", {
               className: "textfield-error-text-container",
-              children: [/*#__PURE__*/_jsx(Icon, {
+              children: [/*#__PURE__*/jsx(Icon, {
                 name: "error",
                 className: "textfield-error-text--icon"
-              }), /*#__PURE__*/_jsx("label", {
+              }), /*#__PURE__*/jsx("label", {
                 htmlFor: props.id,
                 className: "textfield-error-text",
                 children: props.errorText
@@ -99,7 +93,7 @@ export default function DatePicker(props) {
           }
         },
         value: temporalValue
-      }) : /*#__PURE__*/_jsx(DesktopDatePicker, {
+      }) : /*#__PURE__*/jsx(DesktopDatePicker, {
         disabled: props.disabled,
         format: "yyyy-MM-dd",
         minDate: minDateTime && minDateTime.isValid ? minDateTime : undefined,
@@ -125,12 +119,12 @@ export default function DatePicker(props) {
                 marginLeft: 0
               }
             },
-            helperText: props.errorText ? /*#__PURE__*/_jsxs("div", {
+            helperText: props.errorText ? /*#__PURE__*/jsxs("div", {
               className: "textfield-error-text-container",
-              children: [/*#__PURE__*/_jsx(Icon, {
+              children: [/*#__PURE__*/jsx(Icon, {
                 name: "error",
                 className: "textfield-error-text--icon"
-              }), /*#__PURE__*/_jsx("label", {
+              }), /*#__PURE__*/jsx("label", {
                 htmlFor: props.id,
                 className: "textfield-error-text",
                 children: props.errorText
@@ -146,4 +140,6 @@ export default function DatePicker(props) {
       })]
     })
   });
-}
+}
+
+export { DatePicker as default };

package/components/DialogBox/DialogBox.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { IconButton } from '@mui/material';
-import { useDeviceInfo } from '../../utils';
-import Icon from '../Icon/Icon';
+import 'lodash';
+import 'luxon';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Icon from '../Icon/Icon.js';
 import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function DialogBox(props) {
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function DialogBox(props) {
   const {
     title,
     size,
@@ -28,7 +31,7 @@ export default function DialogBox(props) {
   // 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", {
+  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);
@@ -40,40 +43,40 @@ export default function DialogBox(props) {
       pressStartedOnBackdrop.current = false;
     },
     style: style,
-    children: /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/jsxs("div", {
       className: `dialog-box dialog-box--${size}`,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/jsxs("div", {
         className: "dialog-box--header",
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/jsx("div", {
           className: "close-icon-spacer"
-        }), /*#__PURE__*/_jsx("p", {
+        }), /*#__PURE__*/jsx("p", {
           className: "title",
           children: title
-        }), /*#__PURE__*/_jsx(IconButton, {
+        }), /*#__PURE__*/jsx(IconButton, {
           onClick: onClose,
           size: "small",
-          children: /*#__PURE__*/_jsx(Icon, {
+          children: /*#__PURE__*/jsx(Icon, {
             name: "close",
             className: "icon-close"
           })
         })]
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/jsxs("div", {
         className: (hasFooter ? 'dialog-box--body' : 'dialog-box--body-no-footer') + (scrolled ? ' scrolled' : ''),
-        children: [/*#__PURE__*/_jsx("div", {
+        children: [/*#__PURE__*/jsx("div", {
           className: "dialog-box--message",
           children: message
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/jsx("div", {
           className: "dialog-box--boundary",
           children: children
         })]
-      }), hasFooter && /*#__PURE__*/_jsxs("div", {
+      }), hasFooter && /*#__PURE__*/jsxs("div", {
         className: "dialog-box--footer",
-        children: [leftButton && /*#__PURE__*/_jsxs("div", {
+        children: [leftButton && /*#__PURE__*/jsxs("div", {
           className: "dialog-box--footer-container",
-          children: [/*#__PURE__*/_jsx("div", {
+          children: [/*#__PURE__*/jsx("div", {
             className: "left-button",
             children: leftButton
-          }), /*#__PURE__*/_jsx("div", {
+          }), /*#__PURE__*/jsx("div", {
             className: "right-buttons",
             children: rightButtons?.map((rb, index) => {
               const rbWithKey = {
@@ -87,7 +90,7 @@ export default function DialogBox(props) {
               return rbWithKey;
             })
           })]
-        }), middleButtons && /*#__PURE__*/_jsx("div", {
+        }), middleButtons && /*#__PURE__*/jsx("div", {
           className: "dialog-box--actions-container",
           children: middleButtons?.map((mb, index) => {
             const mbWithKey = {
@@ -104,4 +107,6 @@ export default function DialogBox(props) {
       })]
     })
   }) : null;
-}
+}
+
+export { DialogBox as default };

package/components/Divisor.js

@@ -1,16 +1,19 @@
-import React from 'react';
+import '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({
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function Divisor({
   mt = 3
 }) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Box, {
       mt: mt
-    }), /*#__PURE__*/_jsx(Divider, {
+    }), /*#__PURE__*/jsx(Divider, {
       light: true
-    }), /*#__PURE__*/_jsx(Box, {
+    }), /*#__PURE__*/jsx(Box, {
       mt: mt
     })]
   });
-}
+}
+
+export { Divisor as default };

package/components/Dropdown.js

@@ -1,9 +1,10 @@
-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({
+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,
@@ -14,17 +15,17 @@ export function DropdownV1({
   const onChangeH = event => {
     onChange(event.target.value);
   };
-  return /*#__PURE__*/_jsxs(FormControl, {
+  return /*#__PURE__*/jsxs(FormControl, {
     variant: "outlined",
     size: "small",
     disabled: disabled,
     sx: {
       width: '100%'
     },
-    children: [/*#__PURE__*/_jsx(InputLabel, {
+    children: [/*#__PURE__*/jsx(InputLabel, {
       id: `${id}-outlined-label`,
       children: label
-    }), /*#__PURE__*/_jsx(Select, {
+    }), /*#__PURE__*/jsx(Select, {
       labelId: `${id}-outlined-label`,
       id: id,
       label: label,
@@ -33,7 +34,7 @@ export function DropdownV1({
       children: values?.map(({
         label: inLabel,
         value
-      }) => /*#__PURE__*/_jsx(MenuItem, {
+      }) => /*#__PURE__*/jsx(MenuItem, {
         id: value,
         value: value,
         children: inLabel
@@ -53,7 +54,7 @@ export function DropdownV1({
  *   selectedValue={'value1'}
  * />
  */
-export default function Dropdown(props) {
+function Dropdown(props) {
   const {
     selectedValue,
     onChange,
@@ -67,13 +68,13 @@ export default function Dropdown(props) {
       fontWeight: option.fontWeight || 'normal',
       fontStyle: option.fontStyle || 'normal'
     };
-    return /*#__PURE__*/_jsx("span", {
+    return /*#__PURE__*/jsx("span", {
       style: styles,
       children: option.label
     });
   };
   if (autocomplete) {
-    return /*#__PURE__*/_jsx(Autocomplete, {
+    return /*#__PURE__*/jsx(Autocomplete, {
       ...remainingProps,
       options: options ?? [],
       selected: selectedItem || '',
@@ -81,7 +82,7 @@ export default function Dropdown(props) {
       onChange: option => onChange(option.value)
     });
   }
-  return /*#__PURE__*/_jsx(SelectT, {
+  return /*#__PURE__*/jsx(SelectT, {
     ...remainingProps,
     options: options,
     selectedValue: selectedItem,
@@ -94,4 +95,6 @@ export default function Dropdown(props) {
     displayLabel: option => option?.label || '',
     onChange: option => onChange(option.value)
   });
-}
+}
+
+export { DropdownV1, Dropdown as default };

package/components/EditableTable/index.js

@@ -1,8 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Box, MenuItem, TextField, useTheme } from '@mui/material';
-import { MaterialReactTable as MRTTable, MRT_ToolbarInternalButtons, useMaterialReactTable } from 'material-react-table';
-import Button from '../Button/Button';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useTheme, Box, TextField, MenuItem } from '@mui/material';
+import { MRT_ToolbarInternalButtons, useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import Button from '../Button/Button.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 const isActiveFilter = filter => {
   if (!filter.value) {
     return false;
@@ -12,7 +13,7 @@ const isActiveFilter = filter => {
   }
   return filter.value !== null && filter.value !== undefined && filter.value !== '';
 };
-export default function EditableTable({
+function EditableTable({
   clearAllFiltersLabel,
   columns,
   data,
@@ -121,7 +122,7 @@ export default function EditableTable({
               }
               iTable.setEditingCell(null);
             }, [value]);
-            return /*#__PURE__*/_jsx(TextField, {
+            return /*#__PURE__*/jsx(TextField, {
               select: true,
               value: value,
               onChange: e => setValue(e.target.value),
@@ -135,7 +136,7 @@ export default function EditableTable({
               },
               size: "small",
               fullWidth: true,
-              children: selectOptions.map(option => /*#__PURE__*/_jsx(MenuItem, {
+              children: selectOptions.map(option => /*#__PURE__*/jsx(MenuItem, {
                 value: option.value,
                 children: option.label
               }, option.value))
@@ -191,20 +192,20 @@ export default function EditableTable({
     const hasColumnFilters = state.columnFilters.some(isActiveFilter);
     const hasGlobalFilter = enableGlobalFilter && !!state.globalFilter;
     const hasActiveFilters = hasColumnFilters || hasGlobalFilter;
-    return /*#__PURE__*/_jsxs(Box, {
+    return /*#__PURE__*/jsxs(Box, {
       sx: {
         display: 'flex',
         alignItems: 'center',
         gap: 1
       },
-      children: [showClearAllFilters && hasActiveFilters && /*#__PURE__*/_jsx(Button, {
+      children: [showClearAllFilters && hasActiveFilters && /*#__PURE__*/jsx(Button, {
         onClick: () => handleClearAllFilters(tbl),
         label: clearAllFiltersLabel,
         priority: "ghost",
         size: "small"
       }), consumerRenderToolbarInternalActions ? consumerRenderToolbarInternalActions({
         table: tbl
-      }) : /*#__PURE__*/_jsx(MRT_ToolbarInternalButtons, {
+      }) : /*#__PURE__*/jsx(MRT_ToolbarInternalButtons, {
         table: tbl
       })]
     });
@@ -265,12 +266,14 @@ export default function EditableTable({
       onColumnFiltersChange: setColumnFilters
     } : {})
   });
-  return /*#__PURE__*/_jsx(Box, {
+  return /*#__PURE__*/jsx(Box, {
     minHeight: "160px",
     padding: 2,
     sx: sx,
-    children: /*#__PURE__*/_jsx(MRTTable, {
+    children: /*#__PURE__*/jsx(MaterialReactTable, {
       table: table
     })
   });
-}
+}
+
+export { EditableTable as default };