@economic/taco 1.41.0 → 2.0.0-alpha.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Menu.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Header as RTHeader, Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../../../IconButton/IconButton';\nimport { Menu as MenuPrimitive } from '../../../../Menu/Menu';\nimport { isInternalColumn } from '../../../util/columns';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Table3ColumnHeaderMenu, TableStrategy } from '../../../types';\nimport { GotoPopover } from './Goto';\n\nexport function isGotoAvailable<TType = unknown>(table: RTable<TType>, header: RTHeader<TType, unknown>) {\n    if (isInternalColumn(header.id)) {\n        return false;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return !!(tableMeta.rowGoto.isEnabled && header.column.getCanSort() && header.column.getIsSorted());\n}\n\nexport function isMenuAvailable<TType = unknown>(table: RTable<TType>, header: RTHeader<TType, unknown>): boolean {\n    if (isInternalColumn(header.id)) {\n        return false;\n    }\n\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    return (\n        !!header.column.columnDef.meta?.menu ||\n        !!tableMeta.columnFreezing.isEnabled ||\n        (!!table.options.enableHiding && !!header.column.getCanHide()) ||\n        isGotoAvailable(table, header)\n    );\n}\n\nfunction getInitialFrozenIndex<TType = unknown>(table: RTable<TType>) {\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    let index = 0;\n\n    if (tableMeta.rowDrag.isEnabled) {\n        index++;\n    }\n\n    if (table.options.enableRowSelection) {\n        index++;\n    }\n\n    if (table.options.enableExpanding) {\n        index++;\n    }\n\n    return index;\n}\n\nexport type MenuProps<TType = unknown> = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n    canFreeze: boolean;\n    canHide: boolean;\n    index: number;\n    menu?: Table3ColumnHeaderMenu;\n    onGoto?: (query: string) => Promise<number>;\n    onHide: (event: unknown) => void;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    table: RTable<TType>;\n};\n\nexport function Menu<TType = unknown>(props: MenuProps<TType>) {\n    const { canFreeze, canHide, index, menu, onGoto: handleGoto, onHide: handleHide, scrollToIndex, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n    const [popover, setPopover] = React.useState<string | undefined>(undefined);\n\n    let popoverElement;\n\n    if (popover) {\n        const handleClosePopover = () => setPopover(undefined);\n\n        switch (popover) {\n            case 'goto': {\n                if (handleGoto) {\n                    const goto = async (query: string) => {\n                        try {\n                            const index = await handleGoto(query);\n                            tableMeta.currentRow.setCurrentRowIndex(index);\n                            scrollToIndex(index + 2, { align: 'center' });\n                        } catch {\n                            //\n                        } finally {\n                            handleClosePopover();\n                        }\n                    };\n                    popoverElement = props => <GotoPopover {...props} open onChange={handleClosePopover} onGoto={goto} />;\n                }\n            }\n        }\n    }\n\n    const className = cn(\n        '-my-0.5 -mr-1 -ml-0.5 !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end',\n        {\n            '!flex': !!popoverElement,\n        },\n        props.className\n    );\n\n    const memoedMenuItems = React.useMemo(() => {\n        const menuItems: JSX.Element[] = [];\n\n        if (handleGoto) {\n            menuItems.push(\n                <MenuPrimitive.Item icon=\"move\" onClick={() => setPopover('goto')}>\n                    {texts.table3.columns.menu.gotoRow}...\n                </MenuPrimitive.Item>\n            );\n        }\n\n        if (canHide) {\n            // we do this in the next tick, otherwise the menu closes and react throws a \"state update on unmounted component\" error\n            const handleClick = event => setTimeout(() => handleHide(event), 1);\n\n            menuItems.push(\n                <MenuPrimitive.Item icon=\"unreconciled\" onClick={handleClick}>\n                    {texts.table3.columns.menu.hideColumn}\n                </MenuPrimitive.Item>\n            );\n        }\n\n        if (canFreeze) {\n            const handleClick = () => {\n                tableMeta.columnFreezing.setFrozenColumnIndex(index);\n            };\n\n            const frozenIndex = index - getInitialFrozenIndex(table);\n\n            menuItems.push(\n                <MenuPrimitive.Item icon=\"column-freeze\" onClick={handleClick}>\n                    {frozenIndex === 0\n                        ? texts.table3.columns.menu.freezeFirstColumn\n                        : texts.table3.columns.menu.freezeUptoColumn.replace('[TOTAL]', String(frozenIndex + 1))}\n                </MenuPrimitive.Item>\n            );\n\n            if (tableMeta.columnFreezing.frozenColumnIndex !== undefined) {\n                const handleClick = () => {\n                    tableMeta.columnFreezing.setFrozenColumnIndex(undefined);\n                };\n\n                menuItems.push(\n                    <MenuPrimitive.Item icon=\"column-unfreeze\" onClick={handleClick}>\n                        {texts.table3.columns.menu.unfreezeColumns}\n                    </MenuPrimitive.Item>\n                );\n            }\n        }\n\n        if (menu) {\n            const customMenu = menu({ trigger: undefined });\n            const customItems = React.Children.toArray(customMenu.props.children.props.children) as JSX.Element[];\n\n            if (customItems.length) {\n                if (menuItems.length) {\n                    menuItems.push(<MenuPrimitive.Separator />);\n                }\n\n                menuItems.push(...customItems);\n            }\n        }\n\n        return menuItems.map((item, key) => React.cloneElement(item, { key }));\n    }, [menu, index, canFreeze, canHide, tableMeta.columnFreezing.frozenColumnIndex]);\n\n    return (\n        <IconButton\n            className={className}\n            icon=\"more\"\n            menu={\n                popoverElement\n                    ? undefined\n                    : menuProps => (\n                          <MenuPrimitive {...menuProps}>\n                              <MenuPrimitive.Content>{memoedMenuItems}</MenuPrimitive.Content>\n                          </MenuPrimitive>\n                      )\n            }\n            popover={popoverElement}\n            onClickCapture={event => event.preventDefault()}\n        />\n    );\n}\n"],"names":["isGotoAvailable","table","header","isInternalColumn","id","tableMeta","options","meta","rowGoto","isEnabled","column","getCanSort","getIsSorted","isMenuAvailable","columnDef","menu","columnFreezing","enableHiding","getCanHide","getInitialFrozenIndex","index","rowDrag","enableRowSelection","enableExpanding","Menu","props","canFreeze","canHide","onGoto","handleGoto","onHide","handleHide","scrollToIndex","texts","useLocalization","popover","setPopover","React","useState","undefined","popoverElement","handleClosePopover","goto","query","currentRow","setCurrentRowIndex","align","GotoPopover","open","onChange","className","cn","memoedMenuItems","useMemo","menuItems","push","MenuPrimitive","Item","icon","onClick","table3","columns","gotoRow","handleClick","event","setTimeout","hideColumn","setFrozenColumnIndex","frozenIndex","freezeFirstColumn","freezeUptoColumn","replace","String","frozenColumnIndex","unfreezeColumns","customMenu","trigger","customItems","Children","toArray","children","length","Separator","map","item","key","cloneElement","IconButton","menuProps","Content","onClickCapture","preventDefault"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
+
+function Resizer(props) {
+  const {
+    isResizing,
+    onResize: handleResize
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  // this prevents sort handlers being activated
+  const handleClick = event => {
+    event.stopPropagation();
+    event.preventDefault();
+  };
+  const handle = /*#__PURE__*/React__default.createElement("div", {
+    className: cn('invisible absolute right-0 top-0 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5 group-hover/column:visible', '[[role="columnheader"]:last-child>&]:!mr-0 [[role="columnheader"]:last-child>&]:w-2', {
+      '!visible': isResizing
+    }),
+    onClick: handleClick,
+    onMouseDown: handleResize,
+    onTouchStart: handleResize
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cn('h-full w-1 rounded', {
+      '!bg-blue-500': isResizing,
+      'bg-grey-500 hover:bg-grey-700': !isResizing
+    })
+  }));
+  if (isResizing) {
+    return handle;
+  }
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    placement: "top",
+    title: texts.table3.columns.resize.tooltip
+  }, handle);
+}
+
+export { Resizer };
+//# sourceMappingURL=Resizer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizer.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/Resizer.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../Provider/Localization';\n\ntype ResizerProps = {\n    isResizing: boolean;\n    onResize: (event: unknown) => void;\n};\n\nexport function Resizer(props: ResizerProps) {\n    const { isResizing, onResize: handleResize } = props;\n    const { texts } = useLocalization();\n\n    // this prevents sort handlers being activated\n    const handleClick = event => {\n        event.stopPropagation();\n        event.preventDefault();\n    };\n\n    const handle = (\n        <div\n            className={cn(\n                'invisible absolute right-0 top-0 -mr-2 flex h-full w-4 cursor-col-resize touch-none select-none justify-center rounded py-0.5 group-hover/column:visible',\n                '[[role=\"columnheader\"]:last-child>&]:!mr-0 [[role=\"columnheader\"]:last-child>&]:w-2',\n                {\n                    '!visible': isResizing,\n                }\n            )}\n            onClick={handleClick}\n            onMouseDown={handleResize}\n            onTouchStart={handleResize}>\n            <div\n                className={cn('h-full w-1 rounded', {\n                    '!bg-blue-500': isResizing,\n                    'bg-grey-500 hover:bg-grey-700': !isResizing,\n                })}\n            />\n        </div>\n    );\n\n    if (isResizing) {\n        return handle;\n    }\n\n    return (\n        <Tooltip placement=\"top\" title={texts.table3.columns.resize.tooltip}>\n            {handle}\n        </Tooltip>\n    );\n}\n"],"names":["Resizer","props","isResizing","onResize","handleResize","texts","useLocalization","handleClick","event","stopPropagation","preventDefault","handle","React","className","cn","onClick","onMouseDown","onTouchStart","Tooltip","placement","title","table3","columns","resize","tooltip"],"mappings":";;;;;SAUgBA,OAAO,CAACC,KAAmB;EACvC,MAAM;IAAEC,UAAU;IAAEC,QAAQ,EAAEC;GAAc,GAAGH,KAAK;EACpD,MAAM;IAAEI;GAAO,GAAGC,eAAe,EAAE;;EAGnC,MAAMC,WAAW,GAAGC,KAAK;IACrBA,KAAK,CAACC,eAAe,EAAE;IACvBD,KAAK,CAACE,cAAc,EAAE;GACzB;EAED,MAAMC,MAAM,gBACRC;IACIC,SAAS,EAAEC,EAAE,CACT,0JAA0J,EAC1J,qFAAqF,EACrF;MACI,UAAU,EAAEZ;KACf,CACJ;IACDa,OAAO,EAAER,WAAW;IACpBS,WAAW,EAAEZ,YAAY;IACzBa,YAAY,EAAEb;kBACdQ;IACIC,SAAS,EAAEC,EAAE,CAAC,oBAAoB,EAAE;MAChC,cAAc,EAAEZ,UAAU;MAC1B,+BAA+B,EAAE,CAACA;KACrC;IACH,CAET;EAED,IAAIA,UAAU,EAAE;IACZ,OAAOS,MAAM;;EAGjB,oBACIC,6BAACM,OAAO;IAACC,SAAS,EAAC,KAAK;IAACC,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAACC,OAAO,CAACC,MAAM,CAACC;KACvDb,MAAM,CACD;AAElB;;;;"}

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

