@economic/taco 2.25.1-alpha.13 → 2.25.1

package/dist/esm/packages/taco/src/components/Report/components/Toolbar/components/Settings/Settings.js

@@ -0,0 +1,103 @@
+import React__default from 'react';
+import { IconButton } from '../../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../../Provider/Localization.js';
+import { Menu } from '../../../../../Menu/Menu.js';
+import { FontSizes } from '../../../../../../types.js';
+import { getSettings } from '../../../../../../primitives/Table/useTableManager/util/settings.js';
+import { HideOrOrderPopover } from './HideOrOrderPopover.js';
+
+function Settings(props) {
+  const {
+    customSettings,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const tableMeta = table.options.meta;
+  const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;
+  const canChangeFontSize = tableMeta.fontSize.isEnabled;
+  const canChangeRowHeight = tableMeta.rowHeight.isEnabled;
+  const [popover, setPopover] = React__default.useState(undefined);
+  let popoverElement;
+  if (popover) {
+    const handleClosePopover = () => setPopover(undefined);
+    switch (popover) {
+      case 'columnSettings':
+        {
+          if (canHideOrOrder) {
+            popoverElement = popoverProps => ( /*#__PURE__*/React__default.createElement(HideOrOrderPopover, Object.assign({}, popoverProps, {
+              open: true,
+              onChange: handleClosePopover,
+              table: table
+            })));
+          }
+        }
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": texts.table3.otherOptions.tooltip,
+    icon: "sliders",
+    menu: popoverElement ? undefined : menuProps => ( /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
+      align: "end"
+    }, canHideOrOrder ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "columns",
+      onClick: () => setPopover('columnSettings')
+    }, texts.table3.columnSettings.button)) : null, canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? ( /*#__PURE__*/React__default.createElement(Menu.Separator, null)) : null, canChangeRowHeight ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: `height-${tableMeta.rowHeight.height}`,
+      subMenu: () => /*#__PURE__*/React__default.createElement(RowHeightMenuItem, {
+        tableMeta: tableMeta
+      })
+    }, texts.table3.rowHeight.tooltip)) : null, canChangeFontSize ? ( /*#__PURE__*/React__default.createElement(Menu.Item, {
+      icon: "font-size",
+      subMenu: () => /*#__PURE__*/React__default.createElement(FontSizeMenuItem, {
+        tableMeta: tableMeta
+      })
+    }, texts.table3.fontSize.tooltip)) : null, customSettings ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, canChangeRowHeight || canChangeFontSize ? /*#__PURE__*/React__default.createElement(Menu.Separator, null) : null, customSettings(getSettings(table)).map((item, index) => ( /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: index
+    }, item))))) : null))),
+    popover: popoverElement,
+    onClickCapture: event => event.preventDefault(),
+    tooltip: texts.table3.otherOptions.tooltip
+  });
+}
+function FontSizeMenuItem({
+  tableMeta
+}) {
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+    onChange: tableMeta.fontSize.setSize,
+    value: tableMeta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.small
+  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.medium
+  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    disabled: tableMeta.rowHeight.height === 'short',
+    value: FontSizes.large
+  }, texts.table3.fontSize.sizes.large)));
+}
+function RowHeightMenuItem({
+  tableMeta
+}) {
+  const {
+    texts
+  } = useLocalization();
+  return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+    onChange: tableMeta.rowHeight.setHeight,
+    value: tableMeta.rowHeight.height
+  }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "short"
+  }, texts.table3.rowHeight.sizes.short), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "medium"
+  }, texts.table3.rowHeight.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "tall"
+  }, texts.table3.rowHeight.sizes.tall), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: "extra-tall"
+  }, texts.table3.rowHeight.sizes.extraTall)));
+}
+
+export { Settings };
+//# sourceMappingURL=Settings.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Settings/Settings.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Menu } from '../../../../../Menu/Menu';\nimport { HideOrOrderPopover } from './HideOrOrderPopover';\nimport { ReportCustomSettingsRenderer } from '../../../../types';\nimport { getSettings } from '../../../../../../primitives/Table/useTableManager/util/settings';\nimport { FontSizes } from '../../../../../../types';\nimport { IconName } from '../../../../../Icon/Icon';\n\nexport type SettingsProps<TType = unknown> = {\n    customSettings?: ReportCustomSettingsRenderer;\n    table: ReactTable<TType>;\n};\n\nexport function Settings<TType = unknown>(props: SettingsProps<TType>) {\n    const { customSettings, table } = props;\n    const { texts } = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const canHideOrOrder = table.options.enableHiding || tableMeta.columnOrdering.isEnabled;\n    const canChangeFontSize = tableMeta.fontSize.isEnabled;\n    const canChangeRowHeight = tableMeta.rowHeight.isEnabled;\n\n    const [popover, setPopover] = React.useState<string | undefined>(undefined);\n\n    let popoverElement;\n\n    if (popover) {\n        const handleClosePopover = () => setPopover(undefined);\n\n        switch (popover) {\n            case 'columnSettings': {\n                if (canHideOrOrder) {\n                    popoverElement = popoverProps => (\n                        <HideOrOrderPopover {...popoverProps} open onChange={handleClosePopover} table={table} />\n                    );\n                }\n            }\n        }\n    }\n\n    return (\n        <IconButton\n            aria-label={texts.table3.otherOptions.tooltip}\n            icon=\"sliders\"\n            menu={\n                popoverElement\n                    ? undefined\n                    : menuProps => (\n                          <Menu {...menuProps}>\n                              <Menu.Content align=\"end\">\n                                  {canHideOrOrder ? (\n                                      <Menu.Item icon=\"columns\" onClick={() => setPopover('columnSettings')}>\n                                          {texts.table3.columnSettings.button}\n                                      </Menu.Item>\n                                  ) : null}\n                                  {canHideOrOrder && (canChangeRowHeight || canChangeFontSize || customSettings) ? (\n                                      <Menu.Separator />\n                                  ) : null}\n                                  {canChangeRowHeight ? (\n                                      <Menu.Item\n                                          icon={`height-${tableMeta.rowHeight.height}` as IconName}\n                                          subMenu={() => <RowHeightMenuItem tableMeta={tableMeta} />}>\n                                          {texts.table3.rowHeight.tooltip}\n                                      </Menu.Item>\n                                  ) : null}\n                                  {canChangeFontSize ? (\n                                      <Menu.Item icon=\"font-size\" subMenu={() => <FontSizeMenuItem tableMeta={tableMeta} />}>\n                                          {texts.table3.fontSize.tooltip}\n                                      </Menu.Item>\n                                  ) : null}\n\n                                  {customSettings ? (\n                                      <>\n                                          {canChangeRowHeight || canChangeFontSize ? <Menu.Separator /> : null}\n                                          {customSettings(getSettings(table)).map((item, index) => (\n                                              <React.Fragment key={index}>{item}</React.Fragment>\n                                          ))}\n                                      </>\n                                  ) : null}\n                              </Menu.Content>\n                          </Menu>\n                      )\n            }\n            popover={popoverElement}\n            onClickCapture={event => event.preventDefault()}\n            tooltip={texts.table3.otherOptions.tooltip}\n        />\n    );\n}\n\nfunction FontSizeMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n    const { texts } = useLocalization();\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={tableMeta.fontSize.setSize as any} value={tableMeta.fontSize.size}>\n                <Menu.RadioGroup.Item value={FontSizes.small}>{texts.table3.fontSize.sizes.small}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value={FontSizes.medium}>{texts.table3.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item disabled={tableMeta.rowHeight.height === 'short'} value={FontSizes.large}>\n                    {texts.table3.fontSize.sizes.large}\n                </Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n\nfunction RowHeightMenuItem<TType = unknown>({ tableMeta }: { tableMeta: ReactTableMeta<TType> }) {\n    const { texts } = useLocalization();\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={tableMeta.rowHeight.setHeight as any} value={tableMeta.rowHeight.height}>\n                <Menu.RadioGroup.Item value=\"short\">{texts.table3.rowHeight.sizes.short}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"medium\">{texts.table3.rowHeight.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"tall\">{texts.table3.rowHeight.sizes.tall}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value=\"extra-tall\">{texts.table3.rowHeight.sizes.extraTall}</Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n"],"names":["Settings","props","customSettings","table","texts","useLocalization","tableMeta","options","meta","canHideOrOrder","enableHiding","columnOrdering","isEnabled","canChangeFontSize","fontSize","canChangeRowHeight","rowHeight","popover","setPopover","React","useState","undefined","popoverElement","handleClosePopover","popoverProps","HideOrOrderPopover","open","onChange","IconButton","table3","otherOptions","tooltip","icon","menu","menuProps","Menu","Content","align","Item","onClick","columnSettings","button","Separator","height","subMenu","RowHeightMenuItem","FontSizeMenuItem","getSettings","map","item","index","Fragment","key","onClickCapture","event","preventDefault","SubMenu","RadioGroup","setSize","value","size","FontSizes","small","sizes","medium","disabled","large","setHeight","short","tall","extraTall"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Report/listeners/useTableRowActiveListener.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { isElementInsideOrTriggeredFromContainer, isElementInteractive } from '../../../utils/dom.js';
+
+function useTableRowActiveListener(table, tableRef) {
+  const tableMeta = table.options.meta;
+  // move focus to the row when active row changes, this makes sure we start within the row when tabbing
+  React__default.useEffect(() => {
+    if (tableMeta.rowActive.rowActiveIndex !== undefined) {
+      var _tableRef$current$que, _tableRef$current;
+      const activeRow = (_tableRef$current$que = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('tbody tr[data-row-active="true"]')) !== null && _tableRef$current$que !== void 0 ? _tableRef$current$que : null;
+      // if the focused element, or it's parent if it's portalled, aren't in the row, then focus the row
+      // this ensures the next tab press starts at the row
+      if (!isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) && !isElementInteractive(document.activeElement)) {
+        var _activeRow$focus;
+        activeRow === null || activeRow === void 0 ? void 0 : (_activeRow$focus = activeRow.focus) === null || _activeRow$focus === void 0 ? void 0 : _activeRow$focus.call(activeRow, {
+          preventScroll: true
+        });
+      }
+    }
+  }, [tableMeta.rowActive.rowActiveIndex]);
+}
+
+export { useTableRowActiveListener };
+//# sourceMappingURL=useTableRowActiveListener.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTableRowActiveListener.js","sources":["../../../../../../../../src/components/Report/listeners/useTableRowActiveListener.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { isElementInsideOrTriggeredFromContainer, isElementInteractive } from '../../../utils/dom';\n\nexport function useTableRowActiveListener<TType = unknown>(\n    table: ReactTable<TType>,\n    tableRef: React.RefObject<HTMLTableElement>\n) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    // move focus to the row when active row changes, this makes sure we start within the row when tabbing\n    React.useEffect(() => {\n        if (tableMeta.rowActive.rowActiveIndex !== undefined) {\n            const activeRow = tableRef.current?.querySelector('tbody tr[data-row-active=\"true\"]') ?? null;\n\n            // if the focused element, or it's parent if it's portalled, aren't in the row, then focus the row\n            // this ensures the next tab press starts at the row\n            if (\n                !isElementInsideOrTriggeredFromContainer(document.activeElement, activeRow) &&\n                !isElementInteractive(document.activeElement)\n            ) {\n                (activeRow as HTMLElement)?.focus?.({ preventScroll: true });\n            }\n        }\n    }, [tableMeta.rowActive.rowActiveIndex]);\n}\n"],"names":["useTableRowActiveListener","table","tableRef","tableMeta","options","meta","React","useEffect","rowActive","rowActiveIndex","undefined","_tableRef$current$que","_tableRef$current","activeRow","current","querySelector","isElementInsideOrTriggeredFromContainer","document","activeElement","isElementInteractive","_activeRow$focus","focus","call","preventScroll"],"mappings":";;;SAIgBA,yBAAyBA,CACrCC,KAAwB,EACxBC,QAA2C;EAE3C,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;;EAG7DC,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIJ,SAAS,CAACK,SAAS,CAACC,cAAc,KAAKC,SAAS,EAAE;MAAA,IAAAC,qBAAA,EAAAC,iBAAA;MAClD,MAAMC,SAAS,IAAAF,qBAAA,IAAAC,iBAAA,GAAGV,QAAQ,CAACY,OAAO,cAAAF,iBAAA,uBAAhBA,iBAAA,CAAkBG,aAAa,CAAC,kCAAkC,CAAC,cAAAJ,qBAAA,cAAAA,qBAAA,GAAI,IAAI;;;MAI7F,IACI,CAACK,uCAAuC,CAACC,QAAQ,CAACC,aAAa,EAAEL,SAAS,CAAC,IAC3E,CAACM,oBAAoB,CAACF,QAAQ,CAACC,aAAa,CAAC,EAC/C;QAAA,IAAAE,gBAAA;QACGP,SAAyB,aAAzBA,SAAyB,wBAAAO,gBAAA,GAAzBP,SAAyB,CAAEQ,KAAK,cAAAD,gBAAA,uBAAhCA,gBAAA,CAAAE,IAAA,CAAAT,SAAyB,EAAU;UAAEU,aAAa,EAAE;SAAM,CAAC;;;GAGvE,EAAE,CAACpB,SAAS,CAACK,SAAS,CAACC,cAAc,CAAC,CAAC;AAC5C;;;;"}

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

