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

package/components/PhotosCarousel/usePhotosCarousel.js

@@ -1,79 +1,72 @@
-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());
+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();
+        }
     };
-    const handleInit = () => {
-      setScrollSnaps(emblaApi.scrollSnapList());
-      updateControls();
+    return {
+        emblaRef,
+        currentSlide,
+        scrollSnaps,
+        prevButtonDisabled,
+        nextButtonDisabled,
+        scrollPrev,
+        scrollNext,
+        scrollTo,
+        onKeyDown
     };
-    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
-  };
 };
-
-export { usePhotosCarousel as default };
+const PhotosCarousel_usePhotosCarousel = usePhotosCarousel;
+export default PhotosCarousel_usePhotosCarousel;

package/components/Pill/index.js

@@ -1,47 +1,43 @@
-import 'react';
-import { IconButton } 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 { IconButton } from "@mui/material";
+import Icon from "../Icon/Icon.js";
+import "./styles.scss";
 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 { Pill as default };
+export default Pill;

package/components/PillList/index.js

@@ -1,26 +1,19 @@
-import 'react';
-import Pill from '../Pill/index.js';
-import './styles.scss';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import "react";
+import Pill from "../Pill/index.js";
+import "./styles.scss";
 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 { PillList as default };
+export default PillList;

package/components/PlacementWrapper/index.js

@@ -1,60 +1,39 @@
-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]
-  });
+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
+        ]
+    });
 };
-
-export { PlacementWrapper as default };
+const components_PlacementWrapper = PlacementWrapper;
+export default components_PlacementWrapper;

package/components/PopoverMenu/Popover.js

@@ -1,87 +1,70 @@
-import 'react';
-import { useTheme, Popover, MenuList, Divider, MenuItem } from '@mui/material';
-import { jsx } from 'react/jsx-runtime';
-
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Divider, MenuItem, MenuList, Popover, useTheme } from "@mui/material";
 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: 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;
-      })
-    })
-  });
+    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;
+            })
+        })
+    });
 }
-
-export { PopoverDropdown as default };
+export default PopoverDropdown;

package/components/PopoverMenu/index.js

@@ -1,57 +1,52 @@
-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
-    })]
-  });
+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
+            })
+        ]
+    });
 }
-
-export { PopoverMenu as default };
+export default PopoverMenu;