@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 g, Fragment as m } from "react/jsx-runtime";
import { isValidElement as h, cloneElement as f } from "react";
import { D as B } from "./Icon.NSsVrYeq.js";
import { NumberIndicator as N } from "../numberindicator.Ddf3ESi7.js";
import '../assets/NavigationTabList.CFlVhUzS.css';const W = "ds-tabs_tabs-wrapper_ccgp4_1", w = "ds-tabs_scroll-wrapper_ccgp4_6", D = "ds-tabs_scroller_ccgp4_17", j = "ds-tabs_scroller--centered_ccgp4_28", v = "ds-tabs_tab_ccgp4_1", y = "ds-tabs_scroll-button_ccgp4_105", E = "ds-tabs_scroll-button--hidden_ccgp4_110", H = "ds-tabs_scroll-button--right_ccgp4_114", L = "ds-tabs_indicator_ccgp4_126", R = {
tabsWrapper: W,
scrollWrapper: w,
scroller: D,
scrollerCentered: j,
tab: v,
scrollButton: y,
scrollButtonHidden: E,
scrollButtonRight: H,
indicator: L
}, S = ({
tabs: n,
tabRefs: i,
scrollerClass: p,
scrollerRef: _,
selectedTabIndex: o,
handleNavigationKeydown: d,
setSelectedTab: b
}) => /* @__PURE__ */ t("ul", { className: p, ref: _, children: n.map(({
id: l,
linkComponent: r,
iconName: a,
numberIndicatorValue: e
}, s) => {
if (!h(r))
return null;
const u = f(r, {
// Add aria-current to the selected tab (https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/)
"aria-current": o === s ? "page" : void 0,
children: /* @__PURE__ */ g(m, { children: [
a && /* @__PURE__ */ t(B, { name: a, "aria-hidden": "true" }),
r.props.children,
e && /* @__PURE__ */ t(N, { label: e })
] }),
className: R.tab,
id: l,
tabIndex: o === s ? 0 : -1,
// onKeyDown for focus handling and keyboard navigation
onKeyDown: (c) => d(c, s),
onClick: () => {
r.props.onClick && r.props.onClick(), b(s);
},
ref: (c) => {
i.current[s] = c;
}
});
return /* @__PURE__ */ t("li", { children: u }, l);
}) });
export {
S as N,
R as s
};