@hisptz/dhis2-analytics 2.0.38 → 2.0.39

package/dist/components/Scorecard/Scorecard.js

@@ -4,9 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var TableStateProvider = require('./components/TableStateProvider');
 var ScorecardTable = require('./components/ScorecardTable');
 var DataProvider = require('./components/DataProvider');
+var reactDndHtml5Backend = require('react-dnd-html5-backend');
+var reactDnd = require('react-dnd');
 
 function Scorecard({ tableProps }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(DataProvider.ScorecardDataProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TableStateProvider.TableStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ScorecardTable.ScorecardTable, { ...tableProps ?? {} }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataProvider.ScorecardDataProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TableStateProvider.TableStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: /* @__PURE__ */ jsxRuntime.jsx(ScorecardTable.ScorecardTable, { ...tableProps ?? {} }) }) }) });
 }
 
 exports.Scorecard = Scorecard;

package/dist/components/Scorecard/Scorecard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Scorecard/Scorecard.tsx"],"names":[],"mappings":"AAgBI;AAfJ,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA6B;AAM/B,SAAS,UAAU,EAAE,WAAW,GAAuC;AAC7E,SACC,oBAAC,yBACA,8BAAC,sBACA,8BAAC,kBAAgB,GAAI,cAAc,CAAC,GAAI,GACzC,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { TableStateProvider } from \"./components/TableStateProvider\";\nimport {\n\tScorecardTable,\n\ttype ScorecardTableProps,\n} from \"./components/ScorecardTable\";\nimport { ScorecardDataProvider } from \"./components/DataProvider\";\n\nexport interface ScorecardProps {\n\ttableProps?: ScorecardTableProps;\n}\n\nexport function Scorecard({ tableProps }: ScorecardProps): React.ReactElement {\n\treturn (\n\t\t<ScorecardDataProvider>\n\t\t\t<TableStateProvider>\n\t\t\t\t<ScorecardTable {...(tableProps ?? {})} />\n\t\t\t</TableStateProvider>\n\t\t</ScorecardDataProvider>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../src/components/Scorecard/Scorecard.tsx"],"names":[],"mappings":"AAmBK;AAlBL,SAAS,0BAA0B;AACnC;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAMrB,SAAS,UAAU,EAAE,WAAW,GAAuC;AAC7E,SACC,oBAAC,yBACA,8BAAC,sBACA,8BAAC,eAAY,SAAS,cACrB,8BAAC,kBAAgB,GAAI,cAAc,CAAC,GAAI,GACzC,GACD,GACD;AAEF","sourcesContent":["import React from \"react\";\nimport { TableStateProvider } from \"./components/TableStateProvider\";\nimport {\n\tScorecardTable,\n\ttype ScorecardTableProps,\n} from \"./components/ScorecardTable\";\nimport { ScorecardDataProvider } from \"./components/DataProvider\";\nimport { HTML5Backend } from \"react-dnd-html5-backend\";\nimport { DndProvider } from \"react-dnd\";\n\nexport interface ScorecardProps {\n\ttableProps?: ScorecardTableProps;\n}\n\nexport function Scorecard({ tableProps }: ScorecardProps): React.ReactElement {\n\treturn (\n\t\t<ScorecardDataProvider>\n\t\t\t<TableStateProvider>\n\t\t\t\t<DndProvider backend={HTML5Backend}>\n\t\t\t\t\t<ScorecardTable {...(tableProps ?? {})} />\n\t\t\t\t</DndProvider>\n\t\t\t</TableStateProvider>\n\t\t</ScorecardDataProvider>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/ScorecardTable.js

@@ -5,14 +5,34 @@ var ui = require('@dhis2/ui');
 var TableHeader = require('./components/TableHeader');
 var TableBody = require('./components/TableBody');
 var TableFoot = require('./components/TableFoot');
-var core = require('@dnd-kit/core');
-var StateProvider = require('../StateProvider');
 var react = require('react');
+var PaginatedToolbar = require('./components/PaginatedToolbar');
+var reactDnd = require('react-dnd');
+var StateProvider = require('../StateProvider');
 
 const ScorecardTable = react.memo(function TableComponent(props) {
   const tableRef = react.useRef(null);
+  const manager = reactDnd.useDragDropManager();
   const [isPending, startTransition] = react.useTransition();
   const updateState = StateProvider.useScorecardSetState();
+  react.useEffect(() => {
+    return manager.getMonitor().subscribeToStateChange(() => {
+      const dropResult = manager.getMonitor().getDropResult();
+      if (dropResult) {
+        startTransition(() => {
+          updateState((prevState) => {
+            return {
+              ...prevState,
+              options: {
+                ...prevState.options,
+                showDataInRows: !prevState.options.showDataInRows
+              }
+            };
+          });
+        });
+      }
+    });
+  }, [manager]);
   if (isPending) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -28,41 +48,22 @@ const ScorecardTable = react.memo(function TableComponent(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    core.DndContext,
-    {
-      onDragEnd: (event) => {
-        startTransition(() => {
-          if (updateState) {
-            if (!event.over || event.over.id === event.active.id) {
-              updateState((prevState) => {
-                return {
-                  ...prevState,
-                  options: {
-                    ...prevState.options,
-                    showDataInRows: !prevState.options.showDataInRows
-                  }
-                };
-              });
-            }
-          }
-        });
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.DataTable,
-        {
-          layout: "auto",
-          ...props,
-          ref: tableRef,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TableHeader.TableHeader, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(TableBody.TableBody, { tableRef }),
-            /* @__PURE__ */ jsxRuntime.jsx(TableFoot.TableFoot, {})
-          ]
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.DataTable,
+      {
+        layout: "auto",
+        ...props,
+        ref: tableRef,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TableHeader.TableHeader, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(TableBody.TableBody, { tableRef }),
+          /* @__PURE__ */ jsxRuntime.jsx(TableFoot.TableFoot, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(PaginatedToolbar.PaginatedToolbar, {})
+  ] });
 });
 
 exports.ScorecardTable = ScorecardTable;

package/dist/components/Scorecard/components/ScorecardTable/ScorecardTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.tsx"],"names":[],"mappings":"AA4BI,cA0BD,YA1BC;AA5BJ,SAAS,gBAAgB,iBAAsC;AAC/D,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,MAAM,QAAQ,qBAAqB;AAIrC,MAAM,iBAAiB,KAAK,SAAS,eAC3C,OACC;AACD,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,cAAc,qBAAqB;AAEzC,MAAI,WAAW;AACd,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QACjB;AAAA,QAEA,8BAAC,kBAAe,OAAK,MAAC;AAAA;AAAA,IACvB;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,CAAC,UAAU;AACrB,wBAAgB,MAAM;AACrB,cAAI,aAAa;AAChB,gBAAI,CAAC,MAAM,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI;AACrD,0BAAY,CAAC,cAAc;AAC1B,uBAAO;AAAA,kBACN,GAAG;AAAA,kBACH,SAAS;AAAA,oBACR,GAAG,UAAU;AAAA,oBACb,gBACC,CAAC,UAAU,QAAQ;AAAA,kBACrB;AAAA,gBACD;AAAA,cACD,CAAC;AAAA,YACF;AAAA,UACD;AAAA,QACD,CAAC;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,QAAO;AAAA,UACN,GAAG;AAAA,UAEJ,KAAK;AAAA,UAEL;AAAA,gCAAC,eAAY;AAAA,YACb,oBAAC,aAAU,UAAoB;AAAA,YAC/B,oBAAC,aAAU;AAAA;AAAA;AAAA,MACZ;AAAA;AAAA,EACD;AAEF,CAAC","sourcesContent":["import { CircularLoader, DataTable, type DataTableProps } from \"@dhis2/ui\";\nimport { TableHeader } from \"./components/TableHeader\";\nimport { TableBody } from \"./components/TableBody\";\nimport { TableFoot } from \"./components/TableFoot\";\nimport { DndContext } from \"@dnd-kit/core\";\nimport { useScorecardSetState } from \"../StateProvider\";\nimport { memo, useRef, useTransition } from \"react\";\n\nexport interface ScorecardTableProps extends Omit<DataTableProps, \"children\"> {}\n\nexport const ScorecardTable = memo(function TableComponent(\n\tprops: ScorecardTableProps,\n) {\n\tconst tableRef = useRef<HTMLTableElement>(null);\n\tconst [isPending, startTransition] = useTransition();\n\tconst updateState = useScorecardSetState();\n\n\tif (isPending) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<DndContext\n\t\t\tonDragEnd={(event) => {\n\t\t\t\tstartTransition(() => {\n\t\t\t\t\tif (updateState) {\n\t\t\t\t\t\tif (!event.over || event.over.id === event.active.id) {\n\t\t\t\t\t\t\tupdateState((prevState) => {\n\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t\t\t...prevState.options,\n\t\t\t\t\t\t\t\t\t\tshowDataInRows:\n\t\t\t\t\t\t\t\t\t\t\t!prevState.options.showDataInRows,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t<DataTable\n\t\t\t\tlayout=\"auto\"\n\t\t\t\t{...props} /*\n      // @ts-ignore */\n\t\t\t\tref={tableRef}\n\t\t\t>\n\t\t\t\t<TableHeader />\n\t\t\t\t<TableBody tableRef={tableRef} />\n\t\t\t\t<TableFoot />\n\t\t\t</DataTable>\n\t\t</DndContext>\n\t);\n});\n"]}
+{"version":3,"sources":["../../../../../src/components/Scorecard/components/ScorecardTable/ScorecardTable.tsx"],"names":[],"mappings":"AAkDI,SAMF,UANE,KAOD,YAPC;AAlDJ,SAAS,gBAAgB,iBAAsC;AAC/D,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAC1B,SAAS,MAAM,WAAW,QAAQ,qBAAqB;AACvD,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AAI9B,MAAM,iBAAiB,KAAK,SAAS,eAC3C,OACC;AACD,QAAM,WAAW,OAAyB,IAAI;AAC9C,QAAM,UAAU,mBAAmB;AACnC,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,cAAc,qBAAqB;AAEzC,YAAU,MAAM;AACf,WAAO,QAAQ,WAAW,EAAE,uBAAuB,MAAM;AACxD,YAAM,aAAa,QAAQ,WAAW,EAAE,cAAc;AACtD,UAAI,YAAY;AACf,wBAAgB,MAAM;AACrB,sBAAY,CAAC,cAAc;AAC1B,mBAAO;AAAA,cACN,GAAG;AAAA,cACH,SAAS;AAAA,gBACR,GAAG,UAAU;AAAA,gBACb,gBACC,CAAC,UAAU,QAAQ;AAAA,cACrB;AAAA,YACD;AAAA,UACD,CAAC;AAAA,QACF,CAAC;AAAA,MACF;AAAA,IACD,CAAC;AAAA,EACF,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,WAAW;AACd,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAO;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QACjB;AAAA,QAEA,8BAAC,kBAAe,OAAK,MAAC;AAAA;AAAA,IACvB;AAAA,EAEF;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,QAAO;AAAA,QACN,GAAG;AAAA,QAEJ,KAAK;AAAA,QAEL;AAAA,8BAAC,eAAY;AAAA,UACb,oBAAC,aAAU,UAAoB;AAAA,UAC/B,oBAAC,aAAU;AAAA;AAAA;AAAA,IACZ;AAAA,IACA,oBAAC,oBAAiB;AAAA,KACnB;AAEF,CAAC","sourcesContent":["import { CircularLoader, DataTable, type DataTableProps } from \"@dhis2/ui\";\nimport { TableHeader } from \"./components/TableHeader\";\nimport { TableBody } from \"./components/TableBody\";\nimport { TableFoot } from \"./components/TableFoot\";\nimport { memo, useEffect, useRef, useTransition } from \"react\";\nimport { PaginatedToolbar } from \"./components/PaginatedToolbar\";\nimport { useDragDropManager } from \"react-dnd\";\nimport { useScorecardSetState } from \"../StateProvider\";\n\nexport interface ScorecardTableProps extends Omit<DataTableProps, \"children\"> {}\n\nexport const ScorecardTable = memo(function TableComponent(\n\tprops: ScorecardTableProps,\n) {\n\tconst tableRef = useRef<HTMLTableElement>(null);\n\tconst manager = useDragDropManager();\n\tconst [isPending, startTransition] = useTransition();\n\tconst updateState = useScorecardSetState();\n\n\tuseEffect(() => {\n\t\treturn manager.getMonitor().subscribeToStateChange(() => {\n\t\t\tconst dropResult = manager.getMonitor().getDropResult();\n\t\t\tif (dropResult) {\n\t\t\t\tstartTransition(() => {\n\t\t\t\t\tupdateState((prevState) => {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...prevState,\n\t\t\t\t\t\t\toptions: {\n\t\t\t\t\t\t\t\t...prevState.options,\n\t\t\t\t\t\t\t\tshowDataInRows:\n\t\t\t\t\t\t\t\t\t!prevState.options.showDataInRows,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t};\n\t\t\t\t\t});\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t}, [manager]);\n\n\tif (isPending) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: \"100%\",\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\tdisplay: \"flex\",\n\t\t\t\t\talignItems: \"center\",\n\t\t\t\t\tjustifyContent: \"center\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<CircularLoader small />\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<DataTable\n\t\t\t\tlayout=\"auto\"\n\t\t\t\t{...props} /*\n      // @ts-ignore */\n\t\t\t\tref={tableRef}\n\t\t\t>\n\t\t\t\t<TableHeader />\n\t\t\t\t<TableBody tableRef={tableRef} />\n\t\t\t\t<TableFoot />\n\t\t\t</DataTable>\n\t\t\t<PaginatedToolbar />\n\t\t</>\n\t);\n});\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/AverageCell.js

@@ -119,7 +119,7 @@ function DataSourceAverageCell(props) {
       return /* @__PURE__ */ jsxRuntime.jsx(LinkedAverageCell, { size, dataSources });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { style: { width: size } });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true, style: { width: size } });
 }
 function OrgUnitAverageCell(props) {
   const size = props.cell.column.getSize();

package/dist/components/Scorecard/components/ScorecardTable/components/AverageCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageCell.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardAverageCellData,\n\tScorecardTableAverageCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { head, isEmpty } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useMemo } from \"react\";\nimport {\n\tgetLegend,\n\tgetTextColorFromBackgroundColor,\n} from \"../../../utils/legends\";\nimport { LinkedCell } from \"./LinkedCell\";\nimport {\n\tuseDataHolderAverageCellValue,\n\tuseOrgUnitAverageCellValue,\n} from \"../../../hooks/value\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\nimport { CellLoader } from \"./CellLoader\";\n\nexport function SingleAverageCell({\n\tdataSource,\n\tsize,\n}: {\n\tdataSource: ScorecardAverageCellData;\n\tsize: number;\n}) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tconfig: config!,\n\t\t\tvalue: dataSource.data.average,\n\t\t});\n\t}, [dataSource]);\n\n\tif (!dataSource.data.average || isNaN(dataSource.data.average)) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\tstyle={{\n\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\tminWidth: 100,\n\t\t\t\twidth: size,\n\t\t\t\theight: 48,\n\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t? getTextColorFromBackgroundColor(legendDefinition?.color)\n\t\t\t\t\t: undefined,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<b>{dataSource.data.average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function LinkedAverageCell({\n\tdataSources,\n\tsize,\n}: {\n\tdataSources: Array<ScorecardAverageCellData>;\n\tsize: number;\n}) {\n\tconst [top, bottom] = dataSources ?? [];\n\tconst config = useScorecardConfig();\n\tconst topLegendDefinition = useMemo(() => {\n\t\tif (!top) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: top,\n\t\t\tconfig: config!,\n\t\t\tvalue: top.data.average,\n\t\t});\n\t}, [top]);\n\tconst bottomLegendDefinition = useMemo(() => {\n\t\tif (!bottom) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: bottom,\n\t\t\tconfig: config!,\n\t\t\tvalue: bottom.data.average,\n\t\t});\n\t}, [bottom]);\n\n\treturn (\n\t\t<LinkedCell\n\t\t\tsize={size}\n\t\t\ttop={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...top,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: top.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\tvalue: top.data.average,\n\t\t\t}}\n\t\t\tbottom={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...bottom,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: bottom.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\tvalue: bottom.data.average,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction DataSourceAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst size = props.cell.column.getSize();\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { cellData: dataSources, loading } =\n\t\tuseDataHolderAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader size={size} />;\n\t}\n\n\tif (!isEmpty(dataSources)) {\n\t\tif (dataSources?.length === 1) {\n\t\t\treturn (\n\t\t\t\t<SingleAverageCell\n\t\t\t\t\tsize={size}\n\t\t\t\t\tdataSource={head(dataSources)!}\n\t\t\t\t/>\n\t\t\t);\n\t\t} else {\n\t\t\treturn <LinkedAverageCell size={size} dataSources={dataSources!} />;\n\t\t}\n\t}\n\n\treturn <DataTableCell style={{ width: size }} />;\n}\n\nfunction OrgUnitAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst size = props.cell.column.getSize();\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { loading, average } = useOrgUnitAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader size={size} />;\n\t}\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tstyle={{ width: size }}\n\t\t\tbordered\n\t\t\talign=\"center\"\n\t\t\tkey={props.row.id}\n\t\t>\n\t\t\t<b>{average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function AverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst showDataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tif (showDataInRows) {\n\t\treturn <DataSourceAverageCell {...props} />;\n\t}\n\n\treturn <OrgUnitAverageCell {...props} />;\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/AverageCell.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type {\n\tScorecardAverageCellData,\n\tScorecardTableAverageCellConfig,\n\tScorecardTableData,\n} from \"../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { head, isEmpty } from \"lodash\";\nimport { useScorecardConfig } from \"../../ConfigProvider\";\nimport { useMemo } from \"react\";\nimport {\n\tgetLegend,\n\tgetTextColorFromBackgroundColor,\n} from \"../../../utils/legends\";\nimport { LinkedCell } from \"./LinkedCell\";\nimport {\n\tuseDataHolderAverageCellValue,\n\tuseOrgUnitAverageCellValue,\n} from \"../../../hooks/value\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\nimport { CellLoader } from \"./CellLoader\";\n\nexport function SingleAverageCell({\n\tdataSource,\n\tsize,\n}: {\n\tdataSource: ScorecardAverageCellData;\n\tsize: number;\n}) {\n\tconst config = useScorecardConfig();\n\tconst legendDefinition = useMemo(() => {\n\t\tif (!dataSource) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource,\n\t\t\tconfig: config!,\n\t\t\tvalue: dataSource.data.average,\n\t\t});\n\t}, [dataSource]);\n\n\tif (!dataSource.data.average || isNaN(dataSource.data.average)) {\n\t\treturn <DataTableCell bordered />;\n\t}\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\tstyle={{\n\t\t\t\tbackground: legendDefinition?.color,\n\t\t\t\ttextAlign: \"center\",\n\t\t\t\tminWidth: 100,\n\t\t\t\twidth: size,\n\t\t\t\theight: 48,\n\t\t\t\tcolor: legendDefinition\n\t\t\t\t\t? getTextColorFromBackgroundColor(legendDefinition?.color)\n\t\t\t\t\t: undefined,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t<b>{dataSource.data.average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function LinkedAverageCell({\n\tdataSources,\n\tsize,\n}: {\n\tdataSources: Array<ScorecardAverageCellData>;\n\tsize: number;\n}) {\n\tconst [top, bottom] = dataSources ?? [];\n\tconst config = useScorecardConfig();\n\tconst topLegendDefinition = useMemo(() => {\n\t\tif (!top) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: top,\n\t\t\tconfig: config!,\n\t\t\tvalue: top.data.average,\n\t\t});\n\t}, [top]);\n\tconst bottomLegendDefinition = useMemo(() => {\n\t\tif (!bottom) {\n\t\t\treturn;\n\t\t}\n\t\treturn getLegend({\n\t\t\tdataSource: bottom,\n\t\t\tconfig: config!,\n\t\t\tvalue: bottom.data.average,\n\t\t});\n\t}, [bottom]);\n\n\treturn (\n\t\t<LinkedCell\n\t\t\tsize={size}\n\t\t\ttop={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...top,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: top.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: topLegendDefinition,\n\t\t\t\tvalue: top.data.average,\n\t\t\t}}\n\t\t\tbottom={{\n\t\t\t\tdataSource: {\n\t\t\t\t\t...bottom,\n\t\t\t\t\tdata: {\n\t\t\t\t\t\tcurrent: bottom.data.average,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\tlegendDefinition: bottomLegendDefinition,\n\t\t\t\tvalue: bottom.data.average,\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction DataSourceAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst size = props.cell.column.getSize();\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { cellData: dataSources, loading } =\n\t\tuseDataHolderAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader size={size} />;\n\t}\n\n\tif (!isEmpty(dataSources)) {\n\t\tif (dataSources?.length === 1) {\n\t\t\treturn (\n\t\t\t\t<SingleAverageCell\n\t\t\t\t\tsize={size}\n\t\t\t\t\tdataSource={head(dataSources)!}\n\t\t\t\t/>\n\t\t\t);\n\t\t} else {\n\t\t\treturn <LinkedAverageCell size={size} dataSources={dataSources!} />;\n\t\t}\n\t}\n\n\treturn <DataTableCell bordered style={{ width: size }} />;\n}\n\nfunction OrgUnitAverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst size = props.cell.column.getSize();\n\tconst dataConfig = useMemo(() => props.getValue(), [props.getValue()]);\n\tconst { loading, average } = useOrgUnitAverageCellValue(dataConfig);\n\n\tif (loading) {\n\t\treturn <CellLoader size={size} />;\n\t}\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tstyle={{ width: size }}\n\t\t\tbordered\n\t\t\talign=\"center\"\n\t\t\tkey={props.row.id}\n\t\t>\n\t\t\t<b>{average?.toFixed(2).toString()}</b>\n\t\t</DataTableCell>\n\t);\n}\n\nexport function AverageCell(\n\tprops: CellContext<ScorecardTableData, ScorecardTableAverageCellConfig>,\n) {\n\tconst showDataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tif (showDataInRows) {\n\t\treturn <DataSourceAverageCell {...props} />;\n\t}\n\n\treturn <OrgUnitAverageCell {...props} />;\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/DraggableCell.js

@@ -2,44 +2,43 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
-var core = require('@dnd-kit/core');
-var utilities = require('@dnd-kit/utilities');
+var reactDnd = require('react-dnd');
 
 function DraggableCell({
   children,
   type,
   style,
+  id,
   ...props
 }) {
-  const { attributes, listeners, setNodeRef, transform, isDragging } = core.useDraggable({
-    id: type
-  });
-  const transformStyle = transform ? {
-    transform: utilities.CSS.Translate.toString(transform)
-  } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      id: type,
-      ...props,
-      ...attributes,
-      ...listeners,
-      className: "column center",
-      style: {
-        ...style ?? {},
-        ...transformStyle,
-        background: isDragging ? ui.colors?.grey400 : void 0,
-        cursor: "move",
-        opacity: isDragging ? 0.5 : 1,
-        height: "100%",
-        width: "100%",
-        padding: "0 12px",
-        zIndex: isDragging ? 3 : void 0
+  const [collected, drag, dragPreview] = reactDnd.useDrag(() => {
+    return {
+      type,
+      item: {
+        id
       },
-      ref: setNodeRef,
-      children
-    }
-  );
+      collect: (monitor) => {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    };
+  });
+  if (collected.isDragging) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: dragPreview,
+        style: {
+          backgroundColor: ui.colors.grey400,
+          opacity: 0.5,
+          cursor: "move"
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { cursor: "move" }, id: type, ref: drag, children });
 }
 
 exports.DraggableCell = DraggableCell;

