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

package/components/table/TableCellRenderer.js

@@ -1,208 +1,243 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Edit, Notes } from "@mui/icons-material";
-import { Box, Link, TableCell, Typography, useTheme } from "@mui/material";
-import { getDateDisplayValue, preventDefaultEvent } from "../../utils/index.js";
-const defaultStyles = (theme)=>({
-        '&.MuiTableCell-root': {
-            paddingTop: '0px',
-            paddingBottom: '0px',
-            borderBottom: `1px solid ${theme.palette.TwClrBgSecondary}`,
-            fontVariantNumeric: 'tabular-nums'
-        }
-    });
+import 'react';
+import { Edit, Notes } from '@mui/icons-material';
+import { useTheme, TableCell, Typography, Link, Box } from '@mui/material';
+import getDateDisplayValue from '../../utils/date.js';
+import preventDefault from '../../utils/preventDefaultEvent.js';
+import 'react-responsive';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const defaultStyles = theme => ({
+  '&.MuiTableCell-root': {
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    borderBottom: `1px solid ${theme.palette.TwClrBgSecondary}`,
+    fontVariantNumeric: 'tabular-nums'
+  }
+});
 function CellRenderer(props) {
-    const { column, value, onRowClick, index, className, booleanFalseText, booleanTrueText, editText, style, sx, title, component } = props;
-    const id = `row${index}-${column.key}`;
-    if ('date' === column.type && 'string' == typeof value && value) return /*#__PURE__*/ jsx(CellDateRenderer, {
-        id: id,
-        value: value,
-        className: className,
-        alignment: column.alignment,
-        style: style,
-        sx: sx,
-        title: title
-    });
-    else if ('notes' === column.type && value && 'string' == typeof value) return /*#__PURE__*/ jsx(CellNotesRenderer, {
-        id: id,
-        value: value,
-        className: className,
-        alignment: column.alignment,
-        style: style,
-        sx: sx,
-        title: title
+  const {
+    column,
+    value,
+    onRowClick,
+    index,
+    className,
+    booleanFalseText,
+    booleanTrueText,
+    editText,
+    style,
+    sx,
+    title,
+    component
+  } = props;
+  const id = `row${index}-${column.key}`;
+  if (column.type === 'date' && typeof value === 'string' && value) {
+    return /*#__PURE__*/jsx(CellDateRenderer, {
+      id: id,
+      value: value,
+      className: className,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
     });
-    else if ('boolean' === column.type) return /*#__PURE__*/ jsx(CellBooleanRenderer, {
-        id: id,
-        value: value,
-        className: className,
-        booleanFalseText: booleanFalseText,
-        booleanTrueText: booleanTrueText,
-        alignment: column.alignment,
-        style: style,
-        sx: sx,
-        title: title
+  } else if (column.type === 'notes' && value && typeof value === 'string') {
+    return /*#__PURE__*/jsx(CellNotesRenderer, {
+      id: id,
+      value: value,
+      className: className,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
     });
-    else if ('edit' === column.type) return /*#__PURE__*/ jsx(CellEditRenderer, {
-        id: id,
-        onRowClick: onRowClick,
-        className: className,
-        editText: editText,
-        alignment: column.alignment,
-        style: style,
-        sx: sx,
-        title: title
+  } else if (column.type === 'boolean') {
+    return /*#__PURE__*/jsx(CellBooleanRenderer, {
+      id: id,
+      value: value,
+      className: className,
+      booleanFalseText: booleanFalseText,
+      booleanTrueText: booleanTrueText,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
     });
-    return /*#__PURE__*/ jsx(CellTextRenderer, {
-        id: id,
-        value: value,
-        className: className,
-        alignment: column.alignment,
-        style: style,
-        sx: sx,
-        title: title,
-        component: component
+  } else if (column.type === 'edit') {
+    return /*#__PURE__*/jsx(CellEditRenderer, {
+      id: id,
+      onRowClick: onRowClick,
+      className: className,
+      editText: editText,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
     });
+  }
+  return /*#__PURE__*/jsx(CellTextRenderer, {
+    id: id,
+    value: value,
+    className: className,
+    alignment: column.alignment,
+    style: style,
+    sx: sx,
+    title: title,
+    component: component
+  });
 }
-const cellDateFormatter = (value)=>{
-    if (value) return getDateDisplayValue(value);
+const cellDateFormatter = value => {
+  if (value) {
+    return getDateDisplayValue(value);
+  }
 };
-function CellDateRenderer({ id, value, className, alignment, style, sx, title }) {
-    const theme = useTheme();
-    return /*#__PURE__*/ jsx(TableCell, {
-        id: id,
-        align: alignment || 'left',
-        className: className,
-        sx: [
-            defaultStyles(theme),
-            {
-                whiteSpace: 'nowrap'
-            },
-            style,
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        title: title,
-        children: /*#__PURE__*/ jsx(Typography, {
-            component: "p",
-            variant: "body1",
-            fontSize: "16px",
-            children: cellDateFormatter(value)
-        })
-    });
+function CellDateRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsx(TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), {
+      whiteSpace: 'nowrap'
+    }, style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title,
+    children: /*#__PURE__*/jsx(Typography, {
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: cellDateFormatter(value)
+    })
+  });
 }
-function CellTextRenderer({ id, value, className, alignment, style, sx, title, component }) {
-    const theme = useTheme();
-    return /*#__PURE__*/ jsx(TableCell, {
-        id: id,
-        align: alignment || 'left',
-        title: title ? title : 'string' == typeof value ? value : '',
-        className: className,
-        sx: [
-            defaultStyles(theme),
-            style,
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        children: /*#__PURE__*/ jsx(Typography, {
-            component: component || 'p',
-            variant: "body1",
-            noWrap: true,
-            fontSize: "16px",
-            sx: {
-                maxWidth: 400
-            },
-            children: value
-        })
-    });
+function CellTextRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title,
+  component
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsx(TableCell, {
+    id: id,
+    align: alignment || 'left',
+    title: title ? title : typeof value === 'string' ? value : '',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    children: /*#__PURE__*/jsx(Typography, {
+      component: component || 'p',
+      variant: "body1",
+      noWrap: true,
+      fontSize: "16px",
+      sx: {
+        maxWidth: 400
+      },
+      children: value
+    })
+  });
 }
-function CellBooleanRenderer({ id, value, className, booleanFalseText, booleanTrueText, alignment, style, sx, title }) {
-    const theme = useTheme();
-    return /*#__PURE__*/ jsx(TableCell, {
-        id: id,
-        align: alignment || 'left',
-        className: className,
-        sx: [
-            defaultStyles(theme),
-            style,
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        title: title,
-        children: /*#__PURE__*/ jsx(Typography, {
-            component: "p",
-            variant: "body1",
-            fontSize: "16px",
-            children: value?.toString() === 'true' ? booleanTrueText : booleanFalseText
-        })
-    });
+function CellBooleanRenderer({
+  id,
+  value,
+  className,
+  booleanFalseText,
+  booleanTrueText,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsx(TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title,
+    children: /*#__PURE__*/jsx(Typography, {
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: value?.toString() === 'true' ? booleanTrueText : booleanFalseText
+    })
+  });
 }
-function CellNotesRenderer({ id, value, className, alignment, style, sx, title }) {
-    const theme = useTheme();
-    return /*#__PURE__*/ jsx(TableCell, {
-        id: id,
-        align: alignment || 'left',
-        className: className,
-        sx: [
-            defaultStyles(theme),
-            style,
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        title: title,
-        children: /*#__PURE__*/ jsx(Typography, {
-            id: id,
-            component: "p",
-            variant: "body1",
-            fontSize: "16px",
-            children: value && value.length > 0 ? /*#__PURE__*/ jsx(Notes, {}) : ''
-        })
-    });
+function CellNotesRenderer({
+  id,
+  value,
+  className,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsx(TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title,
+    children: /*#__PURE__*/jsx(Typography, {
+      id: id,
+      component: "p",
+      variant: "body1",
+      fontSize: "16px",
+      children: value && value.length > 0 ? /*#__PURE__*/jsx(Notes, {}) : ''
+    })
+  });
 }
-function CellEditRenderer({ id, onRowClick, className, editText, alignment, style, sx, title }) {
-    const theme = useTheme();
-    return /*#__PURE__*/ jsx(TableCell, {
-        id: id,
-        align: alignment || 'left',
-        className: className,
-        sx: [
-            defaultStyles(theme),
-            style,
-            ...Array.isArray(sx) ? sx : [
-                sx
-            ]
-        ],
-        title: title,
-        children: /*#__PURE__*/ jsx(Link, {
-            id: `${id}-button`,
-            href: "#",
-            onClick: (event)=>{
-                preventDefaultEvent(event);
-                if (onRowClick) onRowClick();
-            },
-            children: /*#__PURE__*/ jsxs(Box, {
-                display: "flex",
-                children: [
-                    /*#__PURE__*/ jsx(Typography, {
-                        component: "p",
-                        variant: "body1",
-                        fontSize: "16px",
-                        children: editText
-                    }),
-                    /*#__PURE__*/ jsx(Edit, {
-                        fontSize: "small",
-                        sx: {
-                            marginLeft: theme.spacing(1)
-                        }
-                    })
-                ]
-            })
-        })
-    });
+function CellEditRenderer({
+  id,
+  onRowClick,
+  className,
+  editText,
+  alignment,
+  style,
+  sx,
+  title
+}) {
+  const theme = useTheme();
+  return /*#__PURE__*/jsx(TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title,
+    children: /*#__PURE__*/jsx(Link, {
+      id: `${id}-button`,
+      href: "#",
+      onClick: event => {
+        preventDefault(event);
+        if (onRowClick) {
+          onRowClick();
+        }
+      },
+      children: /*#__PURE__*/jsxs(Box, {
+        display: "flex",
+        children: [/*#__PURE__*/jsx(Typography, {
+          component: "p",
+          variant: "body1",
+          fontSize: "16px",
+          children: editText
+        }), /*#__PURE__*/jsx(Edit, {
+          fontSize: "small",
+          sx: {
+            marginLeft: theme.spacing(1)
+          }
+        })]
+      })
+    })
+  });
 }
-export default CellRenderer;
-export { CellBooleanRenderer, CellDateRenderer, CellEditRenderer, CellNotesRenderer, CellTextRenderer, cellDateFormatter };
+
+export { CellBooleanRenderer, CellDateRenderer, CellEditRenderer, CellNotesRenderer, CellTextRenderer, cellDateFormatter, CellRenderer as default };

package/components/table/TableHeader.js

@@ -1,74 +1,76 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import react from "react";
-import { SortableContext } from "@dnd-kit/sortable";
-import { Checkbox, TableCell, TableHead, TableRow, useTheme } from "@mui/material";
-import { titleCase } from "../../utils/text.js";
-import { CheckboxStyle } from "../Checkbox.js";
-import TableHeaderItem from "./TableHeaderItem.js";
-import { getTableRowHeight } from "./density.js";
+import React from 'react';
+import { SortableContext } from '@dnd-kit/sortable';
+import { useTheme, TableHead, TableRow, TableCell, Checkbox } from '@mui/material';
+import { titleCase } from '../../utils/text.js';
+import { CheckboxStyle } from '../Checkbox.js';
+import TableHeaderItem from './TableHeaderItem.js';
+import { getTableRowHeight } from './density.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
 function EnhancedTableHead(props) {
-    const theme = useTheme();
-    const { order, orderBy, onRequestSort, numSelected, rowCount, onSelectAllClick, density = 'comfortable' } = props;
-    const headerCellStyles = {
-        '&.MuiTableCell-root': {
-            borderBottom: `2px solid ${theme.palette.TwClrBrdrSecondary}`
-        },
-        paddingTop: '0px',
-        paddingBottom: '0px'
-    };
-    react.useEffect(()=>{
-        setHeadCells(columnsToHeadCells(props.columns));
-    }, [
-        props.columns
-    ]);
-    function columnsToHeadCells(columns) {
-        return columns.map((c)=>({
-                id: c.key,
-                disablePadding: false,
-                className: c.className,
-                label: 'string' == typeof c.name && c.name.length > 0 ? titleCase(c.name) : c.name,
-                tooltipTitle: c.tooltipTitle,
-                alignment: c.alignment,
-                sx: [
-                    headerCellStyles,
-                    ...Array.isArray(c.sx) ? c.sx : [
-                        c.sx
-                    ]
-                ]
-            }));
-    }
-    const [headCells, setHeadCells] = react.useState(columnsToHeadCells(props.columns));
-    return /*#__PURE__*/ jsx(TableHead, {
-        children: /*#__PURE__*/ jsxs(TableRow, {
-            id: "table-header",
-            sx: {
-                height: getTableRowHeight(density)
-            },
-            children: [
-                void 0 !== numSelected && void 0 !== rowCount && rowCount > 0 && onSelectAllClick && /*#__PURE__*/ jsx(TableCell, {
-                    padding: "checkbox",
-                    sx: headerCellStyles,
-                    children: /*#__PURE__*/ jsx(Checkbox, {
-                        disableRipple: true,
-                        sx: CheckboxStyle(theme),
-                        color: "primary",
-                        indeterminate: numSelected > 0 && numSelected < rowCount,
-                        checked: rowCount > 0 && numSelected === rowCount,
-                        onChange: onSelectAllClick
-                    })
-                }),
-                /*#__PURE__*/ jsx(SortableContext, {
-                    items: headCells,
-                    children: headCells.map((headCell, i)=>/*#__PURE__*/ jsx(TableHeaderItem, {
-                            headCell: headCell,
-                            order: order,
-                            orderBy: orderBy,
-                            onRequestSort: onRequestSort,
-                            i: i
-                        }, i))
-                })
-            ]
+  const theme = useTheme();
+  const {
+    order,
+    orderBy,
+    onRequestSort,
+    numSelected,
+    rowCount,
+    onSelectAllClick,
+    density = 'comfortable'
+  } = props;
+  const headerCellStyles = {
+    '&.MuiTableCell-root': {
+      borderBottom: `2px solid ${theme.palette.TwClrBrdrSecondary}`
+    },
+    paddingTop: '0px',
+    paddingBottom: '0px'
+  };
+  React.useEffect(() => {
+    setHeadCells(columnsToHeadCells(props.columns));
+  }, [props.columns]);
+  function columnsToHeadCells(columns) {
+    return columns.map(c => ({
+      id: c.key,
+      disablePadding: false,
+      className: c.className,
+      label: typeof c.name === 'string' && c.name.length > 0 ? titleCase(c.name) : c.name,
+      tooltipTitle: c.tooltipTitle,
+      alignment: c.alignment,
+      sx: [headerCellStyles, ...(Array.isArray(c.sx) ? c.sx : [c.sx])]
+    }));
+  }
+  const [headCells, setHeadCells] = React.useState(columnsToHeadCells(props.columns));
+  return /*#__PURE__*/jsx(TableHead, {
+    children: /*#__PURE__*/jsxs(TableRow, {
+      id: "table-header",
+      sx: {
+        height: getTableRowHeight(density)
+      },
+      children: [numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/jsx(TableCell, {
+        padding: "checkbox",
+        sx: headerCellStyles,
+        children: /*#__PURE__*/jsx(Checkbox, {
+          disableRipple: true,
+          sx: CheckboxStyle(theme),
+          color: "primary",
+          indeterminate: numSelected > 0 && numSelected < rowCount,
+          checked: rowCount > 0 && numSelected === rowCount,
+          onChange: onSelectAllClick
         })
-    });
+      }), /*#__PURE__*/jsx(SortableContext, {
+        items: headCells,
+        children: headCells.map((headCell, i) => {
+          return /*#__PURE__*/jsx(TableHeaderItem, {
+            headCell: headCell,
+            order: order,
+            orderBy: orderBy,
+            onRequestSort: onRequestSort,
+            i: i
+          }, i);
+        })
+      })]
+    })
+  });
 }
-export default EnhancedTableHead;
+
+export { EnhancedTableHead as default };