@economic/taco 2.55.0-settings.0 → 2.55.0-settings.1

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js

@@ -191,7 +191,6 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-align": isGroup ? 'center' : align,
     "data-cell-id": id,
     "data-cell-pinned": isPinned ? isPinned : undefined,
-    "data-taco": isGroup ? 'grouped-column-header' : 'column-header',
     style: style,
     ref: setRef
   }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {

package/dist/esm/packages/taco/src/primitives/Table/Core/components/Header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n    Header as ReactTableHeader,\n    ColumnPinningPosition as ReactTableColumnPinningPosition,\n    flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n    TableColumnAlignment,\n    TableColumnMenu,\n    TableColumnSortDirection,\n    TableColumnWidth,\n    TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\ninterface HeaderContentProps {\n    children: React.ReactNode;\n    tooltip?: React.ReactNode;\n    isInternalColumnHeader: boolean;\n}\n\nconst HeaderContent = ({ children, tooltip, isInternalColumnHeader }: HeaderContentProps) => {\n    if (isInternalColumnHeader || typeof children !== 'string') {\n        return <>{children}</>;\n    }\n\n    return (\n        <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n            <span className=\"truncate\">{children}</span>\n        </Tooltip>\n    );\n};\n\nexport type HeaderProps<TType = unknown> = {\n    header: ReactTableHeader<TType, unknown>;\n    scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, scrollToIndex } = props;\n\n    if (header.column.getIsGrouped()) {\n        return null;\n    }\n\n    const { table } = header.getContext();\n\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n    const isGroup = !!header.subHeaders.length;\n    const isPinned = getIsPinned(header);\n\n    const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n    const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n    const canMeasureSize = !!table.getRowModel().rows.length;\n    const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n    const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n    const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n    const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n    const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const memoedProps: MemoedHeaderProps = {\n        align: columnMeta.align,\n        canFilter,\n        canHide,\n        canGoto,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        className: cn('group/header', columnMeta.headerClassName),\n        children: flexRender(header.column.columnDef.header, header.getContext()),\n        colSpan: header.colSpan,\n        customMenu: columnMeta.menu,\n        defaultWidth: columnMeta.defaultWidth,\n        hasMenu,\n        id: header.id,\n        isFiltered: header.column.getIsFiltered(),\n        index: header.index,\n        isGroup,\n        isPinned,\n        isPlaceholder: header.isPlaceholder,\n        offset: header.column.getStart(isPinned),\n        scrollToIndex,\n        setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n        setColumnSizing: table.setColumnSizing,\n        tooltip: columnMeta.tooltip,\n        width: table.getState().columnSizing[header.id],\n    };\n\n    if (header.isPlaceholder) {\n        const nextHeader = header.headerGroup.headers[header.index + 1];\n        memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n            'after:!content-none': nextHeader?.isPlaceholder,\n        });\n    }\n\n    if (canFilter) {\n        memoedProps.onFilter = () => {\n            header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n        };\n    }\n\n    if (canGoto) {\n        memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n            query: string\n        ) => Promise<number>;\n    }\n\n    if (canHide) {\n        memoedProps.onHide = header.column.getToggleVisibilityHandler();\n    }\n\n    if (canPin) {\n        memoedProps.onPin = (index: number | undefined) => {\n            // TODO: this can probably be moved to a feature hook\n            table.setColumnPinning(pinningState => {\n                return {\n                    ...pinningState,\n                    left:\n                        index === undefined\n                            ? unfreezeAllExternalColumns(pinningState.left)\n                            : freezeUptoExternalColumn(\n                                  index,\n                                  table.getAllLeafColumns().map(column => column.id)\n                              ),\n                };\n            });\n        };\n    }\n\n    if (canResize) {\n        memoedProps.isResizing = header.column.getIsResizing();\n        memoedProps.onResize = header.getResizeHandler();\n        memoedProps.resetSize = header.column.resetSize;\n    }\n\n    if (canSort) {\n        const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n            if (sortDirection === false) {\n                header.column.clearSorting();\n            } else {\n                header.column.toggleSorting(sortDirection === 'desc');\n            }\n        };\n\n        memoedProps.onSort = header.column.getToggleSortingHandler();\n        memoedProps.onSortToggle = handleSortToggle;\n        memoedProps.sortDirection = header.column.getIsSorted();\n    }\n\n    return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n    align?: TableColumnAlignment;\n    canFilter: boolean;\n    canHide: boolean;\n    canGoto: boolean;\n    canMeasureSize: boolean;\n    canPin: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    children: JSX.Element | React.ReactNode;\n    className?: string;\n    colSpan: number;\n    customMenu?: TableColumnMenu;\n    defaultWidth?: TableColumnWidth;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFiltered: boolean;\n    isGroup: boolean;\n    isPinned?: ReactTableColumnPinningPosition;\n    isPlaceholder: boolean;\n    isResizing?: boolean;\n    offset?: number;\n    onFilter?: () => void;\n    onGoto?: (query: string) => Promise<number>;\n    onHide?: (event: unknown) => void;\n    onPin?: (index: number | undefined) => void;\n    onResize?: (event: unknown) => void;\n    onSort?: (event: unknown) => void;\n    onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n    resetSize?: () => void;\n    scrollToIndex: (index: number) => void;\n    setRowActiveIndex: (index: number) => void;\n    setColumnSizing: any;\n    sortDirection?: TableColumnSortDirection | false;\n    tooltip?: string;\n    width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n    const {\n        align,\n        canFilter,\n        canGoto,\n        canHide,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        children,\n        className,\n        colSpan,\n        customMenu,\n        defaultWidth,\n        hasMenu,\n        id,\n        index,\n        isFiltered,\n        isGroup,\n        isPinned,\n        isPlaceholder,\n        isResizing,\n        offset,\n        onFilter: handleFilter,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onPin: handlePin,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        resetSize: handleResetSize,\n        scrollToIndex,\n        setRowActiveIndex,\n        setColumnSizing,\n        sortDirection,\n        tooltip,\n        width,\n    } = props;\n    const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n    // save column width if none is set\n    useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);\n\n    // feature specific styles\n    const style: React.CSSProperties = {};\n\n    // column groups often span multiple columns\n    if (colSpan > 1) {\n        style.gridColumn = `span ${colSpan}`;\n    }\n\n    // pinned columns should be offset from either the left or right\n    if (isPinned) {\n        style[isPinned] = `${offset}px`;\n    }\n\n    return (\n        <th\n            {...getSortAttributes(canSort, handleSort, sortDirection)}\n            className={className}\n            data-cell-align={isGroup ? 'center' : align}\n            data-cell-id={id}\n            data-cell-pinned={isPinned ? isPinned : undefined}\n            data-taco={isGroup ? 'grouped-column-header' : 'column-header'}\n            style={style}\n            ref={setRef}>\n            {!isPlaceholder ? (\n                <HeaderContent children={children} tooltip={tooltip} isInternalColumnHeader={!!isInternalColumn(id)} />\n            ) : null}\n            {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <HeaderMenu\n                    canFilter={canFilter}\n                    canGoto={canGoto}\n                    canHide={canHide}\n                    canPin={canPin}\n                    canSort={canSort}\n                    className={cn({\n                        'ml-auto': align !== 'right',\n                        'ml-0': align === 'right',\n                    })}\n                    customMenu={customMenu}\n                    index={index}\n                    isFiltered={isFiltered}\n                    onFilter={handleFilter}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    onPin={handlePin}\n                    onSortToggle={handleSortToggle}\n                    scrollToIndex={scrollToIndex}\n                    setRowActiveIndex={setRowActiveIndex}\n                    sortDirection={sortDirection}\n                    columnId={id}\n                />\n            ) : null}\n            {canResize ? (\n                <Resizer\n                    headerRef={ref}\n                    id={id}\n                    isResizing={isResizing as boolean}\n                    onResize={handleResize as (event: unknown) => void}\n                    onResetSize={handleResetSize as () => void}\n                    setColumnSizing={setColumnSizing}\n                    width={width}\n                />\n            ) : null}\n        </th>\n    );\n});\n"],"names":["HeaderContent","children","tooltip","isInternalColumnHeader","React","Tooltip","title","String","placement","className","Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","cn","headerClassName","flexRender","colSpan","customMenu","defaultWidth","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","resetSize","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","handleResetSize","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","SortIndicator","direction","HeaderMenu","columnId","Resizer","headerRef","onResetSize"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/primitives/Table/Core/components/Header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n    Header as ReactTableHeader,\n    ColumnPinningPosition as ReactTableColumnPinningPosition,\n    flexRender,\n} from '@tanstack/react-table';\nimport cn from 'clsx';\nimport { freezeUptoExternalColumn, isInternalColumn, unfreezeAllExternalColumns } from '../../../useTableManager/util/columns';\nimport { Tooltip } from '../../../../../components/Tooltip/Tooltip';\nimport { SortIndicator, getSortAttributes } from './components/SortIndicator';\nimport {\n    TableColumnAlignment,\n    TableColumnMenu,\n    TableColumnSortDirection,\n    TableColumnWidth,\n    TableFilterComparator,\n} from '../../../types';\nimport { Resizer } from './components/Resizer';\nimport { HeaderMenu } from './components/Menu';\nimport { getIsPinned, useSetInitialColumnSizing } from './util';\n\ninterface HeaderContentProps {\n    children: React.ReactNode;\n    tooltip?: React.ReactNode;\n    isInternalColumnHeader: boolean;\n}\n\nconst HeaderContent = ({ children, tooltip, isInternalColumnHeader }: HeaderContentProps) => {\n    if (isInternalColumnHeader || typeof children !== 'string') {\n        return <>{children}</>;\n    }\n\n    return (\n        <Tooltip title={String(tooltip ?? children)} placement=\"top\">\n            <span className=\"truncate\">{children}</span>\n        </Tooltip>\n    );\n};\n\nexport type HeaderProps<TType = unknown> = {\n    header: ReactTableHeader<TType, unknown>;\n    scrollToIndex: (index: number) => void;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, scrollToIndex } = props;\n\n    if (header.column.getIsGrouped()) {\n        return null;\n    }\n\n    const { table } = header.getContext();\n\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (header.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n\n    const isGroup = !!header.subHeaders.length;\n    const isPinned = getIsPinned(header);\n\n    const canFilter = !header.isPlaceholder && header.column.getCanFilter() && !!table.options.enableColumnFilters;\n    const canHide = !header.isPlaceholder && !isGroup && header.column.getCanHide();\n    const canMeasureSize = !!table.getRowModel().rows.length;\n    const canPin = !header.isPlaceholder && !isGroup && header.column.getCanPin();\n    const canResize = !header.isPlaceholder && !isGroup && header.column.getCanResize();\n    const canSort = !header.isPlaceholder && !isGroup && header.column.getCanSort();\n    const canGoto = canSort && !header.isPlaceholder && !isGroup && tableMeta.rowGoto.isEnabled && !!header.column.getIsSorted();\n\n    const hasMenu = !isInternalColumn(header.id) && (canHide || canGoto || canPin || canSort || !!columnMeta.menu);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const memoedProps: MemoedHeaderProps = {\n        align: columnMeta.align,\n        canFilter,\n        canHide,\n        canGoto,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        className: cn('group/header', columnMeta.headerClassName),\n        children: flexRender(header.column.columnDef.header, header.getContext()),\n        colSpan: header.colSpan,\n        customMenu: columnMeta.menu,\n        defaultWidth: columnMeta.defaultWidth,\n        hasMenu,\n        id: header.id,\n        isFiltered: header.column.getIsFiltered(),\n        index: header.index,\n        isGroup,\n        isPinned,\n        isPlaceholder: header.isPlaceholder,\n        offset: header.column.getStart(isPinned),\n        scrollToIndex,\n        setRowActiveIndex: tableMeta.rowActive.setRowActiveIndex,\n        setColumnSizing: table.setColumnSizing,\n        tooltip: columnMeta.tooltip,\n        width: table.getState().columnSizing[header.id],\n    };\n\n    if (header.isPlaceholder) {\n        const nextHeader = header.headerGroup.headers[header.index + 1];\n        memoedProps.className = cn('!bg-white before:!content-none', memoedProps.className, {\n            'after:!content-none': nextHeader?.isPlaceholder,\n        });\n    }\n\n    if (canFilter) {\n        memoedProps.onFilter = () => {\n            header.column.setFilterValue({ comparator: TableFilterComparator.Contains });\n        };\n    }\n\n    if (canGoto) {\n        memoedProps.onGoto = ((query: string) => tableMeta.rowGoto.handleGoto?.(header.id, query, sorting, filters, search)) as (\n            query: string\n        ) => Promise<number>;\n    }\n\n    if (canHide) {\n        memoedProps.onHide = header.column.getToggleVisibilityHandler();\n    }\n\n    if (canPin) {\n        memoedProps.onPin = (index: number | undefined) => {\n            // TODO: this can probably be moved to a feature hook\n            table.setColumnPinning(pinningState => {\n                return {\n                    ...pinningState,\n                    left:\n                        index === undefined\n                            ? unfreezeAllExternalColumns(pinningState.left)\n                            : freezeUptoExternalColumn(\n                                  index,\n                                  table.getAllLeafColumns().map(column => column.id)\n                              ),\n                };\n            });\n        };\n    }\n\n    if (canResize) {\n        memoedProps.isResizing = header.column.getIsResizing();\n        memoedProps.onResize = header.getResizeHandler();\n        memoedProps.resetSize = header.column.resetSize;\n    }\n\n    if (canSort) {\n        const handleSortToggle = (sortDirection: TableColumnSortDirection | false) => {\n            if (sortDirection === false) {\n                header.column.clearSorting();\n            } else {\n                header.column.toggleSorting(sortDirection === 'desc');\n            }\n        };\n\n        memoedProps.onSort = header.column.getToggleSortingHandler();\n        memoedProps.onSortToggle = handleSortToggle;\n        memoedProps.sortDirection = header.column.getIsSorted();\n    }\n\n    return <MemoedHeader key={header.id} {...memoedProps} />;\n}\n\nexport type MemoedHeaderProps = {\n    align?: TableColumnAlignment;\n    canFilter: boolean;\n    canHide: boolean;\n    canGoto: boolean;\n    canMeasureSize: boolean;\n    canPin: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    children: JSX.Element | React.ReactNode;\n    className?: string;\n    colSpan: number;\n    customMenu?: TableColumnMenu;\n    defaultWidth?: TableColumnWidth;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFiltered: boolean;\n    isGroup: boolean;\n    isPinned?: ReactTableColumnPinningPosition;\n    isPlaceholder: boolean;\n    isResizing?: boolean;\n    offset?: number;\n    onFilter?: () => void;\n    onGoto?: (query: string) => Promise<number>;\n    onHide?: (event: unknown) => void;\n    onPin?: (index: number | undefined) => void;\n    onResize?: (event: unknown) => void;\n    onSort?: (event: unknown) => void;\n    onSortToggle?: (sortDirection: TableColumnSortDirection | false) => void;\n    resetSize?: () => void;\n    scrollToIndex: (index: number) => void;\n    setRowActiveIndex: (index: number) => void;\n    setColumnSizing: any;\n    sortDirection?: TableColumnSortDirection | false;\n    tooltip?: string;\n    width?: TableColumnWidth;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader(props: MemoedHeaderProps) {\n    const {\n        align,\n        canFilter,\n        canGoto,\n        canHide,\n        canMeasureSize,\n        canPin,\n        canResize,\n        canSort,\n        children,\n        className,\n        colSpan,\n        customMenu,\n        defaultWidth,\n        hasMenu,\n        id,\n        index,\n        isFiltered,\n        isGroup,\n        isPinned,\n        isPlaceholder,\n        isResizing,\n        offset,\n        onFilter: handleFilter,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onPin: handlePin,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        resetSize: handleResetSize,\n        scrollToIndex,\n        setRowActiveIndex,\n        setColumnSizing,\n        sortDirection,\n        tooltip,\n        width,\n    } = props;\n    const [ref, setRef] = React.useState<HTMLTableCellElement | null>(null);\n\n    // save column width if none is set\n    useSetInitialColumnSizing(id, defaultWidth, width, ref, canMeasureSize, setColumnSizing);\n\n    // feature specific styles\n    const style: React.CSSProperties = {};\n\n    // column groups often span multiple columns\n    if (colSpan > 1) {\n        style.gridColumn = `span ${colSpan}`;\n    }\n\n    // pinned columns should be offset from either the left or right\n    if (isPinned) {\n        style[isPinned] = `${offset}px`;\n    }\n\n    return (\n        <th\n            {...getSortAttributes(canSort, handleSort, sortDirection)}\n            className={className}\n            data-cell-align={isGroup ? 'center' : align}\n            data-cell-id={id}\n            data-cell-pinned={isPinned ? isPinned : undefined}\n            style={style}\n            ref={setRef}>\n            {!isPlaceholder ? (\n                <HeaderContent children={children} tooltip={tooltip} isInternalColumnHeader={!!isInternalColumn(id)} />\n            ) : null}\n            {sortDirection ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <HeaderMenu\n                    canFilter={canFilter}\n                    canGoto={canGoto}\n                    canHide={canHide}\n                    canPin={canPin}\n                    canSort={canSort}\n                    className={cn({\n                        'ml-auto': align !== 'right',\n                        'ml-0': align === 'right',\n                    })}\n                    customMenu={customMenu}\n                    index={index}\n                    isFiltered={isFiltered}\n                    onFilter={handleFilter}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    onPin={handlePin}\n                    onSortToggle={handleSortToggle}\n                    scrollToIndex={scrollToIndex}\n                    setRowActiveIndex={setRowActiveIndex}\n                    sortDirection={sortDirection}\n                    columnId={id}\n                />\n            ) : null}\n            {canResize ? (\n                <Resizer\n                    headerRef={ref}\n                    id={id}\n                    isResizing={isResizing as boolean}\n                    onResize={handleResize as (event: unknown) => void}\n                    onResetSize={handleResetSize as () => void}\n                    setColumnSizing={setColumnSizing}\n                    width={width}\n                />\n            ) : null}\n        </th>\n    );\n});\n"],"names":["HeaderContent","children","tooltip","isInternalColumnHeader","React","Tooltip","title","String","placement","className","Header","props","header","scrollToIndex","column","getIsGrouped","table","getContext","tableMeta","options","meta","columnMeta","_header$column$column","columnDef","isGroup","subHeaders","length","isPinned","getIsPinned","canFilter","isPlaceholder","getCanFilter","enableColumnFilters","canHide","getCanHide","canMeasureSize","getRowModel","rows","canPin","getCanPin","canResize","getCanResize","canSort","getCanSort","canGoto","rowGoto","isEnabled","getIsSorted","hasMenu","isInternalColumn","id","menu","sorting","getState","filters","columnFilters","search","globalFilter","memoedProps","align","cn","headerClassName","flexRender","colSpan","customMenu","defaultWidth","isFiltered","getIsFiltered","index","offset","getStart","setRowActiveIndex","rowActive","setColumnSizing","width","columnSizing","nextHeader","headerGroup","headers","onFilter","setFilterValue","comparator","TableFilterComparator","Contains","onGoto","query","_tableMeta$rowGoto$ha","_tableMeta$rowGoto","handleGoto","call","onHide","getToggleVisibilityHandler","onPin","setColumnPinning","pinningState","left","undefined","unfreezeAllExternalColumns","freezeUptoExternalColumn","getAllLeafColumns","map","isResizing","getIsResizing","onResize","getResizeHandler","resetSize","handleSortToggle","sortDirection","clearSorting","toggleSorting","onSort","getToggleSortingHandler","onSortToggle","MemoedHeader","key","memo","handleFilter","handleHide","handlePin","handleResize","handleSort","handleResetSize","ref","setRef","useState","useSetInitialColumnSizing","style","gridColumn","getSortAttributes","SortIndicator","direction","HeaderMenu","columnId","Resizer","headerRef","onResetSize"],"mappings":"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"}

package/dist/index.css

@@ -350,77 +350,6 @@
     stroke: currentColor;
 }
 
-/* Base styles */
-[data-taco='checkbox-container'] [data-taco='checkbox'] {
-    @apply border-grey-500;
-}
-
-[data-taco='checkbox-container'][data-focus-visible] [data-taco='checkbox'] {
-    @apply yt-focus;
-}
-
-/* Readonly state */
-[data-taco='checkbox-container'][data-readonly] [data-taco='checkbox'] {
-    @apply cursor-default;
-}
-
-/* Invalid state */
-[data-taco='checkbox-container'][data-invalid] [data-taco='checkbox'] {
-    @apply border-red-500;
-}
-
-/* Selected or indeterminate state */
-[data-taco='checkbox-container'][data-selected] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-indeterminate] [data-taco='checkbox'] {
-    @apply border-blue-500 bg-blue-500;
-}
-
-/* Selected or indeterminate AND invalid state */
-[data-taco='checkbox-container'][data-selected][data-invalid] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-indeterminate][data-invalid] [data-taco='checkbox'] {
-    @apply !border-red-500 !bg-red-500;
-}
-
-/* Disabled state */
-[data-taco='checkbox-container'][data-disabled] [data-taco='checkbox'] {
-    @apply border-grey-500/50 cursor-not-allowed;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-invalid] [data-taco='checkbox'] {
-    @apply !border-red-500/50 !bg-red-500/50;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-selected] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-disabled][data-indeterminate] [data-taco='checkbox'] {
-    @apply !bg-blue-500/50;
-}
-
-[data-taco='checkbox-container'][data-disabled][data-selected][data-invalid] [data-taco='checkbox'],
-[data-taco='checkbox-container'][data-disabled][data-indeterminate][data-invalid] [data-taco='checkbox'] {
-    @apply !bg-red-500/50 text-white;
-}
-
-/* Hover states (separate rules for clarity) */
-[data-taco='checkbox-container']:hover:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply border-grey-700;
-}
-
-[data-taco='checkbox-container']:hover[data-selected]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'],
-[data-taco='checkbox-container']:hover[data-indeterminate]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply !border-blue-700 !bg-blue-700;
-}
-
-[data-taco='checkbox-container']:hover[data-invalid]:not([data-disabled]):not([data-readonly]) [data-taco='checkbox'] {
-    @apply !border-red-700;
-}
-
-[data-taco='checkbox-container']:hover[data-invalid][data-selected]:not([data-disabled]):not([data-readonly])
-    [data-taco='checkbox'],
-[data-taco='checkbox-container']:hover[data-invalid][data-indeterminate]:not([data-disabled]):not([data-readonly])
-    [data-taco='checkbox'] {
-    @apply !border-red-700 !bg-red-700;
-}
-
 [data-taco='scrollable-list'].yt-list--multiselect li:first-child {
     @apply border-grey-100 border-b-2 pl-4; /* Listbox max-height is dependant on this border-bottom-width value! */
 }
