@economic/taco 1.36.0 → 1.38.0

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

@@ -12,7 +12,7 @@ import { getCellSizingClasses, getCellAlignmentClasses } from '../../utilities/c
 import { ColumnBase } from './Base.js';
 
 const Header = function Header(props) {
-  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8, _header$column$column9;
+  var _header$column$column, _header$column$column2, _asc$desc$header$colu, _header$column$column4, _header$column$column5, _header$column$column6, _header$column$column7, _asc$desc$header$colu2, _header$column$column8;
   const {
     header,
     index,
@@ -64,7 +64,9 @@ const Header = function Header(props) {
       const nextSizes = {
         ...sizes
       };
-      if (size) {
+      if (size === 'grow') {
+        nextSizes[header.id] = '1fr';
+      } else if (typeof size === 'number') {
         nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
@@ -118,8 +120,7 @@ const Header = function Header(props) {
       className: "pointer-events-none -my-0.5"
     })
   }[header.column.getIsSorted()]) !== null && _asc$desc$header$colu2 !== void 0 ? _asc$desc$header$colu2 : null), !isInternalColumn(header.column.id) && ((_header$column$column8 = header.column.columnDef.meta) !== null && _header$column$column8 !== void 0 && _header$column$column8.menu || enableColumnFreezing) ? /*#__PURE__*/React__default.createElement(HeaderMenu, {
-    menu: (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu,
-    enableColumnFreezing: enableColumnFreezing,
+    header: header,
     table: table,
     columnIndex: index
   }) : null), header.column.getCanResize() ? /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -144,46 +145,62 @@ const Header = function Header(props) {
   }))) : null);
 };
 const HeaderMenu = ({
-  menu,
-  enableColumnFreezing,
+  header,
   table,
   columnIndex
 }) => {
+  var _header$column$column9;
   const [open, setOpen] = React__default.useState(false);
   const {
     texts
   } = useLocalization();
+  const menu = (_header$column$column9 = header.column.columnDef.meta) === null || _header$column$column9 === void 0 ? void 0 : _header$column$column9.menu;
+  const meta = table.options.meta;
   const {
     frozenColumnsCount,
     setFrozenColumnsCount
-  } = table.options.meta;
+  } = meta;
   const columns = table.getVisibleLeafColumns();
   const {
     columnVisibility,
     columnOrder
   } = table.getState();
   const visibleInternalColumnsCount = React__default.useMemo(() => columns.filter(column => isInternalFrozenColumn(column.id)).length, [columns]);
-  const columnPosition = columnIndex + 1;
-  const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
-  const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
-  const freeAllColumns = () => {
-    setFrozenColumnsCount(0);
-  };
-  const freezeColumns = () => {
-    setFrozenColumnsCount(externalFrozenColumnsCount);
-  };
   const className = cn('-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', {
     '!flex': open
   });
