baseui/tabs-motion/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTabPanel = exports.StyledTabList = exports.StyledTabHighlight = exports.StyledTabBorder = exports.StyledTabBar = exports.StyledTab = exports.StyledRoot = exports.StyledEndEnhancerContainer = exports.StyledArtworkContainer = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
var _utils = require("./utils");
/*
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', ({
  $theme,
  $orientation = _constants.ORIENTATION.horizontal
}) => {
  const style = {
    // Creates a stacking context so we can use z-index on the TabHighlight
    // without affecting anything outside of this element.
    transform: 'scale(1)'
  };
  if ((0, _utils.isVertical)($orientation)) {
    style.display = 'flex';
  }
  return style;
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledTabBar = exports.StyledTabBar = (0, _styles.styled)('div', ({
  $hasEndEnhancer,
  $orientation
}) => $hasEndEnhancer || !(0, _utils.isHorizontal)($orientation) ? {
  display: 'flex'
} : {});
StyledTabBar.displayName = "StyledTabBar";
StyledTabBar.displayName = 'StyledTabBar';
const StyledTabList = exports.StyledTabList = (0, _styles.styled)('div', ({
  $theme,
  $fill = _constants.FILL.intrinsic,
  $orientation = _constants.ORIENTATION.horizontal
}) => {
  const style = {
    position: 'relative',
    display: 'flex',
    flexWrap: 'nowrap',
    flexGrow: 1
  };
  if ((0, _utils.isHorizontal)($orientation)) {
    style.flexDirection = 'row';
    style.paddingBottom = '5px';
    style.marginBottom = '-5px';
  } else {
    style.flexDirection = 'column';
    if ((0, _utils.isRTL)($theme.direction)) {
      style.paddingLeft = '5px';
      style.marginLeft = '-5px';
    } else {
      style.paddingRight = '5px';
      style.marginRight = '-5px';
    }
  }
  if ((0, _utils.isIntrinsic)($fill)) {
    style['::-webkit-scrollbar'] = {
      display: 'none'
    };
    style['-ms-overflow-style'] = 'none';
    style.scrollbarWidth = 'none';
    if ((0, _utils.isHorizontal)($orientation)) {
      style.overflowX = 'scroll';
    } else {
      style.overflowY = 'scroll';
    }
  }
  return style;
});
StyledTabList.displayName = "StyledTabList";
StyledTabList.displayName = 'StyledTabList';
const StyledTab = exports.StyledTab = (0, _styles.styled)('button', ({
  $theme,
  $orientation = _constants.ORIENTATION.horizontal,
  $fill = _constants.FILL.intrinsic,
  $focusVisible = false,
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  $isActive = false
}) => {
  const style = {
    cursor: 'pointer',
    WebkitAppearance: 'none',
    marginLeft: '0',
    marginRight: '0',
    marginTop: '0',
    marginBottom: '0',
    boxSizing: 'border-box',
    display: 'inline-flex',
    alignItems: 'center',
    paddingLeft: $theme.sizing.scale600,
    paddingTop: $theme.sizing.scale600,
    paddingRight: $theme.sizing.scale600,
    paddingBottom: $theme.sizing.scale600,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
    borderLeftStyle: 'none',
    borderTopStyle: 'none',
    borderRightStyle: 'none',
    borderBottomStyle: 'none',
    color: $theme.colors.contentPrimary,
    background: $theme.colors.backgroundPrimary,
    transitionProperty: 'background',
    transitionDuration: $theme.animation.timing200,
    transitionTimingFunction: $theme.animation.linearCurve,
    outline: 'none',
    outlineOffset: '-3px',
    ':disabled': {
      cursor: 'not-allowed',
      color: $theme.colors.contentStateDisabled
    },
    ':hover': {
      background: $theme.colors.backgroundSecondary
    },
    ':disabled:hover': {
      background: 'none'
    },
    ...$theme.typography.LabelSmall
  };
  if ($focusVisible) {
    style.outline = `3px solid ${$theme.colors.borderAccent}`;
  }
  if ((0, _utils.isFixed)($fill)) {
    style.flexGrow = 1;
    style.flexBasis = 0;
  }
  if ((0, _utils.isHorizontal)($orientation)) {
    style.justifyContent = 'center';
  } else {
    style.justifyContent = 'flex-end';
  }
  return style;
});
StyledTab.displayName = "StyledTab";
StyledTab.displayName = 'StyledTab';
const StyledEndEnhancerContainer = exports.StyledEndEnhancerContainer = (0, _styles.styled)('div', ({
  $theme
}) => {
  const marginDirection = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
  return {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    [marginDirection]: $theme.sizing.scale600
  };
});
StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
const StyledArtworkContainer = exports.StyledArtworkContainer = (0, _styles.styled)('div', ({
  $theme,
  $orientation = _constants.ORIENTATION.horizontal
}) => {
  const style = {
    display: 'flex'
  };
  if ((0, _utils.isRTL)($theme.direction)) {
    style.marginLeft = $theme.sizing.scale300;
  } else {
    style.marginRight = $theme.sizing.scale300;
  }
  return style;
});
StyledArtworkContainer.displayName = "StyledArtworkContainer";
StyledArtworkContainer.displayName = 'StyledArtworkContainer';
const StyledTabBorder = exports.StyledTabBorder = (0, _styles.styled)('div', ({
  $theme,
  $orientation = _constants.ORIENTATION.horizontal
}) => {
  const style = {
    backgroundColor: $theme.colors.borderOpaque,
    position: 'relative'
  };
  if ((0, _utils.isHorizontal)($orientation)) {
    style.height = '5px';
  } else {
    style.width = '5px';
  }
  return style;
});
StyledTabBorder.displayName = "StyledTabBorder";
StyledTabBorder.displayName = 'StyledTabBorder';
const StyledTabHighlight = exports.StyledTabHighlight = (0, _styles.styled)('div', ({
  $theme,
  $orientation = _constants.ORIENTATION.horizontal,
  $length = 0,
  $distance = 0,
  $animate = false
}) => {
  const style = {
    backgroundColor: $theme.colors.borderSelected,
    position: 'absolute',
    zIndex: 1
  };
  if ((0, _utils.isHorizontal)($orientation)) {
    style.bottom = '0px';
    style.left = '0px';
    style.height = '5px';
    style.width = `${$length}px`;
    style.transform = `translateX(${$distance}px)`;
  } else {
    style.transform = `translateY(${$distance}px)`;
    style.width = '5px';
    style.height = `${$length}px`;
    if ((0, _utils.isRTL)($theme.direction)) {
      style.left = '0px';
    } else {
      style.right = '0px';
    }
  }
  if ($animate) {
    style.transitionProperty = 'all';
    style.transitionDuration = $theme.animation.timing400;
    style.transitionTimingFunction = $theme.animation.easeInOutQuinticCurve;
  }
  return style;
});
StyledTabHighlight.displayName = "StyledTabHighlight";
StyledTabHighlight.displayName = 'StyledTabHighlight';
const StyledTabPanel = exports.StyledTabPanel = (0, _styles.styled)('div', ({
  $theme,
  $pad = true
}) => {
  const style = {
    flexGrow: 1,
    // only used in vertical orientation
    outline: 'none'
  };
  if ($pad) {
    style.paddingTop = $theme.sizing.scale600;
    style.paddingRight = $theme.sizing.scale600;
    style.paddingBottom = $theme.sizing.scale600;
    style.paddingLeft = $theme.sizing.scale600;
  }
  return style;
});
StyledTabPanel.displayName = "StyledTabPanel";
StyledTabPanel.displayName = 'StyledTabPanel';