@@ -895,7 +824,7 @@ table[data-taco^='table'] td[data-cell-truncate='true'] [data-taco='textarea'] {
     @apply focus:absolute focus:overflow-y-auto;
 }
 
-table[data-taco^='table'] td label:not([data-taco='checkbox-label']) {
+table[data-taco^='table'] td label {
     @apply h-fit !min-h-fit w-full !pb-0;
 }
 
@@ -934,14 +863,14 @@ table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner']
     @apply !h-4 !w-4;
 }
 
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-[3px];
 }
 
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge'],
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='badge-icon'],
-table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon']:not([data-taco='checkbox'] *),
+table[data-taco^='table'][data-table-font-size='small'] td [data-taco='icon'],
 table[data-taco^='table'][data-table-font-size='small'] td [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
@@ -1070,7 +999,7 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon-but
     @apply !-my-1.5;
 }
 
-table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
+table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='icon'] {
     @apply !-my-0.5;
 }
 
@@ -1155,7 +1084,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon-butt
     @apply !-my-1;
 }
 
-table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon']:not([data-taco='checkbox'] *) {
+table[data-taco^='table'][data-table-font-size='large'] td [data-taco='icon'] {
     @apply !-my-0.5;
 }
 

package/dist/taco.cjs.development.js

@@ -11,9 +11,9 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
-var reactAriaComponents = require('react-aria-components');
-var PopoverPrimitive = require('@radix-ui/react-popover');
+var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var uuid = require('uuid');
+var PopoverPrimitive = require('@radix-ui/react-popover');
 var debounce$1 = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -24,6 +24,7 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
