@sis-cc/dotstatsuite-visions 7.17.11 → 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/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/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.11",
+  "version": "7.17.12",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",