baseui/select/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledValueContainer = exports.StyledSingleValue = exports.StyledSelectArrow = exports.StyledSearchIconContainer = exports.StyledRoot = exports.StyledPlaceholder = exports.StyledOptionContent = exports.StyledLoadingIndicator = exports.StyledInputSizer = exports.StyledInputContainer = exports.StyledInput = exports.StyledIconsContainer = exports.StyledDropdownListItem = exports.StyledDropdownContainer = exports.StyledDropdown = exports.StyledControlContainer = exports.StyledClearIcon = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
var _menu = require("../menu");
var _spinner = require("../spinner");
var _util = require("../styles/util");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

// @ts-ignore
function getFont(size = _constants.SIZE.default, typography) {
  return {
    [_constants.SIZE.mini]: typography.font100,
    [_constants.SIZE.compact]: typography.font200,
    [_constants.SIZE.default]: typography.font300,
    [_constants.SIZE.large]: typography.font400
  }[size];
}
function getBorderRadius(
// @ts-ignore
size,
// @ts-ignore
borders) {
  let radius = borders.inputBorderRadius;
  if (size === _constants.SIZE.mini) {
    radius = borders.inputBorderRadiusMini;
  }
  return {
    borderTopLeftRadius: radius,
    borderBottomLeftRadius: radius,
    borderTopRightRadius: radius,
    borderBottomRightRadius: radius
  };
}

// @ts-ignore
function getControlPadding(props) {
  const {
    $theme,
    $theme: {
      sizing
    },
    $size = _constants.SIZE.default,
    $type,
    $multi,
    $isEmpty
  } = props;
  const isSearch = $type === _constants.TYPE.search;
  const paddingLeft = isSearch ? `calc(${sizing.scale1000} - ${sizing.scale0})` : sizing.scale400;
  const paddingStartDir = $theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
  const paddingEndDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';

  // @ts-ignore
  return {
    [_constants.SIZE.mini]: {
      // `sizing.scale0` based on the multi value component (Tag) top and bottom margin
      paddingTop: $multi && !$isEmpty ? 0 : sizing.scale100,
      paddingBottom: $multi && !$isEmpty ? 0 : sizing.scale100,
      [paddingStartDir]: $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
      [paddingEndDir]: '0'
    },
    [_constants.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,
      paddingBottom: $multi && !$isEmpty ? `calc(${sizing.scale100} - ${sizing.scale0})` : sizing.scale200,
      [paddingStartDir]: $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
      [paddingEndDir]: '0'
    },
    [_constants.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,
      paddingBottom: $multi && !$isEmpty ? `calc(${sizing.scale400} - ${sizing.scale0})` : sizing.scale400,
      [paddingStartDir]: $multi && !$isEmpty ? `calc(${paddingLeft} + ${sizing.scale0})` : paddingLeft,
      [paddingEndDir]: 0
    },
    [_constants.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,
      paddingBottom: $multi && !$isEmpty ? `calc(${sizing.scale600} - ${sizing.scale0})` : sizing.scale550,
      [paddingStartDir]: $multi && !$isEmpty ? `calc(${paddingLeft} - ${sizing.scale0})` : paddingLeft,
      [paddingEndDir]: 0
    }
  }[$size];
}
const StyledDropdownContainer = exports.StyledDropdownContainer = (0, _styles.styled)('div', props => {
  return {
    width: `${String(props.$width)}px`
  };
});
StyledDropdownContainer.displayName = "StyledDropdownContainer";
StyledDropdownContainer.displayName = 'StyledDropdownContainer';
const StyledDropdown = exports.StyledDropdown = _menu.StyledList;
const StyledDropdownListItem = exports.StyledDropdownListItem = _menu.StyledListItem;

