@economic/taco 1.29.0 → 1.30.1

package/dist/esm/packages/taco/src/components/Table2/components/column/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader, TableMeta, Table as RTTable } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalFrozenColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { Table2ColumnHeaderMenu } from '../../types';\nimport { useLocalization } from '../../../Provider/Localization';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const frozen = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const { enableColumnFreezing } = table.options.meta as TableMeta<TType>;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]',\n        {\n            'z-[6]': header.column.getIsResizing(),\n            'z-[7]': frozen, // frozen headers should show above cells and other headers, so we assign a higher z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalFrozenColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <>\n                    <div\n                        className={cn(\n                            'flex flex-grow overflow-hidden',\n                            {\n                                'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                            },\n                            getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                        )}>\n                        {isOverflowing(textRef.current) ? (\n                            <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                                {content}\n                            </Tooltip>\n                        ) : (\n                            content\n                        )}\n                        {{\n                            asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                            desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        }[header.column.getIsSorted() as string] ?? null}\n                    </div>\n                    {header.column.columnDef.meta?.menu || enableColumnFreezing ? (\n                        <HeaderMenu\n                            menu={header.column.columnDef.meta?.menu}\n                            enableColumnFreezing={enableColumnFreezing}\n                            table={table}\n                            columnIndex={index}\n                        />\n                    ) : null}\n                </>\n            )}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\ntype HeaderMenuProps = {\n    enableColumnFreezing: boolean;\n    menu?: Table2ColumnHeaderMenu;\n    table: RTTable<any>;\n    columnIndex: number;\n};\n\nconst HeaderMenu = ({ menu, enableColumnFreezing, table, columnIndex }: HeaderMenuProps) => {\n    const [open, setOpen] = React.useState(false);\n    const { texts } = useLocalization();\n    const { frozenColumnsCount, setFrozenColumnsCount } = table.options.meta as TableMeta<any>;\n\n    const columns = table.getAllLeafColumns();\n    const { columnVisibility, columnOrder } = table.getState();\n    const visibleInternalColumnsCount = React.useMemo(\n        () => columns.filter(column => isInternalFrozenColumn(column.id)).length,\n        [columns]\n    );\n    const columnPosition = columnIndex + 1;\n    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;\n    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;\n    const freeAllColumns = () => {\n        setFrozenColumnsCount(0);\n    };\n    const freezeColumns = () => {\n        setFrozenColumnsCount(externalFrozenColumnsCount);\n    };\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    const freezeMenuItems = [\n        <Menu.Item icon=\"column-freeze\" onClick={freezeColumns} key=\"_freeze-columns_\">\n            {externalFrozenColumnsCount > 1\n                ? texts.table2.columns.menu.freezeColumns.replace('[X]', String(externalFrozenColumnsCount))\n                : texts.table2.columns.menu.freezeColumns.replace('[X] ', '')}\n        </Menu.Item>,\n        ...(isSomeExternalColumnFrozen\n            ? [\n                  <Menu.Item icon=\"column-unfreeze\" onClick={freeAllColumns} key=\"_unfreeze-columns_\">\n                      {texts.table2.columns.menu.unfreezeColumns}\n                  </Menu.Item>,\n              ]\n            : []),\n    ];\n\n    React.useEffect(() => {\n        // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes\n        const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;\n\n        table.setColumnPinning({ left: columns.slice(0, totalFrozenColumnsCount).map(column => column.id), right: [] });\n    }, [frozenColumnsCount, columnVisibility, columnOrder, visibleInternalColumnsCount]);\n\n    const menuProps = {\n        trigger: <IconButton className={className} icon=\"more\" />,\n        open: open,\n        onChange: setOpen,\n    };\n    let menuComponent: JSX.Element | null = null;\n\n    if (menu) {\n        menuComponent = menu(menuProps);\n\n        if (enableColumnFreezing) {\n            const menuContent = React.Children.only(menuComponent.props.children);\n            const menuContentChildren = React.Children.toArray(menuContent.props.children);\n            const menuItemsWithFreezingItems = [...menuContentChildren, <Menu.Separator />, ...freezeMenuItems];\n            const menuContentWithFreezingItems = (\n                <Menu.Content>\n                    {menuItemsWithFreezingItems.map((item, key) => React.cloneElement(item as any, { key }))}\n                </Menu.Content>\n            );\n\n            menuComponent = React.cloneElement(menuComponent, { children: menuContentWithFreezingItems });\n        }\n    } else if (enableColumnFreezing) {\n        menuComponent = (\n            <Menu {...menuProps}>\n                <Menu.Content>{freezeMenuItems}</Menu.Content>\n            </Menu>\n        );\n    }\n\n    // This div catches the mousedown events from menu item and menu trigger and prevents\n    // mousedown event from bubbling up to the Header component to prevent toggling sorting\n    return menuComponent ? <div onMouseDown={event => event.stopPropagation()}>{menuComponent}</div> : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","frozen","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","enableColumnFreezing","options","meta","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalFrozenColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","columnIndex","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","texts","useLocalization","frozenColumnsCount","setFrozenColumnsCount","columns","getAllLeafColumns","columnVisibility","columnOrder","visibleInternalColumnsCount","useMemo","filter","length","columnPosition","externalFrozenColumnsCount","isSomeExternalColumnFrozen","freeAllColumns","freezeColumns","freezeMenuItems","Menu","Item","icon","key","table2","replace","String","unfreezeColumns","useEffect","totalFrozenColumnsCount","setColumnPinning","left","slice","map","right","menuProps","trigger","IconButton","onChange","menuComponent","menuContent","Children","only","children","menuContentChildren","toArray","menuItemsWithFreezingItems","Separator","menuContentWithFreezingItems","Content","item","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../src/components/Table2/components/column/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, Header as RTHeader, TableMeta, Table as RTTable } from '@tanstack/react-table';\nimport { Icon } from '../../../Icon/Icon';\nimport { ColumnBase, ColumnBaseProps } from './Base';\nimport { Tooltip } from '../../../Tooltip/Tooltip';\nimport { isInternalFrozenColumn, MIN_COLUMN_SIZE } from '../../utilities/columns';\nimport { isOverflowing } from '../../../../utils/dom';\nimport { getCellAlignmentClasses, getCellSizingClasses } from '../../utilities/cell';\nimport { IconButton } from '../../../IconButton/IconButton';\nimport { Menu } from '../../../Menu/Menu';\nimport { Table2ColumnHeaderMenu } from '../../types';\nimport { useLocalization } from '../../../Provider/Localization';\n\ntype HeaderProps<TType = unknown> = Omit<ColumnBaseProps<TType>, 'column' | 'isEditing'> & {\n    header: RTHeader<TType, unknown>;\n    index: number;\n    isLastColumn: boolean;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nexport const Header = function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { header, index, isLastColumn, table, tableRef, ...columnProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n    const frozen = !!header.column.getIsPinned();\n    const isOtherColumnBeingResized =\n        table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;\n\n    const { enableColumnFreezing } = table.options.meta as TableMeta<TType>;\n\n    const className = cn(\n        'group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]',\n        {\n            'z-[6]': header.column.getIsResizing(),\n            'z-[7]': frozen, // frozen headers should show above cells and other headers, so we assign a higher z-index\n            'cursor-pointer select-none': header.column.getCanSort(),\n            'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || header.column.columnDef.meta?.menu,\n            'pointer-events-none': isOtherColumnBeingResized,\n        },\n        getCellSizingClasses('normal'),\n        header.column.columnDef.meta?.headerClassName,\n        props.className\n    );\n\n    // set the column size after the first render (after auto layout with 'max-content') has run\n    // this way columns default to fit their content, then we save that size for resizing\n    const refCallback = (node: HTMLDivElement) => {\n        if (node && !table.getState().columnSizing[header.id]) {\n            const size = Math.ceil(node.getBoundingClientRect().width);\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [header.id]: !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size,\n            }));\n        }\n    };\n\n    // we use mousedown because clicking and dragging resize and then letting go over the\n    // column, results in sorting being applied\n    const handleMouseDown = header.column.getCanSort()\n        ? (event: React.MouseEvent) => {\n              // only detect left clicks\n              if (event.button === 0) {\n                  event.preventDefault();\n                  table.resetRowSelection();\n                  header.column.toggleSorting();\n                  tableRef.current?.focus();\n              }\n          }\n        : undefined;\n\n    const handleResizerDoubleClick = () => {\n        const size = header.column.columnDef.meta?.defaultWidth;\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size) {\n                nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;\n            } else {\n                delete nextSizes[header.id];\n            }\n\n            return nextSizes;\n        });\n    };\n\n    const handleResizerClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handleResize = event => {\n        // prevent the parent onMouseDown propagating\n        event.stopPropagation();\n        header.getResizeHandler()(event);\n    };\n\n    const content = (\n        <div className=\"truncate\" ref={textRef}>\n            {flexRender(header.column.columnDef.header, header.getContext())}\n        </div>\n    );\n\n    return (\n        <ColumnBase\n            {...columnProps}\n            // base props\n            column={header.column}\n            table={table}\n            // other props\n            aria-sort={\n                {\n                    asc: 'ascending',\n                    desc: 'descending',\n                }[header.column.getIsSorted() as any] ?? 'none'\n            }\n            className={className}\n            onMouseDown={handleMouseDown}\n            ref={refCallback}\n            role=\"columnheader\"\n            // helper props\n            data-column-index={index}>\n            {isInternalFrozenColumn(header.id) ? (\n                flexRender(header.column.columnDef.header, header.getContext())\n            ) : (\n                <>\n                    <div\n                        className={cn(\n                            'flex flex-grow overflow-hidden',\n                            {\n                                'group-hover/header:-ml-2': !!header.column.getIsSorted() && !!header.column.columnDef.meta?.menu,\n                            },\n                            getCellAlignmentClasses(header.column.columnDef.meta?.align)\n                        )}>\n                        {isOverflowing(textRef.current) ? (\n                            <Tooltip title={header.column.columnDef.meta?.tooltip ?? content} placement=\"top\">\n                                {content}\n                            </Tooltip>\n                        ) : (\n                            content\n                        )}\n                        {{\n                            asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n                            desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n                        }[header.column.getIsSorted() as string] ?? null}\n                    </div>\n                    {header.column.columnDef.meta?.menu || enableColumnFreezing ? (\n                        <HeaderMenu\n                            menu={header.column.columnDef.meta?.menu}\n                            enableColumnFreezing={enableColumnFreezing}\n                            table={table}\n                            columnIndex={index}\n                        />\n                    ) : null}\n                </>\n            )}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title=\"Resize column\">\n                    <div\n                        className={cn(\n                            'invisible absolute right-0 top-0 flex h-full cursor-col-resize touch-none select-none rounded py-0.5 group-hover/header:visible',\n                            {\n                                '-mr-2.5 w-5 justify-center': !isLastColumn,\n                                'w-2': isLastColumn,\n                                '!visible': header.column.getIsResizing(),\n                            }\n                        )}\n                        onDoubleClick={handleResizerDoubleClick}\n                        onMouseDown={handleResize}\n                        onTouchStart={handleResize}\n                        // this prevents sort handlers being activated\n                        onClick={handleResizerClick}>\n                        <div\n                            className={cn('h-full w-1 rounded', {\n                                '!bg-blue-500': header.column.getIsResizing(),\n                                'bg-grey-500 hover:bg-grey-700': !header.column.getIsResizing(),\n                            })}\n                        />\n                    </div>\n                </Tooltip>\n            ) : null}\n        </ColumnBase>\n    );\n};\n\ntype HeaderMenuProps = {\n    enableColumnFreezing: boolean;\n    menu?: Table2ColumnHeaderMenu;\n    table: RTTable<any>;\n    columnIndex: number;\n};\n\nconst HeaderMenu = ({ menu, enableColumnFreezing, table, columnIndex }: HeaderMenuProps) => {\n    const [open, setOpen] = React.useState(false);\n    const { texts } = useLocalization();\n    const { frozenColumnsCount, setFrozenColumnsCount } = table.options.meta as TableMeta<any>;\n\n    const columns = table.getAllLeafColumns();\n    const { columnVisibility, columnOrder } = table.getState();\n    const visibleInternalColumnsCount = React.useMemo(\n        () => columns.filter(column => isInternalFrozenColumn(column.id)).length,\n        [columns]\n    );\n    const columnPosition = columnIndex + 1;\n    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;\n    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;\n    const freeAllColumns = () => {\n        setFrozenColumnsCount(0);\n    };\n    const freezeColumns = () => {\n        setFrozenColumnsCount(externalFrozenColumnsCount);\n    };\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 hidden !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end group-hover/header:flex',\n        {\n            '!flex': open,\n        }\n    );\n    const freezeMenuItems = [\n        <Menu.Item icon=\"column-freeze\" onClick={freezeColumns} key=\"_freeze-columns_\">\n            {texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)}\n        </Menu.Item>,\n        ...(isSomeExternalColumnFrozen\n            ? [\n                  <Menu.Item icon=\"column-unfreeze\" onClick={freeAllColumns} key=\"_unfreeze-columns_\">\n                      {texts.table2.columns.menu.unfreezeColumns}\n                  </Menu.Item>,\n              ]\n            : []),\n    ];\n\n    React.useEffect(() => {\n        // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes\n        const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;\n\n        table.setColumnPinning({ left: columns.slice(0, totalFrozenColumnsCount).map(column => column.id), right: [] });\n    }, [frozenColumnsCount, columnVisibility, columnOrder, visibleInternalColumnsCount]);\n\n    const menuProps = {\n        trigger: <IconButton className={className} icon=\"more\" />,\n        open: open,\n        onChange: setOpen,\n    };\n    let menuComponent: JSX.Element | null = null;\n\n    if (menu) {\n        menuComponent = menu(menuProps);\n\n        if (enableColumnFreezing) {\n            const menuContent = React.Children.only(menuComponent.props.children);\n            const menuContentChildren = React.Children.toArray(menuContent.props.children);\n            const menuItemsWithFreezingItems = [...menuContentChildren, <Menu.Separator />, ...freezeMenuItems];\n            const menuContentWithFreezingItems = (\n                <Menu.Content>\n                    {menuItemsWithFreezingItems.map((item, key) => React.cloneElement(item as any, { key }))}\n                </Menu.Content>\n            );\n\n            menuComponent = React.cloneElement(menuComponent, { children: menuContentWithFreezingItems });\n        }\n    } else if (enableColumnFreezing) {\n        menuComponent = (\n            <Menu {...menuProps}>\n                <Menu.Content>{freezeMenuItems}</Menu.Content>\n            </Menu>\n        );\n    }\n\n    // This div catches the mousedown events from menu item and menu trigger and prevents\n    // mousedown event from bubbling up to the Header component to prevent toggling sorting\n    return menuComponent ? <div onMouseDown={event => event.stopPropagation()}>{menuComponent}</div> : null;\n};\n"],"names":["Header","props","header","index","isLastColumn","table","tableRef","columnProps","textRef","React","useRef","frozen","column","getIsPinned","isOtherColumnBeingResized","getState","columnSizingInfo","isResizingColumn","id","enableColumnFreezing","options","meta","className","cn","getIsResizing","getCanSort","getCanResize","columnDef","menu","getCellSizingClasses","headerClassName","refCallback","node","columnSizing","size","Math","ceil","getBoundingClientRect","width","setColumnSizing","sizes","isInternalFrozenColumn","MIN_COLUMN_SIZE","handleMouseDown","event","button","preventDefault","resetRowSelection","toggleSorting","current","focus","undefined","handleResizerDoubleClick","defaultWidth","nextSizes","handleResizerClick","stopPropagation","handleResize","getResizeHandler","content","ref","flexRender","getContext","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","HeaderMenu","columnIndex","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","texts","useLocalization","frozenColumnsCount","setFrozenColumnsCount","columns","getAllLeafColumns","columnVisibility","columnOrder","visibleInternalColumnsCount","useMemo","filter","length","columnPosition","externalFrozenColumnsCount","isSomeExternalColumnFrozen","freeAllColumns","freezeColumns","freezeMenuItems","Menu","Item","icon","key","table2","unfreezeColumns","useEffect","totalFrozenColumnsCount","setColumnPinning","left","slice","map","right","menuProps","trigger","IconButton","onChange","menuComponent","menuContent","Children","only","children","menuContentChildren","toArray","menuItemsWithFreezingItems","Separator","menuContentWithFreezingItems","Content","item","cloneElement"],"mappings":";;;;;;;;;;;;;MAqBaA,MAAM,GAAG,SAASA,MAAM,CAAkBC,KAAyB;;EAC5E,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC,YAAY;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;GAAa,GAAGN,KAAK;EAC9E,MAAMO,OAAO,GAAGC,cAAK,CAACC,MAAM,CAAiB,IAAI,CAAC;EAClD,MAAMC,MAAM,GAAG,CAAC,CAACT,MAAM,CAACU,MAAM,CAACC,WAAW,EAAE;EAC5C,MAAMC,yBAAyB,GAC3BT,KAAK,CAACU,QAAQ,EAAE,CAACC,gBAAgB,CAACC,gBAAgB,IAAIZ,KAAK,CAACU,QAAQ,EAAE,CAACC,gBAAgB,CAACC,gBAAgB,KAAKf,MAAM,CAACgB,EAAE;EAE1H,MAAM;IAAEC;GAAsB,GAAGd,KAAK,CAACe,OAAO,CAACC,IAAwB;EAEvE,MAAMC,SAAS,GAAGC,EAAE,CAChB,oFAAoF,EACpF;IACI,OAAO,EAAErB,MAAM,CAACU,MAAM,CAACY,aAAa,EAAE;IACtC,OAAO,EAAEb,MAAM;IACf,4BAA4B,EAAET,MAAM,CAACU,MAAM,CAACa,UAAU,EAAE;IACxD,mBAAmB,EAAEvB,MAAM,CAACU,MAAM,CAACa,UAAU,EAAE,IAAIvB,MAAM,CAACU,MAAM,CAACc,YAAY,EAAE,8BAAIxB,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,0DAA5B,sBAA8BO,IAAI;IACrH,qBAAqB,EAAEd;GAC1B,EACDe,oBAAoB,CAAC,QAAQ,CAAC,4BAC9B3B,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,2DAA5B,uBAA8BS,eAAe,EAC7C7B,KAAK,CAACqB,SAAS,CAClB;;;EAID,MAAMS,WAAW,GAAIC,IAAoB;IACrC,IAAIA,IAAI,IAAI,CAAC3B,KAAK,CAACU,QAAQ,EAAE,CAACkB,YAAY,CAAC/B,MAAM,CAACgB,EAAE,CAAC,EAAE;MACnD,MAAMgB,IAAI,GAAGC,IAAI,CAACC,IAAI,CAACJ,IAAI,CAACK,qBAAqB,EAAE,CAACC,KAAK,CAAC;MAC1DjC,KAAK,CAACkC,eAAe,CAACC,KAAK,KAAK;QAC5B,GAAGA,KAAK;QACR,CAACtC,MAAM,CAACgB,EAAE,GAAG,CAACuB,sBAAsB,CAACvC,MAAM,CAACgB,EAAE,CAAC,IAAIgB,IAAI,GAAGQ,eAAe,GAAGA,eAAe,GAAGR;OACjG,CAAC,CAAC;;GAEV;;;EAID,MAAMS,eAAe,GAAGzC,MAAM,CAACU,MAAM,CAACa,UAAU,EAAE,GAC3CmB,KAAuB;;IAEpB,IAAIA,KAAK,CAACC,MAAM,KAAK,CAAC,EAAE;MAAA;MACpBD,KAAK,CAACE,cAAc,EAAE;MACtBzC,KAAK,CAAC0C,iBAAiB,EAAE;MACzB7C,MAAM,CAACU,MAAM,CAACoC,aAAa,EAAE;MAC7B,qBAAA1C,QAAQ,CAAC2C,OAAO,sDAAhB,kBAAkBC,KAAK,EAAE;;GAEhC,GACDC,SAAS;EAEf,MAAMC,wBAAwB,GAAG;;IAC7B,MAAMlB,IAAI,6BAAGhC,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,2DAA5B,uBAA8BgC,YAAY;IACvDhD,KAAK,CAACkC,eAAe,CAACC,KAAK;MACvB,MAAMc,SAAS,GAAG;QAAE,GAAGd;OAAO;MAE9B,IAAIN,IAAI,EAAE;QACNoB,SAAS,CAACpD,MAAM,CAACgB,EAAE,CAAC,GAAG,CAACuB,sBAAsB,CAACvC,MAAM,CAACgB,EAAE,CAAC,IAAIgB,IAAI,GAAGQ,eAAe,GAAGA,eAAe,GAAGR,IAAI;OAC/G,MAAM;QACH,OAAOoB,SAAS,CAACpD,MAAM,CAACgB,EAAE,CAAC;;MAG/B,OAAOoC,SAAS;KACnB,CAAC;GACL;EAED,MAAMC,kBAAkB,GAAGX,KAAK;IAC5BA,KAAK,CAACY,eAAe,EAAE;IACvBZ,KAAK,CAACE,cAAc,EAAE;GACzB;EAED,MAAMW,YAAY,GAAGb,KAAK;;IAEtBA,KAAK,CAACY,eAAe,EAAE;IACvBtD,MAAM,CAACwD,gBAAgB,EAAE,CAACd,KAAK,CAAC;GACnC;EAED,MAAMe,OAAO,gBACTlD;IAAKa,SAAS,EAAC,UAAU;IAACsC,GAAG,EAAEpD;KAC1BqD,UAAU,CAAC3D,MAAM,CAACU,MAAM,CAACe,SAAS,CAACzB,MAAM,EAAEA,MAAM,CAAC4D,UAAU,EAAE,CAAC,CAEvE;EAED,oBACIrD,6BAACsD,UAAU,oBACHxD,WAAW;;IAEfK,MAAM,EAAEV,MAAM,CAACU,MAAM;IACrBP,KAAK,EAAEA,KAAK;0CAGR;MACI2D,GAAG,EAAE,WAAW;MAChBC,IAAI,EAAE;KACT,CAAC/D,MAAM,CAACU,MAAM,CAACsD,WAAW,EAAS,CAAC,yEAAI,MAAM;IAEnD5C,SAAS,EAAEA,SAAS;IACpB6C,WAAW,EAAExB,eAAe;IAC5BiB,GAAG,EAAE7B,WAAW;IAChBqC,IAAI,EAAC,cAAc;yBAEAjE;MAClBsC,sBAAsB,CAACvC,MAAM,CAACgB,EAAE,CAAC,GAC9B2C,UAAU,CAAC3D,MAAM,CAACU,MAAM,CAACe,SAAS,CAACzB,MAAM,EAAEA,MAAM,CAAC4D,UAAU,EAAE,CAAC,gBAE/DrD,yEACIA;IACIa,SAAS,EAAEC,EAAE,CACT,gCAAgC,EAChC;MACI,0BAA0B,EAAE,CAAC,CAACrB,MAAM,CAACU,MAAM,CAACsD,WAAW,EAAE,IAAI,CAAC,4BAAChE,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,mDAA5B,uBAA8BO,IAAI;KACpG,EACDyC,uBAAuB,2BAACnE,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,2DAA5B,uBAA8BiD,KAAK,CAAC;KAE/DC,aAAa,CAAC/D,OAAO,CAACyC,OAAO,CAAC,gBAC3BxC,6BAAC+D,OAAO;IAACC,KAAK,sDAAEvE,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,2DAA5B,uBAA8BqD,OAAO,2EAAIf,OAAO;IAAEgB,SAAS,EAAC;KACvEhB,OAAO,CACF,GAEVA,OACH,4BACA;IACGK,GAAG,eAAEvD,6BAACmE,IAAI;MAACC,IAAI,EAAC,kBAAkB;MAACvD,SAAS,EAAC;MAAgC;IAC7E2C,IAAI,eAAExD,6BAACmE,IAAI;MAACC,IAAI,EAAC,oBAAoB;MAACvD,SAAS,EAAC;;GACnD,CAACpB,MAAM,CAACU,MAAM,CAACsD,WAAW,EAAY,CAAC,2EAAI,IAAI,CAC9C,EACL,0BAAAhE,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,mDAA5B,uBAA8BO,IAAI,IAAIT,oBAAoB,gBACvDV,6BAACqE,UAAU;IACPlD,IAAI,4BAAE1B,MAAM,CAACU,MAAM,CAACe,SAAS,CAACN,IAAI,2DAA5B,uBAA8BO,IAAI;IACxCT,oBAAoB,EAAEA,oBAAoB;IAC1Cd,KAAK,EAAEA,KAAK;IACZ0E,WAAW,EAAE5E;IACf,GACF,IAAI,CAEf,EACAD,MAAM,CAACU,MAAM,CAACc,YAAY,EAAE,gBACzBjB,6BAAC+D,OAAO;IAACG,SAAS,EAAC,KAAK;IAACF,KAAK,EAAC;kBAC3BhE;IACIa,SAAS,EAAEC,EAAE,CACT,iIAAiI,EACjI;MACI,4BAA4B,EAAE,CAACnB,YAAY;MAC3C,KAAK,EAAEA,YAAY;MACnB,UAAU,EAAEF,MAAM,CAACU,MAAM,CAACY,aAAa;KAC1C,CACJ;IACDwD,aAAa,EAAE5B,wBAAwB;IACvCe,WAAW,EAAEV,YAAY;IACzBwB,YAAY,EAAExB,YAAY;;IAE1ByB,OAAO,EAAE3B;kBACT9C;IACIa,SAAS,EAAEC,EAAE,CAAC,oBAAoB,EAAE;MAChC,cAAc,EAAErB,MAAM,CAACU,MAAM,CAACY,aAAa,EAAE;MAC7C,+BAA+B,EAAE,CAACtB,MAAM,CAACU,MAAM,CAACY,aAAa;KAChE;IACH,CACA,CACA,GACV,IAAI,CACC;AAErB;AASA,MAAMsD,UAAU,GAAG,CAAC;EAAElD,IAAI;EAAET,oBAAoB;EAAEd,KAAK;EAAE0E;CAA8B;EACnF,MAAM,CAACI,IAAI,EAAEC,OAAO,CAAC,GAAG3E,cAAK,CAAC4E,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEC,kBAAkB;IAAEC;GAAuB,GAAGpF,KAAK,CAACe,OAAO,CAACC,IAAsB;EAE1F,MAAMqE,OAAO,GAAGrF,KAAK,CAACsF,iBAAiB,EAAE;EACzC,MAAM;IAAEC,gBAAgB;IAAEC;GAAa,GAAGxF,KAAK,CAACU,QAAQ,EAAE;EAC1D,MAAM+E,2BAA2B,GAAGrF,cAAK,CAACsF,OAAO,CAC7C,MAAML,OAAO,CAACM,MAAM,CAACpF,MAAM,IAAI6B,sBAAsB,CAAC7B,MAAM,CAACM,EAAE,CAAC,CAAC,CAAC+E,MAAM,EACxE,CAACP,OAAO,CAAC,CACZ;EACD,MAAMQ,cAAc,GAAGnB,WAAW,GAAG,CAAC;EACtC,MAAMoB,0BAA0B,GAAGD,cAAc,GAAGJ,2BAA2B;EAC/E,MAAMM,0BAA0B,GAAGZ,kBAAkB,KAAK,CAAC;EAC3D,MAAMa,cAAc,GAAG;IACnBZ,qBAAqB,CAAC,CAAC,CAAC;GAC3B;EACD,MAAMa,aAAa,GAAG;IAClBb,qBAAqB,CAACU,0BAA0B,CAAC;GACpD;EAED,MAAM7E,SAAS,GAAGC,EAAE,CAChB,8IAA8I,EAC9I;IACI,OAAO,EAAE4D;GACZ,CACJ;EACD,MAAMoB,eAAe,GAAG,cACpB9F,6BAAC+F,IAAI,CAACC,IAAI;IAACC,IAAI,EAAC,eAAe;IAACxB,OAAO,EAAEoB,aAAa;IAAEK,GAAG,EAAC;KACvDrB,KAAK,CAACsB,MAAM,CAAClB,OAAO,CAAC9D,IAAI,CAAC0E,aAAa,CAACH,0BAA0B,CAAC,CAC5D,EACZ,IAAIC,0BAA0B,GACxB,cACI3F,6BAAC+F,IAAI,CAACC,IAAI;IAACC,IAAI,EAAC,iBAAiB;IAACxB,OAAO,EAAEmB,cAAc;IAAEM,GAAG,EAAC;KAC1DrB,KAAK,CAACsB,MAAM,CAAClB,OAAO,CAAC9D,IAAI,CAACiF,eAAe,CAClC,CACf,GACD,EAAE,CAAC,CACZ;EAEDpG,cAAK,CAACqG,SAAS,CAAC;;IAEZ,MAAMC,uBAAuB,GAAGjB,2BAA2B,GAAGN,kBAAkB;IAEhFnF,KAAK,CAAC2G,gBAAgB,CAAC;MAAEC,IAAI,EAAEvB,OAAO,CAACwB,KAAK,CAAC,CAAC,EAAEH,uBAAuB,CAAC,CAACI,GAAG,CAACvG,MAAM,IAAIA,MAAM,CAACM,EAAE,CAAC;MAAEkG,KAAK,EAAE;KAAI,CAAC;GAClH,EAAE,CAAC5B,kBAAkB,EAAEI,gBAAgB,EAAEC,WAAW,EAAEC,2BAA2B,CAAC,CAAC;EAEpF,MAAMuB,SAAS,GAAG;IACdC,OAAO,eAAE7G,6BAAC8G,UAAU;MAACjG,SAAS,EAAEA,SAAS;MAAEoF,IAAI,EAAC;MAAS;IACzDvB,IAAI,EAAEA,IAAI;IACVqC,QAAQ,EAAEpC;GACb;EACD,IAAIqC,aAAa,GAAuB,IAAI;EAE5C,IAAI7F,IAAI,EAAE;IACN6F,aAAa,GAAG7F,IAAI,CAACyF,SAAS,CAAC;IAE/B,IAAIlG,oBAAoB,EAAE;MACtB,MAAMuG,WAAW,GAAGjH,cAAK,CAACkH,QAAQ,CAACC,IAAI,CAACH,aAAa,CAACxH,KAAK,CAAC4H,QAAQ,CAAC;MACrE,MAAMC,mBAAmB,GAAGrH,cAAK,CAACkH,QAAQ,CAACI,OAAO,CAACL,WAAW,CAACzH,KAAK,CAAC4H,QAAQ,CAAC;MAC9E,MAAMG,0BAA0B,GAAG,CAAC,GAAGF,mBAAmB,eAAErH,6BAAC+F,IAAI,CAACyB,SAAS,OAAG,EAAE,GAAG1B,eAAe,CAAC;MACnG,MAAM2B,4BAA4B,gBAC9BzH,6BAAC+F,IAAI,CAAC2B,OAAO,QACRH,0BAA0B,CAACb,GAAG,CAAC,CAACiB,IAAI,EAAEzB,GAAG,kBAAKlG,cAAK,CAAC4H,YAAY,CAACD,IAAW,EAAE;QAAEzB;OAAK,CAAC,CAAC,CAE/F;MAEDc,aAAa,gBAAGhH,cAAK,CAAC4H,YAAY,CAACZ,aAAa,EAAE;QAAEI,QAAQ,EAAEK;OAA8B,CAAC;;GAEpG,MAAM,IAAI/G,oBAAoB,EAAE;IAC7BsG,aAAa,gBACThH,6BAAC+F,IAAI,oBAAKa,SAAS,gBACf5G,6BAAC+F,IAAI,CAAC2B,OAAO,QAAE5B,eAAe,CAAgB,CAErD;;;;EAKL,OAAOkB,aAAa,gBAAGhH;IAAK0D,WAAW,EAAEvB,KAAK,IAAIA,KAAK,CAACY,eAAe;KAAKiE,aAAa,CAAO,GAAG,IAAI;AAC3G,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Toast/util.js

@@ -1,39 +1,41 @@
 import React__default from 'react';
-import cn from 'classnames';
-import { Icon } from '../Icon/Icon.js';
+import { BadgeIcon } from '../BadgeIcon/BadgeIcon.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
 const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: cn(css, 'yt-green-solid ')
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-yellow-solid')
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-red-solid')
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: cn(css, 'yt-blue-solid')
-      });
-    case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner, {
-        delay: 0,
-        className: cn(css, 'h-6 w-6')
-      });
-    default:
-      return null;
-  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mr-2 mt-[5px] flex-shrink-0 self-start"
+  }, (() => {
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "tick",
+          color: "green"
+        });
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "close",
+          color: "red"
+        });
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "warning",
+          color: "yellow"
+        });
+      case 'information':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "info",
+          color: "blue"
+        });
+      case 'loading':
+        return /*#__PURE__*/React__default.createElement(Spinner, {
+          delay: 0,
+          className: "h-5 w-5"
+        });
+      default:
+        return null;
+    }
+  })());
 };
 const getToastEmptyContentWarning = content => `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`;
 

