@navikt/ds-react/cjs/tabs/useTabs.js

React components from the Norwegian Labour and Welfare Administration.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useTabs = useTabs;
const react_1 = require("react");
const util_1 = require("../util");
const useControllableState_1 = require("../util/hooks/useControllableState");
function useTabs({ onChange, value, defaultValue = "", id, }) {
    const [focusedValue, setFocusedValue] = (0, react_1.useState)(defaultValue);
    const [selectedValue, setSelectedValue] = (0, useControllableState_1.useControllableState)({
        defaultValue,
        value,
        onChange,
    });
    /**
     * Sync focused `value` with controlled `selectedValue`
     */
    (0, react_1.useEffect)(() => {
        if (value != null) {
            setFocusedValue(value);
        }
    }, [value]);
    /**
     * Scope ids for better tracking
     */
    const uuid = (0, util_1.useId)();
    return {
        id: `tabs-${id !== null && id !== void 0 ? id : uuid}`,
        selectedValue,
        setSelectedValue,
        focusedValue,
        setFocusedValue,
        makeTabId,
        makeTabPanelId,
    };
}
function makeTabId(id, value) {
    return `${id}--tab-${value}`;
}
function makeTabPanelId(id, value) {
    return `${id}--tabpanel-${value}`;
}
//# sourceMappingURL=useTabs.js.map