Merge branch 'dev' of github.com:react-toolbox/react-toolbox into dev

components/button/BrowseButton.js

@@ -0,0 +1,110 @@
+import React, { Component, PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { BUTTON } from '../identifiers.js';
+import InjectFontIcon from '../font_icon/FontIcon.js';
+import rippleFactory from '../ripple/Ripple.js';
+
+const factory = (ripple, FontIcon) => {
+  class SimpleBrowseButton extends Component {
+    static propTypes = {
+      accent: PropTypes.bool,
+      children: PropTypes.node,
+      className: PropTypes.string,
+      disabled: PropTypes.bool,
+      flat: PropTypes.bool,
+      floating: PropTypes.bool,
+      icon: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
+      inverse: PropTypes.bool,
+      label: PropTypes.string,
+      mini: PropTypes.bool,
+      neutral: PropTypes.bool,
+      onChange: PropTypes.func,
+      onMouseLeave: PropTypes.func,
+      onMouseUp: PropTypes.func,
+      primary: PropTypes.bool,
+      raised: PropTypes.bool,
+      theme: PropTypes.shape({
+        accent: PropTypes.string,
+        button: PropTypes.string,
+        flat: PropTypes.string,
+        floating: PropTypes.string,
+        icon: PropTypes.string,
+        inverse: PropTypes.string,
+        mini: PropTypes.string,
+        neutral: PropTypes.string,
+        primary: PropTypes.string,
+        raised: PropTypes.string,
+        rippleWrapper: PropTypes.string,
+        toggle: PropTypes.string
+      }),
+      type: PropTypes.string
+    };
+
+    static defaultProps = {
+      accent: false,
+      className: '',
+      flat: false,
+      floating: false,
+      mini: false,
+      neutral: true,
+      primary: false,
+      raised: false
+    };
+
+    handleMouseUp = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseUp) this.props.onMouseUp(event);
+    };
+
+    handleMouseLeave = (event) => {
+      this.refs.label.blur();
+      if (this.props.onMouseLeave) this.props.onMouseLeave(event);
+    };
+
+    handleFileChange = (event) => {
+      if (this.props.onChange) this.props.onChange(event);
+    };
+
+    render () {
+        const { accent, children, className, flat, floating, icon,
+            inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
+        const element = 'label';
+        const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        const classes = classnames(theme.button, [theme[shape]], {
+          [theme[level]]: neutral,
+          [theme.mini]: mini,
+          [theme.inverse]: inverse
+        }, className);
+
+        const props = {
+          ...others,
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        };
+
+        return React.createElement(element, props,
+          icon ? <FontIcon className={theme.icon} value={icon}/> : null,
+          <span>{label}</span>,
+          <input className={classes} type="file" onChange={this.handleFileChange}/>,
+          children
+        );
+    }
+  }
+
+  return ripple(SimpleBrowseButton);
+};
+
+const BrowseButton = factory(rippleFactory({ centered: false }), InjectFontIcon);
+export default themr(BUTTON)(BrowseButton);
+export { factory as browseButtonFactory };
+export { BrowseButton };

components/button/index.d.ts

@@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
 }
 
 export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface BrowseButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }

components/button/index.js

@@ -1,6 +1,7 @@
 import { BUTTON } from '../identifiers.js';
 import { themr } from 'react-css-themr';
 import { buttonFactory } from './Button.js';
+import { browseButtonFactory } from './BrowseButton.js';
 import { iconButtonFactory } from './IconButton.js';
 import FontIcon from '../font_icon/FontIcon.js';
 import themedRippleFactory from '../ripple';
@@ -8,9 +9,12 @@ import theme from './theme.scss';
 
 const Button = buttonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const IconButton = iconButtonFactory(themedRippleFactory({centered: true}), FontIcon);
+const BrowseButton = browseButtonFactory(themedRippleFactory({ centered: false }), FontIcon);
 const ThemedButton = themr(BUTTON, theme)(Button);
 const ThemedIconButton = themr(BUTTON, theme)(IconButton);
+const ThemedBrowseButton = themr(BUTTON, theme)(BrowseButton);
 
 export default ThemedButton;
 export { ThemedButton as Button };
 export { ThemedIconButton as IconButton };
+export { ThemedBrowseButton as BrowseButton };

components/button/theme.scss

