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

package/components/Stepper/index.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export type StepperStep = {
+    label: string;
+    /**
+     * Marks the step as optional. Whether an optional step shows as completed comes from `completed` here rather than
+     * from `completedSteps` or the active step, since the user may have skipped it.
+     */
+    optional?: {
+        completed: boolean;
+    };
+};
+export type StepperProps = {
+    activeStep: number;
+    className?: string;
+    /**
+     * Indexes of the steps that are completed. When provided, only these steps show as completed, so a step stays
+     * completed when the user goes back to an earlier one. The active step always uses the active styling, even if it is
+     * in this list. When omitted, every step before the active one shows as completed.
+     */
+    completedSteps?: number[];
+    /**
+     * Styles applied to each step label, after the defaults. MUI styles active and completed labels with a more specific
+     * selector, so label text overrides should target `.MuiStepLabel-label.Mui-active` and
+     * `.MuiStepLabel-label.Mui-completed` as well as `.MuiStepLabel-label`.
+     */
+    stepLabelSx?: SxProps<Theme>;
+    steps: (string | StepperStep)[];
+    sx?: SxProps<Theme>;
+};
+declare const Stepper: ({ activeStep, className, completedSteps, stepLabelSx, steps, sx }: StepperProps) => JSX.Element;
+export default Stepper;
+//# sourceMappingURL=index.d.ts.map

package/components/Stepper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAExC,OAAO,EAA0C,OAAO,EAAE,KAAK,EAAwB,MAAM,eAAe,CAAC;AAI7G,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,KAAK,EAAE,CAAC,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC;IAChC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB,CAAC;AAIF,QAAA,MAAM,OAAO,GAAI,mEAAmE,YAAY,KAAG,GAAG,CAAC,OAwDtG,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/components/Stepper/index.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Step, StepLabel, Stepper, Typography, useTheme } from "@mui/material";
+import { useStrings } from "../../strings/index.js";
+const LABEL_SELECTOR = '.MuiStepLabel-label, .MuiStepLabel-label.Mui-active, .MuiStepLabel-label.Mui-completed';
+const Stepper_Stepper = ({ activeStep, className, completedSteps, stepLabelSx, steps, sx })=>{
+    const theme = useTheme();
+    const strings = useStrings();
+    const isCompleted = (step, index)=>{
+        if (index === activeStep) return false;
+        if (step.optional) return step.optional.completed;
+        return completedSteps ? completedSteps.includes(index) : void 0;
+    };
+    const getStepLabelStyles = (index)=>[
+            {
+                '.MuiStepIcon-root': {
+                    fill: theme.palette.TwClrBgTertiary
+                },
+                '.MuiStepIcon-root.Mui-active': {
+                    fill: theme.palette.TwClrIcnSecondary
+                },
+                '.MuiStepIcon-root.Mui-completed': {
+                    fill: theme.palette.TwClrTxtBrand
+                },
+                [LABEL_SELECTOR]: {
+                    fontSize: '14px',
+                    fontWeight: 400,
+                    color: index === activeStep ? theme.palette.TwClrTxt : theme.palette.TwClrTxtSecondary
+                }
+            },
+            ...Array.isArray(stepLabelSx) ? stepLabelSx : [
+                stepLabelSx
+            ]
+        ];
+    return /*#__PURE__*/ jsx(Stepper, {
+        activeStep: activeStep,
+        className: className,
+        sx: [
+            {
+                margin: theme.spacing(1, 0, 3)
+            },
+            ...Array.isArray(sx) ? sx : [
+                sx
+            ]
+        ],
+        children: steps.map((stepOrLabel, index)=>{
+            const step = 'string' == typeof stepOrLabel ? {
+                label: stepOrLabel
+            } : stepOrLabel;
+            return /*#__PURE__*/ jsx(Step, {
+                completed: isCompleted(step, index),
+                children: /*#__PURE__*/ jsx(StepLabel, {
+                    optional: step.optional && /*#__PURE__*/ jsx(Typography, {
+                        variant: "caption",
+                        color: theme.palette.TwClrTxtSecondary,
+                        children: strings.OPTIONAL
+                    }),
+                    sx: getStepLabelStyles(index),
+                    children: step.label
+                })
+            }, index);
+        })
+    });
+};
+const components_Stepper = Stepper_Stepper;
+export default components_Stepper;

