@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
66 lines • 2.75 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef } from "react";
import { useRenameCSS } from "../theme/Theme.js";
import { TabsDescendantsProvider, TabsProvider, useTabsDescendants, } from "./Tabs.context.js";
import Tab from "./parts/tab/Tab.js";
import TabList from "./parts/tablist/TabList.js";
import TabPanel from "./parts/tabpanel/TabPanel.js";
import { useTabs } from "./useTabs.js";
/**
* A component that displays a set of tabs that can be used to switch between different views.
*
* @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tabs)
* @see 🏷️ {@link TabsProps}
*
* @example
* ```jsx
* <Tabs defaultValue="logg">
* <Tabs.List>
* <Tabs.Tab value="logg" label="Logg" />
* <Tabs.Tab value="inbox" label="Inbox" />
* <Tabs.Tab value="sendt" label="Sendt" />
* </Tabs.List>
* <Tabs.Panel value="logg">
* Logg-tab
* </Tabs.Panel>
* <Tabs.Panel value="inbox">
* Inbox-tab
* </Tabs.Panel>
* <Tabs.Panel value="sendt">
* Sendt-tab
* </Tabs.Panel>
* </Tabs>
* ```
*/
export const Tabs = forwardRef((_a, ref) => {
var { className, children, size = "medium", defaultValue = "", value, onChange, id, selectionFollowsFocus = false, loop = true, iconPosition = "left", fill = false } = _a, rest = __rest(_a, ["className", "children", "size", "defaultValue", "value", "onChange", "id", "selectionFollowsFocus", "loop", "iconPosition", "fill"]);
const { cn } = useRenameCSS();
const descendants = useTabsDescendants();
const tabsContext = useTabs({ defaultValue, value, onChange, id });
/**
* TabsProvider handles memoization of context values, so we can safely skip it here.
*/
const context = Object.assign(Object.assign({}, tabsContext), { selectionFollowsFocus,
loop,
size,
iconPosition,
fill });
return (React.createElement(TabsDescendantsProvider, { value: descendants },
React.createElement(TabsProvider, Object.assign({}, context),
React.createElement("div", Object.assign({ ref: ref }, rest, { id: id, className: cn("navds-tabs", className, `navds-tabs--${size}`) }), children))));
});
Tabs.Tab = Tab;
Tabs.List = TabList;
Tabs.Panel = TabPanel;
export default Tabs;
//# sourceMappingURL=Tabs.js.map