@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/components/browserWarning/BrowserWarningMessageEN.js

@@ -9,41 +9,39 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _chrome = _interopRequireDefault(require("./chrome.svg"));
-
-var _firefox = _interopRequireDefault(require("./firefox.svg"));
+var _BrowserIcons = require("./BrowserIcons");
 
 var BrowserWarningMessageEN = function BrowserWarningMessageEN(_ref) {
   var onBrowserSelect = _ref.onBrowserSelect;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'text-center padding-right-1pct padding-left-1pct'
+    className: "text-center padding-right-1pct padding-left-1pct"
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: 'margin-bottom-25 padding-top-25'
-  }, 'You are using an outdated browser'), /*#__PURE__*/_react.default.createElement("p", {
-    className: 'text-size-18 margin-bottom-25'
-  }, 'With just under 7 years the ', /*#__PURE__*/_react.default.createElement("b", null, 'Internet Explorer'), ' is slowly getting old and can no longer keep up with modern browsers in terms of ', /*#__PURE__*/_react.default.createElement("b", null, 'speed'), ', ', /*#__PURE__*/_react.default.createElement("b", null, 'functionality'), ' but above all in terms of ', /*#__PURE__*/_react.default.createElement("b", null, 'security'), '.'), /*#__PURE__*/_react.default.createElement("p", {
-    className: 'text-size-18 margin-bottom-25'
-  }, 'We at RIO, have set ourselves the goal of providing you with the ', /*#__PURE__*/_react.default.createElement("b", null, 'best possible software'), ' to offer you the ', /*#__PURE__*/_react.default.createElement("b", null, 'best possible user experience'), '. Therefore, we have decided to end the support for the IE11.'), /*#__PURE__*/_react.default.createElement("p", {
-    className: 'text-size-18'
-  }, /*#__PURE__*/_react.default.createElement("b", null, 'Experience RIO from a whole new side with a modern browser:'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-bottom-25 padding-top-25"
+  }, "You are using an outdated browser"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-size-18 margin-bottom-25"
+  }, 'With just under 7 years the ', /*#__PURE__*/_react.default.createElement("b", null, "Internet Explorer"), ' is slowly getting old and can no longer keep up with modern browsers in terms of ', /*#__PURE__*/_react.default.createElement("b", null, "speed"), ', ', /*#__PURE__*/_react.default.createElement("b", null, "functionality"), ' but above all in terms of ', /*#__PURE__*/_react.default.createElement("b", null, "security"), "."), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-size-18 margin-bottom-25"
+  }, 'We at RIO, have set ourselves the goal of providing you with the ', /*#__PURE__*/_react.default.createElement("b", null, "best possible software"), ' to offer you the ', /*#__PURE__*/_react.default.createElement("b", null, "best possible user experience"), ". Therefore, we have decided to end the support for the IE11."), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-size-18"
+  }, /*#__PURE__*/_react.default.createElement("b", null, "Experience RIO from a whole new side with a modern browser:"))), /*#__PURE__*/_react.default.createElement("div", {
     className: "display-flex justify-content-center justify-content-around flex-wrap\n                padding-right-2pct-ls padding-left-2pct-ls"
   }, /*#__PURE__*/_react.default.createElement("a", {
-    href: 'https://www.google.com/chrome/',
-    target: '_blank',
-    rel: 'noopener noreferrer',
-    className: 'display-block hover-scale-110',
+    href: "https://www.google.com/chrome/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "display-block hover-scale-110",
     onClick: function onClick() {
       return onBrowserSelect('chrome');
     }
-  }, /*#__PURE__*/_react.default.createElement(_chrome.default, null)), /*#__PURE__*/_react.default.createElement("a", {
-    href: 'https://www.mozilla.org/firefox/new/',
-    target: '_blank',
-    rel: 'noopener noreferrer',
-    className: 'display-block hover-scale-110',
+  }, /*#__PURE__*/_react.default.createElement(_BrowserIcons.ChromeIcon, null)), /*#__PURE__*/_react.default.createElement("a", {
+    href: "https://www.mozilla.org/firefox/new/",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: "display-block hover-scale-110",
     onClick: function onClick() {
       return onBrowserSelect('firefox');
     }
-  }, /*#__PURE__*/_react.default.createElement(_firefox.default, null))));
+  }, /*#__PURE__*/_react.default.createElement(_BrowserIcons.FirefoxIcon, null))));
 };
 
 var _default = BrowserWarningMessageEN;

package/lib/components/carousel/Carousel.js

