@economic/taco 2.18.0 → 2.20.0

package/dist/taco.cjs.development.js

@@ -6,7 +6,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var cn = _interopDefault(require('classnames'));
+var cn = _interopDefault(require('clsx'));
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
@@ -3766,7 +3766,7 @@ const Action = /*#__PURE__*/React.forwardRef(function AlertDialogAction(props, r
 });
 
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(props, ref) {
-  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible', props.className);
+  const className = cn('fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "backdrop",
@@ -4121,7 +4121,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     side: placement,
     sideOffset: 3
   }), /*#__PURE__*/React.createElement("div", {
-    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white",
+    className: "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm bg-blue-900 px-2 py-1 text-xs font-bold text-white print:hidden",
     "data-taco": "tooltip",
     style: {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
@@ -4428,6 +4428,7 @@ const defaultLocalisationTexts = {
         value: 'Value'
       },
       hiddenColumn: 'Hidden column',
+      hiddenGroupedColumn: 'Hidden grouped column',
       tooltip: 'Apply filters',
       total: 'Viewing [CURRENT] of [TOTAL]'
     },
@@ -4456,6 +4457,23 @@ const defaultLocalisationTexts = {
         checkboxVisibilityLabel: "Don't show again",
         cancelButtonText: 'Cancel',
         printButtonText: 'Print'
+      },
+      settingsDialog: {
+        title: 'Print settings',
+        size: 'Paper size',
+        sizeA5: 'A5',
+        sizeA4: 'A4',
+        sizeA3: 'A3',
+        sizeLetter: 'Letter',
+        sizeLegal: 'Legal',
+        orientation: 'Paper orientation',
+        orientationLandscape: 'Landscape',
+        orientationPortrait: 'Portrait',
+        rows: 'Print rows',
+        rowsAll: 'All',
+        rowsSelected: 'Selected',
+        layout: 'Page layout',
+        layoutSplitGroups: 'New page for each [COLUMN]'
       }
     },
     rowHeight: {
@@ -4573,7 +4591,7 @@ const Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
     ref: ref
   }, getBannerIcon(state), children, onClose ? ( /*#__PURE__*/React.createElement(IconButton, {
     "aria-label": texts.banner.close,
-    className: "ml-auto -mr-2 self-start",
+    className: "-mr-2 ml-auto self-start",
     icon: "close",
     appearance: "discrete",
     onClick: onClose
@@ -4774,7 +4792,7 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     "data-taco": "card",
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
-    className: "mx-4 mt-4 mb-2 flex"
+    className: "mx-4 mb-2 mt-4 flex"
   }, title && /*#__PURE__*/React.createElement("h4", {
     className: "mb-0 flex-grow text-left"
   }, title), menu ? /*#__PURE__*/React.createElement(IconButton, {
@@ -6255,8 +6273,8 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   const {
     texts
   } = useLocalization();
-  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size));
-  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow', {
+  const className = cn('relative bg-white animate-[fade-in_150ms] rounded', getDialogPositionClassnames(), getDialogSizeClassnames(dialog.size), 'print:w-full print:h-full print:m-0 print:overflow-visible');
+  const containerClassName = cn('bg-white p-6 rounded relative z-10 shadow print:p-0 print:overflow-visible print:h-full', {
     'rounded-b-none': !!dialog.elements.extra
   }, props.className);
   const handleEscapeKeyDown = event => {
@@ -6298,14 +6316,14 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     draggable: true,
     "aria-grabbed": dragging,
     "aria-label": texts.dialog.drag,
-    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center"
+    className: "yt-dialog__drag absolute-center-x bg-grey-100 top-1.5 h-3 w-24 cursor-move rounded text-center print:hidden"
   }))), dialog.showCloseButton ? ( /*#__PURE__*/React.createElement(DialogPrimitive.Close, {
     onClick: dialog.onClose,
     asChild: true
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "discrete",
     "aria-label": texts.dialog.close,
-    className: "absolute top-0 right-0 mt-2 mr-2",
+    className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
   }))) : null), dialog.elements.drawer, dialog.elements.extra))));
 });
