@terraware/web-components 5.0.27 → 5.1.0

package/components/AntSwitch/index.js

@@ -1,23 +1,20 @@
-import { useCallback } from 'react';
-import { Switch } from '@mui/material';
-import './styles.scss';
-import { jsx } from 'react/jsx-runtime';
-
-const AntSwitch = props => {
-  const {
-    checked,
-    disabled,
-    onChange
-  } = props;
-  const onChangeHandler = useCallback((event, value) => {
-    onChange?.(value);
-  }, [onChange]);
-  return /*#__PURE__*/jsx(Switch, {
-    className: "ant-switch",
-    checked: checked,
-    disabled: disabled,
-    onChange: onChangeHandler
-  });
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Switch } from "@mui/material";
+import "./styles.scss";
+const AntSwitch = (props)=>{
+    const { checked, disabled, onChange } = props;
+    const onChangeHandler = useCallback((event, value)=>{
+        onChange?.(value);
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ jsx(Switch, {
+        className: "ant-switch",
+        checked: checked,
+        disabled: disabled,
+        onChange: onChangeHandler
+    });
 };
-
-export { AntSwitch as default };
+const components_AntSwitch = AntSwitch;
+export default components_AntSwitch;

package/components/Autocomplete/Autocomplete.js

@@ -1,131 +1,107 @@
-import 'react';
-import { Autocomplete as Autocomplete$1, Box, TextField } from '@mui/material';
-import Icon from '../Icon/Icon.js';
-import IconTooltip from '../IconTooltip/index.js';
-import '../Select/styles.scss';
-import './styles.scss';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const isEmpty = value => ['', undefined].includes(value);
-function Autocomplete({
-  id,
-  label,
-  options,
-  onChange,
-  selected,
-  filterOptions,
-  freeSolo,
-  disabled,
-  className,
-  hideClearIcon,
-  isEqual,
-  placeholder,
-  errorText,
-  tooltipTitle,
-  required,
-  noOptionsText,
-  loading,
-  loadingText,
-  open,
-  onOpen,
-  onClose,
-  sx,
-  renderOption
-}) {
-  const onChangeHandler = (event, value) => {
-    if (event) {
-      if (value) {
-        onChange(value);
-      } else {
-        onChange('');
-      }
-    }
-  };
-  const renderInput = params => /*#__PURE__*/jsxs(Box, {
-    className: `auto-complete ${className}`,
-    sx: sx,
-    children: [label && /*#__PURE__*/jsxs("label", {
-      htmlFor: id,
-      className: "textfield-label",
-      children: [label, " ", required ? '*' : '', tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
-        placement: "top",
-        title: tooltipTitle
-      })]
-    }), /*#__PURE__*/jsx(TextField, {
-      ...params,
-      variant: "outlined",
-      size: "small",
-      placeholder: placeholder,
-      className: errorText ? 'auto-complete--error' : ''
-    }), errorText && /*#__PURE__*/jsxs("div", {
-      className: "textfield-label-container",
-      children: [/*#__PURE__*/jsx(Icon, {
-        name: "error",
-        className: "textfield-error-text--icon"
-      }), /*#__PURE__*/jsx("label", {
-        htmlFor: id,
-        className: "textfield-error-text",
-        children: errorText
-      })]
-    })]
-  });
-  const optionalArgs = {};
-  if (hideClearIcon) {
-    optionalArgs.clearIcon = null;
-  }
-  if (isEqual) {
-    optionalArgs.isOptionEqualToValue = isEqual;
-  } else {
-    optionalArgs.isOptionEqualToValue = (option, value) => option === value || isEmpty(option) && isEmpty(value);
-  }
-  return /*#__PURE__*/jsx(Autocomplete$1, {
-    disabled: disabled,
-    id: id,
-    options: options,
-    getOptionLabel: option => {
-      if (typeof option === 'object') {
-        return option.label ?? '';
-      }
-      return option ?? '';
-    },
-    onChange: onChangeHandler,
-    onInputChange: (event, value) => freeSolo && onChangeHandler(event, value),
-    value: selected,
-    filterOptions: filterOptions,
-    freeSolo: freeSolo,
-    forcePopupIcon: true,
-    renderInput: renderInput,
-    "aria-required": required,
-    noOptionsText: noOptionsText,
-    loading: loading,
-    loadingText: loadingText,
-    open: open,
-    onOpen: onOpen,
-    onClose: onClose,
-    popupIcon: /*#__PURE__*/jsx(Icon, {
-      name: loading ? 'spinner' : open ? 'chevronUp' : 'chevronDown',
-      className: "auto-complete--icon-right",
-      size: "medium"
-    }),
-    classes: {
-      paper: 'auto-complete select',
-      listbox: 'options-container'
-    },
-    sx: {
-      '& .MuiAutocomplete-popupIndicator:hover': {
-        background: 'transparent'
-      },
-      '& .MuiAutocomplete-popupIndicator': {
-        background: 'transparent',
-        transform: 'none'
-      },
-      '& .MuiTouchRipple-root': {
-        display: 'none'
-      }
-    },
-    ...optionalArgs,
-    renderOption: renderOption
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Autocomplete, Box, TextField } from "@mui/material";
+import Icon from "../Icon/Icon.js";
+import IconTooltip from "../IconTooltip/index.js";
+import "../Select/styles.scss";
+import "./styles.scss";
+const isEmpty = (value)=>[
+        '',
+        void 0
+    ].includes(value);
+function Autocomplete_Autocomplete({ id, label, options, onChange, selected, filterOptions, freeSolo, disabled, className, hideClearIcon, isEqual, placeholder, errorText, tooltipTitle, required, noOptionsText, loading, loadingText, open, onOpen, onClose, sx, renderOption }) {
+    const onChangeHandler = (event, value)=>{
+        if (event) value ? onChange(value) : onChange('');
+    };
+    const renderInput = (params)=>/*#__PURE__*/ jsxs(Box, {
+            className: `auto-complete ${className}`,
+            sx: sx,
+            children: [
+                label && /*#__PURE__*/ jsxs("label", {
+                    htmlFor: id,
+                    className: "textfield-label",
+                    children: [
+                        label,
+                        " ",
+                        required ? '*' : '',
+                        tooltipTitle && /*#__PURE__*/ jsx(IconTooltip, {
+                            placement: "top",
+                            title: tooltipTitle
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(TextField, {
+                    ...params,
+                    variant: "outlined",
+                    size: "small",
+                    placeholder: placeholder,
+                    className: errorText ? 'auto-complete--error' : ''
+                }),
+                errorText && /*#__PURE__*/ jsxs("div", {
+                    className: "textfield-label-container",
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            name: "error",
+                            className: "textfield-error-text--icon"
+                        }),
+                        /*#__PURE__*/ jsx("label", {
+                            htmlFor: id,
+                            className: "textfield-error-text",
+                            children: errorText
+                        })
+                    ]
+                })
+            ]
+        });
+    const optionalArgs = {};
+    if (hideClearIcon) optionalArgs.clearIcon = null;
+    if (isEqual) optionalArgs.isOptionEqualToValue = isEqual;
+    else optionalArgs.isOptionEqualToValue = (option, value)=>option === value || isEmpty(option) && isEmpty(value);
+    return /*#__PURE__*/ jsx(Autocomplete, {
+        disabled: disabled,
+        id: id,
+        options: options,
+        getOptionLabel: (option)=>{
+            if ('object' == typeof option) return option.label ?? '';
+            return option ?? '';
+        },
+        onChange: onChangeHandler,
+        onInputChange: (event, value)=>freeSolo && onChangeHandler(event, value),
+        value: selected,
+        filterOptions: filterOptions,
+        freeSolo: freeSolo,
+        forcePopupIcon: true,
+        renderInput: renderInput,
+        "aria-required": required,
+        noOptionsText: noOptionsText,
+        loading: loading,
+        loadingText: loadingText,
+        open: open,
+        onOpen: onOpen,
+        onClose: onClose,
+        popupIcon: /*#__PURE__*/ jsx(Icon, {
+            name: loading ? 'spinner' : open ? 'chevronUp' : 'chevronDown',
+            className: "auto-complete--icon-right",
+            size: "medium"
+        }),
+        classes: {
+            paper: 'auto-complete select',
+            listbox: 'options-container'
+        },
+        sx: {
+            '& .MuiAutocomplete-popupIndicator:hover': {
+                background: 'transparent'
+            },
+            '& .MuiAutocomplete-popupIndicator': {
+                background: 'transparent',
+                transform: 'none'
+            },
+            '& .MuiTouchRipple-root': {
+                display: 'none'
+            }
+        },
+        ...optionalArgs,
+        renderOption: renderOption
+    });
 }
-
-export { Autocomplete as default };
+export default Autocomplete_Autocomplete;

package/components/Badge/index.js

@@ -1,30 +1,29 @@
-import 'react';
-import { useTheme, Box, Typography } from '@mui/material';
-import { jsx } from 'react/jsx-runtime';
-
-const Badge = props => {
-  const theme = useTheme();
-  const backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
-  const borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
-  const labelColor = props.labelColor || borderColor;
-  return /*#__PURE__*/jsx(Box, {
-    component: "span",
-    sx: {
-      backgroundColor,
-      border: `1px solid ${borderColor}`,
-      borderRadius: theme.spacing(1),
-      display: 'inline-block',
-      padding: theme.spacing(0.5, 1),
-      width: 'fit-content'
-    },
-    children: /*#__PURE__*/jsx(Typography, {
-      color: labelColor,
-      component: "span",
-      fontSize: "14px",
-      fontWeight: 500,
-      children: props.label
-    })
-  });
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box, Typography, useTheme } from "@mui/material";
+const Badge = (props)=>{
+    const theme = useTheme();
+    const backgroundColor = props.backgroundColor || theme.palette.TwClrBgSecondary;
+    const borderColor = props.borderColor || theme.palette.TwClrBrdrSecondary;
+    const labelColor = props.labelColor || borderColor;
+    return /*#__PURE__*/ jsx(Box, {
+        component: "span",
+        sx: {
+            backgroundColor,
+            border: `1px solid ${borderColor}`,
+            borderRadius: theme.spacing(1),
+            display: 'inline-block',
+            padding: theme.spacing(0.5, 1),
+            width: 'fit-content'
+        },
+        children: /*#__PURE__*/ jsx(Typography, {
+            color: labelColor,
+            component: "span",
+            fontSize: "14px",
+            fontWeight: 500,
+            children: props.label
+        })
+    });
 };
-
-export { Badge as default };
+const components_Badge = Badge;
+export default components_Badge;

package/components/BusySpinner/index.js

@@ -1,47 +1,42 @@
-import 'react';
-import { useTheme, Box, CircularProgress } from '@mui/material';
-import hexRgb from 'hex-rgb';
-import { jsx } from 'react/jsx-runtime';
-
-function BusySpinner({
-  withSkrim,
-  noBackground
-}) {
-  const theme = useTheme();
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      position: 'fixed',
-      left: 0,
-      right: 0,
-      top: 0,
-      bottom: 0,
-      backgroundColor: withSkrim ? `${hexRgb(`${theme.palette.TwClrBaseGray025}`, {
-        alpha: 0.6,
-        format: 'css'
-      })}` : 'none',
-      zIndex: 2000,
-      backgroundImage: noBackground ? 'none' : 'linear-gradient(180deg,' + `${hexRgb(`${theme.palette.TwClrBaseGreen050}`, {
-        alpha: 0,
-        format: 'css'
-      })} 0%,` + `${hexRgb(`${theme.palette.TwClrBaseGreen050}`, {
-        alpha: 0.24,
-        format: 'css'
-      })} 100%)`
-    },
-    children: /*#__PURE__*/jsx(Box, {
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      padding: theme.spacing(5),
-      flexDirection: "column",
-      height: "100%",
-      children: /*#__PURE__*/jsx(CircularProgress, {
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box, CircularProgress, useTheme } from "@mui/material";
+import hex_rgb from "hex-rgb";
+function BusySpinner({ withSkrim, noBackground }) {
+    const theme = useTheme();
+    return /*#__PURE__*/ jsx(Box, {
         sx: {
-          color: theme.palette.TwClrIcnBrand
-        }
-      })
-    })
-  });
+            position: 'fixed',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            backgroundColor: withSkrim ? `${hex_rgb(`${theme.palette.TwClrBaseGray025}`, {
+                alpha: 0.6,
+                format: 'css'
+            })}` : 'none',
+            zIndex: 2000,
+            backgroundImage: noBackground ? 'none' : `linear-gradient(180deg,${hex_rgb(`${theme.palette.TwClrBaseGreen050}`, {
+                alpha: 0,
+                format: 'css'
+            })} 0%,${hex_rgb(`${theme.palette.TwClrBaseGreen050}`, {
+                alpha: 0.24,
+                format: 'css'
+            })} 100%)`
+        },
+        children: /*#__PURE__*/ jsx(Box, {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: theme.spacing(5),
+            flexDirection: "column",
+            height: "100%",
+            children: /*#__PURE__*/ jsx(CircularProgress, {
+                sx: {
+                    color: theme.palette.TwClrIcnBrand
+                }
+            })
+        })
+    });
 }