@@ -0,0 +1,44 @@
+import React__default from 'react';
+
+function useColumnPinningStylesheet(tableId, table) {
+  const {
+    columnPinning
+  } = table.getState();
+  const stylesheet = React__default.useMemo(() => {
+    const styles = [];
+    // might be a better way to get this information, but it wasn't obvious
+    const all = table.getFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
+    const left = table.getLeftFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
+    const right = table.getRightFlatHeaders().filter(column => !column.subHeaders.length).map(x => x.id);
+    if (left.length) {
+      const index = all.indexOf(left[left.length - 1]);
+      // add right border, hide the header seperator and add shadow when scrolled
+      // we have to be specific so that nested tables don't inherit the same css
+      styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}),
+                table[data-taco='report']#${tableId} > tbody > tr  > td:nth-child(${index + 1}) {
+                    border-right-width: 1px;
+                }\ntable[data-taco='report']#${tableId} > thead > tr  > th:nth-child(${index + 1})[data-cell-id^="__"],
+                table[data-taco='report']#${tableId} > tbody > tr  > td:nth-child(${index + 1})[data-cell-id^="__"] {
+                    border-right-color: transparent;
+                }\ntable[data-taco='report']#${tableId} > thead > tr  > th:nth-child(${index + 1}):after {
+                    content: none;
+                }\ntable[data-taco='report'][data-table-horizontally-scrolled="true"]#${tableId} > thead > tr  > th:nth-child(${index + 1}),
+                table[data-taco='report'][data-table-horizontally-scrolled="true"]#${tableId} > tbody > tr  > td:nth-child(${index + 1}) {
+                    border-right-color: rgb(221, 221, 221);
+                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%);
+                }`);
+    }
+    if (right.length) {
+      const index = all.indexOf(right[right.length - 1]);
+      styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):not([data-cell-id^="__"]),
+                table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}):not([data-cell-id^="__"]) {
+                    border-left-width: 1px;
+                }`);
+    }
+    return styles.join('\n');
+  }, [columnPinning]);
+  return stylesheet;
+}
+
+export { useColumnPinningStylesheet };
+//# sourceMappingURL=useColumnPinningStylesheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnPinningStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useColumnPinningStylesheet.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\n\nexport function useColumnPinningStylesheet<TType = unknown>(tableId: string, table: ReactTable<TType>) {\n    const { columnPinning } = table.getState();\n\n    const stylesheet = React.useMemo(() => {\n        const styles: string[] = [];\n\n        // might be a better way to get this information, but it wasn't obvious\n        const all = table\n            .getFlatHeaders()\n            .filter(column => !column.subHeaders.length)\n            .map(x => x.id);\n        const left = table\n            .getLeftFlatHeaders()\n            .filter(column => !column.subHeaders.length)\n            .map(x => x.id);\n        const right = table\n            .getRightFlatHeaders()\n            .filter(column => !column.subHeaders.length)\n            .map(x => x.id);\n\n        if (left.length) {\n            const index = all.indexOf(left[left.length - 1]);\n\n            // add right border, hide the header seperator and add shadow when scrolled\n            // we have to be specific so that nested tables don't inherit the same css\n            styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}),\n                table[data-taco='report']#${tableId} > tbody > tr  > td:nth-child(${index + 1}) {\n                    border-right-width: 1px;\n                }\\ntable[data-taco='report']#${tableId} > thead > tr  > th:nth-child(${index + 1})[data-cell-id^=\"__\"],\n                table[data-taco='report']#${tableId} > tbody > tr  > td:nth-child(${index + 1})[data-cell-id^=\"__\"] {\n                    border-right-color: transparent;\n                }\\ntable[data-taco='report']#${tableId} > thead > tr  > th:nth-child(${index + 1}):after {\n                    content: none;\n                }\\ntable[data-taco='report'][data-table-horizontally-scrolled=\"true\"]#${tableId} > thead > tr  > th:nth-child(${\n                index + 1\n            }),\n                table[data-taco='report'][data-table-horizontally-scrolled=\"true\"]#${tableId} > tbody > tr  > td:nth-child(${\n                index + 1\n            }) {\n                    border-right-color: rgb(221, 221, 221);\n                    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%);\n                }`);\n        }\n\n        if (right.length) {\n            const index = all.indexOf(right[right.length - 1]);\n\n            styles.push(`table[data-taco='report']#${tableId} > thead > tr > th:nth-child(${index + 1}):not([data-cell-id^=\"__\"]),\n                table[data-taco='report']#${tableId} > tbody > tr > td:nth-child(${index + 1}):not([data-cell-id^=\"__\"]) {\n                    border-left-width: 1px;\n                }`);\n        }\n\n        return styles.join('\\n');\n    }, [columnPinning]);\n\n    return stylesheet;\n}\n"],"names":["useColumnPinningStylesheet","tableId","table","columnPinning","getState","stylesheet","React","useMemo","styles","all","getFlatHeaders","filter","column","subHeaders","length","map","x","id","left","getLeftFlatHeaders","right","getRightFlatHeaders","index","indexOf","push","join"],"mappings":";;SAGgBA,0BAA0BA,CAAkBC,OAAe,EAAEC,KAAwB;EACjG,MAAM;IAAEC;GAAe,GAAGD,KAAK,CAACE,QAAQ,EAAE;EAE1C,MAAMC,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC7B,MAAMC,MAAM,GAAa,EAAE;;IAG3B,MAAMC,GAAG,GAAGP,KAAK,CACZQ,cAAc,EAAE,CAChBC,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IACnB,MAAMC,IAAI,GAAGhB,KAAK,CACbiB,kBAAkB,EAAE,CACpBR,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IACnB,MAAMG,KAAK,GAAGlB,KAAK,CACdmB,mBAAmB,EAAE,CACrBV,MAAM,CAACC,MAAM,IAAI,CAACA,MAAM,CAACC,UAAU,CAACC,MAAM,CAAC,CAC3CC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACC,EAAE,CAAC;IAEnB,IAAIC,IAAI,CAACJ,MAAM,EAAE;MACb,MAAMQ,KAAK,GAAGb,GAAG,CAACc,OAAO,CAACL,IAAI,CAACA,IAAI,CAACJ,MAAM,GAAG,CAAC,CAAC,CAAC;;;MAIhDN,MAAM,CAACgB,IAAI,8BAA8BvB,uCAAuCqB,KAAK,GAAG;4CACxDrB,wCAAwCqB,KAAK,GAAG;;+CAE7CrB,wCAAwCqB,KAAK,GAAG;4CACnDrB,wCAAwCqB,KAAK,GAAG;;+CAE7CrB,wCAAwCqB,KAAK,GAAG;;wFAEPrB,wCACxEqB,KAAK,GAAG;qFAE6DrB,wCACrEqB,KAAK,GAAG;;;kBAIN,CAAC;;IAGX,IAAIF,KAAK,CAACN,MAAM,EAAE;MACd,MAAMQ,KAAK,GAAGb,GAAG,CAACc,OAAO,CAACH,KAAK,CAACA,KAAK,CAACN,MAAM,GAAG,CAAC,CAAC,CAAC;MAElDN,MAAM,CAACgB,IAAI,8BAA8BvB,uCAAuCqB,KAAK,GAAG;4CACxDrB,uCAAuCqB,KAAK,GAAG;;kBAEzE,CAAC;;IAGX,OAAOd,MAAM,CAACiB,IAAI,CAAC,IAAI,CAAC;GAC3B,EAAE,CAACtB,aAAa,CAAC,CAAC;EAEnB,OAAOE,UAAU;AACrB;;;;"}

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

