@sis-cc/dotstatsuite-visions 6.5.1 → 6.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/es/CollapseButtons/CollapseButtons.js +6 -2
  2. package/es/CollapseButtons/index.js +3 -0
  3. package/es/Share/Mode.js +59 -13
  4. package/es/Share/index.js +9 -1
  5. package/es/TableHtml5/TableHtml5.js +20 -5
  6. package/es/TableHtml5/header.js +2 -1
  7. package/es/TableHtml5/section.js +9 -5
  8. package/es/TableHtml5/sectionHeader.js +1 -1
  9. package/es/TableHtml5/subHeader.js +15 -6
  10. package/es/ToggleButton/ToggleButton.js +16 -10
  11. package/es/ToggleButton/index.js +3 -0
  12. package/lib/CollapseButtons/CollapseButtons.js +6 -2
  13. package/lib/Share/Mode.js +59 -12
  14. package/lib/TableHtml5/TableHtml5.js +20 -5
  15. package/lib/TableHtml5/header.js +2 -1
  16. package/lib/TableHtml5/section.js +9 -5
  17. package/lib/TableHtml5/sectionHeader.js +1 -1
  18. package/lib/TableHtml5/subHeader.js +15 -6
  19. package/lib/ToggleButton/ToggleButton.js +16 -10
  20. package/package.json +2 -2
