@dhis2/analytics 26.3.0-dimension-list-alpha.1 → 26.3.0

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.secondary400,
-    height: '6px',
-    width: '6px',
+    backgroundColor: _ui.theme.secondary300,
+    height: '8px',
+    width: '8px',
     borderRadius: '4px',
-    marginLeft: '6px',
+    marginLeft: '5px',
     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.white,
+    backgroundColor: _ui.colors.grey050,
     padding: '8px',
     overflow: 'hidden'
   },

package/build/cjs/components/Interpretations/common/Message/Message.js

@@ -23,23 +23,23 @@ const Message = _ref => {
     fromServerDate
   } = (0, _appRuntime.useTimeZoneConversion)();
   return /*#__PURE__*/_react.default.createElement("li", {
-    className: _style.default.dynamic([["3500389795", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "container"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3500389795", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "header"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "header"
   }, /*#__PURE__*/_react.default.createElement(_ui.UserAvatar, {
     name: username,
     extrasmall: true
   }), username, /*#__PURE__*/_react.default.createElement("time", {
     dateTime: created,
-    className: _style.default.dynamic([["3500389795", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]])
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]])
   }, (0, _moment.default)(fromServerDate(created)).format('lll'))), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3500389795", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "content"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "content"
   }, /*#__PURE__*/_react.default.createElement(_d2UiRichText.Parser, null, text)), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["3500389795", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "footer"
+    className: _style.default.dynamic([["4031345705", [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]]]) + " " + "footer"
   }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3500389795",
+    id: "4031345705",
     dynamic: [_ui.spacers.dp8, _ui.colors.grey100, _ui.spacers.dp8, _ui.colors.grey900, _ui.colors.grey600, _ui.colors.grey900, _ui.spacers.dp8]
-  }, [`.container.__jsx-style-dynamic-selector{padding:${_ui.spacers.dp8};background-color:${_ui.colors.grey100};border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${_ui.spacers.dp8};}`, `.header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:${_ui.colors.grey900};}`, `.header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:${_ui.colors.grey600};}`, `.content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:${_ui.colors.grey900};word-break:break-word;}`, ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", `.footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${_ui.spacers.dp8};}`]));
+  }, [`.container.__jsx-style-dynamic-selector{padding:${_ui.spacers.dp8};background-color:${_ui.colors.grey100};border-radius:5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:${_ui.spacers.dp8};}`, `.header.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:6px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:13px;line-height:16px;color:${_ui.colors.grey900};}`, `.header.__jsx-style-dynamic-selector time.__jsx-style-dynamic-selector{font-size:12px;color:${_ui.colors.grey600};}`, `.content.__jsx-style-dynamic-selector{font-size:14px;line-height:19px;color:${_ui.colors.grey900};word-break:break-word;white-space:pre-line;}`, ".content.__jsx-style-dynamic-selector p:first-child{margin:0;}", `.footer.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;gap:${_ui.spacers.dp8};}`]));
 };
 exports.Message = Message;
 Message.propTypes = {

package/build/cjs/components/Interpretations/common/RichTextEditor/styles/RichTextEditor.style.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tooltipAnchorClasses = exports.toolbarClasses = exports.mainClasses = exports.emojisPopoverClasses = void 0;
 var _ui = require("@dhis2/ui");
-const mainClasses = [".container.jsx-2278350860{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}", `.preview.jsx-2278350860{font-size:14px;line-height:19px;color:${_ui.colors.grey900};}`, `.textarea.jsx-2278350860{width:100%;box-sizing:border-box;padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};color:${_ui.colors.grey900};background-color:${_ui.colors.white};border:1px solid ${_ui.colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:${_ui.spacers.dp16};-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, `.textarea.jsx-2278350860:focus{outline:none;box-shadow:0 0 0 3px ${_ui.theme.focus};}`, `.textarea.jsx-2278350860:disabled{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey500};color:${_ui.theme.disabled};cursor:not-allowed;}`];
+const mainClasses = [".container.jsx-1273817287{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;}", `.preview.jsx-1273817287{font-size:14px;line-height:19px;color:${_ui.colors.grey900};}`, `.textarea.jsx-1273817287{width:100%;box-sizing:border-box;padding:${_ui.spacers.dp8} ${_ui.spacers.dp12};color:${_ui.colors.grey900};background-color:${_ui.colors.white};border:1px solid ${_ui.colors.grey500};border-radius:3px;box-shadow:inset 0 0 0 1px rgba(102,113,123,0.15), inset 0 1px 2px 0 rgba(102,113,123,0.1);outline:0;font-size:14px;line-height:${_ui.spacers.dp16};-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, `.textarea.jsx-1273817287:focus{outline:none;box-shadow:0 0 0 3px ${_ui.theme.focus};width:calc(100% - 3px);}`, `.textarea.jsx-1273817287:disabled{background-color:${_ui.colors.grey100};border-color:${_ui.colors.grey500};color:${_ui.theme.disabled};cursor:not-allowed;}`];
 exports.mainClasses = mainClasses;
-mainClasses.__hash = "2278350860";
+mainClasses.__hash = "1273817287";
 const toolbarClasses = [`.toolbar.jsx-2267496677{background:${_ui.colors.grey050};border-radius:3px;border:1px solid ${_ui.colors.grey300};margin-bottom:${_ui.spacers.dp4};}`, `.actionsWrapper.jsx-2267496677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:${_ui.spacers.dp4};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:${_ui.spacers.dp4};}`, `.mainActions.jsx-2267496677{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_ui.spacers.dp4};margin-top:${_ui.spacers.dp2};}`, ".sideActions.jsx-2267496677{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", `.previewWrapper.jsx-2267496677{margin:${_ui.spacers.dp4};text-align:right;}`];
 exports.toolbarClasses = toolbarClasses;
 toolbarClasses.__hash = "2267496677";

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

@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const HoverMenuDropdown = _ref => {
   let {
     children,
+    className,
     label,
     dataTest,
     disabled
@@ -35,7 +36,7 @@ const HoverMenuDropdown = _ref => {
     disabled: disabled,
     onMouseOver: disabled ? undefined : onDropDownButtonMouseOver,
     "data-test": dataTest,
-    className: `jsx-${_MenuButtonStyles.default.__hash}` + " " + ((0, _classnames.default)({
+    className: `jsx-${_MenuButtonStyles.default.__hash}` + " " + ((0, _classnames.default)(className, {
       isOpen
     }) || "")
   }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
@@ -52,6 +53,7 @@ HoverMenuDropdown.defaultProps = {
 HoverMenuDropdown.propTypes = {
   children: _propTypes.default.node.isRequired,
   label: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool
 };

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

@@ -17,4 +17,12 @@ describe('<HoverMenuDropdown/>', () => {
     }, "children"));
     expect(wrapper.find('button').prop('data-test')).toBe(dataTest);
   });
+  it('accepts a `className` prop', () => {
+    const className = 'test';
+    const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_index.HoverMenuDropdown, {
+      label: "test dropdown",
+      className: className
+    }, "children"));
+    expect(wrapper.find('button')).toHaveClassName(className);
+  });
 });

