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

package/components/PhotosCarousel/usePhotosCarousel.js

@@ -1,72 +1,79 @@
-import { useEffect, useState } from "react";
-import embla_carousel_react from "embla-carousel-react";
-const usePhotosCarousel = ({ photos, selectedSlide, onSlideChange })=>{
-    const [internalSlide, setInternalSlide] = useState(0);
-    const currentSlide = Math.max(0, Math.min(selectedSlide ?? internalSlide, photos.length - 1));
-    const [startIndex] = useState(currentSlide);
-    const [emblaRef, emblaApi] = embla_carousel_react({
-        loop: false,
-        startIndex
-    });
-    const [scrollSnaps, setScrollSnaps] = useState([]);
-    const [prevButtonDisabled, setPrevButtonDisabled] = useState(true);
-    const [nextButtonDisabled, setNextButtonDisabled] = useState(true);
-    const photoKey = JSON.stringify(photos.map((photo)=>photo.url));
-    const scrollPrev = ()=>emblaApi?.scrollPrev();
-    const scrollNext = ()=>emblaApi?.scrollNext();
-    const scrollTo = (index)=>emblaApi?.scrollTo(index);
-    useEffect(()=>{
-        emblaApi?.reInit();
-    }, [
-        emblaApi,
-        photoKey
-    ]);
-    useEffect(()=>{
-        if (!emblaApi) return;
-        if (emblaApi.selectedScrollSnap() !== currentSlide) emblaApi.scrollTo(currentSlide);
-        const updateControls = ()=>{
-            setPrevButtonDisabled(!emblaApi.canScrollPrev());
-            setNextButtonDisabled(!emblaApi.canScrollNext());
-        };
-        const handleInit = ()=>{
-            setScrollSnaps(emblaApi.scrollSnapList());
-            updateControls();
-        };
-        const handleSelect = ()=>{
-            updateControls();
-            const slide = emblaApi.selectedScrollSnap();
-            setInternalSlide(slide);
-            if (slide !== currentSlide) onSlideChange?.(slide);
-        };
-        handleInit();
-        emblaApi.on('select', handleSelect).on('reInit', handleInit);
-        return ()=>{
-            emblaApi.off('select', handleSelect).off('reInit', handleInit);
-        };
-    }, [
-        emblaApi,
-        currentSlide,
-        onSlideChange,
-        photoKey
-    ]);
-    const onKeyDown = (event)=>{
-        if ('ArrowLeft' === event.key || 'ArrowRight' === event.key) {
-            event.preventDefault();
-            if ('ArrowLeft' === event.key) scrollPrev();
-            else scrollNext();
-        }
+import { useState, useEffect } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+
+const usePhotosCarousel = ({
+  photos,
+  selectedSlide,
+  onSlideChange
+}) => {
+  const [internalSlide, setInternalSlide] = useState(0);
+  const currentSlide = Math.max(0, Math.min(selectedSlide ?? internalSlide, photos.length - 1));
+  const [startIndex] = useState(currentSlide);
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    startIndex
+  });
+  const [scrollSnaps, setScrollSnaps] = useState([]);
+  const [prevButtonDisabled, setPrevButtonDisabled] = useState(true);
+  const [nextButtonDisabled, setNextButtonDisabled] = useState(true);
+  const photoKey = JSON.stringify(photos.map(photo => photo.url));
+  const scrollPrev = () => emblaApi?.scrollPrev();
+  const scrollNext = () => emblaApi?.scrollNext();
+  const scrollTo = index => emblaApi?.scrollTo(index);
+  useEffect(() => {
+    emblaApi?.reInit();
+  }, [emblaApi, photoKey]);
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    // Synchronize external selection before subscribing so it does not echo a change callback.
+    if (emblaApi.selectedScrollSnap() !== currentSlide) {
+      emblaApi.scrollTo(currentSlide);
+    }
+    const updateControls = () => {
+      setPrevButtonDisabled(!emblaApi.canScrollPrev());
+      setNextButtonDisabled(!emblaApi.canScrollNext());
     };
-    return {
-        emblaRef,
-        currentSlide,
-        scrollSnaps,
-        prevButtonDisabled,
-        nextButtonDisabled,
-        scrollPrev,
-        scrollNext,
-        scrollTo,
-        onKeyDown
+    const handleInit = () => {
+      setScrollSnaps(emblaApi.scrollSnapList());
+      updateControls();
     };
+    const handleSelect = () => {
+      updateControls();
+      const slide = emblaApi.selectedScrollSnap();
+      setInternalSlide(slide);
+      if (slide !== currentSlide) {
+        onSlideChange?.(slide);
+      }
+    };
+    handleInit();
+    emblaApi.on('select', handleSelect).on('reInit', handleInit);
+    return () => {
+      emblaApi.off('select', handleSelect).off('reInit', handleInit);
+    };
+  }, [emblaApi, currentSlide, onSlideChange, photoKey]);
+  const onKeyDown = event => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      if (event.key === 'ArrowLeft') {
+        scrollPrev();
+      } else {
+        scrollNext();
+      }
+    }
+  };
+  return {
+    emblaRef,
+    currentSlide,
+    scrollSnaps,
+    prevButtonDisabled,
+    nextButtonDisabled,
+    scrollPrev,
+    scrollNext,
+    scrollTo,
+    onKeyDown
+  };
 };
