@economic/taco 2.45.0-alpha.26 → 2.45.0-alpha.28

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');
@@ -6002,22 +6002,23 @@ const useCombobox = ({
   const data = React.useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, focusOut) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+        const eventType = focusOut ? 'focusout' : inputRef.current === document.activeElement ? 'input' : 'focusout';
+        setInputValueByRef$1(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, focusOut) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, focusOut);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -6070,8 +6071,8 @@ const useCombobox = ({
       event.preventDefault();
       return;
     }
-    const allowClearing = event.isTrusted && event.target.value === '';
-    if (onChange && (allowClearing || !event.isTrusted && event.target.value !== String(value))) {
+    // 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);
@@ -6128,7 +6129,7 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              setCurrentValue(currentIndex, true);
               setOpen(false);
             }
             return;
@@ -9503,8 +9504,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
   }));
@@ -9799,6 +9808,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
@@ -9890,7 +9913,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"
@@ -10445,7 +10468,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,
@@ -11979,6 +12005,7 @@ function useTableManager(props, meta, internalColumns) {
       fontSize,
       footer,
       length,
+      onEvent: props.onEvent,
       printing,
       rowActions: rowActions,
       rowActive,
@@ -13705,6 +13732,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 {
@@ -13874,12 +13916,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,
@@ -14067,29 +14108,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
@@ -14102,7 +14153,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
@@ -19519,7 +19571,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)) {
@@ -19884,32 +19935,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) {
@@ -19957,6 +19982,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();
@@ -20438,7 +20496,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",