package/dist/components/Scorecard/components/ScorecardTable/components/DraggableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DraggableCell.tsx"],"names":[],"mappings":"AA4BE;AA5BF,SAAS,cAAc;AAGvB,SAAS,oBAAoB;AAC7B,SAAS,WAAW;AAEb,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAIG;AACF,QAAM,EAAE,YAAY,WAAW,YAAY,WAAW,WAAW,IAChE,aAAa;AAAA,IACZ,IAAI;AAAA,EACL,CAAC;AAEF,QAAM,iBAAiB,YACpB;AAAA,IACA,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,EAC5C,IACC;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAI;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,WAAU;AAAA,MACV,OAAO;AAAA,QACN,GAAI,SAAS,CAAC;AAAA,QACd,GAAG;AAAA,QACH,YAAY,aAAa,QAAQ,UAAU;AAAA,QAC3C,QAAQ;AAAA,QACR,SAAS,aAAa,MAAM;AAAA,QAC5B,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ,aAAa,IAAI;AAAA,MAC1B;AAAA,MACA,KAAK;AAAA,MAEJ;AAAA;AAAA,EACF;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport React from \"react\";\nimport type { ScorecardDraggableItems } from \"../../../schemas/config\";\nimport { useDraggable } from \"@dnd-kit/core\";\nimport { CSS } from \"@dnd-kit/utilities\";\n\nexport function DraggableCell({\n\tchildren,\n\ttype,\n\tstyle,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n\ttype: ScorecardDraggableItems;\n\tstyle?: React.CSSProperties;\n}) {\n\tconst { attributes, listeners, setNodeRef, transform, isDragging } =\n\t\tuseDraggable({\n\t\t\tid: type,\n\t\t});\n\n\tconst transformStyle = transform\n\t\t? {\n\t\t\t\ttransform: CSS.Translate.toString(transform),\n\t\t\t}\n\t\t: undefined;\n\n\treturn (\n\t\t<div\n\t\t\tid={type}\n\t\t\t{...props}\n\t\t\t{...attributes}\n\t\t\t{...listeners}\n\t\t\tclassName=\"column center\"\n\t\t\tstyle={{\n\t\t\t\t...(style ?? {}),\n\t\t\t\t...transformStyle,\n\t\t\t\tbackground: isDragging ? colors?.grey400 : undefined,\n\t\t\t\tcursor: \"move\",\n\t\t\t\topacity: isDragging ? 0.5 : 1,\n\t\t\t\theight: \"100%\",\n\t\t\t\twidth: \"100%\",\n\t\t\t\tpadding: \"0 12px\",\n\t\t\t\tzIndex: isDragging ? 3 : undefined,\n\t\t\t}}\n\t\t\tref={setNodeRef}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DraggableCell.tsx"],"names":[],"mappings":"AAiCG;AAjCH,SAAS,cAAc;AAGvB,SAAS,eAAe;AAEjB,SAAS,cAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAKG;AACF,QAAM,CAAC,WAAW,MAAM,WAAW,IAAI,QAAQ,MAAM;AACpD,WAAO;AAAA,MACN;AAAA,MACA,MAAM;AAAA,QACL;AAAA,MACD;AAAA,MACA,SAAS,CAAC,YAAY;AACrB,eAAO;AAAA,UACN,YAAY,QAAQ,WAAW;AAAA,QAChC;AAAA,MACD;AAAA,IACD;AAAA,EACD,CAAC;AAED,MAAI,UAAU,YAAY;AACzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAK;AAAA,QACL,OAAO;AAAA,UACN,iBAAiB,OAAO;AAAA,UACxB,SAAS;AAAA,UACT,QAAQ;AAAA,QACT;AAAA,QAEC;AAAA;AAAA,IACF;AAAA,EAEF;AAEA,SACC,oBAAC,SAAI,OAAO,EAAE,QAAQ,OAAO,GAAG,IAAI,MAAM,KAAK,MAC7C,UACF;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport React from \"react\";\nimport type { ScorecardDraggableItems } from \"../../../schemas/config\";\nimport { useDrag } from \"react-dnd\";\n\nexport function DraggableCell({\n\tchildren,\n\ttype,\n\tstyle,\n\tid,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n\ttype: ScorecardDraggableItems;\n\tid: string;\n\tstyle?: React.CSSProperties;\n}) {\n\tconst [collected, drag, dragPreview] = useDrag(() => {\n\t\treturn {\n\t\t\ttype,\n\t\t\titem: {\n\t\t\t\tid,\n\t\t\t},\n\t\t\tcollect: (monitor) => {\n\t\t\t\treturn {\n\t\t\t\t\tisDragging: monitor.isDragging(),\n\t\t\t\t};\n\t\t\t},\n\t\t};\n\t});\n\n\tif (collected.isDragging) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={dragPreview}\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor: colors.grey400,\n\t\t\t\t\topacity: 0.5,\n\t\t\t\t\tcursor: \"move\",\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div style={{ cursor: \"move\" }} id={type} ref={drag}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/DroppableCell.js