-
-export { BusySpinner as default };
+export default BusySpinner;

package/components/Button/Button.js

@@ -1,50 +1,44 @@
-import 'react';
-import { ButtonBase } from '@mui/material';
-import Icon from '../Icon/Icon.js';
-import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { ButtonBase } from "@mui/material";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 function Button(props) {
-  const {
-    onClick,
-    label,
-    type = 'productive',
-    priority = 'primary',
-    size = 'small',
-    disabled,
-    icon,
-    rightIcon,
-    processing,
-    id,
-    className,
-    style,
-    sx
-  } = props;
-  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' : ''}
+    const { onClick, label, type = 'productive', priority = 'primary', size = 'small', disabled, icon, rightIcon, processing, id, className, style, sx } = props;
+    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' : ''}
       ${!label ? 'button-no-label' : ''} ${className ?? ''}`,
-    disabled: disabled,
-    style: style,
-    sx: [{
-      '& path': {
-        fill: 'currentColor'
-      }
-    }, ...(Array.isArray(sx) ? sx : [sx])],
-    children: [processing && /*#__PURE__*/jsx(Icon, {
-      name: "spinner",
-      size: size,
-      className: "icon-spinner"
-    }), !processing && icon && /*#__PURE__*/jsx(Icon, {
-      name: icon,
-      size: size
-    }), !processing && !!label && label, !processing && rightIcon && /*#__PURE__*/jsx(Icon, {
-      name: rightIcon,
-      size: size,
-      className: "icon-right"
-    })]
-  });
+        disabled: disabled,
+        style: style,
+        sx: [
+            {
+                '& path': {
+                    fill: 'currentColor'
+                }
+            },
+            ...Array.isArray(sx) ? sx : [
+                sx
+            ]
+        ],
+        children: [
+            processing && /*#__PURE__*/ jsx(Icon, {
+                name: "spinner",
+                size: size,
+                className: "icon-spinner"
+            }),
+            !processing && icon && /*#__PURE__*/ jsx(Icon, {
+                name: icon,
+                size: size
+            }),
+            !processing && !!label && label,
+            !processing && rightIcon && /*#__PURE__*/ jsx(Icon, {
+                name: rightIcon,
+                size: size,
+                className: "icon-right"
+            })
+        ]
+    });
 }
-
-export { Button as default };
+export default Button;

package/components/Checkbox.js

@@ -1,64 +1,65 @@
-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
-  },
-  '&:hover > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBrdrHover
-  },
-  '&.Mui-checked > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBgSelected,
-    color: theme.palette.TwClrBgSelected
-  },
-  '&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
-    fill: theme.palette.TwClrBgSelected,
-    color: theme.palette.TwClrBgSelected
-  },
-  '&:focus > .MuiSvgIcon-root': {
-    border: `2px solid ${theme.palette.TwClrBgSelected}`
-  },
-  '&.Mui-disabled': {
-    opacity: 0.5
-  }
-});
-function Checkbox(props) {
-  const theme = useTheme();
-  const onChange = (event, checked) => {
-    if (props.indeterminate) {
-      props.onChange(true);
-      return;
-    }
-    props.onChange(checked);
-  };
-  return /*#__PURE__*/jsx(FormControlLabel, {
-    id: props.id,
-    onChange: onChange,
-    label: props.label,
-    disabled: props.disabled,
-    control: /*#__PURE__*/jsx(Checkbox$1, {
-      disabled: props.disabled,
-      disableRipple: true,
-      id: 'check-' + props.id,
-      indeterminate: props.indeterminate,
-      checked: props.value ?? false,
-      size: "medium",
-      sx: [CheckboxStyle(theme), ...(Array.isArray(props.sx) ? props.sx : [props.sx])]
-    }),
-    className: props.className,
-    sx: {
-      alignItems: 'flex-start',
-      color: theme.palette.TwClrTxt,
-      fontFamily: 'Inter',
-      fontSize: '16px',
-      fontWeight: 500,
-      lineHeight: '24px',
-      margin: theme.spacing(1, 0, 0, 0)
-    }
-  });
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Checkbox, FormControlLabel, useTheme } from "@mui/material";
+const CheckboxStyle = (theme)=>({
+        padding: theme.spacing(0, 1, 0, 0),
+        '& .MuiSvgIcon-root': {
+            fill: theme.palette.TwClrBrdrSecondary
+        },
+        '&:hover > .MuiSvgIcon-root': {
+            fill: theme.palette.TwClrBrdrHover
+        },
+        '&.Mui-checked > .MuiSvgIcon-root': {
+            fill: theme.palette.TwClrBgSelected,
+            color: theme.palette.TwClrBgSelected
+        },
+        '&.MuiCheckbox-indeterminate > .MuiSvgIcon-root': {
+            fill: theme.palette.TwClrBgSelected,
+            color: theme.palette.TwClrBgSelected
+        },
+        '&:focus > .MuiSvgIcon-root': {
+            border: `2px solid ${theme.palette.TwClrBgSelected}`
+        },
+        '&.Mui-disabled': {
+            opacity: 0.5
+        }
+    });
+function Checkbox_Checkbox(props) {
+    const theme = useTheme();
+    const onChange = (event, checked)=>{
+        if (props.indeterminate) return void props.onChange(true);
+        props.onChange(checked);
+    };
+    return /*#__PURE__*/ jsx(FormControlLabel, {
+        id: props.id,
+        onChange: onChange,
+        label: props.label,
+        disabled: props.disabled,
+        control: /*#__PURE__*/ jsx(Checkbox, {
+            disabled: props.disabled,
+            disableRipple: true,
+            id: 'check-' + props.id,
+            indeterminate: props.indeterminate,
+            checked: props.value ?? false,
+            size: "medium",
+            sx: [
+                CheckboxStyle(theme),
+                ...Array.isArray(props.sx) ? props.sx : [
+                    props.sx
+                ]
+            ]
+        }),
+        className: props.className,
+        sx: {
+            alignItems: 'flex-start',
+            color: theme.palette.TwClrTxt,
+            fontFamily: 'Inter',
+            fontSize: '16px',
+            fontWeight: 500,
+            lineHeight: '24px',
+            margin: theme.spacing(1, 0, 0, 0)
+        }
+    });
 }
-
-export { CheckboxStyle, Checkbox as default };
+export default Checkbox_Checkbox;
+export { CheckboxStyle };