@economic/taco 2.21.3 → 2.22.0

package/dist/esm/packages/taco/src/components/Report/styles/util.js

@@ -0,0 +1,61 @@
+// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)
+function getCellHeightPadding(height, fontSize) {
+  // TODO: can we get the rem values from tailwind
+  switch (height) {
+    case 'short':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '8px';
+          default:
+            return '6px';
+        }
+      }
+    case 'tall':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '16px';
+          case 'large':
+            return '12px';
+          default:
+            return '14px';
+        }
+      }
+    case 'extra-tall':
+      {
+        switch (fontSize) {
+          case 'small':
+            return '22px';
+          case 'large':
+            return '18px';
+          default:
+            return '20px';
+        }
+      }
+    default:
+      {
+        switch (fontSize) {
+          case 'small':
+            return '12px';
+          case 'large':
+            return '8px';
+          default:
+            return '10px';
+        }
+      }
+  }
+}
+function getCellWidthPadding(fontSize) {
+  switch (fontSize) {
+    case 'small':
+      return '8px';
+    case 'medium':
+      return '12px';
+    default:
+      return '16px';
+  }
+}
+
+export { getCellHeightPadding, getCellWidthPadding };
+//# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/components/Report/styles/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../../src/components/Report/styles/util.ts"],"sourcesContent":["import { TableFontSize, TableRowHeight } from '../../../primitives/Table/types';\n\n// we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)\nexport function getCellHeightPadding(height: TableRowHeight, fontSize: TableFontSize) {\n    // TODO: can we get the rem values from tailwind\n    switch (height) {\n        case 'short': {\n            switch (fontSize) {\n                case 'small':\n                    return '8px';\n\n                default:\n                    return '6px';\n            }\n        }\n\n        case 'tall': {\n            switch (fontSize) {\n                case 'small':\n                    return '16px';\n\n                case 'large':\n                    return '12px';\n\n                default:\n                    return '14px';\n            }\n        }\n\n        case 'extra-tall': {\n            switch (fontSize) {\n                case 'small':\n                    return '22px';\n\n                case 'large':\n                    return '18px';\n\n                default:\n                    return '20px';\n            }\n        }\n\n        default: {\n            switch (fontSize) {\n                case 'small':\n                    return '12px';\n\n                case 'large':\n                    return '8px';\n\n                default:\n                    return '10px';\n            }\n        }\n    }\n}\n\nexport function getCellWidthPadding(fontSize: TableFontSize) {\n    switch (fontSize) {\n        case 'small':\n            return '8px';\n\n        case 'medium':\n            return '12px';\n\n        default:\n            return '16px';\n    }\n}\n"],"names":["getCellHeightPadding","height","fontSize","getCellWidthPadding"],"mappings":"AAEA;SACgBA,oBAAoBA,CAACC,MAAsB,EAAEC,QAAuB;;EAEhF,QAAQD,MAAM;IACV,KAAK,OAAO;MAAE;QACV,QAAQC,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,KAAK;UAEhB;YACI,OAAO,KAAK;;;IAIxB,KAAK,MAAM;MAAE;QACT,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB,KAAK,YAAY;MAAE;QACf,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB;YACI,OAAO,MAAM;;;IAIzB;MAAS;QACL,QAAQA,QAAQ;UACZ,KAAK,OAAO;YACR,OAAO,MAAM;UAEjB,KAAK,OAAO;YACR,OAAO,KAAK;UAEhB;YACI,OAAO,MAAM;;;;AAIjC;SAEgBC,mBAAmBA,CAACD,QAAuB;EACvD,QAAQA,QAAQ;IACZ,KAAK,OAAO;MACR,OAAO,KAAK;IAEhB,KAAK,QAAQ;MACT,OAAO,MAAM;IAEjB;MACI,OAAO,MAAM;;AAEzB;;;;"}

package/dist/esm/packages/taco/src/components/Report/useReport.js

@@ -0,0 +1,51 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { useTable } from '../../primitives/Table/useTable/useTable.js';
+import { Header, Cell } from './components/Internal/Actions.js';
+import { Header as Header$1, Cell as Cell$1 } from './components/Internal/Expansion.js';
+import { Header as Header$2, Cell as Cell$2 } from './components/Internal/Selection.js';
+import { useTableRowActiveListener } from './listeners/useTableRowActiveListener.js';
+
+function useReport(props, ref) {
+  const meta = {};
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  const INTERNAL_COLUMNS = React__default.useMemo(() => ({
+    rowActions: {
+      header: Header,
+      renderer: Cell,
+      meta: {
+        align: 'right',
+        className: cn('print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active="true"]]/row:sticky [table[data-table-pause-hover="false"]_&]:group-hover/row:sticky right-0', 'group-[[data-row-active="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-row-selected="true"]]/row:text-blue-100', 'group-[[data-row-selected="false"]:hover]/row:text-grey-100'),
+        header: ''
+      }
+    },
+    rowExpansion: {
+      header: Header$1,
+      renderer: Cell$1,
+      size: 40,
+      meta: {
+        align: 'center',
+        header: '',
+        headerClassName: '!p-0'
+      }
+    },
+    rowSelection: {
+      header: Header$2,
+      renderer: Cell$2,
+      size: 40,
+      meta: {
+        align: 'center',
+        className: '!px-1',
+        header: '',
+        headerClassName: '!px-1'
+      }
+    }
+  }), []);
+  const report = useTable(props, ref, meta, INTERNAL_COLUMNS);
+  // listeners
+  useTableRowActiveListener(report.instance, ref);
+  return report;
+}
+
+export { useReport };
+//# sourceMappingURL=useReport.js.map

