@terraware/web-components 3.5.12-rc.7 → 3.5.12

package/components/table/EnhancedTableToolbar.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTableToolbar;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _ = require(".");
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip/Tooltip"));
+function EnhancedTableToolbar(props) {
+  const {
+    isAllSelected,
+    numSelected,
+    renderNumSelectedText,
+    topBarButtons,
+    topBarSelectionConfig
+  } = props;
+  const theme = (0, _material.useTheme)();
+  const selectLinkStyles = {
+    color: theme.palette.TwClrTxtBrand,
+    cursor: 'pointer'
+  };
+  const topBarSelection = (0, _react.useMemo)(() => {
+    if (!renderNumSelectedText) {
+      return null;
+    }
+    if (!topBarSelectionConfig) {
+      return renderNumSelectedText(numSelected);
+    }
+    const {
+      handleSelectAll,
+      handleSelectNone,
+      renderSelectAllText,
+      renderSelectNoneText,
+      renderEnhancedNumSelectedText
+    } = topBarSelectionConfig;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected), ' ', !isAllSelected && handleSelectAll && renderSelectAllText && /*#__PURE__*/_react.default.createElement(_material.Link, {
+      onClick: handleSelectAll,
+      sx: selectLinkStyles
+    }, renderSelectAllText()), isAllSelected && handleSelectNone && renderSelectNoneText && /*#__PURE__*/_react.default.createElement(_material.Link, {
+      onClick: handleSelectNone,
+      sx: selectLinkStyles
+    }, renderSelectNoneText()));
+  }, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
+  return renderNumSelectedText && numSelected > 0 ? /*#__PURE__*/_react.default.createElement(_material.Toolbar, {
+    sx: {
+      background: theme.palette.TwClrBgSecondary,
+      borderRadius: theme.spacing(0.5)
+    }
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    color: "inherit",
+    variant: "subtitle1",
+    component: "div",
+    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, {
+    key: tbButton.buttonText,
+    label: tbButton.buttonText,
+    priority: "secondary",
+    type: tbButton.buttonType,
+    onClick: tbButton.onButtonClick,
+    icon: tbButton.icon,
+    disabled: tbButton.disabled,
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
+  })) : tbButton)) : null;
+}

package/components/table/EnhancedTableToolbarV2.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _EnhancedTableToolbar = _interopRequireDefault(require("./EnhancedTableToolbar"));
+const EnhancedTableToolbarV2 = _ref => {
+  let {
+    selectedRowsCount,
+    pagesCount,
+    renderNumSelectedText,
+    rowsCount,
+    topBarButtons,
+    topBarSelectionConfig
+  } = _ref;
+  const _topBarSelectionConfig = (0, _react.useMemo)(() => {
+    if (!topBarSelectionConfig) {
+      return topBarSelectionConfig;
+    }
+    const {
+      renderEnhancedNumSelectedText,
+      renderSelectAllText
+    } = topBarSelectionConfig;
+    return {
+      ...topBarSelectionConfig,
+      renderEnhancedNumSelectedText: () => renderEnhancedNumSelectedText && renderEnhancedNumSelectedText(selectedRowsCount || 0, pagesCount) || '',
+      renderSelectAllText: () => renderSelectAllText && renderSelectAllText(rowsCount) || ''
+    };
+  }, [topBarSelectionConfig, selectedRowsCount, rowsCount, pagesCount]);
+  if (topBarSelectionConfig) {
+    return /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
+      numSelected: selectedRowsCount,
+      topBarButtons: topBarButtons,
+      topBarSelectionConfig: _topBarSelectionConfig,
+      isAllSelected: rowsCount === selectedRowsCount,
+      renderNumSelectedText: renderNumSelectedText
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_EnhancedTableToolbar.default, {
+    numSelected: selectedRowsCount,
+    renderNumSelectedText: renderNumSelectedText,
+    topBarButtons: topBarButtons
+  });
+};
+var _default = exports.default = EnhancedTableToolbarV2;

