@economic/taco 2.12.0 → 2.13.0

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

@@ -0,0 +1,70 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { HeaderSeparator } from './Header.js';
+
+function Group(props) {
+  const {
+    children,
+    column,
+    header,
+    table,
+    hasSeparator
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const memoedProps = {
+    align: 'center',
+    children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
+    hasSeparator,
+    id: header.id,
+    index: header.index,
+    isPrinting: tableMeta.isPrinting,
+    length: table.getRowModel().rows.length,
+    meta: columnMeta,
+    table
+  };
+  return /*#__PURE__*/React__default.createElement(MemoedGroup, Object.assign({}, memoedProps));
+}
+const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props) {
+  var _meta$tooltip;
+  const {
+    align,
+    children,
+    colSpan,
+    hasSeparator,
+    id,
+    isPrinting,
+    meta,
+    table
+  } = props;
+  const containerClassName = cn('sticky px-2 mb-[2px]', {
+    'h-10': !isPrinting
+  }, colSpan > 1 ? `col-span-${colSpan}` : '');
+  const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
+    'h-full items-center': !isPrinting,
+    'pb-2': isPrinting,
+    'border-b-2': !!children
+  }, meta.headerClassName);
+  if (table.options.debugAll) {
+    console.log('header group render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: containerClassName,
+    "data-taco": "table3-column-group",
+    "data-align": align
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: innerClassName
+  }, /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: cn({
+      truncate: !isPrinting
+    })
+  }, children)), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null));
+});
+
+export { Group };
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Group.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Group.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport { HeaderProps, HeaderSeparator } from './Header';\nimport { ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\n\nexport function Group<TType = unknown>(props: HeaderProps<TType>) {\n    const { children, column, header, table, hasSeparator } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta, []) as ColumnMeta<TType, unknown>;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const memoedProps = {\n        align: 'center' as Table3ColumnAlignment,\n        children: children ?? columnMeta.header,\n        colSpan: header.colSpan,\n        hasSeparator,\n        id: header.id,\n        index: header.index,\n        isPrinting: tableMeta.isPrinting,\n        length: table.getRowModel().rows.length,\n        meta: columnMeta,\n        table,\n    };\n\n    return <MemoedGroup<TType> {...memoedProps} />;\n}\n\n// Memoization\nexport type MemoedGroupProps<TType = unknown> = Omit<HeaderProps<TType>, 'column' | 'header' | 'scrollToIndex'> & {\n    align?: Table3ColumnAlignment;\n    colSpan: number;\n    hasSeparator?: boolean;\n    id: string;\n    index: number;\n    isPrinting: boolean;\n    length: number;\n    meta: ColumnMeta<TType, unknown>;\n};\n\nconst MemoedGroup = React.memo(function MemoedGroup<TType = unknown>(props: MemoedGroupProps<TType>) {\n    const { align, children, colSpan, hasSeparator, id, isPrinting, meta, table } = props;\n\n    const containerClassName = cn(\n        'sticky px-2 mb-[2px]',\n        {\n            'h-10': !isPrinting,\n        },\n        colSpan > 1 ? `col-span-${colSpan}` : ''\n    );\n\n    const innerClassName = cn(\n        'font-bold box-content group/column relative',\n        'px-[var(--table3-cell-padding-x)]',\n        {\n            'h-full items-center': !isPrinting,\n            'pb-2': isPrinting,\n            'border-b-2': !!children,\n        },\n        meta.headerClassName\n    );\n\n    if (table.options.debugAll) {\n        console.log('header group render', id);\n    }\n\n    return (\n        <div className={containerClassName} data-taco=\"table3-column-group\" data-align={align}>\n            <div className={innerClassName}>\n                <Tooltip title={String(meta?.tooltip ?? children)} placement=\"top\">\n                    <span className={cn({ truncate: !isPrinting })}>{children}</span>\n                </Tooltip>\n                {hasSeparator ? <HeaderSeparator /> : null}\n            </div>\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedGroupProps<TType>) => JSX.Element;\n"],"names":["Group","props","children","column","header","table","hasSeparator","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","colSpan","id","index","isPrinting","length","getRowModel","rows","MemoedGroup","memo","containerClassName","cn","innerClassName","headerClassName","debugAll","console","log","className","Tooltip","title","String","_meta$tooltip","tooltip","placement","truncate","HeaderSeparator"],"mappings":";;;;;SAQgBA,KAAKA,CAAkBC,KAAyB;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,KAAK;IAAEC;GAAc,GAAGL,KAAK;EAC/D,MAAMM,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMN,MAAM,CAACO,SAAS,CAACC,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EAExD,MAAMG,WAAW,GAAG;IAChBC,KAAK,EAAE,QAAiC;IACxCb,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIK,UAAU,CAACH,MAAM;IACvCY,OAAO,EAAEZ,MAAM,CAACY,OAAO;IACvBV,YAAY;IACZW,EAAE,EAAEb,MAAM,CAACa,EAAE;IACbC,KAAK,EAAEd,MAAM,CAACc,KAAK;IACnBC,UAAU,EAAEP,SAAS,CAACO,UAAU;IAChCC,MAAM,EAAEf,KAAK,CAACgB,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvCT,IAAI,EAAEJ,UAAU;IAChBF;GACH;EAED,oBAAOG,6BAACe,WAAW,oBAAYT,WAAW,EAAI;AAClD;AAcA,MAAMS,WAAW,gBAAGf,cAAK,CAACgB,IAAI,CAAC,SAASD,WAAWA,CAAkBtB,KAA8B;;EAC/F,MAAM;IAAEc,KAAK;IAAEb,QAAQ;IAAEc,OAAO;IAAEV,YAAY;IAAEW,EAAE;IAAEE,UAAU;IAAER,IAAI;IAAEN;GAAO,GAAGJ,KAAK;EAErF,MAAMwB,kBAAkB,GAAGC,EAAE,CACzB,sBAAsB,EACtB;IACI,MAAM,EAAE,CAACP;GACZ,EACDH,OAAO,GAAG,CAAC,eAAeA,SAAS,GAAG,EAAE,CAC3C;EAED,MAAMW,cAAc,GAAGD,EAAE,CACrB,6CAA6C,EAC7C,mCAAmC,EACnC;IACI,qBAAqB,EAAE,CAACP,UAAU;IAClC,MAAM,EAAEA,UAAU;IAClB,YAAY,EAAE,CAAC,CAACjB;GACnB,EACDS,IAAI,CAACiB,eAAe,CACvB;EAED,IAAIvB,KAAK,CAACQ,OAAO,CAACgB,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,qBAAqB,EAAEd,EAAE,CAAC;;EAG1C,oBACIT;IAAKwB,SAAS,EAAEP,kBAAkB;iBAAY,qBAAqB;kBAAaV;kBAC5EP;IAAKwB,SAAS,EAAEL;kBACZnB,6BAACyB,OAAO;IAACC,KAAK,EAAEC,MAAM,EAAAC,aAAA,GAACzB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE0B,OAAO,cAAAD,aAAA,cAAAA,aAAA,GAAIlC,QAAQ,CAAC;IAAEoC,SAAS,EAAC;kBACzD9B;IAAMwB,SAAS,EAAEN,EAAE,CAAC;MAAEa,QAAQ,EAAE,CAACpB;KAAY;KAAIjB,QAAQ,CAAQ,CAC3D,EACTI,YAAY,gBAAGE,6BAACgC,eAAe,OAAG,GAAG,IAAI,CACxC,CACJ;AAEd,CAAC,CAAqE;;;;"}

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

