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

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

@@ -65,7 +65,6 @@ const onDimensionClick = () => alert('click');
   return /*#__PURE__*/_react2.default.createElement(_DimensionsPanel.default, {
     dimensions: [...fixedDimensions, ...dynamicDimensions],
     onDimensionClick: onDimensionClick,
-    selectedIds: [_predefinedDimensions.DIMENSION_ID_DATA],
     lockedDimension: dimension => dimension === _predefinedDimensions.DIMENSION_ID_DATA
   });
 });

package/build/cjs/assets/DynamicDimensionIcon.js

@@ -8,22 +8,48 @@ var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const DynamicDimensionIcon = () => {
   return /*#__PURE__*/_react.default.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.default.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.default.createElement("g", {
+    id: "Exp",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "Artboard",
+    transform: "translate(-80.000000, -9.000000)"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    id: "icon_dimension_new",
+    transform: "translate(80.000000, 9.000000)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    id: "frame",
+    x: "0",
+    y: "0",
+    width: "16",
+    height: "16"
+  }), /*#__PURE__*/_react.default.createElement("g", {
+    id: "module",
+    transform: "translate(4.000000, 4.000000)",
+    stroke: "#000000",
     strokeLinecap: "round",
     strokeLinejoin: "round"
+  }, /*#__PURE__*/_react.default.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.default.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.default.createElement("path", {
+    d: "M3.5,2.72795833 L6.678,1.48195833",
+    id: "Shape"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M3.5,6.78125 L3.5,2.72795833",
+    id: "Shape"
+  }))))));
 };
 var _default = DynamicDimensionIcon;
 exports.default = _default;

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

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _ui = require("@dhis2/ui");
-var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _DynamicDimensionIcon = _interopRequireDefault(require("../../../assets/DynamicDimensionIcon.js"));
 var _predefinedDimensions = require("../../../modules/predefinedDimensions.js");
 var _OptionsButton = _interopRequireDefault(require("./OptionsButton.js"));
 var _RecommendedIcon = _interopRequireDefault(require("./RecommendedIcon.js"));
-var _DimensionItemModule = _interopRequireDefault(require("./styles/DimensionItem.module.css"));
+var _DimensionItemStyle = require("./styles/DimensionItem.style.js");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,18 +39,23 @@ class DimensionItem extends _react.Component {
     _defineProperty(this, "getDimensionIcon", () => {
       const Icon = (0, _predefinedDimensions.getPredefinedDimensionProp)(this.props.id, 'icon');
       return Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
-        className: _DimensionItemModule.default.fixedDimensionIcon
+        style: _DimensionItemStyle.styles.fixedDimensionIcon
       }) : /*#__PURE__*/_react.default.createElement(_DynamicDimensionIcon.default, {
-        className: "dynamic-dimension-icon"
+        style: _DimensionItemStyle.styles.dynamicDimensionIcon
       });
     });
     _defineProperty(this, "getDimensionType", () => {
       const {
         id,
-        name
+        name,
+        isDeactivated
       } = this.props;
       return /*#__PURE__*/_react.default.createElement("span", {
-        "data-dimensionid": id
+        "data-dimensionid": id,
+        style: {
+          ..._DimensionItemStyle.styles.text,
+          ...(isDeactivated ? _DimensionItemStyle.styles.textDeactivated : {})
+        }
       }, name);
     });
   }
@@ -65,63 +69,51 @@ class DimensionItem extends _react.Component {
       onClick,
       onOptionsClick,
       innerRef,
+      style,
       dataTest,
-      className,
       ...rest
     } = this.props;
     const Icon = this.getDimensionIcon();
     const Label = this.getDimensionType();
+    const itemStyle = isSelected && !isDeactivated ? {
+      ..._DimensionItemStyle.styles.item,
+      ..._DimensionItemStyle.styles.selected
+    } : _DimensionItemStyle.styles.item;
     const optionsRef = /*#__PURE__*/(0, _react.createRef)();