-  const freezeMenuItems = [/*#__PURE__*/React__default.createElement(Menu.Item, {
-    icon: "column-freeze",
-    onClick: freezeColumns,
-    key: "_freeze-columns_"
-  }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)), ...(isSomeExternalColumnFrozen ? [/*#__PURE__*/React__default.createElement(Menu.Item, {
-    icon: "column-unfreeze",
-    onClick: freeAllColumns,
-    key: "_unfreeze-columns_"
-  }, texts.table2.columns.menu.unfreezeColumns)] : [])];
+  const menuItems = [];
+  if (table.options.enableHiding && header.column.getCanHide()) {
+    // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
+    const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "eye-off",
+      onClick: handleClick
+    }, texts.table2.columns.menu.hideColumn));
+  }
+  if (meta.enableColumnFreezing) {
+    const columnPosition = columnIndex + 1;
+    const externalFrozenColumnsCount = columnPosition - visibleInternalColumnsCount;
+    const isSomeExternalColumnFrozen = frozenColumnsCount !== 0;
+    const freeAllColumns = () => {
+      setFrozenColumnsCount(0);
+    };
+    const freezeColumns = () => {
+      setFrozenColumnsCount(externalFrozenColumnsCount);
+    };
+    menuItems.push( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "column-freeze",
+      onClick: freezeColumns,
+      key: "_freeze-columns_"
+    }, texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)));
+    if (isSomeExternalColumnFrozen) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu.Item, {
+        icon: "column-unfreeze",
+        onClick: freeAllColumns,
+        key: "_unfreeze-columns_"
+      }, texts.table2.columns.menu.unfreezeColumns));
+    }
+  }
   React__default.useEffect(() => {
     // Update column pinning/freezing whenever frozen columns count changes, or column order or visiblity changes
     const totalFrozenColumnsCount = visibleInternalColumnsCount + frozenColumnsCount;
@@ -200,23 +217,21 @@ const HeaderMenu = ({
     open: open,
     onChange: setOpen
   };
-  let menuComponent = null;
   if (menu) {
-    menuComponent = menu(menuProps);
-    if (enableColumnFreezing) {
-      const menuContent = React__default.Children.only(menuComponent.props.children);
-      const menuContentChildren = React__default.Children.toArray(menuContent.props.children);
-      const menuItemsWithFreezingItems = [...menuContentChildren, /*#__PURE__*/React__default.createElement(Menu.Separator, null), ...freezeMenuItems];
-      const menuContentWithFreezingItems = /*#__PURE__*/React__default.createElement(Menu.Content, null, menuItemsWithFreezingItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
-        key
-      })));
-      menuComponent = /*#__PURE__*/React__default.cloneElement(menuComponent, {
-        children: menuContentWithFreezingItems
-      });
+    const customMenu = menu({
+      trigger: undefined
+    });
+    const customItems = React__default.Children.toArray(customMenu.props.children.props.children);
+    if (customItems.length) {
+      if (menuItems.length) {
+        menuItems.push( /*#__PURE__*/React__default.createElement(Menu.Separator, null));
+      }
+      menuItems.push(...customItems);
     }
-  } else if (enableColumnFreezing) {
-    menuComponent = /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, freezeMenuItems));
   }