@@ -15,6 +15,7 @@ function Header(props) {
     children,
     column,
     header,
+    hasSeparator,
     scrollToIndex,
     table
   } = props;
@@ -50,10 +51,13 @@ function Header(props) {
     canResize: column.getCanResize(),
     canSort,
     children: children !== null && children !== void 0 ? children : columnMeta.header,
+    colSpan: header.colSpan,
     hasMenu: isMenuAvailable(table, header),
+    hasSeparator,
     id: header.id,
     index: header.index,
     isFrozen: isFrozenColumn(header, table),
+    isPlaceholder: header.isPlaceholder,
     isPrinting: tableMeta.isPrinting,
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
@@ -78,10 +82,13 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     canHide,
     canResize,
     canSort,
+    colSpan,
     hasMenu,
+    hasSeparator,
     id,
     index,
     isFrozen,
+    isPlaceholder,
     isPrinting,
     isResizing,
     length,
@@ -95,19 +102,22 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     sortDirection,
     table
   } = props;
-  const className = cn('sticky top-0 border-b-2 font-bold box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+  const className = cn('sticky font-bold border-b-2 box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+    '!border-white': isPlaceholder,
     'h-10 items-center': !isPrinting,
     'pb-2': isPrinting,
     'cursor-pointer select-none': canSort,
-    'hover:bg-grey-100': canSort || canResize || hasMenu,
+    'hover:bg-grey-100': !isPlaceholder && (canSort || canResize || hasMenu),
     'focus-within:bg-grey-100': hasMenu,
-    '!pointer-events-all !bg-grey-100': isResizing,
+    '!pointer-events-all !bg-grey-100': !isPlaceholder && isResizing,
     // z-indexes
     'z-10 hover:z-20': !isFrozen && !isResizing,
     'z-20': !isFrozen && isResizing,
-    '!z-30': isFrozen,
+    // when column is frozen, we need to increase it's z-index when it's hovered,
+    // so that resize handler appears on top of next frozen cell, and didn't get cut by it.
+    '!z-30 hover:!z-40': isFrozen,
     '!z-40': isFrozen && isResizing
-  }, meta.headerClassName);
+  }, colSpan > 1 ? `col-span-${colSpan}` : '', meta.headerClassName);
   const [internalRef, setInternalRef] = React__default.useState(null);
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
@@ -130,7 +140,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-column-index": index,
     role: "columnheader",
     ref: setInternalRef
