@economic/taco 2.45.0-alpha.25 → 2.45.0-alpha.27

package/dist/primitives/Table/types.d.ts

@@ -50,13 +50,14 @@ export declare type TableColumnRendererControlProps = {
     fontSize?: FontSize;
     invalid?: boolean;
     onBlur?: (value: any) => void;
+    onKeyDown?: React.KeyboardEventHandler;
     onFocus?: React.FocusEventHandler;
     readOnly?: boolean;
     ref: React.RefObject<HTMLElement> | ((instance: HTMLElement | null | undefined) => void);
     setValue: (value: any) => void;
     value: any;
 };
-export declare type TableColumnRendererHeader = string;
+export declare type TableColumnRendererHeader = string | JSX.Element;
 export declare type TableColumnRendererFooter<TType> = (rows: TType[]) => JSX.Element | string | number | null;
 export declare type TableColumnSort = ReactTableColumnSort;
 export declare type TableColumnSortDirection = 'asc' | 'desc';
@@ -99,6 +100,8 @@ export declare type TableEmptyStateReason = 'empty' | 'filtering' | 'searching';
 export declare type TableEmptyStateRenderer = (props: {
     reason: TableEmptyStateReason;
 }) => JSX.Element | null;
+export declare type TableEvent = 'editing-mode';
+export declare type TableEventHandler = (event: TableEvent, data?: object) => void;
 export declare type TableSettings = {
     columnFilters?: ReactTableColumnFilterState;
     columnOrder?: ReactTableColumnOrderState;
@@ -167,6 +170,7 @@ export declare type TableCommonProps<TType = unknown> = TableFeatureProps<TType>
     toolbarLeft?: JSX.Element;
     toolbarRight?: JSX.Element;
     toolbarPanel?: JSX.Element;
+    onEvent?: TableEventHandler;
     onRowClick?: TableRowClickHandler<TType>;
     onRowDrag?: TableRowDragHandler<TType>;
     onRowDrop?: TableRowDropHandler<TType>;

package/dist/primitives/Table/useTableManager/useTableManager.d.ts

@@ -1,5 +1,5 @@
 import { TableMeta as ReactTableMeta, RowData } from '@tanstack/react-table';
-import { TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnMenu, TableColumnRenderer, TableColumnRendererControl, TableFilterComparator, TableProps } from '../types';
+import { TableColumnAlignment, TableColumnClassNameHandler, TableColumnDataType, TableColumnMenu, TableColumnRenderer, TableColumnRendererControl, TableEventHandler, TableFilterComparator, TableProps } from '../types';
 import { useTableColumnFreezing } from './features/useTableColumnFreezing';
 import { useTableColumnOrdering } from './features/useTableColumnOrdering';
 import { useTableFooter } from './features/useTableFooter';
@@ -25,6 +25,7 @@ declare module '@tanstack/table-core' {
         fontSize: ReturnType<typeof useTableFontSize>;
         footer: ReturnType<typeof useTableFooter>;
         length: number;
+        onEvent: TableEventHandler;
         printing: ReturnType<typeof useTablePrinting>;
         rowActions: ReturnType<typeof useTableRowActions>;
         rowActive: ReturnType<typeof useTableRowActive>;

package/dist/taco.cjs.development.js

@@ -27,7 +27,7 @@ var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
 var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
-var reactPortal = require('@radix-ui/react-portal');
+var ReactDOM = _interopDefault(require('react-dom'));
 var reactTable = require('@tanstack/react-table');
 var get = _interopDefault(require('lodash/get'));
 var reactVirtual = require('@tanstack/react-virtual');
@@ -6006,7 +6006,7 @@ const useCombobox = ({
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        handleChange(option.value);
+        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
       }
     }
   };
@@ -6028,7 +6028,7 @@ const useCombobox = ({
     if (defaultValue && !value) {
       setInputValueByIndex(getIndexFromValue(data, defaultValue));
     }
-  }, [defaultValue]);
+  }, [data]);
   // update input value if it changed 'externally', e.g. clicking/entering an item in the listbox, from a modal etc
   React.useEffect(() => {
     if (value !== undefined && value !== inputValue) {
@@ -6063,27 +6063,22 @@ const useCombobox = ({
       setCurrentIndex(undefined);
     }
   }, [open]);
-  const handleChange = nextValue => {
-    //const event = createCustomEvent('change');
-    if (onChange && nextValue !== String(value)) {
-      const item = findByValue(flattenedData, nextValue);
-      const sanitizedItem = sanitizeItem(item);
-      onChange(sanitizedItem === null || sanitizedItem === void 0 ? void 0 : sanitizedItem.value);
-    }
-  };
   // event handlers
   const handleInputBlur = event => {
+    event.persist();
     if (listRef.current && event.relatedTarget === listRef.current) {
       event.preventDefault();
       return;
     }
-    // listbox is open
-    if (currentIndex !== undefined) {
-      setCurrentValue(currentIndex);
-    } else if (inputValue !== value) {
-      handleChange(inputValue);
-    } else if (inputValue === '') {
-      handleChange(undefined);
+    // event.target.value is always a string so it is important to cast value to a string before checking the equality
+    if (onChange && event.target.value !== String(value)) {
+      const item = findByValue(flattenedData, event.target.value);
+      event.detail = sanitizeItem(item);
+      const parents = getOptionParents(flattenedData, item === null || item === void 0 ? void 0 : item.path);
+      if (parents !== null && parents.length > 0) {
+        event.detail.parents = parents;
+      }
+      onChange(event);
     }
     if (props.onBlur) {
       props.onBlur(event);
@@ -6097,10 +6092,12 @@ const useCombobox = ({
       setOpen(true);
     }
     if (onClick) {
+      event.persist();
       onClick(event);
     }
   };
   const handleInputKeyDown = event => {
+    event.persist();
     if (!event.ctrlKey && !event.metaKey) {
       switch (event.key) {
         case 'Backspace':
@@ -6116,6 +6113,7 @@ const useCombobox = ({
           }
         case 'Tab':
           {
+            setCurrentValue(currentIndex);
             setOpen(false);
             return;
           }
@@ -6168,6 +6166,7 @@ const useCombobox = ({
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
+      event.persist();
       onKeyDown(event);
     }
   };
@@ -9504,8 +9503,16 @@ const BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref)
 });
 const Select = /*#__PURE__*/React.forwardRef(function Select(props, ref) {
   const {
+    editable,
     ...otherProps
   } = props;
+  if (editable) {
+    return /*#__PURE__*/React.createElement(Combobox, Object.assign({}, otherProps, {
+      dialog: undefined,
+      inline: true,
+      ref: ref
+    }));
+  }
   return /*#__PURE__*/React.createElement(BaseSelect, Object.assign({}, otherProps, {
     ref: ref
   }));
@@ -9800,6 +9807,20 @@ const insertToastWithoutDuplicates = (currentToasts, id, content, options, close
   }
   return nextToasts;
 };
+const Portal$1 = props => {
+  var _globalThis$document;
+  const {
+    children,
+    container: containerProp,
+    ...portalProps
+  } = props;
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => setMounted(true), []);
+  const container = containerProp || mounted && (globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body);
+  return container ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", Object.assign({}, portalProps, {
+    "data-taco": "portal"
+  }), children), container) : null;
+};
 const ToastProvider = ({
   children,
   ...props
@@ -9891,7 +9912,7 @@ const ToastProvider = ({
   }, []);
   return /*#__PURE__*/React.createElement(ToastContext.Provider, Object.assign({}, props, {
     value: toaster
-  }), children, /*#__PURE__*/React.createElement(reactPortal.Portal, null, /*#__PURE__*/React.createElement("div", {
+  }), children, /*#__PURE__*/React.createElement(Portal$1, null, /*#__PURE__*/React.createElement("div", {
     id: "yt-toast__container",
     className: "pointer-events-all absolute !left-auto bottom-0 right-0 z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
     role: "log"
@@ -10446,7 +10467,10 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
       // To avoid errors caused by undefined row data values, we pass accessorFn as a preventive measure
       // accessorKey can be dot notated strings, so we use lodash.get to access deeply nested children
       accessorFn: row => get(row, accessorKey),
-      header: header,
+      // The header can be either a string or a JSX.Element, but react-table expects it to be a string or a
+      // renderer function, so `() => header` ensures compatibility when header is a JSX.Element.
+      // If we just pass `() => header`, then we will loose truncation for string headers.
+      header: typeof header === 'string' ? header : () => header,
       // features
       enableColumnFilter,
       enableGlobalFilter,
@@ -11980,6 +12004,7 @@ function useTableManager(props, meta, internalColumns) {
       fontSize,
       footer,
       length,
+      onEvent: props.onEvent,
       printing,
       rowActions: rowActions,
       rowActive,
@@ -13706,6 +13731,21 @@ function getIsPinned(header) {
   return (_header$subHeaders = header.subHeaders) !== null && _header$subHeaders !== void 0 && _header$subHeaders.length ? (_header$subHeaders$fi = header.subHeaders.find(x => x.column.getIsPinned())) === null || _header$subHeaders$fi === void 0 ? void 0 : _header$subHeaders$fi.column.getIsPinned() : header.column.getIsPinned();
 }
 
+const HeaderContent = ({
+  children,
+  tooltip,
+  isInternalColumnHeader
+}) => {
+  if (isInternalColumnHeader || typeof children !== 'string') {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  return /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: String(tooltip !== null && tooltip !== void 0 ? tooltip : children),
+    placement: "top"
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children));
+};
 function Header$5(props) {
   var _header$column$column;
   const {
@@ -13875,12 +13915,11 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-pinned": isPinned ? isPinned : undefined,
     style: style,
     ref: setRef
-  }), isPlaceholder ? null : isInternalColumn(id) ? children : (/*#__PURE__*/React__default.createElement(Tooltip, {
-    title: String(tooltip !== null && tooltip !== void 0 ? tooltip : children),
-    placement: "top"
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate"
-  }, children))), sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
+  }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {
+    children: children,
+    tooltip: tooltip,
+    isInternalColumnHeader: !!isInternalColumn(id)
+  })) : null, sortDirection ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
   }) : null, hasMenu ? (/*#__PURE__*/React__default.createElement(HeaderMenu, {
     canFilter: canFilter,
@@ -14068,29 +14107,39 @@ function Summary(props) {
 }
 
 function Foot(props) {
+  var _nonGroupedHeaders$fi;
   const {
     children,
     table,
     ...attributes
   } = props;
+  const tableMeta = table.options.meta;
   const nonGroupedHeaders = table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  const firstVisibleExternalColumnIndex = (_nonGroupedHeaders$fi = nonGroupedHeaders.find(header => {
+    var _header$column$column;
+    return !isInternalColumn(header.id) && ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.enablePrinting) !== false;
+  })) === null || _nonGroupedHeaders$fi === void 0 ? void 0 : _nonGroupedHeaders$fi.index;
+  // During printing, the summary should be displayed in the first visible external column,
+  // as internal and hidden columns are excluded from the printed document.
+  // However, in the normal table view, the summary should appear in the first column.
+  const summaryColumnIndex = tableMeta.printing.isPrinting ? firstVisibleExternalColumnIndex : 0;
   return /*#__PURE__*/React__default.createElement("tfoot", Object.assign({}, attributes), children, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => (/*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
     header: header,
-    index: index
+    showSummary: index === summaryColumnIndex
   })))));
 }
 function Footer$3(props) {
   return /*#__PURE__*/React__default.createElement(MemoedFooter, {
     footer: props.header,
-    index: props.index
+    showSummary: props.showSummary
   });
 }
 const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
   var _footer$subHeaders, _footer$subHeaders$fi;
   const {
     footer,
-    index
+    showSummary
   } = props;
   const columnMeta = footer.column.columnDef.meta;
   // getIsPinned returns true for split header groups, even if the split group has no pinned sub headers
@@ -14103,7 +14152,8 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   }
   let content;
   let align;
-  if (index === 0) {
+  // Summary should only be appended to the first visible external column, as internal columns like the select column will be hidden in the print view.
+  if (showSummary) {
     align = 'left';
     content = /*#__PURE__*/React__default.createElement(Summary, {
       table: footer.getContext().table
@@ -19520,7 +19570,6 @@ function useTableEditing(isEnabled = false, handleSave, handleChange, handleCrea
       var _tableMeta$rowActive$, _table$getRowModel$ro;
       const index = (_tableMeta$rowActive$ = tableMeta.rowActive.rowActiveIndex) !== null && _tableMeta$rowActive$ !== void 0 ? _tableMeta$rowActive$ : 0;
       if (tableMeta.rowActive.rowActiveIndex === undefined) {
-        console.log('edit toggle active', index);
         tableMeta.rowActive.setRowActiveIndex(index);
       }
       if (!isTemporaryRow((_table$getRowModel$ro = table.getRowModel().rows[index]) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.id)) {
@@ -19885,32 +19934,6 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     ref: controlRef,
     tabIndex
   };
-  if (typeof type === 'function') {
-    const controlFnProps = {
-      ...commonProps,
-      invalid,
-      setValue: onChange,
-      value
-    };
-    return type(controlFnProps, {
-      ...row,
-      ...rowPendingChanges
-    });
-  }
-  if (type === 'switch') {
-    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, commonProps, {
-      checked: Boolean(value),
-      onChange: onChange,
-      ref: controlRef
-    }));
-  }
-  if (type === 'checkbox') {
-    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
-      checked: Boolean(value),
-      onChange: onChange,
-      ref: controlRef
-    }));
-  }
   const handleInputKeyDown = event => {
     const target = event.target;
     if (target.readOnly) {
@@ -19958,6 +19981,39 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       toggleDetailedMode(true);
     }
   };
+  if (typeof type === 'function') {
+    const controlFnProps = {
+      ...commonProps,
+      invalid,
+      setValue: onChange,
+      onKeyDown: event => {
+        const target = event.target || null;
+        // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {
+          handleInputKeyDown(event);
+        }
+      },
+      value
+    };
+    return type(controlFnProps, {
+      ...row,
+      ...rowPendingChanges
+    });
+  }
+  if (type === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, commonProps, {
+      checked: Boolean(value),
+      onChange: onChange,
+      ref: controlRef
+    }));
+  }
+  if (type === 'checkbox') {
+    return /*#__PURE__*/React__default.createElement(Checkbox, Object.assign({}, commonProps, {
+      checked: Boolean(value),
+      onChange: onChange,
+      ref: controlRef
+    }));
+  }
   const handleFocus = event => {
     if (!isDetailedMode) {
       event.target.select();
@@ -20439,7 +20495,11 @@ function Editing(props) {
   const ref = React__default.useRef(null);
   const tableMeta = table.options.meta;
   const handleChange = enabled => {
+    var _tableMeta$onEvent;
     tableMeta.editing.toggleEditing(enabled, table, scrollToIndex);
+    (_tableMeta$onEvent = tableMeta.onEvent) === null || _tableMeta$onEvent === void 0 ? void 0 : _tableMeta$onEvent.call(tableMeta, 'editing-mode', {
+      enabled
+    });
   };
   const tooltip = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.editing.buttons.edit.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
     className: "ml-2",