@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
58 lines (57 loc) • 1.93 kB
JavaScript
"use client";
import { jsx as t, jsxs as u, Fragment as v } from "react/jsx-runtime";
import { isValidElement as h, cloneElement as f } from "react";
import { D as g } from "./Icon.CAXZUNWo.js";
import { NumberIndicator as B } from "../numberindicator.BPWvqr7f.js";
import '../assets/NavigationTabList.B6x56sAV.css';const N = "ds-tabs_tabs-wrapper_nm2bv_1", W = "ds-tabs_scroll-wrapper_nm2bv_6", w = "ds-tabs_scroller_nm2bv_17", D = "ds-tabs_scroller--centered_nm2bv_28", j = "ds-tabs_tab_nm2bv_1", y = "ds-tabs_scroll-button_nm2bv_105", E = "ds-tabs_scroll-button--hidden_nm2bv_110", H = "ds-tabs_scroll-button--right_nm2bv_114", L = "ds-tabs_indicator_nm2bv_126", R = {
tabsWrapper: N,
scrollWrapper: W,
scroller: w,
scrollerCentered: D,
tab: j,
scrollButton: y,
scrollButtonHidden: E,
scrollButtonRight: H,
indicator: L
}, S = ({
tabs: e,
tabRefs: b,
scrollerClass: i,
scrollerRef: _,
selectedTabIndex: l,
handleNavigationKeydown: d,
setSelectedTab: p
}) => /* @__PURE__ */ t("ul", { className: i, ref: _, children: e.map(({
id: c,
linkComponent: r,
iconName: n,
numberIndicatorValue: a
}, s) => {
if (!h(r))
return null;
const m = f(r, {
// Add aria-current to the selected tab (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
"aria-current": l === s ? "page" : void 0,
children: /* @__PURE__ */ u(v, { children: [
n && /* @__PURE__ */ t(g, { name: n, "aria-hidden": "true" }),
r.props.children,
a && /* @__PURE__ */ t(B, { label: a })
] }),
className: R.tab,
id: c,
tabIndex: l === s ? 0 : -1,
// onKeyDown for focus handling and keyboard navigation
onKeyDown: (o) => d(o, s),
onClick: () => {
r.props.onClick && r.props.onClick(), p(s);
},
ref: (o) => {
b.current[s] = o;
}
});
return /* @__PURE__ */ t("li", { children: m }, c);
}) });
export {
S as N,
R as s
};