-const PhotosCarousel_usePhotosCarousel = usePhotosCarousel;
-export default PhotosCarousel_usePhotosCarousel;
+
+export { usePhotosCarousel as default };

package/components/Pill/index.js

@@ -1,43 +1,47 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { IconButton } from "@mui/material";
-import Icon from "../Icon/Icon.js";
-import "./styles.scss";
+import 'react';
+import { IconButton } from '@mui/material';
+import Icon from '../Icon/Icon.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 function Pill(props) {
-    const { id, label, value, onClick, onRemove, className } = props;
-    return /*#__PURE__*/ jsxs("div", {
-        className: `pill ${className ?? ''}`,
-        onClick: (ev)=>{
-            ev.stopPropagation();
-            if (onClick) onClick(id);
-        },
-        children: [
-            label && /*#__PURE__*/ jsxs("p", {
-                className: "label",
-                children: [
-                    label,
-                    ":"
-                ]
-            }),
-            /*#__PURE__*/ jsx("p", {
-                className: `value${label ? '' : ' value--no-label'}`,
-                children: value
-            }),
-            onRemove ? /*#__PURE__*/ jsx(IconButton, {
-                onClick: (ev)=>{
-                    ev.stopPropagation();
-                    onRemove(id);
-                },
-                className: "iconContainer",
-                "aria-label": "remove",
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "close",
-                    className: "icon"
-                })
-            }) : /*#__PURE__*/ jsx("div", {
-                className: "spacer"
-            })
-        ]
-    });
+  const {
+    id,
+    label,
+    value,
+    onClick,
+    onRemove,
+    className
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    className: `pill ${className ?? ''}`,
+    onClick: ev => {
+      ev.stopPropagation();
+      if (onClick) {
+        onClick(id);
+      }
+    },
+    children: [label && /*#__PURE__*/jsxs("p", {
+      className: "label",
+      children: [label, ":"]
+    }), /*#__PURE__*/jsx("p", {
+      className: `value${label ? '' : ' value--no-label'}`,
+      children: value
+    }), onRemove ? /*#__PURE__*/jsx(IconButton, {
+      onClick: ev => {
+        ev.stopPropagation();
+        onRemove(id);
+      },
+      className: "iconContainer",
+      "aria-label": "remove",
+      children: /*#__PURE__*/jsx(Icon, {
+        name: "close",
+        className: "icon"
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: "spacer"
+    })]
+  });
 }
-export default Pill;
+
+export { Pill as default };

package/components/PillList/index.js

