@economic/taco 2.12.1 → 2.13.0

package/dist/esm/packages/taco/src/components/Table3/components/columns/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport const SORT_DIRECTION: Record<string, Table3SortDirection> = {\n    ASC: 'asc',\n    DESC: 'desc',\n};\n\nexport type HeaderSortDirection = Table3SortDirection | false;\nexport type SortToggleHandler = (sortDirection: HeaderSortDirection) => void;\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n    const hasGoto = isGotoAvailable(table, header);\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleSortToggle = React.useCallback((sortDirection: HeaderSortDirection) => {\n        // When sorting is not applied, sortDirection is false.\n        if (sortDirection === false) {\n            header.column.clearSorting();\n        } else {\n            header.column.toggleSorting(sortDirection === SORT_DIRECTION.DESC);\n        }\n    }, []);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isPrinting: tableMeta.isPrinting,\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    hasMenu: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isPrinting: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    onSortToggle: SortToggleHandler;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: HeaderSortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        hasMenu,\n        id,\n        index,\n        isFrozen,\n        isPrinting,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold box-content group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-10 items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || hasMenu,\n            'focus-within:bg-grey-100': hasMenu,\n            '!pointer-events-all !bg-grey-100': isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            '!z-30': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isInternalColumn(id) ? (\n                children\n            ) : (\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    canSort={canSort}\n                    className={cn({\n                        'ml-auto': align !== 'right',\n                        'ml-2': align === 'right',\n                    })}\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    onSortToggle={handleSortToggle}\n                    scrollToIndex={scrollToIndex}\n                    sortDirection={sortDirection}\n                    table={table}\n                />\n            ) : null}\n            {canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n"],"names":["SORT_DIRECTION","ASC","DESC","Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","hasGoto","isGotoAvailable","handleHide","getToggleVisibilityHandler","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleSortToggle","useCallback","sortDirection","clearSorting","toggleSorting","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isPrinting","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","onSortToggle","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Header.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, HeaderContext, TableMeta } from '@tanstack/react-table';\nimport { Menu, isMenuAvailable, isGotoAvailable } from './Menu';\nimport { Resizer } from './Resizer';\nimport { Table3ColumnAlignment, Table3SortDirection, TableStrategy } from '../../../types';\nimport { getSortAttributes, SortIndicator } from './SortIndicator';\nimport { isFrozenColumn, isInternalColumn } from '../../../util/columns';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport const SORT_DIRECTION: Record<string, Table3SortDirection> = {\n    ASC: 'asc',\n    DESC: 'desc',\n};\n\nexport type HeaderSortDirection = Table3SortDirection | false;\nexport type SortToggleHandler = (sortDirection: HeaderSortDirection) => void;\n\nexport type HeaderProps<TType = unknown> = HeaderContext<TType, unknown> & {\n    children?: string | JSX.Element;\n    hasSeparator?: boolean;\n};\n\nexport function Header<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, hasSeparator, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const canSort = column.getCanSort();\n    const hasGoto = isGotoAvailable(table, header);\n\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleSortToggle = React.useCallback((sortDirection: HeaderSortDirection) => {\n        // When sorting is not applied, sortDirection is false.\n        if (sortDirection === false) {\n            header.column.clearSorting();\n        } else {\n            header.column.toggleSorting(sortDirection === SORT_DIRECTION.DESC);\n        }\n    }, []);\n\n    const sorting = table.getState().sorting;\n    const filters = table.getState().columnFilters;\n    const search = table.getState().globalFilter;\n\n    const handleGoto = React.useMemo(() => {\n        if (hasGoto) {\n            return ((query: string) => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search)) as (\n                query: string\n            ) => Promise<number>;\n        }\n\n        return undefined;\n    }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);\n\n    const memoedProps = {\n        align: columnMeta.align,\n        canFreeze: tableMeta.columnFreezing.isEnabled,\n        canHide: column.getCanHide(),\n        canResize: column.getCanResize(),\n        canSort,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasMenu: isMenuAvailable<TType>(table, header),\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isFrozen: isFrozenColumn(header, table),\n        isPlaceholder: header.isPlaceholder,\n        isPrinting: tableMeta.isPrinting,\n        isResizing: column.getIsResizing(),\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort as (event: unknown) => void,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        sortDirection: column.getIsSorted(),\n        table,\n    };\n\n    return <MemoedHeader<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedHeaderProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header'> & {\n    align?: Table3ColumnAlignment;\n    canFreeze: boolean;\n    canHide: boolean;\n    canResize: boolean;\n    canSort: boolean;\n    colSpan: number;\n    hasMenu: boolean;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isFrozen: boolean;\n    isPlaceholder: boolean;\n    isPrinting: boolean;\n    isResizing: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    onResize: (event: unknown) => void;\n    onSort: (event: unknown) => void;\n    onSortToggle: SortToggleHandler;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: HeaderSortDirection;\n};\n\nconst MemoedHeader = React.memo(function MemoedHeader<TType = unknown>(props: MemoedHeaderProps<TType>) {\n    const {\n        align,\n        children,\n        canFreeze,\n        canHide,\n        canResize,\n        canSort,\n        colSpan,\n        hasMenu,\n        hasSeparator,\n        id,\n        index,\n        isFrozen,\n        isPlaceholder,\n        isPrinting,\n        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        onSortToggle: handleSortToggle,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky font-bold border-b-2 box-content group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            '!border-white': isPlaceholder,\n            'h-10 items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': !isPlaceholder && (canSort || canResize || hasMenu),\n            'focus-within:bg-grey-100': hasMenu,\n            '!pointer-events-all !bg-grey-100': !isPlaceholder && isResizing,\n            // z-indexes\n            'z-10 hover:z-20': !isFrozen && !isResizing,\n            'z-20': !isFrozen && isResizing,\n            // when column is frozen, we need to increase it's z-index when it's hovered,\n            // so that resize handler appears on top of next frozen cell, and didn't get cut by it.\n            '!z-30 hover:!z-40': isFrozen,\n            '!z-40': isFrozen && isResizing,\n        },\n        colSpan > 1 ? `col-span-${colSpan}` : '',\n        meta.headerClassName\n    );\n\n    const [internalRef, setInternalRef] = React.useState<HTMLDivElement | null>(null);\n\n    React.useLayoutEffect(() => {\n        if (internalRef && length) {\n            // the actions column size gets set by the column itself\n            if (isInternalColumn(id)) {\n                return;\n            }\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [id]: internalRef.getBoundingClientRect().width,\n            }));\n        }\n    }, [internalRef, length]);\n\n    if (table.options.debugAll) {\n        console.log('header render', id);\n    }\n    return (\n        <div\n            {...(canSort ? getSortAttributes(handleSort, sortDirection) : undefined)}\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            role=\"columnheader\"\n            ref={setInternalRef}>\n            {isPlaceholder ? null : (\n                <>\n                    {isInternalColumn(id) ? (\n                        children\n                    ) : (\n                        <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                            <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                        </Tooltip>\n                    )}\n                    {canSort ? <SortIndicator direction={sortDirection} /> : null}\n                    {hasMenu ? (\n                        <Menu\n                            canFreeze={canFreeze}\n                            canHide={canHide}\n                            canSort={canSort}\n                            className={cn({\n                                'ml-auto': align !== 'right',\n                                'ml-2': align === 'right',\n                            })}\n                            index={index}\n                            menu={meta.menu}\n                            onGoto={handleGoto}\n                            onHide={handleHide}\n                            onSortToggle={handleSortToggle}\n                            scrollToIndex={scrollToIndex}\n                            sortDirection={sortDirection}\n                            table={table}\n                        />\n                    ) : null}\n                </>\n            )}\n            {/* Header separator need to go before Resizer to prevent it's overlapping */}\n            {hasSeparator ? <HeaderSeparator /> : null}\n            {!isPlaceholder && canResize ? <Resizer isResizing={isResizing} onResize={handleResize} /> : null}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedHeaderProps<TType>) => JSX.Element;\n\nexport function HeaderSeparator() {\n    return (\n        <div\n            data-taco=\"header-separator\"\n            className={cn(\n                'invisible absolute right-[0.5px] top-0 flex h-full w-2 touch-none select-none justify-center py-2 group-hover/header:visible'\n            )}>\n            <div className={cn('bg-grey-300 h-full w-[1px]')} />\n        </div>\n    );\n}\n"],"names":["SORT_DIRECTION","ASC","DESC","Header","props","children","column","header","hasSeparator","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","hasGoto","isGotoAvailable","handleHide","getToggleVisibilityHandler","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleSortToggle","useCallback","sortDirection","clearSorting","toggleSorting","sorting","getState","filters","columnFilters","search","globalFilter","handleGoto","query","rowGoto","id","undefined","JSON","stringify","memoedProps","align","canFreeze","columnFreezing","isEnabled","canHide","getCanHide","canResize","getCanResize","colSpan","hasMenu","isMenuAvailable","index","isFrozen","isFrozenColumn","isPlaceholder","isPrinting","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","onSortToggle","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","isInternalColumn","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","SortIndicator","direction","Menu","menu","HeaderSeparator","Resizer"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js

@@ -17,6 +17,7 @@ const savingIndicatorHideDelay = 3000;
 const COLUMN_ID = '__editing_actions';
 const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
+    hasChanges,
     isCurrentRow,
     isEditing,
     row,
@@ -25,8 +26,6 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const tableMeta = table.options.meta;
   const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
   const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
-  const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
-  const isRowInEditingState = changeset.indexOf(row.id) >= 0;
   const {
     texts
   } = useLocalization();
@@ -48,14 +47,14 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
         title: texts.table3.editing.saving.progress
       }, /*#__PURE__*/React__default.createElement(Spinner, {
         delay: 0,
-        className: "!text-grey-700 mr-1.5 !h-5 !w-5"
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
       }));
     } else if (isSavedIndicatorVisible) {
       content = /*#__PURE__*/React__default.createElement(Tooltip, {
         title: texts.table3.editing.saving.complete
       }, /*#__PURE__*/React__default.createElement(Icon, {
         name: "tick",
-        className: "!text-grey-700 mr-1"
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
       }));
     }
   }
