baseui 10.9.2 → 10.11.1

package/button/index.d.ts

@@ -37,8 +37,14 @@ export interface ButtonOverrides {
   LoadingSpinner?: Override<any>;
 }
 
+export interface CustomColorsT {
+  backgroundColor: string;
+  color: string;
+}
+
 export interface ButtonProps
   extends StyletronComponentInjectedProps<ButtonProps> {
+  colors?: CustomColorsT;
   href?: string;
   target?: string;
   children?: React.ReactNode;

package/button/index.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as Button} from './button.js';
+export { default as Button } from './button.js';
 // Constants
-export {KIND, SIZE, SHAPE} from './constants.js';
+export { KIND, SIZE, SHAPE } from './constants.js';
 // Styled elements
 export {
   BaseButton as StyledBaseButton,

package/button/styled-components.js

@@ -18,6 +18,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var BaseButton = (0, _index.styled)('button', function (_ref) {
   var $theme = _ref.$theme,
       $size = _ref.$size,
+      $colors = _ref.$colors,
       $kind = _ref.$kind,
       $shape = _ref.$shape,
       $isLoading = _ref.$isLoading,
@@ -69,14 +70,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     $theme: $theme,
     $size: $size,
     $shape: $shape
-  })), getKindStyles({
+  })), getColorStyles({
     $theme: $theme,
+    $colors: $colors,
     $kind: $kind,
     $isLoading: $isLoading,
     $isSelected: $isSelected,
     $disabled: $disabled
   })), getShapeStyles({
-    $theme: $theme,
     $shape: $shape,
     $size: $size
   }));
@@ -345,13 +346,27 @@ function getPaddingStyles(_ref12) {
   }
 }
 
-function getKindStyles(_ref13) {
+function getColorStyles(_ref13) {
   var $theme = _ref13.$theme,
+      $colors = _ref13.$colors,
       $isLoading = _ref13.$isLoading,
       $isSelected = _ref13.$isSelected,
       $kind = _ref13.$kind,
       $disabled = _ref13.$disabled;
 
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)'
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)'
+      }
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }
@@ -439,8 +454,7 @@ function getKindStyles(_ref13) {
 }
 
 function getShapeStyles(_ref14) {
-  var $theme = _ref14.$theme,
-      $shape = _ref14.$shape,
+  var $shape = _ref14.$shape,
       $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {

package/button/styled-components.js.flow

@@ -5,21 +5,24 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import {KIND, SIZE, SHAPE} from './constants.js';
-import type {SharedStylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import { KIND, SIZE, SHAPE } from './constants.js';
+import type { SharedStylePropsT } from './types.js';
+import type { FontT } from '../themes/types.js';
 
 export const BaseButton = styled<SharedStylePropsT>(
   'button',
   ({
     $theme,
     $size,
+    $colors,
     $kind,
     $shape,
     $isLoading,
     $isSelected,
     $disabled,
     $isFocusVisible,
+    //$FlowFixMe
   }) => ({
     display: 'inline-flex',
     // need to maintain button width while showing loading spinner
@@ -35,9 +38,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     borderRightStyle: 'none',
     borderBottomStyle: 'none',
     outline: 'none',
-    boxShadow: $isFocusVisible
-      ? `inset 0 0 0 3px ${$theme.colors.accent}`
-      : 'none',
+    boxShadow: $isFocusVisible ? `inset 0 0 0 3px ${$theme.colors.accent}` : 'none',
     textDecoration: 'none',
     WebkitAppearance: 'none',
     transitionProperty: 'background',
@@ -46,64 +47,65 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
+      ...getDisabledStyles({ $theme, $kind, $disabled, $isSelected }),
     },
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
     marginBottom: 0,
-    ...getFontStyles({$theme, $size}),
-    ...getBorderRadiiStyles({$theme, $size, $shape}),
-    ...getPaddingStyles({$theme, $size, $shape}),
-    // Kind style override
-    ...getKindStyles({$theme, $kind, $isLoading, $isSelected, $disabled}),
-    ...getShapeStyles({$theme, $shape, $size}),
-  }),
+    ...getFontStyles({ $theme, $size }),
+    ...getBorderRadiiStyles({ $theme, $size, $shape }),
+    ...getPaddingStyles({ $theme, $size, $shape }),
+    ...getColorStyles({
+      $theme,
+      $colors,
+      $kind,
+      $isLoading,
+      $isSelected,
+      $disabled,
+    }),
+    ...getShapeStyles({ $shape, $size }),
+  })
 );
 