@@ -2,435 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = 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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _without = _interopRequireDefault(require("lodash/fp/without"));
-
-var _CarouselCaption = _interopRequireDefault(require("./CarouselCaption"));
-
-var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
-
-var _excluded = ["slide", "indicators", "controls", "wrap", "prevIcon", "prevLabel", "nextIcon", "nextLabel", "className", "children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-// import SafeAnchor from './SafeAnchor';
-var propTypes = {
-  slide: _propTypes.default.bool,
-  indicators: _propTypes.default.bool,
-
-  /**
-   * The amount of time to delay between automatically cycling an item.
-   * If `null`, carousel will not automatically cycle.
-   */
-  interval: _propTypes.default.number,
-  controls: _propTypes.default.bool,
-  pauseOnHover: _propTypes.default.bool,
-  wrap: _propTypes.default.bool,
-
-  /**
-   * Callback fired when the active item changes.
-   *
-   * ```js
-   * (eventKey: any, ?event: Object) => any
-   * ```
-   *
-   * If this callback takes two or more arguments, the second argument will
-   * be a persisted event object with `direction` set to the direction of the
-   * transition.
-   */
-  onSelect: _propTypes.default.func,
-  onSlideEnd: _propTypes.default.func,
-  activeIndex: _propTypes.default.number,
-  defaultActiveIndex: _propTypes.default.number,
-  direction: _propTypes.default.oneOf(['prev', 'next']),
-  prevIcon: _propTypes.default.node,
-
-  /**
-   * Label shown to screen readers only, can be used to show the previous element
-   * in the carousel.
-   * Set to null to deactivate.
-   */
-  prevLabel: _propTypes.default.string,
-  nextIcon: _propTypes.default.node,
-
-  /**
-   * Label shown to screen readers only, can be used to show the next element
-   * in the carousel.
-   * Set to null to deactivate.
-   */
-  nextLabel: _propTypes.default.string
-};
-var defaultProps = {
-  slide: true,
-  interval: 5000,
-  pauseOnHover: true,
-  wrap: true,
-  indicators: true,
-  controls: true,
-  prevIcon: /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-chevron-left'
-  }),
-  prevLabel: 'Previous',
-  nextIcon: /*#__PURE__*/_react.default.createElement("span", {
-    className: 'rioglyph rioglyph-chevron-right'
-  }),
-  nextLabel: 'Next'
-};
-
-var Carousel = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Carousel, _React$Component);
-
-  var _super = _createSuper(Carousel);
-
-  function Carousel(props, context) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, Carousel);
-    _this = _super.call(this, props, context);
-    _this.handleMouseOver = _this.handleMouseOver.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleMouseOut = _this.handleMouseOut.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handlePrev = _this.handlePrev.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleNext = _this.handleNext.bind((0, _assertThisInitialized2.default)(_this));
-    _this.handleItemAnimateOutEnd = _this.handleItemAnimateOutEnd.bind((0, _assertThisInitialized2.default)(_this));
-    var defaultActiveIndex = props.defaultActiveIndex;
-    _this.state = {
-      activeIndex: defaultActiveIndex != null ? defaultActiveIndex : 0,
-      previousActiveIndex: null,
-      direction: null
-    };
-    _this.isUnmounted = false;
-    return _this;
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Carousel2.default;
   }
+});
 