package/dist/esm/packages/taco/src/components/Report/useReport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReport.js","sources":["../../../../../../../src/components/Report/useReport.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useTable } from '../../primitives/Table/useTable/useTable';\nimport { ReportProps } from './types';\nimport { Header as RowActionsHeader, Cell as RowActionsCell } from './components/Internal/Actions';\nimport { Header as RowExpansionHeader, Cell as RowExpansionCell } from './components/Internal/Expansion';\nimport { Header as RowSelectHeader, Cell as RowSelectCell } from './components/Internal/Selection';\nimport { TableRef, useTableInternalColumns } from '../../primitives/Table/types';\nimport { useTableRowActiveListener } from './listeners/useTableRowActiveListener';\n\ntype ReportMeta = {};\n\nexport function useReport<TType>(props: ReportProps<TType>, ref: React.RefObject<TableRef>) {\n    const meta: ReportMeta = {};\n    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n    const INTERNAL_COLUMNS: useTableInternalColumns<TType> = React.useMemo(\n        () => ({\n            rowActions: {\n                header: RowActionsHeader,\n                renderer: RowActionsCell,\n                meta: {\n                    align: 'right',\n                    className: cn(\n                        'print:opacity-0 !px-0 !pr-1 overflow-hidden [table_&]:group-[[data-row-active=\"true\"]]/row:sticky [table[data-table-pause-hover=\"false\"]_&]:group-hover/row:sticky right-0',\n                        'group-[[data-row-active=\"true\"][data-selected=\"false\"]]/row:text-grey-200',\n                        'group-[[data-row-selected=\"true\"]]/row:text-blue-100',\n                        'group-[[data-row-selected=\"false\"]:hover]/row:text-grey-100'\n                    ),\n                    header: '',\n                },\n            },\n            rowExpansion: {\n                header: RowExpansionHeader,\n                renderer: RowExpansionCell,\n                size: 40,\n                meta: {\n                    align: 'center',\n                    header: '',\n                    headerClassName: '!p-0',\n                },\n            },\n            rowSelection: {\n                header: RowSelectHeader,\n                renderer: RowSelectCell,\n                size: 40,\n                meta: {\n                    align: 'center',\n                    className: '!px-1',\n                    header: '',\n                    headerClassName: '!px-1',\n                },\n            },\n        }),\n        []\n    );\n\n    const report = useTable<TType, ReportMeta>(props, ref, meta, INTERNAL_COLUMNS);\n\n    // listeners\n    useTableRowActiveListener(report.instance, ref);\n\n    return report;\n}\n"],"names":["useReport","props","ref","meta","INTERNAL_COLUMNS","React","useMemo","rowActions","header","RowActionsHeader","renderer","RowActionsCell","align","className","cn","rowExpansion","RowExpansionHeader","RowExpansionCell","size","headerClassName","rowSelection","RowSelectHeader","RowSelectCell","report","useTable","useTableRowActiveListener","instance"],"mappings":";;;;;;;;SAYgBA,SAASA,CAAQC,KAAyB,EAAEC,GAA8B;EACtF,MAAMC,IAAI,GAAe,EAAE;;EAE3B,MAAMC,gBAAgB,GAAmCC,cAAK,CAACC,OAAO,CAClE,OAAO;IACHC,UAAU,EAAE;MACRC,MAAM,EAAEC,MAAgB;MACxBC,QAAQ,EAAEC,IAAc;MACxBR,IAAI,EAAE;QACFS,KAAK,EAAE,OAAO;QACdC,SAAS,EAAEC,EAAE,CACT,4KAA4K,EAC5K,2EAA2E,EAC3E,sDAAsD,EACtD,6DAA6D,CAChE;QACDN,MAAM,EAAE;;KAEf;IACDO,YAAY,EAAE;MACVP,MAAM,EAAEQ,QAAkB;MAC1BN,QAAQ,EAAEO,MAAgB;MAC1BC,IAAI,EAAE,EAAE;MACRf,IAAI,EAAE;QACFS,KAAK,EAAE,QAAQ;QACfJ,MAAM,EAAE,EAAE;QACVW,eAAe,EAAE;;KAExB;IACDC,YAAY,EAAE;MACVZ,MAAM,EAAEa,QAAe;MACvBX,QAAQ,EAAEY,MAAa;MACvBJ,IAAI,EAAE,EAAE;MACRf,IAAI,EAAE;QACFS,KAAK,EAAE,QAAQ;QACfC,SAAS,EAAE,OAAO;QAClBL,MAAM,EAAE,EAAE;QACVW,eAAe,EAAE;;;GAG5B,CAAC,EACF,EAAE,CACL;EAED,MAAMI,MAAM,GAAGC,QAAQ,CAAoBvB,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,gBAAgB,CAAC;;EAG9EqB,yBAAyB,CAACF,MAAM,CAACG,QAAQ,EAAExB,GAAG,CAAC;EAE/C,OAAOqB,MAAM;AACjB;;;;"}

package/dist/esm/packages/taco/src/components/Report/util/rows.js

@@ -0,0 +1,10 @@
+const ROW_HEIGHT_ESTIMATES = {
+  short: 33,
+  medium: 41,
+  tall: 49,
+  'extra-tall': 57
+};
+const HEADER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
+
+export { HEADER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES };
+//# sourceMappingURL=rows.js.map

package/dist/esm/packages/taco/src/components/Report/util/rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rows.js","sources":["../../../../../../../../src/components/Report/util/rows.ts"],"sourcesContent":["export const ROW_HEIGHT_ESTIMATES = {\n    short: 33,\n    medium: 41,\n    tall: 49,\n    'extra-tall': 57,\n};\n\nexport const HEADER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border\n"],"names":["ROW_HEIGHT_ESTIMATES","short","medium","tall","HEADER_ROW_HEIGHT_ESTIMATE"],"mappings":"MAAaA,oBAAoB,GAAG;EAChCC,KAAK,EAAE,EAAE;EACTC,MAAM,EAAE,EAAE;EACVC,IAAI,EAAE,EAAE;EACR,YAAY,EAAE;;MAGLC,0BAA0B,GAAGJ,oBAAoB,CAACE,MAAM,GAAG,EAAE;;;;"}

package/dist/esm/packages/taco/src/components/Report/util/useTableGlobalShortcuts.js

@@ -0,0 +1,39 @@
+import React__default from 'react';
+
+function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  React__default.useEffect(() => {
+    const handleKeyDown = event => {
+      const target = event.target;
+      const dialog = target.closest('[role="dialog"]');
+      //const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
+      // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
+      // outside the dialog
+      if (
+      //eventOriginatedFromCombobox ||
+      dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(tableRef.current))
+      // || tableMeta.shortcutsState.isPaused
+      ) {
+        return;
+      }
+      tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex, tableRef);
+      tableMeta.rowSelection.handleKeyDown(event, table);
+      if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+        var _rows$tableMeta$rowAc;
+        tableMeta.rowClick.handleKeyDown(event, (_rows$tableMeta$rowAc = rows[tableMeta.rowActive.rowActiveIndex]) === null || _rows$tableMeta$rowAc === void 0 ? void 0 : _rows$tableMeta$rowAc.original);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  },
+  // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143
+  // scrollToIndex function changes when row count changes, so it is important to update handlers with new
+  // scrollToIndex function.
+  [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]);
+}
+
+export { useTableGlobalShortcuts };
+//# sourceMappingURL=useTableGlobalShortcuts.js.map