+  const menuComponent = /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, menuItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
+    key
+  }))));
   // This div catches the mousedown events from menu item and menu trigger and prevents
   // mousedown event from bubbling up to the Header component to prevent toggling sorting
   return menuComponent ? /*#__PURE__*/React__default.createElement("div", {

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 { isInternalColumn, 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    const { texts } = useLocalization();\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                    {!isInternalColumn(header.column.id) && (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={texts.table2.columns.resize.tooltip}>\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.getVisibleLeafColumns();\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","texts","useLocalization","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","isInternalColumn","HeaderMenu","columnIndex","table2","columns","resize","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","frozenColumnsCount","setFrozenColumnsCount","getVisibleLeafColumns","columnVisibility","columnOrder","visibleInternalColumnsCount","useMemo","filter","length","columnPosition","externalFrozenColumnsCount","isSomeExternalColumnFrozen","freeAllColumns","freezeColumns","freezeMenuItems","Menu","Item","icon","key","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 { isInternalColumn, 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 { 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\n        table.setColumnSizing(sizes => {\n            const nextSizes = { ...sizes };\n\n            if (size === 'grow') {\n                nextSizes[header.id] = '1fr' as any;\n            } else if (typeof size === 'number') {\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    const { texts } = useLocalization();\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                    {!isInternalColumn(header.column.id) && (header.column.columnDef.meta?.menu || enableColumnFreezing) ? (\n                        <HeaderMenu header={header} table={table} columnIndex={index} />\n                    ) : null}\n                </>\n            )}\n            {header.column.getCanResize() ? (\n                <Tooltip placement=\"top\" title={texts.table2.columns.resize.tooltip}>\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    header: RTHeader<any, unknown>;\n    table: RTTable<any>;\n    columnIndex: number;\n};\n\nconst HeaderMenu = ({ header, table, columnIndex }: HeaderMenuProps) => {\n    const [open, setOpen] = React.useState(false);\n    const { texts } = useLocalization();\n    const menu = header.column.columnDef.meta?.menu;\n    const meta = table.options.meta as TableMeta<any>;\n    const { frozenColumnsCount, setFrozenColumnsCount } = meta;\n\n    const columns = table.getVisibleLeafColumns();\n    const { columnVisibility, columnOrder } = table.getState();\n    const visibleInternalColumnsCount = React.useMemo(\n        () => columns.filter(column => isInternalFrozenColumn(column.id)).length,\n        [columns]\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\n    const menuItems: JSX.Element[] = [];\n\n    if (table.options.enableHiding && header.column.getCanHide()) {\n        // we do this in the next tick, otherwise the menu closes and react throws a \"state update on unmounted component\" error\n        const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);\n\n        menuItems.push(\n            <Menu.Item icon=\"eye-off\" onClick={handleClick}>\n                {texts.table2.columns.menu.hideColumn}\n            </Menu.Item>\n        );\n    }\n\n    if (meta.enableColumnFreezing) {\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        menuItems.push(\n            <Menu.Item icon=\"column-freeze\" onClick={freezeColumns} key=\"_freeze-columns_\">\n                {texts.table2.columns.menu.freezeColumns(externalFrozenColumnsCount)}\n            </Menu.Item>\n        );\n\n        if (isSomeExternalColumnFrozen) {\n            menuItems.push(\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\n    if (menu) {\n        const customMenu = menu({ trigger: undefined });\n        const customItems = React.Children.toArray(customMenu.props.children.props.children) as JSX.Element[];\n\n        if (customItems.length) {\n            if (menuItems.length) {\n                menuItems.push(<Menu.Separator />);\n            }\n\n            menuItems.push(...customItems);\n        }\n    }\n\n    const menuComponent = (\n        <Menu {...menuProps}>\n            <Menu.Content>{menuItems.map((item, key) => React.cloneElement(item, { key }))}</Menu.Content>\n        </Menu>\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","texts","useLocalization","ColumnBase","asc","desc","getIsSorted","onMouseDown","role","getCellAlignmentClasses","align","isOverflowing","Tooltip","title","tooltip","placement","Icon","name","isInternalColumn","HeaderMenu","columnIndex","table2","columns","resize","onDoubleClick","onTouchStart","onClick","open","setOpen","useState","frozenColumnsCount","setFrozenColumnsCount","getVisibleLeafColumns","columnVisibility","columnOrder","visibleInternalColumnsCount","useMemo","filter","length","menuItems","enableHiding","getCanHide","handleClick","setTimeout","toggleVisibility","push","Menu","Item","icon","hideColumn","columnPosition","externalFrozenColumnsCount","isSomeExternalColumnFrozen","freeAllColumns","freezeColumns","key","unfreezeColumns","useEffect","totalFrozenColumnsCount","setColumnPinning","left","slice","map","right","menuProps","trigger","IconButton","onChange","customMenu","customItems","Children","toArray","children","Separator","menuComponent","Content","item","cloneElement"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js

@@ -21,8 +21,9 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultWidth) {
-          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
+        const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        if (defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = defaultWidth;
         }
         if (child.props.defaultHidden && options.enableColumnHiding) {
           defaultColumnVisibility[child.props.accessor] = false;
@@ -58,7 +59,7 @@ function useColumnDefinitions(children, options, tableRef) {
             className: child.props.className,
             control: child.props.control,
             dataType: child.props.dataType,
-            defaultWidth: child.props.defaultWidth,
+            defaultWidth,
             disableReordering: child.props.disableReordering,
             menu: child.props.menu,
             tooltip: child.props.tooltip

package/dist/esm/packages/taco/src/components/Table2/hooks/useColumnDefinitions.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    SortFn,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionRenderer,\n} from '../types';\nimport {\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number;\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionRenderer<TType>[];\n    actionsForRowLength: number;\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnFreezing: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        let internalFrozenColumnCount = 0;\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth: child.props.defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            internalFrozenColumnCount++;\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));\n        }\n\n        return { columns, internalFrozenColumnCount, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nfunction getSortingFn<TType>(dataType?: ColumnDataType, customFn?: SortFn<TType>): SortingFnOption<TType> {\n    if (customFn) {\n        return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);\n    }\n\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n}\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","internalFrozenColumnCount","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","props","defaultWidth","accessor","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","sortFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","createRowDraggableColumn","actionsForRow","length","createRowActionsColumn","actionsForRowLength","customFn","rowA","rowB","columnId"],"mappings":"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"}
+{"version":3,"file":"useColumnDefinitions.js","sources":["../../../../../../../../src/components/Table2/hooks/useColumnDefinitions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    createColumnHelper,\n    ColumnSort,\n    ColumnSizingState,\n    Row,\n    RowData,\n    VisibilityState,\n    SortingFnOption,\n    Table,\n} from '@tanstack/react-table';\nimport {\n    CellAlignment,\n    ColumnDataType,\n    RowDragHandler,\n    RowExpansionRenderer,\n    SortFn,\n    Table2Children,\n    Table2ColumnControlRenderer,\n    Table2ColumnFooterRenderer,\n    Table2ColumnHeaderMenu,\n    Table2ColumnProps,\n    Table2RowActionRenderer,\n} from '../types';\nimport {\n    createRowActionsColumn,\n    createRowDraggableColumn,\n    createRowExpansionColumn,\n    createRowSelectionColumn,\n    MIN_COLUMN_SIZE,\n} from '../utilities/columns';\nimport { useLocalization } from '../../Provider/Localization';\n\ndeclare module '@tanstack/table-core' {\n    interface ColumnMeta<TData extends RowData, TValue> {\n        align?: CellAlignment;\n        className?: string | ((row: Row<TData>, table: Table<TData>) => string);\n        control?: Table2ColumnControlRenderer;\n        dataType?: ColumnDataType;\n        disableReordering?: boolean;\n        defaultWidth?: number | 'grow';\n        headerClassName?: string;\n        menu?: Table2ColumnHeaderMenu;\n        tooltip?: string;\n    }\n}\n\ntype useColumnDefinitionsOptions<TType> = {\n    actionsForRow: Table2RowActionRenderer<TType>[];\n    actionsForRowLength: number;\n    enableColumnFiltering: boolean;\n    enableColumnHiding: boolean;\n    enableColumnFreezing: boolean;\n    enableRowExpansion: boolean;\n    enableRowSelection: boolean;\n    enableMultipleRowSelection: boolean;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n};\n\nexport function useColumnDefinitions<TType = any>(\n    children: Table2Children,\n    options: useColumnDefinitionsOptions<TType>,\n    tableRef: React.RefObject<HTMLDivElement>\n) {\n    const { texts } = useLocalization();\n    const lastSelectedRowIndex = React.useRef<number>();\n    const columnHelper = createColumnHelper<TType>();\n\n    return React.useMemo(() => {\n        let internalFrozenColumnCount = 0;\n        // cannot be typed correctly until https://github.com/TanStack/table/discussions/4530 is resolved\n        const columns: any[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n        const footers: Record<string, Table2ColumnFooterRenderer> = {};\n\n        (React.Children.toArray(children) as React.ReactElement<Table2ColumnProps<TType>>[])\n            .filter((child: any) => !!child)\n            .forEach(child => {\n                if (React.isValidElement(child)) {\n                    const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;\n\n                    if (defaultWidth) {\n                        defaultColumnSizing[child.props.accessor] = defaultWidth as any;\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    if (child.props.footer) {\n                        footers[child.props.accessor] = child.props.footer;\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor,\n                        cell: props => {\n                            let value = props.getValue();\n\n                            if (typeof child.props.renderer === 'function') {\n                                value = child.props.renderer(value, props.row.original);\n                            }\n\n                            if (typeof value === 'string' || typeof value === 'number') {\n                                return <span className=\"truncate\">{value}</span>;\n                            }\n\n                            return value ?? null;\n                        },\n                        header: child.props.header,\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            defaultWidth,\n                            disableReordering: child.props.disableReordering,\n                            menu: child.props.menu,\n                            tooltip: child.props.tooltip,\n                        },\n                        enableHiding: !child.props.disableHiding,\n                        // filtering\n                        enableColumnFilter: !child.props.disableFiltering,\n                        filterFn:\n                            options.enableColumnFiltering && !child.props.disableFiltering ? ('tacoFilter' as any) : undefined,\n                        // sizing\n                        enableResizing: !child.props.disableResizing,\n                        minSize: child.props.minWidth ?? MIN_COLUMN_SIZE,\n                        size: child.props.defaultWidth,\n                        // sorting\n                        enableSorting: !child.props.disableSorting,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && options.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(options.expandedRowRenderer, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn(\n                        options.enableMultipleRowSelection,\n                        lastSelectedRowIndex,\n                        options.onRowDrag,\n                        tableRef,\n                        texts\n                    )\n                )\n            );\n            internalFrozenColumnCount++;\n        }\n\n        if (options.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDraggableColumn(options.onRowDrag, texts)));\n            internalFrozenColumnCount++;\n        }\n\n        if (options.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn(options.actionsForRow, options.actionsForRowLength, texts)));\n        }\n\n        return { columns, internalFrozenColumnCount, defaultColumnSizing, defaultColumnVisibility, defaultSorting, footers };\n    }, [children]);\n}\n\nfunction getSortingFn<TType>(dataType?: ColumnDataType, customFn?: SortFn<TType>): SortingFnOption<TType> {\n    if (customFn) {\n        return (rowA, rowB, columnId) => customFn(rowA.original, rowB.original, columnId);\n    }\n\n    if (dataType && dataType !== 'boolean') {\n        return dataType;\n    }\n\n    return 'auto';\n}\n"],"names":["useColumnDefinitions","children","options","tableRef","texts","useLocalization","lastSelectedRowIndex","React","useRef","columnHelper","createColumnHelper","useMemo","internalFrozenColumnCount","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","footers","Children","toArray","filter","child","forEach","isValidElement","defaultWidth","props","accessor","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","footer","accessorKey","cell","value","getValue","renderer","row","original","className","header","meta","align","control","dataType","disableReordering","menu","tooltip","enableHiding","disableHiding","enableColumnFilter","disableFiltering","filterFn","enableColumnFiltering","enableResizing","disableResizing","minSize","minWidth","MIN_COLUMN_SIZE","size","enableSorting","disableSorting","sortingFn","getSortingFn","sortFn","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableMultipleRowSelection","onRowDrag","createRowDraggableColumn","actionsForRow","length","createRowActionsColumn","actionsForRowLength","customFn","rowA","rowB","columnId"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js

@@ -11,7 +11,9 @@ const useGridTemplate = table => {
     } else if (isInternalColumn(column.id)) {
       size = `${column.getSize()}px`;
     } else if (width) {
-      if (isLastColumn) {
+      if (width === '1fr') {
+        size = 'minmax(max-content, 1fr)';
+      } else if (isLastColumn) {
         size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy

package/dist/esm/packages/taco/src/components/Table2/hooks/useGridTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n\n    return allVisibleColumns.reduce((accum, column, index) => {\n        let size;\n        const isLastColumn = index === allVisibleColumns.length - 1;\n        const width = table.getState().columnSizing[column.id];\n\n        if (column.id === COLUMN_ID_FOR_ACTIONS) {\n            size = `minmax(max-content, auto)`;\n        } else if (isInternalColumn(column.id)) {\n            size = `${column.getSize()}px`;\n        } else if (width) {\n            if (isLastColumn) {\n                size = `minmax(${width}px, auto)`;\n            } else if (column.columnDef.minSize && width < column.columnDef.minSize) {\n                // react-table is supposed to handle minSize itself but it is really buggy\n                size = `${column.columnDef.minSize}px`;\n            } else {\n                size = `${width}px`;\n            }\n        } else if (column.getCanResize()) {\n            size = 'minmax(max-content, auto)';\n        } else {\n            size = 'max-content';\n        }\n\n        return `${accum} ${size}`;\n    }, '');\n};\n"],"names":["useGridTemplate","table","allVisibleColumns","getVisibleLeafColumns","reduce","accum","column","index","size","isLastColumn","length","width","getState","columnSizing","id","COLUMN_ID_FOR_ACTIONS","isInternalColumn","getSize","columnDef","minSize","getCanResize"],"mappings":";;MAGaA,eAAe,GAAIC,KAAiB;EAC7C,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EAEvD,OAAOD,iBAAiB,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;IACjD,IAAIC,IAAI;IACR,MAAMC,YAAY,GAAGF,KAAK,KAAKL,iBAAiB,CAACQ,MAAM,GAAG,CAAC;IAC3D,MAAMC,KAAK,GAAGV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,CAACP,MAAM,CAACQ,EAAE,CAAC;IAEtD,IAAIR,MAAM,CAACQ,EAAE,KAAKC,qBAAqB,EAAE;MACrCP,IAAI,8BAA8B;KACrC,MAAM,IAAIQ,gBAAgB,CAACV,MAAM,CAACQ,EAAE,CAAC,EAAE;MACpCN,IAAI,MAAMF,MAAM,CAACW,OAAO,MAAM;KACjC,MAAM,IAAIN,KAAK,EAAE;MACd,IAAIF,YAAY,EAAE;QACdD,IAAI,aAAaG,gBAAgB;OACpC,MAAM,IAAIL,MAAM,CAACY,SAAS,CAACC,OAAO,IAAIR,KAAK,GAAGL,MAAM,CAACY,SAAS,CAACC,OAAO,EAAE;;QAErEX,IAAI,MAAMF,MAAM,CAACY,SAAS,CAACC,WAAW;OACzC,MAAM;QACHX,IAAI,MAAMG,SAAS;;KAE1B,MAAM,IAAIL,MAAM,CAACc,YAAY,EAAE,EAAE;MAC9BZ,IAAI,GAAG,2BAA2B;KACrC,MAAM;MACHA,IAAI,GAAG,aAAa;;IAGxB,UAAUH,SAASG,MAAM;GAC5B,EAAE,EAAE,CAAC;AACV;;;;"}
+{"version":3,"file":"useGridTemplate.js","sources":["../../../../../../../../src/components/Table2/hooks/useGridTemplate.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport { COLUMN_ID_FOR_ACTIONS, isInternalColumn } from '../utilities/columns';\n\nexport const useGridTemplate = (table: Table<any>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n\n    return allVisibleColumns.reduce((accum, column, index) => {\n        let size;\n        const isLastColumn = index === allVisibleColumns.length - 1;\n        const width = table.getState().columnSizing[column.id] as number | '1fr';\n\n        if (column.id === COLUMN_ID_FOR_ACTIONS) {\n            size = `minmax(max-content, auto)`;\n        } else if (isInternalColumn(column.id)) {\n            size = `${column.getSize()}px`;\n        } else if (width) {\n            if (width === '1fr') {\n                size = 'minmax(max-content, 1fr)';\n            } else if (isLastColumn) {\n                size = `minmax(${width}px, auto)`;\n            } else if (column.columnDef.minSize && width < column.columnDef.minSize) {\n                // react-table is supposed to handle minSize itself but it is really buggy\n                size = `${column.columnDef.minSize}px`;\n            } else {\n                size = `${width}px`;\n            }\n        } else if (column.getCanResize()) {\n            size = 'minmax(max-content, auto)';\n        } else {\n            size = 'max-content';\n        }\n\n        return `${accum} ${size}`;\n    }, '');\n};\n"],"names":["useGridTemplate","table","allVisibleColumns","getVisibleLeafColumns","reduce","accum","column","index","size","isLastColumn","length","width","getState","columnSizing","id","COLUMN_ID_FOR_ACTIONS","isInternalColumn","getSize","columnDef","minSize","getCanResize"],"mappings":";;MAGaA,eAAe,GAAIC,KAAiB;EAC7C,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EAEvD,OAAOD,iBAAiB,CAACE,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;IACjD,IAAIC,IAAI;IACR,MAAMC,YAAY,GAAGF,KAAK,KAAKL,iBAAiB,CAACQ,MAAM,GAAG,CAAC;IAC3D,MAAMC,KAAK,GAAGV,KAAK,CAACW,QAAQ,EAAE,CAACC,YAAY,CAACP,MAAM,CAACQ,EAAE,CAAmB;IAExE,IAAIR,MAAM,CAACQ,EAAE,KAAKC,qBAAqB,EAAE;MACrCP,IAAI,8BAA8B;KACrC,MAAM,IAAIQ,gBAAgB,CAACV,MAAM,CAACQ,EAAE,CAAC,EAAE;MACpCN,IAAI,MAAMF,MAAM,CAACW,OAAO,MAAM;KACjC,MAAM,IAAIN,KAAK,EAAE;MACd,IAAIA,KAAK,KAAK,KAAK,EAAE;QACjBH,IAAI,GAAG,0BAA0B;OACpC,MAAM,IAAIC,YAAY,EAAE;QACrBD,IAAI,aAAaG,gBAAgB;OACpC,MAAM,IAAIL,MAAM,CAACY,SAAS,CAACC,OAAO,IAAIR,KAAK,GAAGL,MAAM,CAACY,SAAS,CAACC,OAAO,EAAE;;QAErEX,IAAI,MAAMF,MAAM,CAACY,SAAS,CAACC,WAAW;OACzC,MAAM;QACHX,IAAI,MAAMG,SAAS;;KAE1B,MAAM,IAAIL,MAAM,CAACc,YAAY,EAAE,EAAE;MAC9BZ,IAAI,GAAG,2BAA2B;KACrC,MAAM;MACHA,IAAI,GAAG,aAAa;;IAGxB,UAAUH,SAASG,MAAM;GAC5B,EAAE,EAAE,CAAC;AACV;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number;\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number | 'grow';\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { getButtonClasses } from '../Button/util.js';
 import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
 
 const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
@@ -11,7 +12,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
@@ -26,7 +27,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4', 'aria-orientation-horizontal:border-b', 'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ', props.className);
   return /*#__PURE__*/createElement(List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -34,19 +35,31 @@ const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // vertical
+  '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/createElement(Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
@@ -54,7 +67,7 @@ const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { Orientation } from '../../types';\nimport { getButtonClasses } from '../Button/util';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'border-grey-300 flex flex-row m-0 mb-4',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col ',\n        props.className\n    );\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, ...otherProps } = props;\n\n    const triggerClassName = cn(\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // horizontal\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:-mb-px [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:-mr-px [[aria-orientation=\"vertical\"]_&]:w-0.5'\n    );\n\n    return (\n        <TabsPrimitive.Trigger {...otherProps} className={triggerClassName} disabled={disabled} ref={ref} value={id}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </TabsPrimitive.Trigger>\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('[&[data-orientation=\"vertical\"]]:grow outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","triggerClassName","buttonClassName","getButtonClasses","activeClassName","TabContent","List","Trigger","Content"],"mappings":";;;;;MA8DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB;IACI,aAAa,EAAEH,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAChB,wCAAwC,EACxC,sCAAsC,EACtC,qIAAqI,EACrIT,KAAK,CAACQ,SAAS,CAClB;EAED,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEG,QAAQ;IAAEF,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAEvD,MAAMmB,gBAAgB,GAAGV,EAAE,CACvB,sFAAsF;;EAEtF,0CAA0C;;EAE1C,wCAAwC,CAC3C;EACD,MAAMW,eAAe,GAAGX,EAAE,CACtBY,gBAAgB,EAAE,EAClB,6GAA6G,CAChH;EACD,MAAMC,eAAe,GAAGb,EAAE,CACtB,0EAA0E;;EAE1E,2QAA2Q;;EAE3Q,8PAA8P,CACjQ;EAED,oBACIV,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEW,gBAAgB;IAAED,QAAQ,EAAEA,QAAQ;IAAEjB,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;mBACrGH;IAAMS,SAAS,EAAEY;KAAkBhB,QAAQ,CAAQ,eACnDL;IAAMS,SAAS,EAAEc;IAAmB,CAChB;AAEhC,CAAC,CAAC;AAEF,MAAMC,UAAU,gBAAGxB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,oDAAoD,EAAET,KAAK,CAACQ,SAAS,CAAC;EAE3F,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAAC0B,IAAI,GAAGT,OAAO;AACnBjB,IAAI,CAAC2B,OAAO,GAAGR,UAAU;AACzBnB,IAAI,CAAC4B,OAAO,GAAGH,UAAU;;;;"}

package/dist/index.css

@@ -638,23 +638,3 @@
 #yt-table__drag__placeholder {
     @apply flex w-3/12 rounded bg-blue-500 p-4 font-bold text-white;
 }
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply m-0 mr-4 flex-col border-0 border-r;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply h-8 py-0;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__list {
-    @apply flex-initial;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__panel {
-    @apply flex-grow;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply rounded-none rounded-l border-0 border-r-2;
-}