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

package/components/table/TableHeaderItem.js

@@ -1,99 +1,104 @@
-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";
+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';
+
 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 '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);
+  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);
 }
-export default TableHeaderItem;
+
+export { TableHeaderItem as default };

package/components/table/density.js

@@ -1,21 +1,22 @@
-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 };