baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

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;
+
+  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,157 +175,135 @@ 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) => {
-    const {
-      $disabled,
-      $theme: {colors},
-    } = props;
-    return {
-      color: $disabled
-        ? colors.inputPlaceholderDisabled
-        : colors.inputPlaceholder,
-      maxWidth: '100%',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-    };
-  },
-);
+export const StyledPlaceholder = styled<SharedStylePropsArgT>('div', (props) => {
+  const {
+    $disabled,
+    $theme: { colors },
+  } = props;
+  return {
+    color: $disabled ? colors.inputPlaceholderDisabled : colors.inputPlaceholder,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  };
+});
 
-export const StyledSingleValue = styled<SharedStylePropsArgT>(
-  'div',
-  (props) => {
-    const {
-      $searchable,
-      $size,
-      $theme,
-      $theme: {typography},
-    } = props;
-    const font = getFont($size, typography);
-    const marginDir: string =
-      $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return {
-      lineHeight: !$searchable ? font.lineHeight : 'inherit',
-      boxSizing: 'border-box',
-      [marginDir]: $theme.sizing.scale0,
-      height: '100%',
-      maxWidth: '100%',
-      ...ellipsisText,
-    };
-  },
-);
+export const StyledSingleValue = styled<SharedStylePropsArgT>('div', (props) => {
+  const {
+    $searchable,
+    $size,
+    $theme,
+    $theme: { typography },
+  } = props;
+  const font = getFont($size, typography);
+  const marginDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    lineHeight: !$searchable ? font.lineHeight : 'inherit',
+    boxSizing: 'border-box',
+    [marginDir]: $theme.sizing.scale0,
+    height: '100%',
+    maxWidth: '100%',
+    ...ellipsisText,
+  };
+});
 
-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) => {
   const {
-    $theme: {colors, typography},
+    $theme: { colors, typography },
     $size,
     $searchable,
     $width,
@@ -388,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),
@@ -400,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',
@@ -417,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',
@@ -430,36 +376,33 @@ function getSvgStyles({$theme}) {
   };
 }
 
-export const StyledSelectArrow = styled<SharedStylePropsArgT>(
-  'svg',
-  (props) => {
-    const {$theme, $disabled, $size} = props;
-    const {colors} = $theme;
-
-    const sizes = {
-      [SIZE.mini]: 16,
-      [SIZE.compact]: 16,
-      [SIZE.default]: 20,
-      [SIZE.large]: 24,
-    };
-    let size = sizes[SIZE.default];
-    if ($size) {
-      size = sizes[$size];
-    }
+export const StyledSelectArrow = styled<SharedStylePropsArgT>('svg', (props) => {
+  const { $theme, $disabled, $size } = props;
+  const { colors } = $theme;
 
-    return {
-      ...getSvgStyles({$theme}),
-      color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-      cursor: $disabled ? 'not-allowed' : 'pointer',
-      height: `${size}px`,
-      width: `${size}px`,
-    };
-  },
-);
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24,
+  };
+  let size = sizes[SIZE.default];
+  if ($size) {
+    size = sizes[$size];
+  }
+
+  return {
+    ...getSvgStyles({ $theme }),
+    color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`,
+  };
+});
 
 export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
-  const {$theme, $size} = props;
-  const {colors} = $theme;
+  const { $theme, $size } = props;
+  const { colors } = $theme;
 
   const sizes = {
     [SIZE.mini]: 15,
@@ -473,7 +416,7 @@ export const StyledClearIcon = styled<SharedStylePropsArgT>('svg', (props) => {
   }
 
   return {
-    ...getSvgStyles({$theme}),
+    ...getSvgStyles({ $theme }),
     color: colors.contentPrimary,
     cursor: 'pointer',
     height: `${size}px`,
@@ -481,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;

package/select/types.js.flow

@@ -8,14 +8,14 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {STATE_CHANGE_TYPE, SIZE, TYPE} from './constants.js';
-import type {OnItemSelectFnT} from '../menu/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE, SIZE, TYPE } from './constants.js';
+import type { OnItemSelectFnT } from '../menu/types.js';
 
 export type ChangeActionT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type SizeT = $Keys<typeof SIZE>;
 export type TypeT = $Keys<typeof TYPE>;
-export type ReactRefT<T> = {|current: null | T|};
+export type ReactRefT<T> = {| current: null | T |};
 
 export type OptionT = $ReadOnly<{
   id?: string | number,
@@ -29,7 +29,7 @@ export type OptionT = $ReadOnly<{
 }>;
 
 export type ValueT = $ReadOnlyArray<OptionT>;
-export type OptgroupsT = {__ungrouped: ValueT, [string]: ValueT};
+export type OptgroupsT = { __ungrouped: ValueT, [string]: ValueT };
 export type OptionsT = ?ValueT | OptgroupsT;
 
 export type OnChangeParamsT = {
@@ -113,7 +113,7 @@ export type PropsT = {
     options: ValueT,
     filterValue: string,
     excludeOptions: ?ValueT,
-    {valueKey: string, labelKey: string},
+    { valueKey: string, labelKey: string }
   ) => ValueT,
   /** Defines if currently selected options are filtered out in the dropdown options. */
   filterOutSelected: boolean,
@@ -127,7 +127,7 @@ export type PropsT = {
     },
   }) => React.Node,
   /** A custom method to get a display value for a selected option. */
-  getValueLabel: ?({option: OptionT}) => React.Node,
+  getValueLabel: ?({ option: OptionT }) => React.Node,
   /** Sets the id attribute of the internal input element. Allows for usage with labels. */
   id?: string,
   /** Defines if the comparison for a new creatable value should be case-insensitive. */
@@ -207,11 +207,7 @@ export type StateT = {
   value: ValueT,
 };
 
-export type StateReducerT = (
-  stateType: string,
-  nextState: StateT,
-  currentState: StateT,
-) => StateT;
+export type StateReducerT = (stateType: string, nextState: StateT, currentState: StateT) => StateT;
 
 export type StatefulContainerPropsT = {
   overrides: OverridesT,