baseui/sheet/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTopContainer = exports.StyledTitle = exports.StyledRoot = exports.StyledHeaderTextContainer = exports.StyledHeaderGrid = exports.StyledHeader = exports.StyledGrabber = exports.StyledEmptyDiv = exports.StyledDivider = exports.StyledDescription = exports.StyledBottomContainer = exports.StyledBody = void 0;
var _styles = require("../styles");
var _divider = require("../divider");
/*
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 DEFAULT_TOP_POSITION = '50vh';
const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
  $draggable
}) => {
  if ($draggable) {
    return {
      height: '100%',
      position: 'relative'
    };
  }
  return {
    height: '100vh',
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    flexDirection: 'column'
  };
});
StyledRoot.displayName = "StyledRoot";
StyledRoot.displayName = 'StyledRoot';
const StyledTopContainer = exports.StyledTopContainer = (0, _styles.styled)('div', ({
  $draggable,
  $topPosition = DEFAULT_TOP_POSITION
}) => {
  const baseStyles = {
    height: '100%',
    overflow: 'auto'
  };
  if ($draggable) {
    return {
      ...baseStyles,
      maxHeight: `calc(${$topPosition} + 14px)`,
      maxWidth: '100vh',
      position: 'fixed',
      top: '0px',
      left: '0px',
      right: '0px'
    };
  }
  return {
    ...baseStyles,
    marginBottom: '-14px',
    flexGrow: 1
  };
});
StyledTopContainer.displayName = "StyledTopContainer";
StyledTopContainer.displayName = 'StyledTopContainer';
const StyledBottomContainer = exports.StyledBottomContainer = (0, _styles.styled)('div', ({
  $draggable,
  $topPosition,
  $theme
}) => {
  const baseStyle = {
    borderTopLeftRadius: $theme.borders.radius500,
    borderTopRightRadius: $theme.borders.radius500,
    backgroundColor: $theme.colors.backgroundPrimary,
    boxShadow: $theme.lighting.shallowAbove
  };
  return $draggable ? {
    position: 'relative',
    top: $topPosition || DEFAULT_TOP_POSITION,
    overflow: 'auto',
    ...baseStyle
  } : {
    maxHeight: $topPosition || DEFAULT_TOP_POSITION,
    ...baseStyle
  };
});
StyledBottomContainer.displayName = "StyledBottomContainer";
StyledBottomContainer.displayName = 'StyledBottomContainer';
const StyledHeader = exports.StyledHeader = (0, _styles.styled)('div', ({
  $theme
}) => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  paddingTop: $theme.sizing.scale300
}));
StyledHeader.displayName = "StyledHeader";
StyledHeader.displayName = 'StyledHeader';
const StyledGrabber = exports.StyledGrabber = (0, _styles.styled)('div', ({
  $theme
}) => ({
  width: '100%',
  paddingRight: 'auto',
  paddingBottom: '12px',
  paddingLeft: 'auto',
  display: 'flex',
  justifyContent: 'center',
  position: 'relative',
  ':after': {
    content: '""',
    height: $theme.sizing.scale100,
    width: $theme.sizing.scale1200,
    background: $theme.colors.borderOpaque,
    borderRadius: '100px',
    margin: '0 auto'
  }
}));
StyledGrabber.displayName = "StyledGrabber";
StyledGrabber.displayName = 'StyledGrabber';
const StyledHeaderGrid = exports.StyledHeaderGrid = (0, _styles.styled)('div', ({
  $theme,
  $hasLeadingAction,
  $hasTrailingAction
}) => {
  const hasActionButton = $hasLeadingAction || $hasTrailingAction;
  return {
    display: 'grid',
    gridTemplateColumns: 'auto 1fr auto',
    alignItems: 'center',
    paddingRight: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
    paddingLeft: hasActionButton ? $theme.sizing.scale300 : $theme.sizing.scale600,
    paddingBottom: $theme.sizing.scale200,
    ...($theme.direction === 'rtl' ? {
      direction: 'rtl'
    } : {})
  };
});
StyledHeaderGrid.displayName = "StyledHeaderGrid";
StyledHeaderGrid.displayName = 'StyledHeaderGrid';
const StyledEmptyDiv = exports.StyledEmptyDiv = (0, _styles.styled)('div', ({
  $theme
}) => ({
  height: $theme.sizing.scale1200,
  width: $theme.sizing.scale1200
}));
StyledEmptyDiv.displayName = "StyledEmptyDiv";
StyledEmptyDiv.displayName = 'StyledEmptyDiv';
const StyledHeaderTextContainer = exports.StyledHeaderTextContainer = (0, _styles.styled)('div', ({
  $draggable,
  $hasTitle,
  $hasDescription,
  $theme
}) => {
  const height = $hasTitle && $hasDescription ? $theme.sizing.scale1400 : $hasTitle ? $theme.sizing.scale1200 : $hasDescription ? $theme.sizing.scale900 : $theme.sizing.scale800;
  return {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    minHeight: $draggable ? `calc(${height} - 4px)` : height,
    maxWidth: '100%',
    overflow: 'hidden',
    gridColumn: '2 / 3'
  };
});
StyledHeaderTextContainer.displayName = "StyledHeaderTextContainer";
StyledHeaderTextContainer.displayName = 'StyledHeaderTextContainer';
const StyledTitle = exports.StyledTitle = (0, _styles.styled)('div', ({
  $theme
}) => ({
  color: $theme.colors.contentPrimary,
  maxWidth: 'inherit',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  ...$theme.typography.LabelLarge
}));
StyledTitle.displayName = "StyledTitle";
StyledTitle.displayName = 'StyledTitle';
const StyledDescription = exports.StyledDescription = (0, _styles.styled)('div', ({
  $theme
}) => ({
  color: $theme.colors.contentSecondary,
  display: '-webkit-box',
  '-webkit-line-clamp': 2,
  '-webkit-box-orient': 'vertical',
  overflow: 'hidden',
  ...$theme.typography.ParagraphMedium
}));
StyledDescription.displayName = "StyledDescription";
StyledDescription.displayName = 'StyledDescription';
const StyledDivider = exports.StyledDivider = (0, _styles.withStyle)(_divider.StyledDivider, {
  width: '100%',
  marginTop: 0,
  marginBottom: 0
});
StyledDivider.displayName = "StyledDivider";
StyledDivider.displayName = 'StyledDivider';
const StyledBody = exports.StyledBody = (0, _styles.styled)('div', ({
  $theme
}) => ({
  height: '100%',
  overflow: 'auto',
  color: $theme.colors.contentPrimary
}));
StyledBody.displayName = "StyledBody";
StyledBody.displayName = 'StyledBody';