@dhis2/analytics 26.3.0-alpha.1 → 26.3.0-alpha.2

package/build/cjs/components/DimensionsPanel/List/styles/RecommendedIcon.style.js

@@ -7,11 +7,11 @@ exports.styles = void 0;
 var _ui = require("@dhis2/ui");
 const styles = {
   recommendedIcon: {
-    backgroundColor: _ui.theme.secondary300,
-    height: '8px',
-    width: '8px',
+    backgroundColor: _ui.theme.secondary400,
+    height: '6px',
+    width: '6px',
     borderRadius: '4px',
-    marginLeft: '5px',
+    marginLeft: '6px',
     display: 'inline-block',
     cursor: 'pointer'
   }

package/build/cjs/components/DimensionsPanel/styles/DimensionsPanel.style.js

@@ -10,7 +10,7 @@ const styles = {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: _ui.colors.grey050,
+    backgroundColor: _ui.colors.white,
     padding: '8px',
     overflow: 'hidden'
   },

package/build/cjs/modules/layout/dimension.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DIMENSION_PROP_REPETITION = exports.DIMENSION_PROP_PROGRAM_STAGE = exports.DIMENSION_PROP_PROGRAM = exports.DIMENSION_PROP_LEGEND_SET = exports.DIMENSION_PROP_ITEMS = exports.DIMENSION_PROP_ID = exports.DIMENSION_PROP_FILTER = exports.DIMENSION_PROPS = exports.DIMENSION = void 0;
+exports.DIMENSION_PROP_REPETITION = exports.DIMENSION_PROP_PROGRAM_STAGE = exports.DIMENSION_PROP_LEGEND_SET = exports.DIMENSION_PROP_ITEMS = exports.DIMENSION_PROP_ID = exports.DIMENSION_PROP_FILTER = exports.DIMENSION_PROPS = exports.DIMENSION = void 0;
 var _isObject = _interopRequireDefault(require("lodash/isObject"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,13 +43,6 @@ const DIMENSION_PROP_LEGEND_SET = {
   isValid: prop => (0, _isString.default)(prop)
 };
 exports.DIMENSION_PROP_LEGEND_SET = DIMENSION_PROP_LEGEND_SET;
-const DIMENSION_PROP_PROGRAM = {
-  name: 'program',
-  defaultValue: {},
-  required: false,
-  isValid: prop => (0, _isObject.default)(prop)
-};
-exports.DIMENSION_PROP_PROGRAM = DIMENSION_PROP_PROGRAM;
 const DIMENSION_PROP_PROGRAM_STAGE = {
   name: 'programStage',
   defaultValue: {},
@@ -64,5 +57,5 @@ const DIMENSION_PROP_REPETITION = {
   isValid: prop => Array.isArray(prop)
 };
 exports.DIMENSION_PROP_REPETITION = DIMENSION_PROP_REPETITION;
-const DIMENSION_PROPS = [DIMENSION_PROP_ID, DIMENSION_PROP_ITEMS, DIMENSION_PROP_FILTER, DIMENSION_PROP_LEGEND_SET, DIMENSION_PROP_PROGRAM, DIMENSION_PROP_PROGRAM_STAGE, DIMENSION_PROP_REPETITION];
+const DIMENSION_PROPS = [DIMENSION_PROP_ID, DIMENSION_PROP_ITEMS, DIMENSION_PROP_FILTER, DIMENSION_PROP_LEGEND_SET, DIMENSION_PROP_PROGRAM_STAGE, DIMENSION_PROP_REPETITION];
 exports.DIMENSION_PROPS = DIMENSION_PROPS;

package/build/cjs/modules/layout/dimensionCreate.js

@@ -21,9 +21,6 @@ const dimensionCreate = function (dimensionId) {
     ...(args.legendSet && {
       [_dimension.DIMENSION_PROP_LEGEND_SET.name]: args.legendSet
     }),
-    ...(args.program && {
-      [_dimension.DIMENSION_PROP_PROGRAM.name]: args.program
-    }),
     ...(args.programStage && {
       [_dimension.DIMENSION_PROP_PROGRAM_STAGE.name]: args.programStage
     }),

package/build/es/__demo__/DimensionsPanel.stories.js

@@ -62,6 +62,7 @@ storiesOf('DimensionsPanel', module).add('locked dimension', () => {
   return /*#__PURE__*/React.createElement(DimensionsPanel, {
     dimensions: [...fixedDimensions, ...dynamicDimensions],
     onDimensionClick: onDimensionClick,
+    selectedIds: [DIMENSION_ID_DATA],
     lockedDimension: dimension => dimension === DIMENSION_ID_DATA
   });
 });

package/build/es/api/analytics/Analytics.js

@@ -6,15 +6,12 @@ import AnalyticsEnrollments from './AnalyticsEnrollments.js';
 import AnalyticsEvents from './AnalyticsEvents.js';
 import AnalyticsRequest from './AnalyticsRequest.js';
 import AnalyticsResponse from './AnalyticsResponse.js';
-import AnalyticsTrackedEntities from './AnalyticsTrackedEntities.js';
 
 /**
  * @description
  * Analytics class used to request analytics data from Web API.
  *
  * @requires analytics.AnalyticsAggregate
- * @requires analytics.AnalyticsTrackedEntities
- * @requires analytics.AnalyticsEnrollments
  * @requires analytics.AnalyticsEvents
  * @requires analytics.AnalyticsRequest
  * @requires analytics.AnalyticsResponse
@@ -34,7 +31,6 @@ import AnalyticsTrackedEntities from './AnalyticsTrackedEntities.js';
 class Analytics {
   /**
    * @param {!module:analytics.AnalyticsAggregate} analyticsAggregate The AnalyticsAggregate instance
-   * @param {!module:analytics.AnalyticsTrackedEntities} analyticsTrackedEntities The AnalyticsTrackedEntities instance
    * @param {!module:analytics.AnalyticsEnrollments} analyticsEnrollments The AnalyticsEnrollments instance
    * @param {!module:analytics.AnalyticsEvents} analyticsEvents The AnalyticsEvents instance
    * @param {!module:analytics.AnalyticsRequest} analyticsRequest The AnalyticsRequest class
@@ -43,14 +39,12 @@ class Analytics {
   constructor(_ref) {
     let {
       aggregate,
-      trackedEntities,
       enrollments,
       events,
       request,
       response
     } = _ref;
     this.aggregate = aggregate;
-    this.trackedEntities = trackedEntities;
     this.enrollments = enrollments;
     this.events = events;
     this.request = request;
@@ -73,7 +67,6 @@ class Analytics {
     if (!Analytics.getAnalytics.analytics) {
       Analytics.getAnalytics.analytics = new Analytics({
         aggregate: new AnalyticsAggregate(dataEngine),
-        trackedEntities: new AnalyticsTrackedEntities(dataEngine),
         enrollments: new AnalyticsEnrollments(dataEngine),
         events: new AnalyticsEvents(dataEngine),
         request: AnalyticsRequest,

package/build/es/api/analytics/AnalyticsBase.js

@@ -1,19 +1,13 @@
 import sortBy from 'lodash/sortBy';
 import AnalyticsRequest from './AnalyticsRequest.js';
-import { formatRequestPath } from './utils.js';
 const analyticsQuery = {
   resource: 'analytics',
   id: _ref => {
     let {
       path,
-      program,
-      trackedEntityType
+      program
     } = _ref;
-    return formatRequestPath({
-      path,
-      program,
-      trackedEntityType
-    });
+    return [path, program].filter(Boolean).join('/');
   },
   params: _ref2 => {
     let {
@@ -33,14 +27,9 @@ const analyticsDataQuery = {
   id: _ref3 => {
     let {
       path,
-      program,
-      trackedEntityType
+      program
     } = _ref3;
-    return formatRequestPath({
-      path,
-      program,
-      trackedEntityType
-    });
+    return [path, program].filter(Boolean).join('/');
   },
   params: _ref4 => {
     let {
@@ -62,14 +51,9 @@ const analyticsMetaDataQuery = {
   id: _ref5 => {
     let {
       path,
-      program,
-      trackedEntityType
+      program
     } = _ref5;
-    return formatRequestPath({
-      path,
-      program,
-      trackedEntityType
-    });
+    return [path, program].filter(Boolean).join('/');
   },
   params: _ref6 => {
     let {
@@ -161,7 +145,6 @@ class AnalyticsBase {
       variables: {
         path: req.path,
         program: req.program,
-        trackedEntityType: req.trackedEntityType,
         dimensions: generateDimensionStrings(req.dimensions),
         filters: generateDimensionStrings(req.filters),
         parameters: req.parameters,
@@ -204,7 +187,6 @@ class AnalyticsBase {
       variables: {
         path: req.path,
         program: req.program,
-        trackedEntityType: req.trackedEntityType,
         dimensions: generateDimensionStrings(req.dimensions, options),
         filters: generateDimensionStrings(req.filters, options),
         parameters: req.parameters

package/build/es/api/analytics/AnalyticsRequest.js

@@ -4,7 +4,6 @@ import AnalyticsRequestBase from './AnalyticsRequestBase.js';
 import AnalyticsRequestDimensionsMixin from './AnalyticsRequestDimensionsMixin.js';
 import AnalyticsRequestFiltersMixin from './AnalyticsRequestFiltersMixin.js';
 import AnalyticsRequestPropertiesMixin from './AnalyticsRequestPropertiesMixin.js';
-import { formatDimension } from './utils.js';
 
 /**
  * @description
@@ -42,7 +41,6 @@ class AnalyticsRequest extends AnalyticsRequestDimensionsMixin(AnalyticsRequestF
   fromVisualization(visualization) {
     let passFilterAsDimension = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     let request = this;
-    const outputType = visualization.outputType;
 
     // extract dimensions from visualization
     const columns = visualization.columns || [];
@@ -53,28 +51,19 @@ class AnalyticsRequest extends AnalyticsRequestDimensionsMixin(AnalyticsRequestF
       if ((_d$legendSet = d.legendSet) !== null && _d$legendSet !== void 0 && _d$legendSet.id) {
         dimension += `-${d.legendSet.id}`;
       }
+      if ((_d$programStage = d.programStage) !== null && _d$programStage !== void 0 && _d$programStage.id) {
+        dimension = `${d.programStage.id}.${dimension}`;
+      }
       if (d.filter) {
         dimension += `:${d.filter}`;
       }
-      const programStageId = (_d$programStage = d.programStage) === null || _d$programStage === void 0 ? void 0 : _d$programStage.id;
       if ((_d$repetition = d.repetition) !== null && _d$repetition !== void 0 && (_d$repetition$indexes = _d$repetition.indexes) !== null && _d$repetition$indexes !== void 0 && _d$repetition$indexes.length) {
         d.repetition.indexes.forEach(index => {
-          var _d$program;
-          request = request.addDimension(formatDimension({
-            programId: (_d$program = d.program) === null || _d$program === void 0 ? void 0 : _d$program.id,
-            programStageId: `${programStageId}[${index}]`,
-            dimension,
-            outputType
-          }));
+          request = request.addDimension(dimension.replace(/\./, `[${index}].`));
         });
       } else {
-        var _d$program2, _d$items;
-        request = request.addDimension(formatDimension({
-          programId: (_d$program2 = d.program) === null || _d$program2 === void 0 ? void 0 : _d$program2.id,
-          programStageId,
-          dimension,
-          outputType
-        }), (_d$items = d.items) === null || _d$items === void 0 ? void 0 : _d$items.map(item => item.id));
+        var _d$items;
+        request = request.addDimension(dimension, (_d$items = d.items) === null || _d$items === void 0 ? void 0 : _d$items.map(item => item.id));
       }
     });
 
@@ -89,29 +78,17 @@ class AnalyticsRequest extends AnalyticsRequestDimensionsMixin(AnalyticsRequestF
         request = request.addDimension(f.dimension, (_f$items = f.items) === null || _f$items === void 0 ? void 0 : _f$items.map(item => item.id));
       } else {
         var _f$programStage, _f$repetition, _f$repetition$indexes;
-        let filterString = f.dimension;
+        let filterString = (_f$programStage = f.programStage) !== null && _f$programStage !== void 0 && _f$programStage.id ? `${f.programStage.id}.${f.dimension}` : f.dimension;
         if (f.filter) {
           filterString += `:${f.filter}`;
         }
-        const programStageId = (_f$programStage = f.programStage) === null || _f$programStage === void 0 ? void 0 : _f$programStage.id;
         if ((_f$repetition = f.repetition) !== null && _f$repetition !== void 0 && (_f$repetition$indexes = _f$repetition.indexes) !== null && _f$repetition$indexes !== void 0 && _f$repetition$indexes.length) {
           f.repetition.indexes.forEach(index => {
-            var _f$program;
-            request = request.addFilter(formatDimension({
-              programId: (_f$program = f.program) === null || _f$program === void 0 ? void 0 : _f$program.id,
-              programStageId: `${programStageId}[${index}]`,
-              dimension: filterString,
-              outputType
-            }));
+            request = request.addFilter(filterString.replace(/\./, `[${index}].`));
           });
         } else {
-          var _f$program2, _f$items2;
-          request = request.addFilter(formatDimension({
-            programId: (_f$program2 = f.program) === null || _f$program2 === void 0 ? void 0 : _f$program2.id,
-            programStageId,
-            dimension: filterString,
-            outputType
-          }), (_f$items2 = f.items) === null || _f$items2 === void 0 ? void 0 : _f$items2.map(item => item.id));
+          var _f$items2;
+          request = request.addFilter(filterString, (_f$items2 = f.items) === null || _f$items2 === void 0 ? void 0 : _f$items2.map(item => item.id));
         }
       }
     });

package/build/es/api/analytics/AnalyticsRequestBase.js

@@ -18,7 +18,6 @@ class AnalyticsRequestBase {
       format = 'json',
       path,
       program,
-      trackedEntityType,
       dimensions = [],
       filters = [],
       parameters = {}
@@ -27,7 +26,6 @@ class AnalyticsRequestBase {
     this.format = format.toLowerCase();
     this.path = path;
     this.program = program;
-    this.trackedEntityType = trackedEntityType;
     this.dimensions = dimensions;
     this.filters = filters;
     this.parameters = {
@@ -66,7 +64,7 @@ class AnalyticsRequestBase {
       }
       return dimension;
     });
-    const endPoint = [this.endPoint, this.path, this.program, this.trackedEntityType].filter(Boolean).join('/');
+    const endPoint = [this.endPoint, this.path, this.program].filter(e => !!e).join('/');
     return `${endPoint}.${this.format}?dimension=${encodedDimensions.join('&dimension=')}`;
   }
 

package/build/es/api/analytics/AnalyticsRequestPropertiesMixin.js

@@ -491,25 +491,6 @@ class extends base {
     return new AnalyticsRequest(this);
   }
 
-  /**
-   * Sets the tracked entity type for the request.
-   * It appends the tracked entity type id to the request's path.
-   *
-   * @param {!String} trackedEntityType The tracked entity type id
-   *
-   * @returns {AnalyticsRequest} A new instance of the class for chaining purposes
-   *
-   * @example
-   * const req = new analytics.request()
-   *    .withTrackedEntityType('nEenWmSyUEp');
-   */
-  withTrackedEntityType(trackedEntityType) {
-    if (trackedEntityType) {
-      this.trackedEntityType = trackedEntityType;
-    }
-    return new AnalyticsRequest(this);
-  }
-
   /**
    * Sets the program for the request.
    * It appends the program id to the request's path.

package/build/es/api/analytics/utils.js

@@ -2,23 +2,4 @@
 const whitelistURI = ',&$=/;:';
 const whitelistURICodes = whitelistURI.split('').map(c => encodeURIComponent(c));
 const whitelistRegExp = new RegExp(`(?:${whitelistURICodes.join('|')})`, 'g');
-export const customEncodeURIComponent = uri => encodeURIComponent(uri).replace(whitelistRegExp, decodeURIComponent);
-export const formatRequestPath = _ref => {
-  let {
-    path,
-    program,
-    trackedEntityType
-  } = _ref;
-  return [path, program, trackedEntityType].filter(Boolean).join('/');
-};
-export const formatDimension = _ref2 => {
-  let {
-    outputType,
-    programId,
-    programStageId,
-    dimension
-  } = _ref2;
-  return [
-  // XXX it would be clearer to have this consistent with what is sent in the request as for EVENT/ENROLLMENT
-  outputType === 'TRACKED_ENTITY' ? programId : undefined, programStageId, dimension].filter(Boolean).join('.');
-};
+export const customEncodeURIComponent = uri => encodeURIComponent(uri).replace(whitelistRegExp, decodeURIComponent);

package/build/es/assets/DynamicDimensionIcon.js

@@ -1,47 +1,21 @@
 import React from 'react';
 const DynamicDimensionIcon = () => {
   return /*#__PURE__*/React.createElement("svg", {
-    width: "16px",
-    height: "16px",
-    viewBox: "0 0 16 16",
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Exp",
-    stroke: "none",
-    strokeWidth: "1",
-    fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "Artboard",
-    transform: "translate(-80.000000, -9.000000)"
-  }, /*#__PURE__*/React.createElement("g", {
-    id: "icon_dimension_new",
-    transform: "translate(80.000000, 9.000000)"
-  }, /*#__PURE__*/React.createElement("rect", {
-    id: "frame",
-    x: "0",
-    y: "0",
     width: "16",
-    height: "16"
-  }), /*#__PURE__*/React.createElement("g", {
-    id: "module",
-    transform: "translate(4.000000, 4.000000)",
-    stroke: "#000000",
+    height: "16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    clipRule: "evenodd",
+    d: "m4.832 5.674 2.831-1.11a.913.913 0 0 1 .673 0l2.83 1.11a.548.548 0 0 1 .334.517V9.81a.548.548 0 0 1-.332.517l-2.831 1.11a.92.92 0 0 1-.673 0l-2.83-1.11a.548.548 0 0 1-.334-.517V6.19a.548.548 0 0 1 .332-.517Z",
+    stroke: "#212934",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M0.33209728,1.1742111 L3.16308174,0.0641666694 C3.37911767,-0.0213888898 3.61963794,-0.0213888898 3.83567387,0.0641666694 L6.66665833,1.1742111 C6.87300668,1.26220739 7.00497003,1.467 6.99984343,1.69127776 L6.99984343,5.30887771 C7.00517859,5.53285411 6.87376309,5.73756106 6.66790272,5.82594437 L3.83691826,6.93629991 C3.62076407,7.02123336 3.38048032,7.02123336 3.16432613,6.93629991 L0.333341668,5.82594437 C0.126993317,5.73794808 -0.00497002591,5.53315547 0.000156574133,5.30887771 L0.000156574133,1.69127776 C-0.00517858533,1.46730136 0.126236906,1.26259441 0.33209728,1.1742111 Z",
-    id: "Shape"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M3.5,2.72795833 L0.322,1.48195833",
-    id: "Shape"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M3.5,2.72795833 L6.678,1.48195833",
-    id: "Shape"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M3.5,6.78125 L3.5,2.72795833",
-    id: "Shape"
-  }))))));
+    d: "M8 7.228 4.822 5.982M8 7.228l3.178-1.246M8 11.281V7.228",
+    stroke: "#212934",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
 };
 export default DynamicDimensionIcon;

package/build/es/components/DimensionsPanel/List/DimensionItem.js

@@ -2,14 +2,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-import { IconLock16 } from '@dhis2/ui';
+import { CssVariables } from '@dhis2/ui';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component, createRef } from 'react';
 import DynamicDimensionIcon from '../../../assets/DynamicDimensionIcon.js';
 import { DIMENSION_PROP_NO_ITEMS, getPredefinedDimensionProp } from '../../../modules/predefinedDimensions.js';
 import OptionsButton from './OptionsButton.js';
 import RecommendedIcon from './RecommendedIcon.js';