package/dist/esm/packages/taco/src/components/Toast/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';\n\n    switch (type) {\n        case 'success':\n            return <Icon name=\"tick\" className={cn(css, 'yt-green-solid ')} />;\n\n        case 'warning':\n            return <Icon name=\"warning\" className={cn(css, 'yt-yellow-solid')} />;\n\n        case 'error':\n            return <Icon name=\"warning\" className={cn(css, 'yt-red-solid')} />;\n\n        case 'information':\n            return <Icon name=\"info\" className={cn(css, 'yt-blue-solid')} />;\n\n        case 'loading':\n            return <Spinner delay={0} className={cn(css, 'h-6 w-6')} />;\n\n        default:\n            return null;\n    }\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["getBadgeIcon","type","css","React","Icon","name","className","cn","Spinner","delay","getToastEmptyContentWarning","content"],"mappings":";;;;;MAMaA,YAAY,GAAIC,IAAe;EACxC,MAAMC,GAAG,GAAG,iDAAiD;EAE7D,QAAQD,IAAI;IACR,KAAK,SAAS;MACV,oBAAOE,6BAACC,IAAI;QAACC,IAAI,EAAC,MAAM;QAACC,SAAS,EAAEC,EAAE,CAACL,GAAG,EAAE,iBAAiB;QAAK;IAEtE,KAAK,SAAS;MACV,oBAAOC,6BAACC,IAAI;QAACC,IAAI,EAAC,SAAS;QAACC,SAAS,EAAEC,EAAE,CAACL,GAAG,EAAE,iBAAiB;QAAK;IAEzE,KAAK,OAAO;MACR,oBAAOC,6BAACC,IAAI;QAACC,IAAI,EAAC,SAAS;QAACC,SAAS,EAAEC,EAAE,CAACL,GAAG,EAAE,cAAc;QAAK;IAEtE,KAAK,aAAa;MACd,oBAAOC,6BAACC,IAAI;QAACC,IAAI,EAAC,MAAM;QAACC,SAAS,EAAEC,EAAE,CAACL,GAAG,EAAE,eAAe;QAAK;IAEpE,KAAK,SAAS;MACV,oBAAOC,6BAACK,OAAO;QAACC,KAAK,EAAE,CAAC;QAAEH,SAAS,EAAEC,EAAE,CAACL,GAAG,EAAE,SAAS;QAAK;IAE/D;MACI,OAAO,IAAI;;AAEvB;MAEaQ,2BAA2B,GAAIC,OAAsB,0HAE1DA,OAAO,KAAK,EAAE,GAAG,cAAc,GAAGA;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Toast/util.tsx"],"sourcesContent":["import React from 'react';\nimport { Spinner } from '../Spinner/Spinner';\nimport { ToastContent, ToastType } from './Toast';\nimport { BadgeIcon } from '../BadgeIcon/BadgeIcon';\n\nexport const getBadgeIcon = (type: ToastType): JSX.Element | null => {\n    return (\n        <div className=\"mr-2 mt-[5px] flex-shrink-0 self-start\">\n            {(() => {\n                switch (type) {\n                    case 'success':\n                        return <BadgeIcon icon=\"tick\" color=\"green\" />;\n                    case 'error':\n                        return <BadgeIcon icon=\"close\" color=\"red\" />;\n                    case 'warning':\n                        return <BadgeIcon icon=\"warning\" color=\"yellow\" />;\n                    case 'information':\n                        return <BadgeIcon icon=\"info\" color=\"blue\" />;\n                    case 'loading':\n                        return <Spinner delay={0} className=\"h-5 w-5\" />;\n                    default:\n                        return null;\n                }\n            })()}\n        </div>\n    );\n};\n\nexport const getToastEmptyContentWarning = (content?: ToastContent) =>\n    `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n        content === '' ? 'empty string' : content\n    }.`;\n"],"names":["getBadgeIcon","type","React","className","BadgeIcon","icon","color","Spinner","delay","getToastEmptyContentWarning","content"],"mappings":";;;;MAKaA,YAAY,GAAIC,IAAe;EACxC,oBACIC;IAAKC,SAAS,EAAC;KACV,CAAC;IACE,QAAQF,IAAI;MACR,KAAK,SAAS;QACV,oBAAOC,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAU;MAClD,KAAK,OAAO;QACR,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,OAAO;UAACC,KAAK,EAAC;UAAQ;MACjD,KAAK,SAAS;QACV,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,SAAS;UAACC,KAAK,EAAC;UAAW;MACtD,KAAK,aAAa;QACd,oBAAOJ,6BAACE,SAAS;UAACC,IAAI,EAAC,MAAM;UAACC,KAAK,EAAC;UAAS;MACjD,KAAK,SAAS;QACV,oBAAOJ,6BAACK,OAAO;UAACC,KAAK,EAAE,CAAC;UAAEL,SAAS,EAAC;UAAY;MACpD;QACI,OAAO,IAAI;;GAEtB,GAAG,CACF;AAEd;MAEaM,2BAA2B,GAAIC,OAAsB,0HAE1DA,OAAO,KAAK,EAAE,GAAG,cAAc,GAAGA;;;;"}