@@ -7027,7 +7045,7 @@ const Content$6 = /*#__PURE__*/React.forwardRef(function HangerContent(props, re
   }, /*#__PURE__*/React.createElement(IconButton, {
     appearance: "primary",
     "aria-label": texts.hanger.close,
-    className: "absolute top-0 right-0 ml-2 mr-2 mt-2 text-white",
+    className: "absolute right-0 top-0 ml-2 mr-2 mt-2 text-white",
     icon: "close",
     onClick: context.onClose
   }))));
@@ -8876,7 +8894,7 @@ const Toast = ({
     autoClose,
     type = 'default'
   } = options;
-  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
+  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {
     'border border-grey-200': type === 'default' || type === 'loading' || !type,
     'border border-grey-500': type === 'success',
     'border border-blue-500': type === 'information',
@@ -9158,7 +9176,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     findTotal,
     loading = false,
     onChange: handleChange,
-    onClear: handleClearCallback,
+    onClear,
     onClickFindNext: handleClickFindNext,
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
@@ -9195,7 +9213,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       return (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.blur();
     });
     handleChange('');
-    handleClearCallback === null || handleClearCallback === void 0 ? void 0 : handleClearCallback();
+    onClear === null || onClear === void 0 ? void 0 : onClear();
   };
   const handleFocus = event => {
     var _attributes$onFocus;
@@ -9676,7 +9694,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     ref: textRef
   }, icon ? typeof icon === 'string' ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: icon,