-    const LockIcon = /*#__PURE__*/_react.default.createElement("svg", {
-      width: "7",
-      height: "9",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, /*#__PURE__*/_react.default.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 && !(0, _predefinedDimensions.getPredefinedDimensionProp)(id, _predefinedDimensions.DIMENSION_PROP_NO_ITEMS)) {
         onClick(id);
       }
     };
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.CssVariables, {
-      colors: true
-    }), /*#__PURE__*/_react.default.createElement("li", _extends({
+    return /*#__PURE__*/_react.default.createElement("li", _extends({
       onMouseOver: this.onMouseOver,
       onMouseLeave: this.onMouseExit,
       ref: innerRef,
-      className: (0, _classnames.default)(_DimensionItemModule.default.item, {
-        [_DimensionItemModule.default.deactivated]: isDeactivated,
-        [_DimensionItemModule.default.selected]: isSelected && !isDeactivated
-      }, className),
+      style: Object.assign({}, itemStyle, style, !isDeactivated && _DimensionItemStyle.styles.clickable),
       "data-test": dataTest,
       onClick: onLabelClick
     }, rest), /*#__PURE__*/_react.default.createElement("div", {
-      className: _DimensionItemModule.default.label,
+      className: "label",
       tabIndex: 0,
+      style: _DimensionItemStyle.styles.label,
       "data-test": `${dataTest}-button-${id}`
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: _DimensionItemModule.default.iconWrapper
+      style: _DimensionItemStyle.styles.iconWrapper
     }, Icon), /*#__PURE__*/_react.default.createElement("div", {
-      className: _DimensionItemModule.default.labelWrapper
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: _DimensionItemModule.default.labelText
-    }, Label), /*#__PURE__*/_react.default.createElement(_RecommendedIcon.default, {
+      style: _DimensionItemStyle.styles.labelWrapper
+    }, Label, /*#__PURE__*/_react.default.createElement(_RecommendedIcon.default, {
       isRecommended: isRecommended,
       dataTest: `${dataTest}-recommended-icon`
-    }))), onOptionsClick ? /*#__PURE__*/_react.default.createElement("div", {
-      className: _DimensionItemModule.default.optionsWrapper,
+    })), isLocked && /*#__PURE__*/_react.default.createElement("div", {
+      style: _DimensionItemStyle.styles.iconWrapper
+    }, /*#__PURE__*/_react.default.createElement(_ui.IconLock16, null))), onOptionsClick ? /*#__PURE__*/_react.default.createElement("div", {
+      style: _DimensionItemStyle.styles.optionsWrapper,
       ref: optionsRef,
       "data-test": `${dataTest}-menu-${id}`
     }, this.state.mouseOver && !isDeactivated && !isLocked ? /*#__PURE__*/_react.default.createElement(_OptionsButton.default, {
+      style: _DimensionItemStyle.styles.optionsButton,
       onClick: this.onOptionsClick(id, optionsRef)
-    }) : null) : null, isLocked && /*#__PURE__*/_react.default.createElement("div", {
-      className: _DimensionItemModule.default.lockWrapper
-    }, LockIcon)));
+    }) : null) : null);
   }
 }
 DimensionItem.propTypes = {
@@ -129,12 +121,12 @@ DimensionItem.propTypes = {
   isSelected: _propTypes.default.bool.isRequired,
   // XXX
   name: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
   innerRef: _propTypes.default.func,
   isDeactivated: _propTypes.default.bool,
   isLocked: _propTypes.default.bool,
   isRecommended: _propTypes.default.bool,
+  style: _propTypes.default.object,
   onClick: _propTypes.default.func,
   onOptionsClick: _propTypes.default.func
 };

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

@@ -4,23 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _ui = require("@dhis2/ui");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const OptionsButton = _ref => {
   let {
+    style,
     onClick
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-    onClick: onClick,
-    className: "jsx-2728765288"
-  }, /*#__PURE__*/_react.default.createElement(_ui.IconMore16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
-    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.default.createElement("button", {
+    style: style,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconMore16, null));
 };
 OptionsButton.propTypes = {
+  style: _propTypes.default.object,
   onClick: _propTypes.default.func
 };
 var _default = OptionsButton;

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

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