@@ -2,32 +2,44 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
-var react = require('react');
-var core = require('@dnd-kit/core');
-var lodash = require('lodash');
+var reactDnd = require('react-dnd');
 
 function DroppableCell({
   accept,
   children
 }) {
-  const { setNodeRef, active } = core.useDroppable({
-    id: lodash.head(accept)
+  const [collectedProps, drop] = reactDnd.useDrop(() => {
+    return {
+      accept,
+      collect: (monitor) => {
+        if (monitor.canDrop()) {
+          return {
+            style: {
+              border: `2px dashed ${ui.colors.grey700}`,
+              background: `${ui.colors.grey100}`,
+              width: "100%"
+            }
+          };
+        } else {
+          return {
+            style: {
+              width: "100%",
+              border: `2px solid transparent`
+            }
+          };
+        }
+      },
+      drop: (results) => {
+        return results;
+      }
+    };
   });
-  const canDrop = react.useMemo(() => {
-    if (!active)
-      return false;
-    return accept.includes(active.id);
-  }, [accept, active]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: setNodeRef,
+      ref: drop,
       className: "column center align-items-center",
-      style: {
-        border: canDrop ? `2px dashed ${ui.colors.grey700}` : void 0,
-        background: canDrop ? `${ui.colors.grey100}` : void 0,
-        width: "100%"
-      },
+      ...collectedProps,
       children
     }
   );

package/dist/components/Scorecard/components/ScorecardTable/components/DroppableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DroppableCell.tsx"],"names":[],"mappings":"AAuBE;AAvBF,SAAS,cAAc;AACvB,SAAgB,eAAe;AAE/B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAEN,SAAR,cAA+B;AAAA,EACrC;AAAA,EACA;AACD,GAGG;AACF,QAAM,EAAE,YAAY,OAAO,IAAI,aAAa;AAAA,IAC3C,IAAI,KAAK,MAAM;AAAA,EAChB,CAAC;AAED,QAAM,UAAU,QAAQ,MAAM;AAC7B,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,OAAO,SAAS,OAAO,EAA6B;AAAA,EAC5D,GAAG,CAAC,QAAQ,MAAM,CAAC;AAEnB,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACN,QAAQ,UAAU,cAAc,OAAO,OAAO,KAAK;AAAA,QACnD,YAAY,UAAU,GAAG,OAAO,OAAO,KAAK;AAAA,QAC5C,OAAO;AAAA,MACR;AAAA,MAEC;AAAA;AAAA,EACF;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport React, { useMemo } from \"react\";\nimport type { ScorecardDraggableItems } from \"../../../schemas/config\";\nimport { useDroppable } from \"@dnd-kit/core\";\nimport { head } from \"lodash\";\n\nexport default function DroppableCell({\n\taccept,\n\tchildren,\n}: {\n\taccept: ScorecardDraggableItems[];\n\tchildren: React.ReactNode;\n}) {\n\tconst { setNodeRef, active } = useDroppable({\n\t\tid: head(accept) as string,\n\t});\n\n\tconst canDrop = useMemo(() => {\n\t\tif (!active) return false;\n\t\treturn accept.includes(active.id as ScorecardDraggableItems);\n\t}, [accept, active]);\n\n\treturn (\n\t\t<div\n\t\t\tref={setNodeRef}\n\t\t\tclassName=\"column center align-items-center\"\n\t\t\tstyle={{\n\t\t\t\tborder: canDrop ? `2px dashed ${colors.grey700}` : undefined,\n\t\t\t\tbackground: canDrop ? `${colors.grey100}` : undefined,\n\t\t\t\twidth: \"100%\",\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/DroppableCell.tsx"],"names":[],"mappings":"AAwCE;AAxCF,SAAS,cAAc;AAGvB,SAAS,eAAe;AAET,SAAR,cAA+B;AAAA,EACrC;AAAA,EACA;AACD,GAGG;AACF,QAAM,CAAC,gBAAgB,IAAI,IAAI,QAAQ,MAAM;AAC5C,WAAO;AAAA,MACN;AAAA,MACA,SAAS,CAAC,YAAY;AACrB,YAAI,QAAQ,QAAQ,GAAG;AACtB,iBAAO;AAAA,YACN,OAAO;AAAA,cACN,QAAQ,cAAc,OAAO,OAAO;AAAA,cACpC,YAAY,GAAG,OAAO,OAAO;AAAA,cAC7B,OAAO;AAAA,YACR;AAAA,UACD;AAAA,QACD,OAAO;AACN,iBAAO;AAAA,YACN,OAAO;AAAA,cACN,OAAO;AAAA,cACP,QAAQ;AAAA,YACT;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,MAAM,CAAC,YAA4B;AAClC,eAAO;AAAA,MACR;AAAA,IACD;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAK;AAAA,MACL,WAAU;AAAA,MACT,GAAG;AAAA,MAEH;AAAA;AAAA,EACF;AAEF","sourcesContent":["import { colors } from \"@dhis2/ui\";\nimport React from \"react\";\nimport type { ScorecardDraggableItems } from \"../../../schemas/config\";\nimport { useDrop } from \"react-dnd\";\n\nexport default function DroppableCell({\n\taccept,\n\tchildren,\n}: {\n\taccept: ScorecardDraggableItems[];\n\tchildren: React.ReactNode;\n}) {\n\tconst [collectedProps, drop] = useDrop(() => {\n\t\treturn {\n\t\t\taccept,\n\t\t\tcollect: (monitor) => {\n\t\t\t\tif (monitor.canDrop()) {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\tborder: `2px dashed ${colors.grey700}`,\n\t\t\t\t\t\t\tbackground: `${colors.grey100}`,\n\t\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t} else {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\t\t\tborder: `2px solid transparent`,\n\t\t\t\t\t\t},\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t},\n\t\t\tdrop: (results: { id: string }) => {\n\t\t\t\treturn results;\n\t\t\t},\n\t\t};\n\t});\n\n\treturn (\n\t\t<div\n\t\t\tref={drop}\n\t\t\tclassName=\"column center align-items-center\"\n\t\t\t{...collectedProps}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/EmptyFooterCell.js

@@ -4,7 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ui = require('@dhis2/ui');
 
 function EmptyFooterCell(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableCell, { bordered: true });
 }
 
 exports.EmptyFooterCell = EmptyFooterCell;

package/dist/components/Scorecard/components/ScorecardTable/components/EmptyFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/EmptyFooterCell.tsx"],"names":[],"mappings":"AAOQ;AAPR,SAAS,qBAAqB;AAIvB,SAAS,gBACf,OACC;AACD,SAAO,oBAAC,iBAAc;AACvB","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\n\nexport function EmptyFooterCell(\n\tprops: HeaderContext<ScorecardTableData, unknown>,\n) {\n\treturn <DataTableCell />;\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/EmptyFooterCell.tsx"],"names":[],"mappings":"AAOQ;AAPR,SAAS,qBAAqB;AAIvB,SAAS,gBACf,OACC;AACD,SAAO,oBAAC,iBAAc,UAAQ,MAAC;AAChC","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport type { HeaderContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../schemas/config\";\n\nexport function EmptyFooterCell(\n\tprops: HeaderContext<ScorecardTableData, unknown>,\n) {\n\treturn <DataTableCell bordered />;\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.js

@@ -17,6 +17,7 @@ function MetaFooterCell() {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.DataTableCell,
     {
+      bordered: true,
       width: "300px",
       style: {
         width: "fit-content",

package/dist/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAwBG;AAxBH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AACjB,SAAS,iCAAiC;AAEnC,SAAS,iBAAiB;AAChC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAM;AAAA,MACN,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAM;AAAA,MACN,SAAS,aAAa,MAAM;AAAA,MAC5B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\n\nexport function MetaFooterCell() {\n\tconst itemNumber = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\twidth=\"300px\"\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 300,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={itemNumber ? \"3\" : \"2\"}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/MetaFooterCell.tsx"],"names":[],"mappings":"AAyBG;AAzBH,SAAS,qBAAqB;AAC9B,OAAO,UAAU;AACjB,SAAS,iCAAiC;AAEnC,SAAS,iBAAiB;AAChC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAM;AAAA,MACN,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,MACX;AAAA,MACA,OAAM;AAAA,MACN,SAAS,aAAa,MAAM;AAAA,MAC5B,OAAK;AAAA,MAGL,MAAK;AAAA,MAEL,8BAAC,OAAE,OAAO,EAAE,SAAS,QAAQ,GAAI,eAAK,EAAE,SAAS,GAAE;AAAA;AAAA,EACpD;AAEF","sourcesContent":["import { DataTableCell } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { useScorecardStateSelector } from \"../../StateProvider\";\n\nexport function MetaFooterCell() {\n\tconst itemNumber = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth=\"300px\"\n\t\t\tstyle={{\n\t\t\t\twidth: \"fit-content\",\n\t\t\t\tminWidth: 300,\n\t\t\t}}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={itemNumber ? \"3\" : \"2\"}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"0\"\n\t\t>\n\t\t\t<b style={{ padding: \"8px 0\" }}>{i18n.t(\"Average\")}</b>\n\t\t</DataTableCell>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/PaginatedToolbar.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ui = require('@dhis2/ui');
+var TableStateProvider = require('../../TableStateProvider');
+var react = require('react');
+var usehooksTs = require('usehooks-ts');
+
+function PaginatedToolbar() {
+  const [isPending, startTransition] = react.useTransition();
+  const table = TableStateProvider.useTableState();
+  const rowCount = table.getRowCount();
+  const page = table.getState().pagination.pageIndex + 1;
+  const pageSize = table.getState().pagination.pageSize;
+  const pageCount = table.getPageCount();
+  const toggleTableLoading = TableStateProvider.useToggleTableLoadingState();
+  const onPageChange = (page2) => {
+    startTransition(() => {
+      table.setPageIndex(page2 - 1);
+    });
+  };
+  const onPageSizeChange = (pageSize2) => {
+    startTransition(() => {
+      table.setPageSize(pageSize2);
+    });
+  };
+  usehooksTs.useUpdateEffect(() => {
+    toggleTableLoading();
+  }, [isPending]);
+  if (rowCount <= 50) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableToolbar, { position: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Pagination,
+    {
+      total: rowCount,
+      pageCount,
+      pageSizes: [10, 20, 30, 40, 50, 100].map(
+        (size) => size.toString()
+      ),
+      page,
+      pageSize,
+      onPageChange,
+      onPageSizeChange
+    }
+  ) }) });
+}
+
+exports.PaginatedToolbar = PaginatedToolbar;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=PaginatedToolbar.js.map

package/dist/components/Scorecard/components/ScorecardTable/components/PaginatedToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/PaginatedToolbar.tsx"],"names":["page","pageSize"],"mappings":"AAuCI;AAvCJ,SAAS,kBAAkB,kBAAkB;AAC7C;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEzB,SAAS,mBAAmB;AAClC,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,QAAQ,cAAc;AAC5B,QAAM,WAAW,MAAM,YAAY;AACnC,QAAM,OAAO,MAAM,SAAS,EAAE,WAAW,YAAY;AACrD,QAAM,WAAW,MAAM,SAAS,EAAE,WAAW;AAC7C,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,qBAAqB,2BAA2B;AAEtD,QAAM,eAAe,CAACA,UAAiB;AACtC,oBAAgB,MAAM;AACrB,YAAM,aAAaA,QAAO,CAAC;AAAA,IAC5B,CAAC;AAAA,EACF;AACA,QAAM,mBAAmB,CAACC,cAAqB;AAC9C,oBAAgB,MAAM;AACrB,YAAM,YAAYA,SAAQ;AAAA,IAC3B,CAAC;AAAA,EACF;AAEA,kBAAgB,MAAM;AACrB,uBAAmB;AAAA,EACpB,GAAG,CAAC,SAAS,CAAC;AAEd,MAAI,YAAY,IAAI;AACnB,WAAO;AAAA,EACR;AAEA,SACC,oBAAC,oBAAiB,UAAS,UAC1B,8BAAC,SAAI,OAAO,EAAE,OAAO,OAAO,GAC3B;AAAA,IAAC;AAAA;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA,WAAW,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,EAAE;AAAA,QAAI,CAAC,SACzC,KAAK,SAAS;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACD,GACD,GACD;AAEF","sourcesContent":["import { DataTableToolbar, Pagination } from \"@dhis2/ui\";\nimport {\n\tuseTableState,\n\tuseToggleTableLoadingState,\n} from \"../../TableStateProvider\";\nimport { useTransition } from \"react\";\nimport { useUpdateEffect } from \"usehooks-ts\";\n\nexport function PaginatedToolbar() {\n\tconst [isPending, startTransition] = useTransition();\n\tconst table = useTableState();\n\tconst rowCount = table.getRowCount();\n\tconst page = table.getState().pagination.pageIndex + 1;\n\tconst pageSize = table.getState().pagination.pageSize;\n\tconst pageCount = table.getPageCount();\n\tconst toggleTableLoading = useToggleTableLoadingState();\n\n\tconst onPageChange = (page: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageIndex(page - 1);\n\t\t});\n\t};\n\tconst onPageSizeChange = (pageSize: number) => {\n\t\tstartTransition(() => {\n\t\t\ttable.setPageSize(pageSize);\n\t\t});\n\t};\n\n\tuseUpdateEffect(() => {\n\t\ttoggleTableLoading();\n\t}, [isPending]);\n\n\tif (rowCount <= 50) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<DataTableToolbar position=\"bottom\">\n\t\t\t<div style={{ width: \"100%\" }}>\n\t\t\t\t<Pagination\n\t\t\t\t\ttotal={rowCount}\n\t\t\t\t\tpageCount={pageCount}\n\t\t\t\t\tpageSizes={[10, 20, 30, 40, 50, 100].map((size) =>\n\t\t\t\t\t\tsize.toString(),\n\t\t\t\t\t)}\n\t\t\t\t\tpage={page}\n\t\t\t\t\tpageSize={pageSize}\n\t\t\t\t\tonPageChange={onPageChange}\n\t\t\t\t\tonPageSizeChange={onPageSizeChange}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</DataTableToolbar>\n\t);\n}\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/TableBody.js

@@ -12,13 +12,14 @@ const TableBody = react.memo(function TableBody2({
   tableRef
 }) {
   const table = TableStateProvider.useTableState();
+  const loading = TableStateProvider.useTableLoadingState();
   const rows = react.useMemo(
     () => table.getRowModel().rows,
     [table.getRowModel().rows]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx(DataProvider.ScorecardDataFetchProgressProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator.LoadingIndicator, { tableRef }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableBody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(DataRow.TableRow, { row }, row.id)) })
+    /* @__PURE__ */ jsxRuntime.jsx(ui.DataTableBody, { loading, children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsx(DataRow.TableRow, { row }, row.id)) })
   ] });
 });
 

