pebble-web 2.10.0 → 2.11.0

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/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", {