pebble-web 2.9.3 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.9.3",
+  "version": "2.10.1",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -44,12 +44,12 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.9.3"
+    "pebble-shared": "^2.10.1"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "4af3ab593a194d8eeb9540671cb99fcf4bd132a1"
+  "gitHead": "89ca1fe1ea315fc30c22c3e58177d6a4a2860580"
 }

package/src/components/DateInput.tsx

@@ -53,10 +53,10 @@ export default class DateInput extends React.PureComponent<
     state: DateInputState
   ): Partial<DateInputState> | null {
     let newState: Partial<DateInputState> | null = 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;
@@ -91,7 +91,10 @@ export default class DateInput extends React.PureComponent<
       errorMessage,
       placement,
       wrapperClassName,
-      initiallyOpen
+      initiallyOpen,
+      onOutsideClick,
+      controlled,
+      isOpen
     } = this.props;
 
     const _wrapperClassName = cx(wrapperStyle, wrapperClassName);
@@ -116,7 +119,7 @@ export default class DateInput extends React.PureComponent<
                 value={value}
                 placeholder={placeholder}
                 onClick={() => {
-                  if (disabled) return;
+                  if (disabled || controlled) return;
                   toggleDropdown();
                 }}
                 fixLabelAtTop
@@ -136,6 +139,9 @@ export default class DateInput extends React.PureComponent<
         placement={placement}
         modifiers={modifiers}
         initiallyOpen={initiallyOpen}
+        onOutsideClick={onOutsideClick}
+        controlled={controlled}
+        isOpen={isOpen}
       >
         {({ toggle }) => (
           <>
@@ -147,6 +153,9 @@ export default class DateInput extends React.PureComponent<
               range={false}
               onChange={date => {
                 this.onCalendarDateChange(date);
+                if (controlled) {
+                  return;
+                }
                 toggle();
               }}
             />

package/src/components/DropDown.tsx

@@ -47,9 +47,13 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
       isSelected,
       disabled,
       labelClassName,
+      controlled,
       onOutsideClick
     } = this.props;
-    const { isOpen } = this.state;
+
+    const _isDropDownOpen = controlled
+      ? !!this.props.isOpen
+      : this.state.isOpen;
 
     return (
       <OutsideClick
@@ -58,9 +62,9 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
           this.setState({
             isOpen: false
           });
-          if (onOutsideClick) onOutsideClick(isOpen);
+          if (onOutsideClick) onOutsideClick(_isDropDownOpen);
         }}
-        disabled={!isOpen}
+        disabled={!_isDropDownOpen}
       >
         <Manager>
           <Reference>
@@ -68,13 +72,13 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
               <div style={{ display: "inline-block", width: "100%" }} ref={ref}>
                 {labelComponent ? (
                   labelComponent({
-                    isOpen,
+                    isOpen: _isDropDownOpen,
                     toggleDropdown: this.toggleDropdown
                   })
                 ) : (
                   <DropDownButton
                     isSelected={!!isSelected}
-                    isOpen={isOpen}
+                    isOpen={_isDropDownOpen}
                     onClick={this.toggleDropdown}
                     disabled={disabled}
                     className={labelClassName}
@@ -87,7 +91,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
           </Reference>
 
           {/* TODO: Add native flag. */}
-          <MountTransition visible={isOpen}>
+          <MountTransition visible={_isDropDownOpen}>
             {transitionStyles => (
               <animated.div
                 className={cx(dropDownStyle, dropDownClassName)}
@@ -99,10 +103,12 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       ...style,
                       ...transitionStyles,
                       backgroundColor: colors.white.base,
-                      transform: `${style.transform ||
-                        ""} ${transitionStyles.transform || ""}`,
-                      transformOrigin: `${arrowProps.style.left ||
-                        0}px ${arrowProps.style.top || 0}px`,
+                      transform: `${style.transform || ""} ${
+                        transitionStyles.transform || ""
+                      }`,
+                      transformOrigin: `${arrowProps.style.left || 0}px ${
+                        arrowProps.style.top || 0
+                      }px`,
                       padding
                     };
 
@@ -115,7 +121,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                       >
                         {children({
                           toggle: this.toggleDropdown,
-                          isOpen: this.state.isOpen
+                          isOpen: _isDropDownOpen
                         })}
                       </div>
                     );

package/src/components/Popper.tsx

@@ -71,10 +71,12 @@ export default class PebblePopper extends React.PureComponent<
                     ...style,
                     ...transitionStyles,
                     backgroundColor: popperBackgroundColor,
-                    transform: `${style.transform ||
-                      ""} ${transitionStyles.transform || ""}`,
-                    transformOrigin: `${arrowProps.style.left ||
-                      0}px ${arrowProps.style.top || 0}px`
+                    transform: `${style.transform || ""} ${
+                      transitionStyles.transform || ""
+                    }`,
+                    transformOrigin: `${arrowProps.style.left || 0}px ${
+                      arrowProps.style.top || 0
+                    }px`
                   };
 
                   return (

package/src/components/Tooltip.tsx

@@ -3,6 +3,7 @@ import Popper from "./Popper";
 import { TooltipProps, TooltipState } from "./typings/Tooltip";
 import { colors } from "pebble-shared";
 import { popperStyle, textStyle } from "./styles/Tooltip.styles";
+import { cx } from "emotion";
 
 class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
   state = {
@@ -27,7 +28,13 @@ class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
   };
 
   render() {
-    const { placement, label, modifiers, isError } = this.props;
+    const {
+      placement,
+      label,
+      modifiers,
+      isError,
+      popperClassName
+    } = this.props;
 
     return (
       <Popper
@@ -42,7 +49,7 @@ class Tooltip extends React.PureComponent<TooltipProps, TooltipState> {
         popperBackgroundColor={isError ? colors.red.base : colors.gray.darker}
         modifiers={modifiers}
         isOpen={this.props.isOpen || this.state.isOpen}
-        popperClassName={popperStyle}
+        popperClassName={cx(popperStyle, popperClassName)}
         closeOnOutsideClick={false}
       >
         {this.props.renderElement || this.defaultTooltip}

package/src/components/typings/DateInput.ts

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

package/src/components/typings/Dropdown.ts

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

package/src/components/typings/Tooltip.ts

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