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

package/components/AntSwitch/index.js

@@ -1,20 +1,23 @@
-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
-    });
+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
+  });
 };
-const components_AntSwitch = AntSwitch;
-export default components_AntSwitch;
+
+export { AntSwitch as default };

package/components/Autocomplete/Autocomplete.js

@@ -1,107 +1,131 @@
-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
-    });
+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
+  });
 }
-export default Autocomplete_Autocomplete;
+
+export { Autocomplete as default };

package/components/Badge/index.js

@@ -1,29 +1,30 @@
-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
-        })
-    });
+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
+    })
+  });
 };
-const components_Badge = Badge;
-export default components_Badge;
+
+export { Badge as default };

package/components/BusySpinner/index.js

@@ -1,42 +1,47 @@
-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, {
+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, {
         sx: {
-            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
-                }
-            })
-        })
-    });
+          color: theme.palette.TwClrIcnBrand
+        }
+      })
+    })
+  });
 }
-export default BusySpinner;
+
+export { BusySpinner as default };

package/components/Button/Button.js

@@ -1,44 +1,50 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { ButtonBase } from "@mui/material";
-import Icon from "../Icon/Icon.js";
-import "./styles.scss";
+import 'react';
+import { ButtonBase } from '@mui/material';
+import Icon from '../Icon/Icon.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 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 default Button;
+
+export { Button as default };

package/components/Checkbox.js

@@ -1,65 +1,64 @@
-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)
-        }
-    });
+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)
+    }
+  });
 }
-export default Checkbox_Checkbox;
-export { CheckboxStyle };
+
+export { CheckboxStyle, Checkbox as default };