@@ -66,11 +65,11 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       icon: "more",
       menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
         icon: "tick",
-        disabled: !isRowInEditingState,
+        disabled: !hasChanges,
         onClick: () => tableMeta.editing.saveChangesIfNeeded()
       }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
         icon: "close",
-        disabled: !isRowInEditingState,
+        disabled: !hasChanges,
         onClick: () => tableMeta.editing.resetChange(row.id)
       }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
         icon: "undo",
@@ -79,12 +78,15 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       tabIndex: isCurrentRow ? 0 : -1
     }));
   }
+  const contentClassName = cn('flex items-center justify-end text-right', {
+    '-mb-2 -mt-2': isCurrentRow
+  });
   return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
     className: cn({
       '!sticky': !!content
     })
   }), content ? /*#__PURE__*/React__default.createElement("span", {
-    className: "-mb-2 -mt-2 flex items-center justify-end text-right"
+    className: contentClassName
   }, content) : undefined);
 });
 function Cell(props) {
@@ -92,12 +94,14 @@ function Cell(props) {
     rowIndex
   } = React__default.useContext(RowContext);
   const tableMeta = props.table.options.meta;
+  const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
   return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, props, {
+    hasChanges: changeset.indexOf(props.row.id) >= 0,
     isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
     isEditing: tableMeta.editing.isEditing
   }));
 }