+var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ReactDOM = _interopDefault(require('react-dom'));
@@ -5246,6 +5247,11 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
 });
 Card.Content = Content$2;
 
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+};
+
 const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 350,
@@ -5288,53 +5294,75 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
-    className,
-    defaultChecked,
     indeterminate,
-    readOnly,
     invalid,
-    disabled,
-    required,
-    onChange,
-    loading,
     label,
-    onClick,
+    loading,
+    onChange,
     ...otherProps
   } = props;
-  // Converts the forwarded ref to an object ref, as required by RAC Checkbox.
-  const inputRef = useMergedRef(ref);
-  const checkboxContainerClassName = cn('group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
-  // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.
-  const checkboxClassName = cn('bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer', {
+  const id = useId(props.id);
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label,
     'mt-[0.1rem]': !label
-  }, className);
-  return /*#__PURE__*/React.createElement(reactAriaComponents.Checkbox, Object.assign({}, otherProps, {
-    className: checkboxContainerClassName,
-    "data-taco": "checkbox-container",
-    defaultSelected: defaultChecked,
-    isDisabled: disabled,
-    isIndeterminate: indeterminate,
-    isInvalid: invalid,
-    isRequired: required,
-    isReadOnly: readOnly,
-    isSelected: checked,
-    inputRef: inputRef,
-    onChange: onChange
-  }), ({
-    isIndeterminate,
-    isSelected
-  }) => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: checkboxClassName,
+  }, invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
+    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
+  }, props.className);
+  let handleChange;
+  if (onChange) {
+    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
+  }
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  // the enter keyboard shortcut isn't supported by default, but we want it
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.currentTarget.click();
+    }
+  };
+  const spinnerClassname = cn(
+  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
+  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
+    'text-blue-500': !checked && !indeterminate
+  });
+  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
+    "aria-invalid": invalid ? 'true' : undefined,
     "data-taco": "checkbox",
