@festo-ui/react 9.0.0-dev.711 → 9.0.0-dev.713

package/dist/components/tab/Tabs.css

@@ -1,285 +0,0 @@
-.fwe-legacy-tabs {
-  width: 100%;
-  height: 100%;
-  margin: 48px 0;
-}
-
-.fwe-legacy-tab-bar {
-  width: 75%;
-  font-size: var(--fwe-font-size-base);
-  flex-wrap: nowrap;
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-  display: flex;
-}
-
-.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width {
-  width: 100%;
-}
-
-.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item {
-  flex: auto;
-}
-
-.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item {
-  flex: 1 1 0;
-}
-
-.fwe-legacy-tab-item {
-  background-color: var(--fwe-gray-300);
-  border-right: 2px solid var(--fwe-gray-100);
-  text-align: center;
-  height: 48px;
-  max-height: 48px;
-}
-
-.fwe-legacy-tab-item:last-child {
-  border-right: none;
-}
-
-.fwe-legacy-tab-item.fwe-active {
-  background-color: var(--fwe-white);
-}
-
-.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link {
-  color: var(--fwe-caerul);
-}
-
-.fwe-legacy-tab-item:not(.fwe-active) {
-  border-bottom: 2px solid var(--fwe-gray-100);
-}
-
-.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link {
-  padding: 11px 16px;
-}
-
-.fwe-legacy-tab-link {
-  cursor: pointer;
-  width: 100%;
-  height: 48px;
-  color: var(--fwe-black);
-  white-space: nowrap;
-  background: none;
-  border: none;
-  padding: 11px 16px 13px;
-  line-height: 24px;
-  display: inline-block;
-}
-
-.fwe-legacy-tab-link .fwe-svg-icon {
-  margin-right: 8px;
-  line-height: 0;
-}
-
-.fwe-legacy-tab-link i.fwe-icon {
-  vertical-align: initial;
-  padding-right: 8px;
-}
-
-.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg {
-  position: relative;
-  top: 3px;
-}
-
-.fwe-legacy-tab-link:hover {
-  color: var(--fwe-caerul);
-}
-
-.fwe-legacy-tab-link:active {
-  background-color: var(--fwe-white);
-  color: var(--fwe-caerul);
-}
-
-.fwe-legacy-tab-panel-content {
-  background-color: var(--fwe-white);
-  height: 100%;
-  padding: 48px 24px;
-  overflow: auto;
-}
-
-@media (width <= 375px) {
-  .fwe-legacy-tab-bar {
-    background-color: var(--fwe-white);
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  .fwe-legacy-tab-item {
-    background-color: var(--fwe-white);
-    border-right: 2px solid var(--fwe-white);
-  }
-
-  .fwe-legacy-tab-item:not(.fwe-active) {
-    border-bottom: 2px solid var(--fwe-white);
-  }
-
-  .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link, .fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon {
-    color: var(--fwe-hero-gray);
-  }
-
-  .fwe-legacy-tab-link.fwe-can-swap-icon {
-    direction: rtl;
-  }
-
-  .fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon {
-    padding-left: 8px;
-    padding-right: 0;
-  }
-}
-
-.fr-tab-panel-content {
-  background-color: var(--fwe-white);
-  height: 100%;
-  padding: 48px 24px;
-  overflow: auto;
-}
-
-.fr-tab-bar {
-  width: 100%;
-}
-
-.fr-tab-scroller {
-  overflow-y: hidden;
-}
-
-.fr-tab-scroller-scroll-area {
-  display: flex;
-  position: relative;
-  overflow-x: hidden;
-}
-
-.fr-tab-scroller-scroll-area::-webkit-scrollbar {
-  display: none;
-}
-
-.fr-tab-scroller-scroll-area--scroll {
-  overflow-x: scroll;
-}
-
-.fr-tab-scroller-scroll-content {
-  will-change: transform;
-  flex: 1 0 auto;
-  padding: 0 17px 0 16px;
-  display: flex;
-  position: relative;
-  transform: none;
-}
-
-.fr-tab-scroller-scroll-content--with-divider .fr-tab-scroller-divider-line {
-  display: block;
-}
-
-.fr-tab-scroller--animating .fr-tab-scroller-scroll-content {
-  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
-}
-
-.fr-tab-scroller-divider-line {
-  border-bottom: 1px solid var(--fwe-control);
-  display: none;
-  position: absolute;
-  inset: 0;
-}
-
-.fr-tab-indicator {
-  pointer-events: none;
-  z-index: 1;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.fr-tab-indicator-content {
-  transform-origin: 0;
-  opacity: 0;
-}
-
-.fr-tab-indicator-content--underline {
-  box-sizing: border-box;
-  border-top-style: solid;
-  align-self: flex-end;
-  width: 100%;
-}
-
-.fr-tab-indicator .fr-tab-indicator-content {
-  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
-}
-
-.fr-tab-indicator .fr-tab-indicator-content--underline {
-  border-top: 4px solid var(--fwe-caerul);
-}
-
-.fr-tab-indicator--active .fr-tab-indicator-content {
-  opacity: 1;
-}
-
-.fr-tab {
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-appearance: none;
-  z-index: 1;
-  background: none;
-  border: none;
-  outline: none;
-  flex: 1 0 auto;
-  justify-content: center;
-  height: 36px;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  position: relative;
-}
-
-.fr-tab:not(:last-child) {
-  margin-right: 32px;
-}
-
-.fr-tab::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-.fr-tab .fr-tab-text-label {
-  color: var(--fwe-text);
-}
-
-.fr-tab--active .fr-tab-text-label {
-  color: var(--fwe-caerul);
-}
-
-.fr-tab-content {
-  height: inherit;
-  pointer-events: none;
-  justify-content: center;
-  align-items: flex-start;
-  display: flex;
-  position: relative;
-}
-
-.fr-tab-text-label {
-  z-index: 2;
-  display: inline-block;
-}
-
-.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab {
-  flex: none;
-}
-
-.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab:not(:last-child) {
-  margin-right: 64px;
-}
-
-.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-scroll-content {
-  padding: 0 32px;
-}
-
-.fr-tab-scroller-scroll-area:not(.fr-tab-scroller-scroll-area--compact) .fr-tab-scroller-divider-line {
-  padding-right: 64px;
-}
-

package/dist/components/tab/Tabs.d.ts

@@ -1,23 +0,0 @@
-import './Tabs.scss';
-import React, { type ComponentPropsWithoutRef } from 'react';
-type TabItemAppearance = 'fill' | 'equal' | 'default';
-export type TabViewType = 'legacy' | 'responsive';
-export interface TabsConfiguration {
-    tabBar?: {
-        fullWidth?: boolean;
-    };
-    tabItems?: {
-        appearance: TabItemAppearance;
-    };
-}
-export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> {
-    config?: TabsConfiguration;
-    viewType?: TabViewType;
-    showDivider?: boolean;
-    onChange?: (value: {
-        previous: string;
-        current: string;
-    }) => void;
-}
-export declare const Tabs: (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};

package/dist/components/tab/Tabs.js

@@ -1,194 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import "./Tabs.css";
-import classnames from "classnames";
-import react, { forwardRef, isValidElement, useEffect, useRef, useState } from "react";
-import { useForkRef } from "../../utils/useForkRef.js";
-import { IconWrapper } from "../icon-wrapper/IconWrapper.js";
-import { useTabScroll } from "./useTabScroll.js";
-let nextId = 0;
-const Tabs = /*#__PURE__*/ forwardRef(({ config, children, className, onChange, viewType = 'responsive', showDivider = false, ...props }, ref)=>{
-    const [useCompactDensity, setCompactDensity] = useState(true);
-    const componentId = useRef(`tabs-${++nextId}`);
-    const elRef = useRef(null);
-    const combinedRef = useForkRef(ref, elRef);
-    const scrollContent = useRef(null);
-    const scrollArea = useRef(null);
-    const observer = useRef(null);
-    let activeId = '';
-    react.Children.forEach(children, (element, i)=>{
-        if (/*#__PURE__*/ react.isValidElement(element)) {
-            if ('' === activeId) activeId = `${componentId.current}-tab-panel-${i}`;
-            else if (element.props.active) activeId = `${componentId.current}-tab-panel-${i}`;
-        }
-    });
-    const [currentId, setId] = useState(activeId);
-    const innerChildren = react.Children.map(children, (element, i)=>{
-        if (/*#__PURE__*/ isValidElement(element)) {
-            const newId = `${componentId.current}-tab-panel-${i}`;
-            return /*#__PURE__*/ react.cloneElement(element, {
-                isVisible: newId === currentId,
-                active: newId === currentId,
-                id: newId,
-                tabId: `${componentId.current}-tab-${i}`,
-                ...element.props
-            });
-        }
-    });
-    const [handleTabScroll, classes, style] = useTabScroll(innerChildren?.length ?? 0, componentId.current, {
-        elRef,
-        scrollContent,
-        scrollArea
-    });
-    useEffect(()=>{
-        const { current } = scrollArea;
-        if (current) {
-            const initialWidth = current.offsetWidth;
-            if (initialWidth > 768) setCompactDensity(false);
-            observer.current = new ResizeObserver(()=>{
-                const width = current.offsetWidth;
-                if (width > 768 && useCompactDensity) setCompactDensity(false);
-                else if (width <= 768 && !useCompactDensity) setCompactDensity(true);
-            });
-            if (current) observer.current.observe(current);
-        }
-        return ()=>{
-            if (current && observer && observer.current) observer.current.unobserve(current);
-        };
-    }, [
-        useCompactDensity
-    ]);
-    const showTabPane = (id)=>{
-        if (null == id) return;
-        if (onChange) onChange({
-            previous: currentId,
-            current: id
-        });
-        setId(id);
-    };
-    function handleClick(e, index, id) {
-        handleTabScroll(e, index);
-        if (void 0 !== id) showTabPane(id);
-    }
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: 'legacy' === viewType ? /*#__PURE__*/ jsxs("div", {
-            className: classnames('fwe-legacy-tabs', className),
-            children: [
-                /*#__PURE__*/ jsx("ul", {
-                    role: "tablist",
-                    className: classnames('fwe-legacy-tab-bar', {
-                        'fwe-legacy-tab-bar-full-width': config?.tabBar?.fullWidth
-                    }, {
-                        'fwe-legacy-tab-items-equal-width': config?.tabItems?.appearance === 'equal'
-                    }, {
-                        'fwe-legacy-tab-items-fill': config?.tabItems?.appearance === 'fill'
-                    }),
-                    children: innerChildren?.map((child, i)=>{
-                        const { active, icon, name, id, tabId } = child.props;
-                        return /*#__PURE__*/ jsx("li", {
-                            className: classnames('fwe-legacy-tab-item', {
-                                'fwe-active': active
-                            }),
-                            children: icon ? /*#__PURE__*/ jsxs("button", {
-                                type: "button",
-                                id: tabId,
-                                className: classnames('fwe-legacy-tab-link', {
-                                    'fwe-can-swap-icon': 2 === innerChildren.length && 1 === i
-                                }),
-                                role: "tab",
-                                "aria-controls": id,
-                                "aria-selected": active,
-                                onClick: ()=>showTabPane(id),
-                                children: [
-                                    /*#__PURE__*/ jsx(IconWrapper, {
-                                        icon: icon
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: name
-                                    })
-                                ]
-                            }) : /*#__PURE__*/ jsx("button", {
-                                type: "button",
-                                id: tabId,
-                                className: "fwe-legacy-tab-link",
-                                role: "tab",
-                                "aria-controls": id,
-                                "aria-selected": active,
-                                onClick: ()=>showTabPane(id),
-                                children: name
-                            })
-                        }, tabId);
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "fwe-legacy-tab-panel-content",
-                    children: innerChildren
-                })
-            ]
-        }) : /*#__PURE__*/ jsxs("div", {
-            className: "fr-tab-bar",
-            role: "tablist",
-            ref: combinedRef,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx("div", {
-                    className: classnames('fr-tab-scroller', classes),
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: classnames('fr-tab-scroller-scroll-area fr-tab-scroller-scroll-area--scroll', {
-                            'fr-tab-scroller-scroll-area--compact': useCompactDensity
-                        }),
-                        ref: scrollArea,
-                        children: /*#__PURE__*/ jsxs("div", {
-                            className: classnames('fr-tab-scroller-scroll-content', {
-                                'fr-tab-scroller-scroll-content--with-divider': showDivider
-                            }),
-                            ref: scrollContent,
-                            style: style,
-                            children: [
-                                innerChildren?.map((child, i)=>{
-                                    const { active, name, id, tabId } = child.props;
-                                    return /*#__PURE__*/ jsxs("button", {
-                                        type: "button",
-                                        role: "tab",
-                                        className: classnames('fr-tab', {
-                                            'fr-tab--active': active
-                                        }),
-                                        id: tabId,
-                                        "aria-controls": id,
-                                        "aria-selected": active,
-                                        tabIndex: 0 === i ? 0 : 1,
-                                        onClick: (e)=>handleClick(e, i, id),
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: "fr-tab-content",
-                                                children: /*#__PURE__*/ jsx("span", {
-                                                    className: "fr-tab-text-label",
-                                                    children: name
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: classnames('fr-tab-indicator', {
-                                                    'fr-tab-indicator--active': active
-                                                }),
-                                                children: /*#__PURE__*/ jsx("span", {
-                                                    className: "fr-tab-indicator-content fr-tab-indicator-content--underline"
-                                                })
-                                            })
-                                        ]
-                                    }, tabId);
-                                }),
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "fr-tab-scroller-divider-line"
-                                })
-                            ]
-                        })
-                    })
-                }),
-                /*#__PURE__*/ jsx("div", {
-                    className: "fr-tab-panel-content",
-                    children: innerChildren
-                })
-            ]
-        })
-    });
-});
-export { Tabs };

