pebble-web 2.9.1 → 2.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.9.1",
+  "version": "2.9.3",
   "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.1"
+    "pebble-shared": "^2.9.3"
   },
   "greenkeeper": {
     "ignore": [
       "rheostat"
     ]
   },
-  "gitHead": "f86836610e195ae5f5b8957b30a132d5dd1cbe2f"
+  "gitHead": "4af3ab593a194d8eeb9540671cb99fcf4bd132a1"
 }

package/src/components/DateInput.tsx

@@ -114,7 +114,7 @@ export default class DateInput extends React.PureComponent<
                 onChange={noop}
                 type={"tel"}
                 value={value}
-                placeholder={`${placeholder} DD/MM/YYYY`}
+                placeholder={placeholder}
                 onClick={() => {
                   if (disabled) return;
                   toggleDropdown();

package/src/components/Input.tsx

@@ -68,6 +68,8 @@ class Input extends React.PureComponent<InputProps, InputState> {
       placeholder,
       className,
       inputClassName,
+      highlightClassName,
+      loadingClassName,
       fixLabelAtTop,
       value,
       readOnly,
@@ -103,12 +105,16 @@ class Input extends React.PureComponent<InputProps, InputState> {
       value: value || ""
     };
 
-    const highlightClassName = cx(highlightStyle, {
-      _pebble_input_highlight_focused: !!isFocused,
-      _pebble_input_highlight_state: !!errorMessage || !!successMessage,
-      _pebble_input_highlight_read_only: !!readOnly,
-      _pebble_input_highlight_disabled: !!disabled
-    });
+    const _highlightClassName = cx(
+      highlightStyle,
+      {
+        _pebble_input_highlight_focused: !!isFocused,
+        _pebble_input_highlight_state: !!errorMessage || !!successMessage,
+        _pebble_input_highlight_read_only: !!readOnly,
+        _pebble_input_highlight_disabled: !!disabled
+      },
+      highlightClassName
+    );
 
     const labelClassName = cx(labelStyle, {
       _pebble_input_label_focused: !!(isFocused || !!value || fixLabelAtTop)
@@ -122,6 +128,8 @@ class Input extends React.PureComponent<InputProps, InputState> {
       className
     );
 
+    const _loadingStyle = cx(loadingStyle, loadingClassName);
+
     return (
       <div
         className={_wrapperStyle}
@@ -135,13 +143,17 @@ class Input extends React.PureComponent<InputProps, InputState> {
           <input type={type} {..._inputProps} {...this.props.inputProps} />
         )}
 
-        <label className={labelClassName}>
-          {placeholder}
-          {required && <span style={{ color: colors.red.base }}>&nbsp;*</span>}
-        </label>
+        {!!placeholder && (
+          <label className={labelClassName}>
+            {placeholder}
+            {required && (
+              <span style={{ color: colors.red.base }}>&nbsp;*</span>
+            )}
+          </label>
+        )}
 
         <div
-          className={highlightClassName}
+          className={_highlightClassName}
           style={{
             backgroundColor: getColor(errorMessage, successMessage, true)
           }}
@@ -151,7 +163,7 @@ class Input extends React.PureComponent<InputProps, InputState> {
           <Loader
             color={colors.violet.base}
             scale={0.6}
-            className={loadingStyle}
+            className={_loadingStyle}
           />
         )}
 

package/src/components/Select.tsx

@@ -27,6 +27,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
     errorMessage,
     value,
     dropdownClassName,
+    arrowClassName,
     inputProps,
     fullWidthDropdown,
     onDropdownToggle = noop,
@@ -48,9 +49,14 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
         })}
         onOutsideClick={isOpen => onDropdownToggle(isOpen)}
         labelComponent={({ toggleDropdown, isOpen }) => {
-          const chevron = cx(chevronStyle, "pi", "pi-arrow-drop-down", {
-            __pebble__select__open: isOpen
-          });
+          const chevron = cx(
+            chevronStyle,
+            "pi pi-arrow-drop-down",
+            {
+              __pebble__select__open: isOpen
+            },
+            arrowClassName
+          );
           return (
             <div
               className={cx(inputWrapper, disabled && disabledSelect)}

package/src/components/Sidebar.tsx

@@ -80,7 +80,7 @@ class SideBar extends React.PureComponent<SidebarProps> {
                 <Ink />
               </div>
 
-              <div style={{ overflowY: "scroll", height: "100%" }}>
+              <div style={{ overflowY: "auto", height: "100%" }}>
                 {children}
               </div>
             </animated.div>

package/src/components/__tests__/__snapshots__/phonenumberinput.test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component: Select default snapshot 1`] = `
-.emotion-12 {
+.emotion-10 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -16,11 +16,11 @@ exports[`Component: Select default snapshot 1`] = `
   height: 68px;
 }
 
-.emotion-12._pebble_input_wrapper_textarea {
+.emotion-10._pebble_input_wrapper_textarea {
   height: 110px;
 }
 
-.emotion-9 {
+.emotion-8 {
   outline: 0;
   border: 0;
   border-bottom: 1px solid #EDEDED;
@@ -36,43 +36,43 @@ exports[`Component: Select default snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-9:disabled {
+.emotion-8:disabled {
   background-color: #ffffff;
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-8::-webkit-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-8::-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9:-ms-input-placeholder {
+.emotion-8:-ms-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9:-moz-placeholder {
+.emotion-8:-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9::-webkit-input-placeholder {
+.emotion-8::-webkit-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9::-moz-placeholder {
+.emotion-8::-moz-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9:-ms-input-placeholder {
+.emotion-8:-ms-input-placeholder {
   color: #E0E0E0;
 }
 
-.emotion-9::placeholder {
+.emotion-8::placeholder {
   color: #E0E0E0;
 }
 
-.emotion-3 {
+.emotion-2 {
   height: 2px;
   background-color: #6161FF;
   margin-top: -2px;
@@ -83,43 +83,21 @@ exports[`Component: Select default snapshot 1`] = `
   z-index: 9;
 }
 
-.emotion-3._pebble_input_highlight_state,
-.emotion-3._pebble_input_highlight_focused {
+.emotion-2._pebble_input_highlight_state,
+.emotion-2._pebble_input_highlight_focused {
   width: 100%;
 }
 
-.emotion-2 {
-  color: #9FA6B0;
-  font-size: 14px;
-  line-height: 12px;
-  position: absolute;
-  -webkit-transition: all 0.3s cubic-bezier(.64,.09,.08,1);
-  transition: all 0.3s cubic-bezier(.64,.09,.08,1);
-  -webkit-transform: translate(0,24px);
-  -ms-transform: translate(0,24px);
-  transform: translate(0,24px);
-  pointer-events: none;
-}
-
-.emotion-2._pebble_input_label_focused {
-  font-size: 12px;
-  line-height: 10px;
-  -webkit-transform: translate(0,0);
-  -ms-transform: translate(0,0);
-  transform: translate(0,0);
-  color: #6B7785;
-}
-
-.emotion-7 {
+.emotion-6 {
   position: relative;
 }
 
-.emotion-6 {
+.emotion-5 {
   cursor: pointer;
   position: relative;
 }
 
-.emotion-5 {
+.emotion-4 {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -130,13 +108,13 @@ exports[`Component: Select default snapshot 1`] = `
   font-size: 10px;
 }
 
-.emotion-5.__pebble__select__open {
+.emotion-4.__pebble__select__open {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -166,7 +144,7 @@ exports[`Component: Select default snapshot 1`] = `
   color: #6B7785;
 }
 
-.emotion-8 {
+.emotion-7 {
   margin-bottom: 20px;
   width: 80px;
   margin-bottom: 0;
@@ -227,7 +205,7 @@ exports[`Component: Select default snapshot 1`] = `
   color: #E0E0E0;
 }
 
-.emotion-4 {
+.emotion-3 {
   position: relative;
   display: -webkit-box;
   display: -webkit-flex;
@@ -244,12 +222,12 @@ exports[`Component: Select default snapshot 1`] = `
   margin-bottom: 0;
 }
 
-.emotion-4._pebble_input_wrapper_textarea {
+.emotion-3._pebble_input_wrapper_textarea {
   height: 110px;
 }
 
 <div
-  className="emotion-13"
+  className="emotion-11"
 >
   <label
     className="_pebble_input_label_focused emotion-0"
@@ -257,10 +235,10 @@ exports[`Component: Select default snapshot 1`] = `
     Phone No.
   </label>
   <div
-    className="emotion-8"
+    className="emotion-7"
   >
     <div
-      className="emotion-7"
+      className="emotion-6"
     >
       <div
         style={
@@ -271,11 +249,11 @@ exports[`Component: Select default snapshot 1`] = `
         }
       >
         <div
-          className="emotion-6"
+          className="emotion-5"
           onClick={[Function]}
         >
           <div
-            className="emotion-4"
+            className="emotion-3"
             onBlur={[Function]}
             onFocus={[Function]}
           >
@@ -286,13 +264,8 @@ exports[`Component: Select default snapshot 1`] = `
               readOnly={true}
               value="+1"
             />
-            <label
-              className="emotion-2 _pebble_input_label_focused"
-            >
-              
-            </label>
             <div
-              className="emotion-3 _pebble_input_highlight_read_only"
+              className="emotion-2 _pebble_input_highlight_read_only"
               style={
                 Object {
                   "backgroundColor": "#6161FF",
@@ -302,31 +275,26 @@ exports[`Component: Select default snapshot 1`] = `
             
           </div>
           <i
-            className="emotion-5 pi pi-arrow-drop-down"
+            className="emotion-4 pi pi-arrow-drop-down"
           />
         </div>
       </div>
     </div>
   </div>
   <div
-    className="emotion-12"
+    className="emotion-10"
     onBlur={[Function]}
     onFocus={[Function]}
   >
     <input
-      className="emotion-9"
+      className="emotion-8"
       id="phone-test-input-test"
       onChange={[Function]}
       readOnly={false}
       value=""
     />
-    <label
-      className="emotion-2"
-    >
-      
-    </label>
     <div
-      className="emotion-3"
+      className="emotion-2"
       style={
         Object {
           "backgroundColor": "#6161FF",

package/src/components/styles/Modal.styles.ts

@@ -7,7 +7,7 @@ export const modalContainer = css({
   bottom: 0,
   left: 0,
   backgroundColor: "rgba(0,0,0,0.4)",
-  overflowY: "scroll",
+  overflowY: "auto",
   WebkitOverflowScrolling: "touch",
   zIndex: 99998
 });

package/src/components/typings/Input.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 
-interface CommonInputProps {
-  placeholder: string;
+export interface CommonInputProps {
+  placeholder?: string;
   onChange: (text: string) => void;
   value?: string | number;
   className?: string;
@@ -9,6 +9,8 @@ interface CommonInputProps {
   errorMessage?: string;
   fixLabelAtTop?: boolean;
   inputClassName?: string;
+  highlightClassName?: string;
+  loadingClassName?: string;
   loading?: boolean;
   message?: string;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -17,15 +19,24 @@ interface CommonInputProps {
   successMessage?: string;
 }
 
+export type InputType =
+  | "text"
+  | "date"
+  | "password"
+  | "number"
+  | "email"
+  | "tel";
+
 export interface SimpleInputProps extends CommonInputProps {
   inputProps?: React.InputHTMLAttributes<HTMLInputElement> &
     React.RefAttributes<HTMLInputElement>;
   textArea?: false;
-  type?: "text" | "date" | "password" | "number" | "email" | "tel";
+  type?: InputType;
 }
 
-interface TextAreaInputProps extends CommonInputProps {
-  inputProps?: React.InputHTMLAttributes<HTMLTextAreaElement>;
+export interface TextAreaInputProps extends CommonInputProps {
+  inputProps?: React.InputHTMLAttributes<HTMLTextAreaElement> &
+    React.RefAttributes<HTMLTextAreaElement>;
   textArea: true;
   type?: undefined;
 }

package/src/components/typings/Select.ts

@@ -4,7 +4,7 @@ import { Extras } from "./OptionGroup";
 import { Omit } from "utility-types";
 import { Placement, Modifiers } from "popper.js";
 
-interface CommonSelectProps<OptionType> {
+export interface CommonSelectProps<OptionType> {
   className?: string;
   placeholder: string;
   required?: boolean;
@@ -14,6 +14,7 @@ interface CommonSelectProps<OptionType> {
   searchBox?: boolean;
   searchBoxProps?: Omit<SearchProps, "type">;
   dropdownClassName?: string;
+  arrowClassName?: string;
   inputProps?: Omit<SimpleInputProps, "onChange" | "value" | "placeholder">;
   fullWidthDropdown?: boolean;
   onDropdownToggle?: (isOpen: boolean) => void;