package/dist/esm/packages/taco/src/components/Report/util/useTableGlobalShortcuts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableGlobalShortcuts.js","sources":["../../../../../../../../src/components/Report/util/useTableGlobalShortcuts.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableRef } from '../../../primitives/Table/types';\n\nexport function useTableGlobalShortcuts<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    scrollToIndex: (index: number) => void\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n\n    React.useEffect(\n        () => {\n            const handleKeyDown = (event: KeyboardEvent) => {\n                const target = event.target as HTMLElement;\n                const dialog = target.closest('[role=\"dialog\"]');\n                //const eventOriginatedFromCombobox = !!target.closest('[role=\"combobox\"]');\n\n                // Don't trigger global shortcuts on the table if event originated from a combobox or if table is\n                // outside the dialog\n                if (\n                    //eventOriginatedFromCombobox ||\n                    dialog &&\n                    !dialog?.contains(tableRef.current)\n                    // || tableMeta.shortcutsState.isPaused\n                ) {\n                    return;\n                }\n\n                tableMeta.rowActive.handleKeyDown(event, rows.length, scrollToIndex, tableRef);\n                tableMeta.rowSelection.handleKeyDown(event, table);\n\n                if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n                    tableMeta.rowClick.handleKeyDown(event, rows[tableMeta.rowActive.rowActiveIndex]?.original);\n                }\n            };\n\n            document.addEventListener('keydown', handleKeyDown);\n\n            return () => {\n                document.removeEventListener('keydown', handleKeyDown);\n            };\n        },\n        // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143\n        // scrollToIndex function changes when row count changes, so it is important to update handlers with new\n        // scrollToIndex function.\n        [tableRef.current, tableMeta.rowActive.rowActiveIndex, scrollToIndex]\n    );\n}\n"],"names":["useTableGlobalShortcuts","table","tableRef","scrollToIndex","tableMeta","options","meta","rows","getRowModel","React","useEffect","handleKeyDown","event","target","dialog","closest","contains","current","rowActive","length","rowSelection","rowActiveIndex","undefined","_rows$tableMeta$rowAc","rowClick","original","document","addEventListener","removeEventListener"],"mappings":";;SAIgBA,uBAAuBA,CACnCC,KAAwB,EACxBC,QAAmC,EACnCC,aAAsC;EAEtC,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EAErCE,cAAK,CAACC,SAAS,CACX;IACI,MAAMC,aAAa,GAAIC,KAAoB;MACvC,MAAMC,MAAM,GAAGD,KAAK,CAACC,MAAqB;MAC1C,MAAMC,MAAM,GAAGD,MAAM,CAACE,OAAO,CAAC,iBAAiB,CAAC;;;;MAKhD;;MAEID,MAAM,IACN,EAACA,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEE,QAAQ,CAACd,QAAQ,CAACe,OAAO,CAAC;;QAErC;QACE;;MAGJb,SAAS,CAACc,SAAS,CAACP,aAAa,CAACC,KAAK,EAAEL,IAAI,CAACY,MAAM,EAAEhB,aAAa,EAAED,QAAQ,CAAC;MAC9EE,SAAS,CAACgB,YAAY,CAACT,aAAa,CAACC,KAAK,EAAEX,KAAK,CAAC;MAElD,IAAIG,SAAS,CAACc,SAAS,CAACG,cAAc,KAAKC,SAAS,EAAE;QAAA,IAAAC,qBAAA;QAClDnB,SAAS,CAACoB,QAAQ,CAACb,aAAa,CAACC,KAAK,GAAAW,qBAAA,GAAEhB,IAAI,CAACH,SAAS,CAACc,SAAS,CAACG,cAAc,CAAC,cAAAE,qBAAA,uBAAxCA,qBAAA,CAA0CE,QAAQ,CAAC;;KAElG;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEhB,aAAa,CAAC;IAEnD,OAAO;MACHe,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEjB,aAAa,CAAC;KACzD;GACJ;;;;EAID,CAACT,QAAQ,CAACe,OAAO,EAAEb,SAAS,CAACc,SAAS,CAACG,cAAc,EAAElB,aAAa,CAAC,CACxE;AACL;;;;"}

package/dist/esm/packages/taco/src/components/Report/util/useTableRenderer.js

@@ -0,0 +1,162 @@
+import React__default from 'react';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import { HEADER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES } from './rows.js';
+import { Row } from '../components/Row/Row.js';
+
+const TABLE_SCROLL_PADDING_BOTTOM = 36;
+const TABLE_PADDING_BOTTOM = 120;
+function useTableRenderer(table, tableRef, defaultRowActiveIndex) {
+  var _table$getState$group, _virtualItems$;
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
+  // expanded rows
+  const {
+    createRowMeasurer,
+    estimateSize
+  } = useRowHeightVirtualisation(table);
+  // row groups
+  const rangeExtractor = useRowGroupVirtualisation(table);
+  const virtualiser = useVirtualizer({
+    count: rows.length,
+    estimateSize,
+    getScrollElement: () => tableRef.current,
+    overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
+    rangeExtractor,
+    scrollPaddingStart: (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
+    scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
+    paddingEnd: TABLE_PADDING_BOTTOM
+  });
+  const virtualItems = virtualiser.getVirtualItems();
+  const scrollToIndex = React__default.useCallback((index, options = {
+    align: 'auto',
+    behavior: 'smooth'
+  }) => {
+    const notSmooth = {
+      ...options,
+      behavior: 'auto'
+    };
+    if (tableRef.current) {
+      if (index === 0) {
+        virtualiser.scrollToOffset(0, notSmooth);
+      } else if (index >= virtualItems.length - 1) {
+        // scrolling to the last row isn't easy when rows have dynamic height
+        // because you don't know all the heights until they render...
+        // so when you skip to the last you don't know if "the end" is actually the end
+        virtualiser.scrollToIndex(index, notSmooth);
+        // https://github.com/TanStack/virtual/issues/216
+        setTimeout(() => {
+          virtualiser.scrollToIndex(index, notSmooth);
+          setTimeout(() => {
+            virtualiser.scrollToIndex(index, notSmooth);
+          }, 150);
+        }, 150);
+      } else {
+        virtualiser.scrollToIndex(index, options);
+      }
+    }
+  }, [virtualItems.length, tableRef.current]);
+  // styling for offsetting rows - this "is" the virtualisation
+  const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
+  // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
+  Math.max(0, ((_virtualItems$ = virtualItems[1]) !== null && _virtualItems$ !== void 0 ? _virtualItems$ : virtualItems[0]).start - virtualiser.options.scrollMargin - virtualItems[0].size), Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1].end)] : [0, 0];
+  // ensure default active rows are scrolled to
+  React__default.useEffect(() => {
+    if (defaultRowActiveIndex) {
+      scrollToIndex(defaultRowActiveIndex, {
+        align: 'center',
+        behavior: 'auto'
+      });
+    }
+  }, []);
+  // rendered output
+  let style = {};
+  let content = null;
+  if (rows.length) {
+    style = {
+      height: `${virtualiser.getTotalSize()}px`,
+      paddingBottom,
+      paddingTop
+    };
+    content = virtualItems.map(virtualRow => {
+      const row = rows[virtualRow.index];
+      const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
+      return /*#__PURE__*/React__default.createElement(Row, {
+        key: row.id,
+        row: row,
+        index: virtualRow.index,
+        table: table,
+        measureRow: measureRow
+      });
+    });
+  }
+  return {
+    rows: content,
+    style,
+    scrollToIndex
+  };
+}
+// support varying row heights - variable row heights, row expansion
+function useRowHeightVirtualisation(table) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  const expandedState = table.getState().expanded;
+  const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React__default.useState({});
+  // look at all registered expanded row heights and use them to form a more accurate average size
+  // it might be worth considering if taking the max, or an upper bound, would be better
+  const averageExpandedRowHeight = React__default.useMemo(() => {
+    const values = Object.values(expandedRowHeightsCache);
+    return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;
+  }, [expandedRowHeightsCache]);
+  // row heights
+  const estimateSize = React__default.useCallback(index => {
+    var _rows$index, _rows$index$getIsExpa;
+    const rowHeight = tableMeta.rowHeight.height ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height] : ROW_HEIGHT_ESTIMATES.medium;
+    if (expandedState === true || (_rows$index = rows[index]) !== null && _rows$index !== void 0 && (_rows$index$getIsExpa = _rows$index.getIsExpanded) !== null && _rows$index$getIsExpa !== void 0 && _rows$index$getIsExpa.call(_rows$index)) {
+      return rowHeight + averageExpandedRowHeight;
+    }
+    return rowHeight;
+  }, [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]);
+  const createRowMeasurer = React__default.useCallback((resizeItem, virtualRow) => (rowHeight, expansionHeight) => {
+    // register the expansion height so that it can be used to determine an average
+    if (expansionHeight) {
+      setExpandedRowHeightsCache(cache => ({
+        ...cache,
+        [virtualRow.index]: expansionHeight
+      }));
+    }
+    // update the whole row's size to include the expanded height
+    resizeItem(virtualRow, rowHeight + (expansionHeight !== null && expansionHeight !== void 0 ? expansionHeight : 0));
+  }, []);
+  return {
+    estimateSize,
+    createRowMeasurer
+  };
+}
+// support virtualised row groups (where the row group headers are sticky)
+function useRowGroupVirtualisation(table) {
+  const rows = table.getRowModel().rows;
+  const isTableGrouped = !!table.getState().grouping.length;
+  const rowGroupIndexes = React__default.useMemo(() => {
+    const indexes = [];
+    if (isTableGrouped) {
+      rows.forEach((row, index) => {
+        if (row.getIsGrouped()) {
+          indexes.push(index);
+        }
+      });
+    }
+    return indexes;
+  }, []);
+  // this is taken from the react-virtual docs/examples
+  const rangeExtractor = React__default.useCallback(range => {
+    var _reverse$find;
+    const activeRowGroupIndex = (_reverse$find = [...rowGroupIndexes].reverse().find(index => range.startIndex >= index)) !== null && _reverse$find !== void 0 ? _reverse$find : rowGroupIndexes[0];
+    const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);
+    return [...next].sort((a, b) => a - b);
+  }, [rowGroupIndexes]);
+  return isTableGrouped ? rangeExtractor : undefined;
+}
+
+export { useTableRenderer };
+//# sourceMappingURL=useTableRenderer.js.map

