@terraware/web-components 4.2.13 → 4.2.14-rc.0

package/components/table/TableHeaderItem.js

@@ -1,17 +1,11 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TableHeaderItem;
-var _react = _interopRequireDefault(require("react"));
-var _sortable = require("@dnd-kit/sortable");
-var _utilities = require("@dnd-kit/utilities");
-var _iconsMaterial = require("@mui/icons-material");
-var _material = require("@mui/material");
-var _IconTooltip = _interopRequireDefault(require("../IconTooltip"));
-function TableHeaderItem(props) {
+import React from '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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TableHeaderItem(props) {
   const {
     headCell,
     order,
@@ -26,75 +20,82 @@ function TableHeaderItem(props) {
     transform,
     transition,
     isDragging
-  } = (0, _sortable.useSortable)({
+  } = useSortable({
     id: headCell.id
   });
-  const theme = (0, _material.useTheme)();
+  const theme = useTheme();
   const style = {
-    transform: _utilities.CSS.Transform.toString(transform),
+    transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1
   };
   const createSortHandler = property => event => {
     onRequestSort(event, property);
   };
-  return headCell.alignment === 'right' ? /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+  return headCell.alignment === 'right' ? /*#__PURE__*/_jsx(TableCell, {
     ref: setNodeRef,
-    id: "table-header-".concat(headCell.id),
-    key: headCell.id,
+    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
-  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "row-reverse"
-  }, headCell.label && /*#__PURE__*/_react.default.createElement(_material.TableSortLabel, {
-    sx: {
-      flexDirection: 'row-reverse'
-    },
-    active: orderBy === headCell.id,
-    direction: orderBy === headCell.id ? order : 'asc',
-    onClick: createSortHandler(headCell.id)
-  }, headCell.tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    title: headCell.tooltipTitle,
-    disableRightMargin: true
-  }), headCell.label), i > 0 && /*#__PURE__*/_react.default.createElement(_iconsMaterial.DragHandle, Object.assign({}, 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]
-      }
-    }
-  })))) : /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    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-".concat(headCell.id),
-    key: headCell.id,
+    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
-  }, headCell.label && /*#__PURE__*/_react.default.createElement(_material.TableSortLabel, {
-    active: orderBy === headCell.id,
-    direction: orderBy === headCell.id ? order : 'asc',
-    onClick: createSortHandler(headCell.id)
-  }, i > 0 && /*#__PURE__*/_react.default.createElement(_iconsMaterial.DragHandle, Object.assign({}, attributes, listeners, {
-    sx: {
-      marginLeft: '-20px',
-      color: theme.palette.common.white,
-      '&:hover': {
-        color: theme.palette.neutral[600]
-      }
-    }
-  })), headCell.label, headCell.tooltipTitle && /*#__PURE__*/_react.default.createElement(_IconTooltip.default, {
-    title: headCell.tooltipTitle
-  })));
+    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);
 }

package/components/table/density.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTableRowHeight = exports.getTableCellPaddingY = void 0;
-const getTableCellPaddingY = tableDensity => {
+export const getTableCellPaddingY = tableDensity => {
   switch (tableDensity) {
     case 'comfortable':
       return '16px';
@@ -14,8 +8,7 @@ const getTableCellPaddingY = tableDensity => {
       return '20px';
   }
 };
-exports.getTableCellPaddingY = getTableCellPaddingY;
-const getTableRowHeight = tableDensity => {
+export const getTableRowHeight = tableDensity => {
   switch (tableDensity) {
     case 'comfortable':
       return '52px';
@@ -24,5 +17,4 @@ const getTableRowHeight = tableDensity => {
     case 'roomy':
       return '60px';
   }
-};
-exports.getTableRowHeight = getTableRowHeight;
+};