@dhis2/analytics 26.0.8 → 26.0.9

package/build/es/components/PivotTable/PivotTableCell.js

@@ -1,7 +1,5 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -19,12 +17,12 @@ export const PivotTableCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const engine = usePivotTableEngine();
   style.width = style.minWidth = style.maxWidth = style.width;
   style.height = style.minHeight = style.maxHeight = style.height || engine.fontSize + engine.cellPadding * 2 + 2;
-  const className = classnames(classes, "fontsize-".concat(engine.visualization.fontSize), "displaydensity-".concat(engine.visualization.displayDensity));
+  const className = classnames(classes, `fontsize-${engine.visualization.fontSize}`, `displaydensity-${engine.visualization.displayDensity}`);
   return isHeader ? /*#__PURE__*/React.createElement("th", _extends({
     style: style,
     "data-test": dataTest
   }, props, {
-    className: "jsx-".concat(cellStyle.__hash) + " " + (props && props.className != null && props.className || className || "")
+    className: `jsx-${cellStyle.__hash}` + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: cellStyle.__hash
   }, cellStyle), children) : /*#__PURE__*/React.createElement("td", _extends({
@@ -32,7 +30,7 @@ export const PivotTableCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     style: style,
     "data-test": dataTest
   }, props, {
-    className: "jsx-".concat(cellStyle.__hash) + " " + (props && props.className != null && props.className || className || "")
+    className: `jsx-${cellStyle.__hash}` + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: cellStyle.__hash
   }, cellStyle), children);

package/build/es/components/PivotTable/PivotTableColumnHeaderCell.js