@@ -1,19 +1,26 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import Pill from "../Pill/index.js";
-import "./styles.scss";
+import 'react';
+import Pill from '../Pill/index.js';
+import './styles.scss';
+import { jsx } from 'react/jsx-runtime';
+
 function PillList(props) {
-    const { data, onClick, onRemove, className } = props;
-    return /*#__PURE__*/ jsx("div", {
-        className: "pill-list",
-        children: data.map((item, index)=>/*#__PURE__*/ jsx(Pill, {
-                id: item.id,
-                label: item.label,
-                value: item.value,
-                onClick: item.onClick || onClick,
-                onRemove: item.onRemove || onRemove,
-                className: item.className || className
-            }, index))
-    });
+  const {
+    data,
+    onClick,
+    onRemove,
+    className
+  } = props;
+  return /*#__PURE__*/jsx("div", {
+    className: "pill-list",
+    children: data.map((item, index) => /*#__PURE__*/jsx(Pill, {
+      id: item.id,
+      label: item.label,
+      value: item.value,
+      onClick: item.onClick || onClick,
+      onRemove: item.onRemove || onRemove,
+      className: item.className || className
+    }, index))
+  });
 }
-export default PillList;
+
+export { PillList as default };

package/components/PlacementWrapper/index.js

@@ -1,39 +1,60 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Box, useTheme } from "@mui/material";
-const PlacementWrapper = ({ placedObject, children, objectPlacement })=>{
-    const theme = useTheme();
-    const outsideDirection = useMemo(()=>{
-        if (!objectPlacement) return 'column';
-        if (objectPlacement.startsWith('top')) return 'column';
-        else if (objectPlacement.startsWith('bottom')) return 'column-reverse';
-        else if (objectPlacement.startsWith('left')) return 'row';
-        else return 'row-reverse';
-    }, [
-        objectPlacement
-    ]);
-    const insideAlignment = useMemo(()=>{
-        if (!objectPlacement) return 'center';
-        if (objectPlacement.endsWith('start')) return 'flex-start';
-        else if (objectPlacement.endsWith('end')) return 'flex-end';
-        else return 'center';
-    }, [
-        objectPlacement
-    ]);
-    return /*#__PURE__*/ jsxs(Box, {
-        display: 'flex',
-        flexDirection: outsideDirection,
-        flexGrow: 1,
-        marginBottom: theme.spacing(2),
-        children: [
-            /*#__PURE__*/ jsx(Box, {
-                alignSelf: insideAlignment,
-                margin: theme.spacing(1),
-                children: placedObject
-            }),
-            children
-        ]
-    });
+import { useMemo } from 'react';
+import { useTheme, Box } from '@mui/material';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * A component that allows simple management of the location of an object around some children
+ *
+ * Example:
+ * ```
+ * <PlacementWrapper objectPlacement={'right-end'} placedObject={<Button icon={'iconComment'} onClick={onClick} />}>
+ *   <Box>Stuff and Things</Box>
+ * </PlacementWrapper>
+ * ```
+ */
+const PlacementWrapper = ({
+  placedObject,
+  children,
+  objectPlacement
+}) => {
+  const theme = useTheme();
+  const outsideDirection = useMemo(() => {
+    if (!objectPlacement) {
+      return 'column';
+    }
+    if (objectPlacement.startsWith('top')) {
+      return 'column';
+    } else if (objectPlacement.startsWith('bottom')) {
+      return 'column-reverse';
+    } else if (objectPlacement.startsWith('left')) {
+      return 'row';
+    } else {
+      return 'row-reverse';
+    }
+  }, [objectPlacement]);
+  const insideAlignment = useMemo(() => {
+    if (!objectPlacement) {
+      return 'center';
+    }
+    if (objectPlacement.endsWith('start')) {
+      return 'flex-start';
+    } else if (objectPlacement.endsWith('end')) {
+      return 'flex-end';
+    } else {
+      return 'center';
+    }
+  }, [objectPlacement]);
+  return /*#__PURE__*/jsxs(Box, {
+    display: 'flex',
+    flexDirection: outsideDirection,
+    flexGrow: 1,
+    marginBottom: theme.spacing(2),
+    children: [/*#__PURE__*/jsx(Box, {
+      alignSelf: insideAlignment,
+      margin: theme.spacing(1),
+      children: placedObject
+    }), children]
+  });
 };
-const components_PlacementWrapper = PlacementWrapper;
-export default components_PlacementWrapper;
+
+export { PlacementWrapper as default };

package/components/PopoverMenu/Popover.js

@@ -1,70 +1,87 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import { Divider, MenuItem, MenuList, Popover, useTheme } from "@mui/material";
+import 'react';
+import { useTheme, Popover, MenuList, Divider, MenuItem } from '@mui/material';
+import { jsx } from 'react/jsx-runtime';
+
 function PopoverDropdown(props) {
-    const { sections, handleClick, anchorElement, setAnchorElement, itemRenderer, menuAlign, selectedValue, onClose, container } = props;
-    const theme = useTheme();
-    const handleClose = ()=>{
-        if (onClose) onClose();
-        setAnchorElement(null);
-    };
-    const onClick = (item)=>{
-        if (item.onClick) item.onClick();
-        handleClick(item);
-    };
-    const itemStyles = (type)=>({
-            color: 'destructive' === type ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
-            '& .MuiMenuItem-root:hover': {
-                backgroundColor: theme.palette.TwClrBgSelectedGhostHover
-            },
-            '&.MuiMenuItem-root:active': {
-                backgroundColor: theme.palette.TwClrBgSelectedGhostActive
-            }
-        });
-    return /*#__PURE__*/ jsx(Popover, {
-        id: "simple-popover",
-        container: container,
-        open: Boolean(anchorElement),
-        anchorEl: anchorElement,
-        onClose: handleClose,
-        anchorOrigin: {
-            vertical: 'bottom',
-            horizontal: menuAlign ?? 'left'
-        },
-        transformOrigin: {
-            vertical: 'top',
-            horizontal: menuAlign ?? 'left'
-        },
-        sx: {
-            '& .MuiPaper-root': {
-                borderRadius: '8px',
-                boxShadow: 'none',
-                border: `1px solid ${theme.palette.TwClrBrdrSecondary}`,
-                paddingY: '8px',
-                marginTop: '4px'
-            }
-        },
-        children: /*#__PURE__*/ jsx(MenuList, {
-            sx: {
-                padding: 0
-            },
-            children: sections?.map((section, index)=>{
-                let elements = [];
-                if (index > 0) elements.push(/*#__PURE__*/ jsx(Divider, {}));
-                elements = [
-                    ...elements,
-                    ...section.map((item, itemIndex)=>/*#__PURE__*/ jsx(MenuItem, {
-                            onClick: ()=>onClick(item),
-                            sx: itemStyles(item.type),
-                            disableRipple: true,
-                            disabled: item.disabled,
-                            selected: item.value === selectedValue,
-                            children: itemRenderer ? itemRenderer(item) : item.label
-                        }, `option-${itemIndex}`))
-                ];
-                return elements;
-            })
-        })
-    });
+  const {
+    sections,
+    handleClick,
+    anchorElement,
+    setAnchorElement,
+    itemRenderer,
+    menuAlign,
+    selectedValue,
+    onClose,
+    container
+  } = props;
+  const theme = useTheme();
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+    setAnchorElement(null);
+  };
+  const onClick = item => {
+    if (item.onClick) {
+      item.onClick();
+    }
+    handleClick(item);
+  };
+  const itemStyles = type => ({
+    color: type === 'destructive' ? theme.palette.TwClrTxtDanger : theme.palette.TwClrTxt,
+    '& .MuiMenuItem-root:hover': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostHover
+    },
+    '&.MuiMenuItem-root:active': {
+      backgroundColor: theme.palette.TwClrBgSelectedGhostActive
+    }
+  });
+  return /*#__PURE__*/jsx(Popover, {
+    id: "simple-popover",
+    container: container,
+    open: Boolean(anchorElement),
+    anchorEl: anchorElement,
+    onClose: handleClose,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: menuAlign ?? 'left'
+    },
+    transformOrigin: {
+      vertical: 'top',
+      horizontal: menuAlign ?? 'left'
+    },
+    sx: {
+      '& .MuiPaper-root': {
+        borderRadius: '8px',
+        boxShadow: 'none',
+        border: `1px solid ${theme.palette.TwClrBrdrSecondary}`,
+        paddingY: '8px',
+        marginTop: '4px'
+      }
+    },
+    children: /*#__PURE__*/jsx(MenuList, {
+      sx: {
+        padding: 0
+      },
+      children: sections?.map((section, index) => {
+        let elements = [];
+        if (index > 0) {
+          elements.push(/*#__PURE__*/jsx(Divider, {}));
+        }
+        elements = [...elements, ...section.map((item, itemIndex) => {
+          return /*#__PURE__*/jsx(MenuItem, {
+            onClick: () => onClick(item),
+            sx: itemStyles(item.type),
+            disableRipple: true,
+            disabled: item.disabled,
+            selected: item.value === selectedValue,
+            children: itemRenderer ? itemRenderer(item) : item.label
+          }, `option-${itemIndex}`);
+        })];
+        return elements;
+      })
+    })
+  });
 }
