@rio-cloud/rio-uikit 2.4.2 → 2.5.0

package/components/table/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    useEffect,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../useResizeObserver';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport Collapse from '../collapse/Collapse';\nimport Card from '../card/Card';\nimport TableSearch from './TableSearch';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n\n// Switch the toolbar into the compact mobile layout,\n// based on the available toolbar width instead of the overall viewport width.\nconst DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT = 544;\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Optional class names for the card that wraps collapsed toolbar controls\n     * in the compact mobile layout.\n     */\n    collapseCardClassName?: string;\n\n    /**\n     * Optional toolbar width in pixels at which the toolbar switches into its compact\n     * mobile/collapsible layout.\n     *\n     * @default 544\n     */\n    responsiveCollapseBreakpoint?: number;\n\n    /**\n     * Disables the compact mobile/collapsible toolbar layout.\n     *\n     * Use this as an escape hatch when a consuming service needs to keep the\n     * default wrapping toolbar behavior regardless of the available toolbar width.\n     *\n     * @default false\n     */\n    disableResponsiveCollapse?: boolean;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasDescendantType = (node: ReactNode, componentType: unknown): boolean =>\n    Children.toArray(node).some(child => {\n        if (!isValidElement(child)) {\n            return false;\n        }\n\n        if (child.type === componentType) {\n            return true;\n        }\n\n        return hasDescendantType(child.props.children, componentType);\n    });\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = (props: PropsWithChildren<TableToolbarProps>) => {\n    const {\n        className,\n        collapseCardClassName,\n        children,\n        responsiveCollapseBreakpoint = DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT,\n        disableResponsiveCollapse = false,\n    } = props;\n\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n    const [isMobileCollapseOpen, setIsMobileCollapseOpen] = useState(false);\n\n    const [toolbarSizeRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [toolbarContainerRef, , { inlineSize: toolbarContainerInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const mergedToolbarRefs = useMergeRefs(toolbarRef, toolbarSizeRef);\n\n    const isSmallScreen =\n        !disableResponsiveCollapse &&\n        toolbarInlineSize !== undefined &&\n        toolbarInlineSize <= responsiveCollapseBreakpoint;\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    const searchRightColumnIndex = rightColumns.findIndex(column =>\n        hasDescendantType(column.props.children, TableSearch)\n    );\n\n    const searchRightColumn = searchRightColumnIndex >= 0 ? rightColumns[searchRightColumnIndex] : undefined;\n\n    const mobileCollapsedRightColumns = searchRightColumn\n        ? rightColumns.filter((_, index) => index !== searchRightColumnIndex)\n        : rightColumns;\n\n    const hasMobileCollapseToggle = isSmallScreen && mobileCollapsedRightColumns.length > 0;\n\n    const mobileCollapseToggle = hasMobileCollapseToggle && (\n        <div className='table-toolbar-mobile-toggle'>\n            <ToggleButton\n                active={isMobileCollapseOpen}\n                aria-label={isMobileCollapseOpen ? 'Hide toolbar filters' : 'Show toolbar filters'}\n                bsStyle='default'\n                iconName={'rioglyph-option-horizontal'}\n                iconOnly\n                onClick={setIsMobileCollapseOpen}\n            />\n        </div>\n    );\n\n    useLayoutEffect(() => {\n        if (isSmallScreen) {\n            setHasWrappedRows(false);\n            return;\n        }\n\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, isSmallScreen, leftColumns.length, rightColumns.length, toolbarContainerInlineSize]);\n\n    useEffect(() => {\n        if (!isSmallScreen || !hasMobileCollapseToggle) {\n            setIsMobileCollapseOpen(false);\n        }\n    }, [hasMobileCollapseToggle, isSmallScreen]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    if (isSmallScreen) {\n        return (\n            <div className={classNames('table-toolbar', 'table-toolbar-mobile', className)} ref={mergedToolbarRefs}>\n                <div className='table-toolbar-container table-toolbar-container-mobile' ref={toolbarContainerRef}>\n                    {searchRightColumn ? (\n                        <>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-mobile-primary'>\n                                    <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                        {leftColumns}\n                                    </div>\n                                </div>\n                            )}\n                            <div className='table-toolbar-mobile-search-row'>\n                                <div className='table-toolbar-mobile-search'>{searchRightColumn}</div>\n                                {mobileCollapseToggle}\n                            </div>\n                        </>\n                    ) : (\n                        <div className='table-toolbar-mobile-primary'>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                    {leftColumns}\n                                </div>\n                            )}\n                            {mobileCollapseToggle}\n                        </div>\n                    )}\n\n                    {hasMobileCollapseToggle && (\n                        <Collapse open={isMobileCollapseOpen} timeout={220}>\n                            <Card className={classNames('table-toolbar-mobile-collapse-card', collapseCardClassName)}>\n                                <div className='table-toolbar-mobile-collapse'>{mobileCollapsedRightColumns}</div>\n                            </Card>\n                        </Collapse>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={mergedToolbarRefs}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\n"],"names":["DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT","isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasDescendantType","node","componentType","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","props","className","collapseCardClassName","responsiveCollapseBreakpoint","disableResponsiveCollapse","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","isMobileCollapseOpen","setIsMobileCollapseOpen","toolbarSizeRef","toolbarInlineSize","useResizeObserver","toolbarContainerRef","toolbarContainerInlineSize","mergedToolbarRefs","useMergeRefs","isSmallScreen","toolbarColumns","leftColumns","column","rightColumns","searchRightColumnIndex","TableSearch","searchRightColumn","mobileCollapsedRightColumns","_","index","hasMobileCollapseToggle","mobileCollapseToggle","jsx","ToggleButton","useLayoutEffect","toolbarElement","nextHasWrappedRows","useEffect","classNames","jsxs","Collapse","Card"],"mappings":"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"}
+{"version":3,"file":"TableToolbar.js","sources":["../../../src/components/table/TableToolbar.tsx"],"sourcesContent":["import {\n    Children,\n    Fragment,\n    useEffect,\n    isValidElement,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport useResizeObserver from '../../useResizeObserver';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\nimport ToggleButton from '../button/ToggleButton';\nimport Collapse from '../collapse/Collapse';\nimport Card from '../card/Card';\nimport TableSearch from './TableSearch';\nimport TableToolbarColumn, { type TableToolbarColumnProps } from './TableToolbarColumn';\n\nexport { TableToolbarColumn };\nexport type {\n    TableToolbarColumnHorizontalAlign,\n    TableToolbarColumnProps,\n    TableToolbarColumnVerticalAlign,\n} from './TableToolbarColumn';\n\n// Switch the toolbar into the compact mobile layout,\n// based on the available toolbar width instead of the overall viewport width.\nconst DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT = 544;\n\nexport type TableToolbarProps = {\n    /**\n     * Optional class names for the wrapper element.\n     *\n     * Do not use this to override the standard spacing between a TableToolbar and the Table below it.\n     * The toolbar spacing comes from the `table-toolbar` wrapper margin plus the bottom margins of\n     * its `TableToolbarColumn` children.\n     */\n    className?: string;\n\n    /**\n     * Optional class names for the card that wraps collapsed toolbar controls\n     * in the compact mobile layout.\n     */\n    collapseCardClassName?: string;\n\n    /**\n     * Optional toolbar width in pixels at which the toolbar switches into its compact\n     * mobile/collapsible layout.\n     *\n     * @default 544\n     */\n    responsiveCollapseBreakpoint?: number;\n\n    /**\n     * Disables the compact mobile/collapsible toolbar layout.\n     *\n     * Use this as an escape hatch when a consuming service needs to keep the\n     * default wrapping toolbar behavior regardless of the available toolbar width.\n     *\n     * @default false\n     */\n    disableResponsiveCollapse?: boolean;\n};\n\ntype TableToolbarColumnElement = ReactElement<PropsWithChildren<TableToolbarColumnProps>, typeof TableToolbarColumn>;\n\nconst isTableToolbarColumnElement = (child: ReactNode): child is TableToolbarColumnElement =>\n    isValidElement(child) && child.type === TableToolbarColumn;\n\nconst collectToolbarColumns = (children: ReactNode): TableToolbarColumnElement[] | null => {\n    const columns: TableToolbarColumnElement[] = [];\n\n    for (const child of Children.toArray(children)) {\n        if (isValidElement(child) && child.type === Fragment) {\n            const fragmentColumns = collectToolbarColumns(child.props.children);\n\n            if (!fragmentColumns) {\n                return null;\n            }\n\n            columns.push(...fragmentColumns);\n            continue;\n        }\n\n        if (!isTableToolbarColumnElement(child)) {\n            return null;\n        }\n\n        columns.push(child);\n    }\n\n    return columns;\n};\n\nconst hasDescendantType = (node: ReactNode, componentType: unknown): boolean =>\n    Children.toArray(node).some(child => {\n        if (!isValidElement(child)) {\n            return false;\n        }\n\n        if (child.type === componentType) {\n            return true;\n        }\n\n        return hasDescendantType(child.props.children, componentType);\n    });\n\nconst hasWrappedFlexItems = (containerElement: HTMLDivElement | null) => {\n    if (!containerElement) {\n        return false;\n    }\n\n    const itemElements = Array.from(containerElement.children) as HTMLElement[];\n\n    if (itemElements.length < 2) {\n        return false;\n    }\n\n    const firstLineBottom = (itemElements[0]?.offsetTop ?? 0) + (itemElements[0]?.offsetHeight ?? 0);\n\n    return itemElements.some(itemElement => itemElement.offsetTop + itemElement.offsetHeight !== firstLineBottom);\n};\n\nconst TableToolbar = (props: PropsWithChildren<TableToolbarProps>) => {\n    const {\n        className,\n        collapseCardClassName,\n        children,\n        responsiveCollapseBreakpoint = DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT,\n        disableResponsiveCollapse = false,\n    } = props;\n\n    const toolbarRef = useRef<HTMLDivElement | null>(null);\n    const leftGroupRef = useRef<HTMLDivElement | null>(null);\n    const rightGroupRef = useRef<HTMLDivElement | null>(null);\n\n    const [hasWrappedRows, setHasWrappedRows] = useState(false);\n    const [isMobileCollapseOpen, setIsMobileCollapseOpen] = useState(false);\n\n    const [toolbarSizeRef, , { inlineSize: toolbarInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const [toolbarContainerRef, , { inlineSize: toolbarContainerInlineSize }] = useResizeObserver<HTMLDivElement>();\n    const mergedToolbarRefs = useMergeRefs(toolbarRef, toolbarSizeRef);\n\n    const isSmallScreen =\n        !disableResponsiveCollapse &&\n        toolbarInlineSize !== undefined &&\n        toolbarInlineSize <= responsiveCollapseBreakpoint;\n\n    const toolbarColumns = collectToolbarColumns(children);\n\n    const leftColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign !== 'right');\n    const rightColumns = (toolbarColumns ?? []).filter(column => column.props.horizontalAlign === 'right');\n\n    const searchRightColumnIndex = rightColumns.findIndex(column =>\n        hasDescendantType(column.props.children, TableSearch)\n    );\n\n    const searchRightColumn = searchRightColumnIndex >= 0 ? rightColumns[searchRightColumnIndex] : undefined;\n\n    const mobileCollapsedRightColumns = searchRightColumn\n        ? rightColumns.filter((_, index) => index !== searchRightColumnIndex)\n        : rightColumns;\n\n    const hasMobileCollapseToggle = isSmallScreen && mobileCollapsedRightColumns.length > 0;\n\n    const mobileCollapseToggle = hasMobileCollapseToggle && (\n        <div className='table-toolbar-mobile-toggle'>\n            <ToggleButton\n                active={isMobileCollapseOpen}\n                aria-label={isMobileCollapseOpen ? 'Hide toolbar filters' : 'Show toolbar filters'}\n                bsStyle='default'\n                iconName={'rioglyph-option-horizontal'}\n                iconOnly\n                onClick={setIsMobileCollapseOpen}\n            />\n        </div>\n    );\n\n    useLayoutEffect(() => {\n        if (isSmallScreen) {\n            setHasWrappedRows(false);\n            return;\n        }\n\n        const toolbarElement = toolbarRef.current;\n\n        toolbarElement?.classList.add('table-toolbar-measuring');\n\n        const nextHasWrappedRows =\n            hasWrappedFlexItems(toolbarContainerRef.current) ||\n            hasWrappedFlexItems(leftGroupRef.current) ||\n            hasWrappedFlexItems(rightGroupRef.current);\n\n        toolbarElement?.classList.remove('table-toolbar-measuring');\n\n        setHasWrappedRows(nextHasWrappedRows);\n    }, [children, isSmallScreen, leftColumns.length, rightColumns.length, toolbarContainerInlineSize]);\n\n    useEffect(() => {\n        if (!isSmallScreen || !hasMobileCollapseToggle) {\n            setIsMobileCollapseOpen(false);\n        }\n    }, [hasMobileCollapseToggle, isSmallScreen]);\n\n    if (!toolbarColumns?.length) {\n        return <div className={classNames('table-toolbar', className)}>{children}</div>;\n    }\n\n    if (isSmallScreen) {\n        return (\n            <div className={classNames('table-toolbar', 'table-toolbar-mobile', className)} ref={mergedToolbarRefs}>\n                <div className='table-toolbar-container table-toolbar-container-mobile' ref={toolbarContainerRef}>\n                    {searchRightColumn ? (\n                        <>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-mobile-primary'>\n                                    <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                        {leftColumns}\n                                    </div>\n                                </div>\n                            )}\n                            <div className='table-toolbar-mobile-search-row'>\n                                <div className='table-toolbar-mobile-search'>{searchRightColumn}</div>\n                                {mobileCollapseToggle}\n                            </div>\n                        </>\n                    ) : (\n                        <div className='table-toolbar-mobile-primary'>\n                            {leftColumns.length > 0 && (\n                                <div className='table-toolbar-group-left table-toolbar-group-left-mobile'>\n                                    {leftColumns}\n                                </div>\n                            )}\n                            {mobileCollapseToggle}\n                        </div>\n                    )}\n\n                    {hasMobileCollapseToggle && (\n                        <Collapse open={isMobileCollapseOpen} timeout={220}>\n                            <Card className={classNames('table-toolbar-mobile-collapse-card', collapseCardClassName)}>\n                                <div className='table-toolbar-mobile-collapse'>{mobileCollapsedRightColumns}</div>\n                            </Card>\n                        </Collapse>\n                    )}\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={classNames('table-toolbar', hasWrappedRows && 'table-toolbar-has-wrap', className)}\n            ref={mergedToolbarRefs}\n        >\n            <div className='table-toolbar-container' ref={toolbarContainerRef}>\n                {leftColumns.length > 0 && (\n                    <div className='table-toolbar-group-left' ref={leftGroupRef}>\n                        {leftColumns}\n                    </div>\n                )}\n                {rightColumns.length > 0 && (\n                    <div className='table-toolbar-group-right' ref={rightGroupRef}>\n                        {rightColumns}\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default TableToolbar;\n"],"names":["DEFAULT_TABLE_TOOLBAR_COLLAPSE_BREAKPOINT","isTableToolbarColumnElement","child","isValidElement","TableToolbarColumn","collectToolbarColumns","children","columns","Children","Fragment","fragmentColumns","hasDescendantType","node","componentType","hasWrappedFlexItems","containerElement","itemElements","firstLineBottom","itemElement","TableToolbar","props","className","collapseCardClassName","responsiveCollapseBreakpoint","disableResponsiveCollapse","toolbarRef","useRef","leftGroupRef","rightGroupRef","hasWrappedRows","setHasWrappedRows","useState","isMobileCollapseOpen","setIsMobileCollapseOpen","toolbarSizeRef","toolbarInlineSize","useResizeObserver","toolbarContainerRef","toolbarContainerInlineSize","mergedToolbarRefs","useMergeRefs","isSmallScreen","toolbarColumns","leftColumns","column","rightColumns","searchRightColumnIndex","TableSearch","searchRightColumn","mobileCollapsedRightColumns","_","index","hasMobileCollapseToggle","mobileCollapseToggle","jsx","ToggleButton","useLayoutEffect","toolbarElement","nextHasWrappedRows","useEffect","classNames","jsxs","Collapse","Card"],"mappings":"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"}

package/components/table/TableToolbarColumn.d.ts

@@ -20,6 +20,9 @@ export type TableToolbarColumnProps = {
     label?: ReactNode;
     /**
      * Optional class names for the column wrapper.
+     *
+     * Do not use this to override the standard bottom margin between TableToolbar and the Table below it.
+     * TableToolbarColumn contributes to the documented toolbar-to-table spacing.
      */
     className?: string;
     /**

package/components/table/TableToolbarColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableToolbarColumn.js","sources":["../../../src/components/table/TableToolbarColumn.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarColumnHorizontalAlign = 'left' | 'right';\nexport type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';\n\nexport type TableToolbarColumnProps = {\n    /**\n     * Controls whether the column is rendered in the left or right toolbar group.\n     *\n     * @default 'left'\n     */\n    horizontalAlign?: TableToolbarColumnHorizontalAlign;\n\n    /**\n     * Vertically centers this toolbar column within its group.\n     *\n     * @default 'end'\n     */\n    verticalAlign?: TableToolbarColumnVerticalAlign;\n\n    /**\n     * Optional label rendered above the column content.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional class names for the column wrapper.\n     */\n    className?: string;\n\n    /**\n     * Adds the default toolbar separator styling for the column.\n     */\n    separator?: boolean;\n};\n\nconst TableToolbarColumn = (props: PropsWithChildren<TableToolbarColumnProps>) => {\n    const {\n        horizontalAlign: _horizontalAlign,\n        label,\n        className,\n        separator,\n        verticalAlign = 'end',\n        children,\n        ...remainingProps\n    } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-toolbar-column',\n                `align-self-${verticalAlign}`,\n                separator && 'table-toolbar-column-separator',\n                className\n            )}\n        >\n            {label ? <label className='table-toolbar-label'>{label}</label> : null}\n            {children}\n        </div>\n    );\n};\n\nexport default TableToolbarColumn;\n"],"names":["TableToolbarColumn","props","_horizontalAlign","label","className","separator","verticalAlign","children","remainingProps","jsxs","classNames","jsx"],"mappings":";;AAsCA,MAAMA,IAAqB,CAACC,MAAsD;AAC9E,QAAM;AAAA,IACF,iBAAiBC;AAAA,IACjB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACP;AAAA,QACA,cAAcJ,CAAa;AAAA,QAC3BD,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGH,UAAA;AAAA,QAAAD,IAAQ,gBAAAQ,EAAC,SAAA,EAAM,WAAU,uBAAuB,aAAM,IAAW;AAAA,QACjEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"TableToolbarColumn.js","sources":["../../../src/components/table/TableToolbarColumn.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type TableToolbarColumnHorizontalAlign = 'left' | 'right';\nexport type TableToolbarColumnVerticalAlign = 'start' | 'center' | 'end';\n\nexport type TableToolbarColumnProps = {\n    /**\n     * Controls whether the column is rendered in the left or right toolbar group.\n     *\n     * @default 'left'\n     */\n    horizontalAlign?: TableToolbarColumnHorizontalAlign;\n\n    /**\n     * Vertically centers this toolbar column within its group.\n     *\n     * @default 'end'\n     */\n    verticalAlign?: TableToolbarColumnVerticalAlign;\n\n    /**\n     * Optional label rendered above the column content.\n     */\n    label?: ReactNode;\n\n    /**\n     * Optional class names for the column wrapper.\n     *\n     * Do not use this to override the standard bottom margin between TableToolbar and the Table below it.\n     * TableToolbarColumn contributes to the documented toolbar-to-table spacing.\n     */\n    className?: string;\n\n    /**\n     * Adds the default toolbar separator styling for the column.\n     */\n    separator?: boolean;\n};\n\nconst TableToolbarColumn = (props: PropsWithChildren<TableToolbarColumnProps>) => {\n    const {\n        horizontalAlign: _horizontalAlign,\n        label,\n        className,\n        separator,\n        verticalAlign = 'end',\n        children,\n        ...remainingProps\n    } = props;\n\n    return (\n        <div\n            {...remainingProps}\n            className={classNames(\n                'table-toolbar-column',\n                `align-self-${verticalAlign}`,\n                separator && 'table-toolbar-column-separator',\n                className\n            )}\n        >\n            {label ? <label className='table-toolbar-label'>{label}</label> : null}\n            {children}\n        </div>\n    );\n};\n\nexport default TableToolbarColumn;\n"],"names":["TableToolbarColumn","props","_horizontalAlign","label","className","separator","verticalAlign","children","remainingProps","jsxs","classNames","jsx"],"mappings":";;AAyCA,MAAMA,IAAqB,CAACC,MAAsD;AAC9E,QAAM;AAAA,IACF,iBAAiBC;AAAA,IACjB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHP;AAEJ,SACI,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGD;AAAA,MACJ,WAAWE;AAAA,QACP;AAAA,QACA,cAAcJ,CAAa;AAAA,QAC3BD,KAAa;AAAA,QACbD;AAAA,MAAA;AAAA,MAGH,UAAA;AAAA,QAAAD,IAAQ,gBAAAQ,EAAC,SAAA,EAAM,WAAU,uBAAuB,aAAM,IAAW;AAAA,QACjEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/components/table/render/header/resolveHeaderCellStyle.d.ts

@@ -7,6 +7,9 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     alignItems?: import("csstype").Property.AlignItems | undefined;
     alignSelf?: import("csstype").Property.AlignSelf | undefined;
     alignTracks?: import("csstype").Property.AlignTracks | undefined;
+    alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
+    anchorName?: import("csstype").Property.AnchorName | undefined;
+    anchorScope?: import("csstype").Property.AnchorScope | undefined;
     animationComposition?: import("csstype").Property.AnimationComposition | undefined;
     animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
     animationDirection?: import("csstype").Property.AnimationDirection | undefined;
@@ -33,17 +36,14 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     backgroundPositionY?: import("csstype").Property.BackgroundPositionY<string | number> | undefined;
     backgroundRepeat?: import("csstype").Property.BackgroundRepeat | undefined;
     backgroundSize?: import("csstype").Property.BackgroundSize<string | number> | undefined;
-    blockOverflow?: import("csstype").Property.BlockOverflow | undefined;
+    baselineShift?: import("csstype").Property.BaselineShift<string | number> | undefined;
     blockSize?: import("csstype").Property.BlockSize<string | number> | undefined;
-    borderBlockColor?: import("csstype").Property.BorderBlockColor | undefined;
     borderBlockEndColor?: import("csstype").Property.BorderBlockEndColor | undefined;
     borderBlockEndStyle?: import("csstype").Property.BorderBlockEndStyle | undefined;
     borderBlockEndWidth?: import("csstype").Property.BorderBlockEndWidth<string | number> | undefined;
     borderBlockStartColor?: import("csstype").Property.BorderBlockStartColor | undefined;
     borderBlockStartStyle?: import("csstype").Property.BorderBlockStartStyle | undefined;
     borderBlockStartWidth?: import("csstype").Property.BorderBlockStartWidth<string | number> | undefined;
-    borderBlockStyle?: import("csstype").Property.BorderBlockStyle | undefined;
-    borderBlockWidth?: import("csstype").Property.BorderBlockWidth<string | number> | undefined;
     borderBottomColor?: import("csstype").Property.BorderBottomColor | undefined;
     borderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<string | number> | undefined;
     borderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<string | number> | undefined;
@@ -57,15 +57,12 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     borderImageSlice?: import("csstype").Property.BorderImageSlice | undefined;
     borderImageSource?: import("csstype").Property.BorderImageSource | undefined;
     borderImageWidth?: import("csstype").Property.BorderImageWidth<string | number> | undefined;
-    borderInlineColor?: import("csstype").Property.BorderInlineColor | undefined;
     borderInlineEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
     borderInlineEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
     borderInlineEndWidth?: import("csstype").Property.BorderInlineEndWidth<string | number> | undefined;
     borderInlineStartColor?: import("csstype").Property.BorderInlineStartColor | undefined;
     borderInlineStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
     borderInlineStartWidth?: import("csstype").Property.BorderInlineStartWidth<string | number> | undefined;
-    borderInlineStyle?: import("csstype").Property.BorderInlineStyle | undefined;
-    borderInlineWidth?: import("csstype").Property.BorderInlineWidth<string | number> | undefined;
     borderLeftColor?: import("csstype").Property.BorderLeftColor | undefined;
     borderLeftStyle?: import("csstype").Property.BorderLeftStyle | undefined;
     borderLeftWidth?: import("csstype").Property.BorderLeftWidth<string | number> | undefined;
@@ -92,8 +89,10 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     caretShape?: import("csstype").Property.CaretShape | undefined;
     clear?: import("csstype").Property.Clear | undefined;
     clipPath?: import("csstype").Property.ClipPath | undefined;
+    clipRule?: import("csstype").Property.ClipRule | undefined;
     color?: import("csstype").Property.Color | undefined;
     colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
+    colorInterpolationFilters?: import("csstype").Property.ColorInterpolationFilters | undefined;
     colorScheme?: import("csstype").Property.ColorScheme | undefined;
     columnCount?: import("csstype").Property.ColumnCount | undefined;
     columnFill?: import("csstype").Property.ColumnFill | undefined;
@@ -116,9 +115,17 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     counterReset?: import("csstype").Property.CounterReset | undefined;
     counterSet?: import("csstype").Property.CounterSet | undefined;
     cursor?: import("csstype").Property.Cursor | undefined;
+    cx?: import("csstype").Property.Cx<string | number> | undefined;
+    cy?: import("csstype").Property.Cy<string | number> | undefined;
+    d?: import("csstype").Property.D | undefined;
     direction?: import("csstype").Property.Direction | undefined;
     display?: import("csstype").Property.Display | undefined;
+    dominantBaseline?: import("csstype").Property.DominantBaseline | undefined;
     emptyCells?: import("csstype").Property.EmptyCells | undefined;
+    fieldSizing?: import("csstype").Property.FieldSizing | undefined;
+    fill?: import("csstype").Property.Fill | undefined;
+    fillOpacity?: import("csstype").Property.FillOpacity | undefined;
+    fillRule?: import("csstype").Property.FillRule | undefined;
     filter?: import("csstype").Property.Filter | undefined;
     flexBasis?: import("csstype").Property.FlexBasis<string | number> | undefined;
     flexDirection?: import("csstype").Property.FlexDirection | undefined;
@@ -126,6 +133,8 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     flexShrink?: import("csstype").Property.FlexShrink | undefined;
     flexWrap?: import("csstype").Property.FlexWrap | undefined;
     float?: import("csstype").Property.Float | undefined;
+    floodColor?: import("csstype").Property.FloodColor | undefined;
+    floodOpacity?: import("csstype").Property.FloodOpacity | undefined;
     fontFamily?: import("csstype").Property.FontFamily | undefined;
     fontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
     fontKerning?: import("csstype").Property.FontKerning | undefined;
@@ -135,7 +144,6 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     fontSize?: import("csstype").Property.FontSize<string | number> | undefined;
     fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | undefined;
     fontSmooth?: import("csstype").Property.FontSmooth<string | number> | undefined;
-    fontStretch?: import("csstype").Property.FontStretch | undefined;
     fontStyle?: import("csstype").Property.FontStyle | undefined;
     fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
     fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
@@ -152,6 +160,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     fontVariantPosition?: import("csstype").Property.FontVariantPosition | undefined;
     fontVariationSettings?: import("csstype").Property.FontVariationSettings | undefined;
     fontWeight?: import("csstype").Property.FontWeight | undefined;
+    fontWidth?: import("csstype").Property.FontWidth | undefined;
     forcedColorAdjust?: import("csstype").Property.ForcedColorAdjust | undefined;
     gridAutoColumns?: import("csstype").Property.GridAutoColumns<string | number> | undefined;
     gridAutoFlow?: import("csstype").Property.GridAutoFlow | undefined;
@@ -172,12 +181,13 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     imageRendering?: import("csstype").Property.ImageRendering | undefined;
     imageResolution?: import("csstype").Property.ImageResolution | undefined;
     initialLetter?: import("csstype").Property.InitialLetter | undefined;
+    initialLetterAlign?: import("csstype").Property.InitialLetterAlign | undefined;
     inlineSize?: import("csstype").Property.InlineSize<string | number> | undefined;
-    inputSecurity?: import("csstype").Property.InputSecurity | undefined;
     insetBlockEnd?: import("csstype").Property.InsetBlockEnd<string | number> | undefined;
     insetBlockStart?: import("csstype").Property.InsetBlockStart<string | number> | undefined;
     insetInlineEnd?: import("csstype").Property.InsetInlineEnd<string | number> | undefined;
     insetInlineStart?: import("csstype").Property.InsetInlineStart<string | number> | undefined;
+    interpolateSize?: import("csstype").Property.InterpolateSize | undefined;
     isolation?: import("csstype").Property.Isolation | undefined;
     justifyContent?: import("csstype").Property.JustifyContent | undefined;
     justifyItems?: import("csstype").Property.JustifyItems | undefined;
@@ -185,6 +195,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     justifyTracks?: import("csstype").Property.JustifyTracks | undefined;
     left?: import("csstype").Property.Left<string | number> | undefined;
     letterSpacing?: import("csstype").Property.LetterSpacing<string | number> | undefined;
+    lightingColor?: import("csstype").Property.LightingColor | undefined;
     lineBreak?: import("csstype").Property.LineBreak | undefined;
     lineHeight?: import("csstype").Property.LineHeight<string | number> | undefined;
     lineHeightStep?: import("csstype").Property.LineHeightStep<string | number> | undefined;
@@ -200,6 +211,10 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     marginRight?: import("csstype").Property.MarginRight<string | number> | undefined;
     marginTop?: import("csstype").Property.MarginTop<string | number> | undefined;
     marginTrim?: import("csstype").Property.MarginTrim | undefined;
+    marker?: import("csstype").Property.Marker | undefined;
+    markerEnd?: import("csstype").Property.MarkerEnd | undefined;
+    markerMid?: import("csstype").Property.MarkerMid | undefined;
+    markerStart?: import("csstype").Property.MarkerStart | undefined;
     maskBorderMode?: import("csstype").Property.MaskBorderMode | undefined;
     maskBorderOutset?: import("csstype").Property.MaskBorderOutset<string | number> | undefined;
     maskBorderRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
@@ -234,6 +249,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     motionRotation?: import("csstype").Property.OffsetRotate | undefined;
     objectFit?: import("csstype").Property.ObjectFit | undefined;
     objectPosition?: import("csstype").Property.ObjectPosition<string | number> | undefined;
+    objectViewBox?: import("csstype").Property.ObjectViewBox | undefined;
     offsetAnchor?: import("csstype").Property.OffsetAnchor<string | number> | undefined;
     offsetDistance?: import("csstype").Property.OffsetDistance<string | number> | undefined;
     offsetPath?: import("csstype").Property.OffsetPath | undefined;
@@ -269,25 +285,32 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     paddingRight?: import("csstype").Property.PaddingRight<string | number> | undefined;
     paddingTop?: import("csstype").Property.PaddingTop<string | number> | undefined;
     page?: import("csstype").Property.Page | undefined;
-    pageBreakAfter?: import("csstype").Property.PageBreakAfter | undefined;
-    pageBreakBefore?: import("csstype").Property.PageBreakBefore | undefined;
-    pageBreakInside?: import("csstype").Property.PageBreakInside | undefined;
     paintOrder?: import("csstype").Property.PaintOrder | undefined;
     perspective?: import("csstype").Property.Perspective<string | number> | undefined;
     perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
     pointerEvents?: import("csstype").Property.PointerEvents | undefined;
     position?: import("csstype").Property.Position | undefined;
+    positionAnchor?: import("csstype").Property.PositionAnchor | undefined;
+    positionArea?: import("csstype").Property.PositionArea | undefined;
+    positionTryFallbacks?: import("csstype").Property.PositionTryFallbacks | undefined;
+    positionTryOrder?: import("csstype").Property.PositionTryOrder | undefined;
+    positionVisibility?: import("csstype").Property.PositionVisibility | undefined;
     printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
     quotes?: import("csstype").Property.Quotes | undefined;
+    r?: import("csstype").Property.R<string | number> | undefined;
     resize?: import("csstype").Property.Resize | undefined;
     right?: import("csstype").Property.Right<string | number> | undefined;
     rotate?: import("csstype").Property.Rotate | undefined;
     rowGap?: import("csstype").Property.RowGap<string | number> | undefined;
     rubyAlign?: import("csstype").Property.RubyAlign | undefined;
     rubyMerge?: import("csstype").Property.RubyMerge | undefined;
+    rubyOverhang?: import("csstype").Property.RubyOverhang | undefined;
     rubyPosition?: import("csstype").Property.RubyPosition | undefined;
+    rx?: import("csstype").Property.Rx<string | number> | undefined;
+    ry?: import("csstype").Property.Ry<string | number> | undefined;
     scale?: import("csstype").Property.Scale | undefined;
     scrollBehavior?: import("csstype").Property.ScrollBehavior | undefined;
+    scrollInitialTarget?: import("csstype").Property.ScrollInitialTarget | undefined;
     scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<string | number> | undefined;
     scrollMarginBlockStart?: import("csstype").Property.ScrollMarginBlockStart<string | number> | undefined;
     scrollMarginBottom?: import("csstype").Property.ScrollMarginBottom<string | number> | undefined;
@@ -319,10 +342,28 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     shapeImageThreshold?: import("csstype").Property.ShapeImageThreshold | undefined;
     shapeMargin?: import("csstype").Property.ShapeMargin<string | number> | undefined;
     shapeOutside?: import("csstype").Property.ShapeOutside | undefined;
+    shapeRendering?: import("csstype").Property.ShapeRendering | undefined;
+    speakAs?: import("csstype").Property.SpeakAs | undefined;
+    stopColor?: import("csstype").Property.StopColor | undefined;
+    stopOpacity?: import("csstype").Property.StopOpacity | undefined;
+    stroke?: import("csstype").Property.Stroke | undefined;
+    strokeColor?: import("csstype").Property.StrokeColor | undefined;
+    strokeDasharray?: import("csstype").Property.StrokeDasharray<string | number> | undefined;
+    strokeDashoffset?: import("csstype").Property.StrokeDashoffset<string | number> | undefined;
+    strokeLinecap?: import("csstype").Property.StrokeLinecap | undefined;
+    strokeLinejoin?: import("csstype").Property.StrokeLinejoin | undefined;
+    strokeMiterlimit?: import("csstype").Property.StrokeMiterlimit | undefined;
+    strokeOpacity?: import("csstype").Property.StrokeOpacity | undefined;
+    strokeWidth?: import("csstype").Property.StrokeWidth<string | number> | undefined;
     tabSize?: import("csstype").Property.TabSize<string | number> | undefined;
     tableLayout?: import("csstype").Property.TableLayout | undefined;
     textAlign?: import("csstype").Property.TextAlign | undefined;
     textAlignLast?: import("csstype").Property.TextAlignLast | undefined;
+    textAnchor?: import("csstype").Property.TextAnchor | undefined;
+    textAutospace?: import("csstype").Property.TextAutospace | undefined;
+    textBox?: import("csstype").Property.TextBox | undefined;
+    textBoxEdge?: import("csstype").Property.TextBoxEdge | undefined;
+    textBoxTrim?: import("csstype").Property.TextBoxTrim | undefined;
     textCombineUpright?: import("csstype").Property.TextCombineUpright | undefined;
     textDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
     textDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
@@ -340,10 +381,12 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     textRendering?: import("csstype").Property.TextRendering | undefined;
     textShadow?: import("csstype").Property.TextShadow | undefined;
     textSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
+    textSpacingTrim?: import("csstype").Property.TextSpacingTrim | undefined;
     textTransform?: import("csstype").Property.TextTransform | undefined;
     textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<string | number> | undefined;
     textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
-    textWrap?: import("csstype").Property.TextWrap | undefined;
+    textWrapMode?: import("csstype").Property.TextWrapMode | undefined;
+    textWrapStyle?: import("csstype").Property.TextWrapStyle | undefined;
     timelineScope?: import("csstype").Property.TimelineScope | undefined;
     top?: import("csstype").Property.Top<string | number> | undefined;
     touchAction?: import("csstype").Property.TouchAction | undefined;
@@ -359,15 +402,16 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     translate?: import("csstype").Property.Translate<string | number> | undefined;
     unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
     userSelect?: import("csstype").Property.UserSelect | undefined;
+    vectorEffect?: import("csstype").Property.VectorEffect | undefined;
     verticalAlign?: import("csstype").Property.VerticalAlign<string | number> | undefined;
     viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
     viewTimelineInset?: import("csstype").Property.ViewTimelineInset<string | number> | undefined;
     viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
+    viewTransitionClass?: import("csstype").Property.ViewTransitionClass | undefined;
     viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
     visibility?: import("csstype").Property.Visibility | undefined;
     whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
     whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
-    whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
     widows?: import("csstype").Property.Widows | undefined;
     width?: import("csstype").Property.Width<string | number> | undefined;
     willChange?: import("csstype").Property.WillChange | undefined;
@@ -375,6 +419,8 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     wordSpacing?: import("csstype").Property.WordSpacing<string | number> | undefined;
     wordWrap?: import("csstype").Property.WordWrap | undefined;
     writingMode?: import("csstype").Property.WritingMode | undefined;
+    x?: import("csstype").Property.X<string | number> | undefined;
+    y?: import("csstype").Property.Y<string | number> | undefined;
     zIndex?: import("csstype").Property.ZIndex | undefined;
     zoom?: import("csstype").Property.Zoom | undefined;
     all?: import("csstype").Property.All | undefined;
@@ -384,14 +430,20 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     backgroundPosition?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
     border?: import("csstype").Property.Border<string | number> | undefined;
     borderBlock?: import("csstype").Property.BorderBlock<string | number> | undefined;
+    borderBlockColor?: import("csstype").Property.BorderBlockColor | undefined;
     borderBlockEnd?: import("csstype").Property.BorderBlockEnd<string | number> | undefined;
     borderBlockStart?: import("csstype").Property.BorderBlockStart<string | number> | undefined;
+    borderBlockStyle?: import("csstype").Property.BorderBlockStyle | undefined;
+    borderBlockWidth?: import("csstype").Property.BorderBlockWidth<string | number> | undefined;
     borderBottom?: import("csstype").Property.BorderBottom<string | number> | undefined;
     borderColor?: import("csstype").Property.BorderColor | undefined;
     borderImage?: import("csstype").Property.BorderImage | undefined;
     borderInline?: import("csstype").Property.BorderInline<string | number> | undefined;
+    borderInlineColor?: import("csstype").Property.BorderInlineColor | undefined;
     borderInlineEnd?: import("csstype").Property.BorderInlineEnd<string | number> | undefined;
     borderInlineStart?: import("csstype").Property.BorderInlineStart<string | number> | undefined;
+    borderInlineStyle?: import("csstype").Property.BorderInlineStyle | undefined;
+    borderInlineWidth?: import("csstype").Property.BorderInlineWidth<string | number> | undefined;
     borderLeft?: import("csstype").Property.BorderLeft<string | number> | undefined;
     borderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
     borderRight?: import("csstype").Property.BorderRight<string | number> | undefined;
@@ -433,6 +485,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     placeContent?: import("csstype").Property.PlaceContent | undefined;
     placeItems?: import("csstype").Property.PlaceItems | undefined;
     placeSelf?: import("csstype").Property.PlaceSelf | undefined;
+    positionTry?: import("csstype").Property.PositionTry | undefined;
     scrollMargin?: import("csstype").Property.ScrollMargin<string | number> | undefined;
     scrollMarginBlock?: import("csstype").Property.ScrollMarginBlock<string | number> | undefined;
     scrollMarginInline?: import("csstype").Property.ScrollMarginInline<string | number> | undefined;
@@ -443,6 +496,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     scrollTimeline?: import("csstype").Property.ScrollTimeline | undefined;
     textDecoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
     textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
+    textWrap?: import("csstype").Property.TextWrap | undefined;
     transition?: import("csstype").Property.Transition<string & {}> | undefined;
     viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
     MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
@@ -454,6 +508,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
     MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
     MozAppearance?: import("csstype").Property.MozAppearance | undefined;
+    MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
     MozBinding?: import("csstype").Property.MozBinding | undefined;
     MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
     MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
@@ -465,8 +520,6 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozBorderStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
     MozBorderTopColors?: import("csstype").Property.MozBorderTopColors | undefined;
     MozBoxSizing?: import("csstype").Property.BoxSizing | undefined;
-    MozColumnCount?: import("csstype").Property.ColumnCount | undefined;
-    MozColumnFill?: import("csstype").Property.ColumnFill | undefined;
     MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
     MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
     MozColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<string | number> | undefined;
@@ -475,7 +528,6 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozFontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
     MozFontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
     MozHyphens?: import("csstype").Property.Hyphens | undefined;
-    MozImageRegion?: import("csstype").Property.MozImageRegion | undefined;
     MozMarginEnd?: import("csstype").Property.MarginInlineEnd<string | number> | undefined;
     MozMarginStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
     MozOrient?: import("csstype").Property.MozOrient | undefined;
@@ -486,11 +538,15 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
     MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<string | number> | undefined;
     MozPaddingStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
+    MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
+    MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
     MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
     MozTabSize?: import("csstype").Property.TabSize<string | number> | undefined;
     MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
     MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
-    MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
+    MozTransform?: import("csstype").Property.Transform | undefined;
+    MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
+    MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
     MozUserModify?: import("csstype").Property.MozUserModify | undefined;
     MozUserSelect?: import("csstype").Property.UserSelect | undefined;
     MozWindowDragging?: import("csstype").Property.MozWindowDragging | undefined;
@@ -609,6 +665,8 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     WebkitJustifyContent?: import("csstype").Property.JustifyContent | undefined;
     WebkitLineBreak?: import("csstype").Property.LineBreak | undefined;
     WebkitLineClamp?: import("csstype").Property.WebkitLineClamp | undefined;
+    WebkitLogicalHeight?: import("csstype").Property.BlockSize<string | number> | undefined;
+    WebkitLogicalWidth?: import("csstype").Property.InlineSize<string | number> | undefined;
     WebkitMarginEnd?: import("csstype").Property.MarginInlineEnd<string | number> | undefined;
     WebkitMarginStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
     WebkitMaskAttachment?: import("csstype").Property.WebkitMaskAttachment | undefined;
@@ -663,13 +721,14 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     WebkitTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
     WebkitTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
     WebkitUserModify?: import("csstype").Property.WebkitUserModify | undefined;
-    WebkitUserSelect?: import("csstype").Property.UserSelect | undefined;
+    WebkitUserSelect?: import("csstype").Property.WebkitUserSelect | undefined;
     WebkitWritingMode?: import("csstype").Property.WritingMode | undefined;
     MozAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
     MozBorderImage?: import("csstype").Property.BorderImage | undefined;
     MozColumnRule?: import("csstype").Property.ColumnRule<string | number> | undefined;
     MozColumns?: import("csstype").Property.Columns<string | number> | undefined;
     MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
+    MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
     msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
     msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
     msFlex?: import("csstype").Property.Flex<string | number> | undefined;
@@ -690,7 +749,6 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     WebkitTextEmphasis?: import("csstype").Property.TextEmphasis | undefined;
     WebkitTextStroke?: import("csstype").Property.WebkitTextStroke<string | number> | undefined;
     WebkitTransition?: import("csstype").Property.Transition<string & {}> | undefined;
-    azimuth?: import("csstype").Property.Azimuth | undefined;
     boxAlign?: import("csstype").Property.BoxAlign | undefined;
     boxDirection?: import("csstype").Property.BoxDirection | undefined;
     boxFlex?: import("csstype").Property.BoxFlex | undefined;
@@ -700,16 +758,22 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     boxOrient?: import("csstype").Property.BoxOrient | undefined;
     boxPack?: import("csstype").Property.BoxPack | undefined;
     clip?: import("csstype").Property.Clip | undefined;
+    fontStretch?: import("csstype").Property.FontStretch | undefined;
     gridColumnGap?: import("csstype").Property.GridColumnGap<string | number> | undefined;
     gridGap?: import("csstype").Property.GridGap<string | number> | undefined;
     gridRowGap?: import("csstype").Property.GridRowGap<string | number> | undefined;
     imeMode?: import("csstype").Property.ImeMode | undefined;
+    insetArea?: import("csstype").Property.PositionArea | undefined;
     offsetBlock?: import("csstype").Property.InsetBlock<string | number> | undefined;
     offsetBlockEnd?: import("csstype").Property.InsetBlockEnd<string | number> | undefined;
     offsetBlockStart?: import("csstype").Property.InsetBlockStart<string | number> | undefined;
     offsetInline?: import("csstype").Property.InsetInline<string | number> | undefined;
     offsetInlineEnd?: import("csstype").Property.InsetInlineEnd<string | number> | undefined;
     offsetInlineStart?: import("csstype").Property.InsetInlineStart<string | number> | undefined;
+    pageBreakAfter?: import("csstype").Property.PageBreakAfter | undefined;
+    pageBreakBefore?: import("csstype").Property.PageBreakBefore | undefined;
+    pageBreakInside?: import("csstype").Property.PageBreakInside | undefined;
+    positionTryOptions?: import("csstype").Property.PositionTryFallbacks | undefined;
     scrollSnapCoordinate?: import("csstype").Property.ScrollSnapCoordinate<string | number> | undefined;
     scrollSnapDestination?: import("csstype").Property.ScrollSnapDestination<string | number> | undefined;
     scrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
@@ -727,9 +791,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
     KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
     KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
-    MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
     MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
-    MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
     MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
     MozBackgroundSize?: import("csstype").Property.BackgroundSize<string | number> | undefined;
     MozBorderRadius?: import("csstype").Property.BorderRadius<string | number> | undefined;
@@ -744,6 +806,8 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozBoxOrient?: import("csstype").Property.BoxOrient | undefined;
     MozBoxPack?: import("csstype").Property.BoxPack | undefined;
     MozBoxShadow?: import("csstype").Property.BoxShadow | undefined;
+    MozColumnCount?: import("csstype").Property.ColumnCount | undefined;
+    MozColumnFill?: import("csstype").Property.ColumnFill | undefined;
     MozFloatEdge?: import("csstype").Property.MozFloatEdge | undefined;
     MozForceBrokenImageIcon?: import("csstype").Property.MozForceBrokenImageIcon | undefined;
     MozOpacity?: import("csstype").Property.Opacity | undefined;
@@ -751,20 +815,15 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
     MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
     MozOutlineWidth?: import("csstype").Property.OutlineWidth<string | number> | undefined;
-    MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
-    MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
     MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
     MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
     MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
     MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
-    MozTransform?: import("csstype").Property.Transform | undefined;
-    MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
-    MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
-    MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
     MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
     MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
     MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
     MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
+    MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
     MozUserInput?: import("csstype").Property.MozUserInput | undefined;
     msImeMode?: import("csstype").Property.ImeMode | undefined;
     OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
@@ -797,34 +856,7 @@ export declare const resolveHeaderCellStyle: (column: HeaderColumn<TableRowData>
     WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
     WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
     WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
-    alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
-    baselineShift?: import("csstype").Property.BaselineShift<string | number> | undefined;
-    clipRule?: import("csstype").Property.ClipRule | undefined;
     colorInterpolation?: import("csstype").Property.ColorInterpolation | undefined;
     colorRendering?: import("csstype").Property.ColorRendering | undefined;
-    dominantBaseline?: import("csstype").Property.DominantBaseline | undefined;
-    fill?: import("csstype").Property.Fill | undefined;
-    fillOpacity?: import("csstype").Property.FillOpacity | undefined;
-    fillRule?: import("csstype").Property.FillRule | undefined;
-    floodColor?: import("csstype").Property.FloodColor | undefined;
-    floodOpacity?: import("csstype").Property.FloodOpacity | undefined;
     glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
-    lightingColor?: import("csstype").Property.LightingColor | undefined;
-    marker?: import("csstype").Property.Marker | undefined;
-    markerEnd?: import("csstype").Property.MarkerEnd | undefined;
-    markerMid?: import("csstype").Property.MarkerMid | undefined;
-    markerStart?: import("csstype").Property.MarkerStart | undefined;
-    shapeRendering?: import("csstype").Property.ShapeRendering | undefined;
-    stopColor?: import("csstype").Property.StopColor | undefined;
-    stopOpacity?: import("csstype").Property.StopOpacity | undefined;
-    stroke?: import("csstype").Property.Stroke | undefined;
-    strokeDasharray?: import("csstype").Property.StrokeDasharray<string | number> | undefined;
-    strokeDashoffset?: import("csstype").Property.StrokeDashoffset<string | number> | undefined;
-    strokeLinecap?: import("csstype").Property.StrokeLinecap | undefined;
-    strokeLinejoin?: import("csstype").Property.StrokeLinejoin | undefined;
-    strokeMiterlimit?: import("csstype").Property.StrokeMiterlimit | undefined;
-    strokeOpacity?: import("csstype").Property.StrokeOpacity | undefined;
-    strokeWidth?: import("csstype").Property.StrokeWidth<string | number> | undefined;
-    textAnchor?: import("csstype").Property.TextAnchor | undefined;
-    vectorEffect?: import("csstype").Property.VectorEffect | undefined;
 };

package/components/timepicker/TimePicker.d.ts

@@ -29,6 +29,12 @@ export type TimePickerProps = {
      * @default false
      */
     dropdown?: boolean;
+    /**
+     * Configures IMask overwrite behavior for manual input editing.
+     *
+     * @default 'shift'
+     */
+    maskOverwrite?: boolean | 'shift';
     /**
      * Defines the minute interval for time controls and dropdown values.
      * Invalid values fallback to 15.