@hipay/hipay-material-ui 2.1.0 → 2.2.0-RC2

package/es/HiAlertModal/HiAlertModal.js

@@ -67,11 +67,24 @@ class HiAlertModal extends React.PureComponent {
       }
     };
 
+    this.submitButtonRef = React.createRef();
+    this.cancelButtonRef = React.createRef();
     this.handleOnClose = this.handleOnClose.bind(this);
+    this.handleOnEntered = this.handleOnEntered.bind(this);
   } // Appelé si clic en dehors de la pop up
 
 
-  // Render
+  handleOnEntered() {
+    if (this.props.labelSubmitButton) {
+      this.submitButtonRef.current.focus();
+      this.submitActionsRef.focusVisible();
+    } else if (this.props.labelCancelButton) {
+      this.cancelButtonRef.current.focus();
+      this.cancelActionsRef.focusVisible();
+    }
+  } // Render
+
+
   render() {
     const _this$props = this.props,
           {
@@ -105,6 +118,7 @@ class HiAlertModal extends React.PureComponent {
     return React.createElement(Dialog, _extends({
       open: open,
       onClose: this.handleOnClose,
+      onEntered: this.handleOnEntered,
       classes: {
         root: classes.classDialogRoot,
         paper: classes.classDialogPaper
@@ -112,7 +126,7 @@ class HiAlertModal extends React.PureComponent {
     }, props), backgroundIcon && React.createElement("div", {
       className: classes.classBackgroundIcon
     }, React.createElement(HiIcon, {
-      color: theme.palette.background2,
+      color: "inherit",
       icon: backgroundIcon,
       size: iconSize
     })), title && React.createElement(DialogTitle, {
@@ -133,13 +147,21 @@ class HiAlertModal extends React.PureComponent {
         root: classes.classCancelButton
       },
       onClick: onCancelClick,
-      color: cancelColor
+      color: cancelColor,
+      innerRef: this.cancelButtonRef,
+      action: actions => {
+        this.cancelActionsRef = actions;
+      }
     }, labelCancelButton), labelSubmitButton && React.createElement(HiButton, {
       classes: {
         root: classes.classSubmitButton
       },
       onClick: onSubmitClick,
-      color: submitColor
+      color: submitColor,
+      innerRef: this.submitButtonRef,
+      action: actions => {
+        this.submitActionsRef = actions;
+      }
     }, labelSubmitButton)));
   }
 

package/es/HiBreadcrumb/HiBreadcrumb.js

@@ -65,7 +65,7 @@ HiBreadcrumb.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Custom styles for component.
    */
-  classes: PropTypes.object.isRequired,
+  classes: PropTypes.object,
 
   /**
    * Disable navigation in steps

package/es/HiButton/HiButton.js

@@ -169,46 +169,52 @@ export const styles = theme => ({
   disabled: {}
 });
 
-function HiButton(props) {
-  const {
-    children,
-    classes,
-    className,
-    color,
-    variant,
-    disabled
-  } = props,
-        other = _objectWithoutProperties(props, ["children", "classes", "className", "color", "variant", "disabled"]);
-
-  const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  const fab = variant === 'fab' || variant === 'extendedFab';
-  const contained = variant === 'contained' || variant === 'raised';
-  const buttonClassNames = classNames(classes.root, {
-    [classes.raisedDisabled]: variant === 'raised' && disabled,
-    [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
-    [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
-    [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
-    [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
-    [classes.containedPrimary]: (contained || fab) && color === 'primary',
-    [classes.containedPositive]: (contained || fab) && color === 'positive',
-    [classes.containedNegative]: (contained || fab) && color === 'negative',
-    [classes.containedMiddle]: (contained || fab) && color === 'middle',
-    [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
-    [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
-    [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
-    [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
-    [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
-    [classes.disabled]: disabled
-  });
-  return React.createElement(Button, _extends({
-    className: className,
-    classes: {
-      root: buttonClassNames
-    },
-    color: hcolor,
-    variant: variant,
-    disabled: disabled
-  }, other), children);
+class HiButton extends React.Component {
+  render() {
+    const _this$props = this.props,
+          {
+      children,
+      classes,
+      className,
+      color,
+      variant,
+      disabled,
+      buttonRef
+    } = _this$props,
+          other = _objectWithoutProperties(_this$props, ["children", "classes", "className", "color", "variant", "disabled", "buttonRef"]);
+
+    const hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
+    const fab = variant === 'fab' || variant === 'extendedFab';
+    const contained = variant === 'contained' || variant === 'raised';
+    const buttonClassNames = classNames(classes.root, {
+      [classes.raisedDisabled]: variant === 'raised' && disabled,
+      [classes.flatPositive]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'positive',
+      [classes.flatNegative]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'negative',
+      [classes.flatMiddle]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && color === 'middle',
+      [classes.flatNeutral]: (variant === 'text' || variant === 'flat' || variant === 'outlined') && (color === 'default' || color === 'neutral'),
+      [classes.containedPrimary]: (contained || fab) && color === 'primary',
+      [classes.containedPositive]: (contained || fab) && color === 'positive',
+      [classes.containedNegative]: (contained || fab) && color === 'negative',
+      [classes.containedMiddle]: (contained || fab) && color === 'middle',
+      [classes.containedNeutral]: (contained || fab) && (color === 'default' || color === 'neutral'),
+      [classes.outlinedPositive]: variant === 'outlined' && color === 'positive',
+      [classes.outlinedNegative]: variant === 'outlined' && color === 'negative',
+      [classes.outlinedMiddle]: variant === 'outlined' && color === 'middle',
+      [classes.outlinedNeutral]: variant === 'outlined' && (color === 'default' || color === 'neutral'),
+      [classes.disabled]: disabled
+    });
+    return React.createElement(Button, _extends({
+      className: className,
+      classes: {
+        root: buttonClassNames
+      },
+      color: hcolor,
+      variant: variant,
+      disabled: disabled,
+      buttonRef: buttonRef
+    }, other), children);
+  }
+
 }
 
 HiButton.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -236,7 +242,17 @@ HiButton.defaultProps = {
   color: 'neutral',
   variant: 'text'
 };
+
+function forwardRef(props, ref) {
+  return React.createElement(HiButton, _extends({}, props, {
+    buttonRef: ref
+  }));
+}
+
+const name = HiButton.displayName || HiButton.name;
+forwardRef.displayName = name;
+const HiButtonForwardRef = React.forwardRef(forwardRef);
 export default withStyles(styles, {
   hiComponent: true,
   name: 'HmuiHiButton'
-})(HiButton);
+})(HiButtonForwardRef);

package/es/HiColoredLabel/HiColoredLabel.js

@@ -118,7 +118,7 @@ function HiColoredLabel(props) {
     className,
     fontSize,
     label,
-    color,
+    color: propsColor,
     active,
     outlined,
     fontWeight,
@@ -127,6 +127,7 @@ function HiColoredLabel(props) {
   } = props,
         other = _objectWithoutProperties(props, ["classes", "className", "fontSize", "label", "color", "active", "outlined", "fontWeight", "style", "theme"]);
 
+  const color = propsColor || 'primary';
   const isHiColor = ['primary', 'secondary', 'positive', 'negative', 'middle', 'neutral'].includes(color);
   const isHexColor = !isHiColor && /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
   return React.createElement("div", _extends({

package/es/HiDatePicker/HiDatePicker.js

@@ -48,7 +48,7 @@ class HiDatePicker extends React.Component {
           this.props.onChange(undefined);
         } else {
           // Keep Time if set
-          if (this.props.enableTime && day !== undefined) {
+          if (this.props.enableTime) {
             if (this.props.value) {
               day.setHours(this.props.value.getHours(), this.props.value.getMinutes());
             } else {

package/es/HiIcon/HiIcon.js

@@ -83,9 +83,17 @@ function HiIcon(props) {
 
   if (iconName.indexOf('hi_') === 0) {
     const IconName = hiSvgIcons[capitalize(camelize(iconName))];
+    let colorValue = color;
+
+    if (color === "inherit") {
+      colorValue = "currentColor";
+    } else if (isHiColor || color === 'primary' || color === 'secondary') {
+      colorValue = theme.palette[color].main;
+    }
+
     return React.createElement(IconName, _extends({
       className: classNames(classes.root, className),
-      color: isHiColor || color === 'primary' || color === 'secondary' ? theme.palette[color].main : color,
+      color: colorValue,
       width: size,
       height: size
     }, other));

package/es/HiNotice/HiKPI.js

@@ -105,10 +105,11 @@ class HiKPI extends React.Component {
       color,
       id,
       tooltip,
-      disable
+      disable,
+      buttonId
     } = this.props;
     const rootclass = classNames(classes.root, {
-      [classes.inherit]: color === 'inherit' && !disable,
+      [classes.inherit]: color === 'inherit',
       [classes.warning]: color === 'warning' && !disable,
       [classes.error]: color === 'error' && !disable,
       [classes.positive]: color === 'positive' && !disable,
@@ -117,6 +118,7 @@ class HiKPI extends React.Component {
       [classes.rootDisable]: disable
     });
     return React.createElement(ButtonBase, {
+      id: buttonId,
       className: rootclass,
       onClick: !disable ? this.handleClick(id) : undefined,
       title: tooltip,
@@ -156,6 +158,11 @@ HiKPI.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   bodyMinify: PropTypes.any,
 
+  /**
+   * Id of the button
+   */
+  buttonId: PropTypes.string,
+
   /**
    * Fonction appelée au clic sur le KPI
    */

package/es/HiNotice/HiKPINotice.js

@@ -9,7 +9,7 @@ const styles = () => ({
     width: '100%',
     display: 'flex',
     flexWrap: 'wrap',
-    justifyContent: 'center'
+    justifyContent: 'left'
   }
 });
 
@@ -37,7 +37,8 @@ const HiKPINotice = ({
       onClick: () => onClickOnKPI(key),
       active: activeKpi === key,
       minify: minify,
-      disable: kpi.disable
+      disable: kpi.disable,
+      buttonId: kpi.buttonId
     });
   }));
 };