package/es/CollapseButtons/CollapseButtons.js CHANGED
@@ -38,7 +38,9 @@ var CollapseButtons = function CollapseButtons(props) {
38
38
  breakpoint = _props$breakpoint === undefined ? function (theme) {
39
39
  return theme.breakpoints.down('sm');
40
40
  } : _props$breakpoint,
41
- justify = props.justify;
41
+ justify = props.justify,
42
+ _props$textTransform = props.textTransform,
43
+ textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
42
44
 
43
45
 
44
46
  var classes = useStyles();
@@ -80,6 +82,7 @@ var CollapseButtons = function CollapseButtons(props) {
80
82
  Grid,
81
83
  _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
82
84
  React.createElement(ToggleButton, {
85
+ textTransform: textTransform,
83
86
  label: label,
84
87
  tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
85
88
  isOpen: R.prop(id)(toggleId),
@@ -151,7 +154,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
151
154
  isSecondLevelClikable: PropTypes.bool,
152
155
  breakpoint: PropTypes.func,
153
156
  gridButtonsProps: PropTypes.object,
154
- justify: PropTypes.string
157
+ justify: PropTypes.string,
158
+ textTransform: PropTypes.string
155
159
  } : {};
156
160
 
157
161
  export default CollapseButtons;
package/es/CollapseButtons/index.js CHANGED
@@ -10,6 +10,8 @@
10
10
  * | 'space-around'
11
11
  * | 'space-evenly'
12
12
  *
13
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
14
+ *
13
15
  * to manage layout you have three properties
14
16
  * nbColumns: numbers of column you want to have
15
17
  * gridButtonsProps: mainly to manage breakpoints in the differents layout of buttons but you can change all the grid properties. (nbColumns is use with the "sm" breakpoint)
@@ -51,6 +53,7 @@
51
53
  * breakpoint: PropTypes.func,
52
54
  * gridButtonsProps: PropTypes.object,
53
55
  * justify: PropTypes.string,
56
+ * textTransform: PropTypes.string,
54
57
  * };
55
58
  * @theme
56
59
  * // button (See ToggleButton Component)
package/es/Share/Mode.js CHANGED
@@ -4,12 +4,13 @@ import React from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import * as R from 'ramda';
6
6
  import Card from '@material-ui/core/Card';
7
- import { makeStyles } from '@material-ui/core/styles';
7
+ import { makeStyles, useTheme } from '@material-ui/core/styles';
8
8
  import CardContent from '@material-ui/core/CardContent';
9
9
  import Typography from '@material-ui/core/Typography';
10
10
  import RadioGroup from '@material-ui/core/RadioGroup';
11
11
  import FormControlLabel from '@material-ui/core/FormControlLabel';
12
12
  import Radio from '@material-ui/core/Radio';
13
+ import { Tooltip, Warning as WarningIcon } from '../';
13
14
 
14
15
  var useStyles = makeStyles(function (theme) {
15
16
  return {
@@ -28,16 +29,54 @@ var useStyles = makeStyles(function (theme) {
28
29
  padding: theme.spacing(1, 0)
29
30
  }
30
31
  },
31
- label: theme.typography.body2
32
+ label: theme.typography.body2,
33
+ warning: _extends({
34
+ marginLeft: theme.spacing(0.5),
35
+ width: 'unset',
36
+ fontSize: 'inherit',
37
+ height: '1.3em'
38
+ }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
32
39
  };
33
40
  });
34
41
 
35
- var Mode = function Mode(_ref) {
36
- var changeMode = _ref.changeMode,
37
- mode = _ref.mode,
38
- _ref$modes = _ref.modes,
39
- modes = _ref$modes === undefined ? [] : _ref$modes,
40
- title = _ref.title;
42
+ var Warning = function Warning(_ref) {
43
+ var title = _ref.title;
44
+
45
+ var classes = useStyles();
46
+ var theme = useTheme();
47
+ var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
48
+ var warningTextColor = theme.palette.getContrastText(warningColor);
49
+ return React.createElement(
50
+ Tooltip,
51
+ {
52
+ className: classes.warning,
53
+ title: title,
54
+ tabIndex: 0,
55
+ variant: 'warning',
56
+ 'aria-hidden': false,
57
+ placement: 'bottom',
58
+ PopperProps: {
59
+ modifiers: {
60
+ flip: {
61
+ behavior: ['bottom', 'top', 'left', 'right']
62
+ }
63
+ }
64
+ }
65
+ },
66
+ React.createElement(WarningIcon, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
67
+ );
68
+ };
69
+
70
+ Warning.propTypes = process.env.NODE_ENV !== "production" ? {
71
+ title: PropTypes.string
72
+ } : {};
73
+
74
+ var Mode = function Mode(_ref2) {
75
+ var changeMode = _ref2.changeMode,
76
+ mode = _ref2.mode,
77
+ _ref2$modes = _ref2.modes,
78
+ modes = _ref2$modes === undefined ? [] : _ref2$modes,
79
+ title = _ref2.title;
41
80
 
42
81
  var classes = useStyles();
43
82
  return React.createElement(
@@ -56,14 +95,20 @@ var Mode = function Mode(_ref) {
56
95
  { onChange: function onChange(e) {
57
96
  return changeMode(e.target.value);
58
97
  }, value: mode },
59
- R.map(function (_ref2) {
60
- var label = _ref2.label,
61
- value = _ref2.value;
98
+ R.map(function (_ref3) {
99
+ var label = _ref3.label,
100
+ value = _ref3.value,
101
+ warningMessage = _ref3.warningMessage;
62
102
  return React.createElement(FormControlLabel, {
63
103
  classes: { label: classes.label },
64
104
  key: value,
65
105
  control: React.createElement(Radio, { variant: 'outlined', color: 'primary' }),
66
- label: label,
106
+ label: React.createElement(
107
+ 'span',
108
+ null,
109
+ label,
110
+ warningMessage && React.createElement(Warning, { title: warningMessage })
111
+ ),
67
112
  value: value
68
113
  });
69
114
  })(modes)
@@ -77,7 +122,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
77
122
  mode: PropTypes.string,
78
123
  modes: PropTypes.arrayOf(PropTypes.shape({
79
124
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
80
- value: PropTypes.string
125
+ value: PropTypes.string,
126
+ warningMessage: PropTypes.string
81
127
  })),
82
128
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
83
129
  } : {};
package/es/Share/index.js CHANGED
@@ -16,7 +16,13 @@
16
16
  * isSharing: PropTypes.bool,
17
17
  * mail: PropTypes.string,
18
18
  * mode: PropTypes.string,
19
- * modes: PropTypes.array,
19
+ * modes: PropTypes.arrayOf(
20
+ * PropTypes.shape({
21
+ * label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
22
+ * value: PropTypes.string,
23
+ * warningMessage: PropTypes.string,
24
+ * }),
25
+ * ),
20
26
  * labels: PropTypes.shape({
21
27
  * title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
22
28
  * disclaimer: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
@@ -48,9 +54,11 @@
48
54
  * mixins: {
49
55
  * share: {
50
56
  * tile: // font, color...
57
+ * warning: // font, color, height...
51
58
  * }
52
59
  * }
53
60
  * }
61
+ * @demoReady
54
62
  */
55
63
 
56
64
  export { default } from './Share';
package/es/TableHtml5/TableHtml5.js CHANGED
@@ -27,7 +27,8 @@ var useStyles = makeStyles(function (theme) {
27
27
  },
28
28
  stickyHeader: {
29
29
  position: 'sticky',
30
- top: 0
30
+ top: 0,
31
+ zIndex: 2
31
32
  }
32
33
  };
33
34
  });
@@ -55,6 +56,10 @@ export var getEnhancedValuesHeaderData = function getEnhancedValuesHeaderData(da
55
56
  }, R.times(R.always([]), colLength)))(data);
56
57
  };
57
58
 
59
+ var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
60
+ return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
61
+ }, [0]);
62
+
58
63
  var TableHtml5 = function TableHtml5(_ref) {
59
64
  var cells = _ref.cells,
60
65
  _ref$headerData = _ref.headerData,
@@ -71,10 +76,16 @@ var TableHtml5 = function TableHtml5(_ref) {
71
76
  headerHeight = _useState[0],
72
77
  setHeaderHeight = _useState[1];
73
78
 
79
+ var _useState2 = useState([0]),
80
+ subHeadCellsWidth = _useState2[0],
81
+ setSubHeadCellsWidth = _useState2[1];
82
+
74
83
  var headerRef = useRef(null);
84
+ var subHeadCellsRef = useRef([]);
75
85
 
76
86
  useEffect(function () {
77
87
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
88
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
78
89
  }, [cells, headerData, sectionsData]);
79
90
 
80
91
  useEffect(function () {
@@ -82,8 +93,9 @@ var TableHtml5 = function TableHtml5(_ref) {
82
93
  var resizeListener = function resizeListener() {
83
94
  clearTimeout(timeoutId);
84
95
  timeoutId = setTimeout(function () {
85
- return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
86
- });
96
+ setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
97
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
98
+ }, 150);
87
99
  };
88
100
  window.addEventListener('resize', resizeListener);
89
101
  return function () {
@@ -113,7 +125,9 @@ var TableHtml5 = function TableHtml5(_ref) {
113
125
  React.createElement(SubHeader, {
114
126
  headerData: headerData,
115
127
  xLayoutData: xLayoutData,
116
- activeCellIds: activeCellIds
128
+ activeCellIds: activeCellIds,
129
+ ref: subHeadCellsRef,
130
+ subHeadCellsWidth: subHeadCellsWidth
117
131
  })
118
132
  ),
119
133
  mapIndexed(function (section, index) {
@@ -128,7 +142,8 @@ var TableHtml5 = function TableHtml5(_ref) {
128
142
  xLayoutDataLength: xLayoutDataLength,
129
143
  cellHandler: cellHandler,
130
144
  activeCellIds: activeCellIds,
131
- activeCellHandler: activeCellHandler
145
+ activeCellHandler: activeCellHandler,
146
+ subHeadCellsWidth: subHeadCellsWidth
132
147
  });
133
148
  }, sectionsData)
134
149
  );
package/es/TableHtml5/header.js CHANGED
@@ -74,7 +74,8 @@ var Header = function Header(_ref) {
74
74
  className: cx(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
75
75
  colSpan: R.inc(xLayoutDataLength),
76
76
  id: id,
77
- tabIndex: 0
77
+ tabIndex: 0,
78
+ style: { position: 'sticky', left: 0, zIndex: 1 }
78
79
  },
79
80
  React.createElement(
80
81
  'div',
package/es/TableHtml5/section.js CHANGED
@@ -26,7 +26,7 @@ var useStyles = makeStyles(function (theme) {
26
26
  verticalAlign: 'middle'
27
27
  },
28
28
  fillerCell: {
29
- width: '30px',
29
+ minWidth: '30px',
30
30
  backgroundColor: theme.palette.grey[200],
31
31
  verticalAlign: 'top',
32
32
  border: 'inherit',
@@ -64,7 +64,8 @@ var Section = function Section(_ref) {
64
64
  activeCellIds = _ref.activeCellIds,
65
65
  headerHeight = _ref.headerHeight,
66
66
  sectionIndex = _ref.sectionIndex,
67
- nbColumnsByRows = _ref.nbColumnsByRows;
67
+ nbColumnsByRows = _ref.nbColumnsByRows,
68
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
68
69
 
69
70
  var classes = useStyles();
70
71
  var currentSection = R.path([0, 'key'], section);
@@ -111,7 +112,8 @@ var Section = function Section(_ref) {
111
112
  className: cx(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
112
113
  id: id,
113
114
  headers: 'subHeader_' + index + ' ' + currentSection,
114
- component: 'th'
115
+ component: 'th',
116
+ style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 }
115
117
  },
116
118
  React.createElement(
117
119
  'div',
@@ -133,7 +135,8 @@ var Section = function Section(_ref) {
133
135
  React.createElement(
134
136
  TableCell,
135
137
  {
136
- className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
138
+ className: cx(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
139
+ style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
137
140
  },
138
141
  React.createElement(
139
142
  'div',
@@ -180,7 +183,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
180
183
  sectionIndex: PropTypes.number,
181
184
  headerNumberRows: PropTypes.number,
182
185
  nbColumnsByRows: PropTypes.array,
183
- maxColumns: PropTypes.number
186
+ maxColumns: PropTypes.number,
187
+ subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
184
188
  } : {};
185
189
 
186
190
  export default Section;
package/es/TableHtml5/sectionHeader.js CHANGED
@@ -64,7 +64,7 @@ var SectionHeader = function SectionHeader(_ref) {
64
64
  {
65
65
  key: section.key,
66
66
  className: classes.stickyHeaderSection,
67
- style: { top: headerHeight + 'px' }
67
+ style: { top: headerHeight, zIndex: 2 }
68
68
  },
69
69
  React.createElement(
70
70
  TableCell,
package/es/TableHtml5/subHeader.js CHANGED
@@ -44,10 +44,11 @@ var useStyles = makeStyles(function (theme) {
44
44
 
45
45
  var mapIndexed = R.addIndex(R.map);
46
46
 
47
- var SubHeader = function SubHeader(_ref) {
47
+ var SubHeader = React.forwardRef(function (_ref, refs) {
48
48
  var headerData = _ref.headerData,
49
49
  xLayoutData = _ref.xLayoutData,
50
- activeCellIds = _ref.activeCellIds;
50
+ activeCellIds = _ref.activeCellIds,
51
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
51
52
 
52
53
  var classes = useStyles();
53
54
  return React.createElement(
@@ -60,7 +61,11 @@ var SubHeader = function SubHeader(_ref) {
60
61
  component: 'th',
61
62
  className: classes.columnsTitle,
62
63
  key: index,
63
- id: 'subHeader_' + index
64
+ id: 'subHeader_' + index,
65
+ style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
66
+ ref: function ref(element) {
67
+ return refs.current[index] = element;
68
+ }
64
69
  },
65
70
  React.createElement(
66
71
  'div',
@@ -74,7 +79,10 @@ var SubHeader = function SubHeader(_ref) {
74
79
  )
75
80
  );
76
81
  }, xLayoutData),
77
- React.createElement(TableCell, { className: classes.fillerCell }),
82
+ React.createElement(TableCell, {
83
+ className: classes.fillerCell,
84
+ style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
85
+ }),
78
86
  mapIndexed(function (item, index) {
79
87
  var _cx;
80
88
 
@@ -88,12 +96,13 @@ var SubHeader = function SubHeader(_ref) {
88
96
  );
89
97
  }, headerData)
90
98
  );
91
- };
99
+ });
92
100
 
93
101
  SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
94
102
  activeCellIds: PropTypes.object,
95
103
  headerData: PropTypes.array,
96
- xLayoutData: PropTypes.array
104
+ xLayoutData: PropTypes.array,
105
+ subHeadCellsWidth: PropTypes.arrayOf(PropTypes.number)
97
106
  } : {};
98
107
 
99
108
  export default SubHeader;
package/es/ToggleButton/ToggleButton.js CHANGED
@@ -24,7 +24,10 @@ var useStyles = makeStyles(function (theme) {
24
24
  }
25
25
  },
26
26
  label: {
27
- textTransform: 'capitalize',
27
+ textTransform: function textTransform(_ref) {
28
+ var _textTransform = _ref.textTransform;
29
+ return _textTransform;
30
+ },
28
31
  textAlign: 'left',
29
32
  fontSize: '0.9375rem',
30
33
  lineHeight: '1.0'
@@ -36,17 +39,19 @@ var useStyles = makeStyles(function (theme) {
36
39
  };
37
40
  });
38
41
 
39
- var ToggleButton = function ToggleButton(_ref) {
42
+ var ToggleButton = function ToggleButton(_ref2) {
40
43
  var _cx;
41
44
 
42
- var isOpen = _ref.isOpen,
43
- label = _ref.label,
44
- toggle = _ref.toggle,
45
- testId = _ref.testId,
46
- _ref$tabindex = _ref.tabindex,
47
- tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex;
45
+ var isOpen = _ref2.isOpen,
46
+ label = _ref2.label,
47
+ toggle = _ref2.toggle,
48
+ testId = _ref2.testId,
49
+ _ref2$tabindex = _ref2.tabindex,
50
+ tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
51
+ _ref2$textTransform = _ref2.textTransform,
52
+ textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
48
53
 
49
- var classes = useStyles();
54
+ var classes = useStyles({ textTransform: textTransform });
50
55
  return React.createElement(
51
56
  Button,
52
57
  {
@@ -69,7 +74,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
69
74
  tabindex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
70
75
  isOpen: PropTypes.bool,
71
76
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
72
- toggle: PropTypes.func
77
+ toggle: PropTypes.func,
78
+ textTransform: PropTypes.string
73
79
  } : {};
74
80
 
75
81
  export default ToggleButton;
package/es/ToggleButton/index.js CHANGED
@@ -1,6 +1,8 @@
1
1
  /**
2
2
  * Button use api of material ui https://material-ui.com/api/button/
3
3
  *
4
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
5
+ *
4
6
  * @memberOf VISIONS
5
7
  * @name ToggleButton
6
8
  * @tag component
@@ -12,6 +14,7 @@
12
14
  * isOpen: PropTypes.bool,
13
15
  * label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
14
16
  * toggle: PropTypes.func,
17
+ * textTransform: PropTypes.string,
15
18
  * };
16
19
  *
17
20
  * @theme
package/lib/CollapseButtons/CollapseButtons.js CHANGED
@@ -72,7 +72,9 @@ var CollapseButtons = function CollapseButtons(props) {
72
72
  breakpoint = _props$breakpoint === undefined ? function (theme) {
73
73
  return theme.breakpoints.down('sm');
74
74
  } : _props$breakpoint,
75
- justify = props.justify;
75
+ justify = props.justify,
76
+ _props$textTransform = props.textTransform,
77
+ textTransform = _props$textTransform === undefined ? 'none' : _props$textTransform;
76
78
 
77
79
 
78
80
  var classes = useStyles();
@@ -114,6 +116,7 @@ var CollapseButtons = function CollapseButtons(props) {
114
116
  _Grid2.default,
115
117
  _extends({ item: true, xs: 12, sm: 12, md: R.nth(nbColumns)(COLUMNS) }, gridButtonsProps, { key: id }),
116
118
  _react2.default.createElement(_.ToggleButton, {
119
+ textTransform: textTransform,
117
120
  label: label,
118
121
  tabindex: R.isNil(toggleId) || R.prop(id)(toggleId) || R.compose(R.not, R.head, R.values)(toggleId) ? 0 : -1,
119
122
  isOpen: R.prop(id)(toggleId),
@@ -185,7 +188,8 @@ CollapseButtons.propTypes = process.env.NODE_ENV !== "production" ? {
185
188
  isSecondLevelClikable: _propTypes2.default.bool,
186
189
  breakpoint: _propTypes2.default.func,
187
190
  gridButtonsProps: _propTypes2.default.object,
188
- justify: _propTypes2.default.string
191
+ justify: _propTypes2.default.string,
192
+ textTransform: _propTypes2.default.string
189
193
  } : {};
190
194
 
191
195
  exports.default = CollapseButtons;
package/lib/Share/Mode.js CHANGED
@@ -42,6 +42,8 @@ var _Radio = require('@material-ui/core/Radio');
42
42
 
43
43
  var _Radio2 = _interopRequireDefault(_Radio);
44
44
 
45
+ var _ = require('../');
46
+
45
47
  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; } }
46
48
 
47
49
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -63,16 +65,54 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
63
65
  padding: theme.spacing(1, 0)
64
66
  }
65
67
  },
66
- label: theme.typography.body2
68
+ label: theme.typography.body2,
69
+ warning: _extends({
70
+ marginLeft: theme.spacing(0.5),
71
+ width: 'unset',
72
+ fontSize: 'inherit',
73
+ height: '1.3em'
74
+ }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
67
75
  };
68
76
  });
69
77
 
70
- var Mode = function Mode(_ref) {
71
- var changeMode = _ref.changeMode,
72
- mode = _ref.mode,
73
- _ref$modes = _ref.modes,
74
- modes = _ref$modes === undefined ? [] : _ref$modes,
75
- title = _ref.title;
78
+ var Warning = function Warning(_ref) {
79
+ var title = _ref.title;
80
+
81
+ var classes = useStyles();
82
+ var theme = (0, _styles.useTheme)();
83
+ var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
84
+ var warningTextColor = theme.palette.getContrastText(warningColor);
85
+ return _react2.default.createElement(
86
+ _.Tooltip,
87
+ {
88
+ className: classes.warning,
89
+ title: title,
90
+ tabIndex: 0,
91
+ variant: 'warning',
92
+ 'aria-hidden': false,
93
+ placement: 'bottom',
94
+ PopperProps: {
95
+ modifiers: {
96
+ flip: {
97
+ behavior: ['bottom', 'top', 'left', 'right']
98
+ }
99
+ }
100
+ }
101
+ },
102
+ _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
103
+ );
104
+ };
105
+
106
+ Warning.propTypes = process.env.NODE_ENV !== "production" ? {
107
+ title: _propTypes2.default.string
108
+ } : {};
109
+
110
+ var Mode = function Mode(_ref2) {
111
+ var changeMode = _ref2.changeMode,
112
+ mode = _ref2.mode,
113
+ _ref2$modes = _ref2.modes,
114
+ modes = _ref2$modes === undefined ? [] : _ref2$modes,
115
+ title = _ref2.title;
76
116
 
77
117
  var classes = useStyles();
78
118
  return _react2.default.createElement(
@@ -91,14 +131,20 @@ var Mode = function Mode(_ref) {
91
131
  { onChange: function onChange(e) {
92
132
  return changeMode(e.target.value);
93
133
  }, value: mode },
94
- R.map(function (_ref2) {
95
- var label = _ref2.label,
96
- value = _ref2.value;
134
+ R.map(function (_ref3) {
135
+ var label = _ref3.label,
136
+ value = _ref3.value,
137
+ warningMessage = _ref3.warningMessage;
97
138
  return _react2.default.createElement(_FormControlLabel2.default, {
98
139
  classes: { label: classes.label },
99
140
  key: value,
100
141
  control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
101
- label: label,
142
+ label: _react2.default.createElement(
143
+ 'span',
144
+ null,
145
+ label,
146
+ warningMessage && _react2.default.createElement(Warning, { title: warningMessage })
147
+ ),
102
148
  value: value
103
149
  });
104
150
  })(modes)
@@ -112,7 +158,8 @@ Mode.propTypes = process.env.NODE_ENV !== "production" ? {
112
158
  mode: _propTypes2.default.string,
113
159
  modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
114
160
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
115
- value: _propTypes2.default.string
161
+ value: _propTypes2.default.string,
162
+ warningMessage: _propTypes2.default.string
116
163
  })),
117
164
  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
118
165
  } : {};
package/lib/TableHtml5/TableHtml5.js CHANGED
@@ -60,7 +60,8 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
60
60
  },
61
61
  stickyHeader: {
62
62
  position: 'sticky',
63
- top: 0
63
+ top: 0,
64
+ zIndex: 2
64
65
  }
65
66
  };
66
67
  });
@@ -88,6 +89,10 @@ var getEnhancedValuesHeaderData = exports.getEnhancedValuesHeaderData = function
88
89
  }, R.times(R.always([]), colLength)))(data);
89
90
  };
90
91
 
92
+ var getCellsWidth = R.addIndex(R.reduce)(function (acc, element, index) {
93
+ return R.append(R.add(acc[index], R.propOr(0, 'offsetWidth', element)), acc);
94
+ }, [0]);
95
+
91
96
  var TableHtml5 = function TableHtml5(_ref) {
92
97
  var cells = _ref.cells,
93
98
  _ref$headerData = _ref.headerData,
@@ -104,10 +109,16 @@ var TableHtml5 = function TableHtml5(_ref) {
104
109
  headerHeight = _useState[0],
105
110
  setHeaderHeight = _useState[1];
106
111
 
112
+ var _useState2 = (0, _react.useState)([0]),
113
+ subHeadCellsWidth = _useState2[0],
114
+ setSubHeadCellsWidth = _useState2[1];
115
+
107
116
  var headerRef = (0, _react.useRef)(null);
117
+ var subHeadCellsRef = (0, _react.useRef)([]);
108
118
 
109
119
  (0, _react.useEffect)(function () {
110
120
  setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
121
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
111
122
  }, [cells, headerData, sectionsData]);
112
123
 
113
124
  (0, _react.useEffect)(function () {
@@ -115,8 +126,9 @@ var TableHtml5 = function TableHtml5(_ref) {
115
126
  var resizeListener = function resizeListener() {
116
127
  clearTimeout(timeoutId);
117
128
  timeoutId = setTimeout(function () {
118
- return setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef), 150);
119
- });
129
+ setHeaderHeight(R.pathOr(0, ['current', 'clientHeight'], headerRef));
130
+ setSubHeadCellsWidth(getCellsWidth(R.prop('current', subHeadCellsRef)));
131
+ }, 150);
120
132
  };
121
133
  window.addEventListener('resize', resizeListener);
122
134
  return function () {
@@ -146,7 +158,9 @@ var TableHtml5 = function TableHtml5(_ref) {
146
158
  _react2.default.createElement(_subHeader2.default, {
147
159
  headerData: headerData,
148
160
  xLayoutData: xLayoutData,
149
- activeCellIds: activeCellIds
161
+ activeCellIds: activeCellIds,
162
+ ref: subHeadCellsRef,
163
+ subHeadCellsWidth: subHeadCellsWidth
150
164
  })
151
165
  ),
152
166
  mapIndexed(function (section, index) {
@@ -161,7 +175,8 @@ var TableHtml5 = function TableHtml5(_ref) {
161
175
  xLayoutDataLength: xLayoutDataLength,
162
176
  cellHandler: cellHandler,
163
177
  activeCellIds: activeCellIds,
164
- activeCellHandler: activeCellHandler
178
+ activeCellHandler: activeCellHandler,
179
+ subHeadCellsWidth: subHeadCellsWidth
165
180
  });
166
181
  }, sectionsData)
167
182
  );
package/lib/TableHtml5/header.js CHANGED
@@ -106,7 +106,8 @@ var Header = function Header(_ref) {
106
106
  className: (0, _classnames2.default)(classes.tableHeadCell, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx)),
107
107
  colSpan: R.inc(xLayoutDataLength),
108
108
  id: id,
109
- tabIndex: 0
109
+ tabIndex: 0,
110
+ style: { position: 'sticky', left: 0, zIndex: 1 }
110
111
  },
111
112
  _react2.default.createElement(
112
113
  'div',
package/lib/TableHtml5/section.js CHANGED
@@ -68,7 +68,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
68
68
  verticalAlign: 'middle'
69
69
  },
70
70
  fillerCell: {
71
- width: '30px',
71
+ minWidth: '30px',
72
72
  backgroundColor: theme.palette.grey[200],
73
73
  verticalAlign: 'top',
74
74
  border: 'inherit',
@@ -106,7 +106,8 @@ var Section = function Section(_ref) {
106
106
  activeCellIds = _ref.activeCellIds,
107
107
  headerHeight = _ref.headerHeight,
108
108
  sectionIndex = _ref.sectionIndex,
109
- nbColumnsByRows = _ref.nbColumnsByRows;
109
+ nbColumnsByRows = _ref.nbColumnsByRows,
110
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
110
111
 
111
112
  var classes = useStyles();
112
113
  var currentSection = R.path([0, 'key'], section);
@@ -153,7 +154,8 @@ var Section = function Section(_ref) {
153
154
  className: (0, _classnames2.default)(classes.rowTitle, (_cx = {}, _cx[classes.topCell] = R.not(R.isEmpty(flags)), _cx[classes.highlight] = R.prop(rowId)(activeCellIds), _cx)),
154
155
  id: id,
155
156
  headers: 'subHeader_' + index + ' ' + currentSection,
156
- component: 'th'
157
+ component: 'th',
158
+ style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 }
157
159
  },
158
160
  _react2.default.createElement(
159
161
  'div',
@@ -175,7 +177,8 @@ var Section = function Section(_ref) {
175
177
  _react2.default.createElement(
176
178
  _TableCell2.default,
177
179
  {
178
- className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2))
180
+ className: (0, _classnames2.default)(classes.fillerCell, (_cx2 = {}, _cx2[classes.highlight] = R.prop(rowId)(activeCellIds), _cx2)),
181
+ style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
179
182
  },
180
183
  _react2.default.createElement(
181
184
  'div',
@@ -222,7 +225,8 @@ Section.propTypes = process.env.NODE_ENV !== "production" ? {
222
225
  sectionIndex: _propTypes2.default.number,
223
226
  headerNumberRows: _propTypes2.default.number,
224
227
  nbColumnsByRows: _propTypes2.default.array,
225
- maxColumns: _propTypes2.default.number
228
+ maxColumns: _propTypes2.default.number,
229
+ subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
226
230
  } : {};
227
231
 
228
232
  exports.default = Section;
package/lib/TableHtml5/sectionHeader.js CHANGED
@@ -97,7 +97,7 @@ var SectionHeader = function SectionHeader(_ref) {
97
97
  {
98
98
  key: section.key,
99
99
  className: classes.stickyHeaderSection,
100
- style: { top: headerHeight + 'px' }
100
+ style: { top: headerHeight, zIndex: 2 }
101
101
  },
102
102
  _react2.default.createElement(
103
103
  _TableCell2.default,
package/lib/TableHtml5/subHeader.js CHANGED
@@ -77,10 +77,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
77
77
 
78
78
  var mapIndexed = R.addIndex(R.map);
79
79
 
80
- var SubHeader = function SubHeader(_ref) {
80
+ var SubHeader = _react2.default.forwardRef(function (_ref, refs) {
81
81
  var headerData = _ref.headerData,
82
82
  xLayoutData = _ref.xLayoutData,
83
- activeCellIds = _ref.activeCellIds;
83
+ activeCellIds = _ref.activeCellIds,
84
+ subHeadCellsWidth = _ref.subHeadCellsWidth;
84
85
 
85
86
  var classes = useStyles();
86
87
  return _react2.default.createElement(
@@ -93,7 +94,11 @@ var SubHeader = function SubHeader(_ref) {
93
94
  component: 'th',
94
95
  className: classes.columnsTitle,
95
96
  key: index,
96
- id: 'subHeader_' + index
97
+ id: 'subHeader_' + index,
98
+ style: { position: 'sticky', left: subHeadCellsWidth[index], zIndex: 1 },
99
+ ref: function ref(element) {
100
+ return refs.current[index] = element;
101
+ }
97
102
  },
98
103
  _react2.default.createElement(
99
104
  'div',
@@ -107,7 +112,10 @@ var SubHeader = function SubHeader(_ref) {
107
112
  )
108
113
  );
109
114
  }, xLayoutData),
110
- _react2.default.createElement(_TableCell2.default, { className: classes.fillerCell }),
115
+ _react2.default.createElement(_TableCell2.default, {
116
+ className: classes.fillerCell,
117
+ style: { position: 'sticky', left: R.last(subHeadCellsWidth) }
118
+ }),
111
119
  mapIndexed(function (item, index) {
112
120
  var _cx;
113
121
 
@@ -121,12 +129,13 @@ var SubHeader = function SubHeader(_ref) {
121
129
  );
122
130
  }, headerData)
123
131
  );
124
- };
132
+ });
125
133
 
126
134
  SubHeader.propTypes = process.env.NODE_ENV !== "production" ? {
127
135
  activeCellIds: _propTypes2.default.object,
128
136
  headerData: _propTypes2.default.array,
129
- xLayoutData: _propTypes2.default.array
137
+ xLayoutData: _propTypes2.default.array,
138
+ subHeadCellsWidth: _propTypes2.default.arrayOf(_propTypes2.default.number)
130
139
  } : {};
131
140
 
132
141
  exports.default = SubHeader;
package/lib/ToggleButton/ToggleButton.js CHANGED
@@ -53,7 +53,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
53
53
  }
54
54
  },
55
55
  label: {
56
- textTransform: 'capitalize',
56
+ textTransform: function textTransform(_ref) {
57
+ var _textTransform = _ref.textTransform;
58
+ return _textTransform;
59
+ },
57
60
  textAlign: 'left',
58
61
  fontSize: '0.9375rem',
59
62
  lineHeight: '1.0'
@@ -65,17 +68,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
65
68
  };
66
69
  });
67
70
 
68
- var ToggleButton = function ToggleButton(_ref) {
71
+ var ToggleButton = function ToggleButton(_ref2) {
69
72
  var _cx;
70
73
 
71
- var isOpen = _ref.isOpen,
72
- label = _ref.label,
73
- toggle = _ref.toggle,
74
- testId = _ref.testId,
75
- _ref$tabindex = _ref.tabindex,
76
- tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex;
74
+ var isOpen = _ref2.isOpen,
75
+ label = _ref2.label,
76
+ toggle = _ref2.toggle,
77
+ testId = _ref2.testId,
78
+ _ref2$tabindex = _ref2.tabindex,
79
+ tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
80
+ _ref2$textTransform = _ref2.textTransform,
81
+ textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
77
82
 
78
- var classes = useStyles();
83
+ var classes = useStyles({ textTransform: textTransform });
79
84
  return _react2.default.createElement(
80
85
  _Button2.default,
81
86
  {
@@ -98,7 +103,8 @@ ToggleButton.propTypes = process.env.NODE_ENV !== "production" ? {
98
103
  tabindex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
99
104
  isOpen: _propTypes2.default.bool,
100
105
  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
101
- toggle: _propTypes2.default.func
106
+ toggle: _propTypes2.default.func,
107
+ textTransform: _propTypes2.default.string
102
108
  } : {};
103
109
 
104
110
  exports.default = ToggleButton;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "6.5.1",
3
+ "version": "6.6.2",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",
@@ -76,7 +76,7 @@
76
76
  "jest-environment-jsdom-fourteen": "0.1.0",
77
77
  "jss-rtl": "^0.2.3",
78
78
  "lint-staged": "^8.2.1",
79
- "nwb": "^0.23.0",
79
+ "nwb": "0.23.0",
80
80
  "prettier": "1.12.1",
81
81
  "pretty-quick": "^1.10.0",
82
82
  "react-a11y": "^1.1.0",