@hipay/hipay-material-ui 2.0.0-beta.53 → 2.0.0-beta.55

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-// @inheritedComponent HiDateRangePicker
 import React from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { findDOMNode } from 'react-dom';
 import Grid from '@material-ui/core/Grid';
 import withStyles from '../styles/withStyles';
-import HiSelectField from '../HiSelect/HiSelectField';
+import HiSelectField from '../HiSelectNew/HiSelectField';
 import HiDateRangePicker from './HiDateRangePicker';
+import HiFormControl from '../HiForm/HiFormControl';
 export function buildDateRangeOptionByKey(key, t, format) {
   let from;
   let label;
@@ -24,6 +24,8 @@ export function buildDateRangeOptionByKey(key, t, format) {
   switch (key) {
     case 'custom':
       label = t.custom_period;
+      from = moment().subtract(15, 'day').startOf('day');
+      to = moment().endOf('day');
       type = 'primary-highlight';
       break;
 
@@ -59,35 +61,35 @@ export function buildDateRangeOptionByKey(key, t, format) {
       label = t.current_month;
       from = moment().startOf('month');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pm':
       label = t.previous_month;
       from = moment().subtract(1, 'month').startOf('month');
       to = moment().subtract(1, 'month').endOf('month');
-      info = `${from.format('YYYY-MM')}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndMonth)}, ${from.daysInMonth()} ${t.days}`;
       break;
 
     case 'cq':
       label = t.current_quarter;
       from = moment().startOf('quarter');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndQuarter)}, ${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'pq':
       label = t.previous_quarter;
       from = moment().subtract(1, 'quarter').startOf('quarter');
       to = moment().subtract(1, 'quarter').endOf('quarter');
-      info = `${from.format('YYYY')}-${t.short_quarter}${from.format('Q')}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(t.yearAndQuarter)}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     case 'cy':
       label = t.current_year;
       from = moment().startOf('year');
       to = moment();
-      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days')} ${t.days}`;
+      info = `${from.format(format)} ${t.to_now}, ${to.diff(from, 'days') + 1} ${t.days}`;
       break;
 
     default:
@@ -125,23 +127,24 @@ class HiDateRangeSelector extends React.Component {
     super();
     this.options = [];
 
+    this.onBlur = event => {
+      if (event instanceof Object && this.props.onblur) {
+        this.props.onBlur(event);
+      }
+    };
+
     this.handleSelectChange = name => (event, value) => {
       this.setState({
-        [name]: value
+        [name]: value,
+        key: this.state.key === 1 ? 2 : 1
       });
+      const selectedOption = this.options.find(option => option.id === value);
 
-      if (value !== 'custom') {
-        const selectedOption = this.options.find(option => option.id === value);
-
-        if (selectedOption) {
-          this.props.onChange('from', selectedOption.from.toDate());
-          this.props.onChange('to', selectedOption.to.toDate());
-        }
-      } else {
-        this.setState({
-          defaultFrom: undefined,
-          defaultTo: undefined
-        });
+      if (selectedOption) {
+        this.props.onChange('from', selectedOption.from.toDate());
+        this.props.onChange('to', selectedOption.to.toDate());
+        this.props.onChange('fromError', false);
+        this.props.onChange('toError', false);
       }
 
       if (this.props.returnSelectValue === true) {
@@ -152,23 +155,9 @@ class HiDateRangeSelector extends React.Component {
     this.handleReset = this.handleReset.bind(this);
     this.handleSelectChange = this.handleSelectChange.bind(this);
     this.options = props.availableOptionKeys.map(key => buildDateRangeOptionByKey(key, props.translations, props.format));
-    let from;
-    let to;
-
-    if (props.defaultPreset !== 'custom') {
-      const selectedOption = this.options.find(option => option.id === props.defaultPreset);
-
-      if (selectedOption) {
-        from = selectedOption.from.toDate();
-        to = selectedOption.to.toDate();
-      }
-    }
-
     this.state = {
       selectedPreset: props.defaultPreset,
-      containerWidth: 0,
-      defaultFrom: from,
-      defaultTo: to
+      containerWidth: 0
     };
   }
 
@@ -185,7 +174,7 @@ class HiDateRangeSelector extends React.Component {
   componentDidMount() {
     if (this.container) {
       this.setState({
-        containerWidth: findDOMNode(this.container).clientWidth
+        containerWidth: findDOMNode(this.container).clientWidth - 5
       });
     }
   }
@@ -196,6 +185,7 @@ class HiDateRangeSelector extends React.Component {
 
   handleReset(name) {
     this.props.onChange(name, undefined);
+    this.props.onChange(`${name}Error`, undefined);
   }
 
   render() {
@@ -203,12 +193,14 @@ class HiDateRangeSelector extends React.Component {
           {
       disabled,
       enableTime,
-      error,
       errorText,
+      fromError,
+      toError,
       helperIcon,
       helperText,
       idRange,
       idSelect,
+      minimumDate,
       label,
       from,
       onChange,
@@ -219,20 +211,26 @@ class HiDateRangeSelector extends React.Component {
       selectProps,
       staticPosition
     } = _this$props,
-          props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "error", "errorText", "helperIcon", "helperText", "idRange", "idSelect", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
+          props = _objectWithoutProperties(_this$props, ["disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition"]);
 
     const {
-      defaultFrom,
-      defaultTo,
       selectedPreset
     } = this.state;
-    return React.createElement(Grid, {
+    const hiSelectableListProps = {
+      hideCheckbox: true
+    };
+    return React.createElement(HiFormControl, {
+      disabled: disabled,
+      helperIcon: helperIcon,
+      helperText: helperText,
+      errorText: errorText,
+      error: !!(fromError || toError),
+      label: ' '
+    }, React.createElement(Grid, {
       container: true,
       spacing: 8,
       className: classes.root,
-      ref: container => {
-        this.container = container;
-      }
+      ref: container => this.container = container
     }, React.createElement(Grid, {
       item: true,
       xs: 12,
@@ -242,12 +240,10 @@ class HiDateRangeSelector extends React.Component {
       }
     }, React.createElement(HiSelectField, _extends({
       disabled: disabled,
-      error: error,
-      errorText: errorText,
-      helperIcon: helperIcon,
-      helperText: helperText,
       id: idSelect,
       label: label,
+      hideCheckbox: true,
+      hiSelectableListProps: hiSelectableListProps,
       name: 'selectedPreset',
       options: this.options,
       onChange: this.handleSelectChange('selectedPreset'),
@@ -267,26 +263,32 @@ class HiDateRangeSelector extends React.Component {
         'grid-sm-8': classes.smRangePicker
       }
     }, React.createElement(HiDateRangePicker, _extends({
+      key: this.state.key,
       classes: {
         root: classes.dateRangePicker
       },
       id: idRange,
-      from: from || defaultFrom,
-      to: to || defaultTo,
+      from: selectedPreset ? from : undefined,
+      to: selectedPreset ? to : undefined,
       enableTime: enableTime,
       onChange: onChange,
+      toError: toError,
+      fromError: fromError,
+      minimumDate: minimumDate,
+      errorText: null,
       onReset: this.handleReset,
       disabled: disabled || selectedPreset !== 'custom',
       translations: translations,
-      staticPosition: staticPosition
-    }, props))));
+      staticPosition: staticPosition,
+      onBlur: this.onBlur,
+      hasSelector: true
+    }, props)))));
   }
 
 }
 
 HiDateRangeSelector.defaultProps = {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
-  defaultPreset: 'cd',
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,
@@ -300,7 +302,8 @@ HiDateRangeSelector.defaultProps = {
     quarter: 'Quarter',
     week: 'Week',
     short_week: 'W',
-    short_quarter: 'Q',
+    yearAndMonth: 'YYYY[-]MM',
+    yearAndQuarter: 'YYYY[-Q]Q',
     year: 'Year',
     days: 'days',
     custom_period: 'Custom Period',
@@ -313,7 +316,13 @@ HiDateRangeSelector.defaultProps = {
     previous_month: 'Previous Month',
     current_quarter: 'Current Quarter',
     previous_quarter: 'Previous Quarter',
-    current_year: 'Current Year'
+    current_year: 'Current Year',
+    invalid_format: 'The date format is not valid',
+    to_superior_from: 'Date from cannot be greater than date to',
+    date_superior_max_date: 'Date from cannot be greater than %s',
+    date_inferior_min_date: 'Date from cannot be before than %s',
+    missing_date_from: 'Missing date from',
+    missing_date_to: 'Missing date to'
   }
 };
 HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -350,7 +359,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte de l'erreur
    */
-  errorText: PropTypes.string,
+  errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /**
    * Format de date utilisé
@@ -392,6 +401,11 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   locale: PropTypes.string,
 
+  /**
+   * Date minimale sélectionnable
+   */
+  minimumDate: PropTypes.instanceOf(Date).isRequired,
+
   /**
    * Callback à la sélection d'une date
    */

package/es/HiDatePicker/NavBar.js

@@ -17,7 +17,8 @@ export const styles = theme => ({
   button: {
     height: 32,
     width: 32,
-    margin: '4px 24px'
+    margin: '4px 24px',
+    padding: 0
   },
   left: {
     float: 'left'

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -81,7 +81,7 @@ export const styles = theme => ({
     bottom: 0,
     height: 32,
     width: 32,
-    margin: '4px 24px'
+    margin: '0px 24px'
   },
   calendarButton: {
     fontWeight: theme.typography.fontWeightMedium

package/es/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -55,8 +55,8 @@ class YearPickerOverlay extends React.Component {
 }
 
 YearPickerOverlay.defaultProps = {
-  disableFutureDays: false,
-  disablePastDays: false,
+  // disableFutureDays: true,
+  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -92,7 +92,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: PropTypes.instanceOf(Date),
+  minimumDate: PropTypes.instanceOf(Date).isRequired,
 
   /**
    * Fonction de callback

package/es/HiForm/HiFormControl.js

@@ -25,6 +25,7 @@ export const styles = theme => ({
     position: 'absolute',
     right: 5,
     cursor: 'pointer',
+    zIndex: 1,
     top: '-5px',
     '&$iconButtonError': {
       color: theme.palette.negative.main
@@ -194,7 +195,7 @@ class HiFormControl extends React.PureComponent {
       required: required,
       disabled: disabled,
       focused: !disabled && (focused || hovered)
-    }, InputLabelProps), error && React.createElement(HiIconButton, {
+    }, InputLabelProps), error && errorText && React.createElement(HiIconButton, {
       className: classNames(classes.iconButton, classes.iconButtonError),
       onClick: this.handleHelperClick,
       onKeyDown: this.handleKeyDown
@@ -227,8 +228,8 @@ HiFormControl.defaultProps = {
   required: true,
   disabled: false,
   error: false,
-  errorText: '',
-  helperText: '',
+  errorText: undefined,
+  helperText: undefined,
   helperIcon: false,
   multiline: false,
   nbChars: 0,
@@ -263,7 +264,7 @@ HiFormControl.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Texte de l'erreur
    */
-  errorText: PropTypes.string,
+  errorText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
   /**
    * Propriétés appliquées au composant FormHelperText

package/es/HiSelect/HiSuggestSelect.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { findDOMNode } from 'react-dom';
 import Grow from '@material-ui/core/Grow';
 import Paper from '@material-ui/core/Paper';
+import classNames from 'classnames';
 import HiSelectableList from '../HiSelectableList';
 import HiInput from '../HiForm/HiInput';
 import { withStyles } from '../styles';
@@ -28,6 +29,9 @@ export const styles = theme => ({
     borderRadius: '0px 2px',
     maxHeight: 440,
     transition: 'none'
+  },
+  alignRight: {
+    right: 0
   }
 });
 
@@ -139,9 +143,10 @@ class HiSuggestSelect extends React.PureComponent {
       showMinLength,
       showNoResults,
       onSearch,
-      translations
+      translations,
+      align
     } = _this$props,
-          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations"]);
+          otherProps = _objectWithoutProperties(_this$props, ["classes", "id", "loading", "showMinLength", "showNoResults", "onSearch", "translations", "align"]);
 
     const {
       focused,
@@ -188,7 +193,9 @@ class HiSuggestSelect extends React.PureComponent {
       disablePortal: true,
       anchorEl: this.textInput,
       placement: "bottom-start",
-      className: classes.popper,
+      className: classNames(classes.popper, {
+        [classes.alignRight]: align === 'right'
+      }),
       open: true
     }, React.createElement(Grow, {
       in: open,
@@ -211,6 +218,7 @@ class HiSuggestSelect extends React.PureComponent {
 }
 
 HiSuggestSelect.defaultProps = {
+  align: 'left',
   showMinLength: false,
   showNoResults: false,
   translations: {
@@ -220,6 +228,11 @@ HiSuggestSelect.defaultProps = {
   options: []
 };
 HiSuggestSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Align popper on right or left of container
+   */
+  align: PropTypes.oneOf(['left', 'right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/es/HiSelectNew/HiSelect.js

@@ -434,7 +434,7 @@ class HiSelect extends React.PureComponent {
 
     const popperClass = classNames(classes.popper, {
       [classes.popperWidth]: !this.props.containerWidth,
-      [classes.popperRightAlign]: this.props.containerWidth
+      [classes.popperRightAlign]: this.props.containerWidth && this.props.align === 'right'
     });
     const content = React.createElement(ClickAwayListener, {
       onClickAway: this.handleClickAway
@@ -515,6 +515,7 @@ class HiSelect extends React.PureComponent {
 }
 
 HiSelect.defaultProps = {
+  align: 'left',
   disabled: false,
   displayAsChip: false,
   error: false,
@@ -537,6 +538,8 @@ HiSelect.defaultProps = {
   type: 'text'
 };
 HiSelect.propTypes = process.env.NODE_ENV !== "production" ? {
+  align: PropTypes.oneOf(['left', 'right']),
+
   /**
    * Useful to extend the style applied to components.
    */

package/es/HiSelectableList/HiSelectableListItem.js

@@ -109,7 +109,9 @@ export const styles = theme => ({
     textOverflow: 'ellipsis',
     textAlign: 'right',
     margin: '4px 12px 4px 8px',
-    alignSelf: 'center'
+    alignSelf: 'center',
+    minWidth: '40%',
+    maxWidth: '100%'
   }),
   checkbox: {
     marginTop: 3

package/es/HiSwitch/HiSwitch.js

@@ -12,7 +12,8 @@ export const styles = theme => ({
     display: 'inline-flex',
     width: 62,
     position: 'relative',
-    flexShrink: 0
+    flexShrink: 0,
+    zIndex: 0
   },
   bar: {
     borderRadius: 7,

package/es/HiTable/HiCellBuilder.js

@@ -2,15 +2,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
-import CellAddress from '@hipay/hipay-material-ui/HiCell/CellAddress';
-import CellDate from '@hipay/hipay-material-ui/HiCell/CellDate';
-import CellIcon from '@hipay/hipay-material-ui/HiCell/CellIcon';
-import CellImage from '@hipay/hipay-material-ui/HiCell/CellImage';
-import CellNumeric from '@hipay/hipay-material-ui/HiCell/CellNumeric';
-import CellSentinel from '@hipay/hipay-material-ui/HiCell/CellSentinel';
-import CellText from '@hipay/hipay-material-ui/HiCell/CellText';
-import CellRate from '@hipay/hipay-material-ui/HiCell/CellRate';
-import CellPinToAction from '@hipay/hipay-material-ui/HiCell/CellPinToAction';
+import CellAddress from '../HiCell/CellAddress';
+import CellDate from '../HiCell/CellDate';
+import CellIcon from '../HiCell/CellIcon';
+import CellImage from '../HiCell/CellImage';
+import CellNumeric from '../HiCell/CellNumeric';
+import CellSentinel from '../HiCell/CellSentinel';
+import CellSentinelScore from '../HiCell/CellSentinelScore';
+import CellTextStyled from '../HiCell/CellTextStyled';
+import CellRate from '../HiCell/CellRate';
+import CellPinToAction from '../HiCell/CellPinToAction';
 import * as cst from './constants';
 
 class HiCellBuilder extends React.PureComponent {
@@ -56,7 +57,8 @@ class HiCellBuilder extends React.PureComponent {
               shortLabel: datacell.id,
               path: datacell.img,
               size: datacell.size,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+              fallbackImage: datacell.fallbackImage
             });
 
           case cst.TYPE_RATE:
@@ -109,13 +111,19 @@ class HiCellBuilder extends React.PureComponent {
 
           case cst.TYPE_SENTINEL:
             return React.createElement(CellSentinel, {
-              automaticFraudReviewResult: datacell.automaticFraudReviewResult,
-              fraudResult: datacell.value,
-              hideFraudResult: datacell.hideFraudResult,
-              pendingManualAction: datacell.pendingManualAction,
-              score: datacell.score,
-              smartDecision: datacell.smartDecision,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              color: datacell.color,
+              label: datacell.label,
+              letter: datacell.label2,
+              active: datacell.active,
+              reviewer: datacell.reviewer,
+              outlined: datacell.outlined
+            });
+
+          case cst.TYPE_SENTINEL_SCORE:
+            return React.createElement(CellSentinelScore, {
+              value: datacell.value,
+              result: datacell.result,
+              active: datacell.active
             });
 
           case cst.TYPE_PIN_TO_ACTION:
@@ -125,18 +133,13 @@ class HiCellBuilder extends React.PureComponent {
             });
 
           case cst.TYPE_ACCOUNT_NUMBER:
-            return React.createElement(CellText, {
-              label: datacell.value,
-              color: datacell.color,
-              ellipsis: datacell.ellipse
-            });
-
           default:
-            return React.createElement(CellText, {
-              label: datacell.value,
+            return React.createElement(CellTextStyled, {
+              active: datacell.active,
               color: datacell.color,
-              ellipsis: datacell.ellipse,
-              view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+              label: datacell.label,
+              title: datacell.title,
+              value: datacell.value
             });
         }
       }

package/es/HiTable/HiTableHeader.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 // @inheritedComponent TableHeader
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -38,29 +39,34 @@ class HiTableHeader extends React.PureComponent {
         height: dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT,
         whiteSpace: 'nowrap'
       }
-    }, Object.keys(columns).map(function (key) {
-      const column = columns[key];
+    }, Object.keys(columns).map(key => {
+      const {
+        colId,
+        type,
+        label,
+        smallLabel,
+        view
+      } = columns[key];
       return React.createElement(TableCell, {
-        key: column.colId,
-        sortDirection: orderBy === column.colId ? order : false,
+        key: colId,
+        sortDirection: orderBy === colId ? order : false,
         style: {
           border: 'none',
-          borderBottom: orderBy === column.colId ? 'solid 1px #00ADE9' : 'none',
+          borderBottom: orderBy === colId ? 'solid 1px #00ADE9' : 'none',
           paddingRight: '13px',
           paddingLeft: '13px'
         },
-        numeric: !!cst.ALIGN_RIGHT_TYPES.includes(column.type)
-      }, sortable ? React.createElement(Tooltip, {
-        title: "Sort",
-        enterDelay: 300
-      }, React.createElement(TableSortLabel, {
-        active: orderBy === column.colId,
+        numeric: cst.ALIGN_RIGHT_TYPES.includes(type)
+      }, React.createElement(TableSortLabel, _extends({}, sortable && {
+        active: orderBy === colId,
         direction: order,
-        onClick: this.createSortHandler(column.colId),
+        onClick: this.createSortHandler(colId)
+      }, {
         classes: {
           icon: classes.icon
-        }
-      }, column.label)) : column.label);
+        },
+        title: label
+      }), view === 's' ? smallLabel : label));
     }, this)));
   }
 

package/es/HiTable/constants.js

@@ -26,6 +26,7 @@ export const TYPE_IMAGE = 'image';
 export const TYPE_NUMERIC = 'numeric';
 export const TYPE_RATE = 'rate';
 export const TYPE_SENTINEL = 'sentinel';
+export const TYPE_SENTINEL_SCORE = 'sentinel_score';
 export const TYPE_STATUS = 'status';
 export const TYPE_COUNTRY = 'country';
 export const TYPE_TEXT = 'text';
@@ -123,6 +124,11 @@ export const DEFAULT_WIDTHS = {
     [VIEWS.SMALL]: 80
   },
   [TYPE_SENTINEL]: {
+    [VIEWS.LARGE]: 64,
+    [VIEWS.MEDIUM]: 64,
+    [VIEWS.SMALL]: 64
+  },
+  [TYPE_SENTINEL_SCORE]: {
     [VIEWS.LARGE]: 80,
     [VIEWS.MEDIUM]: 80,
     [VIEWS.SMALL]: 80
@@ -160,6 +166,7 @@ export const DEFAULT_VIEWS = {
   [TYPE_NUMERIC]: VIEWS.LARGE,
   [TYPE_RATE]: VIEWS.LARGE,
   [TYPE_SENTINEL]: VIEWS.LARGE,
+  [TYPE_SENTINEL_SCORE]: VIEWS.LARGE,
   [TYPE_STATUS]: VIEWS.LARGE,
   [TYPE_TEXT]: VIEWS.LARGE,
   [TYPE_THIRD_PARTY_SECURITY]: VIEWS.LARGE
@@ -179,4 +186,4 @@ export const DEFAULT_PADDING = {
  * @type {*[]}
  */
 
-export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL];
+export const ALIGN_RIGHT_TYPES = [TYPE_NUMERIC, TYPE_RATE, TYPE_SENTINEL, TYPE_SENTINEL_SCORE];