@sis-cc/dotstatsuite-visions 7.19.1 → 7.20.1

package/lib/Chips/GroupedChips.js

@@ -0,0 +1,122 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _styles = require('@material-ui/core/styles');
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _utils = require('../utils');
+
+var _styles2 = require('./styles');
+
+var _CustomChip = require('./CustomChip');
+
+var _CustomChip2 = _interopRequireDefault(_CustomChip);
+
+var _utils2 = require('./utils');
+
+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 }; }
+
+var GroupedChips = function GroupedChips(_ref) {
+  var _ref$itemProps = _ref.itemProps,
+      itemProps = _ref$itemProps === undefined ? {} : _ref$itemProps,
+      onDelete = _ref.onDelete,
+      _ref$labelRenderer = _ref.labelRenderer,
+      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      tooltipRenderer = _ref.tooltipRenderer,
+      ariaLabel = _ref.ariaLabel,
+      _ref$reducingNbChips = _ref.reducingNbChips,
+      reducingNbChips = _ref$reducingNbChips === undefined ? 15 : _ref$reducingNbChips,
+      labels = _ref.labels,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId;
+  var parentId = itemProps.id,
+      isNotRemovable = itemProps.isNotRemovable,
+      _itemProps$values = itemProps.values,
+      values = _itemProps$values === undefined ? [] : _itemProps$values;
+
+  var theme = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
+  var classes = (0, _styles2.useStyles)();
+  return _react2.default.createElement(
+    _react.Fragment,
+    null,
+    _react2.default.createElement(_CustomChip2.default, {
+      testId: testId,
+      parentId: parentId,
+      label: labelRenderer(itemProps) + ':',
+      ariaLabel: ariaLabel,
+      chipClasses: (0, _classnames2.default)(classes.mainChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: (0, _classnames2.default)(classes.spaceLabel, classes.formatLabel)
+    }),
+    R.pipe(R.length, R.flip(R.gt)(reducingNbChips))(values) ? _react2.default.createElement(_CustomChip2.default, {
+      parentId: parentId,
+      label: R.length(values) + ' ' + R.prop('reducingChip')(labels),
+      chipClasses: (0, _classnames2.default)(classes.secondaryChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: (0, _classnames2.default)(classes.formatLabel)
+    }) : R.map(function (items) {
+      var lastItem = R.last(items);
+      var id = lastItem.id,
+          isNotRemovable = lastItem.isNotRemovable;
+
+
+      return _react2.default.createElement(_CustomChip2.default, {
+        key: id,
+        id: id,
+        items: R.pipe(R.length, R.gte(2)) ? items : null,
+        renderer: R.is(Function)(tooltipRenderer) ? tooltipRenderer : (0, _utils2.myTooltipRenderer)({ isRtl: isRtl, labelRenderer: labelRenderer }),
+        label: labelRenderer(lastItem),
+        ariaLabel: ariaLabel,
+        parentId: parentId,
+        onDelete: isNotRemovable ? null : onDelete,
+        chipClasses: (0, _classnames2.default)(classes.secondaryChip, classes.chip),
+        iconClasses: classes.icon,
+        labelClasses: (0, _classnames2.default)(classes.formatLabel)
+      });
+    })(values)
+  );
+};
+GroupedChips.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: _propTypes2.default.string,
+  itemProps: _propTypes2.default.shape({
+    id: _propTypes2.default.string,
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    isNotRemovable: _propTypes2.default.bool,
+    values: _propTypes2.default.arrayOf(_propTypes2.default.arrayOf(_propTypes2.default.shape({
+      id: _propTypes2.default.string,
+      label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+      isNotRemovable: _propTypes2.default.bool
+    })))
+  }),
+  onDelete: _propTypes2.default.func,
+  labelRenderer: _propTypes2.default.func,
+  tooltipRenderer: _propTypes2.default.func,
+  ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  reducingNbChips: _propTypes2.default.number,
+  labels: _propTypes2.default.shape({
+    reducingChip: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  })
+} : {};
+exports.default = GroupedChips;
+module.exports = exports['default'];

package/lib/Chips/index.js

@@ -2,15 +2,22 @@
 
 exports.__esModule = true;
 
-var _Chips = require('./Chips');
+var _GroupedChips = require('./GroupedChips');
 
 Object.defineProperty(exports, 'default', {
   enumerable: true,
   get: function get() {
-    return _interopRequireDefault(_Chips).default;
+    return _interopRequireDefault(_GroupedChips).default;
   }
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _DeleteChip = require('./DeleteChip');
 
-module.exports = exports['default'];
+Object.defineProperty(exports, 'DeleteAllChip', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_DeleteChip).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Chips/styles.js

@@ -0,0 +1,74 @@
+'use strict';
+
+exports.__esModule = true;
+exports.useStyles = undefined;
+
+var _styles = require('@material-ui/core/styles');
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+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; } }
+
+var useStyles = exports.useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
+    chip: {
+      height: 'unset',
+      borderRadius: 3,
+      minHeight: 25,
+      fontSize: 12,
+      margin: theme.spacing(0.25)
+    },
+    mainChip: {
+      background: 'none',
+      color: theme.palette.text.primary
+    },
+    secondaryChip: {
+      backgroundColor: R.path(['palette', 'tertiary', 'light'])(theme) || theme.palette.grey[100],
+      '&:hover, &:focus': {
+        backgroundColor: R.path(['palette', 'tertiary', 'dark'])(theme) || theme.palette.grey[300]
+      },
+      color: theme.palette.primary.main
+    },
+    icon: {
+      color: theme.palette.primary.main,
+      cursor: 'pointer',
+      margin: 0,
+      '&:hover': {
+        color: 'inherit'
+      },
+      '& svg': {
+        fontSize: 15
+      }
+    },
+    divider: {
+      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
+    },
+    formatLabel: {
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'anywhere'
+    },
+    tooltip: theme.typography.body2,
+    childrenIndicator: {
+      margin: '0 2px',
+      fontSize: 10
+    },
+    tooltipIndicator: {
+      borderBottom: '1px dotted ' + theme.palette.primary.main
+    }
+  };
+});

