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

package/components/Message/Message.js

@@ -1,79 +1,76 @@
-import 'react';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-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 { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 function Message(props) {
-  const {
-    type,
-    priority,
-    title,
-    body,
-    actionText,
-    actionHandler,
-    pageButtons,
-    showCloseButton,
-    onClose
-  } = props;
-  const {
-    isMobile
-  } = useDeviceInfo();
-  return /*#__PURE__*/jsxs("div", {
-    className: `tw-message tw-message--${type} tw-message--${priority} ${isMobile ? 'tw-message--mobile' : ''}`,
-    children: [type === 'toast' && /*#__PURE__*/jsx("div", {
-      className: "tw-message--left-side",
-      children: /*#__PURE__*/jsx(Icon, {
-        name: priority,
-        className: "left-side--icon"
-      })
-    }), /*#__PURE__*/jsxs("div", {
-      className: "tw-message--container",
-      children: [/*#__PURE__*/jsxs("div", {
-        className: "tw-message--main-content",
-        children: [type === 'page' && /*#__PURE__*/jsx(Icon, {
-          name: priority,
-          className: "main-content--icon"
-        }), /*#__PURE__*/jsxs("div", {
-          className: "tw-message--main-body",
-          children: [title && /*#__PURE__*/jsx("div", {
-            className: "tw-message--title-container",
-            children: /*#__PURE__*/jsx("h4", {
-              children: title
+    const { type, priority, title, body, actionText, actionHandler, pageButtons, showCloseButton, onClose } = props;
+    const { isMobile } = useDeviceInfo();
+    return /*#__PURE__*/ jsxs("div", {
+        className: `tw-message tw-message--${type} tw-message--${priority} ${isMobile ? 'tw-message--mobile' : ''}`,
+        children: [
+            'toast' === type && /*#__PURE__*/ jsx("div", {
+                className: "tw-message--left-side",
+                children: /*#__PURE__*/ jsx(Icon, {
+                    name: priority,
+                    className: "left-side--icon"
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "tw-message--container",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "tw-message--main-content",
+                        children: [
+                            'page' === type && /*#__PURE__*/ jsx(Icon, {
+                                name: priority,
+                                className: "main-content--icon"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "tw-message--main-body",
+                                children: [
+                                    title && /*#__PURE__*/ jsx("div", {
+                                        className: "tw-message--title-container",
+                                        children: /*#__PURE__*/ jsx("h4", {
+                                            children: title
+                                        })
+                                    }),
+                                    'string' == typeof body ? /*#__PURE__*/ jsx("p", {
+                                        children: body
+                                    }) : body,
+                                    'page' === type && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/ jsx("div", {
+                                        className: "tw-message--actions-container",
+                                        children: pageButtons?.map((pageButton, index)=>{
+                                            const pageButtonWithKey = {
+                                                ...pageButton,
+                                                key: `page-button-${index}`,
+                                                props: {
+                                                    ...pageButton.props,
+                                                    size: pageButton.props.size || 'medium'
+                                                }
+                                            };
+                                            return pageButtonWithKey;
+                                        })
+                                    }) : null
+                                ]
+                            })
+                        ]
+                    }),
+                    'toast' === type && actionText ? /*#__PURE__*/ jsx("button", {
+                        onClick: actionHandler,
+                        className: "tw-message--action-text",
+                        children: actionText
+                    }) : showCloseButton ? /*#__PURE__*/ jsx("button", {
+                        onClick: onClose,
+                        className: "icon-container",
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "close",
+                            className: "page-message--close-icon"
+                        })
+                    }) : null
+                ]
             })
-          }), typeof body === 'string' ? /*#__PURE__*/jsx("p", {
-            children: body
-          }) : body, type === 'page' && pageButtons && pageButtons.length > 0 ? /*#__PURE__*/jsx("div", {
-            className: "tw-message--actions-container",
-            children: pageButtons?.map((pageButton, index) => {
-              const pageButtonWithKey = {
-                ...pageButton,
-                key: `page-button-${index}`,
-                props: {
-                  ...pageButton.props,
-                  size: pageButton.props.size || 'medium'
-                }
-              };
-              return pageButtonWithKey;
-            })
-          }) : null]
-        })]
-      }), type === 'toast' && actionText ? /*#__PURE__*/jsx("button", {
-        onClick: actionHandler,
-        className: "tw-message--action-text",
-        children: actionText
-      }) : showCloseButton ? /*#__PURE__*/jsx("button", {
-        onClick: onClose,
-        className: "icon-container",
-        children: /*#__PURE__*/jsx(Icon, {
-          name: "close",
-          className: "page-message--close-icon"
-        })
-      }) : null]
-    })]
-  });
+        ]
+    });
 }
