@redocly/theme
Version:
Shared UI components lib
220 lines (205 loc) • 8.83 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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabButtonLink = exports.TabItem = exports.TabListContainer = void 0;
exports.TabList = TabList;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const Tab_1 = require("../../../markdoc/components/Tabs/Tab");
const Dropdown_1 = require("../../../components/Dropdown/Dropdown");
const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
const Button_1 = require("../../../components/Button/Button");
function TabList({ childrenArray, size, overflowTabs, visibleTabs, setTabRef, onTabClick, handleKeyboard, getTabId, activeTab, isAnimating, highlightStyle, allTabsHidden, tabsContainerRef, }) {
return (react_1.default.createElement(exports.TabListContainer, { role: "tablist", ref: tabsContainerRef, "data-animating": isAnimating },
react_1.default.createElement(HighlightBar, { size: size, style: { left: highlightStyle.left, width: highlightStyle.width } },
react_1.default.createElement("div", null)),
childrenArray.map((child, index) => {
if (!visibleTabs.includes(index))
return null;
const { label } = child.props;
const tabId = getTabId(label, index);
return (react_1.default.createElement(Tab_1.Tab, { key: `key-${tabId}`, tabId: tabId, label: label, size: size, disabled: child.props.disable, setRef: (el) => {
setTabRef(el, index);
if (el) {
el.setAttribute('data-label', label);
el.setAttribute('data-animating', isAnimating.toString());
}
}, onKeyDown: (event) => handleKeyboard(event, index), onClick: () => {
onTabClick(label);
} }));
}),
react_1.default.createElement(exports.TabItem, { size: size, active: overflowTabs.some((index) => activeTab === childrenArray[index].props.label), tabIndex: 0 }, overflowTabs.length > 0 && (react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(exports.TabButtonLink, { size: size, className: overflowTabs.some((index) => activeTab === childrenArray[index].props.label)
? 'active'
: undefined }, allTabsHidden ? activeTab : 'More'), alignment: "start", withArrow: true },
react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, overflowTabs.map((index) => {
const { label } = childrenArray[index].props;
const tabId = getTabId(label, index);
return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: `more-${tabId}`, active: activeTab === label, onAction: () => {
onTabClick(index);
}, disabled: childrenArray[index].props.disable }, label));
})))))));
}
exports.TabListContainer = styled_components_1.default.ul `
position: relative;
display: flex;
gap: var(--md-tabs-gap);
width: 100%;
min-width: 0;
position: relative;
&::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: var(--md-tabs-border);
border-width: var(--md-tabs-border-width);
pointer-events: none;
}
&& {
padding: var(--md-tabs-padding);
margin-block-end: 0;
margin: 0;
& > li {
margin-bottom: 0px;
}
}
`;
exports.TabItem = styled_components_1.default.li `
display: inline-flex;
list-style: none;
cursor: pointer;
align-items: center;
padding: var(--md-tabs-tab-wrapper-padding);
z-index: 1;
${({ active, size }) => active
? (0, styled_components_1.css) `
border: solid var(--md-tabs-active-tab-border-color);
border-width: var(--md-tabs-${size}-active-tab-border-width);
`
: (0, styled_components_1.css) `
border: solid var(--md-tabs-hover-tab-border-color);
border-width: var(--md-tabs-${size}-hover-tab-border-width);
&:hover {
border: solid var(--md-tabs-hover-tab-border-color);
border-width: var(--md-tabs-${size}-hover-tab-border-width);
}
`}
div > div > ul {
padding-left: var(--spacing-unit);
}
&:focus-visible {
outline: none;
position: relative;
&::after {
content: '';
position: absolute;
top: -2px;
right: -4px;
bottom: -2px;
left: -4px;
border: 1px solid var(--button-border-color-focused);
border-radius: 6px;
pointer-events: none;
}
}
`;
const HighlightBar = styled_components_1.default.div `
position: absolute;
top: 0;
bottom: 0;
border: solid var(--md-tabs-active-tab-border-color);
border-width: var(--md-tabs-${({ size }) => size}-active-tab-border-width);
transition:
left 300ms ease-in-out,
width 300ms ease-in-out;
z-index: 0;
padding: var(--md-tabs-tab-wrapper-padding);
& > div {
width: 100%;
height: 100%;
background-color: var(--md-tabs-active-tab-bg-color);
border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
}
`;
exports.TabButtonLink = (0, styled_components_1.default)(Button_1.Button) `
color: var(--md-tabs-tab-text-color);
font-family: var(--md-tabs-tab-font-family);
font-style: var(--md-tabs-tab-font-style);
background-color: var(--md-tabs-tab-bg-color);
transition:
background-color 300ms ease-in-out,
color 300ms ease-in-out,
padding 300ms ease-in-out,
border-radius 300ms ease-in-out;
${({ size }) => size &&
(0, styled_components_1.css) `
padding: var(--md-tabs-${size}-tab-padding);
font-size: var(--md-tabs-${size}-tab-font-size);
font-weight: var(--md-tabs-${size}-tab-font-weight);
line-height: var(--md-tabs-${size}-tab-line-height);
border-radius: var(--md-tabs-${size}-tab-border-radius);
`}
&.active {
color: var(--md-tabs-active-tab-text-color);
font-size: var(--md-tabs-${({ size }) => size}-active-tab-font-size);
font-family: var(--md-tabs-active-tab-font-family);
font-style: var(--md-tabs-active-tab-font-style);
font-weight: var(--md-tabs-${({ size }) => size}-active-tab-font-weight);
line-height: var(--md-tabs-${({ size }) => size}-active-tab-line-height);
background-color: var(--md-tabs-active-tab-bg-color);
border-radius: var(--md-tabs-${({ size }) => size}-active-tab-border-radius);
padding: var(--md-tabs-${({ size }) => size}-active-tab-padding);
}
&:hover {
color: var(--md-tabs-hover-tab-text-color);
font-size: var(--md-tabs-${({ size }) => size}-hover-tab-font-size);
font-family: var(--md-tabs-hover-tab-font-family);
font-style: var(--md-tabs-hover-tab-font-style);
font-weight: var(--md-tabs-${({ size }) => size}-hover-tab-font-weight);
background-color: var(--md-tabs-hover-tab-bg-color);
line-height: var(--md-tabs-${({ size }) => size}-hover-tab-line-height);
border-radius: var(--md-tabs-${({ size }) => size}-hover-tab-border-radius);
padding: var(--md-tabs-${({ size }) => size}-hover-tab-padding);
}
${({ disabled }) => disabled &&
(0, styled_components_1.css) `
color: var(--md-tabs-tab-text-disabled-color);
cursor: not-allowed;
&:hover {
color: var(--md-tabs-tab-text-disabled-color);
background-color: transparent;
}
`}
svg {
flex-shrink: 0;
}
`;
//# sourceMappingURL=TabList.js.map