@@ -6,6 +6,17 @@
 
 .button {
   position: relative;
+
+  > input {
+    position: absolute;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
 }
 
 %button {

components/card/theme.scss

@@ -27,7 +27,6 @@
   background-size: cover;
   &.wide, &.square {
     width: 100%;
-    height: 0;
     .content {
       position: absolute;
       height: 100%;
@@ -36,10 +35,15 @@
       max-width: 100%;
     }
   }
-  &.wide {
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
     padding-top: 56.25%;
   }
-  &.square {
+  &.square::after {
     padding-top: 100%;
   }
   .content {

components/date_picker/CalendarDay.js

@@ -20,8 +20,9 @@ class Day extends Component {
   dayStyle () {
     if (this.props.day === 1) {
       const e = (this.props.sundayFirstDayOfWeek) ? 0 : 1;
+      const firstDay = time.getFirstWeekDay(this.props.viewDate) - e;
       return {
-        marginLeft: `${(time.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7}%`
+        marginLeft: `${ (firstDay >= 0 ? firstDay : 6) * 100 / 7 }%`
       };
     }
   }

components/date_picker/DatePicker.js

@@ -16,6 +16,7 @@ const factory = (Input, DatePickerDialog) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       icon: PropTypes.oneOfType([
@@ -32,6 +33,7 @@ const factory = (Input, DatePickerDialog) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onClick: PropTypes.func,
       onDismiss: PropTypes.func,
@@ -100,8 +102,8 @@ const factory = (Input, DatePickerDialog) => {
 
     render () {
       const { active, // eslint-disable-line
-        autoOk, inputClassName, inputFormat, locale, maxDate, minDate,
-        onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
+        autoOk, cancelLabel, inputClassName, inputFormat, locale, maxDate, minDate,
+        okLabel, onEscKeyDown, onOverlayClick, readonly, sundayFirstDayOfWeek, value,
         onDismiss, ...others } = this.props;
       const finalInputFormat = inputFormat || time.formatDate;
       const date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -127,12 +129,14 @@ const factory = (Input, DatePickerDialog) => {
           <DatePickerDialog
             active={this.state.active}
             autoOk={autoOk}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             locale={locale}
             maxDate={maxDate}
             minDate={minDate}
             name={this.props.name}
             onDismiss={onDismiss || this.handleDismiss}
+            okLabel={okLabel}
             onEscKeyDown={onEscKeyDown || this.handleDismiss}
             onOverlayClick={onOverlayClick || this.handleDismiss}
             onSelect={this.handleSelect}

components/date_picker/DatePickerDialog.js

@@ -7,6 +7,7 @@ const factory = (Dialog, Calendar) => {
     static propTypes = {
       active: PropTypes.bool,
       autoOk: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       locale: React.PropTypes.oneOfType([
         React.PropTypes.string,
@@ -15,6 +16,7 @@ const factory = (Dialog, Calendar) => {
       maxDate: PropTypes.object,
       minDate: PropTypes.object,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -35,7 +37,9 @@ const factory = (Dialog, Calendar) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       className: '',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -82,8 +86,8 @@ const factory = (Dialog, Calendar) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     render () {

components/dropdown/Dropdown.js

@@ -20,6 +20,7 @@ const factory = (Input) => {
       onChange: PropTypes.func,
       onClick: PropTypes.func,
       onFocus: PropTypes.func,
+      required: PropTypes.bool,
       source: PropTypes.array.isRequired,
       template: PropTypes.func,
       theme: PropTypes.shape({
@@ -30,6 +31,7 @@ const factory = (Input) => {
         errored: PropTypes.string,
         field: PropTypes.string,
         label: PropTypes.string,
+        required: PropTypes.bool,
         selected: PropTypes.string,
         templateValue: PropTypes.string,
         up: PropTypes.string,
@@ -46,7 +48,8 @@ const factory = (Input) => {
       auto: true,
       className: '',
       allowBlank: true,
-      disabled: false
+      disabled: false,
+      required: false
     };
 
     state = {
@@ -118,7 +121,8 @@ const factory = (Input) => {
       const { theme } = this.props;
       const className = classnames(theme.field, {
         [theme.errored]: this.props.error,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       });
 
       return (
@@ -126,7 +130,12 @@ const factory = (Input) => {
           <div className={`${theme.templateValue} ${theme.value}`}>
             {this.props.template(selected)}
           </div>
-          {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
+          {this.props.label
+            ? <label className={theme.label}>
+                {this.props.label}
+                {this.props.required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
           {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
         </div>
       );
@@ -143,12 +152,13 @@ const factory = (Input) => {
     };
 
     render () {
-      const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
+      const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
         [theme.active]: this.state.active,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       }, this.props.className);
 
       return (
@@ -157,6 +167,7 @@ const factory = (Input) => {
             {...others}
             className={theme.value}
             onClick={this.handleClick}
+            required={this.props.required}
             readOnly
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}

components/dropdown/readme.md

@@ -51,6 +51,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 | `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
 | `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
 | `value`      | `String`   |         | Default value using JSON data.|
+| `required`   | `Boolean`  | `false` | If true, the dropdown has a required attribute.|
 
 ## Theming
 

components/dropdown/theme.scss

@@ -69,6 +69,9 @@
     > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -96,6 +99,9 @@
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
 }
 
 .error {

components/layout/Panel.js

@@ -3,13 +3,13 @@ import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { LAYOUT } from '../identifiers.js';
 
-const Panel = ({ children, className, scrollY, theme }) => {
+const Panel = ({ children, className, onScroll, scrollY, theme }) => {
   const _className = classnames(theme.panel, {
     [theme.scrollY]: scrollY
   }, className);
 
   return (
-    <div data-react-toolbox='panel' className={_className}>
+    <div data-react-toolbox='panel' onScroll={onScroll} className={_className}>
       {children}
     </div>
   );
@@ -18,6 +18,7 @@ const Panel = ({ children, className, scrollY, theme }) => {
 Panel.propTypes = {
   children: PropTypes.any,
   className: PropTypes.string,
+  onScroll: PropTypes.func,
   scrollY: PropTypes.bool,
   theme: PropTypes.shape({
     panel: PropTypes.string,

components/layout/readme.md

@@ -148,6 +148,7 @@ The `Panel` is the main content area within a `Layout`.  It is a full-height fle
 ### Properties
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
+| `onScroll` | `Function` | | Callback function to be invoked when the component scrolls. |
 | `scrollY` | `bool` | `false` | If true, the panel will vertically scroll all content. |
 | `className` | `string` |  | Additional class(es) for custom styling. |
 

components/overlay/Overlay.js

@@ -26,7 +26,7 @@ class Overlay extends Component {
 
   componentDidMount () {
     if (this.props.active) {
-      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      document.body.addEventListener('keydown', this.handleEscKey);
       document.body.style.overflow = 'hidden';
     }
   }
@@ -37,20 +37,17 @@ class Overlay extends Component {
   }
 
   componentDidUpdate () {
-    if (this.props.active && !this.escKeyListener) {
-      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    if (this.props.active) {
+      document.body.addEventListener('keydown', this.handleEscKey);
     }
   }
 
   componentWillUnmount () {
     if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-    if (this.escKeyListener) {
-      document.body.removeEventListener('keydown', this.handleEscKey);
-      this.escKeyListener = null;
-    }
+    document.body.removeEventListener('keydown', this.handleEscKey);
   }
 
-  handleEscKey (e) {
+  handleEscKey = (e) => {
     if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
       this.props.onEscKeyDown(e);
     }

components/snackbar/Snackbar.js

@@ -12,12 +12,16 @@ const factory = (Overlay, Button) => {
     static propTypes = {
       action: PropTypes.string,
       active: PropTypes.bool,
+      children: PropTypes.node,
       className: PropTypes.string,
       icon: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.element
       ]),
-      label: PropTypes.string,
+      label: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.element
+      ]),
       onClick: PropTypes.func,
       onTimeout: PropTypes.func,
       theme: PropTypes.shape({
@@ -49,7 +53,7 @@ const factory = (Overlay, Button) => {
     }
 
     render () {
-      const {action, active, icon, label, onClick, theme, type } = this.props;
+      const {action, active, children, icon, label, onClick, theme, type } = this.props;
       const className = classnames([theme.snackbar, theme[type]], {
         [theme.active]: active
       }, this.props.className);
@@ -58,7 +62,10 @@ const factory = (Overlay, Button) => {
         <Overlay invisible>
           <div data-react-toolbox='snackbar' className={className}>
             {icon ? <FontIcon value={icon} className={theme.icon} /> : null}
-            <span className={theme.label}>{label}</span>
+            <span className={theme.label}>
+              {label}
+              {children}
+            </span>
             {action ? <Button className={theme.button} label={action} onClick={onClick}/> : null}
           </div>
         </Overlay>

components/snackbar/readme.md

@@ -41,9 +41,10 @@ This component can be styled by context providing a theme with the key `RTSnackb
 |:-----|:-----|:-----|:-----|
 | `action`      | `String`                |               | Label for the action component inside the Snackbar.|
 | `active`      | `Boolean`               |  `false`      | If true, the snackbar will be active.|
+| `children`    | `String or Element`     |  `false`      | Text or node to be displayed in the content as alternative to `label`.|
 | `className`   | `String`                | `''`          | Additional class name to provide custom styling.|
 | `icon`        | `String` or `Element`   |               | String key for an icon or Element which will be displayed in left side of the snackbar.|
-| `label`       | `String`                |               | Text to display in the content. Required.|
+| `label`       | `String or Element`     |               | Text to display in the content.|
 | `onClick`     | `Function`              |               | Callback function that will be called when the button action is clicked.|
 | `onTimeout`   | `Function`              |               | Callback function when finish the set timeout.|
 | `timeout`     | `Number`                |               | Amount of time in milliseconds after the Snackbar will be automatically hidden.|

components/time_picker/TimePicker.js

@@ -12,12 +12,14 @@ const factory = (TimePickerDialog, Input) => {
   class TimePicker extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       error: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       inputClassName: PropTypes.string,
       label: PropTypes.string,
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onChange: PropTypes.func,
       onClick: PropTypes.func,
       onEscKeyDown: PropTypes.func,
@@ -82,7 +84,8 @@ const factory = (TimePickerDialog, Input) => {
     render () {
       const {
         active, // eslint-disable-line
-        format, inputClassName, onEscKeyDown, onOverlayClick, readonly, value, ...others
+        cancelLabel, format, inputClassName, okLabel, onEscKeyDown, onOverlayClick,
+        readonly, value, ...others
       } = this.props;
       const formattedTime = value ? time.formatTime(value, format) : '';
       return (
@@ -102,9 +105,11 @@ const factory = (TimePickerDialog, Input) => {
           />
           <TimePickerDialog
             active={this.state.active}
+            cancelLabel={cancelLabel}
             className={this.props.className}
             format={format}
             name={this.props.name}
+            okLabel={okLabel}
             onDismiss={this.handleDismiss}
             onEscKeyDown={onEscKeyDown}
             onOverlayClick={onOverlayClick}

components/time_picker/TimePickerDialog.js

@@ -7,9 +7,11 @@ const factory = (Dialog) => {
   class TimePickerDialog extends Component {
     static propTypes = {
       active: PropTypes.bool,
+      cancelLabel: PropTypes.string,
       className: PropTypes.string,
       format: PropTypes.oneOf(['24hr', 'ampm']),
       name: PropTypes.string,
+      okLabel: PropTypes.string,
       onDismiss: PropTypes.func,
       onEscKeyDown: PropTypes.func,
       onOverlayClick: PropTypes.func,
@@ -34,7 +36,9 @@ const factory = (Dialog) => {
 
     static defaultProps = {
       active: false,
+      cancelLabel: 'Cancel',
       format: '24hr',
+      okLabel: 'Ok',
       value: new Date()
     };
 
@@ -70,8 +74,8 @@ const factory = (Dialog) => {
     };
 
     actions = [
-      { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
-      { label: 'Ok', className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
+      { label: this.props.cancelLabel, className: this.props.theme.button, onClick: this.props.onDismiss },
+      { label: this.props.okLabel, className: this.props.theme.button, name: this.props.name, onClick: this.handleSelect }
     ];
 
     formatHours () {

components/utils/events.js

@@ -63,7 +63,7 @@ const TRANSITIONS = {
 
 function transitionEventNamesFor (element) {
   for (const transition in TRANSITIONS) {
-    if (element.style[transition] !== undefined) {
+    if (element && element.style[transition] !== undefined) {
       return TRANSITIONS[transition];
     }
   }

components/utils/time.js

@@ -112,11 +112,18 @@ const dateLocales = {
     weekdaysLetter: []
   },
   ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
     monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
     weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
     weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
     weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 const time = {

lib/app_bar/AppBar.js

@@ -38,7 +38,7 @@ var factory = function factory(IconButton) {
     _inherits(AppBar, _React$Component);
 
     function AppBar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -48,7 +48,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(AppBar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
         window.addEventListener('scroll', _this.handleScroll);
 
         var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();

lib/autocomplete/Autocomplete.js

@@ -64,7 +64,7 @@ var factory = function factory(Chip, Input) {
     _inherits(Autocomplete, _Component);
 
     function Autocomplete() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -74,7 +74,7 @@ var factory = function factory(Chip, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Autocomplete)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Autocomplete.__proto__ || Object.getPrototypeOf(Autocomplete)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         direction: _this.props.direction,
         focus: false,
         showAllSuggestions: _this.props.showSuggestionsWhenValueIsSet,
@@ -334,11 +334,11 @@ var factory = function factory(Chip, Input) {
         var _this2 = this;
 
         if (this.props.multiple) {
-          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref) {
-            var _ref2 = _slicedToArray(_ref, 2);
+          var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
+            var _ref3 = _slicedToArray(_ref2, 2);
 
-            var key = _ref2[0];
-            var value = _ref2[1];
+            var key = _ref3[0];
+            var value = _ref3[1];
 
             return _react2.default.createElement(
               Chip,
@@ -366,11 +366,11 @@ var factory = function factory(Chip, Input) {
 
         var theme = this.props.theme;
 
-        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref3) {
-          var _ref4 = _slicedToArray(_ref3, 2);
+        var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2);
 
-          var key = _ref4[0];
-          var value = _ref4[1];
+          var key = _ref5[0];
+          var value = _ref5[1];
 
           var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
           return _react2.default.createElement(

lib/button/BrowseButton.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BrowseButton = exports.browseButtonFactory = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames2 = require('classnames');
+
+var _classnames3 = _interopRequireDefault(_classnames2);
+
+var _reactCssThemr = require('react-css-themr');
+
+var _identifiers = require('../identifiers.js');
+
+var _FontIcon = require('../font_icon/FontIcon.js');
+
+var _FontIcon2 = _interopRequireDefault(_FontIcon);
+
+var _Ripple = require('../ripple/Ripple.js');
+
+var _Ripple2 = _interopRequireDefault(_Ripple);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var factory = function factory(ripple, FontIcon) {
+  var SimpleBrowseButton = function (_Component) {
+    _inherits(SimpleBrowseButton, _Component);
+
+    function SimpleBrowseButton() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, SimpleBrowseButton);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SimpleBrowseButton.__proto__ || Object.getPrototypeOf(SimpleBrowseButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseUp) _this.props.onMouseUp(event);
+      }, _this.handleMouseLeave = function (event) {
+        _this.refs.label.blur();
+        if (_this.props.onMouseLeave) _this.props.onMouseLeave(event);
+      }, _this.handleFileChange = function (event) {
+        if (_this.props.onChange) _this.props.onChange(event);
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(SimpleBrowseButton, [{
+      key: 'render',
+      value: function render() {
+        var _classnames;
+
+        var _props = this.props;
+        var accent = _props.accent;
+        var children = _props.children;
+        var className = _props.className;
+        var flat = _props.flat;
+        var floating = _props.floating;
+        var icon = _props.icon;
+        var inverse = _props.inverse;
+        var label = _props.label;
+        var mini = _props.mini;
+        var neutral = _props.neutral;
+        var primary = _props.primary;
+        var theme = _props.theme;
+        var raised = _props.raised;
+
+        var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
+
+        var element = 'label';
+        var level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+        var shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
+
+        var classes = (0, _classnames3.default)(theme.button, [theme[shape]], (_classnames = {}, _defineProperty(_classnames, theme[level], neutral), _defineProperty(_classnames, theme.mini, mini), _defineProperty(_classnames, theme.inverse, inverse), _classnames), className);
+
+        var props = _extends({}, others, {
+          ref: 'label',
+          className: classes,
+          disabled: this.props.disabled,
+          onMouseUp: this.handleMouseUp,
+          onMouseLeave: this.handleMouseLeave,
+          'data-react-toolbox': 'label'
+        });
+
+        return _react2.default.createElement(element, props, icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null, _react2.default.createElement(
+          'span',
+          null,
+          label
+        ), _react2.default.createElement('input', { className: classes, type: 'file', onChange: this.handleFileChange }), children);
+      }
+    }]);
+
+    return SimpleBrowseButton;
+  }(_react.Component);
+
+  SimpleBrowseButton.propTypes = {
+    accent: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
+    className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
+    flat: _react.PropTypes.bool,
+    floating: _react.PropTypes.bool,
+    icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
+    inverse: _react.PropTypes.bool,
+    label: _react.PropTypes.string,
+    mini: _react.PropTypes.bool,
+    neutral: _react.PropTypes.bool,
+    onChange: _react.PropTypes.func,
+    onMouseLeave: _react.PropTypes.func,
+    onMouseUp: _react.PropTypes.func,
+    primary: _react.PropTypes.bool,
+    raised: _react.PropTypes.bool,
+    theme: _react.PropTypes.shape({
+      accent: _react.PropTypes.string,
+      button: _react.PropTypes.string,
+      flat: _react.PropTypes.string,
+      floating: _react.PropTypes.string,
+      icon: _react.PropTypes.string,
+      inverse: _react.PropTypes.string,
+      mini: _react.PropTypes.string,
+      neutral: _react.PropTypes.string,
+      primary: _react.PropTypes.string,
+      raised: _react.PropTypes.string,
+      rippleWrapper: _react.PropTypes.string,
+      toggle: _react.PropTypes.string
+    }),
+    type: _react.PropTypes.string
+  };
+  SimpleBrowseButton.defaultProps = {
+    accent: false,
+    className: '',
+    flat: false,
+    floating: false,
+    mini: false,
+    neutral: true,
+    primary: false,
+    raised: false
+  };
+
+
+  return ripple(SimpleBrowseButton);
+};
+
+var BrowseButton = factory((0, _Ripple2.default)({ centered: false }), _FontIcon2.default);
+exports.default = (0, _reactCssThemr.themr)(_identifiers.BUTTON)(BrowseButton);
+exports.browseButtonFactory = factory;
+exports.BrowseButton = BrowseButton;

lib/button/Button.js

@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(Button, _Component);
 
     function Button() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Button)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {

lib/button/IconButton.js

@@ -46,7 +46,7 @@ var factory = function factory(ripple, FontIcon) {
     _inherits(IconButton, _Component);
 
     function IconButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple, FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconButton.__proto__ || Object.getPrototypeOf(IconButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
         _this.refs.button.blur();
         if (_this.props.onMouseUp) _this.props.onMouseUp(event);
       }, _this.handleMouseLeave = function (event) {

lib/button/index.d.ts

@@ -210,3 +210,128 @@ interface IconButtonProps extends ReactToolbox.Props {
 }
 
 export class IconButton extends React.Component<IconButtonProps, {}> { }
+
+export interface BrowseButtonTheme {
+  /**
+   * Used for the root in case button is accent.
+   */
+  accent?: string;
+  /**
+   * Used for the root element in any button.
+   */
+  button?: string;
+  /**
+   * Used when the button is flat for the root element.
+   */
+  flat?: string;
+  /**
+   * Used when the button is floating for the root element.
+   */
+  floating?: string;
+  /**
+   * For the icon inside a button.
+   */
+  icon?: string;
+  /**
+   * Used when colors are inverted.
+   */
+  inverse?: string;
+  /**
+   * Used for mini floating buttons.
+   */
+  mini?: string;
+  /**
+   * Used for neutral colored buttons.
+   */
+  neutral?: string;
+  /**
+   * Used for primary buttons when button is primary.
+   */
+  primary?: string;
+  /**
+   * Used when the button is raised for root element.
+   */
+  raised?: string;
+  /**
+   * Used for the ripple element.
+   */
+  rippleWrapper?: string;
+  /**
+   * Used for toggle buttons in the root element.
+   */
+  toggle?: string;
+}
+
+interface BrowseButtonProps extends ReactToolbox.Props {
+  /**
+   * Indicates if the button should have accent color.
+   * @default false
+   */
+  accent?: boolean;
+  /**
+   * Children to pass through the component.
+   */
+  children?: React.ReactNode;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * If true, the button will have a flat look.
+   * @default false
+   */
+  flat?: boolean;
+  /**
+   * If true, the button will have a floating look.
+   * @default false
+   */
+  floating?: boolean;
+  /**
+   * Creates a link for the button.
+   */
+  href?: string;
+  /**
+   * Value of the icon (See Font Icon Component).
+   */
+  icon?: React.ReactNode | string;
+  /**
+   * If true, the neutral colors are inverted. Useful to put a button over a dark background.
+   */
+  inverse?: boolean;
+  /**
+   * The text string to use for the name of the button.
+   */
+  label?: string;
+  /**
+   * To be used with floating button. If true, the button will be smaller.
+   * @default false
+   */
+  mini?: boolean;
+  /**
+   * Set it to false if you don't want the neutral styles to be included.
+   * @default true
+   */
+  neutral?: boolean;
+  /**
+   * Indicates if the button should have primary color.
+   * @default false
+   */
+  primary?: boolean;
+  /**
+   * If true, the button will have a raised look.
+   * @default false
+   */
+  raised?: boolean;
+  /**
+   * If true, component will have a ripple effect on click.
+   * @default true
+   */
+  ripple?: boolean;
+  /**
+   * Classnames object defining the component style.
+   */
+  theme?: BrowseButtonTheme;
+}
+
+export class BrowseButton extends React.Component<BrowseButtonProps, {}> { }

lib/button/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconButton = exports.Button = undefined;
+exports.BrowseButton = exports.IconButton = exports.Button = undefined;
 
 var _identifiers = require('../identifiers.js');
 
@@ -11,6 +11,8 @@ var _reactCssThemr = require('react-css-themr');
 
 var _Button = require('./Button.js');
 
+var _BrowseButton = require('./BrowseButton.js');
+
 var _IconButton = require('./IconButton.js');
 
 var _FontIcon = require('../font_icon/FontIcon.js');
@@ -29,9 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Button = (0, _Button.buttonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
 var IconButton = (0, _IconButton.iconButtonFactory)((0, _ripple2.default)({ centered: true }), _FontIcon2.default);
+var BrowseButton = (0, _BrowseButton.browseButtonFactory)((0, _ripple2.default)({ centered: false }), _FontIcon2.default);
 var ThemedButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(Button);
 var ThemedIconButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(IconButton);
+var ThemedBrowseButton = (0, _reactCssThemr.themr)(_identifiers.BUTTON, _theme2.default)(BrowseButton);
 
 exports.default = ThemedButton;
 exports.Button = ThemedButton;
-exports.IconButton = ThemedIconButton;
+exports.IconButton = ThemedIconButton;
+exports.BrowseButton = ThemedBrowseButton;

lib/button/theme.scss

@@ -6,6 +6,17 @@
 
 .button {
   position: relative;
+
+  > input {
+    position: absolute;
+    z-index: 0;
+    width: 0.1px;
+    height: 0.1px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    opacity: 0;
+  }
 }
 
 %button {

lib/card/theme.scss

@@ -27,7 +27,6 @@
   background-size: cover;
   &.wide, &.square {
     width: 100%;
-    height: 0;
     .content {
       position: absolute;
       height: 100%;
@@ -36,10 +35,15 @@
       max-width: 100%;
     }
   }
-  &.wide {
+  &::after {
+    display: block;
+    height: 0;
+    content: "";
+  }
+  &.wide::after {
     padding-top: 56.25%;
   }
-  &.square {
+  &.square::after {
     padding-top: 100%;
   }
   .content {

lib/checkbox/Checkbox.js

@@ -46,7 +46,7 @@ var factory = function factory(Check) {
     _inherits(Checkbox, _Component);
 
     function Checkbox() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(Check) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Checkbox)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);

lib/date_picker/Calendar.js

@@ -43,7 +43,7 @@ var factory = function factory(IconButton) {
     _inherits(Calendar, _Component);
 
     function Calendar() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -53,7 +53,7 @@ var factory = function factory(IconButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Calendar)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         viewDate: _this.props.selectedDate
       }, _this.handleDayClick = function (day) {
         _this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);

lib/date_picker/CalendarDay.js

@@ -32,7 +32,7 @@ var Day = function (_Component) {
   _inherits(Day, _Component);
 
   function Day() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -42,7 +42,7 @@ var Day = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Day.__proto__ || Object.getPrototypeOf(Day)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function () {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(_this.props.day);
       }

lib/date_picker/CalendarMonth.js

@@ -36,7 +36,7 @@ var Month = function (_Component) {
   _inherits(Month, _Component);
 
   function Month() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -46,7 +46,7 @@ var Month = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Month)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleDayClick = function (day) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Month.__proto__ || Object.getPrototypeOf(Month)).call.apply(_ref, [this].concat(args))), _this), _this.handleDayClick = function (day) {
       if (_this.props.onDayClick) _this.props.onDayClick(day);
     }, _temp), _possibleConstructorReturn(_this, _ret);
   }

lib/date_picker/DatePicker.js

@@ -66,7 +66,7 @@ var factory = function factory(Input, DatePickerDialog) {
     _inherits(DatePicker, _Component);
 
     function DatePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -76,7 +76,7 @@ var factory = function factory(Input, DatePickerDialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(DatePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
@@ -115,18 +115,20 @@ var factory = function factory(Input, DatePickerDialog) {
         var _props = this.props;
         var active = _props.active;
         var autoOk = _props.autoOk;
+        var cancelLabel = _props.cancelLabel;
         var inputClassName = _props.inputClassName;
         var inputFormat = _props.inputFormat;
         var locale = _props.locale;
         var maxDate = _props.maxDate;
         var minDate = _props.minDate;
+        var okLabel = _props.okLabel;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var readonly = _props.readonly;
         var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -152,11 +154,13 @@ var factory = function factory(Input, DatePickerDialog) {
           _react2.default.createElement(DatePickerDialog, {
             active: this.state.active,
             autoOk: autoOk,
+            cancelLabel: cancelLabel,
             className: this.props.className,
             locale: locale,
             maxDate: maxDate,
             minDate: minDate,
             name: this.props.name,
+            okLabel: okLabel,
             onDismiss: this.handleDismiss,
             onEscKeyDown: onEscKeyDown || this.handleDismiss,
             onOverlayClick: onOverlayClick || this.handleDismiss,
@@ -175,6 +179,7 @@ var factory = function factory(Input, DatePickerDialog) {
   DatePicker.propTypes = {
     active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
@@ -185,6 +190,7 @@ var factory = function factory(Input, DatePickerDialog) {
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,

lib/date_picker/DatePickerDialog.js

@@ -31,7 +31,7 @@ var factory = function factory(Dialog, Calendar) {
     _inherits(CalendarDialog, _Component);
 
     function CalendarDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var factory = function factory(Dialog, Calendar) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(CalendarDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CalendarDialog.__proto__ || Object.getPrototypeOf(CalendarDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'months',
         date: _this.props.value
       }, _this.handleNewDate = function (value, dayClick) {
@@ -65,7 +65,7 @@ var factory = function factory(Dialog, Calendar) {
         if (Object.prototype.toString.call(date) === '[object Date]') {
           _this.handleNewDate(date, false);
         }
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(CalendarDialog, [{
@@ -142,11 +142,13 @@ var factory = function factory(Dialog, Calendar) {
   CalendarDialog.propTypes = {
     active: _react.PropTypes.bool,
     autoOk: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     locale: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.object]),
     maxDate: _react.PropTypes.object,
     minDate: _react.PropTypes.object,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
@@ -166,7 +168,9 @@ var factory = function factory(Dialog, Calendar) {
   };
   CalendarDialog.defaultProps = {
     active: false,
+    cancelLabel: 'Cancel',
     className: '',
+    okLabel: 'Ok',
     value: new Date()
   };
 

lib/dropdown/Dropdown.js

@@ -50,7 +50,7 @@ var factory = function factory(Input) {
     _inherits(Dropdown, _Component);
 
     function Dropdown() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -60,7 +60,7 @@ var factory = function factory(Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Dropdown)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false,
         up: false
       }, _this.close = function () {
@@ -157,7 +157,7 @@ var factory = function factory(Input) {
 
         var theme = this.props.theme;
 
-        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _classnames));
+        var className = (0, _classnames4.default)(theme.field, (_classnames = {}, _defineProperty(_classnames, theme.errored, this.props.error), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.required, this.props.required), _classnames));
 
         return _react2.default.createElement(
           'div',
@@ -170,7 +170,12 @@ var factory = function factory(Input) {
           this.props.label ? _react2.default.createElement(
             'label',
             { className: theme.label },
-            this.props.label
+            this.props.label,
+            this.props.required ? _react2.default.createElement(
+              'span',
+              { className: theme.required },
+              ' * '
+            ) : null
           ) : null,
           this.props.error ? _react2.default.createElement(
             'span',
@@ -190,12 +195,13 @@ var factory = function factory(Input) {
         var source = _props.source;
         var allowBlank = _props.allowBlank;
         var auto = _props.auto;
+        var required = _props.required;
 
-        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto']); //eslint-disable-line no-unused-vars
+        var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
 
 
         var selected = this.getSelectedItem();
-        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _classnames2), this.props.className);
+        var className = (0, _classnames4.default)(theme.dropdown, (_classnames2 = {}, _defineProperty(_classnames2, theme.up, this.state.up), _defineProperty(_classnames2, theme.active, this.state.active), _defineProperty(_classnames2, theme.disabled, this.props.disabled), _defineProperty(_classnames2, theme.required, this.props.required), _classnames2), this.props.className);
 
         return _react2.default.createElement(
           'div',
@@ -203,6 +209,7 @@ var factory = function factory(Input) {
           _react2.default.createElement(Input, _extends({}, others, {
             className: theme.value,
             onClick: this.handleClick,
+            required: this.props.required,
             readOnly: true,
             type: template && selected ? 'hidden' : null,
             value: selected && selected.label ? selected.label : ''
@@ -232,6 +239,7 @@ var factory = function factory(Input) {
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onFocus: _react.PropTypes.func,
+    required: _react.PropTypes.bool,
     source: _react.PropTypes.array.isRequired,
     template: _react.PropTypes.func,
     theme: _react.PropTypes.shape({
@@ -242,6 +250,7 @@ var factory = function factory(Input) {
       errored: _react.PropTypes.string,
       field: _react.PropTypes.string,
       label: _react.PropTypes.string,
+      required: _react.PropTypes.bool,
       selected: _react.PropTypes.string,
       templateValue: _react.PropTypes.string,
       up: _react.PropTypes.string,
@@ -254,7 +263,8 @@ var factory = function factory(Input) {
     auto: true,
     className: '',
     allowBlank: true,
-    disabled: false
+    disabled: false,
+    required: false
   };
 
 

lib/dropdown/theme.scss

@@ -69,6 +69,9 @@
     > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -96,6 +99,9 @@
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
 }
 
 .error {

lib/form/Form.js

@@ -80,7 +80,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
     _inherits(Form, _Component);
 
     function Form() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -90,7 +90,7 @@ var factory = function factory(Autocomplete, Button, Checkbox, DatePicker, Dropd
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Form)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.onSubmit = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Form.__proto__ || Object.getPrototypeOf(Form)).call.apply(_ref, [this].concat(args))), _this), _this.onSubmit = function (event) {
         event.preventDefault();
         if (_this.props.onSubmit) _this.props.onSubmit(event);
       }, _this.onChange = function (field, value, event) {

lib/hoc/ActivableRenderer.js

@@ -23,7 +23,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 var ActivableRendererFactory = function ActivableRendererFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? { delay: 500 } : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : { delay: 500 };
   return function (ActivableComponent) {
     var _class, _temp2;
 
@@ -31,7 +31,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
       _inherits(ActivableRenderer, _Component);
 
       function ActivableRenderer() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -41,7 +41,7 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActivableRenderer)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ActivableRenderer.__proto__ || Object.getPrototypeOf(ActivableRenderer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: _this.props.active,
           rendered: _this.props.active
         }, _temp), _possibleConstructorReturn(_this, _ret);

lib/hoc/Portal.js

@@ -28,7 +28,7 @@ var Portal = function (_Component) {
   function Portal() {
     _classCallCheck(this, Portal);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Portal).apply(this, arguments));
+    return _possibleConstructorReturn(this, (Portal.__proto__ || Object.getPrototypeOf(Portal)).apply(this, arguments));
   }
 
   _createClass(Portal, [{

lib/input/Input.js

@@ -7,7 +7,7 @@ exports.Input = exports.inputFactory = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -44,7 +44,7 @@ var factory = function factory(FontIcon) {
     _inherits(Input, _React$Component);
 
     function Input() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(FontIcon) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Input)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
         var _this$props = _this.props;
         var onChange = _this$props.onChange;
         var multiline = _this$props.multiline;

lib/layout/Panel.js

@@ -24,6 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Panel = function Panel(_ref) {
   var children = _ref.children;
   var className = _ref.className;
+  var onScroll = _ref.onScroll;
   var scrollY = _ref.scrollY;
   var theme = _ref.theme;
 
@@ -31,7 +32,7 @@ var Panel = function Panel(_ref) {
 
   return _react2.default.createElement(
     'div',
-    { 'data-react-toolbox': 'panel', className: _className },
+    { 'data-react-toolbox': 'panel', onScroll: onScroll, className: _className },
     children
   );
 };
@@ -39,6 +40,7 @@ var Panel = function Panel(_ref) {
 Panel.propTypes = {
   children: _react.PropTypes.any,
   className: _react.PropTypes.string,
+  onScroll: _react.PropTypes.func,
   scrollY: _react.PropTypes.bool,
   theme: _react.PropTypes.shape({
     panel: _react.PropTypes.string,

lib/list/List.js

@@ -38,7 +38,7 @@ var factory = function factory(ListItem) {
     function List() {
       _classCallCheck(this, List);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(List).apply(this, arguments));
+      return _possibleConstructorReturn(this, (List.__proto__ || Object.getPrototypeOf(List)).apply(this, arguments));
     }
 
     _createClass(List, [{

lib/list/ListItem.js

@@ -44,7 +44,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
     _inherits(ListItem, _Component);
 
     function ListItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ListItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ListItem.__proto__ || Object.getPrototypeOf(ListItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event);
         }

lib/list/ListItemContent.js

@@ -42,7 +42,7 @@ var factory = function factory(ListItemText) {
     function ListItemContent() {
       _classCallCheck(this, ListItemContent);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(ListItemContent).apply(this, arguments));
+      return _possibleConstructorReturn(this, (ListItemContent.__proto__ || Object.getPrototypeOf(ListItemContent)).apply(this, arguments));
     }
 
     _createClass(ListItemContent, [{

lib/menu/IconMenu.js

@@ -40,7 +40,7 @@ var factory = function factory(IconButton, Menu) {
     _inherits(IconMenu, _Component);
 
     function IconMenu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var factory = function factory(IconButton, Menu) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(IconMenu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = IconMenu.__proto__ || Object.getPrototypeOf(IconMenu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: false
       }, _this.handleButtonClick = function (event) {
         _this.setState({ active: !_this.state.active });

lib/menu/Menu.js

@@ -53,7 +53,7 @@ var factory = function factory(MenuItem) {
     _inherits(Menu, _Component);
 
     function Menu() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -63,7 +63,7 @@ var factory = function factory(MenuItem) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Menu)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Menu.__proto__ || Object.getPrototypeOf(Menu)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active,
         rippled: false
       }, _this.handleDocumentClick = function (event) {

lib/menu/MenuItem.js

@@ -46,7 +46,7 @@ var factory = function factory(ripple) {
     _inherits(MenuItem, _Component);
 
     function MenuItem() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(ripple) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(MenuItem)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MenuItem.__proto__ || Object.getPrototypeOf(MenuItem)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         if (_this.props.onClick && !_this.props.disabled) {
           _this.props.onClick(event, _this);
         }

lib/overlay/Overlay.js

@@ -37,16 +37,28 @@ var Overlay = function (_Component) {
   _inherits(Overlay, _Component);
 
   function Overlay() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Overlay);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Overlay).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
+      if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
+        _this.props.onEscKeyDown(e);
+      }
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Overlay, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
       if (this.props.active) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+        document.body.addEventListener('keydown', this.handleEscKey);
         document.body.style.overflow = 'hidden';
       }
     }
@@ -59,25 +71,15 @@ var Overlay = function (_Component) {
   }, {
     key: 'componentDidUpdate',
     value: function componentDidUpdate() {
-      if (this.props.active && !this.escKeyListener) {
-        this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+      if (this.props.active) {
+        document.body.addEventListener('keydown', this.handleEscKey);
       }
     }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
-      if (this.escKeyListener) {
-        document.body.removeEventListener('keydown', this.handleEscKey);
-        this.escKeyListener = null;
-      }
-    }
-  }, {
-    key: 'handleEscKey',
-    value: function handleEscKey(e) {
-      if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
-        this.props.onEscKeyDown(e);
-      }
+      document.body.removeEventListener('keydown', this.handleEscKey);
     }
   }, {
     key: 'render',

lib/progress_bar/ProgressBar.js

@@ -39,7 +39,7 @@ var ProgressBar = function (_Component) {
   function ProgressBar() {
     _classCallCheck(this, ProgressBar);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(ProgressBar).apply(this, arguments));
+    return _possibleConstructorReturn(this, (ProgressBar.__proto__ || Object.getPrototypeOf(ProgressBar)).apply(this, arguments));
   }
 
   _createClass(ProgressBar, [{

lib/radio/RadioButton.js

@@ -44,7 +44,7 @@ var factory = function factory(Radio) {
     _inherits(RadioButton, _Component);
 
     function RadioButton() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Radio) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioButton)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
         var _this$props = _this.props;
         var checked = _this$props.checked;
         var disabled = _this$props.disabled;

lib/radio/RadioGroup.js

@@ -34,7 +34,7 @@ var factory = function factory(RadioButton) {
     _inherits(RadioGroup, _Component);
 
     function RadioGroup() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var factory = function factory(RadioButton) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RadioGroup)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleChange = function (value) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
         if (_this.props.onChange) _this.props.onChange(value);
       }, _temp), _possibleConstructorReturn(_this, _ret);
     }

lib/ripple/Ripple.js

@@ -61,7 +61,7 @@ var defaults = {
 };
 
 var rippleFactory = function rippleFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _defaults$options = _extends({}, defaults, options);
 
@@ -78,7 +78,7 @@ var rippleFactory = function rippleFactory() {
       _inherits(RippledComponent, _Component);
 
       function RippledComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var rippleFactory = function rippleFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(RippledComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           ripples: {}
         }, _this.handleMouseDown = function (event) {
           if (_this.props.onMouseDown) _this.props.onMouseDown(event);
@@ -304,14 +304,14 @@ var rippleFactory = function rippleFactory() {
         }
       }, {
         key: 'renderRipple',
-        value: function renderRipple(key, className, _ref) {
+        value: function renderRipple(key, className, _ref2) {
           var _classnames;
 
-          var active = _ref.active;
-          var left = _ref.left;
-          var restarting = _ref.restarting;
-          var top = _ref.top;
-          var width = _ref.width;
+          var active = _ref2.active;
+          var left = _ref2.left;
+          var restarting = _ref2.restarting;
+          var top = _ref2.top;
+          var width = _ref2.width;
 
           var scale = restarting ? 0 : 1;
           var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';

lib/slider/Slider.js

@@ -54,7 +54,7 @@ var factory = function factory(ProgressBar, Input) {
     _inherits(Slider, _Component);
 
     function Slider() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -64,7 +64,7 @@ var factory = function factory(ProgressBar, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Slider)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         inputFocused: false,
         inputValue: null,
         sliderLength: 0,

lib/snackbar/Snackbar.js

@@ -52,7 +52,7 @@ var factory = function factory(Overlay, Button) {
     function Snackbar() {
       _classCallCheck(this, Snackbar);
 
-      return _possibleConstructorReturn(this, Object.getPrototypeOf(Snackbar).apply(this, arguments));
+      return _possibleConstructorReturn(this, (Snackbar.__proto__ || Object.getPrototypeOf(Snackbar)).apply(this, arguments));
     }
 
     _createClass(Snackbar, [{
@@ -79,6 +79,7 @@ var factory = function factory(Overlay, Button) {
         var _props = this.props;
         var action = _props.action;
         var active = _props.active;
+        var children = _props.children;
         var icon = _props.icon;
         var label = _props.label;
         var onClick = _props.onClick;
@@ -97,7 +98,8 @@ var factory = function factory(Overlay, Button) {
             _react2.default.createElement(
               'span',
               { className: theme.label },
-              label
+              label,
+              children
             ),
             action ? _react2.default.createElement(Button, { className: theme.button, label: action, onClick: onClick }) : null
           )
@@ -111,9 +113,10 @@ var factory = function factory(Overlay, Button) {
   Snackbar.propTypes = {
     action: _react.PropTypes.string,
     active: _react.PropTypes.bool,
+    children: _react.PropTypes.node,
     className: _react.PropTypes.string,
     icon: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
-    label: _react.PropTypes.string,
+    label: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.element]),
     onClick: _react.PropTypes.func,
     onTimeout: _react.PropTypes.func,
     theme: _react.PropTypes.shape({

lib/switch/Switch.js

@@ -44,7 +44,7 @@ var factory = function factory(Thumb) {
     _inherits(Switch, _Component);
 
     function Switch() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -54,7 +54,7 @@ var factory = function factory(Thumb) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Switch)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleToggle = function (event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Switch.__proto__ || Object.getPrototypeOf(Switch)).call.apply(_ref, [this].concat(args))), _this), _this.handleToggle = function (event) {
         if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
         if (!_this.props.disabled && _this.props.onChange) {
           _this.props.onChange(!_this.props.checked, event);

lib/table/Table.js

@@ -46,7 +46,7 @@ var factory = function factory(TableHead, TableRow) {
     _inherits(Table, _Component);
 
     function Table() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -56,7 +56,7 @@ var factory = function factory(TableHead, TableRow) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Table)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleFullSelect = function () {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
         if (_this.props.onSelect) {
           var _this$props = _this.props;
           var source = _this$props.source;

lib/table/TableRow.js

@@ -33,7 +33,7 @@ var factory = function factory(Checkbox) {
     _inherits(TableRow, _Component);
 
     function TableRow() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -43,7 +43,7 @@ var factory = function factory(Checkbox) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TableRow)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TableRow.__proto__ || Object.getPrototypeOf(TableRow)).call.apply(_ref, [this].concat(args))), _this), _this.handleInputChange = function (index, key, type, event) {
         var value = void 0;
         switch (type) {
           case 'checkbox':

lib/tabs/Tab.js

@@ -39,7 +39,7 @@ var Tab = function (_Component) {
   _inherits(Tab, _Component);
 
   function Tab() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -49,7 +49,7 @@ var Tab = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tab)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tab.__proto__ || Object.getPrototypeOf(Tab)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
       if (!_this.props.disabled && _this.props.onClick) {
         _this.props.onClick(event);
       }

lib/tabs/TabContent.js

@@ -35,7 +35,7 @@ var TabContent = function (_Component) {
   function TabContent() {
     _classCallCheck(this, TabContent);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(TabContent).apply(this, arguments));
+    return _possibleConstructorReturn(this, (TabContent.__proto__ || Object.getPrototypeOf(TabContent)).apply(this, arguments));
   }
 
   _createClass(TabContent, [{

lib/tabs/Tabs.js

@@ -42,7 +42,7 @@ var factory = function factory(Tab, TabContent) {
     _inherits(Tabs, _Component);
 
     function Tabs() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -52,7 +52,7 @@ var factory = function factory(Tab, TabContent) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Tabs.__proto__ || Object.getPrototypeOf(Tabs)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         pointer: {}
       }, _this.handleHeaderClick = function (event) {
         var idx = parseInt(event.currentTarget.id);

lib/tabs/__tests__/index.spec.js

@@ -63,7 +63,7 @@ describe('Tabs', function () {
     function Composition() {
       _classCallCheck(this, Composition);
 
-      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Composition).call(this));
+      var _this = _possibleConstructorReturn(this, (Composition.__proto__ || Object.getPrototypeOf(Composition)).call(this));
 
       _this.state = { index: 0 };
       return _this;

lib/time_picker/Clock.js

@@ -40,7 +40,7 @@ var Clock = function (_Component) {
   _inherits(Clock, _Component);
 
   function Clock() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -50,7 +50,7 @@ var Clock = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Clock)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Clock.__proto__ || Object.getPrototypeOf(Clock)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       center: { x: null, y: null },
       radius: 0
     }, _this.handleHourChange = function (hours) {

lib/time_picker/ClockFace.js

@@ -28,7 +28,7 @@ var Face = function (_Component) {
   _inherits(Face, _Component);
 
   function Face() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -38,7 +38,7 @@ var Face = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
       var _this$props = _this.props;
       var active = _this$props.active;
       var radius = _this$props.radius;

lib/time_picker/ClockHand.js

@@ -34,7 +34,7 @@ var Hand = function (_Component) {
   _inherits(Hand, _Component);
 
   function Hand() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -44,7 +44,7 @@ var Hand = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hand)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hand.__proto__ || Object.getPrototypeOf(Hand)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       knobWidth: 0
     }, _this.handleMouseMove = function (event) {
       _this.move(_events2.default.getMousePosition(event));

lib/time_picker/ClockHours.js

@@ -41,7 +41,7 @@ var Hours = function (_Component) {
   _inherits(Hours, _Component);
 
   function Hours() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -51,7 +51,7 @@ var Hours = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Hours)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Hours.__proto__ || Object.getPrototypeOf(Hours)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
       inner: _this.props.format === '24hr' && _this.props.selected > 0 && _this.props.selected <= 12
     }, _this.handleHandMove = function (degrees, radius) {
       var currentInner = radius < _this.props.radius - _this.props.spacing * innerSpacing;

lib/time_picker/ClockMinutes.js

@@ -37,7 +37,7 @@ var Minutes = function (_Component) {
   _inherits(Minutes, _Component);
 
   function Minutes() {
-    var _Object$getPrototypeO;
+    var _ref;
 
     var _temp, _this, _ret;
 
@@ -47,7 +47,7 @@ var Minutes = function (_Component) {
       args[_key] = arguments[_key];
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Minutes)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Minutes.__proto__ || Object.getPrototypeOf(Minutes)).call.apply(_ref, [this].concat(args))), _this), _this.handleHandMove = function (degrees) {
       _this.props.onChange(degrees / step);
     }, _this.handleMouseDown = function (event) {
       _this.refs.hand.mouseStart(event);

lib/time_picker/TimePicker.js

@@ -58,7 +58,7 @@ var factory = function factory(TimePickerDialog, Input) {
     _inherits(TimePicker, _Component);
 
     function TimePicker() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -68,7 +68,7 @@ var factory = function factory(TimePickerDialog, Input) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePicker)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
@@ -106,14 +106,16 @@ var factory = function factory(TimePickerDialog, Input) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var cancelLabel = _props.cancelLabel;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
+        var okLabel = _props.okLabel;
         var onEscKeyDown = _props.onEscKeyDown;
         var onOverlayClick = _props.onOverlayClick;
         var readonly = _props.readonly;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'format', 'inputClassName', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -133,9 +135,11 @@ var factory = function factory(TimePickerDialog, Input) {
           })),
           _react2.default.createElement(TimePickerDialog, {
             active: this.state.active,
+            cancelLabel: cancelLabel,
             className: this.props.className,
             format: format,
             name: this.props.name,
+            okLabel: okLabel,
             onDismiss: this.handleDismiss,
             onEscKeyDown: onEscKeyDown,
             onOverlayClick: onOverlayClick,
@@ -152,12 +156,14 @@ var factory = function factory(TimePickerDialog, Input) {
 
   TimePicker.propTypes = {
     active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     error: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     inputClassName: _react.PropTypes.string,
     label: _react.PropTypes.string,
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,

lib/time_picker/TimePickerDialog.js

@@ -35,7 +35,7 @@ var factory = function factory(Dialog) {
     _inherits(TimePickerDialog, _Component);
 
     function TimePickerDialog() {
-      var _Object$getPrototypeO;
+      var _ref;
 
       var _temp, _this, _ret;
 
@@ -45,7 +45,7 @@ var factory = function factory(Dialog) {
         args[_key] = arguments[_key];
       }
 
-      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TimePickerDialog)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePickerDialog.__proto__ || Object.getPrototypeOf(TimePickerDialog)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
         display: 'hours',
         displayTime: _this.props.value
       }, _this.handleClockChange = function (value) {
@@ -58,7 +58,7 @@ var factory = function factory(Dialog) {
         if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
       }, _this.switchDisplay = function (event) {
         _this.setState({ display: event.target.id });
-      }, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
+      }, _this.actions = [{ label: _this.props.cancelLabel, className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: _this.props.okLabel, className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
     }
 
     _createClass(TimePickerDialog, [{
@@ -154,9 +154,11 @@ var factory = function factory(Dialog) {
 
   TimePickerDialog.propTypes = {
     active: _react.PropTypes.bool,
+    cancelLabel: _react.PropTypes.string,
     className: _react.PropTypes.string,
     format: _react.PropTypes.oneOf(['24hr', 'ampm']),
     name: _react.PropTypes.string,
+    okLabel: _react.PropTypes.string,
     onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,
@@ -180,7 +182,9 @@ var factory = function factory(Dialog) {
   };
   TimePickerDialog.defaultProps = {
     active: false,
+    cancelLabel: 'Cancel',
     format: '24hr',
+    okLabel: 'Ok',
     value: new Date()
   };
 

lib/tooltip/Tooltip.js

@@ -62,7 +62,7 @@ var defaults = {
 };
 
 var tooltipFactory = function tooltipFactory() {
-  var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
   var _defaults$options = _extends({}, defaults, options);
 
@@ -78,7 +78,7 @@ var tooltipFactory = function tooltipFactory() {
       _inherits(TooltippedComponent, _Component);
 
       function TooltippedComponent() {
-        var _Object$getPrototypeO;
+        var _ref;
 
         var _temp, _this, _ret;
 
@@ -88,7 +88,7 @@ var tooltipFactory = function tooltipFactory() {
           args[_key] = arguments[_key];
         }
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(TooltippedComponent)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
+        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TooltippedComponent.__proto__ || Object.getPrototypeOf(TooltippedComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
           active: false,
           position: _this.props.tooltipPosition,
           visible: false
@@ -118,12 +118,12 @@ var tooltipFactory = function tooltipFactory() {
         }
       }, {
         key: 'activate',
-        value: function activate(_ref) {
+        value: function activate(_ref2) {
           var _this2 = this;
 
-          var top = _ref.top;
-          var left = _ref.left;
-          var position = _ref.position;
+          var top = _ref2.top;
+          var left = _ref2.left;
+          var position = _ref2.position;
 
           if (this.timeout) clearTimeout(this.timeout);
           this.setState({ visible: true, position: position });

lib/utils/events.js

@@ -62,7 +62,7 @@ var TRANSITIONS = {
 
 function transitionEventNamesFor(element) {
   for (var transition in TRANSITIONS) {
-    if (element.style[transition] !== undefined) {
+    if (element && element.style[transition] !== undefined) {
       return TRANSITIONS[transition];
     }
   }

lib/utils/prefixer.js

@@ -31,7 +31,7 @@ function addPrefixesTo(style, property, value) {
 }
 
 function prefixer(style) {
-  var defaultValue = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+  var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
   var _style = defaultValue;
   for (var property in style) {

lib/utils/testing.js

@@ -16,8 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 exports.default = {
   renderComponent: function renderComponent(Component) {
-    var props = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-    var state = arguments.length <= 2 || arguments[2] === undefined ? {} : arguments[2];
+    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var state = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
     var component = _reactAddonsTestUtils2.default.renderIntoDocument(_react2.default.createElement(Component, props));
     if (state !== {}) {

lib/utils/time.js

@@ -117,11 +117,18 @@ var dateLocales = {
     weekdaysLetter: []
   },
   ru: {
-    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июльy_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
+    months: 'Январь_Февраль_Март_Апрель_Май_Июнь_Июль_Август_Сентябрь_Октябрь_Ноябрь_Декабрь'.split('_'),
     monthsShort: 'Янв_Фев_Мар_Апр_Май_Июн_Июл_Авг_Сен_Окт_Ноя_Дек'.split('_'),
     weekdays: 'Воскресенье_Понедельник_Вторник_Среда_Четверг_Пятница_Суббота'.split('_'),
     weekdaysShort: 'Вс_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
     weekdaysLetter: []
+  },
+  ua: {
+    months: 'Січень_Лютий_Березень_Квітень_Травень_Червень_Липень_Серпень_Вересень_Жовтень_Листопад_Грудень'.split('_'),
+    monthsShort: 'Січ_Лют_Берез_Квіт_Трав_Черв_Лип_Серп_Верес_Жовт_Листоп_Груд'.split('_'),
+    weekdays: 'Неділя_Понеділок_Вівторок_Середа_Четвер_П’ятниця_Субота'.split('_'),
+    weekdaysShort: 'Нд_Пн_Вт_Ср_Чт_Пт_Сб'.split('_'),
+    weekdaysLetter: []
   }
 };
 var time = {
@@ -141,33 +148,33 @@ var time = {
     return d.getHours() >= 12 ? 'pm' : 'am';
   },
   getFullMonth: function getFullMonth(d) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var month = d.getMonth();
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('months') ? l.months[month] || 'Unknown' : 'Unknown';
   },
   getShortMonth: function getShortMonth(d) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var month = d.getMonth();
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('monthsShort') ? l.monthsShort[month] || 'Unknown' : 'Unknown';
   },
   getFullDayOfWeek: function getFullDayOfWeek(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdays') ? l.weekdays[day] || 'Unknown' : 'Unknown';
   },
   getShortDayOfWeek: function getShortDayOfWeek(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdaysShort') ? l.weekdaysShort[day] || 'Unknown' : 'Unknown';
   },
   getDayOfWeekLetter: function getDayOfWeekLetter(day) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     var l = (typeof locale === 'string' ? dateLocales[locale] : locale) || dateLocales.en;
     return l.hasOwnProperty('weekdaysLetter') ? l.weekdaysLetter[day] || this.getFullDayOfWeek(day, locale).charAt(0) : 'Unknown';
@@ -262,7 +269,7 @@ var time = {
     return diff1 < diff2 ? date1 : date2;
   },
   formatDate: function formatDate(date) {
-    var locale = arguments.length <= 1 || arguments[1] === undefined ? 'en' : arguments[1];
+    var locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'en';
 
     if (locale === 'en') {
       return date.getDate() + ' ' + time.getFullMonth(date, locale) + ' ' + date.getFullYear();

lib/utils/utils.js

@@ -13,9 +13,9 @@ exports.default = {
     return angle < 0 ? 360 + angle : angle;
   },
   range: function range() {
-    var start = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
-    var stop = arguments.length <= 1 || arguments[1] === undefined ? null : arguments[1];
-    var step = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2];
+    var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
     var _start = 0;
     var _stop = start;
 

package.json

@@ -2,7 +2,7 @@
   "name": "react-toolbox",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "homepage": "http://www.react-toolbox.com",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "./lib",
   "author": {
     "name": "React Toolbox Team",
@@ -38,7 +38,8 @@
   "dependencies": {
     "classnames": "~2.2.5",
     "core-js": "~2.4.0",
-    "react-css-themr": "~1.2.0"
+    "normalize.css": "~5.0.0",
+    "react-css-themr": "~1.4.1"
   },
   "devDependencies": {
     "autoprefixer": "~6.4.0",
@@ -72,7 +73,6 @@
     "karma-webpack": "~1.7.0",
     "mocha": "~3.0.1",
     "node-sass": "~3.7.0",
-    "normalize.css": "~4.2.0",
     "phantomjs": "~2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "~2.1.7",
@@ -115,7 +115,6 @@
   "peerDependencies": {
     "classnames": "~2.2.0",
     "immutability-helper": "~2.0.0",
-    "normalize.css": "~4.2.0",
     "react": "~0.14 || ~15.3.0",
     "react-addons-css-transition-group": "~0.14.0 || ~15.3.0",
     "react-dom": "~0.14.0 || ~15.3.0"

spec/components/button.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import GithubIcon from './github_icon';
-import { Button, IconButton } from '../../components/button';
+import { Button, IconButton, BrowseButton } from '../../components/button';
 
 const ButtonTest = () => (
   <section>
@@ -35,7 +35,12 @@ const ButtonTest = () => (
     <span style={{verticalAlign: 'middle'}}>Menu</span>
     <IconButton><GithubIcon /></IconButton>
     <span style={{verticalAlign: 'middle'}}>Github</span>
-  </section>
+    <h5>Browse Button</h5>
+    <br/>
+    <BrowseButton icon='folder_open' label='BROWSE' raised primary />
+    &nbsp;
+    <BrowseButton label='BROWSE' raised />
+</section>
 );
 
 function rippleEnded () {

spec/components/dropdown.js

@@ -63,6 +63,14 @@ class DropdownTest extends React.Component {
           onChange={this.handleChange.bind(this, 'dropdown3')}
           source={countries}
         />
+
+        <Dropdown
+          label="Country"
+          ref="dropdown5"
+          onChange={this.handleChange.bind(this, 'dropdown5')}
+          source={countries}
+          required
+        />
       </section>
     );
   }

spec/components/snackbar.js

@@ -29,12 +29,13 @@ class SnackbarTest extends React.Component {
           action='Hide'
           active={this.state.active}
           icon='question_answer'
-          label='Snackbar action cancel'
           timeout={2000}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
           type='warning'
-        />
+        >
+          Snackbar action <strong>cancel</strong>
+        </Snackbar>
       </section>
     );
   }