package/lib/Chips/utils.js

@@ -0,0 +1,20 @@
+'use strict';
+
+exports.__esModule = true;
+exports.isLast = exports.myTooltipRenderer = undefined;
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+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; } }
+
+var myTooltipRenderer = exports.myTooltipRenderer = function myTooltipRenderer(_ref) {
+  var isRtl = _ref.isRtl,
+      labelRenderer = _ref.labelRenderer;
+  return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(isRtl ? ' < ' : ' > '));
+};
+
+var isLast = exports.isLast = function isLast(index, list) {
+  return index + 1 === R.length(list);
+};

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -119,7 +119,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
             spotlight: { fields: {} },
             action: setSpotlight
           }),
-          R.is(Function, toggleBulk) && _react2.default.createElement(
+          R.is(Function, toggleBulk) && hasSpotligt && _react2.default.createElement(
             _.VerticalButton,
             {
               'aria-label': R.prop('advancedSelection')(labels),

package/lib/VirtualizedTree/Item.js

@@ -36,6 +36,14 @@ var _SvgIcon = require('@material-ui/core/SvgIcon');
 
 var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
 
+var _CheckBoxOutlineBlankOutlined = require('@material-ui/icons/CheckBoxOutlineBlankOutlined');
+
+var _CheckBoxOutlineBlankOutlined2 = _interopRequireDefault(_CheckBoxOutlineBlankOutlined);
+
+var _CheckBoxOutlined = require('@material-ui/icons/CheckBoxOutlined');
+
+var _CheckBoxOutlined2 = _interopRequireDefault(_CheckBoxOutlined);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -46,11 +54,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var checkBoxPath = 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z';
-var checkPath = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
-
 var Item = function Item(_ref) {
-  var _cx, _extends2, _cx2, _cx3, _cx4, _cx5, _cx6;
+  var _extends2, _cx, _cx2, _cx3, _cx4, _cx5;
 
   var classes = _ref.classes,
       id = _ref.id,
@@ -89,8 +94,7 @@ var Item = function Item(_ref) {
     {
       disableGutters: true,
       classes: { disabled: classes.disabled },
-      className: (0, _classnames2.default)(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
-      disabled: isDisabled,
+      className: (0, _classnames2.default)(classes.listItemContainer, classes.disableSecondaryAction),
       tabIndex: -1,
       style: _extends({}, style, (_extends2 = {
         flexDirection: isRtl ? 'row-reverse' : 'row'
@@ -105,7 +109,7 @@ var Item = function Item(_ref) {
         'aria-label': ariaLabel,
         tabIndex: -1,
         size: 'small',
-        color: 'inherit',
+        color: 'primary',
         onClick: function onClick() {
           return changeList(hierarchicalId || id);
         }
@@ -120,30 +124,31 @@ var Item = function Item(_ref) {
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
-      className: (0, _classnames2.default)((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx[classes.listItemHover] = R.not(isDisabled), _cx[classes.disabledLabel] = isDisabled, _cx)),
       onMouseDown: isDisabled || isTooltipShown ? null : callbacks.onMouseDown,
       onMouseUp: isDisabled || isTooltipShown ? null : callbacks.onMouseUp,
       onMouseEnter: isDisabled || isTooltipShown ? null : callbacks.onMouseEnter
     }, R.pick(['onKeyPress'], callbacks), {
       title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      style: { opacity: isDisabled ? '0.5' : '1' },
       primary: _react2.default.createElement(
         'div',
         {
-          className: (0, _classnames2.default)(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+          className: (0, _classnames2.default)(classes.labelContainer, (_cx2 = {}, _cx2[classes.rtlLabelContainer] = isRtl, _cx2))
         },
         _react2.default.createElement(
           _SvgIcon2.default,
           {
             color: 'primary',
-            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
           },
-          _react2.default.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+          isSelected && R.not(isDisabled) ? _react2.default.createElement(_CheckBoxOutlined2.default, null) : _react2.default.createElement(_CheckBoxOutlineBlankOutlined2.default, null)
         ),
         svgPath && _react2.default.createElement(
           _SvgIcon2.default,
           {
             color: 'primary',
-            className: (0, _classnames2.default)(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
           },
           _react2.default.createElement('path', { d: svgPath })
         ),
@@ -172,7 +177,7 @@ var Item = function Item(_ref) {
               'data-testid': testId + '_value_' + id,
               color: 'inherit',
               variant: 'body2',
-              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
+              className: (0, _classnames2.default)(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
             label
           )

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -155,7 +155,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
   };
   var shiftSelect = function shiftSelect(index) {
     if (R.isEmpty(shiftIndexes)) {
-      var item = R.nth(index, list);
+      var item = R.pipe(R.nth(index), function (id) {
+        return R.prop(id, indexedItemsById);
+      })(list);
       var ids = R.pipe(getItemScope, R.filter(function (v) {
         return v.isSelected === item.isSelected;
       }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
@@ -195,25 +197,21 @@ var VirtualizedTree = function VirtualizedTree(props) {
         apply();
       } : null,
       onMouseDown: function onMouseDown(e) {
-        if (e.ctrlKey || e.shiftKey) {
-          return;
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        } else {
+          multiSelect(id);
+          setIsMouseDown(true);
         }
-        multiSelect(id);
-        setIsMouseDown(true);
       },
       onMouseEnter: isMouseDown ? function (e) {
         if (e.ctrlKey || e.shiftKey) {
           return;
         }
         multiSelect(id);
-      } : null,
-      onClick: function onClick(e) {
-        if (e.ctrlKey) {
-          multiSelect(id);
-        } else if (e.shiftKey) {
-          shiftSelect(index);
-        }
-      }
+      } : null
     };
   };
   var onKeyUp = function onKeyUp(e) {
@@ -337,7 +335,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
                 index: index,
                 style: style,
                 accessibility: accessibility,
-                ariaLabel: R.prop('navigateNext')(labels)
+                ariaLabel: R.prop('navigateNext')(labels),
+                theme: theme
               }));
             }
           });

package/lib/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 exports.__esModule = true;
-exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.Chips = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
+exports.T4_BREAKPOINTS = exports.innerPalette = exports.sisccTheme = exports.HierarchicalFilter = exports.AdvancedFilterDialog = exports.VirtualizedTree = exports.AuthDialog = exports.VerticalButton = exports.UserRightForm = exports.Tooltip = exports.ToggleButton = exports.Tag = exports.TablePreview = exports.TableLayout = exports.Cell = exports.TableHtml5 = exports.TableHeader = exports.TableFooter = exports.Spotlight = exports.SisccFooter = exports.Share = exports.Select = exports.ScopeList = exports.reduceChildren = exports.spotlightScopeListEngine = exports.PeriodPicker = exports.Pagination = exports.NoData = exports.Logo = exports.Loading = exports.LabelDivider = exports.InputNumber = exports.Input = exports.ExpansionPanel = exports.DataFooter = exports.DataHeader = exports.Dataflow = exports.DataEdit = exports.Contact = exports.CollapsibleTree = exports.CollapseButtons = exports.GroupedChips = exports.DeleteAllChip = exports.ChartsConfig = exports.Button = exports.Breadcrumbs = exports.ApiQueries = exports.Alert = undefined;
 
 var _Alert = require('./Alert');
 
@@ -50,7 +50,13 @@ Object.defineProperty(exports, 'ChartsConfig', {
 
 var _Chips = require('./Chips');
 
-Object.defineProperty(exports, 'Chips', {
+Object.defineProperty(exports, 'DeleteAllChip', {
+  enumerable: true,
+  get: function get() {
+    return _Chips.DeleteAllChip;
+  }
+});
+Object.defineProperty(exports, 'GroupedChips', {
   enumerable: true,
   get: function get() {
     return _interopRequireDefault(_Chips).default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.19.1",
+  "version": "7.20.1",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -18,8 +18,8 @@
     "umd"
   ],
   "scripts": {
-    "build": "nwb build-react-component --no-demo && node scripts/doc && nwb build-demo",
-    "build:dev": "nwb build-react-component --no-demo",
+    "build": "nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo",
+    "build:dev": "nwb build-react-component --copy-files --no-demo",
     "clean": "nwb clean-module && nwb clean-demo",
     "prepublishOnly": "npm run build",
     "start": "nwb serve-react-demo",
@@ -73,6 +73,7 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.0.1",
     "husky": "^2.7.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jss-rtl": "^0.2.3",
@@ -113,7 +114,8 @@
     "modulePaths": [],
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+      "\\.(jpg|jpeg|png)$": "identity-obj-proxy"
     },
     "moduleFileExtensions": [
       "web.js",
@@ -207,4 +209,4 @@
     "parser": "babylon",
     "semi": true
   }
-}
+}