@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
147 lines (146 loc) • 4.32 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const DropDownMenu_styles = require("../DropDownMenu/DropDownMenu.styles.cjs");
require("../DropDownMenu/DropDownMenu.cjs");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButton", {
root: {
display: "flex",
alignItems: "center",
position: "relative"
},
multiple: {
backgroundColor: uikitStyles.theme.colors.bgPage,
borderWidth: 0,
borderColor: `${uikitStyles.theme.colors.border} transparent`,
borderRadius: uikitStyles.theme.radii.base,
"& $button": {
minWidth: 32,
maxWidth: 200,
padding: 0,
flex: "1 1 0%",
borderColor: "inherit",
borderRadius: 0,
fontWeight: uikitStyles.theme.typography.body.fontWeight,
"&:disabled": {
color: uikitStyles.theme.colors.textDisabled,
borderColor: "inherit"
},
"&:hover": {
borderColor: "inherit"
},
"&$firstButton": {
borderLeftColor: uikitStyles.theme.colors.border,
borderTopLeftRadius: "inherit",
borderBottomLeftRadius: "inherit",
"&:disabled": {
borderLeftColor: uikitStyles.theme.colors.border
}
},
"&$lastButton": {
borderRightColor: uikitStyles.theme.colors.border,
borderTopRightRadius: "inherit",
borderBottomRightRadius: "inherit",
"&:disabled": {
borderRightColor: uikitStyles.theme.colors.border
}
},
"&:not($firstButton)": {
marginLeft: "-1px"
},
"&$selected": {
backgroundColor: uikitStyles.theme.colors.bgContainer,
fontWeight: uikitStyles.theme.typography.label.fontWeight,
borderColor: "currentcolor",
zIndex: 2,
"&:hover:not(:disabled),&:focus-visible": {
backgroundColor: uikitStyles.theme.colors.bgHover
},
"&:disabled": {
zIndex: 1,
borderColor: uikitStyles.theme.colors.border
}
}
}
},
splitGroup: {
width: "fit-content",
"& $button:not($firstButton)": {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
"&:not([aria-controls])": {
borderLeftWidth: 0
}
},
"& $button:not($lastButton)": {
borderTopRightRadius: 0,
borderBottomRightRadius: 0,
"&:not([aria-controls])": {
borderRightWidth: 0
},
"&::after": {
content: "''",
position: "absolute",
inset: "4px -1px 4px auto",
width: 1,
zIndex: 1,
height: "auto",
backgroundColor: "currentcolor"
}
}
},
splitGroupDisabled: {},
button: {
position: "relative",
// prevent the focus ring to be hidden by sibling hover background
[`&:focus-visible, &.${DropDownMenu_styles.staticClasses.iconSelected}`]: {
zIndex: 5
}
},
selected: {},
vertical: {
flexDirection: "column",
alignItems: "stretch",
height: "auto",
borderColor: `transparent ${uikitStyles.theme.colors.border}`,
"& $button": {
minWidth: 32,
flex: "1 1 32px",
"&$firstButton": {
borderTopColor: uikitStyles.theme.colors.border,
borderTopLeftRadius: "inherit",
borderTopRightRadius: "inherit",
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
},
"&$lastButton": {
borderBottomColor: uikitStyles.theme.colors.border,
borderBottomLeftRadius: "inherit",
borderBottomRightRadius: "inherit",
borderTopLeftRadius: 0,
borderTopRightRadius: 0
},
"&:not($firstButton)": {
marginLeft: 0,
marginTop: -1
},
"&$selected": {
height: 32,
borderColor: "currentcolor"
}
}
},
// TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
firstButton: {},
lastButton: {},
// TODO - review the need for these classes in v6
primary: {},
primarySubtle: {},
primaryGhost: {},
secondary: {},
secondarySubtle: {},
secondaryGhost: {}
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;