package/build/cjs/locales/lo/translations.json

@@ -19,10 +19,10 @@
     "About this line list": "",
     "About this visualization": "",
     "This app could not retrieve required data.": "",
-    "Network error": "",
+    "Network error": "ຂໍ້ຜິດພາດທາງເຄື່ອຂ່າຍ",
     "Data / Edit calculation": "",
     "Data / New calculation": "",
-    "Remove item": "",
+    "Remove item": "ລົບລາຍການ",
     "Check formula": "",
     "Calculation name": "",
     "Shown in table headers and chart axes/legends": "",
@@ -106,6 +106,7 @@
     "Edit": "ແກ້ໄຂ",
     "Write a reply": "",
     "Post reply": "",
+    "Delete failed": "",
     "Could not update comment": "",
     "Enter comment text": "",
     "Update": "ປັບປຸງ",
@@ -114,11 +115,14 @@
     "The interpretation couldn’t be displayed. Try again or contact your system administrator.": "",
     "Hide interpretation": "",
     "Write an interpretation": "",
+    "Other people viewing this interpretation in the future may see more data.": "",
     "Post interpretation": "",
     "Interpretations": "ການແປຂໍ້ມູນ",
+    "Reply": "ຕອບກັບ",
+    "{{count}} replies": "",
+    "View replies": "",
     "Unlike": "ບໍ່ມັກ",
     "Like": "ມັກ",
-    "Reply": "ຕອບກັບ",
     "Share": "ເຜີຍແຜ່",
     "See interpretation": "",
     "Manage sharing": "",
@@ -263,6 +267,7 @@
     "Six-months": "6 ເດືອນ",
     "Financial Years": "",
     "Years": "ປີ",
+    "Interpretations and details": "",
     "Translating to": "",
     "Choose a locale": "",
     "Base locale reference": "",

package/build/cjs/locales/sv/translations.json

@@ -107,6 +107,7 @@
     "Edit": "Redigera",
     "Write a reply": "",
     "Post reply": "",
+    "Delete failed": "",
     "Could not update comment": "",
     "Enter comment text": "",
     "Update": "Uppdatera",
@@ -115,11 +116,15 @@
     "The interpretation couldn’t be displayed. Try again or contact your system administrator.": "",
     "Hide interpretation": "",
     "Write an interpretation": "",
+    "Other people viewing this interpretation in the future may see more data.": "",
     "Post interpretation": "",
     "Interpretations": "tolkningar",
+    "Reply": "Svar",
+    "{{count}} replies": "",
+    "{{count}} replies_plural": "",
+    "View replies": "",
     "Unlike": "",
     "Like": "",
-    "Reply": "Svar",
     "Share": "Dela med sig",
     "See interpretation": "",
     "Manage sharing": "",
