@economic/taco 2.65.0 → 2.66.0

package/dist/taco.css

@@ -653,7 +653,7 @@ table[data-taco^='table'] tbody {
     /* grid */
     @apply col-span-full grid auto-rows-min grid-cols-[subgrid];
     /* printing - override virtualiser bottom spacing */
-    @apply print:!h-auto;
+    @apply print:!contents print:!h-auto;
 }
 
 table[data-taco^='table']:has([data-taco='empty-state']) {

package/dist/taco.d.ts

@@ -3305,6 +3305,7 @@ export declare type TableCommonProps<TType = unknown> = TableFeatureProps<TType>
     onChangeSearch?: TableSearchHandler;
     onChangeSettings?: TableSettingsHandler;
     onChangeSort?: TableSortHandler;
+    onPrint?: TablePrintHandler;
 };
 
 export declare type TableConditionalRowProp<TType = unknown> = boolean | ((row: TType) => boolean);
@@ -3398,6 +3399,15 @@ export declare type TableGroupProps = {
 
 export declare type TablePreset = 'complex' | 'list' | 'simple';
 
+export declare type TablePrintHandler = (settings: TableSettings, printSettings: TablePrintSettings) => Promise<void>;
+
+export declare type TablePrintSettings = {
+    allRows: boolean;
+    orientation: 'portrait' | 'landscape';
+    size: 'A3' | 'A4' | 'A5' | 'letter' | 'legal';
+    splitGroups: boolean;
+};
+
 export declare type TableProps<TType = unknown> = TableClientProps<TType> | TableServerProps<TType>;
 
 export declare type TableRef = HTMLTableElement & {

package/dist/taco.js

@@ -16952,10 +16952,10 @@ const Navbar = React.memo(({ onMonthChange, value = /* @__PURE__ */ new Date() }
     onMonthChange(new Date(year.value, month.value));
   };
   const onNextClick = () => {
-    onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDay()));
+    onMonthChange(new Date(value.getFullYear(), value.getMonth() + 1, value.getDate()));
   };
   const onPreviousClick = () => {
-    onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDay()));
+    onMonthChange(new Date(value.getFullYear(), value.getMonth() - 1, value.getDate()));
   };
   return /* @__PURE__ */ React.createElement("div", { className: "mb-3 flex items-center justify-between" }, /* @__PURE__ */ React.createElement("form", { className: "inline-flex space-x-1" }, /* @__PURE__ */ React.createElement("select", { className: "h-8 px-2", name: "month", onChange: handleChange, value: value.getMonth() }, months.map((month, i2) => /* @__PURE__ */ React.createElement("option", { key: month, value: i2 }, month))), /* @__PURE__ */ React.createElement("select", { className: "h-8 px-2", name: "year", onChange: handleChange, value: value.getFullYear() }, years.map((year) => /* @__PURE__ */ React.createElement("option", { key: year, value: year }, String(year))))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Tooltip$3, { title: actions.previousMonth }, /* @__PURE__ */ React.createElement(
     IconButton,
@@ -25748,6 +25748,13 @@ const Dialog = React.forwardRef(function Dialog2(props, ref) {
     }),
     [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]
   );
+  React.useEffect(() => {
+    const onFocusOut = (event) => {
+      event.stopImmediatePropagation();
+    };
+    document.addEventListener("focusout", onFocusOut);
+    return () => document.removeEventListener("focusout", onFocusOut);
+  }, []);
   return /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: context }, /* @__PURE__ */ React.createElement($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { defaultOpen, open, onOpenChange: onChange }, trigger && /* @__PURE__ */ React.createElement(Trigger$4, null, trigger), children));
 });
 Dialog.Trigger = Trigger$4;