@@ -8,7 +8,6 @@ import { PivotTableSortIcon } from './PivotTableSortIcon.js';
 import { cell as cellStyle } from './styles/PivotTable.style.js';
 export const PivotTableColumnHeaderCell = _ref => {
   var _engine$adaptiveClipp;
-
   let {
     clippingResult,
     index,
@@ -33,13 +32,11 @@ export const PivotTableColumnHeaderCell = _ref => {
         height,
         whiteSpace: level === engine.columnDepth - 1 ? 'pre-line' : 'nowrap'
       };
-
       if (engine.options.fixColumnHeaders) {
-        style.top = level * (engine.fontSize + engine.cellPadding * 2 + 2); // left value for the column header cells should be sum of row headers' width when engine.options.fixRowHeaders is true
-
+        style.top = level * (engine.fontSize + engine.cellPadding * 2 + 2);
+        // left value for the column header cells should be sum of row headers' width when engine.options.fixRowHeaders is true
         style.left = engine.options.fixRowHeaders ? engine.rowHeaderPixelWidth : 0;
       }
-
       return /*#__PURE__*/React.createElement(PivotTableCell, {
         isHeader: true,
         classes: [header.label && header.label !== 'Total' && header.label !== 'Subtotal' // TODO: Actually look up the column type!
@@ -53,10 +50,10 @@ export const PivotTableColumnHeaderCell = _ref => {
       }, /*#__PURE__*/React.createElement(_JSXStyle, {
         id: cellStyle.__hash
       }, cellStyle), /*#__PURE__*/React.createElement("div", {
-        className: "jsx-".concat(cellStyle.__hash) + " " + "column-header-inner"
+        className: `jsx-${cellStyle.__hash}` + " " + "column-header-inner"
       }, /*#__PURE__*/React.createElement("span", {
         "data-test": "visualization-column-header",
-        className: "jsx-".concat(cellStyle.__hash) + " " + "column-header-label"
+        className: `jsx-${cellStyle.__hash}` + " " + "column-header-label"
       }, header.label), isSortable ? /*#__PURE__*/React.createElement(PivotTableSortIcon, {
         index: index,
         sortBy: sortBy

package/build/es/components/PivotTable/PivotTableContainer.js

@@ -18,11 +18,11 @@ export const PivotTableContainer = /*#__PURE__*/React.forwardRef((_ref, ref) =>
     },
     ref: ref,
     "data-test": "visualization-container",
-    className: "jsx-".concat(tableStyle.__hash) + " " + "pivot-table-container"
+    className: `jsx-${tableStyle.__hash}` + " " + "pivot-table-container"
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: tableStyle.__hash
   }, tableStyle), width === 0 || height === 0 ? null : /*#__PURE__*/React.createElement("table", {
-    className: "jsx-".concat(tableStyle.__hash) + " " + (classnames({
+    className: `jsx-${tableStyle.__hash}` + " " + (classnames({
       'fixed-headers': engine.options.fixColumnHeaders && engine.options.fixRowHeaders,
       'fixed-column-headers': engine.options.fixColumnHeaders && !engine.options.fixRowHeaders,
       'fixed-row-headers': engine.options.fixRowHeaders && !engine.options.fixColumnHeaders

package/build/es/components/PivotTable/PivotTableDimensionLabelCell.js

@@ -11,9 +11,8 @@ export const PivotTableDimensionLabelCell = _ref => {
   const colCount = engine.rowDepth;
   const rowCount = engine.columnDepth;
   let colSpan = 1,
-      rowSpan = 1,
-      label;
-
+    rowSpan = 1,
+    label;
   if (!engine.visualization.showDimensionLabels) {
     if (rowLevel > 0 || columnLevel > 0) {
       colSpan = rowSpan = 0;
@@ -23,7 +22,6 @@ export const PivotTableDimensionLabelCell = _ref => {
     }
   } else {
     label = engine.getDimensionLabel(rowLevel, columnLevel);
-
     if (!label) {
       if (rowLevel > 0 || columnLevel > 0) {
         colSpan = rowSpan = 0;
@@ -33,25 +31,22 @@ export const PivotTableDimensionLabelCell = _ref => {
       }
     }
   }
-
   if (!colSpan || !rowSpan) {
     return null;
   }
-
   const width = engine.adaptiveClippingController.columns.headerSizes[rowLevel];
   const height = engine.adaptiveClippingController.rows.headerSizes[columnLevel];
   const style = {
     width,
     height
   };
-
   if (engine.options.fixColumnHeaders || engine.options.fixRowHeaders) {
     style.zIndex = engine.options.fixColumnHeaders && engine.options.fixRowHeaders ? 2 : 1;
     style.top = engine.options.fixColumnHeaders ? columnLevel * (engine.fontSize + engine.cellPadding * 2 + 2) : 0;
-    style.left = engine.options.fixRowHeaders ? // calculate the width of all row header cells on the left of current cell
+    style.left = engine.options.fixRowHeaders ?
+    // calculate the width of all row header cells on the left of current cell
     engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0;
   }
-
   return /*#__PURE__*/React.createElement(PivotTableCell, {
     isHeader: true,
     classes: ['empty-header', 'column-header', {

package/build/es/components/PivotTable/PivotTableEmptyCell.js

@@ -1,12 +1,11 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { PivotTableCell } from './PivotTableCell.js';
 import { cell as cellStyle } from './styles/PivotTable.style.js';
 export const PivotTableEmptyCell = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let { ...props
+  let {
+    ...props
   } = _ref;
   return /*#__PURE__*/React.createElement(PivotTableCell, _extends({
     ref: ref

package/build/es/components/PivotTable/PivotTableRowHeaderCell.js

@@ -5,7 +5,6 @@ import { usePivotTableEngine } from './PivotTableEngineContext.js';
 import { PivotTableHeaderCell } from './PivotTableHeaderCell.js';
 export const PivotTableRowHeaderCell = _ref => {
   var _engine$adaptiveClipp;
-
   let {
     clippingResult,
     rowIndex,
@@ -30,7 +29,8 @@ export const PivotTableRowHeaderCell = _ref => {
       style: {
         width,
         height,
-        left: rowLevel > 0 ? // calculate the width of all row header cells on the left of current cell
+        left: rowLevel > 0 ?
+        // calculate the width of all row header cells on the left of current cell
         engine.adaptiveClippingController.columns.headerSizes.slice(0, rowLevel).reduce((width, acc) => acc += width, 0) : 0
       },
       dataTest: "visualization-row-header"

package/build/es/components/PivotTable/PivotTableSortIcon.js

@@ -15,11 +15,11 @@ export const PivotTableSortIcon = _ref => {
   const engine = usePivotTableEngine();
   const SortIcon = (sortBy === null || sortBy === void 0 ? void 0 : sortBy.column) === index ? sortBy.order === SORT_ORDER_ASCENDING ? SortIconAscending : SortIconDescending : SortIconIdle;
   return /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(sortIconStyle.__hash) + " " + "fontsize-".concat(engine.visualization.fontSize)
+    className: `jsx-${sortIconStyle.__hash}` + " " + `fontsize-${engine.visualization.fontSize}`
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: sortIconStyle.__hash
   }, sortIconStyle), /*#__PURE__*/React.createElement(SortIcon, {
-    className: "jsx-".concat(sortIconStyle.__hash)
+    className: `jsx-${sortIconStyle.__hash}`
   }));
 };
 PivotTableSortIcon.propTypes = {

package/build/es/components/PivotTable/PivotTableTitleRow.js

@@ -18,7 +18,7 @@ export const PivotTableTitleRow = _ref => {
     setPosition(Math.max(0, Math.min(scrollPosition.x, totalWidth - containerWidth)));
   }, [containerWidth, scrollPosition.x, totalWidth]);
   return /*#__PURE__*/React.createElement("tr", {
-    className: "jsx-".concat(cellStyle.__hash)
+    className: `jsx-${cellStyle.__hash}`
   }, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: cellStyle.__hash
   }, cellStyle), /*#__PURE__*/React.createElement(PivotTableCell, {
@@ -32,7 +32,7 @@ export const PivotTableTitleRow = _ref => {
       textAlign: 'center'
     },
     "data-test": "visualization-title",
-    className: "jsx-".concat(cellStyle.__hash)
+    className: `jsx-${cellStyle.__hash}`
   }, title)));
 };
 PivotTableTitleRow.propTypes = {

package/build/es/components/PivotTable/PivotTableTitleRows.js

@@ -5,7 +5,6 @@ import { usePivotTableEngine } from './PivotTableEngineContext.js';
 import { PivotTableTitleRow } from './PivotTableTitleRow.js';
 export const PivotTableTitleRows = _ref => {
   var _engine$visualization;
-
   let {
     clippingResult,
     width

package/build/es/components/PivotTable/PivotTableValueCell.js

@@ -8,7 +8,6 @@ import { PivotTableEmptyCell } from './PivotTableEmptyCell.js';
 import { usePivotTableEngine } from './PivotTableEngineContext.js';
 export const PivotTableValueCell = _ref => {
   var _cellContent$rendered;
-
   let {
     row,
     column,
@@ -22,26 +21,25 @@ export const PivotTableValueCell = _ref => {
   });
   const isClickable = onToggleContextualMenu && cellContent.cellType === CELL_TYPE_VALUE && cellContent.ouId;
   const classes = [cellContent.cellType, cellContent.valueType, isClickable && 'clickable'];
-
   const onClick = () => {
     onToggleContextualMenu(cellRef.current, {
       ouId: cellContent.ouId
     });
   };
-
   if (!cellContent || cellContent.empty) {
     return /*#__PURE__*/React.createElement(PivotTableEmptyCell, {
       onClick: isClickable ? onClick : undefined,
       ref: cellRef,
       classes: [cellContent.cellType, isClickable && 'clickable']
     });
-  } // TODO: Add support for 'INTEGER' type (requires server changes)
-
+  }
 
+  // TODO: Add support for 'INTEGER' type (requires server changes)
   const legendStyle = cellContent.cellType === CELL_TYPE_VALUE && cellContent.valueType === VALUE_TYPE_NUMBER ? applyLegendSet(cellContent.rawValue, cellContent.dxDimension, engine) : undefined;
   const width = engine.adaptiveClippingController.columns.sizes[engine.columnMap[column]].size;
   const height = engine.adaptiveClippingController.rows.sizes[engine.rowMap[row]].size;
-  const style = { ...legendStyle,
+  const style = {
+    ...legendStyle,
     width,
     height,
     whiteSpace: 'pre-line'

package/build/es/components/PivotTable/styles/PivotTable.style.js

@@ -1,8 +1,8 @@
 import { colors } from '@dhis2/ui';
 import { BORDER_COLOR, DISPLAY_DENSITY_PADDING_COMPACT, DISPLAY_DENSITY_PADDING_NORMAL, DISPLAY_DENSITY_PADDING_COMFORTABLE, FONT_SIZE_SMALL, FONT_SIZE_NORMAL, FONT_SIZE_LARGE } from '../../../modules/pivotTable/pivotTableConstants.js';
-export const table = ["div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:".concat(colors.grey900, ";}"), "table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ".concat(BORDER_COLOR, ";border-width:1px 1px 0 0;}"), "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", "table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ".concat(BORDER_COLOR, ";}"), "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
+export const table = [`div.pivot-table-container{font-family:'Roboto',Arial,sans-serif;overflow:auto;color:${colors.grey900};}`, `table{border-spacing:0;white-space:nowrap;box-sizing:border-box;text-align:center;border:1px solid ${BORDER_COLOR};border-width:1px 1px 0 0;}`, "table.fixed-headers{border-width:0 0 0 1px;}", "table.fixed-headers tr th,table.fixed-headers tr td{border-width:0 1px 1px 0;}", "table.fixed-column-headers{border-width:0 1px 0 0;}", "table.fixed-column-headers tr th,table.fixed-column-headers tr td{border-width:0 0 1px 1px;}", `table.fixed-headers thead tr:first-of-type th,table.fixed-column-headers thead tr:first-of-type th{border-top:1px solid ${BORDER_COLOR};}`, "table.fixed-row-headers{border-width:0 0 1px 1px;}", "table.fixed-row-headers tr th,table.fixed-row-headers tr td{border-width:1px 1px 0 0;}"];
 table.__hash = "712241344";
-export const cell = ["td.jsx-1789008308,th.jsx-1789008308{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ".concat(BORDER_COLOR, ";border-width:0 0 1px 1px;cursor:default;}"), "th.fixed-header.jsx-1789008308{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", ".fontsize-SMALL.jsx-1789008308{font-size:".concat(FONT_SIZE_SMALL, "px;line-height:").concat(FONT_SIZE_SMALL, "px;}"), ".fontsize-NORMAL.jsx-1789008308{font-size:".concat(FONT_SIZE_NORMAL, "px;line-height:").concat(FONT_SIZE_NORMAL, "px;}"), ".fontsize-LARGE.jsx-1789008308{font-size:".concat(FONT_SIZE_LARGE, "px;line-height:").concat(FONT_SIZE_LARGE, "px;}"), ".displaydensity-COMPACT.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_COMPACT, "px;}"), ".displaydensity-NORMAL.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_NORMAL, "px;}"), ".displaydensity-COMFORTABLE.jsx-1789008308{padding:".concat(DISPLAY_DENSITY_PADDING_COMFORTABLE, "px;}"), ".column-header.jsx-1789008308{background-color:#dae6f8;}", "div.column-header-inner.jsx-1789008308{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-1789008308{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-1789008308{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-1789008308{text-align:left;}", ".empty-header.jsx-1789008308{background-color:#cddaed;}", ".total-header.jsx-1789008308{background-color:#bac6d8;}", ".value.jsx-1789008308{background-color:#ffffff;}", ".TEXT.jsx-1789008308{text-align:left;}", ".NUMBER.jsx-1789008308{text-align:right;}", ".clickable.jsx-1789008308{cursor:pointer;}", ".value.jsx-1789008308:hover{background-color:#f3f3f3;}", ".subtotal.jsx-1789008308{background-color:#f4f4f4;}", ".total.jsx-1789008308{background-color:#d8d8d8;}", ".column-header-label.jsx-1789008308{overflow:hidden;text-overflow:ellipsis;}"];
+export const cell = [`td.jsx-1789008308,th.jsx-1789008308{box-sizing:border-box;font-weight:normal;overflow:hidden;text-overflow:ellipsis;border:1px solid ${BORDER_COLOR};border-width:0 0 1px 1px;cursor:default;}`, "th.fixed-header.jsx-1789008308{position:-webkit-sticky;position:sticky;z-index:1;top:0;left:0;}", `.fontsize-SMALL.jsx-1789008308{font-size:${FONT_SIZE_SMALL}px;line-height:${FONT_SIZE_SMALL}px;}`, `.fontsize-NORMAL.jsx-1789008308{font-size:${FONT_SIZE_NORMAL}px;line-height:${FONT_SIZE_NORMAL}px;}`, `.fontsize-LARGE.jsx-1789008308{font-size:${FONT_SIZE_LARGE}px;line-height:${FONT_SIZE_LARGE}px;}`, `.displaydensity-COMPACT.jsx-1789008308{padding:${DISPLAY_DENSITY_PADDING_COMPACT}px;}`, `.displaydensity-NORMAL.jsx-1789008308{padding:${DISPLAY_DENSITY_PADDING_NORMAL}px;}`, `.displaydensity-COMFORTABLE.jsx-1789008308{padding:${DISPLAY_DENSITY_PADDING_COMFORTABLE}px;}`, ".column-header.jsx-1789008308{background-color:#dae6f8;}", "div.column-header-inner.jsx-1789008308{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".title.jsx-1789008308{font-weight:bold;background-color:#cddaed;}", ".row-header.jsx-1789008308{background-color:#dae6f8;}", ".row-header-hierarchy.jsx-1789008308{text-align:left;}", ".empty-header.jsx-1789008308{background-color:#cddaed;}", ".total-header.jsx-1789008308{background-color:#bac6d8;}", ".value.jsx-1789008308{background-color:#ffffff;}", ".TEXT.jsx-1789008308{text-align:left;}", ".NUMBER.jsx-1789008308{text-align:right;}", ".clickable.jsx-1789008308{cursor:pointer;}", ".value.jsx-1789008308:hover{background-color:#f3f3f3;}", ".subtotal.jsx-1789008308{background-color:#f4f4f4;}", ".total.jsx-1789008308{background-color:#d8d8d8;}", ".column-header-label.jsx-1789008308{overflow:hidden;text-overflow:ellipsis;}"];
 cell.__hash = "1789008308";
-export const sortIcon = [".fontsize-SMALL.jsx-2877616992{height:".concat(FONT_SIZE_SMALL, "px;margin-bottom:1px;margin-left:5px;}"), ".fontsize-NORMAL.jsx-2877616992{height:".concat(FONT_SIZE_NORMAL, "px;max-height:11px;margin-bottom:2px;margin-left:6px;}"), ".fontsize-LARGE.jsx-2877616992{height:".concat(FONT_SIZE_LARGE, "px;margin-bottom:2px;margin-left:7px;}")];
+export const sortIcon = [`.fontsize-SMALL.jsx-2877616992{height:${FONT_SIZE_SMALL}px;margin-bottom:1px;margin-left:5px;}`, `.fontsize-NORMAL.jsx-2877616992{height:${FONT_SIZE_NORMAL}px;max-height:11px;margin-bottom:2px;margin-left:6px;}`, `.fontsize-LARGE.jsx-2877616992{height:${FONT_SIZE_LARGE}px;margin-bottom:2px;margin-left:7px;}`];
 sortIcon.__hash = "2877616992";

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuBar.js

@@ -1,11 +1,9 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
-
 const throwErrorIfNotInitialized = () => {
   throw new Error('`HoverMenubarContext` has not been initialised');
 };
-
 const HoverMenubarContext = /*#__PURE__*/createContext({
   closeMenu: throwErrorIfNotInitialized,
   onDropDownButtonClick: throwErrorIfNotInitialized,
@@ -13,9 +11,7 @@ const HoverMenubarContext = /*#__PURE__*/createContext({
   setLastHoveredSubMenuEl: throwErrorIfNotInitialized,
   openedDropdownEl: null
 });
-
 const useHoverMenubarContext = () => useContext(HoverMenubarContext);
-
 const HoverMenuBar = _ref => {
   let {
     children,
@@ -30,7 +26,6 @@ const HoverMenuBar = _ref => {
   }, []);
   const onDocumentClick = useCallback(event => {
     const isClickOnOpenedSubMenuAnchor = lastHoveredSubMenuEl && (lastHoveredSubMenuEl === event.target || lastHoveredSubMenuEl.contains(event.target));
-
     if (!isClickOnOpenedSubMenuAnchor) {
       closeMenu();
     }
@@ -68,7 +63,6 @@ const HoverMenuBar = _ref => {
         once: true
       });
     }
-
     return () => {
       document.removeEventListener('click', onDocumentClick);
     };
@@ -88,7 +82,6 @@ const HoverMenuBar = _ref => {
     id: "3020154784"
   }, [".jsx-3020154784{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}"])));
 };
-
 HoverMenuBar.defaultProps = {
   dataTest: 'dhis2-analytics-hovermenubar'
 };

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js

@@ -26,7 +26,7 @@ export const HoverMenuDropdown = _ref => {
     disabled: disabled,
     onMouseOver: disabled ? undefined : onDropDownButtonMouseOver,
     "data-test": dataTest,
-    className: "jsx-".concat(menuButtonStyles.__hash) + " " + (cx({
+    className: `jsx-${menuButtonStyles.__hash}` + " " + (cx({
       isOpen
     }) || "")
   }, label, /*#__PURE__*/React.createElement(_JSXStyle, {

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuList.js

@@ -3,20 +3,16 @@ import { colors, elevations, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { createContext, useCallback, useContext, useState } from 'react';
 import { useHoverMenubarContext } from './HoverMenuBar.js';
-
 const throwErrorIfNotInitialized = () => {
   throw new Error('`HoverMenuListContext` has not been initialised');
 };
-
 const HoverMenuListContext = /*#__PURE__*/createContext({
   onSubmenuAnchorMouseEnter: throwErrorIfNotInitialized,
   onMenuItemMouseEnter: throwErrorIfNotInitialized,
   openedSubMenuEl: null,
   dense: false
 });
-
 const useHoverMenuListContext = () => useContext(HoverMenuListContext);
-
 const HoverMenuList = _ref => {
   let {
     children,
@@ -53,9 +49,8 @@ const HoverMenuList = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3026610659",
     dynamic: [colors.white, colors.grey200, elevations.e300, dense ? '128' : '180', maxWidth, maxHeight, spacers.dp4]
-  }, ["ul.__jsx-style-dynamic-selector{position:relative;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:".concat(colors.white, ";border:1px solid ").concat(colors.grey200, ";border-radius:3px;box-shadow:").concat(elevations.e300, ";display:inline-block;min-width:").concat(dense ? '128' : '180', "px;max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";padding:").concat(spacers.dp4, " 0;overflow:auto;list-style:none;}")])));
+  }, [`ul.__jsx-style-dynamic-selector{position:relative;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.e300};display:inline-block;min-width:${dense ? '128' : '180'}px;max-width:${maxWidth};max-height:${maxHeight};padding:${spacers.dp4} 0;overflow:auto;list-style:none;}`])));
 };
-
 HoverMenuList.defaultProps = {
   dataTest: 'dhis2-analytics-hovermenulist',
   maxWidth: '380px',
@@ -67,7 +62,6 @@ HoverMenuList.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Gives all HoverMenuListItem children a dense style */
   dense: PropTypes.bool,
   maxHeight: PropTypes.string,

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuListItem.js

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { HoverMenuList, useHoverMenuListContext } from './HoverMenuList.js';
 import styles from './HoverMenuListItem.styles.js';
-
 const HoverMenuListItem = _ref => {
   let {
     onClick,
@@ -32,7 +31,7 @@ const HoverMenuListItem = _ref => {
     "data-test": dataTest,
     onClick: !disabled && !children && onClick ? onClick : undefined,
     onMouseEnter: disabled ? undefined : children ? onSubmenuAnchorMouseEnter : onMenuItemMouseEnter,
-    className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
+    className: `jsx-${styles.__hash}` + " " + (cx(className, {
       destructive,
       disabled,
       dense,
@@ -40,11 +39,11 @@ const HoverMenuListItem = _ref => {
       'with-chevron': children
     }) || "")
   }, icon && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "icon"
+    className: `jsx-${styles.__hash}` + " " + "icon"
   }, icon), /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "label"
+    className: `jsx-${styles.__hash}` + " " + "label"
   }, label), !!children && /*#__PURE__*/React.createElement("span", {
-    className: "jsx-".concat(styles.__hash) + " " + "chevron"
+    className: `jsx-${styles.__hash}` + " " + "chevron"
   }, /*#__PURE__*/React.createElement(IconChevronRight24, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: styles.__hash
   }, styles)), children && isSubMenuOpen && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
@@ -54,7 +53,6 @@ const HoverMenuListItem = _ref => {
     dense: dense
   }, children))));
 };
-
 HoverMenuListItem.defaultProps = {
   dataTest: 'dhis2-uicore-hovermenulistitem'
 };
@@ -65,13 +63,10 @@ HoverMenuListItem.propTypes = {
   dataTest: PropTypes.string,
   destructive: PropTypes.bool,
   disabled: PropTypes.bool,
-
   /** An icon for the left side of the menu item */
   icon: PropTypes.node,
-
   /** Text in the menu item */
   label: PropTypes.node,
-
   /** Click handler */
   onClick: PropTypes.func
 };

package/build/es/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js

@@ -1,4 +1,4 @@
 import { colors, spacers } from '@dhis2/ui-constants';
-const _defaultExport = ["li.jsx-3263820070{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px ".concat(spacers.dp24, ";cursor:pointer;list-style:none;background-color:").concat(colors.white, ";color:").concat(colors.grey900, ";fill:").concat(colors.grey900, ";font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "li.jsx-3263820070:hover,li.jsx-3263820070:active,li.active.jsx-3263820070{background-color:".concat(colors.grey200, ";}"), "li.dense.jsx-3263820070{padding:0px ".concat(spacers.dp12, ";}"), "li.destructive.jsx-3263820070{color:".concat(colors.red700, ";fill:").concat(colors.red600, ";}"), "li.destructive.jsx-3263820070:hover{background-color:".concat(colors.red050, ";}"), "li.destructive.jsx-3263820070:active,li.destructive.active.jsx-3263820070{background-color:".concat(colors.red100, ";}"), "li.disabled.jsx-3263820070{cursor:not-allowed;color:".concat(colors.grey500, ";fill:").concat(colors.grey500, ";}"), "li.disabled.jsx-3263820070:hover{background-color:".concat(colors.white, ";}"), ".label.jsx-3263820070{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:".concat(spacers.dp12, " 0;}"), "li.dense.jsx-3263820070 .label.jsx-3263820070{padding:".concat(spacers.dp8, " 0;}"), ".icon.jsx-3263820070{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:".concat(spacers.dp12, ";width:24px;height:24px;}"), ".chevron.jsx-3263820070{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:".concat(spacers.dp24, ";}"), "li.dense.jsx-3263820070 .icon.jsx-3263820070{margin-right:".concat(spacers.dp8, ";width:16px;height:16px;}"), "li.jsx-3263820070 .icon.jsx-3263820070>svg{width:24px;height:24px;}", "li.dense.jsx-3263820070 .icon.jsx-3263820070>svg,li.jsx-3263820070 .chevron.jsx-3263820070>svg{width:16px;height:16px;}"];
+const _defaultExport = [`li.jsx-3263820070{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0px ${spacers.dp24};cursor:pointer;list-style:none;background-color:${colors.white};color:${colors.grey900};fill:${colors.grey900};font-size:14px;line-height:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `li.jsx-3263820070:hover,li.jsx-3263820070:active,li.active.jsx-3263820070{background-color:${colors.grey200};}`, `li.dense.jsx-3263820070{padding:0px ${spacers.dp12};}`, `li.destructive.jsx-3263820070{color:${colors.red700};fill:${colors.red600};}`, `li.destructive.jsx-3263820070:hover{background-color:${colors.red050};}`, `li.destructive.jsx-3263820070:active,li.destructive.active.jsx-3263820070{background-color:${colors.red100};}`, `li.disabled.jsx-3263820070{cursor:not-allowed;color:${colors.grey500};fill:${colors.grey500};}`, `li.disabled.jsx-3263820070:hover{background-color:${colors.white};}`, `.label.jsx-3263820070{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:${spacers.dp12} 0;}`, `li.dense.jsx-3263820070 .label.jsx-3263820070{padding:${spacers.dp8} 0;}`, `.icon.jsx-3263820070{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:${spacers.dp12};width:24px;height:24px;}`, `.chevron.jsx-3263820070{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-left:${spacers.dp24};}`, `li.dense.jsx-3263820070 .icon.jsx-3263820070{margin-right:${spacers.dp8};width:16px;height:16px;}`, "li.jsx-3263820070 .icon.jsx-3263820070>svg{width:24px;height:24px;}", "li.dense.jsx-3263820070 .icon.jsx-3263820070>svg,li.jsx-3263820070 .chevron.jsx-3263820070>svg{width:16px;height:16px;}"];
 _defaultExport.__hash = "3263820070";
 export default _defaultExport;

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuBar.spec.js

@@ -102,7 +102,6 @@ describe('<HoverMenuBar/>', () => {
     });
   });
 });
-
 function createFullMenuBarWrapper() {
   let {
     menuItemOnClickSpy,
@@ -156,7 +155,6 @@ function createFullMenuBarWrapper() {
     label: "Menu item C.3"
   })))));
 }
-
 async function expectMenuItemsInDocument(items) {
   for (const [text, inDocument] of items) {
     if (inDocument) {

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuDropdown.spec.js

@@ -5,6 +5,7 @@ describe('<HoverMenuDropdown/>', () => {
   /* Most of the props for this component are included
    * in the mouse interaction tests for the HoverMenuBar.
    * Only the `dataTest` prop needs to be verified here. */
+
   it('accepts a `dataTest` prop', () => {
     const dataTest = 'test';
     const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuDropdown, {

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuList.spec.js

@@ -37,13 +37,13 @@ describe('<HoverMenuList/>', () => {
     const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
       maxHeight: maxHeight
     }, childNode));
-    expect(wrapper.find('style').text()).toContain("max-height: ".concat(maxHeight));
+    expect(wrapper.find('style').text()).toContain(`max-height: ${maxHeight}`);
   });
   it('accept a `maxWidth` prop', () => {
     const maxWidth = '100000px';
     const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuList, {
       maxWidth: maxWidth
     }, childNode));
-    expect(wrapper.find('style').text()).toContain("max-width: ".concat(maxWidth));
+    expect(wrapper.find('style').text()).toContain(`max-width: ${maxWidth}`);
   });
 });

package/build/es/components/Toolbar/HoverMenuBar/__tests__/HoverMenuListItem.spec.js

@@ -6,6 +6,7 @@ describe('<HoverMenuListItem/>', () => {
    * in the mouse interaction tests for the HoverMenuBar.
    * Only the `className`, `dataTest`, `destructive` and
    * `icon` prop need to be verified here. */
+
   it('accepts a `className` prop', () => {
     const className = 'className';
     const wrapper = shallow( /*#__PURE__*/React.createElement(HoverMenuListItem, {

package/build/es/components/Toolbar/InterpretationsAndDetailsToggler.js

@@ -15,7 +15,7 @@ export const InterpretationsAndDetailsToggler = _ref => {
     onClick: onClick,
     disabled: disabled,
     "data-test": dataTest,
-    className: "jsx-1238484262 " + "jsx-".concat(menuButtonStyles.__hash)
+    className: "jsx-1238484262 " + `jsx-${menuButtonStyles.__hash}`
   }, isShowing ? /*#__PURE__*/React.createElement(IconChevronRight24, null) : /*#__PURE__*/React.createElement(IconChevronLeft24, null), i18n.t('Interpretations and details'), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: menuButtonStyles.__hash
   }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {

package/build/es/components/Toolbar/MenuButton.styles.js

@@ -1,4 +1,4 @@
 import { colors, spacers, theme } from '@dhis2/ui-constants';
-const _defaultExport = ["button.jsx-3546699693{all:unset;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;line-height:14px;padding:0 ".concat(spacers.dp12, ";color:").concat(colors.grey900, ";cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "button.jsx-3546699693:hover.jsx-3546699693:enabled,button.jsx-3546699693:active.jsx-3546699693:enabled,button.isOpen.jsx-3546699693{background-color:".concat(colors.grey200, ";}"), "button.jsx-3546699693:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.jsx-3546699693:focus.jsx-3546699693:not(:focus-visible){outline:none;}", "button.jsx-3546699693:disabled{color:".concat(colors.grey500, ";cursor:not-allowed;}")];
+const _defaultExport = [`button.jsx-3546699693{all:unset;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:14px;line-height:14px;padding:0 ${spacers.dp12};color:${colors.grey900};cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, `button.jsx-3546699693:hover.jsx-3546699693:enabled,button.jsx-3546699693:active.jsx-3546699693:enabled,button.isOpen.jsx-3546699693{background-color:${colors.grey200};}`, `button.jsx-3546699693:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, "button.jsx-3546699693:focus.jsx-3546699693:not(:focus-visible){outline:none;}", `button.jsx-3546699693:disabled{color:${colors.grey500};cursor:not-allowed;}`];
 _defaultExport.__hash = "3546699693";
 export default _defaultExport;

package/build/es/components/Toolbar/Toolbar.js

@@ -13,7 +13,7 @@ export const Toolbar = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2617706539",
     dynamic: [colors.grey400, colors.white]
-  }, ["div.__jsx-style-dynamic-selector{box-sizing:border-box;min-height:32px;max-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-bottom:1px solid ".concat(colors.grey400, ";background-color:").concat(colors.white, ";}")]));
+  }, [`div.__jsx-style-dynamic-selector{box-sizing:border-box;min-height:32px;max-height:32px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-bottom:1px solid ${colors.grey400};background-color:${colors.white};}`]));
 };
 Toolbar.defaultProps = {
   dataTest: 'dhis2-analytics-toolbar'

package/build/es/components/Toolbar/ToolbarSidebar.js

@@ -17,7 +17,7 @@ export const ToolbarSidebar = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1150014343",
     dynamic: [colors.grey400]
-  }, ["div.__jsx-style-dynamic-selector{width:260px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-right:1px solid ".concat(colors.grey400, ";}"), "div.isHidden.__jsx-style-dynamic-selector{display:none;}"]));
+  }, [`div.__jsx-style-dynamic-selector{width:260px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;border-right:1px solid ${colors.grey400};}`, "div.isHidden.__jsx-style-dynamic-selector{display:none;}"]));
 };
 ToolbarSidebar.defaultProps = {
   dataTest: 'dhis2-analytics-toolbarsidebar'

package/build/es/components/Toolbar/UpdateButton.js

@@ -17,7 +17,7 @@ export const UpdateButton = _ref => {
     onClick: onClick,
     disabled: disabled,
     "data-test": dataTest,
-    className: "jsx-".concat(menuButtonStyles.__hash) + " " + _JSXStyle.dynamic([["2364287882", [colors.blue700, colors.blue100, colors.blue200]]])
+    className: `jsx-${menuButtonStyles.__hash}` + " " + _JSXStyle.dynamic([["2364287882", [colors.blue700, colors.blue100, colors.blue200]]])
   }, loading ? /*#__PURE__*/React.createElement(CircularLoader, {
     extrasmall: true
   }) : /*#__PURE__*/React.createElement(IconSync16, null), i18n.t('Update'), /*#__PURE__*/React.createElement(_JSXStyle, {
@@ -25,7 +25,7 @@ export const UpdateButton = _ref => {
   }, menuButtonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2364287882",
     dynamic: [colors.blue700, colors.blue100, colors.blue200]
-  }, ["button.__jsx-style-dynamic-selector{gap:8px;color:".concat(colors.blue700, ";font-weight:500;}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:enabled{background:".concat(colors.blue100, ";}"), "button.__jsx-style-dynamic-selector:active{background:".concat(colors.blue200, ";}")]));
+  }, [`button.__jsx-style-dynamic-selector{gap:8px;color:${colors.blue700};font-weight:500;}`, `button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector:enabled{background:${colors.blue100};}`, `button.__jsx-style-dynamic-selector:active{background:${colors.blue200};}`]));
 };
 UpdateButton.defaultProps = {
   dataTest: 'dhis2-analytics-updatebutton'

package/build/es/components/Toolbar/__tests__/InterpretationsAndDetailsToggler.spec.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { InterpretationsAndDetailsToggler } from '../index.js';
 describe('<InterpretationsAndDetailsToggler/>', () => {
   const noop = () => {};
-
   it('accepts an `onClick` prop', () => {
     const onClick = jest.fn();
     const wrapper = shallow( /*#__PURE__*/React.createElement(InterpretationsAndDetailsToggler, {

package/build/es/components/Toolbar/__tests__/UpdateButton.spec.js

@@ -3,7 +3,6 @@ import React from 'react';
 import { UpdateButton } from '../index.js';
 describe('<UpdateButton/>', () => {
   const noop = () => {};
-
   it('accepts an `onClick` prop', () => {
     const onClick = jest.fn();
     const wrapper = shallow( /*#__PURE__*/React.createElement(UpdateButton, {