-    onClick: onClick
-  }, loading ? (/*#__PURE__*/React.createElement(Spinner, {
-    className: "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white"
-  })) : (isIndeterminate || isSelected) && (/*#__PURE__*/React.createElement(Icon, {
-    "aria-hidden": true,
-    name: isIndeterminate ? 'line' : 'tick',
+    checked: indeterminate ? 'indeterminate' : checked,
+    className: className,
+    onCheckedChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }), loading ? (/*#__PURE__*/React.createElement(Spinner, {
+    className: spinnerClassname
+  })) : (/*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
+    className: "flex h-full w-full"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: indeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))), label)));
+  }))));
+  if (label) {
+    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName,
+      "data-taco": "checkbox-container"
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -5772,13 +5800,10 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    excludeFromTabOrder: true,
+    tabIndex: -1,
     checked: optionProps['aria-selected'],
-    onChange: () => {
-      var _optionProps$ref, _optionProps$ref$curr;
-      (_optionProps$ref = optionProps.ref) === null || _optionProps$ref === void 0 ? void 0 : (_optionProps$ref$curr = _optionProps$ref.current) === null || _optionProps$ref$curr === void 0 ? void 0 : _optionProps$ref$curr.click();
-    },
-    className: "ml-2 self-center p-px"
+    onChange: () => null,
+    className: "pointer-events-none ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty))));
@@ -7749,46 +7774,44 @@ const Collapsible = /*#__PURE__*/React__default.forwardRef(function Accordion(pr
 
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   const {
-    checked,
-    defaultChecked,
-    readOnly,
     label,
     onChange,
-    disabled,
-    onClick,
-    className,
     ...otherProps
   } = props;
-  const inputRef = useMergedRef(ref);
-  const switchContainerClassName = cn('group flex self-start', 'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
-  const switchClassName = cn('h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500', 'group-data-[focus-visible]:yt-focus', {
-    'mr-2': !!label
-  }, 'group-hover:bg-grey-700',
-  // When switch is selected
-  'group-data-[selected]:bg-blue-500',
-  // When switch is selected and hovered
-  'group-hover:group-data-[selected]:bg-blue-700',
-  // When switch is disabled
-  'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',
-  // When switch is disabled and selected
-  'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50', className);
-  const switchThumbClassName = cn('pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform', 'group-data-[disabled]:opacity-50', 'group-data-[selected]:translate-x-[1.1rem]');
-  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
-    className: switchContainerClassName,
-    "data-taco": "switch-container",
-    inputRef: inputRef,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isSelected: checked,
-    defaultSelected: defaultChecked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement("span", {
-    className: switchClassName,
+  const id = useId(props.id);
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
+    'mr-2': !!label,
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
+  }, props.className);
+  let labelledByProps = null;
+  if (label) {
+    labelledByProps = {
+      'aria-labelledby': `${id}-label`,
+      id
+    };
+  }
+  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
+    className: className,
     "data-taco": "switch",
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement("span", {
-    className: switchThumbClassName
-  })), label);
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
+  }));
+  if (label) {
+    const labelContainerClassName = cn('flex self-start cursor-pointer', {
+      'cursor-not-allowed text-grey-300': props.disabled
+    });
+    return /*#__PURE__*/React.createElement("span", {
+      className: labelContainerClassName,
+      "data-taco": "switch-container"
+    }, element, /*#__PURE__*/React.createElement("label", {
+      htmlFor: id,
+      id: `${id}-label`
+    }, label));
+  }
+  return element;
 });
 Switch.displayName = 'Switch';
 