-    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+    className: "-ml-1 -mt-0.5 mr-1 !h-5 !w-5"
   })) : ( /*#__PURE__*/React__default.cloneElement(icon, {
     className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
   })) : null, children), onDelete ? ( /*#__PURE__*/React__default.createElement(Icon, {
@@ -9908,6 +9926,13 @@ const Colours = props => {
 const mobiles = /iPhone|iPad|iPod|Android/i;
 const isMobileDevice = navigator => !!(navigator !== null && navigator !== void 0 && navigator.userAgent) && mobiles.test(navigator.userAgent);
 
+(function (FontSizes) {
+  FontSizes["small"] = "small";
+  FontSizes["medium"] = "medium";
+  FontSizes["large"] = "large";
+})(exports.FontSizes || (exports.FontSizes = {}));
+const fixedForwardRef = React__default.forwardRef;
+
 const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(props, ref) {
   var _window;
   const {
@@ -9928,9 +9953,14 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     setOpen,
     shouldPauseHoverState,
     tags,
-    value
+    value,
+    fontSize = exports.FontSizes.medium
   } = useSelect2Context();
-  const className = cn(createOptionClassName(shouldPauseHoverState), cName);
+  const className = cn(createOptionClassName(shouldPauseHoverState), {
+    'text-xs': fontSize === exports.FontSizes.small,
+    'text-sm': fontSize === exports.FontSizes.medium,
+    'text-base': fontSize === exports.FontSizes.large
+  }, cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -10002,9 +10032,12 @@ const Group$2 = /*#__PURE__*/React__default.forwardRef(function Select2Group(pro
   const {
     children,
     heading,
+    hasSeparator,
     ...attributes
   } = props;
-  const className = cn(createCollectionClassName(), props.className);
+  const className = cn(createCollectionClassName(), {
+    "last:after:content-none after:content-[''] after:bg-grey-300 after:mx-2 after:my-1 after:h-px": hasSeparator && children.length
+  }, props.className);
   return /*#__PURE__*/React__default.createElement(Group$1, Object.assign({}, attributes, {
     className: className,
     ref: ref
@@ -10048,6 +10081,15 @@ const getNextFocussableElement = currentElement => {
   }
   return focussableElements[currentElementIndex + 1];
 };
+function isElementInsideOrTriggeredFromContainer(element, container) {
+  switch (element === null || element === void 0 ? void 0 : element.getAttribute('role')) {
+    case 'dialog':
+      return !!(container !== null && container !== void 0 && container.querySelector(`[aria-controls='${element.id}']`));
+    case 'menu':
+      return !!(container !== null && container !== void 0 && container.querySelector(`#${element.getAttribute('aria-labelledby')}`));
+  }
+  return !!(container !== null && container !== void 0 && container.contains(element));
+}
 
 const Trigger$7 = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
@@ -10182,7 +10224,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('!absolute z-20', buttonProps.className);
+    className = cn('!absolute z-20 !h-fit', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -10428,7 +10470,7 @@ const Search$1 = /*#__PURE__*/React__default.forwardRef(function ListboxSearch(p
   })));
 });
 
-const isGroup = child => !!child.props.heading;
+const isGroup = child => !!child.props.heading || !!child.props.hasSeparator;
 const useChildren = ({
   children: initialChildren,
   emptyValue,
@@ -10611,6 +10653,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly = false,
     tags = false,
     value: prop,
+    fontSize,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -10688,6 +10731,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     shouldPauseHoverState,
     setShouldPauseHoverState,
     tags,
+    fontSize,
     validationError,
     value
   };
@@ -11999,7 +12043,7 @@ const BaseTable = /*#__PURE__*/React__default.forwardRef(function BaseTable(prop
   }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map((headerGroup, index) => ( /*#__PURE__*/React__default.createElement("div", {
     key: index,
     role: "row",
-    className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-t-0 border-b-2 font-bold"
+    className: "border-grey-300 flex h-auto min-h-[2.5rem] w-full select-none border-b-2 border-t-0 font-bold"
   }, headerGroup.headers.map((cell, index) => ( /*#__PURE__*/React__default.createElement(Column, {
     key: index,
     index: index,
@@ -12713,7 +12757,10 @@ function Header$1(props) {
   const search = table.getState().globalFilter;
   const handleGoto = React__default.useMemo(() => {
     if (hasGoto) {
-      return query => tableMeta.rowGoto.handleGoto(header.id, query, sorting, filters, search);
+      return query => {
+        var _tableMeta$rowGoto$ha, _tableMeta$rowGoto;
+        return (_tableMeta$rowGoto$ha = (_tableMeta$rowGoto = tableMeta.rowGoto).handleGoto) === null || _tableMeta$rowGoto$ha === void 0 ? void 0 : _tableMeta$rowGoto$ha.call(_tableMeta$rowGoto, header.id, query, sorting, filters, search);
+      };
     }
     return undefined;
   }, [hasGoto, JSON.stringify(sorting), JSON.stringify(filters), search]);
@@ -12890,7 +12937,7 @@ const Highlight = props => {
     }
   }, [current]);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    "data-taco": 'highlight',
+    "data-taco": "highlight",
     className: className,
     ref: ref
   }));
@@ -13016,30 +13063,6 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   }, meta.footer(table.getRowModel().rows.map(row => row.original[id])))) : null);
 });
 
-const FONT_SIZE = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-function FontSize$1(props) {
-  const {
-    texts
-  } = useLocalization();
-  const meta = props.table.options.meta;
-  const handleChange = value => meta.fontSize.setSize(value);
-  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
-    onChange: handleChange,
-    value: meta.fontSize.size
-  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.small
-  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    value: FONT_SIZE.medium
-  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
-    disabled: meta.rowHeight.height === 'short',
-    value: FONT_SIZE.large
-  }, texts.table3.fontSize.sizes.large)));
-}
-
 var IndicatorReason;
 (function (IndicatorReason) {
   IndicatorReason["SEARCH"] = "SEARCH";
@@ -13161,8 +13184,8 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     const className = cn('-mb-2 flex justify-end pl-2 text-right', {
       // Adjust negative margin on row actions cell to ensure that the cell aligns vertically.
-      '-mt-2': fontSize === FONT_SIZE.small,
-      '-mt-1.5': fontSize !== FONT_SIZE.small
+      '-mt-2': fontSize === exports.FontSizes.small,
+      '-mt-1.5': fontSize !== exports.FontSizes.small
     }, props.className);
     content = /*#__PURE__*/React__default.createElement("span", {
       className: className,
@@ -13284,33 +13307,25 @@ function getCellValueAsString(value, dataType) {
   return String(value);
 }
 
-// settings
-var TableFontSizes;
-(function (TableFontSizes) {
-  TableFontSizes["small"] = "small";
-  TableFontSizes["medium"] = "medium";
-  TableFontSizes["large"] = "large";
-})(TableFontSizes || (TableFontSizes = {}));
-
+function isInternalColumn$1(id) {
+  return id === null || id === void 0 ? void 0 : id.startsWith('__');
+}
 // column widths
 const getCellMinWidth = (fontSize = 'medium') => {
   switch (fontSize) {
-    case TableFontSizes.small:
+    case exports.FontSizes.small:
       return 57;
-    case TableFontSizes.large:
+    case exports.FontSizes.large:
       return 83;
     default:
-    case TableFontSizes.medium:
+    case exports.FontSizes.medium:
       return 72;
   }
 };
 // ordering
-function ensureOrdering(columns, internalColumnsPinnedToTheRight, settingsOrder) {
+function ensureOrdering(columns, settingsOrder, internalColumnsPinnedToTheRight = ['__actions']) {
   // internal columns come with a defined order
-  const internalColumns = columns.filter(column => {
-    var _column$id;
-    return ((_column$id = column.id) === null || _column$id === void 0 ? void 0 : _column$id.startsWith('__')) && !internalColumnsPinnedToTheRight.includes(column.id);
-  }).map(column => column.id);
+  const internalColumns = columns.filter(column => isInternalColumn$1(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
   // columns with ordering disabled should be moved to the front
   const orderingDisabled = [];
   const orderingEnabled = [];
@@ -13322,8 +13337,8 @@ function ensureOrdering(columns, internalColumnsPinnedToTheRight, settingsOrder)
     (a, b) => (settingsOrder.indexOf(a.id) >>> 0) - (settingsOrder.indexOf(b.id) >>> 0));
   }
   orderedColumns.forEach(column => {
-    var _column$id2, _column$meta;
-    if ((_column$id2 = column.id) !== null && _column$id2 !== void 0 && _column$id2.startsWith('__')) {
+    var _column$meta;
+    if (isInternalColumn$1(column.id)) {
       return;
     }
     if ((_column$meta = column.meta) !== null && _column$meta !== void 0 && _column$meta.enableOrdering) {
@@ -13427,7 +13442,7 @@ function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
   const move = (direction, length, scrollToIndex) => setRowActiveIndex(currentIndex => {
     const nextIndex = currentIndex !== undefined ? getNextIndex(direction, currentIndex, length) : 0;
-    scrollToIndex(direction === -1 ? nextIndex : nextIndex + 3);
+    setTimeout(() => scrollToIndex(nextIndex), 1);
     return nextIndex;
   });
   const onKeyDown = React__default.useCallback((event, length, scrollToIndex, tableRef) => {
@@ -13469,27 +13484,17 @@ function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
     if (!isEnabled || event.isDefaultPrevented()) {
       return;
     }
-    if (rowActiveIndex === undefined && length > 0) {
-      // do it in the next tick, otherwise it prevents internal focus from working
-      // meaning you have to tab twice to get to the first focusable element
-      setTimeout(() => {
-        setRowActiveIndex(index => {
-          if (index === undefined) {
-            scrollToIndex(0);
-            return 0;
-          }
-          return index;
-        });
-      }, 1);
-    }
-  }, [rowActiveIndex, length, isEnabled]);
-  const onMouseCapture = React__default.useCallback((event, length) => {
-    if (!isEnabled || event.isDefaultPrevented()) {
+    if (event.target.closest('tbody') || event.target.closest('[data-taco="table2-body"]') || isElementInsideOrTriggeredFromContainer(event.target, event.currentTarget)) {
       return;
     }
     if (rowActiveIndex === undefined && length > 0) {
-      event.preventDefault();
-      event.stopPropagation();
+      setRowActiveIndex(index => {
+        if (index === undefined) {
+          scrollToIndex(0);
+          return 0;
+        }
+        return index;
+      });
     }
   }, [rowActiveIndex, length, isEnabled]);
   return {
@@ -13499,8 +13504,7 @@ function useTableRowActive$1(isEnabled = false, initialRowActiveIndex) {
     isHoverStatePaused,
     setHoverStatePaused: isEnabled ? setHoverStatePaused : () => undefined,
     handleFocus: isEnabled ? onFocus : () => undefined,
-    handleKeyDown: isEnabled ? onKeyDown : () => undefined,
-    handleMouseCapture: isEnabled ? onMouseCapture : () => undefined
+    handleKeyDown: isEnabled ? onKeyDown : () => undefined
   };
 }
 function getNextIndex(direction, currentIndex, length) {
@@ -13972,17 +13976,81 @@ function useTableRowSelection(isEnabled = false) {
     }
   }, [isEnabled]);
   return {
+    isEnabled,
     handleKeyDown: isEnabled ? onKeyDown : () => undefined,
     lastSelectedRowIndex
   };
 }
 
-function useTableServerLoading(loadPage, loadAll) {
+// filtering
+var TableFilterComparator;
+(function (TableFilterComparator) {
+  TableFilterComparator[TableFilterComparator["Contains"] = 0] = "Contains";
+  TableFilterComparator[TableFilterComparator["DoesNotContain"] = 1] = "DoesNotContain";
+  TableFilterComparator[TableFilterComparator["IsEqualTo"] = 2] = "IsEqualTo";
+  TableFilterComparator[TableFilterComparator["IsNotEqualTo"] = 3] = "IsNotEqualTo";
+  TableFilterComparator[TableFilterComparator["IsGreaterThan"] = 4] = "IsGreaterThan";
+  TableFilterComparator[TableFilterComparator["IsLessThan"] = 5] = "IsLessThan";
+  TableFilterComparator[TableFilterComparator["IsBetween"] = 6] = "IsBetween";
+  TableFilterComparator[TableFilterComparator["IsEmpty"] = 7] = "IsEmpty";
+  TableFilterComparator[TableFilterComparator["IsNotEmpty"] = 8] = "IsNotEmpty";
+  TableFilterComparator[TableFilterComparator["IsLessThanOrEqualTo"] = 9] = "IsLessThanOrEqualTo";
+  TableFilterComparator[TableFilterComparator["IsGreaterThanOrEqualTo"] = 10] = "IsGreaterThanOrEqualTo";
+  TableFilterComparator[TableFilterComparator["HasAnyOf"] = 11] = "HasAnyOf";
+  TableFilterComparator[TableFilterComparator["HasAllOf"] = 12] = "HasAllOf";
+  TableFilterComparator[TableFilterComparator["HasNoneOf"] = 13] = "HasNoneOf";
+})(TableFilterComparator || (TableFilterComparator = {}));
+var TableServerLoadAllState;
+(function (TableServerLoadAllState) {
+  TableServerLoadAllState[TableServerLoadAllState["Incomplete"] = 0] = "Incomplete";
+  TableServerLoadAllState[TableServerLoadAllState["Loading"] = 1] = "Loading";
+  TableServerLoadAllState[TableServerLoadAllState["Completed"] = 2] = "Completed";
+})(TableServerLoadAllState || (TableServerLoadAllState = {}));
+
+const DEFAULT_PAGE_SIZE$1 = 100;
+
+function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE$1) {
   const isEnabled = !!loadPage && !!loadAll;
+  const [loadAllStatus, setLoadedStatus] = React__default.useState(TableServerLoadAllState.Incomplete);
+  let _loadAll;
+  let _loadAllIfNeeded;
+  if (typeof loadAll === 'function') {
+    _loadAll = function (...args) {
+      try {
+        const _temp = function () {
+          if (typeof loadAll === 'function') {
+            setLoadedStatus(TableServerLoadAllState.Loading);
+            return Promise.resolve(loadAll(...args)).then(function () {
+              setLoadedStatus(TableServerLoadAllState.Completed);
+            });
+          }
+        }();
+        return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+    _loadAllIfNeeded = function (...args) {
+      try {
+        const _temp2 = function () {
+          if (loadAllStatus === TableServerLoadAllState.Incomplete) {
+            var _loadAll2;
+            return Promise.resolve((_loadAll2 = _loadAll) === null || _loadAll2 === void 0 ? void 0 : _loadAll2(...args)).then(function () {});
+          }
+        }();
+        return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+      } catch (e) {
+        return Promise.reject(e);
+      }
+    };
+  }
   return {
     isEnabled,
     loadPage,
-    loadAll
+    loadAll: _loadAll,
+    loadAllIfNeeded: _loadAllIfNeeded,
+    loadAllStatus,
+    pageSize
   };
 }
 
@@ -14012,7 +14080,7 @@ function useTableRowClick(isEnabled = false, onRowClick) {
   };
 }
 
-function useTableColumnOrdering(isEnabled = true) {
+function useTableColumnOrdering(isEnabled = false) {
   return {
     isEnabled
   };
@@ -14973,7 +15041,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleTextareaKeyDown(e);
     },
     onBlur: handleBlur,
-    className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none [&:not(:focus)]:whitespace-nowrap`, {
       [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
@@ -15105,6 +15173,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
           handleChange(nextValue);
         }
       },
+      fontSize: tableMeta.fontSize.size,
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {
@@ -15278,7 +15347,9 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     return removeMoveReason;
   }, [value, tableMeta.rowActive.rowActiveIndex, tableMeta.search.excludeUnmatchedResults, error]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
-  const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
+  const className = cn(
+  // Removing a pixel border width in the padding to avoid a pixel jump when control element is rendered.
+  'py-[calc(var(--table3-cell-padding-y)_-_0.06rem_-_1px)]', {
     // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
     relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
   }, props.className, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
@@ -15904,7 +15975,7 @@ function useConvertChildrenToColumns(props, options, editing) {
   }, [editing.isEditing]);
 }
 
-function useTablePrinting(isEnabled = false, defaultIsWarningVisible = true, id) {
+function usePrinting(isEnabled = false, defaultIsWarningVisible = true, id) {
   const [isWarningVisibleForLargeDatasets, setIsWarningVisibleForLargeDatasets] = React__default.useState(defaultIsWarningVisible);
   return {
     isEnabled,
@@ -15961,7 +16032,7 @@ function useTableShortcutsListener(table, shortcuts) {
 function useTableRowGoto(isEnabled = false, handler) {
   return {
     isEnabled,
-    handleGoto: isEnabled && handler ? handler : () => undefined
+    handleGoto: isEnabled ? handler : undefined
   };
 }
 
@@ -16295,15 +16366,15 @@ function useTableFontSizeListener(table) {
 }
 function getCellWidthDifference(fontSizeKey) {
   switch (fontSizeKey) {
-    case `${TableFontSizes.small}-${TableFontSizes.medium}`:
-    case `${TableFontSizes.medium}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.large}`:
       return 8;
-    case `${TableFontSizes.medium}-${TableFontSizes.small}`:
-    case `${TableFontSizes.large}-${TableFontSizes.medium}`:
+    case `${exports.FontSizes.medium}-${exports.FontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.medium}`:
       return -8;
-    case `${TableFontSizes.small}-${TableFontSizes.large}`:
+    case `${exports.FontSizes.small}-${exports.FontSizes.large}`:
       return 16;
-    case `${TableFontSizes.large}-${TableFontSizes.small}`:
+    case `${exports.FontSizes.large}-${exports.FontSizes.small}`:
       return -16;
     default:
       return 0;
@@ -16324,6 +16395,8 @@ function useTable$1(props, ref) {
   const validation = useValidation(props.onCellValidate, props.onRowValidate);
   // not relevant to common table
   const editing = useEditing(options.enableEditing, validation, props.onSave);
+  // we changed how printing works, so this shouldn't be migrated
+  const printing = usePrinting(options.enablePrinting, settings.showWarningWhenPrintingLargeDataset, props.id);
   // needs to be moved
   const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
   // not relevant to common table
@@ -16336,7 +16409,6 @@ function useTable$1(props, ref) {
   // custom features - shared/migrated
   const columnOrdering = useTableColumnOrdering(options.enableColumnOrdering);
   const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
-  const printing = useTablePrinting(options.enablePrinting, settings.showWarningWhenPrintingLargeDataset, props.id);
   const rowActive = useTableRowActive$1(true, props.defaultCurrentRowIndex);
   const rowClick = useTableRowClick(true, props.onRowClick);
   const rowGoto = useTableRowGoto(options.enableRowGoto, props.onRowGoto);
@@ -16355,7 +16427,7 @@ function useTable$1(props, ref) {
     var _settings$columnSizin, _settings$columnVisib, _props$defaultSetting, _props$defaultSetting3;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
     const state = {
-      columnOrder: ensureOrdering(columns, [COLUMN_ID, COLUMN_ID$1], settings.columnOrder),
+      columnOrder: ensureOrdering(columns, settings.columnOrder, [COLUMN_ID, COLUMN_ID$1]),
       columnSizing: (_settings$columnSizin = settings.columnSizing) !== null && _settings$columnSizin !== void 0 ? _settings$columnSizin : defaultColumnSizing,
       columnVisibility: (_settings$columnVisib = settings.columnVisibility) !== null && _settings$columnVisib !== void 0 ? _settings$columnVisib : defaultColumnVisibility,
       sorting: settings.sorting ? settings.sorting.filter(sanitizeSortedColumns) : defaultSorting
@@ -17950,8 +18022,8 @@ function RowHeight(props) {
   const handleChange = value => {
     const height = value;
     meta.rowHeight.setHeight(height);
-    if (height === 'short' && meta.fontSize.size === FONT_SIZE.large) {
-      meta.fontSize.setSize(FONT_SIZE.medium);
+    if (height === 'short' && meta.fontSize.size === exports.FontSizes.large) {
+      meta.fontSize.setSize(exports.FontSizes.medium);
     }
   };
   return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
@@ -18146,7 +18218,7 @@ function ColumnSettingsPopover(props) {
     })) {
       return;
     }
-    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, [COLUMN_ID, COLUMN_ID$1], SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId))));
+    table.setColumnOrder(currentOrder => ensureOrdering(allColumns, SortablePrimitive.arrayMove(currentOrder, currentOrder.findIndex(c => c === activeId), currentOrder.findIndex(c => c === overId)), [COLUMN_ID, COLUMN_ID$1]));
   };
   return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
     anchor: trigger
@@ -18180,6 +18252,25 @@ function ColumnSettingsPopover(props) {
   })) : texts.table3.columnSettings.noResults)))));
 }
 
+function FontSize$1(props) {
+  const {
+    texts
+  } = useLocalization();
+  const meta = props.table.options.meta;
+  const handleChange = value => meta.fontSize.setSize(value);
+  return /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+    onChange: handleChange,
+    value: meta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.small
+  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    value: exports.FontSizes.medium
+  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+    disabled: meta.rowHeight.height === 'short',
+    value: exports.FontSizes.large
+  }, texts.table3.fontSize.sizes.large)));
+}
+
 function SettingsButton(props) {
   const {
     customSettings,
@@ -18346,7 +18437,7 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'short':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '8px';
           default:
             return '6px';
@@ -18356,9 +18447,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '16px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '12px';
           default:
             return '14px';
@@ -18367,9 +18458,9 @@ const getCellHeightPadding = (height, fontSize) => {
     case 'extra-tall':
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '22px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '18px';
           default:
             return '20px';
@@ -18378,9 +18469,9 @@ const getCellHeightPadding = (height, fontSize) => {
     default:
       {
         switch (fontSize) {
-          case FONT_SIZE.small:
+          case exports.FontSizes.small:
             return '12px';
-          case FONT_SIZE.large:
+          case exports.FontSizes.large:
             return '8px';
           default:
             return '10px';
@@ -18390,9 +18481,9 @@ const getCellHeightPadding = (height, fontSize) => {
 };
 const getCellWidthPadding = fontSize => {
   switch (fontSize) {
-    case FONT_SIZE.small:
+    case exports.FontSizes.small:
       return '8px';
-    case FONT_SIZE.medium:
+    case exports.FontSizes.medium:
       return '12px';
     default:
       return '16px';
@@ -18572,8 +18663,6 @@ function FilterResetDialog(props) {
   }, texts.table3.validation.resetFiltersDialog.confirm)))));
 }
 
-const fixedForwardRef = React__default.forwardRef;
-
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -18783,10 +18872,6 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const handleFocus = tableMeta.rowActive.rowActiveIndex === undefined ? event => {
     tableMeta.rowActive.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
   } : undefined;
-  // mouse capture fires before focus, so we can prevent propagation and stop double setting of the active row
-  const handleMouseCapture = tableMeta.rowActive.rowActiveIndex === undefined ? event => {
-    tableMeta.rowActive.handleMouseCapture(event, table.getRowModel().rows.length);
-  } : undefined;
   const handleScroll = function (event) {
     try {
       tableMeta.columnFreezing.handleScroll(event);
@@ -18796,9 +18881,9 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     }
   };
   const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none', '[&[data-resizing="true"]]:select-none', {
-    'text-xs': tableMeta.fontSize.size === FONT_SIZE.small,
-    'text-sm': tableMeta.fontSize.size === FONT_SIZE.medium,
-    'text-base': tableMeta.fontSize.size === FONT_SIZE.large
+    'text-xs': tableMeta.fontSize.size === exports.FontSizes.small,
+    'text-sm': tableMeta.fontSize.size === exports.FontSizes.medium,
+    'text-base': tableMeta.fontSize.size === exports.FontSizes.large
   });
   // Print tables have "_print" as the postfix for the table id, so we can use the it to determine
   // if the table is a print table or not.
@@ -18874,7 +18959,6 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   })))))), table.getRowModel().rows.length ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
     autoFocus: tableMeta.editing.isEditing
   }, /*#__PURE__*/React__default.createElement("div", {
-    onMouseDownCapture: handleMouseCapture,
     className: "group/body contents",
     "data-taco": "table2-body",
     role: "rowgroup",
@@ -19360,7 +19444,7 @@ const AgreementItem = props => {
     className: "truncate"
   }, agreement.name), ' ', agreement.secure ? ( /*#__PURE__*/React__default.createElement(Icon, {
     name: "secure-tick",
-    className: "ml-1 mt-0.5 mb-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
+    className: "mb-0.5 ml-1 mt-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
   })) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-100 whitespace-nowrap text-xs"
   }, agreement.number, " ", agreement.userId, " ", /*#__PURE__*/React__default.createElement(AgreementBadge, {
@@ -19391,7 +19475,7 @@ const AgreementDisplay = props => {
     title: `${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`
   }), /*#__PURE__*/React__default.createElement(AgreementBadge, {
     agreement: currentAgreement,
-    className: "absolute top-0 right-0 -mr-1 w-8 !justify-start"
+    className: "absolute right-0 top-0 -mr-1 w-8 !justify-start"
   }));
 };
 
@@ -19549,7 +19633,7 @@ const LayoutContext = /*#__PURE__*/React__default.createContext({
 });
 
 const Content$9 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(props, ref) {
-  const className = cn('flex-grow overflow-y-auto bg-white flex flex-shrink flex-col relative', props.className);
+  const className = cn('flex-grow overflow-y-auto print:overflow-visible print:h-full print:!p-0 bg-white flex flex-shrink flex-col relative', props.className);
   return /*#__PURE__*/React__default.createElement("main", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -19591,7 +19675,7 @@ const Sidebar = /*#__PURE__*/React__default.forwardRef(function LayoutSidebar(pr
   }, [isSmallScreen, sidebarOpen]);
   const showBackdrop = isSmallScreen && sidebarOpen === true;
   const [ready, setReady] = React__default.useState(isSmallScreen);
-  const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0', {
+  const className = cn('bg-grey-50 h-full w-64 flex-shrink-0 flex-grow-0 print:hidden', {
     'absolute z-10 aria-hidden:-translate-x-64 ': isSmallScreen,
     // prevent animation when crossing the boundary from large to small screen,
     // this prevents awkward animation in the edge case (resizing the browser, instead of starting at a given size)
@@ -19645,7 +19729,7 @@ const Top = props => {
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {
-  const className = cn('flex flex-grow overflow-hidden relative', props.className);
+  const className = cn('flex flex-grow overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
@@ -19654,7 +19738,7 @@ const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, r
 
 const Layout$1 = /*#__PURE__*/React__default.forwardRef(function Layout(props, ref) {
   const [sidebarOpen, setSidebarOpen] = React__default.useState(false);
-  const className = cn('flex h-screen w-screen flex-col overflow-hidden relative', props.className);
+  const className = cn('flex h-screen w-screen flex-col overflow-hidden print:overflow-visible print:h-full relative', props.className);
   return /*#__PURE__*/React__default.createElement(LayoutContext.Provider, {
     value: {
       sidebarOpen,
@@ -19755,7 +19839,7 @@ const Link$2 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
     role: "menuitem",
     tabIndex: 0
   }), icon ? /*#__PURE__*/React__default.createElement(Icon, {
-    className: "mr-1.5 [[role=menu]>li>a>&]:mr-0.5 [[role=menu]>li>a>&]:-ml-1.5",
+    className: "mr-1.5 [[role=menu]>li>a>&]:-ml-1.5 [[role=menu]>li>a>&]:mr-0.5",
     name: icon
   }) : null, /*#__PURE__*/React__default.createElement("span", {
     className: "flex flex-grow items-center truncate"