-  (0, _createClass2.default)(Carousel, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.waitForNext();
-    } // eslint-disable-next-line camelcase
-
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      var activeIndex = this.getActiveIndex();
-
-      if (nextProps.activeIndex != null && nextProps.activeIndex !== activeIndex) {
-        clearTimeout(this.timeout);
-        this.setState({
-          previousActiveIndex: activeIndex,
-          direction: nextProps.direction != null ? nextProps.direction : this.getDirection(activeIndex, nextProps.activeIndex)
-        });
-      }
-
-      if (nextProps.activeIndex == null && this.state.activeIndex >= nextProps.children.length) {
-        this.setState({
-          activeIndex: 0,
-          previousActiveIndex: null,
-          direction: null
-        });
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.timeout);
-      this.isUnmounted = true;
-    }
-  }, {
-    key: "getActiveIndex",
-    value: function getActiveIndex() {
-      var activeIndexProp = this.props.activeIndex;
-      return activeIndexProp != null ? activeIndexProp : this.state.activeIndex;
-    }
-  }, {
-    key: "getDirection",
-    value: function getDirection(prevIndex, index) {
-      if (prevIndex === index) {
-        return null;
-      }
-
-      return prevIndex > index ? 'prev' : 'next';
-    }
-  }, {
-    key: "handleItemAnimateOutEnd",
-    value: function handleItemAnimateOutEnd() {
-      var _this2 = this;
-
-      this.setState({
-        previousActiveIndex: null,
-        direction: null
-      }, function () {
-        _this2.waitForNext();
-
-        if (_this2.props.onSlideEnd) {
-          _this2.props.onSlideEnd();
-        }
-      });
-    }
-  }, {
-    key: "handleMouseOut",
-    value: function handleMouseOut() {
-      if (this.isPaused) {
-        this.play();
-      }
-    }
-  }, {
-    key: "handleMouseOver",
-    value: function handleMouseOver() {
-      if (this.props.pauseOnHover) {
-        this.pause();
-      }
-    }
-  }, {
-    key: "handleNext",
-    value: function handleNext(event) {
-      var index = this.getActiveIndex() + 1;
-      var count = this.props.children.length;
-
-      if (index > count - 1) {
-        if (!this.props.wrap) {
-          return;
-        }
-
-        index = 0;
-      }
-
-      this.select(index, event, 'next');
-    }
-  }, {
-    key: "handlePrev",
-    value: function handlePrev(event) {
-      var index = this.getActiveIndex() - 1;
-
-      if (index < 0) {
-        if (!this.props.wrap) {
-          return;
-        }
-
-        index = this.props.children.length - 1;
-      }
-
-      this.select(index, event, 'prev');
-    } // This might be a public API.
-
-  }, {
-    key: "pause",
-    value: function pause() {
-      this.isPaused = true;
-      clearTimeout(this.timeout);
-    } // This might be a public API.
-
-  }, {
-    key: "play",
-    value: function play() {
-      this.isPaused = false;
-      this.waitForNext();
-    }
-  }, {
-    key: "select",
-    value: function select(index, event, direction) {
-      clearTimeout(this.timeout); // TODO: Is this necessary? Seems like the only risk is if the component
-      // unmounts while handleItemAnimateOutEnd fires.
-
-      if (this.isUnmounted) {
-        return;
-      }
-
-      var previousActiveIndex = this.props.slide ? this.getActiveIndex() : null;
-      direction = direction || this.getDirection(previousActiveIndex, index);
-      var onSelect = this.props.onSelect;
-
-      if (onSelect) {
-        if (onSelect.length > 1) {
-          // React SyntheticEvents are pooled, so we need to remove this event
-          // from the pool to add a custom property. To avoid unnecessarily
-          // removing objects from the pool, only do this when the listener
-          // actually wants the event.
-          if (event) {
-            event.persist();
-            event.direction = direction;
-          } else {
-            event = {
-              direction: direction
-            };
-          }
-
-          onSelect(index, event);
-        } else {
-          onSelect(index);
-        }
-      }
-
-      if (this.props.activeIndex == null && index !== previousActiveIndex) {
-        if (this.state.previousActiveIndex != null) {
-          // If currently animating don't activate the new index.
-          // TODO: look into queueing this canceled call and
-          // animating after the current animation has ended.
-          return;
-        }
-
-        this.setState({
-          activeIndex: index,
-          previousActiveIndex: previousActiveIndex,
-          direction: direction
-        });
-      }
-    }
-  }, {
-    key: "waitForNext",
-    value: function waitForNext() {
-      var _this$props = this.props,
-          slide = _this$props.slide,
-          interval = _this$props.interval,
-          activeIndexProp = _this$props.activeIndex;
-
-      if (!this.isPaused && slide && interval && activeIndexProp == null) {
-        this.timeout = setTimeout(this.handleNext, interval);
-      }
-    }
-  }, {
-    key: "renderControls",
-    value: function renderControls(properties) {
-      var wrap = properties.wrap,
-          children = properties.children,
-          activeIndex = properties.activeIndex,
-          prevIcon = properties.prevIcon,
-          nextIcon = properties.nextIcon,
-          prevLabel = properties.prevLabel,
-          nextLabel = properties.nextLabel;
-      var controlClassName = 'carousel-control';
-      var count = children.length;
-      return [(wrap || activeIndex !== 0) && /*#__PURE__*/_react.default.createElement("a", {
-        key: "prev",
-        className: (0, _classnames.default)(controlClassName, 'left'),
-        onClick: this.handlePrev
-      }, prevIcon, prevLabel && /*#__PURE__*/_react.default.createElement("span", {
-        className: "sr-only"
-      }, prevLabel)), (wrap || activeIndex !== count - 1) && /*#__PURE__*/_react.default.createElement("a", {
-        key: "next",
-        className: (0, _classnames.default)(controlClassName, 'right'),
-        onClick: this.handleNext
-      }, nextIcon, nextLabel && /*#__PURE__*/_react.default.createElement("span", {
-        className: "sr-only"
-      }, nextLabel))];
-    }
-  }, {
-    key: "renderIndicators",
-    value: function renderIndicators(children, activeIndex) {
-      var _this3 = this;
-
-      var indicators = [];
-
-      _react.default.Children.map(children, function (child, index) {
-        indicators.push( /*#__PURE__*/_react.default.createElement("li", {
-          key: index,
-          className: index === activeIndex ? 'active' : null,
-          onClick: function onClick(e) {
-            return _this3.select(index, e);
-          }
-        }), // Force whitespace between indicator elements. Bootstrap requires
-        // this for correct spacing of elements.
-        ' ');
-      });
-
-      return /*#__PURE__*/_react.default.createElement("ol", {
-        className: 'carousel-indicators'
-      }, indicators);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var _this$props2 = this.props,
-          slide = _this$props2.slide,
-          indicators = _this$props2.indicators,
-          controls = _this$props2.controls,
-          wrap = _this$props2.wrap,
-          prevIcon = _this$props2.prevIcon,
-          prevLabel = _this$props2.prevLabel,
-          nextIcon = _this$props2.nextIcon,
-          nextLabel = _this$props2.nextLabel,
-          className = _this$props2.className,
-          children = _this$props2.children,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      var _this$state = this.state,
-          previousActiveIndex = _this$state.previousActiveIndex,
-          direction = _this$state.direction;
-      var elementProps = (0, _without.default)(['interval', 'pauseOnHover', 'onSelect', 'onSlideEnd', 'activeIndex', // Accessed via this.getActiveIndex().
-      'defaultActiveIndex', 'direction'])(props);
-      var activeIndex = this.getActiveIndex();
-      var classes = {
-        // ...getClassSet(bsProps),
-        slide: slide
-      };
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, elementProps, {
-        className: (0, _classnames.default)('carousel', className, classes),
-        onMouseOver: this.handleMouseOver,
-        onMouseOut: this.handleMouseOut
-      }), indicators && this.renderIndicators(children, activeIndex), /*#__PURE__*/_react.default.createElement("div", {
-        className: 'carousel-inner'
-      }, _react.default.Children.map(children, function (child, index) {
-        var active = index === activeIndex;
-        var previousActive = slide && index === previousActiveIndex;
-        return /*#__PURE__*/(0, _react.cloneElement)(child, {
-          active: active,
-          index: index,
-          animateOut: previousActive,
-          animateIn: active && previousActiveIndex != null && slide,
-          direction: direction,
-          onAnimateOutEnd: previousActive ? _this4.handleItemAnimateOutEnd : null
-        });
-      })), controls && this.renderControls({
-        wrap: wrap,
-        children: children,
-        activeIndex: activeIndex,
-        prevIcon: prevIcon,
-        prevLabel: prevLabel,
-        nextIcon: nextIcon,
-        nextLabel: nextLabel
-      }));
-    }
-  }]);
-  return Carousel;
-}(_react.default.Component);
+var _react = _interopRequireDefault(require("react"));
 
