pebble-web 2.9.3 → 2.10.1

package/dist/pebble-web.module.dev.js

@@ -1113,17 +1113,18 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           isSelected = _this$props.isSelected,
           disabled = _this$props.disabled,
           labelClassName = _this$props.labelClassName,
+          controlled = _this$props.controlled,
           _onOutsideClick = _this$props.onOutsideClick;
-      var isOpen = this.state.isOpen;
+      var _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
       return /*#__PURE__*/createElement(OutsideClick, {
         className: cx(wrapperStyle$1, className),
         onOutsideClick: function onOutsideClick() {
           _this2.setState({
             isOpen: false
           });
-          if (_onOutsideClick) _onOutsideClick(isOpen);
+          if (_onOutsideClick) _onOutsideClick(_isDropDownOpen);
         },
-        disabled: !isOpen
+        disabled: !_isDropDownOpen
       }, /*#__PURE__*/createElement(Manager, null, /*#__PURE__*/createElement(Reference, null, function (_ref) {
         var ref = _ref.ref;
         return /*#__PURE__*/createElement("div", {
@@ -1133,17 +1134,17 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           },
           ref: ref
         }, labelComponent ? labelComponent({
-          isOpen: isOpen,
+          isOpen: _isDropDownOpen,
           toggleDropdown: _this2.toggleDropdown
         }) : /*#__PURE__*/createElement(DropDownButton, {
           isSelected: !!isSelected,
-          isOpen: isOpen,
+          isOpen: _isDropDownOpen,
           onClick: _this2.toggleDropdown,
           disabled: disabled,
           className: labelClassName
         }, buttonLabel));
       }), /*#__PURE__*/createElement(MountTransition, {
-        visible: isOpen
+        visible: _isDropDownOpen
       }, function (transitionStyles) {
         return /*#__PURE__*/createElement(animated.div, {
           className: cx(dropDownStyle, dropDownClassName),
@@ -1170,7 +1171,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
             "data-placement": placement
           }, children({
             toggle: _this2.toggleDropdown,
-            isOpen: _this2.state.isOpen
+            isOpen: _isDropDownOpen
           }));
         }));
       })));
@@ -1563,7 +1564,10 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           errorMessage = _this$props.errorMessage,
           placement = _this$props.placement,
           wrapperClassName = _this$props.wrapperClassName,
-          initiallyOpen = _this$props.initiallyOpen;
+          initiallyOpen = _this$props.initiallyOpen,
+          onOutsideClick = _this$props.onOutsideClick,
+          controlled = _this$props.controlled,
+          isOpen = _this$props.isOpen;
       var _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
       var _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
       return /*#__PURE__*/createElement(DropDown, {
@@ -1583,7 +1587,7 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
               value: value,
               placeholder: placeholder,
               onClick: function onClick() {
-                if (disabled) return;
+                if (disabled || controlled) return;
                 toggleDropdown();
               },
               fixLabelAtTop: true
@@ -1601,7 +1605,10 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
         className: _wrapperClassName,
         placement: placement,
         modifiers: modifiers,
-        initiallyOpen: initiallyOpen
+        initiallyOpen: initiallyOpen,
+        onOutsideClick: onOutsideClick,
+        controlled: controlled,
+        isOpen: isOpen
       }, function (_ref3) {
         var toggle = _ref3.toggle;
         return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Calendar, Object.assign({
@@ -1612,6 +1619,9 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           range: false,
           onChange: function onChange(date) {
             _this2.onCalendarDateChange(date);
+            if (controlled) {
+              return;
+            }
             toggle();
           }
         })), errorMessage && /*#__PURE__*/createElement("div", {
@@ -1623,10 +1633,10 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
       var newState = null;
-      if (props.value && props.value !== state.propsValue) {
+      if (props.value !== state.propsValue) {
         newState = {
           propsValue: props.value,
-          stringInput: props.value && format(props.value, "dd/MM/yyyy") || ""
+          stringInput: props.value ? format(props.value, "dd/MM/yyyy") : ""
         };
       }
       return newState;
@@ -4432,7 +4442,8 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           placement = _this$props.placement,
           _label = _this$props.label,
           modifiers = _this$props.modifiers,
-          isError = _this$props.isError;
+          isError = _this$props.isError,
+          popperClassName = _this$props.popperClassName;
       return /*#__PURE__*/createElement(PebblePopper, {
         label: function label() {
           return _label({
@@ -4445,7 +4456,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         popperBackgroundColor: isError ? colors.red.base : colors.gray.darker,
         modifiers: modifiers,
         isOpen: this.props.isOpen || this.state.isOpen,
-        popperClassName: popperStyle$1,
+        popperClassName: cx(popperStyle$1, popperClassName),
         closeOnOutsideClick: false
       }, this.props.renderElement || this.defaultTooltip);
     }