@economic/taco 2.21.2 → 2.22.0

package/dist/esm/packages/taco/src/components/Report/components/Row/SkeletonRow.js

@@ -0,0 +1,62 @@
+import React__default from 'react';
+import { useInView } from 'react-intersection-observer';
+
+function SkeletonRow(props) {
+  const {
+    index,
+    row,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  if (tableMeta.server.isEnabled) {
+    return /*#__PURE__*/React__default.createElement(RowWithServerLoading, Object.assign({}, props, {
+      index: index
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Skeleton, {
+    id: row.id,
+    cells: row.getVisibleCells()
+  });
+}
+function RowWithServerLoading(props) {
+  const {
+    index,
+    row,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const pageIndex = Math.floor(index / tableMeta.server.pageSize) * tableMeta.server.pageSize / tableMeta.server.pageSize;
+  const {
+    ref,
+    inView
+  } = useInView({
+    threshold: 0,
+    triggerOnce: true,
+    initialInView: pageIndex === 0
+  });
+  React__default.useEffect(() => {
+    if (inView) {
+      var _tableMeta$server$loa, _tableMeta$server;
+      (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
+    }
+  }, [inView]);
+  return /*#__PURE__*/React__default.createElement(Skeleton, {
+    cells: row.getVisibleCells(),
+    ref: ref
+  });
+}
+const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props, ref) {
+  const {
+    cells
+  } = props;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", {
+    ref: ref
+  }, cells.map(cell => ( /*#__PURE__*/React__default.createElement("td", {
+    key: cell.id
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: "bg-grey-100 text-grey-700 h-4 w-full text-center text-xs"
+  }))))));
+});
+
+export { RowWithServerLoading, Skeleton, SkeletonRow };
+//# sourceMappingURL=SkeletonRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonRow.js","sources":["../../../../../../../../../src/components/Report/components/Row/SkeletonRow.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta, Row as ReactTableRow } from '@tanstack/react-table';\nimport { useInView } from 'react-intersection-observer';\n\nexport type RowProps<TType = unknown> = {\n    index: number;\n    row: ReactTableRow<TType>;\n    table: ReactTable<TType>;\n};\n\nexport function SkeletonRow<TType = unknown>(props: RowProps<TType>) {\n    const { index, row, table } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    if (tableMeta.server.isEnabled) {\n        return <RowWithServerLoading {...props} index={index} />;\n    }\n\n    return <Skeleton id={row.id} cells={row.getVisibleCells()} />;\n}\n\nexport function RowWithServerLoading<TType = unknown>(props: RowProps<TType>) {\n    const { index, row, table } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const pageIndex = (Math.floor(index / tableMeta.server.pageSize) * tableMeta.server.pageSize) / tableMeta.server.pageSize;\n\n    const { ref, inView } = useInView({\n        threshold: 0,\n        triggerOnce: true,\n        initialInView: pageIndex === 0,\n    });\n\n    React.useEffect(() => {\n        if (inView) {\n            tableMeta.server.loadPage?.(\n                pageIndex,\n                table.getState().sorting,\n                table.getState().columnFilters,\n                table.getState().globalFilter\n            );\n        }\n    }, [inView]);\n\n    return <Skeleton cells={row.getVisibleCells()} ref={ref} />;\n}\n\nexport const Skeleton = React.forwardRef(function Skeleton(props: any, ref: React.Ref<HTMLTableRowElement>) {\n    const { cells } = props;\n\n    return (\n        <>\n            <tr ref={ref}>\n                {cells.map(cell => (\n                    <td key={cell.id}>\n                        <span className=\"bg-grey-100 text-grey-700 h-4 w-full text-center text-xs\" />\n                    </td>\n                ))}\n            </tr>\n        </>\n    );\n});\n"],"names":["SkeletonRow","props","index","row","table","tableMeta","options","meta","server","isEnabled","React","RowWithServerLoading","Skeleton","id","cells","getVisibleCells","pageIndex","Math","floor","pageSize","ref","inView","useInView","threshold","triggerOnce","initialInView","useEffect","_tableMeta$server$loa","_tableMeta$server","loadPage","call","getState","sorting","columnFilters","globalFilter","forwardRef","map","cell","key","className"],"mappings":";;;SAUgBA,WAAWA,CAAkBC,KAAsB;EAC/D,MAAM;IAAEC,KAAK;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACnC,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAE7D,IAAIF,SAAS,CAACG,MAAM,CAACC,SAAS,EAAE;IAC5B,oBAAOC,6BAACC,oBAAoB,oBAAKV,KAAK;MAAEC,KAAK,EAAEA;OAAS;;EAG5D,oBAAOQ,6BAACE,QAAQ;IAACC,EAAE,EAAEV,GAAG,CAACU,EAAE;IAAEC,KAAK,EAAEX,GAAG,CAACY,eAAe;IAAM;AACjE;SAEgBJ,oBAAoBA,CAAkBV,KAAsB;EACxE,MAAM;IAAEC,KAAK;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACnC,MAAMI,SAAS,GAAGD,KAAK,CAACE,OAAO,CAACC,IAA6B;EAE7D,MAAMS,SAAS,GAAIC,IAAI,CAACC,KAAK,CAAChB,KAAK,GAAGG,SAAS,CAACG,MAAM,CAACW,QAAQ,CAAC,GAAGd,SAAS,CAACG,MAAM,CAACW,QAAQ,GAAId,SAAS,CAACG,MAAM,CAACW,QAAQ;EAEzH,MAAM;IAAEC,GAAG;IAAEC;GAAQ,GAAGC,SAAS,CAAC;IAC9BC,SAAS,EAAE,CAAC;IACZC,WAAW,EAAE,IAAI;IACjBC,aAAa,EAAET,SAAS,KAAK;GAChC,CAAC;EAEFN,cAAK,CAACgB,SAAS,CAAC;IACZ,IAAIL,MAAM,EAAE;MAAA,IAAAM,qBAAA,EAAAC,iBAAA;MACR,CAAAD,qBAAA,IAAAC,iBAAA,GAAAvB,SAAS,CAACG,MAAM,EAACqB,QAAQ,cAAAF,qBAAA,uBAAzBA,qBAAA,CAAAG,IAAA,CAAAF,iBAAA,EACIZ,SAAS,EACTZ,KAAK,CAAC2B,QAAQ,EAAE,CAACC,OAAO,EACxB5B,KAAK,CAAC2B,QAAQ,EAAE,CAACE,aAAa,EAC9B7B,KAAK,CAAC2B,QAAQ,EAAE,CAACG,YAAY,CAChC;;GAER,EAAE,CAACb,MAAM,CAAC,CAAC;EAEZ,oBAAOX,6BAACE,QAAQ;IAACE,KAAK,EAAEX,GAAG,CAACY,eAAe,EAAE;IAAEK,GAAG,EAAEA;IAAO;AAC/D;MAEaR,QAAQ,gBAAGF,cAAK,CAACyB,UAAU,CAAC,SAASvB,QAAQA,CAACX,KAAU,EAAEmB,GAAmC;EACtG,MAAM;IAAEN;GAAO,GAAGb,KAAK;EAEvB,oBACIS,yEACIA;IAAIU,GAAG,EAAEA;KACJN,KAAK,CAACsB,GAAG,CAACC,IAAI,mBACX3B;IAAI4B,GAAG,EAAED,IAAI,CAACxB;kBACVH;IAAM6B,SAAS,EAAC;IAA6D,CAC5E,CACR,CAAC,CACD,CACN;AAEX,CAAC;;;;"}

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