-Carousel.propTypes = propTypes;
-Carousel.defaultProps = defaultProps;
-Carousel.Caption = _CarouselCaption.default;
-Carousel.Item = _CarouselItem.default;
-var _default = Carousel;
-exports.default = _default;
+var _Carousel2 = _interopRequireDefault(require("react-bootstrap/Carousel"));

package/lib/components/checkbox/Checkbox.js

@@ -42,7 +42,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
     className: "rioglyph ".concat(icon),
     style: iconStyles
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'checkbox-label'
+    className: "checkbox-label"
   }, text));
 };
 
@@ -58,7 +58,7 @@ var Checkbox = function Checkbox(props) {
       iconLabelPosition = props.iconLabelPosition,
       iconSize = props.iconSize,
       _props$id = props.id,
-      id = _props$id === void 0 ? name : _props$id,
+      id = _props$id === void 0 ? props.name : _props$id,
       indeterminate = props.indeterminate,
       inline = props.inline,
       inputRef = props.inputRef,
@@ -132,7 +132,7 @@ var Checkbox = function Checkbox(props) {
   }), /*#__PURE__*/_react.default.createElement("input", {
     id: id,
     name: name,
-    type: 'checkbox',
+    type: "checkbox",
     checked: checked,
     required: required,
     defaultChecked: defaultChecked,
@@ -147,7 +147,7 @@ var Checkbox = function Checkbox(props) {
     iconLabelPosition: iconLabelPosition,
     text: text
   }), renderDefault && /*#__PURE__*/_react.default.createElement("span", {
-    className: 'checkbox-text'
+    className: "checkbox-text"
   }, /*#__PURE__*/_react.default.createElement("span", null, text)), renderCustomContent && children);
 };
 

