@sis-cc/dotstatsuite-visions 7.17.10 → 7.17.12

package/es/Chips/Chips.js

@@ -21,6 +21,10 @@ var myTooltipRenderer = function myTooltipRenderer(_ref) {
 
 export var useStyles = makeStyles(function (theme) {
   return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
     chip: {
       height: 'unset',
       borderRadius: 3,
@@ -54,6 +58,11 @@ export var useStyles = makeStyles(function (theme) {
       margin: theme.spacing(0.5),
       backgroundColor: theme.palette.grey[700]
     },
+    dividerHz: {
+      width: '100%',
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
     spaceLabel: {
       paddingLeft: 0
     },
@@ -173,16 +182,20 @@ var Chips = function Chips(_ref3) {
       ariaLabel = _ref3.ariaLabel,
       _ref3$reducingNbChips = _ref3.reducingNbChips,
       reducingNbChips = _ref3$reducingNbChips === undefined ? 15 : _ref3$reducingNbChips,
-      labels = _ref3.labels;
+      labels = _ref3.labels,
+      _ref3$isVis = _ref3.isVis,
+      isVis = _ref3$isVis === undefined ? false : _ref3$isVis;
 
   var classes = useStyles();
   var theme = useTheme();
   var isRtl = getIsRtl(theme);
 
   return React.createElement(
-    'div',
-    { 'data-testid': 'chips-test-id' },
+    Grid,
+    { container: isVis, 'data-testid': 'chips-test-id' },
     R.map(function (itemProps) {
+      var _cx2;
+
       var parentId = itemProps.id,
           isNotRemovable = itemProps.isNotRemovable,
           _itemProps$values = itemProps.values,
@@ -190,10 +203,15 @@ var Chips = function Chips(_ref3) {
 
       return React.createElement(
         Grid,
-        { container: true, className: classes.root, key: parentId },
+        {
+          item: isVis,
+          container: !isVis,
+          key: parentId,
+          className: cx((_cx2 = {}, _cx2[classes.root] = isVis, _cx2))
+        },
         React.createElement(
           Grid,
-          { item: true, xs: 12 },
+          { item: !isVis, style: !isVis ? { width: '100%' } : null },
           React.createElement(CustomChip, {
             parentId: parentId,
             label: labelRenderer(itemProps) + ':',
@@ -230,13 +248,14 @@ var Chips = function Chips(_ref3) {
               labelClasses: cx(classes.formatLabel)
             });
           })(values),
-          React.createElement(Divider, { className: classes.divider })
-        )
+          !isVis && React.createElement(Divider, { className: classes.dividerHz })
+        ),
+        isVis && React.createElement(Divider, { className: classes.divider, orientation: 'vertical', flexItem: true })
       );
     })(items),
     R.is(Function)(onDeleteAll) && React.createElement(
       Grid,
-      { container: true, className: classes.root },
+      { container: true },
       React.createElement(
         Grid,
         { item: true, xs: 12 },
@@ -273,7 +292,8 @@ Chips.propTypes = process.env.NODE_ENV !== "production" ? {
   reducingNbChips: PropTypes.number,
   labels: PropTypes.shape({
     reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-  })
+  }),
+  isVis: PropTypes.bool
 } : {};
 
 export default withBlank(function (_ref4) {

package/es/Chips/index.js

@@ -30,6 +30,7 @@
  *   labels: PropTypes.shape({
  *     reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  *   }),
+ *   isVis: PropTypes.bool,
  * };
  * @theme
  * {

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/ExpansionPanel/ExpansionPanel.js

@@ -19,7 +19,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       onChangeActivePanel = _ref.onChangeActivePanel,
       label = _ref.label,
       tag = _ref.tag,
-      overflow = _ref.overflow,
+      _ref$overflow = _ref.overflow,
+      overflow = _ref$overflow === undefined ? true : _ref$overflow,
       children = _ref.children,
       isOpen = _ref.isOpen,
       _ref$maxHeight = _ref.maxHeight,

package/lib/Chips/Chips.js

@@ -61,6 +61,10 @@ var myTooltipRenderer = function myTooltipRenderer(_ref) {
 
 var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
     chip: {
       height: 'unset',
       borderRadius: 3,
@@ -94,6 +98,11 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: theme.spacing(0.5),
       backgroundColor: theme.palette.grey[700]
     },
+    dividerHz: {
+      width: '100%',
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
     spaceLabel: {
       paddingLeft: 0
     },
@@ -213,16 +222,20 @@ var Chips = function Chips(_ref3) {
       ariaLabel = _ref3.ariaLabel,
       _ref3$reducingNbChips = _ref3.reducingNbChips,
       reducingNbChips = _ref3$reducingNbChips === undefined ? 15 : _ref3$reducingNbChips,
-      labels = _ref3.labels;
+      labels = _ref3.labels,
+      _ref3$isVis = _ref3.isVis,
+      isVis = _ref3$isVis === undefined ? false : _ref3$isVis;
 
   var classes = useStyles();
   var theme = (0, _styles.useTheme)();
   var isRtl = (0, _utils.getIsRtl)(theme);
 
   return _react2.default.createElement(
-    'div',
-    { 'data-testid': 'chips-test-id' },
+    _Grid2.default,
+    { container: isVis, 'data-testid': 'chips-test-id' },
     R.map(function (itemProps) {
+      var _cx2;
+
       var parentId = itemProps.id,
           isNotRemovable = itemProps.isNotRemovable,
           _itemProps$values = itemProps.values,
@@ -230,10 +243,15 @@ var Chips = function Chips(_ref3) {
 
       return _react2.default.createElement(
         _Grid2.default,
-        { container: true, className: classes.root, key: parentId },
+        {
+          item: isVis,
+          container: !isVis,
+          key: parentId,
+          className: (0, _classnames2.default)((_cx2 = {}, _cx2[classes.root] = isVis, _cx2))
+        },
         _react2.default.createElement(
           _Grid2.default,
-          { item: true, xs: 12 },
+          { item: !isVis, style: !isVis ? { width: '100%' } : null },
           _react2.default.createElement(CustomChip, {
             parentId: parentId,
             label: labelRenderer(itemProps) + ':',
@@ -270,13 +288,14 @@ var Chips = function Chips(_ref3) {
               labelClasses: (0, _classnames2.default)(classes.formatLabel)
             });
           })(values),
-          _react2.default.createElement(_Divider2.default, { className: classes.divider })
-        )
+          !isVis && _react2.default.createElement(_Divider2.default, { className: classes.dividerHz })
+        ),
+        isVis && _react2.default.createElement(_Divider2.default, { className: classes.divider, orientation: 'vertical', flexItem: true })
       );
     })(items),
     R.is(Function)(onDeleteAll) && _react2.default.createElement(
       _Grid2.default,
-      { container: true, className: classes.root },
+      { container: true },
       _react2.default.createElement(
         _Grid2.default,
         { item: true, xs: 12 },
@@ -313,7 +332,8 @@ Chips.propTypes = process.env.NODE_ENV !== "production" ? {
   reducingNbChips: _propTypes2.default.number,
   labels: _propTypes2.default.shape({
     reducingChip: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
-  })
+  }),
+  isVis: _propTypes2.default.bool
 } : {};
 
 exports.default = (0, _utils.withBlank)(function (_ref4) {

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/ExpansionPanel/ExpansionPanel.js

@@ -58,7 +58,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       onChangeActivePanel = _ref.onChangeActivePanel,
       label = _ref.label,
       tag = _ref.tag,
-      overflow = _ref.overflow,
+      _ref$overflow = _ref.overflow,
+      overflow = _ref$overflow === undefined ? true : _ref$overflow,
       children = _ref.children,
       isOpen = _ref.isOpen,
       _ref$maxHeight = _ref.maxHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.17.10",
+  "version": "7.17.12",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",