-import { styles } from './styles/DimensionItem.style.js';
+import style from './styles/DimensionItem.module.css';
 class DimensionItem extends Component {
   constructor() {
     super(...arguments);
@@ -30,23 +31,18 @@ class DimensionItem extends Component {
     _defineProperty(this, "getDimensionIcon", () => {
       const Icon = getPredefinedDimensionProp(this.props.id, 'icon');
       return Icon ? /*#__PURE__*/React.createElement(Icon, {
-        style: styles.fixedDimensionIcon
+        className: style.fixedDimensionIcon
       }) : /*#__PURE__*/React.createElement(DynamicDimensionIcon, {
-        style: styles.dynamicDimensionIcon
+        className: "dynamic-dimension-icon"
       });
     });
     _defineProperty(this, "getDimensionType", () => {
       const {
         id,
-        name,
-        isDeactivated
+        name
       } = this.props;
       return /*#__PURE__*/React.createElement("span", {
-        "data-dimensionid": id,
-        style: {
-          ...styles.text,
-          ...(isDeactivated ? styles.textDeactivated : {})
-        }
+        "data-dimensionid": id
       }, name);
     });
   }
@@ -60,51 +56,63 @@ class DimensionItem extends Component {
       onClick,
       onOptionsClick,
       innerRef,
-      style,
       dataTest,
+      className,
       ...rest
     } = this.props;
     const Icon = this.getDimensionIcon();
     const Label = this.getDimensionType();
-    const itemStyle = isSelected && !isDeactivated ? {
-      ...styles.item,
-      ...styles.selected
-    } : styles.item;
     const optionsRef = /*#__PURE__*/createRef();
+    const LockIcon = /*#__PURE__*/React.createElement("svg", {
+      width: "7",
+      height: "9",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, /*#__PURE__*/React.createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z",
+      fill: "none"
+    }));
     const onLabelClick = () => {
       if (!isDeactivated && !getPredefinedDimensionProp(id, DIMENSION_PROP_NO_ITEMS)) {
         onClick(id);
       }
     };
-    return /*#__PURE__*/React.createElement("li", _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
+      colors: true
+    }), /*#__PURE__*/React.createElement("li", _extends({
       onMouseOver: this.onMouseOver,
       onMouseLeave: this.onMouseExit,
       ref: innerRef,
-      style: Object.assign({}, itemStyle, style, !isDeactivated && styles.clickable),
+      className: cx(style.item, {
+        [style.deactivated]: isDeactivated,
+        [style.selected]: isSelected && !isDeactivated
+      }, className),
       "data-test": dataTest,
       onClick: onLabelClick
     }, rest), /*#__PURE__*/React.createElement("div", {
-      className: "label",
+      className: style.label,
       tabIndex: 0,
-      style: styles.label,
       "data-test": `${dataTest}-button-${id}`
     }, /*#__PURE__*/React.createElement("div", {
-      style: styles.iconWrapper
+      className: style.iconWrapper
     }, Icon), /*#__PURE__*/React.createElement("div", {
-      style: styles.labelWrapper
-    }, Label, /*#__PURE__*/React.createElement(RecommendedIcon, {
+      className: style.labelWrapper
+    }, /*#__PURE__*/React.createElement("span", {
+      className: style.labelText
+    }, Label), /*#__PURE__*/React.createElement(RecommendedIcon, {
       isRecommended: isRecommended,
       dataTest: `${dataTest}-recommended-icon`
-    })), isLocked && /*#__PURE__*/React.createElement("div", {
-      style: styles.iconWrapper
-    }, /*#__PURE__*/React.createElement(IconLock16, null))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
-      style: styles.optionsWrapper,
+    }))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
+      className: style.optionsWrapper,
       ref: optionsRef,
       "data-test": `${dataTest}-menu-${id}`
     }, this.state.mouseOver && !isDeactivated && !isLocked ? /*#__PURE__*/React.createElement(OptionsButton, {
-      style: styles.optionsButton,
       onClick: this.onOptionsClick(id, optionsRef)
-    }) : null) : null);
+    }) : null) : null, isLocked && /*#__PURE__*/React.createElement("div", {
+      className: style.lockWrapper
+    }, LockIcon)));
   }
 }
 DimensionItem.propTypes = {
@@ -112,12 +120,12 @@ DimensionItem.propTypes = {
   isSelected: PropTypes.bool.isRequired,
   // XXX
   name: PropTypes.string.isRequired,
+  className: PropTypes.string,
   dataTest: PropTypes.string,
   innerRef: PropTypes.func,
   isDeactivated: PropTypes.bool,
   isLocked: PropTypes.bool,
   isRecommended: PropTypes.bool,
-  style: PropTypes.object,
   onClick: PropTypes.func,
   onOptionsClick: PropTypes.func
 };

package/build/es/components/DimensionsPanel/List/OptionsButton.js

@@ -1,18 +1,19 @@
+import _JSXStyle from "styled-jsx/style";
 import { IconMore16 } from '@dhis2/ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 const OptionsButton = _ref => {
   let {
-    style,
     onClick
   } = _ref;
-  return /*#__PURE__*/React.createElement("button", {
-    style: style,
-    onClick: onClick
-  }, /*#__PURE__*/React.createElement(IconMore16, null));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    className: "jsx-2728765288"
+  }, /*#__PURE__*/React.createElement(IconMore16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2728765288"
+  }, ["button.jsx-2728765288{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-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:20px;width:20px;padding:0;border:none;background:none;outline:none;cursor:pointer;border-top-right-radius:2px;border-bottom-left-radius:2px;}", "button.jsx-2728765288:hover{background-color:rgba(0,0,0,0.09);}"]));
 };
 OptionsButton.propTypes = {
-  style: PropTypes.object,
   onClick: PropTypes.func
 };
 export default OptionsButton;

package/build/es/components/DimensionsPanel/List/RecommendedIcon.js

@@ -10,8 +10,7 @@ const RecommendedIcon = _ref => {
   } = _ref;
   return isRecommended ? /*#__PURE__*/React.createElement(Tooltip, {
     content: i18n.t('Dimension recommended with selected data'),
-    placement: "bottom",
-    maxWidth: 160
+    placement: "bottom"
   }, /*#__PURE__*/React.createElement("div", {
     style: styles.recommendedIcon,
     "data-test": dataTest