@@ -190,7 +195,7 @@
     "User sub-x2-units": "Användarunder x2-enheter",
     "Select a level": "",
     "Select a group": "",
-    "Deselect all": "",
+    "Deselect all": "Avmarkera alla",
     "Period type": "Periodtyp",
     "Year": "År",
     "Select year": "Välj år",
@@ -267,6 +272,7 @@
     "Six-months": "",
     "Financial Years": "",
     "Years": "År",
+    "Interpretations and details": "",
     "Translating to": "",
     "Choose a locale": "",
     "Base locale reference": "",

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

@@ -62,7 +62,6 @@ 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/assets/DynamicDimensionIcon.js

@@ -1,21 +1,47 @@
 import React from 'react';
 const DynamicDimensionIcon = () => {
   return /*#__PURE__*/React.createElement("svg", {
-    width: "16",
-    height: "16",
-    fill: "none",
+    width: "16px",
+    height: "16px",
+    viewBox: "0 0 16 16",
+    version: "1.1",
     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",
+  }, /*#__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",
     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: "M8 7.228 4.822 5.982M8 7.228l3.178-1.246M8 11.281V7.228",
-    stroke: "#212934",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+    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"
+  }))))));
 };
 export default DynamicDimensionIcon;

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

@@ -2,15 +2,14 @@ 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 { CssVariables } from '@dhis2/ui';
-import cx from 'classnames';
+import { IconLock16 } from '@dhis2/ui';
 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 style from './styles/DimensionItem.module.css';
+import { styles } from './styles/DimensionItem.style.js';
 class DimensionItem extends Component {
   constructor() {
     super(...arguments);
@@ -31,18 +30,23 @@ class DimensionItem extends Component {
     _defineProperty(this, "getDimensionIcon", () => {
       const Icon = getPredefinedDimensionProp(this.props.id, 'icon');
       return Icon ? /*#__PURE__*/React.createElement(Icon, {
-        className: style.fixedDimensionIcon
+        style: styles.fixedDimensionIcon
       }) : /*#__PURE__*/React.createElement(DynamicDimensionIcon, {
-        className: "dynamic-dimension-icon"
+        style: styles.dynamicDimensionIcon
       });
     });
     _defineProperty(this, "getDimensionType", () => {
       const {
         id,
-        name
+        name,
+        isDeactivated
       } = this.props;
       return /*#__PURE__*/React.createElement("span", {
-        "data-dimensionid": id
+        "data-dimensionid": id,
+        style: {
+          ...styles.text,
+          ...(isDeactivated ? styles.textDeactivated : {})
+        }
       }, name);
     });
   }
@@ -56,63 +60,51 @@ 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(React.Fragment, null, /*#__PURE__*/React.createElement(CssVariables, {
-      colors: true
-    }), /*#__PURE__*/React.createElement("li", _extends({
+    return /*#__PURE__*/React.createElement("li", _extends({
       onMouseOver: this.onMouseOver,
       onMouseLeave: this.onMouseExit,
       ref: innerRef,
-      className: cx(style.item, {
-        [style.deactivated]: isDeactivated,
-        [style.selected]: isSelected && !isDeactivated
-      }, className),
+      style: Object.assign({}, itemStyle, style, !isDeactivated && styles.clickable),
       "data-test": dataTest,
       onClick: onLabelClick
     }, rest), /*#__PURE__*/React.createElement("div", {
-      className: style.label,
+      className: "label",
       tabIndex: 0,
+      style: styles.label,
       "data-test": `${dataTest}-button-${id}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: style.iconWrapper
+      style: styles.iconWrapper
     }, Icon), /*#__PURE__*/React.createElement("div", {
-      className: style.labelWrapper
-    }, /*#__PURE__*/React.createElement("span", {
-      className: style.labelText
-    }, Label), /*#__PURE__*/React.createElement(RecommendedIcon, {
+      style: styles.labelWrapper
+    }, Label, /*#__PURE__*/React.createElement(RecommendedIcon, {
       isRecommended: isRecommended,
       dataTest: `${dataTest}-recommended-icon`
-    }))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
-      className: style.optionsWrapper,
+    })), isLocked && /*#__PURE__*/React.createElement("div", {
+      style: styles.iconWrapper
+    }, /*#__PURE__*/React.createElement(IconLock16, null))), onOptionsClick ? /*#__PURE__*/React.createElement("div", {
+      style: styles.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, isLocked && /*#__PURE__*/React.createElement("div", {
-      className: style.lockWrapper
-    }, LockIcon)));
+    }) : null) : null);
   }
 }
 DimensionItem.propTypes = {
@@ -120,12 +112,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,19 +1,18 @@
-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(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);}"]));
+  return /*#__PURE__*/React.createElement("button", {
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(IconMore16, null));
 };
 OptionsButton.propTypes = {
+  style: PropTypes.object,
   onClick: PropTypes.func
 };
 export default OptionsButton;

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

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