@dhis2/analytics 26.3.0-alpha.3 → 999.9.9-TE-alpha.1

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

@@ -1,17 +1,15 @@
-import _JSXStyle from "styled-jsx/style";
 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); }
 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 styles from './styles/DimensionItem.style.js';
+import { styles } from './styles/DimensionItem.style.js';
 class DimensionItem extends Component {
   constructor() {
     super(...arguments);
@@ -32,18 +30,23 @@ class DimensionItem extends Component {
     _defineProperty(this, "getDimensionIcon", () => {
       const Icon = getPredefinedDimensionProp(this.props.id, 'icon');
       return Icon ? /*#__PURE__*/React.createElement(Icon, {
-        className: "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);
     });
   }
@@ -57,66 +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,
+      style: Object.assign({}, itemStyle, style, !isDeactivated && styles.clickable),
       "data-test": dataTest,
       onClick: onLabelClick
-    }, rest, {
-      className: `jsx-${styles.__hash}` + " " + (rest && rest.className != null && rest.className || cx('item', {
-        deactivated: isDeactivated,
-        selected: isSelected && !isDeactivated
-      }, className) || "")
-    }), /*#__PURE__*/React.createElement("div", {
+    }, rest), /*#__PURE__*/React.createElement("div", {
+      className: "label",
       tabIndex: 0,
-      "data-test": `${dataTest}-button-${id}`,
-      className: `jsx-${styles.__hash}` + " " + "label"
+      style: styles.label,
+      "data-test": `${dataTest}-button-${id}`
     }, /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "iconWrapper"
+      style: styles.iconWrapper
     }, Icon), /*#__PURE__*/React.createElement("div", {
-      className: `jsx-${styles.__hash}` + " " + "labelWrapper"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `jsx-${styles.__hash}` + " " + "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", {
+    })), 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}`,
-      className: `jsx-${styles.__hash}` + " " + "optionsWrapper"
+      "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: `jsx-${styles.__hash}` + " " + "lockWrapper"
-    }, LockIcon)), /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: styles.__hash
-    }, styles));
+    }) : null) : null);
   }
 }
 DimensionItem.propTypes = {
@@ -124,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