baseui/combobox/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledRoot = exports.StyledListItem = exports.StyledListBox = exports.StyledInputContainer = void 0;
var _input = require("../input");
var _styles = require("../styles");
/*
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.
*/

const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', {});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledInputContainer = exports.StyledInputContainer = (0, _styles.styled)('div', {});
StyledInputContainer.displayName = "StyledInputContainer";
StyledInputContainer.displayName = 'StyledInputContainer';
const StyledListBox = exports.StyledListBox = (0, _styles.styled)('ul', ({
  $theme,
  $width
}) => {
  return {
    backgroundColor: $theme.colors.backgroundPrimary,
    marginBlockStart: 'unset',
    marginBlockEnd: 'unset',
    maxHeight: '200px',
    overflowY: 'auto',
    outline: 'none',
    paddingInlineStart: 'unset',
    width: $width
  };
});
StyledListBox.displayName = "StyledListBox";
StyledListBox.displayName = 'StyledListBox';
function buildStylesForSize(
// @ts-ignore
size,
// @ts-ignore
theme) {
  const paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
  switch (size) {
    case _input.SIZE.mini:
      return {
        ...theme.typography.ParagraphXSmall,
        height: '30px',
        [paddingDir]: theme.sizing.scale200
      };
    case _input.SIZE.compact:
      return {
        ...theme.typography.ParagraphSmall,
        height: '36px',
        [paddingDir]: theme.sizing.scale400
      };
    case _input.SIZE.large:
      return {
        ...theme.typography.ParagraphLarge,
        height: '56px',
        [paddingDir]: theme.sizing.scale650
      };
    case _input.SIZE.default:
    default:
      return {
        ...theme.typography.ParagraphMedium,
        height: '48px',
        [paddingDir]: theme.sizing.scale550
      };
  }
}
const StyledListItem = exports.StyledListItem = (0, _styles.styled)('li', ({
  $isSelected,
  $theme,
  $size
}) => {
  return {
    ...buildStylesForSize($size, $theme),
    alignItems: 'center',
    backgroundColor: $isSelected ? $theme.colors.comboboxListItemFocus : null,
    cursor: 'default',
    display: 'flex',
    listStyle: 'none',
    ':hover': {
      backgroundColor: $isSelected ? null : $theme.colors.comboboxListItemHover
    }
  };
});
StyledListItem.displayName = "StyledListItem";
StyledListItem.displayName = 'StyledListItem';