-const EDITING_ACTIONS_WIDTH = 45;
+const EDITING_ACTIONS_WIDTH = 60;
 function createRowEditingActionsColumn() {
   return {
     id: COLUMN_ID,
@@ -106,7 +110,7 @@ function createRowEditingActionsColumn() {
     footer: Footer,
     meta: {
       align: 'right',
-      className: cn('items-center print:opacity-0 [[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="true"]_&]:group-hover/row:shadow-[-6px_0px_6px]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      className: cn('items-center print:opacity-0 [[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,

package/dist/esm/packages/taco/src/components/Table3/components/columns/internal/EditingActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingActions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/EditingActions.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { CellContext, TableMeta, DisplayColumnDef } from '@tanstack/react-table';\nimport { Spinner } from '../../../../Spinner/Spinner';\nimport { SavingStateValue } from '../../../hooks/features/useEditing';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { RowContext } from '../../rows/RowContext';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { Footer } from '../footer/Footer';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport useTimer from '../../../../../utils/hooks/useTimer';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type EditingActionsProps<TType = unknown> = CellContext<TType, unknown> & {\n    className?: string;\n    isHovered: boolean;\n};\n\nconst savingIndicatorHideDelay = 3000;\n\nexport const COLUMN_ID = '__editing_actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    isCurrentRow: boolean;\n    isEditing: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { isCurrentRow, isEditing, row, table } = props;\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];\n    const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n    const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n    const isRowInEditingState = changeset.indexOf(row.id) >= 0;\n    const { texts } = useLocalization();\n\n    const handleSaved = () => {\n        setIsSavingIndicatorVisible(false);\n        tableMeta.editing.removeSavingState(row.id);\n    };\n    const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n    React.useEffect(() => {\n        if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {\n            setIsSavingIndicatorVisible(true);\n            timer.start();\n        }\n    }, [savingState]);\n\n    let content;\n\n    if (savingState) {\n        if (savingState.state === SavingStateValue.Saving) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.progress}>\n                    <Spinner delay={0} className=\"!text-grey-700 mr-1.5 !h-5 !w-5\" />\n                </Tooltip>\n            );\n        } else if (isSavedIndicatorVisible) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.complete}>\n                    <Icon name=\"tick\" className=\"!text-grey-700 mr-1\" />\n                </Tooltip>\n            );\n        }\n    }\n\n    if (isEditing && isCurrentRow) {\n        content = (\n            <>\n                {content}\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table3.editing.actions.tooltip}\n                    icon=\"more\"\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                <Menu.Item\n                                    icon=\"tick\"\n                                    disabled={!isRowInEditingState}\n                                    onClick={() => tableMeta.editing.saveChangesIfNeeded()}>\n                                    {texts.table3.editing.actions.save}\n                                </Menu.Item>\n                                <Menu.Item\n                                    icon=\"close\"\n                                    disabled={!isRowInEditingState}\n                                    onClick={() => tableMeta.editing.resetChange(row.id)}>\n                                    {texts.table3.editing.actions.clear}\n                                </Menu.Item>\n                                <Menu.Item icon=\"undo\" onClick={() => tableMeta.editing.toggleEditing(false)}>\n                                    {texts.table3.editing.actions.exit}\n                                </Menu.Item>\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                    tabIndex={isCurrentRow ? 0 : -1}\n                />\n            </>\n        );\n    }\n\n    return (\n        <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n            {content ? <span className=\"-mb-2 -mt-2 flex items-center justify-end text-right\">{content}</span> : undefined}\n        </DisplayCell>\n    );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n\n    return (\n        <MemoedCell\n            {...props}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isEditing={tableMeta.editing.isEditing}\n        />\n    );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 45;\n\nexport function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'right',\n            className: cn(\n                'items-center print:opacity-0 [[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:sticky right-0 !pl-0 !pr-1',\n                '[[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"true\"]_&]:group-hover/row:shadow-[-6px_0px_6px]',\n                'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n                'group-[[data-selected=\"true\"]]/row:text-blue-100',\n                'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n            ),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !p-0',\n        },\n        // options\n        enableResizing: false,\n        size: EDITING_ACTIONS_WIDTH,\n        minSize: EDITING_ACTIONS_WIDTH,\n    };\n}\n"],"names":["savingIndicatorHideDelay","COLUMN_ID","MemoedCell","React","memo","props","isCurrentRow","isEditing","row","table","tableMeta","options","meta","savingState","editing","savingStates","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","changeset","changes","Object","keys","isRowInEditingState","indexOf","texts","useLocalization","handleSaved","removeSavingState","timer","useTimer","useEffect","state","SavingStateValue","Saved","start","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","className","complete","Icon","name","IconButton","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","resetChange","clear","toggleEditing","exit","tabIndex","DisplayCell","cn","undefined","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
+{"version":3,"file":"EditingActions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/EditingActions.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { CellContext, TableMeta, DisplayColumnDef } from '@tanstack/react-table';\nimport { Spinner } from '../../../../Spinner/Spinner';\nimport { SavingStateValue } from '../../../hooks/features/useEditing';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { RowContext } from '../../rows/RowContext';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { Footer } from '../footer/Footer';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport useTimer from '../../../../../utils/hooks/useTimer';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport type EditingActionsProps<TType = unknown> = CellContext<TType, unknown> & {\n    className?: string;\n    isHovered: boolean;\n};\n\nconst savingIndicatorHideDelay = 3000;\n\nexport const COLUMN_ID = '__editing_actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    hasChanges: boolean;\n    isCurrentRow: boolean;\n    isEditing: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { hasChanges, isCurrentRow, isEditing, row, table } = props;\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];\n    const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n    const { texts } = useLocalization();\n\n    const handleSaved = () => {\n        setIsSavingIndicatorVisible(false);\n        tableMeta.editing.removeSavingState(row.id);\n    };\n    const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n    React.useEffect(() => {\n        if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {\n            setIsSavingIndicatorVisible(true);\n            timer.start();\n        }\n    }, [savingState]);\n\n    let content;\n\n    if (savingState) {\n        if (savingState.state === SavingStateValue.Saving) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.progress}>\n                    <Spinner delay={0} className=\"!text-grey-700 mr-1 !h-5 !w-5\" />\n                </Tooltip>\n            );\n        } else if (isSavedIndicatorVisible) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.complete}>\n                    <Icon name=\"tick\" className=\"!text-grey-700 mr-1 !h-5 !w-5\" />\n                </Tooltip>\n            );\n        }\n    }\n\n    if (isEditing && isCurrentRow) {\n        content = (\n            <>\n                {content}\n                <IconButton\n                    appearance=\"transparent\"\n                    aria-label={texts.table3.editing.actions.tooltip}\n                    icon=\"more\"\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                <Menu.Item\n                                    icon=\"tick\"\n                                    disabled={!hasChanges}\n                                    onClick={() => tableMeta.editing.saveChangesIfNeeded()}>\n                                    {texts.table3.editing.actions.save}\n                                </Menu.Item>\n                                <Menu.Item\n                                    icon=\"close\"\n                                    disabled={!hasChanges}\n                                    onClick={() => tableMeta.editing.resetChange(row.id)}>\n                                    {texts.table3.editing.actions.clear}\n                                </Menu.Item>\n                                <Menu.Item icon=\"undo\" onClick={() => tableMeta.editing.toggleEditing(false)}>\n                                    {texts.table3.editing.actions.exit}\n                                </Menu.Item>\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                    tabIndex={isCurrentRow ? 0 : -1}\n                />\n            </>\n        );\n    }\n\n    const contentClassName = cn('flex items-center justify-end text-right', { '-mb-2 -mt-2': isCurrentRow });\n    return (\n        <DisplayCell {...props} className={cn({ '!sticky': !!content })}>\n            {content ? <span className={contentClassName}>{content}</span> : undefined}\n        </DisplayCell>\n    );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n\n    return (\n        <MemoedCell\n            {...props}\n            hasChanges={changeset.indexOf(props.row.id) >= 0}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isEditing={tableMeta.editing.isEditing}\n        />\n    );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 60;\n\nexport function createRowEditingActionsColumn<TType = unknown>(): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'right',\n            className: cn(\n                'items-center print:opacity-0 [[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:sticky right-0 !pl-0 !pr-1',\n                '[[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n                'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n                'group-[[data-selected=\"true\"]]/row:text-blue-100',\n                'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n            ),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !p-0',\n        },\n        // options\n        enableResizing: false,\n        size: EDITING_ACTIONS_WIDTH,\n        minSize: EDITING_ACTIONS_WIDTH,\n    };\n}\n"],"names":["savingIndicatorHideDelay","COLUMN_ID","MemoedCell","React","memo","props","hasChanges","isCurrentRow","isEditing","row","table","tableMeta","options","meta","savingState","editing","savingStates","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","texts","useLocalization","handleSaved","removeSavingState","timer","useTimer","useEffect","state","SavingStateValue","Saved","start","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","className","complete","Icon","name","IconButton","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","resetChange","clear","toggleEditing","exit","tabIndex","contentClassName","cn","DisplayCell","undefined","Cell","rowIndex","useContext","RowContext","changeset","changes","Object","keys","indexOf","currentRow","currentRowIndex","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js

@@ -13,7 +13,7 @@ import { isInternalColumn } from '../../util/columns.js';
 import { ensureOrdering } from '../../hooks/features/useColumnOrdering.js';
 
 const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref) {
-  var _column$columnDef$met;
+  var _column$parent, _column$parent$column, _column$columnDef$met;
   const {
     column,
     draggable = false,
@@ -27,6 +27,7 @@ const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref
   });
   const attributes = draggable ? dragAttributes : undefined;
   const isVisible = column.getIsVisible();
+  const parentText = column.parent ? (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header : null;
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     key: column.id,
     className: className,
@@ -37,7 +38,9 @@ const Column = /*#__PURE__*/React__default.forwardRef(function Column(props, ref
     className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5"
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
-  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
+  }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header, parentText ? /*#__PURE__*/React__default.createElement("span", {
+    className: "italic"
+  }, " (", parentText, ")") : null), canHide ? /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: isVisible,
     onChange: () => column.toggleVisibility(!isVisible)
   }) : null);
@@ -55,8 +58,8 @@ function ColumnSettingsPopover(props) {
   const allColumns = table.getAllLeafColumns();
   const tableMeta = table.options.meta;
   const columns = React__default.useMemo(() => allColumns.filter(column => !isInternalColumn(column.id)).filter(column => {
-    var _column$columnDef$met2;
-    return query !== null && query !== void 0 && query.length ? (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase()) : true;
+    var _column$columnDef$met2, _column$parent2, _column$parent2$colum;
+    return query !== null && query !== void 0 && query.length ? ((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.header.toLowerCase().includes(query.toLowerCase())) || ((_column$parent2 = column.parent) === null || _column$parent2 === void 0 ? void 0 : (_column$parent2$colum = _column$parent2.columnDef.meta) === null || _column$parent2$colum === void 0 ? void 0 : _column$parent2$colum.header.toLowerCase().includes(query.toLowerCase())) : true;
   }), [allColumns, query]);
   const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';
   const handleReorder = (activeId, overId) => {
@@ -71,7 +74,7 @@ function ColumnSettingsPopover(props) {
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     anchor: trigger
   }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-60 flex-col gap-2"
+    className: "flex max-w-sm flex-col gap-2"
   }, table.options.enableHiding ? /*#__PURE__*/React__default.createElement(Input, {
     onChange: event => setQuery(event.target.value),
     placeholder: texts.table3.columnSettings.search,

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/ColumnSettings.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnSettings.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/ColumnSettings.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { isInternalColumn } from '../../util/columns';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { Popover, PopoverProps } from '../../../Popover/Popover';\nimport { Input } from '../../../Input/Input';\nimport * as SortablePrimitive from '../../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../../Icon/Icon';\nimport { ensureOrdering } from '../../hooks/features/useColumnOrdering';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, unknown>;\n    draggable?: boolean;\n};\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const isVisible = column.getIsVisible();\n\n    return (\n        <div {...attributes} key={column.id} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n            {draggable ? <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" /> : null}\n            <span className=\"flex-grow truncate\">{column.columnDef.meta?.header}</span>\n            {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n        </div>\n    );\n});\n\nexport type ColumnSettingsProps<TType = unknown> = PopoverProps & {\n    table: RTable<TType>;\n};\n\nexport function ColumnSettingsPopover<TType = unknown>(props: ColumnSettingsProps<TType>) {\n    const { table, trigger, ...popoverProps } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column =>\n                    query?.length ? column.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase()) : true\n                ),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.enableOrdering === false)) {\n            return;\n        }\n\n        table.setColumnOrder(currentOrder =>\n            ensureOrdering(\n                allColumns,\n                SortablePrimitive.arrayMove(\n                    currentOrder,\n                    currentOrder.findIndex(c => c === activeId),\n                    currentOrder.findIndex(c => c === overId)\n                )\n            )\n        );\n    };\n\n    return (\n        <Popover {...popoverProps} anchor={trigger}>\n            <Popover.Content>\n                <div className=\"flex w-60 flex-col gap-2\">\n                    {table.options.enableHiding ? (\n                        <Input\n                            onChange={event => setQuery(event.target.value)}\n                            placeholder={texts.table3.columnSettings.search}\n                            value={query}\n                        />\n                    ) : null}\n                    {tableMeta.columnOrdering.isEnabled && columns.length && !query?.length ? (\n                        <SortablePrimitive.Container reorder={handleReorder}>\n                            <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                {columns.map(column => (\n                                    <SortablePrimitive.Item\n                                        key={column.id}\n                                        id={column.id}\n                                        disabled={!column.columnDef.meta?.enableOrdering}\n                                        asChild>\n                                        <Column column={column as any} draggable={column.columnDef.meta?.enableOrdering} />\n                                    </SortablePrimitive.Item>\n                                ))}\n                            </SortablePrimitive.List>\n                        </SortablePrimitive.Container>\n                    ) : (\n                        <div className={listClassName}>\n                            {columns.length\n                                ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                : texts.table3.columnSettings.noResults}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["Column","React","forwardRef","props","ref","column","draggable","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","isVisible","getIsVisible","key","id","onClick","toggleVisibility","Icon","name","columnDef","meta","_column$columnDef$met","header","Checkbox","checked","onChange","ColumnSettingsPopover","table","trigger","popoverProps","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","columns","useMemo","filter","isInternalColumn","_column$columnDef$met2","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","_column$columnDef$met3","enableOrdering","setColumnOrder","currentOrder","ensureOrdering","SortablePrimitive","findIndex","c","Popover","anchor","Content","enableHiding","Input","event","target","value","placeholder","table3","columnSettings","search","columnOrdering","isEnabled","reorder","map","_column$columnDef$met4","_column$columnDef$met5","disabled","asChild","noResults"],"mappings":"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"}
+{"version":3,"file":"ColumnSettings.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/ColumnSettings.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Table as RTable, Column as RTColumn, TableMeta } from '@tanstack/react-table';\nimport { isInternalColumn } from '../../util/columns';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { Checkbox } from '../../../Checkbox/Checkbox';\nimport { Popover, PopoverProps } from '../../../Popover/Popover';\nimport { Input } from '../../../Input/Input';\nimport * as SortablePrimitive from '../../../../primitives/Sortable/Sortable';\nimport { Icon } from '../../../Icon/Icon';\nimport { ensureOrdering } from '../../hooks/features/useColumnOrdering';\n\ntype ColumnProps<TType = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, unknown>;\n    draggable?: boolean;\n};\n\nconst Column = React.forwardRef(function Column<TType = unknown>(props: ColumnProps<TType>, ref: React.Ref<HTMLDivElement>) {\n    const { column, draggable = false, ...dragAttributes } = props;\n    const canHide = column.getCanHide();\n\n    const className = cn('group/column flex items-center gap-x-2 rounded py-1 px-2', {\n        'hover:bg-grey-200': canHide || draggable,\n        'hover:cursor-pointer': canHide,\n        'active:cursor-move active:bg-grey-300': draggable,\n    });\n\n    const attributes = draggable ? dragAttributes : undefined;\n    const isVisible = column.getIsVisible();\n\n    const parentText = column.parent ? column.parent?.columnDef.meta?.header : null;\n\n    return (\n        <div {...attributes} key={column.id} className={className} onClick={() => column.toggleVisibility(!isVisible)} ref={ref}>\n            {draggable ? <Icon name=\"drag\" className=\"text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5\" /> : null}\n            <span className=\"flex-grow truncate\">\n                {column.columnDef.meta?.header}\n                {parentText ? <span className=\"italic\"> ({parentText})</span> : null}\n            </span>\n            {canHide ? <Checkbox checked={isVisible} onChange={() => column.toggleVisibility(!isVisible)} /> : null}\n        </div>\n    );\n});\n\nexport type ColumnSettingsProps<TType = unknown> = PopoverProps & {\n    table: RTable<TType>;\n};\n\nexport function ColumnSettingsPopover<TType = unknown>(props: ColumnSettingsProps<TType>) {\n    const { table, trigger, ...popoverProps } = props;\n    const { texts } = useLocalization();\n    const [query, setQuery] = React.useState('');\n    const allColumns = table.getAllLeafColumns();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const columns = React.useMemo(\n        () =>\n            allColumns\n                .filter(column => !isInternalColumn(column.id))\n                .filter(column =>\n                    query?.length\n                        ? column.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase()) ||\n                          column.parent?.columnDef.meta?.header.toLowerCase().includes(query.toLowerCase())\n                        : true\n                ),\n        [allColumns, query]\n    );\n\n    const listClassName = 'flex max-h-64 flex-col gap-y-px overflow-auto';\n\n    const handleReorder = (activeId, overId) => {\n        if (columns.find(column => column.id === overId && column.columnDef.meta?.enableOrdering === false)) {\n            return;\n        }\n\n        table.setColumnOrder(currentOrder =>\n            ensureOrdering(\n                allColumns,\n                SortablePrimitive.arrayMove(\n                    currentOrder,\n                    currentOrder.findIndex(c => c === activeId),\n                    currentOrder.findIndex(c => c === overId)\n                )\n            )\n        );\n    };\n\n    return (\n        <Popover {...popoverProps} anchor={trigger}>\n            <Popover.Content>\n                <div className=\"flex max-w-sm flex-col gap-2\">\n                    {table.options.enableHiding ? (\n                        <Input\n                            onChange={event => setQuery(event.target.value)}\n                            placeholder={texts.table3.columnSettings.search}\n                            value={query}\n                        />\n                    ) : null}\n                    {tableMeta.columnOrdering.isEnabled && columns.length && !query?.length ? (\n                        <SortablePrimitive.Container reorder={handleReorder}>\n                            <SortablePrimitive.List id=\"columns\" className={listClassName}>\n                                {columns.map(column => (\n                                    <SortablePrimitive.Item\n                                        key={column.id}\n                                        id={column.id}\n                                        disabled={!column.columnDef.meta?.enableOrdering}\n                                        asChild>\n                                        <Column column={column as any} draggable={column.columnDef.meta?.enableOrdering} />\n                                    </SortablePrimitive.Item>\n                                ))}\n                            </SortablePrimitive.List>\n                        </SortablePrimitive.Container>\n                    ) : (\n                        <div className={listClassName}>\n                            {columns.length\n                                ? columns.map(column => <Column column={column as any} key={column.id} />)\n                                : texts.table3.columnSettings.noResults}\n                        </div>\n                    )}\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["Column","React","forwardRef","props","ref","column","draggable","dragAttributes","canHide","getCanHide","className","cn","attributes","undefined","isVisible","getIsVisible","parentText","parent","_column$parent","_column$parent$column","columnDef","meta","header","key","id","onClick","toggleVisibility","Icon","name","_column$columnDef$met","Checkbox","checked","onChange","ColumnSettingsPopover","table","trigger","popoverProps","texts","useLocalization","query","setQuery","useState","allColumns","getAllLeafColumns","tableMeta","options","columns","useMemo","filter","isInternalColumn","_column$columnDef$met2","_column$parent2","_column$parent2$colum","length","toLowerCase","includes","listClassName","handleReorder","activeId","overId","find","_column$columnDef$met3","enableOrdering","setColumnOrder","currentOrder","ensureOrdering","SortablePrimitive","findIndex","c","Popover","anchor","Content","enableHiding","Input","event","target","value","placeholder","table3","columnSettings","search","columnOrdering","isEnabled","reorder","map","_column$columnDef$met4","_column$columnDef$met5","disabled","asChild","noResults"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js

@@ -1,4 +1,7 @@
 import React__default from 'react';
+import { Icon } from '../../../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
 import { Select2 } from '../../../../../../Select2/Select2.js';
 
 function FilterColumn(props) {
@@ -9,18 +12,27 @@ function FilterColumn(props) {
     value = null,
     ...attributes
   } = props;
+  const {
+    texts
+  } = useLocalization();
   return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
     className: "!w-32 flex-shrink-0",
     emptyValue: null,
     onChange: handleChange,
     value: value
   }), allColumns.map(column => {
-    var _column$columnDef$met;
+    var _column$columnDef$met, _column$parent, _column$parent$column;
     return /*#__PURE__*/React__default.createElement(Select2.Option, {
       key: column.id,
       value: column.id,
+      postfix: !column.getIsVisible() ? /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.filters.hiddenColumn
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "eye-off",
+        className: "text-grey-500"
+      })) : undefined,
       disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
-    }, (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header);
+    }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
   }));
 }
 

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, ColumnFiltersState } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<TType, unknown>[];\n    filters: ColumnFiltersState;\n};\n\nexport function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>) {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n\n    return (\n        <Select2 {...attributes} className=\"!w-32 flex-shrink-0\" emptyValue={null} onChange={handleChange} value={value}>\n            {allColumns.map(column => (\n                <Select2.Option\n                    key={column.id}\n                    value={column.id}\n                    disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                    {column.columnDef.meta?.header as string}\n                </Select2.Option>\n            ))}\n        </Select2>\n    );\n}\n"],"names":["FilterColumn","props","allColumns","filters","onChange","handleChange","value","attributes","React","Select2","className","emptyValue","map","column","_column$columnDef$met","Option","key","id","disabled","getCanFilter","find","f","columnDef","meta","header"],"mappings":";;;SASgBA,YAAYA,CAAkBC,KAA+B;EACzE,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAE1F,oBACIO,6BAACC,OAAO,oBAAKF,UAAU;IAAEG,SAAS,EAAC,qBAAqB;IAACC,UAAU,EAAE,IAAI;IAAEP,QAAQ,EAAEC,YAAY;IAAEC,KAAK,EAAEA;MACrGJ,UAAU,CAACU,GAAG,CAACC,MAAM;IAAA,IAAAC,qBAAA;IAAA,oBAClBN,6BAACC,OAAO,CAACM,MAAM;MACXC,GAAG,EAAEH,MAAM,CAACI,EAAE;MACdX,KAAK,EAAEO,MAAM,CAACI,EAAE;MAChBC,QAAQ,EAAEL,MAAM,CAACI,EAAE,KAAKX,KAAK,KAAK,CAACO,MAAM,CAACM,YAAY,EAAE,IAAI,CAAC,CAAChB,OAAO,CAACiB,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACJ,EAAE,KAAKJ,MAAM,CAACI,EAAE,CAAC;gCAClGJ,MAAM,CAACS,SAAS,CAACC,IAAI,cAAAT,qBAAA,uBAArBA,qBAAA,CAAuBU,MAAgB,CAC3B;GACpB,CAAC,CACI;AAElB;;;;"}
+{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, ColumnFiltersState } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Icon } from '../../../../../../Icon/Icon';\nimport { Tooltip } from '../../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<TType, unknown>[];\n    filters: ColumnFiltersState;\n};\n\nexport function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>) {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n    const { texts } = useLocalization();\n\n    return (\n        <Select2 {...attributes} className=\"!w-32 flex-shrink-0\" emptyValue={null} onChange={handleChange} value={value}>\n            {allColumns.map(column => (\n                <Select2.Option\n                    key={column.id}\n                    value={column.id}\n                    postfix={\n                        !column.getIsVisible() ? (\n                            <Tooltip title={texts.table3.filters.hiddenColumn}>\n                                <Icon name=\"eye-off\" className=\"text-grey-500\" />\n                            </Tooltip>\n                        ) : undefined\n                    }\n                    disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                    {(column.columnDef.meta?.header as string) +\n                        (column.parent ? ` (${column.parent?.columnDef.meta?.header})` : '')}\n                </Select2.Option>\n            ))}\n        </Select2>\n    );\n}\n"],"names":["FilterColumn","props","allColumns","filters","onChange","handleChange","value","attributes","texts","useLocalization","React","Select2","className","emptyValue","map","column","_column$columnDef$met","_column$parent","_column$parent$column","Option","key","id","postfix","getIsVisible","Tooltip","title","table3","hiddenColumn","Icon","name","undefined","disabled","getCanFilter","find","f","columnDef","meta","header","parent"],"mappings":";;;;;;SAYgBA,YAAYA,CAAkBC,KAA+B;EACzE,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC1F,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EAEnC,oBACIC,6BAACC,OAAO,oBAAKJ,UAAU;IAAEK,SAAS,EAAC,qBAAqB;IAACC,UAAU,EAAE,IAAI;IAAET,QAAQ,EAAEC,YAAY;IAAEC,KAAK,EAAEA;MACrGJ,UAAU,CAACY,GAAG,CAACC,MAAM;IAAA,IAAAC,qBAAA,EAAAC,cAAA,EAAAC,qBAAA;IAAA,oBAClBR,6BAACC,OAAO,CAACQ,MAAM;MACXC,GAAG,EAAEL,MAAM,CAACM,EAAE;MACdf,KAAK,EAAES,MAAM,CAACM,EAAE;MAChBC,OAAO,EACH,CAACP,MAAM,CAACQ,YAAY,EAAE,gBAClBb,6BAACc,OAAO;QAACC,KAAK,EAAEjB,KAAK,CAACkB,MAAM,CAACvB,OAAO,CAACwB;sBACjCjB,6BAACkB,IAAI;QAACC,IAAI,EAAC,SAAS;QAACjB,SAAS,EAAC;QAAkB,CAC3C,GACVkB,SAAS;MAEjBC,QAAQ,EAAEhB,MAAM,CAACM,EAAE,KAAKf,KAAK,KAAK,CAACS,MAAM,CAACiB,YAAY,EAAE,IAAI,CAAC,CAAC7B,OAAO,CAAC8B,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACb,EAAE,KAAKN,MAAM,CAACM,EAAE,CAAC;OACjG,EAAAL,qBAAA,GAAAD,MAAM,CAACoB,SAAS,CAACC,IAAI,cAAApB,qBAAA,uBAArBA,qBAAA,CAAuBqB,MAAiB,KACrCtB,MAAM,CAACuB,MAAM,0BAAQvB,MAAM,CAACuB,MAAM,cAAArB,cAAA,wBAAAC,qBAAA,GAAbD,cAAA,CAAekB,SAAS,CAACC,IAAI,cAAAlB,qBAAA,uBAA7BA,qBAAA,CAA+BmB,SAAS,GAAG,EAAE,CAAC,CAC3D;GACpB,CAAC,CACI;AAElB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useHeaderOffsetStyle.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+
+// header height: 40px, border bottom height: 2px;
+const HEADER_COLUMN_HEIGHT = 42;
+function getHeaderTopOffset(depth) {
+  return HEADER_COLUMN_HEIGHT * (depth - 1);
+}
+function useHeaderOffsetStyle(tableId, table) {
+  const headers = table.getFlatHeaders();
+  const style = React__default.useMemo(() => {
+    // 'new Set' will remove all duplicates and leave only unique values,
+    // in the end we should get only one depht value per array item, example: [1, 2, 3], which we will iterate through later.
+    const headerDepths = [...new Set(headers.map(header => header.depth))];
+    return headerDepths.map(depth => {
+      return `#${tableId} [data-taco="table2-header"] [role="row"]:nth-child(${depth}) [role="columnheader"],
+                #${tableId} [data-taco="table2-header"] [role="row"]:nth-child(${depth}) [data-taco="table3-column-group"]
+                    { top: ${getHeaderTopOffset(depth)}px }`;
+    }).join('\r\n');
+  }, [headers, tableId]);
+  return style;
+}
+
+export { getHeaderTopOffset, useHeaderOffsetStyle };
+//# sourceMappingURL=useHeaderOffsetStyle.js.map

package/dist/esm/packages/taco/src/components/Table3/hooks/features/useHeaderOffsetStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHeaderOffsetStyle.js","sources":["../../../../../../../../../src/components/Table3/hooks/features/useHeaderOffsetStyle.ts"],"sourcesContent":["import { Table } from '@tanstack/react-table';\nimport React from 'react';\n\n// header height: 40px, border bottom height: 2px;\nconst HEADER_COLUMN_HEIGHT = 42;\nexport function getHeaderTopOffset(depth: number) {\n    return HEADER_COLUMN_HEIGHT * (depth - 1);\n}\n\nexport function useHeaderOffsetStyle<TType = unknown>(tableId: string, table: Table<TType>) {\n    const headers = table.getFlatHeaders();\n\n    const style = React.useMemo(() => {\n        // 'new Set' will remove all duplicates and leave only unique values,\n        // in the end we should get only one depht value per array item, example: [1, 2, 3], which we will iterate through later.\n        const headerDepths = [...new Set(headers.map(header => header.depth))];\n        return headerDepths\n            .map(depth => {\n                return `#${tableId} [data-taco=\"table2-header\"] [role=\"row\"]:nth-child(${depth}) [role=\"columnheader\"],\n                #${tableId} [data-taco=\"table2-header\"] [role=\"row\"]:nth-child(${depth}) [data-taco=\"table3-column-group\"]\n                    { top: ${getHeaderTopOffset(depth)}px }`;\n            })\n            .join('\\r\\n');\n    }, [headers, tableId]);\n\n    return style;\n}\n"],"names":["HEADER_COLUMN_HEIGHT","getHeaderTopOffset","depth","useHeaderOffsetStyle","tableId","table","headers","getFlatHeaders","style","React","useMemo","headerDepths","Set","map","header","join"],"mappings":";;AAGA;AACA,MAAMA,oBAAoB,GAAG,EAAE;SACfC,kBAAkBA,CAACC,KAAa;EAC5C,OAAOF,oBAAoB,IAAIE,KAAK,GAAG,CAAC,CAAC;AAC7C;SAEgBC,oBAAoBA,CAAkBC,OAAe,EAAEC,KAAmB;EACtF,MAAMC,OAAO,GAAGD,KAAK,CAACE,cAAc,EAAE;EAEtC,MAAMC,KAAK,GAAGC,cAAK,CAACC,OAAO,CAAC;;;IAGxB,MAAMC,YAAY,GAAG,CAAC,GAAG,IAAIC,GAAG,CAACN,OAAO,CAACO,GAAG,CAACC,MAAM,IAAIA,MAAM,CAACZ,KAAK,CAAC,CAAC,CAAC;IACtE,OAAOS,YAAY,CACdE,GAAG,CAACX,KAAK;MACN,WAAWE,8DAA8DF;mBACtEE,8DAA8DF;6BACpDD,kBAAkB,CAACC,KAAK,OAAO;KAC/C,CAAC,CACDa,IAAI,CAAC,MAAM,CAAC;GACpB,EAAE,CAACT,OAAO,EAAEF,OAAO,CAAC,CAAC;EAEtB,OAAOI,KAAK;AAChB;;;;"}

package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js

@@ -9,6 +9,7 @@ import { Cell } from '../components/columns/cell/Cell.js';
 import { createRowSelectionColumn } from '../components/columns/internal/Selection.js';
 import { createRowExpansionColumn } from '../components/columns/internal/Expansion.js';
 import { createRowDragColumn } from '../components/columns/internal/Drag.js';
+import { Group } from '../components/columns/header/Group.js';
 
 function getSortingFn(dataType, customFnOrBuiltIn) {
   if (typeof customFnOrBuiltIn === 'function') {
@@ -31,13 +32,12 @@ function useConvertChildrenToColumns(props, options, editing) {
   return React__default.useMemo(() => {
     var _props$actionsForRow;
     const columnHelper = createColumnHelper();
-    const columns = [];
     const defaultColumnSizing = {};
     const defaultColumnVisibility = {};
     const defaultSorting = [];
-    React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
-    .forEach(child => {
-      if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
+    function processChild(child) {
+      var _child$type, _child$type2;
+      if ( /*#__PURE__*/React__default.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Table3Column' && child.props.accessor) {
         var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enablePr, _child$props$enableSe, _child$props$enableTr;
         if (child.props.defaultWidth) {
           defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
@@ -51,7 +51,8 @@ function useConvertChildrenToColumns(props, options, editing) {
             desc: child.props.sort === 'desc'
           });
         }
-        columns.push({
+        // return regular column definition
+        return {
           accessorKey: child.props.accessor,
           id: child.props.accessor,
           header: Header,
@@ -88,9 +89,31 @@ function useConvertChildrenToColumns(props, options, editing) {
             renderer: child.props.renderer,
             tooltip: child.props.tooltip
           }
+        };
+      } else if ( /*#__PURE__*/React__default.isValidElement(child) && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Table3Group' && child.props.children) {
+        // return column group definition
+        return columnHelper.group({
+          id: child.props.id,
+          header: Group,
+          columns: processChildren(child.props.children),
+          meta: {
+            align: 'center',
+            enableOrdering: false,
+            enableSearch: false,
+            enableTruncate: false,
+            header: child.props.header
+          }
         });
       }
-    });
+      return;
+    }
+    function processChildren(children) {
+      return React__default.Children.toArray(children).map(processChild)
+      // compiler cannot get filtering out undefined items, so using the type casting here
+      .filter(child => !!child); // need to remove undefined array items after processing the children
+    }
+
+    const columns = processChildren(props.children);
     if (options.enableRowExpansion && props.expandedRowRenderer) {
       columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));
     }
@@ -112,7 +135,7 @@ function useConvertChildrenToColumns(props, options, editing) {
       defaultColumnVisibility,
       defaultSorting
     };
-  }, []);
+  }, [editing.isEditing]);
 }
 
 export { useConvertChildrenToColumns };

package/dist/esm/packages/taco/src/components/Table3/hooks/useConvertChildrenToColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport { ColumnDef, ColumnSizingState, createColumnHelper, ColumnSort, VisibilityState } from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n    if (typeof customFnOrBuiltIn === 'function') {\n        return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n    }\n\n    // if a built in is being used, just return that\n    if (customFnOrBuiltIn) {\n        return customFnOrBuiltIn;\n    }\n\n    // some times we alias based on the type\n    if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n        return dataType;\n    }\n\n    // otherwise fall back to auto\n    return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n    props: Table3Props<TType>,\n    options: Table3Options,\n    editing: ReturnType<typeof useEditing>\n) {\n    // It's important to memoise column definitions, because it prevents columns like \"Drag column\" to re-render on every state change,\n    // and break dragging at the moment it happens.\n    return React.useMemo(() => {\n        const columnHelper = createColumnHelper<TType>();\n\n        const columns: ColumnDef<TType>[] = [];\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n\n        (React.Children.toArray(props.children) as React.ReactElement<Table3ColumnProps<TType>>[])\n            .filter(child => !!child) // remove falsey children\n            .forEach(child => {\n                if (React.isValidElement<Table3ColumnProps<TType>>(child) && child.props.accessor) {\n                    if (child.props.defaultWidth) {\n                        defaultColumnSizing[child.props.accessor as string] =\n                            child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n                    }\n\n                    if (child.props.defaultHidden && options.enableColumnHiding) {\n                        defaultColumnVisibility[child.props.accessor as string] = false;\n                    }\n\n                    if (child.props.sort !== undefined) {\n                        defaultSorting.push({\n                            id: child.props.accessor as string,\n                            desc: child.props.sort === 'desc',\n                        });\n                    }\n\n                    columns.push({\n                        accessorKey: child.props.accessor,\n                        id: child.props.accessor as string,\n                        header: Header,\n                        cell: Cell,\n                        footer: Footer,\n                        // sizing\n                        minSize: MIN_COLUMN_SIZE,\n                        enableResizing: child.props.enableResizing ?? true,\n                        // filtering\n                        enableColumnFilter: child.props.enableFiltering ?? true,\n                        filterFn: 'tacoFilter' as any,\n                        // sorting\n                        enableSorting: child.props.enableSorting ?? true,\n                        sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                        sortDescFirst: false,\n                        sortUndefined: 1,\n                        // visibility\n                        enableHiding: child.props.enableHiding ?? true,\n                        // custom options\n                        meta: {\n                            align: child.props.align,\n                            className: child.props.className,\n                            control: child.props.control,\n                            dataType: child.props.dataType,\n                            enableOrdering: child.props.enableOrdering ?? true,\n                            enablePrinting: child.props.enablePrinting ?? true,\n                            enableSearch: child.props.enableSearch ?? true,\n                            enableTruncate: child.props.enableTruncate ?? false,\n                            filters: child.props.filters,\n                            footer: child.props.footer,\n                            header: child.props.header,\n                            headerClassName: child.props.headerClassName,\n                            menu: child.props.menu,\n                            renderer: child.props.renderer,\n                            tooltip: child.props.tooltip,\n                        },\n                    });\n                }\n            });\n\n        if (options.enableRowExpansion && props.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n                )\n            );\n        }\n\n        if (options.enableRowDrag && props.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n        }\n\n        if (props.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n        }\n\n        if (editing.isEnabled && editing.isEditing) {\n            columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n        }\n\n        return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n    }, []);\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","React","useMemo","columnHelper","createColumnHelper","columns","defaultColumnSizing","defaultColumnVisibility","defaultSorting","Children","toArray","children","filter","child","forEach","isValidElement","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enablePr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enablePrinting","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}
+{"version":3,"file":"useConvertChildrenToColumns.js","sources":["../../../../../../../../src/components/Table3/hooks/useConvertChildrenToColumns.tsx"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnDef,\n    ColumnSizingState,\n    createColumnHelper,\n    ColumnSort,\n    VisibilityState,\n    GroupColumnDef,\n} from '@tanstack/react-table';\nimport { Table3ColumnProps, Table3Props, Table3Options, Table3ColumnDataType, Table3SortFn, Table3GroupProps } from '../types';\nimport { Header } from '../components/columns/header/Header';\nimport { Footer } from '../components/columns/footer/Footer';\nimport { Cell } from '../components/columns/cell/Cell';\nimport { createRowSelectionColumn } from '../components/columns/internal/Selection';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { createRowActionsColumn } from '../components/columns/internal/Actions';\nimport { createRowExpansionColumn } from '../components/columns/internal/Expansion';\nimport { createRowDragColumn } from '../components/columns/internal/Drag';\nimport { createRowEditingActionsColumn } from '../components/columns/internal/EditingActions';\nimport { useEditing } from './features/useEditing';\nimport { Group } from '../components/columns/header/Group';\n\nfunction getSortingFn<TType = unknown>(dataType?: Table3ColumnDataType, customFnOrBuiltIn?: Table3SortFn<TType>) {\n    if (typeof customFnOrBuiltIn === 'function') {\n        return (rowA, rowB, columnId) => customFnOrBuiltIn(rowA.original, rowB.original, columnId);\n    }\n\n    // if a built in is being used, just return that\n    if (customFnOrBuiltIn) {\n        return customFnOrBuiltIn;\n    }\n\n    // some times we alias based on the type\n    if (dataType && dataType !== 'boolean' && dataType !== 'number') {\n        return dataType;\n    }\n\n    // otherwise fall back to auto\n    return 'auto';\n}\n\nexport function useConvertChildrenToColumns<TType = unknown>(\n    props: Table3Props<TType>,\n    options: Table3Options,\n    editing: ReturnType<typeof useEditing>\n) {\n    // It's important to memoise column definitions, because it prevents columns like \"Drag column\" to re-render on every state change,\n    // and break dragging at the moment it happens.\n    return React.useMemo(() => {\n        const columnHelper = createColumnHelper<TType>();\n\n        const defaultColumnSizing: ColumnSizingState = {};\n        const defaultColumnVisibility: VisibilityState = {};\n        const defaultSorting: ColumnSort[] = [];\n\n        function processChild<TType>(child: React.ReactChild | React.ReactFragment | React.ReactPortal) {\n            if (\n                React.isValidElement<Table3ColumnProps<TType>>(child) &&\n                (child as any).type?.displayName === 'Table3Column' &&\n                child.props.accessor\n            ) {\n                if (child.props.defaultWidth) {\n                    defaultColumnSizing[child.props.accessor as string] =\n                        child.props.defaultWidth === 'grow' ? '1fr' : (child.props.defaultWidth as any);\n                }\n\n                if (child.props.defaultHidden && options.enableColumnHiding) {\n                    defaultColumnVisibility[child.props.accessor as string] = false;\n                }\n\n                if (child.props.sort !== undefined) {\n                    defaultSorting.push({\n                        id: child.props.accessor as string,\n                        desc: child.props.sort === 'desc',\n                    });\n                }\n\n                // return regular column definition\n                return {\n                    accessorKey: child.props.accessor,\n                    id: child.props.accessor as string,\n                    header: Header,\n                    cell: Cell,\n                    footer: Footer,\n                    // sizing\n                    minSize: MIN_COLUMN_SIZE,\n                    enableResizing: child.props.enableResizing ?? true,\n                    // filtering\n                    enableColumnFilter: child.props.enableFiltering ?? true,\n                    filterFn: 'tacoFilter' as any,\n                    // sorting\n                    enableSorting: child.props.enableSorting ?? true,\n                    sortingFn: getSortingFn<TType>(child.props.dataType, child.props.sortFn),\n                    sortDescFirst: false,\n                    sortUndefined: 1,\n                    // visibility\n                    enableHiding: child.props.enableHiding ?? true,\n                    // custom options\n                    meta: {\n                        align: child.props.align,\n                        className: child.props.className,\n                        control: child.props.control,\n                        dataType: child.props.dataType,\n                        enableOrdering: child.props.enableOrdering ?? true,\n                        enablePrinting: child.props.enablePrinting ?? true,\n                        enableSearch: child.props.enableSearch ?? true,\n                        enableTruncate: child.props.enableTruncate ?? false,\n                        filters: child.props.filters,\n                        footer: child.props.footer,\n                        header: child.props.header,\n                        headerClassName: child.props.headerClassName,\n                        menu: child.props.menu,\n                        renderer: child.props.renderer,\n                        tooltip: child.props.tooltip,\n                    },\n                };\n            } else if (\n                React.isValidElement<Table3GroupProps>(child) &&\n                (child as any).type?.displayName === 'Table3Group' &&\n                child.props.children\n            ) {\n                // return column group definition\n                return columnHelper.group({\n                    id: child.props.id,\n                    header: Group,\n                    columns: processChildren(child.props.children),\n                    meta: {\n                        align: 'center',\n                        enableOrdering: false,\n                        enableSearch: false,\n                        enableTruncate: false,\n                        header: child.props.header,\n                    },\n                });\n            }\n            return;\n        }\n\n        function processChildren<TType = unknown>(\n            children: (JSX.Element | boolean | null | undefined)[]\n        ): Array<ColumnDef<TType> | GroupColumnDef<TType>> {\n            return (\n                React.Children.toArray(children)\n                    .map(processChild)\n                    // compiler cannot get filtering out undefined items, so using the type casting here\n                    .filter(child => !!child) as Array<ColumnDef<TType> | GroupColumnDef<TType>>\n            ); // need to remove undefined array items after processing the children\n        }\n\n        const columns: ColumnDef<TType>[] = processChildren(props.children);\n\n        if (options.enableRowExpansion && props.expandedRowRenderer) {\n            columns.unshift(columnHelper.display(createRowExpansionColumn(props.expandedRowRenderer)));\n        }\n\n        if (options.enableRowSelection) {\n            columns.unshift(\n                columnHelper.display(\n                    createRowSelectionColumn<TType>(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)\n                )\n            );\n        }\n\n        if (options.enableRowDrag && props.onRowDrag) {\n            columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));\n        }\n\n        if (props.actionsForRow?.length) {\n            columns.push(columnHelper.display(createRowActionsColumn<TType>()));\n        }\n\n        if (editing.isEnabled && editing.isEditing) {\n            columns.push(columnHelper.display(createRowEditingActionsColumn<TType>()));\n        }\n\n        return { columns, defaultColumnSizing, defaultColumnVisibility, defaultSorting };\n    }, [editing.isEditing]);\n}\n"],"names":["getSortingFn","dataType","customFnOrBuiltIn","rowA","rowB","columnId","original","useConvertChildrenToColumns","props","options","editing","React","useMemo","columnHelper","createColumnHelper","defaultColumnSizing","defaultColumnVisibility","defaultSorting","processChild","child","isValidElement","_child$type","type","displayName","accessor","_child$props$enableRe","_child$props$enableFi","_child$props$enableSo","_child$props$enableHi","_child$props$enableOr","_child$props$enablePr","_child$props$enableSe","_child$props$enableTr","defaultWidth","defaultHidden","enableColumnHiding","sort","undefined","push","id","desc","accessorKey","header","Header","cell","Cell","footer","Footer","minSize","MIN_COLUMN_SIZE","enableResizing","enableColumnFilter","enableFiltering","filterFn","enableSorting","sortingFn","sortFn","sortDescFirst","sortUndefined","enableHiding","meta","align","className","control","enableOrdering","enablePrinting","enableSearch","enableTruncate","filters","headerClassName","menu","renderer","tooltip","_child$type2","children","group","Group","columns","processChildren","Children","toArray","map","filter","enableRowExpansion","expandedRowRenderer","unshift","display","createRowExpansionColumn","enableRowSelection","createRowSelectionColumn","enableRowDrag","onRowDrag","createRowDragColumn","_props$actionsForRow","actionsForRow","length","createRowActionsColumn","isEnabled","isEditing","createRowEditingActionsColumn"],"mappings":"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"}