@terraware/web-components 3.0.12-rc.0 → 3.0.13

package/components/table/EnhancedTableToolbar.js

@@ -8,26 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = EnhancedTableToolbar;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
-var _styles = require("@mui/styles");
 var _ = require(".");
 var _Button = _interopRequireDefault(require("../Button/Button"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
-const styles = (0, _styles.makeStyles)(theme => ({
-  toolbar: {
-    background: theme.palette.TwClrBgSecondary,
-    borderRadius: theme.spacing(0.5)
-  },
-  flexText: {
-    flex: '1 1 auto'
-  },
-  buttonSpacing: {
-    marginLeft: theme.spacing(1)
-  },
-  selectLink: {
-    color: theme.palette.TwClrTxtBrand,
-    cursor: 'pointer'
-  }
-}));
 function EnhancedTableToolbar(props) {
   const {
     isAllSelected,
@@ -36,7 +19,11 @@ function EnhancedTableToolbar(props) {
     topBarButtons,
     topBarSelectionConfig
   } = props;
-  const classes = styles();
+  const theme = (0, _material.useTheme)();
+  const selectLinkStyles = {
+    color: theme.palette.TwClrTxtBrand,
+    cursor: 'pointer'
+  };
   const topBarSelection = (0, _react.useMemo)(() => {
     if (!renderNumSelectedText) {
       return null;
@@ -52,31 +39,38 @@ function EnhancedTableToolbar(props) {
       renderEnhancedNumSelectedText
     } = topBarSelectionConfig;
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected), ' ', !isAllSelected && handleSelectAll && renderSelectAllText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      className: classes.selectLink,
-      onClick: handleSelectAll
+      onClick: handleSelectAll,
+      sx: selectLinkStyles
     }, renderSelectAllText()), isAllSelected && handleSelectNone && renderSelectNoneText && /*#__PURE__*/_react.default.createElement(_material.Link, {
-      className: classes.selectLink,
-      onClick: handleSelectNone
+      onClick: handleSelectNone,
+      sx: selectLinkStyles
     }, renderSelectNoneText()));
   }, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
   return renderNumSelectedText && numSelected > 0 ? /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
-    className: classes.toolbar
+    sx: {
+      background: theme.palette.TwClrBgSecondary,
+      borderRadius: theme.spacing(0.5)
+    }
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     color: "inherit",
     variant: "subtitle1",
     component: "div",
-    className: classes.flexText
+    sx: {
+      flex: '1 1 auto'
+    }
   }, topBarSelection), topBarButtons === null || topBarButtons === void 0 ? void 0 : topBarButtons.map((tbButton, index) => (0, _.isTopBarButton)(tbButton) ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
     title: tbButton.tooltipTitle,
     key: index
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    className: classes.buttonSpacing,
     key: tbButton.buttonText,
     label: tbButton.buttonText,
     priority: "secondary",
     type: tbButton.buttonType,
     onClick: tbButton.onButtonClick,
     icon: tbButton.icon,
-    disabled: tbButton.disabled
+    disabled: tbButton.disabled,
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
   })) : tbButton)) : null;
 }

package/components/table/TableCellRenderer.d.ts

@@ -1,24 +1,27 @@
+import { SxProps } from '@mui/material';
 import { CSSProperties, ReactNode } from 'react';
 import { RendererProps } from './types';
 import { TextAlignment } from '.';
 export type TableRowType = Record<string, any>;
 export default function CellRenderer(props: RendererProps<TableRowType>): JSX.Element;
 export declare const cellDateFormatter: (value?: string) => string | undefined;
