@sis-cc/dotstatsuite-visions 11.4.1 → 12.0.0

package/es/CollapseButtons/Paper.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import Paper from '@mui/material/Paper';
+import Grid from '@mui/material/Grid';
 import cx from 'classnames';
 
 var useStyles = makeStyles(function (theme) {

package/es/CollapseButtons/index.js

@@ -1,90 +1,90 @@
-/**
- * Collapse Buttons show one or many buttons with Children and Sub-Children
- * Buttons are drawn in row of three
- * Children are drawn also in row of three and the sub-children are drawn in line separated by comma
- * justify properties can take all variant define in "justifyContent" https://material-ui.com/api/grid/
- * | 'flex-start'
- * | 'center'
- * | 'flex-end'
- * | 'space-between'
- * | 'space-around'
- * | 'space-evenly'
- *
- * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
- *
- * to manage layout you have three properties
- * nbColumns: numbers of column you want to have
- * 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)
- * breakpoint: is a function with theme arg. Allow you to change the mobile view, (default theme => theme.breakpoints.down('sm'))
- *
- * @memberOf VISIONS
- * @name CollapseButtons
- * @tag component
- * @api public
- * @props
- * CollapseButtons.propTypes = {
- *   testId: PropTypes.string,
- *   selectedItemId: PropTypes.string,
- *   items: PropTypes.arrayOf(
- *     PropTypes.shape({
- *       id: PropTypes.string.isRequired,
- *       label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *       svgPath: PropTypes.string,
- *       values: PropTypes.arrayOf(
- *         PropTypes.shape({
- *           id: PropTypes.string.isRequired,
- *           label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *           subtopics: PropTypes.arrayOf(
- *             PropTypes.oneOfType([
- *               PropTypes.shape({
- *                 id: PropTypes.string.isRequired,
- *                 label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
- *               }),
- *               PropTypes.string,
- *             ]),
- *           ),
- *         }),
- *       ),
- *     }),
- *   ),
- *   action: PropTypes.func,
- *   nbColumns: PropTypes.number,
- *   isSecondLevelClikable: PropTypes.bool,
- *   breakpoint: PropTypes.func,
- *   gridButtonsProps: PropTypes.object,
- *   justify: PropTypes.string,
- *   textTransform: PropTypes.string,
- * };
- * @theme
- * // button (See ToggleButton Component)
- *
- * // item (an item is the list of labels that is shown after clicking on "Topic")
- * {
- *    palette: {
- *      primary: {
- *        main: // item main label and sub label's hover. global override: outerPalette.primaryMain
- *      }
- *      tertiary: {
- *        light: // hover background color items (e.g. Economie)
- *      },
- *      secondary: {
- *        light: // use secondary light if tertiary is null
- *      }
- *      grey: {
- *        600: // svg icon color
- *        800: // sub label color. globale override: outerPalette.textLight
- *      }
- *    },
- *    typography: {
- *      body2: // font main label
- *      body1: // font sub label
- *    }
- * }
- * @testId
- * root: [testId]_[props.items.id]
- * input: [testId]_[props.items.id]_value_[props.items.values.id]
- *
- * @demoReady
+/**
+ * Collapse Buttons show one or many buttons with Children and Sub-Children
+ * Buttons are drawn in row of three
+ * Children are drawn also in row of three and the sub-children are drawn in line separated by comma
+ * justify properties can take all variant define in "justifyContent" https://material-ui.com/api/grid/
+ * | 'flex-start'
+ * | 'center'
+ * | 'flex-end'
+ * | 'space-between'
+ * | 'space-around'
+ * | 'space-evenly'
+ *
+ * textTransform: 'none' | 'capitalize' | 'uppercase' | 'lowercase'
+ *
+ * to manage layout you have three properties
+ * nbColumns: numbers of column you want to have
+ * 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)
+ * breakpoint: is a function with theme arg. Allow you to change the mobile view, (default theme => theme.breakpoints.down('sm'))
+ *
+ * @memberOf VISIONS
+ * @name CollapseButtons
+ * @tag component
+ * @api public
+ * @props
+ * CollapseButtons.propTypes = {
+ *   testId: PropTypes.string,
+ *   selectedItemId: PropTypes.string,
+ *   items: PropTypes.arrayOf(
+ *     PropTypes.shape({
+ *       id: PropTypes.string.isRequired,
+ *       label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *       svgPath: PropTypes.string,
+ *       values: PropTypes.arrayOf(
+ *         PropTypes.shape({
+ *           id: PropTypes.string.isRequired,
+ *           label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *           subtopics: PropTypes.arrayOf(
+ *             PropTypes.oneOfType([
+ *               PropTypes.shape({
+ *                 id: PropTypes.string.isRequired,
+ *                 label: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+ *               }),
+ *               PropTypes.string,
+ *             ]),
+ *           ),
+ *         }),
+ *       ),
+ *     }),
+ *   ),
+ *   action: PropTypes.func,
+ *   nbColumns: PropTypes.number,
+ *   isSecondLevelClikable: PropTypes.bool,
+ *   breakpoint: PropTypes.func,
+ *   gridButtonsProps: PropTypes.object,
+ *   justify: PropTypes.string,
+ *   textTransform: PropTypes.string,
+ * };
+ * @theme
+ * // button (See ToggleButton Component)
+ *
+ * // item (an item is the list of labels that is shown after clicking on "Topic")
+ * {
+ *    palette: {
+ *      primary: {
+ *        main: // item main label and sub label's hover. global override: outerPalette.primaryMain
+ *      }
+ *      tertiary: {
+ *        light: // hover background color items (e.g. Economie)
+ *      },
+ *      secondary: {
+ *        light: // use secondary light if tertiary is null
+ *      }
+ *      grey: {
+ *        600: // svg icon color
+ *        800: // sub label color. globale override: outerPalette.textLight
+ *      }
+ *    },
+ *    typography: {
+ *      body2: // font main label
+ *      body1: // font sub label
+ *    }
+ * }
+ * @testId
+ * root: [testId]_[props.items.id]
+ * input: [testId]_[props.items.id]_value_[props.items.values.id]
+ *
+ * @demoReady
  */
 
 export { default } from './CollapseButtons';

package/es/CollapsibleTree/Collapse.js

@@ -4,11 +4,12 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pathOr } from 'ramda';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import Collapse from '@material-ui/core/Collapse';
-import Button from '@material-ui/core/Button';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import Collapse from '@mui/material/Collapse';
+import Button from '@mui/material/Button';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 
 var VARIANT_ICON = 'icon';
 export var VARIANT_BOLD = 'bold';

package/es/CollapsibleTree/CollapsibleTree.js

@@ -5,16 +5,16 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 import React, { useState, Fragment, useEffect } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
-import Container from '@material-ui/core/Container';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Divider from '@material-ui/core/Divider';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Grid from '@material-ui/core/Grid';
+import Container from '@mui/material/Container';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Divider from '@mui/material/Divider';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import CircularProgress from '@mui/material/CircularProgress';
+import Grid from '@mui/material/Grid';
 import Collapse, { VARIANT_BOLD } from './Collapse';
 import cx from 'classnames';
 
@@ -121,7 +121,7 @@ var CollapsibleTree = function CollapsibleTree(_ref) {
         children,
         React.createElement(
           IconButton,
-          { color: 'primary', onClick: onClick },
+          { color: 'primary', onClick: onClick, size: 'large' },
           icon
         )
       )

package/es/CollapsibleTree/index.js

@@ -1,49 +1,49 @@
-/**
- * CollapsibleTree is a component that show you a tree structure with a button to expand/collapse each node.
- * defaultDepthLevel is the maximum level that will be open by "collapse all" button value could be 0|1. set to 1 by default.
- *
- * @memberOf VISIONS
- * @name CollapsibleTree
- * @tag component
- * @api public
- * @props
- * CollapsibleTree.propTypes = {
- *  data: PropTypes.arrayOf(PropTypes.shape({
- *    id: PropTypes.string.isRequired,
- *    label: PropTypes.string,
- *    children: PropTypes.arrayOf(PropTypes.shape({
- *      id: PropTypes.string.isRequired,
- *      label: PropTypes.string,
- *      children: PropTypes.arrayOf(PropTypes.shape({
- *        id: PropTypes.string.isRequired,
- *        label: PropTypes.string,
- *        value: PropTypes.string,
- *      })),
- *    }))
- *  })),
- *  defaultDepthLevel: PropTypes.number,
- *  testId: PropTypes.string,
- *  labels: PropTypes.shape({
- *    collapseAll: PropTypes.string,
- *    expandAll: PropTypes.string,
- *    noValue: PropTypes.string,
- *  }),
- *};
- * @theme
- * {
- *   palette: {
- *     primary: {
- *       main: // color label button
- *     },
- *   }
- *   mixins: {
- *    CollapsibleTree: {
- *      title: {
- *        // font, color, of titles
- *      },
- * }
- * @demoReady
- *
+/**
+ * CollapsibleTree is a component that show you a tree structure with a button to expand/collapse each node.
+ * defaultDepthLevel is the maximum level that will be open by "collapse all" button value could be 0|1. set to 1 by default.
+ *
+ * @memberOf VISIONS
+ * @name CollapsibleTree
+ * @tag component
+ * @api public
+ * @props
+ * CollapsibleTree.propTypes = {
+ *  data: PropTypes.arrayOf(PropTypes.shape({
+ *    id: PropTypes.string.isRequired,
+ *    label: PropTypes.string,
+ *    children: PropTypes.arrayOf(PropTypes.shape({
+ *      id: PropTypes.string.isRequired,
+ *      label: PropTypes.string,
+ *      children: PropTypes.arrayOf(PropTypes.shape({
+ *        id: PropTypes.string.isRequired,
+ *        label: PropTypes.string,
+ *        value: PropTypes.string,
+ *      })),
+ *    }))
+ *  })),
+ *  defaultDepthLevel: PropTypes.number,
+ *  testId: PropTypes.string,
+ *  labels: PropTypes.shape({
+ *    collapseAll: PropTypes.string,
+ *    expandAll: PropTypes.string,
+ *    noValue: PropTypes.string,
+ *  }),
+ *};
+ * @theme
+ * {
+ *   palette: {
+ *     primary: {
+ *       main: // color label button
+ *     },
+ *   }
+ *   mixins: {
+ *    CollapsibleTree: {
+ *      title: {
+ *        // font, color, of titles
+ *      },
+ * }
+ * @demoReady
+ *
  */
 
 export { default } from './CollapsibleTree';

package/es/Contact/Contact.js

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { Grid, Paper, TextareaAutosize, Checkbox, FormControlLabel, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Grid, Paper, TextareaAutosize, Checkbox, FormControlLabel, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import { validate as getIsValidEmail } from 'isemail';
 import Mode from './Mode';
 import Input from './Input';

package/es/Contact/Input.js

@@ -4,11 +4,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Done from '@material-ui/icons/Done';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import Done from '@mui/icons-material/Done';
 import { withInput } from '../Input/with-input';
 
 var useStyles = makeStyles(function () {
@@ -36,7 +36,7 @@ var RightIcon = function RightIcon(_ref2) {
     IconButton,
     { color: 'primary', onClick: function onClick() {
         return onSubmit();
-      } },
+      }, size: 'small' },
     React.createElement(Icon, null)
   );
 };

package/es/Contact/Mode.js

@@ -3,13 +3,14 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Card from '@material-ui/core/Card';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
-import RadioGroup from '@material-ui/core/RadioGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio from '@material-ui/core/Radio';
+import Card from '@mui/material/Card';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
 import { Tooltip, Warning as WarningIcon } from '../';
 
 var useStyles = makeStyles(function (theme) {

package/es/DataEdit/DataEdit.js

@@ -3,10 +3,10 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import Input from './Input';
 import { withBlank } from '../utils';
 

package/es/DataEdit/Input.js

@@ -5,12 +5,12 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import { makeStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import IconButton from '@material-ui/core/IconButton';
-import Done from '@material-ui/icons/Done';
-import RotateLeftIcon from '@material-ui/icons/RotateLeft';
+import makeStyles from '@mui/styles/makeStyles';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import Done from '@mui/icons-material/Done';
+import RotateLeftIcon from '@mui/icons-material/RotateLeft';
 
 var useStyles = makeStyles(function () {
   return {
@@ -46,7 +46,7 @@ var RightIcon = function RightIcon(_ref2) {
     IconButton,
     { color: 'primary', onClick: function onClick() {
         return onSubmit();
-      } },
+      }, size: 'large' },
     React.createElement(Icon, null)
   );
 };
@@ -113,7 +113,8 @@ var MyInput = function MyInput(_ref3) {
         id: resetId,
         'aria-label': resetLabel,
         onKeyPress: onEnterLabel,
-        onClick: handleReset
+        onClick: handleReset,
+        size: 'large'
       },
       React.createElement(RotateLeftIcon, { fontSize: 'small' })
     )

package/es/DataFooter/DataFooter.js

@@ -3,10 +3,11 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import * as R from 'ramda';
 import useSize from '@react-hook/size';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import makeStyles from '@mui/styles/makeStyles';
+import { visuallyHidden } from '@mui/utils';
 import { Tooltip } from '../';
 import { T4_BREAKPOINTS } from '../theme';
 import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
@@ -115,7 +116,6 @@ var DataFooter = function DataFooter(_ref) {
                 'aria-hidden': false,
                 placement: 'top',
                 enterNextDelay: 100,
-                interactive: true,
                 arrow: true,
                 open: open,
                 onOpen: function onOpen() {
@@ -133,7 +133,7 @@ var DataFooter = function DataFooter(_ref) {
             ),
             React.createElement(
               Typography,
-              { variant: 'srOnly' },
+              { sx: visuallyHidden },
               copyright.content
             )
           )

package/es/DataFooter/index.js

@@ -1,33 +1,33 @@
-/**
- * DataFooter is the footer of the datavis component (tables, charts, maps).
- *
- * Responsive rules:
- * - no footer below 120px
- * - no legend below 370px
- * - no source below 370px, adaptative fontSize when displayed
- * - copyright, adaptative fontSize when displayed
- * - invariant logo, 21px (half min height of the footer)
- *
- * @memberOf VISIONS
- * @name DataFooter
- * @tag component
- * @api public
- * @props
- * logo: PropTypes.string.isRequired,
- * source: PropTypes.shape({
- *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *  link: PropTypes.string,
- * }),
- * copyright: PropTypes.shape({
- *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- * }),
- * legend: PropTypes.element,
- * isSticky: PropTypes.bool,
- * @theme
- * // tooltip (see Tooltip Component)
- * @demoReady
- *
+/**
+ * DataFooter is the footer of the datavis component (tables, charts, maps).
+ *
+ * Responsive rules:
+ * - no footer below 120px
+ * - no legend below 370px
+ * - no source below 370px, adaptative fontSize when displayed
+ * - copyright, adaptative fontSize when displayed
+ * - invariant logo, 21px (half min height of the footer)
+ *
+ * @memberOf VISIONS
+ * @name DataFooter
+ * @tag component
+ * @api public
+ * @props
+ * logo: PropTypes.string.isRequired,
+ * source: PropTypes.shape({
+ *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  link: PropTypes.string,
+ * }),
+ * copyright: PropTypes.shape({
+ *  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ * }),
+ * legend: PropTypes.element,
+ * isSticky: PropTypes.bool,
+ * @theme
+ * // tooltip (see Tooltip Component)
+ * @demoReady
+ *
  */
 
 export { default } from './DataFooter';

package/es/DataHeader/DataHeader.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import useSize from '@react-hook/size';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { useTheme } from '@material-ui/core/styles';
-import Info from '@material-ui/icons/Info';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { useTheme } from '@mui/material/styles';
+import Info from '@mui/icons-material/Info';
+import Typography from '@mui/material/Typography';
 import { T4_BREAKPOINTS } from '../theme';
 import Title from './Title';
 import Flags from './Flags';
@@ -42,6 +42,8 @@ var useStyles = makeStyles(function (theme) {
       lineHeight: 1.3
     },
     subtitle: _extends({
+      display: 'flex',
+      alignItems: 'center',
       lineHeight: 1.6,
       color: theme.palette.grey[600]
     }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),

package/es/Dataflow/Dataflow.js

@@ -7,18 +7,18 @@ import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
 import useSize from '@react-hook/size';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Collapse from '@material-ui/core/Collapse';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import IconButton from '@material-ui/core/IconButton';
-import ExpandMore from '@material-ui/icons/ExpandMore';
-import ExpandLess from '@material-ui/icons/ExpandLess';
-import Link from '@material-ui/core/Link';
-import Divider from '@material-ui/core/Divider';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Collapse from '@mui/material/Collapse';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardActions from '@mui/material/CardActions';
+import IconButton from '@mui/material/IconButton';
+import ExpandMore from '@mui/icons-material/ExpandMore';
+import ExpandLess from '@mui/icons-material/ExpandLess';
+import Link from '@mui/material/Link';
+import Divider from '@mui/material/Divider';
 import Tooltip from '../Tooltip/Tooltip';
 import { withBlank } from '../utils';
 import { isLast } from '../Chips/utils';