@hipay/hipay-material-ui 2.0.0-beta.36 → 2.0.0-beta.37

package/es/HiSelect/HiSuggestSelect.js

@@ -19,10 +19,10 @@ export const styles = theme => ({
     width: '100%'
   },
   popper: {
-    width: '100%',
-    transform: 'none',
-    zIndex: 9,
-    top: '100%'
+    width: '100% !important',
+    transform: 'none !important',
+    zIndex: '9 !important',
+    top: '100% !important'
   },
   paper: {
     borderRadius: '0px 2px',
@@ -184,12 +184,12 @@ class HiSuggestSelect extends React.PureComponent {
       onKeyDown: this.handleKeyDownSearch,
       onBlur: this.handleBlur,
       onFocus: this.handleFocus
-    })), open && React.createElement(Popper, {
+    })), React.createElement(Popper, {
       disablePortal: true,
       anchorEl: this.textInput,
       placement: "bottom-start",
-      eventsEnabled: open,
-      className: classes.popper
+      className: classes.popper,
+      open: true
     }, React.createElement(Grow, {
       in: open,
       id: "menu-list",
@@ -201,7 +201,7 @@ class HiSuggestSelect extends React.PureComponent {
     }, React.createElement(HiSelectableList, {
       itemList: optionsShown,
       selectedIdList: [],
-      checkbox: false,
+      hideCheckbox: true,
       onSelect: this.handleSelect,
       translations: translations,
       onKeyDown: this.handleKeyDown

package/es/HiSelectableList/HiSelectableList.js

@@ -6,7 +6,9 @@ import List from '@material-ui/core/List';
 import withStyles from '../styles/withStyles';
 import HiSelectableListItem from './HiSelectableListItem';
 export const styles = () => ({
-  root: {}
+  root: {
+    padding: 0
+  }
 });
 /**
  * Construit une liste d'item sélectionnable (avec checkbox)

package/es/HiSelectableList/HiSelectableListItem.js

@@ -12,7 +12,9 @@ import HiLoader from '../HiLoader';
 import withStyles from '../styles/withStyles';
 import { escapeHTML } from '../utils/helpers';
 export const styles = theme => ({
-  root: {},
+  root: {
+    paddingLeft: 4
+  },
   listItem: {
     backgroundColor: theme.palette.background3,
     color: theme.palette.neutral.dark,
@@ -78,7 +80,8 @@ export const styles = theme => ({
   }),
   label: {
     display: 'inline-block',
-    margin: '1px 0'
+    margin: '1px 0',
+    paddingLeft: 4
   },
   coloredLabel: {
     display: 'inline-flex',
@@ -93,7 +96,7 @@ export const styles = theme => ({
     color: theme.palette.neutral.main,
     fontWeight: theme.typography.fontWeightLight,
     fontSize: 11,
-    marginLeft: 8
+    marginLeft: 4
   }),
   inline: {},
   info: _objectSpread({}, theme.typography.b3, {
@@ -109,19 +112,19 @@ export const styles = theme => ({
     alignSelf: 'center'
   }),
   checkbox: {
-    width: 20,
-    height: 20,
-    fontSize: 20,
     marginTop: 3
   },
+  checkboxWithSecondaryInline: {
+    marginTop: '-8px'
+  },
   img: {
     width: 24,
     height: 'auto',
-    margin: '2px 8px',
+    margin: '1px 4px 3px 4px',
     verticalAlign: 'middle'
   },
   icon: {
-    margin: '0 8px',
+    margin: '0 4px',
     verticalAlign: 'middle'
   }
 });
@@ -256,13 +259,13 @@ class HiSelectableListItem extends React.Component {
       onMouseLeave: this.setHover(false)
     }, {
       style: {
-        paddingLeft: `${level * 32}px`
+        paddingLeft: `${paddingLeft + level * 32}px`
       }
     }), !hideCheckbox && !pinned && React.createElement(HiCheckbox, {
       checked: selected,
       checkedIcon: checkedIcon,
       classes: {
-        root: classes.checkbox
+        root: !secondaryInline ? classes.checkboxWithSecondaryInline : classes.checkbox
       },
       color: "primary" // TODO ?
       ,
@@ -301,7 +304,7 @@ HiSelectableListItem.defaultProps = {
   checkedIcon: 'check_box',
   indeterminate: false,
   level: 0,
-  paddingLeft: 0,
+  paddingLeft: 4,
   pinned: false,
   secondaryInline: true,
   selected: false,

package/es/index.js

@@ -14,4 +14,5 @@ export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
-export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
+export { default as HiDatePicker } from './HiDatePicker/HiDatePicker'; //export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
+//export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';

package/es/styles/createPalette.js

@@ -155,7 +155,8 @@ export default function createPalette(palette) {
       dark: red[700]
     },
     type = 'light',
-    contrastThreshold = 4,
+    contrastThreshold = 2.9,
+    // max light contrast
     tonalOffset = 0.2,
     context = 'local'
   } = palette,

package/es/utils/helpers.js

@@ -95,6 +95,123 @@ export function arrayUnique(array) {
 
   return a;
 }
+/**
+ * Format number relative to required size and locale
+ *
+ * @param number
+ * @param size
+ * @param locale
+ * @param precision
+ */
+
+export function formatNumber(number, size = 'l', locale = 'en-EN', precision) {
+  // Round number
+  switch (size) {
+    case 'm':
+      number = Math.round(number);
+      break;
+
+    case 's':
+      number = Math.round(number);
+      break;
+
+    case 'l':
+    default:
+      number = Math.round(number * 100) / 100;
+      break;
+  }
+
+  const effectivePrecision = precision || (size === 'l' ? 2 : 0); // To locale
+
+  const options = {
+    minimumFractionDigits: effectivePrecision,
+    maximumFractionDigits: effectivePrecision,
+    useGrouping: true
+  };
+  return number.toLocaleString(locale.replace(/_/g, '-'), options);
+}
+/**
+ * Format currency amount relative to required size, locale and currency
+ *
+ * large/fr-FR/EUR : 123456789,123 -> 123 465 789,123 €
+ * large/en-EN/USD : 123456789,123 -> $ 123,465,789.123
+ * large/en-EN/EUR : 123456789,123 -> € 123,465,789.123
+ * small/en-EN/EUR : 123456789,123 -> € 123,456,789
+ * tiny/en-EN/EUR  : 123456789,123 -> € 123M
+ * tiny/en-EN/EUR  :  23456789,123 -> € 23,456k
+ * tiny/en-EN/EUR  :     56789,123 -> € 56,789
+ *
+ * @param amount
+ * @param size      - l | m | s
+ * @param locale
+ * @param currency  - ISO 4217
+ */
+
+export function formatCurrencyAmount(amount, size = 'l', locale = 'en-EN', currency = 'EUR') {
+  let value = amount;
+  let unit = ''; // Round number
+
+  switch (size) {
+    case 'm':
+      value = Math.round(amount);
+      break;
+
+    case 's':
+      if (amount > 99999999) {
+        amount /= 1000000;
+        unit = 'M';
+      } else if (amount > 99999) {
+        amount /= 1000;
+        unit = 'k';
+      }
+
+      value = Math.round(amount);
+      break;
+
+    case 'l':
+    default:
+      value = Math.round(amount * 100) / 100;
+      break;
+  } // To locale
+
+
+  const options = {
+    minimumFractionDigits: size === 'l' ? 2 : 0,
+    maximumFractionDigits: size === 'l' ? 2 : 0,
+    useGrouping: true,
+    style: 'currency',
+    currency,
+    currencyDisplay: 'symbol'
+  };
+  let returnValue = value.toLocaleString(locale.replace(/_/g, '-'), options); // Place unit (k, M) after number (don't move currency symbol !)
+
+  if (unit !== '') {
+    returnValue = returnValue.replace(/([\D]*)([\d,.\s]+)([\D]*)/, (match, p1, p2, p3) => [p1, p2, unit, p3].join(''));
+  }
+
+  return returnValue;
+}
+/**
+ * Format rate relative to required size and locale
+ * large/en-EN  : 12.34
+ *
+ * @param rate
+ * @param size
+ * @param locale
+ */
+
+export function formatRate(rate, size = 'l', locale = 'en-EN') {
+  let effectiveSize = 0;
+  if (size === 'l') effectiveSize = 2;
+  if (size === 'm') effectiveSize = 1; // To locale
+
+  const options = {
+    minimumFractionDigits: effectiveSize,
+    maximumFractionDigits: effectiveSize,
+    style: 'percent'
+  };
+  return rate.toLocaleString(locale.replace(/_/g, '-'), options);
+}
 /**
  * Retourne l'item selectionnable suivant.
  * @param node

package/index.es.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.36
+/** @license HiPay-Material-UI v2.0.0-beta.37
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,4 +19,5 @@ export { default as HiSwitch } from './HiSwitch';
 export { default as HiSwitchState } from './HiSwitch/HiSwitchState';
 export { default as withMobileDialog } from './withMobileDialog';
 export { default as withWidth } from './withWidth';
-export { default as HiDatePicker } from './HiDatePicker/HiDatePicker';
+export { default as HiDatePicker } from './HiDatePicker/HiDatePicker'; //export { default as HiDateRangePicker } from './HiDatePicker/HiDateRangePicker';
+//export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.36
+/** @license HiPay-Material-UI v2.0.0-beta.37
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@hipay/hipay-material-ui",
   "private": false,
   "author": "HiPay PSYCHE Team",
-  "version": "2.0.0-beta.36",
+  "version": "2.0.0-beta.37",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/styles/createPalette.js

@@ -183,7 +183,7 @@ function createPalette(palette) {
       _palette$type = palette.type,
       type = _palette$type === void 0 ? 'light' : _palette$type,
       _palette$contrastThre = palette.contrastThreshold,
-      contrastThreshold = _palette$contrastThre === void 0 ? 4 : _palette$contrastThre,
+      contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
       _palette$tonalOffset = palette.tonalOffset,
       tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
       _palette$context = palette.context,

package/umd/hipay-material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.0.0-beta.36
+/** @license HiPay-Material-UI v2.0.0-beta.37
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -1105,7 +1105,7 @@
                   _palette$type = palette.type,
                   type = _palette$type === void 0 ? 'light' : _palette$type,
                   _palette$contrastThre = palette.contrastThreshold,
-                  contrastThreshold = _palette$contrastThre === void 0 ? 4 : _palette$contrastThre,
+                  contrastThreshold = _palette$contrastThre === void 0 ? 2.9 : _palette$contrastThre,
                   _palette$tonalOffset = palette.tonalOffset,
                   tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
                   _palette$context = palette.context,
@@ -66126,8 +66126,8 @@
             var styles$3 = function styles(theme) {
               return {
                 root: {
-                  marginRight: 6,
-                  marginLeft: 6,
+                  marginRight: 4,
+                  marginLeft: 4,
                   padding: 0
                 },
                 checked: {},
@@ -68692,8 +68692,8 @@
                 startAdornment: {
                   color: theme.palette.neutral.main,
                   zIndex: 1,
-                  marginLeft: 8,
-                  marginRight: 16
+                  marginLeft: 0,
+                  marginRight: 8
                 },
                 startAdornmentFocus: {
                   color: theme.palette.neutral.dark
@@ -76298,6 +76298,14 @@
                   }
                 };
 
+                _this.handleKeyDown = function (event) {
+                  var key = keycode(event);
+
+                  if (['space', 'enter'].includes(key)) {
+                    _this.handleHelperClick(event);
+                  }
+                };
+
                 _this.handleHover = function (value) {
                   return function () {
                     _this.setState({
@@ -76326,6 +76334,7 @@
                   hovered: false
                 };
                 _this.handleHelperClick = _this.handleHelperClick.bind(assertThisInitialized(assertThisInitialized(_this)));
+                _this.handleKeyDown = _this.handleKeyDown.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleFocus = _this.handleFocus.bind(assertThisInitialized(assertThisInitialized(_this)));
                 _this.handleHover = _this.handleHover.bind(assertThisInitialized(assertThisInitialized(_this)));
                 return _this;
@@ -76368,7 +76377,12 @@
                     className: classes.errorDiv
                   }, React.createElement("div", {
                     className: classnames(classes.arrowDown, classes.errorDivArrowDown)
-                  }), errorText), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
+                  }), React.createElement("span", {
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML: {
+                      __html: escapeHTML(errorText)
+                    }
+                  })), helperIcon && helperText && !error && helperOpen && React.createElement("div", {
                     className: classes.helperDiv
                   }, React.createElement("div", {
                     className: classnames(classes.arrowDown, classes.helperDivArrowDown)
@@ -76385,10 +76399,14 @@
                     focused: !disabled && (focused || hovered)
                   }, InputLabelProps), error && React.createElement(Warning$1, {
                     className: classes.errorIcon,
-                    onClick: this.handleHelperClick
+                    onClick: this.handleHelperClick,
+                    tabIndex: 0,
+                    onKeyDown: this.handleKeyDown
                   }), helperIcon && helperText && !error && React.createElement(Info$1, {
                     className: classnames(classes.helperIcon, defineProperty({}, classes.helperIconActive, helperOpen)),
-                    onClick: this.handleHelperClick
+                    onClick: this.handleHelperClick,
+                    tabIndex: 0,
+                    onKeyDown: this.handleKeyDown
                   })), React.createElement("div", {
                     onMouseEnter: this.handleHover(true),
                     onMouseLeave: this.handleHover(false),
@@ -88358,7 +88376,8 @@
               showClockButton: false
             };
             var NavBar$1 = withStyles(styles$j, {
-              name: 'HmuiNavbar'
+              hiComponent: true,
+              name: 'HmuiNavBar'
             })(NavBar);
 
             var Weekday$1 = function Weekday(_ref) {
@@ -88466,7 +88485,6 @@
                 // The month's main table
                 month: {
                   display: 'table',
-                  borderCollapse: 'collapse',
                   borderSpacing: 0,
                   userSelect: 'none' // margin: '0 1rem',
                   // marginTop: '1rem',
@@ -88558,7 +88576,10 @@
                 /* default modifiers */
                 // Added to the day's cell for the current day
                 today: {
-                  color: theme.palette.primary.light,
+                  // color: theme.palette.primary.light,
+                  border: '2px solid #8b9898',
+                  borderRadius: '50%',
+                  color: "".concat(theme.palette.neutral.dark, " !important"),
                   fontWeight: theme.typography.fontWeightMedium
                 },
                 // Added to the day's cell outside the current month
@@ -88583,7 +88604,9 @@
                 selected: {
                   // backgroundColor: fade(theme.palette.business.primary.normal, 0.36),
                   backgroundColor: theme.palette.primary.main,
-                  color: theme.palette.primary.contrastText
+                  color: theme.palette.primary.contrastText,
+                  borderRadius: '0%',
+                  border: 'none'
                 }
               };
             });
@@ -88810,7 +88833,7 @@
                     todayButton: translations.today,
                     onTodayButtonClick: this.handleCurrentMonthChange,
                     weekdayElement: Weekday$1,
-                    navbarElement: function navbarElement(props2) {
+                    NavBarElement: function NavBarElement(props2) {
                       return React.createElement(NavBar$1, _extends_1({
                         showClockButton: enableTime,
                         onClockClick: _this2.handleClockClick
@@ -88950,6 +88973,8 @@
               name: 'HmuiHiDatePicker'
             })(HiDatePicker);
 
+            //export { default as HiDateRangeSelector } from './HiDatePicker/HiDateRangeSelector';
+
             exports.createGenerateClassName = createGenerateClassName;
             exports.createMuiTheme = createMuiTheme;
             exports.createStyles = createStyles;