package/dist/components/tab/tab-pane/TabPane.css

@@ -1,8 +0,0 @@
-.fr-show {
-  display: block;
-}
-
-.fr-hide {
-  display: none;
-}
-

package/dist/components/tab/tab-pane/TabPane.d.ts

@@ -1,9 +0,0 @@
-import './TabPane.scss';
-import type { ClassNamePropsWithChildren } from '../../../utils/types';
-import type { Tab } from '../interfaces';
-export interface TabPaneProps extends ClassNamePropsWithChildren, Tab {
-    readonly id?: string;
-    readonly isVisible?: boolean;
-    readonly tabId?: string;
-}
-export declare function TabPane({ isVisible, children, className, tabId, id, }: TabPaneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tab/tab-pane/TabPane.js

@@ -1,18 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "./TabPane.css";
-import classnames from "classnames";
-function TabPane({ isVisible = false, children, className, tabId, id }) {
-    const tabPaneClasses = classnames({
-        'fr-show': isVisible
-    }, {
-        'fr-hide': !isVisible
-    }, className);
-    return /*#__PURE__*/ jsx("div", {
-        id: id,
-        role: "tabpanel",
-        "aria-labelledby": tabId,
-        className: tabPaneClasses,
-        children: children
-    });
-}
-export { TabPane };

package/dist/components/tab/useTabScroll.js

@@ -1,151 +0,0 @@
-import { useState } from "react";
-const useTabScroll = (tabLength, componentId, refs)=>{
-    const { elRef, scrollContent, scrollArea } = refs;
-    const [style, setStyle] = useState({});
-    const [classes, setClasses] = useState('');
-    function getScrollContentStyleValue(propName) {
-        return scrollContent.current ? window.getComputedStyle(scrollContent.current).getPropertyValue(propName) : '';
-    }
-    function calculateCurrentTranslateX() {
-        const transformValue = getScrollContentStyleValue('transform');
-        if ('none' === transformValue) return 0;
-        const match = /\((.+?)\)/.exec(transformValue);
-        if (!match) return 0;
-        const matrixParams = match[1];
-        const [_a, _b, _c, _d, tx, _ty] = matrixParams.split(',');
-        return parseFloat(tx);
-    }
-    function getScrollPosition() {
-        const currentTranslateX = calculateCurrentTranslateX();
-        const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
-        return scrollLeft - currentTranslateX;
-    }
-    function calculateScrollEdges() {
-        const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
-        const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
-        return {
-            left: 0,
-            right: scrollContentWidth - scrollAreaWidth
-        };
-    }
-    function clampScrollValue(scrollX) {
-        const edges = calculateScrollEdges();
-        return Math.min(Math.max(edges.left, scrollX), edges.right);
-    }
-    function getIncrementScrollOperation(scrollX) {
-        const currentScrollX = getScrollPosition();
-        const targetScrollX = scrollX + currentScrollX;
-        const safeScrollX = clampScrollValue(targetScrollX);
-        const scrollDelta = safeScrollX - currentScrollX;
-        return {
-            finalScrollPosition: safeScrollX,
-            scrollDelta
-        };
-    }
-    function getAnimatingScrollPosition() {
-        const currentTranslateX = calculateCurrentTranslateX();
-        const scrollLeft = scrollArea.current?.scrollLeft ?? 0;
-        return scrollLeft - currentTranslateX;
-    }
-    function stopScrollAnimation() {
-        const currentScrollPosition = getAnimatingScrollPosition();
-        setClasses('');
-        setStyle({
-            transform: 'translateX(0px)'
-        });
-        if (scrollArea.current) scrollArea.current.scrollLeft = currentScrollPosition;
-    }
-    function animate(animation) {
-        if (0 === animation.scrollDelta) return;
-        stopScrollAnimation();
-        if (scrollArea.current) scrollArea.current.scrollLeft = animation.finalScrollPosition;
-        setStyle({
-            transform: `translateX(${animation.scrollDelta}px)`
-        });
-        if (scrollArea.current) scrollArea.current.getBoundingClientRect();
-        requestAnimationFrame(()=>{
-            setClasses('fr-tab-scroller--animating');
-            setStyle({
-                transform: 'none'
-            });
-        });
-    }
-    function incrementScroll(scrollXIncrement) {
-        if (0 === scrollXIncrement) return;
-        const scrollOperation = getIncrementScrollOperation(scrollXIncrement);
-        animate(scrollOperation);
-    }
-    function computeDimensions(tab) {
-        const rootWidth = tab.offsetWidth;
-        const rootLeft = tab.offsetLeft;
-        const tabContent = tab.querySelector('.fr-tab-content');
-        const contentWidth = tabContent?.offsetWidth ?? 0;
-        const contentLeft = tabContent?.offsetLeft ?? 0;
-        return {
-            contentLeft: rootLeft + contentLeft,
-            contentRight: rootLeft + contentLeft + contentWidth,
-            rootLeft,
-            rootRight: rootLeft + rootWidth
-        };
-    }
-    function calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth) {
-        const nextTab = elRef.current?.querySelector(`#${componentId}-tab-${nextIndex}`);
-        if (null == nextTab) return 0;
-        const nextTabDimensions = computeDimensions(nextTab);
-        const relativeContentLeft = nextTabDimensions.contentLeft - scrollPosition - barWidth;
-        const relativeContentRight = nextTabDimensions.contentRight - scrollPosition;
-        const leftIncrement = relativeContentRight - 48;
-        const rightIncrement = relativeContentLeft + 48;
-        if (nextIndex < index) return Math.min(leftIncrement, 0);
-        return Math.max(rightIncrement, 0);
-    }
-    function findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth) {
-        const relativeRootLeft = tabDimensions.rootLeft - scrollPosition;
-        const relativeRootRight = tabDimensions.rootRight - scrollPosition - barWidth;
-        const relativeRootDelta = relativeRootLeft + relativeRootRight;
-        const leftEdgeIsCloser = relativeRootLeft < 0 || relativeRootDelta < 0;
-        const rightEdgeIsCloser = relativeRootRight > 0 || relativeRootDelta > 0;
-        if (leftEdgeIsCloser) return index - 1;
-        if (rightEdgeIsCloser) return index + 1;
-        return -1;
-    }
-    function indexIsInRange(index) {
-        return index >= 0 && index < tabLength;
-    }
-    function scrollIntoView(index, tab) {
-        const scrollPosition = getScrollPosition();
-        const barWidth = scrollArea.current?.offsetWidth ?? 0;
-        const tabDimensions = computeDimensions(tab);
-        const nextIndex = findAdjacentTabIndexClosestToEdge(index, tabDimensions, scrollPosition, barWidth);
-        if (!indexIsInRange(nextIndex)) return;
-        const scrollIncrement = calculateScrollIncrement(index, nextIndex, scrollPosition, barWidth);
-        incrementScroll(scrollIncrement);
-    }
-    function scrollTo(scrollX) {
-        const currentScrollX = getScrollPosition();
-        const safeScrollX = clampScrollValue(scrollX);
-        const scrollDelta = safeScrollX - currentScrollX;
-        animate({
-            finalScrollPosition: safeScrollX,
-            scrollDelta
-        });
-    }
-    function handleTabScroll(e, index) {
-        const scrollContentWidth = scrollContent.current?.offsetWidth ?? 0;
-        const scrollAreaWidth = scrollArea.current?.offsetWidth ?? 0;
-        if (scrollAreaWidth > scrollContentWidth) return;
-        if (!indexIsInRange(index)) return;
-        if (0 === index) return void scrollTo(0);
-        if (index === tabLength - 1 && scrollContent.current) return void scrollTo(scrollContent.current.offsetWidth);
-        if (e.currentTarget instanceof HTMLElement) {
-            const currentTab = e.currentTarget;
-            scrollIntoView(index, currentTab);
-        }
-    }
-    return [
-        handleTabScroll,
-        classes,
-        style
-    ];
-};
-export { useTabScroll };

package/dist/components/table-header-cell/TableHeaderCell.d.ts

@@ -1,5 +0,0 @@
-export interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
-    active?: boolean;
-    ascending: boolean;
-}
-export declare const TableHeaderCell: (props: TableHeaderCellProps & import("react").RefAttributes<HTMLTableCellElement>) => React.ReactElement | null;