baseui 0.0.0-next-d21676b → 0.0.0-next-699f2d6

package/a11y/a11y.js.flow

@@ -28,7 +28,7 @@ function validateNode(node) {
 
 function segmentViolationsByNode(violations) {
   const nodes = violations.reduce((map, violation) => {
-    violation.nodes.forEach(node => {
+    violation.nodes.forEach((node) => {
       if (!map[node.target]) {
         map[node.target] = [violation];
       } else {
@@ -93,7 +93,7 @@ function Violation(props: ViolationPropsT) {
       <TetherBehavior
         anchorRef={anchor}
         popperRef={popper}
-        onPopperUpdate={update => setOffset(update.popper)}
+        onPopperUpdate={(update) => setOffset(update.popper)}
         placement={TETHER_PLACEMENT.bottom}
       >
         <ViolationContainer

package/accordion/panel.js.flow

@@ -176,7 +176,7 @@ const Panel = ({
 
   return (
     <LocaleContext.Consumer>
-      {locale => (
+      {(locale) => (
         <PanelContainer {...sharedProps} {...panelContainerProps}>
           <Header
             tabIndex={0}

package/accordion/stateful-panel-container.js.flow

@@ -43,7 +43,7 @@ class StatefulPanelContainer extends React.Component<
 
   internalSetState(type: StateChangeTypeT, changes: PanelStateT) {
     const {stateReducer} = this.props;
-    this.setState(prevState =>
+    this.setState((prevState) =>
       stateReducer ? stateReducer(type, changes, prevState) : changes,
     );
   }

package/accordion/stateful-panel.js.flow

@@ -14,7 +14,7 @@ export default function StatefulPanel(props: StatefulPanelPropsT) {
   const {children, ...restProps} = props;
   return (
     <StatefulContainer {...restProps}>
-      {componentProps => <Panel {...componentProps}>{children}</Panel>}
+      {(componentProps) => <Panel {...componentProps}>{children}</Panel>}
     </StatefulContainer>
   );
 }

package/accordion/stateless-accordion.js.flow

@@ -43,7 +43,7 @@ function StatelessAccordion({
                     }
                   } else {
                     if (expanded.includes(key)) {
-                      next = expanded.filter(k => k !== key);
+                      next = expanded.filter((k) => k !== key);
                     } else {
                       next = [...expanded, key];
                     }

package/accordion/styled-components.js.flow

@@ -21,7 +21,7 @@ export const Root = styled('ul', {
   width: '100%',
 });
 
-export const PanelContainer = styled<SharedStylePropsArgT>('li', props => {
+export const PanelContainer = styled<SharedStylePropsArgT>('li', (props) => {
   const {
     $expanded,
     $theme: {colors},
@@ -35,7 +35,7 @@ export const PanelContainer = styled<SharedStylePropsArgT>('li', props => {
   };
 });
 
-export const Header = styled<SharedStylePropsArgT>('div', props => {
+export const Header = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $disabled,
     $isFocusVisible,
@@ -65,7 +65,7 @@ export const Header = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const ToggleIcon = styled<SharedStylePropsArgT>('svg', props => {
+export const ToggleIcon = styled<SharedStylePropsArgT>('svg', (props) => {
   const {$theme, $disabled, $color} = props;
   return {
     ...getSvgStyles(props),
@@ -75,7 +75,7 @@ export const ToggleIcon = styled<SharedStylePropsArgT>('svg', props => {
   };
 });
 
-export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', props => {
+export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', (props) => {
   const {$theme, $expanded} = props;
   return {
     transform: $expanded ? 'rotate(0)' : 'rotate(-90deg)',
@@ -86,7 +86,7 @@ export const ToggleIconGroup = styled<SharedStylePropsArgT>('g', props => {
   };
 });
 
-export const Content = styled<SharedStylePropsArgT>('div', props => {
+export const Content = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $theme: {animation, colors, sizing, typography},
     $expanded,
@@ -116,7 +116,7 @@ export const Content = styled<SharedStylePropsArgT>('div', props => {
 
 export const ContentAnimationContainer = styled<
   {$height: string | number} & SharedStylePropsArgT,
->('div', props => {
+>('div', (props) => {
   const {
     $height,
     $theme: {animation},

package/accordion/types.js.flow

@@ -166,9 +166,10 @@ type SharedStatefulPanelContainerPropsT = {
   onChange?: OnChangeHandlerT,
   stateReducer?: PanelStateReducerT,
 };
-export type StatefulPanelContainerPropsT = SharedStatefulPanelContainerPropsT & {
-  children: (props: $Diff<PanelPropsT, {children: React.Node}>) => React.Node,
-};
+export type StatefulPanelContainerPropsT =
+  SharedStatefulPanelContainerPropsT & {
+    children: (props: $Diff<PanelPropsT, {children: React.Node}>) => React.Node,
+  };
 
 // Props for stateful panel
 export type StatefulPanelPropsT = SharedStatefulPanelContainerPropsT &

package/app-nav-bar/app-nav-bar.js.flow

@@ -129,8 +129,8 @@ export default function AppNavBar(props: AppNavBarPropsT) {
   const {
     title,
     mapItemToNode = defaultMapItemToNode,
-    onMainItemSelect = item => {},
-    onUserItemSelect = item => {},
+    onMainItemSelect = (item) => {},
+    onUserItemSelect = (item) => {},
     overrides = {},
     userItems = [],
     username,

package/app-nav-bar/mobile-menu.js

@@ -69,7 +69,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 var USER_MENU_ITEM = 'USER_MENU_ITEM';
-var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
+var PARENT_MENU_ITEM = 'PARENT_MENU_ITEM'; // eslint-disable-next-line react/display-name
+
 var MobileNavMenuItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
       _props$mapItemToNode = props.mapItemToNode,
@@ -200,6 +201,7 @@ function MobileMenu(props) {
         boxShadow: 'none'
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
       return /*#__PURE__*/React.createElement(MobileNavMenuItem, _extends({
         ref: ref

package/app-nav-bar/mobile-menu.js.flow

@@ -28,6 +28,7 @@ const USER_TITLE_ITEM = 'USER_TITLE_ITEM';
 const USER_MENU_ITEM = 'USER_MENU_ITEM';
 const PARENT_MENU_ITEM = 'PARENT_MENU_ITEM';
 
+// eslint-disable-next-line react/display-name
 const MobileNavMenuItem = React.forwardRef((props, ref) => {
   const {
     item,
@@ -94,7 +95,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
             item: {...rest},
             label: props.username,
             [USER_TITLE_ITEM]: true,
-            children: userItems.map(item => {
+            children: userItems.map((item) => {
               return {
                 ...item,
                 [USER_MENU_ITEM]: true,
@@ -164,6 +165,7 @@ export default function MobileMenu(props: AppNavBarPropsT) {
           boxShadow: 'none',
         },
       },
+      // eslint-disable-next-line react/display-name
       ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <MobileNavMenuItem

package/app-nav-bar/styled-components.js.flow

@@ -40,7 +40,7 @@ const StyledButton = styled<{$isFocusVisible: boolean}>(
   }),
 );
 
-export const StyledRoot = styled<{}>('div', props => {
+export const StyledRoot = styled<{}>('div', (props) => {
   const {$theme} = props;
   return {
     ...$theme.typography.font300,
@@ -58,7 +58,7 @@ export const StyledSubnavContainer = styled<{}>('div', ({$theme}) => {
   };
 });
 
-export const StyledSpacing = styled<{}>('div', props => {
+export const StyledSpacing = styled<{}>('div', (props) => {
   const {$theme} = props;
   return {
     boxSizing: 'border-box',
@@ -112,7 +112,7 @@ export const StyledMainMenuItem = styled<{
   $active?: boolean,
   $isFocusVisible: boolean,
   $kind: $Values<typeof KIND>,
-}>('div', props => {
+}>('div', (props) => {
   const {
     $active,
     $isFocusVisible,

package/app-nav-bar/types.js.flow

@@ -54,15 +54,15 @@ export type UserMenuPropsT = {|
   username?: string,
   usernameSubtitle?: React.Node,
   userImgUrl?: string,
-  onUserItemSelect?: NavItemT => mixed,
+  onUserItemSelect?: (NavItemT) => mixed,
 |};
 
 export type AppNavBarPropsT = {|
   ...UserMenuPropsT,
-  isMainItemActive?: NavItemT => boolean,
+  isMainItemActive?: (NavItemT) => boolean,
   mainItems?: NavItemT[],
-  mapItemToNode?: NavItemT => React.Node,
-  onMainItemSelect?: NavItemT => mixed,
+  mapItemToNode?: (NavItemT) => React.Node,
+  onMainItemSelect?: (NavItemT) => mixed,
   overrides?: OverridesT,
   title?: React.Node,
 |};

package/app-nav-bar/user-menu.js

@@ -55,7 +55,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-var MENU_ITEM_WIDTH = '275px';
+var MENU_ITEM_WIDTH = '275px'; // eslint-disable-next-line react/display-name
+
 var UserMenuListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var item = props.item,
       _props$mapItemToNode = props.mapItemToNode,
@@ -115,6 +116,7 @@ function UserMenuComponent(props) {
 
   userMenuProps.overrides = (0, _overrides.mergeOverrides)({
     List: {
+      // eslint-disable-next-line react/display-name
       component: /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         var children = _ref2.children,
             restProps = _objectWithoutProperties(_ref2, ["children"]);
@@ -132,6 +134,7 @@ function UserMenuComponent(props) {
         width: MENU_ITEM_WIDTH
       }
     },
+    // eslint-disable-next-line react/display-name
     ListItem: /*#__PURE__*/React.forwardRef(function (listItemProps, ref) {
       return /*#__PURE__*/React.createElement(UserMenuListItem, _extends({
         ref: ref

package/app-nav-bar/user-menu.js.flow

@@ -27,6 +27,7 @@ import {defaultMapItemToNode} from './utils.js';
 
 const MENU_ITEM_WIDTH = '275px';
 
+// eslint-disable-next-line react/display-name
 const UserMenuListItem = React.forwardRef((props, ref) => {
   const {item, mapItemToNode = defaultMapItemToNode} = props;
   // Replace with a user menu item renderer
@@ -46,8 +47,8 @@ const svgStyleOverride = ({$theme}) => ({paddingLeft: $theme.sizing.scale200});
 
 export default function UserMenuComponent(props: {|
   ...UserMenuPropsT,
-  mapItemToNode: NavItemT => React.Node,
-  onItemSelect: NavItemT => mixed,
+  mapItemToNode: (NavItemT) => React.Node,
+  onItemSelect: (NavItemT) => mixed,
   overrides: OverridesT,
 |}) {
   // isOpen is used for displaying different arrow icons in open or closed state
@@ -78,6 +79,7 @@ export default function UserMenuComponent(props: {|
   userMenuProps.overrides = mergeOverrides(
     {
       List: {
+        // eslint-disable-next-line react/display-name
         component: React.forwardRef(({children, ...restProps}, ref) => (
           <StyledList {...restProps} ref={ref}>
             <UserMenuProfileListItem {...userMenuProfileListItemProps}>
@@ -94,6 +96,7 @@ export default function UserMenuComponent(props: {|
         )),
         style: {width: MENU_ITEM_WIDTH},
       },
+      // eslint-disable-next-line react/display-name
       ListItem: React.forwardRef((listItemProps, ref) => {
         return (
           <UserMenuListItem

package/app-nav-bar/user-profile-tile.js.flow

@@ -24,29 +24,23 @@ export default function UserProfileTile(props: {|
 |}) {
   const {overrides = {}, username, usernameSubtitle, userImgUrl} = props;
 
-  const [
-    UserProfileTileContainer,
-    userProfileTileContainerProps,
-  ] = getOverrides(
-    overrides.UserProfileTileContainer,
-    StyledUserProfileTileContainer,
-  );
+  const [UserProfileTileContainer, userProfileTileContainerProps] =
+    getOverrides(
+      overrides.UserProfileTileContainer,
+      StyledUserProfileTileContainer,
+    );
 
-  const [
-    UserProfilePictureContainer,
-    userProfilePictureContainerProps,
-  ] = getOverrides(
-    overrides.UserProfilePictureContainer,
-    StyledUserProfilePictureContainer,
-  );
+  const [UserProfilePictureContainer, userProfilePictureContainerProps] =
+    getOverrides(
+      overrides.UserProfilePictureContainer,
+      StyledUserProfilePictureContainer,
+    );
 
-  const [
-    UserProfileInfoContainer,
-    userProfileInfoContainerProps,
-  ] = getOverrides(
-    overrides.UserProfileInfoContainer,
-    StyledUserProfileInfoContainer,
-  );
+  const [UserProfileInfoContainer, userProfileInfoContainerProps] =
+    getOverrides(
+      overrides.UserProfileInfoContainer,
+      StyledUserProfileInfoContainer,
+    );
 
   return (
     // Replace with a  profile tile renderer: renderUserProfileTile()

package/app-nav-bar/utils.js.flow

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 
 import type {NavItemT} from './types.js';
 
-type GetUniqueIdentifierT = NavItemT => string | number;
+type GetUniqueIdentifierT = (NavItemT) => string | number;
 
 export function defaultMapItemToNode(item: NavItemT) {
   if (__DEV__) {
@@ -35,9 +35,9 @@ function defaultGetUniqueIdentifier(item: NavItemT) {
 
 export function mapItemsActive(
   items: NavItemT[],
-  predicate: NavItemT => boolean,
+  predicate: (NavItemT) => boolean,
 ) {
-  return items.map<NavItemT>(current => {
+  return items.map<NavItemT>((current) => {
     if (predicate(current)) {
       current.active = true;
     } else {
@@ -46,7 +46,7 @@ export function mapItemsActive(
 
     if (current.children) {
       current.children = mapItemsActive(current.children, predicate);
-      if (current.children.some(child => child.active)) {
+      if (current.children.some((child) => child.active)) {
         current.active = true;
       }
     }
@@ -62,7 +62,7 @@ export function setItemActive(
 ) {
   return mapItemsActive(
     items,
-    current => getUniqueIdentifier(current) === getUniqueIdentifier(item),
+    (current) => getUniqueIdentifier(current) === getUniqueIdentifier(item),
   );
 }
 

package/avatar/avatar.js.flow

@@ -19,11 +19,8 @@ import type {PropsT} from './types.js';
 
 function getInitials(name) {
   const words = name.split(' ');
-  const initials = words.map(word => word[0]);
-  return initials
-    .slice(0, 2)
-    .join('')
-    .toUpperCase();
+  const initials = words.map((word) => word[0]);
+  return initials.slice(0, 2).join('').toUpperCase();
 }
 
 export default function Avatar({

package/avatar/styled-components.js.flow

@@ -21,7 +21,7 @@ function getSize(props) {
   return $theme.sizing[size] || size;
 }
 
-export const Avatar = styled<AvatarStylePropsT>('img', props => {
+export const Avatar = styled<AvatarStylePropsT>('img', (props) => {
   const themedSize = getSize(props);
 
   return {
@@ -37,7 +37,7 @@ export const Avatar = styled<AvatarStylePropsT>('img', props => {
   };
 });
 
-export const Initials = styled<InitialsStylePropsT>('div', props => ({
+export const Initials = styled<InitialsStylePropsT>('div', (props) => ({
   ...props.$theme.typography.font300,
   color: props.$theme.colors.mono100,
   alignItems: 'center',
@@ -46,7 +46,7 @@ export const Initials = styled<InitialsStylePropsT>('div', props => ({
   height: '100%',
 }));
 
-export const Root = styled<RootStylePropsT>('div', props => {
+export const Root = styled<RootStylePropsT>('div', (props) => {
   const {$didImageFailToLoad} = props;
   const themedSize = getSize(props);
 

package/block/styled-components.js.flow

@@ -32,7 +32,7 @@ function build(breakpoints: BreakpointsT) {
   const mediaQueries = getMediaQueries(breakpoints);
 
   return {
-    apply: ({property, transform = x => x, value}: ApplyParams) => {
+    apply: ({property, transform = (x) => x, value}: ApplyParams) => {
       if (value === null || value === undefined) {
         return;
       }
@@ -65,17 +65,17 @@ function getFontValue(obj, key) {
   return obj[key];
 }
 
-export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
+export const StyledBlock = styled<StyledBlockPropsT>('div', (props) => {
   const {breakpoints, colors, typography, sizing} = props.$theme;
 
   const get = (obj, key) => obj[key];
-  const getScale = size => sizing[size] || size;
+  const getScale = (size) => sizing[size] || size;
 
   const styles = build(breakpoints);
   styles.apply({
     property: 'color',
     value: get(props, '$color'),
-    transform: color => colors[color] || color,
+    transform: (color) => colors[color] || color,
   });
   styles.apply({
     property: 'backgroundAttachment',
@@ -88,7 +88,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'backgroundColor',
     value: get(props, '$backgroundColor'),
-    transform: backgroundColor => colors[backgroundColor] || backgroundColor,
+    transform: (backgroundColor) => colors[backgroundColor] || backgroundColor,
   });
   styles.apply({
     property: 'backgroundImage',
@@ -113,22 +113,22 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'fontFamily',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontFamily'),
+    transform: (font) => getFontValue(typography[font], 'fontFamily'),
   });
   styles.apply({
     property: 'fontWeight',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontWeight'),
+    transform: (font) => getFontValue(typography[font], 'fontWeight'),
   });
   styles.apply({
     property: 'fontSize',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'fontSize'),
+    transform: (font) => getFontValue(typography[font], 'fontSize'),
   });
   styles.apply({
     property: 'lineHeight',
     value: get(props, '$font'),
-    transform: font => getFontValue(typography[font], 'lineHeight'),
+    transform: (font) => getFontValue(typography[font], 'lineHeight'),
   });
 
   styles.apply({
@@ -240,7 +240,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflowX',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow === 'scrollX') {
         return 'scroll';
       }
@@ -250,7 +250,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflowY',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow === 'scrollY') {
         return 'scroll';
       }
@@ -260,7 +260,7 @@ export const StyledBlock = styled<StyledBlockPropsT>('div', props => {
   styles.apply({
     property: 'overflow',
     value: get(props, '$overflow'),
-    transform: overflow => {
+    transform: (overflow) => {
       if (overflow !== 'scrollX' && overflow !== 'scrollY') {
         return overflow;
       }

package/breadcrumbs/breadcrumbs.js.flow

@@ -59,7 +59,7 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
         {(showTrailingSeparator || index !== childrenArray.length - 1) && (
           <Separator {...baseSeparatorProps} key={`separator-${index}`}>
             <ThemeContext.Consumer>
-              {theme =>
+              {(theme) =>
                 theme.direction === 'rtl' ? (
                   <Left {...baseIconProps} />
                 ) : (
@@ -75,7 +75,7 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
 
   return (
     <LocaleContext.Consumer>
-      {locale => (
+      {(locale) => (
         <Root
           aria-label={
             props['aria-label'] ||

package/button/button.js.flow

@@ -75,13 +75,11 @@ class Button extends React.Component<
       overrides.LoadingSpinner,
       StyledLoadingSpinner,
     );
-    const [
-      LoadingSpinnerContainer,
-      loadingSpinnerContainerProps,
-    ] = getOverrides(
-      overrides.LoadingSpinnerContainer,
-      StyledLoadingSpinnerContainer,
-    );
+    const [LoadingSpinnerContainer, loadingSpinnerContainerProps] =
+      getOverrides(
+        overrides.LoadingSpinnerContainer,
+        StyledLoadingSpinnerContainer,
+      );
     const sharedProps = {
       ...getSharedProps(this.props),
       $isFocusVisible: this.state.isFocusVisible,

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/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,8 +70,9 @@ 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,
@@ -345,13 +347,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({});
   }