-  }), isInternalColumn(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
+  }), isPlaceholder ? null : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isInternalColumn(id) ? children : /*#__PURE__*/React__default.createElement(Tooltip, {
     title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
@@ -155,11 +165,19 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     scrollToIndex: scrollToIndex,
     sortDirection: sortDirection,
     table: table
-  }) : null, canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
+  }) : null), hasSeparator ? /*#__PURE__*/React__default.createElement(HeaderSeparator, null) : null, !isPlaceholder && canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
     isResizing: isResizing,
     onResize: handleResize
   }) : null);
 });
+function HeaderSeparator() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    "data-taco": "header-separator",
+    className: cn('invisible absolute right-[0.5px] top-0 flex h-full w-2 touch-none select-none justify-center py-2 group-hover/header:visible')
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('bg-grey-300 h-full w-[1px]')
+  }));
+}
 
-export { Header, SORT_DIRECTION };
+export { Header, HeaderSeparator, SORT_DIRECTION };
 //# sourceMappingURL=Header.js.map

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":";;;;;;;;;;;;;;;AAqBA,MAAMA,wBAAwB,GAAG,IAAI;MAExBC,SAAS,GAAG;AAOzB,MAAMC,UAAU,gBAAGC,cAAK,CAACC,IAAI,CAAC,SAASF,UAAUA,CAAkBG,KAA6B;EAC5F,MAAM;IAAEC,YAAY;IAAEC,SAAS;IAAEC,GAAG;IAAEC;GAAO,GAAGJ,KAAK;EAErD,MAAMK,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAMC,WAAW,GAAGH,SAAS,CAACI,OAAO,CAACC,YAAY,IAAIL,SAAS,CAACI,OAAO,CAACC,YAAY,CAACP,GAAG,CAACQ,EAAE,CAAC;EAC5F,MAAM,CAACC,uBAAuB,EAAEC,2BAA2B,CAAC,GAAGf,cAAK,CAACgB,QAAQ,CAAC,KAAK,CAAC;EACpF,MAAMC,SAAS,GAAGV,SAAS,CAACI,OAAO,CAACO,OAAO,GAAGC,MAAM,CAACC,IAAI,CAACb,SAAS,CAACI,OAAO,CAACO,OAAO,CAAC,GAAG,EAAE;EACzF,MAAMG,mBAAmB,GAAGJ,SAAS,CAACK,OAAO,CAACjB,GAAG,CAACQ,EAAE,CAAC,IAAI,CAAC;EAC1D,MAAM;IAAEU;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,WAAW,GAAGA;IAChBV,2BAA2B,CAAC,KAAK,CAAC;IAClCR,SAAS,CAACI,OAAO,CAACe,iBAAiB,CAACrB,GAAG,CAACQ,EAAE,CAAC;GAC9C;EACD,MAAMc,KAAK,GAAGC,QAAQ,CAAC/B,wBAAwB,EAAE4B,WAAW,CAAC;EAE7DzB,cAAK,CAAC6B,SAAS,CAAC;IACZ,IAAInB,WAAW,IAAIA,WAAW,CAACoB,KAAK,KAAKC,gBAAgB,CAACC,KAAK,IAAI,CAAClB,uBAAuB,EAAE;MACzFC,2BAA2B,CAAC,IAAI,CAAC;MACjCY,KAAK,CAACM,KAAK,EAAE;;GAEpB,EAAE,CAACvB,WAAW,CAAC,CAAC;EAEjB,IAAIwB,OAAO;EAEX,IAAIxB,WAAW,EAAE;IACb,IAAIA,WAAW,CAACoB,KAAK,KAAKC,gBAAgB,CAACI,MAAM,EAAE;MAC/CD,OAAO,gBACHlC,6BAACoC,OAAO;QAACC,KAAK,EAAEd,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAAC4B,MAAM,CAACC;sBACxCxC,6BAACyC,OAAO;QAACC,KAAK,EAAE,CAAC;QAAEC,SAAS,EAAC;QAAoC,CAExE;KACJ,MAAM,IAAI7B,uBAAuB,EAAE;MAChCoB,OAAO,gBACHlC,6BAACoC,OAAO;QAACC,KAAK,EAAEd,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAAC4B,MAAM,CAACK;sBACxC5C,6BAAC6C,IAAI;QAACC,IAAI,EAAC,MAAM;QAACH,SAAS,EAAC;QAAwB,CAE3D;;;EAIT,IAAIvC,SAAS,IAAID,YAAY,EAAE;IAC3B+B,OAAO,gBACHlC,4DACKkC,OAAO,eACRlC,6BAAC+C,UAAU;MACPC,UAAU,EAAC,aAAa;oBACZzB,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAACsC,OAAO,CAACC,OAAO;MAChDC,IAAI,EAAC,MAAM;MACXC,IAAI,EAAEC,SAAS,iBACXrD,6BAACsD,IAAI,oBAAKD,SAAS,gBACfrD,6BAACsD,IAAI,CAACC,OAAO,qBACTvD,6BAACsD,IAAI,CAACE,IAAI;QACNL,IAAI,EAAC,MAAM;QACXM,QAAQ,EAAE,CAACpC,mBAAmB;QAC9BqC,OAAO,EAAEA,MAAMnD,SAAS,CAACI,OAAO,CAACgD,mBAAmB;SACnDpC,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAACsC,OAAO,CAACW,IAAI,CAC1B,eACZ5D,6BAACsD,IAAI,CAACE,IAAI;QACNL,IAAI,EAAC,OAAO;QACZM,QAAQ,EAAE,CAACpC,mBAAmB;QAC9BqC,OAAO,EAAEA,MAAMnD,SAAS,CAACI,OAAO,CAACkD,WAAW,CAACxD,GAAG,CAACQ,EAAE;SAClDU,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAACsC,OAAO,CAACa,KAAK,CAC3B,eACZ9D,6BAACsD,IAAI,CAACE,IAAI;QAACL,IAAI,EAAC,MAAM;QAACO,OAAO,EAAEA,MAAMnD,SAAS,CAACI,OAAO,CAACoD,aAAa,CAAC,KAAK;SACtExC,KAAK,CAACe,MAAM,CAAC3B,OAAO,CAACsC,OAAO,CAACe,IAAI,CAC1B,CACD,CAEtB;MACDC,QAAQ,EAAE9D,YAAY,GAAG,CAAC,GAAG,CAAC;MAChC,CAET;;EAGL,oBACIH,6BAACkE,WAAW,oBAAKhE,KAAK;IAAEyC,SAAS,EAAEwB,EAAE,CAAC;MAAE,SAAS,EAAE,CAAC,CAACjC;KAAS;MACzDA,OAAO,gBAAGlC;IAAM2C,SAAS,EAAC;KAAwDT,OAAO,CAAQ,GAAGkC,SAAS,CACpG;AAEtB,CAAC,CAAoE;AAIrE,SAASC,IAAIA,CAAkBnE,KAAuB;EAClD,MAAM;IAAEoE;GAAU,GAAGtE,cAAK,CAACuE,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMjE,SAAS,GAAGL,KAAK,CAACI,KAAK,CAACE,OAAO,CAACC,IAAwB;EAE9D,oBACIT,6BAACD,UAAU,oBACHG,KAAK;IACTC,YAAY,EAAEI,SAAS,CAACkE,UAAU,CAACC,eAAe,KAAKJ,QAAQ;IAC/DlE,SAAS,EAAEG,SAAS,CAACI,OAAO,CAACP;KAC/B;AAEV;MAEauE,qBAAqB,GAAG;SAErBC,6BAA6BA;EACzC,OAAO;IACH/D,EAAE,EAAEf,SAAS;IACb+E,MAAM,EAAEC,MAAY;IACpBC,IAAI,EAAEV,IAAI;IACVW,MAAM,EAAEC,MAAM;IACdxE,IAAI,EAAE;MACFyE,KAAK,EAAE,OAAO;MACdvC,SAAS,EAAEwB,EAAE,CACT,mIAAmI,EACnI,yMAAyM,EACzM,wEAAwE,EACxE,kDAAkD,EAClD,yDAAyD,CAC5D;MACDgB,cAAc,EAAE,KAAK;MACrBC,YAAY,EAAE,KAAK;MACnBC,cAAc,EAAE,KAAK;MACrBR,MAAM,EAAE,EAAE;MACVS,eAAe,EAAE;KACpB;;IAEDC,cAAc,EAAE,KAAK;IACrBC,IAAI,EAAEb,qBAAqB;IAC3Bc,OAAO,EAAEd;GACZ;AACL;;;;"}
+{"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;;;;"}