@atlaskit/dynamic-table/dist/esm/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 */
import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader", "isFixedSize", "shouldTruncate"];
import "./table-head-cell.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
/* eslint-disable @atlaskit/design-system/no-physical-properties */

import React, { useCallback, useState } from 'react';
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
import { Box, Flex, Pressable } from '@atlaskit/primitives/compiled';
import Tooltip from '@atlaskit/tooltip/Tooltip';
import { HeadCell } from '../styled/head-cell';
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 = _objectWithoutProperties(_ref, _excluded);
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isHovered = _useState2[0],
    setIsHovered = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_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 = useCallback(function () {
    setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
  }, [setIsFocused]);
  var handleBlur = useCallback(function () {
    setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
  }, [setIsFocused]);
  var handleMouseEnter = useCallback(function () {
    setIsHovered(true);
  }, [setIsHovered]);
  var handleMouseLeave = useCallback(function () {
    setIsHovered(false);
  }, [setIsHovered]);
  var visuallyRefreshedButton = /*#__PURE__*/React.createElement(Box, {
    xcss: headCellStyles.headCellContainer,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    onFocus: handleFocus,
    onBlur: handleBlur
  }, /*#__PURE__*/React.createElement(Tooltip, {
    content: sortOrder === 'ASC' ? ascendingSortTooltip : descendingSortTooltip
  }, function (tooltipProps) {
    return /*#__PURE__*/React.createElement(Box, {
      role: "presentation",
      xcss: isFixedSize && shouldTruncate ? styles.truncateTooltipWrapper : undefined
    }, /*#__PURE__*/React.createElement(Pressable, _extends({}, tooltipProps, {
      onClick: onClick,
      xcss: isFixedSize && shouldTruncate ? styles.truncateButtonWrapper : styles.buttonWrapper,
      "aria-roledescription": buttonAriaRoleDescription
    }), /*#__PURE__*/React.createElement(Flex, {
      xcss: isFixedSize && shouldTruncate ? isVisibleIconOnlyHeader ? styles.truncateHiddenIconHeaderWrapper : styles.truncateHeaderWrapper : isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
    }, /*#__PURE__*/React.createElement("span", {
      className: ax([headCellStyles.text, isFixedSize && shouldTruncate && headCellStyles.truncateText])
    }, content)), shouldRenderSortIcon && /*#__PURE__*/React.createElement(Flex, {
      xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
    }, sortOrder === 'ASC' ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
      label: "",
      color: "var(--ds-text-subtle, #505258)",
      testId: testId && "".concat(testId, "--up--icon")
    }) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
      label: "",
      color: "var(--ds-text-subtle, #505258)",
      testId: testId && "".concat(testId, "--down--icon")
    }))));
  }));
  return /*#__PURE__*/React.createElement(HeadCell
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
  , _extends({
    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
export default TableHeadCell;