@cimpress/react-components
Version:
React components to support the MCP styleguide
253 lines (241 loc) • 9.27 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dropdown = void 0;
const react_1 = __importStar(require("react"));
const css_1 = require("@emotion/css");
const internal_1 = require("./internal");
const cvar_1 = __importDefault(require("./theme/cvar"));
const ArrowAlt_1 = require("./accordion/ArrowAlt");
const nonDefaultVariants = ['simple', 'navtab'];
const dropdownContainerCss = (0, css_1.css) `
position: relative;
text-decoration: none;
display: inline-block;
`;
const getInnerDropdownCss = (variant, disabled) => {
const determineColor = () => {
if (disabled) {
return (0, cvar_1.default)('color-text-disabled');
}
if (nonDefaultVariants.includes(variant)) {
return (0, cvar_1.default)('color-button-primary');
}
return (0, cvar_1.default)('color-text-label');
};
const determineHoverBackgroundColor = () => {
if (disabled) {
return (0, cvar_1.default)('color-background-disabled');
}
if (variant === 'navtab') {
return (0, cvar_1.default)('color-background');
}
return (0, cvar_1.default)('color-hover');
};
return (0, css_1.css) `
background: ${(0, cvar_1.default)('color-background')};
background-color: ${(0, cvar_1.default)('color-background')};
border: 1px solid ${nonDefaultVariants.includes(variant) ? 'transparent' : (0, cvar_1.default)('color-border-default')};
border-radius: 2px;
box-shadow: none;
color: ${determineColor()};
cursor: ${disabled ? 'not-allowed' : 'pointer'};
display: inline-block;
font-size: 14px;
font-weight: 600;
line-height: 1.286;
margin-bottom: 0;
opacity: ${disabled ? 0.65 : 1};
padding: ${(0, cvar_1.default)('spacing-8')} ${(0, cvar_1.default)('spacing-16')};
text-align: center;
text-shadow: none;
touch-action: manipulation;
user-select: none;
vertical-align: middle;
white-space: nowrap;
&:hover {
color: ${variant === 'navtab' ? (0, cvar_1.default)('color-dropdown-label-active') : determineColor()};
background-color: ${determineHoverBackgroundColor()};
text-decoration: none;
}
&:active {
color: ${(0, cvar_1.default)('color-dropdown-active')};
}
`;
};
const getOpenDropdownCss = (variant) => (0, css_1.css) `
color: ${(0, cvar_1.default)('color-dropdown-active')};
border: 1px solid ${variant === 'navtab' ? 'transparent' : (0, cvar_1.default)('color-border-dropdown-active')};
box-shadow: none;
`;
const caretCss = (0, css_1.css) `
border: none;
box-sizing: border-box;
display: inline-block;
height: 100%;
margin: 0 ${(0, cvar_1.default)('spacing-8')};
vertical-align: middle;
width: 0;
`;
const getDropdownMenuContainerCss = (open) => {
if (!open) {
return (0, css_1.css) `
display: none;
`;
}
return (0, css_1.css) `
background-color: ${(0, cvar_1.default)('color-background')};
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 2px;
box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
color: ${(0, cvar_1.default)('color-text-label')};
display: block;
float: left;
font-size: 14px;
font-weight: 400;
left: 0;
line-height: 24px;
list-style: none;
min-width: 160px;
margin: ${(0, cvar_1.default)('spacing-2')} 0 0;
position: absolute;
text-align: left;
top: 100%;
z-index: 1000;
padding-left: 0px;
`;
};
const dividerCss = (0, css_1.css) `
background-color: #e5e5e5;
height: 1px;
overflow: hidden;
`;
const itemCss = (0, css_1.css) `
cursor: pointer;
box-sizing: border-box;
&:has(> :disabled:only-child) {
cursor: not-allowed;
}
& :disabled {
cursor: not-allowed;
}
&:hover {
background-color: ${(0, cvar_1.default)('color-hover')};
}
a,
button {
width: 100%;
padding: ${(0, cvar_1.default)('spacing-12')} ${(0, cvar_1.default)('spacing-24')};
}
a {
display: block;
&:hover {
text-decoration: none;
}
}
button {
background: 0 0;
background-image: none;
border: none;
color: ${(0, cvar_1.default)('color-button-primary')};
text-decoration: none;
line-height: 18px;
outline: 0;
position: relative;
text-align: left;
width: 100%;
&:disabled {
color: ${(0, cvar_1.default)('color-icon-disabled')};
}
}
button:hover {
text-decoration: none;
}
.crc-anchor,
.crc-button {
text-align: left;
}
`;
const shouldShowCaret = (variant) => variant !== 'simple';
const Dropdown = (_a) => {
var { className, variant = 'default', as: AsComponentProp = 'div', disabled = false, title } = _a, passthruProps = __rest(_a, ["className", "variant", "as", "disabled", "title"]);
const [open, setIsOpen] = (0, react_1.useState)(false);
const ref = (0, react_1.useRef)(null);
const toggle = () => setIsOpen(!open);
const detectOutsideClick = (e) => {
var _a;
if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
setIsOpen(false);
}
};
// Listen for outside clicks
(0, react_1.useEffect)(() => {
document.addEventListener('click', detectOutsideClick, true);
return () => document.removeEventListener('click', detectOutsideClick, true);
});
let InnerAsComponent = 'button';
let AsComponent = AsComponentProp;
if (variant === 'navtab') {
AsComponent = 'li';
InnerAsComponent = 'a';
}
// Filter out props we don't want to pass through to child components
const { eventTypes, outsideClickIgnoreClass, preventDefault, stopPropagation, disableOnClickOutside, enableOnClickOutside, children } = passthruProps, validPassthruProps = __rest(passthruProps, ["eventTypes", "outsideClickIgnoreClass", "preventDefault", "stopPropagation", "disableOnClickOutside", "enableOnClickOutside", "children"]);
const innerClassName = (0, css_1.cx)(getInnerDropdownCss(variant, disabled), {
[getOpenDropdownCss(variant)]: open,
});
return (react_1.default.createElement(AsComponent, Object.assign({ ref: ref, className: (0, css_1.cx)('crc-dropdown', dropdownContainerCss, className, { open }) }, validPassthruProps),
react_1.default.createElement(InnerAsComponent, { disabled: !children || !react_1.default.Children.count(children) || disabled, onClick: toggle, className: innerClassName },
title,
' ',
shouldShowCaret(variant) && (react_1.default.createElement("span", { className: (0, css_1.cx)(caretCss) },
react_1.default.createElement(ArrowAlt_1.ArrowAlt, { size: 10, color: (0, cvar_1.default)('color-button-primary') })))),
react_1.default.createElement(internal_1.BlockButton, { tabIndex: -1, className: (0, css_1.cx)(getDropdownMenuContainerCss(open)), as: "ul", onClick: toggle }, react_1.default.Children.map(children, child => {
if (!child) {
return null;
}
if (child.type === 'hr') {
return react_1.default.createElement("li", { className: (0, css_1.cx)(dividerCss), key: child.key });
}
return (react_1.default.createElement(internal_1.BlockButton, { tabIndex: -1, as: "li", className: (0, css_1.cx)(itemCss, { disabled: child.props.disabled }), key: child.key, onClick: child.props.disabled ? e => e.stopPropagation() : undefined }, child));
}))));
};
exports.Dropdown = Dropdown;
//# sourceMappingURL=Dropdown.js.map