@economic/taco 2.25.1-alpha.13 → 2.25.1

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

@@ -0,0 +1,129 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { IconButton } from '../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Shortcut } from '../../../../Shortcut/Shortcut.js';
+import { Menu } from '../../../../Menu/Menu.js';
+import { FontSizes } from '../../../../../types.js';
+import { Header } from '../header/Header.js';
+import { RowContext } from '../../rows/RowContext.js';
+import { DisplayCell } from '../cell/DisplayCell.js';
+import { Footer } from '../footer/Footer.js';
+import { isIndicatorVisible, getIndicatorCellClassName } from '../cell/Indicator.js';
+
+const COLUMN_ID = '__actions';
+const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  const {
+    actions,
+    actionsLength,
+    fontSize,
+    isActiveRow,
+    isEditing,
+    isResizingColumn,
+    isHoverStatePaused,
+    row
+  } = props;
+  const {
+    isHovered
+  } = React__default.useContext(RowContext);
+  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.
+  if (actions !== null && actions !== void 0 && actions.length && !isEditing && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
+    const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);
+    const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
+    const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
+    const className = cn('-mb-2 flex justify-end pl-2 text-right', {
+      // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
+      '-mt-2': fontSize === FontSizes.small,
+      '-mt-1.5': fontSize !== FontSizes.small
+    }, props.className);
+    content = /*#__PURE__*/React__default.createElement("span", {
+      className: className,
+      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 : '');
+      return /*#__PURE__*/React__default.cloneElement(button, {
+        appearance: 'transparent',
+        key: index,
+        tabIndex: isActiveRow ? 0 : -1,
+        tooltip: button.props.shortcut ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+          className: "ml-2",
+          keys: button.props.shortcut
+        }))) : tooltip
+      });
+    }), actionsInMenu.length ? ( /*#__PURE__*/React__default.createElement(IconButton, {
+      appearance: "transparent",
+      "aria-label": texts.table3.columns.actions.tooltip,
+      icon: "more",
+      tabIndex: isActiveRow ? 0 : -1,
+      menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, actionsInMenu.map((action, i) => ( /*#__PURE__*/React__default.createElement(Menu.Item, Object.assign({
+        key: i
+      }, action.props, {
+        shortcut: action.props.shortcut
+      }), action.props['aria-label']))))))
+    })) : null);
+  }
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), content);
+});
+function Cell(context) {
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const tableMeta = context.table.options.meta;
+  const allVisibleColumns = context.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(context.index, lastColumnIndex) : undefined;
+  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
+    actions: tableMeta.rowActions.actionsForRow,
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+    actionsLength: tableMeta.rowActions.actionsForRowLength,
+    className: className,
+    fontSize: tableMeta.fontSize.size,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
+    isEditing: tableMeta.editing.isEditing,
+    isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
+    isHoverStatePaused: !!tableMeta.rowActive.isHoverStatePaused
+  }));
+}
+function createRowActionsColumn() {
+  return {
+    id: COLUMN_ID,
+    header: Header,
+    cell: Cell,
+    footer: Footer,
+    meta: {
+      align: 'right',
+      className: cn('!pt-[var(--table3-cell-padding-y)] 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', 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      enableOrdering: false,
+      enableSearch: false,
+      enableTruncate: false,
+      header: '',
+      headerClassName: 'items-center !p-0'
+    },
+    // options
+    enableResizing: false
+  };
+}
+
+export { COLUMN_ID, createRowActionsColumn };
+//# sourceMappingURL=Actions.js.map

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

@@ -0,0 +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 'clsx';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Table3RowActionRenderer } from '../../../types';\nimport { FontSize, FontSizes } 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';\nimport { getIndicatorCellClassName, isIndicatorVisible } from '../cell/Indicator';\n\nexport const COLUMN_ID = '__actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    actions?: Table3RowActionRenderer<TType>[];\n    actionsLength: number;\n    className?: string;\n    fontSize: FontSize;\n    isActiveRow: 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, fontSize, isActiveRow, 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 && (isActiveRow || (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        const className = cn(\n            '-mb-2 flex justify-end pl-2 text-right',\n            {\n                // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.\n                '-mt-2': fontSize === FontSizes.small,\n                '-mt-1.5': fontSize !== FontSizes.small,\n            },\n            props.className\n        );\n\n        content = (\n            <span className={className} 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: 'transparent',\n                        key: index,\n                        tabIndex: isActiveRow ? 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=\"transparent\"\n                        aria-label={texts.table3.columns.actions.tooltip}\n                        icon=\"more\"\n                        tabIndex={isActiveRow ? 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    const allVisibleColumns = context.table.getVisibleLeafColumns();\n    const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n    const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason)\n        ? getIndicatorCellClassName(context.index, lastColumnIndex)\n        : undefined;\n\n    return (\n        <MemoedCell<TType>\n            {...context} // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n            actions={tableMeta.rowActions.actionsForRow}\n            // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n            actionsLength={tableMeta.rowActions.actionsForRowLength}\n            className={className}\n            fontSize={tableMeta.fontSize.size}\n            isActiveRow={tableMeta.rowActive.rowActiveIndex === rowIndex}\n            isEditing={tableMeta.editing.isEditing}\n            isResizingColumn={!!context.table.getState().columnSizingInfo.isResizingColumn}\n            isHoverStatePaused={!!tableMeta.rowActive.isHoverStatePaused}\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-cell-padding-y)] 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                'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n                'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n                'group-[[data-selected=\"true\"]]/row:text-blue-100',\n                'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n            ),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !p-0',\n        },\n        // options\n        enableResizing: false,\n    };\n}\n"],"names":["COLUMN_ID","MemoedCell","React","memo","props","actions","actionsLength","fontSize","isActiveRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","ref","useRef","content","length","visibleActions","map","action","original","filter","actionsOnRow","slice","actionsInMenu","className","cn","FontSizes","small","button","index","tooltip","String","_ref","_button$props$tooltip","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","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","isIndicatorVisible","rowActive","rowActiveIndex","editing","rowMoveReason","getIndicatorCellClassName","undefined","rowActions","actionsForRow","actionsForRowLength","size","getState","columnSizingInfo","createRowActionsColumn","id","header","ColumnHeader","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing"],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+import React__default from 'react';
+import { Icon } from '../../../../Icon/Icon.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Header } from '../header/Header.js';
+import { DisplayCell } from '../cell/DisplayCell.js';
+import { Footer } from '../footer/Footer.js';
+
+const COLUMN_ID = '__drag';
+const GHOST_ELEMENT_ID = 'taco_table_dragging';
+const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  const {
+    isSelected,
+    onRowDrag: handleRowDrag,
+    row,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const tableMeta = table.options.meta;
+  const onDragStart = event => {
+    let rows = [row];
+    if (table.options.enableRowSelection) {
+      rows = isSelected ? table.getSelectedRowModel().rows : [row, ...table.getSelectedRowModel().rows];
+    }
+    const data = rows.map(row => row.original);
+    tableMeta.rowDrag.setDragging(rows.reduce((dragging, rowBeingDragged) => ({
+      ...dragging,
+      [rowBeingDragged.id]: true
+    }), {}));
+    // set a default data value so that the consumer doesn't have to
+    event.dataTransfer.setData('text', JSON.stringify(data));
+    const showPlaceholder = text => {
+      const ghost = document.createElement('div');
+      ghost.id = GHOST_ELEMENT_ID;
+      ghost.className = 'wcag-blue rounded flex w-48 p-4 absolute -ml-[100vw]';
+      ghost.innerText = text;
+      document.body.appendChild(ghost);
+      event.dataTransfer.setDragImage(ghost, 0, 0);
+    };
+    const setDataTransfer = text => event.dataTransfer.setData('text', text);
+    handleRowDrag(data, showPlaceholder, setDataTransfer);
+  };
+  const handleDragEnd = () => {
+    var _document$getElementB;
+    (_document$getElementB = document.getElementById(GHOST_ELEMENT_ID)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.remove();
+    tableMeta.rowDrag.setDragging({});
+  };
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), /*#__PURE__*/React__default.createElement("div", {
+    draggable: true,
+    onDragStart: onDragStart,
+    onDragOver: event => event.preventDefault(),
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    "aria-label": texts.table3.columns.drag.tooltip,
+    name: "drag",
+    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) {
+  return {
+    id: COLUMN_ID,
+    header: Header,
+    cell: context => ( /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
+      isSelected: context.row.getIsSelected(),
+      onRowDrag: onRowDrag
+    }))),
+    footer: Footer,
+    meta: {
+      align: 'center',
+      className: '!p-0 !pt-[var(--table3-cell-padding-y)]',
+      enableOrdering: false,
+      enableSearch: false,
+      enableTruncate: false,
+      header: '',
+      headerClassName: 'items-center !p-0'
+    },
+    // options
+    enableResizing: false,
+    size: 20,
+    minSize: 20
+  };
+}
+
+export { COLUMN_ID, createRowDragColumn };
+//# sourceMappingURL=Drag.js.map

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

@@ -0,0 +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 -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-cell-padding-y)]',\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: 20,\n        minSize: 20,\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","_document$getElementB","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/EditingActions.js

@@ -0,0 +1,174 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Icon } from '../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { IconButton } from '../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Button } from '../../../../Button/Button.js';
+import { Spinner } from '../../../../Spinner/Spinner.js';
+import { Dialog } from '../../../../Dialog/Dialog.js';
+import { Group } from '../../../../Group/Group.js';
+import useTimer from '../../../../../utils/hooks/useTimer.js';
+import { Menu } from '../../../../Menu/Menu.js';
+import { Header } from '../header/Header.js';
+import { RowContext } from '../../rows/RowContext.js';
+import { DisplayCell } from '../cell/DisplayCell.js';
+import { Footer } from '../footer/Footer.js';
+import { isIndicatorVisible, getIndicatorCellClassName } from '../cell/Indicator.js';
+import { getColumnIndex } from '../../../util/editing.js';
+import { lastCellIndex } from '../../rows/Row.js';
+import { SavingStatusValue } from '../../../hooks/features/useEditing.js';
+
+const savingIndicatorHideDelay = 3000;
+const COLUMN_ID = '__editing_actions';
+const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  var _column$columnDef$met;
+  const {
+    className,
+    editing,
+    hasChanges,
+    isActiveRow,
+    row,
+    rowIdentifier,
+    table
+  } = props;
+  const savingStatus = editing.getSavingStatus(row.id);
+  const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
+  const {
+    texts
+  } = useLocalization();
+  const [clearConfirmationOpen, setClearConfirmationOpen] = React__default.useState(false);
+  const columns = table.getAllFlatColumns();
+  const column = columns.find(column => column.id === rowIdentifier);
+  const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
+  const edititngActionsRef = React__default.useRef(null);
+  const tableMeta = table.options.meta;
+  const handleSaved = () => {
+    setIsSavingIndicatorVisible(false);
+    editing.resetSavingStatus(row.id);
+  };
+  const timer = useTimer(savingIndicatorHideDelay, handleSaved);
+  React__default.useEffect(() => {
+    if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {
+      setIsSavingIndicatorVisible(true);
+      timer.start();
+    }
+  }, [savingStatus]);
+  React__default.useEffect(() => {
+    tableMeta.shortcutsState.pause(clearConfirmationOpen);
+  }, [clearConfirmationOpen]);
+  let content;
+  if (savingStatus) {
+    if (savingStatus === SavingStatusValue.Saving) {
+      content = /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.editing.saving.progress
+      }, /*#__PURE__*/React__default.createElement(Spinner, {
+        delay: 0,
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
+      }));
+    } else if (isSavedIndicatorVisible) {
+      content = /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.editing.saving.complete
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "tick",
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
+      }));
+    }
+  }
+  if (editing.isEditing && isActiveRow) {
+    content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
+      ref: edititngActionsRef,
+      appearance: "transparent",
+      "aria-label": texts.table3.editing.actions.tooltip,
+      icon: "more",
+      menu: menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, null, /*#__PURE__*/React__default.createElement(Menu.Item, {
+        icon: "tick",
+        disabled: !hasChanges,
+        onClick: () => editing.saveChangesIfNeeded()
+      }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu.Item, {
+        icon: "close",
+        disabled: !hasChanges,
+        onClick: () => setClearConfirmationOpen(true)
+      }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu.Item, {
+        icon: "undo",
+        onClick: () => editing.toggleEditing(false)
+      }, texts.table3.editing.actions.exit)))),
+      tabIndex: isActiveRow ? 0 : -1
+    }), /*#__PURE__*/React__default.createElement(Dialog, {
+      size: "xs",
+      open: clearConfirmationOpen,
+      onClose: () => {
+        setClearConfirmationOpen(false);
+        requestAnimationFrame(() => {
+          if (edititngActionsRef.current) {
+            edititngActionsRef.current.focus();
+            // When table looses focus, we need to re-set the last column index
+            lastCellIndex.value = getColumnIndex(edititngActionsRef.current);
+          }
+        });
+      }
+    }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
+      "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
+    }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description.replace('[ROW_IDENTIFIER]', rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index).replace('[ROW_IDENTIFIER_VALUE]', rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index)), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
+      tabIndex: 0
+    }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, {
+      tabIndex: 0,
+      appearance: "primary",
+      autoFocus: true,
+      onClick: () => editing.resetChange(row.id)
+    }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
+  }
+  const contentClassName = cn('flex items-center justify-end text-right', {
+    '-mb-2 -mt-2': isActiveRow
+  });
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, {
+    className: cn(className, {
+      '!sticky': !!content
+    })
+  }), content ? /*#__PURE__*/React__default.createElement("span", {
+    className: contentClassName
+  }, content) : undefined);
+});
+function Cell(props) {
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const tableMeta = props.table.options.meta;
+  const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];
+  const allVisibleColumns = props.table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason) ? getIndicatorCellClassName(props.index, lastColumnIndex) : undefined;
+  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, props, {
+    className: className,
+    editing: tableMeta.editing,
+    hasChanges: changeset.indexOf(props.row.id) >= 0,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex
+  }));
+}
+const EDITING_ACTIONS_WIDTH = 60;
+function createRowEditingActionsColumn(rowIdentifier) {
+  return {
+    id: COLUMN_ID,
+    header: Header,
+    cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
+      rowIdentifier: rowIdentifier
+    })),
+    footer: Footer,
+    meta: {
+      align: 'right',
+      className: cn('items-center print:opacity-0 [[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:sticky right-0 !pl-0 !pr-1', '[[role="table"][data-editing="true"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      enableOrdering: false,
+      enableSearch: false,
+      enableTruncate: false,
+      header: '',
+      headerClassName: 'items-center !p-0'
+    },
+    // options
+    enableResizing: false,
+    size: EDITING_ACTIONS_WIDTH,
+    minSize: EDITING_ACTIONS_WIDTH
+  };
+}
+
+export { COLUMN_ID, EDITING_ACTIONS_WIDTH, createRowEditingActionsColumn };
+//# sourceMappingURL=EditingActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditingActions.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/internal/EditingActions.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { CellContext, TableMeta, DisplayColumnDef } from '@tanstack/react-table';\nimport { Spinner } from '../../../../Spinner/Spinner';\nimport { SavingStatusValue, useEditing } from '../../../hooks/features/useEditing';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu } from '../../../../Menu/Menu';\nimport { RowContext } from '../../rows/RowContext';\nimport { DisplayCell } from '../cell/DisplayCell';\nimport { Header as ColumnHeader } from '../header/Header';\nimport { Footer } from '../footer/Footer';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport useTimer from '../../../../../utils/hooks/useTimer';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Dialog } from '../../../../Dialog/Dialog';\nimport { Group } from '../../../../Group/Group';\nimport { Button } from '../../../../Button/Button';\nimport { lastCellIndex } from '../../rows/Row';\nimport { getColumnIndex } from '../../../util/editing';\nimport { getIndicatorCellClassName, isIndicatorVisible } from '../cell/Indicator';\n\nexport type EditingActionsProps<TType = unknown> = CellContext<TType, unknown> & {\n    className?: string;\n    isHovered: boolean;\n};\n\nconst savingIndicatorHideDelay = 3000;\n\nexport const COLUMN_ID = '__editing_actions';\n\ntype MemoedCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    className?: string;\n    editing: ReturnType<typeof useEditing>;\n    hasChanges: boolean;\n    isActiveRow: boolean;\n    rowIdentifier?: string;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { className, editing, hasChanges, isActiveRow, row, rowIdentifier, table } = props;\n\n    const savingStatus = editing.getSavingStatus(row.id);\n    const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React.useState(false);\n    const { texts } = useLocalization();\n    const [clearConfirmationOpen, setClearConfirmationOpen] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n    const edititngActionsRef = React.useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    const handleSaved = () => {\n        setIsSavingIndicatorVisible(false);\n        editing.resetSavingStatus(row.id);\n    };\n    const timer = useTimer(savingIndicatorHideDelay, handleSaved);\n\n    React.useEffect(() => {\n        if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {\n            setIsSavingIndicatorVisible(true);\n            timer.start();\n        }\n    }, [savingStatus]);\n\n    React.useEffect(() => {\n        tableMeta.shortcutsState.pause(clearConfirmationOpen);\n    }, [clearConfirmationOpen]);\n\n    let content;\n\n    if (savingStatus) {\n        if (savingStatus === SavingStatusValue.Saving) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.progress}>\n                    <Spinner delay={0} className=\"!text-grey-700 mr-1 !h-5 !w-5\" />\n                </Tooltip>\n            );\n        } else if (isSavedIndicatorVisible) {\n            content = (\n                <Tooltip title={texts.table3.editing.saving.complete}>\n                    <Icon name=\"tick\" className=\"!text-grey-700 mr-1 !h-5 !w-5\" />\n                </Tooltip>\n            );\n        }\n    }\n\n    if (editing.isEditing && isActiveRow) {\n        content = (\n            <>\n                {content}\n                <IconButton\n                    ref={edititngActionsRef}\n                    appearance=\"transparent\"\n                    aria-label={texts.table3.editing.actions.tooltip}\n                    icon=\"more\"\n                    menu={menuProps => (\n                        <Menu {...menuProps}>\n                            <Menu.Content>\n                                <Menu.Item icon=\"tick\" disabled={!hasChanges} onClick={() => editing.saveChangesIfNeeded()}>\n                                    {texts.table3.editing.actions.save}\n                                </Menu.Item>\n                                <Menu.Item icon=\"close\" disabled={!hasChanges} onClick={() => setClearConfirmationOpen(true)}>\n                                    {texts.table3.editing.actions.clear}\n                                </Menu.Item>\n                                <Menu.Item icon=\"undo\" onClick={() => editing.toggleEditing(false)}>\n                                    {texts.table3.editing.actions.exit}\n                                </Menu.Item>\n                            </Menu.Content>\n                        </Menu>\n                    )}\n                    tabIndex={isActiveRow ? 0 : -1}\n                />\n                <Dialog\n                    size=\"xs\"\n                    open={clearConfirmationOpen}\n                    onClose={() => {\n                        setClearConfirmationOpen(false);\n                        requestAnimationFrame(() => {\n                            if (edititngActionsRef.current) {\n                                edititngActionsRef.current.focus();\n                                // When table looses focus, we need to re-set the last column index\n                                lastCellIndex.value = getColumnIndex(edititngActionsRef.current);\n                            }\n                        });\n                    }}>\n                    <Dialog.Content aria-label={texts.table3.editing.clearChangesConfirmationDialog.title}>\n                        <Dialog.Title>{texts.table3.editing.clearChangesConfirmationDialog.title}</Dialog.Title>\n\n                        <p>\n                            {texts.table3.editing.clearChangesConfirmationDialog.description\n                                .replace(\n                                    '[ROW_IDENTIFIER]',\n                                    rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index\n                                )\n                                .replace(\n                                    '[ROW_IDENTIFIER_VALUE]',\n                                    rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index\n                                )}\n                        </p>\n\n                        <Dialog.Footer>\n                            <Group>\n                                <Dialog.Close>\n                                    <Button tabIndex={0}>{texts.table3.editing.clearChangesConfirmationDialog.cancel}</Button>\n                                </Dialog.Close>\n                                <Dialog.Close>\n                                    <Button\n                                        tabIndex={0}\n                                        appearance=\"primary\"\n                                        autoFocus\n                                        onClick={() => editing.resetChange(row.id)}>\n                                        {texts.table3.editing.clearChangesConfirmationDialog.confirm}\n                                    </Button>\n                                </Dialog.Close>\n                            </Group>\n                        </Dialog.Footer>\n                    </Dialog.Content>\n                </Dialog>\n            </>\n        );\n    }\n\n    const contentClassName = cn('flex items-center justify-end text-right', { '-mb-2 -mt-2': isActiveRow });\n    return (\n        <DisplayCell {...props} className={cn(className, { '!sticky': !!content })}>\n            {content ? <span className={contentClassName}>{content}</span> : undefined}\n        </DisplayCell>\n    );\n}) as <TType = unknown>(props: MemoedCellProps<TType>) => JSX.Element;\n\ntype CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    rowIdentifier?: string;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { rowIndex } = React.useContext(RowContext);\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    const changeset = tableMeta.editing.changes ? Object.keys(tableMeta.editing.changes) : [];\n    const allVisibleColumns = props.table.getVisibleLeafColumns();\n    const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n    const className = isIndicatorVisible(rowIndex, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.rowMoveReason)\n        ? getIndicatorCellClassName(props.index, lastColumnIndex)\n        : undefined;\n\n    return (\n        <MemoedCell\n            {...props}\n            className={className}\n            editing={tableMeta.editing}\n            hasChanges={changeset.indexOf(props.row.id) >= 0}\n            isActiveRow={tableMeta.rowActive.rowActiveIndex === rowIndex}\n        />\n    );\n}\n\nexport const EDITING_ACTIONS_WIDTH = 60;\n\nexport function createRowEditingActionsColumn<TType = unknown>(rowIdentifier?: string): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: (context: CellContext<TType, unknown>) => <Cell {...context} rowIdentifier={rowIdentifier} />,\n        footer: Footer,\n        meta: {\n            align: 'right',\n            className: cn(\n                'items-center print:opacity-0 [[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:sticky right-0 !pl-0 !pr-1',\n                '[[role=\"table\"][data-editing=\"true\"]_&]:group-[[data-current=\"true\"]]/row:shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]',\n                'group-[[data-current=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n                'group-[[data-selected=\"true\"]]/row:text-blue-100',\n                'group-[[data-selected=\"false\"]:hover]/row:text-grey-100'\n            ),\n            enableOrdering: false,\n            enableSearch: false,\n            enableTruncate: false,\n            header: '',\n            headerClassName: 'items-center !p-0',\n        },\n        // options\n        enableResizing: false,\n        size: EDITING_ACTIONS_WIDTH,\n        minSize: EDITING_ACTIONS_WIDTH,\n    };\n}\n"],"names":["savingIndicatorHideDelay","COLUMN_ID","MemoedCell","React","memo","props","className","editing","hasChanges","isActiveRow","row","rowIdentifier","table","savingStatus","getSavingStatus","id","isSavedIndicatorVisible","setIsSavingIndicatorVisible","useState","texts","useLocalization","clearConfirmationOpen","setClearConfirmationOpen","columns","getAllFlatColumns","column","find","rowIdentifierHeader","_column$columnDef$met","columnDef","meta","header","edititngActionsRef","useRef","tableMeta","options","handleSaved","resetSavingStatus","timer","useTimer","useEffect","SavingStatusValue","Saved","start","shortcutsState","pause","content","Saving","Tooltip","title","table3","saving","progress","Spinner","delay","complete","Icon","name","isEditing","IconButton","ref","appearance","actions","tooltip","icon","menu","menuProps","Menu","Content","Item","disabled","onClick","saveChangesIfNeeded","save","clear","toggleEditing","exit","tabIndex","Dialog","size","open","onClose","requestAnimationFrame","current","focus","lastCellIndex","value","getColumnIndex","clearChangesConfirmationDialog","Title","description","replace","validation","index","original","Footer","Group","Close","Button","cancel","autoFocus","resetChange","confirm","contentClassName","cn","DisplayCell","undefined","Cell","rowIndex","useContext","RowContext","changeset","changes","Object","keys","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","length","isIndicatorVisible","rowActive","rowActiveIndex","rowMoveReason","getIndicatorCellClassName","indexOf","EDITING_ACTIONS_WIDTH","createRowEditingActionsColumn","ColumnHeader","cell","context","footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","minSize"],"mappings":"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"}

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