package/dist/esm/packages/taco/src/components/Report/util/useTableRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRenderer.js","sources":["../../../../../../../../src/components/Report/util/useTableRenderer.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport {\n    useVirtualizer,\n    defaultRangeExtractor,\n    ScrollToOptions as ReactVirtualScrollToOptions,\n    VirtualItem,\n} from '@tanstack/react-virtual';\nimport { TableRef } from '../../../primitives/Table/types';\nimport { HEADER_ROW_HEIGHT_ESTIMATE, ROW_HEIGHT_ESTIMATES } from './rows';\nimport { Row } from '../components/Row/Row';\n\nconst TABLE_SCROLL_PADDING_BOTTOM = 36;\nconst TABLE_PADDING_BOTTOM = 120;\n\nexport function useTableRenderer<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<TableRef>,\n    defaultRowActiveIndex?: number | undefined\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;\n\n    // expanded rows\n    const { createRowMeasurer, estimateSize } = useRowHeightVirtualisation<TType>(table);\n\n    // row groups\n    const rangeExtractor = useRowGroupVirtualisation<TType>(table);\n\n    const virtualiser = useVirtualizer({\n        count: rows.length,\n        estimateSize,\n        getScrollElement: () => tableRef.current,\n        overscan: tableMeta.printing.isPrinting ? rows.length : undefined,\n        rangeExtractor,\n        scrollPaddingStart: table.getState().grouping?.length ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,\n        scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,\n        paddingEnd: TABLE_PADDING_BOTTOM,\n    });\n\n    const virtualItems = virtualiser.getVirtualItems();\n\n    const scrollToIndex = React.useCallback(\n        (index: number, options: ReactVirtualScrollToOptions = { align: 'auto', behavior: 'smooth' }) => {\n            const notSmooth: ReactVirtualScrollToOptions = { ...options, behavior: 'auto' };\n\n            if (tableRef.current) {\n                if (index === 0) {\n                    virtualiser.scrollToOffset(0, notSmooth);\n                } else if (index >= virtualItems.length - 1) {\n                    // scrolling to the last row isn't easy when rows have dynamic height\n                    // because you don't know all the heights until they render...\n                    // so when you skip to the last you don't know if \"the end\" is actually the end\n                    virtualiser.scrollToIndex(index, notSmooth);\n\n                    // https://github.com/TanStack/virtual/issues/216\n                    setTimeout(() => {\n                        virtualiser.scrollToIndex(index, notSmooth);\n\n                        setTimeout(() => {\n                            virtualiser.scrollToIndex(index, notSmooth);\n                        }, 150);\n                    }, 150);\n                } else {\n                    virtualiser.scrollToIndex(index, options);\n                }\n            }\n        },\n        [virtualItems.length, tableRef.current]\n    );\n\n    // styling for offsetting rows - this \"is\" the virtualisation\n    const [paddingTop, paddingBottom] =\n        virtualItems.length > 0\n            ? [\n                  // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0\n                  Math.max(\n                      0,\n                      (virtualItems[1] ?? virtualItems[0]).start - virtualiser.options.scrollMargin - virtualItems[0].size\n                  ),\n                  Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1].end),\n              ]\n            : [0, 0];\n\n    // ensure default active rows are scrolled to\n    React.useEffect(() => {\n        if (defaultRowActiveIndex) {\n            scrollToIndex(defaultRowActiveIndex, { align: 'center', behavior: 'auto' });\n        }\n    }, []);\n\n    // rendered output\n    let style: CSSProperties = {};\n    let content: JSX.Element[] | null = null;\n\n    if (rows.length) {\n        style = {\n            height: `${virtualiser.getTotalSize()}px`,\n            paddingBottom,\n            paddingTop,\n        };\n        content = virtualItems.map(virtualRow => {\n            const row = rows[virtualRow.index];\n            const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);\n            return <Row key={row.id} row={row} index={virtualRow.index} table={table} measureRow={measureRow} />;\n        });\n    }\n\n    return {\n        rows: content,\n        style,\n        scrollToIndex,\n    };\n}\n\n// support varying row heights - variable row heights, row expansion\nfunction useRowHeightVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const rows = table.getRowModel().rows;\n    const expandedState = table.getState().expanded;\n\n    const [expandedRowHeightsCache, setExpandedRowHeightsCache] = React.useState<Record<number, number>>({});\n\n    // look at all registered expanded row heights and use them to form a more accurate average size\n    // it might be worth considering if taking the max, or an upper bound, would be better\n    const averageExpandedRowHeight = React.useMemo(() => {\n        const values: number[] = Object.values(expandedRowHeightsCache);\n        return values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0;\n    }, [expandedRowHeightsCache]);\n\n    // row heights\n    const estimateSize = React.useCallback(\n        (index: number) => {\n            const rowHeight = tableMeta.rowHeight.height\n                ? ROW_HEIGHT_ESTIMATES[tableMeta.rowHeight.height]\n                : ROW_HEIGHT_ESTIMATES.medium;\n\n            if (expandedState === true || rows[index]?.getIsExpanded?.()) {\n                return rowHeight + averageExpandedRowHeight;\n            }\n\n            return rowHeight;\n        },\n        [tableMeta.rowHeight.height, averageExpandedRowHeight, expandedState]\n    );\n\n    const createRowMeasurer = React.useCallback(\n        (resizeItem: (item: VirtualItem, size: number) => void, virtualRow: VirtualItem) =>\n            (rowHeight: number, expansionHeight?: number) => {\n                // register the expansion height so that it can be used to determine an average\n                if (expansionHeight) {\n                    setExpandedRowHeightsCache(cache => ({ ...cache, [virtualRow.index]: expansionHeight }));\n                }\n\n                // update the whole row's size to include the expanded height\n                resizeItem(virtualRow, rowHeight + (expansionHeight ?? 0));\n            },\n        []\n    );\n\n    return { estimateSize, createRowMeasurer };\n}\n\n// support virtualised row groups (where the row group headers are sticky)\nfunction useRowGroupVirtualisation<TType = unknown>(table: ReactTable<TType>) {\n    const rows = table.getRowModel().rows;\n    const isTableGrouped = !!table.getState().grouping.length;\n\n    const rowGroupIndexes = React.useMemo(() => {\n        const indexes: number[] = [];\n\n        if (isTableGrouped) {\n            rows.forEach((row, index) => {\n                if (row.getIsGrouped()) {\n                    indexes.push(index);\n                }\n            });\n        }\n\n        return indexes;\n    }, []);\n\n    // this is taken from the react-virtual docs/examples\n    const rangeExtractor = React.useCallback(\n        range => {\n            const activeRowGroupIndex =\n                [...rowGroupIndexes].reverse().find(index => range.startIndex >= index) ?? rowGroupIndexes[0];\n\n            const next = new Set([activeRowGroupIndex, ...defaultRangeExtractor(range)]);\n            return [...next].sort((a, b) => a - b);\n        },\n        [rowGroupIndexes]\n    );\n\n    return isTableGrouped ? rangeExtractor : undefined;\n}\n"],"names":["TABLE_SCROLL_PADDING_BOTTOM","TABLE_PADDING_BOTTOM","useTableRenderer","table","tableRef","defaultRowActiveIndex","tableMeta","options","meta","rows","getRowModel","HEADER_OFFSET_TOTAL","HEADER_ROW_HEIGHT_ESTIMATE","getHeaderGroups","length","createRowMeasurer","estimateSize","useRowHeightVirtualisation","rangeExtractor","useRowGroupVirtualisation","virtualiser","useVirtualizer","count","getScrollElement","current","overscan","printing","isPrinting","undefined","scrollPaddingStart","_table$getState$group","getState","grouping","scrollPaddingEnd","paddingEnd","virtualItems","getVirtualItems","scrollToIndex","React","useCallback","index","align","behavior","notSmooth","scrollToOffset","setTimeout","paddingTop","paddingBottom","Math","max","_virtualItems$","start","scrollMargin","size","getTotalSize","end","useEffect","style","content","height","map","virtualRow","row","measureRow","resizeItem","Row","key","id","expandedState","expanded","expandedRowHeightsCache","setExpandedRowHeightsCache","useState","averageExpandedRowHeight","useMemo","values","Object","reduce","a","b","rowHeight","ROW_HEIGHT_ESTIMATES","medium","_rows$index","_rows$index$getIsExpa","getIsExpanded","call","expansionHeight","cache","isTableGrouped","rowGroupIndexes","indexes","forEach","getIsGrouped","push","range","activeRowGroupIndex","_reverse$find","reverse","find","startIndex","next","Set","defaultRangeExtractor","sort"],"mappings":";;;;;AAYA,MAAMA,2BAA2B,GAAG,EAAE;AACtC,MAAMC,oBAAoB,GAAG,GAAG;SAEhBC,gBAAgBA,CAC5BC,KAAwB,EACxBC,QAAmC,EACnCC,qBAA0C;;EAE1C,MAAMC,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,mBAAmB,GAAGC,0BAA0B,GAAGT,KAAK,CAACU,eAAe,EAAE,CAACC,MAAM;;EAGvF,MAAM;IAAEC,iBAAiB;IAAEC;GAAc,GAAGC,0BAA0B,CAAQd,KAAK,CAAC;;EAGpF,MAAMe,cAAc,GAAGC,yBAAyB,CAAQhB,KAAK,CAAC;EAE9D,MAAMiB,WAAW,GAAGC,cAAc,CAAC;IAC/BC,KAAK,EAAEb,IAAI,CAACK,MAAM;IAClBE,YAAY;IACZO,gBAAgB,EAAEA,MAAMnB,QAAQ,CAACoB,OAAO;IACxCC,QAAQ,EAAEnB,SAAS,CAACoB,QAAQ,CAACC,UAAU,GAAGlB,IAAI,CAACK,MAAM,GAAGc,SAAS;IACjEV,cAAc;IACdW,kBAAkB,EAAE,CAAAC,qBAAA,GAAA3B,KAAK,CAAC4B,QAAQ,EAAE,CAACC,QAAQ,cAAAF,qBAAA,eAAzBA,qBAAA,CAA2BhB,MAAM,GAAGF,0BAA0B,GAAGgB,SAAS;IAC9FK,gBAAgB,EAAEtB,mBAAmB,GAAGX,2BAA2B;IACnEkC,UAAU,EAAEjC;GACf,CAAC;EAEF,MAAMkC,YAAY,GAAGf,WAAW,CAACgB,eAAe,EAAE;EAElD,MAAMC,aAAa,GAAGC,cAAK,CAACC,WAAW,CACnC,CAACC,KAAa,EAAEjC,UAAuC;IAAEkC,KAAK,EAAE,MAAM;IAAEC,QAAQ,EAAE;GAAU;IACxF,MAAMC,SAAS,GAAgC;MAAE,GAAGpC,OAAO;MAAEmC,QAAQ,EAAE;KAAQ;IAE/E,IAAItC,QAAQ,CAACoB,OAAO,EAAE;MAClB,IAAIgB,KAAK,KAAK,CAAC,EAAE;QACbpB,WAAW,CAACwB,cAAc,CAAC,CAAC,EAAED,SAAS,CAAC;OAC3C,MAAM,IAAIH,KAAK,IAAIL,YAAY,CAACrB,MAAM,GAAG,CAAC,EAAE;;;;QAIzCM,WAAW,CAACiB,aAAa,CAACG,KAAK,EAAEG,SAAS,CAAC;;QAG3CE,UAAU,CAAC;UACPzB,WAAW,CAACiB,aAAa,CAACG,KAAK,EAAEG,SAAS,CAAC;UAE3CE,UAAU,CAAC;YACPzB,WAAW,CAACiB,aAAa,CAACG,KAAK,EAAEG,SAAS,CAAC;WAC9C,EAAE,GAAG,CAAC;SACV,EAAE,GAAG,CAAC;OACV,MAAM;QACHvB,WAAW,CAACiB,aAAa,CAACG,KAAK,EAAEjC,OAAO,CAAC;;;GAGpD,EACD,CAAC4B,YAAY,CAACrB,MAAM,EAAEV,QAAQ,CAACoB,OAAO,CAAC,CAC1C;;EAGD,MAAM,CAACsB,UAAU,EAAEC,aAAa,CAAC,GAC7BZ,YAAY,CAACrB,MAAM,GAAG,CAAC,GACjB;;EAEIkC,IAAI,CAACC,GAAG,CACJ,CAAC,EACD,EAAAC,cAAA,GAACf,YAAY,CAAC,CAAC,CAAC,cAAAe,cAAA,cAAAA,cAAA,GAAIf,YAAY,CAAC,CAAC,CAAC,EAAEgB,KAAK,GAAG/B,WAAW,CAACb,OAAO,CAAC6C,YAAY,GAAGjB,YAAY,CAAC,CAAC,CAAC,CAACkB,IAAI,CACvG,EACDL,IAAI,CAACC,GAAG,CAAC,CAAC,EAAE7B,WAAW,CAACkC,YAAY,EAAE,GAAGnB,YAAY,CAACA,YAAY,CAACrB,MAAM,GAAG,CAAC,CAAC,CAACyC,GAAG,CAAC,CACtF,GACD,CAAC,CAAC,EAAE,CAAC,CAAC;;EAGhBjB,cAAK,CAACkB,SAAS,CAAC;IACZ,IAAInD,qBAAqB,EAAE;MACvBgC,aAAa,CAAChC,qBAAqB,EAAE;QAAEoC,KAAK,EAAE,QAAQ;QAAEC,QAAQ,EAAE;OAAQ,CAAC;;GAElF,EAAE,EAAE,CAAC;;EAGN,IAAIe,KAAK,GAAkB,EAAE;EAC7B,IAAIC,OAAO,GAAyB,IAAI;EAExC,IAAIjD,IAAI,CAACK,MAAM,EAAE;IACb2C,KAAK,GAAG;MACJE,MAAM,KAAKvC,WAAW,CAACkC,YAAY,MAAM;MACzCP,aAAa;MACbD;KACH;IACDY,OAAO,GAAGvB,YAAY,CAACyB,GAAG,CAACC,UAAU;MACjC,MAAMC,GAAG,GAAGrD,IAAI,CAACoD,UAAU,CAACrB,KAAK,CAAC;MAClC,MAAMuB,UAAU,GAAGhD,iBAAiB,CAACK,WAAW,CAAC4C,UAAU,EAAEH,UAAU,CAAC;MACxE,oBAAOvB,6BAAC2B,GAAG;QAACC,GAAG,EAAEJ,GAAG,CAACK,EAAE;QAAEL,GAAG,EAAEA,GAAG;QAAEtB,KAAK,EAAEqB,UAAU,CAACrB,KAAK;QAAErC,KAAK,EAAEA,KAAK;QAAE4D,UAAU,EAAEA;QAAc;KACvG,CAAC;;EAGN,OAAO;IACHtD,IAAI,EAAEiD,OAAO;IACbD,KAAK;IACLpB;GACH;AACL;AAEA;AACA,SAASpB,0BAA0BA,CAAkBd,KAAwB;EACzE,MAAMG,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAC7D,MAAMC,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAM2D,aAAa,GAAGjE,KAAK,CAAC4B,QAAQ,EAAE,CAACsC,QAAQ;EAE/C,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGjC,cAAK,CAACkC,QAAQ,CAAyB,EAAE,CAAC;;;EAIxG,MAAMC,wBAAwB,GAAGnC,cAAK,CAACoC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAaC,MAAM,CAACD,MAAM,CAACL,uBAAuB,CAAC;IAC/D,OAAOK,MAAM,CAAC7D,MAAM,GAAG6D,MAAM,CAACE,MAAM,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,EAAE,CAAC,CAAC,GAAGJ,MAAM,CAAC7D,MAAM,GAAG,CAAC;GAC/E,EAAE,CAACwD,uBAAuB,CAAC,CAAC;;EAG7B,MAAMtD,YAAY,GAAGsB,cAAK,CAACC,WAAW,CACjCC,KAAa;;IACV,MAAMwC,SAAS,GAAG1E,SAAS,CAAC0E,SAAS,CAACrB,MAAM,GACtCsB,oBAAoB,CAAC3E,SAAS,CAAC0E,SAAS,CAACrB,MAAM,CAAC,GAChDsB,oBAAoB,CAACC,MAAM;IAEjC,IAAId,aAAa,KAAK,IAAI,KAAAe,WAAA,GAAI1E,IAAI,CAAC+B,KAAK,CAAC,cAAA2C,WAAA,gBAAAC,qBAAA,GAAXD,WAAA,CAAaE,aAAa,cAAAD,qBAAA,eAA1BA,qBAAA,CAAAE,IAAA,CAAAH,YAA8B,EAAE;MAC1D,OAAOH,SAAS,GAAGP,wBAAwB;;IAG/C,OAAOO,SAAS;GACnB,EACD,CAAC1E,SAAS,CAAC0E,SAAS,CAACrB,MAAM,EAAEc,wBAAwB,EAAEL,aAAa,CAAC,CACxE;EAED,MAAMrD,iBAAiB,GAAGuB,cAAK,CAACC,WAAW,CACvC,CAACyB,UAAqD,EAAEH,UAAuB,KAC3E,CAACmB,SAAiB,EAAEO,eAAwB;;IAExC,IAAIA,eAAe,EAAE;MACjBhB,0BAA0B,CAACiB,KAAK,KAAK;QAAE,GAAGA,KAAK;QAAE,CAAC3B,UAAU,CAACrB,KAAK,GAAG+C;OAAiB,CAAC,CAAC;;;IAI5FvB,UAAU,CAACH,UAAU,EAAEmB,SAAS,IAAIO,eAAe,aAAfA,eAAe,cAAfA,eAAe,GAAI,CAAC,CAAC,CAAC;GAC7D,EACL,EAAE,CACL;EAED,OAAO;IAAEvE,YAAY;IAAED;GAAmB;AAC9C;AAEA;AACA,SAASI,yBAAyBA,CAAkBhB,KAAwB;EACxE,MAAMM,IAAI,GAAGN,KAAK,CAACO,WAAW,EAAE,CAACD,IAAI;EACrC,MAAMgF,cAAc,GAAG,CAAC,CAACtF,KAAK,CAAC4B,QAAQ,EAAE,CAACC,QAAQ,CAAClB,MAAM;EAEzD,MAAM4E,eAAe,GAAGpD,cAAK,CAACoC,OAAO,CAAC;IAClC,MAAMiB,OAAO,GAAa,EAAE;IAE5B,IAAIF,cAAc,EAAE;MAChBhF,IAAI,CAACmF,OAAO,CAAC,CAAC9B,GAAG,EAAEtB,KAAK;QACpB,IAAIsB,GAAG,CAAC+B,YAAY,EAAE,EAAE;UACpBF,OAAO,CAACG,IAAI,CAACtD,KAAK,CAAC;;OAE1B,CAAC;;IAGN,OAAOmD,OAAO;GACjB,EAAE,EAAE,CAAC;;EAGN,MAAMzE,cAAc,GAAGoB,cAAK,CAACC,WAAW,CACpCwD,KAAK;;IACD,MAAMC,mBAAmB,IAAAC,aAAA,GACrB,CAAC,GAAGP,eAAe,CAAC,CAACQ,OAAO,EAAE,CAACC,IAAI,CAAC3D,KAAK,IAAIuD,KAAK,CAACK,UAAU,IAAI5D,KAAK,CAAC,cAAAyD,aAAA,cAAAA,aAAA,GAAIP,eAAe,CAAC,CAAC,CAAC;IAEjG,MAAMW,IAAI,GAAG,IAAIC,GAAG,CAAC,CAACN,mBAAmB,EAAE,GAAGO,qBAAqB,CAACR,KAAK,CAAC,CAAC,CAAC;IAC5E,OAAO,CAAC,GAAGM,IAAI,CAAC,CAACG,IAAI,CAAC,CAAC1B,CAAC,EAAEC,CAAC,KAAKD,CAAC,GAAGC,CAAC,CAAC;GACzC,EACD,CAACW,eAAe,CAAC,CACpB;EAED,OAAOD,cAAc,GAAGvE,cAAc,GAAGU,SAAS;AACtD;;;;"}