-export default PopoverDropdown;
+
+export { PopoverDropdown as default };

package/components/PopoverMenu/index.js

@@ -1,52 +1,57 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { IconButton, useTheme } from "@mui/material";
-import Icon from "../Icon/Icon.js";
-import Popover from "./Popover.js";
-function PopoverMenu({ anchor, container, menuSections, onClick, showChevron = true, selectedValue }) {
-    const theme = useTheme();
-    const [anchorEl, setAnchorEl] = useState(null);
-    const handleClick = (event)=>{
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = ()=>{
-        setAnchorEl(null);
-    };
-    const onItemClick = (selectedItem)=>{
-        if (onClick) onClick(selectedItem);
-        handleClose();
-    };
-    return /*#__PURE__*/ jsxs("div", {
-        children: [
-            /*#__PURE__*/ jsxs(IconButton, {
-                onClick: handleClick,
-                size: "small",
-                sx: {
-                    height: '48px',
-                    borderRadius: '16px',
-                    padding: theme.spacing(1.5, 2)
-                },
-                children: [
-                    anchor,
-                    showChevron && /*#__PURE__*/ jsx(Icon, {
-                        name: "chevronDown",
-                        size: "medium",
-                        style: {
-                            marginLeft: '8px',
-                            fill: theme.palette.TwClrIcn
-                        }
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(Popover, {
-                sections: menuSections,
-                handleClick: onItemClick,
-                anchorElement: anchorEl,
-                setAnchorElement: setAnchorEl,
-                selectedValue: selectedValue,
-                container: container
-            })
-        ]
-    });
+import { useState } from 'react';
+import { useTheme, IconButton } from '@mui/material';
+import Icon from '../Icon/Icon.js';
+import PopoverDropdown from './Popover.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PopoverMenu({
+  anchor,
+  container,
+  menuSections,
+  onClick,
+  showChevron = true,
+  selectedValue
+}) {
+  const theme = useTheme();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleClick = event => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const onItemClick = selectedItem => {
+    if (onClick) {
+      onClick(selectedItem);
+    }
+    handleClose();
+  };
+  return /*#__PURE__*/jsxs("div", {
+    children: [/*#__PURE__*/jsxs(IconButton, {
+      onClick: handleClick,
+      size: "small",
+      sx: {
+        height: '48px',
+        borderRadius: '16px',
+        padding: theme.spacing(1.5, 2)
+      },
+      children: [anchor, showChevron && /*#__PURE__*/jsx(Icon, {
+        name: "chevronDown",
+        size: "medium",
+        style: {
+          marginLeft: '8px',
+          fill: theme.palette.TwClrIcn
+        }
+      })]
+    }), /*#__PURE__*/jsx(PopoverDropdown, {
+      sections: menuSections,
+      handleClick: onItemClick,
+      anchorElement: anchorEl,
+      setAnchorElement: setAnchorEl,
+      selectedValue: selectedValue,
+      container: container
+    })]
+  });
 }
-export default PopoverMenu;
+
+export { PopoverMenu as default };