package/dist/components/Scorecard/components/ScorecardTable/components/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableBody.tsx"],"names":["TableBody"],"mappings":"AAmBE,mBAGG,KAHH;AAnBF,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gBAAgB;AACzB,SAAS,MAAsB,eAAe;AAC9C,SAAS,wBAAwB;AACjC,SAAS,0CAA0C;AAE5C,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAChD;AACD,GAEG;AACF,QAAM,QAAQ,cAAc;AAC5B,QAAM,OAAO;AAAA,IACZ,MAAM,MAAM,YAAY,EAAE;AAAA,IAC1B,CAAC,MAAM,YAAY,EAAE,IAAI;AAAA,EAC1B;AAEA,SACC,iCACC;AAAA,wBAAC,WACA,8BAAC,sCACA,8BAAC,oBAAiB,UAAoB,GACvC,GACD;AAAA,IACA,oBAAC,iBACC,eAAK,IAAI,CAAC,QACV,oBAAC,YAAsB,OAAR,IAAI,EAAc,CACjC,GACF;AAAA,KACD;AAEF,CAAC","sourcesContent":["import { DataTableBody } from \"@dhis2/ui\";\nimport { useTableState } from \"../../TableStateProvider\";\nimport { TableRow } from \"./DataRow\";\nimport { memo, type RefObject, useMemo } from \"react\";\nimport { LoadingIndicator } from \"../../LoadingIndicator\";\nimport { ScorecardDataFetchProgressProvider } from \"../../DataProvider\";\n\nexport const TableBody = memo(function TableBody({\n\ttableRef,\n}: {\n\ttableRef: RefObject<HTMLTableElement>;\n}) {\n\tconst table = useTableState();\n\tconst rows = useMemo(\n\t\t() => table.getRowModel().rows,\n\t\t[table.getRowModel().rows],\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<thead>\n\t\t\t\t<ScorecardDataFetchProgressProvider>\n\t\t\t\t\t<LoadingIndicator tableRef={tableRef} />\n\t\t\t\t</ScorecardDataFetchProgressProvider>\n\t\t\t</thead>\n\t\t\t<DataTableBody>\n\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t<TableRow key={row.id} row={row} />\n\t\t\t\t))}\n\t\t\t</DataTableBody>\n\t\t</>\n\t);\n});\n"]}
+{"version":3,"sources":["../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableBody.tsx"],"names":["TableBody"],"mappings":"AAqBE,mBAGG,KAHH;AArBF,SAAS,qBAAqB;AAC9B,SAAS,sBAAsB,qBAAqB;AACpD,SAAS,gBAAgB;AACzB,SAAS,MAAsB,eAAe;AAC9C,SAAS,wBAAwB;AACjC,SAAS,0CAA0C;AAE5C,MAAM,YAAY,KAAK,SAASA,WAAU;AAAA,EAChD;AACD,GAEG;AACF,QAAM,QAAQ,cAAc;AAC5B,QAAM,UAAU,qBAAqB;AAErC,QAAM,OAAO;AAAA,IACZ,MAAM,MAAM,YAAY,EAAE;AAAA,IAC1B,CAAC,MAAM,YAAY,EAAE,IAAI;AAAA,EAC1B;AAEA,SACC,iCACC;AAAA,wBAAC,WACA,8BAAC,sCACA,8BAAC,oBAAiB,UAAoB,GACvC,GACD;AAAA,IACA,oBAAC,iBAAc,SACb,eAAK,IAAI,CAAC,QACV,oBAAC,YAAsB,OAAR,IAAI,EAAc,CACjC,GACF;AAAA,KACD;AAEF,CAAC","sourcesContent":["import { DataTableBody } from \"@dhis2/ui\";\nimport { useTableLoadingState, useTableState } from \"../../TableStateProvider\";\nimport { TableRow } from \"./DataRow\";\nimport { memo, type RefObject, useMemo } from \"react\";\nimport { LoadingIndicator } from \"../../LoadingIndicator\";\nimport { ScorecardDataFetchProgressProvider } from \"../../DataProvider\";\n\nexport const TableBody = memo(function TableBody({\n\ttableRef,\n}: {\n\ttableRef: RefObject<HTMLTableElement>;\n}) {\n\tconst table = useTableState();\n\tconst loading = useTableLoadingState();\n\n\tconst rows = useMemo(\n\t\t() => table.getRowModel().rows,\n\t\t[table.getRowModel().rows],\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<thead>\n\t\t\t\t<ScorecardDataFetchProgressProvider>\n\t\t\t\t\t<LoadingIndicator tableRef={tableRef} />\n\t\t\t\t</ScorecardDataFetchProgressProvider>\n\t\t\t</thead>\n\t\t\t<DataTableBody loading={loading}>\n\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t<TableRow key={row.id} row={row} />\n\t\t\t\t))}\n\t\t\t</DataTableBody>\n\t\t</>\n\t);\n});\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js

@@ -52,6 +52,7 @@ function DataHeaderCellComponent({
           children: /* @__PURE__ */ jsxRuntime.jsx(
             DraggableCell.DraggableCell,
             {
+              id: label,
               type: dataInRows ? config.ScorecardDraggableItems.ou : config.ScorecardDraggableItems.data,
               children: bold ? /* @__PURE__ */ jsxRuntime.jsx("b", { children: label }) : label
             }

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":[],"mappings":"AAeQ;AAdR;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA0D;AACnE,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,iCAAiC;AAEnC,SAAS,oBAAoB;AAAA,EACnC;AACD,GAA2C;AAC1C,QAAM,UAAU,OAAO,QAAQ,SAAS;AACxC,SAAO,oBAAC,yBAAsB,SAAkB;AACjD;AAEO,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,QACJ,OAAO,OAAO,UAAU,KAA2B,SACnD,OAAO,UAAU,KAA2B;AAE9C,QAAM,OACJ,OAAO,OAAO,UAAU,KAA4B,QACpD,OAAO,UAAU,KAA4B;AAE/C,QAAM,UAAU,OAAO,QAAQ,SAAS;AAExC,QAAM,gBAAgB,CAAC,QAAQ,YAAY,IACxC,YACC,OAAQ,YAAY;AACxB,QAAM,eACL,QAAQ,oBAAoB,MAAM,QAC/B,KAAK,EAAE,oBAAoB,IAC3B,QAAQ,oBAAoB,MAAM,SACjC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,CAAC,GAAG,MAAM;AACV,cAAM,OAAO,OAAQ,wBAAwB;AAC7C,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD,IACC;AAAA,MAEJ,eACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,gBACA;AAAA,MAEJ,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,IAAI,IAC7B,CAAC,wBAAwB,EAAE;AAAA,UAG/B;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,KACxB,wBAAwB;AAAA,cAG3B,iBAAO,oBAAC,OAAG,iBAAM,IAAO;AAAA;AAAA,UAC1B;AAAA;AAAA,MACD;AAAA;AAAA,IApCK,GAAG,KAAK;AAAA,EAqCd;AAEF;AAEO,MAAM,iBAAiB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\n\nexport function EmptyDataHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = header.colSpan.toString();\n\treturn <DataTableColumnHeader colSpan={colSpan} />;\n}\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst label =\n\t\t(header.column.columnDef.meta as { label: string }).label ??\n\t\t(column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${label}`}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{bold ? <b>{label}</b> : label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/DataHeaderCell.tsx"],"names":[],"mappings":"AAeQ;AAdR;AAAA,EACC;AAAA,OAEM;AACP,SAAS,6BAA0D;AACnE,OAAO,UAAU;AACjB,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,iCAAiC;AAEnC,SAAS,oBAAoB;AAAA,EACnC;AACD,GAA2C;AAC1C,QAAM,UAAU,OAAO,QAAQ,SAAS;AACxC,SAAO,oBAAC,yBAAsB,SAAkB;AACjD;AAEO,SAAS,wBAAwB;AAAA,EACvC;AAAA,EACA;AACD,GAA2C;AAC1C,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AACD,QAAM,QACJ,OAAO,OAAO,UAAU,KAA2B,SACnD,OAAO,UAAU,KAA2B;AAE9C,QAAM,OACJ,OAAO,OAAO,UAAU,KAA4B,QACpD,OAAO,UAAU,KAA4B;AAE/C,QAAM,UAAU,OAAO,QAAQ,SAAS;AAExC,QAAM,gBAAgB,CAAC,QAAQ,YAAY,IACxC,YACC,OAAQ,YAAY;AACxB,QAAM,eACL,QAAQ,oBAAoB,MAAM,QAC/B,KAAK,EAAE,oBAAoB,IAC3B,QAAQ,oBAAoB,MAAM,SACjC,KAAK,EAAE,qBAAqB,IAC5B,KAAK,EAAE,SAAS;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MAEA,eAAe,KAAK,EAAE,yBAAyB,EAAE,aAAa,CAAC;AAAA,MAC/D,iBACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,CAAC,GAAG,MAAM;AACV,cAAM,OAAO,OAAQ,wBAAwB;AAC7C,YAAI,MAAM;AACT,eAAK,CAAC;AAAA,QACP;AAAA,MACD,IACC;AAAA,MAEJ,eACC,OAAO,QAAQ,WAAW,KAAK,OAAO,WAAW,IAC9C,gBACA;AAAA,MAEJ,OAAM;AAAA,MACN;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,IAAI,IAC7B,CAAC,wBAAwB,EAAE;AAAA,UAG/B;AAAA,YAAC;AAAA;AAAA,cACA,IAAI;AAAA,cACJ,MACC,aACG,wBAAwB,KACxB,wBAAwB;AAAA,cAG3B,iBAAO,oBAAC,OAAG,iBAAM,IAAO;AAAA;AAAA,UAC1B;AAAA;AAAA,MACD;AAAA;AAAA,IArCK,GAAG,KAAK;AAAA,EAsCd;AAEF;AAEO,MAAM,iBAAiB","sourcesContent":["import type { HeaderContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableColumnHeader, type DataTableSortDirection } from \"@dhis2/ui\";\nimport i18n from \"@dhis2/d2-i18n\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\n\nexport function EmptyDataHeaderCell({\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst colSpan = header.colSpan.toString();\n\treturn <DataTableColumnHeader colSpan={colSpan} />;\n}\n\nexport function DataHeaderCellComponent({\n\tcolumn,\n\theader,\n}: HeaderContext<ScorecardTableData, any>) {\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\tconst label =\n\t\t(header.column.columnDef.meta as { label: string }).label ??\n\t\t(column.columnDef.meta as { label: string }).label;\n\n\tconst bold =\n\t\t(header.column.columnDef.meta as { bold?: boolean }).bold ??\n\t\t(column.columnDef.meta as { bold?: boolean }).bold;\n\n\tconst colSpan = header.colSpan.toString();\n\n\tconst sortDirection = !column?.getIsSorted()\n\t\t? \"default\"\n\t\t: (column!.getIsSorted() as DataTableSortDirection);\n\tconst nextSortType =\n\t\tcolumn?.getNextSortingOrder() === \"asc\"\n\t\t\t? i18n.t(\"in ascending order\")\n\t\t\t: column?.getNextSortingOrder() === \"desc\"\n\t\t\t\t? i18n.t(\"in descending order\")\n\t\t\t\t: i18n.t(\"disable\");\n\n\treturn (\n\t\t<DataTableColumnHeader\n\t\t\tkey={`${label}`}\n\t\t\tsortIconTitle={i18n.t(\"Sort {{nextSortType}}\", { nextSortType })}\n\t\t\tonSortIconClick={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? (_, e) => {\n\t\t\t\t\t\t\tconst sort = column!.getToggleSortingHandler();\n\t\t\t\t\t\t\tif (sort) {\n\t\t\t\t\t\t\t\tsort(e);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsortDirection={\n\t\t\t\theader.column?.getCanSort() || column.getCanSort()\n\t\t\t\t\t? sortDirection\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\talign=\"center\"\n\t\t\tcolSpan={colSpan}\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.data]\n\t\t\t\t\t\t: [ScorecardDraggableItems.ou]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\tid={label}\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.ou\n\t\t\t\t\t\t\t: ScorecardDraggableItems.data\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{bold ? <b>{label}</b> : label}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableColumnHeader>\n\t);\n}\n\nexport const DataHeaderCell = DataHeaderCellComponent;\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.js

@@ -52,6 +52,7 @@ function LabelCellComponent(props) {
           children: /* @__PURE__ */ jsxRuntime.jsx(
             DraggableCell.DraggableCell,
             {
+              id: data,
               type: dataInRows ? config.ScorecardDraggableItems.data : config.ScorecardDraggableItems.ou,
               children: data
             }

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":["left"],"mappings":"AA2DI;AA1DJ;AAAA,EACC;AAAA,OAEM;AACP,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY;AAEd,SAAS,mBACf,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;AACvC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,YAAY,QAAQ,MAAM;AAC/B,UAAM,aAAa,KAAK,MAAM,IAAI,gBAAgB,CAAC;AACnD,WAAQ,YAAY,SAAS,KAAiB;AAAA,EAC/C,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,QAAQ,MAAM;AAC1B,QAAIA,QAAO;AACX,QAAI,YAAY;AACf,MAAAA;AAAA,IACD;AACA,WAAOA,QAAO;AAAA,EACf,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,GAAG,IAAI;AAAA,MACd,OAAO;AAAA,QACN,OAAO;AAAA,MACR;AAAA,MACA,OAAK;AAAA,MAGL,MAAM,GAAG,IAAI;AAAA,MACb,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,EAAE,IAC3B,CAAC,wBAAwB,IAAI;AAAA,UAGjC;AAAA,YAAC;AAAA;AAAA,cACA,MACC,aACG,wBAAwB,OACxB,wBAAwB;AAAA,cAG3B;AAAA;AAAA,UACF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,YAAY,KAAK,kBAAkB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\nimport { memo, useMemo } from \"react\";\nimport { head } from \"lodash\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst size = props.cell.column.getSize();\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tconst itemNumber = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\tconst canExpand = useMemo(() => {\n\t\tconst expandCell = head(props.row.getVisibleCells());\n\t\treturn (expandCell?.getValue() as boolean) ?? false;\n\t}, []);\n\n\tconst left = useMemo(() => {\n\t\tlet left = 1;\n\t\tif (itemNumber) {\n\t\t\tleft++;\n\t\t}\n\t\treturn left * 48;\n\t}, [canExpand, itemNumber]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft={`${left}px`}\n\t\t\tbordered\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{data}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = memo(LabelCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/LabelCell.tsx"],"names":["left"],"mappings":"AA2DI;AA1DJ;AAAA,EACC;AAAA,OAEM;AACP,SAAS,qBAAqB;AAC9B,OAAO,mBAAmB;AAC1B,SAAS,qBAAqB;AAC9B,SAAS,iCAAiC;AAC1C,SAAS,MAAM,eAAe;AAC9B,SAAS,YAAY;AAEd,SAAS,mBACf,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;AACvC,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,aAAa,0BAAmC;AAAA,IACrD;AAAA,IACA;AAAA,EACD,CAAC;AAED,QAAM,YAAY,QAAQ,MAAM;AAC/B,UAAM,aAAa,KAAK,MAAM,IAAI,gBAAgB,CAAC;AACnD,WAAQ,YAAY,SAAS,KAAiB;AAAA,EAC/C,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,QAAQ,MAAM;AAC1B,QAAIA,QAAO;AACX,QAAI,YAAY;AACf,MAAAA;AAAA,IACD;AACA,WAAOA,QAAO;AAAA,EACf,GAAG,CAAC,WAAW,UAAU,CAAC;AAE1B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,GAAG,IAAI;AAAA,MACd,OAAO;AAAA,QACN,OAAO;AAAA,MACR;AAAA,MACA,OAAK;AAAA,MAGL,MAAM,GAAG,IAAI;AAAA,MACb,UAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACA,QACC,aACG,CAAC,wBAAwB,EAAE,IAC3B,CAAC,wBAAwB,IAAI;AAAA,UAGjC;AAAA,YAAC;AAAA;AAAA,cACA,IAAI;AAAA,cACJ,MACC,aACG,wBAAwB,OACxB,wBAAwB;AAAA,cAG3B;AAAA;AAAA,UACF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEO,MAAM,YAAY,KAAK,kBAAkB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport {\n\tScorecardDraggableItems,\n\ttype ScorecardTableData,\n} from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport DroppableCell from \"../../DroppableCell\";\nimport { DraggableCell } from \"../../DraggableCell\";\nimport { useScorecardStateSelector } from \"../../../../StateProvider\";\nimport { memo, useMemo } from \"react\";\nimport { head } from \"lodash\";\n\nexport function LabelCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst size = props.cell.column.getSize();\n\tconst dataInRows = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"showDataInRows\",\n\t]);\n\n\tconst itemNumber = useScorecardStateSelector<boolean>([\n\t\t\"options\",\n\t\t\"itemNumber\",\n\t]);\n\n\tconst canExpand = useMemo(() => {\n\t\tconst expandCell = head(props.row.getVisibleCells());\n\t\treturn (expandCell?.getValue() as boolean) ?? false;\n\t}, []);\n\n\tconst left = useMemo(() => {\n\t\tlet left = 1;\n\t\tif (itemNumber) {\n\t\t\tleft++;\n\t\t}\n\t\treturn left * 48;\n\t}, [canExpand, itemNumber]);\n\n\treturn (\n\t\t<DataTableCell\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft={`${left}px`}\n\t\t\tbordered\n\t\t>\n\t\t\t<DroppableCell\n\t\t\t\taccept={\n\t\t\t\t\tdataInRows\n\t\t\t\t\t\t? [ScorecardDraggableItems.ou]\n\t\t\t\t\t\t: [ScorecardDraggableItems.data]\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<DraggableCell\n\t\t\t\t\tid={data}\n\t\t\t\t\ttype={\n\t\t\t\t\t\tdataInRows\n\t\t\t\t\t\t\t? ScorecardDraggableItems.data\n\t\t\t\t\t\t\t: ScorecardDraggableItems.ou\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t{data}\n\t\t\t\t</DraggableCell>\n\t\t\t</DroppableCell>\n\t\t</DataTableCell>\n\t);\n}\n\nexport const LabelCell = memo(LabelCellComponent);\n"]}

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/NumberCell.js

@@ -10,6 +10,7 @@ function NumberCellComponent(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.DataTableCell,
     {
+      bordered: true,
       width: `${size}px`,
       style: {
         width: size,

package/dist/components/Scorecard/components/ScorecardTable/components/TableHeader/components/NumberCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/NumberCell.tsx"],"names":[],"mappings":"AAYE;AAVF,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,SAAS,oBACR,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAO,GAAG,IAAI;AAAA,MACd,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,MACT;AAAA,MACA,OAAK;AAAA,MAGL,MAAK;AAAA,MAEJ;AAAA;AAAA,EACF;AAEF;AAEO,MAAM,aAAa,KAAK,mBAAmB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { memo } from \"react\";\n\nfunction NumberCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst size = props.cell.column.getSize();\n\n\treturn (\n\t\t<DataTableCell\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t\tminWidth: size,\n\t\t\t\tmaxWidth: 48,\n\t\t\t\theight: 48,\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"48px\"\n\t\t>\n\t\t\t{data}\n\t\t</DataTableCell>\n\t);\n}\n\nexport const NumberCell = memo(NumberCellComponent);\n"]}
+{"version":3,"sources":["../../../../../../../../src/components/Scorecard/components/ScorecardTable/components/TableHeader/components/NumberCell.tsx"],"names":[],"mappings":"AAYE;AAVF,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAErB,SAAS,oBACR,OACC;AACD,QAAM,OAAO,MAAM,SAAS,EAAE,SAAS;AACvC,QAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;AAEvC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAQ;AAAA,MACR,OAAO,GAAG,IAAI;AAAA,MACd,OAAO;AAAA,QACN,OAAO;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,MACT;AAAA,MACA,OAAK;AAAA,MAGL,MAAK;AAAA,MAEJ;AAAA;AAAA,EACF;AAEF;AAEO,MAAM,aAAa,KAAK,mBAAmB","sourcesContent":["import type { CellContext } from \"@tanstack/react-table\";\nimport type { ScorecardTableData } from \"../../../../../schemas/config\";\nimport { DataTableCell } from \"@dhis2/ui\";\nimport { memo } from \"react\";\n\nfunction NumberCellComponent(\n\tprops: CellContext<ScorecardTableData, string | number>,\n) {\n\tconst data = props.getValue().toString();\n\tconst size = props.cell.column.getSize();\n\n\treturn (\n\t\t<DataTableCell\n\t\t\tbordered\n\t\t\twidth={`${size}px`}\n\t\t\tstyle={{\n\t\t\t\twidth: size,\n\t\t\t\tminWidth: size,\n\t\t\t\tmaxWidth: 48,\n\t\t\t\theight: 48,\n\t\t\t}}\n\t\t\tfixed\n\t\t\t/*\n      // @ts-ignore */\n\t\t\tleft=\"48px\"\n\t\t>\n\t\t\t{data}\n\t\t</DataTableCell>\n\t);\n}\n\nexport const NumberCell = memo(NumberCellComponent);\n"]}

package/dist/components/Scorecard/components/TableStateProvider.js

@@ -4,6 +4,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var reactTable = require('@tanstack/react-table');
 var table = require('../hooks/table');
+var usehooksTs = require('usehooks-ts');
 
 const TableStateContext = react.createContext({
   state: {},
@@ -11,16 +12,34 @@ const TableStateContext = react.createContext({
   getCoreRowModel: reactTable.getCoreRowModel(),
   data: []
 });
+const TableLoadingStateContext = react.createContext(false);
+const TableLoadingStateToggleContext = react.createContext(() => {
+});
 function useTableState() {
   const context = react.useContext(TableStateContext);
   return reactTable.useReactTable(context);
 }
+function useToggleTableLoadingState() {
+  return react.useContext(TableLoadingStateToggleContext);
+}
+function useTableLoadingState() {
+  return react.useContext(TableLoadingStateContext);
+}
+function TableLoadingStateProvider({
+  children
+}) {
+  const { value: loading, toggle } = usehooksTs.useBoolean(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableLoadingStateToggleContext.Provider, { value: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingStateContext.Provider, { value: loading, children }) });
+}
 function TableStateProvider({ children }) {
   const options = table.useTableSetup();
-  return /* @__PURE__ */ jsxRuntime.jsx(TableStateContext.Provider, { value: options, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(TableStateContext.Provider, { value: options, children: /* @__PURE__ */ jsxRuntime.jsx(TableLoadingStateProvider, { children }) });
 }
 
+exports.TableLoadingStateProvider = TableLoadingStateProvider;
 exports.TableStateProvider = TableStateProvider;
+exports.useTableLoadingState = useTableLoadingState;
 exports.useTableState = useTableState;
+exports.useToggleTableLoadingState = useToggleTableLoadingState;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=TableStateProvider.js.map