@economic/taco 2.2.3 → 2.2.5

package/dist/esm/packages/taco/src/components/Header/components/MenuButton.js

@@ -4,7 +4,7 @@ import { IconButton } from '../../IconButton/IconButton.js';
 import { getButtonClasses } from './Button.js';
 
 const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(props, ref) {
-  const className = cn(getButtonClasses(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]');
+  const className = cn(getButtonClasses(false), 'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white');
   return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, props, {
     className: className,
     "data-taco": "header-toggle-sidebar",

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

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2]'\n    );\n\n    return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,CAAC,KAAK,CAAC,EACvB,mFAAmF,CACtF;EAED,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}
+{"version":3,"file":"MenuButton.js","sources":["../../../../../../../../src/components/Header/components/MenuButton.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { getButtonClasses } from './Button';\n\nexport type MenuButtonProps = {\n    onClick: () => void;\n};\n\nexport const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(function MenuButton(props, ref) {\n    const className = cn(\n        getButtonClasses(false),\n        'mr-1 !bg-transparent hover:!bg-white/[.08] focus:!bg-white/[.08]] lg:hidden z-[2] !text-white'\n    );\n\n    return <IconButton {...props} className={className} data-taco=\"header-toggle-sidebar\" icon=\"menu\" ref={ref} />;\n});\n"],"names":["MenuButton","React","forwardRef","props","ref","className","cn","getButtonClasses","IconButton","icon"],"mappings":";;;;;MASaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAqC,SAASF,UAAU,CAACG,KAAK,EAAEC,GAAG;EACzG,MAAMC,SAAS,GAAGC,EAAE,CAChBC,gBAAgB,CAAC,KAAK,CAAC,EACvB,+FAA+F,CAClG;EAED,oBAAON,6BAACO,UAAU,oBAAKL,KAAK;IAAEE,SAAS,EAAEA,SAAS;iBAAY,uBAAuB;IAACI,IAAI,EAAC,MAAM;IAACL,GAAG,EAAEA;KAAO;AAClH,CAAC;;;;"}

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

@@ -5,6 +5,7 @@ import { isFrozenColumn, isInternalColumn } from '../../../util/columns.js';
 import { isGotoAvailable, isMenuAvailable, Menu } from './Menu.js';
 import { Resizer } from './Resizer.js';
 import { getSortAttributes, SortIndicator } from './SortIndicator.js';
+import { COLUMN_ID } from '../internal/Actions.js';
 
 function Header(props) {
   const {
@@ -92,6 +93,10 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
   const [internalRef, setInternalRef] = React__default.useState(null);
   React__default.useLayoutEffect(() => {
     if (internalRef && length) {
+      // the actions column size gets set by the column itself
+      if (id === COLUMN_ID) {
+        return;
+      }
       table.setColumnSizing(sizes => ({
         ...sizes,
         [id]: internalRef.getBoundingClientRect().width

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 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\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\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.index, table),\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        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    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    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\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        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || 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            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=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\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":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","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","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","isInternalColumn","Tooltip","title","String","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":";;;;;;;;SAcgBA,MAAM,CAAkBC,KAAyB;EAC7D,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,MAAM;IAAEC,aAAa;IAAEC;GAAO,GAAGL,KAAK;EAChE,MAAMM,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAAwB;EACxD,MAAMC,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMT,MAAM,CAACU,SAAS,CAACJ,IAAI,EAAE,EAAE,CAA+B;EAC/F,MAAMK,OAAO,GAAGX,MAAM,CAACY,UAAU,EAAE;;EAGnC,MAAMC,YAAY,GAAGL,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACa,gBAAgB,EAAE,EAAE,EAAE,CAAC;EACvE,MAAMC,UAAU,GAAGP,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACD,MAAM,CAACgB,uBAAuB,EAAE,EAAE,EAAE,CAAC;EACnF,MAAMC,UAAU,GAAGT,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACD,MAAM,CAACkB,0BAA0B,EAAE,EAAE,EAAE,CAAC;EACtF,MAAMC,OAAO,GAAGC,eAAe,CAACjB,KAAK,EAAEF,MAAM,CAAC;EAE9C,MAAMoB,OAAO,GAAGlB,KAAK,CAACmB,QAAQ,EAAE,CAACD,OAAO;EACxC,MAAME,OAAO,GAAGpB,KAAK,CAACmB,QAAQ,EAAE,CAACE,aAAa;EAC9C,MAAMC,MAAM,GAAGtB,KAAK,CAACmB,QAAQ,EAAE,CAACI,YAAY;EAE5C,MAAMC,UAAU,GAAGnB,cAAK,CAACC,OAAO,CAAC;IAC7B,IAAIU,OAAO,EAAE;MACT,OAASS,KAAa,IAAKxB,SAAS,CAACyB,OAAO,CAACF,UAAU,CAAC1B,MAAM,CAAC6B,EAAE,EAAEF,KAAK,EAAEP,OAAO,EAAEE,OAAO,EAAEE,MAAM,CAAC;;IAKvG,OAAOM,SAAS;GACnB,EAAE,CAACZ,OAAO,EAAEa,IAAI,CAACC,SAAS,CAACZ,OAAO,CAAC,EAAEW,IAAI,CAACC,SAAS,CAACV,OAAO,CAAC,EAAEE,MAAM,CAAC,CAAC;EAEvE,MAAMS,WAAW,GAAG;IAChBC,KAAK,EAAE5B,UAAU,CAAC4B,KAAK;IACvBC,SAAS,EAAEhC,SAAS,CAACiC,cAAc,CAACC,SAAS;IAC7CC,OAAO,EAAEvC,MAAM,CAACwC,UAAU,EAAE;IAC5BC,SAAS,EAAEzC,MAAM,CAAC0C,YAAY,EAAE;IAChC/B,OAAO;IACPZ,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIQ,UAAU,CAACN,MAAM;IACvC0C,OAAO,EAAEC,eAAe,CAAQzC,KAAK,EAAEF,MAAM,CAAC;IAC9C6B,EAAE,EAAE7B,MAAM,CAAC6B,EAAE;IACbe,KAAK,EAAE5C,MAAM,CAAC4C,KAAK;IACnBC,QAAQ,EAAEC,cAAc,CAAC9C,MAAM,CAAC4C,KAAK,EAAE1C,KAAK,CAAC;IAC7C6C,UAAU,EAAEhD,MAAM,CAACiD,aAAa,EAAE;IAClCC,MAAM,EAAE/C,KAAK,CAACgD,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;IACvC5C,IAAI,EAAEC,UAAU;IAChB8C,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBsC,QAAQ,EAAE1C,YAAY;IACtB2C,MAAM,EAAEzC,UAAsC;IAC9Cb,aAAa;IACbuD,aAAa,EAAEzD,MAAM,CAAC0D,WAAW,EAAE;IACnCvD;GACH;EAED,oBAAOK,6BAACmD,YAAY,oBAAYzB,WAAW,EAAI;AACnD;AAwBA,MAAMyB,YAAY,gBAAGnD,cAAK,CAACoD,IAAI,CAAC,SAASD,YAAY,CAAkB7D,KAA+B;;EAClG,MAAM;IACFqC,KAAK;IACLpC,QAAQ;IACRqC,SAAS;IACTG,OAAO;IACPE,SAAS;IACT9B,OAAO;IACPgC,OAAO;IACPb,EAAE;IACFe,KAAK;IACLC,QAAQ;IACRE,UAAU;IACVE,MAAM;IACN5C,IAAI;IACJ+C,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBsC,QAAQ,EAAE1C,YAAY;IACtB2C,MAAM,EAAEzC,UAAU;IAClBb,aAAa;IACbuD,aAAa;IACbtD;GACH,GAAGL,KAAK;EAET,MAAM+D,SAAS,GAAGC,EAAE,CAChB,uFAAuF,EACvF,8DAA8D,EAC9D;IACI,4BAA4B,EAAEnD,OAAO;IACrC,mBAAmB,EAAEA,OAAO,IAAI8B,SAAS,IAAIE,OAAO;IACpD,kCAAkC,EAAEK,UAAU;;IAE9C,iBAAiB,EAAE,CAACF,QAAQ,IAAI,CAACE,UAAU;IAC3C,MAAM,EAAE,CAACF,QAAQ,IAAIE,UAAU;IAC/B,OAAO,EAAEF,QAAQ;IACjB,OAAO,EAAEA,QAAQ,IAAIE;GACxB,EACD1C,IAAI,CAACyD,eAAe,CACvB;EAED,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGzD,cAAK,CAAC0D,QAAQ,CAAwB,IAAI,CAAC;EAEjF1D,cAAK,CAAC2D,eAAe,CAAC;IAClB,IAAIH,WAAW,IAAId,MAAM,EAAE;MACvB/C,KAAK,CAACiE,eAAe,CAACC,KAAK,KAAK;QAC5B,GAAGA,KAAK;QACR,CAACvC,EAAE,GAAGkC,WAAW,CAACM,qBAAqB,EAAE,CAACC;OAC7C,CAAC,CAAC;;GAEV,EAAE,CAACP,WAAW,EAAEd,MAAM,CAAC,CAAC;EAEzB,IAAI/C,KAAK,CAACE,OAAO,CAACmE,QAAQ,EAAE;IACxBC,OAAO,CAACC,GAAG,CAAC,eAAe,EAAE5C,EAAE,CAAC;;EAGpC,oBACItB,sDACSG,OAAO,GAAGgE,iBAAiB,CAAC5D,UAAU,EAAE0C,aAAa,CAAC,GAAG1B,SAAS;IACvE8B,SAAS,EAAEA,SAAS;kBACR1B,KAAK;yBACEU,KAAK;IACxB+B,IAAI,EAAC,cAAc;IACnBC,GAAG,EAAEZ;MACJa,gBAAgB,CAAChD,EAAE,CAAC,GACjB/B,QAAQ,gBAERS,6BAACuE,OAAO;IAACC,KAAK,EAAEC,MAAM,kBAAC3E,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE4E,OAAO,yDAAInF,QAAQ,CAAC;IAAEoF,SAAS,EAAC;kBACzD3E;IAAMqD,SAAS,EAAC;KAAY9D,QAAQ,CAAQ,CAEnD,EACAY,OAAO,gBAAGH,6BAAC4E,aAAa;IAACC,SAAS,EAAE5B;IAAiB,GAAG,IAAI,EAC5Dd,OAAO,gBACJnC,6BAAC8E,IAAI;IACDlD,SAAS,EAAEA,SAAS;IACpBG,OAAO,EAAEA,OAAO;IAChBsB,SAAS,EAAC,4DAA4D;IACtEhB,KAAK,EAAEA,KAAK;IACZ0C,IAAI,EAAEjF,IAAI,CAACiF,IAAI;IACflC,MAAM,EAAE1B,UAAU;IAClB2B,MAAM,EAAErC,UAAU;IAClBf,aAAa,EAAEA,aAAa;IAC5BC,KAAK,EAAEA;IACT,GACF,IAAI,EACPsC,SAAS,gBAAGjC,6BAACgF,OAAO;IAACxC,UAAU,EAAEA,UAAU;IAAEO,QAAQ,EAAE1C;IAAgB,GAAG,IAAI,CAC7E;AAEd,CAAC,CAAsE;;;;"}
+{"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';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../internal/Actions';\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\n    // passing header or column results in re-renders on scroll, so anything from those objects as memoed props\n    const handleResize = React.useMemo(() => header.getResizeHandler(), []);\n    const handleSort = React.useMemo(() => header.column.getToggleSortingHandler(), []);\n    const handleHide = React.useMemo(() => header.column.getToggleVisibilityHandler(), []);\n    const hasGoto = isGotoAvailable(table, header);\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.index, table),\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        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    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    scrollToIndex: TableStrategy['scrollToIndex'];\n    sortDirection: false | Table3SortDirection;\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        isResizing,\n        length,\n        meta,\n        onGoto: handleGoto,\n        onHide: handleHide,\n        onResize: handleResize,\n        onSort: handleSort,\n        scrollToIndex,\n        sortDirection,\n        table,\n    } = props;\n\n    const className = cn(\n        'sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative',\n        '[[role=\"table\"][data-resizing=\"true\"]_&]:pointer-events-none',\n        {\n            'cursor-pointer select-none': canSort,\n            'hover:bg-grey-100': canSort || canResize || 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 (id === ACTIONS_COLUMN_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=\"truncate\">{children}</span>\n                </Tooltip>\n            )}\n            {canSort ? <SortIndicator direction={sortDirection} /> : null}\n            {hasMenu ? (\n                <Menu\n                    canFreeze={canFreeze}\n                    canHide={canHide}\n                    className=\"ml-auto hidden group-hover/column:flex aria-expanded:!flex\"\n                    index={index}\n                    menu={meta.menu}\n                    onGoto={handleGoto}\n                    onHide={handleHide}\n                    scrollToIndex={scrollToIndex}\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":["Header","props","children","column","header","scrollToIndex","table","tableMeta","options","meta","columnMeta","React","useMemo","columnDef","canSort","getCanSort","handleResize","getResizeHandler","handleSort","getToggleSortingHandler","handleHide","getToggleVisibilityHandler","hasGoto","isGotoAvailable","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","isResizing","getIsResizing","length","getRowModel","rows","onGoto","onHide","onResize","onSort","sortDirection","getIsSorted","MemoedHeader","memo","className","cn","headerClassName","internalRef","setInternalRef","useState","useLayoutEffect","ACTIONS_COLUMN_ID","setColumnSizing","sizes","getBoundingClientRect","width","debugAll","console","log","getSortAttributes","role","ref","isInternalColumn","Tooltip","title","String","tooltip","placement","SortIndicator","direction","Menu","menu","Resizer"],"mappings":"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"}

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

@@ -26,6 +26,21 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   const {
     texts
   } = useLocalization();
+  const ref = React__default.useRef(null);
+  /*
+  const size = table.getState().columnSizing[COLUMN_ID];
+   // the actions column needs to set its size based on its content, not the actual column
+  // so we do this here instead of in the header
+  React.useLayoutEffect(() => {
+      if (ref.current && !size) {
+          const width = ref.current.getBoundingClientRect().width;
+           table.setColumnSizing(sizes => ({
+              ...sizes,
+              [COLUMN_ID]: width,
+          }));
+      }
+  }, [ref.current]);
+  */
   let content;
   // We don't want to show actions in edit mode, since we have editing actions,
   // which is shown in edit mode instead.
@@ -34,7 +49,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     content = /*#__PURE__*/React__default.createElement("span", {
-      className: "-mb-2 -mt-2 flex justify-end text-right"
+      className: "-mb-2 -mt-2 flex justify-end pl-2 text-right",
+      ref: ref
     }, actionsOnRow.map((button, index) => {
       var _ref, _button$props$tooltip;
       const tooltip = String((_ref = (_button$props$tooltip = button.props.tooltip) !== null && _button$props$tooltip !== void 0 ? _button$props$tooltip : button.props['aria-label']) !== null && _ref !== void 0 ? _ref : '');
@@ -83,7 +99,7 @@ function createRowActionsColumn() {
     footer: Footer,
     meta: {
       align: 'right',
-      className: cn('items-center print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]: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('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]: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'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    actions?: Table3RowActionRenderer<TType>[];\n    actionsLength: number;\n    isCurrentRow: boolean;\n    isEditing: boolean;\n    isResizingColumn: boolean;\n    isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n    const { isHovered } = React.useContext(RowContext);\n    const { texts } = useLocalization();\n\n    let content;\n\n    // We don't want to show actions in edit mode, since we have editing actions,\n    // which is shown in edit mode instead.\n    if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n        const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n        const actionsOnRow =\n            visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n        const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n        content = (\n            <span className=\"-mb-2 -mt-2 flex justify-end text-right\">\n                {actionsOnRow.map((button, index) => {\n                    const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                    return React.cloneElement(button, {\n                        appearance: 'discrete',\n                        key: index,\n                        tabIndex: isCurrentRow ? 0 : -1,\n                        tooltip: button.props.shortcut ? (\n                            <>\n                                {tooltip}\n                                <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                            </>\n                        ) : (\n                            tooltip\n                        ),\n                    });\n                })}\n                {actionsInMenu.length ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.table3.columns.actions.tooltip}\n                        icon=\"more\"\n                        tabIndex={isCurrentRow ? 0 : -1}\n                        menu={menuProps => (\n                            <Menu {...menuProps}>\n                                <Menu.Content>\n                                    {actionsInMenu.map((action, i) => (\n                                        <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                            {action.props['aria-label']}\n                                        </Menu.Item>\n                                    ))}\n                                </Menu.Content>\n                            </Menu>\n                        )}\n                    />\n                ) : null}\n            </span>\n        );\n    }\n\n    return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n    return (\n        <MemoedCell\n            {...context}\n            actions={tableMeta.rowActions.actionsForRow}\n            actionsLength={tableMeta.rowActions.actionsForRowLength}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isEditing={tableMeta.editing.isEditing}\n            isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n            isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n        />\n    );\n}\n\nexport function createRowActionsColumn<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=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-0 !pr-1',\n                '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]: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    };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}
+{"version":3,"file":"Actions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Actions.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Menu } from '../../../../Menu/Menu';\nimport { Shortcut } from '../../../../Shortcut/Shortcut';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    actions?: Table3RowActionRenderer<TType>[];\n    actionsLength: number;\n    isCurrentRow: boolean;\n    isEditing: boolean;\n    isResizingColumn: boolean;\n    isHoverStatePaused: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { actions, actionsLength, isCurrentRow, isEditing, isResizingColumn, isHoverStatePaused, row } = props;\n    const { isHovered } = React.useContext(RowContext);\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLSpanElement | null>(null);\n    /*\n    const size = table.getState().columnSizing[COLUMN_ID];\n\n    // the actions column needs to set its size based on its content, not the actual column\n    // so we do this here instead of in the header\n    React.useLayoutEffect(() => {\n        if (ref.current && !size) {\n            const width = ref.current.getBoundingClientRect().width;\n\n            table.setColumnSizing(sizes => ({\n                ...sizes,\n                [COLUMN_ID]: width,\n            }));\n        }\n    }, [ref.current]);\n    */\n\n    let content;\n\n    // We don't want to show actions in edit mode, since we have editing actions,\n    // which is shown in edit mode instead.\n    if (actions?.length && !isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n        const visibleActions = actions.map(action => action(row.original)).filter(action => !!action) as JSX.Element[];\n\n        const actionsOnRow =\n            visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);\n        const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);\n\n        content = (\n            <span className=\"-mb-2 -mt-2 flex justify-end pl-2 text-right\" ref={ref}>\n                {actionsOnRow.map((button, index) => {\n                    const tooltip = String(button.props.tooltip ?? button.props['aria-label'] ?? '');\n\n                    return React.cloneElement(button, {\n                        appearance: 'discrete',\n                        key: index,\n                        tabIndex: isCurrentRow ? 0 : -1,\n                        tooltip: button.props.shortcut ? (\n                            <>\n                                {tooltip}\n                                <Shortcut className=\"ml-2\" keys={button.props.shortcut} />\n                            </>\n                        ) : (\n                            tooltip\n                        ),\n                    });\n                })}\n                {actionsInMenu.length ? (\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.table3.columns.actions.tooltip}\n                        icon=\"more\"\n                        tabIndex={isCurrentRow ? 0 : -1}\n                        menu={menuProps => (\n                            <Menu {...menuProps}>\n                                <Menu.Content>\n                                    {actionsInMenu.map((action, i) => (\n                                        <Menu.Item key={i} {...action.props} shortcut={action.props.shortcut}>\n                                            {action.props['aria-label']}\n                                        </Menu.Item>\n                                    ))}\n                                </Menu.Content>\n                            </Menu>\n                        )}\n                    />\n                ) : null}\n            </span>\n        );\n    }\n\n    return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown>;\n\nfunction Cell<TType = unknown>(context: CellProps<TType>) {\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n    return (\n        <MemoedCell\n            {...context}\n            actions={tableMeta.rowActions.actionsForRow}\n            actionsLength={tableMeta.rowActions.actionsForRowLength}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isEditing={tableMeta.editing.isEditing}\n            isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n            isHoverStatePaused={!!tableMeta.hoverState.isPaused}\n        />\n    );\n}\n\nexport function createRowActionsColumn<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                '!pt-[var(--table3-row-padding)] print:opacity-0 [[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:sticky [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1',\n                '[[role=\"table\"][data-editing=\"false\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px] [[role=\"table\"][data-pause-hover=\"false\"][data-editing=\"false\"]_&]: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    };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","button","index","tooltip","String","cloneElement","appearance","key","tabIndex","shortcut","Shortcut","keys","IconButton","table3","columns","icon","menu","menuProps","Menu","Content","i","Item","DisplayCell","Cell","context","rowIndex","tableMeta","table","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","getState","columnSizingInfo","hoverState","isPaused","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","cn","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}

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

@@ -54,7 +54,7 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table3.columns.drag.tooltip,
     name: "drag",
-    className: "text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
+    className: "text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
   })));
 });
 function createRowDragColumn(onRowDrag) {
@@ -68,7 +68,7 @@ function createRowDragColumn(onRowDrag) {
     footer: Footer,
     meta: {
       align: 'center',
-      className: 'items-center !p-0',
+      className: '!p-0 !pt-[var(--table3-row-padding)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    isSelected: boolean;\n    onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n    const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const onDragStart = (event: React.DragEvent): void => {\n        let rows = [row];\n\n        if (table.options.enableRowSelection) {\n            rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n        }\n\n        const data = rows.map(row => row.original);\n\n        tableMeta.rowDrag.setDragging(\n            rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n        );\n\n        // set a default data value so that the consumer doesn't have to\n        event.dataTransfer.setData('text', JSON.stringify(data));\n\n        const showPlaceholder = (text: string) => {\n            const ghost = document.createElement('div');\n            ghost.id = GHOST_ELEMENT_ID;\n            ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n            ghost.innerText = text;\n            document.body.appendChild(ghost);\n            event.dataTransfer.setDragImage(ghost, 0, 0);\n        };\n\n        const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n        handleRowDrag(data, showPlaceholder, setDataTransfer);\n    };\n\n    const handleDragEnd = (): void => {\n        document.getElementById(GHOST_ELEMENT_ID)?.remove();\n        tableMeta.rowDrag.setDragging({});\n    };\n\n    return (\n        <DisplayCell {...props}>\n            <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n                <Icon\n                    aria-label={texts.table3.columns.drag.tooltip}\n                    name=\"drag\"\n                    className=\"text-grey-darkest invisible w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n                />\n            </div>\n        </DisplayCell>\n    );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: (context: CellContext<TType, unknown>) => (\n            <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n        ),\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: 'items-center !p-0',\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: 15,\n        minSize: 15,\n    };\n}\n"],"names":["COLUMN_ID","GHOST_ELEMENT_ID","Cell","React","memo","MemoedCell","props","isSelected","onRowDrag","handleRowDrag","row","table","texts","useLocalization","tableMeta","options","meta","onDragStart","event","rows","enableRowSelection","getSelectedRowModel","data","map","original","rowDrag","setDragging","reduce","dragging","rowBeingDragged","id","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","handleDragEnd","getElementById","remove","DisplayCell","draggable","onDragOver","preventDefault","onDragEnd","Icon","table3","columns","drag","tooltip","name","createRowDragColumn","header","ColumnHeader","cell","context","getIsSelected","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}
+{"version":3,"file":"Drag.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Drag.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowDragHandler } from '../../../types';\nimport { Icon } from '../../../../Icon/Icon';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__drag';\nconst GHOST_ELEMENT_ID = 'taco_table_dragging';\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    isSelected: boolean;\n    onRowDrag: Table3RowDragHandler<TType>;\n};\n\nconst Cell = React.memo(function MemoedCell<TType = unknown>(props: CellProps<TType>) {\n    const { isSelected, onRowDrag: handleRowDrag, row, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const onDragStart = (event: React.DragEvent): void => {\n        let rows = [row];\n\n        if (table.options.enableRowSelection) {\n            rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];\n        }\n\n        const data = rows.map(row => row.original);\n\n        tableMeta.rowDrag.setDragging(\n            rows.reduce((dragging, rowBeingDragged) => ({ ...dragging, [rowBeingDragged.id]: true }), {})\n        );\n\n        // set a default data value so that the consumer doesn't have to\n        event.dataTransfer.setData('text', JSON.stringify(data));\n\n        const showPlaceholder = (text: string) => {\n            const ghost = document.createElement('div');\n            ghost.id = GHOST_ELEMENT_ID;\n            ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';\n            ghost.innerText = text;\n            document.body.appendChild(ghost);\n            event.dataTransfer.setDragImage(ghost, 0, 0);\n        };\n\n        const setDataTransfer = (text: string) => event.dataTransfer.setData('text', text);\n\n        handleRowDrag(data, showPlaceholder, setDataTransfer);\n    };\n\n    const handleDragEnd = (): void => {\n        document.getElementById(GHOST_ELEMENT_ID)?.remove();\n        tableMeta.rowDrag.setDragging({});\n    };\n\n    return (\n        <DisplayCell {...props}>\n            <div draggable onDragStart={onDragStart} onDragOver={event => event.preventDefault()} onDragEnd={handleDragEnd}>\n                <Icon\n                    aria-label={texts.table3.columns.drag.tooltip}\n                    name=\"drag\"\n                    className=\"text-grey-darkest invisible -mt-1 w-[20px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white\"\n                />\n            </div>\n        </DisplayCell>\n    );\n}) as <TType = unknown>(props: CellProps<TType>) => JSX.Element;\n\nexport function createRowDragColumn<TType = unknown>(onRowDrag: Table3RowDragHandler<TType>): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: (context: CellContext<TType, unknown>) => (\n            <Cell {...context} isSelected={context.row.getIsSelected()} onRowDrag={onRowDrag} />\n        ),\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: '!p-0 !pt-[var(--table3-row-padding)]',\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: 15,\n        minSize: 15,\n    };\n}\n"],"names":["COLUMN_ID","GHOST_ELEMENT_ID","Cell","React","memo","MemoedCell","props","isSelected","onRowDrag","handleRowDrag","row","table","texts","useLocalization","tableMeta","options","meta","onDragStart","event","rows","enableRowSelection","getSelectedRowModel","data","map","original","rowDrag","setDragging","reduce","dragging","rowBeingDragged","id","dataTransfer","setData","JSON","stringify","showPlaceholder","text","ghost","document","createElement","className","innerText","body","appendChild","setDragImage","setDataTransfer","handleDragEnd","getElementById","remove","DisplayCell","draggable","onDragOver","preventDefault","onDragEnd","Icon","table3","columns","drag","tooltip","name","createRowDragColumn","header","ColumnHeader","cell","context","getIsSelected","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size","minSize"],"mappings":"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"}

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

@@ -53,6 +53,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       title: title
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       appearance: "discrete",
+      className: "-mt-1.5",
       icon: isExpanded ? 'chevron-down' : 'chevron-right',
       onClick: handleClick,
       tabIndex: tabIndex,
@@ -86,7 +87,7 @@ function createRowExpansionColumn(expandedRowRenderer) {
     footer: Footer,
     meta: {
       align: 'center',
-      className: 'items-center !p-0',
+      className: '!p-0 !pt-[var(--table3-row-padding)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n    const handleClick = event => {\n        event.stopPropagation();\n        context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n    };\n\n    const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n    return (\n        <ColumnHeader {...context}>\n            <Tooltip title={title}>\n                <IconButton\n                    appearance=\"discrete\"\n                    icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n                    onClick={handleClick}\n                    tabIndex={-1}\n                    title={title}\n                />\n            </Tooltip>\n        </ColumnHeader>\n    );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n    isCurrentRow: boolean;\n    isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const hasExpandedRow = expandedRowRenderer(row.original);\n\n    let content;\n\n    if (hasExpandedRow) {\n        const handleClick = event => {\n            event.stopPropagation();\n            row.toggleExpanded();\n        };\n        const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n        const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n        content = (\n            <Tooltip title={title}>\n                <IconButton\n                    appearance=\"discrete\"\n                    icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n                    onClick={handleClick}\n                    tabIndex={tabIndex}\n                    title={title}\n                />\n            </Tooltip>\n        );\n    }\n\n    return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { expandedRowRenderer, ...context } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n    return (\n        <MemoedCell\n            {...context}\n            expandedRowRenderer={expandedRowRenderer}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isExpanded={context.row.getIsExpanded()}\n        />\n    );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: 'items-center !p-0',\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: 40,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","isSomeRowsExpanded","table","getIsSomeRowsExpanded","handleClick","event","stopPropagation","toggleAllRowsExpanded","title","table3","columns","expansion","collapseAll","expandAll","React","ColumnHeader","Tooltip","IconButton","appearance","icon","onClick","tabIndex","MemoedCell","memo","props","expandedRowRenderer","isCurrentRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","DisplayCell","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","className","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":";;;;;;;;;MAWaA,SAAS,GAAG;AAEzB,SAASC,MAAM,CAAkBC,OAAsC;EACnE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,MAAMC,kBAAkB,GAAGH,OAAO,CAACI,KAAK,CAACC,qBAAqB,EAAE;EAChE,MAAMC,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,eAAe,EAAE;IACvBR,OAAO,CAACI,KAAK,CAACK,qBAAqB,CAAC,CAACN,kBAAkB,CAAC;GAC3D;EAED,MAAMO,KAAK,GAAGP,kBAAkB,GAAGF,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACC,WAAW,GAAGb,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACE,SAAS;EAExH,oBACIC,6BAACC,QAAY,oBAAKjB,OAAO,gBACrBgB,6BAACE,OAAO;IAACR,KAAK,EAAEA;kBACZM,6BAACG,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBC,IAAI,EAAElB,kBAAkB,GAAG,qBAAqB,GAAG,sBAAsB;IACzEmB,OAAO,EAAEhB,WAAW;IACpBiB,QAAQ,EAAE,CAAC,CAAC;IACZb,KAAK,EAAEA;IACT,CACI,CACC;AAEvB;AAQA,MAAMc,UAAU,gBAAGR,cAAK,CAACS,IAAI,CAAC,SAASD,UAAU,CAAkBE,KAA6B;EAC5F,MAAM;IAAEC,mBAAmB;IAAEC,YAAY;IAAEC,UAAU;IAAEC,GAAG;IAAE1B;GAAO,GAAGsB,KAAK;EAC3E,MAAM;IAAEzB;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM6B,SAAS,GAAG3B,KAAK,CAAC4B,OAAO,CAACC,IAAwB;EAExD,MAAMC,cAAc,GAAGP,mBAAmB,CAACG,GAAG,CAACK,QAAQ,CAAC;EAExD,IAAIC,OAAO;EAEX,IAAIF,cAAc,EAAE;IAChB,MAAM5B,WAAW,GAAGC,KAAK;MACrBA,KAAK,CAACC,eAAe,EAAE;MACvBsB,GAAG,CAACO,cAAc,EAAE;KACvB;IACD,MAAM3B,KAAK,GAAGmB,UAAU,GAAG5B,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAACyB,QAAQ,GAAGrC,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,SAAS,CAAC0B,MAAM;IAE1G,MAAMhB,QAAQ,GAAGK,YAAY,IAAI,CAACG,SAAS,CAACS,OAAO,CAACC,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;IAEtEL,OAAO,gBACHpB,6BAACE,OAAO;MAACR,KAAK,EAAEA;oBACZM,6BAACG,UAAU;MACPC,UAAU,EAAC,UAAU;MACrBC,IAAI,EAAEQ,UAAU,GAAG,cAAc,GAAG,eAAe;MACnDP,OAAO,EAAEhB,WAAW;MACpBiB,QAAQ,EAAEA,QAAQ;MAClBb,KAAK,EAAEA;MACT,CAET;;EAGL,oBAAOM,6BAAC0B,WAAW,oBAAKhB,KAAK,GAAGU,OAAO,CAAe;AAC1D,CAAC,CAAoE;AAMrE,SAASO,IAAI,CAAkBjB,KAAuB;EAClD,MAAM;IAAEC,mBAAmB;IAAE,GAAG3B;GAAS,GAAG0B,KAAK;EACjD,MAAM;IAAEkB;GAAU,GAAG5B,cAAK,CAAC6B,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMf,SAAS,GAAG/B,OAAO,CAACI,KAAK,CAAC4B,OAAO,CAACC,IAAwB;EAEhE,oBACIjB,6BAACQ,UAAU,oBACHxB,OAAO;IACX2B,mBAAmB,EAAEA,mBAAmB;IACxCC,YAAY,EAAEG,SAAS,CAACgB,UAAU,CAACC,eAAe,KAAKJ,QAAQ;IAC/Df,UAAU,EAAE7B,OAAO,CAAC8B,GAAG,CAACmB,aAAa;KACvC;AAEV;SAEgBC,wBAAwB,CACpCvB,mBAAsD;EAEtD,OAAO;IACHwB,EAAE,EAAErD,SAAS;IACbsD,MAAM,EAAErD,MAAM;IACdsD,IAAI,EAAGrD,OAAoC,iBAAKgB,6BAAC2B,IAAI,oBAAK3C,OAAO;MAAE2B,mBAAmB,EAAEA;OAAuB;IAC/G2B,MAAM,EAAEC,MAAM;IACdtB,IAAI,EAAE;MACFuB,KAAK,EAAE,QAAQ;MACfC,SAAS,EAAE,mBAAmB;MAC9BC,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,EAAE;GACT;AACL;;;;"}
+{"version":3,"file":"Expansion.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Expansion.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowExpansionRenderer } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\n\nexport const COLUMN_ID = '__expansion';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();\n    const handleClick = event => {\n        event.stopPropagation();\n        context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);\n    };\n\n    const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;\n\n    return (\n        <ColumnHeader {...context}>\n            <Tooltip title={title}>\n                <IconButton\n                    appearance=\"discrete\"\n                    icon={isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double'}\n                    onClick={handleClick}\n                    tabIndex={-1}\n                    title={title}\n                />\n            </Tooltip>\n        </ColumnHeader>\n    );\n}\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n    isCurrentRow: boolean;\n    isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { expandedRowRenderer, isCurrentRow, isExpanded, row, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const hasExpandedRow = expandedRowRenderer(row.original);\n\n    let content;\n\n    if (hasExpandedRow) {\n        const handleClick = event => {\n            event.stopPropagation();\n            row.toggleExpanded();\n        };\n        const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;\n\n        const tabIndex = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;\n\n        content = (\n            <Tooltip title={title}>\n                <IconButton\n                    appearance=\"discrete\"\n                    className=\"-mt-1.5\"\n                    icon={isExpanded ? 'chevron-down' : 'chevron-right'}\n                    onClick={handleClick}\n                    tabIndex={tabIndex}\n                    title={title}\n                />\n            </Tooltip>\n        );\n    }\n\n    return <DisplayCell {...props}>{content}</DisplayCell>;\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { expandedRowRenderer, ...context } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n    return (\n        <MemoedCell\n            {...context}\n            expandedRowRenderer={expandedRowRenderer}\n            isCurrentRow={tableMeta.currentRow.currentRowIndex === rowIndex}\n            isExpanded={context.row.getIsExpanded()}\n        />\n    );\n}\n\nexport function createRowExpansionColumn<TType = unknown>(\n    expandedRowRenderer: Table3RowExpansionRenderer<TType>\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: (context: CellContext<TType, unknown>) => <Cell {...context} expandedRowRenderer={expandedRowRenderer} />,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: '!p-0 !pt-[var(--table3-row-padding)]',\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: 40,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","isSomeRowsExpanded","table","getIsSomeRowsExpanded","handleClick","event","stopPropagation","toggleAllRowsExpanded","title","table3","columns","expansion","collapseAll","expandAll","React","ColumnHeader","Tooltip","IconButton","appearance","icon","onClick","tabIndex","MemoedCell","memo","props","expandedRowRenderer","isCurrentRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","className","DisplayCell","Cell","rowIndex","useContext","RowContext","currentRow","currentRowIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}

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

@@ -104,7 +104,7 @@ function createRowSelectionColumn(onRowDrag) {
     footer: Footer,
     meta: {
       align: 'center',
-      className: 'items-center !justify-end !p-0 !pr-0.5',
+      className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowDragHandler } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"!mt-0\"\n                        checked={isSelected}\n                        onClick={handleClick}\n                        // this is necessary to remove console spam from eslint\n                        onChange={() => false}\n                        tabIndex={isCurrentRow ? 0 : -1}\n                    />\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    onRowDrag?: Table3RowDragHandler<TType>\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: 'items-center !justify-end !p-0 !pr-0.5',\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !justify-end !p-0 !pr-0.5',\n        },\n        // options\n        enableResizing: false,\n        size: onRowDrag ? 22 : 32,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","onRowDrag","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}
+{"version":3,"file":"Selection.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/Selection.tsx"],"sourcesContent":["import React from 'react';\nimport { HeaderContext, CellContext, DisplayColumnDef, TableMeta } from '@tanstack/react-table';\nimport cn from 'classnames';\nimport { Checkbox } from '../../../../Checkbox/Checkbox';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3RowDragHandler } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { Footer } from '../footer/Footer';\nimport { getRadioClassnames } from '../../../../RadioGroup/util';\n\nexport const COLUMN_ID = '__select';\n\nfunction Header<TType = unknown>(context: HeaderContext<TType, unknown>) {\n    const { texts } = useLocalization();\n\n    if (context.table.options.enableMultiRowSelection) {\n        const isAllRowsSelected = context.table.getIsAllRowsSelected();\n        const isSomeRowsSelected = context.table.getIsSomeRowsSelected();\n        const title = isAllRowsSelected ? texts.table3.columns.select.deselectAll : texts.table3.columns.select.selectAll;\n\n        return (\n            <ColumnHeader {...context}>\n                <Tooltip title={title}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"hover:border-blue !mt-0\"\n                        key={String(`${isAllRowsSelected}_${isSomeRowsSelected}`)}\n                        checked={isAllRowsSelected}\n                        indeterminate={isSomeRowsSelected}\n                        onChange={context.table.toggleAllRowsSelected}\n                        tabIndex={-1}\n                    />\n                </Tooltip>\n            </ColumnHeader>\n        );\n    } else {\n        return <ColumnHeader {...context}></ColumnHeader>;\n    }\n}\n\nconst toggleBetween = (fromRowIndex: number, toRowIndex: number): [number, number] => {\n    const fromIndex = toRowIndex < fromRowIndex ? toRowIndex : fromRowIndex;\n    const toIndex = toRowIndex > fromRowIndex ? toRowIndex : fromRowIndex;\n\n    return [fromIndex, toIndex];\n};\n\nconst Cell = React.memo(\n    function MemoedCell<TType = unknown>(context: CellContext<TType, unknown>) {\n        const { texts } = useLocalization();\n        const { rowIndex } = React.useContext(RowContext);\n        const tableMeta = context.table.options.meta as TableMeta<TType>;\n\n        const isCurrentRow = tableMeta.currentRow.currentRowIndex === rowIndex;\n        const isSelected = context.row.getIsSelected();\n        const title = isSelected ? texts.table3.columns.select.deselect : texts.table3.columns.select.select;\n\n        if (context.table.options.enableMultiRowSelection) {\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n\n                if (event.shiftKey) {\n                    const [fromIndex, toIndex] = toggleBetween(\n                        tableMeta.rowSelection.lastSelectedRowIndex.current ?? 0,\n                        rowIndex\n                    );\n\n                    context.table\n                        .getRowModel()\n                        .rows.slice(fromIndex, toIndex + 1)\n                        .forEach(row => row.toggleSelected(true));\n                } else {\n                    context.row.toggleSelected();\n                }\n\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <Checkbox\n                        aria-label={title}\n                        className=\"!mt-0\"\n                        checked={isSelected}\n                        onClick={handleClick}\n                        // this is necessary to remove console spam from eslint\n                        onChange={() => false}\n                        tabIndex={isCurrentRow ? 0 : -1}\n                    />\n                </DisplayCell>\n            );\n        } else {\n            const className = cn('!mt-0', getRadioClassnames());\n\n            const handleClick = (event: React.MouseEvent): void => {\n                event.stopPropagation();\n                context.row.toggleSelected();\n                tableMeta.rowSelection.lastSelectedRowIndex.current = rowIndex;\n            };\n\n            return (\n                <DisplayCell {...context}>\n                    <button\n                        className={className}\n                        aria-checked={isSelected}\n                        onClick={handleClick}\n                        role=\"radio\"\n                        tabIndex={-1}\n                        type=\"button\">\n                        {isSelected ? <span className=\"h-2 w-2 rounded-full bg-white\" /> : null}\n                    </button>\n                </DisplayCell>\n            );\n        }\n    },\n    function arePropsEqual(oldProps: CellContext<unknown, unknown>, newProps: CellContext<unknown, unknown>) {\n        const oldTableMeta = oldProps.table.options.meta as TableMeta<unknown>;\n        const newTableMeta = newProps.table.options.meta as TableMeta<unknown>;\n\n        // we memo because we don't want the row re-rendering and removing focus from the checkbox\n        // we can't default to the standard comparison because we need currentRow off the table meta\n        // and we don't really care about re-rendering in any other scenario\n        return (\n            newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex &&\n            newProps.row.getIsSelected() !== oldProps.row.getIsSelected()\n        );\n    }\n) as <TType = unknown>(context: CellContext<TType, unknown>) => JSX.Element;\n\nexport function createRowSelectionColumn<TType = unknown>(\n    onRowDrag?: Table3RowDragHandler<TType>\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: Header,\n        cell: Cell,\n        footer: Footer,\n        meta: {\n            align: 'center',\n            className: '!pt-[var(--table3-row-padding)] !justify-end !p-0 !pr-0.5',\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !justify-end !p-0 !pr-0.5',\n        },\n        // options\n        enableResizing: false,\n        size: onRowDrag ? 22 : 32,\n    };\n}\n"],"names":["COLUMN_ID","Header","context","texts","useLocalization","table","options","enableMultiRowSelection","isAllRowsSelected","getIsAllRowsSelected","isSomeRowsSelected","getIsSomeRowsSelected","title","table3","columns","select","deselectAll","selectAll","React","ColumnHeader","Tooltip","Checkbox","className","key","String","checked","indeterminate","onChange","toggleAllRowsSelected","tabIndex","toggleBetween","fromRowIndex","toRowIndex","fromIndex","toIndex","Cell","memo","MemoedCell","rowIndex","useContext","RowContext","tableMeta","meta","isCurrentRow","currentRow","currentRowIndex","isSelected","row","getIsSelected","deselect","handleClick","event","stopPropagation","shiftKey","rowSelection","lastSelectedRowIndex","current","getRowModel","rows","slice","forEach","toggleSelected","DisplayCell","onClick","cn","getRadioClassnames","role","type","arePropsEqual","oldProps","newProps","oldTableMeta","newTableMeta","createRowSelectionColumn","onRowDrag","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":";;;;;;;;;;;MAaaA,SAAS,GAAG;AAEzB,SAASC,MAAM,CAAkBC,OAAsC;EACnE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,IAAIF,OAAO,CAACG,KAAK,CAACC,OAAO,CAACC,uBAAuB,EAAE;IAC/C,MAAMC,iBAAiB,GAAGN,OAAO,CAACG,KAAK,CAACI,oBAAoB,EAAE;IAC9D,MAAMC,kBAAkB,GAAGR,OAAO,CAACG,KAAK,CAACM,qBAAqB,EAAE;IAChE,MAAMC,KAAK,GAAGJ,iBAAiB,GAAGL,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC,WAAW,GAAGb,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACE,SAAS;IAEjH,oBACIC,6BAACC,QAAY,oBAAKjB,OAAO,gBACrBgB,6BAACE,OAAO;MAACR,KAAK,EAAEA;oBACZM,6BAACG,QAAQ;oBACOT,KAAK;MACjBU,SAAS,EAAC,yBAAyB;MACnCC,GAAG,EAAEC,MAAM,IAAIhB,qBAAqBE,oBAAoB,CAAC;MACzDe,OAAO,EAAEjB,iBAAiB;MAC1BkB,aAAa,EAAEhB,kBAAkB;MACjCiB,QAAQ,EAAEzB,OAAO,CAACG,KAAK,CAACuB,qBAAqB;MAC7CC,QAAQ,EAAE,CAAC;MACb,CACI,CACC;GAEtB,MAAM;IACH,oBAAOX,6BAACC,QAAY,oBAAKjB,OAAO,EAAiB;;AAEzD;AAEA,MAAM4B,aAAa,GAAG,CAACC,YAAoB,EAAEC,UAAkB;EAC3D,MAAMC,SAAS,GAAGD,UAAU,GAAGD,YAAY,GAAGC,UAAU,GAAGD,YAAY;EACvE,MAAMG,OAAO,GAAGF,UAAU,GAAGD,YAAY,GAAGC,UAAU,GAAGD,YAAY;EAErE,OAAO,CAACE,SAAS,EAAEC,OAAO,CAAC;AAC/B,CAAC;AAED,MAAMC,IAAI,gBAAGjB,cAAK,CAACkB,IAAI,CACnB,SAASC,UAAU,CAAkBnC,OAAoC;EACrE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEkC;GAAU,GAAGpB,cAAK,CAACqB,UAAU,CAACC,UAAU,CAAC;EACjD,MAAMC,SAAS,GAAGvC,OAAO,CAACG,KAAK,CAACC,OAAO,CAACoC,IAAwB;EAEhE,MAAMC,YAAY,GAAGF,SAAS,CAACG,UAAU,CAACC,eAAe,KAAKP,QAAQ;EACtE,MAAMQ,UAAU,GAAG5C,OAAO,CAAC6C,GAAG,CAACC,aAAa,EAAE;EAC9C,MAAMpC,KAAK,GAAGkC,UAAU,GAAG3C,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACkC,QAAQ,GAAG9C,KAAK,CAACU,MAAM,CAACC,OAAO,CAACC,MAAM,CAACA,MAAM;EAEpG,IAAIb,OAAO,CAACG,KAAK,CAACC,OAAO,CAACC,uBAAuB,EAAE;IAC/C,MAAM2C,WAAW,GAAIC,KAAuB;MACxCA,KAAK,CAACC,eAAe,EAAE;MAEvB,IAAID,KAAK,CAACE,QAAQ,EAAE;QAAA;QAChB,MAAM,CAACpB,SAAS,EAAEC,OAAO,CAAC,GAAGJ,aAAa,0BACtCW,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,yEAAI,CAAC,EACxDlB,QAAQ,CACX;QAEDpC,OAAO,CAACG,KAAK,CACRoD,WAAW,EAAE,CACbC,IAAI,CAACC,KAAK,CAAC1B,SAAS,EAAEC,OAAO,GAAG,CAAC,CAAC,CAClC0B,OAAO,CAACb,GAAG,IAAIA,GAAG,CAACc,cAAc,CAAC,IAAI,CAAC,CAAC;OAChD,MAAM;QACH3D,OAAO,CAAC6C,GAAG,CAACc,cAAc,EAAE;;MAGhCpB,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,GAAGlB,QAAQ;KACjE;IAED,oBACIpB,6BAAC4C,WAAW,oBAAK5D,OAAO,gBACpBgB,6BAACG,QAAQ;oBACOT,KAAK;MACjBU,SAAS,EAAC,OAAO;MACjBG,OAAO,EAAEqB,UAAU;MACnBiB,OAAO,EAAEb,WAAW;;MAEpBvB,QAAQ,EAAE,MAAM,KAAK;MACrBE,QAAQ,EAAEc,YAAY,GAAG,CAAC,GAAG,CAAC;MAChC,CACQ;GAErB,MAAM;IACH,MAAMrB,SAAS,GAAG0C,EAAE,CAAC,OAAO,EAAEC,kBAAkB,EAAE,CAAC;IAEnD,MAAMf,WAAW,GAAIC,KAAuB;MACxCA,KAAK,CAACC,eAAe,EAAE;MACvBlD,OAAO,CAAC6C,GAAG,CAACc,cAAc,EAAE;MAC5BpB,SAAS,CAACa,YAAY,CAACC,oBAAoB,CAACC,OAAO,GAAGlB,QAAQ;KACjE;IAED,oBACIpB,6BAAC4C,WAAW,oBAAK5D,OAAO,gBACpBgB;MACII,SAAS,EAAEA,SAAS;sBACNwB,UAAU;MACxBiB,OAAO,EAAEb,WAAW;MACpBgB,IAAI,EAAC,OAAO;MACZrC,QAAQ,EAAE,CAAC,CAAC;MACZsC,IAAI,EAAC;OACJrB,UAAU,gBAAG5B;MAAMI,SAAS,EAAC;MAAkC,GAAG,IAAI,CAClE,CACC;;AAG1B,CAAC,EACD,SAAS8C,aAAa,CAACC,QAAuC,EAAEC,QAAuC;EACnG,MAAMC,YAAY,GAAGF,QAAQ,CAAChE,KAAK,CAACC,OAAO,CAACoC,IAA0B;EACtE,MAAM8B,YAAY,GAAGF,QAAQ,CAACjE,KAAK,CAACC,OAAO,CAACoC,IAA0B;;;;EAKtE,OACI8B,YAAY,CAAC5B,UAAU,CAACC,eAAe,KAAK0B,YAAY,CAAC3B,UAAU,CAACC,eAAe,IACnFyB,QAAQ,CAACvB,GAAG,CAACC,aAAa,EAAE,KAAKqB,QAAQ,CAACtB,GAAG,CAACC,aAAa,EAAE;AAErE,CAAC,CACsE;SAE3DyB,wBAAwB,CACpCC,SAAuC;EAEvC,OAAO;IACHC,EAAE,EAAE3E,SAAS;IACb4E,MAAM,EAAE3E,MAAM;IACd4E,IAAI,EAAE1C,IAAI;IACV2C,MAAM,EAAEC,MAAM;IACdrC,IAAI,EAAE;MACFsC,KAAK,EAAE,QAAQ;MACf1D,SAAS,EAAE,2DAA2D;MACtE2D,cAAc,EAAE,KAAK;MACrBC,YAAY,EAAE,KAAK;MACnBC,cAAc,EAAE,KAAK;MACrBP,MAAM,EAAE,EAAE;MACVQ,eAAe,EAAE;KACpB;;IAEDC,cAAc,EAAE,KAAK;IACrBC,IAAI,EAAEZ,SAAS,GAAG,EAAE,GAAG;GAC1B;AACL;;;;"}

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

@@ -20,7 +20,7 @@ function useSettingsStateListener(table, onChangeSettings) {
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [onChangeSettings, meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
+  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
 }
 
 export { useSettingsStateListener };

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

@@ -1 +1 @@
-{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SettingsAdapter } from '../../types';\n\nexport function useSettingsStateListener<TType = unknown>(\n    table: RTable<TType>,\n    onChangeSettings: Table3SettingsAdapter | undefined\n) {\n    const meta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    React.useEffect(() => {\n        let handler;\n\n        if (typeof onChangeSettings === 'function') {\n            handler = setTimeout(\n                () =>\n                    onChangeSettings({\n                        columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,\n                        columnOrder: state.columnOrder,\n                        columnPinning: state.columnPinning,\n                        columnSizing: state.columnSizing,\n                        columnVisibility: state.columnVisibility,\n                        excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,\n                        fontSize: meta.fontSize.size,\n                        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,\n                        rowHeight: meta.rowHeight.height,\n                        sorting: state.sorting,\n                    }),\n                250\n            );\n        }\n\n        return () => clearTimeout(handler);\n    }, [\n        onChangeSettings,\n        meta.columnFreezing.frozenColumnIndex,\n        state.columnOrder,\n        state.columnPinning,\n        state.columnSizing,\n        state.columnVisibility,\n        meta.search.excludeUnmatchedResults,\n        meta.fontSize.size,\n        meta.rowHeight.height,\n        meta.printing.printWarningDialogVisibility,\n        state.sorting,\n    ]);\n}\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","columnFreezingIndex","columnFreezing","frozenColumnIndex","columnOrder","columnPinning","columnSizing","columnVisibility","excludeUnmatchedRecordsInSearch","search","excludeUnmatchedResults","fontSize","size","showWarningWhenPrintingLargeDataset","printing","printWarningDialogVisibility","rowHeight","height","sorting","clearTimeout"],"mappings":";;SAIgBA,wBAAwB,CACpCC,KAAoB,EACpBC,gBAAmD;EAEnD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAwB;EACnD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9BC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAI,OAAOP,gBAAgB,KAAK,UAAU,EAAE;MACxCO,OAAO,GAAGC,UAAU,CAChB,MACIR,gBAAgB,CAAC;QACbS,mBAAmB,EAAER,IAAI,CAACS,cAAc,CAACC,iBAAiB;QAC1DC,WAAW,EAAET,KAAK,CAACS,WAAW;QAC9BC,aAAa,EAAEV,KAAK,CAACU,aAAa;QAClCC,YAAY,EAAEX,KAAK,CAACW,YAAY;QAChCC,gBAAgB,EAAEZ,KAAK,CAACY,gBAAgB;QACxCC,+BAA+B,EAAEf,IAAI,CAACgB,MAAM,CAACC,uBAAuB;QACpEC,QAAQ,EAAElB,IAAI,CAACkB,QAAQ,CAACC,IAAI;QAC5BC,mCAAmC,EAAEpB,IAAI,CAACqB,QAAQ,CAACC,4BAA4B;QAC/EC,SAAS,EAAEvB,IAAI,CAACuB,SAAS,CAACC,MAAM;QAChCC,OAAO,EAAEvB,KAAK,CAACuB;OAClB,CAAC,EACN,GAAG,CACN;;IAGL,OAAO,MAAMC,YAAY,CAACpB,OAAO,CAAC;GACrC,EAAE,CACCP,gBAAgB,EAChBC,IAAI,CAACS,cAAc,CAACC,iBAAiB,EACrCR,KAAK,CAACS,WAAW,EACjBT,KAAK,CAACU,aAAa,EACnBV,KAAK,CAACW,YAAY,EAClBX,KAAK,CAACY,gBAAgB,EACtBd,IAAI,CAACgB,MAAM,CAACC,uBAAuB,EACnCjB,IAAI,CAACkB,QAAQ,CAACC,IAAI,EAClBnB,IAAI,CAACuB,SAAS,CAACC,MAAM,EACrBxB,IAAI,CAACqB,QAAQ,CAACC,4BAA4B,EAC1CpB,KAAK,CAACuB,OAAO,CAChB,CAAC;AACN;;;;"}
+{"version":3,"file":"useSettingsStateListener.js","sources":["../../../../../../../../../src/components/Table3/hooks/listeners/useSettingsStateListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Table3SettingsAdapter } from '../../types';\n\nexport function useSettingsStateListener<TType = unknown>(\n    table: RTable<TType>,\n    onChangeSettings: Table3SettingsAdapter | undefined\n) {\n    const meta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    React.useEffect(() => {\n        let handler;\n\n        if (typeof onChangeSettings === 'function') {\n            handler = setTimeout(\n                () =>\n                    onChangeSettings({\n                        columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,\n                        columnOrder: state.columnOrder,\n                        columnPinning: state.columnPinning,\n                        columnSizing: state.columnSizing,\n                        columnVisibility: state.columnVisibility,\n                        excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,\n                        fontSize: meta.fontSize.size,\n                        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,\n                        rowHeight: meta.rowHeight.height,\n                        sorting: state.sorting,\n                    }),\n                250\n            );\n        }\n\n        return () => clearTimeout(handler);\n    }, [\n        meta.columnFreezing.frozenColumnIndex,\n        state.columnOrder,\n        state.columnPinning,\n        state.columnSizing,\n        state.columnVisibility,\n        meta.search.excludeUnmatchedResults,\n        meta.fontSize.size,\n        meta.rowHeight.height,\n        meta.printing.printWarningDialogVisibility,\n        state.sorting,\n    ]);\n}\n"],"names":["useSettingsStateListener","table","onChangeSettings","meta","options","state","getState","React","useEffect","handler","setTimeout","columnFreezingIndex","columnFreezing","frozenColumnIndex","columnOrder","columnPinning","columnSizing","columnVisibility","excludeUnmatchedRecordsInSearch","search","excludeUnmatchedResults","fontSize","size","showWarningWhenPrintingLargeDataset","printing","printWarningDialogVisibility","rowHeight","height","sorting","clearTimeout"],"mappings":";;SAIgBA,wBAAwB,CACpCC,KAAoB,EACpBC,gBAAmD;EAEnD,MAAMC,IAAI,GAAGF,KAAK,CAACG,OAAO,CAACD,IAAwB;EACnD,MAAME,KAAK,GAAGJ,KAAK,CAACK,QAAQ,EAAE;EAE9BC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIC,OAAO;IAEX,IAAI,OAAOP,gBAAgB,KAAK,UAAU,EAAE;MACxCO,OAAO,GAAGC,UAAU,CAChB,MACIR,gBAAgB,CAAC;QACbS,mBAAmB,EAAER,IAAI,CAACS,cAAc,CAACC,iBAAiB;QAC1DC,WAAW,EAAET,KAAK,CAACS,WAAW;QAC9BC,aAAa,EAAEV,KAAK,CAACU,aAAa;QAClCC,YAAY,EAAEX,KAAK,CAACW,YAAY;QAChCC,gBAAgB,EAAEZ,KAAK,CAACY,gBAAgB;QACxCC,+BAA+B,EAAEf,IAAI,CAACgB,MAAM,CAACC,uBAAuB;QACpEC,QAAQ,EAAElB,IAAI,CAACkB,QAAQ,CAACC,IAAI;QAC5BC,mCAAmC,EAAEpB,IAAI,CAACqB,QAAQ,CAACC,4BAA4B;QAC/EC,SAAS,EAAEvB,IAAI,CAACuB,SAAS,CAACC,MAAM;QAChCC,OAAO,EAAEvB,KAAK,CAACuB;OAClB,CAAC,EACN,GAAG,CACN;;IAGL,OAAO,MAAMC,YAAY,CAACpB,OAAO,CAAC;GACrC,EAAE,CACCN,IAAI,CAACS,cAAc,CAACC,iBAAiB,EACrCR,KAAK,CAACS,WAAW,EACjBT,KAAK,CAACU,aAAa,EACnBV,KAAK,CAACW,YAAY,EAClBX,KAAK,CAACY,gBAAgB,EACtBd,IAAI,CAACgB,MAAM,CAACC,uBAAuB,EACnCjB,IAAI,CAACkB,QAAQ,CAACC,IAAI,EAClBnB,IAAI,CAACuB,SAAS,CAACC,MAAM,EACrBxB,IAAI,CAACqB,QAAQ,CAACC,4BAA4B,EAC1CpB,KAAK,CAACuB,OAAO,CAChB,CAAC;AACN;;;;"}

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

@@ -3,7 +3,6 @@ import { isInternalColumn } from '../util/columns.js';
 import { MIN_COLUMN_SIZE } from '../components/columns/styles.js';
 import { COLUMN_ID } from '../components/columns/internal/Actions.js';
 
-const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
@@ -17,7 +16,7 @@ const useCssGrid = table => {
       const width = columnSizing[column.id];
       if (isInternalColumn(column.id)) {
         if (column.id === COLUMN_ID) {
-          size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, auto)` : '1fr';
+          size = 'minmax(max-content, auto)';
         } else {
           size = `${column.getSize()}px`;
         }

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

@@ -1 +1 @@
-{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nconst REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const length = table.getRowModel().rows.length;\n\n    const gridTemplateColumns = React.useMemo(() => {\n        return allVisibleColumns.reduce((accum, column, index) => {\n            let size;\n            const isLastColumn = index === allVisibleColumns.length - 1;\n            // column has a getSize function, but it always returns a default value (150), and we want the\n            // first render to use auto layout - so we get the size directly from table state where it is undefined\n            const width = columnSizing[column.id] as number | '1fr';\n\n            if (isInternalColumn(column.id)) {\n                if (column.id === ACTIONS_COLUMN_ID) {\n                    size =\n                        column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE\n                            ? `minmax(${column.getSize()}px, auto)`\n                            : '1fr';\n                } else {\n                    size = `${column.getSize()}px`;\n                }\n            } else if (width !== undefined) {\n                if (width === '1fr') {\n                    size = 'minmax(max-content, 1fr)';\n                } else if (isLastColumn) {\n                    size = `minmax(${width}px, auto)`;\n                } else if (width < MIN_COLUMN_SIZE) {\n                    // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n                    // to go below the minSize - so we have to prevent it entirely on the grid layout\n                    size = `${MIN_COLUMN_SIZE}px`;\n                } else {\n                    size = `${width}px`;\n                }\n            } else {\n                size = 'minmax(max-content, auto)';\n            }\n\n            return `${accum} ${size}`.trim();\n        }, '');\n    }, [allVisibleColumns, columnSizing]);\n\n    const gridTemplateRows = React.useMemo(() => {\n        return `min-content repeat(${length}, min-content) 1fr min-content`;\n    }, [length]);\n\n    const style: React.CSSProperties = {\n        gridTemplateColumns,\n        gridTemplateRows,\n    };\n\n    return { style };\n};\n"],"names":["REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE","useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","length","getRowModel","rows","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;AAMA,MAAMA,6CAA6C,GAAG,GAAG;MAE5CC,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,MAAM,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;EAE9C,MAAMG,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOT,iBAAiB,CAACU,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKb,iBAAiB,CAACI,MAAM,GAAG,CAAC;;;MAG3D,MAAMY,KAAK,GAAGd,YAAY,CAACU,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GACAF,MAAM,CAACQ,OAAO,EAAE,KAAKvB,6CAA6C,aAClDe,MAAM,CAACQ,OAAO,aAAa,GACrC,KAAK;SAClB,MAAM;UACHN,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACvB,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAMsB,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;IACnC,6BAA6BL,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMqB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}
+{"version":3,"file":"useCssGrid.js","sources":["../../../../../../../../src/components/Table3/hooks/useCssGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as RTable } from '@tanstack/react-table';\nimport { isInternalColumn } from '../util/columns';\nimport { MIN_COLUMN_SIZE } from '../components/columns/styles';\nimport { COLUMN_ID as ACTIONS_COLUMN_ID } from '../components/columns/internal/Actions';\n\nexport const useCssGrid = <TType = unknown>(table: RTable<TType>) => {\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const length = table.getRowModel().rows.length;\n\n    const gridTemplateColumns = React.useMemo(() => {\n        return allVisibleColumns.reduce((accum, column, index) => {\n            let size;\n            const isLastColumn = index === allVisibleColumns.length - 1;\n            // column has a getSize function, but it always returns a default value (150), and we want the\n            // first render to use auto layout - so we get the size directly from table state where it is undefined\n            const width = columnSizing[column.id] as number | '1fr';\n\n            if (isInternalColumn(column.id)) {\n                if (column.id === ACTIONS_COLUMN_ID) {\n                    size = 'minmax(max-content, auto)';\n                } else {\n                    size = `${column.getSize()}px`;\n                }\n            } else if (width !== undefined) {\n                if (width === '1fr') {\n                    size = 'minmax(max-content, 1fr)';\n                } else if (isLastColumn) {\n                    size = `minmax(${width}px, auto)`;\n                } else if (width < MIN_COLUMN_SIZE) {\n                    // the react-table getResizeHandler function does not respect the minSize property on columns, it is possible\n                    // to go below the minSize - so we have to prevent it entirely on the grid layout\n                    size = `${MIN_COLUMN_SIZE}px`;\n                } else {\n                    size = `${width}px`;\n                }\n            } else {\n                size = 'minmax(max-content, auto)';\n            }\n\n            return `${accum} ${size}`.trim();\n        }, '');\n    }, [allVisibleColumns, columnSizing]);\n\n    const gridTemplateRows = React.useMemo(() => {\n        return `min-content repeat(${length}, min-content) 1fr min-content`;\n    }, [length]);\n\n    const style: React.CSSProperties = {\n        gridTemplateColumns,\n        gridTemplateRows,\n    };\n\n    return { style };\n};\n"],"names":["useCssGrid","table","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","length","getRowModel","rows","gridTemplateColumns","React","useMemo","reduce","accum","column","index","size","isLastColumn","width","id","isInternalColumn","ACTIONS_COLUMN_ID","getSize","undefined","MIN_COLUMN_SIZE","trim","gridTemplateRows","style"],"mappings":";;;;;MAMaA,UAAU,GAAqBC,KAAoB;EAC5D,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGH,KAAK,CAACI,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,MAAM,GAAGL,KAAK,CAACM,WAAW,EAAE,CAACC,IAAI,CAACF,MAAM;EAE9C,MAAMG,mBAAmB,GAAGC,cAAK,CAACC,OAAO,CAAC;IACtC,OAAOT,iBAAiB,CAACU,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;MACjD,IAAIC,IAAI;MACR,MAAMC,YAAY,GAAGF,KAAK,KAAKb,iBAAiB,CAACI,MAAM,GAAG,CAAC;;;MAG3D,MAAMY,KAAK,GAAGd,YAAY,CAACU,MAAM,CAACK,EAAE,CAAmB;MAEvD,IAAIC,gBAAgB,CAACN,MAAM,CAACK,EAAE,CAAC,EAAE;QAC7B,IAAIL,MAAM,CAACK,EAAE,KAAKE,SAAiB,EAAE;UACjCL,IAAI,GAAG,2BAA2B;SACrC,MAAM;UACHA,IAAI,MAAMF,MAAM,CAACQ,OAAO,MAAM;;OAErC,MAAM,IAAIJ,KAAK,KAAKK,SAAS,EAAE;QAC5B,IAAIL,KAAK,KAAK,KAAK,EAAE;UACjBF,IAAI,GAAG,0BAA0B;SACpC,MAAM,IAAIC,YAAY,EAAE;UACrBD,IAAI,aAAaE,gBAAgB;SACpC,MAAM,IAAIA,KAAK,GAAGM,eAAe,EAAE;;;UAGhCR,IAAI,MAAMQ,mBAAmB;SAChC,MAAM;UACHR,IAAI,MAAME,SAAS;;OAE1B,MAAM;QACHF,IAAI,GAAG,2BAA2B;;MAGtC,UAAUH,SAASG,MAAM,CAACS,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;GACT,EAAE,CAACvB,iBAAiB,EAAEE,YAAY,CAAC,CAAC;EAErC,MAAMsB,gBAAgB,GAAGhB,cAAK,CAACC,OAAO,CAAC;IACnC,6BAA6BL,sCAAsC;GACtE,EAAE,CAACA,MAAM,CAAC,CAAC;EAEZ,MAAMqB,KAAK,GAAwB;IAC/BlB,mBAAmB;IACnBiB;GACH;EAED,OAAO;IAAEC;GAAO;AACpB;;;;"}