@procore/core-react/dist/SuperSelect/SuperSelect.styles.js

React library of Procore Design Guidelines

import { Virtuoso } from 'react-virtuoso';
import styled, { css } from 'styled-components';
import { Box } from '../Box/Box';
import { Button } from '../Button';
import { StyledButton } from '../Button/Button.styles';
import { Card } from '../Card/Card';
import { StyledCheckboxLabel } from '../Checkbox/Checkbox.styles';
import { Pill } from '../Pill/Pill';
import { StyledCircle } from '../Spinner/Spinner.styles';
import { getTypographyIntent, typographyWeights } from '../Typography/Typography.styles';
import { borderRadius } from '../_styles/borderRadius';
import { colors } from '../_styles/colors';
import { getEllipsis, getFocus } from '../_styles/mixins';
import { spacing } from '../_styles/spacing';
export var dataQa = {
  focused: 'core-select-focused',
  hovered: 'core-select-hovered'
};
var optionMinHeight = 32;
var checkedIconPlaceholderWidth = 32;
var styledSelectButtonDefaultWidth = 248;
export var extendedSelectMenuWidth = 360;
export var PillSelectOptionWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "PillSelectOptionWrapper",
  componentId: "core-12_44_0__sc-1uf5708-0"
})(["display:flex;align-items:center;justify-content:space-between;padding:", "px ", "px;"], spacing.xs, spacing.lg);
export var PillSelectLabel = /*#__PURE__*/styled(Pill).withConfig({
  displayName: "PillSelectLabel",
  componentId: "core-12_44_0__sc-1uf5708-1"
})(["", ""], getEllipsis);
export var PillSelectLabelWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "PillSelectLabelWrapper",
  componentId: "core-12_44_0__sc-1uf5708-2"
})(["display:flex;max-width:100%;pointer-events:auto;", ""], function (_ref) {
  var disabled = _ref.disabled;
  return disabled && css(["pointer-events:none;"]);
});
export var StyledCheckboxContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledCheckboxContainer",
  componentId: "core-12_44_0__sc-1uf5708-3"
})(["padding-left:", "px;"], spacing.lg);
export var StyledCheckmarkContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledCheckmarkContainer",
  componentId: "core-12_44_0__sc-1uf5708-4"
})(["align-items:center;color:", ";display:inline-flex;flex-shrink:0;padding:0 ", "px 0 ", "px;"], colors.blue50, spacing.lg, spacing.sm);