@@ -0,0 +1,38 @@
+import React__default from 'react';
+import { Icon } from '../../../../Icon/Icon.js';
+
+const indicators = {
+  asc: /*#__PURE__*/React__default.createElement(Icon, {
+    name: "chevron-up-solid",
+    className: "pointer-events-none -my-0.5"
+  }),
+  desc: /*#__PURE__*/React__default.createElement(Icon, {
+    name: "chevron-down-solid",
+    className: "pointer-events-none -my-0.5"
+  })
+};
+function SortIndicator(props) {
+  var _indicators$props$dir;
+  return (_indicators$props$dir = indicators[props.direction]) !== null && _indicators$props$dir !== void 0 ? _indicators$props$dir : null;
+}
+const ariaSort = {
+  asc: 'ascending',
+  desc: 'descending'
+};
+function getSortAttributes(toggleSorting, sortDirection) {
+  var _ariaSort$sortDirecti;
+  const handleClick = event => {
+    if (event.isDefaultPrevented() || !event.currentTarget.contains(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    toggleSorting(event);
+  };
+  return {
+    'aria-sort': (_ariaSort$sortDirecti = ariaSort[sortDirection]) !== null && _ariaSort$sortDirecti !== void 0 ? _ariaSort$sortDirecti : 'none',
+    onClick: handleClick
+  };
+}
+
+export { SortIndicator, getSortAttributes };
+//# sourceMappingURL=SortIndicator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortIndicator.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/header/SortIndicator.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon } from '../../../../Icon/Icon';\nimport { Table3SortDirection } from '../../../types';\n\ntype SortIndicatorProps = {\n    direction: false | Table3SortDirection;\n};\n\nconst indicators = {\n    asc: <Icon name=\"chevron-up-solid\" className=\"pointer-events-none -my-0.5\" />,\n    desc: <Icon name=\"chevron-down-solid\" className=\"pointer-events-none -my-0.5\" />,\n};\n\nexport function SortIndicator(props: SortIndicatorProps) {\n    return indicators[props.direction as string] ?? null;\n}\n\nconst ariaSort = {\n    asc: 'ascending',\n    desc: 'descending',\n};\n\nexport const getAriaSort = direction => ariaSort[direction] ?? 'none';\n\nexport function getSortAttributes(toggleSorting: (event: unknown) => void, sortDirection: false | Table3SortDirection) {\n    const handleClick = (event: React.MouseEvent) => {\n        if (event.isDefaultPrevented() || !event.currentTarget.contains(event.target as any)) {\n            return;\n        }\n\n        event.preventDefault();\n        toggleSorting(event);\n    };\n\n    return {\n        'aria-sort': ariaSort[sortDirection as any] ?? 'none',\n        onClick: handleClick,\n    };\n}\n"],"names":["indicators","asc","React","Icon","name","className","desc","SortIndicator","props","direction","ariaSort","getSortAttributes","toggleSorting","sortDirection","handleClick","event","isDefaultPrevented","currentTarget","contains","target","preventDefault","onClick"],"mappings":";;;AAQA,MAAMA,UAAU,GAAG;EACfC,GAAG,eAAEC,6BAACC,IAAI;IAACC,IAAI,EAAC,kBAAkB;IAACC,SAAS,EAAC;IAAgC;EAC7EC,IAAI,eAAEJ,6BAACC,IAAI;IAACC,IAAI,EAAC,oBAAoB;IAACC,SAAS,EAAC;;CACnD;SAEeE,aAAa,CAACC,KAAyB;;EACnD,gCAAOR,UAAU,CAACQ,KAAK,CAACC,SAAmB,CAAC,yEAAI,IAAI;AACxD;AAEA,MAAMC,QAAQ,GAAG;EACbT,GAAG,EAAE,WAAW;EAChBK,IAAI,EAAE;CACT;SAIeK,iBAAiB,CAACC,aAAuC,EAAEC,aAA0C;;EACjH,MAAMC,WAAW,GAAIC,KAAuB;IACxC,IAAIA,KAAK,CAACC,kBAAkB,EAAE,IAAI,CAACD,KAAK,CAACE,aAAa,CAACC,QAAQ,CAACH,KAAK,CAACI,MAAa,CAAC,EAAE;MAClF;;IAGJJ,KAAK,CAACK,cAAc,EAAE;IACtBR,aAAa,CAACG,KAAK,CAAC;GACvB;EAED,OAAO;IACH,WAAW,2BAAEL,QAAQ,CAACG,aAAoB,CAAC,yEAAI,MAAM;IACrDQ,OAAO,EAAEP;GACZ;AACL;;;;"}

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

@@ -0,0 +1,108 @@
+import React__default from 'react';
+import cn from 'classnames';
+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 { Header } 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 = '__actions';
+const ACTIONS_ON_ROW_LENGTH = 4;
+const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  const {
+    actions,
+    actionsLength,
+    isCurrentRow,
+    isEditing,
+    isResizingColumn,
+    isHoverStatePaused,
+    row
+  } = props;
+  const {
+    isHovered
+  } = React__default.useContext(RowContext);
+  const {
+    texts
+  } = useLocalization();
+  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 (!isEditing && (isCurrentRow || 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);
+    content = /*#__PURE__*/React__default.createElement("span", {
+      className: "-mb-2 -mt-2 flex justify-end text-right"
+    }, 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: 'discrete',
+        key: index,
+        tabIndex: isCurrentRow ? 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: "discrete",
+      "aria-label": texts.table3.columns.actions.tooltip,
+      icon: "more",
+      tabIndex: isCurrentRow ? 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(props) {
+  const {
+    actionsForRow,
+    actionsForRowLength,
+    ...context
+  } = props;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const tableMeta = context.table.options.meta;
+  return /*#__PURE__*/React__default.createElement(MemoedCell, Object.assign({}, context, {
+    actions: actionsForRow,
+    actionsLength: actionsForRowLength,
+    isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
+    isEditing: tableMeta.editing.isEditing,
+    isResizingColumn: !!context.table.getState().columnSizingInfo.isResizingColumn,
+    isHoverStatePaused: !!tableMeta.hoverState.isPaused
+  }));
+}
+function createRowActionsColumn(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LENGTH) {
+  return {
+    id: COLUMN_ID,
+    header: Header,
+    cell: context => /*#__PURE__*/React__default.createElement(Cell, Object.assign({}, context, {
+      actionsForRow: actionsForRow,
+      actionsForRowLength: actionsForRowLength
+    })),
+    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'),
+      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 '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 ACTIONS_ON_ROW_LENGTH = 4;\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 (!isEditing && (isCurrentRow || (isHovered && !isHoverStatePaused && !isResizingColumn))) {\n        const visibleActions = actions.map(action => action(row.original)).filter(action => !!action);\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    actionsForRow: Table3RowActionRenderer<TType>[];\n    actionsForRowLength: number;\n};\n\nfunction Cell<TType = unknown>(props: CellProps<TType>) {\n    const { actionsForRow, actionsForRowLength, ...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            actions={actionsForRow}\n            actionsLength={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>(\n    actionsForRow: Table3RowActionRenderer<TType>[],\n    actionsForRowLength = ACTIONS_ON_ROW_LENGTH\n): DisplayColumnDef<TType, unknown> {\n    return {\n        id: COLUMN_ID,\n        header: ColumnHeader,\n        cell: (context: CellContext<TType, unknown>) => (\n            <Cell {...context} actionsForRow={actionsForRow} actionsForRowLength={actionsForRowLength} />\n        ),\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","ACTIONS_ON_ROW_LENGTH","MemoedCell","React","memo","props","actions","actionsLength","isCurrentRow","isEditing","isResizingColumn","isHoverStatePaused","row","isHovered","useContext","RowContext","texts","useLocalization","content","visibleActions","map","action","original","filter","actionsOnRow","length","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","actionsForRow","actionsForRowLength","context","rowIndex","tableMeta","table","options","meta","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

@@ -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 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: 'items-center !p-0',
+      enableOrdering: false,
+      enableSearch: false,
+      enableTruncate: false,
+      header: '',
+      headerClassName: 'items-center !p-0'
+    },
+    // options
+    enableResizing: false,
+    size: 15,
+    minSize: 15
+  };
+}
+
+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 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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"}

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

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

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

@@ -0,0 +1,103 @@
+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: "discrete",
+    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,
+    isCurrentRow,
+    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 = isCurrentRow && !tableMeta.editing.isEditing ? 0 : -1;
+    content = /*#__PURE__*/React__default.createElement(Tooltip, {
+      title: title
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      appearance: "discrete",
+      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,
+    isCurrentRow: tableMeta.currentRow.currentRowIndex === 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: 'items-center !p-0',
+      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