package/dist/taco.cjs.development.js

@@ -1613,13 +1613,18 @@ var Inbox = /*#__PURE__*/React.forwardRef(IconInbox);
 
 function IconInfo(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     ref: svgRef
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11.917 9.355c.406-.018.793.073 1.133.31.962.674.524 2.404-.048 3.869l-.158.391-.237.55-.455 1.002-.078.188c-.01.027-.02.051-.027.073-.561 1.637.086 2.057 1.037 1.797l.103-.03-.069.77c-1.848 1.337-4.443.961-3.364-2.283.052-.156.122-.33.204-.52l.176-.393.398-.867.2-.457c.385-.92.675-1.867.453-2.548-.164-.5-.684-.534-1.214-.352l-.114.042.068-.711c.543-.42 1.177-.732 1.79-.813l.202-.018zM13.148 5c.747 0 1.352.609 1.352 1.362 0 .75-.605 1.36-1.352 1.36a1.357 1.357 0 01-1.354-1.36c0-.753.605-1.362 1.354-1.362z",
-    fill: "currentColor",
-    fillRule: "evenodd"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M14.75 18.249A.75.75 0 0114 19h-4a.75.75 0 010-1.503h1.233V11H10a.75.75 0 010-1.503h1.983a.75.75 0 01.75.752v7.248H14a.75.75 0 01.75.752z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12.733 6.002a1 1 0 11-2.001.001 1 1 0 012.001-.001z",
+    fill: "currentColor"
   }));
 }
 var Info = /*#__PURE__*/React.forwardRef(IconInfo);