@@ -0,0 +1,63 @@
+import React__default from 'react';
+import { Group } from '../../../Group/Group.js';
+import { Search } from './components/Search/Search.js';
+import { Settings } from './components/Settings/Settings.js';
+import { Print } from './components/Print/Print.js';
+import { Filters } from './components/Filters/Filters.js';
+
+function Toolbar(props) {
+  const {
+    customSettings,
+    left,
+    length,
+    right,
+    scrollToIndex,
+    table,
+    tableId,
+    tableRef
+  } = props;
+  const tableMeta = table.options.meta;
+  if (!isToolbarVisible(props, customSettings)) {
+    return null;
+  }
+  const canFilter = table.options.enableColumnFilters;
+  const canPrint = tableMeta.printing.isEnabled;
+  const canSettings = canChangeSettings(table, customSettings);
+  const canSearch = tableMeta.search.isEnabled;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden",
+    "data-taco": "report-toolbar"
+  }, left, /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto flex-shrink-0 print:hidden"
+  }, canFilter ? /*#__PURE__*/React__default.createElement(Filters, {
+    length: length,
+    table: table
+  }) : null, right, canPrint ? /*#__PURE__*/React__default.createElement(Print, {
+    table: table,
+    tableId: tableId,
+    tableRef: tableRef
+  }) : null, canSettings ? /*#__PURE__*/React__default.createElement(Settings, {
+    customSettings: customSettings,
+    table: table
+  }) : null, canSearch ? /*#__PURE__*/React__default.createElement(Search, {
+    scrollToIndex: scrollToIndex,
+    table: table
+  }) : null));
+}
+function canChangeSettings(table, customSettings) {
+  const tableMeta = table.options.meta;
+  return table.options.enableHiding || tableMeta.columnOrdering.isEnabled || tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled || typeof customSettings === 'function';
+}
+function isToolbarVisible(props, customSettings) {
+  const {
+    left,
+    right,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const hasInternalToolbar = table.options.enableColumnFilters || tableMeta.printing.isEnabled || canChangeSettings(table, customSettings) || tableMeta.search.isEnabled;
+  return hasInternalToolbar || !!left || !!right;
+}
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../../../../../../../src/components/Report/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { Group } from '../../../Group/Group';\nimport { Search } from './components/Search/Search';\nimport { Settings } from './components/Settings/Settings';\nimport { Print } from './components/Print/Print';\nimport { Filters } from './components/Filters/Filters';\nimport { TableRef } from '../../../../primitives/Table/types';\nimport { ReportCustomSettingsRenderer } from '../../types';\n\nexport type ToolbarProps<TType = unknown> = {\n    customSettings?: ReportCustomSettingsRenderer;\n    left?: JSX.Element;\n    length: number;\n    right?: JSX.Element;\n    scrollToIndex: (index: number) => void;\n    table: ReactTable<TType>;\n    tableId: string;\n    tableRef: React.RefObject<TableRef>;\n};\n\nexport function Toolbar<TType = unknown>(props: ToolbarProps<TType>) {\n    const { customSettings, left, length, right, scrollToIndex, table, tableId, tableRef } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    if (!isToolbarVisible(props, customSettings)) {\n        return null;\n    }\n\n    const canFilter = table.options.enableColumnFilters;\n    const canPrint = tableMeta.printing.isEnabled;\n    const canSettings = canChangeSettings(table, customSettings);\n    const canSearch = tableMeta.search.isEnabled;\n\n    return (\n        <div className=\"mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden\" data-taco=\"report-toolbar\">\n            {left}\n            <Group className=\"ml-auto flex-shrink-0 print:hidden\">\n                {canFilter ? <Filters length={length} table={table} /> : null}\n                {right}\n                {canPrint ? <Print table={table} tableId={tableId} tableRef={tableRef} /> : null}\n                {canSettings ? <Settings customSettings={customSettings} table={table} /> : null}\n                {canSearch ? <Search scrollToIndex={scrollToIndex} table={table} /> : null}\n            </Group>\n        </div>\n    );\n}\n\nfunction canChangeSettings<TType = unknown>(table: ReactTable<TType>, customSettings?: ReportCustomSettingsRenderer) {\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    return (\n        table.options.enableHiding ||\n        tableMeta.columnOrdering.isEnabled ||\n        tableMeta.fontSize.isEnabled ||\n        tableMeta.rowHeight.isEnabled ||\n        typeof customSettings === 'function'\n    );\n}\n\nfunction isToolbarVisible<TType = unknown>(props: ToolbarProps<TType>, customSettings?: ReportCustomSettingsRenderer) {\n    const { left, right, table } = props;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n\n    const hasInternalToolbar =\n        table.options.enableColumnFilters ||\n        tableMeta.printing.isEnabled ||\n        canChangeSettings(table, customSettings) ||\n        tableMeta.search.isEnabled;\n\n    return hasInternalToolbar || !!left || !!right;\n}\n"],"names":["Toolbar","props","customSettings","left","length","right","scrollToIndex","table","tableId","tableRef","tableMeta","options","meta","isToolbarVisible","canFilter","enableColumnFilters","canPrint","printing","isEnabled","canSettings","canChangeSettings","canSearch","search","React","className","Group","Filters","Print","Settings","Search","enableHiding","columnOrdering","fontSize","rowHeight","hasInternalToolbar"],"mappings":";;;;;;;SAqBgBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,cAAc;IAAEC,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAEC,aAAa;IAAEC,KAAK;IAAEC,OAAO;IAAEC;GAAU,GAAGR,KAAK;EAC9F,MAAMS,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAE7D,IAAI,CAACC,gBAAgB,CAACZ,KAAK,EAAEC,cAAc,CAAC,EAAE;IAC1C,OAAO,IAAI;;EAGf,MAAMY,SAAS,GAAGP,KAAK,CAACI,OAAO,CAACI,mBAAmB;EACnD,MAAMC,QAAQ,GAAGN,SAAS,CAACO,QAAQ,CAACC,SAAS;EAC7C,MAAMC,WAAW,GAAGC,iBAAiB,CAACb,KAAK,EAAEL,cAAc,CAAC;EAC5D,MAAMmB,SAAS,GAAGX,SAAS,CAACY,MAAM,CAACJ,SAAS;EAE5C,oBACIK;IAAKC,SAAS,EAAC,gEAAgE;iBAAW;KACrFrB,IAAI,eACLoB,6BAACE,KAAK;IAACD,SAAS,EAAC;KACZV,SAAS,gBAAGS,6BAACG,OAAO;IAACtB,MAAM,EAAEA,MAAM;IAAEG,KAAK,EAAEA;IAAS,GAAG,IAAI,EAC5DF,KAAK,EACLW,QAAQ,gBAAGO,6BAACI,KAAK;IAACpB,KAAK,EAAEA,KAAK;IAAEC,OAAO,EAAEA,OAAO;IAAEC,QAAQ,EAAEA;IAAY,GAAG,IAAI,EAC/EU,WAAW,gBAAGI,6BAACK,QAAQ;IAAC1B,cAAc,EAAEA,cAAc;IAAEK,KAAK,EAAEA;IAAS,GAAG,IAAI,EAC/Ec,SAAS,gBAAGE,6BAACM,MAAM;IAACvB,aAAa,EAAEA,aAAa;IAAEC,KAAK,EAAEA;IAAS,GAAG,IAAI,CACtE,CACN;AAEd;AAEA,SAASa,iBAAiBA,CAAkBb,KAAwB,EAAEL,cAA6C;EAC/G,MAAMQ,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAE7D,OACIL,KAAK,CAACI,OAAO,CAACmB,YAAY,IAC1BpB,SAAS,CAACqB,cAAc,CAACb,SAAS,IAClCR,SAAS,CAACsB,QAAQ,CAACd,SAAS,IAC5BR,SAAS,CAACuB,SAAS,CAACf,SAAS,IAC7B,OAAOhB,cAAc,KAAK,UAAU;AAE5C;AAEA,SAASW,gBAAgBA,CAAkBZ,KAA0B,EAAEC,cAA6C;EAChH,MAAM;IAAEC,IAAI;IAAEE,KAAK;IAAEE;GAAO,GAAGN,KAAK;EACpC,MAAMS,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA6B;EAE7D,MAAMsB,kBAAkB,GACpB3B,KAAK,CAACI,OAAO,CAACI,mBAAmB,IACjCL,SAAS,CAACO,QAAQ,CAACC,SAAS,IAC5BE,iBAAiB,CAACb,KAAK,EAAEL,cAAc,CAAC,IACxCQ,SAAS,CAACY,MAAM,CAACJ,SAAS;EAE9B,OAAOgB,kBAAkB,IAAI,CAAC,CAAC/B,IAAI,IAAI,CAAC,CAACE,KAAK;AAClD;;;;"}

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

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import { Icon } from '../../../../../Icon/Icon.js';
+import { IconButton } from '../../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../../Provider/Localization.js';
+import { Button } from '../../../../../Button/Button.js';
+import { Shortcut } from '../../../../../Shortcut/Shortcut.js';
+import { useIsLargeScreen } from '../../../../../../hooks/useIsLargeScreen.js';
+import { ManageFiltersPopover } from './ManageFiltersPopover.js';
+
+function Filters(props) {
+  const {
+    length,
+    table
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const isLargeScreen = useIsLargeScreen();
+  const appliedFilters = table.getState().columnFilters;
+  const shortcut = {
+    key: 'f',
+    meta: true,
+    shift: true
+  };
+  const buttonProps = {
+    'aria-label': texts.table3.filters.tooltip,
+    className: appliedFilters.length ? '!wcag-blue-100' : undefined,
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(ManageFiltersPopover, Object.assign({}, popoverProps, {
+      length: length,
+      table: table
+    })),
+    shortcut,
+    tooltip: ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, texts.table3.filters.tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
+      className: "ml-2",
+      keys: shortcut
+    })))
+  };
+  if (!isLargeScreen && !appliedFilters.length) {
+    return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, buttonProps, {
+      icon: "filter"
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Button, Object.assign({}, buttonProps), /*#__PURE__*/React__default.createElement(Icon, {
+    className: !isLargeScreen ? '-mr-1.5' : undefined,
+    name: appliedFilters.length ? 'filter-solid' : 'filter'
+  }), isLargeScreen ? texts.table3.filters.button : '', appliedFilters.length ? `(${appliedFilters.length})` : '');
+}
+
+export { Filters };
+//# sourceMappingURL=Filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Filters/Filters.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { useIsLargeScreen } from '../../../../../../hooks/useIsLargeScreen';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { IconButton } from '../../../../../IconButton/IconButton';\nimport { Button } from '../../../../../Button/Button';\nimport { Icon } from '../../../../../Icon/Icon';\nimport { Shortcut } from '../../../../../Shortcut/Shortcut';\nimport { ManageFiltersPopover } from './ManageFiltersPopover';\n\nexport type FiltersProps<TType = unknown> = {\n    length: number;\n    table: ReactTable<TType>;\n};\n\nexport function Filters<TType = unknown>(props: FiltersProps<TType>) {\n    const { length, table } = props;\n    const { texts } = useLocalization();\n    const isLargeScreen = useIsLargeScreen();\n    const appliedFilters = table.getState().columnFilters;\n\n    const shortcut = { key: 'f', meta: true, shift: true };\n\n    const buttonProps = {\n        'aria-label': texts.table3.filters.tooltip,\n        className: appliedFilters.length ? '!wcag-blue-100' : undefined,\n        popover: popoverProps => <ManageFiltersPopover {...popoverProps} length={length} table={table} />,\n        shortcut,\n        tooltip: (\n            <>\n                {texts.table3.filters.tooltip}\n                <Shortcut className=\"ml-2\" keys={shortcut} />\n            </>\n        ),\n    };\n\n    if (!isLargeScreen && !appliedFilters.length) {\n        return <IconButton {...buttonProps} icon=\"filter\" />;\n    }\n\n    return (\n        <Button {...buttonProps}>\n            <Icon className={!isLargeScreen ? '-mr-1.5' : undefined} name={appliedFilters.length ? 'filter-solid' : 'filter'} />\n            {isLargeScreen ? texts.table3.filters.button : ''}\n            {appliedFilters.length ? `(${appliedFilters.length})` : ''}\n        </Button>\n    );\n}\n"],"names":["Filters","props","length","table","texts","useLocalization","isLargeScreen","useIsLargeScreen","appliedFilters","getState","columnFilters","shortcut","key","meta","shift","buttonProps","table3","filters","tooltip","className","undefined","popover","popoverProps","React","ManageFiltersPopover","Shortcut","keys","IconButton","icon","Button","Icon","name","button"],"mappings":";;;;;;;;;SAegBA,OAAOA,CAAkBC,KAA0B;EAC/D,MAAM;IAAEC,MAAM;IAAEC;GAAO,GAAGF,KAAK;EAC/B,MAAM;IAAEG;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,aAAa,GAAGC,gBAAgB,EAAE;EACxC,MAAMC,cAAc,GAAGL,KAAK,CAACM,QAAQ,EAAE,CAACC,aAAa;EAErD,MAAMC,QAAQ,GAAG;IAAEC,GAAG,EAAE,GAAG;IAAEC,IAAI,EAAE,IAAI;IAAEC,KAAK,EAAE;GAAM;EAEtD,MAAMC,WAAW,GAAG;IAChB,YAAY,EAAEX,KAAK,CAACY,MAAM,CAACC,OAAO,CAACC,OAAO;IAC1CC,SAAS,EAAEX,cAAc,CAACN,MAAM,GAAG,gBAAgB,GAAGkB,SAAS;IAC/DC,OAAO,EAAEC,YAAY,iBAAIC,6BAACC,oBAAoB,oBAAKF,YAAY;MAAEpB,MAAM,EAAEA,MAAM;MAAEC,KAAK,EAAEA;OAAS;IACjGQ,QAAQ;IACRO,OAAO,iBACHK,4DACKnB,KAAK,CAACY,MAAM,CAACC,OAAO,CAACC,OAAO,eAC7BK,6BAACE,QAAQ;MAACN,SAAS,EAAC,MAAM;MAACO,IAAI,EAAEf;MAAY,CAC9C;GAEV;EAED,IAAI,CAACL,aAAa,IAAI,CAACE,cAAc,CAACN,MAAM,EAAE;IAC1C,oBAAOqB,6BAACI,UAAU,oBAAKZ,WAAW;MAAEa,IAAI,EAAC;OAAW;;EAGxD,oBACIL,6BAACM,MAAM,oBAAKd,WAAW,gBACnBQ,6BAACO,IAAI;IAACX,SAAS,EAAE,CAACb,aAAa,GAAG,SAAS,GAAGc,SAAS;IAAEW,IAAI,EAAEvB,cAAc,CAACN,MAAM,GAAG,cAAc,GAAG;IAAY,EACnHI,aAAa,GAAGF,KAAK,CAACY,MAAM,CAACC,OAAO,CAACe,MAAM,GAAG,EAAE,EAChDxB,cAAc,CAACN,MAAM,OAAOM,cAAc,CAACN,SAAS,GAAG,EAAE,CACrD;AAEjB;;;;"}

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

