@helpscout/hsds-react/components/Table/Table.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.ButtonExpanderUI = exports.SortableCellContentUI = exports.SortableCellUI = exports.CellUI = exports.HeaderCellUI = exports.TBodyUI = exports.TableUI = exports.LoadingUI = exports.TableWrapperUI = exports.HeaderUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lodash = _interopRequireDefault(require("lodash.isnil"));

var _color = require("../../styles/utilities/color");

var _Button = _interopRequireDefault(require("../Button"));

var _focusRing = require("../../styles/mixins/focusRing.css");

var HeaderUI = (0, _styledComponents.default)('header').withConfig({
  displayName: "Tablecss__HeaderUI",
  componentId: "sc-1ex766p-0"
})(["display:flex;justify-content:space-between;&.with-column-chooser:not(.with-header-content){justify-content:flex-end;}.DropListToggler{align-self:center;margin-right:4px;}"]);
exports.HeaderUI = HeaderUI;
var TableWrapperUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Tablecss__TableWrapperUI",
  componentId: "sc-1ex766p-1"
})(["overflow-x:auto;transition:opacity 0.15s ease-in-out;width:", ";position:relative;.DropList{width:300px;box-shadow:0 30px 60px rgba(0,0,0,0.15);}.DropList__MenuList{max-height:400px;}.is-type-action{height:50px;margin:0 5px;padding:0 15px;line-height:50px;color:", ";&.is-highlighted,&:hover{color:", ";text-decoration:underline;cursor:pointer;background-color:transparent;}}"], function (props) {
  return props.containerWidth || '100%';
}, (0, _color.getColor)('charcoal.300'), (0, _color.getColor)('charcoal.300'));
exports.TableWrapperUI = TableWrapperUI;
var LoadingUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Tablecss__LoadingUI",
  componentId: "sc-1ex766p-2"
})(["position:absolute;transition:opacity 0.15s ease-in-out;top:0;left:0;right:0;bottom:0;opacity:0.5;background:#fff;"]);
exports.LoadingUI = LoadingUI;
var TableUI = (0, _styledComponents.default)('table').withConfig({
  displayName: "Tablecss__TableUI",
  componentId: "sc-1ex766p-3"
})(["", ";border-spacing:0;table-layout:fixed;line-height:16px;border-collapse:separate;tr{transition:background-color 100ms ease-in-out;}tbody tr:focus{background-color:", ";outline:0;}tbody tr:focus > td:first-child{background:linear-gradient( to right,", ",", " 2px,transparent 2px,transparent 100% );}th,td{border-bottom:", ";border-right:", ";}th{padding:0 14px;height:", ";color:", ";}td{padding:5px 14px;height:", ";color:", ";&.without-padding{padding:0;}.fill-table-cell{display:flex;flex-direction:column;justify-content:center;padding:5px 14px;width:100%;height:100%;}}thead tr th:first-child{border-left:", ";}thead tr th:last-child{border-right:", ";}thead tr:first-child th{border-top:", ";}thead tr:last-child th{border-bottom:", ";}thead tr th:first-child{border-top-left-radius:4px;}tbody tr:first-child td:first-child{border-top-left-radius:", ";}thead tr th:last-child{border-top-right-radius:4px;}tbody tr:first-child td:last-child{border-top-right-radius:", ";}thead tr th:first-child{border-bottom-left-radius:0;}tbody tr:last-child td:first-child{border-bottom-left-radius:4px;}thead tr th:last-child{border-bottom-right-radius:0;}tbody tr:last-child td:last-child{border-bottom-right-radius:4px;}tbody tr td:first-child{border-left:", ";}tbody tr td:last-of-type{border-right:", ";}tbody tr:first-child td{border-top:", ";}tbody tr:last-child td{border-bottom:", ";}th{background-color:", ";}tr:nth-child(2n + 1){background-color:", ";}tr:nth-child(2n){background-color:", ";color:", ";}tr.is-row-selected{background-color:", ";}&.with-clickable-rows{tbody tr:hover{background-color:", ";cursor:pointer;}}&.selection-enabled{tbody tr:hover{background-color:", ";cursor:pointer;}}"], function (props) {
  return generateTableWidthStyles(props.tableWidth);
}, function (props) {
  return props.theme.bgFocus;
}, function (props) {
  return props.theme.bgFocusIndicator;
}, function (props) {
  return props.theme.bgFocusIndicator;
}, function (props) {
  return props.theme.borderRows;
}, function (props) {
  return props.theme.borderColumns;
}, function (props) {
  return props.theme.headerRowHeight;
}, function (props) {
  return props.theme.fontColorHeader;
}, function (props) {
  return props.withTallRows ? '60px' : '50px';
}, function (props) {
  return props.theme.fontColorBody;
}, function (props) {
  return props.theme.borderTableHeader;
}, function (props) {
  return props.theme.borderTableHeader;
}, function (props) {
  return props.theme.borderTableHeader;
}, function (props) {
  return props.theme.borderTableHeader;
}, function (props) {
  return (0, _lodash.default)(props.theme.borderTableHeader) || props.theme.borderTableHeader === 'none' ? '3px' : '0';
}, function (props) {
  return (0, _lodash.default)(props.theme.borderTableHeader) || props.theme.borderTableHeader === 'none' ? '3px' : '0';
}, function (props) {
  return props.theme.borderTableBody;
}, function (props) {
  return props.theme.borderTableBody;
}, function (props) {
  return (0, _lodash.default)(props.theme.borderTableHeader) || props.theme.borderTableHeader === 'none' ? props.theme.borderTableBody : '0';
}, function (props) {
  return props.theme.borderTableBody;
}, function (props) {
  return props.theme.bgHeader;
}, function (props) {
  return props.theme.bgColor;
}, function (props) {
  return props.theme.bgAlternate;
}, function (props) {
  return props.theme.fontColorAlternate;
}, function (props) {
  return props.theme.bgSelected;
}, function (props) {
  return props.theme.bgColorHover;
}, function (props) {
  return props.theme.bgSelectedHover;
});
exports.TableUI = TableUI;
var TBodyUI = (0, _styledComponents.default)('tbody').withConfig({
  displayName: "Tablecss__TBodyUI",
  componentId: "sc-1ex766p-4"
})([".animated-row-enter{opacity:0;}.animated-row-enter-active{opacity:1;", "}.animated-row-exit{opacity:1;}.animated-row-exit-active{opacity:0;", "}"], function (_ref) {
  var $timeout = _ref.$timeout;
  return "transition: opacity " + $timeout + "ms ease-in;";
}, function (_ref2) {
  var $timeout = _ref2.$timeout;
  return "transition: opacity " + $timeout + "ms ease-in;";
});
exports.TBodyUI = TBodyUI;
var HeaderCellUI = (0, _styledComponents.default)('th').withConfig({
  displayName: "Tablecss__HeaderCellUI",
  componentId: "sc-1ex766p-5"
})(["text-align:", ";width:", ";font-size:13px;font-weight:500;"], function (props) {
  return props.align || 'left';
}, function (props) {
  return props.cellWidth || 'auto';
});
exports.HeaderCellUI = HeaderCellUI;
var CellUI = (0, _styledComponents.default)('td').withConfig({
  displayName: "Tablecss__CellUI",
  componentId: "sc-1ex766p-6"
})(["text-align:", ";"], function (props) {
  return props.align || 'left';
});
exports.CellUI = CellUI;
var SortableCellUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Tablecss__SortableCellUI",
  componentId: "sc-1ex766p-7"
})([".is-iconName-caret-down,.is-iconName-caret-up{margin-left:4px;margin-right:-2px;}.column-title-as-icon + .is-iconName-caret-down,.column-title-as-icon + .is-iconName-caret-up{margin-left:0;margin-right:-2px;}.column-title-as-icon{margin-left:-2px;margin-top:-4px;margin-bottom:-4px;}"]);
exports.SortableCellUI = SortableCellUI;
var SortableCellContentUI = (0, _styledComponents.default)('button').withConfig({
  displayName: "Tablecss__SortableCellContentUI",
  componentId: "sc-1ex766p-8"
})(["", ";--focusRingRadius:4px;display:inline-flex;align-items:center;justify-content:", ";padding:6px 8px;margin-left:-8px;border-radius:var(--focusRingRadius);background-color:transparent;color:", ";font-weight:500;border:0;cursor:pointer;transition:background-color 0.15s ease-in-out;font-family:var(--HSDSGlobalFontFamily);&:hover,.sorted &{color:", ";background-color:", ";}"], _focusRing.focusRing, function (props) {
  return getCellAlignment(props.align);
}, function (props) {
  return props.theme.fontColorHeader;
}, (0, _color.getColor)('charcoal.700'), (0, _color.getColor)('grey.300'));
exports.SortableCellContentUI = SortableCellContentUI;
var ButtonExpanderUI = (0, _styledComponents.default)(_Button.default).withConfig({
  displayName: "Tablecss__ButtonExpanderUI",
  componentId: "sc-1ex766p-9"
})(["&.is-size-sm{--buttonFontWeight:normal;--buttonHeight:26px;margin:8px 0 8px 4px;}"]);
exports.ButtonExpanderUI = ButtonExpanderUI;

function generateTableWidthStyles(tableWidth) {
  var style = 'width: 100%;';

  if (tableWidth) {
    style = tableWidth.min ? style + " min-width: " + tableWidth.min + ";" : style;
    style = tableWidth.max ? style + " max-width: " + tableWidth.max + ";" : style + " max-width: 100%;";
  }

  return style;
}

function getCellAlignment(align) {
  if (!align || align === 'left') return 'flex-start';
  if (align === 'center') return 'center';
  if (align === 'right') return 'flex-end';
}