@octopusdeploy/design-system-components
Version:
The design systems component library.
74 lines (73 loc) • 3.42 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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tab = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const Tab_1 = __importStar(require("@mui/material/Tab"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
exports.Tab = (0, react_1.forwardRef)(({ label, value, disabled, tabIndex, children, ...props }, ref) => {
// We need to spread the props here otherwise the tab would not navigate when clicking, MUI injects extra props from parent Tabs component so that the onChange in Tabs could be called when tab is clicked.
return (0, jsx_runtime_1.jsx)(Tab_1.default, { ref: ref, classes: { root: tabRootStyles, disabled: tabDisabledStyles }, ...props, label: label, value: value, disabled: disabled, tabIndex: tabIndex, disableTouchRipple: true, disableRipple: true });
});
exports.Tab.displayName = "Tab";
const tabRootStyles = (0, css_1.css)({
[`&.${Tab_1.tabClasses.root}`]: {
minWidth: "7.23rem", // Needed for DrawerWrapperLayout.
textTransform: "none",
minHeight: "unset",
font: design_system_tokens_1.text.body.bold.medium,
textOverflow: "ellipsis",
color: design_system_tokens_1.themeTokens.color.text.secondary,
flexDirection: "row",
padding: `${design_system_tokens_1.space[12]} ${design_system_tokens_1.space[24]}`,
justifyContent: "center",
alignItems: "center",
display: "inline-flex",
gap: design_system_tokens_1.space[8],
[":hover"]: {
backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.hover,
},
[`&.${Tab_1.tabClasses.selected}`]: {
color: design_system_tokens_1.themeTokens.color.text.selected,
},
},
});
const tabDisabledStyles = (0, css_1.css)({
[`&.${Tab_1.tabClasses.root}.${Tab_1.tabClasses.disabled}`]: {
color: design_system_tokens_1.themeTokens.color.text.disabled,
},
});