package/components/table/TableCellRenderer.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CellBooleanRenderer = CellBooleanRenderer;
+exports.CellDateRenderer = CellDateRenderer;
+exports.CellEditRenderer = CellEditRenderer;
+exports.CellNotesRenderer = CellNotesRenderer;
+exports.CellTextRenderer = CellTextRenderer;
+exports.cellDateFormatter = void 0;
+exports.default = CellRenderer;
+var _react = _interopRequireDefault(require("react"));
+var _iconsMaterial = require("@mui/icons-material");
+var _material = require("@mui/material");
+var _utils = require("../../utils");
+const defaultStyles = theme => ({
+  '&.MuiTableCell-root': {
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    borderBottom: "1px solid ".concat(theme.palette.TwClrBgSecondary),
+    fontVariantNumeric: 'tabular-nums'
+  }
+});
+function CellRenderer(props) {
+  const {
+    column,
+    value,
+    onRowClick,
+    index,
+    className,
+    booleanFalseText,
+    booleanTrueText,
+    editText,
+    style,
+    sx,
+    title,
+    component
+  } = props;
+  const 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,
+      className: className,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
+    });
+  } else if (column.type === 'notes' && value && typeof value === 'string') {
+    return /*#__PURE__*/_react.default.createElement(CellNotesRenderer, {
+      id: id,
+      value: value,
+      className: className,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
+    });
+  } else if (column.type === 'boolean') {
+    return /*#__PURE__*/_react.default.createElement(CellBooleanRenderer, {
+      id: id,
+      value: value,
+      className: className,
+      booleanFalseText: booleanFalseText,
+      booleanTrueText: booleanTrueText,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
+    });
+  } else if (column.type === 'edit') {
+    return /*#__PURE__*/_react.default.createElement(CellEditRenderer, {
+      id: id,
+      onRowClick: onRowClick,
+      className: className,
+      editText: editText,
+      alignment: column.alignment,
+      style: style,
+      sx: sx,
+      title: title
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(CellTextRenderer, {
+    id: id,
+    value: value,
+    className: className,
+    alignment: column.alignment,
+    style: style,
+    sx: sx,
+    title: title,
+    component: component
+  });
+}
+const cellDateFormatter = value => {
+  if (value) {
+    return (0, _utils.getDateDisplayValue)(value);
+  }
+};
+exports.cellDateFormatter = cellDateFormatter;
+function CellDateRenderer(_ref) {
+  let {
+    id,
+    value,
+    className,
+    alignment,
+    style,
+    sx,
+    title
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), {
+      whiteSpace: 'nowrap'
+    }, style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1",
+    fontSize: "16px"
+  }, cellDateFormatter(value)));
+}
+function CellTextRenderer(_ref2) {
+  let {
+    id,
+    value,
+    className,
+    alignment,
+    style,
+    sx,
+    title,
+    component
+  } = _ref2;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: alignment || 'left',
+    title: title ? title : typeof value === 'string' ? value : '',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])]
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: component || 'p',
+    variant: "body1",
+    noWrap: true,
+    fontSize: "16px",
+    sx: {
+      maxWidth: 400
+    }
+  }, value));
+}
+function CellBooleanRenderer(_ref3) {
+  let {
+    id,
+    value,
+    className,
+    booleanFalseText,
+    booleanTrueText,
+    alignment,
+    style,
+    sx,
+    title
+  } = _ref3;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    component: "p",
+    variant: "body1",
+    fontSize: "16px"
+  }, (value === null || value === void 0 ? void 0 : value.toString()) === 'true' ? booleanTrueText : booleanFalseText));
+}
+function CellNotesRenderer(_ref4) {
+  let {
+    id,
+    value,
+    className,
+    alignment,
+    style,
+    sx,
+    title
+  } = _ref4;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
+    id: id,
+    component: "p",
+    variant: "body1",
+    fontSize: "16px"
+  }, value && value.length > 0 ? /*#__PURE__*/_react.default.createElement(_iconsMaterial.Notes, null) : ''));
+}
+function CellEditRenderer(_ref5) {
+  let {
+    id,
+    onRowClick,
+    className,
+    editText,
+    alignment,
+    style,
+    sx,
+    title
+  } = _ref5;
+  const theme = (0, _material.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    id: id,
+    align: alignment || 'left',
+    className: className,
+    sx: [defaultStyles(theme), style, ...(Array.isArray(sx) ? sx : [sx])],
+    title: title
+  }, /*#__PURE__*/_react.default.createElement(_material.Link, {
+    id: "".concat(id, "-button"),
+    href: "#",
+    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",
+    fontSize: "16px"
+  }, editText), /*#__PURE__*/_react.default.createElement(_iconsMaterial.Edit, {
+    fontSize: "small",
+    sx: {
+      marginLeft: theme.spacing(1)
+    }
+  }))));
+}

