@atlaskit/dynamic-table/dist/es2019/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 "./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';
const 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"
};
const headCellStyles = {
  headCellContainer: "_1e0c1txw _4cvr1h6o",
  text: "_11c8wadc _syazazsu _k48pwu06",
  truncateText: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo15vq _18m915vq _1e0c1ule _1ul9idpf _1bto1l2s _o5721q9c"
};
const TableHeadCell = ({
  content,
  inlineStyles,
  testId,
  isRanking,
  innerRef,
  isSortable,
  sortOrder,
  onClick,
  headCellId,
  activeSortButtonId,
  ascendingSortTooltip = 'Sort ascending',
  descendingSortTooltip = 'Sort descending',
  buttonAriaRoleDescription = 'Sort button',
  isIconOnlyHeader,
  isFixedSize,
  shouldTruncate,
  ...rest
}) => {
  const [isHovered, setIsHovered] = useState(false);
  const [isFocused, setIsFocused] = useState(false);
  const isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
  const isSortIconVisible = isHovered || isActive || isFocused;
  const isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
  const shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
  const handleFocus = useCallback(() => {
    setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(true);
  }, [setIsFocused]);
  const handleBlur = useCallback(() => {
    setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(false);
  }, [setIsFocused]);
  const handleMouseEnter = useCallback(() => {
    setIsHovered(true);
  }, [setIsHovered]);
  const handleMouseLeave = useCallback(() => {
    setIsHovered(false);
  }, [setIsHovered]);
  const 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
  }, tooltipProps => /*#__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 && `${testId}--up--icon`
  }) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
    label: "",
    color: "var(--ds-text-subtle, #505258)",
    testId: testId && `${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 && `${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;