@sis-cc/dotstatsuite-visions 7.17.11 → 7.17.13

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,
@@ -28,7 +29,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'expansion_panel' : _ref$testId,
       isPinned = _ref.isPinned,
-      pinnedLabel = _ref.pinnedLabel;
+      pinnedLabel = _ref.pinnedLabel,
+      moreFilters = _ref.moreFilters;
 
   var classes = useStyles();
 
@@ -68,7 +70,12 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         ),
         React.createElement(
           Typography,
-          { noWrap: true, variant: 'body2', title: label, className: classes.label },
+          {
+            noWrap: true,
+            variant: 'body2',
+            title: label,
+            className: moreFilters ? classes.title : classes.label
+          },
           label
         ),
         isPinned && React.createElement(
@@ -104,7 +111,8 @@ CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   maxHeight: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   fullWidth: PropTypes.bool,
-  isPinned: PropTypes.bool
+  isPinned: PropTypes.bool,
+  moreFilters: PropTypes.bool
 } : {};
 
 export default withBlank(function (_ref2) {

package/es/ExpansionPanel/index.js

@@ -23,6 +23,7 @@
  *   ]),
  *   fullWidth: PropTypes.bool,
  *   isPinned: PropTypes.bool,
+ *   moreFilters: PropTypes.bool,
  * };
  * @theme
  * {

package/es/ExpansionPanel/styles.js

@@ -65,6 +65,11 @@ export var useStyles = makeStyles(function (theme) {
     },
     label: _extends({
       color: theme.palette.grey[700]
-    }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme))
+    }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme)),
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'apiQueries', 'title'], theme), {
+      fontWeight: 'bold'
+    })
   };
 });

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,
@@ -67,7 +68,8 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       _ref$testId = _ref.testId,
       testId = _ref$testId === undefined ? 'expansion_panel' : _ref$testId,
       isPinned = _ref.isPinned,
-      pinnedLabel = _ref.pinnedLabel;
+      pinnedLabel = _ref.pinnedLabel,
+      moreFilters = _ref.moreFilters;
 
   var classes = (0, _styles.useStyles)();
 
@@ -107,7 +109,12 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
         ),
         _react2.default.createElement(
           _Typography2.default,
-          { noWrap: true, variant: 'body2', title: label, className: classes.label },
+          {
+            noWrap: true,
+            variant: 'body2',
+            title: label,
+            className: moreFilters ? classes.title : classes.label
+          },
           label
         ),
         isPinned && _react2.default.createElement(
@@ -143,7 +150,8 @@ CustomExpansionPanel.propTypes = process.env.NODE_ENV !== "production" ? {
   maxHeight: _propTypes2.default.bool,
   children: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.node]),
   fullWidth: _propTypes2.default.bool,
-  isPinned: _propTypes2.default.bool
+  isPinned: _propTypes2.default.bool,
+  moreFilters: _propTypes2.default.bool
 } : {};
 
 exports.default = (0, _utils.withBlank)(function (_ref2) {

package/lib/ExpansionPanel/styles.js

@@ -75,6 +75,11 @@ var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
     },
     label: _extends({
       color: theme.palette.grey[700]
-    }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme))
+    }, R.pathOr({}, ['mixins', 'expansionPanel', 'title'], theme)),
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'apiQueries', 'title'], theme), {
+      fontWeight: 'bold'
+    })
   };
 });

package/package.json

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