@terraware/web-components 1.0.3 → 1.0.4

package/components/Textfield/styles.scss

@@ -0,0 +1,216 @@
+@use 'sass:math';
+
+@import '../../style-dictionary-dist/textfield_variables.scss';
+
+@font-face {
+  font-family: 'Inter';
+  src: local('Inter'), url(../../fonts/Inter.ttf) format('truetype');
+}
+
+.textfield {
+  display: flex;
+  flex-flow: row wrap;
+  .textfield-label {
+    font-family: $tw-fnt-frm-fld-label-font-family;
+    font-size: $tw-fnt-frm-fld-label-font-size;
+    font-weight: $tw-fnt-frm-fld-label-font-weight;
+    line-height: $tw-fnt-frm-fld-label-line-height;
+    color: $tw-clr-frm-fld-label;
+    margin-bottom: $tw-spc-base-xx-small;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .textfield-help-text {
+    font-family: $tw-fnt-frm-fld-help-text-font-family;
+    font-size: $tw-fnt-frm-fld-help-text-font-size;
+    font-weight: $tw-fnt-frm-fld-help-text-font-weight;
+    line-height: $tw-fnt-frm-fld-help-text-line-height;
+    color: $tw-clr-frm-fld-help-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+
+  textarea {
+    font-family: $tw-fnt-frm-fld-text-value-font-family;
+    font-size: $tw-fnt-frm-fld-text-value-font-size;
+    font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+    line-height: $tw-fnt-frm-fld-text-value-line-height;
+    color: $tw-clr-frm-fld-value;
+    padding-top: 0;
+    padding-bottom: 0;
+    &::placeholder {
+      font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+      font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+      font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+      line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+      color: $tw-clr-base-gray-300;
+    }
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .textfield-value {
+    background-color: $tw-clr-frm-fld-text-input-fill;
+    border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+    padding: $tw-spc-base-x-small;
+    border-radius: $tw-rds-frm-fld-text-input;
+    border-width: $tw-sz-frm-fld-text-input-stroke;
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+
+    &:hover {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-hover;
+    }
+
+    &:active {
+      border: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
+      outline: math.div($tw-sz-frm-fld-text-input-stroke-active, 2) solid $tw-clr-frm-fld-text-input-stroke-hover;
+    }
+
+    input {
+      border: none;
+      width: 100%;
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      color: $tw-clr-frm-fld-value;
+      background: transparent;
+      padding-top: 0;
+      padding-bottom: 0;
+      &::placeholder {
+        font-family: $tw-fnt-frm-fld-text-placeholder-font-family;
+        font-size: $tw-fnt-frm-fld-text-placeholder-font-size;
+        font-weight: $tw-fnt-frm-fld-text-placeholder-font-weight;
+        line-height: $tw-fnt-frm-fld-text-placeholder-line-height;
+        color: $tw-clr-base-gray-300;
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &--display {
+      font-family: $tw-fnt-frm-fld-text-value-font-family;
+      font-size: $tw-fnt-frm-fld-text-value-font-size;
+      font-weight: $tw-fnt-frm-fld-text-value-font-weight;
+      line-height: $tw-fnt-frm-fld-text-value-line-height;
+      padding: 0;
+      margin: 0;
+    }
+
+    &--disabled {
+      opacity: $tw-opcty-semantic-off;
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+    }
+
+    &--icon-container {
+      background: none;
+      border: 0;
+    }
+
+    &--icon-right {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-frm-fld-value;
+    }
+
+    &--icon-left {
+      width: $tw-fnt-frm-fld-text-value-line-height;
+      height: $tw-fnt-frm-fld-text-value-line-height;
+      fill: $tw-clr-frm-fld-value;
+      margin-right: $tw-spc-base-x-small;
+    }
+
+    &--error {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+      background-color: $tw-clr-frm-fld-text-input-fill-error;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-error;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-error;
+      }
+    }
+
+    &--warning {
+      border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+      background-color: $tw-clr-frm-fld-text-input-fill-warning;
+
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke-warning;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke-active solid $tw-clr-frm-fld-text-input-stroke-warning;
+      }
+    }
+
+    &--readonly {
+      background-color: $tw-clr-frm-fld-text-input-fill-read-only;
+      &:hover {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+
+      &:active {
+        border: $tw-sz-frm-fld-text-input-stroke solid $tw-clr-frm-fld-text-input-stroke;
+      }
+    }
+  }
+
+  .textfield-error-text {
+    font-family: $tw-fnt-frm-fld-error-text-font-family;
+    font-size: $tw-fnt-frm-fld-error-text-font-size;
+    font-weight: $tw-fnt-frm-fld-error-text-font-weight;
+    line-height: $tw-fnt-frm-fld-error-text-line-height;
+    color: $tw-clr-frm-fld-error-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-frm-fld-error-text;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  .textfield-warning-text {
+    font-family: $tw-fnt-frm-fld-warning-text-font-family;
+    font-size: $tw-fnt-frm-fld-warning-text-font-size;
+    font-weight: $tw-fnt-frm-fld-warning-text-font-weight;
+    line-height: $tw-fnt-frm-fld-warning-text-line-height;
+    color: $tw-clr-frm-fld-warning-text;
+    display: block;
+    width: 100%;
+    max-width: 100%;
+
+    &--icon {
+      fill: $tw-clr-frm-fld-warning-text;
+      width: $tw-fnt-frm-fld-error-text-line-height;
+      height: $tw-fnt-frm-fld-error-text-line-height;
+      margin-right: $tw-spc-base-x-small;
+    }
+  }
+
+  .textfield-label-container {
+    display: flex;
+    width: 100%;
+    margin-top: $tw-spc-base-xx-small;
+  }
+}

package/components/table/EnhancedTableToolbar.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TopBarButton } from '.';
+interface EnhancedTableToolbarProps {
+    numSelected: number;
+    topBarButtons?: TopBarButton[];
+}
+export default function EnhancedTableToolbar(props: EnhancedTableToolbarProps): JSX.Element | null;
+export {};
+//# sourceMappingURL=EnhancedTableToolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedTableToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/table/EnhancedTableToolbar.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AAiBjC,UAAU,yBAAyB;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;CAChC;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAuBjG"}

package/components/table/EnhancedTableToolbar.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTableToolbar;
+
+var _material = require("@mui/material");
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _styles = require("@mui/styles");
+
+var _react = _interopRequireDefault(require("react"));
+
+var styles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    toolbar: {
+      background: '#EDF0F1'
+    },
+    flexText: {
+      flex: '1 1 100%'
+    },
+    buttonSpacing: {
+      marginLeft: theme.spacing(1)
+    }
+  };
+});
+
+function EnhancedTableToolbar(props) {
+  var numSelected = props.numSelected,
+      topBarButtons = props.topBarButtons;
+  var classes = styles();
+  return numSelected > 0 ? /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
+    className: classes.toolbar
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    color: "inherit",
+    variant: "subtitle1",
+    component: "div",
+    className: classes.flexText
+  }, numSelected, " selected"), topBarButtons === null || topBarButtons === void 0 ? void 0 : topBarButtons.map(function (tbButton) {
+    return /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: classes.buttonSpacing,
+      key: tbButton.buttonText,
+      label: tbButton.buttonText,
+      priority: "secondary",
+      type: tbButton.buttonType,
+      onClick: tbButton.onButtonClick
+    });
+  })) : null;
+}