-
-export { Message as default };
+export default Message;

package/components/MultiSelect/index.js

@@ -1,127 +1,115 @@
-import { useState, useEffect } from 'react';
-import { Box } from '@mui/material';
-import Icon from '../Icon/Icon.js';
-import IconTooltip from '../IconTooltip/index.js';
-import PillList from '../PillList/index.js';
-import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box } from "@mui/material";
+import Icon from "../Icon/Icon.js";
+import IconTooltip from "../IconTooltip/index.js";
+import PillList from "../PillList/index.js";
+import "./styles.scss";
 function MultiSelect(props) {
-  const {
-    className,
-    disabled,
-    fullWidth,
-    helperText,
-    errorText,
-    id,
-    label,
-    missingValuePlaceholder,
-    onAdd,
-    onRemove,
-    onPillClick,
-    options,
-    optionsVisible,
-    pillListClassName,
-    placeHolder,
-    selectedOptions,
-    sx,
-    tooltipTitle,
-    valueRenderer
-  } = props;
-  const [openedOptions, setOpenedOptions] = useState(false);
-  const toggleOptions = () => {
-    setOpenedOptions(isOpen => !isOpen && !disabled);
-    if (props.onFocus) {
-      props.onFocus();
-    }
-  };
-  useEffect(() => {
-    if (optionsVisible !== undefined) {
-      setOpenedOptions(optionsVisible);
-    }
-  }, [optionsVisible]);
-  const onBlurHandler = event => {
-    // In Chrome > 126, the onBlur event will fire even if you are clicking _within_ the focused element
-    // If this is the case, we do not actually want to blur
-    if (event.currentTarget.contains(event.relatedTarget)) {
-      return;
-    }
-    setOpenedOptions(false);
-    if (props.onBlur) {
-      props.onBlur();
-    }
-  };
-  const unselectedOptions = Array.from(options.keys()).filter(key => !selectedOptions.includes(key));
-  const valuesPillData = selectedOptions.map(item => {
-    const value = options.get(item);
-    return {
-      id: item,
-      value: value ? valueRenderer(value) : missingValuePlaceholder || ''
+    const { className, disabled, fullWidth, helperText, errorText, id, label, missingValuePlaceholder, onAdd, onRemove, onPillClick, options, optionsVisible, pillListClassName, placeHolder, selectedOptions, sx, tooltipTitle, valueRenderer } = props;
+    const [openedOptions, setOpenedOptions] = useState(false);
+    const toggleOptions = ()=>{
+        setOpenedOptions((isOpen)=>!isOpen && !disabled);
+        if (props.onFocus) props.onFocus();
     };
-  }).filter(data => data.value);
-  return /*#__PURE__*/jsxs(Box, {
-    className: `multi-select ${className}`,
-    sx: sx,
-    children: [label && /*#__PURE__*/jsxs("label", {
-      htmlFor: id,
-      className: "multi-select__label",
-      children: [label, " ", tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
-        title: tooltipTitle
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: `multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`,
-      onBlur: onBlurHandler,
-      tabIndex: 0,
-      children: [/*#__PURE__*/jsxs("div", {
-        id: id,
-        className: `multi-select__values${disabled ? '--disabled' : ''}${openedOptions ? ' open' : ''}${errorText ? ' error' : ''}`,
-        onClick: toggleOptions,
-        children: [selectedOptions.length > 0 ? /*#__PURE__*/jsx(PillList, {
-          data: valuesPillData,
-          onRemove: onRemove,
-          onClick: onPillClick,
-          className: pillListClassName
-        }) : /*#__PURE__*/jsx("p", {
-          className: "multi-select__placeholder-text",
-          children: placeHolder
-        }), /*#__PURE__*/jsx("div", {
-          className: 'multi-select__values__icon-button',
-          "aria-label": "show-options",
-          children: /*#__PURE__*/jsx(Icon, {
-            name: openedOptions ? 'chevronUp' : 'chevronDown',
-            className: `multi-select__values__icon-right${disabled ? '--disabled' : ''}`
-          })
-        })]
-      }), options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/jsx("div", {
-        className: "multi-select__options-container",
-        children: /*#__PURE__*/jsx("ul", {
-          className: 'multi-select__options',
-          children: unselectedOptions.map((optionKey, index) => {
-            const optionValue = options.get(optionKey);
-            return /*#__PURE__*/jsx("li", {
-              className: "select-value",
-              onClick: () => onAdd(optionKey),
-              children: optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || ''
-            }, index);
-          })
-        })
-      })]
-    }), helperText && /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: "multi-select__help-text",
-      children: helperText
-    }), errorText && /*#__PURE__*/jsxs("div", {
-      className: "multi-select__error",
-      children: [/*#__PURE__*/jsx(Icon, {
-        name: "error",
-        className: "multi-select__error-icon"
-      }), /*#__PURE__*/jsx("label", {
-        htmlFor: id,
-        className: "multi-select__error-text",
-        children: errorText
-      })]
-    })]
-  });
+    useEffect(()=>{
+        if (void 0 !== optionsVisible) setOpenedOptions(optionsVisible);
+    }, [
+        optionsVisible
+    ]);
+    const onBlurHandler = (event)=>{
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        setOpenedOptions(false);
+        if (props.onBlur) props.onBlur();
+    };
+    const unselectedOptions = Array.from(options.keys()).filter((key)=>!selectedOptions.includes(key));
+    const valuesPillData = selectedOptions.map((item)=>{
+        const value = options.get(item);
+        return {
+            id: item,
+            value: value ? valueRenderer(value) : missingValuePlaceholder || ''
+        };
+    }).filter((data)=>data.value);
+    return /*#__PURE__*/ jsxs(Box, {
+        className: `multi-select ${className}`,
+        sx: sx,
+        children: [
+            label && /*#__PURE__*/ jsxs("label", {
+                htmlFor: id,
+                className: "multi-select__label",
+                children: [
+                    label,
+                    " ",
+                    tooltipTitle && /*#__PURE__*/ jsx(IconTooltip, {
+                        title: tooltipTitle
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: `multi-select__container ${fullWidth ? 'multi-select__container--fullWidth' : ''}`,
+                onBlur: onBlurHandler,
+                tabIndex: 0,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        id: id,
+                        className: `multi-select__values${disabled ? '--disabled' : ''}${openedOptions ? ' open' : ''}${errorText ? ' error' : ''}`,
+                        onClick: toggleOptions,
+                        children: [
+                            selectedOptions.length > 0 ? /*#__PURE__*/ jsx(PillList, {
+                                data: valuesPillData,
+                                onRemove: onRemove,
+                                onClick: onPillClick,
+                                className: pillListClassName
+                            }) : /*#__PURE__*/ jsx("p", {
+                                className: "multi-select__placeholder-text",
+                                children: placeHolder
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: 'multi-select__values__icon-button',
+                                "aria-label": "show-options",
+                                children: /*#__PURE__*/ jsx(Icon, {
+                                    name: openedOptions ? 'chevronUp' : 'chevronDown',
+                                    className: `multi-select__values__icon-right${disabled ? '--disabled' : ''}`
+                                })
+                            })
+                        ]
+                    }),
+                    options && unselectedOptions.length > 0 && openedOptions && /*#__PURE__*/ jsx("div", {
+                        className: "multi-select__options-container",
+                        children: /*#__PURE__*/ jsx("ul", {
+                            className: 'multi-select__options',
+                            children: unselectedOptions.map((optionKey, index)=>{
+                                const optionValue = options.get(optionKey);
+                                return /*#__PURE__*/ jsx("li", {
+                                    className: "select-value",
+                                    onClick: ()=>onAdd(optionKey),
+                                    children: optionValue ? valueRenderer(optionValue) : missingValuePlaceholder || ''
+                                }, index);
+                            })
+                        })
+                    })
+                ]
+            }),
+            helperText && /*#__PURE__*/ jsx("label", {
+                htmlFor: id,
+                className: "multi-select__help-text",
+                children: helperText
+            }),
+            errorText && /*#__PURE__*/ jsxs("div", {
+                className: "multi-select__error",
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "error",
+                        className: "multi-select__error-icon"
+                    }),
+                    /*#__PURE__*/ jsx("label", {
+                        htmlFor: id,
+                        className: "multi-select__error-text",
+                        children: errorText
+                    })
+                ]
+            })
+        ]
+    });
 }
