baseui 10.10.0 → 10.12.0

package/select/select.js.flow

@@ -11,12 +11,7 @@ import MultiValue from './multi-value.js';
 import SingleValue from './value.js';
 
 function Select(props: React.ElementConfig<typeof SelectComponent>) {
-  return (
-    <SelectComponent
-      {...props}
-      valueComponent={props.multi ? MultiValue : SingleValue}
-    />
-  );
+  return <SelectComponent {...props} valueComponent={props.multi ? MultiValue : SingleValue} />;
 }
 
 export default Select;

package/select/single-select.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import SelectComponent from './select-component.js';
 import Value from './value.js';
-import type {PropsT} from './types.js';
+import type { PropsT } from './types.js';
 
 function MultiSelect(props: $Shape<PropsT>) {
   return <SelectComponent {...props} multi={false} valueComponent={Value} />;

package/select/stateful-select-container.js.flow

@@ -6,19 +6,11 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {
-  StatefulContainerPropsT,
-  StateReducerT,
-  StateT,
-  OnChangeParamsT,
-} from './types.js';
+import type { StatefulContainerPropsT, StateReducerT, StateT, OnChangeParamsT } from './types.js';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulSelectContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateT,
-> {
+class StatefulSelectContainer extends React.Component<StatefulContainerPropsT, StateT> {
   static defaultProps = {
     initialState: {
       value: [],
@@ -28,7 +20,7 @@ class StatefulSelectContainer extends React.Component<
     stateReducer: defaultStateReducer,
   };
 
-  state = {...this.props.initialState};
+  state = { ...this.props.initialState };
 
   onChange = (params: OnChangeParamsT) => {
     this.internalSetState(params);
@@ -36,8 +28,8 @@ class StatefulSelectContainer extends React.Component<
   };
 
   internalSetState = (params: OnChangeParamsT) => {
-    const {stateReducer} = this.props;
-    const nextState: StateT = {value: params.value};
+    const { stateReducer } = this.props;
+    const nextState: StateT = { value: params.value };
     this.setState(stateReducer(params.type, nextState, this.state));
   };
 

package/select/stateful-select.js.flow

@@ -9,7 +9,7 @@ import * as React from 'react';
 import StatefulContainer from './stateful-select-container.js';
 import Select from './select.js';
 import defaultProps from './default-props.js';
-import type {PropsT, StatefulSelectPropsT} from './types.js';
+import type { PropsT, StatefulSelectPropsT } from './types.js';
 
 export default function StatefulSelect(props: StatefulSelectPropsT) {
   return (

package/select/styled-components.js.flow

@@ -6,13 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import {TYPE} from './constants.js';
-import {StyledList, StyledListItem} from '../menu/index.js';
-import {SIZE} from './constants.js';
-import type {SharedStylePropsArgT} from './types.js';
-import {ellipsisText} from '../styles/util.js';
-import type {ThemeT} from '../styles/types.js';
+import { styled } from '../styles/index.js';
+import { TYPE, SIZE } from './constants.js';
+import { StyledList, StyledListItem } from '../menu/index.js';
+
+import type { SharedStylePropsArgT } from './types.js';
+import { ellipsisText } from '../styles/util.js';
+import type { ThemeT } from '../styles/types.js';
 
 function getFont(size = SIZE.default, typography) {
   return {
@@ -26,21 +26,17 @@ function getFont(size = SIZE.default, typography) {
 function getControlPadding(props) {
   const {
     $theme,
-    $theme: {sizing},
+    $theme: { sizing },
     $size = SIZE.default,
     $type,
     $multi,
     $isEmpty,
   } = props;
   const isSearch = $type === TYPE.search;
-  const paddingLeft = isSearch
-    ? `calc(${sizing.scale1000} - ${sizing.scale0})`
-    : sizing.scale400;
+  const paddingLeft = isSearch ? `calc(${sizing.scale1000} - ${sizing.scale0})` : sizing.scale400;
 
-  const paddingStartDir: string =
-    $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-  const paddingEndDir: string =
-    $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+  const paddingStartDir: string = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  const paddingEndDir: string = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
 
   return {
     [SIZE.mini]: {
@@ -48,92 +44,65 @@ function getControlPadding(props) {
       paddingTop: $multi && !$isEmpty ? 0 : sizing.scale100,
       paddingBottom: $multi && !$isEmpty ? 0 : sizing.scale100,
       [paddingStartDir]:
-        $multi && !$isEmpty
-          ? `calc(${paddingLeft} - ${sizing.scale0})`
-          : paddingLeft,
+        $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
       [paddingEndDir]: '0',
     },
     [SIZE.compact]: {
       // `sizing.scale0` based on the multi value component (Tag) top and bottom margin
       paddingTop:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale100} - ${sizing.scale0})`
-          : sizing.scale200,
+        $multi && !$isEmpty ? `calc(${sizing.scale100} - ${sizing.scale0})` : sizing.scale200,
       paddingBottom:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale100} - ${sizing.scale0})`
-          : sizing.scale200,
+        $multi && !$isEmpty ? `calc(${sizing.scale100} - ${sizing.scale0})` : sizing.scale200,
       [paddingStartDir]:
-        $multi && !$isEmpty
-          ? `calc(${paddingLeft} - ${sizing.scale0})`
-          : paddingLeft,
+        $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
       [paddingEndDir]: '0',
     },
     [SIZE.default]: {
       // `sizing.scale0` based on the multi value component (Tag) top and bottom margin
       paddingTop:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale400} - ${sizing.scale0})`
-          : sizing.scale400,
+        $multi && !$isEmpty ? `calc(${sizing.scale400} - ${sizing.scale0})` : sizing.scale400,
       paddingBottom:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale400} - ${sizing.scale0})`
-          : sizing.scale400,
+        $multi && !$isEmpty ? `calc(${sizing.scale400} - ${sizing.scale0})` : sizing.scale400,
       [paddingStartDir]:
-        $multi && !$isEmpty
-          ? `calc(${paddingLeft} + ${sizing.scale0})`
-          : paddingLeft,
+        $multi && !$isEmpty ? `calc(${paddingLeft} + ${sizing.scale0})` : paddingLeft,
       [paddingEndDir]: 0,
     },
     [SIZE.large]: {
       // `sizing.scale0` based on the multi value component (Tag) top and bottom margin
       paddingTop:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale600} - ${sizing.scale0})`
-          : sizing.scale550,
+        $multi && !$isEmpty ? `calc(${sizing.scale600} - ${sizing.scale0})` : sizing.scale550,
       paddingBottom:
-        $multi && !$isEmpty
-          ? `calc(${sizing.scale600} - ${sizing.scale0})`
-          : sizing.scale550,
+        $multi && !$isEmpty ? `calc(${sizing.scale600} - ${sizing.scale0})` : sizing.scale550,
       [paddingStartDir]:
-        $multi && !$isEmpty
-          ? `calc(${paddingLeft} - ${sizing.scale0})`
-          : paddingLeft,
+        $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
       [paddingEndDir]: 0,
     },
   }[$size];
 }
 
-export const StyledDropdownContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    return {
-      width: `${String(props.$width)}px`,
-    };
-  },
-);
+export const StyledDropdownContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  return {
+    width: `${String(props.$width)}px`,
+  };
+});
 
 export const StyledDropdown = StyledList;
 
 export const StyledDropdownListItem = StyledListItem;
 
-export const StyledOptionContent = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const {$isHighlighted, $selected, $disabled, $theme} = props;
-
-    return ({
-      cursor: $disabled ? 'not-allowed' : 'pointer',
-      color:
-        $selected && !$isHighlighted ? $theme.colors.menuFontSelected : null,
-      fontWeight: $selected ? 'bold' : 'normal',
-    }: {});
-  },
-);
+export const StyledOptionContent = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $isHighlighted, $selected, $disabled, $theme } = props;
 
-export const StyledRoot = styled<SharedStylePropsArgT>('div', props => {
+  return ({
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    color: $selected && !$isHighlighted ? $theme.colors.menuFontSelected : null,
+    fontWeight: $selected ? 'bold' : 'normal',
+  }: {});
+});
+
+export const StyledRoot = styled<SharedStylePropsArgT>('div', (props) => {
   const {
-    $theme: {typography},
+    $theme: { typography },
     $size,
   } = props;
   return {
@@ -150,7 +119,7 @@ function getControlContainerColors(
   $isPseudoFocused,
   $positive,
   $error,
-  colors,
+  colors
 ) {
   if ($disabled) {
     return {
@@ -206,85 +175,73 @@ function getControlContainerColors(
   };
 }
 
-export const StyledControlContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const {
+export const StyledControlContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const {
+    $disabled,
+    $error,
+    $positive,
+    $isFocused,
+    $isPseudoFocused,
+    $type,
+    $searchable,
+    $theme: { borders, colors, animation },
+  } = props;
+  return {
+    borderTopLeftRadius: borders.inputBorderRadius,
+    borderTopRightRadius: borders.inputBorderRadius,
+    borderBottomRightRadius: borders.inputBorderRadius,
+    borderBottomLeftRadius: borders.inputBorderRadius,
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    cursor: $disabled ? 'not-allowed' : $searchable || $type === TYPE.search ? 'text' : 'pointer',
+    borderLeftWidth: '2px',
+    borderRightWidth: '2px',
+    borderTopWidth: '2px',
+    borderBottomWidth: '2px',
+    borderLeftStyle: 'solid',
+    borderRightStyle: 'solid',
+    borderTopStyle: 'solid',
+    borderBottomStyle: 'solid',
+    transitionProperty: 'border, box-shadow, background-color',
+    transitionDuration: animation.timing200,
+    transitionTimingFunction: animation.easeOutCurve,
+    ...getControlContainerColors(
       $disabled,
-      $error,
-      $positive,
       $isFocused,
       $isPseudoFocused,
-      $type,
-      $searchable,
-      $theme: {borders, colors, animation},
-    } = props;
-    return {
-      borderTopLeftRadius: borders.inputBorderRadius,
-      borderTopRightRadius: borders.inputBorderRadius,
-      borderBottomRightRadius: borders.inputBorderRadius,
-      borderBottomLeftRadius: borders.inputBorderRadius,
-      boxSizing: 'border-box',
-      overflow: 'hidden',
-      width: '100%',
-      display: 'flex',
-      justifyContent: 'space-between',
-      cursor: $disabled
-        ? 'not-allowed'
-        : $searchable || $type === TYPE.search
-        ? 'text'
-        : 'pointer',
-      borderLeftWidth: '2px',
-      borderRightWidth: '2px',
-      borderTopWidth: '2px',
-      borderBottomWidth: '2px',
-      borderLeftStyle: 'solid',
-      borderRightStyle: 'solid',
-      borderTopStyle: 'solid',
-      borderBottomStyle: 'solid',
-      transitionProperty: 'border, box-shadow, background-color',
-      transitionDuration: animation.timing200,
-      transitionTimingFunction: animation.easeOutCurve,
-      ...getControlContainerColors(
-        $disabled,
-        $isFocused,
-        $isPseudoFocused,
-        $positive,
-        $error,
-        colors,
-      ),
-    };
-  },
-);
+      $positive,
+      $error,
+      colors
+    ),
+  };
+});
 
-export const StyledValueContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const padding = getControlPadding(props);
-    return {
-      boxSizing: 'border-box',
-      position: 'relative',
-      flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: '0%',
-      display: 'flex',
-      alignItems: 'center',
-      flexWrap: props.$multi ? 'wrap' : 'nowrap',
-      overflow: 'hidden',
-      ...padding,
-    };
-  },
-);
+export const StyledValueContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const padding = getControlPadding(props);
+  return {
+    boxSizing: 'border-box',
+    position: 'relative',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '0%',
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: props.$multi ? 'wrap' : 'nowrap',
+    overflow: 'hidden',
+    ...padding,
+  };
+});
 
-export const StyledPlaceholder = styled<SharedStylePropsArgT>('div', props => {
+export const StyledPlaceholder = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $disabled,
-    $theme: {colors},
+    $theme: { colors },
   } = props;
   return {
-    color: $disabled
-      ? colors.inputPlaceholderDisabled
-      : colors.inputPlaceholder,
+    color: $disabled ? colors.inputPlaceholderDisabled : colors.inputPlaceholder,
     maxWidth: '100%',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -292,16 +249,15 @@ export const StyledPlaceholder = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const StyledSingleValue = styled<SharedStylePropsArgT>('div', props => {
+export const StyledSingleValue = styled<SharedStylePropsArgT>('div', (props) => {
   const {
     $searchable,
     $size,
     $theme,
-    $theme: {typography},
+    $theme: { typography },
   } = props;
   const font = getFont($size, typography);
-  const marginDir: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
   return {
     lineHeight: !$searchable ? font.lineHeight : 'inherit',
     boxSizing: 'border-box',
@@ -312,45 +268,42 @@ export const StyledSingleValue = styled<SharedStylePropsArgT>('div', props => {
   };
 });
 
-export const StyledInputContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const {
-      $size,
-      $searchable,
-      $theme: {typography, sizing},
-      $isEmpty,
-    } = props;
-    const font = getFont($size, typography);
-    return {
-      position: 'relative',
-      display: 'inline-block',
-      maxWidth: '100%',
-      backgroundColor: 'transparent',
-      borderLeftStyle: 'none',
-      borderTopStyle: 'none',
-      borderRightStyle: 'none',
-      borderBottomStyle: 'none',
-      boxShadow: 'none',
-      boxSizing: 'border-box',
-      outline: 'none',
-      marginTop: 0,
-      marginBottom: 0,
-      marginLeft: $isEmpty ? 0 : sizing.scale0,
-      marginRight: 0,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingLeft: 0,
-      paddingRight: 0,
-      height: String(!$searchable ? font.lineHeight : 'auto'),
-      maxHeight: String(font.lineHeight),
-    };
-  },
-);
+export const StyledInputContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const {
+    $size,
+    $searchable,
+    $theme: { typography, sizing },
+    $isEmpty,
+  } = props;
+  const font = getFont($size, typography);
+  return {
+    position: 'relative',
+    display: 'inline-block',
+    maxWidth: '100%',
+    backgroundColor: 'transparent',
+    borderLeftStyle: 'none',
+    borderTopStyle: 'none',
+    borderRightStyle: 'none',
+    borderBottomStyle: 'none',
+    boxShadow: 'none',
+    boxSizing: 'border-box',
+    outline: 'none',
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: $isEmpty ? 0 : sizing.scale0,
+    marginRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    height: String(!$searchable ? font.lineHeight : 'auto'),
+    maxHeight: String(font.lineHeight),
+  };
+});
 
-export const StyledInput = styled<SharedStylePropsArgT>('input', props => {
+export const StyledInput = styled<SharedStylePropsArgT>('input', (props) => {
   const {
-    $theme: {colors, typography},
+    $theme: { colors, typography },
     $size,
     $searchable,
     $width,
@@ -382,7 +335,7 @@ export const StyledInput = styled<SharedStylePropsArgT>('input', props => {
 
 export const StyledInputSizer = styled<SharedStylePropsArgT>(
   'div',
-  ({$size, $theme, $theme: {typography}}) => {
+  ({ $size, $theme, $theme: { typography } }) => {
     const dir: string = $theme.direction === 'rtl' ? 'right' : 'left';
     return {
       ...getFont($size, typography),
@@ -394,14 +347,13 @@ export const StyledInputSizer = styled<SharedStylePropsArgT>(
       overflow: 'scroll',
       whiteSpace: 'pre',
     };
-  },
+  }
 );
 
 export const StyledIconsContainer = styled<SharedStylePropsArgT>(
   'div',
-  ({$theme, $theme: {sizing}}) => {
-    const paddingDir: string =
-      $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+  ({ $theme, $theme: { sizing } }) => {
+    const paddingDir: string = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
     return {
       boxSizing: 'border-box',
       position: 'relative',
@@ -411,10 +363,10 @@ export const StyledIconsContainer = styled<SharedStylePropsArgT>(
       alignSelf: 'stretch',
       [paddingDir]: sizing.scale500,
     };
-  },
+  }
 );
 
-function getSvgStyles({$theme}) {
+function getSvgStyles({ $theme }) {
   return {
     display: 'inline-block',
     fill: 'currentColor',
@@ -424,9 +376,9 @@ function getSvgStyles({$theme}) {
   };
 }
 
-export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $disabled, $size} = props;
-  const {colors} = $theme;
+export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', (props) => {
+  const { $theme, $disabled, $size } = props;
+  const { colors } = $theme;
 
   const sizes = {
     [SIZE.mini]: 16,
@@ -440,7 +392,7 @@ export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
   }
 
   return {
-    ...getSvgStyles({$theme}),
+    ...getSvgStyles({ $theme }),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
     cursor: $disabled ? 'not-allowed' : 'pointer',
     height: `${size}px`,
@@ -448,9 +400,9 @@ export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', props => {
   };
 });
 
-export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
-  const {$theme, $size} = props;
-  const {colors} = $theme;
+export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
+  const { $theme, $size } = props;
+  const { colors } = $theme;
 
   const sizes = {
     [SIZE.mini]: 15,
@@ -464,7 +416,7 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
   }
 
   return {
-    ...getSvgStyles({$theme}),
+    ...getSvgStyles({ $theme }),
     color: colors.contentPrimary,
     cursor: 'pointer',
     height: `${size}px`,
@@ -472,34 +424,31 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', props => {
   };
 });
 
-export const getLoadingIconStyles = (props: {$theme: ThemeT}) => {
-  const {$theme} = props;
-  const {colors} = $theme;
+export const getLoadingIconStyles = (props: { $theme: ThemeT }) => {
+  const { $theme } = props;
+  const { colors } = $theme;
   return {
-    ...getSvgStyles({$theme}),
+    ...getSvgStyles({ $theme }),
     color: colors.contentPrimary,
   };
 };
 
-export const StyledSearchIconContainer = styled<SharedStylePropsArgT>(
-  'div',
-  props => {
-    const {$disabled, $theme} = props;
-    const {colors, sizing} = $theme;
-    const dir: string = $theme.direction === 'rtl' ? 'right' : 'left';
-    return {
-      ...getSvgStyles(props),
-      color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-      cursor: $disabled ? 'not-allowed' : 'pointer',
-      position: 'absolute',
-      top: 0,
-      [dir]: sizing.scale500,
-      display: 'flex',
-      alignItems: 'center',
-      height: '100%',
-    };
-  },
-);
+export const StyledSearchIconContainer = styled<SharedStylePropsArgT>('div', (props) => {
+  const { $disabled, $theme } = props;
+  const { colors, sizing } = $theme;
+  const dir: string = $theme.direction === 'rtl' ? 'right' : 'left';
+  return {
+    ...getSvgStyles(props),
+    color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    position: 'absolute',
+    top: 0,
+    [dir]: sizing.scale500,
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+  };
+});
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;