// @ts-ignore
const StyledOptionContent = exports.StyledOptionContent = (0, _styles.styled)('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'
  };
});
StyledOptionContent.displayName = "StyledOptionContent";
StyledOptionContent.displayName = 'StyledOptionContent';
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', props => {
  const {
    $theme: {
      typography
    },
    $size
  } = props;
  return {
    ...getFont($size, typography),
    boxSizing: 'border-box',
    position: 'relative',
    width: '100%'
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
function getControlContainerColors(
// @ts-ignore
$disabled,
// @ts-ignore
$isFocused,
// @ts-ignore
$isPseudoFocused,
// @ts-ignore
$positive,
// @ts-ignore
$error,
// @ts-ignore
colors) {
  if ($disabled) {
    return {
      color: colors.inputTextDisabled,
      borderLeftColor: colors.inputFillDisabled,
      borderRightColor: colors.inputFillDisabled,
      borderTopColor: colors.inputFillDisabled,
      borderBottomColor: colors.inputFillDisabled,
      backgroundColor: colors.inputFillDisabled
    };
  }
  if ($isFocused || $isPseudoFocused) {
    return {
      color: colors.contentPrimary,
      borderLeftColor: colors.borderSelected,
      borderRightColor: colors.borderSelected,
      borderTopColor: colors.borderSelected,
      borderBottomColor: colors.borderSelected,
      backgroundColor: colors.inputFillActive
    };
  }
  if ($error) {
    return {
      color: colors.contentPrimary,
      borderLeftColor: colors.inputBorderError,
      borderRightColor: colors.inputBorderError,
      borderTopColor: colors.inputBorderError,
      borderBottomColor: colors.inputBorderError,
      backgroundColor: colors.inputFillError
    };
  }
  if ($positive) {
    return {
      color: colors.contentPrimary,
      borderLeftColor: colors.inputBorderPositive,
      borderRightColor: colors.inputBorderPositive,
      borderTopColor: colors.inputBorderPositive,
      borderBottomColor: colors.inputBorderPositive,
      backgroundColor: colors.inputFillPositive
    };
  }
  return {
    color: colors.contentPrimary,
    borderLeftColor: colors.inputBorder,
    borderRightColor: colors.inputBorder,
    borderTopColor: colors.inputBorder,
    borderBottomColor: colors.inputBorder,
    backgroundColor: colors.inputFill
  };
}
const StyledControlContainer = exports.StyledControlContainer = (0, _styles.styled)('div', props => {
  const {
    $disabled,
    $error,
    $positive,
    $isFocused,
    $isPseudoFocused,
    $type,
    $searchable,
    $size,
    $theme: {
      borders,
      colors,
      animation
    }
  } = props;
  return {
    ...getBorderRadius($size, borders),
    boxSizing: 'border-box',
    overflow: 'hidden',
    width: '100%',
    display: 'flex',
    justifyContent: 'space-between',
    cursor: $disabled ? 'not-allowed' : $searchable || $type === _constants.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)
  };
});
StyledControlContainer.displayName = "StyledControlContainer";
StyledControlContainer.displayName = 'StyledControlContainer';
const StyledValueContainer = exports.StyledValueContainer = (0, _styles.styled)('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
  };
});
StyledValueContainer.displayName = "StyledValueContainer";
StyledValueContainer.displayName = 'StyledValueContainer';
const StyledPlaceholder = exports.StyledPlaceholder = (0, _styles.styled)('div', props => {
  const {
    $disabled,
    $theme: {
      colors
    }
  } = props;
  return {
    color: $disabled ? colors.inputPlaceholderDisabled : colors.inputPlaceholder,
    maxWidth: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap'
  };
});
StyledPlaceholder.displayName = "StyledPlaceholder";
StyledPlaceholder.displayName = 'StyledPlaceholder';
const StyledSingleValue = exports.StyledSingleValue = (0, _styles.styled)('div', props => {
  const {
    $searchable,
    $size,
    $theme,
    $theme: {
      typography
    }
  } = props;
  const font = getFont($size, typography);
  const marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
  return {
    lineHeight: !$searchable ? font.lineHeight : 'inherit',
    boxSizing: 'border-box',
    [marginDir]: $theme.sizing.scale0,
    height: '100%',
    maxWidth: '100%',
    ..._util.ellipsisText
  };
});
StyledSingleValue.displayName = "StyledSingleValue";
StyledSingleValue.displayName = 'StyledSingleValue';
const StyledInputContainer = exports.StyledInputContainer = (0, _styles.styled)('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)
  };
});
StyledInputContainer.displayName = "StyledInputContainer";
StyledInputContainer.displayName = 'StyledInputContainer';
const StyledInput = exports.StyledInput = (0, _styles.styled)('input', props => {
  const {
    $theme: {
      colors,
      typography
    },
    $size,
    $searchable,
    $width
  } = props;
  return {
    ...getFont($size, typography),
    color: colors.contentPrimary,
    boxSizing: 'content-box',
    width: !$searchable ? '1px' : $width || '100%',
    maxWidth: '100%',
    background: 'transparent',
    borderLeftStyle: 'none',
    borderTopStyle: 'none',
    borderRightStyle: 'none',
    borderBottomStyle: 'none',
    boxShadow: 'none',
    display: 'inline-block',
    outline: 'none',
    marginTop: '0',
    marginBottom: '0',
    marginLeft: '0',
    marginRight: '0',
    paddingTop: '0',
    paddingBottom: '0',
    paddingLeft: '0',
    paddingRight: '0'
  };
});
StyledInput.displayName = "StyledInput";
StyledInput.displayName = 'StyledInput';
const StyledInputSizer = exports.StyledInputSizer = (0, _styles.styled)('div', ({
  $size,
  $theme,
  $theme: {
    typography
  }
}) => {
  const dir = $theme.direction === 'rtl' ? 'right' : 'left';
  return {
    ...getFont($size, typography),
    position: 'absolute',
    top: 0,
    [dir]: 0,
    visibility: 'hidden',
    height: 0,
    overflow: 'scroll',
    whiteSpace: 'pre'
  };
});
StyledInputSizer.displayName = "StyledInputSizer";
StyledInputSizer.displayName = 'StyledInputSizer';
const StyledIconsContainer = exports.StyledIconsContainer = (0, _styles.styled)('div', ({
  $theme,
  $theme: {
    sizing
  }
}) => {
  const paddingDir = $theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
  return {
    boxSizing: 'border-box',
    position: 'relative',
    display: 'flex',
    flexShrink: 0,
    alignItems: 'center',
    alignSelf: 'stretch',
    [paddingDir]: sizing.scale500
  };
});
StyledIconsContainer.displayName = "StyledIconsContainer";
StyledIconsContainer.displayName = 'StyledIconsContainer';