package/dist/esm/packages/taco/src/components/ScrollArea/ScrollArea.js

@@ -23,7 +23,8 @@ const ScrollArea = props => {
     ...otherProps
   } = props;
   return /*#__PURE__*/React__default.createElement(Root, Object.assign({}, otherProps, {
-    className: cn('overflow-hidden', props.className)
+    className: cn('overflow-hidden', props.className),
+    "data-taco": "scrollarea"
   }), /*#__PURE__*/React__default.createElement(Viewport, {
     className: "h-full w-full"
   }, children), /*#__PURE__*/React__default.createElement(Bar, {

package/dist/esm/packages/taco/src/components/ScrollArea/ScrollArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.js","sources":["../../../../../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\n\nconst Bar = props => {\n    const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {\n        'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',\n        'flex-col h-[7px] hover:h-[14px] mb-[2px] hover:py-[2px] hover:mb-0': props.orientation === 'horizontal',\n    });\n    return <ScrollAreaPrimitive.Scrollbar {...props} className={className} />;\n};\n\nconst Thumb = props => <ScrollAreaPrimitive.Thumb {...props} className=\"flex-[1] rounded bg-black opacity-50\" />;\n\nconst Corner = props => <ScrollAreaPrimitive.Corner {...props} classname=\"bg-grey-500\" />;\n\nexport type ScrollbarProps = Omit<ScrollAreaPrimitive.ScrollAreaProps, 'scrollHideDelay'>;\n\nexport const ScrollArea = (props: ScrollbarProps) => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <ScrollAreaPrimitive.Root {...otherProps} className={cn('overflow-hidden', props.className)}>\n            <ScrollAreaPrimitive.Viewport className=\"h-full w-full\">{children}</ScrollAreaPrimitive.Viewport>\n            <Bar orientation=\"vertical\">\n                <Thumb />\n            </Bar>\n            <Bar orientation=\"horizontal\">\n                <Thumb />\n            </Bar>\n            <Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n};\n"],"names":["Bar","props","className","cn","orientation","React","ScrollAreaPrimitive","Thumb","Corner","classname","ScrollArea","children","otherProps"],"mappings":";;;;AAIA,MAAMA,GAAG,GAAGC,KAAK;EACb,MAAMC,SAAS,GAAGC,EAAE,8DAA8D,EAAE;IAChF,2DAA2D,EAAEF,KAAK,CAACG,WAAW,KAAK,UAAU;IAC7F,oEAAoE,EAAEH,KAAK,CAACG,WAAW,KAAK;GAC/F,CAAC;EACF,oBAAOC,6BAACC,SAA6B,oBAAKL,KAAK;IAAEC,SAAS,EAAEA;KAAa;AAC7E,CAAC;AAED,MAAMK,KAAK,GAAGN,KAAK,iBAAII,6BAACC,OAAyB,oBAAKL,KAAK;EAAEC,SAAS,EAAC;GAAyC;AAEhH,MAAMM,MAAM,GAAGP,KAAK,iBAAII,6BAACC,QAA0B,oBAAKL,KAAK;EAAEQ,SAAS,EAAC;GAAgB;MAI5EC,UAAU,GAAIT,KAAqB;EAC5C,MAAM;IAAEU,QAAQ;IAAE,GAAGC;GAAY,GAAGX,KAAK;EAEzC,oBACII,6BAACC,IAAwB,oBAAKM,UAAU;IAAEV,SAAS,EAAEC,EAAE,CAAC,iBAAiB,EAAEF,KAAK,CAACC,SAAS;mBACtFG,6BAACC,QAA4B;IAACJ,SAAS,EAAC;KAAiBS,QAAQ,CAAgC,eACjGN,6BAACL,GAAG;IAACI,WAAW,EAAC;kBACbC,6BAACE,KAAK,OAAG,CACP,eACNF,6BAACL,GAAG;IAACI,WAAW,EAAC;kBACbC,6BAACE,KAAK,OAAG,CACP,eACNF,6BAACG,MAAM,OAAG,CACa;AAEnC;;;;"}
+{"version":3,"file":"ScrollArea.js","sources":["../../../../../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\n\nconst Bar = props => {\n    const className = cn(`flex select-none touch-none transition-colors hover:bg-grey`, {\n        'w-[7px] hover:w-[14px] mr-[2px] hover:px-[2px] hover:mr-0': props.orientation === 'vertical',\n        'flex-col h-[7px] hover:h-[14px] mb-[2px] hover:py-[2px] hover:mb-0': props.orientation === 'horizontal',\n    });\n    return <ScrollAreaPrimitive.Scrollbar {...props} className={className} />;\n};\n\nconst Thumb = props => <ScrollAreaPrimitive.Thumb {...props} className=\"flex-[1] rounded bg-black opacity-50\" />;\n\nconst Corner = props => <ScrollAreaPrimitive.Corner {...props} classname=\"bg-grey-500\" />;\n\nexport type ScrollbarProps = Omit<ScrollAreaPrimitive.ScrollAreaProps, 'scrollHideDelay'>;\n\nexport const ScrollArea = (props: ScrollbarProps) => {\n    const { children, ...otherProps } = props;\n\n    return (\n        <ScrollAreaPrimitive.Root {...otherProps} className={cn('overflow-hidden', props.className)} data-taco=\"scrollarea\">\n            <ScrollAreaPrimitive.Viewport className=\"h-full w-full\">{children}</ScrollAreaPrimitive.Viewport>\n            <Bar orientation=\"vertical\">\n                <Thumb />\n            </Bar>\n            <Bar orientation=\"horizontal\">\n                <Thumb />\n            </Bar>\n            <Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n};\n"],"names":["Bar","props","className","cn","orientation","React","ScrollAreaPrimitive","Thumb","Corner","classname","ScrollArea","children","otherProps"],"mappings":";;;;AAIA,MAAMA,GAAG,GAAGC,KAAK;EACb,MAAMC,SAAS,GAAGC,EAAE,8DAA8D,EAAE;IAChF,2DAA2D,EAAEF,KAAK,CAACG,WAAW,KAAK,UAAU;IAC7F,oEAAoE,EAAEH,KAAK,CAACG,WAAW,KAAK;GAC/F,CAAC;EACF,oBAAOC,6BAACC,SAA6B,oBAAKL,KAAK;IAAEC,SAAS,EAAEA;KAAa;AAC7E,CAAC;AAED,MAAMK,KAAK,GAAGN,KAAK,iBAAII,6BAACC,OAAyB,oBAAKL,KAAK;EAAEC,SAAS,EAAC;GAAyC;AAEhH,MAAMM,MAAM,GAAGP,KAAK,iBAAII,6BAACC,QAA0B,oBAAKL,KAAK;EAAEQ,SAAS,EAAC;GAAgB;MAI5EC,UAAU,GAAIT,KAAqB;EAC5C,MAAM;IAAEU,QAAQ;IAAE,GAAGC;GAAY,GAAGX,KAAK;EAEzC,oBACII,6BAACC,IAAwB,oBAAKM,UAAU;IAAEV,SAAS,EAAEC,EAAE,CAAC,iBAAiB,EAAEF,KAAK,CAACC,SAAS,CAAC;iBAAY;mBACnGG,6BAACC,QAA4B;IAACJ,SAAS,EAAC;KAAiBS,QAAQ,CAAgC,eACjGN,6BAACL,GAAG;IAACI,WAAW,EAAC;kBACbC,6BAACE,KAAK,OAAG,CACP,eACNF,6BAACL,GAAG;IAACI,WAAW,EAAC;kBACbC,6BAACE,KAAK,OAAG,CACP,eACNF,6BAACG,MAAM,OAAG,CACa;AAEnC;;;;"}

