@terraware/web-components 5.0.27 → 5.1.0

package/components/table/TableHeaderItem.js

@@ -1,104 +1,99 @@
-import 'react';
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import { DragHandle } from '@mui/icons-material';
-import { useTheme, TableCell, Box, TableSortLabel } from '@mui/material';
-import IconTooltip from '../IconTooltip/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DragHandle } from "@mui/icons-material";
+import { Box, TableCell, TableSortLabel, useTheme } from "@mui/material";
+import IconTooltip from "../IconTooltip/index.js";
 function TableHeaderItem(props) {
-  const {
-    headCell,
-    order,
-    orderBy,
-    onRequestSort,
-    i
-  } = props;
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = useSortable({
-    id: headCell.id
-  });
-  const theme = useTheme();
-  const style = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1
-  };
-  const createSortHandler = property => event => {
-    onRequestSort(event, property);
-  };
-  return headCell.alignment === 'right' ? /*#__PURE__*/jsx(TableCell, {
-    ref: setNodeRef,
-    id: `table-header-${headCell.id}`,
-    align: 'right',
-    padding: headCell.disablePadding ? 'none' : 'normal',
-    sortDirection: orderBy === headCell.id ? order : false,
-    style: style,
-    className: headCell.className || '',
-    sx: headCell.sx,
-    children: /*#__PURE__*/jsxs(Box, {
-      display: "flex",
-      alignItems: "center",
-      flexDirection: "row-reverse",
-      children: [headCell.label && /*#__PURE__*/jsxs(TableSortLabel, {
-        sx: {
-          flexDirection: 'row-reverse'
-        },
-        active: orderBy === headCell.id,
-        direction: orderBy === headCell.id ? order : 'asc',
-        onClick: createSortHandler(headCell.id),
-        children: [headCell.tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
-          title: headCell.tooltipTitle,
-          disableRightMargin: true
-        }), headCell.label]
-      }), i > 0 && /*#__PURE__*/jsx(DragHandle, {
-        ...attributes,
-        ...listeners,
-        sx: {
-          verticalAlign: 'middle',
-          display: 'inline-flex',
-          marginLeft: headCell.alignment === 'right' ? '0px' : '-20px',
-          color: theme.palette.common.white,
-          '&:hover': {
-            color: theme.palette.neutral[600]
-          }
-        }
-      })]
-    })
-  }, headCell.id) : /*#__PURE__*/jsx(TableCell, {
-    ref: setNodeRef,
-    id: `table-header-${headCell.id}`,
-    align: 'left',
-    padding: headCell.disablePadding ? 'none' : 'normal',
-    sortDirection: orderBy === headCell.id ? order : false,
-    style: style,
-    className: headCell.className || '',
-    sx: headCell.sx,
-    children: headCell.label && /*#__PURE__*/jsxs(TableSortLabel, {
-      active: orderBy === headCell.id,
-      direction: orderBy === headCell.id ? order : 'asc',
-      onClick: createSortHandler(headCell.id),
-      children: [i > 0 && /*#__PURE__*/jsx(DragHandle, {
-        ...attributes,
-        ...listeners,
-        sx: {
-          marginLeft: '-20px',
-          color: theme.palette.common.white,
-          '&:hover': {
-            color: theme.palette.neutral[600]
-          }
-        }
-      }), headCell.label, headCell.tooltipTitle && /*#__PURE__*/jsx(IconTooltip, {
-        title: headCell.tooltipTitle
-      })]
-    })
-  }, headCell.id);
+    const { headCell, order, orderBy, onRequestSort, i } = props;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: headCell.id
+    });
+    const theme = useTheme();
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1
+    };
+    const createSortHandler = (property)=>(event)=>{
+            onRequestSort(event, property);
+        };
+    return 'right' === headCell.alignment ? /*#__PURE__*/ jsx(TableCell, {
+        ref: setNodeRef,
+        id: `table-header-${headCell.id}`,
+        align: 'right',
+        padding: headCell.disablePadding ? 'none' : 'normal',
+        sortDirection: orderBy === headCell.id ? order : false,
+        style: style,
+        className: headCell.className || '',
+        sx: headCell.sx,
+        children: /*#__PURE__*/ jsxs(Box, {
+            display: "flex",
+            alignItems: "center",
+            flexDirection: "row-reverse",
+            children: [
+                headCell.label && /*#__PURE__*/ jsxs(TableSortLabel, {
+                    sx: {
+                        flexDirection: 'row-reverse'
+                    },
+                    active: orderBy === headCell.id,
+                    direction: orderBy === headCell.id ? order : 'asc',
+                    onClick: createSortHandler(headCell.id),
+                    children: [
+                        headCell.tooltipTitle && /*#__PURE__*/ jsx(IconTooltip, {
+                            title: headCell.tooltipTitle,
+                            disableRightMargin: true
+                        }),
+                        headCell.label
+                    ]
+                }),
+                i > 0 && /*#__PURE__*/ jsx(DragHandle, {
+                    ...attributes,
+                    ...listeners,
+                    sx: {
+                        verticalAlign: 'middle',
+                        display: 'inline-flex',
+                        marginLeft: 'right' === headCell.alignment ? '0px' : '-20px',
+                        color: theme.palette.common.white,
+                        '&:hover': {
+                            color: theme.palette.neutral[600]
+                        }
+                    }
+                })
+            ]
+        })
+    }, headCell.id) : /*#__PURE__*/ jsx(TableCell, {
+        ref: setNodeRef,
+        id: `table-header-${headCell.id}`,
+        align: 'left',
+        padding: headCell.disablePadding ? 'none' : 'normal',
+        sortDirection: orderBy === headCell.id ? order : false,
+        style: style,
+        className: headCell.className || '',
+        sx: headCell.sx,
+        children: headCell.label && /*#__PURE__*/ jsxs(TableSortLabel, {
+            active: orderBy === headCell.id,
+            direction: orderBy === headCell.id ? order : 'asc',
+            onClick: createSortHandler(headCell.id),
+            children: [
+                i > 0 && /*#__PURE__*/ jsx(DragHandle, {
+                    ...attributes,
+                    ...listeners,
+                    sx: {
+                        marginLeft: '-20px',
+                        color: theme.palette.common.white,
+                        '&:hover': {
+                            color: theme.palette.neutral[600]
+                        }
+                    }
+                }),
+                headCell.label,
+                headCell.tooltipTitle && /*#__PURE__*/ jsx(IconTooltip, {
+                    title: headCell.tooltipTitle
+                })
+            ]
+        })
+    }, headCell.id);
 }
-
-export { TableHeaderItem as default };
+export default TableHeaderItem;

package/components/table/density.js

@@ -1,22 +1,21 @@
-const getTableCellPaddingY = tableDensity => {
-  switch (tableDensity) {
-    case 'comfortable':
-      return '16px';
-    case 'compact':
-      return '12px';
-    case 'roomy':
-      return '20px';
-  }
+const getTableCellPaddingY = (tableDensity)=>{
+    switch(tableDensity){
+        case 'comfortable':
+            return '16px';
+        case 'compact':
+            return '12px';
+        case 'roomy':
+            return '20px';
+    }
 };
-const getTableRowHeight = tableDensity => {
-  switch (tableDensity) {
-    case 'comfortable':
-      return '52px';
-    case 'compact':
-      return '36px';
-    case 'roomy':
-      return '60px';
-  }
+const getTableRowHeight = (tableDensity)=>{
+    switch(tableDensity){
+        case 'comfortable':
+            return '52px';
+        case 'compact':
+            return '36px';
+        case 'roomy':
+            return '60px';
+    }
 };
-
 export { getTableCellPaddingY, getTableRowHeight };