package/components/SummaryBox.js

@@ -1,73 +1,71 @@
-import { useMemo } from 'react';
-import { Info } from '@mui/icons-material';
-import { useTheme, Box, IconButton, Typography } from '@mui/material';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function SummaryBox({
-  title,
-  value,
-  variant = 'default',
-  id,
-  icon,
-  onIconClick
-}) {
-  const theme = useTheme();
-  const summaryBoxStyles = useMemo(() => {
-    switch (variant) {
-      case 'default':
-        return {
-          position: 'relative',
-          borderRadius: 8,
-          backgroundColor: theme.palette.neutral[200],
-          padding: theme.spacing(2)
-        };
-      case 'available':
-        return {
-          borderRadius: 8,
-          backgroundColor: theme.palette.neutral[700],
-          padding: theme.spacing(2),
-          color: theme.palette.common.white
-        };
-      case 'full':
-        return {
-          borderRadius: 8,
-          backgroundColor: theme.palette.neutral[200],
-          padding: theme.spacing(2),
-          height: '100%',
-          boxSizing: 'border-box'
-        };
-      default:
-        return {
-          borderRadius: 8,
-          backgroundColor: theme.palette.state[5],
-          padding: theme.spacing(2),
-          color: theme.palette.common.white
-        };
-    }
-  }, [theme, variant]);
-  return /*#__PURE__*/jsxs(Box, {
-    id: id,
-    sx: summaryBoxStyles,
-    children: [icon && /*#__PURE__*/jsx(IconButton, {
-      onClick: onIconClick,
-      sx: {
-        position: 'absolute',
-        right: theme.spacing(2)
-      },
-      children: /*#__PURE__*/jsx(Info, {})
-    }), /*#__PURE__*/jsx(Typography, {
-      component: "p",
-      children: title
-    }), /*#__PURE__*/jsx(Typography, {
-      component: "p",
-      variant: "h6",
-      sx: {
-        fontWeight: theme.typography.fontWeightBold,
-        whiteSpace: 'pre-line'
-      },
-      children: value
-    })]
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Info } from "@mui/icons-material";
+import { Box, IconButton, Typography, useTheme } from "@mui/material";
+function SummaryBox({ title, value, variant = 'default', id, icon, onIconClick }) {
+    const theme = useTheme();
+    const summaryBoxStyles = useMemo(()=>{
+        switch(variant){
+            case 'default':
+                return {
+                    position: 'relative',
+                    borderRadius: 8,
+                    backgroundColor: theme.palette.neutral[200],
+                    padding: theme.spacing(2)
+                };
+            case 'available':
+                return {
+                    borderRadius: 8,
+                    backgroundColor: theme.palette.neutral[700],
+                    padding: theme.spacing(2),
+                    color: theme.palette.common.white
+                };
+            case 'full':
+                return {
+                    borderRadius: 8,
+                    backgroundColor: theme.palette.neutral[200],
+                    padding: theme.spacing(2),
+                    height: '100%',
+                    boxSizing: 'border-box'
+                };
+            default:
+                return {
+                    borderRadius: 8,
+                    backgroundColor: theme.palette.state[5],
+                    padding: theme.spacing(2),
+                    color: theme.palette.common.white
+                };
+        }
+    }, [
+        theme,
+        variant
+    ]);
+    return /*#__PURE__*/ jsxs(Box, {
+        id: id,
+        sx: summaryBoxStyles,
+        children: [
+            icon && /*#__PURE__*/ jsx(IconButton, {
+                onClick: onIconClick,
+                sx: {
+                    position: 'absolute',
+                    right: theme.spacing(2)
+                },
+                children: /*#__PURE__*/ jsx(Info, {})
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                component: "p",
+                children: title
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                component: "p",
+                variant: "h6",
+                sx: {
+                    fontWeight: theme.typography.fontWeightBold,
+                    whiteSpace: 'pre-line'
+                },
+                children: value
+            })
+        ]
+    });
 }
-
-export { SummaryBox as default };
+export default SummaryBox;

package/components/Tabs/index.js

@@ -1,139 +1,137 @@
-import { useState, useEffect, useMemo } from 'react';
-import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { useTheme, Tab, Tooltip, Box } from '@mui/material';
-import 'lodash';
-import 'luxon';
-import useDeviceInfo from '../../utils/useDeviceInfo.js';
-import Icon from '../Icon/Icon.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const Tabs = ({
-  activeTab,
-  children,
-  onChangeTab,
-  tabs,
-  tabStyle,
-  headerBorder = false,
-  sx
-}) => {
-  const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? '');
-  const theme = useTheme();
-  const {
-    isMobile
-  } = useDeviceInfo();
-  const tabStyles = [{
-    color: theme.palette.TwClrTxtSecondary,
-    fontSize: '16px',
-    fontWeight: 600,
-    lineHeight: '24px',
-    minHeight: theme.spacing(4.5),
-    padding: theme.spacing(1, 2),
-    textTransform: 'capitalize',
-    '&:hover': {
-      backgroundColor: theme.palette.TwClrBgHover
-    },
-    '&.Mui-selected': {
-      color: theme.palette.TwClrTxtBrand
-    },
-    '&.MuiTab-labelIcon': {
-      alignItems: 'center',
-      display: 'flex',
-      flexDirection: 'row'
-    },
-    '& .MuiTab-iconWrapper': {
-      fill: theme.palette.TwClrIcnSecondary,
-      marginBottom: 0,
-      marginRight: theme.spacing(1)
-    },
-    '&.Mui-selected .MuiTab-iconWrapper': {
-      fill: theme.palette.TwClrIcnBrand
-    }
-  }, ...(Array.isArray(tabStyle) ? tabStyle : [tabStyle])];
-  const tabHeaderProps = {
-    borderBottom: headerBorder ? 1 : 0,
-    borderColor: 'divider',
-    margin: isMobile ? 0 : theme.spacing(0, 4)
-  };
-  const tabPanelStyles = {
-    padding: 0
-  };
-  const setTab = tab => {
-    if (onChangeTab) {
-      onChangeTab(tab);
-    } else {
-      setSelectedTab(tab);
-    }
-  };
-  useEffect(() => {
-    if (activeTab !== undefined) {
-      setSelectedTab(activeTab);
-    }
-  }, [activeTab]);
-  const renderedTabs = useMemo(() => tabs.map((tab, index) => {
-    const muiTab = /*#__PURE__*/jsx(Tab, {
-      disabled: tab.disabled,
-      icon: tab.icon ? /*#__PURE__*/jsx(Icon, {
-        name: tab.icon
-      }) : undefined,
-      label: /*#__PURE__*/jsxs(Fragment, {
-        children: [tab.label, tab.tooltip && !tab.disabled && /*#__PURE__*/jsx(Tooltip, {
-          title: tab.tooltip,
-          arrow: true,
-          placement: "top-start",
-          children: /*#__PURE__*/jsx("span", {
-            style: {
-              position: 'absolute',
-              inset: 0
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Tab, Tooltip, useTheme } from "@mui/material";
+import { useDeviceInfo } from "../../utils/index.js";
+import Icon from "../Icon/Icon.js";
+const Tabs = ({ activeTab, children, onChangeTab, tabs, tabStyle, headerBorder = false, sx })=>{
+    const [selectedTab, setSelectedTab] = useState(activeTab ?? tabs[0]?.id ?? '');
+    const theme = useTheme();
+    const { isMobile } = useDeviceInfo();
+    const tabStyles = [
+        {
+            color: theme.palette.TwClrTxtSecondary,
+            fontSize: '16px',
+            fontWeight: 600,
+            lineHeight: '24px',
+            minHeight: theme.spacing(4.5),
+            padding: theme.spacing(1, 2),
+            textTransform: 'capitalize',
+            '&:hover': {
+                backgroundColor: theme.palette.TwClrBgHover
+            },
+            '&.Mui-selected': {
+                color: theme.palette.TwClrTxtBrand
+            },
+            '&.MuiTab-labelIcon': {
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'row'
+            },
+            '& .MuiTab-iconWrapper': {
+                fill: theme.palette.TwClrIcnSecondary,
+                marginBottom: 0,
+                marginRight: theme.spacing(1)
+            },
+            '&.Mui-selected .MuiTab-iconWrapper': {
+                fill: theme.palette.TwClrIcnBrand
             }
-          })
-        })]
-      }),
-      sx: tabStyles,
-      value: tab.id
-    }, index);
-    return tab.disabled ? /*#__PURE__*/jsx(Tooltip, {
-      title: tab.tooltip,
-      arrow: true,
-      placement: "top-start",
-      children: /*#__PURE__*/jsx("span", {
-        style: {
-          display: 'inline-flex'
         },
-        children: muiTab
-      })
-    }, index) : muiTab;
-  }), [tabs]);
-  return /*#__PURE__*/jsx(Box, {
-    sx: {
-      width: '100%',
-      ...sx
-    },
-    children: /*#__PURE__*/jsxs(TabContext, {
-      value: selectedTab,
-      children: [/*#__PURE__*/jsx(Box, {
-        sx: tabHeaderProps,
-        className: "tab-header",
-        children: /*#__PURE__*/jsx(TabList, {
-          onChange: (unused, value) => setTab(value),
-          sx: {
-            minHeight: theme.spacing(4.5)
-          },
-          TabIndicatorProps: {
-            style: {
-              background: theme.palette.TwClrBgBrand,
-              height: '4px'
-            }
-          },
-          variant: 'scrollable',
-          children: renderedTabs
+        ...Array.isArray(tabStyle) ? tabStyle : [
+            tabStyle
+        ]
+    ];
+    const tabHeaderProps = {
+        borderBottom: headerBorder ? 1 : 0,
+        borderColor: 'divider',
+        margin: isMobile ? 0 : theme.spacing(0, 4)
+    };
+    const tabPanelStyles = {
+        padding: 0
+    };
+    const setTab = (tab)=>{
+        if (onChangeTab) onChangeTab(tab);
+        else setSelectedTab(tab);
+    };
+    useEffect(()=>{
+        if (void 0 !== activeTab) setSelectedTab(activeTab);
+    }, [
+        activeTab
+    ]);
+    const renderedTabs = useMemo(()=>tabs.map((tab, index)=>{
+            const muiTab = /*#__PURE__*/ jsx(Tab, {
+                disabled: tab.disabled,
+                icon: tab.icon ? /*#__PURE__*/ jsx(Icon, {
+                    name: tab.icon
+                }) : void 0,
+                label: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        tab.label,
+                        tab.tooltip && !tab.disabled && /*#__PURE__*/ jsx(Tooltip, {
+                            title: tab.tooltip,
+                            arrow: true,
+                            placement: "top-start",
+                            children: /*#__PURE__*/ jsx("span", {
+                                style: {
+                                    position: 'absolute',
+                                    inset: 0
+                                }
+                            })
+                        })
+                    ]
+                }),
+                sx: tabStyles,
+                value: tab.id
+            }, index);
+            return tab.disabled ? /*#__PURE__*/ jsx(Tooltip, {
+                title: tab.tooltip,
+                arrow: true,
+                placement: "top-start",
+                children: /*#__PURE__*/ jsx("span", {
+                    style: {
+                        display: 'inline-flex'
+                    },
+                    children: muiTab
+                })
+            }, index) : muiTab;
+        }), [
+        tabs
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        sx: {
+            width: '100%',
+            ...sx
+        },
+        children: /*#__PURE__*/ jsxs(TabContext, {
+            value: selectedTab,
+            children: [
+                /*#__PURE__*/ jsx(Box, {
+                    sx: tabHeaderProps,
+                    className: "tab-header",
+                    children: /*#__PURE__*/ jsx(TabList, {
+                        onChange: (unused, value)=>setTab(value),
+                        sx: {
+                            minHeight: theme.spacing(4.5)
+                        },
+                        TabIndicatorProps: {
+                            style: {
+                                background: theme.palette.TwClrBgBrand,
+                                height: '4px'
+                            }
+                        },
+                        variant: 'scrollable',
+                        children: renderedTabs
+                    })
+                }),
+                children,
+                tabs.map((tab, index)=>/*#__PURE__*/ jsx(TabPanel, {
+                        sx: tabPanelStyles,
+                        value: tab.id,
+                        children: tab.children
+                    }, index))
+            ]
         })
-      }), children, tabs.map((tab, index) => /*#__PURE__*/jsx(TabPanel, {
-        sx: tabPanelStyles,
-        value: tab.id,
-        children: tab.children
-      }, index))]
-    })
-  });
+    });
 };
-
-export { Tabs as default };
+const components_Tabs = Tabs;
+export default components_Tabs;