-
-export { MultiSelect as default };
+export default MultiSelect;

package/components/Navbar/NavFooter.js

@@ -1,15 +1,11 @@
-import 'react';
-import './styles.scss';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import "react";
+import "./styles.scss";
 function NavFooter(props) {
-  const {
-    children
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    className: "nav-footer",
-    children: children
-  });
+    const { children } = props;
+    return /*#__PURE__*/ jsx("div", {
+        className: "nav-footer",
+        children: children
+    });
 }
-
-export { NavFooter as default };
+export default NavFooter;

package/components/Navbar/NavItem.js

@@ -1,87 +1,81 @@
-import React, { useCallback } from 'react';
-import theme from '../../theme.js';
-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, { useCallback } from "react";
+import theme from "../../theme.js";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 function NavItem(props) {
-  const {
-    label,
-    icon,
-    iconColor,
-    children: childrenProps,
-    disabled,
-    selected,
-    onClick,
-    id,
-    isFooter,
-    href,
-    defaultOpen
-  } = props;
-  const children = href ? null : childrenProps;
-  const hasChildrenSelected = useCallback(() => {
-    if (children && children.props && children.props.children) {
-      const subChildren = children.props.children;
-      if (Array.isArray(subChildren)) {
-        return subChildren.some(subChild => subChild.props && subChild.props.selected);
-      }
-      return subChildren.props && subChildren.props.selected;
-    }
-    return false;
-  }, [children]);
-  const wasChildrenSelected = React.useRef(hasChildrenSelected());
-  React.useEffect(() => {
-    const childrenSelected = hasChildrenSelected();
-    if (childrenSelected && !wasChildrenSelected.current) {
-      setOpen(true);
-    }
-    wasChildrenSelected.current = childrenSelected;
-  }, [children, hasChildrenSelected, selected]);
-  const [open, setOpen] = React.useState(defaultOpen ?? hasChildrenSelected());
-  const onClickHandler = () => {
-    if (!disabled) {
-      const nextOpen = !open || hasChildrenSelected();
-      setOpen(nextOpen);
-      if (onClick) {
-        onClick(nextOpen);
-      }
-    }
-  };
-  const customLabel = typeof label !== 'string';
-  return /*#__PURE__*/jsxs("div", {
-    className: `
+    const { label, icon, iconColor, children: childrenProps, disabled, selected, onClick, id, isFooter, href, defaultOpen } = props;
+    const children = href ? null : childrenProps;
+    const hasChildrenSelected = useCallback(()=>{
+        if (children && children.props && children.props.children) {
+            const subChildren = children.props.children;
+            if (Array.isArray(subChildren)) return subChildren.some((subChild)=>subChild.props && subChild.props.selected);
+            return subChildren.props && subChildren.props.selected;
+        }
+        return false;
+    }, [
+        children
+    ]);
+    const wasChildrenSelected = react.useRef(hasChildrenSelected());
+    react.useEffect(()=>{
+        const childrenSelected = hasChildrenSelected();
+        if (childrenSelected && !wasChildrenSelected.current) setOpen(true);
+        wasChildrenSelected.current = childrenSelected;
+    }, [
+        children,
+        hasChildrenSelected,
+        selected
+    ]);
+    const [open, setOpen] = react.useState(defaultOpen ?? hasChildrenSelected());
+    const onClickHandler = ()=>{
+        if (!disabled) {
+            const nextOpen = !open || hasChildrenSelected();
+            setOpen(nextOpen);
+            if (onClick) onClick(nextOpen);
+        }
+    };
+    const customLabel = 'string' != typeof label;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `
         nav-item 
         ${selected ? 'nav-item--selected' : ''}
         ${hasChildrenSelected() ? 'nav-item--children-selected' : ''}
         ${isFooter ? 'nav-item--footer' : ''}
         ${children ? 'nav-item--has-children' : ''}
       `,
-    children: [/*#__PURE__*/jsxs("button", {
-      className: `
+        children: [
+            /*#__PURE__*/ jsxs("button", {
+                className: `
           ${customLabel ? 'nav-item-custom-content' : 'nav-item-content'}
           ${disabled ? 'nav-item--disabled' : ''}
         `,
-      onClick: onClickHandler,
-      id: id,
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        name: icon,
-        className: "nav-item--icon",
-        fillColor: iconColor ?? theme.palette.TwClrIcnSecondary
-      }), !href && /*#__PURE__*/jsx("span", {
-        className: "nav-item--label",
-        children: label
-      }), href && /*#__PURE__*/jsx("a", {
-        className: "nav-item--label nav-item--anchor",
-        href: href,
-        rel: "noopener noreferrer",
-        target: "_external",
-        children: label
-      }), children && /*#__PURE__*/jsx(Icon, {
-        name: open ? 'chevronUp' : 'chevronDown',
-        className: "nav-item--arrow"
-      })]
-    }), children && open && children]
-  });
+                onClick: onClickHandler,
+                id: id,
+                children: [
+                    icon && /*#__PURE__*/ jsx(Icon, {
+                        name: icon,
+                        className: "nav-item--icon",
+                        fillColor: iconColor ?? theme.palette.TwClrIcnSecondary
+                    }),
+                    !href && /*#__PURE__*/ jsx("span", {
+                        className: "nav-item--label",
+                        children: label
+                    }),
+                    href && /*#__PURE__*/ jsx("a", {
+                        className: "nav-item--label nav-item--anchor",
+                        href: href,
+                        rel: "noopener noreferrer",
+                        target: "_external",
+                        children: label
+                    }),
+                    children && /*#__PURE__*/ jsx(Icon, {
+                        name: open ? 'chevronUp' : 'chevronDown',
+                        className: "nav-item--arrow"
+                    })
+                ]
+            }),
+            children && open && children
+        ]
+    });
 }
-
-export { NavItem as default };
+export default NavItem;

package/components/Navbar/NavSection.js

@@ -1,21 +1,19 @@
-import 'react';
-import './styles.scss';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import "./styles.scss";
 function NavSection(props) {
-  const {
-    title,
-    separator = true
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    className: "nav-section",
-    children: [separator && /*#__PURE__*/jsx("div", {
-      className: "divider"
-    }), title && /*#__PURE__*/jsx("span", {
-      className: `nav-section--title ${separator ? '' : 'no-separator'}`,
-      children: title
-    })]
-  });
+    const { title, separator = true } = props;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "nav-section",
+        children: [
+            separator && /*#__PURE__*/ jsx("div", {
+                className: "divider"
+            }),
+            title && /*#__PURE__*/ jsx("span", {
+                className: `nav-section--title ${separator ? '' : 'no-separator'}`,
+                children: title
+            })
+        ]
+    });
 }
-
-export { NavSection as default };
+export default NavSection;