package/es/HiSelectableList/HiSelectableListItem.js

@@ -179,6 +179,7 @@ class HiSelectableListItem extends React.PureComponent {
 
       if (key === 'space' || key === 'enter') {
         event.preventDefault();
+        event.stopPropagation();
 
         if (item) {
           this.props.onSelect(null, item);

package/index.es.js

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

package/index.js

@@ -1,4 +1,4 @@
-/** @license HiPay-Material-UI v2.1.0
+/** @license HiPay-Material-UI v2.2.0-RC2
  *
  * 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.1.0",
+  "version": "2.2.0-RC2",
   "description": "React components that implement Google's Material Design.",
   "keywords": [
     "react",

package/HiDatePicker/Caption.spec.js

@@ -1,88 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _testUtils = require("../test-utils");
-
-var _Caption = _interopRequireDefault(require("./Caption"));
-
-describe('<Caption />', function () {
-  var shallow;
-  var mount;
-  var classes;
-  var wrapper;
-  var date = new Date();
-
-  var _ref = _react.default.createElement(_Caption.default, {
-    date: date,
-    localeUtils: _moment.default
-  });
-
-  before(function () {
-    shallow = (0, _testUtils.createShallow)({
-      untilSelector: 'Badge'
-    });
-    mount = (0, _testUtils.createMount)();
-    classes = (0, _testUtils.getClasses)(_ref);
-  });
-  after(function () {
-    mount.cleanUp();
-  });
-
-  var _ref2 = _react.default.createElement(_Caption.default, {
-    date: date,
-    localeUtils: _moment.default
-  });
-
-  describe('text with leftIcon', function () {
-    before(function () {
-      wrapper = shallow(_ref2);
-    });
-    it('should render a div containing two spans', function () {
-      _chai.assert.strictEqual(wrapper.name(), 'div');
-
-      _chai.assert.strictEqual(wrapper.childAt(0).is('span'), true, 'should be a span');
-
-      _chai.assert.strictEqual(wrapper.childAt(2).is('span'), true, 'should be a span');
-    });
-    it('should merge user classes & spread custom props to the root node', function () {
-      _chai.assert.strictEqual(wrapper.hasClass(classes.caption), true);
-    });
-  });
-  describe('mount', function () {
-    it('should call onDelete when clicking', function () {
-      var handleClickMonth = (0, _sinon.spy)();
-      var handleClickYear = (0, _sinon.spy)();
-      wrapper = mount(_react.default.createElement(_Caption.default, {
-        date: date,
-        localeUtils: _moment.default,
-        onMonthClick: handleClickMonth,
-        onYearClick: handleClickYear
-      }));
-
-      _chai.assert.strictEqual(wrapper.find('span').length, 2, 'should have 2 spans');
-
-      wrapper.find('span').at(0).simulate('click');
-
-      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should have been called once handleClickMonth');
-
-      _chai.assert.strictEqual(handleClickYear.callCount, 0, 'should not have been called handleClickYear');
-
-      wrapper.find('span').at(1).simulate('click');
-
-      _chai.assert.strictEqual(handleClickMonth.callCount, 1, 'should not have been called twice handleClickMonth');
-
-      _chai.assert.strictEqual(handleClickYear.callCount, 1, 'should have been called once handleClickYear');
-
-      wrapper.unmount();
-    });
-  });
-});

package/HiDatePicker/ListPicker.spec.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _Menu = require("@material-ui/core/Menu");
-
-var _index = require("../test-utils/index");
-
-var _ListPicker = _interopRequireDefault(require("./ListPicker"));
-
-describe('<ListPicker />', function () {
-  var shallow;
-  var mount;
-  var itemList;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-    mount = (0, _index.createMount)();
-    itemList = [1, 2, 3, 4];
-  });
-  after(function () {
-    mount.cleanUp();
-  });
-  describe('shallow', function () {
-    it('renders a Scrollable MenuList', function () {
-      var handlerClick = (0, _sinon.spy)();
-      var wrapper = shallow(_react.default.createElement(_ListPicker.default, {
-        itemList: itemList,
-        onItemClick: handlerClick,
-        selectedItem: 2,
-        initAtMiddleScroll: true
-      }));
-
-      _chai.assert.strictEqual(wrapper.name(), 'Scrollbars', 'should render a Scrollbars container');
-
-      _chai.assert.strictEqual(wrapper.dive().find(_Menu.MenuList).length, 1, 'should include a MenuList');
-
-      _chai.assert.strictEqual(wrapper.dive().find(_Menu.MenuItem).length, 4, 'should include 4 MenuItem'); // Click on [4] item
-
-
-      wrapper.dive().find(_Menu.MenuItem).at(3).props().onClick();
-
-      _chai.assert.strictEqual(handlerClick.calledOnce, true, 'should call onChange callback once');
-
-      _chai.assert.strictEqual(handlerClick.calledWith(4), true, 'should call onChange callback with selected item');
-    });
-  });
-  describe('mount', function () {
-    it('should mount', function () {
-      var wrapper = mount(_react.default.createElement(_ListPicker.default, {
-        itemList: itemList,
-        onItemClick: function onItemClick() {},
-        selectedItem: 2,
-        initAtMiddleScroll: true
-      }));
-
-      _chai.assert.strictEqual(wrapper.name(), 'WithStyles(ListPicker)');
-    });
-  });
-});

package/HiDatePicker/NavBar.spec.js

@@ -1,55 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _index = require("../test-utils/index");
-
-var _NavBar = _interopRequireDefault(require("./NavBar"));
-
-describe('<NavBar />', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-  });
-  it('renders a Scrollable MenuList', function () {
-    var handlerNextClick = (0, _sinon.spy)();
-    var handlerPreviousClick = (0, _sinon.spy)();
-    var handlerClockClick = (0, _sinon.spy)();
-    var nextMonth = new Date(2018, 3, 1);
-    var prevMonth = new Date(2018, 1, 1);
-    var wrapper = shallow(_react.default.createElement(_NavBar.default, {
-      nextMonth: nextMonth,
-      previousMonth: prevMonth,
-      onNextClick: handlerNextClick,
-      onPreviousClick: handlerPreviousClick,
-      onClockClick: handlerClockClick,
-      showClockButton: true,
-      localeUtils: _moment.default
-    }));
-
-    _chai.assert.strictEqual(wrapper.find(_IconButton.default).length, 3, 'should include 3 IconButtons'); // Click on [4] item
-
-
-    wrapper.find(_IconButton.default).at(0).props().onClick();
-    wrapper.find(_IconButton.default).at(1).props().onClick();
-    wrapper.find(_IconButton.default).at(2).props().onClick();
-
-    _chai.assert.strictEqual(handlerPreviousClick.calledOnce, true, 'should call onPreviousClick callback once');
-
-    _chai.assert.strictEqual(handlerNextClick.calledOnce, true, 'should call onNextClick callback once');
-
-    _chai.assert.strictEqual(handlerClockClick.calledOnce, true, 'should call onClockClick callback once');
-  });
-});

package/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -1,74 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _sinon = require("sinon");
-
-var _moment = _interopRequireDefault(require("react-day-picker/moment"));
-
-var _index = require("../../test-utils/index");
-
-var _MonthPickerOverlay = _interopRequireDefault(require("./MonthPickerOverlay"));
-
-var _ListPicker = _interopRequireDefault(require("../ListPicker"));
-
-/* eslint-disable */
-var _ref = _react.default.createElement("span", null, "children");
-
-var _ref2 = _react.default.createElement("span", null, "children");
-
-describe('<MonthPickerOverlay />', function () {
-  var shallow;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-  });
-  it('renders a functional month ListPicker', function () {
-    var handlerChange = (0, _sinon.spy)();
-    var aprilLabel = 'April';
-    var januaryDate = new Date(1992, 0, 9);
-    var aprilDate = new Date(1992, 3, 9);
-    var wrapper = shallow(_react.default.createElement(_MonthPickerOverlay.default, {
-      value: januaryDate,
-      onChange: handlerChange,
-      localeUtils: _moment.default
-    }, _ref));
-
-    _chai.assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 1, 'should include a ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).props().onItemClick(aprilLabel);
-
-    _chai.assert.strictEqual(handlerChange.calledOnce, true, 'should call onChange callback once');
-
-    _chai.assert.strictEqual(handlerChange.calledWith(aprilDate), true, 'should call onChange callback with updated month');
-  });
-  it('check months', function () {
-    var handlerChange = (0, _sinon.spy)();
-    var januaryDate = new Date(1992, 0, 9);
-    var localeUtils = {
-      getMonths: function getMonths() {
-        return ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'Other'];
-      }
-    };
-    var wrapper = shallow(_react.default.createElement(_MonthPickerOverlay.default, {
-      value: januaryDate,
-      onChange: handlerChange,
-      localeUtils: localeUtils
-    }, _ref2));
-
-    _chai.assert.strictEqual(wrapper.name(), 'CustomOverlayLayout', 'should render a CustomOverlayLayout');
-
-    _chai.assert.strictEqual(wrapper.dive().find(_ListPicker.default).length, 1, 'should include a ListPicker');
-
-    wrapper.dive().find(_ListPicker.default).props().onItemClick('Other');
-
-    _chai.assert.strictEqual(handlerChange.callCount, 0, 'should not call onChange with month index >= 12');
-  });
-});

package/HiDatePicker/Overlays/Overlay.spec.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _chai = require("chai");
-
-var _index = require("../../test-utils/index");
-
-var _Overlay = _interopRequireDefault(require("./Overlay"));
-
-/* eslint-disable */
-var _ref = _react.default.createElement(_Overlay.default, null);
-
-var _ref2 = _react.default.createElement(_Overlay.default, null, _react.default.createElement("span", null, "children"));
-
-describe('<Overlay />', function () {
-  var shallow;
-  var classes;
-  before(function () {
-    shallow = (0, _index.createShallow)({
-      dive: true
-    });
-    classes = (0, _index.getClasses)(_ref);
-  });
-  it('renders a div containing a DayPickerInput', function () {
-    var wrapper = shallow(_ref2);
-
-    _chai.assert.strictEqual(wrapper.dive().name(), 'Paper', 'should render a Paper');
-
-    _chai.assert.strictEqual(wrapper.dive().hasClass(classes.paper), true, 'should render a Paper with paper class');
-  });
-});