-export const EndEnhancer = styled<SharedStylePropsT>('div', ({$theme}) => {
-  const marginDirection: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+export const EndEnhancer = styled<SharedStylePropsT>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     display: 'flex',
     [marginDirection]: $theme.sizing.scale500,
   };
 });
 
-export const StartEnhancer = styled<SharedStylePropsT>('div', ({$theme}) => {
-  const marginDirection: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const StartEnhancer = styled<SharedStylePropsT>('div', ({ $theme }) => {
+  const marginDirection: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     display: 'flex',
     [marginDirection]: $theme.sizing.scale500,
   };
 });
 
-export const LoadingSpinnerContainer = styled<SharedStylePropsT>(
-  'div',
-  ({$theme, $size}) => {
-    // we don't have a theming value for this
-    let margins = '3px';
-    if ($size === SIZE.mini || $size === SIZE.compact) {
-      margins = $theme.sizing.scale0;
-    }
-    if ($size === SIZE.large) {
-      margins = $theme.sizing.scale100;
-    }
+export const LoadingSpinnerContainer = styled<SharedStylePropsT>('div', ({ $theme, $size }) => {
+  // we don't have a theming value for this
+  let margins = '3px';
+  if ($size === SIZE.mini || $size === SIZE.compact) {
+    margins = $theme.sizing.scale0;
+  }
+  if ($size === SIZE.large) {
+    margins = $theme.sizing.scale100;
+  }
 
-    return {
-      lineHeight: 0,
-      position: 'static',
-      marginBottom: margins,
-      marginTop: margins,
-    };
-  },
-);
+  return {
+    lineHeight: 0,
+    position: 'static',
+    marginBottom: margins,
+    marginTop: margins,
+  };
+});
 
 export const LoadingSpinner = styled<SharedStylePropsT>(
   'span',
-  ({$theme, $kind, $disabled, $size}) => {
-    const {foreground, background} = getLoadingSpinnerColors({
+  ({ $theme, $kind, $disabled, $size }) => {
+    const { foreground, background } = getLoadingSpinnerColors({
       $theme,
       $kind,
       $disabled,
@@ -150,10 +152,10 @@ export const LoadingSpinner = styled<SharedStylePropsT>(
         },
       },
     };
-  },
+  }
 );
 
-function getLoadingSpinnerColors({$theme, $kind, $disabled}) {
+function getLoadingSpinnerColors({ $theme, $kind, $disabled }) {
   if ($disabled) {
     return {
       foreground: $theme.colors.buttonDisabledSpinnerForeground,
@@ -189,7 +191,7 @@ function getLoadingSpinnerColors({$theme, $kind, $disabled}) {
   }
 }
 
-function getBorderRadiiStyles({$theme, $size, $shape}) {
+function getBorderRadiiStyles({ $theme, $size, $shape }) {
   let value = $theme.borders.buttonBorderRadius;
 
   if ($shape === SHAPE.pill) {
@@ -212,7 +214,7 @@ function getBorderRadiiStyles({$theme, $size, $shape}) {
   };
 }
 
-function getFontStyles({$theme, $size}) {
+function getFontStyles({ $theme, $size }): FontT {
   switch ($size) {
     case SIZE.mini:
       return $theme.typography.font150;
@@ -225,7 +227,7 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
-function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+function getDisabledStyles({ $theme, $kind, $isSelected, $disabled }) {
   if ($disabled && $isSelected) {
     if ($kind === KIND.primary || $kind === KIND.secondary) {
       return {
@@ -249,79 +251,77 @@ function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
   };
 }
 
-function getPaddingStyles({$theme, $size, $shape}) {
-  const iconShape =
-    $shape === SHAPE.square ||
-    $shape === SHAPE.circle ||
-    $shape === SHAPE.round;
+function getPaddingStyles({ $theme, $size, $shape }) {
+  const iconShape = $shape === SHAPE.square || $shape === SHAPE.circle || $shape === SHAPE.round;
   switch ($size) {
     case SIZE.mini:
       return {
         paddingTop: $theme.sizing.scale200,
         paddingBottom: $theme.sizing.scale200,
-        paddingLeft: iconShape
-          ? $theme.sizing.scale200
-          : $theme.sizing.scale300,
-        paddingRight: iconShape
-          ? $theme.sizing.scale200
-          : $theme.sizing.scale300,
+        paddingLeft: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300,
+        paddingRight: iconShape ? $theme.sizing.scale200 : $theme.sizing.scale300,
       };
     case SIZE.compact:
       return {
         paddingTop: $theme.sizing.scale400,
         paddingBottom: $theme.sizing.scale400,
-        paddingLeft: iconShape
-          ? $theme.sizing.scale400
-          : $theme.sizing.scale500,
-        paddingRight: iconShape
-          ? $theme.sizing.scale400
-          : $theme.sizing.scale500,
+        paddingLeft: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500,
+        paddingRight: iconShape ? $theme.sizing.scale400 : $theme.sizing.scale500,
       };
     case SIZE.large:
       return {
         paddingTop: $theme.sizing.scale600,
         paddingBottom: $theme.sizing.scale600,
-        paddingLeft: iconShape
-          ? $theme.sizing.scale600
-          : $theme.sizing.scale700,
-        paddingRight: iconShape
-          ? $theme.sizing.scale600
-          : $theme.sizing.scale700,
+        paddingLeft: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
+        paddingRight: iconShape ? $theme.sizing.scale600 : $theme.sizing.scale700,
       };
     default:
       return {
         paddingTop: $theme.sizing.scale550,
         paddingBottom: $theme.sizing.scale550,
-        paddingLeft: iconShape
-          ? $theme.sizing.scale550
-          : $theme.sizing.scale600,
-        paddingRight: iconShape
-          ? $theme.sizing.scale550
-          : $theme.sizing.scale600,
+        paddingLeft: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600,
+        paddingRight: iconShape ? $theme.sizing.scale550 : $theme.sizing.scale600,
       };
   }
 }
 
-type KindStylesT = {|
+type ColorStylesT = {|
   color?: string,
   backgroundColor?: string,
   ':hover'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
   ':focus'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
   ':active'?: {
-    backgroundColor: string,
+    boxShadow?: string,
+    backgroundColor?: string,
   },
 |};
-function getKindStyles({
+function getColorStyles({
   $theme,
+  $colors,
   $isLoading,
   $isSelected,
   $kind,
   $disabled,
-}): KindStylesT {
+}): ColorStylesT {
+  if ($colors) {
+    return {
+      color: $colors.color,
+      backgroundColor: $colors.backgroundColor,
+      ':hover': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.04)',
+      },
+      ':active': {
+        boxShadow: 'inset 999px 999px 0px rgba(0, 0, 0, 0.08)',
+      },
+    };
+  }
+
   if ($disabled) {
     return Object.freeze({});
   }
@@ -407,7 +407,14 @@ function getKindStyles({
   }
 }
 
-function getShapeStyles({$theme, $shape, $size}) {
+function getShapeStyles({ $shape, $size }): {
+  height?: string,
+  width?: string,
+  paddingTop?: number,
+  paddingBottom?: number,
+  paddingLeft?: number,
+  paddingRight?: number,
+} {
   if ($shape === SHAPE.circle || $shape === SHAPE.square) {
     let height, width;
     switch ($size) {

package/button/types.js.flow

@@ -7,8 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {KIND, SIZE, SHAPE} from './constants.js';
-import type {OverrideT} from '../helpers/overrides.js';
+import { KIND, SIZE, SHAPE } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type OverridesT = {
   Root?: OverrideT,
@@ -19,11 +21,17 @@ export type OverridesT = {
   LoadingSpinner?: OverrideT,
 };
 
+export type CustomColorsT = {|
+  backgroundColor: string,
+  color: string,
+|};
+
 export type ButtonPropsT = {
   children?: React$Node,
+  colors?: CustomColorsT,
   disabled?: boolean,
   /** A helper rendered at the end of the button. */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   endEnhancer?: React.Node | React.AbstractComponent<any>,
   /** Show loading button style and spinner. */
   isLoading?: boolean,
@@ -38,12 +46,13 @@ export type ButtonPropsT = {
   /** Defines the size of the button */
   size?: $Keys<typeof SIZE>,
   /** A helper rendered at the start of the button. */
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   startEnhancer?: React.Node | React.AbstractComponent<any>,
   type?: 'submit' | 'reset' | 'button',
 };
 
 export type SharedStylePropsT = {
+  $colors?: CustomColorsT,
   $kind?: $Keys<typeof KIND>,
   $isSelected?: boolean,
   $shape?: $Keys<typeof SHAPE>,

package/button/utils.js

@@ -12,13 +12,15 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 function getSharedProps(_ref) {
-  var disabled = _ref.disabled,
+  var colors = _ref.colors,
+      disabled = _ref.disabled,
       isLoading = _ref.isLoading,
       isSelected = _ref.isSelected,
       kind = _ref.kind,
       shape = _ref.shape,
       size = _ref.size;
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/button/utils.js.flow

@@ -5,17 +5,19 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {ButtonPropsT} from './types.js';
+import type { ButtonPropsT, SharedStylePropsT } from './types.js';
 
 export function getSharedProps({
+  colors,
   disabled,
   isLoading,
   isSelected,
   kind,
   shape,
   size,
-}: ButtonPropsT) {
+}: ButtonPropsT): $Shape<SharedStylePropsT> {
   return {
+    $colors: colors,
     $disabled: disabled,
     $isLoading: isLoading,
     $isSelected: isSelected,

package/button-group/button-group.js

@@ -107,7 +107,6 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           _this$props$mode = _this$props.mode,
           mode = _this$props$mode === void 0 ? _constants.MODE.checkbox : _this$props$mode,
           children = _this$props.children,
-          ariaLabel = _this$props.ariaLabel,
           selected = _this$props.selected,
           disabled = _this$props.disabled,
           _onClick = _this$props.onClick,
@@ -120,6 +119,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
       var isRadio = mode === _constants.MODE.radio;
       var numItems = React.Children.count(children);
       return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {

package/button-group/button-group.js.flow

@@ -8,13 +8,13 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {KIND, SIZE, SHAPE} from '../button/index.js';
-import {MODE} from './constants.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {LocaleContext} from '../locale/index.js';
+import { KIND, SIZE, SHAPE } from '../button/index.js';
+import { MODE } from './constants.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { LocaleContext } from '../locale/index.js';
 
-import {StyledRoot} from './styled-components.js';
-import type {PropsT} from './types.js';
+import { StyledRoot } from './styled-components.js';
+import type { PropsT } from './types.js';
 
 function isIndexSelected(selected, index) {
   if (!Array.isArray(selected) && typeof selected !== 'number') {
@@ -29,8 +29,8 @@ function isIndexSelected(selected, index) {
 }
 
 export default class ButtonGroup extends React.Component<PropsT> {
-  childRefs: // eslint-disable-next-line flowtype/no-weak-types
-  {[key: number]: React.ElementRef<any>} = {};
+  childRefs: // flowlint-next-line unclear-type:off
+  { [key: number]: React.ElementRef<any> } = {};
   static defaultProps = {
     disabled: false,
     onClick: () => {},
@@ -43,7 +43,6 @@ export default class ButtonGroup extends React.Component<PropsT> {
       overrides = {},
       mode = MODE.checkbox,
       children,
-      ariaLabel,
       selected,
       disabled,
       onClick,
@@ -52,13 +51,14 @@ export default class ButtonGroup extends React.Component<PropsT> {
       size,
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === MODE.radio;
 
     const numItems = React.Children.count(children);
 
     return (
       <LocaleContext.Consumer>
-        {locale => (
+        {(locale) => (
           <Root
             aria-label={ariaLabel || locale.buttongroup.ariaLabel}
             data-baseweb="button-group"
@@ -89,26 +89,24 @@ export default class ButtonGroup extends React.Component<PropsT> {
                   (isRadio && (!selected || selected === -1) && index === 0)
                     ? 0
                     : -1,
-                onKeyDown: e => {
+                onKeyDown: (e) => {
                   if (!isRadio) return;
                   const value = Number(selected) ? Number(selected) : 0;
                   if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
                     e.preventDefault && e.preventDefault();
                     const prevIndex = value - 1 < 0 ? numItems - 1 : value - 1;
                     onClick && onClick(e, prevIndex);
-                    this.childRefs[prevIndex].current &&
-                      this.childRefs[prevIndex].current.focus();
+                    this.childRefs[prevIndex].current && this.childRefs[prevIndex].current.focus();
                   }
                   if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
                     e.preventDefault && e.preventDefault();
                     const nextIndex = value + 1 > numItems - 1 ? 0 : value + 1;
                     onClick && onClick(e, nextIndex);
-                    this.childRefs[nextIndex].current &&
-                      this.childRefs[nextIndex].current.focus();
+                    this.childRefs[nextIndex].current && this.childRefs[nextIndex].current.focus();
                   }
                 },
                 kind,
-                onClick: event => {
+                onClick: (event) => {
                   if (disabled) {
                     return;
                   }
@@ -125,7 +123,7 @@ export default class ButtonGroup extends React.Component<PropsT> {
                 size,
                 overrides: {
                   BaseButton: {
-                    style: ({$theme}) => {
+                    style: ({ $theme }) => {
                       // Even though baseui's buttons have square corners, some applications override to
                       // rounded. Maintaining corner radius in this circumstance is ideal to avoid further
                       // customization.

package/button-group/index.d.ts

@@ -22,6 +22,7 @@ export interface ButtonGroupOverrides {
 
 export interface ButtonGroupProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children: React.ReactNode;
   disabled?: boolean;
   mode?: MODE[keyof MODE];

package/button-group/index.js.flow

@@ -6,16 +6,16 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as ButtonGroup} from './button-group.js';
-export {default as StatefulButtonGroup} from './stateful-button-group.js';
-export {default as StatefulContainer} from './stateful-container.js';
+export { default as ButtonGroup } from './button-group.js';
+export { default as StatefulButtonGroup } from './stateful-button-group.js';
+export { default as StatefulContainer } from './stateful-container.js';
 
 // Constants
-export {SIZE, SHAPE} from '../button/constants.js';
-export {MODE, STATE_CHANGE_TYPE} from './constants.js';
+export { SIZE, SHAPE } from '../button/constants.js';
+export { MODE, STATE_CHANGE_TYPE } from './constants.js';
 
 // Styled elements
-export {StyledRoot} from './styled-components.js';
+export { StyledRoot } from './styled-components.js';
 
 // Types
 export type * from './types.js';

package/button-group/stateful-button-group.js

@@ -35,6 +35,10 @@ function StatefulButtonGroup(props) {
   }, restProps), function (_ref) {
     var containerProps = _extends({}, _ref);
 
-    return /*#__PURE__*/React.createElement(_buttonGroup.default, containerProps, props.children);
+    return (
+      /*#__PURE__*/
+      //$FlowFixMe
+      React.createElement(_buttonGroup.default, containerProps, props.children)
+    );
   });
 }

package/button-group/stateful-button-group.js.flow

@@ -10,13 +10,14 @@ import * as React from 'react';
 
 import ButtonGroup from './button-group.js';
 import StatefulContainer from './stateful-container.js';
-import type {StatefulPropsT} from './types.js';
+import type { StatefulPropsT } from './types.js';
 
 export default function StatefulButtonGroup(props: StatefulPropsT) {
-  const {children, initialState, ...restProps} = props;
+  const { children, initialState, ...restProps } = props;
   return (
     <StatefulContainer initialState={initialState} {...restProps}>
-      {({...containerProps}) => (
+      {({ ...containerProps }) => (
+        //$FlowFixMe
         <ButtonGroup {...containerProps}>{props.children}</ButtonGroup>
       )}
     </StatefulContainer>