@sis-cc/dotstatsuite-visions 7.17.9 → 7.17.11

package/es/CollapsibleTree/CollapsibleTree.js

@@ -15,7 +15,7 @@ import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import Grid from '@material-ui/core/Grid';
 import Collapse, { VARIANT_BOLD } from './Collapse';
-
+import cx from 'classnames';
 var useStyles = makeStyles(function (theme) {
   return {
     title: _extends({
@@ -28,6 +28,10 @@ var useStyles = makeStyles(function (theme) {
       marginLeft: theme.spacing(2),
       marginRight: theme.spacing(2),
       marginBottom: theme.spacing(2)
+    },
+    overflow: {
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'break-word'
     }
   };
 });
@@ -133,7 +137,10 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
             { key: id, level: 0, label: label, isOpen: depthLevel >= 0 },
             React.createElement(
               Typography,
-              { className: classes.spacingValue, variant: 'body2' },
+              {
+                className: cx(classes.spacingValue, classes.overflow),
+                variant: 'body2'
+              },
               getValue(_extends({ value: value, children: children }, handlerProps))
             ),
             children && R.map(function (_ref5) {
@@ -154,7 +161,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 },
                 React.createElement(
                   Typography,
-                  { variant: 'body2' },
+                  { variant: 'body2', className: classes.overflow },
                   getValue(_extends({ value: value }, handlerProps))
                 )
               );

package/es/TableHtml5/section.js

@@ -9,6 +9,7 @@ import { makeStyles, useTheme } from '@material-ui/core/styles';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
+import { isTimePeriodDimension } from '@sis-cc/dotstatsuite-sdmxjs';
 import SectionHeader from './sectionHeader';
 import Cell from './cell';
 import { getLight, getIsRtl } from '../utils';
@@ -25,6 +26,9 @@ var useStyles = makeStyles(function (theme) {
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle'
     },
+    timePeriodCells: {
+      whiteSpace: 'nowrap'
+    },
     fillerCell: {
       minWidth: '30px',
       backgroundColor: theme.palette.grey[200],
@@ -121,7 +125,7 @@ var Section = function Section(_ref) {
             TableCell,
             {
               key: id,
-              className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
+              className: cx(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = isTimePeriodDimension(R.prop('dimension', cell)), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
               component: 'th',

package/lib/CollapsibleTree/CollapsibleTree.js

@@ -54,6 +54,10 @@ var _Collapse = require('./Collapse');
 
 var _Collapse2 = _interopRequireDefault(_Collapse);
 
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,6 +76,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       marginLeft: theme.spacing(2),
       marginRight: theme.spacing(2),
       marginBottom: theme.spacing(2)
+    },
+    overflow: {
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'break-word'
     }
   };
 });
@@ -177,7 +185,10 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
             { key: id, level: 0, label: label, isOpen: depthLevel >= 0 },
             _react2.default.createElement(
               _Typography2.default,
-              { className: classes.spacingValue, variant: 'body2' },
+              {
+                className: (0, _classnames2.default)(classes.spacingValue, classes.overflow),
+                variant: 'body2'
+              },
               getValue(_extends({ value: value, children: children }, handlerProps))
             ),
             children && R.map(function (_ref5) {
@@ -198,7 +209,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
                 },
                 _react2.default.createElement(
                   _Typography2.default,
-                  { variant: 'body2' },
+                  { variant: 'body2', className: classes.overflow },
                   getValue(_extends({ value: value }, handlerProps))
                 )
               );

package/lib/TableHtml5/section.js

@@ -38,6 +38,8 @@ var _TableRow = require('@material-ui/core/TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
 
+var _dotstatsuiteSdmxjs = require('@sis-cc/dotstatsuite-sdmxjs');
+
 var _sectionHeader = require('./sectionHeader');
 
 var _sectionHeader2 = _interopRequireDefault(_sectionHeader);
@@ -67,6 +69,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle'
     },
+    timePeriodCells: {
+      whiteSpace: 'nowrap'
+    },
     fillerCell: {
       minWidth: '30px',
       backgroundColor: theme.palette.grey[200],
@@ -163,7 +168,7 @@ var Section = function Section(_ref) {
             _TableCell2.default,
             {
               key: id,
-              className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
+              className: (0, _classnames2.default)(classes.rowTitle, classes.stickyHeader, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx[classes.timePeriodCells] = (0, _dotstatsuiteSdmxjs.isTimePeriodDimension)(R.prop('dimension', cell)), _cx)),
               id: id,
               headers: 'subHeader_' + index + ' ' + currentSection,
               component: 'th',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.17.9",
+  "version": "7.17.11",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -51,10 +51,12 @@
     "@material-ui/core": "^4.9.5",
     "@material-ui/icons": "^4.5.1",
     "@material-ui/styles": "^4.5.0",
+    "@sis-cc/dotstatsuite-sdmxjs": "^8.x",
     "react": "16.x"
   },
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@sis-cc/dotstatsuite-sdmxjs": "*",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.1",
     "babel-eslint": "^10.0.3",