package/dist/esm/packages/taco/src/components/Select2/Select2.js

@@ -1,11 +1,13 @@
 import React__default from 'react';
 import cn from 'clsx';
 import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { getNextFocussableElement } from '../../utils/dom.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Root, Trigger, Portal, Content } from '@radix-ui/react-popover';
 import { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused.js';
 import { isAriaDirectionKey } from '../../utils/aria.js';
 import { Root as Root$1, createListboxValueSetter } from '../../primitives/Listbox2/components/Root.js';
 import '../../primitives/Listbox2/components/Option.js';
@@ -16,7 +18,6 @@ import { Select2Context } from './components/Context.js';
 import { Option } from './components/Option.js';
 import { Group } from './components/Group.js';
 import { Title } from './components/Title.js';
-import { getNextFocussableElement } from '../../utils/dom.js';
 import { Trigger as Trigger$1 } from './components/Trigger.js';
 import { useIsFormControl } from '../../hooks/useIsFormControl.js';
 import { BubbleSelect } from '../../primitives/BubbleSelect.js';
@@ -24,7 +25,6 @@ import { Search } from './components/Search.js';
 import { useChildren } from './hooks/useChildren.js';
 import { Create } from './components/Create.js';
 import { Collection } from './components/Collection.js';
-import { useIsHoverStatePaused } from '../../hooks/useIsHoverStatePaused.js';
 
 const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, ref) {
   const {

package/dist/esm/packages/taco/src/components/Select2/components/Create.js

@@ -2,11 +2,11 @@ import React__default from 'react';
 import cn from 'clsx';
 import { AVAILABLE_COLORS } from '../../../utils/tailwind.js';
 import { useLocalization } from '../../Provider/Localization.js';
+import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
 import { isAriaSelectionKey } from '../../../utils/aria.js';
 import { Tag } from '../../Tag/Tag.js';
 import { createOptionClassName } from '../utilities.js';
 import { useSelect2Context } from './Context.js';
-import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
 
 const getNextColor = options => {
   let occurrences = {};

package/dist/esm/packages/taco/src/components/Select2/components/Edit.js

@@ -9,8 +9,8 @@ import { Popover } from '../../Popover/Popover.js';
 import { Group } from '../../Group/Group.js';
 import { Field } from '../../Field/Field.js';
 import { Root, Item, Indicator } from '@radix-ui/react-radio-group';
-import { useSelect2Context } from './Context.js';
 import { _catch } from '../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+import { useSelect2Context } from './Context.js';
 
 const EditPopover = props => {
   const {

package/dist/esm/packages/taco/src/components/Select2/components/Option.js

@@ -2,6 +2,7 @@ import React__default from 'react';
 import cn from 'clsx';
 import { Icon } from '../../Icon/Icon.js';
 import { IconButton } from '../../IconButton/IconButton.js';
+import { FontSizes } from '../../../types.js';
 import { isAriaSelectionKey } from '../../../utils/aria.js';
 import '../../../primitives/Listbox2/components/Root.js';
 import { Option as Option$1 } from '../../../primitives/Listbox2/components/Option.js';
@@ -12,7 +13,6 @@ import { createOptionClassName } from '../utilities.js';
 import { useSelect2Context } from './Context.js';
 import { EditPopover } from './Edit.js';
 import { isMobileDevice } from '../../../utils/device.js';
-import { FontSizes } from '../../../types.js';
 
 const Option = /*#__PURE__*/React__default.forwardRef(function Select2Option(props, ref) {
   var _window;

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js

@@ -3,12 +3,12 @@ import cn from 'clsx';
 import { Icon } from '../../Icon/Icon.js';
 import { Badge } from '../../Badge/Badge.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
+import { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom.js';
 import { Tooltip } from '../../Tooltip/Tooltip.js';
 import { getInputClasses } from '../../Input/util.js';
 import { ScrollArea } from '../../ScrollArea/ScrollArea.js';
 import { Tag } from '../../Tag/Tag.js';
 import { useSelect2Context } from './Context.js';
-import { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom.js';
 
 const Trigger = /*#__PURE__*/React__default.forwardRef(function Select2Trigger(props, ref) {
   const {
@@ -42,7 +42,7 @@ const Button = /*#__PURE__*/React__default.forwardRef(function Select2TriggerBut
     open,
     readOnly
   } = useSelect2Context();
-  const className = cn('cursor-pointer !px-1.5', getInputClasses({
+  const className = cn('cursor-pointer !px-1 h-fit', getInputClasses({
     ...props,
     disabled,
     highlighted,
@@ -99,7 +99,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
       })
     }, placeholder);
   } else if (currentValue) {
-    if (tags && emptyValue !== undefined && emptyValue !== value) {
+    if (tags && emptyValue !== value) {
       output = /*#__PURE__*/React__default.createElement(Tag, {
         className: "truncate",
         color: currentValue.props.color,
@@ -143,7 +143,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('!absolute z-20 !h-fit', buttonProps.className);
+    className = cn('!absolute z-20', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -176,9 +176,8 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     });
   }
   return /*#__PURE__*/React__default.createElement("div", {
-    className: cn('relative inline-flex flex-grow', {
-      'h-8': open
-    }),
+    className: "relative inline-flex h-fit flex-grow",
+    "data-taco": "select2-container",
     style: {
       width: open ? (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.offsetWidth : undefined
     }