package/components/table/TableHeader.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EnhancedTableHead;
+var _react = _interopRequireDefault(require("react"));
+var _sortable = require("@dnd-kit/sortable");
+var _material = require("@mui/material");
+var _text = require("../../utils/text");
+var _Checkbox = require("../Checkbox");
+var _TableHeaderItem = _interopRequireDefault(require("./TableHeaderItem"));
+var _density = require("./density");
+function EnhancedTableHead(props) {
+  const theme = (0, _material.useTheme)();
+  const {
+    order,
+    orderBy,
+    onRequestSort,
+    numSelected,
+    rowCount,
+    onSelectAllClick,
+    density = 'comfortable'
+  } = props;
+  const headerCellStyles = {
+    '&.MuiTableCell-root': {
+      borderBottom: "2px solid ".concat(theme.palette.TwClrBrdrSecondary)
+    },
+    paddingTop: '0px',
+    paddingBottom: '0px'
+  };
+  _react.default.useEffect(() => {
+    setHeadCells(columnsToHeadCells(props.columns));
+  }, [props.columns]);
+  function columnsToHeadCells(columns) {
+    return columns.map(c => ({
+      id: c.key,
+      disablePadding: false,
+      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,
+      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",
+    sx: {
+      height: (0, _density.getTableRowHeight)(density)
+    }
+  }, numSelected !== undefined && rowCount !== undefined && rowCount > 0 && onSelectAllClick && /*#__PURE__*/_react.default.createElement(_material.TableCell, {
+    padding: "checkbox",
+    sx: headerCellStyles
+  }, /*#__PURE__*/_react.default.createElement(_material.Checkbox, {
+    disableRipple: true,
+    sx: (0, _Checkbox.CheckboxStyle)(theme),
+    color: "primary",
+    indeterminate: numSelected > 0 && numSelected < rowCount,
+    checked: rowCount > 0 && numSelected === rowCount,
+    onChange: onSelectAllClick
+  })), /*#__PURE__*/_react.default.createElement(_sortable.SortableContext, {
+    items: headCells
+  }, headCells.map((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.js

@@ -0,0 +1,100 @@
+"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) {
+  const {
+    headCell,
+    order,
+    orderBy,
+    onRequestSort,
+    i
+  } = props;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, _sortable.useSortable)({
+    id: headCell.id
+  });
+  const theme = (0, _material.useTheme)();
+  const style = {
+    transform: _utilities.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, {
+    ref: setNodeRef,
+    id: "table-header-".concat(headCell.id),
+    key: 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, {
+    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,
+    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
+  })));
+}

package/components/table/density.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTableRowHeight = exports.getTableCellPaddingY = void 0;
+const getTableCellPaddingY = tableDensity => {
+  switch (tableDensity) {
+    case 'comfortable':
+      return '16px';
+    case 'compact':
+      return '12px';
+    case 'roomy':
+      return '20px';
+  }
+};
+exports.getTableCellPaddingY = getTableCellPaddingY;
+const getTableRowHeight = tableDensity => {
+  switch (tableDensity) {
+    case 'comfortable':
+      return '52px';
+    case 'compact':
+      return '36px';
+    case 'roomy':
+      return '60px';
+  }
+};
+exports.getTableRowHeight = getTableRowHeight;