@economic/taco 2.2.4 → 2.2.5

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

@@ -18,8 +18,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     isEditing,
     isResizingColumn,
     isHoverStatePaused,
-    row,
-    table
+    row
   } = props;
   const {
     isHovered
@@ -28,18 +27,20 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     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__default.useLayoutEffect(() => {
-    if (ref.current && !size) {
-      const width = ref.current.getBoundingClientRect().width;
-      table.setColumnSizing(sizes => ({
-        ...sizes,
-        [COLUMN_ID]: width
-      }));
-    }
-  }, [ref.current]);
+  /*
+  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.

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, table } = props;\n    const { isHovered } = React.useContext(RowContext);\n    const { texts } = useLocalization();\n    const ref = React.useRef<HTMLSpanElement | null>(null);\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    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","table","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","size","getState","columnSizing","useLayoutEffect","current","width","getBoundingClientRect","setColumnSizing","sizes","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","options","meta","rowActions","actionsForRow","actionsForRowLength","currentRow","currentRowIndex","editing","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/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, 1fr)` : '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, 1fr)`\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,YAAY,GACpC,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;;;;"}

package/dist/taco.cjs.development.js

@@ -16207,8 +16207,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     isEditing,
     isResizingColumn,
     isHoverStatePaused,
-    row,
-    table
+    row
   } = props;
   const {
     isHovered
@@ -16217,18 +16216,20 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     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__default.useLayoutEffect(() => {
-    if (ref.current && !size) {
-      const width = ref.current.getBoundingClientRect().width;
-      table.setColumnSizing(sizes => ({
-        ...sizes,
-        [COLUMN_ID]: width
-      }));
-    }
-  }, [ref.current]);
+  /*
+  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.
@@ -16299,7 +16300,6 @@ function createRowActionsColumn$1() {
   };
 }
 
-const REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE = 150;
 const useCssGrid = table => {
   const allVisibleColumns = table.getVisibleLeafColumns();
   const columnSizing = table.getState().columnSizing;
@@ -16313,7 +16313,7 @@ const useCssGrid = table => {
       const width = columnSizing[column.id];
       if (isInternalColumn$1(column.id)) {
         if (column.id === COLUMN_ID) {
-          size = column.getSize() !== REACT_TABLE_DEFAULT_COLUMN_SIZE_DO_NOT_CHANGE ? `minmax(${column.getSize()}px, 1fr)` : '1fr';
+          size = 'minmax(max-content, auto)';
         } else {
           size = `${column.getSize()}px`;
         }