@atlaskit/dynamic-table/dist/cjs/components/table-head-cell.js

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

/* table-head-cell.tsx generated by @compiled/babel-plugin v3.0.2 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./table-head-cell.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
var _compiled = require("@atlaskit/primitives/compiled");
var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
var _headCell = require("../styled/head-cell");
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader", "isFixedSize", "shouldTruncate"];
/* eslint-disable @atlaskit/design-system/no-physical-properties */
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var styles = {
  buttonWrapper: "_1e0c1txw _bfhk1j28 _4cvr1h6o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0altlke",
  truncateButtonWrapper: "_1e0c1txw _bfhk1j28 _4cvr1h6o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1ul9idpf _p12f1osq _d0altlke",
  sortIconHiddenWrapper: "_1e0c1txw _tzy4idpf _bfhk1j28 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _1h7hkb7n",
  sortIconVisibleWrapper: "_1e0c1txw _tzy4kb7n _bfhk1j28 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
  hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
  visibleHeaderWrapper: "_tzy4kb7n _u5f31b66",
  truncateHeaderWrapper: "_16jlkb7n _1o9zkb7n _i0dlf1ug _tzy4kb7n _u5f31b66 _1ul9idpf",
  truncateHiddenIconHeaderWrapper: "_16jlkb7n _1o9zkb7n _i0dlf1ug _tzy4idpf _18u010v4 _1ul9idpf",
  truncateTooltipWrapper: "_1ul9idpf _p12f1osq"
};
var headCellStyles = {
  headCellContainer: "_1e0c1txw _4cvr1h6o",
  text: "_11c8wadc _syazazsu _k48pwu06",
  truncateText: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1ule _1ul9idpf _1bto1l2s _o5721q9c"
};
var TableHeadCell = function TableHeadCell(_ref) {
  var content = _ref.content,
    inlineStyles = _ref.inlineStyles,
    testId = _ref.testId,
    isRanking = _ref.isRanking,
    innerRef = _ref.innerRef,
    isSortable = _ref.isSortable,
    sortOrder = _ref.sortOrder,
    onClick = _ref.onClick,
    headCellId = _ref.headCellId,
    activeSortButtonId = _ref.activeSortButtonId,
    _ref$ascendingSortToo = _ref.ascendingSortTooltip,
    ascendingSortTooltip = _ref$ascendingSortToo === void 0 ? 'Sort ascending' : _ref$ascendingSortToo,
    _ref$descendingSortTo = _ref.descendingSortTooltip,
    descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
    _ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
    buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
    isIconOnlyHeader = _ref.isIconOnlyHeader,
    isFixedSize = _ref.isFixedSize,
    shouldTruncate = _ref.shouldTruncate,
    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isHovered = _useState2[0],
    setIsHovered = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    isFocused = _useState4[0],
    setIsFocused = _useState4[1];
  var isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
  var isSortIconVisible = isHovered || isActive || isFocused;
  var isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
  var shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
  var handleFocus = (0, _react.useCallback)(function () {
    setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
  }, [setIsFocused]);
  var handleBlur = (0, _react.useCallback)(function () {
    setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
  }, [setIsFocused]);
  var handleMouseEnter = (0, _react.useCallback)(function () {
    setIsHovered(true);
  }, [setIsHovered]);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    setIsHovered(false);
  }, [setIsHovered]);
  var visuallyRefreshedButton = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    xcss: headCellStyles.headCellContainer,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onFocus: handleFocus,
    onBlur: handleBlur
  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    content: sortOrder === 'ASC' ? ascendingSortTooltip : descendingSortTooltip
  }, function (tooltipProps) {
    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
      role: "presentation",
      xcss: isFixedSize && shouldTruncate ? styles.truncateTooltipWrapper : undefined
    }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, tooltipProps, {
      onClick: onClick,
      xcss: isFixedSize && shouldTruncate ? styles.truncateButtonWrapper : styles.buttonWrapper,
      "aria-roledescription": buttonAriaRoleDescription
    }), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
      xcss: isFixedSize && shouldTruncate ? isVisibleIconOnlyHeader ? styles.truncateHiddenIconHeaderWrapper : styles.truncateHeaderWrapper : isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: (0, _runtime.ax)([headCellStyles.text, isFixedSize && shouldTruncate && headCellStyles.truncateText])
    }, content)), shouldRenderSortIcon && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
      xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
    }, sortOrder === 'ASC' ? /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
      label: "",
      color: "var(--ds-text-subtle, #505258)",
      testId: testId && "".concat(testId, "--up--icon")
    }) : /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
      label: "",
      color: "var(--ds-text-subtle, #505258)",
      testId: testId && "".concat(testId, "--down--icon")
    }))));
  }));
  return /*#__PURE__*/_react.default.createElement(_headCell.HeadCell
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
  , (0, _extends2.default)({
    style: inlineStyles,
    testId: testId && "".concat(testId, "--head--cell"),
    ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
  }, rest, {
    isFixedSize: isFixedSize,
    isSortable: isSortable,
    sortOrder: sortOrder,
    shouldTruncate: shouldTruncate
  }), isSortable ? visuallyRefreshedButton : content);
};

// eslint-disable-next-line @repo/internal/react/require-jsdoc
var _default = exports.default = TableHeadCell;