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

package/components/Message/Message.js

@@ -1,76 +1,79 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { useDeviceInfo } from "../../utils/index.js";
-import Icon from "../Icon/Icon.js";
-import "./styles.scss";
+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';
+
 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: [
-            '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
-                ]
+  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
             })
-        ]
-    });
+          }), 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 default Message;
+
+export { Message as default };

package/components/MultiSelect/index.js

@@ -1,115 +1,127 @@
-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";
+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';
+
 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();
+  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 || ''
     };
-    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
-                    })
-                ]
-            })
-        ]
-    });
+  }).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 default MultiSelect;
+
+export { MultiSelect as default };

package/components/Navbar/NavFooter.js

@@ -1,11 +1,15 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
+import 'react';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
 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 default NavFooter;
+
+export { NavFooter as default };

package/components/Navbar/NavItem.js

@@ -1,81 +1,87 @@
-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";
+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';
+
 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 = 'string' != typeof label;
-    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 = typeof label !== 'string';
+  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 default NavItem;
+
+export { NavItem as default };

package/components/Navbar/NavSection.js

@@ -1,19 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import "./styles.scss";
+import 'react';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 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 default NavSection;
+
+export { NavSection as default };