@@ -0,0 +1,104 @@
+import React__default from 'react';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { IconButton } from '../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+import { Header as Header$1 } from '../header/Header.js';
+import { RowContext } from '../../rows/RowContext.js';
+import { DisplayCell } from '../cell/DisplayCell.js';
+import { Footer } from '../footer/Footer.js';
+
+const COLUMN_ID = '__expansion';
+function Header(context) {
+  const {
+    texts
+  } = useLocalization();
+  const isSomeRowsExpanded = context.table.getIsSomeRowsExpanded();
+  const handleClick = event => {
+    event.stopPropagation();
+    context.table.toggleAllRowsExpanded(!isSomeRowsExpanded);
+  };
+  const title = isSomeRowsExpanded ? texts.table3.columns.expansion.collapseAll : texts.table3.columns.expansion.expandAll;
+  return /*#__PURE__*/React__default.createElement(Header$1, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: title
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "transparent",
+    icon: isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double',
+    onClick: handleClick,
+    tabIndex: -1,
+    title: title
+  })));
+}
+const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  const {
+    expandedRowRenderer,
+    isActiveRow,
+    isExpanded,
+    row,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const tableMeta = table.options.meta;
+  const hasExpandedRow = expandedRowRenderer(row.original);
+  let content;
+  if (hasExpandedRow) {
+    const handleClick = event => {
+      event.stopPropagation();
+      row.toggleExpanded();
+    };
+    const title = isExpanded ? texts.table3.columns.expansion.collapse : texts.table3.columns.expansion.expand;
+    const tabIndex = isActiveRow && !tableMeta.editing.isEditing ? 0 : -1;
+    content = /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: title
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      appearance: "discrete",
+      className: "-mt-1.5",
+      icon: isExpanded ? 'chevron-down' : 'chevron-right',
+      onClick: handleClick,
+      tabIndex: tabIndex,
+      title: title
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props), content);
+});
+function Cell(props) {
+  const {
+    expandedRowRenderer,
+    ...context
+  } = props;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const tableMeta = context.table.options.meta;
+  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
+    expandedRowRenderer: expandedRowRenderer,
+    isActiveRow: tableMeta.rowActive.rowActiveIndex === rowIndex,
+    isExpanded: context.row.getIsExpanded()
+  }));
+}
+function createRowExpansionColumn(expandedRowRenderer) {
+  return {
+    id: COLUMN_ID,
+    header: Header,
+    cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
+      expandedRowRenderer: expandedRowRenderer
+    })),
+    footer: Footer,
+    meta: {
+      align: 'center',
+      className: '!p-0 !pt-[var(--table3-cell-padding-y)]',
+      enableOrdering: false,
+      enableSearch: false,
+      enableTruncate: false,
+      header: '',
+      headerClassName: 'items-center !p-0'
+    },
+    // options
+    enableResizing: false,
+    size: 40
+  };
+}
+
+export { COLUMN_ID, createRowExpansionColumn };
+//# sourceMappingURL=Expansion.js.map

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

@@ -0,0 +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=\"transparent\"\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    isActiveRow: boolean;\n    isExpanded: boolean;\n};\n\nconst MemoedCell = React.memo(function MemoedCell<TType = unknown>(props: MemoedCellProps<TType>) {\n    const { expandedRowRenderer, isActiveRow, 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 = isActiveRow && !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            isActiveRow={tableMeta.rowActive.rowActiveIndex === 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-cell-padding-y)]',\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","isActiveRow","isExpanded","row","tableMeta","options","meta","hasExpandedRow","original","content","toggleExpanded","collapse","expand","editing","isEditing","className","DisplayCell","Cell","rowIndex","useContext","RowContext","rowActive","rowActiveIndex","getIsExpanded","createRowExpansionColumn","id","header","cell","footer","Footer","align","enableOrdering","enableSearch","enableTruncate","headerClassName","enableResizing","size"],"mappings":"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"}