@@ -2330,6 +2335,19 @@ function IconProjects(props, svgRef) {
 }
 var Projects = /*#__PURE__*/React.forwardRef(IconProjects);
 
+function IconQuestionMark(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12 14.489c.5 0 .838-.302.832-.764v-1.998c.052-.665.604-.8 1.548-1.413C15.415 9.649 16 8.885 16 7.78 16 6.011 14.077 5 12.139 5c-.822 0-1.831.145-2.639.466a3.39 3.39 0 00-.803.438 1.94 1.94 0 00-.317.3c-.076.09-.14.188-.189.29a1.904 1.904 0 00-.132.356c-.04.153-.059.304-.059.448a.65.65 0 00.022.173c.076.335.34.55.748.55a.806.806 0 00.792-.55c.278-.902 1.709-1.078 2.502-1.078.96 0 2.183.555 2.183 1.405 0 .764-.44 1.163-1.268 1.706-.856.573-1.848 1.137-1.848 2.074v2.147c0 .492.369.764.869.764zM12 19c.579 0 1.047-.457 1.047-1.018 0-.566-.468-1.012-1.047-1.012-.573 0-1.042.446-1.042 1.012 0 .561.47 1.018 1.042 1.018z",
+    fill: "currentColor"
+  }));
+}
+var QuestionMark = /*#__PURE__*/React.forwardRef(IconQuestionMark);
+
 function IconQuicklinks(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2943,11 +2961,12 @@ var Unreconciled = /*#__PURE__*/React.forwardRef(IconUnreconciled);
 
 function IconWarning(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     ref: svgRef
   }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M9.527 17.197c.157-.827.938-1.344 1.771-1.177a1.515 1.515 0 011.213 1.772c-.157.826-.939 1.343-1.771 1.177a1.515 1.515 0 01-1.213-1.772zm2.265-11.05c.164-.863.784-1.276 1.607-1.112.815.163 1.23.782 1.066 1.646l-.038.183-.025.097-1.368 6.473c-.179.793-.67 1.182-1.43 1.03-.712-.142-1.032-.634-.96-1.356l.02-.147 1.1-6.628.028-.185z",
+    d: "M13 18a1 1 0 11-2 0 1 1 0 012 0zM11.055 5.99A.97.97 0 0112.03 5a.97.97 0 01.971 1l-.23 7.76a.768.768 0 01-.77.74.768.768 0 01-.77-.748l-.175-7.763z",
     fill: "currentColor"
   }));
 }