@@ -26765,7 +26772,17 @@ const DrawerContent = React__default.forwardRef(function Content2(props, externa
       style: styleProp
     },
     content
-  ) : /* @__PURE__ */ React__default.createElement(UntrappedFocusDrawerContent, { onEscape: handleEscapeKeyDown, className: contentClassName, style: styleProp, ref }, content);
+  ) : /* @__PURE__ */ React__default.createElement(
+    UntrappedFocusDrawerContent,
+    {
+      ...otherProps,
+      onEscape: handleEscapeKeyDown,
+      className: contentClassName,
+      style: styleProp,
+      ref
+    },
+    content
+  );
 });
 const Content$5 = React__default.forwardRef(function Content3(props, externalRef) {
   const { children } = props;
@@ -34840,6 +34857,7 @@ class DateTimeDataType extends DataType {
 }
 const dataTypes = {
   auto: {
+    align: "left",
     sortingFn: "auto",
     filterComparators: [
       TableFilterComparator.Contains,
@@ -34852,6 +34870,7 @@ const dataTypes = {
   },
   // base
   text: {
+    align: "left",
     sortingFn: "alphanumeric",
     filterComparators: [
       TableFilterComparator.Contains,
@@ -34863,6 +34882,7 @@ const dataTypes = {
     ]
   },
   boolean: {
+    align: "left",
     sortingFn: "basic",
     filterComparators: [TableFilterComparator.IsEqualTo, TableFilterComparator.IsNotEqualTo]
   },
@@ -34890,6 +34910,7 @@ const dataTypes = {
 };
 function createDatetimeDataType(defaultOptions2) {
   return {
+    align: "left",
     sortingFn: "datetime",
     filterComparators: [
       TableFilterComparator.IsEqualTo,
@@ -35853,7 +35874,7 @@ const useLocalStorage = (key, initialValue) => {
   };
   return [state, setState, clear];
 };
-function useTablePrinting(isEnabled = false, tableId) {
+function useTablePrinting(isEnabled = false, tableId, onPrint) {
   const [isPrinting, setIsPrinting] = React__default.useState(false);
   const [settings, setSetting] = useTablePrintingSettings(tableId);
   return {
@@ -35861,7 +35882,8 @@ function useTablePrinting(isEnabled = false, tableId) {
     isPrinting,
     setIsPrinting,
     settings,
-    setSetting
+    setSetting,
+    onPrint
   };
 }
 const DEFAULT_PRINT_SETTINGS = {
@@ -36651,7 +36673,7 @@ function useTableManager(props, ref, meta, internalColumns) {
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
   const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
   const footer = useTableFooter(options.enableFooter);
-  const printing = useTablePrinting(options.enablePrinting, safeId);
+  const printing = useTablePrinting(options.enablePrinting, safeId, props.onPrint);
   const rowActive = useTableRowActive$1(options.enableRowActive, props.defaultRowActiveIndex);
   const rowActions = useTableRowActions(options.enableRowActions, props.rowActions, props.rowActionsLength);
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
@@ -43539,7 +43561,7 @@ function Item(props) {
 }
 Item.displayName = "SortableListItem";
 const Column$3 = React__default.forwardRef(function Column2(props, ref) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const { column, draggable = false, ...dragAttributes } = props;
   const canHide = column.getCanHide();
   const className = clsx("group/column flex items-center gap-x-2 rounded py-1 px-2", {
@@ -43550,10 +43572,17 @@ const Column$3 = React__default.forwardRef(function Column2(props, ref) {
   const attributes = draggable ? dragAttributes : void 0;
   const isVisible2 = column.getIsVisible();
   const parentHeader = (_b = (_a = column.parent) == null ? void 0 : _a.columnDef) == null ? void 0 : _b.header;
-  return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className, onClick: () => column.toggleVisibility(!isVisible2), ref }, draggable ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "drag", className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5" }) : null, /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow truncate" }, (_c = column.columnDef.meta) == null ? void 0 : _c.header, parentHeader ? /* @__PURE__ */ React__default.createElement("span", { className: "italic" }, "(", parentHeader, ")") : null), canHide ? /* @__PURE__ */ React__default.createElement(Checkbox$2, { checked: isVisible2, onChange: () => column.toggleVisibility(!isVisible2) }) : null);
+  return /* @__PURE__ */ React__default.createElement("div", { ...attributes, className, onClick: () => column.toggleVisibility(!isVisible2), ref }, draggable ? /* @__PURE__ */ React__default.createElement(Icon$1, { name: "drag", className: "text-grey-500 group-hover/column:text-grey-700 -mx-2 !h-5" }) : null, /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow truncate" }, (_c = column.columnDef.meta) == null ? void 0 : _c.header, parentHeader ? /* @__PURE__ */ React__default.createElement("span", { className: "italic" }, "(", parentHeader, ")") : null), canHide ? /* @__PURE__ */ React__default.createElement(
+    Checkbox$2,
+    {
+      "aria-label": (_d = column.columnDef.meta) == null ? void 0 : _d.header,
+      checked: isVisible2,
+      onChange: () => column.toggleVisibility(!isVisible2)
+    }
+  ) : null);
 });
 function HideOrOrderPopover(props) {
-  const { table, trigger, ...popoverProps } = props;
+  const { id: id2, table, trigger, ...popoverProps } = props;
   const { texts } = useLocalization();
   const [query, setQuery] = React__default.useState("");
   const allColumns = table.getAllLeafColumns();
@@ -43596,7 +43625,7 @@ function HideOrOrderPopover(props) {
       }
     }
   };
-  return /* @__PURE__ */ React__default.createElement(Popover, { ...popoverProps, anchor: trigger }, /* @__PURE__ */ React__default.createElement(Popover.Content, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-w-[100px] max-w-sm flex-col gap-2" }, table.options.enableHiding ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(Popover, { ...popoverProps, anchor: trigger }, /* @__PURE__ */ React__default.createElement(Popover.Content, { id: id2 }, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-w-[100px] max-w-sm flex-col gap-2" }, table.options.enableHiding ? /* @__PURE__ */ React__default.createElement(
     Input,
     {
       onChange: (event) => setQuery(event.target.value),
@@ -43618,7 +43647,7 @@ function HideOrOrderPopover(props) {
   }))) : /* @__PURE__ */ React__default.createElement("div", { className: listClassName }, columns.length ? columns.map((column) => /* @__PURE__ */ React__default.createElement(Column$3, { column, key: column.id })) : texts.table.columnSettings.noResults))));
 }
 function Settings(props) {
-  const { customSettings, table } = props;
+  const { customSettings, id: id2, table } = props;
   const { texts } = useLocalization();
   const tableMeta = table.options.meta;
   const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
@@ -43631,7 +43660,16 @@ function Settings(props) {
     switch (popover) {
       case "columnSettings": {
         if (canHideOrOrder) {
-          popoverElement = (popoverProps) => /* @__PURE__ */ React__default.createElement(HideOrOrderPopover, { ...popoverProps, open: true, onChange: handleClosePopover, table });
+          popoverElement = (popoverProps) => /* @__PURE__ */ React__default.createElement(
+            HideOrOrderPopover,
+            {
+              ...popoverProps,
+              id: `${id2}-columnSettings`,
+              open: true,
+              onChange: handleClosePopover,
+              table
+            }
+          );
         }
       }
     }
@@ -43640,8 +43678,17 @@ function Settings(props) {
     IconButton,
     {
       "aria-label": texts.table.otherOptions.tooltip,
+      id: id2,
       icon: "sliders",
-      menu: popoverElement ? void 0 : (menuProps) => /* @__PURE__ */ React__default.createElement(Menu$1, { ...menuProps }, /* @__PURE__ */ React__default.createElement(Menu$1.Content, { align: "end" }, canHideOrOrder ? /* @__PURE__ */ React__default.createElement(Menu$1.Item, { icon: "columns", onClick: () => setPopover("columnSettings") }, texts.table.columnSettings.button) : null, canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? /* @__PURE__ */ React__default.createElement(Menu$1.Separator, null) : null, canChangeRowHeight ? /* @__PURE__ */ React__default.createElement(
+      menu: popoverElement ? void 0 : (menuProps) => /* @__PURE__ */ React__default.createElement(Menu$1, { ...menuProps }, /* @__PURE__ */ React__default.createElement(Menu$1.Content, { align: "end" }, canHideOrOrder ? /* @__PURE__ */ React__default.createElement(
+        Menu$1.Item,
+        {
+          "aria-controls": `${id2}-columnSettings`,
+          icon: "columns",
+          onClick: () => setPopover("columnSettings")
+        },
+        texts.table.columnSettings.button
+      ) : null, canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? /* @__PURE__ */ React__default.createElement(Menu$1.Separator, null) : null, canChangeRowHeight ? /* @__PURE__ */ React__default.createElement(
         Menu$1.Item,
         {
           icon: `height-${tableMeta.rowHeight.height}`,
@@ -45050,6 +45097,17 @@ function Print(props) {
   }, []);
   const print = async () => {
     const toastRef = toast.loading(texts.table.print.loading);
+    if (tableMeta.printing.onPrint) {
+      try {
+        await tableMeta.printing.onPrint(getSettings(table), tableMeta.printing.settings);
+        toastRef.close();
+      } catch (error) {
+        const errorMessage = `${texts.table.print.error}: ${error}`;
+        console.error(errorMessage);
+        toastRef.error(errorMessage);
+      }
+      return;
+    }
     if (tableMeta.server.isEnabled && tableMeta.server.loadAllIfNeeded) {
       const hiddenColumns = getHiddenColumns(table.getState().columnVisibility);
       try {
@@ -45554,15 +45612,17 @@ function TableToolbar(props) {
   const canPrint = table.meta.printing.isEnabled;
   const canSettings = canChangeSettings(table.instance, table.props.customSettings);
   const canSearch = table.meta.search.isEnabled;
+  const id2 = `${table.id}-toolbar`;
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...attributes,
+      id: id2,
       className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden",
       "data-taco": "table-toolbar"
     },
     table.props.toolbarLeft,
-    /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React__default.createElement(Filters, { length: table.meta.length, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React__default.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React__default.createElement(Settings, { customSettings: table.props.customSettings, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React__default.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
+    /* @__PURE__ */ React__default.createElement(Group$6, { className: "ml-auto flex-shrink-0 items-center print:hidden" }, customTools, canFilter ? /* @__PURE__ */ React__default.createElement(Filters, { length: table.meta.length, table: table.instance }) : null, table.props.toolbarRight, canPrint ? /* @__PURE__ */ React__default.createElement(Print, { table: table.instance, tableId: table.id, tableRef: table.ref }) : null, canSettings ? /* @__PURE__ */ React__default.createElement(Settings, { customSettings: table.props.customSettings, id: `${id2}-settings`, table: table.instance }) : null, canSearch ? /* @__PURE__ */ React__default.createElement(Search$1, { scrollToIndex: table.renderer.scrollToIndex, table: table.instance, tableRef: table.ref }) : null)
   ), table.props.toolbarPanel ? /* @__PURE__ */ React__default.createElement("div", { className: "mb-4" }, table.props.toolbarPanel) : void 0);
 }
 function canChangeSettings(table, customSettings) {
@@ -45603,6 +45663,7 @@ function TableGrid(props) {
     {
       ...attributes,
       id: table.id,
+      "aria-owns": `${table.id}-toolbar`,
       "data-table-font-size": table.meta.fontSize.size,
       "data-table-grouped": !!((_a = table.state.grouping) == null ? void 0 : _a.length),
       "data-table-horizontally-scrolled": table.meta.columnFreezing.isHorizontallyScrolled ? true : void 0,