baseui/tree-view/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTreeItemList = exports.StyledTreeItem = exports.StyledNoIconContainer = exports.StyledLabelInteractable = exports.StyledItemContent = exports.StyledIconContainer = void 0;
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 StyledTreeItemList = exports.StyledTreeItemList = (0, _styles.styled)('ul', ({
  $theme,
  $indentGuides,
  $isChildNode,
  $expanded = true
}) => {
  const direction = $theme.direction === 'rtl' ? 'Right' : 'Left';
  return {
    marginTop: 0,
    marginBottom: 0,
    [`margin${direction}`]: $isChildNode ? $theme.sizing.scale550 : 0,
    overflow: 'auto',
    paddingTop: 0,
    paddingBottom: 0,
    [`padding${direction}`]: $isChildNode ? $theme.sizing.scale200 : 0,
    position: 'relative',
    outline: 'none',
    display: $expanded ? 'block' : 'none',
    [`border${direction}`]: $indentGuides && $isChildNode ? `1px solid ${$theme.colors.borderOpaque}` : 'none'
  };
});
StyledTreeItemList.displayName = "StyledTreeItemList";
StyledTreeItemList.displayName = 'StyledTreeItemList';
const StyledTreeItem = exports.StyledTreeItem = (0, _styles.styled)('li', ({
  $theme,
  $isLeafNode
}) => {
  return {
    cursor: $isLeafNode ? 'auto' : 'pointer',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    overflow: 'auto',
    paddingTop: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    position: 'relative',
    outline: 'none'
  };
});
StyledTreeItem.displayName = "StyledTreeItem";
StyledTreeItem.displayName = 'StyledTreeItem';
const StyledItemContent = exports.StyledItemContent = (0, _styles.styled)('div', ({
  $theme,
  $isSelected,
  $isFocusVisible
}) => {
  return {
    ...$theme.typography.font300,
    alignItems: 'center',
    boxSizing: 'border-box',
    color: $theme.colors.contentPrimary,
    display: 'flex',
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    paddingLeft: $theme.sizing.scale200,
    paddingRight: $theme.sizing.scale200,
    paddingTop: $theme.sizing.scale100,
    paddingBottom: $theme.sizing.scale100,
    outline: $isSelected && $isFocusVisible ? `3px solid ${$theme.colors.borderAccent}` : 'none',
    outlineOffset: '-3px',
    ':hover': {
      backgroundColor: $theme.colors.backgroundSecondary
    }
  };
});
StyledItemContent.displayName = "StyledItemContent";
StyledItemContent.displayName = 'StyledItemContent';
const StyledIconContainer = exports.StyledIconContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  const marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
  return {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center',
    marginTop: 0,
    marginBottom: 0,
    [marginDirection]: $theme.sizing.scale200
  };
});
StyledIconContainer.displayName = "StyledIconContainer";
StyledIconContainer.displayName = 'StyledIconContainer';
const StyledNoIconContainer = exports.StyledNoIconContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  const marginDirection = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
  return {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'center',
    marginTop: 0,
    marginBottom: 0,
    [marginDirection]: $theme.sizing.scale200,
    width: 0,
    height: '1em'
  };
});
StyledNoIconContainer.displayName = "StyledNoIconContainer";
StyledNoIconContainer.displayName = 'StyledNoIconContainer';
const StyledLabelInteractable = exports.StyledLabelInteractable = (0, _styles.styled)('div', () => ({
  width: '100%'
}));
StyledLabelInteractable.displayName = "StyledLabelInteractable";
StyledLabelInteractable.displayName = 'StyledLabelInteractable';