-export declare function CellDateRenderer({ id, value, className, alignment, style, }: {
+export declare function CellDateRenderer({ id, value, className, alignment, style, sx, }: {
     id: string;
     value: string;
     className?: string;
     alignment?: TextAlignment;
     style?: CSSProperties;
+    sx?: SxProps;
 }): JSX.Element;
-export declare function CellTextRenderer({ id, value, className, alignment, style, }: {
+export declare function CellTextRenderer({ id, value, className, alignment, style, sx, }: {
     id: string;
     value?: string | number | any[] | ReactNode;
     className?: string;
     alignment?: TextAlignment;
     style?: CSSProperties;
+    sx?: SxProps;
 }): JSX.Element;
-export declare function CellBooleanRenderer({ id, value, className, booleanFalseText, booleanTrueText, alignment, style, }: {
+export declare function CellBooleanRenderer({ id, value, className, booleanFalseText, booleanTrueText, alignment, style, sx, }: {
     id: string;
     value?: boolean | string | number | any[] | ReactNode;
     className?: string;
@@ -26,20 +29,23 @@ export declare function CellBooleanRenderer({ id, value, className, booleanFalse
     booleanTrueText: string;
     alignment?: TextAlignment;
     style?: CSSProperties;
+    sx?: SxProps;
 }): JSX.Element;
-export declare function CellNotesRenderer({ id, value, className, alignment, style, }: {
+export declare function CellNotesRenderer({ id, value, className, alignment, style, sx, }: {
     id: string;
     value?: string;
     className?: string;
     alignment?: TextAlignment;
     style?: CSSProperties;
+    sx?: SxProps;
 }): JSX.Element;
-export declare function CellEditRenderer({ id, onRowClick, className, editText, alignment, style, }: {
+export declare function CellEditRenderer({ id, onRowClick, className, editText, alignment, style, sx, }: {
     id: string;
     onRowClick?: () => void;
     className?: string;
     editText: string;
     alignment?: TextAlignment;
     style?: CSSProperties;
+    sx?: SxProps;
 }): JSX.Element;
 //# sourceMappingURL=TableCellRenderer.d.ts.map

package/components/table/TableCellRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellRenderer.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAGxC,OAAO,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAuBlC,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,YAAY,CAAC,GAAG,GAAG,CAAC,OAAO,CAkCpF;AAED,eAAO,MAAM,iBAAiB,WAAY,MAAM,KAAG,MAAM,GAAG,SAI3D,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAed;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,GAAG,SAAS,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAgBd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,EAAE,EACF,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,GAAG,SAAS,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAUd;AAED,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAUd;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB,GAAG,GAAG,CAAC,OAAO,CAwBd"}
+{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellRenderer.tsx"],"names":[],"mappings":"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"}

package/components/table/TableCellRenderer.js

@@ -14,28 +14,16 @@ exports.default = CellRenderer;
 var _iconsMaterial = require("@mui/icons-material");
 var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("@mui/styles");
 var _utils = require("../../utils");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  editIcon: {
-    marginLeft: theme.spacing(1)
-  },
-  textRoot: {
-    maxWidth: 400
-  },
-  date: {
-    whiteSpace: 'nowrap'
-  },
-  default: {
-    '&.MuiTableCell-root': {
-      height: '52px',
-      paddingTop: '0px',
-      paddingBottom: '0px',
-      borderBottom: "1px solid ".concat(theme.palette.TwClrBgSecondary),
-      fontVariantNumeric: 'tabular-nums'
-    }
+const defaultStyles = theme => ({
+  '&.MuiTableCell-root': {
+    height: '52px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    borderBottom: "1px solid ".concat(theme.palette.TwClrBrdrSecondary),
+    fontVariantNumeric: 'tabular-nums'
   }
-}));
+});
 function CellRenderer(props) {
   const {
     column,
@@ -46,7 +34,8 @@ function CellRenderer(props) {
     booleanFalseText,
     booleanTrueText,
     editText,
-    style
+    style,
+    sx
   } = props;
   const id = "row".concat(index, "-").concat(column.key);
   if (column.type === 'date' && typeof value === 'string' && value) {
@@ -55,7 +44,8 @@ function CellRenderer(props) {
       value: value,
       className: className,
       alignment: column.alignment,
-      style: style
+      style: style,
+      sx: sx
     });
   } else if (column.type === 'notes' && value && typeof value === 'string') {
     return /*#__PURE__*/_react.default.createElement(CellNotesRenderer, {
@@ -63,7 +53,8 @@ function CellRenderer(props) {
       value: value,
       className: className,
       alignment: column.alignment,
-      style: style
+      style: style,
+      sx: sx
     });
   } else if (column.type === 'boolean') {
     return /*#__PURE__*/_react.default.createElement(CellBooleanRenderer, {
@@ -73,7 +64,8 @@ function CellRenderer(props) {
       booleanFalseText: booleanFalseText,
       booleanTrueText: booleanTrueText,
       alignment: column.alignment,
-      style: style
+      style: style,
+      sx: sx
     });
   } else if (column.type === 'edit') {
     return /*#__PURE__*/_react.default.createElement(CellEditRenderer, {
@@ -82,7 +74,8 @@ function CellRenderer(props) {
       className: className,
       editText: editText,
       alignment: column.alignment,
-      style: style
+      style: style,
+      sx: sx
     });
   }
   return /*#__PURE__*/_react.default.createElement(CellTextRenderer, {
@@ -90,7 +83,8 @@ function CellRenderer(props) {
     value: value,
     className: className,
     alignment: column.alignment,
-    style: style
+    style: style,
+    sx: sx
   });
 }
 const cellDateFormatter = value => {
@@ -105,18 +99,21 @@ function CellDateRenderer(_ref) {
     value,
     className,
     alignment,
-    style
+    style,
+    sx
   } = _ref;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     id: id,
     align: alignment || 'left',
-    className: "".concat(classes.date, " ").concat(classes.default, " ").concat(className),
-    sx: style
+    className: className,
+    sx: [defaultStyles(theme), {
+      whiteSpace: 'nowrap'
+    }, style, ...(Array.isArray(sx) ? sx : [sx])]
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p",
     variant: "body1",
-    fontSize: "16px"
+    fontSize: "14px"
   }, cellDateFormatter(value)));
 }
 function CellTextRenderer(_ref2) {
@@ -125,23 +122,26 @@ function CellTextRenderer(_ref2) {
     value,
     className,
     alignment,
-    style
+    style,
+    sx
   } = _ref2;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     id: id,
     align: alignment || 'left',
     title: typeof value === 'string' ? value : '',
-    className: "".concat(classes.default, " ").concat(className),
-    sx: style
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p",
     variant: "body1",
     noWrap: true,
-    classes: {
-      root: classes.textRoot
-    },
-    fontSize: "16px"
+    fontSize: "14px",
+    sx: {
+      root: {
+        maxWidth: 400
+      }
+    }
   }, value));
 }
 function CellBooleanRenderer(_ref3) {
@@ -152,18 +152,19 @@ function CellBooleanRenderer(_ref3) {
     booleanFalseText,
     booleanTrueText,
     alignment,
-    style
+    style,
+    sx
   } = _ref3;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     id: id,
     align: alignment || 'left',
-    className: "".concat(classes.default, " ").concat(className),
-    sx: style
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p",
     variant: "body1",
-    fontSize: "16px"
+    fontSize: "14px"
   }, (value === null || value === void 0 ? void 0 : value.toString()) === 'true' ? booleanTrueText : booleanFalseText));
 }
 function CellNotesRenderer(_ref4) {
@@ -172,19 +173,20 @@ function CellNotesRenderer(_ref4) {
     value,
     className,
     alignment,
-    style
+    style,
+    sx
   } = _ref4;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     id: id,
     align: alignment || 'left',
-    className: "".concat(classes.default, " ").concat(className),
-    sx: style
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     id: id,
     component: "p",
     variant: "body1",
-    fontSize: "16px"
+    fontSize: "14px"
   }, value && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_iconsMaterial.Notes, null) : ''));
 }
 function CellEditRenderer(_ref5) {
@@ -194,14 +196,15 @@ function CellEditRenderer(_ref5) {
     className,
     editText,
     alignment,
-    style
+    style,
+    sx
   } = _ref5;
-  const classes = useStyles();
+  const theme = (0, _material.useTheme)();
   return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     id: id,
     align: alignment || 'left',
-    className: "".concat(classes.default, " ").concat(className),
-    sx: style
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
   }, /*#__PURE__*/_react.default.createElement(_material.Link, {
     id: "".concat(id, "-button"),
     href: "#",
@@ -216,9 +219,11 @@ function CellEditRenderer(_ref5) {
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
     component: "p",
     variant: "body1",
-    fontSize: "16px"
+    fontSize: "14px"
   }, editText), /*#__PURE__*/_react.default.createElement(_iconsMaterial.Edit, {
     fontSize: "small",
-    className: classes.editIcon
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
   }))));
 }