@@ -0,0 +1,58 @@
+import React__default from 'react';
+import { getCellMinWidth } from '../../../primitives/Table/useTableManager/util/columns.js';
+
+function useCssGridStylesheet(tableId, table, fontSize) {
+  const tableMeta = table.options.meta;
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const columnSizing = table.getState().columnSizing;
+  const globalMinSize = getCellMinWidth(fontSize);
+  // header body ?footer
+  const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
+  return React__default.useMemo(() => {
+    let printGridTemplateColumns = '';
+    const printHiddenColumns = [];
+    const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
+      var _column$columnDef$min, _column$columnDef$met;
+      if (table.options.enableGrouping && column.getIsGrouped()) {
+        return accum;
+      }
+      const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
+      const width = columnSizing[column.id];
+      let size;
+      let printSize;
+      if (column.id === '__actions') {
+        const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
+        size = `minmax(${minWidth}px, auto)`;
+      } else if (width !== undefined) {
+        const isLastColumn = index === allVisibleColumns.length - 1;
+        if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
+          size = `minmax(${minSize}px, 1fr)`;
+        } else {
+          const minWidth = width < minSize ? minSize : width;
+          if (isLastColumn) {
+            size = `minmax(${minWidth}px, auto)`;
+          } else {
+            size = `${minWidth}px`;
+          }
+        }
+      } else {
+        size = `minmax(${minSize}px, auto)`;
+      }
+      if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
+        printSize = '';
+        printHiddenColumns.push(column.id);
+      } else {
+        printSize = 'auto';
+      }
+      printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
+      return `${accum} ${size}`.trim();
+    }, '');
+    // we have to be specific so that nested tables don't inherit the same css
+    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }
+@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''} }`;
+  }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);
+}
+
+export { useCssGridStylesheet };
+//# sourceMappingURL=useCssGridStylesheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCssGridStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useCssGridStylesheet.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../../primitives/Table/types';\nimport { getCellMinWidth } from '../../../primitives/Table/useTableManager/util/columns';\n\nexport function useCssGridStylesheet<TType = unknown>(\n    tableId: string,\n    table: ReactTable<TType>,\n    fontSize: TableFontSize\n): string {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const columnSizing = table.getState().columnSizing;\n    const globalMinSize = getCellMinWidth(fontSize);\n\n    // header body ?footer\n    const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';\n\n    return React.useMemo(() => {\n        let printGridTemplateColumns = '';\n        const printHiddenColumns: string[] = [];\n\n        const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {\n            if (table.options.enableGrouping && column.getIsGrouped()) {\n                return accum;\n            }\n\n            const minSize = column.columnDef.minSize ?? globalMinSize;\n            const width = columnSizing[column.id] as number | 'grow';\n\n            let size;\n            let printSize;\n\n            if (column.id === '__actions') {\n                const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */\n                size = `minmax(${minWidth}px, auto)`;\n            } else if (width !== undefined) {\n                const isLastColumn = index === allVisibleColumns.length - 1;\n\n                if (width === 'grow' || (Number.isNaN(width) && !isLastColumn)) {\n                    size = `minmax(${minSize}px, 1fr)`;\n                } else {\n                    const minWidth = width < minSize ? minSize : width;\n\n                    if (isLastColumn) {\n                        size = `minmax(${minWidth}px, auto)`;\n                    } else {\n                        size = `${minWidth}px`;\n                    }\n                }\n            } else {\n                size = `minmax(${minSize}px, auto)`;\n            }\n\n            if (column.columnDef.meta?.enablePrinting === false) {\n                printSize = '';\n                printHiddenColumns.push(column.id);\n            } else {\n                printSize = 'auto';\n            }\n\n            printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();\n\n            return `${accum} ${size}`.trim();\n        }, '');\n\n        // we have to be specific so that nested tables don't inherit the same css\n        const hiddenColumns = printHiddenColumns\n            .map(\n                id =>\n                    `table[data-taco='report']#${tableId} > thead > tr > th[data-cell-id='${id}']\\n,table[data-taco='report']#${tableId} > tbody > tr > td[data-cell-id='${id}']\\n`\n            )\n            .join(',');\n\n        return `table[data-taco='report']#${tableId} { grid-template-columns: ${gridTemplateColumns}; grid-template-rows: ${gridTemplateRows}; }\n@media print { table[data-taco='report']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${\n            hiddenColumns ? `${hiddenColumns} { display: none; }` : ''\n        } }`;\n    }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);\n}\n"],"names":["useCssGridStylesheet","tableId","table","fontSize","tableMeta","options","meta","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","globalMinSize","getCellMinWidth","gridTemplateRows","getRowModel","rows","length","React","useMemo","printGridTemplateColumns","printHiddenColumns","gridTemplateColumns","reduce","accum","column","index","enableGrouping","getIsGrouped","minSize","_column$columnDef$min","columnDef","width","id","size","printSize","minWidth","rowActions","rowActionsLength","undefined","isLastColumn","Number","isNaN","_column$columnDef$met","enablePrinting","push","trim","hiddenColumns","map","join"],"mappings":";;;SAKgBA,oBAAoBA,CAChCC,OAAe,EACfC,KAAwB,EACxBC,QAAuB;EAEvB,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAC7D,MAAMC,iBAAiB,GAAGL,KAAK,CAACM,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGP,KAAK,CAACQ,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,aAAa,GAAGC,eAAe,CAACT,QAAQ,CAAC;;EAG/C,MAAMU,gBAAgB,GAAGX,KAAK,CAACY,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM,GAAG,6BAA6B,GAAG,iBAAiB;EAE5G,OAAOC,cAAK,CAACC,OAAO,CAAC;IACjB,IAAIC,wBAAwB,GAAG,EAAE;IACjC,MAAMC,kBAAkB,GAAa,EAAE;IAEvC,MAAMC,mBAAmB,GAAGd,iBAAiB,CAACe,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;;MACtE,IAAIvB,KAAK,CAACG,OAAO,CAACqB,cAAc,IAAIF,MAAM,CAACG,YAAY,EAAE,EAAE;QACvD,OAAOJ,KAAK;;MAGhB,MAAMK,OAAO,IAAAC,qBAAA,GAAGL,MAAM,CAACM,SAAS,CAACF,OAAO,cAAAC,qBAAA,cAAAA,qBAAA,GAAIlB,aAAa;MACzD,MAAMoB,KAAK,GAAGtB,YAAY,CAACe,MAAM,CAACQ,EAAE,CAAoB;MAExD,IAAIC,IAAI;MACR,IAAIC,SAAS;MAEb,IAAIV,MAAM,CAACQ,EAAE,KAAK,WAAW,EAAE;QAC3B,MAAMG,QAAQ,GAAG/B,SAAS,CAACgC,UAAU,CAACC,gBAAgB,GAAG,EAAE,GAAG,CAAC,CAAC;QAChEJ,IAAI,aAAaE,mBAAmB;OACvC,MAAM,IAAIJ,KAAK,KAAKO,SAAS,EAAE;QAC5B,MAAMC,YAAY,GAAGd,KAAK,KAAKlB,iBAAiB,CAACS,MAAM,GAAG,CAAC;QAE3D,IAAIe,KAAK,KAAK,MAAM,IAAKS,MAAM,CAACC,KAAK,CAACV,KAAK,CAAC,IAAI,CAACQ,YAAa,EAAE;UAC5DN,IAAI,aAAaL,iBAAiB;SACrC,MAAM;UACH,MAAMO,QAAQ,GAAGJ,KAAK,GAAGH,OAAO,GAAGA,OAAO,GAAGG,KAAK;UAElD,IAAIQ,YAAY,EAAE;YACdN,IAAI,aAAaE,mBAAmB;WACvC,MAAM;YACHF,IAAI,MAAME,YAAY;;;OAGjC,MAAM;QACHF,IAAI,aAAaL,kBAAkB;;MAGvC,IAAI,EAAAc,qBAAA,GAAAlB,MAAM,CAACM,SAAS,CAACxB,IAAI,cAAAoC,qBAAA,uBAArBA,qBAAA,CAAuBC,cAAc,MAAK,KAAK,EAAE;QACjDT,SAAS,GAAG,EAAE;QACdd,kBAAkB,CAACwB,IAAI,CAACpB,MAAM,CAACQ,EAAE,CAAC;OACrC,MAAM;QACHE,SAAS,GAAG,MAAM;;MAGtBf,wBAAwB,MAAMA,4BAA4Be,WAAW,CAACW,IAAI,EAAE;MAE5E,UAAUtB,SAASU,MAAM,CAACY,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;;IAGN,MAAMC,aAAa,GAAG1B,kBAAkB,CACnC2B,GAAG,CACAf,EAAE,iCAC+B/B,2CAA2C+B,oCAAoC/B,2CAA2C+B,QAAQ,CACtK,CACAgB,IAAI,CAAC,GAAG,CAAC;IAEd,oCAAoC/C,oCAAoCoB,4CAA4CR;2CACjFZ,oCAAoCkB,+BACnE2B,aAAa,MAAMA,kCAAkC,GAAG,MACxD;GACP,EAAE,CAACvC,iBAAiB,EAAEE,YAAY,EAAEE,aAAa,EAAEP,SAAS,CAACgC,UAAU,CAACC,gBAAgB,CAAC,CAAC;AAC/F;;;;"}

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { useCssGridStylesheet } from './useCssGridStylesheet.js';
+import { useColumnPinningStylesheet } from './useColumnPinningStylesheet.js';
+import { getCellWidthPadding, getCellHeightPadding } from './util.js';
+
+function useStylesheet(tableId, table) {
+  const tableMeta = table.options.meta;
+  const cssGridStylesheet = useCssGridStylesheet(tableId, table, tableMeta.fontSize.size);
+  const columnPinningStylesheet = useColumnPinningStylesheet(tableId, table);
+  const genericStylesheet = `table[data-taco='report']#${tableId} {
+        --table-header-group-depth: ${table.getHeaderGroups().length};
+        --table-cell-padding-x: ${getCellWidthPadding(tableMeta.fontSize.size)};
+        --table-cell-padding-y: ${getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size)};
+    }`;
+  const css = [genericStylesheet, cssGridStylesheet, columnPinningStylesheet].filter(s => !!s).join('\n');
+  return /*#__PURE__*/React__default.createElement("style", null, css);
+}
+
+export { useStylesheet };
+//# sourceMappingURL=useStylesheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStylesheet.js","sources":["../../../../../../../../src/components/Report/styles/useStylesheet.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { useCssGridStylesheet } from './useCssGridStylesheet';\nimport { useColumnPinningStylesheet } from './useColumnPinningStylesheet';\nimport { getCellHeightPadding, getCellWidthPadding } from './util';\n\nexport function useStylesheet<TType = unknown>(tableId: string, table: ReactTable<TType>) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const cssGridStylesheet = useCssGridStylesheet<TType>(tableId, table, tableMeta.fontSize.size);\n    const columnPinningStylesheet = useColumnPinningStylesheet(tableId, table);\n\n    const genericStylesheet = `table[data-taco='report']#${tableId} {\n        --table-header-group-depth: ${table.getHeaderGroups().length};\n        --table-cell-padding-x: ${getCellWidthPadding(tableMeta.fontSize.size)};\n        --table-cell-padding-y: ${getCellHeightPadding(tableMeta.rowHeight.height, tableMeta.fontSize.size)};\n    }`;\n\n    const css = [genericStylesheet, cssGridStylesheet, columnPinningStylesheet].filter(s => !!s).join('\\n');\n\n    return <style>{css}</style>;\n}\n"],"names":["useStylesheet","tableId","table","tableMeta","options","meta","cssGridStylesheet","useCssGridStylesheet","fontSize","size","columnPinningStylesheet","useColumnPinningStylesheet","genericStylesheet","getHeaderGroups","length","getCellWidthPadding","getCellHeightPadding","rowHeight","height","css","filter","s","join","React"],"mappings":";;;;;SAMgBA,aAAaA,CAAkBC,OAAe,EAAEC,KAAwB;EACpF,MAAMC,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAC7D,MAAMC,iBAAiB,GAAGC,oBAAoB,CAAQN,OAAO,EAAEC,KAAK,EAAEC,SAAS,CAACK,QAAQ,CAACC,IAAI,CAAC;EAC9F,MAAMC,uBAAuB,GAAGC,0BAA0B,CAACV,OAAO,EAAEC,KAAK,CAAC;EAE1E,MAAMU,iBAAiB,gCAAgCX;sCACrBC,KAAK,CAACW,eAAe,EAAE,CAACC;kCAC5BC,mBAAmB,CAACZ,SAAS,CAACK,QAAQ,CAACC,IAAI;kCAC3CO,oBAAoB,CAACb,SAAS,CAACc,SAAS,CAACC,MAAM,EAAEf,SAAS,CAACK,QAAQ,CAACC,IAAI;MACpG;EAEF,MAAMU,GAAG,GAAG,CAACP,iBAAiB,EAAEN,iBAAiB,EAAEI,uBAAuB,CAAC,CAACU,MAAM,CAACC,CAAC,IAAI,CAAC,CAACA,CAAC,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC;EAEvG,oBAAOC,4CAAQJ,GAAG,CAAS;AAC/B;;;;"}

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

