@awsui/components-react/table/header-cell/th-element.js

On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en

import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { useStickyCellStyles } from '../sticky-columns';
import { getTableColHeaderRoleProps } from '../table-role';
import { getStickyClassNames } from '../utils';
import tableStyles from '../styles.css.js';
import styles from './styles.css.js';
export function TableThElement(_a) {
    var { resizableStyle, sortingStatus, sortingDisabled, focusedComponent, stuck, sticky, hidden, stripedRows, isSelection, colIndex, columnId, stickyState, cellRef, tableRole, children, variant, ariaLabel } = _a, props = __rest(_a, ["resizableStyle", "sortingStatus", "sortingDisabled", "focusedComponent", "stuck", "sticky", "hidden", "stripedRows", "isSelection", "colIndex", "columnId", "stickyState", "cellRef", "tableRole", "children", "variant", "ariaLabel"]);
    const isVisualRefresh = useVisualRefresh();
    const stickyStyles = useStickyCellStyles({
        stickyColumns: stickyState,
        columnId,
        getClassName: props => getStickyClassNames(styles, props),
    });
    const cellRefObject = useRef(null);
    const mergedRef = useMergeRefs(stickyStyles.ref, cellRef, cellRefObject);
    const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);
    return (React.createElement("th", Object.assign({ "data-focus-id": `header-${String(columnId)}`, className: clsx(styles['header-cell'], styles[`header-cell-variant-${variant}`], sticky && styles['header-cell-sticky'], stuck && styles['header-cell-stuck'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], isSelection && clsx(tableStyles['selection-control'], tableStyles['selection-control-header']), {
            [styles['header-cell-fake-focus']]: focusedComponent === `header-${String(columnId)}`,
            [styles['header-cell-sortable']]: sortingStatus,
            [styles['header-cell-sorted']]: sortingStatus === 'ascending' || sortingStatus === 'descending',
            [styles['header-cell-disabled']]: sortingDisabled,
            [styles['header-cell-ascending']]: sortingStatus === 'ascending',
            [styles['header-cell-descending']]: sortingStatus === 'descending',
            [styles['header-cell-hidden']]: hidden,
        }, stickyStyles.className), style: Object.assign(Object.assign({}, resizableStyle), stickyStyles.style), ref: mergedRef }, getTableColHeaderRoleProps({ tableRole, sortingStatus, colIndex }), { tabIndex: cellTabIndex === -1 ? undefined : cellTabIndex }, copyAnalyticsMetadataAttribute(props), (ariaLabel ? { 'aria-label': ariaLabel } : {})), children));
}
//# sourceMappingURL=th-element.js.map