package/components/table/TableCellRenderer.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { RendererProps } from './types';
+export declare type TableRowType = Record<string, any>;
+export default function CellRenderer(props: RendererProps<TableRowType>): JSX.Element;
+export declare const cellDateFormatter: (value?: string | undefined) => string | undefined;
+export declare function CellDateRenderer({ id, value }: {
+    id: string;
+    value: string;
+}): JSX.Element;
+export declare function CellTextRenderer({ id, value, }: {
+    id: string;
+    value?: string | number | any[] | ReactNode;
+}): JSX.Element;
+export declare function CellBooleanRenderer({ id, value, }: {
+    id: string;
+    value?: string | number | any[] | ReactNode;
+}): JSX.Element;
+export declare function CellNotesRenderer({ id, value }: {
+    id: string;
+    value?: string;
+}): JSX.Element;
+export declare function CellEditRenderer({ id, onRowClick }: {
+    id: string;
+    onRowClick?: () => void;
+}): JSX.Element;
+//# sourceMappingURL=TableCellRenderer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/table/TableCellRenderer.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBxC,oBAAY,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,CAcpF;AAED,eAAO,MAAM,iBAAiB,kCAAqB,MAAM,GAAG,SAI3D,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAU1F;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,GAAG,SAAS,CAAC;CAC7C,GAAG,GAAG,CAAC,OAAO,CAUd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,EAAE,EACF,KAAK,GACN,EAAE;IACD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,EAAE,GAAG,SAAS,CAAC;CAC7C,GAAG,GAAG,CAAC,OAAO,CAQd;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAQ5F;AAED,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GAAG,GAAG,CAAC,OAAO,CAwBzG"}