@@ -0,0 +1,136 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../../Provider/Localization.js';
+import { Button } from '../../../../../Button/Button.js';
+import { Popover } from '../../../../../Popover/Popover.js';
+import { Group } from '../../../../../Group/Group.js';
+import { isInternalColumn } from '../../../../../../primitives/Table/useTable/util/columns.js';
+import { TableFilterComparator } from '../../../../../../primitives/Table/types.js';
+import { sortByHeader } from './util.js';
+import { Filter } from './components/Filter.js';
+import { Placeholder } from './components/Placeholder.js';
+
+function ManageFiltersPopover(props) {
+  const {
+    length,
+    table,
+    ...popoverProps
+  } = props;
+  const {
+    locale,
+    texts
+  } = useLocalization();
+  const allColumns = table.getAllLeafColumns().filter(column => !isInternalColumn(column.id)).sort(sortByHeader);
+  const appliedFilters = table.getState().columnFilters;
+  // state, since we "apply" filters - our filter values have a special shape, so we force to our type
+  const [filters, setFilters] = React__default.useState(table.getState().columnFilters);
+  const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
+  // filters might reset from the outside
+  React__default.useEffect(() => {
+    if (appliedFilters.length === 0) {
+      setFilters([]);
+      setPlaceholderCount(1);
+    }
+  }, [appliedFilters]);
+  // filters
+  const handleChangeFilter = (currentId, filter) => {
+    setFilters(currentFilters => {
+      const nextFilters = [...currentFilters];
+      nextFilters[nextFilters.findIndex(f => f.id === currentId)] = filter;
+      return nextFilters;
+    });
+  };
+  const handleRemoveFilter = columnId => {
+    if (filters.length === 1 && placeholderCount === 0) {
+      setPlaceholderCount(count => count + 1);
+    }
+    setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));
+  };
+  // placeholders
+  const handleCreateFilterFromPlaceholder = columnId => {
+    setFilters(currentFilters => [...currentFilters, {
+      id: columnId,
+      value: {
+        comparator: TableFilterComparator.Contains,
+        value: undefined
+      }
+    }]);
+    handleRemovePlaceholder();
+  };
+  const handleCreatePlaceholder = () => {
+    setPlaceholderCount(count => count + 1);
+  };
+  const handleRemovePlaceholder = () => {
+    setPlaceholderCount(count => count - 1);
+  };
+  //
+  const handleApply = () => {
+    table.setColumnFilters(() => {
+      const newFilters = filters.filter(f => {
+        var _allColumns$find, _allColumns$find$colu;
+        if (f.id === null) {
+          return false;
+        }
+        const controlRenderer = (_allColumns$find = allColumns.find(c => c.id === f.id)) === null || _allColumns$find === void 0 ? void 0 : (_allColumns$find$colu = _allColumns$find.columnDef.meta) === null || _allColumns$find$colu === void 0 ? void 0 : _allColumns$find$colu.control;
+        if (f.value.comparator === TableFilterComparator.IsEmpty || f.value.comparator === TableFilterComparator.IsNotEmpty || controlRenderer === 'switch') {
+          return true;
+        }
+        return !!f.value.value;
+      });
+      return newFilters;
+    });
+  };
+  const handleClear = () => {
+    table.resetColumnFilters();
+    setFilters([]);
+    setPlaceholderCount(1);
+  };
+  const handleClose = () => {
+    setFilters(appliedFilters);
+    setPlaceholderCount(appliedFilters.length ? 0 : 1);
+  };
+  return /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps, {
+    onChange: handleClose
+  }), /*#__PURE__*/React__default.createElement(Popover.Content, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-[40rem] flex-col gap-4"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex h-8"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex w-full items-center gap-2"
+  }, /*#__PURE__*/React__default.createElement("h4", {
+    className: "mb-0 inline-flex"
+  }, texts.table3.filters.button), /*#__PURE__*/React__default.createElement("p", {
+    className: "text-grey-700 mb-0 mr-auto mt-px inline-flex"
+  }, texts.table3.filters.total.replace('[CURRENT]', new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)).replace('[TOTAL]', new Intl.NumberFormat(locale).format(length))))), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col gap-2"
+  }, filters.map((filter, index) => ( /*#__PURE__*/React__default.createElement(Filter, {
+    key: `filter_${index}`,
+    allColumns: allColumns,
+    filter: filter,
+    filters: filters,
+    position: index,
+    onChange: handleChangeFilter,
+    onRemove: handleRemoveFilter
+  }))), [...Array(placeholderCount)].map((_, index) => ( /*#__PURE__*/React__default.createElement(Placeholder, {
+    key: `placeholder_${index}`,
+    allColumns: allColumns,
+    filters: filters,
+    position: filters.length + index,
+    onCreate: handleCreateFilterFromPlaceholder,
+    onRemove: placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "justify-start"
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "discrete",
+    onClick: handleCreatePlaceholder
+  }, "+ ", texts.table3.filters.buttons.addFilter))), /*#__PURE__*/React__default.createElement(Group, {
+    className: "ml-auto"
+  }, /*#__PURE__*/React__default.createElement(Popover.Close, null, /*#__PURE__*/React__default.createElement(Button, null, "Cancel")), /*#__PURE__*/React__default.createElement(Button, {
+    onClick: handleClear
+  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "primary",
+    onClick: handleApply
+  }, "Apply")))));
+}
+
+export { ManageFiltersPopover };
+//# sourceMappingURL=ManageFiltersPopover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ManageFiltersPopover.js","sources":["../../../../../../../../../../../src/components/Report/components/Toolbar/components/Filters/ManageFiltersPopover.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable } from '@tanstack/react-table';\nimport { Popover } from '../../../../../Popover/Popover';\nimport { useLocalization } from '../../../../../Provider/Localization';\nimport { Button } from '../../../../../Button/Button';\nimport { Group } from '../../../../../Group/Group';\nimport { sortByHeader } from './util';\nimport { isInternalColumn } from '../../../../../../primitives/Table/useTable/util/columns';\nimport { TableFilter, TableFilterComparator, TableFilterValue } from '../../../../../../primitives/Table/types';\nimport { Filter } from './components/Filter';\nimport { Placeholder } from './components/Placeholder';\n\nexport type ManageFiltersPopoverProps<TType = unknown> = {\n    length: number;\n    table: ReactTable<TType>;\n};\n\nexport function ManageFiltersPopover<TType = unknown>(props: ManageFiltersPopoverProps<TType>) {\n    const { length, table, ...popoverProps } = props;\n    const { locale, texts } = useLocalization();\n\n    const allColumns = table\n        .getAllLeafColumns()\n        .filter(column => !isInternalColumn(column.id))\n        .sort(sortByHeader);\n\n    const appliedFilters = table.getState().columnFilters as TableFilter[];\n\n    // state, since we \"apply\" filters - our filter values have a special shape, so we force to our type\n    const [filters, setFilters] = React.useState<TableFilter[]>(table.getState().columnFilters as TableFilter[]);\n    const [placeholderCount, setPlaceholderCount] = React.useState(1);\n\n    // filters might reset from the outside\n    React.useEffect(() => {\n        if (appliedFilters.length === 0) {\n            setFilters([]);\n            setPlaceholderCount(1);\n        }\n    }, [appliedFilters]);\n\n    // filters\n    const handleChangeFilter = (currentId: string | null, filter: { id: string; value: TableFilterValue }) => {\n        setFilters(currentFilters => {\n            const nextFilters = [...currentFilters];\n            nextFilters[nextFilters.findIndex(f => f.id === currentId)] = filter;\n            return nextFilters;\n        });\n    };\n\n    const handleRemoveFilter = (columnId: string | null) => {\n        if (filters.length === 1 && placeholderCount === 0) {\n            setPlaceholderCount(count => count + 1);\n        }\n\n        setFilters(currentFilters => currentFilters.filter(f => f.id !== columnId));\n    };\n\n    // placeholders\n    const handleCreateFilterFromPlaceholder = (columnId: string) => {\n        setFilters(currentFilters => [\n            ...currentFilters,\n            {\n                id: columnId,\n                value: {\n                    comparator: TableFilterComparator.Contains,\n                    value: undefined,\n                },\n            },\n        ]);\n        handleRemovePlaceholder();\n    };\n\n    const handleCreatePlaceholder = () => {\n        setPlaceholderCount(count => count + 1);\n    };\n\n    const handleRemovePlaceholder = () => {\n        setPlaceholderCount(count => count - 1);\n    };\n\n    //\n    const handleApply = () => {\n        table.setColumnFilters(() => {\n            const newFilters = filters.filter(f => {\n                if (f.id === null) {\n                    return false;\n                }\n\n                const controlRenderer = allColumns.find(c => c.id === f.id)?.columnDef.meta?.control;\n\n                if (\n                    f.value.comparator === TableFilterComparator.IsEmpty ||\n                    f.value.comparator === TableFilterComparator.IsNotEmpty ||\n                    controlRenderer === 'switch'\n                ) {\n                    return true;\n                }\n\n                return !!f.value.value;\n            });\n\n            return newFilters;\n        });\n    };\n\n    const handleClear = () => {\n        table.resetColumnFilters();\n        setFilters([]);\n        setPlaceholderCount(1);\n    };\n\n    const handleClose = () => {\n        setFilters(appliedFilters);\n        setPlaceholderCount(appliedFilters.length ? 0 : 1);\n    };\n\n    return (\n        <Popover {...popoverProps} onChange={handleClose}>\n            <Popover.Content>\n                <div className=\"flex w-[40rem] flex-col gap-4\">\n                    <div className=\"flex h-8\">\n                        <div className=\"flex w-full items-center gap-2\">\n                            <h4 className=\"mb-0 inline-flex\">{texts.table3.filters.button}</h4>\n                            <p className=\"text-grey-700 mb-0 mr-auto mt-px inline-flex\">\n                                {texts.table3.filters.total\n                                    .replace(\n                                        '[CURRENT]',\n                                        new Intl.NumberFormat(locale).format(table.getFilteredRowModel().rows.length)\n                                    )\n                                    .replace('[TOTAL]', new Intl.NumberFormat(locale).format(length))}\n                            </p>\n                        </div>\n                    </div>\n                    <div className=\"flex flex-col gap-2\">\n                        {filters.map((filter, index) => (\n                            <Filter\n                                key={`filter_${index}`}\n                                allColumns={allColumns}\n                                filter={filter}\n                                filters={filters}\n                                position={index}\n                                onChange={handleChangeFilter}\n                                onRemove={handleRemoveFilter}\n                            />\n                        ))}\n                        {[...Array(placeholderCount)].map((_, index) => (\n                            <Placeholder\n                                key={`placeholder_${index}`}\n                                allColumns={allColumns}\n                                filters={filters}\n                                position={filters.length + index}\n                                onCreate={handleCreateFilterFromPlaceholder as any}\n                                onRemove={placeholderCount > 1 || filters.length > 0 ? handleRemovePlaceholder : undefined}\n                            />\n                        ))}\n                        <div className=\"justify-start\">\n                            <Button appearance=\"discrete\" onClick={handleCreatePlaceholder}>\n                                + {texts.table3.filters.buttons.addFilter}\n                            </Button>\n                        </div>\n                    </div>\n                    <Group className=\"ml-auto\">\n                        <Popover.Close>\n                            <Button>Cancel</Button>\n                        </Popover.Close>\n                        <Button onClick={handleClear}>Clear</Button>\n                        <Button appearance=\"primary\" onClick={handleApply}>\n                            Apply\n                        </Button>\n                    </Group>\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n}\n"],"names":["ManageFiltersPopover","props","length","table","popoverProps","locale","texts","useLocalization","allColumns","getAllLeafColumns","filter","column","isInternalColumn","id","sort","sortByHeader","appliedFilters","getState","columnFilters","filters","setFilters","React","useState","placeholderCount","setPlaceholderCount","useEffect","handleChangeFilter","currentId","currentFilters","nextFilters","findIndex","f","handleRemoveFilter","columnId","count","handleCreateFilterFromPlaceholder","value","comparator","TableFilterComparator","Contains","undefined","handleRemovePlaceholder","handleCreatePlaceholder","handleApply","setColumnFilters","newFilters","controlRenderer","_allColumns$find","find","c","_allColumns$find$colu","columnDef","meta","control","IsEmpty","IsNotEmpty","handleClear","resetColumnFilters","handleClose","Popover","onChange","Content","className","table3","button","total","replace","Intl","NumberFormat","format","getFilteredRowModel","rows","map","index","Filter","key","position","onRemove","Array","_","Placeholder","onCreate","Button","appearance","onClick","buttons","addFilter","Group","Close"],"mappings":"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"}

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