@@ -1,13 +1,50 @@
-import { useTable } from '../../primitives/Table/Core/useTable.js';
-import { DisplayRow } from '../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow.js';
-import { DisplayCell } from '../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.js';
+import React__default from 'react';
+import cn from 'clsx';
+import { useTableManager } from '../../primitives/Table/useTableManager/useTableManager.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';
 
-const RENDERERS = {
-  row: DisplayRow,
-  cell: DisplayCell
-};
 function useReport(props, ref) {
-  return useTable(props, ref, RENDERERS);
+  const meta = {};
+  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'
+      }
+    }
+  }), []);
+  // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  const report = useTableManager(props, ref, meta, INTERNAL_COLUMNS);
+  // listeners
+  useTableRowActiveListener(report.instance, ref);
+  return report;
 }
 
 export { useReport };

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

@@ -1 +1 @@
-{"version":3,"file":"useReport.js","sources":["../../../../../../../src/components/Report/useReport.tsx"],"sourcesContent":["import React from 'react';\nimport { TableRef } from '../../primitives/Table/types';\nimport { useTable } from '../../primitives/Table/Core/useTable';\nimport { DisplayRow } from '../../primitives/Table/Core/components/Row/BuiltIns/DisplayRow';\nimport { DisplayCell } from '../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport { TableProps } from '../../primitives/Table/types';\n\nconst RENDERERS = {\n    row: DisplayRow,\n    cell: DisplayCell,\n};\n\nexport function useReport<TType>(props: TableProps<TType>, ref: React.Ref<TableRef>) {\n    return useTable<TType>(props, ref, RENDERERS);\n}\n"],"names":["RENDERERS","row","DisplayRow","cell","DisplayCell","useReport","props","ref","useTable"],"mappings":";;;;AAOA,MAAMA,SAAS,GAAG;EACdC,GAAG,EAAEC,UAAU;EACfC,IAAI,EAAEC;CACT;SAEeC,SAASA,CAAQC,KAAwB,EAAEC,GAAwB;EAC/E,OAAOC,QAAQ,CAAQF,KAAK,EAAEC,GAAG,EAAEP,SAAS,CAAC;AACjD;;;;"}
+{"version":3,"file":"useReport.js","sources":["../../../../../../../src/components/Report/useReport.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { useTableManager } from '../../primitives/Table/useTableManager/useTableManager';\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 } 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    const INTERNAL_COLUMNS = 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    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n    const report = useTableManager<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","useTableManager","useTableRowActiveListener","instance"],"mappings":";;;;;;;;SAYgBA,SAASA,CAAQC,KAAyB,EAAEC,GAA8B;EACtF,MAAMC,IAAI,GAAe,EAAE;EAC3B,MAAMC,gBAAgB,GAAGC,cAAK,CAACC,OAAO,CAClC,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;;EAGD,MAAMI,MAAM,GAAGC,eAAe,CAAoBvB,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,gBAAgB,CAAC;;EAGrFqB,yBAAyB,CAACF,MAAM,CAACG,QAAQ,EAAExB,GAAG,CAAC;EAE/C,OAAOqB,MAAM;AACjB;;;;"}

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,32 @@
+import React__default from 'react';
+import { isElementInsideOverlay, isSiblingElementInsideSameParentOverlay, isElementInteractive, isElementInsideOrTriggeredFromContainer } from '../../../utils/dom.js';
+
+function useTableGlobalShortcuts(table, tableRef, scrollToIndex) {
+  const tableMeta = table.options.meta;
+  const rows = table.getRowModel().rows;
+  React__default.useEffect(() => {
+    const handleKeyDown = event => {
+      const trigger = event.target;
+      if (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current) || isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current)) {
+        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';\nimport {\n    isElementInsideOrTriggeredFromContainer,\n    isElementInsideOverlay,\n    isElementInteractive,\n    isSiblingElementInsideSameParentOverlay,\n} from '../../../utils/dom';\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 trigger = event.target as HTMLElement;\n\n                if (\n                    (isElementInsideOverlay(trigger) && !isSiblingElementInsideSameParentOverlay(trigger, tableRef.current)) ||\n                    (isElementInteractive(trigger) && !isElementInsideOrTriggeredFromContainer(trigger, tableRef.current))\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","trigger","target","isElementInsideOverlay","isSiblingElementInsideSameParentOverlay","current","isElementInteractive","isElementInsideOrTriggeredFromContainer","rowActive","length","rowSelection","rowActiveIndex","undefined","_rows$tableMeta$rowAc","rowClick","original","document","addEventListener","removeEventListener"],"mappings":";;;SAUgBA,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,OAAO,GAAGD,KAAK,CAACE,MAAqB;MAE3C,IACKC,sBAAsB,CAACF,OAAO,CAAC,IAAI,CAACG,uCAAuC,CAACH,OAAO,EAAEX,QAAQ,CAACe,OAAO,CAAC,IACtGC,oBAAoB,CAACL,OAAO,CAAC,IAAI,CAACM,uCAAuC,CAACN,OAAO,EAAEX,QAAQ,CAACe,OAAO,CAAE,EACxG;QACE;;MAGJb,SAAS,CAACgB,SAAS,CAACT,aAAa,CAACC,KAAK,EAAEL,IAAI,CAACc,MAAM,EAAElB,aAAa,EAAED,QAAQ,CAAC;MAC9EE,SAAS,CAACkB,YAAY,CAACX,aAAa,CAACC,KAAK,EAAEX,KAAK,CAAC;MAElD,IAAIG,SAAS,CAACgB,SAAS,CAACG,cAAc,KAAKC,SAAS,EAAE;QAAA,IAAAC,qBAAA;QAClDrB,SAAS,CAACsB,QAAQ,CAACf,aAAa,CAACC,KAAK,GAAAa,qBAAA,GAAElB,IAAI,CAACH,SAAS,CAACgB,SAAS,CAACG,cAAc,CAAC,cAAAE,qBAAA,uBAAxCA,qBAAA,CAA0CE,QAAQ,CAAC;;KAElG;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAElB,aAAa,CAAC;IAEnD,OAAO;MACHiB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEnB,aAAa,CAAC;KACzD;GACJ;;;;EAID,CAACT,QAAQ,CAACe,OAAO,EAAEb,SAAS,CAACgB,SAAS,CAACG,cAAc,EAAEpB,aAAa,CAAC,CACxE;AACL;;;;"}