package/components/table/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAgB1C,UAAU,KAAK;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAoDnE"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAM1C,UAAU,KAAK;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACzE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2DnE"}

package/components/table/TableHeader.js

@@ -5,22 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = EnhancedTableHead;
-var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 var _sortable = require("@dnd-kit/sortable");
+var _material = require("@mui/material");
 var _TableHeaderItem = _interopRequireDefault(require("./TableHeaderItem"));
-var _styles = require("@mui/styles");
 var _Checkbox = require("../Checkbox");
 var _text = require("../../utils/text");
-const useStyles = (0, _styles.makeStyles)(theme => ({
-  headerCell: {
-    '&.MuiTableCell-root': {
-      borderBottom: "2px solid ".concat(theme.palette.TwClrBrdrSecondary)
-    }
-  }
-}));
 function EnhancedTableHead(props) {
-  const classes = useStyles();
   const theme = (0, _material.useTheme)();
   const {
     order,
@@ -30,7 +21,11 @@ function EnhancedTableHead(props) {
     rowCount,
     onSelectAllClick
   } = props;
-  const [headCells, setHeadCells] = _react.default.useState(columnsToHeadCells(props.columns));
+  const headerCellStyles = {
+    '&.MuiTableCell-root': {
+      borderBottom: "2px solid ".concat(theme.palette.TwClrBrdrSecondary)
+    }
+  };
   _react.default.useEffect(() => {
     setHeadCells(columnsToHeadCells(props.columns));
   }, [props.columns]);
@@ -38,17 +33,19 @@ function EnhancedTableHead(props) {
     return columns.map(c => ({
       id: c.key,
       disablePadding: false,
-      className: "".concat(classes.headerCell, " ").concat(c.className),
+      className: c.className,
       label: typeof c.name === 'string' && c.name.length > 0 ? (0, _text.titleCase)(c.name) : c.name,
       tooltipTitle: c.tooltipTitle,
-      alignment: c.alignment
+      alignment: c.alignment,
+      sx: [headerCellStyles, ...(Array.isArray(c.sx) ? c.sx : [c.sx])]
     }));
   }
+  const [headCells, setHeadCells] = _react.default.useState(columnsToHeadCells(props.columns));
   return /*#__PURE__*/_react.default.createElement(_material.TableHead, null, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
     id: "table-header"
   }, numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
     padding: "checkbox",
-    className: classes.headerCell
+    sx: headerCellStyles
   }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
     disableRipple: true,
     sx: (0, _Checkbox.CheckboxStyle)(theme),

package/components/table/TableHeaderItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderItem.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA2FjE"}
+{"version":3,"file":"TableHeaderItem.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableHeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC;AAE7B,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,CAAC,EAAE,MAAM,CAAC;CACX,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6FjE"}

package/components/table/TableHeaderItem.js

@@ -46,7 +46,8 @@ function TableHeaderItem(props) {
     padding: headCell.disablePadding ? 'none' : 'normal',
     sortDirection: orderBy === headCell.id ? order : false,
     style: style,
-    className: headCell.className || ''
+    className: headCell.className || '',
+    sx: headCell.sx
   }, /*#__PURE__*/_react.default.createElement(_material.Box, {
     display: "flex",
     alignItems: "center",
@@ -79,7 +80,8 @@ function TableHeaderItem(props) {
     padding: headCell.disablePadding ? 'none' : 'normal',
     sortDirection: orderBy === headCell.id ? order : false,
     style: style,
-    className: headCell.className || ''
+    className: headCell.className || '',
+    sx: headCell.sx
   }, headCell.label && /*#__PURE__*/_react.default.createElement(_material.TableSortLabel, {
     active: orderBy === headCell.id,
     direction: orderBy === headCell.id ? order : 'asc',

package/components/table/index.d.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import React from 'react';
 import { SortOrder } from './sort';
 import { TableRowType } from './TableCellRenderer';
@@ -12,6 +12,7 @@ export interface HeadCell {
     tooltipTitle?: TooltipProps['title'];
     alignment?: TextAlignment;
     className?: string;
+    sx?: SxProps;
 }
 export interface LocalizationProps {
     renderNumSelectedText?: (numSelected: number) => string;

package/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}

package/components/table/index.js

@@ -14,38 +14,10 @@ var _EnhancedTableToolbarV = _interopRequireDefault(require("./EnhancedTableTool
 var _sort = require("./sort");
 var _TableCellRenderer = _interopRequireDefault(require("./TableCellRenderer"));
 var _TableHeader = _interopRequireDefault(require("./TableHeader"));
-var _styles = require("@mui/styles");
 var _core = require("@dnd-kit/core");
 var _sortable = require("@dnd-kit/sortable");
 var _utils = require("../../utils");
 var _Checkbox = require("../Checkbox");
-const tableStyles = (0, _styles.makeStyles)(theme => ({
-  hover: {
-    '&:hover': {
-      backgroundColor: theme.palette.TwClrBgSecondaryHover
-    }
-  },
-  table: {
-    borderCollapse: 'initial'
-  },
-  inactiveRow: {
-    background: theme.palette.neutral[50]
-  },
-  tableRow: {
-    '&.MuiTableRow-root.Mui-selected': {
-      backgroundColor: theme.palette.TwClrBgSelectedTertiary
-    },
-    '&:nth-of-type(odd)': {
-      backgroundColor: theme.palette.TwClrBgSecondary
-    }
-  },
-  cellDefault: {
-    '&.MuiTableCell-root': {
-      borderBottom: "1px solid ".concat(theme.palette.TwClrBgSecondary)
-    }
-  }
-}));
-
 // Only the text related props need to be passed in by the implementer, and extra data is passed to the caller
 
 const isTopBarButton = input => {
@@ -86,7 +58,6 @@ function EnhancedTable(_ref) {
     renderPaginationText,
     enhancedTopBarSelectionConfig
   } = _ref;
-  const classes = tableStyles();
   const theme = (0, _material.useTheme)();
   const [order, setOrder] = _react.default.useState(_order);
   const [orderBy, setOrderBy] = _react.default.useState(_orderBy);
@@ -185,6 +156,7 @@ function EnhancedTable(_ref) {
       id: c.key,
       disablePadding: false,
       label: typeof c.name === 'string' ? c.name.toUpperCase() : c.name,
+      sx: c.sx,
       tooltipTitle: c.tooltipTitle
     }));
   }
@@ -252,7 +224,9 @@ function EnhancedTable(_ref) {
     "aria-labelledby": "tableTitle",
     size: "medium",
     "aria-label": "enhanced table",
-    className: classes.table
+    sx: {
+      borderCollapse: 'initial'
+    }
   }, !hideHeader && /*#__PURE__*/_react.default.createElement(_TableHeader.default, {
     order: order,
     orderBy: orderBy,
@@ -272,10 +246,7 @@ function EnhancedTable(_ref) {
       key: index
     }, /*#__PURE__*/_react.default.createElement(_material.TableRow, {
       id: "row".concat(index + 1),
-      classes: {
-        hover: classes.hover
-      },
-      hover: true,
+      hover: Boolean(onSelect) && (isClickable ? isClickable(row) : true) && !hasEditColumn,
       onClick: e => {
         e.stopPropagation();
         if (onClick && !hasEditColumn && (isClickable ? isClickable(row) : true)) {
@@ -285,12 +256,27 @@ function EnhancedTable(_ref) {
           handleClick(e, row);
         }
       },
-      className: "".concat(isInactive && isInactive(row) ? classes.inactiveRow : undefined, " ").concat(classes.tableRow),
       selected: isItemSelected,
-      "aria-checked": isItemSelected
+      "aria-checked": isItemSelected,
+      sx: {
+        ...(isInactive && isInactive(row) ? {
+          backgroundColor: theme.palette.neutral[50]
+        } : {}),
+        '&.MuiTableRow-root.Mui-selected': {
+          backgroundColor: 'initial'
+        },
+        '&:hover': {
+          cursor: 'pointer',
+          backgroundColor: "".concat(theme.palette.neutral[100], "!important")
+        }
+      }
     }, showCheckbox && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
       padding: "checkbox",
-      className: classes.cellDefault
+      sx: {
+        '&.MuiTableCell-root': {
+          borderBottom: "1px solid ".concat(theme.palette.TwClrBrdrSecondary)
+        }
+      }
     }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
       disableRipple: true,
       sx: (0, _Checkbox.CheckboxStyle)(theme),

package/components/table/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { TooltipProps } from '@mui/material';
+import { SxProps, TooltipProps } from '@mui/material';
 import { TextAlignment } from '.';
 export interface TableColumnType {
     key: string;
@@ -8,6 +8,7 @@ export interface TableColumnType {
     className?: string;
     tooltipTitle?: TooltipProps['title'];
     alignment?: TextAlignment;
+    sx?: SxProps;
 }
 export interface RendererProps<T> {
     index: number;
@@ -21,6 +22,7 @@ export interface RendererProps<T> {
     booleanFalseText: string;
     booleanTrueText: string;
     editText: string;
+    sx?: SxProps;
 }
 export type EnhancedTableDetailsRow = {
     [x: string]: string | number | [] | undefined;