package/components/table/TableCellRenderer.js

@@ -0,0 +1,166 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CellRenderer;
+exports.CellDateRenderer = CellDateRenderer;
+exports.CellTextRenderer = CellTextRenderer;
+exports.CellBooleanRenderer = CellBooleanRenderer;
+exports.CellNotesRenderer = CellNotesRenderer;
+exports.CellEditRenderer = CellEditRenderer;
+exports.cellDateFormatter = void 0;
+
+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");
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    editIcon: {
+      marginLeft: theme.spacing(1)
+    },
+    textRoot: {
+      maxWidth: 400
+    },
+    date: {
+      whiteSpace: 'nowrap'
+    }
+  };
+});
+
+function CellRenderer(props) {
+  var column = props.column,
+      value = props.value,
+      onRowClick = props.onRowClick,
+      index = props.index;
+  var id = "row".concat(index, "-").concat(column.key);
+
+  if (column.type === 'date' && typeof value === 'string' && value) {
+    return /*#__PURE__*/_react.default.createElement(CellDateRenderer, {
+      id: id,
+      value: value
+    });
+  } else if (column.type === 'notes' && value && typeof value === 'string') {
+    return /*#__PURE__*/_react.default.createElement(CellNotesRenderer, {
+      id: id,
+      value: value
+    });
+  } else if (column.type === 'boolean') {
+    return /*#__PURE__*/_react.default.createElement(CellBooleanRenderer, {
+      id: id,
+      value: value
+    });
+  } else if (column.type === 'edit') {
+    return /*#__PURE__*/_react.default.createElement(CellEditRenderer, {
+      id: id,
+      onRowClick: onRowClick
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement(CellTextRenderer, {
+    id: id,
+    value: value
+  });
+}
+
+var cellDateFormatter = function cellDateFormatter(value) {
+  if (value) {
+    return (0, _utils.getDateDisplayValue)(value);
+  }
+};
+
+exports.cellDateFormatter = cellDateFormatter;
+
+function CellDateRenderer(_ref) {
+  var id = _ref.id,
+      value = _ref.value;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: "left",
+    className: classes.date
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1"
+  }, cellDateFormatter(value)));
+}
+
+function CellTextRenderer(_ref2) {
+  var id = _ref2.id,
+      value = _ref2.value;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: "left",
+    title: typeof value === 'string' ? value : ''
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1",
+    noWrap: true,
+    classes: {
+      root: classes.textRoot
+    }
+  }, value));
+}
+
+function CellBooleanRenderer(_ref3) {
+  var id = _ref3.id,
+      value = _ref3.value;
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: "left"
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1"
+  }, value === 'true' ? 'YES' : 'NO'));
+}
+
+function CellNotesRenderer(_ref4) {
+  var id = _ref4.id,
+      value = _ref4.value;
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: "left"
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: id,
+    component: "p",
+    variant: "body1"
+  }, value && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_iconsMaterial.Notes, null) : ''));
+}
+
+function CellEditRenderer(_ref5) {
+  var id = _ref5.id,
+      onRowClick = _ref5.onRowClick;
+  var classes = useStyles();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: "left"
+  }, /*#__PURE__*/_react.default.createElement(_material.Link, {
+    id: "".concat(id, "-button"),
+    href: "#",
+    onClick: function onClick(event) {
+      (0, _utils.preventDefaultEvent)(event);
+
+      if (onRowClick) {
+        onRowClick();
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Box, {
+    display: "flex"
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1"
+  }, "Edit"), /*#__PURE__*/_react.default.createElement(_iconsMaterial.Edit, {
+    fontSize: "small",
+    className: classes.editIcon
+  }))));
+}

