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

package/components/table/TableCellRenderer.js

@@ -1,243 +1,208 @@
-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'
-  }
-});
+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'
+        }
+    });
 function CellRenderer(props) {
-  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
+    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
     });
-  } 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 ('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 === 'boolean') {
-    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 ('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 === '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
     });
-  }
-  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 : 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 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 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 => {
-        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)
-          }
-        })]
-      })
-    })
-  });
+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)
+                        }
+                    })
+                ]
+            })
+        })
+    });
 }
-
-export { CellBooleanRenderer, CellDateRenderer, CellEditRenderer, CellNotesRenderer, CellTextRenderer, cellDateFormatter, CellRenderer as default };
+export default CellRenderer;
+export { CellBooleanRenderer, CellDateRenderer, CellEditRenderer, CellNotesRenderer, CellTextRenderer, cellDateFormatter };

package/components/table/TableHeader.js

@@ -1,76 +1,74 @@
-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';
-
+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";
 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: 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
+    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))
+                })
+            ]
         })
-      }), /*#__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 { EnhancedTableHead as default };
+export default EnhancedTableHead;