// @ts-ignore
function getSvgStyles({
  $theme
}) {
  return {
    display: 'inline-block',
    fill: 'currentColor',
    color: 'currentColor',
    height: $theme.sizing.scale600,
    width: $theme.sizing.scale600
  };
}
const StyledSelectArrow = exports.StyledSelectArrow = (0, _styles.styled)('svg', props => {
  const {
    $theme,
    $disabled,
    $size
  } = props;
  const {
    colors
  } = $theme;
  const sizes = {
    [_constants.SIZE.mini]: 16,
    [_constants.SIZE.compact]: 16,
    [_constants.SIZE.default]: 20,
    [_constants.SIZE.large]: 24
  };
  let size = sizes[_constants.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`
  };
});
StyledSelectArrow.displayName = "StyledSelectArrow";
StyledSelectArrow.displayName = 'StyledSelectArrow';
const StyledClearIcon = exports.StyledClearIcon = (0, _styles.styled)('svg', props => {
  const {
    $theme,
    $size
  } = props;
  const {
    colors
  } = $theme;
  const sizes = {
    [_constants.SIZE.mini]: 15,
    [_constants.SIZE.compact]: 15,
    [_constants.SIZE.default]: 18,
    [_constants.SIZE.large]: 22
  };
  let size = sizes[_constants.SIZE.default];
  if ($size) {
    size = sizes[$size];
  }
  return {
    ...getSvgStyles({
      $theme
    }),
    color: colors.contentPrimary,
    cursor: 'pointer',
    height: `${size}px`,
    width: `${size}px`
  };
});
StyledClearIcon.displayName = "StyledClearIcon";
StyledClearIcon.displayName = 'StyledClearIcon';
const StyledLoadingIndicator = exports.StyledLoadingIndicator = (0, _styles.withStyle)(_spinner.Spinner, ({
  $theme
}) => {
  return {
    borderTopWidth: '2px',
    borderRightWidth: '2px',
    borderBottomWidth: '2px',
    borderLeftWidth: '2px',
    borderRightColor: $theme.colors.borderOpaque,
    borderBottomColor: $theme.colors.borderOpaque,
    borderLeftColor: $theme.colors.borderOpaque,
    width: '16px',
    height: '16px'
  };
});
StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
StyledLoadingIndicator.displayName = 'StyledLoadingIndicator';
const StyledSearchIconContainer = exports.StyledSearchIconContainer = (0, _styles.styled)('div', props => {
  const {
    $disabled,
    $theme
  } = props;
  const {
    colors,
    sizing
  } = $theme;
  const dir = $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%'
  };
});
StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
StyledSearchIconContainer.displayName = 'StyledSearchIconContainer';