package/components/table/TableHeader.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Order } from './sort';
+import { TableColumnType } from './types';
+interface Props {
+    onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+    order: Order;
+    orderBy?: string;
+    columns: TableColumnType[];
+    onReorderEnd?: ({ oldIndex, newIndex }: any) => void;
+    numSelected?: number;
+    rowCount?: number;
+    onSelectAllClick?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export default function EnhancedTableHead(props: Props): JSX.Element;
+export {};
+//# sourceMappingURL=TableHeader.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK1C,UAAU,KAAK;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5E,KAAK,EAAE,KAAK,CAAC;IACb,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;AAUD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAqCnE"}

package/components/table/TableHeader.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTableHead;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _material = require("@mui/material");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _sortable = require("@dnd-kit/sortable");
+
+var _TableHeaderItem = _interopRequireDefault(require("./TableHeaderItem"));
+
+function columnsToHeadCells(columns) {
+  return columns.map(function (c) {
+    return {
+      id: c.key,
+      disablePadding: false,
+      label: typeof c.name === 'string' ? c.name.toUpperCase() : c.name
+    };
+  });
+}
+
+function EnhancedTableHead(props) {
+  var order = props.order,
+      orderBy = props.orderBy,
+      onRequestSort = props.onRequestSort,
+      numSelected = props.numSelected,
+      rowCount = props.rowCount,
+      onSelectAllClick = props.onSelectAllClick;
+
+  var _React$useState = _react.default.useState(columnsToHeadCells(props.columns)),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      headCells = _React$useState2[0],
+      setHeadCells = _React$useState2[1];
+
+  _react.default.useEffect(function () {
+    setHeadCells(columnsToHeadCells(props.columns));
+  }, [props.columns]);
+
+  return /*#__PURE__*/_react.default.createElement("thead", 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"
+  }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+    color: "primary",
+    indeterminate: numSelected > 0 && numSelected < rowCount,
+    checked: rowCount > 0 && numSelected === rowCount,
+    onChange: onSelectAllClick
+  })), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: headCells
+  }, headCells.map(function (headCell, i) {
+    return /*#__PURE__*/_react.default.createElement(_TableHeaderItem.default, {
+      headCell: headCell,
+      order: order,
+      orderBy: orderBy,
+      onRequestSort: onRequestSort,
+      i: i,
+      key: i
+    });
+  }))));
+}

package/components/table/TableHeaderItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Order } from './sort';
+interface HeadCell {
+    disablePadding: boolean;
+    id: string;
+    label: string | JSX.Element;
+}
+declare type Props = {
+    headCell: HeadCell;
+    order: Order;
+    orderBy?: string;
+    onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
+    i: number;
+};
+export default function TableHeaderItem(props: Props): JSX.Element;
+export {};
+//# sourceMappingURL=TableHeaderItem.d.ts.map

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

@@ -0,0 +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,KAAK,EAAE,MAAM,QAAQ,CAAC;AAC/B,UAAU,QAAQ;IAChB,cAAc,EAAE,OAAO,CAAC;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;CAC7B;AAED,aAAK,KAAK,GAAG;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,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;AACF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8CjE"}

package/components/table/TableHeaderItem.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+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 _styles = require("@mui/styles");
+
+function TableHeaderItem(props) {
+  var headCell = props.headCell,
+      order = props.order,
+      orderBy = props.orderBy,
+      onRequestSort = props.onRequestSort,
+      i = props.i;
+
+  var _useSortable = (0, _sortable.useSortable)({
+    id: headCell.id
+  }),
+      attributes = _useSortable.attributes,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition,
+      isDragging = _useSortable.isDragging;
+
+  var style = {
+    transform: _utilities.CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+
+  var createSortHandler = function createSortHandler(property) {
+    return function (event) {
+      onRequestSort(event, property);
+    };
+  };
+
+  var dragIconStyles = (0, _styles.makeStyles)(function (theme) {
+    return {
+      root: {
+        marginLeft: -20,
+        color: theme.palette.common.white,
+        '&:hover': {
+          color: theme.palette.neutral[600]
+        }
+      }
+    };
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    ref: setNodeRef,
+    id: "table-header-".concat(headCell.id),
+    key: headCell.id,
+    align: "left",
+    padding: headCell.disablePadding ? 'none' : 'normal',
+    sortDirection: orderBy === headCell.id ? order : false,
+    style: style
+  }, 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({
+    classes: dragIconStyles()
+  }, attributes, listeners)), headCell.label));
+}