@@ -0,0 +1,95 @@
+import React__default from 'react';
+import { IconButton } from '../../../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { TableFilterComparator } from '../../../../../../../primitives/Table/types.js';
+import { FilterColumn } from './FilterColumn.js';
+import { FilterComparator } from './FilterComparator.js';
+import { FilterValue } from './FilterValue.js';
+
+function Filter(props) {
+  const {
+    allColumns,
+    filter,
+    filters,
+    onChange: handleChange,
+    onRemove,
+    position
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const column = allColumns.find(c => c.id === filter.id);
+  const {
+    id,
+    value: {
+      comparator,
+      value
+    }
+  } = filter;
+  const handleChangeColumn = columnId => {
+    var _previousColumn$colum, _nextColumn$columnDef;
+    const previousColumn = allColumns.find(column => column.id === id);
+    const nextColumn = allColumns.find(column => column.id === columnId);
+    // UX requirement: if old column data type is the same as next column data type,
+    // then we applying the same filter value for the next column,
+    // but when data types are different, we're reseting comparator ans value for the next column
+    const value = (previousColumn === null || previousColumn === void 0 ? void 0 : (_previousColumn$colum = previousColumn.columnDef.meta) === null || _previousColumn$colum === void 0 ? void 0 : _previousColumn$colum.dataType) === (nextColumn === null || nextColumn === void 0 ? void 0 : (_nextColumn$columnDef = nextColumn.columnDef.meta) === null || _nextColumn$columnDef === void 0 ? void 0 : _nextColumn$columnDef.dataType) ? filter.value : {
+      comparator: TableFilterComparator.Contains,
+      value: undefined
+    };
+    handleChange(id, {
+      id: columnId,
+      value
+    });
+  };
+  const handleChangeComparator = comparator => {
+    let nextValue = filter.value.value;
+    if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {
+      nextValue = undefined;
+    }
+    handleChange(id, {
+      id,
+      value: {
+        comparator,
+        value: nextValue
+      }
+    });
+  };
+  const handleChangeValue = value => {
+    handleChange(id, {
+      id,
+      value: {
+        ...filter.value,
+        value
+      }
+    });
+  };
+  const handleRemove = () => onRemove(id);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-start gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
+    allColumns: allColumns,
+    filters: filters,
+    onChange: handleChangeColumn,
+    value: id
+  }), /*#__PURE__*/React__default.createElement(FilterComparator, {
+    column: column,
+    onChange: handleChangeComparator,
+    value: comparator
+  }), /*#__PURE__*/React__default.createElement(FilterValue, {
+    column: column,
+    comparator: comparator,
+    onChange: handleChangeValue,
+    value: value
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    className: "ml-auto",
+    icon: "close",
+    onClick: handleRemove
+  }));
+}
+
+export { Filter };
+//# sourceMappingURL=Filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Report/components/Toolbar/components/Filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as ReactTableColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\nimport { TableFilter, TableFilterComparator } from '../../../../../../../primitives/Table/types';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: ReactTableColumn<TType, unknown>[];\n    filter: TableFilter;\n    filters: TableFilter[];\n    position: number;\n    onChange: (id: string, value: TableFilter) => void;\n    onRemove: (columnId: string) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id);\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string) => {\n        const previousColumn = allColumns.find(column => column.id === id);\n        const nextColumn = allColumns.find(column => column.id === columnId);\n        // UX requirement: if old column data type is the same as next column data type,\n        // then we applying the same filter value for the next column,\n        // but when data types are different, we're reseting comparator ans value for the next column\n        const value =\n            previousColumn?.columnDef.meta?.dataType === nextColumn?.columnDef.meta?.dataType\n                ? filter.value\n                : {\n                      comparator: TableFilterComparator.Contains,\n                      value: undefined,\n                  };\n\n        handleChange(id, { id: columnId, value });\n    };\n\n    const handleChangeComparator = (comparator: TableFilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === TableFilterComparator.IsEmpty || comparator === TableFilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(id, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(id, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove(id);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn allColumns={allColumns} filters={filters} onChange={handleChangeColumn as any} value={id} />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} />\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","value","comparator","handleChangeColumn","columnId","previousColumn","nextColumn","_previousColumn$colum","columnDef","meta","dataType","_nextColumn$columnDef","TableFilterComparator","Contains","undefined","handleChangeComparator","nextValue","IsEmpty","IsNotEmpty","handleChangeValue","handleRemove","React","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":"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"}

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

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { Icon } from '../../../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { Field } from '../../../../../../Field/Field.js';
+import { Select2 } from '../../../../../../Select2/Select2.js';
+
+function FilterColumn(props) {
+  const {
+    allColumns,
+    filters,
+    onChange: handleChange,
+    value = null,
+    ...attributes
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const selectedColumn = allColumns.find(column => column.id === value);
+  const warning = selectedColumn && !selectedColumn.getIsVisible();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React__default.createElement(Field, {
+    message: warning ? texts.table3.filters.hiddenColumn : undefined,
+    warning: warning,
+    className: "min-h-[theme(spacing.8)]"
+  }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
+    className: "!w-32 flex-shrink-0",
+    emptyValue: null,
+    onChange: handleChange,
+    value: value
+  }), allColumns.map(column => {
+    var _column$columnDef$met, _column$parent, _column$parent$column;
+    return /*#__PURE__*/React__default.createElement(Select2.Option, {
+      key: column.id,
+      value: column.id,
+      postfix: !column.getIsVisible() || column.getIsGrouped() ? ( /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: column.getIsGrouped() ? texts.table3.filters.hiddenGroupedColumn : texts.table3.filters.hiddenColumn
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "eye-off",
+        className: "text-grey-500 !h-5 !w-5"
+      }))) : undefined,
+      disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
+    }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
+  }))));
+}
+
+export { FilterColumn };
+//# sourceMappingURL=FilterColumn.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Report/components/Toolbar/components/Filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as ReactTableColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Icon } from '../../../../../../Icon/Icon';\nimport { Tooltip } from '../../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Field } from '../../../../../../Field/Field';\nimport { TableFilter } from '../../../../../../../primitives/Table/types';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: ReactTableColumn<TType, unknown>[];\n    filters: TableFilter[];\n};\n\nexport function FilterColumn<TType = unknown>(props: FilterColumnProps<TType>) {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n    const { texts } = useLocalization();\n    const selectedColumn = allColumns.find(column => column.id === value);\n    const warning = selectedColumn && !selectedColumn.getIsVisible();\n\n    return (\n        <div className=\"flex flex-col\">\n            <Field\n                message={warning ? texts.table3.filters.hiddenColumn : undefined}\n                warning={warning}\n                className=\"min-h-[theme(spacing.8)]\">\n                <Select2 {...attributes} className=\"!w-32 flex-shrink-0\" emptyValue={null} onChange={handleChange} value={value}>\n                    {allColumns.map(column => (\n                        <Select2.Option\n                            key={column.id}\n                            value={column.id}\n                            postfix={\n                                !column.getIsVisible() || column.getIsGrouped() ? (\n                                    <Tooltip\n                                        title={\n                                            column.getIsGrouped()\n                                                ? texts.table3.filters.hiddenGroupedColumn\n                                                : texts.table3.filters.hiddenColumn\n                                        }>\n                                        <Icon name=\"eye-off\" className=\"text-grey-500 !h-5 !w-5\" />\n                                    </Tooltip>\n                                ) : undefined\n                            }\n                            disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                            {(column.columnDef.meta?.header as string) +\n                                (column.parent ? ` (${column.parent?.columnDef.meta?.header})` : '')}\n                        </Select2.Option>\n                    ))}\n                </Select2>\n            </Field>\n        </div>\n    );\n}\n"],"names":["FilterColumn","props","allColumns","filters","onChange","handleChange","value","attributes","texts","useLocalization","selectedColumn","find","column","id","warning","getIsVisible","React","className","Field","message","table3","hiddenColumn","undefined","Select2","emptyValue","map","_column$columnDef$met","_column$parent","_column$parent$column","Option","key","postfix","getIsGrouped","Tooltip","title","hiddenGroupedColumn","Icon","name","disabled","getCanFilter","f","columnDef","meta","header","parent"],"mappings":";;;;;;;SAcgBA,YAAYA,CAAkBC,KAA+B;EACzE,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC1F,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,cAAc,GAAGR,UAAU,CAACS,IAAI,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,KAAKP,KAAK,CAAC;EACrE,MAAMQ,OAAO,GAAGJ,cAAc,IAAI,CAACA,cAAc,CAACK,YAAY,EAAE;EAEhE,oBACIC;IAAKC,SAAS,EAAC;kBACXD,6BAACE,KAAK;IACFC,OAAO,EAAEL,OAAO,GAAGN,KAAK,CAACY,MAAM,CAACjB,OAAO,CAACkB,YAAY,GAAGC,SAAS;IAChER,OAAO,EAAEA,OAAO;IAChBG,SAAS,EAAC;kBACVD,6BAACO,OAAO,oBAAKhB,UAAU;IAAEU,SAAS,EAAC,qBAAqB;IAACO,UAAU,EAAE,IAAI;IAAEpB,QAAQ,EAAEC,YAAY;IAAEC,KAAK,EAAEA;MACrGJ,UAAU,CAACuB,GAAG,CAACb,MAAM;IAAA,IAAAc,qBAAA,EAAAC,cAAA,EAAAC,qBAAA;IAAA,oBAClBZ,6BAACO,OAAO,CAACM,MAAM;MACXC,GAAG,EAAElB,MAAM,CAACC,EAAE;MACdP,KAAK,EAAEM,MAAM,CAACC,EAAE;MAChBkB,OAAO,EACH,CAACnB,MAAM,CAACG,YAAY,EAAE,IAAIH,MAAM,CAACoB,YAAY,EAAE,kBAC3ChB,6BAACiB,OAAO;QACJC,KAAK,EACDtB,MAAM,CAACoB,YAAY,EAAE,GACfxB,KAAK,CAACY,MAAM,CAACjB,OAAO,CAACgC,mBAAmB,GACxC3B,KAAK,CAACY,MAAM,CAACjB,OAAO,CAACkB;sBAE/BL,6BAACoB,IAAI;QAACC,IAAI,EAAC,SAAS;QAACpB,SAAS,EAAC;QAA4B,CACrD,IACVK,SAAS;MAEjBgB,QAAQ,EAAE1B,MAAM,CAACC,EAAE,KAAKP,KAAK,KAAK,CAACM,MAAM,CAAC2B,YAAY,EAAE,IAAI,CAAC,CAACpC,OAAO,CAACQ,IAAI,CAAC6B,CAAC,IAAIA,CAAC,CAAC3B,EAAE,KAAKD,MAAM,CAACC,EAAE,CAAC;OACjG,EAAAa,qBAAA,GAAAd,MAAM,CAAC6B,SAAS,CAACC,IAAI,cAAAhB,qBAAA,uBAArBA,qBAAA,CAAuBiB,MAAiB,KACrC/B,MAAM,CAACgC,MAAM,0BAAQhC,MAAM,CAACgC,MAAM,cAAAjB,cAAA,wBAAAC,qBAAA,GAAbD,cAAA,CAAec,SAAS,CAACC,IAAI,cAAAd,qBAAA,uBAA7BA,qBAAA,CAA+Be,SAAS,GAAG,EAAE,CAAC,CAC3D;GACpB,CAAC,CACI,CACN,CACN;AAEd;;;;"}