pebble-web 2.9.3 → 2.10.1

package/dist/pebble-web.es.js

@@ -1030,20 +1030,19 @@ class DropDown extends PureComponent {
       isSelected,
       disabled,
       labelClassName,
+      controlled,
       onOutsideClick
     } = this.props;
-    const {
-      isOpen
-    } = this.state;
+    const _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
     return /*#__PURE__*/createElement(OutsideClick, {
       className: cx(wrapperStyle$1, className),
       onOutsideClick: () => {
         this.setState({
           isOpen: false
         });
-        if (onOutsideClick) onOutsideClick(isOpen);
+        if (onOutsideClick) onOutsideClick(_isDropDownOpen);
       },
-      disabled: !isOpen
+      disabled: !_isDropDownOpen
     }, /*#__PURE__*/createElement(Manager, null, /*#__PURE__*/createElement(Reference, null, ({
       ref
     }) => /*#__PURE__*/createElement("div", {
@@ -1053,16 +1052,16 @@ class DropDown extends PureComponent {
       },
       ref: ref
     }, labelComponent ? labelComponent({
-      isOpen,
+      isOpen: _isDropDownOpen,
       toggleDropdown: this.toggleDropdown
     }) : /*#__PURE__*/createElement(DropDownButton, {
       isSelected: !!isSelected,
-      isOpen: isOpen,
+      isOpen: _isDropDownOpen,
       onClick: this.toggleDropdown,
       disabled: disabled,
       className: labelClassName
     }, buttonLabel))), /*#__PURE__*/createElement(MountTransition, {
-      visible: isOpen
+      visible: _isDropDownOpen
     }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
       className: cx(dropDownStyle, dropDownClassName),
       style: {
@@ -1091,7 +1090,7 @@ class DropDown extends PureComponent {
         "data-placement": placement
       }, children({
         toggle: this.toggleDropdown,
-        isOpen: this.state.isOpen
+        isOpen: _isDropDownOpen
       }));
     })))));
   }
@@ -1420,10 +1419,10 @@ class DateInput extends PureComponent {
   }
   static getDerivedStateFromProps(props, state) {
     let 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;
@@ -1438,7 +1437,10 @@ class DateInput extends PureComponent {
       errorMessage,
       placement,
       wrapperClassName,
-      initiallyOpen
+      initiallyOpen,
+      onOutsideClick,
+      controlled,
+      isOpen
     } = this.props;
     const _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
     const _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
@@ -1459,7 +1461,7 @@ class DateInput extends PureComponent {
         value: value,
         placeholder: placeholder,
         onClick: () => {
-          if (disabled) return;
+          if (disabled || controlled) return;
           toggleDropdown();
         },
         fixLabelAtTop: true
@@ -1475,7 +1477,10 @@ class DateInput extends PureComponent {
       className: _wrapperClassName,
       placement: placement,
       modifiers: modifiers,
-      initiallyOpen: initiallyOpen
+      initiallyOpen: initiallyOpen,
+      onOutsideClick: onOutsideClick,
+      controlled: controlled,
+      isOpen: isOpen
     }, ({
       toggle
     }) => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Calendar, Object.assign({
@@ -1486,6 +1491,9 @@ class DateInput extends PureComponent {
       range: false,
       onChange: date => {
         this.onCalendarDateChange(date);
+        if (controlled) {
+          return;
+        }
         toggle();
       }
     })), errorMessage && /*#__PURE__*/createElement("div", {
@@ -3989,7 +3997,8 @@ class Tooltip extends PureComponent {
       placement,
       label,
       modifiers,
-      isError
+      isError,
+      popperClassName
     } = this.props;
     return /*#__PURE__*/createElement(PebblePopper, {
       label: () => label({
@@ -4001,7 +4010,7 @@ class Tooltip extends 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);
   }