package/lib/components/datepicker/DatePicker.js

@@ -27,7 +27,7 @@ var _moment = _interopRequireDefault(require("moment"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["dropup", "alignRight", "onChange", "className"];
+var _excluded = ["dropup", "alignRight", "onChange", "className", "mandatory", "dateValidation"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -37,11 +37,13 @@ var isValidDate = function isValidDate(date) {
   return (0, _typeof2.default)(date) === 'object';
 };
 
-var DatePicker = function DatePicker(props, ref) {
+var DatePicker = function DatePicker(props) {
   var dropup = props.dropup,
       alignRight = props.alignRight,
       onChange = props.onChange,
       className = props.className,
+      mandatory = props.mandatory,
+      dateValidation = props.dateValidation,
       remainingProp = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -49,13 +51,17 @@ var DatePicker = function DatePicker(props, ref) {
       hasError = _useState2[0],
       setHasError = _useState2[1];
 
+  var validateDate = function validateDate(dateToValidate) {
+    return dateValidation ? dateValidation(dateToValidate) : isValidDate(dateToValidate);
+  };
+
   var handleChange = function handleChange(date) {
-    var isValid = isValidDate(date);
+    var isValid = mandatory ? validateDate(date) : true;
     setHasError(!isValid);
     onChange(date, isValid);
   };
 
-  var classes = (0, _classnames.default)('DatePicker', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
+  var classes = (0, _classnames.default)('DatePicker', 'form-group', hasError && 'has-error', dropup && 'dropup', alignRight && 'align-right', className && className);
   return /*#__PURE__*/_react.default.createElement(_reactDatetime.default, (0, _extends2.default)({}, remainingProp, {
     onChange: handleChange,
     className: classes
@@ -69,7 +75,8 @@ DatePicker.defaultProps = {
   locale: 'en-GB',
   onChange: function onChange() {},
   clearableInput: false,
-  minWidth: 0
+  minWidth: 0,
+  mandatory: true
 };
 DatePicker.propTypes = {
   className: _propTypes.default.string,
@@ -80,7 +87,9 @@ DatePicker.propTypes = {
   onChange: _propTypes.default.func,
   dropup: _propTypes.default.bool,
   minWidth: _propTypes.default.number,
-  alignRight: _propTypes.default.bool
+  alignRight: _propTypes.default.bool,
+  mandatory: _propTypes.default.bool,
+  dateValidation: _propTypes.default.func
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/components/dialog/ConfirmationDialog.js

@@ -26,13 +26,15 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
       confirmButtonText = props.confirmButtonText,
       disableConfirm = props.disableConfirm;
 
-  var footer = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-    type: 'button',
-    className: 'CancelButton btn btn-default',
+  var footer = /*#__PURE__*/_react.default.createElement("div", {
+    className: "display-flex justify-content-end btn-toolbar"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "CancelButton btn btn-default",
     onClick: onClickCancel
   }, cancelButtonText), /*#__PURE__*/_react.default.createElement("button", {
-    type: 'button',
-    className: 'ConfirmationButton btn btn-primary',
+    type: "button",
+    className: "ConfirmationButton btn btn-primary",
     onClick: onClickConfirm,
     disabled: disableConfirm
   }, confirmButtonText));
@@ -42,7 +44,7 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
     footer: footer,
     onHide: onClickCancel,
     showCloseButton: false,
-    className: 'confirmation-dialog',
+    className: "confirmation-dialog",
     disableEsc: true
   }));
 };

package/lib/components/dialog/SaveDialog.js

@@ -35,7 +35,9 @@ var SaveDialog = function SaveDialog(props) {
       onClickConfirm = props.onClickConfirm,
       confirmButtonText = props.confirmButtonText;
 
-  var footer = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+  var footer = /*#__PURE__*/_react.default.createElement("div", {
+    className: "display-flex justify-content-end btn-toolbar"
+  }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "DiscardButton btn btn-default",
     onClick: onClickDiscard