@@ -3186,6 +3205,7 @@ const icons = {
   profile: Profile,
   'project-cards': ProjectCards,
   projects: Projects,
+  'question-mark': QuestionMark,
   quicklinks: Quicklinks,
   'rating-bankruptcy': RatingBankruptcy,
   'rating-payment-problems': RatingPaymentProblems,
@@ -3266,12 +3286,21 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     color,
     icon,
     subtle,
+    small,
     ...otherProps
   } = props;
-  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center w-5 h-5 border-transparent [&>*]:max-h-full`, {
+  const className = cn(`rounded-full border overflow-hidden whitespace-nowrap inline-flex items-center justify-center border-transparent [&>*]:max-h-full`, {
+    'w-5 h-5': !small
+  }, {
+    'w-4 h-4 text-xs': small
+  }, {
     [getSubtleColorShadeClasses(color)]: subtle,
     [getColorShadeClasses(color)]: !subtle
   }, props.className);
+  const iconProps = {
+    strokeWidth: 1,
+    stroke: 'currentColor'
+  };
   return /*#__PURE__*/React.createElement("span", Object.assign({}, otherProps, {
     "aria-label": "icon",
     className: className,
@@ -3279,9 +3308,9 @@ const BadgeIcon = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
     ref: ref,
     role: "status",
     title: props['aria-label']
-  }), /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, Object.assign({
     name: icon
-  }));
+  }, iconProps)));
 });
 
 const getIconName = state => {
@@ -3295,7 +3324,7 @@ const getIconName = state => {
     case 'success':
       return 'tick';
     default:
-      return 'refresh';
+      return 'question-mark';
   }
 };
 const Alert = /*#__PURE__*/React__default.forwardRef(function Alert(props, ref) {
@@ -3583,30 +3612,34 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(props, ref) {
 });
 
 const getBannerIcon = type => {
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: "yt-green-solid mt-1 self-start rounded-full"
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: "yt-red-solid mt-1 self-start rounded-full"
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: "yt-yellow-solid mt-1 self-start rounded-full"
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: "yt-blue-solid mt-1 self-start rounded-full"
-      });
-    default:
-      return null;
-  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mt-[5px] self-start"
+  }, (() => {
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "tick",
+          color: "green"
+        });
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "close",
+          color: "red"
+        });
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "warning",
+          color: "yellow"
+        });
+      case 'information':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "info",
+          color: "blue"
+        });
+      default:
+        return null;
+    }
+  })());
 };
 
 const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
@@ -3859,7 +3892,7 @@ const defaultLocalisationTexts = {
         selectAll: 'Select all rows'
       },
       menu: {
-        freezeColumns: 'Freeze first [X] columns',
+        freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         unfreezeColumns: 'Unfreeze all columns'
       }
     },
@@ -8066,36 +8099,39 @@ const Progress = ({
 };
 
 const getBadgeIcon = type => {
-  const css = 'rounded-full flex-shrink-0 mr-2 mt-1 self-start';
-  switch (type) {
-    case 'success':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "tick",
-        className: cn(css, 'yt-green-solid ')
-      });
-    case 'warning':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-yellow-solid')
-      });
-    case 'error':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "warning",
-        className: cn(css, 'yt-red-solid')
-      });
-    case 'information':
-      return /*#__PURE__*/React__default.createElement(Icon, {
-        name: "info",
-        className: cn(css, 'yt-blue-solid')
-      });
-    case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner, {
-        delay: 0,
-        className: cn(css, 'h-6 w-6')
-      });
-    default:
-      return null;
-  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mr-2 mt-[5px] flex-shrink-0 self-start"
+  }, (() => {
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "tick",
+          color: "green"
+        });
+      case 'error':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "close",
+          color: "red"
+        });
+      case 'warning':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "warning",
+          color: "yellow"
+        });
+      case 'information':
+        return /*#__PURE__*/React__default.createElement(BadgeIcon, {
+          icon: "info",
+          color: "blue"
+        });
+      case 'loading':
+        return /*#__PURE__*/React__default.createElement(Spinner, {
+          delay: 0,
+          className: "h-5 w-5"
+        });
+      default:
+        return null;
+    }
+  })());
 };
 const getToastEmptyContentWarning = content => `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`;
 
@@ -12876,7 +12912,7 @@ const HeaderMenu = ({
     icon: "column-freeze",
     onClick: freezeColumns,
     key: "_freeze-columns_"
-  }, externalFrozenColumnsCount > 1 ? texts.table2.columns.menu.freezeColumns.replace('[X]', String(externalFrozenColumnsCount)) : texts.table2.columns.menu.freezeColumns.replace('[X] ', '')), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
+  }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu$1.Item, {
     icon: "column-unfreeze",
     onClick: freeAllColumns,
     key: "_unfreeze-columns_"