@@ -7846,18 +7869,13 @@ const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
-  const controlClassName = cn(
-  // When ToggleItem is hovered
-  'group-hover/toggle:bg-grey-700',
-  // When ToggleItem is hovered and switch inside it is selected
-  'group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Switch, {
     checked: checked,
-    className: controlClassName,
+    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    excludeFromTabOrder: true
+    tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -7878,18 +7896,13 @@ const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
-  const controlClassName = cn(
-  // When ToggleItem is hovered
-  'group-hover/toggle:border-grey-700',
-  // When ToggleItem is hovered and checkbox inside it is selected
-  'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: checked,
-    className: controlClassName,
+    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    excludeFromTabOrder: true
+    tabIndex: -1
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -8836,41 +8849,20 @@ Menu$1.SubMenu = SubMenu;
 
 const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
   const {
-    checked,
-    defaultChecked,
-    readOnly,
     onChange,
-    disabled,
-    className,
     ...otherProps
   } = props;
-  const inputRef = useMergedRef(ref);
-  const switchClassName = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500', 'data-[focus-visible]:yt-focus', 'hover:bg-grey-700',
-  // When modeswitch is selected
-  'data-[selected]:bg-blue-500',
-  // When modeswitch is selected and hovered
-  'hover:data-[selected]:bg-blue-700',
-  // When modeswitch is disabled
-  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',
-  // When modeswitch is disabled and selected
-  'data-[disabled]:data-[selected]:!bg-blue-500', className);
-  const switchThumbClassName = cn('pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',
-  // When modeswitch is disabled
-  'group-data-[disabled]:opacity-50',
-  // When modeswitch is selected
-  'group-data-[selected]:translate-x-full');
-  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
-    className: switchClassName,
-    defaultSelected: defaultChecked,
-    id: otherProps.id,
-    inputRef: inputRef,
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isSelected: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement("span", {
-    className: switchThumbClassName,
-    "data-taco": "mode"
+  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
+  }, props.className);
+  return /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "mode",
+    onCheckedChange: onChange,
+    ref: ref
+  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
+    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"
@@ -13872,7 +13864,6 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-align": isGroup ? 'center' : align,
     "data-cell-id": id,
     "data-cell-pinned": isPinned ? isPinned : undefined,
-    "data-taco": isGroup ? 'grouped-column-header' : 'column-header',
     style: style,
     ref: setRef
   }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {
@@ -14794,11 +14785,6 @@ function RowHeightMenuItem({
   }, texts.table.rowHeight.sizes.extraTall)));
 }
 
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
-};
-
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;