// Do not merge with StyledMenu, needed for max-height working in IE
export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledWrapper",
  componentId: "core-12_44_0__sc-1uf5708-5"
})(["display:flex;max-height:inherit;min-width:inherit;outline:none;width:inherit;"]);
export var StyledMenu = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMenu",
  componentId: "core-12_44_0__sc-1uf5708-6"
})(["display:flex;flex-direction:column;outline:0;width:100%;"]);
export var StyledOptions = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledOptions",
  componentId: "core-12_44_0__sc-1uf5708-7"
})(["flex-basis:auto;flex-grow:1;flex-shrink:1;min-height:", "px;", ";padding:", "px 0;position:relative;overflow:hidden;&:focus{", " margin:-1px;}"], optionMinHeight, function (_ref2) {
  var _ref2$$scrollable = _ref2.$scrollable,
    $scrollable = _ref2$$scrollable === void 0 ? true : _ref2$$scrollable;
  return $scrollable && "overflow-y: auto";
}, spacing.sm, getFocus());
export var StyledItemContent = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledItemContent",
  componentId: "core-12_44_0__sc-1uf5708-8"
})(["display:flex;flex-direction:row;align-items:center;"]);
export var StyledOptionGroupLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledOptionGroupLabel",
  componentId: "core-12_44_0__sc-1uf5708-9"
})(["padding:", "px 0 ", "px ", "px;"], spacing.md, spacing.xs, spacing.lg);
export var StyledItemLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledItemLabel",
  componentId: "core-12_44_0__sc-1uf5708-10"
})(["", ""], function (_ref3) {
  var $draggable = _ref3.$draggable;
  return css(["padding:", "px ", "px;overflow-wrap:anywhere;"], spacing.xs, $draggable ? 0 : spacing.lg);
});
export var StyledDraggableWrapper = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDraggableWrapper",
  componentId: "core-12_44_0__sc-1uf5708-11"
})(["display:flex;width:100%;align-items:center;"]);
export var StyledGrip = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGrip",
  componentId: "core-12_44_0__sc-1uf5708-12"
})(["padding:0 2px;height:24px;visibility:hidden;"]);
export var StyledFooter = /*#__PURE__*/styled(Box).withConfig({
  displayName: "StyledFooter",
  componentId: "core-12_44_0__sc-1uf5708-13"
})(["border-top:1px solid ", ";"], colors.gray85);
export var StyledHeader = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledHeader",
  componentId: "core-12_44_0__sc-1uf5708-14"
})([""]);
export var StyledEmptyMessage = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledEmptyMessage",
  componentId: "core-12_44_0__sc-1uf5708-15"
})(["", ";padding:", "px ", "px;color:", ";"], getTypographyIntent('body'), spacing.md, spacing.lg, colors.gray45);
export var StyledSearchContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSearchContainer",
  componentId: "core-12_44_0__sc-1uf5708-16"
})(["padding:", "px ", "px ", "px;", " > *{pointer-events:none;}"], spacing.lg, spacing.lg, spacing.sm, StyledButton);
export var StyledGroup = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledGroup",
  componentId: "core-12_44_0__sc-1uf5708-17"
})(["", " color:", ";cursor:", ";font-weight:", ";padding:", "px ", "px;&:not(:first-child){padding-top:", "px;}&&{padding:0;}", "{padding:", "px ", " px;}&:not(:first-child){", "{padding-top:", " px;}}"], getTypographyIntent('body'), colors.gray15, function (_ref4) {
  var $clickable = _ref4.$clickable;
  return $clickable ? 'pointer' : 'default';
}, typographyWeights.semibold, spacing.xs, spacing.lg, spacing.md + spacing.xs, StyledOptionGroupLabel, spacing.xs, spacing.lg, StyledOptionGroupLabel, spacing.md + spacing.xs);
export var StyledItem = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledItem",
  componentId: "core-12_44_0__sc-1uf5708-18"
})(["", ";align-items:center;cursor:pointer;list-style-type:none;display:flex;padding:0;", " ", " ", " a{color:", ";display:block;margin:-", "px -", "px;padding:", "px ", "px;text-decoration:none;&:hover{color:", ";text-decoration:none;}}&[data-highlighted='true']{background-color:", ";}", " &:hover,&:active{", "{visibility:visible;}}", "{color:inherit;cursor:pointer;}", " ", " ", ""], getTypographyIntent('body'), function (_ref5) {
  var $emptyMinHeight = _ref5.$emptyMinHeight;
  return css(["&:empty{min-height:", "px;}"], $emptyMinHeight);
}, function (_ref6) {
  var $isDraggingOver = _ref6.$isDraggingOver,
    $highlighted = _ref6.$highlighted;
  return $isDraggingOver && $highlighted && css(["background-color:initial;"]);
}, function (_ref7) {
  var $isDraggingOver = _ref7.$isDraggingOver,
    $disabled = _ref7.$disabled,
    $isDraggingDisabled = _ref7.$isDraggingDisabled;
  return ($isDraggingOver || $disabled || $isDraggingDisabled) && css(["&:hover{", "{visibility:hidden;}}"], StyledGrip);
}, colors.gray15, spacing.xs, spacing.lg, spacing.xs, spacing.lg, colors.gray15, colors.gray96, function (_ref8) {
  var $highlighted = _ref8.$highlighted;
  return $highlighted && "background-color: ".concat(colors.gray96, ";");
}, StyledGrip, StyledCheckboxLabel, function (_ref9) {
  var $disabled = _ref9.$disabled,
    $selected = _ref9.$selected;
  if ($disabled) {
    return css(["&,", "{color:", ";cursor:default;}"], StyledCheckboxLabel, colors.gray85);
  } else if ($selected) {
    return css(["color:", ";font-weight:700;a,a:hover{color:", ";text-decoration:none;}&[data-highlighted='true']{background-color:", ";}"], colors.blue50, colors.blue50, colors.gray96);
  }
  return css(["color:", ";&[data-highlighted='true']{background-color:", ";}"], colors.gray15, colors.gray96);
}, function (_ref0) {
  var $isDraggable = _ref0.$isDraggable;
  if ($isDraggable) {
    return css(["", "{cursor:grab;&:before,&:after{cursor:pointer;}}&&&{padding-left:0;}"], StyledCheckboxLabel);
  }
}, function (_ref1) {
  var $isDragging = _ref1.$isDragging;
  if ($isDragging) {
    return css(["background-color:", ";", "{visibility:visible;}"], colors.gray96, StyledGrip);
  }
});
export var StyledSelectAll = /*#__PURE__*/styled(Box).withConfig({
  displayName: "StyledSelectAll",
  componentId: "core-12_44_0__sc-1uf5708-19"
})(["padding-top:", "px;padding-bottom:", "px;border-bottom:1px solid ", ";"], spacing.md, spacing.md, colors.gray85);
export var StyledDroppable = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledDroppable",
  componentId: "core-12_44_0__sc-1uf5708-20"
})(["", ",", "{padding-left:28px;}"], StyledGroup, StyledItem);
export var StyledSelectMenu = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledSelectMenu",
  componentId: "core-12_44_0__sc-1uf5708-21"
})(["display:flex;max-height:40vh;max-width:", "px;min-width:inherit;"], styledSelectButtonDefaultWidth);
export var StyledLabel = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledLabel",
  componentId: "core-12_44_0__sc-1uf5708-22"
})(["", " flex-grow:1;margin-right:", "px;outline:none;pointer-events:", ";user-select:none;"], getEllipsis(), spacing.sm, function (_ref10) {
  var $hoverable = _ref10.$hoverable;
  return $hoverable ? 'initial' : 'none';
});
export var StyledIndicators = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledIndicators",
  componentId: "core-12_44_0__sc-1uf5708-23"
})(["align-items:center;align-self:flex-start;display:flex;height:34px;justify-content:flex-end;margin-left:", "px;min-width:40px;width:40px;"], spacing.xs);
export var StyledClearIcon = /*#__PURE__*/styled(Button).withConfig({
  displayName: "StyledClearIcon",
  componentId: "core-12_44_0__sc-1uf5708-24"
})([""]);
export var StyledSpinner = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledSpinner",
  componentId: "core-12_44_0__sc-1uf5708-25"
})(["align-items:center;display:flex;flex:0 0 auto;justify-content:center;line-height:0;"]);
export var StyledArrowContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledArrowContainer",
  componentId: "core-12_44_0__sc-1uf5708-26"
})(["align-items:center;display:inline-flex;height:16px;justify-content:flex-end;margin-left:", "px;width:8px;"], spacing.sm);
export var StyledArrow = /*#__PURE__*/styled.span.withConfig({
  displayName: "StyledArrow",
  componentId: "core-12_44_0__sc-1uf5708-27"
})(["display:inline-flex;svg{fill:", ";}"], colors.gray45);
export var StyledArrowOutline = /*#__PURE__*/styled.polygon.withConfig({
  displayName: "StyledArrowOutline",
  componentId: "core-12_44_0__sc-1uf5708-28"
})([""]);
export var StyledArrowFill = /*#__PURE__*/styled.polygon.withConfig({
  displayName: "StyledArrowFill",
  componentId: "core-12_44_0__sc-1uf5708-29"
})([""]);
export var StyledTrigger = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledTrigger",
  componentId: "core-12_44_0__sc-1uf5708-30"
})(["", " align-items:center;background-color:", ";border-color:", ";border-radius:", "px;border-style:solid;border-width:1px;color:", ";cursor:pointer;display:inline-flex;height:36px;min-height:36px;outline:none;padding:0 ", "px;position:relative;white-space:nowrap;width:", ";&::placeholder{border-color:", ";}&:hover,&:active,&[data-qa=", "]{background-color:", ";border-color:", ";color:", ";}&:focus,&:focus-within,&[data-qa=", "]{", " ", "{stroke:", ";}}", " ", " ", " ", " ", " ", " ", "}"], getTypographyIntent('body'), colors.white, colors.gray50, borderRadius.md, colors.gray15, spacing.md, function (_ref11) {
  var $block = _ref11.$block;
  return $block ? '100%' : "".concat(styledSelectButtonDefaultWidth, "px");
}, colors.gray45, dataQa.hovered, colors.white, colors.gray20, colors.gray15, dataQa.focused, getFocus(), StyledCircle, colors.blue50, function (_ref12) {
  var _ref12$$placeholder = _ref12.$placeholder,
    $placeholder = _ref12$$placeholder === void 0 ? false : _ref12$$placeholder;
  return $placeholder && css(["", "{color:", ";}"], StyledLabel, colors.gray45);
}, function (_ref13) {
  var $disabled = _ref13.$disabled;
  return $disabled && css(["background-color:", ";border-color:", ";color:", ";cursor:default;pointer-events:none;", "{color:", ";}", "{svg{fill:", ";}}"], colors.gray94, colors.gray50, colors.gray45, StyledLabel, colors.gray70, StyledArrow, colors.gray70);
}, function (_ref14) {
  var $error = _ref14.$error,
    $disabled = _ref14.$disabled;
  if ($error && !$disabled) {
    return css(["&,&:hover{border-color:", ";border-color:var(--core-input-error-border-color,", ");}&:hover:focus{", "}"], colors.red50, colors.red50, getFocus());
  }
}, function (_ref15) {
  var $hasClearIcon = _ref15.$hasClearIcon;
  return css(["", "{opacity:", ";}"], StyledClearIcon, $hasClearIcon ? 1 : 0);
}, function (_ref16) {
  var $multiple = _ref16.$multiple;
  return $multiple && css(["height:auto;&:focus-within{", "}"], getFocus());
}, function (_ref17) {
  var $open = _ref17.$open,
    $hasClearIcon = _ref17.$hasClearIcon;
  return $open && $hasClearIcon && css(["", "{opacity:1;pointer-events:all;}"], StyledClearIcon);
}, function (_ref18) {
  var $open = _ref18.$open,
    _ref18$$placeholder = _ref18.$placeholder,
    $placeholder = _ref18$$placeholder === void 0 ? false : _ref18$$placeholder;
  return $open && $placeholder && css(["", "{opacity:1;pointer-events:all;}"], StyledLabel);
});
export var StyledOverlay = /*#__PURE__*/styled(Card).withConfig({
  displayName: "StyledOverlay",
  componentId: "core-12_44_0__sc-1uf5708-31"
})(["display:flex;flex-direction:column;"]);
export var StyledVirtuoso = /*#__PURE__*/styled(Virtuoso).withConfig({
  displayName: "StyledVirtuoso",
  componentId: "core-12_44_0__sc-1uf5708-32"
})(["flex:1 1 auto;"]);
export var StyledEllipses = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledEllipses",
  componentId: "core-12_44_0__sc-1uf5708-33"
})(["", " display:inline-flex;> div{display:inline-flex;width:100%;}"], getEllipsis());
export var StyledMultiValueContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiValueContainer",
  componentId: "core-12_44_0__sc-1uf5708-34"
})(["display:flex;flex-wrap:wrap;margin-bottom:2px;margin-right:", "px;margin-top:2px;min-width:0;width:100%;"], spacing.xs);
export var StyledTokenList = /*#__PURE__*/styled.ul.withConfig({
  displayName: "StyledTokenList",
  componentId: "core-12_44_0__sc-1uf5708-35"
})(["display:contents;list-style:none;margin:0;padding:0;"]);
export var StyledMultiValue = /*#__PURE__*/styled.li.withConfig({
  displayName: "StyledMultiValue",
  componentId: "core-12_44_0__sc-1uf5708-36"
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:0 1 auto;> div{max-width:178px;width:100%;}"], spacing.xs);
export var StyledMultiInputContainer = /*#__PURE__*/styled.div.withConfig({
  displayName: "StyledMultiInputContainer",
  componentId: "core-12_44_0__sc-1uf5708-37"
})(["margin-bottom:2px;margin-right:", "px;margin-top:2px;flex:1;max-width:100%;min-width:24px;"], spacing.xs);
export var StyledMultiInput = /*#__PURE__*/styled.button.withConfig({
  displayName: "StyledMultiInput",
  componentId: "core-12_44_0__sc-1uf5708-38"
})(["background-color:transparent;border-width:0;font-family:inherit;padding:0;height:24px;width:100%;text-align:left;cursor:inherit;", " ", " ", " &:focus{box-shadow:none;outline:none;}"], getTypographyIntent('body'), function (_ref19) {
  var $isNavigatingTokens = _ref19.$isNavigatingTokens;
  return $isNavigatingTokens && css(["color:transparent;"]);
}, function (_ref20) {
  var $placeholder = _ref20.$placeholder;
  return $placeholder && css(["color:", ";"], colors.gray45);
});
//# sourceMappingURL=SuperSelect.styles.js.map