@hipay/hipay-material-ui 2.0.0-beta.54 → 2.0.0-beta.56

package/HiDatePicker/HiDateRangePicker.js

@@ -66,7 +66,7 @@ function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiDateRangePicker);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangePicker).call(this));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangePicker).call(this, props));
 
     _this.handleDayChange = function (name, day) {
       if (day) {
@@ -103,9 +103,17 @@ function (_React$Component) {
     };
 
     _this.onDayToClick = function (day) {
-      _this.handleDayChange('to', day);
+      var change = (0, _moment2.default)(day) >= (0, _moment2.default)(_this.props.from);
 
-      document.activeElement.blur();
+      if (change && _this.props.disableFutureDays && (0, _moment2.default)(day) > (0, _moment2.default)()) {
+        change = false;
+      }
+
+      if (change) {
+        _this.handleDayChange('to', day);
+
+        document.activeElement.blur();
+      }
     };
 
     _this.handleTimeChange = function (name, date, precision) {
@@ -128,8 +136,8 @@ function (_React$Component) {
 
     _this.handleChange = function (name, day) {
       var translations = _this.props.translations;
-      var date = undefined;
-      var error = undefined;
+      var date;
+      var error;
       var now = new Date();
       var _this$props = _this.props,
           minimumDate = _this$props.minimumDate,
@@ -154,9 +162,9 @@ function (_React$Component) {
         if (name === 'to' && comparativeDate > (0, _moment2.default)(date) || name === 'from' && comparativeDate < (0, _moment2.default)(date)) {
           error = translations.to_superior_from;
         } else if (date < minimumDate) {
-          error = translations.date_inferior_min_date.replace("%s", (0, _moment2.default)(minimumDate).format(format));
+          error = translations.date_inferior_min_date.replace('%s', (0, _moment2.default)(minimumDate).format(format));
         } else if (disableFutureDays && date > now) {
-          error = translations.date_superior_max_date.replace("%s", (0, _moment2.default)().format(format));
+          error = translations.date_superior_max_date.replace('%s', (0, _moment2.default)().format(format));
         }
 
         if (!_this.props.enableTime) {
@@ -207,9 +215,11 @@ function (_React$Component) {
     _this.handleReset = function (name) {
       _this.handleChange(name, undefined);
 
-      _this.setState({
-        keyFrom: _this.state.keyFrom === 1 ? 2 : 1,
-        keyTo: _this.state.keyTo === 1 ? 2 : 1
+      _this.setState(function (prevState) {
+        return {
+          keyFrom: prevState.keyFrom === 1 ? 2 : 1,
+          keyTo: prevState.keyTo === 1 ? 2 : 1
+        };
       });
     };
 
@@ -245,7 +255,7 @@ function (_React$Component) {
         staticPosition: staticPosition
       });
 
-      switch (_this.state['openedPanel']) {
+      switch (_this.state.openedPanel) {
         case 'time':
           return _this.renderTimePickerOverlay(name, rangeOverlayProps);
 
@@ -256,6 +266,7 @@ function (_React$Component) {
           return _this.renderYearPickerOverlay(name, rangeOverlayProps);
 
         case 'calendar':
+        default:
           return _react.default.createElement(_Overlay.default, rangeOverlayProps);
       }
     };
@@ -270,7 +281,7 @@ function (_React$Component) {
 
     _this.renderMonthPickerOverlay = function (name, propsOverlay) {
       var monthPickerProps = {
-        value: _this.state['currentMonth'],
+        value: _this.state.currentMonth,
         onChange: _this.handleCurrentMonthChange
       };
       return _react.default.createElement(_MonthPickerOverlay.default, (0, _extends2.default)({
@@ -295,7 +306,7 @@ function (_React$Component) {
 
     _this.renderYearPickerOverlay = function (name, propsOverlay) {
       var yearPickerProps = {
-        value: _this.state['currentMonth'],
+        value: _this.state.currentMonth,
         onChange: _this.handleCurrentMonthChange,
         disabledFutureDays: _this.props.disableFutureDays
       };
@@ -398,7 +409,7 @@ function (_React$Component) {
         onTodayButtonClick: this.handleCurrentMonthChange,
         navbarElement: this.renderNavBar,
         captionElement: this.renderCaption,
-        disabledDays: (0, _extends2.default)({
+        disabledDays: (0, _extends2.default)({}, dayPickerProps.disabledDays, {
           before: minimumDate
         }, disableFutureDays && {
           after: now
@@ -413,7 +424,7 @@ function (_React$Component) {
         navbarElement: this.renderNavBar,
         onDayClick: this.onDayToClick,
         captionElement: this.renderCaption,
-        disabledDays: (0, _extends2.default)({
+        disabledDays: (0, _extends2.default)({}, dayPickerProps.disabledDays, {
           before: minimumDate
         }, disableFutureDays && {
           after: now
@@ -499,7 +510,7 @@ function (_React$Component) {
         inputProps: toInputProps,
         format: enableTime ? "".concat(format, " HH:mm") : format,
         formatDate: _moment.default.formatDate,
-        parseDate: _moment.default.parseDate //onDayChange={(day) => this.handleDayChange('to', day)}
+        parseDate: _moment.default.parseDate // onDayChange={(day) => this.handleDayChange('to', day)}
         ,
         placeholder: ''
       })));
@@ -522,7 +533,7 @@ function (_React$Component) {
 }(_react.default.Component);
 
 HiDateRangePicker.defaultProps = {
-  disabledDays: [],
+  disabledDays: {},
   disableFutureDays: true,
   staticPosition: false,
   enableTime: false,
@@ -531,6 +542,8 @@ HiDateRangePicker.defaultProps = {
   labelFrom: 'Start',
   labelTo: 'End',
   locale: 'fr-FR',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
   translations: {
     today: 'today',
     hour: 'Hour',
@@ -556,6 +569,11 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    */
   disabled: _propTypes.default.bool,
 
+  /**
+   * http://react-day-picker.js.org/api/DayPicker#disabledDays
+   */
+  disabledDays: _propTypes.default.object,
+
   /**
    * Uniquement la sélection de date antérieures à aujourd'hui (inclu)
    */
@@ -580,7 +598,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
    * Date de début sélectionnée
    */
   from: _propTypes.default.instanceOf(Date),
-  //from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
+  // from: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),
 
   /**
    * Erreur sur date from
@@ -626,7 +644,7 @@ HiDateRangePicker.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: _propTypes.default.instanceOf(Date).isRequired,
+  minimumDate: _propTypes.default.instanceOf(Date),
 
   /**
    * Callback à la sélection d'une date

package/HiDatePicker/HiDateRangeSelector.js

@@ -142,7 +142,7 @@ function buildDateRangeOptionByKey(key, t, format) {
   };
 }
 
-var styles = function styles(theme) {
+var styles = function styles() {
   return {
     root: {
       maxWidth: 500,
@@ -154,7 +154,8 @@ var styles = function styles(theme) {
       marginTop: 1
     },
     dateRangePicker: {
-      width: 'calc(100% + 8px)'
+      width: 'calc(100% + 8px)',
+      marginTop: 1
     },
     smSelect: {},
     smRangePicker: {}
@@ -175,17 +176,25 @@ function (_React$Component) {
     _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDateRangeSelector).call(this));
     _this.options = [];
 
-    _this.onBlur = function (event) {
+    _this.handleBlur = function (event) {
       if (event instanceof Object && _this.props.onblur) {
         _this.props.onBlur(event);
       }
     };
 
+    _this.handleReset = function (name) {
+      _this.props.onChange(name, undefined);
+
+      _this.props.onChange("".concat(name, "Error"), undefined);
+    };
+
     _this.handleSelectChange = function (name) {
       return function (event, value) {
-        var _this$setState;
+        _this.setState(function (prevState) {
+          var _ref;
 
-        _this.setState((_this$setState = {}, (0, _defineProperty2.default)(_this$setState, name, value), (0, _defineProperty2.default)(_this$setState, "key", _this.state.key === 1 ? 2 : 1), _this$setState));
+          return _ref = {}, (0, _defineProperty2.default)(_ref, name, value), (0, _defineProperty2.default)(_ref, "key", prevState.key === 1 ? 2 : 1), _ref;
+        });
 
         var selectedOption = _this.options.find(function (option) {
           return option.id === value;
@@ -207,7 +216,6 @@ function (_React$Component) {
       };
     };
 
-    _this.handleReset = _this.handleReset.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.handleSelectChange = _this.handleSelectChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.options = props.availableOptionKeys.map(function (key) {
       return buildDateRangeOptionByKey(key, props.translations, props.format);
@@ -226,7 +234,6 @@ function (_React$Component) {
         this.setState({
           containerWidth: (0, _reactDom.findDOMNode)(this.container).clientWidth - 5
         });
-        this.handleSelectChange('selectedPreset')(undefined, this.state.selectedPreset);
       }
     }
   }, {
@@ -234,12 +241,6 @@ function (_React$Component) {
     value: function componentWillUnmount() {
       clearTimeout(this.timeout); // TODO : supprimer ?
     }
-  }, {
-    key: "handleReset",
-    value: function handleReset(name) {
-      this.props.onChange(name, undefined);
-      this.props.onChange("".concat(name, "Error"), undefined);
-    }
   }, {
     key: "render",
     value: function render() {
@@ -282,7 +283,7 @@ function (_React$Component) {
         spacing: 8,
         className: classes.root,
         ref: function ref(container) {
-          return _this2.container = container;
+          _this2.container = container;
         }
       }, _react.default.createElement(_Grid.default, {
         item: true,
@@ -321,8 +322,8 @@ function (_React$Component) {
           root: classes.dateRangePicker
         },
         id: idRange,
-        from: from,
-        to: to,
+        from: selectedPreset ? from : undefined,
+        to: selectedPreset ? to : undefined,
         enableTime: enableTime,
         onChange: onChange,
         toError: toError,
@@ -333,14 +334,14 @@ function (_React$Component) {
         disabled: disabled || selectedPreset !== 'custom',
         translations: translations,
         staticPosition: staticPosition,
-        onBlur: this.onBlur,
+        onBlur: this.handleBlur,
         hasSelector: true
       }, props)))));
     }
   }], [{
     key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.defaultPreset && props.returnSelectValue) {
+    value: function getDerivedStateFromProps(props) {
+      if (props.returnSelectValue) {
         return {
           selectedPreset: props.defaultPreset
         };
@@ -354,12 +355,13 @@ function (_React$Component) {
 
 HiDateRangeSelector.defaultProps = {
   availableOptionKeys: ['cd', 'pd', 'cw', 'pw', 'cm', 'pm', 'cq', 'pq', 'cy', 'custom'],
-  defaultPreset: 'cd',
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,
   locale: 'fr-FR',
   format: 'YYYY-DD-MM',
+  minimumDate: new Date(2013, 4, 1),
+  // by default 1 May 2013
   translations: {
     today: 'Today',
     hour: 'Hour',
@@ -470,7 +472,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: _propTypes.default.instanceOf(Date).isRequired,
+  minimumDate: _propTypes.default.instanceOf(Date),
 
   /**
    * Callback à la sélection d'une date
@@ -485,7 +487,7 @@ HiDateRangeSelector.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Retourne la valeur du select de la période au change du select
    */
-  returnSelectValue: _propTypes.default.bool.isRequired,
+  returnSelectValue: _propTypes.default.bool,
 
   /**
    * Props passées au HiSelectField

package/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -26,10 +26,15 @@ var _withStyles = _interopRequireDefault(require("../../styles/withStyles"));
 var styles = function styles(theme) {
   return {
     paper: {
-      position: 'absolute',
       width: '100%',
       zIndex: 10
     },
+    absolute: {
+      position: 'absolute'
+    },
+    relative: {
+      position: 'relative'
+    },
     left: {
       width: '200%',
       left: 0
@@ -80,22 +85,25 @@ var CustomOverlayLayout = function CustomOverlayLayout(_ref) {
       footerElement = _ref.footerElement,
       absoluteElement = _ref.absoluteElement,
       side = _ref.side,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side"]);
-  var paperClass = (0, _classnames.default)(classes.paper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty2.default)(_classNames, classes.right, side === 'to'), _classNames));
+      staticPosition = _ref.staticPosition,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "children", "headerElement", "footerElement", "absoluteElement", "side", "staticPosition"]);
+  var paperClass = (0, _classnames.default)(classes.paper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty2.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty2.default)(_classNames, classes.relative, staticPosition === true), _classNames));
   var paperProps = (0, _extends2.default)({}, props);
-  return _react.default.createElement(_Paper.default, {
-    className: paperClass,
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus
-  }, _react.default.createElement("div", {
-    className: classes.overlay
-  }, _react.default.createElement("div", {
-    className: classes.header
-  }, headerElement), _react.default.createElement("div", {
-    className: classes.body
-  }, children), _react.default.createElement("div", {
-    className: classes.footer
-  }, footerElement), absoluteElement));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    _react.default.createElement(_Paper.default, {
+      className: paperClass,
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus
+    }, _react.default.createElement("div", {
+      className: classes.overlay
+    }, _react.default.createElement("div", {
+      className: classes.header
+    }, headerElement), _react.default.createElement("div", {
+      className: classes.body
+    }, children), _react.default.createElement("div", {
+      className: classes.footer
+    }, footerElement), absoluteElement))
+  );
 };
 
 CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -112,7 +120,8 @@ CustomOverlayLayout.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: _propTypes.default.string
+  side: _propTypes.default.string,
+  staticPosition: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiDatePicker/Overlays/MonthPickerOverlay.spec.js

@@ -16,6 +16,7 @@ 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");

package/HiDatePicker/Overlays/Overlay.js

@@ -61,13 +61,15 @@ var Overlay = function Overlay(_ref) {
       props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "children", "side", "staticPosition"]);
   var paperClass = (0, _classnames.default)(classes.paper, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.left, side === 'from'), (0, _defineProperty2.default)(_classNames, classes.right, side === 'to'), (0, _defineProperty2.default)(_classNames, classes.absolute, staticPosition !== true), (0, _defineProperty2.default)(_classNames, classes.relative, staticPosition === true), _classNames));
   var paperProps = (0, _extends2.default)({}, props);
-  return _react.default.createElement(_Paper.default, {
-    onBlur: paperProps.onBlur,
-    onFocus: paperProps.onFocus,
-    className: paperClass
-  }, _react.default.createElement("div", {
-    className: classes.overlay
-  }, children));
+  return (// eslint-disable-next-line react/jsx-handler-names
+    _react.default.createElement(_Paper.default, {
+      onBlur: paperProps.onBlur,
+      onFocus: paperProps.onFocus,
+      className: paperClass
+    }, _react.default.createElement("div", {
+      className: classes.overlay
+    }, children))
+  );
 };
 
 Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -102,7 +104,12 @@ Overlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Définit comment construire le Paper dans le cas d'un double input
    */
-  side: _propTypes.default.string
+  side: _propTypes.default.string,
+
+  /**
+   * Display overlay with position static
+   */
+  staticPosition: _propTypes.default.bool
 } : {};
 
 var _default = (0, _withStyles.default)(styles, {

package/HiDatePicker/Overlays/Overlay.spec.js

@@ -10,6 +10,7 @@ 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"));

package/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -111,7 +111,7 @@ var styles = function styles(theme) {
       bottom: 0,
       height: 32,
       width: 32,
-      margin: '0px 24px'
+      margin: '4px 24px'
     },
     calendarButton: {
       fontWeight: theme.typography.fontWeightMedium
@@ -132,7 +132,7 @@ function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, TimePickerOverlay);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TimePickerOverlay).call(this));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(TimePickerOverlay).call(this, props));
     _this.hours = Array.from(Array(24).keys());
     _this.minutes = Array.from(Array(60).keys());
     _this.handleHourClick = _this.handleHourClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));

package/HiDatePicker/Overlays/TimePickerOverlay.spec.js

@@ -14,6 +14,7 @@ var _TimePickerOverlay = _interopRequireDefault(require("./TimePickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
+/* eslint-disable */
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

package/HiDatePicker/Overlays/YearPickerOverlay.js

@@ -40,7 +40,7 @@ function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, YearPickerOverlay);
-    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this));
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(YearPickerOverlay).call(this, props));
     _this.years = [];
     _this.handleYearClick = _this.handleYearClick.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     var currentYear = new Date().getFullYear();
@@ -95,8 +95,6 @@ function (_React$Component) {
 }(_react.default.Component);
 
 YearPickerOverlay.defaultProps = {
-  // disableFutureDays: true,
-  // disablePastDays: false,
   minimumDate: new Date(2013, 4, 1),
   // by default 1 May 2013
   translations: {
@@ -132,7 +130,7 @@ YearPickerOverlay.propTypes = process.env.NODE_ENV !== "production" ? {
   /**
    * Date minimale sélectionnable
    */
-  minimumDate: _propTypes.default.instanceOf(Date).isRequired,
+  minimumDate: _propTypes.default.instanceOf(Date),
 
   /**
    * Fonction de callback

package/HiDatePicker/Overlays/YearPickerOverlay.spec.js

@@ -14,6 +14,7 @@ var _YearPickerOverlay = _interopRequireDefault(require("./YearPickerOverlay"));
 
 var _ListPicker = _interopRequireDefault(require("../ListPicker"));
 
+/* eslint-disable */
 var _ref = _react.default.createElement("span", null, "children");
 
 var _ref2 = _react.default.createElement("span", null, "children");

package/HiDatePicker/stylesheet.js

@@ -172,7 +172,7 @@ var _default = function _default(theme) {
     // Added to the day's cell for the current day
     today: {
       // color: theme.palette.primary.light,
-      border: '2px solid #8b9898',
+      boxShadow: 'inset 0 0 0 2px #8b9898',
       borderRadius: '50%',
       color: "".concat(theme.palette.neutral.dark, " !important"),
       fontWeight: theme.typography.fontWeightMedium
@@ -180,7 +180,8 @@ var _default = function _default(theme) {
     // Added to the day's cell outside the current month
     outside: {
       backgroundColor: '#F8F9FB',
-      color: theme.palette.neutral.main
+      color: theme.palette.neutral.main,
+      cursor: 'default'
     },
     // Added to the day's cell specified in the "disabledDays" prop
     disabled: {

package/HiDotsStepper/HiDot.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
+
+var _HiIcon = _interopRequireDefault(require("../HiIcon"));
+
+var _HiIconButton = _interopRequireDefault(require("../HiIconButton"));
+
+var styles = function styles() {
+  return {
+    dot: {
+      padding: 4,
+      '&:hover': {
+        backgroundColor: 'transparent !important'
+      }
+    }
+  };
+};
+
+exports.styles = styles;
+
+var _ref = _react.default.createElement(_HiIcon.default, {
+  size: 24
+}, "radio_button_checked");
+
+var _ref2 = _react.default.createElement(_HiIcon.default, {
+  size: 12
+}, "lens");
+
+var HiDot =
+/*#__PURE__*/
+function (_React$PureComponent) {
+  (0, _inherits2.default)(HiDot, _React$PureComponent);
+
+  function HiDot() {
+    (0, _classCallCheck2.default)(this, HiDot);
+    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiDot).apply(this, arguments));
+  }
+
+  (0, _createClass2.default)(HiDot, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          active = _this$props.active,
+          status = _this$props.status,
+          classes = _this$props.classes,
+          onClick = _this$props.onClick,
+          props = (0, _objectWithoutProperties2.default)(_this$props, ["active", "status", "classes", "onClick"]);
+      var dotColor;
+
+      if (!status || status === 'unreviewed') {
+        dotColor = 'default';
+      } else {
+        dotColor = status === 'refused' ? 'negative' : 'positive';
+      }
+
+      return _react.default.createElement(_HiIconButton.default, (0, _extends2.default)({
+        className: classes.dot,
+        color: dotColor,
+        onClick: onClick
+      }, props), active ? _ref : _ref2);
+    }
+  }]);
+  return HiDot;
+}(_react.default.PureComponent);
+
+HiDot.defaultProps = {
+  active: false,
+  status: 'unreviewed'
+};
+HiDot.propTypes = process.env.NODE_ENV !== "production" ? {
+  active: _propTypes.default.bool,
+  classes: _propTypes.default.object,
+  onClick: _propTypes.default.func,
+  status: _propTypes.default.oneOf(['refused', 'validated', 'unreviewed'])
+} : {};
+
+var _default = (0, _withStyles.default)(styles, {
+  hiComponent: true,
+  name: 'HmuiHiDot'
+})(HiDot);
+
+exports.default = _default;