pebble-web 2.9.3 → 2.10.1

package/dist/components/typings/DateInput.d.ts

@@ -14,6 +14,9 @@ export interface DateInputProps {
     wrapperClassName?: string;
     dropDownClassName?: string;
     initiallyOpen?: boolean;
+    onOutsideClick?: (isOpen: boolean) => void;
+    controlled?: boolean;
+    isOpen?: boolean;
 }
 export interface DateInputState {
     stringInput: string;

package/dist/components/typings/Dropdown.d.ts

@@ -24,6 +24,8 @@ export interface DropdownProps {
     onOutsideClick?: (isOpen: boolean) => void;
     placement?: Placement;
     modifiers?: Modifiers;
+    controlled?: boolean;
+    isOpen?: boolean;
 }
 export interface DropdownState {
     isOpen: boolean;

package/dist/components/typings/Tooltip.d.ts

@@ -15,6 +15,7 @@ export interface TooltipProps {
         toggle: () => void;
         isOpen: boolean;
     }) => React.ReactNode;
+    popperClassName?: string;
 }
 export interface TooltipState {
     isOpen: boolean;

package/dist/pebble-web.dev.js

@@ -1119,17 +1119,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__*/React.createElement(OutsideClick, {
         className: emotion.cx(wrapperStyle$1, className),
         onOutsideClick: function onOutsideClick() {
           _this2.setState({
             isOpen: false
           });
-          if (_onOutsideClick) _onOutsideClick(isOpen);
+          if (_onOutsideClick) _onOutsideClick(_isDropDownOpen);
         },
-        disabled: !isOpen
+        disabled: !_isDropDownOpen
       }, /*#__PURE__*/React.createElement(reactPopper.Manager, null, /*#__PURE__*/React.createElement(reactPopper.Reference, null, function (_ref) {
         var ref = _ref.ref;
         return /*#__PURE__*/React.createElement("div", {
@@ -1139,17 +1140,17 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           },
           ref: ref
         }, labelComponent ? labelComponent({
-          isOpen: isOpen,
+          isOpen: _isDropDownOpen,
           toggleDropdown: _this2.toggleDropdown
         }) : /*#__PURE__*/React.createElement(DropDownButton, {
           isSelected: !!isSelected,
-          isOpen: isOpen,
+          isOpen: _isDropDownOpen,
           onClick: _this2.toggleDropdown,
           disabled: disabled,
           className: labelClassName
         }, buttonLabel));
       }), /*#__PURE__*/React.createElement(MountTransition, {
-        visible: isOpen
+        visible: _isDropDownOpen
       }, function (transitionStyles) {
         return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
           className: emotion.cx(dropDownStyle, dropDownClassName),
@@ -1176,7 +1177,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
             "data-placement": placement
           }, children({
             toggle: _this2.toggleDropdown,
-            isOpen: _this2.state.isOpen
+            isOpen: _isDropDownOpen
           }));
         }));
       })));
@@ -1569,7 +1570,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 = emotion.cx(wrapperStyle$3, wrapperClassName);
       var _dropDownClassName = emotion.cx(dropDownClassName, this.props.dropDownClassName);
       return /*#__PURE__*/React.createElement(DropDown, {
@@ -1589,7 +1593,7 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
               value: value,
               placeholder: placeholder,
               onClick: function onClick() {
-                if (disabled) return;
+                if (disabled || controlled) return;
                 toggleDropdown();
               },
               fixLabelAtTop: true
@@ -1607,7 +1611,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__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Calendar, Object.assign({
@@ -1618,6 +1625,9 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           range: false,
           onChange: function onChange(date) {
             _this2.onCalendarDateChange(date);
+            if (controlled) {
+              return;
+            }
             toggle();
           }
         })), errorMessage && /*#__PURE__*/React.createElement("div", {
@@ -1629,10 +1639,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;
@@ -4438,7 +4448,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__*/React.createElement(PebblePopper, {
         label: function label() {
           return _label({
@@ -4451,7 +4462,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         popperBackgroundColor: isError ? pebbleShared.colors.red.base : pebbleShared.colors.gray.darker,
         modifiers: modifiers,
         isOpen: this.props.isOpen || this.state.isOpen,
-        popperClassName: popperStyle$1,
+        popperClassName: emotion.cx(popperStyle$1, popperClassName),
         closeOnOutsideClick: false
       }, this.props.renderElement || this.defaultTooltip);
     }